/* ============================================
   THEME VARIABLES - Light & Dark Modes
   ============================================ */

/* DEFAULT THEME - DARK MODE */
:root {
    /* Background Colors */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-hover: #475569;

    /* Text Colors */
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;

    /* Border & Dividers */
    --border-color: #334155;

    /* Accent Colors */
    --accent-orange: #f97316;
    --accent-green: #22c55e;
    --accent-red: #ef4444;
    --accent-blue: #3b82f6;
    --accent-yellow: #eab308;

    /* Excel-grid selection (unified cell + row). Theme-scoped so light theme
       never falls back to the dark --accent-blue (#0a5989). */
    --grid-sel-border: #3b82f6;
    --grid-sel-fill: rgba(59, 130, 246, 0.16);

    /* Component Specific */
    --input-bg: #1e293b;
    --input-border: #334155;
    --input-text: #f1f5f9;
    --input-placeholder: #64748b;

    --modal-bg: #1e293b;
    --modal-overlay: rgba(0, 0, 0, 0.7);

    --table-header-bg: #334155;
    --table-row-bg: #ffffff;
    --table-row-text: #1e293b;
    --table-row-hover: #a4dda4;

    --card-bg: #1e293b;
    --card-border: #334155;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;

    /* Needs Action — severity palette per the DARK mockup
       (mockups/needs-action-dashboard.html). Each category gets a hue
       that's distinct at a glance: red → orange → yellow → purple → teal. */
    --sev-crit:  #ef4444;   /* accent-red    — T1 over 48h */
    --sev-imm:   #f97316;   /* accent-orange — freight / imminent ETA */
    --sev-docs:  #eab308;   /* accent-yellow — paperwork (phyto, packing list) */
    --sev-comp:  #8b5cf6;   /* accent-purple — compliance modules */
    --sev-stock: #14b8a6;   /* accent-teal   — stock allocation */
    --sev-crit-tint:  rgba(239,  68,  68, 0.18);
    --sev-imm-tint:   rgba(249, 115,  22, 0.18);
    --sev-docs-tint:  rgba(234, 179,   8, 0.18);
    --sev-comp-tint:  rgba(139,  92, 246, 0.18);
    --sev-stock-tint: rgba( 20, 184, 166, 0.18);
    --bg-row-alt:   #1a2336;
    --bg-row-hover: #243049;

    /* Needs Action — extra design tokens lifted from the mockup */
    --na-navy:        #3b82f6;
    --na-navy-tint:   rgba(59, 130, 246, 0.14);
    --na-border-strong: #475569;
    --na-shadow-xs:   0 1px 1px rgba(0, 0, 0, 0.25);
    --na-radius-xs:   3px;
    --na-font-sans:   'Inter', 'Space Grotesk', system-ui, sans-serif;
    --na-font-mono:   'JetBrains Mono', ui-monospace, monospace;
}

/* LIGHT THEME.
   NOTE: the selector is `:root[data-theme="light"]` (specificity 0,2,0) NOT just
   `[data-theme="light"]` (0,1,0) ON PURPOSE: css/main.css ALSO defines the full
   var set under `:root` and loads AFTER themes.css, so at equal specificity its
   DARK values were overriding these light ones — leaving the whole light theme
   running on dark variables (Jarvis/modules that rely on var(--bg-*) rendered
   dark). The extra :root raises specificity so the light vars finally win. */
:root[data-theme="light"] {
    /* Harbor Blue light system */
    --bg-primary: #f6f9fc;
    --bg-secondary: #ffffff;
    --bg-tertiary: #eef4f8;
    --bg-hover: #e6f3f8;

    --text-primary: #102033;
    --text-secondary: #33465a;
    --text-muted: #536579;
    --text-dark: #1d2c3b;

    --border-color: #d6e2ea;
    --border-highlight: #b9cedb;

    --accent-orange: #c47a14;
    --accent-green: #2c8c62;
    --accent-red: #c94136;
    --accent-blue: #0a5989;
    --accent-yellow: #c47a14;
    --accent-purple: #7566b1;
    --accent-teal: #0f7ea2;
    --menu-bg: #0a5989;
    --focus-ring: rgba(15, 126, 162, 0.16);

    /* Excel-grid selection — Harbor teal, light tint (never dark navy). */
    --grid-sel-border: #0f7ea2;
    --grid-sel-fill: rgba(15, 126, 162, 0.10);

    --input-bg: #ffffff;
    --input-border: #b9cedb;
    --input-text: #102033;
    --input-placeholder: #6f8293;

    --modal-bg: #ffffff;
    --modal-overlay: rgba(0, 0, 0, 0.5);

    --table-header-bg: #eef4f8;
    --table-row-bg: #ffffff;
    --table-row-text: #1d2c3b;
    --table-row-hover: #e6f3f8;

    --card-bg: #ffffff;
    --card-border: #d6e2ea;
    --row-white: #ffffff;
    --row-alt: #f8fbfd;
    --cell-focus: rgba(15, 126, 162, 0.12);

    --shadow-sm: 0 1px 2px rgba(23, 45, 64, 0.06);
    --shadow-md: 0 8px 20px rgba(23, 45, 64, 0.10);
    --shadow-lg: 0 14px 38px rgba(23, 45, 64, 0.14);

    /* Needs Action — severity palette per the WHITE mockup
       (mockups/needs-action-white.html, Harbor theme). Distinct hues per
       category: red → orange → deeper-amber → teal → green. The mockup
       differentiates docs from imm using a darker amber text plus the
       same orange-10 tint background. */
    --sev-crit:  #c94d3d;   /* mockup --red    */
    --sev-imm:   #d6932a;   /* mockup --orange */
    --sev-docs:  #b07a1f;   /* mockup's deeper amber used for active docs */
    --sev-comp:  #1c8da8;   /* mockup --teal   */
    --sev-stock: #3a9460;   /* mockup --green  */
    --sev-crit-tint:  #f5e2de; /* mockup --red-10    */
    --sev-imm-tint:   #faf1de; /* mockup --orange-10 */
    --sev-docs-tint:  #faf1de; /* mockup uses orange-10 for docs too        */
    --sev-comp-tint:  #e7f1f4; /* mockup --teal-10   */
    --sev-stock-tint: #e9f1ec; /* mockup --green-10  */

    /* Needs Action — extra design tokens lifted from the mockup */
    --na-navy:        #0e4c75;
    --na-navy-tint:   #e7eef3;
    --na-border-strong: #c9d3dd;
    --na-shadow-xs:   0 1px 1px rgba(20, 35, 60, 0.04);
    --na-radius-xs:   3px;
    --na-font-sans:   'Inter', 'Space Grotesk', system-ui, sans-serif;
    --na-font-mono:   'JetBrains Mono', ui-monospace, monospace;
    --bg-row-alt:   #f7f9fb;
    --bg-row-hover: #eaf1f6;
}

/* ============================================
   THEME TOGGLE BUTTON STYLES
   ============================================ */

/* Theme Toggle in Navigation — "Crescent Morph"
   Single round button. The yellow disc is the sun; in night mode a "carved"
   disc slides in from the upper-right to form a crescent moon. The conic
   rays fade out on the same beat. The button is class-driven (.is-night),
   so theme-manager.js only flips that class — see js/theme-manager.js. */
.nav-theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    /* Sits on the always-dark top nav, so border + hover are translucent
       whites — keeps the same look in both themes. */
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: inherit;
    cursor: pointer;
    padding: 0;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.15s;
}
.nav-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.32);
}
.nav-theme-toggle:active { transform: scale(0.95); }
.nav-theme-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
}

/* Sun disc + crescent carve-out */
.nav-theme-toggle .sun-moon {
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent-yellow);
    transition: transform 0.45s cubic-bezier(0.5, 0.2, 0.2, 1),
                background 0.35s ease;
}
.nav-theme-toggle .sun-moon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    /* Carve colour blends with the actual nav surface (which is dark in
       both themes) so the crescent illusion holds. Themed via the
       --nav-bg-blend var below. */
    background: var(--nav-bg-blend, #16213e);
    transform: translate(80%, -80%) scale(0.85);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.5, 0.2, 0.2, 1),
                opacity 0.35s ease;
}
[data-theme="light"] .nav-theme-toggle {
    --nav-bg-blend: #0a5989;
}
.nav-theme-toggle.is-night .sun-moon {
    background: #cbd5e1;
    transform: scale(0.95);
}
.nav-theme-toggle.is-night .sun-moon::before {
    transform: translate(35%, -25%) scale(1);
    opacity: 1;
}

/* Sun rays — eight thin ticks via conic-gradient + radial mask */
.nav-theme-toggle .ray {
    position: absolute;
    inset: -9px;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.5, 0.2, 0.2, 1);
}
.nav-theme-toggle .ray::before,
.nav-theme-toggle .ray::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        conic-gradient(from 0deg,
            transparent 0deg 12deg,  var(--accent-yellow) 12deg 13deg,  transparent 13deg 90deg,
            transparent 90deg 102deg, var(--accent-yellow) 102deg 103deg, transparent 103deg 180deg,
            transparent 180deg 192deg, var(--accent-yellow) 192deg 193deg, transparent 193deg 270deg,
            transparent 270deg 282deg, var(--accent-yellow) 282deg 283deg, transparent 283deg 360deg);
    -webkit-mask: radial-gradient(circle, transparent 11px, black 11.5px, black 16px, transparent 16.5px);
            mask: radial-gradient(circle, transparent 11px, black 11.5px, black 16px, transparent 16.5px);
    transition: transform 0.45s cubic-bezier(0.5, 0.2, 0.2, 1);
}
.nav-theme-toggle .ray::after { transform: rotate(45deg); }
.nav-theme-toggle.is-night .ray { opacity: 0; transform: scale(0.6); }

/* Smooth transition for theme changes */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Prevent transition on page load */
.preload * {
    transition: none !important;
}

/* Theme TOGGLE must be instant, not a 0.3s animation across every grid cell.
   ThemeManager adds .theme-switching for one frame while it flips data-theme,
   so the hundreds of .excel-table cells/inputs repaint once instead of all
   tweening background-color together (which made the toggle lag/stutter). */
html.theme-switching * {
    transition: none !important;
}

/* ============================================
   LIGHT THEME OVERRIDES FOR SPECIFIC COMPONENTS
   ============================================ */

/* Body background in light mode */
[data-theme="light"] body {
    background: #f6f9fc !important;
    color: #102033 !important;
}

/* Navigation in Light Mode - Harbor menu */
[data-theme="light"] .top-nav {
    background: #0a5989 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
}

[data-theme="light"] .nav-brand .brand-text {
    color: #ffffff !important;
}

[data-theme="light"] .nav-brand .brand-text span {
    color: #b7e4f5 !important;
}

[data-theme="light"] .nav-link {
    color: rgba(255, 255, 255, 0.78) !important;
}

[data-theme="light"] .nav-link:hover,
[data-theme="light"] .nav-link.active {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

[data-theme="light"] .nav-dropdown-menu {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .nav-dropdown-item {
    color: #475569 !important;
}

[data-theme="light"] .nav-dropdown-item:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

/* User info in light mode */
[data-theme="light"] .nav-user-name {
    color: #ffffff !important;
}

[data-theme="light"] .nav-user-role {
    color: rgba(255, 255, 255, 0.68) !important;
}

[data-theme="light"] .nav-user-avatar {
    background: rgba(255, 255, 255, 0.18) !important;
    color: white !important;
}

/* Status Badges - ensure they work in both themes */
.status-badge {
    background: var(--bg-tertiary);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Forms in Light Mode */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
    background: var(--input-bg);
    color: var(--input-text);
    border-color: var(--input-border);
}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
    border-color: var(--accent-teal);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Modal in Light Mode */
[data-theme="light"] .modal-panel {
    background: var(--modal-bg);
    box-shadow: var(--shadow-lg);
}

[data-theme="light"] .modal-overlay {
    background: var(--modal-overlay);
}

/* Light-theme modal panels — match the DARK theme's blended/see-through feel
   instead of a stark opaque white card. A frosted, slightly translucent Harbor
   surface lets the dimmed dashboard show through softly (like dark mode does),
   so modals no longer read as a hard white box. Covers the colour-picker
   popovers and the centered modals. */
[data-theme="light"] .modal-panel,
[data-theme="light"] .modal,
[data-theme="light"] .color-picker-panel {
    background: rgba(246, 249, 252, 0.62) !important;
    backdrop-filter: blur(18px) saturate(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    border-color: rgba(15, 126, 162, 0.28) !important;
}

/* CRITICAL: the broad `[data-theme="light"] div { background-color: inherit }`
   rule makes every nested container div RE-INHERIT the panel's translucent
   background, stacking 3-4 layers into a near-SOLID box that hides the dashboard
   (the "solid modal background" bug on the bg-color / text-color pickers). Force
   the modal CONTAINER divs transparent so ONLY the panel provides the single
   frosted layer. Swatches/buttons/inputs keep their own backgrounds (not divs
   targeted here, or set via class/inline). */
/* The list-of-containers version of this fix keeps coming back as the "solid
   white picker" bug, because it only covers the wrappers that existed when it
   was written — every new row added to the panel (the custom action row, the
   favourites strip) re-inherits the translucent background and stacks another
   near-opaque layer. Clear EVERY descendant div instead, exempting only the
   elements that legitimately carry their own colour. Result: exactly one
   frosted layer, the panel itself. */
[data-theme="light"] .color-picker-panel div:not(.color-swatch):not(.cp-fav-swatch):not(.cp-preview-swatch):not(.color-picker-btn):not(.cp-fav-empty-slot):not(.cp-native-color),
[data-theme="light"] .modal-panel > .modal-header,
[data-theme="light"] .modal-panel > .modal-body,
[data-theme="light"] .modal-panel > .modal-footer,
[data-theme="light"] .modal > .modal-header,
[data-theme="light"] .modal > .modal-body,
[data-theme="light"] .modal > .modal-footer {
    background-color: transparent !important;
}

/* Favourite slots keep their own fill — they ARE the colour they show. An
   empty slot stays visibly empty rather than inheriting the panel. */
[data-theme="light"] .color-picker-panel .cp-fav-swatch { background-clip: padding-box; }
[data-theme="light"] .color-picker-panel .cp-fav-empty-slot {
    background-color: rgba(15, 42, 63, 0.06) !important;
    border: 1px dashed rgba(15, 42, 63, 0.28) !important;
    color: #64748b !important;
}

/* Belt and braces for the same bug: the list above only covers the containers
   that existed when it was written, so any NEW wrapper div inside the picker
   silently re-inherits the panel's translucent fill and stacks another opaque
   layer. Clear EVERY descendant div instead, exempting only the elements that
   legitimately carry their own colour (swatches, the preview chip, buttons).
   Result: exactly one frosted layer — the panel. */
[data-theme="light"] .color-picker-panel div:not(.color-swatch):not(.cp-fav-swatch):not(.cp-preview-swatch):not(.color-picker-btn):not(.cp-fav-empty-slot) {
    background-color: transparent !important;
}

/* A touch more see-through, per owner request that the picker read as a
   translucent overlay rather than a solid card. */
[data-theme="light"] .color-picker-panel {
    background: rgba(246, 249, 252, 0.55) !important;
}

/* THE actual "solid white picker" culprit — measured, not guessed.
   ColorPicker.open() tags the OUTER wrapper with a `popover` class
   (js/enhancements.js: `modal.classList.add('popover')`), and the generic
   `[data-theme="light"] .popover { background: #ffffff !important }` rule
   further down this file then matched it. That wrapper is
   `position: fixed; inset: 0`, so the rule painted a SOLID WHITE SHEET across
   the entire viewport, directly behind the translucent panel — and the panel's
   own `backdrop-filter: blur(18px)` then sampled that white sheet, so no amount
   of alpha on the panel could ever show anything through it.

   Three earlier attempts lost the CASCADE, not the diagnosis:
       [data-theme="light"] .color-picker-modal   -> (0,2,0) !important
       [data-theme="light"] .popover              -> (0,2,0) !important
   Same origin, same importance, same specificity, so SOURCE ORDER decided it —
   and `.popover` sits later in this file. A fix that merely ties therefore
   always loses. Doubling the class below makes this (0,3,1), which wins on
   specificity wherever either rule ends up; `.popover` is ALSO narrowed at its
   own site so it can never reach here again.

   This wrapper is a pure positioning / click-target overlay. It must NEVER
   paint, in any theme, whatever classes get attached to it in future. */
[data-theme="light"] div.color-picker-modal.color-picker-modal {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
[data-theme="light"] .color-picker-modal > div:not(.color-picker-panel) {
    background: transparent !important;
    background-color: transparent !important;
}
[data-theme="light"] .color-picker-modal div:not(.color-swatch):not(.cp-fav-swatch):not(.cp-preview-swatch):not(.color-picker-btn):not(.cp-fav-empty-slot):not(.cp-native-color):not(.color-picker-panel) {
    background-color: transparent !important;
}

/* Unload-approval modal (.ua-*) — its own classes (not .modal-panel), so it
   wasn't covered above. The broad div{background-color:inherit} clobbered BOTH
   the overlay dim AND the modal into a solid white #f6f9fc box. Re-assert the
   dim backdrop, frost the modal (blended/see-through like dark theme), and force
   the inner container divs transparent so they don't stack into a white box. */
[data-theme="light"] .ua-overlay { background: rgba(0, 0, 0, 0.5) !important; }
[data-theme="light"] .ua-modal {
    background: rgba(246, 249, 252, 0.62) !important;
    backdrop-filter: blur(18px) saturate(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    border: 1px solid rgba(15, 126, 162, 0.28) !important;
}
[data-theme="light"] .ua-body,
[data-theme="light"] .ua-section,
[data-theme="light"] .ua-grid,
[data-theme="light"] .ua-grid-3,
[data-theme="light"] .ua-footer { background-color: transparent !important; }
/* Surfaces that should stay visible on the frosted modal. */
[data-theme="light"] .ua-card { background: rgba(255, 255, 255, 0.55) !important; border-color: #d6e2ea !important; }
[data-theme="light"] .ua-requester { background: rgba(249, 115, 22, 0.08) !important; }
[data-theme="light"] .ua-thumb-file { background: rgba(255, 255, 255, 0.55) !important; }

/* Unload-PERMISSION request modal (.urn-*) — redesigned 2026-06-30 to a unified
   fixed-colour "arrival" modal (identical in dark & light); it self-asserts via
   #urn-overlay-scoped rules in js/unload-request-notifier.js, so the old
   light-theme overrides were removed (they'd fight the new fixed palette). */

/* Cards in Light Mode */
[data-theme="light"] .dossier-card,
[data-theme="light"] .card {
    background: var(--card-bg);
    border-color: var(--card-border);
}

[data-theme="light"] .dossier-card:hover {
    box-shadow: var(--shadow-md);
}

/* Tables - keep white background for data visibility */
[data-theme="light"] .positions-table td,
[data-theme="light"] .dossiers-table td,
[data-theme="light"] table td {
    background: var(--table-row-bg);
    color: var(--table-row-text);
}

[data-theme="light"] .positions-table th,
[data-theme="light"] .dossiers-table th,
[data-theme="light"] table th {
    background: var(--table-header-bg);
    color: var(--text-secondary);
}

.positions-table tbody tr:hover td,
.dossiers-table tbody tr:hover td {
    background: #e6f3f8 !important;
}

/* Excel-style tables */
[data-theme="light"] .excel-table {
    background: var(--bg-secondary);
}

[data-theme="light"] .excel-table th {
    background: var(--table-header-bg);
    color: var(--text-primary);
}

[data-theme="light"] .excel-table td {
    background: #ffffff;
    color: #1d2c3b;
    border-color: #d6e2ea;
}

/* Buttons */
[data-theme="light"] .btn {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="light"] .btn:hover {
    background: var(--bg-hover);
}

[data-theme="light"] .btn-primary {
    background: var(--accent-teal);
    color: white;
    border: none;
}

[data-theme="light"] .btn-primary:hover {
    background: #0b6d8e;
}

/* Stat Cards - ensure white text in dark mode */
.stat-card .stat-label {
    color: var(--text-muted) !important;
}

.stat-card .stat-value {
    color: var(--text-primary) !important;
}

/* Stats Dashboard ensure visibility */
.stats-dashboard .stat-card {
    background: var(--card-bg);
    border-color: var(--card-border);
}

/* ============================================
   COMPREHENSIVE LIGHT THEME OVERRIDES
   ============================================ */

/* Page headers and sections */
[data-theme="light"] .page-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}

[data-theme="light"] .page-header h1 {
    color: #0f172a !important;
}

[data-theme="light"] .page-header p {
    color: #64748b !important;
}

/* Stats dashboard */
[data-theme="light"] .stats-dashboard {
    background: #f8fafc !important;
}

[data-theme="light"] .stats-dashboard .stat-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .stats-dashboard .stat-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* Card typography in light theme — operator asked for black, not grey.
   Beats the global `.stat-card .stat-label { color: var(--text-muted) }`
   rule (and the matching --text-secondary uses on other card types). */
[data-theme="light"] .stat-card,
[data-theme="light"] .stat-card .stat-label,
[data-theme="light"] .stat-card .stat-value,
[data-theme="light"] .stats-dashboard .stat-card,
[data-theme="light"] .stats-dashboard .stat-card .stat-label,
[data-theme="light"] .stats-dashboard .stat-card .stat-value,
[data-theme="light"] .kpi-card,
[data-theme="light"] .kpi-card .label,
[data-theme="light"] .kpi-card .value,
[data-theme="light"] .info-card,
[data-theme="light"] .info-card .label,
[data-theme="light"] .info-card .value,
[data-theme="light"] .tracking-card,
[data-theme="light"] .tracking-card .label,
[data-theme="light"] .tracking-card .value {
    color: #0f172a !important;
}

/* Filters and search bars */
[data-theme="light"] .filters-bar {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .filter-group label {
    color: #64748b !important;
}

[data-theme="light"] .search-input {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

[data-theme="light"] .search-input::placeholder {
    color: #94a3b8 !important;
}

/* Containers and panels */
[data-theme="light"] .positions-table-container,
[data-theme="light"] .dossiers-table-container,
[data-theme="light"] .dossiers-grid {
    background: #f8fafc !important;
}

/* Position cards */
[data-theme="light"] .position-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}

[data-theme="light"] .position-card-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}

[data-theme="light"] .position-card-body {
    color: #334155 !important;
}

/* Dossier cards */
[data-theme="light"] .dossier-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .dossier-card-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .dossier-id {
    color: #f97316 !important;
}

[data-theme="light"] .client-name {
    color: #0f172a !important;
}

[data-theme="light"] .dossier-info-row .label {
    color: #64748b !important;
}

[data-theme="light"] .dossier-info-row .value {
    color: #0f172a !important;
}

/* Mini stats */
[data-theme="light"] .stat-mini {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .stat-mini .value {
    color: #0f172a !important;
}

[data-theme="light"] .stat-mini .label {
    color: #64748b !important;
}

/* All text elements */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
    color: #0f172a !important;
}

[data-theme="light"] p {
    color: #334155 !important;
}

[data-theme="light"] label {
    color: #475569 !important;
}

/* Form hints and helper text */
[data-theme="light"] .form-hint {
    color: #64748b !important;
}

/* Icon colors */
[data-theme="light"] .nav-icon {
    color: #64748b !important;
}

/* Ensure content sections have proper background */
[data-theme="light"] .content-section,
[data-theme="light"] .main-content {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

/* Shipment Register & Dynamic Tracking Section */
[data-theme="light"] .register-section,
[data-theme="light"] .tracking-section {
    background: #f8fafc !important;
}

[data-theme="light"] .register-section h2,
[data-theme="light"] .tracking-section h2 {
    color: #0f172a !important;
}

[data-theme="light"] .section-title {
    color: #0f172a !important;
}

[data-theme="light"] .section-subtitle {
    color: #475569 !important;
}

/* Position register items */
[data-theme="light"] .position-item {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}

[data-theme="light"] .position-item-title {
    color: #0f172a !important;
}

[data-theme="light"] .position-item-subtitle {
    color: #64748b !important;
}

[data-theme="light"] .position-item-meta {
    color: #94a3b8 !important;
}

/* Timeline and tracking */
[data-theme="light"] .timeline-item {
    border-left: 2px solid #e2e8f0 !important;
}

[data-theme="light"] .timeline-item-title {
    color: #0f172a !important;
}

[data-theme="light"] .timeline-item-time {
    color: #64748b !important;
}

[data-theme="light"] .timeline-item-description {
    color: #475569 !important;
}

/* Tracking cards */
[data-theme="light"] .tracking-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .tracking-card-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}

[data-theme="light"] .tracking-card-body {
    color: #334155 !important;
}

[data-theme="light"] .tracking-status {
    color: #0f172a !important;
}

/* Info rows and details */
[data-theme="light"] .info-row {
    border-bottom: 1px solid #f1f5f9 !important;
}

[data-theme="light"] .info-row .label {
    color: #64748b !important;
}

[data-theme="light"] .info-row .value {
    color: #0f172a !important;
}

/* Badges and tags */
[data-theme="light"] .badge {
    background: #f1f5f9 !important;
    color: #475569 !important;
}

[data-theme="light"] .tag {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}

/* Data tables text */
[data-theme="light"] .data-table {
    color: #0f172a !important;
}

[data-theme="light"] .data-table th {
    color: #475569 !important;
    background: #f8fafc !important;
}

[data-theme="light"] .data-table td {
    color: #0f172a !important;
}

/* Metadata and descriptions */
[data-theme="light"] .meta-info {
    color: #64748b !important;
}

[data-theme="light"] .description {
    color: #475569 !important;
}

[data-theme="light"] .helper-text {
    color: #64748b !important;
}

/* All spans and small text */
[data-theme="light"] span {
    color: inherit !important;
}

[data-theme="light"] small {
    color: #64748b !important;
}

/* Container numbers and references */
[data-theme="light"] .container-num,
[data-theme="light"] .reference-num,
[data-theme="light"] .dossier-num {
    color: #0f172a !important;
    font-weight: 600 !important;
}

/* Strong and emphasis */
[data-theme="light"] strong,
[data-theme="light"] b {
    color: #0f172a !important;
}

[data-theme="light"] em,
[data-theme="light"] i {
    color: #334155 !important;
}

/* Links in light mode */
[data-theme="light"] a {
    color: #f97316 !important;
}

[data-theme="light"] a:hover {
    color: #ea580c !important;
}

/* All divs with class containing 'text' */
[data-theme="light"] [class*="text-"] {
    color: #0f172a !important;
}

[data-theme="light"] .text-muted {
    color: #64748b !important;
}

[data-theme="light"] .text-secondary {
    color: #475569 !important;
}

/* Ensure all content areas have dark text */
[data-theme="light"] .content,
[data-theme="light"] .main,
[data-theme="light"] .container,
[data-theme="light"] .wrapper {
    color: #0f172a !important;
}

/* ============================================
   COMPREHENSIVE DIV AND ELEMENT OVERRIDES
   ============================================ */

/* All divs - ensure light gray background by default */
[data-theme="light"] div {
    background-color: inherit;
    color: inherit;
}

/* Sections and containers */
[data-theme="light"] section {
    background: #f6f9fc !important;
    color: #102033 !important;
}

[data-theme="light"] article {
    background: #ffffff !important;
    color: #102033 !important;
}

/* Buttons */
[data-theme="light"] button {
    background: #ffffff !important;
    color: #102033 !important;
    border: 1px solid #b9cedb !important;
}

[data-theme="light"] button:hover {
    background: #e6f3f8 !important;
    border-color: #0f7ea2 !important;
}

/* Primary buttons */
[data-theme="light"] .btn-primary,
[data-theme="light"] button.btn-primary {
    background: #0f7ea2 !important;
    color: #ffffff !important;
    border: none !important;
}

[data-theme="light"] .btn-primary:hover,
[data-theme="light"] button.btn-primary:hover {
    background: #0b6d8e !important;
}

/* Secondary buttons */
[data-theme="light"] .btn,
[data-theme="light"] button.btn {
    background: #ffffff !important;
    color: #102033 !important;
    border: 1px solid #b9cedb !important;
}

[data-theme="light"] .btn:hover,
[data-theme="light"] button.btn:hover {
    background: #e6f3f8 !important;
    color: #0f7ea2 !important;
}

/* Icon buttons */
[data-theme="light"] .btn-icon,
[data-theme="light"] button.btn-icon {
    background: #eef4f8 !important;
    color: #435468 !important;
    border: 1px solid #d6e2ea !important;
}

[data-theme="light"] .btn-icon:hover,
[data-theme="light"] button.btn-icon:hover {
    background: #0f7ea2 !important;
    color: #ffffff !important;
}

/* All borders */
[data-theme="light"] * {
    border-color: #d6e2ea;
}

/* Panels and boxes */
[data-theme="light"] .panel,
[data-theme="light"] .box,
[data-theme="light"] .widget {
    background: #ffffff !important;
    border: 1px solid #d6e2ea !important;
    color: #102033 !important;
}

/* Grid containers */
[data-theme="light"] .grid,
[data-theme="light"] .grid-container {
    background: #f6f9fc !important;
}

/* Lists */
[data-theme="light"] ul,
[data-theme="light"] ol {
    color: #0f172a !important;
}

[data-theme="light"] li {
    color: #334155 !important;
}

/* Blockquotes */
[data-theme="light"] blockquote {
    background: #f8fafc !important;
    border-left: 4px solid #475569 !important;
    color: #334155 !important;
}

/* Code blocks */
[data-theme="light"] code,
[data-theme="light"] pre {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}

/* Headers and footers */
[data-theme="light"] header,
[data-theme="light"] footer {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

/* Asides and sidebars */
[data-theme="light"] aside,
[data-theme="light"] .sidebar {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

/* Toolbars and action bars */
[data-theme="light"] .toolbar,
[data-theme="light"] .action-bar {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
}

/* Dropdown menus */
[data-theme="light"] .dropdown,
[data-theme="light"] .menu {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(71, 85, 105, 0.12) !important;
}

[data-theme="light"] .dropdown-item,
[data-theme="light"] .menu-item {
    color: #334155 !important;
}

[data-theme="light"] .dropdown-item:hover,
[data-theme="light"] .menu-item:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

/* Select dropdowns */
[data-theme="light"] select {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #94a3b8 !important;
}

[data-theme="light"] select option {
    background: #ffffff !important;
    color: #0f172a !important;
}

/* Textareas */
[data-theme="light"] textarea {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #94a3b8 !important;
}

/* HR dividers */
[data-theme="light"] hr {
    border-color: #cbd5e1 !important;
}

/* Progress bars */
[data-theme="light"] .progress {
    background: #e2e8f0 !important;
}

[data-theme="light"] .progress-bar {
    background: #475569 !important;
}

/* Alerts and notifications */
[data-theme="light"] .alert {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

/* Tooltips */
[data-theme="light"] .tooltip {
    background: #334155 !important;
    color: #ffffff !important;
    border: 1px solid #1e293b !important;
}

/* Popover — generic surface styling for popover-shaped panels.
   MUST NOT reach .color-picker-modal. ColorPicker.open() adds `popover` to that
   element, but it is a full-viewport `position: fixed; inset: 0` overlay, not a
   surface: painting it white covers the whole dashboard and puts an opaque sheet
   behind the picker's translucent panel. That was the long-running "solid white
   colour picker" bug — see the .color-picker-modal block earlier in this file. */
[data-theme="light"] .popover:not(.color-picker-modal) {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(71, 85, 105, 0.12) !important;
}

/* Scrollbars */
[data-theme="light"] ::-webkit-scrollbar {
    background: #f1f5f9 !important;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border: 2px solid #f1f5f9 !important;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}

/* ============================================
   NOTIFICATION CENTER — Option 4 (Gradient Circle + Sidebar)
   ============================================ */

/* Floating Bubble */
.notification-bubble {
    position: fixed;
    bottom: 5rem;
    right: 1.5rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-blue), #6366f1) !important;
    border: none !important;
    color: #fff !important;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification-bubble:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 12px 30px rgba(99, 102, 241, 0.4);
    background: linear-gradient(135deg, var(--accent-blue), #6366f1) !important;
}

.notification-bubble:active {
    transform: scale(0.95) !important;
}

/* Badge on bubble */
.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    background: var(--accent-red) !important;
    color: #fff !important;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2px solid var(--bg-primary);
    line-height: 1;
}

/* Pulse animation */
@keyframes notif-pulse {
    0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.5); }
    70% { box-shadow: 0 0 0 12px rgba(99, 102, 241, 0); }
    100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}

.notification-bubble.pulsing {
    animation: notif-pulse 2s infinite;
}

/* Right Sidebar Panel */
.notification-sidebar {
    position: fixed;
    top: 0;
    right: -380px;
    bottom: 0;
    width: 380px;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification-sidebar.visible {
    right: 0;
    /* Beat the generic `.visible { display:block !important }` in main.css — without
       this the OPEN panel becomes display:block, so the body's flex:1 stops
       constraining height and the paginator gets pushed past the bottom. Keeping it
       a flex column lets the rows scroll and pins the pager to the footer. */
    display: flex !important;
}

/* Sidebar backdrop */
.notification-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.notification-backdrop.visible {
    opacity: 1;
    visibility: visible;
}

/* Sidebar Header */
.notif-sidebar-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.notif-sidebar-header h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.notif-sidebar-close {
    background: none !important;
    border: none !important;
    color: var(--text-muted) !important;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    border-radius: 4px;
    transition: all 0.15s;
}

.notif-sidebar-close:hover {
    color: var(--text-primary) !important;
    background: var(--bg-tertiary) !important;
}

/* Sidebar Tabs */
.notif-sidebar-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    background: var(--bg-secondary);
}

.notif-sidebar-tab {
    flex: 1;
    padding: 10px 16px;
    font-size: 0.78rem;
    font-weight: 600;
    background: none !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    color: var(--text-muted) !important;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.notif-sidebar-tab:hover {
    color: var(--text-secondary) !important;
    background: var(--bg-tertiary) !important;
}

.notif-sidebar-tab.active {
    color: var(--accent-blue) !important;
    border-bottom-color: var(--accent-blue) !important;
    background: none !important;
}

.notif-tab-count {
    padding: 1px 7px;
    border-radius: 9px;
    font-size: 0.6rem;
    background: rgba(239, 68, 68, 0.15) !important;
    color: var(--accent-red) !important;
    font-weight: 700;
    border: none !important;
    line-height: 1.4;
}

/* Sidebar Body */
.notif-sidebar-body {
    flex: 1;
    min-height: 0;
    display: flex;             /* column layout: rows scroll, pager pinned to footer */
    flex-direction: column;
    overflow: hidden;          /* the inner rows area scrolls, not the whole body */
    padding: 0;
}
/* Rows fill the available height and scroll; the pager (a sibling flex item) stays
   in the footer and is never pushed out of view, regardless of row count. */
.notif-log-rows { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; max-width: 100%; }

/* Notification Items */
.notif-item {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s;
}

.notif-item:hover {
    background: var(--bg-tertiary);
}

.notif-item:last-child {
    border-bottom: none;
}

.notif-item.pending-task {
    border-left: 3px solid var(--accent-orange);
}

.notif-item.info-notif {
    border-left: 3px solid var(--accent-blue);
}

.notif-item .ni-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.notif-item .ni-icon {
    font-size: 0.95rem;
    flex-shrink: 0;
}

.notif-item .ni-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
}

.notif-item .ni-time {
    margin-left: auto;
    font-size: 0.62rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.notif-item .ni-body {
    font-size: 0.74rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-left: 0;
}

.notif-item .ni-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
}

.notif-item .ni-btn {
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.notif-item .ni-btn-approve {
    background: var(--accent-green) !important;
    color: #fff !important;
    border: none !important;
}

.notif-item .ni-btn-approve:hover {
    filter: brightness(1.15);
    background: var(--accent-green) !important;
}

.notif-item .ni-btn-read {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

.notif-item .ni-btn-read:hover {
    background: var(--bg-hover) !important;
}

/* Delete (per-user hide) — muted, turns red on hover so it reads as removal. */
.notif-item .ni-btn-delete {
    background: transparent !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border-color) !important;
}
.notif-item .ni-btn-delete:hover {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #ef4444 !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
}

.notif-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.82rem;
}

/* ── 2-line compact log rows in the notification-center action log ──
   Header line + plain-English description + meta line. Bigger than the old
   1-line variant (more breathing room, more context) but still half the
   weight of the 4-line bloat. */
.notif-item.compact {
    padding: 0.65rem 0.8rem;
    margin-bottom: 0.45rem;
    overflow: hidden;          /* clip any oversized child instead of pushing the page */
    max-width: 100%;
    box-sizing: border-box;
}
.notif-item.compact .jcl-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;           /* allow chip overflow to wrap to a second line */
    line-height: 1.3;
    font-size: 0.72rem;
    color: var(--text-secondary);
    overflow: hidden;
    margin-bottom: 0.25rem;
    min-width: 0;
}
.notif-item.compact .jcl-icon {
    flex: 0 0 auto;
    font-size: 0.9rem;
    line-height: 1;
}
.notif-item.compact .jcl-title {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.02em;
}
.notif-item.compact .jcl-desc {
    color: var(--text-primary);
    font-size: 0.72rem;
    line-height: 1.45;
    margin-bottom: 0.25rem;
    word-break: break-word;
}
.notif-item.compact .jcl-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    font-size: 0.64rem;
    color: var(--text-muted);
    line-height: 1.4;
    min-width: 0;
    word-break: break-word;
}
.notif-item.compact .jcl-meta .jcl-file {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.notif-item.compact .jcl-pos {
    color: var(--accent-orange);
    text-decoration: none;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.notif-item.compact .jcl-pos:hover { text-decoration: underline; }
.notif-item.compact .jcl-file {
    color: var(--text-muted);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.62rem;
}
.notif-item.compact .jcl-by { color: var(--text-muted); font-style: italic; }
.notif-item.compact .ni-time {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 0.62rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.notif-item.compact .jcl-chips.inline {
    flex: 0 0 auto;
    display: inline-flex;
    gap: 0.3rem;
}
.notif-item.compact .jcl-chip {
    font-size: 0.6rem;
    padding: 0.08rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
    white-space: nowrap;
}
.notif-item.compact .jcl-chip.type       { color: #fbbf24; border-color: rgba(245,158,11,0.45); background: rgba(245,158,11,0.08); }
.notif-item.compact .jcl-chip.score-high { color: #4ade80; border-color: rgba(34,197,94,0.45); background: rgba(34,197,94,0.10); font-weight: 700; }
.notif-item.compact .jcl-chip.score-mid  { color: #fbbf24; border-color: rgba(245,158,11,0.45); background: rgba(245,158,11,0.10); font-weight: 700; }
.notif-item.compact .jcl-chip.score-low  { color: #fca5a5; border-color: rgba(239,68,68,0.45); background: rgba(239,68,68,0.10); font-weight: 700; }

/* Pager — sticky bottom strip with prev / page-info / next */
.notif-log-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-top: 1px solid var(--border-color);
    /* Non-scrolling flex item: the rows area (.notif-log-rows) scrolls above it,
       so the pager is permanently pinned to the panel footer and never pushed out. */
    flex-shrink: 0;
    background: var(--bg-secondary);
}
.notif-log-pager .pager-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    width: 28px;
    height: 28px;
    border-radius: 4px;
    font-size: 0.7rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s ease;
}
.notif-log-pager .pager-btn:not(:disabled):hover {
    color: var(--accent-orange);
    border-color: var(--accent-orange);
    background: rgba(249, 115, 22, 0.08);
}
.notif-log-pager .pager-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.notif-log-pager .pager-info {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    min-width: 50px;
    text-align: center;
}

/* Page-turn animation: rows fade in from the side opposite the click */
.notif-log-rows {
    will-change: transform, opacity;
}
.notif-log-rows.slide-in-from-right {
    animation: notifPageInFromRight 0.22s ease-out both;
}
.notif-log-rows.slide-in-from-left {
    animation: notifPageInFromLeft 0.22s ease-out both;
}
@keyframes notifPageInFromRight {
    0%   { transform: translateX(24px); opacity: 0; }
    100% { transform: translateX(0);    opacity: 1; }
}
@keyframes notifPageInFromLeft {
    0%   { transform: translateX(-24px); opacity: 0; }
    100% { transform: translateX(0);     opacity: 1; }
}

.notif-empty-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 8px;
    opacity: 0.5;
}

/* Light theme overrides for notification center */
[data-theme="light"] .notification-bubble {
    background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
    border: none !important;
    color: #fff !important;
}

[data-theme="light"] .notification-sidebar {
    background: rgba(255, 255, 255, 0.86) !important;
    border-left: 1px solid rgba(214, 226, 234, 0.82) !important;
    box-shadow: -8px 0 28px rgba(23, 45, 64, 0.14) !important;
    backdrop-filter: blur(14px) saturate(1.08);
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
}

[data-theme="light"] .notification-backdrop {
    background: rgba(15, 32, 51, 0.16) !important;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

[data-theme="light"] .notif-sidebar-header {
    background: rgba(255, 255, 255, 0.62) !important;
    border-bottom: 1px solid rgba(214, 226, 234, 0.82) !important;
}

[data-theme="light"] .notif-sidebar-tabs {
    background: rgba(255, 255, 255, 0.54) !important;
    border-bottom: 1px solid rgba(214, 226, 234, 0.82) !important;
}

[data-theme="light"] .notif-sidebar-tab {
    color: #64748b !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
}

[data-theme="light"] .notif-sidebar-tab.active {
    color: #3b82f6 !important;
    border-bottom-color: #3b82f6 !important;
}

[data-theme="light"] .notif-sidebar-tab:hover {
    color: #334155 !important;
    background: rgba(230, 243, 248, 0.68) !important;
}

[data-theme="light"] .notif-item {
    border-bottom: 1px solid rgba(214, 226, 234, 0.72) !important;
    background: rgba(255, 255, 255, 0.34) !important;
}

[data-theme="light"] .notif-item:hover {
    background: rgba(230, 243, 248, 0.66) !important;
}

[data-theme="light"] .notif-item .ni-title {
    color: #0f172a !important;
}

[data-theme="light"] .notif-item .ni-body {
    color: #64748b !important;
}

[data-theme="light"] .notif-sidebar-close {
    color: #94a3b8 !important;
    background: none !important;
    border: none !important;
}

[data-theme="light"] .notif-sidebar-close:hover {
    color: #0f172a !important;
    background: rgba(230, 243, 248, 0.70) !important;
}

[data-theme="light"] .notif-item .ni-btn-approve {
    background: #22c55e !important;
    color: #fff !important;
    border: none !important;
}

[data-theme="light"] .notif-item .ni-btn-read {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}

/* ============================================
   HARBOR LIGHT THEME FINAL REFINEMENTS
   Keep this at the end to win over older broad light-theme overrides.
   ============================================ */
[data-theme="light"] .main-content,
[data-theme="light"] .content-section,
[data-theme="light"] .dashboard-pane,
[data-theme="light"] .wms-page {
    background: #f6f9fc !important;
    color: #102033 !important;
}

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6,
[data-theme="light"] strong,
[data-theme="light"] b {
    color: #102033 !important;
}

[data-theme="light"] p,
[data-theme="light"] label,
[data-theme="light"] .text-secondary,
[data-theme="light"] .meta-info,
[data-theme="light"] .description,
[data-theme="light"] .helper-text {
    color: #33465a !important;
}

[data-theme="light"] .text-muted,
[data-theme="light"] small,
[data-theme="light"] .form-hint,
[data-theme="light"] .stat-label,
[data-theme="light"] .portal-card p,
[data-theme="light"] .portal-card-stat .label,
[data-theme="light"] .page-title-section p,
[data-theme="light"] .page-header p,
[data-theme="light"] .table-title span,
[data-theme="light"] .filter-group label {
    color: #536579 !important;
}

[data-theme="light"] .stats-dashboard,
[data-theme="light"] .filters-bar,
[data-theme="light"] .page-tabs-container,
[data-theme="light"] .toolbar,
[data-theme="light"] .action-bar {
    background: #ffffff !important;
    border-color: #d6e2ea !important;
}

[data-theme="light"] .stat-card,
[data-theme="light"] .card,
[data-theme="light"] .dossier-card,
[data-theme="light"] .position-card,
[data-theme="light"] .tracking-card,
[data-theme="light"] .stat-mini {
    background: #ffffff !important;
    border-color: #d6e2ea !important;
    box-shadow: 0 8px 20px rgba(23, 45, 64, 0.08) !important;
}

[data-theme="light"] .page-tab.active {
    color: #0a5989 !important;
    background: #e6f3f8 !important;
}

[data-theme="light"] .row-counter-badge,
[data-theme="light"] .badge,
[data-theme="light"] .tag {
    background: #eef4f8 !important;
    color: #33465a !important;
    border-color: #d6e2ea !important;
}

[data-theme="light"] .row-counter-badge span,
[data-theme="light"] a,
[data-theme="light"] .dossier-id {
    color: #0f7ea2 !important;
}

[data-theme="light"] a:hover {
    color: #0a5989 !important;
}

[data-theme="light"] table th,
[data-theme="light"] .data-table th,
[data-theme="light"] .excel-table th {
    background: #eef4f8 !important;
    color: #33465a !important;
    border-color: #d6e2ea !important;
}

[data-theme="light"] table td,
[data-theme="light"] .data-table td,
[data-theme="light"] .excel-table td {
    background: #ffffff;
    color: #1d2c3b !important;
    border-color: #d6e2ea !important;
}

[data-theme="light"] .excel-table tbody tr:nth-child(even) td:not(:first-child) {
    background: #f8fbfd !important;
}

[data-theme="light"] .excel-table tbody tr:hover td,
[data-theme="light"] .positions-table tbody tr:hover td,
[data-theme="light"] .dossiers-table tbody tr:hover td {
    background: #e6f3f8 !important;
}

[data-theme="light"] .excel-table td.selected-cell {
    border-color: var(--grid-sel-border) !important;
    background: var(--grid-sel-fill) !important;
}

[data-theme="light"] ::-webkit-scrollbar,
[data-theme="light"] ::-webkit-scrollbar-track {
    background: #eef4f8 !important;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: #0a5989 !important;
    border: 2px solid #eef4f8 !important;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: #0f7ea2 !important;
}

[data-theme="light"] * {
    scrollbar-color: #0a5989 #eef4f8;
}

/* ---- PAGE-LEVEL (viewport) SCROLLBAR ----
   Every rule above uses a DESCENDANT combinator and `data-theme` lives on
   <html>, so <html> itself was never matched: the page scrollbar fell through
   to the bare `::-webkit-scrollbar*` rules in main.css, which resolve
   --bg-primary / --border-color to the light theme's near-white #f6f9fc /
   #d6e2ea. Next to the marine inner scrollbars that read as a white bar.
   Naming the root element with NO combinator gives the viewport the same
   marine treatment. `scrollbar-color` is what Firefox and Chromium 121+
   actually honour (and it inherits down to the identical values the `*` rule
   above already sets, so no inner scroller changes); the -webkit- pseudos stay
   for Safari and older Chromium. */
[data-theme="light"] {
    scrollbar-color: #0a5989 #eef4f8;
}

[data-theme="light"]::-webkit-scrollbar,
[data-theme="light"]::-webkit-scrollbar-track {
    background: #eef4f8 !important;
}

[data-theme="light"]::-webkit-scrollbar-thumb {
    background: #0a5989 !important;
    border: 2px solid #eef4f8 !important;
}

[data-theme="light"]::-webkit-scrollbar-thumb:hover {
    background: #0f7ea2 !important;
}

/* Dark theme: Chromium already paints the page scrollbar from the main.css
   tokens (#0a0e14 track / #2a3545 thumb), but Firefox has no
   ::-webkit-scrollbar at all, so the standard property is the only lever
   there. Gated on engines WITHOUT the webkit pseudo so Chromium keeps its 8px
   styled bar — declaring scrollbar-color there would drop it back to the
   platform's 15px scrollbar. :not([data-theme="light"]) keeps the marine
   override above authoritative in the light theme. */
@supports not selector(::-webkit-scrollbar) {
    :root:not([data-theme="light"]) {
        scrollbar-color: var(--border-color) var(--bg-primary);
        scrollbar-width: thin;
    }
}