/**
* ShiftBridge V-Connect Design Tokens
* Version: 1.0
* Framework: NobleUI (Bootstrap 5 based)
* Last Updated: May 12, 2026
*
* This file contains all CSS custom properties for the V-Connect redesign.
* Use these tokens instead of hardcoded values throughout the application.
*/
/* ==========================================================================
DARK MODE / FORCED-COLOURS IMMUNITY
--------------------------------------------------------------------------
The app layout always sets data-bs-theme="light" on , but Chrome's
OS dark-mode still fires prefers-color-scheme:dark which can invert
Bootstrap 5's *-subtle background variables, make bg-dark text invisible,
and override bg-white / bg-light card headers.
Fix: declare color-scheme:light on :root so the browser commits to the
light rendering pipeline for ALL CSS primitives on this page. Combined
with the explicit token overrides below this makes every Bootstrap utility
class render correctly regardless of the user's OS theme.
========================================================================== */
:root {
color-scheme: light only;
}
/* ─── LIGHT-MODE ENFORCEMENT ────────────────────────────────────────────────
Since we don't yet offer a dark mode, force every element into light
rendering regardless of the user's OS/browser preference. This targets
the specific elements that browsers' dark-mode UA stylesheets override:
form controls, table text, card text, and inherited body colour.
When dark mode is implemented later, these rules move under
[data-bs-theme="light"] and a parallel [data-bs-theme="dark"] block
provides the dark palette. ─────────────────────────────────────────── */
/* Body & inherited text */
html, body {
color: #212529 !important;
background-color: #f4f5f7 !important;
}
/* Form controls — browsers aggressively restyle these in dark mode */
input:not(.form-check-input), select, textarea, .form-control, .form-select {
color: #212529 !important;
background-color: #ffffff !important;
border-color: #dee2e6 !important;
}
input::placeholder, textarea::placeholder, .form-control::placeholder {
color: #6c757d !important;
}
/* Bootstrap switches: keep their native checked/unchecked colours */
.form-check-input[type="checkbox"] {
background-color: #dee2e6 !important;
border-color: #adb5bd !important;
}
.form-check-input[type="checkbox"]:checked {
background-color: #0d6efd !important;
border-color: #0d6efd !important;
}
/* Tables */
.table, .table td, .table th, .table thead th {
color: #212529 !important;
}
.table-hover tbody tr:hover {
color: #212529 !important;
background-color: rgba(0,0,0,.03) !important;
}
/* Cards */
.card, .card-body, .card-header {
color: #212529 !important;
background-color: #ffffff !important;
}
.card-header {
border-bottom-color: #e9ecef !important;
}
/* Text utilities that browsers can override */
.text-secondary { color: #6c757d !important; }
.text-muted { color: #6c757d !important; }
.small, small { color: inherit !important; }
/* Forced-colours / high-contrast: opt out entirely */
@media (forced-colors: active) {
:root { forced-color-adjust: none; }
*, *::before, *::after { forced-color-adjust: none; }
}
/* bg-dark badges: guarantee white text — bg-dark is #212529 which the
browser can darken further in forced-colours mode making text invisible. */
.badge.bg-dark,
.badge.text-bg-dark {
color: #ffffff !important;
background-color: #212529 !important;
}
/* Bootstrap 5 *-subtle badges: pin the foreground so forced-colours
cannot produce same-colour-on-same-colour combos. */
.badge.bg-primary-subtle,
span.bg-primary-subtle { color: #0a58ca !important; }
.badge.bg-success-subtle,
span.bg-success-subtle { color: #0a6640 !important; }
.badge.bg-danger-subtle,
span.bg-danger-subtle { color: #842029 !important; }
.badge.bg-warning-subtle,
span.bg-warning-subtle { color: #664d03 !important; }
.badge.bg-info-subtle,
span.bg-info-subtle { color: #055160 !important; }
.badge.bg-secondary-subtle,
span.bg-secondary-subtle { color: #41464b !important; }
/* Card headers with bg-white: lock background + text so dark-mode doesn't
turn them dark-on-dark. */
.card-header.bg-white {
background-color: #ffffff !important;
color: #212529 !important;
}
/* bg-light info/help boxes: keep them visibly light with dark text. */
.card.bg-light,
.bg-light.card-body,
.alert.bg-light {
background-color: #f8f9fa !important;
color: #212529 !important;
}
/* text-dark: explicit hex so forced-colours mode cannot make it transparent. */
.text-dark {
color: #212529 !important;
}
/* table-hover rows: ensure row text stays readable when the browser
applies its own hover highlight colour in dark/forced-colours mode. */
.table-hover > tbody > tr:hover > * {
color: inherit;
}
/* ==========================================================================
COLOR PALETTE
========================================================================== */
:root {
/* Primary Brand Colors */
--sb-navy: #0f172a;
--sb-navy-light: #1e293b;
--sb-primary: #3b82f6;
--sb-primary-light: #60a5fa;
--sb-primary-dark: #2563eb;
/* Status Colors */
--sb-success: #22c55e;
--sb-success-light: #86efac;
--sb-success-bg: rgba(34, 197, 94, 0.1);
--sb-warning: #f59e0b;
--sb-warning-light: #fcd34d;
--sb-warning-bg: rgba(245, 158, 11, 0.1);
--sb-danger: #ef4444;
--sb-danger-light: #fca5a5;
--sb-danger-bg: rgba(239, 68, 68, 0.1);
--sb-danger-bg-heavy: rgba(239, 68, 68, 0.15);
--sb-info: #06b6d4;
--sb-info-light: #67e8f9;
--sb-info-bg: rgba(6, 182, 212, 0.1);
/* Sidebar Colors */
--sb-sidebar-bg-start: #1e293b;
--sb-sidebar-bg-end: #0f172a;
--sb-sidebar-text: rgba(255, 255, 255, 0.8);
--sb-sidebar-text-hover: #ffffff;
--sb-sidebar-active-bg: rgba(77, 138, 240, 0.3);
--sb-sidebar-active-bg-strong: rgba(77, 138, 240, 0.4);
--sb-sidebar-brand-text: #4d8af0;
--sb-sidebar-border: rgba(255, 255, 255, 0.1);
/* Background Colors */
--sb-content-bg: #f8f9fa;
--sb-card-bg: #ffffff;
--sb-card-header-bg: #f8f9fa;
--sb-topbar-bg-start: #ffffff;
--sb-topbar-bg-end: #f1f5f9;
/* Text Colors */
--sb-text-primary: #212529;
--sb-text-secondary: #64748b;
--sb-text-muted: #6c757d;
--sb-text-white: #ffffff;
/* Border Colors */
--sb-border: #e2e8f0;
--sb-border-light: #dee2e6;
--sb-divider: rgba(0, 0, 0, 0.1);
}
/* ==========================================================================
TYPOGRAPHY SCALE
========================================================================== */
:root {
/* Font Sizes */
--sb-text-xs: 0.75rem; /* 12px */
--sb-text-sm: 0.875rem; /* 14px */
--sb-text-base: 1rem; /* 16px */
--sb-text-lg: 1.125rem; /* 18px */
--sb-text-xl: 1.25rem; /* 20px - Section Heading */
--sb-text-2xl: 1.5rem; /* 24px */
--sb-text-3xl: 1.75rem; /* 28px - Page Title */
--sb-text-4xl: 2rem; /* 32px - Card Numbers */
/* Font Weights */
--sb-font-normal: 400;
--sb-font-medium: 500;
--sb-font-semibold: 600;
--sb-font-bold: 700;
/* Line Heights */
--sb-leading-tight: 1.25;
--sb-leading-normal: 1.5;
--sb-leading-relaxed: 1.625;
}
/* ==========================================================================
SPACING SYSTEM (8px Base Grid)
========================================================================== */
:root {
--sb-space-1: 4px; /* Tight spacing */
--sb-space-2: 8px; /* Default gap */
--sb-space-3: 12px; /* Card padding small */
--sb-space-4: 16px; /* Standard padding */
--sb-space-5: 20px; /* Card padding medium */
--sb-space-6: 24px; /* Section spacing */
--sb-space-8: 32px; /* Large gaps */
--sb-space-10: 40px; /* Page sections */
--sb-space-12: 48px; /* Major sections */
}
/* ==========================================================================
BORDER RADIUS SCALE
========================================================================== */
:root {
--sb-radius-sm: 4px; /* Buttons, badges, inputs */
--sb-radius-md: 6px; /* Cards, tables */
--sb-radius-lg: 8px; /* Modals, large cards */
--sb-radius-xl: 12px; /* Special containers */
--sb-radius-full: 9999px; /* Pills, avatars */
}
/* ==========================================================================
ELEVATION / SHADOW RULES
========================================================================== */
:root {
/* Card Shadows */
--sb-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.1);
--sb-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
--sb-shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.15);
--sb-shadow-modal: 0 8px 24px rgba(0, 0, 0, 0.2);
/* Component Shadows */
--sb-shadow-sidebar: 2px 0 8px rgba(0, 0, 0, 0.1);
--sb-shadow-topbar: 0 2px 8px rgba(0, 0, 0, 0.06);
--sb-shadow-button: 0 1px 2px rgba(0, 0, 0, 0.05);
--sb-shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.3);
}
/* ==========================================================================
STATUS BADGE STYLES
========================================================================== */
:root {
/* Online/Registered */
--sb-status-online-bg: rgba(34, 197, 94, 0.1);
--sb-status-online-text: #16a34a;
--sb-status-online-dot: #22c55e;
/* Offline/Unregistered */
--sb-status-offline-bg: rgba(239, 68, 68, 0.1);
--sb-status-offline-text: #dc2626;
--sb-status-offline-dot: #ef4444;
/* Warning/Degraded */
--sb-status-warning-bg: rgba(245, 158, 11, 0.1);
--sb-status-warning-text: #d97706;
--sb-status-warning-dot: #f59e0b;
/* Info */
--sb-status-info-bg: rgba(6, 182, 212, 0.1);
--sb-status-info-text: #0891b2;
--sb-status-info-dot: #06b6d4;
/* Critical */
--sb-status-critical-bg: rgba(239, 68, 68, 0.15);
--sb-status-critical-text: #dc2626;
--sb-status-critical-icon: #ef4444;
}
/* ==========================================================================
TRANSITIONS & ANIMATIONS
========================================================================== */
:root {
--sb-transition-fast: 150ms ease;
--sb-transition-normal: 200ms ease;
--sb-transition-slow: 300ms ease;
--sb-transition-bounce: 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* ==========================================================================
Z-INDEX SCALE
========================================================================== */
:root {
--sb-z-dropdown: 1000;
--sb-z-sticky: 1020;
--sb-z-fixed: 1030;
--sb-z-modal-backdrop: 1040;
--sb-z-modal: 1050;
--sb-z-popover: 1060;
--sb-z-tooltip: 1070;
--sb-z-toast: 1080;
}
/* ==========================================================================
UTILITY CLASSES (Optional - for quick reference)
========================================================================== */
/* Status Badge Utility Classes */
.sb-badge-online {
background-color: var(--sb-status-online-bg);
color: var(--sb-status-online-text);
}
.sb-badge-offline {
background-color: var(--sb-status-offline-bg);
color: var(--sb-status-offline-text);
}
.sb-badge-warning {
background-color: var(--sb-status-warning-bg);
color: var(--sb-status-warning-text);
}
.sb-badge-info {
background-color: var(--sb-status-info-bg);
color: var(--sb-status-info-text);
}
.sb-badge-critical {
background-color: var(--sb-status-critical-bg);
color: var(--sb-status-critical-text);
}
/* Typography Utility Classes */
.sb-text-page-title {
font-size: var(--sb-text-3xl);
font-weight: var(--sb-font-semibold);
color: var(--sb-text-primary);
}
.sb-text-section-heading {
font-size: var(--sb-text-xl);
font-weight: var(--sb-font-semibold);
color: var(--sb-text-primary);
}
.sb-text-card-number {
font-size: var(--sb-text-4xl);
font-weight: var(--sb-font-bold);
color: var(--sb-text-primary);
}
.sb-text-helper {
font-size: var(--sb-text-xs);
color: var(--sb-text-secondary);
}
/* Card Utility Classes */
.sb-card {
background-color: var(--sb-card-bg);
border: 1px solid var(--sb-border);
border-radius: var(--sb-radius-md);
box-shadow: var(--sb-shadow-card);
}
.sb-card-header {
background-color: var(--sb-card-header-bg);
border-bottom: 1px solid var(--sb-border-light);
padding: var(--sb-space-4) var(--sb-space-5);
border-radius: var(--sb-radius-md) var(--sb-radius-md) 0 0;
}
.sb-card-body {
padding: var(--sb-space-5);
}
.sb-card-footer {
background-color: var(--sb-card-header-bg);
border-top: 1px solid var(--sb-border-light);
padding: var(--sb-space-4) var(--sb-space-5);
border-radius: 0 0 var(--sb-radius-md) var(--sb-radius-md);
}
/* ==========================================================================
RESPONSIVE SIDEBAR / COLLAPSED-RAIL POLISH
--------------------------------------------------------------------------
Loaded after the layout's inline styles, so these are safe, additive
overrides — they do NOT modify the layout markup. They fix two issues that
showed up when the side menu is minimised (body.pbx-nav-collapsed) or on
narrow screens:
1. Rail-item LABELS are bare text nodes (e.g. " Home"), not wrapped
in a . The layout's collapse rule hides ".rail-item span", which
never matches, so the label text stayed and got clipped in the 60px
rail. We neutralise the text with font-size:0 on the collapsed item and
restore the icon's own size, so only clean icons remain.
2. The brand LOGO (max-width:158px) overflowed the 60px collapsed rail.
We clamp it down so it stays centred and uncut.
========================================================================== */
/* (1) Collapsed rail: hide bare-text labels, keep icons crisp and centred. */
body.pbx-nav-collapsed .pbx-nav-rail .rail-item {
font-size: 0 !important; /* collapses the bare text node */
gap: 0 !important;
}
body.pbx-nav-collapsed .pbx-nav-rail .rail-item i,
body.pbx-nav-collapsed .pbx-nav-rail .rail-item svg {
width: 17px !important;
height: 17px !important;
font-size: 17px !important; /* restore (lucide sizes off font) */
margin: 0 !important;
}
/* (2) Collapsed rail: keep the brand logo inside the 60px rail. */
body.pbx-nav-collapsed .pbx-nav-rail .rail-brand {
padding: 0 !important;
}
body.pbx-nav-collapsed .pbx-nav-rail .rail-brand img {
max-width: 34px !important; /* fits the 60px rail with margin */
margin: 0 auto !important;
}
body.pbx-nav-collapsed .pbx-nav-rail .pbx-brand-subtitle {
display: none !important;
}
/* Tidy the quick-action and tenant rows that are hidden when collapsed so they
never leave a stray gap. (Layout already display:none's them; this is a
belt-and-braces guard in case markup order changes.) */
body.pbx-nav-collapsed .pbx-nav-rail .rail-qa,
body.pbx-nav-collapsed .pbx-nav-rail .rail-tenant {
display: none !important;
}
/* --------------------------------------------------------------------------
Mid-size screens (tablet / small laptop, 992px–1199px): the two-rail nav is
visible here. Give the secondary panel a slightly tighter width so content
isn't squeezed, and prevent panel link labels from wrapping.
-------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
.pbx-nav-panel { width: 200px !important; }
.panel-link {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
/* --------------------------------------------------------------------------
Below 992px the layout already switches the rails to an offcanvas menu.
Make sure no leftover rail/panel can flash or reserve width on very narrow
screens, and keep tap targets comfortable.
-------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
.pbx-nav-rail,
.pbx-nav-panel { display: none !important; }
/* Offcanvas nav links: comfortable touch height. */
.offcanvas .nav-link {
padding-top: 11px;
padding-bottom: 11px;
}
}
/* ==========================================================================
TOPBAR ALIGNMENT FIXES
--------------------------------------------------------------------------
The layout styles the search icon with ".pbx-topbar-search i", but lucide.js
REPLACES every with an inline