/* ============================================================
   PAL-ERP ADMIN — EXPO UNIFIED DESIGN SYSTEM
   Based on DESIGN-unified.md

   HOW TO CHANGE THE THEME:
   Edit the :root block below. All colors, fonts, spacing,
   radii and shadows are defined as tokens here.
   Components read from these tokens — no scattered overrides.
   ============================================================ */

/* ============================================================
   SECTION 1: DESIGN TOKENS (:root)
   ============================================================ */

:root,
[data-theme="light"] {

    /* 1A. COLOR TOKENS — LIGHT MODE (DESIGN-unified §2) */
    --color-primary:               #0D74CE;
    --color-primary-active:        #095EA8;
    --color-text-link:             #0D74CE;
    --color-text-link-secondary:   #476CFF;
    --color-ink:                   #171717;
    --color-body:                  #60646C;
    --color-muted:                 #999999;
    --color-muted-soft:            #CCCCCC;
    --color-hairline:              #EAEAEF;
    --color-hairline-soft:         #F5F5F7;
    --color-hairline-strong:       #DCDEE0;
    --color-canvas:                #FFFFFF;
    --color-canvas-soft:           #F8F9FA;
    --color-surface-card:          #FFFFFF;
    --color-surface-strong:        #F0F0F3;
    --color-surface-dark:          #111827;
    --color-surface-dark-elevated: #1F2937;
    --color-on-primary:            #FFFFFF;
    --color-on-dark:               #F9FAFB;
    --color-on-dark-soft:          #9CA3AF;
    --color-gradient-sky-light:    #CFE7FF;
    --color-gradient-sky-mid:      #A8C8E8;
    --color-warning:               #AB6400;
    --color-preview:               #8145B5;
    --color-accent-cyan:           #47C2FF;
    --color-error:                 #DC2626;
    --color-success:               #16A34A;
    --color-blue-vivid:            #0090FF;

    /* 1B. TYPOGRAPHY TOKENS (DESIGN-unified §3 — rem for text & typography) */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-code:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    --type-display-mega: 4rem;      /* 64px */
    --type-display-xl:   3rem;      /* 48px */
    --type-display-lg:   2.25rem;   /* 36px */
    --type-display-md:   1.75rem;   /* 28px */
    --type-display-sm:   1.375rem;  /* 22px */
    --type-title-md:     1.125rem;  /* 18px */
    --type-title-sm:     1rem;      /* 16px */
    --type-body-lg:      1.125rem;  /* 18px */
    --type-body-md:      1rem;      /* 16px */
    --type-body-sm:      0.875rem;  /* 14px */
    --type-caption:      0.8125rem; /* 13px */
    --type-label:        0.75rem;   /* 12px */
    --type-caption-up:   0.6875rem; /* 11px */
    --type-code:         0.8125rem; /* 13px */

    /* 1C. SPACING TOKENS (DESIGN-unified §4 — em for component-relative spacing) */
    --space-1:   0.25em;  /* 4px */
    --space-2:   0.5em;   /* 8px */
    --space-3:  0.75em;   /* 12px */
    --space-4:  1em;      /* 16px */
    --space-5:  1.25em;   /* 20px */
    --space-6:  1.5em;    /* 24px */
    --space-8:  2em;      /* 32px */
    --space-12: 3em;      /* 48px */
    --space-16: 4em;      /* 64px */
    --space-24: 6em;      /* 96px */

    /* 1D. BORDER RADIUS TOKENS (DESIGN-unified §5) */
    --radius-none:    0px;
    --radius-sm:      4px;
    --radius-md:      6px;
    --radius-lg:      8px;
    --radius-card:   12px;
    --radius-mockup: 16px;
    --radius-xl:     24px;
    --radius-pill:  9999px;

    /* 1E. SHADOW TOKENS (DESIGN-unified §20) */
    --shadow-none:   none;
    --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-card:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-nav:    0 1px 0 var(--color-hairline);
    --shadow-md:     0 4px 16px rgba(0,0,0,0.08);

    /* 1F. LAYOUT & SIDEBAR TOKENS */
    --container-max: 1200px;
    --nav-height:      80px;
    --sidebar-width:  250px;
    --sidebar-mini:    65px;

    /* Sidebar theme tokens - Light mode */
    --sidebar-bg:               #FFFFFF;
    --sidebar-border:           var(--color-hairline);
    --sidebar-text:             #4B5563;
    --sidebar-icon:             #6B7280;
    --sidebar-hover-bg:         #F3F4F6;
    --sidebar-hover-text:       #111827;
    --sidebar-active-bg:        #0D74CE;
    --sidebar-active-text:      #FFFFFF;
    --sidebar-active-shadow:    0 2px 8px rgba(13, 116, 206, 0.25);
    --sidebar-header-color:     #9CA3AF;
}

/* ============================================================
   DARK MODE TOKEN OVERRIDES (data-theme="dark")
   ============================================================ */
[data-theme="dark"] {
    --color-primary:               #0D74CE;
    --color-primary-active:        #095EA8;
    --color-text-link:             #38BDF8;
    --color-text-link-secondary:   #60A5FA;
    --color-ink:                   #F3F4F6;
    --color-body:                  #9CA3AF;
    --color-muted:                 #6B7280;
    --color-muted-soft:            #4B5563;
    --color-hairline:              #262E3B;
    --color-hairline-soft:         #1F2937;
    --color-hairline-strong:       #374151;
    --color-canvas:                #0F172A;
    --color-canvas-soft:           #0B1120;
    --color-surface-card:          #1E293B;
    --color-surface-strong:        #263347;
    --color-surface-dark:          #080E1A;
    --color-surface-dark-elevated: #111C2E;
    --color-on-primary:            #0F172A;
    --color-on-dark:               #F9FAFB;
    --color-on-dark-soft:          #94A3B8;
    --color-shadow-card:           0 1px 3px rgba(0,0,0,0.4);
    --shadow-subtle:               0 1px 3px rgba(0,0,0,0.3);
    --shadow-card:                 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
    --shadow-nav:                  0 1px 0 var(--color-hairline);
    --shadow-md:                   0 4px 16px rgba(0,0,0,0.5);

    /* Sidebar theme tokens - Dark mode */
    --sidebar-bg:               #0F172A;
    --sidebar-border:           rgba(255, 255, 255, 0.07);
    --sidebar-text:             #94A3B8;
    --sidebar-icon:             #64748B;
    --sidebar-hover-bg:         rgba(255, 255, 255, 0.08);
    --sidebar-hover-text:       #F9FAFB;
    --sidebar-active-bg:        #0D74CE;
    --sidebar-active-text:      #FFFFFF;
    --sidebar-active-shadow:    0 2px 10px rgba(13, 116, 206, 0.4);
    --sidebar-header-color:     rgba(255, 255, 255, 0.35);
}

/* ============================================================
   SECTION 2: BASE RESET & TYPOGRAPHY
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-primary);
    font-size: var(--type-body-md);
    color: var(--color-body);
    background-color: var(--color-canvas-soft);
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    color: var(--color-ink);
    font-weight: 600;
    line-height: 1.2;
    margin-top: 0;
}

a { color: var(--color-text-link); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--color-text-link-secondary); }

code, pre, kbd, samp { font-family: var(--font-code); font-size: var(--type-code); }

/* ============================================================
   SECTION 3: NAVBAR  (DESIGN-unified §7)
   ============================================================ */
.navbar-bg {
    /* NOTE: left must match sidebar-width so it does NOT cover the sidebar brand/logo area */
    background-color: var(--color-canvas) !important;
    height: var(--nav-height) !important;
    border-bottom: 1px solid var(--color-hairline) !important;
    box-shadow: var(--shadow-nav) !important;
    position: fixed !important;
    top: 0 !important;
    left: var(--sidebar-width) !important;
    right: 0 !important;
    z-index: 879; /* Below sidebar so sidebar brand is always visible */
}

.navbar.main-navbar {
    height: var(--nav-height) !important;
    left: var(--sidebar-width) !important;
    right: 0 !important;
    position: fixed !important;
    top: 0 !important;
    z-index: 892;
    background-color: var(--color-canvas) !important;
    border-bottom: 1px solid var(--color-hairline) !important;
    box-shadow: var(--shadow-nav) !important;
    padding: 0 var(--space-4) !important;
    display: flex !important;
    flex-wrap: nowrap !important;          /* NEVER let items wrap to a second row */
    align-items: center !important;
    justify-content: space-between !important;
    transition: left 0.3s ease;
}

.navbar.main-navbar .nav-link-lg {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: var(--radius-md);
    color: var(--color-ink) !important;
    font-size: 17px;
    text-decoration: none;
    transition: background-color 0.15s ease;
}
.navbar.main-navbar .nav-link-lg:hover {
    background-color: var(--color-surface-strong) !important;
    color: var(--color-ink) !important;
}

.navbar-nav.navbar-right {
    display: flex !important;
    flex-direction: row !important;       /* Always horizontal — overrides Bootstrap collapse */
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: var(--space-2);
    margin-left: auto !important;
    list-style: none;
    padding: 0;
    margin-bottom: 0;
}

.navbar .nav-link-user {
    display: flex !important; align-items: center;
    gap: var(--space-2);
    color: var(--color-ink) !important;
    font-size: var(--type-body-sm); font-weight: 500;
    padding: var(--space-2) var(--space-3) !important;
    border-radius: var(--radius-lg);
    transition: background-color 0.15s ease;
    cursor: pointer;
}
.navbar .nav-link-user:hover {
    background-color: var(--color-surface-strong) !important;
    color: var(--color-ink) !important;
}

/* User profile button & dropdown toggle in navbar */
.navbar-nav .nav-item.dropdown {
    position: relative !important;
}
.navbar-nav .dropdown-toggle {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: var(--space-2) var(--space-2) !important;
    border-radius: var(--radius-lg) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    color: var(--color-ink) !important;
    font-size: var(--type-body-sm) !important;
    font-weight: 500 !important;
    cursor: pointer;
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.navbar-nav .dropdown-toggle:hover,
.navbar-nav .dropdown-toggle:focus,
.navbar-nav .dropdown-toggle[aria-expanded="true"] {
    background-color: var(--color-surface-strong) !important;
    color: var(--color-ink) !important;
    outline: none !important;
    box-shadow: none !important;
}
.navbar-nav .dropdown-toggle::after {
    margin-left: var(--space-1);
    vertical-align: middle;
    border-top-color: var(--color-muted);
}

.user_profile_icon { font-size: 1.3rem; color: var(--color-muted); line-height: 1; display: inline-flex; align-items: center; }

/* Clear Cache button in navbar */
.btn-clear-cache {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background-color: var(--color-surface-strong);
    color: var(--color-ink);
    border: 1px solid var(--color-hairline-strong);
    border-radius: var(--radius-lg);
    height: 36px;
    padding: 0 var(--space-3);
    font-family: var(--font-primary);
    font-size: var(--type-caption);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-clear-cache:hover {
    background-color: var(--color-hairline-strong);
    color: var(--color-ink);
}
.btn-clear-cache i {
    font-size: 13px;
    color: var(--color-muted);
}
.btn-clear-cache .clear-cache-label {
    font-size: var(--type-caption);
}

/* Theme toggle button in navbar */
.btn-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background-color: var(--color-surface-strong);
    color: var(--color-ink);
    border: 1px solid var(--color-hairline-strong);
    border-radius: var(--radius-pill);
    height: 36px;
    padding: 0 var(--space-3);
    font-family: var(--font-primary);
    font-size: var(--type-caption);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-theme-toggle:hover {
    background-color: var(--color-hairline-strong);
    color: var(--color-ink);
}
.btn-theme-toggle i {
    font-size: 14px;
}
.btn-theme-toggle #themeIconLight {
    color: #F59E0B;
}
.btn-theme-toggle #themeIconDark {
    color: #38BDF8;
}

/* Navbar dropdown */
.navbar .dropdown-menu,
.navbar-nav .dropdown-menu,
div.dropdown-menu.dropdown-menu-right.show {
    background-color: var(--color-canvas) !important;
    border: 1px solid var(--color-hairline-strong) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-md) !important;
    padding: var(--space-2) !important;
    min-width: 190px !important;
    display: none;
    position: absolute !important;
    top: calc(100% + 6px) !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    flex-direction: column !important;
    list-style: none !important;
    margin: 0 !important;
    z-index: 1060 !important;
}

.navbar .dropdown-menu.show,
.navbar-nav .dropdown-menu.show {
    display: flex !important;
    flex-direction: column !important;
}

.navbar .dropdown-menu > li,
.navbar-nav .dropdown-menu > li {
    display: block !important;
    width: 100% !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.navbar .dropdown-menu .dropdown-item,
.navbar-nav .dropdown-menu .dropdown-item,
div.dropdown-menu.dropdown-menu-right.show > a {
    color: var(--color-ink) !important;
    font-size: var(--type-body-sm) !important;
    font-weight: 500;
    padding: var(--space-2) var(--space-4) !important;
    border-radius: var(--radius-md);
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    gap: var(--space-3);
    white-space: nowrap !important;
    transition: background-color 0.12s ease;
}
.navbar .dropdown-menu .dropdown-item i,
.navbar .dropdown-menu .dropdown-item em { width: 16px; color: var(--color-muted); font-size: 13px; text-align: center; }
.navbar .dropdown-menu .dropdown-item:hover,
div.dropdown-menu.dropdown-menu-right.show > a:hover {
    background-color: var(--color-surface-strong) !important;
    color: var(--color-ink) !important;
}
.navbar .dropdown-menu .dropdown-item.text-danger { color: #DC2626 !important; }
.navbar .dropdown-menu .dropdown-item.text-danger:hover { background-color: rgba(220, 38, 38, 0.1) !important; }
.navbar .dropdown-menu .dropdown-divider { border-color: var(--color-hairline) !important; margin: var(--space-1) 0; width: 100% !important; }


/* ============================================================
   SECTION 4: SIDEBAR
   ============================================================ */
.main-sidebar {
    background-color: var(--sidebar-bg) !important;
    border-right: 1px solid var(--color-hairline) !important;
    width: var(--sidebar-width) !important;
    box-shadow: none !important;
    position: fixed !important;
    top: 0 !important; height: 100% !important;
    z-index: 880;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.3s ease, left 0.3s ease, background-color 0.25s ease;
}

/* Smooth text span transitions in sidebar nav */
.main-sidebar .sidebar-menu li a span {
    transition: opacity 0.25s ease, width 0.25s ease;
    overflow: hidden;
    white-space: nowrap;
}


/* Brand - Expanded sidebar */
.main-sidebar .sidebar-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: var(--nav-height) !important;
    border-bottom: 1px solid var(--color-hairline) !important;
    background-color: var(--sidebar-bg) !important;
    padding: 0 var(--space-4) !important;
    flex-shrink: 0;
    position: relative;
}
.main-sidebar .sidebar-brand a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-ink) !important;
    font-family: var(--font-primary);
    font-size: var(--type-title-sm);
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    text-decoration: none;
    flex: 1;
    min-width: 0;
}
.sidebar-logo-img {
    max-height: 84px !important;
    max-width: 210px !important;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Brand - Mini sidebar */
.main-sidebar .sidebar-brand-sm {
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    height: var(--nav-height) !important;
    border-bottom: 1px solid var(--sidebar-border) !important;
    background-color: var(--sidebar-bg) !important;
    padding: 0 !important;
}
.main-sidebar .sidebar-brand-sm a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none;
}
.sidebar-logo-half-img {
    max-height: 42px;     /* bigger mini icon */
    max-width: 42px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Toggling logo in sidebar-mini */
body.sidebar-mini .main-sidebar .sidebar-brand {
    display: none !important;
}
body.sidebar-mini .main-sidebar .sidebar-brand-sm {
    display: flex !important;
}

/* Mobile close (×) button — only visible on small screens */
.btn-sidebar-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-hairline);
    background: var(--color-surface-strong);
    color: var(--color-ink);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-sidebar-close:hover {
    background: var(--color-hairline-strong);
    color: var(--color-ink);
}
@media (max-width: 1024px) {
    .btn-sidebar-close { display: flex !important; }
}

/* Sidebar Menu */
.main-sidebar .sidebar-menu {
    padding: var(--space-4) var(--space-3) !important;
    margin: 0 !important; list-style: none;
}
.main-sidebar .sidebar-menu li { display: block !important; margin-bottom: var(--space-1); }

.main-sidebar .sidebar-menu li.menu-header {
    padding: var(--space-5) var(--space-3) var(--space-1) !important;
    color: var(--sidebar-header-color) !important;
    font-size: var(--type-caption-up) !important; font-weight: 600 !important;
    text-transform: uppercase !important; letter-spacing: 1.5px !important;
}

.main-sidebar .sidebar-menu li a {
    position: relative;
    display: flex !important; align-items: center !important;
    height: 42px !important; padding: 0 var(--space-4) !important;
    color: var(--sidebar-text) !important;
    font-size: var(--type-body-sm) !important; font-weight: 500 !important;
    border-radius: var(--radius-md) !important;
    text-decoration: none; width: 100%;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.main-sidebar .sidebar-menu li a em,
.main-sidebar .sidebar-menu li a i {
    width: 20px !important; margin-right: var(--space-3) !important;
    text-align: center; font-size: 15px !important;
    color: var(--sidebar-icon) !important; flex-shrink: 0;
    transition: color 0.15s ease;
}
.main-sidebar .sidebar-menu li a span { flex: 1; }

.main-sidebar .sidebar-menu li a:hover {
    background-color: var(--sidebar-hover-bg) !important;
    color: var(--sidebar-hover-text) !important;
}
.main-sidebar .sidebar-menu li a:hover em,
.main-sidebar .sidebar-menu li a:hover i {
    color: var(--sidebar-hover-text) !important;
}

/* Active item on sidebar — uses design token active colors */
.main-sidebar .sidebar-menu li.active { background-color: transparent !important; }
.main-sidebar .sidebar-menu li.active > a {
    background-color: var(--sidebar-active-bg) !important;
    color: var(--sidebar-active-text) !important;
    font-weight: 600 !important;
    box-shadow: var(--sidebar-active-shadow) !important;
}
.main-sidebar .sidebar-menu li.active > a em,
.main-sidebar .sidebar-menu li.active > a i {
    color: var(--sidebar-active-text) !important;
}

/* Sidebar mini active & hover rules */
body.sidebar-mini .main-sidebar {
    background-color: var(--sidebar-bg) !important;
    border-right: 1px solid var(--sidebar-border) !important;
}
body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a {
    background-color: var(--sidebar-active-bg) !important;
    color: var(--sidebar-active-text) !important;
    box-shadow: var(--sidebar-active-shadow) !important;
}
body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a em,
body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a i {
    color: var(--sidebar-active-text) !important;
}
body.sidebar-mini .main-sidebar .sidebar-menu > li > a:hover {
    background-color: var(--sidebar-hover-bg) !important;
    color: var(--sidebar-hover-text) !important;
}
body.sidebar-mini .main-sidebar .sidebar-menu > li > a:hover em,
body.sidebar-mini .main-sidebar .sidebar-menu > li > a:hover i {
    color: var(--sidebar-hover-text) !important;
}

/* Sidebar mini tooltips on hover (Pure CSS tooltip fallback & styling) */
body.sidebar-mini .main-sidebar .sidebar-menu > li {
    position: relative;
}
body.sidebar-mini .main-sidebar .sidebar-menu > li > a[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--color-ink);
    color: var(--color-canvas);
    font-size: var(--type-caption);
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 1050;
    box-shadow: var(--shadow-md);
}
body.sidebar-mini .main-sidebar .sidebar-menu > li > a[data-tooltip]::after {
    content: "";
    position: absolute;
    left: calc(100% + 4px);
    top: 50%;
    transform: translateY(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent var(--color-ink) transparent transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 1050;
}
body.sidebar-mini .main-sidebar .sidebar-menu > li > a[data-tooltip]:hover::before,
body.sidebar-mini .main-sidebar .sidebar-menu > li > a[data-tooltip]:hover::after {
    opacity: 1;
}

/* Sidebar submenu — override scripts.js hard-coded #343a40 background */
.main-sidebar .sidebar-menu li ul.dropdown-menu {
    background-color: var(--sidebar-bg) !important;
    border: 1px solid var(--sidebar-border) !important;
    box-shadow: var(--shadow-md) !important;
    padding: var(--space-1) 0 !important;
    margin: 0 !important;
    border-radius: var(--radius-md) !important;
}
/* Also override inline style from scripts.js if applied */
.main-sidebar .sidebar-menu li ul[style*="background"] {
    background-color: var(--sidebar-bg) !important;
}
.main-sidebar .sidebar-menu li[style*="background"] {
    background-color: transparent !important;
}
.main-sidebar .sidebar-menu li ul.dropdown-menu li a {
    height: 36px !important;
    padding-left: calc(var(--space-4) + 20px + var(--space-3)) !important;
    font-size: var(--type-caption) !important; font-weight: 400 !important;
    color: var(--sidebar-text) !important;
    border-radius: var(--radius-md) !important;
}
.main-sidebar .sidebar-menu li ul.dropdown-menu li a:hover {
    background-color: var(--sidebar-hover-bg) !important;
    color: var(--sidebar-hover-text) !important;
}
.main-sidebar .sidebar-menu li ul.dropdown-menu li.active > a {
    background-color: var(--sidebar-hover-bg) !important;
    color: var(--sidebar-active-bg) !important;
    font-weight: 600 !important;
}

.main-sidebar .sidebar-menu li.active a.has-dropdown:after { transform: translate(0, -50%) rotate(90deg); }
.main-sidebar .sidebar-menu li a.has-dropdown:after {
    content: "";
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 900; position: absolute;
    top: 50%; right: var(--space-4);
    transform: translate(0, -50%);
    font-size: 11px; color: var(--sidebar-icon);
    transition: transform 0.25s ease;
}

/* ============================================================
   SECTION 5: MAIN CONTENT AREA (Minimum height for sticky footer)
   ============================================================ */
.main-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.main-content {
    flex: 1 0 auto;
    padding-left: calc(var(--sidebar-width) + var(--space-8)) !important;
    padding-right: var(--space-8) !important;
    padding-top: calc(var(--nav-height) + var(--space-8)) !important;
}

/* ============================================================
   SECTION 6: FOOTER
   ============================================================ */
.main-footer {
    flex-shrink: 0;
    padding: var(--space-6) var(--space-8) var(--space-6) calc(var(--sidebar-width) + var(--space-8)) !important;
    background-color: var(--color-canvas) !important;
    border-top: 1px solid var(--color-hairline) !important;
    color: var(--color-muted) !important;
    font-size: var(--type-caption) !important;
}
.footer_dev_link { color: var(--color-text-link) !important; font-weight: 500; }
.footer_dev_link:hover { color: var(--color-text-link-secondary) !important; }

/* ============================================================
   SECTION 7: SECTION HEADER  (page title + breadcrumb)
   ============================================================ */
.section .section-header {
    display: flex; align-items: center;
    background-color: var(--color-canvas);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-subtle);
    padding: var(--space-4) var(--space-6);
    margin-bottom: var(--space-6);
}
.section .section-header h1 {
    font-size: var(--type-title-md) !important;
    font-weight: 600 !important; color: var(--color-ink) !important; margin: 0 !important;
}
.section .section-header .section-header-breadcrumb {
    margin-left: auto; display: flex; align-items: center; gap: var(--space-2);
}
.section .section-header .section-header-breadcrumb .breadcrumb-item {
    font-size: var(--type-caption); color: var(--color-muted);
}
.section .section-header .section-header-breadcrumb .breadcrumb-item a {
    color: var(--color-text-link); font-weight: 500;
}
.section .section-header h1 i,
.section .section-header h1 .fas,
.section .section-header h1 .fa {
    color: var(--color-text-link); margin-right: var(--space-3);
}

/* ============================================================
   SECTION 8: CARDS  (DESIGN-unified §10 — flat, thin borders)
   ============================================================ */
.card {
    background-color: var(--color-surface-card) !important;
    border: 1px solid var(--color-hairline) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05) !important;
}
.card-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--color-hairline) !important;
    padding: var(--space-4) var(--space-6) !important;
    font-weight: 600; color: var(--color-ink);
}
.card-body { padding: var(--space-6) !important; }
.card-footer {
    background-color: var(--color-canvas-soft) !important;
    border-top: 1px solid var(--color-hairline) !important;
    padding: var(--space-4) var(--space-6) !important;
}

/* Dashboard Statistic Cards */
.card .card-stats .card-stats-title {
    background-color: var(--color-surface-card) !important;
    color: var(--color-ink) !important;
}
.card .card-stats .card-stats-item-count {
    color: var(--color-ink) !important;
}
.card .card-stats .card-stats-item-label {
    color: var(--color-muted) !important;
}
.card.card-statistic-1, .card.card-statistic-2 {
    background-color: var(--color-surface-card) !important;
}
.card.card-statistic-1 .card-header h4, .card.card-statistic-2 .card-header h4 {
    color: var(--color-muted) !important;
}
.card.card-statistic-1 .card-body, .card.card-statistic-2 .card-body {
    color: var(--color-ink) !important;
    font-weight: 700 !important;
}

/* ============================================================
   SECTION 9: BUTTONS  (DESIGN-unified §8)
   ============================================================ */
.btn {
    border-radius: var(--radius-lg) !important;
    font-size: var(--type-body-sm) !important;
    font-weight: 500 !important;
    padding: var(--space-2) var(--space-4) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    transition: all 0.15s ease !important;
}
.btn-sm, .btn-group-sm > .btn {
    padding: var(--space-1) var(--space-3) !important;
    font-size: var(--type-caption) !important;
    border-radius: var(--radius-md) !important;
}
.btn-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: var(--radius-md) !important;
    line-height: 1 !important;
}

.btn-icon.btn-sm,
.btn-icon.btn-xs {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
}

.btn-icon i,
.btn-icon .fas,
.btn-icon .far,
.btn-icon .fab,
.btn-icon svg {
    margin: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.875rem !important;
    line-height: 1 !important;
    text-align: center !important;
}
.btn-primary, .btn.btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-on-primary) !important;
}
.btn-primary:hover, .btn.btn-primary:hover {
    background-color: var(--color-primary-active) !important;
    border-color: var(--color-primary-active) !important;
    color: var(--color-on-primary) !important;
}
.btn-secondary, .btn.btn-secondary {
    background-color: var(--color-canvas) !important;
    border: 1px solid var(--color-hairline-strong) !important;
    color: var(--color-ink) !important;
}
.btn-secondary:hover, .btn.btn-secondary:hover {
    background-color: var(--color-surface-strong) !important;
    color: var(--color-ink) !important;
}
.btn-info {
    background-color: var(--color-text-link) !important;
    border-color: var(--color-text-link) !important;
    color: #fff !important;
}
.btn-info:hover {
    background-color: var(--color-text-link-secondary) !important;
    border-color: var(--color-text-link-secondary) !important;
    color: #fff !important;
}
.btn-success {
    background-color: var(--color-success) !important;
    border-color: var(--color-success) !important;
    color: #fff !important;
}
.btn-danger {
    background-color: var(--color-error) !important;
    border-color: var(--color-error) !important;
    color: #fff !important;
}
.btn-warning {
    background-color: var(--color-warning) !important;
    border-color: var(--color-warning) !important;
    color: #fff !important;
}
.btn-outline-dark {
    border: 1px solid var(--color-ink) !important;
    color: var(--color-ink) !important;
    background-color: transparent !important;
}
.btn-outline-dark:hover {
    background-color: var(--color-ink) !important;
    color: var(--color-canvas) !important;
}
.btn:focus, .btn:active, .btn:active:focus { box-shadow: none !important; outline: none !important; }
.btn-outline-success {
    background-color: transparent !important;
    border-color: var(--color-success) !important;
    color: var(--color-success) !important;
}
.btn-outline-success:hover {
    background-color: var(--color-success) !important;
    color: var(--color-on-primary) !important;
}

/* ============================================================
   SECTION 10: FORMS & INPUTS  (DESIGN-unified §14)
   ============================================================ */
.form-control, .form-select {
    background-color: var(--color-canvas) !important;
    border: 1px solid var(--color-hairline-strong) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--color-ink) !important;
    font-family: var(--font-primary) !important;
    font-size: var(--type-body-sm) !important;
    height: 40px; padding: 0 var(--space-4) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus, .form-select:focus {
    border-color: var(--color-text-link) !important;
    box-shadow: 0 0 0 3px rgba(13, 116, 206, 0.12) !important;
}
.form-control::placeholder { color: var(--color-muted-soft) !important; }
.form-label {
    font-size: var(--type-body-sm) !important; font-weight: 600 !important;
    color: var(--color-ink) !important; margin-bottom: var(--space-2) !important;
}

/* ============================================================
   SECTION 11: TABLES & DATATABLES (Unified Theme Compliant)
   ============================================================ */
.table,
table.dataTable,
.bootstrap-table .table {
    font-size: var(--type-body-sm) !important;
    color: var(--color-ink) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    background-color: var(--color-surface-card) !important;
    --bs-table-bg: var(--color-surface-card) !important;
    --bs-table-color: var(--color-ink) !important;
    --bs-table-striped-bg: var(--color-canvas-soft) !important;
    --bs-table-striped-color: var(--color-ink) !important;
    --bs-table-hover-bg: var(--color-surface-strong) !important;
    --bs-table-hover-color: var(--color-ink) !important;
    --bs-table-border-color: var(--color-hairline) !important;
}

.table > :not(caption) > * > *,
table.dataTable > tbody > tr > td,
table.dataTable > tbody > tr > th,
.bootstrap-table .table > :not(caption) > * > * {
    background-color: var(--color-surface-card) !important;
    color: var(--color-ink) !important;
    border-bottom: 1px solid var(--color-hairline) !important;
    border-top: none !important;
    padding: var(--space-3) var(--space-4) !important;
    vertical-align: middle !important;
    box-shadow: none !important;
}

.table thead th,
table.dataTable thead th,
table.dataTable thead td,
.bootstrap-table .table thead th {
    font-size: var(--type-label) !important;
    font-weight: 700 !important;
    color: var(--color-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    border-bottom: 1px solid var(--color-hairline-strong) !important;
    border-top: none !important;
    padding: var(--space-4) var(--space-4) !important;
    background-color: var(--color-canvas-soft) !important;
    vertical-align: middle !important;
}

.table tbody tr,
table.dataTable tbody tr {
    background-color: var(--color-surface-card) !important;
    transition: background-color 0.15s ease !important;
}

.table tbody tr:hover,
.table tbody tr:hover > *,
table.dataTable tbody tr:hover,
table.dataTable tbody tr:hover > *,
table.dataTable.display tbody tr:hover > .sorting_1,
table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
    background-color: var(--color-surface-strong) !important;
    color: var(--color-ink) !important;
}

/* Table wrapper & DataTables Controls */
.dataTables_wrapper,
.bootstrap-table .fixed-table-container {
    background: var(--color-surface-card) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04) !important;
    padding: var(--space-4) !important;
    border: 1px solid var(--color-hairline) !important;
    color: var(--color-ink) !important;
}

.dataTables_info,
.dataTables_length,
.dataTables_filter,
.pagination-info {
    color: var(--color-body) !important;
    font-size: var(--type-body-sm) !important;
}

.dataTables_filter input,
.bootstrap-table .search input {
    background-color: var(--color-canvas) !important;
    color: var(--color-ink) !important;
    border: 1px solid var(--color-hairline-strong) !important;
    border-radius: var(--radius-md) !important;
    padding: 0.375rem 0.75rem !important;
    outline: none !important;
}

.dataTables_filter input:focus,
.bootstrap-table .search input:focus {
    border-color: var(--color-text-link) !important;
    box-shadow: 0 0 0 2px rgba(13, 116, 206, 0.15) !important;
}

/* Pagination controls */
.pagination,
.dataTables_paginate .pagination {
    margin-top: var(--space-3) !important;
    gap: 4px !important;
}

.pagination .page-item .page-link,
.dataTables_paginate .paginate_button {
    background-color: var(--color-surface-card) !important;
    border: 1px solid var(--color-hairline) !important;
    color: var(--color-ink) !important;
    border-radius: var(--radius-md) !important;
    padding: 0.375rem 0.75rem !important;
    font-size: var(--type-body-sm) !important;
    transition: all 0.15s ease !important;
}

.pagination .page-item.active .page-link,
.dataTables_paginate .paginate_button.current {
    background-color: #0D74CE !important;
    border-color: #0D74CE !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.pagination .page-item.disabled .page-link,
.dataTables_paginate .paginate_button.disabled {
    background-color: var(--color-canvas-soft) !important;
    border-color: var(--color-hairline-soft) !important;
    color: var(--color-muted) !important;
    cursor: not-allowed !important;
}

.pagination .page-item:not(.active):not(.disabled) .page-link:hover,
.dataTables_paginate .paginate_button:not(.current):not(.disabled):hover {
    background-color: var(--color-surface-strong) !important;
    color: var(--color-ink) !important;
    border-color: var(--color-hairline-strong) !important;
}


/* ============================================================
   SECTION 12: BADGES / CHIPS  (Enhanced Padding & High Contrast)
   ============================================================ */
.badge {
    border-radius: var(--radius-pill) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: 0.45rem 0.8rem !important;
    letter-spacing: 0.2px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    line-height: 1.2 !important;
}

.badge i, 
.badge .fas, 
.badge .far, 
.badge .fab {
    font-size: 0.9em !important;
    margin: 0 !important;
}

.badge.badge-primary, .badge.bg-primary { background-color: var(--color-primary) !important; color: var(--color-on-primary) !important; }
.badge.badge-success, .badge.bg-success { background-color: #10B981 !important; color: #ffffff !important; }
.badge.badge-warning, .badge.bg-warning { background-color: #F59E0B !important; color: #ffffff !important; }
.badge.badge-danger, .badge.bg-danger { background-color: #EF4444 !important; color: #ffffff !important; }
.badge.badge-info, .badge.bg-info { background-color: #3B82F6 !important; color: #ffffff !important; }
.badge.badge-secondary, .badge.bg-secondary { background-color: #6B7280 !important; color: #ffffff !important; }
.badge.badge-dark, .badge.bg-dark { background-color: var(--color-surface-dark) !important; color: #ffffff !important; }

/* Light/Soft badge chips (e.g. Assigned To user pill, Attempts count pill) */
.badge.badge-light,
.badge.bg-light,
.badge-light {
    background-color: var(--color-canvas-soft) !important;
    color: var(--color-ink) !important;
    border: 1px solid var(--color-hairline-strong) !important;
}

[data-theme="dark"] .badge.badge-light,
[data-theme="dark"] .badge.bg-light,
[data-theme="dark"] .badge-light {
    background-color: var(--color-surface-strong) !important;
    color: var(--color-ink) !important;
    border: 1px solid var(--color-hairline) !important;
}

/* Text color utilities — use theme tokens instead of Bootstrap/Zephyr colors */
.text-muted { color: var(--color-muted) !important; }
.text-secondary { color: var(--color-muted) !important; }
.text-body { color: var(--color-body) !important; }
.text-dark { color: var(--color-ink) !important; }
.text-light { color: var(--color-on-dark-soft) !important; }
.text-white { color: var(--color-on-primary) !important; }

/* Background color utilities — use theme tokens */
.bg-white { background-color: var(--color-surface-card) !important; }
.bg-light { background-color: var(--color-canvas-soft) !important; }
.bg-dark { background-color: var(--color-surface-dark) !important; }
.bg-primary { background-color: var(--color-primary) !important; }

/* ============================================================
   SECTION 13: MODALS  (Enhanced Design)
   ============================================================ */
.modal-content {
    border: none !important;
    border-radius: var(--radius-card) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden;
}
.modal-header {
    border-bottom: 1px solid var(--color-hairline) !important;
    padding: var(--space-4) var(--space-5) !important;
}
.modal-title {
    font-size: var(--type-title-sm) !important;
    font-weight: 700 !important;
}
.modal-body {
    padding: var(--space-6) !important;
}
.modal-footer {
    border-top: 1px solid var(--color-hairline-soft) !important;
    padding: var(--space-4) var(--space-5) !important;
}

.badge i, .btn i { margin-right: 0.5rem !important; }
.dropdown-menu {
    border: 1px solid var(--color-hairline-strong) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-md) !important;
    padding: var(--space-2) !important;
    background-color: var(--color-canvas) !important;
}
.dropdown-item {
    color: var(--color-ink) !important;
    font-size: var(--type-body-sm) !important; font-weight: 500 !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-2) var(--space-4) !important;
    display: flex !important; align-items: center !important; gap: var(--space-3) !important;
    transition: background-color 0.12s ease !important;
}
.dropdown-item i, .dropdown-item em { width: 16px; font-size: 13px; color: var(--color-muted); }
.dropdown-item:hover { background-color: var(--color-surface-strong) !important; color: var(--color-ink) !important; }
.dropdown-divider { border-color: var(--color-hairline) !important; margin: var(--space-1) 0 !important; }

/* ============================================================
   SECTION 15: ALERTS
   ============================================================ */
.alert {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--color-hairline) !important;
    font-size: var(--type-body-sm) !important;
    padding: var(--space-4) var(--space-5) !important;
}

/* ============================================================
   SECTION 16: SIDEBAR MINI / COLLAPSED  (Codepen-inspired smooth collapse)
   ============================================================ */
body.sidebar-mini .main-sidebar { width: var(--sidebar-mini) !important; }
body.sidebar-mini .navbar.main-navbar { left: var(--sidebar-mini) !important; }
body.sidebar-mini .navbar-bg { left: var(--sidebar-mini) !important; }
body.sidebar-mini .main-content { padding-left: calc(var(--sidebar-mini) + var(--space-8)) !important; }
body.sidebar-mini .main-footer { padding-left: calc(var(--sidebar-mini) + var(--space-8)) !important; }
body.sidebar-mini .main-sidebar .sidebar-brand { display: none !important; }
body.sidebar-mini .main-sidebar .sidebar-brand-sm { display: flex !important; }

/* Reset sidebar-menu padding for mini mode */
body.sidebar-mini .main-sidebar .sidebar-menu {
    padding: var(--space-4) 0 !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Hide text labels completely in mini mode */
body.sidebar-mini .main-sidebar .sidebar-menu > li > a span {
    display: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    flex: none !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

body.sidebar-mini .main-sidebar .sidebar-menu > li {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 3px 0 !important;
    margin: 0 !important;
    width: 100% !important;
    text-align: center;
}

body.sidebar-mini .main-sidebar .sidebar-menu > li > a {
    justify-content: center !important;
    padding: 0 !important;
    height: 44px !important;
    width: 44px !important;
    margin: 0 auto !important;
    border-radius: var(--radius-md) !important;
    display: flex !important;
    align-items: center !important;
    text-align: center !important;
}

body.sidebar-mini .main-sidebar .sidebar-menu > li > a em,
body.sidebar-mini .main-sidebar .sidebar-menu > li > a i {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 18px !important;
    width: auto !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a {
    background-color: var(--sidebar-active-bg) !important;
    color: var(--sidebar-active-text) !important;
    box-shadow: var(--sidebar-active-shadow) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a em,
body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a i {
    color: var(--sidebar-active-text) !important;
    margin: 0 !important;
}

/* Floating submenu flyout from mini sidebar */
body.sidebar-mini .main-sidebar .sidebar-menu > li ul.dropdown-menu {
    position: absolute !important; left: var(--sidebar-mini) !important; top: 10px;
    background-color: var(--sidebar-bg) !important;
    border: 1px solid var(--sidebar-border) !important;
    border-radius: var(--radius-card) !important; box-shadow: var(--shadow-md) !important; width: 200px;
}
body.sidebar-mini .main-sidebar .sidebar-menu > li ul.dropdown-menu li a {
    color: var(--sidebar-text) !important; padding-left: var(--space-4) !important;
}
body.sidebar-mini .main-sidebar .sidebar-menu > li ul.dropdown-menu li a:hover {
    background-color: var(--sidebar-hover-bg) !important; color: var(--sidebar-hover-text) !important;
}

/* ============================================================
   SECTION 21: CHAT BUBBLES
   ============================================================ */
.chat-bubble-admin {
    background-color: var(--color-surface-card) !important;
    border: 1px solid var(--color-hairline) !important;
    color: var(--color-ink) !important;
    border-radius: var(--radius-lg) !important;
    border-bottom-right-radius: 2px !important;
}
.chat-bubble-user {
    background-color: var(--color-primary) !important;
    color: var(--color-on-primary) !important;
    border-radius: var(--radius-lg) !important;
    border-bottom-left-radius: 2px !important;
}

/* Fix scrolling issues */
html, body {
    height: 100%;
    overflow-x: hidden;
}
.main-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.main-content {
    flex: 1 0 auto;
    width: 100%;
    overflow-x: hidden;
    padding-left: calc(var(--sidebar-width) + var(--space-8)) !important;
}
@media (max-width: 1024px) {
    .main-content { padding-left: 0 !important; }
}

/* ============================================================
   SECTION 18: MISC OVERRIDES
   ============================================================ */
.inner_heading { color: var(--color-ink) !important; }

/* ============================================================
   SECTION 19: RESPONSIVE  (DESIGN-unified §21)
   ============================================================ */
@media (max-width: 1024px) {
    /* Navbar spans full width on tablet/mobile */
    .navbar.main-navbar {
        left: 0 !important;
        width: 100% !important;
        padding: 0 var(--space-3) !important;
    }
    .navbar-bg { left: 0 !important; }

    /* Sidebar hidden off-screen by default on mobile */
    .main-sidebar {
        left: -260px;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    body.sidebar-show .main-sidebar {
        left: 0 !important;
    }
    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 870;
        background: rgba(15, 23, 42, 0.42);
        opacity: 0;
        pointer-events: none;
    }
    body.sidebar-show .sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }
    .main-content {
        padding-left: var(--space-6) !important;
        padding-right: var(--space-6) !important;
    }
    .main-footer { padding-left: var(--space-6) !important; }

    /* Always show full brand on mobile, never mini icon */
    .main-sidebar .sidebar-brand     { display: flex !important; }
    .main-sidebar .sidebar-brand-sm  { display: none !important; }
}

/* Compact navbar buttons on small screens — icon only, no text */
@media (max-width: 768px) {
    .btn-clear-cache .clear-cache-label,
    .btn-theme-toggle .theme-toggle-label { display: none !important; }

    .btn-clear-cache,
    .btn-theme-toggle {
        width: 36px !important;
        padding: 0 !important;
        justify-content: center !important;
    }
    .btn-theme-toggle { border-radius: var(--radius-md) !important; }
}

@media (max-width: 640px) {
    :root {
        --type-display-mega: 32px;
        --type-display-xl:   28px;
        --type-display-lg:   24px;
    }
    .main-content {
        padding-left: var(--space-3) !important;
        padding-right: var(--space-3) !important;
        padding-top: calc(var(--nav-height) + var(--space-4)) !important;
    }
    .main-footer {
        padding-left: var(--space-3) !important;
        padding-right: var(--space-3) !important;
    }
    .section .section-header { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
    .section .section-header .section-header-breadcrumb { margin-left: 0; }

body.sidebar-show .main-sidebar { max-width: 280px; }
}

.reset-password-page .reset-password-card {
    max-width: 860px;
    margin: 0 auto;
}
.reset-password-page .reset-password-form .form-group {
    margin-bottom: var(--space-4);
}
.reset-password-page .reset-password-form .input-group {
    width: 100%;
}

.shared-themed-modal .modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 2rem);
}
.shared-themed-modal .modal-dialog-scrollable .modal-body {
    overflow-y: auto;
    overscroll-behavior: contain;
}

@media (max-width: 640px) {
    .reset-password-page {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .reset-password-page .section-header,
    .reset-password-page .section-body {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }
    .reset-password-page .reset-password-card .card-body {
        padding: var(--space-4) !important;
    }
    .shared-themed-modal .modal-dialog {
        width: calc(100% - 1rem);
        max-width: none;
        margin: .5rem;
    }
    .shared-themed-modal .modal-dialog-scrollable .modal-content {
        max-height: calc(100dvh - 1rem);
    }
    .shared-themed-modal .modal-header {
        padding: var(--space-3) var(--space-4) !important;
    }
    .shared-themed-modal .modal-body {
        padding: var(--space-4) !important;
    }
}

/* ============================================================
   SECTION 20: TRANSITIONS & ANIMATIONS  (DESIGN-unified §22)
   ============================================================ */

/* Layout shift — specific props only, never 'all' */
.main-sidebar    { transition: width 0.3s ease, left 0.3s cubic-bezier(0.4,0,0.2,1), background-color 0.25s ease; }
.navbar.main-navbar,
.navbar-bg       { transition: left 0.3s ease; }
.main-content    { transition: padding-left 0.3s ease; }
.main-footer     { transition: padding-left 0.3s ease; }

/* Component micro-transitions */
.btn, .form-control, .form-select, .dropdown-item, .nav-link, .card {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

/* ── Sidebar nav item: gentle slide-right on hover ── */
.main-sidebar .sidebar-menu li a {
    transition: background-color 0.18s ease, color 0.18s ease,
                transform 0.2s ease, box-shadow 0.18s ease !important;
}
.main-sidebar .sidebar-menu li a:hover {
    transform: translateX(3px);
}
/* In mini mode: scale up instead of sliding horizontally */
body.sidebar-mini .main-sidebar .sidebar-menu li a:hover {
    transform: scale(1.08);
}

/* ── Page section fade-in on load ── */
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.section {
    animation: pageFadeIn 0.35s ease both;
}

/* ── Section header slide down ── */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.section .section-header {
    animation: slideDown 0.3s ease both;
}

/* ── Cards stagger in ── */
@keyframes cardIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.card {
    animation: cardIn 0.35s ease both;
}

/* ── Mini logo pop ── */
@keyframes logoPop {
    from { opacity: 0; transform: scale(0.75); }
    to   { opacity: 1; transform: scale(1); }
}
.main-sidebar .sidebar-brand,
.main-sidebar .sidebar-brand-sm { transition: opacity 0.25s ease; }
body.sidebar-mini .main-sidebar .sidebar-brand-sm {
    animation: logoPop 0.25s ease both;
}

/* ── Overlay smooth fade ── */
.sidebar-overlay { transition: opacity 0.25s ease; }

/* ============================================================
   SECTION 21: OFFCANVAS & CHAT DRAWER COMPONENTS
   ============================================================ */

/* Offcanvas global styling */
.offcanvas {
    background-color: var(--color-canvas) !important;
    color: var(--color-ink) !important;
    border-left: 1px solid var(--color-hairline) !important;
    z-index: 1060 !important;
}

.offcanvas-body {
    background-color: var(--color-canvas) !important;
    color: var(--color-ink) !important;
}

/* Offcanvas header — refined surface card with clean border */
.admin-drawer-header,
.offcanvas-header.admin-drawer-header {
    background-color: var(--color-surface-card) !important;
    color: var(--color-ink) !important;
    border-bottom: 1px solid var(--color-hairline) !important;
    padding: 1rem 1.25rem !important;
}

.admin-drawer-header .offcanvas-title,
.admin-drawer-header .offcanvas-title * {
    color: var(--color-ink) !important;
    font-weight: 700 !important;
}

.admin-drawer-header .btn-close {
    opacity: 0.7 !important;
}

[data-theme="dark"] .admin-drawer-header .btn-close,
[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
}

.admin-drawer-header .btn-close:hover {
    opacity: 1 !important;
}

/* Details Drawer Card & Elements */
#detailsDrawer .card {
    background-color: var(--color-surface-card) !important;
    border: 1px solid var(--color-hairline) !important;
    border-radius: var(--radius-card) !important;
}

.detail-drawer-list {
    gap: var(--space-2);
}

.detail-drawer-list .list-group-item {
    background-color: transparent !important;
    color: var(--color-ink) !important;
    border-color: var(--color-hairline) !important;
    padding: 0.75rem 0 !important;
}

.detail-drawer-list .list-group-item strong {
    color: var(--color-ink) !important;
}

/* Surface info box (description background in detail drawer) */
.info-surface {
    background-color: var(--color-canvas-soft) !important;
    color: var(--color-ink) !important;
    border: 1px solid var(--color-hairline) !important;
    border-radius: var(--radius-md) !important;
}

/* Icon accent color for drawer sections */
.drawer-icon-accent {
    color: var(--color-text-link) !important;
}

/* Chat sidebar (left panel in chat drawer) */
.chat-sidebar {
    background-color: var(--color-surface-card) !important;
    color: var(--color-ink) !important;
    border-right: 1px solid var(--color-hairline) !important;
}

.chat-sidebar h5,
.chat-sidebar h6,
.chat-sidebar p,
.chat-sidebar strong,
.chat-sidebar .card-title {
    color: var(--color-ink) !important;
}

.chat-sidebar small,
.chat-sidebar .text-muted,
.chat-sidebar .text-light {
    color: var(--color-muted) !important;
}

.chat-sidebar hr {
    border-color: var(--color-hairline) !important;
}

/* Chat container main area */
.chat-main-area {
    background-color: var(--color-canvas-soft) !important;
    color: var(--color-ink) !important;
}

/* Chat input area — sticky bottom */
.chat-input-area {
    background-color: var(--color-surface-card) !important;
    border-top: 1px solid var(--color-hairline) !important;
}

/* Chat message bubbles */
.chat-bubble-user {
    background-color: #0D74CE !important;
    color: #ffffff !important;
    border-radius: 12px 12px 2px 12px !important;
}

.chat-bubble-user strong {
    color: #ffffff !important;
}

.chat-bubble-user small,
.chat-bubble-user .text-muted {
    color: rgba(255, 255, 255, 0.85) !important;
}

.chat-bubble-admin {
    background-color: var(--color-surface-card) !important;
    color: var(--color-ink) !important;
    border: 1px solid var(--color-hairline) !important;
    border-radius: 12px 12px 12px 2px !important;
}

.chat-bubble-admin strong {
    color: var(--color-ink) !important;
}

.chat-bubble-admin small,
.chat-bubble-admin .text-muted {
    color: var(--color-muted) !important;
}

/* Status badges with crisp white text */
.badge-status-pending {
    background-color: #EF4444 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.02em !important;
}

.badge-status-inprogress {
    background-color: #F59E0B !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.02em !important;
}

.badge-status-resolved {
    background-color: #10B981 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.02em !important;
}

.badge-status-closed {
    background-color: #6B7280 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.02em !important;
}

/* Stat card colored borders */
.stat-card-border-warning {
    border-left: 4px solid #F59E0B !important;
}

.stat-card-border-info {
    border-left: 4px solid #3B82F6 !important;
}

.stat-card-border-success {
    border-left: 4px solid #10B981 !important;
}

.stat-card-border-muted {
    border-left: 4px solid #6B7280 !important;
}

/* ============================================================
   SECTION 22: CRM & INQUIRY MODULE COMPONENTS
   ============================================================ */

/* KPI Summary Cards */
.crm-stat-card {
    background-color: var(--color-surface-card) !important;
    border: 1px solid var(--color-hairline) !important;
    border-radius: var(--radius-card) !important;
    padding: 1.1rem 1.35rem !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

.crm-stat-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
    border-color: var(--color-text-link) !important;
}

.crm-stat-card .stat-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: var(--radius-pill) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.25rem !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
}

.crm-stat-card .stat-val {
    font-size: 1.65rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.crm-stat-card .stat-label {
    font-size: var(--type-label) !important;
    color: var(--color-muted) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 4px !important;
}

/* CRM Filter Tabs / Pills */
.filter-tabs {
    gap: 6px !important;
    display: flex !important;
    flex-wrap: wrap !important;
}

.filter-tabs .nav-link {
    font-weight: 600 !important;
    font-size: var(--type-body-sm) !important;
    color: var(--color-muted) !important;
    border-radius: var(--radius-pill) !important;
    padding: 0.4rem 1rem !important;
    border: 1px solid var(--color-hairline) !important;
    background-color: var(--color-canvas-soft) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.15s ease !important;
}

.filter-tabs .nav-link:hover {
    color: var(--color-ink) !important;
    background-color: var(--color-surface-strong) !important;
    border-color: var(--color-hairline-strong) !important;
}

.filter-tabs .nav-link.active {
    background-color: #0D74CE !important;
    border-color: #0D74CE !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(13, 116, 206, 0.25) !important;
}

.filter-tabs .nav-link.active i {
    color: #ffffff !important;
}

/* CRM Status Badges */
.badge-status-1 { background-color: #0090FF !important; color: #ffffff !important; }
.badge-status-2 { background-color: #F59E0B !important; color: #ffffff !important; }
.badge-status-3 { background-color: #10B981 !important; color: #ffffff !important; }
.badge-status-4 { background-color: #EF4444 !important; color: #ffffff !important; }

.badge-due-today {
    background-color: rgba(245, 158, 11, 0.15) !important;
    color: #F59E0B !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    font-weight: 600 !important;
}

.badge-overdue {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #EF4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    font-weight: 700 !important;
    animation: pulseRed 2s infinite !important;
}

.badge-upcoming {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: #3B82F6 !important;
    border: 1px solid rgba(59, 130, 246, 0.35) !important;
    font-weight: 600 !important;
}

.badge-converted {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #10B981 !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    font-weight: 600 !important;
}

@keyframes pulseRed {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Activity Timeline */
.activity-timeline {
    position: relative;
    padding-left: 28px;
    margin-top: 15px;
}

.activity-timeline::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-hairline-strong);
}

.activity-item {
    position: relative;
    margin-bottom: 20px;
}

.activity-item .activity-badge {
    position: absolute;
    left: -28px;
    top: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0D74CE;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    border: 2px solid var(--color-surface-card);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.activity-item .activity-card {
    background: var(--color-canvas-soft) !important;
    border: 1px solid var(--color-hairline) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 16px !important;
    color: var(--color-ink) !important;
}

/* Sequence Flow Banner */
.sequence-banner {
    background: linear-gradient(135deg, #0D74CE 0%, #7C3AED 100%) !important;
    color: #ffffff !important;
    border-radius: var(--radius-md) !important;
    padding: 14px 18px !important;
    margin-bottom: 15px !important;
}


/* User Accounts and Rights: brighten only its Create User and Edit buttons in dark mode. */
[data-theme="dark"] button[onclick="openCreateUserModal()"],
[data-theme="dark"] #adminuserGridContainer button[onclick^="openEditUserModal("] {
    background-color: #60A5FA !important;
    border-color: #60A5FA !important;
    color: #0F172A !important;
}

[data-theme="dark"] button[onclick="openCreateUserModal()"]:hover,
[data-theme="dark"] #adminuserGridContainer button[onclick^="openEditUserModal("]:hover {
    background-color: #93C5FD !important;
    border-color: #93C5FD !important;
    color: #0F172A !important;
}
/* Shared modal surfaces and controls for dark mode. */
[data-theme="dark"] .shared-themed-modal {
    --color-on-primary: #FFFFFF;
}

[data-theme="dark"] .shared-themed-modal .modal-content {
    background-color: var(--color-surface-card) !important;
    color: var(--color-ink) !important;
}

[data-theme="dark"] .shared-themed-modal .input-group-text {
    background-color: var(--color-surface-strong) !important;
    border-color: var(--color-hairline-strong) !important;
    color: var(--color-ink) !important;
}

/* DataTables 2.x & 1.x Length Select Styling */
.dt-length,
.dataTables_length,
div.dataTables_wrapper div.dataTables_length {
    display: inline-flex !important;
    align-items: center !important;
}

.dt-length label,
.dataTables_length label,
div.dataTables_wrapper div.dataTables_length label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-bottom: 0 !important;
    font-weight: 500 !important;
    color: var(--color-body) !important;
    font-size: var(--type-body-sm) !important;
}

.dt-length select,
.dt-length .form-select,
select[id^="dt-length-"],
.dataTables_length select,
.dataTables_length .form-select,
div.dataTables_wrapper div.dataTables_length select,
div.dataTables_wrapper div.dataTables_length .form-select {
    display: inline-block !important;
    width: auto !important;
    min-width: 60px !important;
    height: 36px !important;
    padding: 0.25rem 1.85rem 0.25rem 0.65rem !important;
    font-size: var(--type-body-sm) !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    text-align: left !important;
    color: var(--color-ink) !important;
    background-color: var(--color-canvas) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.5rem center !important;
    background-size: 13px 9px !important;
    border: 1px solid var(--color-hairline-strong) !important;
    border-radius: var(--radius-md) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
    box-shadow: none !important;
    outline: none !important;
}

[data-theme="dark"] .dt-length select,
[data-theme="dark"] .dt-length .form-select,
[data-theme="dark"] select[id^="dt-length-"],
[data-theme="dark"] .dataTables_length select,
[data-theme="dark"] .dataTables_length .form-select,
.dark-mode .dt-length select,
.dark-mode .dt-length .form-select,
.dark-mode select[id^="dt-length-"],
.dark-mode .dataTables_length select,
.dark-mode .dataTables_length .form-select,
[data-theme="dark"] div.dataTables_wrapper div.dataTables_length select,
[data-theme="dark"] div.dataTables_wrapper div.dataTables_length .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e0e0e0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}