/* ═══════════════════════════════════════════════════════
   ENTERIX ERP — Theme System
   Colour themes: 'red' (default) | 'blue'
   Dark mode:     html.dark
   Stored in localStorage: 'enterix_theme', 'enterix_dark'
═══════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────
   LIGHT — RED & BLACK (Default)
──────────────────────────────────────────────────── */
:root,
[data-theme="red"] {
    color-scheme: light;
    --theme-primary:             #CC2936;
    --theme-primary-dim:         #9B1B26;
    --theme-primary-container:   #FFE0E2;
    --theme-on-primary:          #FFFFFF;
    --theme-on-primary-container:#7A1520;

    --sidebar-accent:            #CC2936;
    --sidebar-active-text:       #CC2936;
    --sidebar-active-border:     #CC2936;
    --sidebar-logo-text:         #9B1B26;
    --sidebar-bg:                #F8F9FA;
    --sidebar-text:              #64748B;

    --cal-dot:                   #CC2936;
    --cal-today-bg:              #FFE0E2;
    --cal-today-text:            #9B1B26;
    --cal-link:                  #CC2936;

    /* Surface stack */
    --bg:                        #F3F4F6;
    --surface:                   #FFFFFF;
    --surface-low:               #F1F4F6;
    --surface-container:         #EAEFF1;
    --surface-high:              #E3E9EC;
    --surface-highest:           #DBE4E7;
    --surface-tint:              rgba(204,41,54,0.06);

    /* Text */
    --on-surface:                #111827;
    --on-surface-variant:        #4B5563;
    --on-surface-muted:          #9CA3AF;
    --outline:                   #6B7280;
    --outline-variant:           #D1D5DB;

    /* Inputs */
    --input-bg:                  #FFFFFF;
    --input-border:              #D1D5DB;
    --input-focus-border:        var(--theme-primary);

    /* Card */
    --card-bg:                   #FFFFFF;
    --card-border:               #E5E7EB;
    --card-shadow:               0 1px 3px rgba(0,0,0,0.08);

    /* Misc */
    --divider:                   #E5E7EB;
    --badge-bg:                  #F3F4F6;
    --badge-text:                #374151;
    --toast-bg:                  #1E293B;
    --toast-text:                #FFFFFF;
    --overlay-bg:                rgba(0,0,0,0.4);

    /* Tailwind slate overrides used in many pages */
    --slate-50:  #F8FAFC;
    --slate-100: #F1F5F9;
    --slate-200: #E2E8F0;
    --slate-800: #1E293B;
    --slate-900: #0F172A;
    --slate-950: #020617;
}

/* ────────────────────────────────────────────────────
   LIGHT — BLUE (Classic)
──────────────────────────────────────────────────── */
[data-theme="blue"] {
    --theme-primary:             #255DAD;
    --theme-primary-dim:         #1151A0;
    --theme-primary-container:   #D7E2FF;
    --theme-on-primary:          #FFFFFF;
    --theme-on-primary-container:#0F509F;

    --sidebar-accent:            #255DAD;
    --sidebar-active-text:       #1151A0;
    --sidebar-active-border:     #255DAD;
    --sidebar-logo-text:         #1151A0;

    --cal-dot:                   #3B82F6;
    --cal-today-bg:              #DBEAFE;
    --cal-today-text:            #1D4ED8;
    --cal-link:                  #2563EB;
}

/* ────────────────────────────────────────────────────
   DARK — RED & BLACK
──────────────────────────────────────────────────── */
html.dark,
html.dark[data-theme="red"] {
    color-scheme: dark;
    --theme-primary:             #FF4D5A;
    --theme-primary-dim:         #CC2936;
    --theme-primary-container:   #4A0D12;
    --theme-on-primary:          #FFFFFF;
    --theme-on-primary-container:#FFB3B8;

    --sidebar-accent:            #FF4D5A;
    --sidebar-active-text:       #FF6B75;
    --sidebar-active-border:     #FF4D5A;
    --sidebar-logo-text:         #FF6B75;
    --sidebar-bg:                #0F1117;
    --sidebar-text:              #8B949E;

    --cal-dot:                   #FF4D5A;
    --cal-today-bg:              #3D1215;
    --cal-today-text:            #FFB3B8;
    --cal-link:                  #FF6B75;

    --bg:                        #0D0D0F;
    --surface:                   #161619;
    --surface-low:               #111114;
    --surface-container:         #1C1C21;
    --surface-high:              #222228;
    --surface-highest:           #2A2A32;
    --surface-tint:              rgba(255,77,90,0.08);

    --on-surface:                #E6E6EA;
    --on-surface-variant:        #9CA3AF;
    --on-surface-muted:          #6B7280;
    --outline:                   #4B5563;
    --outline-variant:           #374151;

    --input-bg:                  #1C1C21;
    --input-border:              #374151;
    --input-focus-border:        var(--theme-primary);

    --card-bg:                   #1C1C21;
    --card-border:               #2A2A35;
    --card-shadow:               0 1px 3px rgba(0,0,0,0.4);

    --divider:                   #2A2A35;
    --badge-bg:                  #222228;
    --badge-text:                #D1D5DB;
    --toast-bg:                  #F0F4FF;
    --toast-text:                #111827;
    --overlay-bg:                rgba(0,0,0,0.7);

    --slate-50:  #111114;
    --slate-100: #1C1C21;
    --slate-200: #2A2A35;
    --slate-800: #D1D5DB;
    --slate-900: #E5E7EB;
    --slate-950: #F3F4F6;
}

/* ────────────────────────────────────────────────────
   DARK — BLUE
──────────────────────────────────────────────────── */
html.dark[data-theme="blue"] {
    --theme-primary:             #73A3F8;
    --theme-primary-dim:         #4A7FE5;
    --theme-primary-container:   #0D2A5E;
    --theme-on-primary:          #001B41;
    --theme-on-primary-container:#A8C4FF;

    --sidebar-accent:            #73A3F8;
    --sidebar-active-text:       #93B8FF;
    --sidebar-active-border:     #73A3F8;
    --sidebar-logo-text:         #93B8FF;

    --cal-dot:                   #60A5FA;
    --cal-today-bg:              #1E3A5F;
    --cal-today-text:            #93C5FD;
    --cal-link:                  #60A5FA;
}

/* ════════════════════════════════════════════════════
   GLOBAL SURFACE OVERRIDES (dark mode body/cards)
   Applied to ALL pages via this single CSS file.
════════════════════════════════════════════════════ */
html.dark body {
    background-color: var(--bg) !important;
    color: var(--on-surface) !important;
}

/* Tailwind bg-slate-* overrides for dark */
html.dark .bg-slate-50  { background-color: var(--surface-low) !important; }
html.dark .bg-slate-100 { background-color: var(--surface-container) !important; }
html.dark .bg-white     { background-color: var(--surface) !important; }
html.dark .bg-white\/80  { background-color: color-mix(in srgb, var(--surface) 85%, transparent) !important; }
html.dark .bg-gray-50   { background-color: var(--surface-low) !important; }
html.dark .bg-gray-100  { background-color: var(--surface-container) !important; }
html.dark .bg-gray-200  { background-color: var(--surface-high) !important; }

/* Tailwind text overrides */
html.dark .text-slate-900  { color: var(--on-surface) !important; }
html.dark .text-slate-800  { color: var(--on-surface) !important; }
html.dark .text-slate-700  { color: var(--on-surface-variant) !important; }
html.dark .text-slate-600  { color: var(--on-surface-variant) !important; }
html.dark .text-slate-500  { color: var(--on-surface-muted) !important; }
html.dark .text-gray-900   { color: var(--on-surface) !important; }
html.dark .text-gray-800   { color: var(--on-surface) !important; }
html.dark .text-gray-700   { color: var(--on-surface-variant) !important; }
html.dark .text-gray-600   { color: var(--on-surface-variant) !important; }
html.dark .text-gray-500   { color: var(--on-surface-muted) !important; }

/* Border overrides */
html.dark .border-slate-200 { border-color: var(--divider) !important; }
html.dark .border-gray-200  { border-color: var(--divider) !important; }
html.dark .border-slate-100 { border-color: var(--divider) !important; }
html.dark .divide-slate-200 > * + * { border-color: var(--divider) !important; }

/* Card / surface containers */
.bento-card,
.hbl-done-card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--on-surface);
}

html.dark .bento-card,
html.dark .hbl-done-card,
html.dark .bg-white.rounded,
html.dark .bg-white.rounded-xl,
html.dark .bg-white.rounded-lg,
html.dark .bg-white.rounded-2xl,
html.dark .bg-white.shadow,
html.dark .bg-white.shadow-sm {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    color: var(--on-surface) !important;
}

html.dark .hbl-done-card {
    background-color: var(--surface-container-low) !important;
}

/* Shadow softening */
html.dark .shadow-sm  { box-shadow: 0 1px 2px rgba(0,0,0,0.5) !important; }
html.dark .shadow     { box-shadow: 0 2px 6px rgba(0,0,0,0.5) !important; }
html.dark .shadow-lg  { box-shadow: 0 4px 16px rgba(0,0,0,0.6) !important; }

/* Input / form */
html.dark input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not(.inferred-input),
html.dark select:not(.inferred-input),
html.dark textarea:not(.inferred-input) {
    background-color: var(--input-bg) !important;
    color: var(--on-surface) !important;
    border-color: var(--input-border) !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: var(--on-surface-muted) !important; }

/* Inferred input */
html.dark .inferred-input {
    background-color: transparent !important;
    color: var(--on-surface) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--outline-variant) !important;
}
html.dark .inferred-input:focus {
    border-bottom: 2px solid var(--theme-primary) !important;
    outline: none !important;
    box-shadow: none !important;
}
html.dark .inferred-input option {
    background-color: var(--surface-container) !important;
    color: var(--on-surface) !important;
}

/* Autocomplete dropdowns in dark */
html.dark .autocomplete-dropdown {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    color: var(--on-surface) !important;
}
html.dark .autocomplete-dropdown .suggestion-item {
    border-color: var(--divider) !important;
}
html.dark .autocomplete-dropdown .suggestion-item:hover {
    background-color: var(--surface-container) !important;
}

/* Tailwind's material-style design tokens */
html.dark .bg-surface                 { background-color: var(--surface) !important; }
html.dark .bg-surface-container       { background-color: var(--surface-container) !important; }
html.dark .bg-surface-container-low   { background-color: var(--surface-low) !important; }
html.dark .bg-surface-container-high  { background-color: var(--surface-high) !important; }
html.dark .bg-surface-container-lowest{ background-color: var(--surface) !important; }
html.dark .bg-surface-container-highest{ background-color: var(--surface-highest) !important; }
html.dark .bg-surface-bright          { background-color: var(--surface) !important; }
html.dark .text-on-surface            { color: var(--on-surface) !important; }
html.dark .text-on-surface-variant    { color: var(--on-surface-variant) !important; }
html.dark .border-outline-variant\/20 { border-color: rgba(55,65,81,0.4) !important; }
html.dark .border-outline-variant\/30 { border-color: rgba(55,65,81,0.5) !important; }
html.dark .border-outline-variant     { border-color: var(--outline-variant) !important; }
html.dark .border-slate-100\/50       { border-color: rgba(55,65,81,0.3) !important; }
html.dark .border-slate-100           { border-color: var(--divider) !important; }

/* Status badges and pills in dark mode */
html.dark .bg-secondary-container     { background-color: color-mix(in srgb, var(--theme-primary) 18%, transparent) !important; }
html.dark .text-on-secondary-container{ color: var(--theme-primary) !important; }
html.dark .bg-primary-container       { background-color: color-mix(in srgb, #10B981 18%, transparent) !important; }
html.dark .text-on-primary-container  { color: #34D399 !important; }
html.dark .bg-blue-50                 { background-color: color-mix(in srgb, var(--theme-primary) 18%, transparent) !important; }
html.dark .bg-emerald-50              { background-color: color-mix(in srgb, #10B981 18%, transparent) !important; }
html.dark .text-emerald-700           { color: #34D399 !important; }
html.dark .bg-red-50                  { background-color: color-mix(in srgb, #EF4444 18%, transparent) !important; }
html.dark .text-red-700               { color: #F87171 !important; }
html.dark .text-red-600               { color: #F87171 !important; }
html.dark .text-rose-700              { color: #FB7185 !important; }
html.dark .text-rose-600              { color: #FB7185 !important; }
html.dark .border-red-100             { border-color: rgba(239, 68, 68, 0.3) !important; }

/* Costing Sheet & Payment Request Badges in dark mode */
html.dark .bg-emerald-100\/50,
html.dark .bg-emerald-100             { background-color: rgba(16, 185, 129, 0.2) !important; }
html.dark .bg-red-100\/50,
html.dark .bg-red-100                 { background-color: rgba(239, 68, 68, 0.2) !important; }
html.dark .bg-rose-100\/50,
html.dark .bg-rose-100                { background-color: rgba(244, 63, 94, 0.2) !important; }

html.dark .bg-sky-100                 { background-color: rgba(56, 189, 248, 0.2) !important; }
html.dark .text-sky-700               { color: #38BDF8 !important; }
html.dark .bg-violet-100              { background-color: rgba(167, 139, 250, 0.2) !important; }
html.dark .text-violet-700            { color: #A78BFA !important; }
html.dark .bg-purple-100              { background-color: rgba(192, 132, 252, 0.2) !important; }
html.dark .text-purple-700            { color: #C084FC !important; }
html.dark .bg-indigo-100              { background-color: rgba(129, 140, 248, 0.2) !important; }
html.dark .text-indigo-700            { color: #818CF8 !important; }
html.dark .bg-teal-100                { background-color: rgba(45, 212, 191, 0.2) !important; }
html.dark .text-teal-700              { color: #2DD4BF !important; }
html.dark .bg-orange-100              { background-color: rgba(251, 146, 60, 0.2) !important; }
html.dark .text-orange-700            { color: #FB923C !important; }
html.dark .bg-yellow-100              { background-color: rgba(250, 204, 21, 0.2) !important; }
html.dark .text-yellow-700            { color: #FACC15 !important; }
html.dark .bg-amber-100               { background-color: rgba(251, 191, 36, 0.2) !important; }
html.dark .text-amber-700             { color: #FBBF24 !important; }
html.dark .bg-slate-100               { background-color: rgba(148, 163, 184, 0.2) !important; }
html.dark .text-slate-700             { color: #CBD5E1 !important; }

/* Payment Request card containers in dark mode */
html.dark .bg-amber-50\/30,
html.dark .bg-amber-50\/40,
html.dark .bg-blue-50\/40,
html.dark .bg-emerald-50\/40 {
    background-color: var(--surface-container, #1C1C21) !important;
}
html.dark .border-amber-200,
html.dark .border-blue-200,
html.dark .border-emerald-200 {
    border-color: var(--card-border, #2A2A35) !important;
}

/* Sidebar container - transparent so only floating islands render */
aside,
html.dark aside {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
html.dark aside .border-t { border-color: var(--divider) !important; }

/* Tables */
html.dark table { color: var(--on-surface); }
html.dark thead tr { background-color: var(--surface-container) !important; }
html.dark tbody tr:hover { background-color: var(--surface-container) !important; }
html.dark td, html.dark th { border-color: var(--divider) !important; }

/* Modal / dropdown overlays */
html.dark .bg-white.rounded-xl.shadow-lg,
html.dark .bg-white.rounded-2xl.shadow-lg,
html.dark #calendarModalContent {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}

/* Toast (globalToast uses dark bg already, invert in dark) */
html.dark #globalToast {
    background-color: var(--toast-bg) !important;
    color: var(--toast-text) !important;
}

/* ════════════════════════════════════════════════════
   SCROLLBAR STYLES (Light & Dark)
════════════════════════════════════════════════════ */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.3) transparent;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.3);
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.5);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* Dark Mode Scrollbars */
html.dark,
html.dark * {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

html.dark ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

html.dark ::-webkit-scrollbar-track {
    background: transparent;
}

html.dark ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* Sidebar navigation sleek scrollbar */
aside nav {
    scrollbar-width: thin;
}

aside nav::-webkit-scrollbar {
    width: 4px;
}

aside nav::-webkit-scrollbar-track {
    background: transparent;
}

aside nav::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.25);
    border-radius: 9999px;
}

aside nav::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.45);
}

html.dark aside nav {
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

html.dark aside nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 9999px;
}

html.dark aside nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* ════════════════════════════════════════════════════
   THEME PRIMARY OVERRIDES (both light & dark)
════════════════════════════════════════════════════ */
.bg-primary                    { background-color: var(--theme-primary) !important; }
.bg-primary-container          { background-color: var(--theme-primary-container) !important; }
.bg-primary-fixed              { background-color: var(--theme-primary-container) !important; }
.text-primary                  { color: var(--theme-primary) !important; }
.text-primary-dim              { color: var(--theme-primary-dim) !important; }
.text-on-primary               { color: var(--theme-on-primary) !important; }
.text-on-primary-container     { color: var(--theme-on-primary-container) !important; }
.border-primary                { border-color: var(--theme-primary) !important; }
.from-primary                  { --tw-gradient-from: var(--theme-primary) !important; }
.to-primary-dim                { --tw-gradient-to: var(--theme-primary-dim) !important; }
.focus\:border-primary:focus   { border-color: var(--theme-primary) !important; }
.focus\:ring-primary:focus     { --tw-ring-color: var(--theme-primary) !important; }
.ring-primary                  { --tw-ring-color: var(--theme-primary) !important; }
.shadow-primary\/20            { --tw-shadow-color: color-mix(in srgb, var(--theme-primary) 20%, transparent) !important; }
.bg-primary\/10                { background-color: color-mix(in srgb, var(--theme-primary) 10%, transparent) !important; }
.bg-primary\/20                { background-color: color-mix(in srgb, var(--theme-primary) 20%, transparent) !important; }
.bg-primary-fixed\/50          { background-color: color-mix(in srgb, var(--theme-primary-container) 50%, transparent) !important; }

/* Form focus */
.inferred-input:focus          { border-bottom: 2px solid var(--theme-primary) !important; }
.inferred-group:focus-within .inferred-icon { color: var(--theme-primary) !important; }
.row-ccy-select:focus          { border-bottom: 2px solid var(--theme-primary) !important; }

/* ════════════════════════════════════════════════════
   SIDEBAR blue-class overrides
════════════════════════════════════════════════════ */
aside a.text-blue-700,
aside a[class*="text-blue-7"],
aside a[class*="text-blue-4"] {
    color: var(--sidebar-active-text) !important;
}
aside a.border-blue-700,
aside a[class*="border-blue-7"] {
    border-color: var(--sidebar-active-border) !important;
}
aside h1.text-blue-700,
aside h1[class*="text-blue"] {
    color: var(--sidebar-logo-text) !important;
}

/* Calendar dot */
#rateSheetCalendarPopup .bg-blue-500,
#rateSheetCalendarPopup [class*="bg-blue-6"],
#rateSheetCalendarPopup [class*="bg-blue-4"] {
    background-color: var(--cal-dot) !important;
}
#rateSheetCalendarPopup .text-blue-600,
#rateSheetCalendarPopup [class*="text-blue"] {
    color: var(--cal-link) !important;
}

/* ════════════════════════════════════════════════════
   DARK MODE TOGGLE BUTTON
════════════════════════════════════════════════════ */
#darkModeToggle {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1.5px solid var(--divider);
    background: var(--surface-container);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
#darkModeToggle:hover {
    background: var(--surface-high);
    border-color: var(--outline);
}
#darkModeToggle .icon-sun  { display: none; }
#darkModeToggle .icon-moon { display: block; }
html.dark #darkModeToggle .icon-sun  { display: block; }
html.dark #darkModeToggle .icon-moon { display: none; }

/* ════════════════════════════════════════════════════
   THEME SWITCHER SWATCH (Settings page)
════════════════════════════════════════════════════ */
.theme-swatch {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.22s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.theme-swatch:hover { transform: scale(1.07); }
.theme-swatch.active {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary) 25%, transparent);
}
.theme-swatch .swatch-check {
    display: none;
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 17px;
    height: 17px;
    background: white;
    border-radius: 50%;
    font-size: 10px;
    line-height: 17px;
    text-align: center;
    font-weight: bold;
    color: #111;
}
.theme-swatch.active .swatch-check { display: block; }
.swatch-red  { background: linear-gradient(135deg, #1a1a1a 35%, #CC2936 100%); }
.swatch-blue { background: linear-gradient(135deg, #255DAD 35%, #73A3F8 100%); }

/* Dark mode toggle in settings */
.dark-toggle-track {
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: var(--outline-variant);
    cursor: pointer;
    position: relative;
    transition: background 0.25s;
    flex-shrink: 0;
}
.dark-toggle-track.on { background: var(--theme-primary); }
.dark-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    transition: transform 0.25s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.dark-toggle-track.on .dark-toggle-thumb { transform: translateX(20px); }

/* Floating Island Expandable Sidebar */
.sidebar-island {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(226, 232, 240, 0.85);
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.06), 0 4px 10px -2px rgba(0, 0, 0, 0.03);
    border-radius: 24px;
}

html.dark .sidebar-island {
    background: rgba(20, 20, 24, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-color: rgba(42, 42, 53, 0.85);
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.5), 0 4px 12px -2px rgba(0, 0, 0, 0.35);
}

.sidebar-nav-item {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.sidebar-nav-item.active {
    background: var(--theme-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--theme-primary) 35%, transparent);
}

.sidebar-nav-item.active .material-symbols-outlined {
    color: #ffffff !important;
}

.sidebar-nav-item:not(.active):hover {
    background: rgba(0, 0, 0, 0.04);
}

html.dark .sidebar-nav-item:not(.active):hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Sidebar Layout Offset Rules for Compact Floating Sidebar */
.ml-64,
.md\:ml-64 {
    margin-left: 88px !important;
}

.pl-64,
.md\:pl-64 {
    padding-left: 88px !important;
}

.left-64,
.md\:left-64 {
    left: 88px !important;
}