/* ==========================================================================
   Daitalens Effects Layer — Premium Visual Polish
   All colours use CSS custom properties for white-label safety.
   All animations respect prefers-reduced-motion.
   This file is additive — remove the import to revert to standard look.
   ========================================================================== */

/* ==========================================================================
   1. Design Tokens (CSS Custom Properties)
   --dl-primary-rgb and --dl-accent-rgb are set by dl-effects.js
   from the branding API hex colours.
   ========================================================================== */

:root {
    /* Fallback RGB values — overridden by dl-effects.js at runtime */
    --dl-primary-rgb: 16, 113, 185;
    --dl-accent-rgb: 79, 202, 255;

    /* DL-2518 — the frozen grid header paints ABOVE the columns that scroll under it, so its
       background has to be OPAQUE or they show straight through. Split into a solid base plus a
       tint layer: light composites the 15% brand tint over white to the exact colour it has
       always been, dark uses the raised surface with no tint. Both fully opaque. */
    --dl-grid-header-solid: #FFFFFF;
    --dl-grid-header-tint: rgba(var(--dl-primary-rgb), 0.15);

    /* DL-2969 — DLReportBanner's fixed accent. This is CHROME, not branding: it must never be
       set from the branding API and must never be redefined under [data-theme="dark"]. The same
       component has to look the same for every customer and in both themes. */
    --dl-banner-accent: #2AAAE1;

    /* ── Colour Architecture ── */
    --dl-bg-primary: #F7F9FC;
    --dl-bg-secondary: #EDF2F7;
    --dl-text-primary: #1A202C;
    --dl-text-secondary: #4A5568;
    --dl-text-muted: #A0AEC0;
    /* Navigation text — the brand blue driven down to reading weight. Sits deliberately
       between --b-primary-color (too light for a wall of menu items) and
       --dl-text-primary (near-black, reads as body copy, not as navigation). */
    --dl-nav-text: #0B3F68;
    --dl-nav-text-muted: #4A7396;
    --dl-success: #38A169;
    --dl-warning: #D69E2E;
    --dl-danger: #E53E3E;
    --dl-border-subtle: rgba(0, 0, 0, 0.06);
    --dl-border-light: rgba(0, 0, 0, 0.10);
    --dl-border-emphasis: rgba(0, 0, 0, 0.16);

    /* ── Surface & Glass ── */
    --dl-bg-glass: rgba(255, 255, 255, 0.7);
    --dl-bg-glass-strong: rgba(255, 255, 255, 0.85);
    --dl-bg-glass-subtle: rgba(255, 255, 255, 0.4);

    /* ── Blur ── */
    --dl-blur: 16px;
    --dl-blur-light: 8px;

    /* ── Shadow System ── */
    --dl-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --dl-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --dl-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
    --dl-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
    --dl-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
    --dl-shadow-glow: 0 0 20px rgba(var(--dl-primary-rgb), 0.15);
    --dl-shadow-glow-accent: 0 0 20px rgba(var(--dl-accent-rgb), 0.25);

    /* ── Typography ── */
    --dl-font-display: var(--dl-font);
    --dl-text-4xl: 2.488rem;
    --dl-text-3xl: 2.074rem;
    --dl-text-2xl: 1.728rem;
    --dl-text-xl: 1.44rem;
    --dl-text-lg: 1.2rem;
    --dl-text-base: 1rem;
    --dl-text-sm: 0.833rem;
    --dl-text-xs: 0.694rem;
    --dl-tracking-tight: -0.02em;
    --dl-tracking-wide: 0.05em;
    --dl-tracking-wider: 0.1em;

    /* ── Spacing (8px base) ── */
    --dl-space-1: 0.25rem;
    --dl-space-2: 0.5rem;
    --dl-space-3: 0.75rem;
    --dl-space-4: 1rem;
    --dl-space-5: 1.25rem;
    --dl-space-6: 1.5rem;
    --dl-space-8: 2rem;

    /* ── Border Radius ── */
    --dl-radius-sm: 6px;
    --dl-radius-md: 10px;
    --dl-radius-lg: 16px;
    --dl-radius-xl: 24px;
    --dl-radius-full: 9999px;

    /* ── Transition Presets ── */
    --dl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dl-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dl-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --dl-duration-instant: 100ms;
    --dl-duration-fast: 200ms;
    --dl-duration-normal: 300ms;
    --dl-duration-slow: 500ms;
}


/* ==========================================================================
   2. Animated Mesh Gradient Background
   Subtle colour wash that shifts across the app shell.
   ========================================================================== */

.app-container {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(var(--dl-accent-rgb), 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(var(--dl-primary-rgb), 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(var(--dl-accent-rgb), 0.05) 0%, transparent 50%),
        linear-gradient(135deg, rgba(var(--dl-primary-rgb), 0.03) 0%, rgba(var(--dl-accent-rgb), 0.02) 100%) !important;
    background-size: 200% 200%, 200% 200%, 200% 200%, 100% 100% !important;
    animation: dl-mesh-drift 20s ease-in-out infinite !important;
}

@keyframes dl-mesh-drift {
    0%, 100% {
        background-position: 0% 50%, 100% 0%, 50% 100%, 0% 0%;
    }
    33% {
        background-position: 100% 50%, 0% 100%, 0% 0%, 0% 0%;
    }
    66% {
        background-position: 50% 0%, 50% 50%, 100% 50%, 0% 0%;
    }
}


/* ==========================================================================
   3. Glassmorphism — Content Areas
   ========================================================================== */

/* Main content wrapper. DL-2969: solid #F9FBFC, not frosted glass — these declarations are
   !important, so the layout's own rule could not change it without this one moving too.
   The border and the shadow are gone with the layout's: this box is coincident with
   `.content-body`, and its near-white ring and downward drop were the outline visible down
   the content's right edge and along its bottom. `none` is stated rather than deleted
   because this file's !important is what would otherwise resurrect them. */
.content-body-wrapper {
    background: #F9FBFC !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}


/* Fixed popup menus — glass with depth */
.fixed-menu {
    background: var(--dl-bg-glass-strong) !important;
    backdrop-filter: blur(20px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: var(--dl-shadow-lg),
                inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}


/* ==========================================================================
   4. Sidebar Icon Polish
   Give icons depth, colour life on hover, glow on active.
   ========================================================================== */

/* Icon container — add subtle colour treatment */
.sidebar-li .sidebar-icon {
    transition: transform 0.3s var(--dl-ease-spring),
                filter 0.3s var(--dl-ease-out),
                box-shadow 0.3s var(--dl-ease-out) !important;
}

/* Hover — lift + colour glow */
.sidebar-li:hover .sidebar-icon {
    transform: translateY(-3px) scale(1.08) !important;
    filter: drop-shadow(0 4px 8px rgba(var(--dl-primary-rgb), 0.3))
            drop-shadow(0 1px 2px rgba(var(--dl-primary-rgb), 0.15)) !important;
}

/* Active — persistent glow */
.sidebar-li.sidebar-active .sidebar-icon {
    filter: drop-shadow(0 2px 6px rgba(var(--dl-primary-rgb), 0.35))
            drop-shadow(0 0 12px rgba(var(--dl-accent-rgb), 0.2)) !important;
}

/* Active indicator bar — gradient glow */
.sidebar-li.sidebar-active::before {
    background: linear-gradient(180deg,
        rgba(var(--dl-primary-rgb), 1) 0%,
        rgba(var(--dl-accent-rgb), 1) 100%) !important;
    box-shadow: 0 0 8px rgba(var(--dl-accent-rgb), 0.5),
                0 0 16px rgba(var(--dl-primary-rgb), 0.2) !important;
    width: 3px !important;
}

/* Active background — subtle glass */
.sidebar-li.sidebar-active {
    background: rgba(var(--dl-primary-rgb), 0.08) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--dl-primary-rgb), 0.06) !important;
}

/* Sidebar text glow on active */
.sidebar-li.sidebar-active .sidebar-text {
    text-shadow: 0 0 8px rgba(var(--dl-primary-rgb), 0.3) !important;
}

/* Press feedback */
.sidebar-li:active .sidebar-icon {
    transform: scale(0.9) !important;
    transition-duration: 100ms !important;
}


/* ==========================================================================
   5. Navigation Pill Enhancement
   ========================================================================== */

.nav-pill-btn {
    transition: all 0.25s var(--dl-ease-spring) !important;
    position: relative !important;
}

.nav-pill-btn.active {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1),
                0 0 0 1px rgba(var(--dl-primary-rgb), 0.08) !important;
    transform: scale(1.02) !important;
}

.nav-pill-btn:hover:not(.active) {
    background: rgba(var(--dl-primary-rgb), 0.06) !important;
    transform: translateY(-1px) !important;
}

/* Nav icon hover glow */
.nav-pill-btn:hover .nav-icon {
    filter: drop-shadow(0 2px 4px rgba(var(--dl-primary-rgb), 0.2));
}


/* ==========================================================================
   6. Page Content Enter Animation
   Triggered on every page render for smooth transitions.
   ========================================================================== */

/* Page enter animation — opt-in only via .dl-page-enter class.
   Auto-applying to all content children was too busy on data-heavy pages. */
.dl-page-enter {
    animation: dl-page-enter 450ms var(--dl-ease-out) both;
}

@keyframes dl-page-enter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================================================
   7. Card Hover — Lift + Shadow
   Apply .dl-card-hover to any card element for smooth lift on hover.
   ========================================================================== */

.dl-card-hover {
    transition: transform 0.35s var(--dl-ease-spring),
                box-shadow 0.3s var(--dl-ease-out);
    will-change: transform;
}

.dl-card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--dl-shadow-lg);
}

.dl-card-hover:active {
    transform: translateY(-1px);
    transition-duration: 100ms;
}

/* Opt-in only — add .dl-card-hover class to cards that should lift.
   NOT auto-applied to .e-card as it makes data-heavy pages too busy. */


/* ==========================================================================
   8. Button Polish — Settings, Customer, Nav buttons
   ========================================================================== */

/* Settings buttons — subtle glow on hover */
.settings-btn {
    transition: all 0.25s var(--dl-ease-spring) !important;
}

.settings-btn:hover {
    background: rgba(var(--dl-primary-rgb), 0.08) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(var(--dl-primary-rgb), 0.12) !important;
}

.settings-btn:active {
    transform: translateY(0) scale(0.95) !important;
    transition-duration: 100ms !important;
}

/* Customer button — glass + glow */
.customer-btn {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transition: all 0.25s var(--dl-ease-spring) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.customer-btn:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(var(--dl-primary-rgb), 0.15),
                0 0 0 1px rgba(var(--dl-primary-rgb), 0.08) !important;
}


/* ==========================================================================
   9. Notification Dot Pulse
   ========================================================================== */

.notification-dot {
    animation: dl-pulse 2s ease-in-out infinite !important;
}

@keyframes dl-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    50% {
        transform: scale(1.2);
        opacity: 0.9;
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0);
    }
}


/* ==========================================================================
   10. Skeleton Shimmer — Loading State Utility
   Usage: <div class="dl-skeleton" style="width:200px;height:20px"></div>
   ========================================================================== */

.dl-skeleton {
    background: linear-gradient(90deg,
        rgba(var(--dl-primary-rgb), 0.06) 25%,
        rgba(var(--dl-primary-rgb), 0.12) 50%,
        rgba(var(--dl-primary-rgb), 0.06) 75%);
    background-size: 200% 100%;
    animation: dl-shimmer 1.5s ease-in-out infinite;
    border-radius: 6px;
}

@keyframes dl-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* ==========================================================================
   11. Top Navigation Bar — Glass treatment
   ========================================================================== */

.top-nav {
    position: relative !important;
}

.top-nav::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--dl-primary-rgb), 0.12) 20%,
        rgba(var(--dl-accent-rgb), 0.15) 50%,
        rgba(var(--dl-primary-rgb), 0.12) 80%,
        transparent 100%);
}


/* ==========================================================================
   12. Bottom Bar Enhancement
   ========================================================================== */

.bottom-bar {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(var(--dl-primary-rgb), 0.03) 100%) !important;
    border: none !important;
}


/* ==========================================================================
   13. Nav Center Pill Container — Glass effect
   ========================================================================== */

.nav-center {
    background: rgba(var(--dl-primary-rgb), 0.06) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(var(--dl-primary-rgb), 0.08) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
                0 1px 3px rgba(0, 0, 0, 0.04) !important;
}


/* ==========================================================================
   14. Scrollbar Enhancement — Brand-tinted thin scrollbar
   ========================================================================== */

/* Global thin scrollbar with brand tint */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--dl-primary-rgb), 0.25) transparent;
}

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

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

*::-webkit-scrollbar-thumb {
    background-color: rgba(var(--dl-primary-rgb), 0.2);
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: rgba(var(--dl-primary-rgb), 0.4);
}


/* ==========================================================================
   15. User Avatar — Glow ring
   ========================================================================== */

.user-avatar {
    transition: all 0.3s var(--dl-ease-out) !important;
    box-shadow: 0 0 0 2px rgba(var(--dl-accent-rgb), 0.3) !important;
}

.user-avatar:hover {
    box-shadow: 0 0 0 3px rgba(var(--dl-accent-rgb), 0.5),
                0 0 12px rgba(var(--dl-accent-rgb), 0.2) !important;
    transform: scale(1.05);
}

.online-indicator {
    animation: dl-online-glow 3s ease-in-out infinite !important;
}

@keyframes dl-online-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
    50% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0); }
}


/* ==========================================================================
   16. Logout Button — Red glow on hover
   ========================================================================== */

.logout-btn:hover {
    background: rgba(220, 38, 38, 0.08) !important;
    box-shadow: 0 0 16px rgba(220, 38, 38, 0.1) !important;
}

.logout-btn:hover .sidebar-icon {
    filter: drop-shadow(0 2px 6px rgba(220, 38, 38, 0.3)) !important;
}


/* ==========================================================================
   17. Theme Toggle Button
   ========================================================================== */

.theme-toggle {
    background: transparent;
    border: none;
    color: #3991d6;
    padding: 6px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s var(--dl-ease-spring);
    font-size: 16px;
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 2px;
    position: relative;
}

.theme-toggle:hover {
    background: rgba(var(--dl-primary-rgb), 0.08);
    transform: translateY(-1px) rotate(15deg);
}

.theme-toggle:active {
    transform: scale(0.9);
    transition-duration: 100ms;
}

/* Theme toggle icon visibility — driven by user preference (light / dark / system) */
.theme-toggle .theme-icon-moon { display: flex; }
.theme-toggle .theme-icon-sun { display: none; }
.theme-toggle .theme-icon-system { display: none; }

[data-theme-pref="dark"] .theme-toggle .theme-icon-moon { display: none; }
[data-theme-pref="dark"] .theme-toggle .theme-icon-sun { display: flex; }
[data-theme-pref="dark"] .theme-toggle .theme-icon-system { display: none; }

[data-theme-pref="system"] .theme-toggle .theme-icon-moon { display: none; }
[data-theme-pref="system"] .theme-toggle .theme-icon-sun { display: none; }
[data-theme-pref="system"] .theme-toggle .theme-icon-system { display: flex; }

[data-theme="dark"] .theme-toggle {
    color: #fbbf24;
}


/* ==========================================================================
   18. DARK MODE
   All dark overrides scoped under [data-theme="dark"] on <html>.
   Uses CSS custom properties for brand-safe dark surfaces.
   ========================================================================== */

[data-theme="dark"] {
    /* Dark surface palette */
    --dl-dark-bg: #0f1117;
    --dl-dark-surface: #1a1d27;
    --dl-dark-surface-raised: #222639;
    --dl-dark-surface-overlay: #2a2e3f;
    --dl-dark-border: rgba(255, 255, 255, 0.08);
    --dl-dark-border-light: rgba(255, 255, 255, 0.12);
    --dl-dark-border-emphasis: rgba(255, 255, 255, 0.20);
    --dl-dark-text: #e4e4e7;
    --dl-dark-text-muted: #9ca3af;
    --dl-dark-text-subtle: #6b7280;

    /* DL-2518 — dark's grid header is the raised surface, untinted; the tint layer is switched
       off rather than composited so the header keeps exactly the colour it has today. */
    --dl-grid-header-solid: var(--dl-dark-surface-raised);
    --dl-grid-header-tint: transparent;

    /* Override semantic tokens for dark */
    --dl-bg-primary: #0f1117;
    --dl-bg-secondary: #1a1d27;
    --dl-text-primary: #e4e4e7;
    --dl-text-secondary: #9ca3af;
    --dl-text-muted: #6b7280;
    /* Dark surfaces invert the idea: a dark blue would vanish, so nav text goes light
       with a cool cast to keep the same "this is navigation" feel. */
    --dl-nav-text: #dbe7f2;
    --dl-nav-text-muted: #8fa8c0;
    --dl-border-subtle: rgba(255, 255, 255, 0.08);
    --dl-border-light: rgba(255, 255, 255, 0.12);
    --dl-border-emphasis: rgba(255, 255, 255, 0.20);

    /* Override glass tokens for dark */
    --dl-bg-glass: rgba(26, 29, 39, 0.8);
    --dl-bg-glass-strong: rgba(26, 29, 39, 0.9);
    --dl-bg-glass-subtle: rgba(26, 29, 39, 0.5);

    /* Override shadows for dark */
    --dl-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --dl-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
    --dl-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Body */
[data-theme="dark"] body {
    background-color: var(--dl-dark-bg) !important;
    color: var(--dl-dark-text) !important;
}

/* App container — dark animated gradient */
[data-theme="dark"] .app-container {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(var(--dl-primary-rgb), 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(var(--dl-accent-rgb), 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(var(--dl-primary-rgb), 0.05) 0%, transparent 50%),
        linear-gradient(135deg, var(--dl-dark-bg) 0%, #141620 100%) !important;
    background-size: 200% 200%, 200% 200%, 200% 200%, 100% 100% !important;
}

/* Content body wrapper — dark colour only; no edge, same as light. */
[data-theme="dark"] .content-body-wrapper {
    background: var(--dl-bg-glass-strong) !important;
    border: none !important;
    box-shadow: none !important;
}


/* Content body — dark colours only. DL-2969: this rule used to carry a box-shadow too, and
   its !important then decided the shading for the whole app from a global stylesheet. With
   no box-shadow declared here there is nothing to beat, so the single definition in
   DLMainLayoutDesktop.razor.css wins in both themes — which is where it belongs. */
[data-theme="dark"] .content-body {
    background: var(--dl-dark-surface) !important;
    color: var(--dl-dark-text) !important;
}



/* Sidebar */
[data-theme="dark"] .sidebar-li:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .sidebar-li .sidebar-icon {
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .sidebar-li:hover .sidebar-icon {
    background: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .sidebar-li.sidebar-active {
    background: rgba(var(--dl-primary-rgb), 0.12) !important;
}

[data-theme="dark"] .sidebar-li.sidebar-active .sidebar-icon {
    background: rgba(var(--dl-primary-rgb), 0.15) !important;
}

[data-theme="dark"] .sidebar-text {
    color: rgba(255, 255, 255, 0.7) !important;
    text-shadow: none !important;
}

[data-theme="dark"] .sidebar-li.sidebar-active .sidebar-text {
    color: rgba(var(--dl-accent-rgb), 1) !important;
}

/* Top nav */
[data-theme="dark"] .nav-center {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

[data-theme="dark"] .nav-pill-btn {
    color: var(--dl-dark-text-muted) !important;
}

[data-theme="dark"] .nav-pill-btn.active {
    background: var(--dl-dark-surface-raised) !important;
    color: rgba(var(--dl-accent-rgb), 1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .nav-pill-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--dl-dark-text) !important;
}

/* Nav buttons */
[data-theme="dark"] .nav-btn {
    color: var(--dl-dark-text-muted) !important;
}

[data-theme="dark"] .nav-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--dl-dark-text) !important;
}

[data-theme="dark"] .settings-btn {
    color: var(--dl-dark-text-muted) !important;
}

[data-theme="dark"] .settings-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--dl-dark-text) !important;
}

/* Customer button */
[data-theme="dark"] .customer-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--dl-dark-text) !important;
}

[data-theme="dark"] .customer-btn:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

/* Fixed menu (popup) */
[data-theme="dark"] .fixed-menu {
    background: rgba(26, 29, 39, 0.95) !important;
    border-color: var(--dl-dark-border) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .title-header {
    background: rgba(var(--dl-primary-rgb), 0.08) !important;
    border-color: var(--dl-dark-border) !important;
}

[data-theme="dark"] .title {
    color: var(--dl-dark-text) !important;
}

[data-theme="dark"] .page-list li {
    color: var(--dl-dark-text-muted) !important;
}

[data-theme="dark"] .page-list li:hover {
    background: rgba(var(--dl-primary-rgb), 0.1) !important;
    color: var(--dl-dark-text) !important;
}

[data-theme="dark"] .page-list li.active {
    background: rgba(var(--dl-primary-rgb), 0.15) !important;
    color: rgba(var(--dl-accent-rgb), 1) !important;
}

/* Bottom bar */
[data-theme="dark"] .bottom-bar {
    background: transparent !important;
    border-top: none !important;
}

[data-theme="dark"] .bottom-bar p,
[data-theme="dark"] .bottom-bar b {
    color: var(--dl-dark-text-muted) !important;
}

/* Logo — no invert needed, keep filter as-is for brand visibility */
[data-theme="dark"] .logo {
    filter: brightness(0) invert(1);
}

/* User info */
[data-theme="dark"] .user-name {
    color: var(--dl-dark-text) !important;
}

[data-theme="dark"] .user-avatar {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Scrollbar dark */
[data-theme="dark"] * {
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

[data-theme="dark"] *::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

/* ==========================================================================
   Syncfusion overrides for dark — header, toolbar, grid
   These rules live here (global CSS) because Blazor's scoped CSS compiles
   [data-theme="dark"] ::deep selectors into [data-theme="dark"][b-xxxx] which
   requires both attributes on the SAME element — impossible when data-theme is
   on <html> and the scope attribute is on a component div. Global CSS fixes that.
   ========================================================================== */

/* ==========================================================================
   Grid header text wrapping (all themes)
   Long column headers must wrap to multiple lines instead of truncating with an
   ellipsis. The intended wrap rules in DLDatagridV2.razor.css use ::deep and
   never reach the Syncfusion grid: SfGrid is the component's root element, so no
   scoped ([b-xxxx]) ancestor wraps the grid DOM — the same isolation limitation
   documented for dark mode below. Syncfusion's .e-responsive theme forces
   white-space:nowrap on .e-headercelldiv and clips .e-headertext via
   overflow:hidden + text-overflow:ellipsis (no !important), so a global override
   of both elements wins. (DL-1757)
   ========================================================================== */
.e-grid .e-headercelldiv {
    white-space: normal !important;
    height: auto !important;
}
.e-grid .e-headertext {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

[data-theme="dark"] .e-headercell {
    background: var(--dl-dark-surface-raised) !important;
    color: var(--dl-dark-text) !important;
}

[data-theme="dark"] .e-toolbar {
    background: var(--dl-dark-surface) !important;
    color: var(--dl-dark-text-muted) !important;
}

[data-theme="dark"] .e-grid,
[data-theme="dark"] .e-grid .e-content {
    background: var(--dl-dark-surface) !important;
}

[data-theme="dark"] .e-grid .e-rowcell {
    color: var(--dl-dark-text) !important;
    border-color: var(--dl-dark-border) !important;
}

[data-theme="dark"] .e-gridheader {
    border-color: var(--dl-dark-border) !important;
}

/* ── DLDatagridV2 deep dark overrides ──────────────────────────────────────
   Cannot live in DLDatagridV2.razor.css because Blazor compiles
   [data-theme="dark"] ::deep .foo  →  [data-theme="dark"][b-xxxx] .foo
   which requires data-theme AND the scope attribute on the same element.
   Since data-theme is on <html> those selectors never match.
   Solution: move all dark ::deep overrides to this global file.
   ───────────────────────────────────────────────────────────────────────── */

/* Grid header — raised dark surface + white text */
[data-theme="dark"] .e-grid .e-gridheader,
[data-theme="dark"] .e-grid .e-gridheader tr:first-child th.e-headercell,
[data-theme="dark"] .e-grid .e-gridheader tr th.e-headercell,
[data-theme="dark"] .e-grid .e-gridheader tr th.e-headercell.e-leftfreeze,
[data-theme="dark"] .e-grid .e-gridheader tr th.e-headercell.e-rightfreeze,
[data-theme="dark"] .e-grid .e-gridheader tr th.e-headercell.e-freezeleftborder,
[data-theme="dark"] .e-grid .e-gridheader tr th.e-headercell.e-freezerightborder {
    background: var(--dl-dark-surface-raised) !important;
    background-color: var(--dl-dark-surface-raised) !important;
    color: var(--dl-dark-text) !important;
}

/* Header text — every span/div Syncfusion paints text into */
[data-theme="dark"] .e-grid .e-gridheader .e-headertext,
[data-theme="dark"] .e-grid .e-gridheader .e-headercelldiv,
[data-theme="dark"] .e-grid .e-gridheader .e-stackedheadercelldiv,
[data-theme="dark"] .e-grid .e-gridheader span,
[data-theme="dark"] .e-grid .e-gridheader .e-headercell *,
[data-theme="dark"] .e-grid .e-gridheader .e-stackedheadercell * {
    color: var(--dl-dark-text) !important;
}

/* Stacked headers */
[data-theme="dark"] .e-grid .e-gridheader .e-stackedheadercell {
    background: var(--dl-dark-surface-raised) !important;
    background-color: var(--dl-dark-surface-raised) !important;
    color: var(--dl-dark-text) !important;
}

/* Freeze border columns */
[data-theme="dark"] .e-grid .e-gridheader th.e-freezeleftborder,
[data-theme="dark"] .e-grid .e-gridheader th.e-freezerightborder {
    background: var(--dl-dark-surface-raised) !important;
    background-color: var(--dl-dark-surface-raised) !important;
    color: var(--dl-dark-text) !important;
}

/* Group header rows */
[data-theme="dark"] .e-grid .e-groupcaptionrow,
[data-theme="dark"] .e-grid .e-groupcaptionrow .e-rowcell,
[data-theme="dark"] .e-grid .e-grouptopleftcell,
[data-theme="dark"] .e-grid .e-recordpluscollapse,
[data-theme="dark"] .e-grid .e-recordplusexpand {
    background: rgba(var(--dl-primary-rgb), 0.12) !important;
    color: var(--dl-dark-text) !important;
}

[data-theme="dark"] .e-grid .e-groupcaption,
[data-theme="dark"] .e-grid .e-groupcaptionrow .e-groupcaption {
    color: var(--dl-dark-text) !important;
}

/* Toolbar */
[data-theme="dark"] .e-toolbar.e-spacer-toolbar .e-toolbar-items {
    background: var(--dl-dark-surface) !important;
}

/* Group drop area — both empty (placeholder) and grouped states */
[data-theme="dark"] .e-grid .e-groupdroparea,
[data-theme="dark"] .e-grid .e-groupdroparea.e-grouped {
    background: var(--dl-dark-surface) !important;
    color: var(--dl-dark-text-muted) !important;
    border-color: var(--dl-dark-border) !important;
}

[data-theme="dark"] .e-grid .e-groupdroparea .e-grouptext,
[data-theme="dark"] .e-grid .e-groupheadercell,
[data-theme="dark"] .e-grid .e-groupheadercell .e-grouptext {
    color: var(--dl-dark-text) !important;
}

[data-theme="dark"] .e-grid .e-groupheadercell {
    background: rgba(var(--dl-primary-rgb), 0.12) !important;
    border-color: var(--dl-dark-border) !important;
}

/* Toolbar buttons (Add/Edit/Delete/Update/Cancel/ColumnChooser) */
[data-theme="dark"] .e-grid .e-toolbar,
[data-theme="dark"] .e-grid .e-toolbar .e-toolbar-items,
[data-theme="dark"] .e-grid .e-toolbar .e-toolbar-item {
    background: var(--dl-dark-surface) !important;
    border-color: var(--dl-dark-border) !important;
}

[data-theme="dark"] .e-grid .e-toolbar .e-btn,
[data-theme="dark"] .e-grid .e-toolbar .e-tbar-btn {
    background: transparent !important;
    color: var(--dl-dark-text) !important;
    border-color: transparent !important;
}

[data-theme="dark"] .e-grid .e-toolbar .e-btn .e-btn-icon,
[data-theme="dark"] .e-grid .e-toolbar .e-tbar-btn .e-icons,
[data-theme="dark"] .e-grid .e-toolbar .e-tbar-btn-text {
    color: var(--dl-dark-text) !important;
}

[data-theme="dark"] .e-grid .e-toolbar .e-btn:hover,
[data-theme="dark"] .e-grid .e-toolbar .e-tbar-btn:hover {
    background: rgba(var(--dl-primary-rgb), 0.12) !important;
    color: var(--dl-dark-text) !important;
}

/* Pager at bottom */
[data-theme="dark"] .e-grid .e-gridpager,
[data-theme="dark"] .e-grid .e-pager,
[data-theme="dark"] .e-pager,
[data-theme="dark"] .e-pager .e-pagercontainer {
    background: var(--dl-dark-surface) !important;
    color: var(--dl-dark-text-muted) !important;
    border-color: var(--dl-dark-border) !important;
}

[data-theme="dark"] .e-pager .e-numericitem,
[data-theme="dark"] .e-pager .e-link,
[data-theme="dark"] .e-pager .e-pagesizes,
[data-theme="dark"] .e-pager .e-pagerexternalmsg,
[data-theme="dark"] .e-pager .e-pagerconstant {
    background: transparent !important;
    color: var(--dl-dark-text) !important;
    border-color: var(--dl-dark-border) !important;
}

[data-theme="dark"] .e-pager .e-numericitem:hover,
[data-theme="dark"] .e-pager .e-link:hover {
    background: rgba(var(--dl-primary-rgb), 0.12) !important;
    color: var(--dl-dark-text) !important;
}

[data-theme="dark"] .e-pager .e-currentitem,
[data-theme="dark"] .e-pager .e-numericitem.e-currentitem {
    background: rgba(var(--dl-primary-rgb), 0.2) !important;
    color: var(--dl-dark-text) !important;
}

/* Edit form (inline editing in Normal mode) */
[data-theme="dark"] .e-grid .e-gridform,
[data-theme="dark"] .e-grid .e-editedrow {
    background: var(--dl-dark-surface) !important;
    color: var(--dl-dark-text) !important;
}

[data-theme="dark"] .e-grid .e-rowcell input,
[data-theme="dark"] .e-grid .e-rowcell .e-input,
[data-theme="dark"] .e-grid .e-rowcell .e-input-group,
[data-theme="dark"] .e-grid .e-editcell input,
[data-theme="dark"] .e-grid .e-editcell .e-input {
    background: var(--dl-dark-surface-raised) !important;
    color: var(--dl-dark-text) !important;
    border-color: var(--dl-dark-border) !important;
}

/* Column chooser dialog + general Syncfusion dialogs */
[data-theme="dark"] .e-dialog,
[data-theme="dark"] .e-cc-dialog,
[data-theme="dark"] .e-dialog .e-dlg-content,
[data-theme="dark"] .e-dialog .e-dlg-header-content,
[data-theme="dark"] .e-dialog .e-footer-content {
    background: var(--dl-dark-surface) !important;
    color: var(--dl-dark-text) !important;
    border-color: var(--dl-dark-border) !important;
}

[data-theme="dark"] .e-dialog .e-dlg-header,
[data-theme="dark"] .e-dialog .e-dlg-header-content .e-dlg-header {
    color: var(--dl-dark-text) !important;
}

[data-theme="dark"] .e-cc-contentdiv .e-cc-content,
[data-theme="dark"] .e-cc-searchdiv .e-input {
    background: var(--dl-dark-surface) !important;
    color: var(--dl-dark-text) !important;
    border-color: var(--dl-dark-border) !important;
}

/* Filter bar + filter menu popup */
[data-theme="dark"] .e-grid .e-filterbar,
[data-theme="dark"] .e-grid .e-filterbar .e-filterbarcell,
[data-theme="dark"] .e-grid .e-filterbar .e-filterbarcell .e-input {
    background: var(--dl-dark-surface) !important;
    color: var(--dl-dark-text) !important;
    border-color: var(--dl-dark-border) !important;
}

[data-theme="dark"] .e-filter-popup,
[data-theme="dark"] .e-grid .e-filtermenu,
[data-theme="dark"] .e-flmenu-content,
[data-theme="dark"] .e-flmenu-popup {
    background: var(--dl-dark-surface) !important;
    color: var(--dl-dark-text) !important;
    border-color: var(--dl-dark-border) !important;
}


/* Summary footer */
[data-theme="dark"] .e-grid .e-summaryrow .e-summarycell {
    background: var(--dl-dark-surface-raised) !important;
    color: var(--dl-dark-text) !important;
}

/* Total row */
[data-theme="dark"] .e-grid .e-row.row-class-total .e-rowcell {
    background-color: rgba(var(--dl-primary-rgb), 0.12) !important;
}


/* ── DLChartWrapper card header — global override beats inline styles ───────
   The chart header div has an inline style from cardHeaderStyle (user config)
   that can include a background-color. A stylesheet !important beats an inline
   non-!important declaration. We add this global rule as a second layer of
   protection on top of the scoped rule in DLChartWrapper.razor.css.
   ───────────────────────────────────────────────────────────────────────── */
/* Cards WITHOUT a user-set custom header colour → force dark surface + white text */
/* DL-2969 — KEPT: the header's dark surface follows the CARD's raised surface.
   `--dl-dark-surface` here was the page background, which made the header read as a hole
   punched in the card. The header border this shipped alongside was reverted at Ro's call;
   the border-colour line went with it. */
[data-theme="dark"] .chart-card-header:not(.chart-card-header--custom-bg) {
    background: var(--dl-dark-surface-raised) !important;
    background-color: var(--dl-dark-surface-raised) !important;
    background-image: none !important;
    border-bottom-color: var(--dl-dark-border) !important;
}

[data-theme="dark"] .chart-card-header:not(.chart-card-header--custom-bg) .chart-card-title {
    color: var(--dl-dark-text) !important;
}

[data-theme="dark"] .chart-card-header:not(.chart-card-header--custom-bg) .chart-card-subtitle {
    color: var(--dl-dark-text-muted) !important;
}

/* Cards WITH user-set custom header colour → preserve everything (bg + text)
   The user picked their own bg+text combo, respect it.
   Only override the border to the dark theme border. */
[data-theme="dark"] .chart-card-header.chart-card-header--custom-bg {
    border-bottom-color: var(--dl-dark-border) !important;
}

/* Chart card body — also needs dark bg if it had an inline style from cardStyle */
/* DL-2969 — the dark chart-card chrome comes from the shared `.dl-flat-card` now. This rule
   kept painting the old 145deg gradient with !important, which beat the shared class and left
   the dashboard panels looking like a different product in dark only. */
[data-theme="dark"] .chart-card {
    background-image: none !important;
}


/* DLDashboardLayout cards live outside the DLChartWrapper scope, so their
   inline `<style>` background:white wins unless we override it here. */
[data-theme="dark"] .chart-card-body {
    background: var(--dl-dark-surface) !important;
}

/* Skeleton shimmer dark */
[data-theme="dark"] .dl-skeleton,
[data-theme="dark"] .dl-skeleton__pulse,
[data-theme="dark"] .skeleton-pulse {
    background-image: linear-gradient(90deg,
        rgba(var(--dl-primary-rgb), 0.08) 25%,
        rgba(var(--dl-primary-rgb), 0.20) 50%,
        rgba(var(--dl-primary-rgb), 0.08) 75%) !important;
}

[data-theme="dark"] .dl-skeleton__card,
[data-theme="dark"] .skeleton-chart-card,
[data-theme="dark"] .skeleton-picker-card,
[data-theme="dark"] .skeleton-report-card {
    background: var(--dl-dark-surface) !important;
    border-color: var(--dl-dark-border) !important;
}

/* Login page dark */
[data-theme="dark"] .login-page {
    background: var(--dl-dark-bg) !important;
}

[data-theme="dark"] .form-panel {
    background: linear-gradient(160deg, #0f1117 0%, #141620 40%, #1a1d27 100%) !important;
}

[data-theme="dark"] .form-card {
    background: rgba(26, 29, 39, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .form-card .form-section,
[data-theme="dark"] .form-card .form-group {
    color: var(--dl-dark-text) !important;
}

[data-theme="dark"] .error-message {
    background: rgba(220, 38, 38, 0.1) !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
}

[data-theme="dark"] .separator span {
    color: var(--dl-dark-text-subtle) !important;
}

[data-theme="dark"] .separator::before,
[data-theme="dark"] .separator::after {
    background: var(--dl-dark-border) !important;
}

[data-theme="dark"] .agreement {
    color: var(--dl-dark-text-subtle) !important;
}

[data-theme="dark"] .page-footer,
[data-theme="dark"] .page-version {
    color: var(--dl-dark-text-subtle) !important;
}

/* Global form controls dark */
[data-theme="dark"] .form-control,
[data-theme="dark"] .custom-select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--dl-dark-surface-raised) !important;
    color: var(--dl-dark-text) !important;
    border-color: var(--dl-dark-border) !important;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--dl-dark-text-subtle) !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: rgba(var(--dl-primary-rgb), 0.5) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--dl-primary-rgb), 0.15) !important;
}

[data-theme="dark"] .input-group-text {
    background-color: var(--dl-dark-surface-overlay) !important;
    color: var(--dl-dark-text-muted) !important;
    border-color: var(--dl-dark-border) !important;
}

/* Global card dark */
[data-theme="dark"] .card {
    background-color: var(--dl-dark-surface) !important;
    border-color: var(--dl-dark-border) !important;
    color: var(--dl-dark-text) !important;
}

[data-theme="dark"] .card .card-header {
    background-color: var(--dl-dark-surface-raised) !important;
    border-color: var(--dl-dark-border) !important;
    color: var(--dl-dark-text) !important;
}

[data-theme="dark"] .card .card-body {
    color: var(--dl-dark-text) !important;
}

[data-theme="dark"] .card .card-footer {
    background-color: var(--dl-dark-surface-raised) !important;
    border-color: var(--dl-dark-border) !important;
}

/* Global tab content dark */
[data-theme="dark"] .tab-content {
    background-color: var(--dl-dark-surface) !important;
    color: var(--dl-dark-text) !important;
}

[data-theme="dark"] .nav-tabs {
    border-color: var(--dl-dark-border) !important;
}

[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--dl-dark-text-muted) !important;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--dl-dark-surface) !important;
    border-color: var(--dl-dark-border) !important;
    color: var(--dl-dark-text) !important;
}

/* Global table dark — color without !important so inline custom colours win */
[data-theme="dark"] .table {
    color: var(--dl-dark-text);
    border-color: var(--dl-dark-border) !important;
}

[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
    border-color: var(--dl-dark-border) !important;
}

[data-theme="dark"] .table thead th {
    background-color: var(--dl-dark-surface-raised) !important;
    color: var(--dl-dark-text) !important;
}

/* Table body in dark mode — fallback only.
   Override Bootstrap's --bs-table-bg variable so the inset box-shadow Bootstrap
   uses to paint cells becomes dark. Inline cell background-colors still win
   because inline beats CSS without !important. */
[data-theme="dark"] .table {
    --bs-table-bg: var(--dl-dark-surface);
    --bs-table-color: var(--dl-dark-text);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-striped-color: var(--dl-dark-text);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
    --bs-table-hover-color: var(--dl-dark-text);
    --bs-table-active-bg: rgba(255, 255, 255, 0.06);
    --bs-table-active-color: var(--dl-dark-text);
}

[data-theme="dark"] .table tbody,
[data-theme="dark"] .table tbody tr,
[data-theme="dark"] .table tbody td {
    background-color: var(--dl-dark-surface);
    color: var(--dl-dark-text);
}

/* Defeat the report's `defaultBodyFormat` (typically `background-color: white;
   color: black;`) when in dark mode. Cells with conditional/red/green colours
   are NOT in this list, so they keep their explicit colours. */
[data-theme="dark"] .table tbody td[style*="background-color: white"],
[data-theme="dark"] .table tbody td[style*="background-color:white"],
[data-theme="dark"] .table tbody td[style*="background-color: #fff"],
[data-theme="dark"] .table tbody td[style*="background-color:#fff"],
[data-theme="dark"] .table tbody td[style*="background-color: #FFF"],
[data-theme="dark"] .table tbody td[style*="background-color:#FFF"],
[data-theme="dark"] .table tbody td[style*="background-color: rgb(255, 255, 255)"],
[data-theme="dark"] .table tbody td[style*="background-color: rgb(255,255,255)"],
[data-theme="dark"] .table tbody td[style*="background:white"],
[data-theme="dark"] .table tbody td[style*="background: white"],
[data-theme="dark"] .table tbody td[style*="background:#fff"],
[data-theme="dark"] .table tbody td[style*="background: #fff"] {
    background-color: var(--dl-dark-surface) !important;
    color: var(--dl-dark-text) !important;
}

/* Striped rows — no !important so inline still wins */
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) td {
    background-color: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .table-hover tbody tr:hover,
[data-theme="dark"] .table-hover tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Container + sticky header — these are structural, !important is fine */
[data-theme="dark"] .dl-table-container {
    background: var(--dl-dark-surface) !important;
}

[data-theme="dark"] .dl-table-sticky-header thead.table-light th {
    background-color: var(--dl-dark-surface-raised) !important;
    color: var(--dl-dark-text) !important;
}

/* Global modal dark */
[data-theme="dark"] .modal-content {
    background-color: var(--dl-dark-surface) !important;
    border-color: var(--dl-dark-border) !important;
    color: var(--dl-dark-text) !important;
}

[data-theme="dark"] .modal-header {
    border-color: var(--dl-dark-border) !important;
}

[data-theme="dark"] .modal-footer {
    background-color: var(--dl-dark-surface-raised) !important;
    border-color: var(--dl-dark-border) !important;
}

/* Global dropdown dark */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--dl-dark-surface-raised) !important;
    border-color: var(--dl-dark-border) !important;
}

[data-theme="dark"] .dropdown-item {
    color: var(--dl-dark-text) !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--dl-dark-surface-overlay) !important;
    color: var(--dl-dark-text) !important;
}

[data-theme="dark"] .dropdown-divider {
    border-color: var(--dl-dark-border) !important;
}

/* Global badge dark */
[data-theme="dark"] .badge {
    color: var(--dl-dark-text) !important;
}

/* Global alert dark */
[data-theme="dark"] .alert {
    border-color: var(--dl-dark-border) !important;
}

/* Global list-group dark */
[data-theme="dark"] .list-group-item {
    background-color: var(--dl-dark-surface) !important;
    border-color: var(--dl-dark-border) !important;
    color: var(--dl-dark-text) !important;
}

/* Syncfusion additional dark overrides */
[data-theme="dark"] .e-input-group,
[data-theme="dark"] .e-input-group .e-input {
    background: var(--dl-dark-surface-raised) !important;
    color: var(--dl-dark-text) !important;
    border-color: var(--dl-dark-border) !important;
}

[data-theme="dark"] .e-input-group .e-input::placeholder {
    color: var(--dl-dark-text-subtle) !important;
}

[data-theme="dark"] .e-ddl.e-popup,
[data-theme="dark"] .e-popup {
    background: var(--dl-dark-surface-raised) !important;
    border-color: var(--dl-dark-border) !important;
}

[data-theme="dark"] .e-list-item {
    color: var(--dl-dark-text) !important;
}

[data-theme="dark"] .e-list-item:hover,
[data-theme="dark"] .e-list-item.e-hover {
    background: var(--dl-dark-surface-overlay) !important;
}

[data-theme="dark"] .e-list-item.e-active {
    background: rgba(var(--dl-primary-rgb), 0.15) !important;
}

[data-theme="dark"] .e-btn {
    color: var(--dl-dark-text) !important;
}

[data-theme="dark"] .e-pager {
    background: var(--dl-dark-surface) !important;
    color: var(--dl-dark-text-muted) !important;
    border-color: var(--dl-dark-border) !important;
}

[data-theme="dark"] .e-pager .e-currentitem {
    background: rgba(var(--dl-primary-rgb), 0.2) !important;
}

[data-theme="dark"] .e-dialog .e-dlg-header-content {
    background: var(--dl-dark-surface-raised) !important;
    color: var(--dl-dark-text) !important;
}

[data-theme="dark"] .e-dialog .e-dlg-content {
    background: var(--dl-dark-surface) !important;
    color: var(--dl-dark-text) !important;
}

[data-theme="dark"] .e-dialog .e-footer-content {
    background: var(--dl-dark-surface-raised) !important;
    border-color: var(--dl-dark-border) !important;
}

[data-theme="dark"] .e-switch-wrapper .e-switch-off {
    background: var(--dl-dark-surface-overlay) !important;
}

[data-theme="dark"] .e-checkbox-wrapper .e-frame {
    background: var(--dl-dark-surface-raised) !important;
    border-color: var(--dl-dark-border-light) !important;
}

[data-theme="dark"] .e-tooltip-wrap {
    background: var(--dl-dark-surface-overlay) !important;
    color: var(--dl-dark-text) !important;
    border-color: var(--dl-dark-border) !important;
}

/* Transition for theme switch — smooth colour change */
html {
    transition: background-color 0.3s ease;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .app-container,
html[data-theme="dark"] .content-body-wrapper,
html[data-theme="dark"] .content-body {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}


/* ==========================================================================
   Accessibility — Respect reduced motion preference
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.05s !important;
    }

    .app-container {
        animation: none !important;
    }

    .notification-dot {
        animation: none !important;
    }

    .online-indicator {
        animation: none !important;
    }
}


/* ==========================================================================
   Fallback — No backdrop-filter support
   ========================================================================== */

@supports not (backdrop-filter: blur(1px)) {
    /* DL-2969: the wrapper no longer uses backdrop-filter, so it needs no fallback fill. */

    .fixed-menu {
        background: rgba(255, 255, 255, 0.97) !important;
    }

    .customer-btn {
        background: rgba(255, 255, 255, 0.85) !important;
    }
}


/* ==========================================================================
   Global Syncfusion SfGrid dark-mode row-selection overrides
   --------------------------------------------------------------------------
   Syncfusion's theme paints .e-selectionbackground / .e-active with a light
   blue tint that clashes with dark surfaces. App-shell scope so every SfGrid
   (Settings, Groups, Reports, DataView, Integration pages, etc.) inherits.
   ========================================================================== */

[data-theme="dark"] .e-grid .e-row.e-selectionbackground,
[data-theme="dark"] .e-grid .e-row.e-selectionbackground > .e-rowcell,
[data-theme="dark"] .e-grid .e-rowcell.e-selectionbackground,
[data-theme="dark"] .e-grid .e-row.e-altrow.e-selectionbackground,
[data-theme="dark"] .e-grid .e-row.e-altrow.e-selectionbackground > .e-rowcell,
[data-theme="dark"] .e-grid .e-row.e-rowselect.e-selectionbackground,
[data-theme="dark"] .e-grid .e-row.e-rowselect.e-selectionbackground > .e-rowcell {
    background-color: var(--dl-dark-surface-overlay) !important;
    color: var(--dl-dark-text) !important;
    border-color: var(--dl-dark-border) !important;
}

/* Hover-on-selected row — slightly lifted surface to keep affordance */
[data-theme="dark"] .e-grid .e-row.e-selectionbackground:hover,
[data-theme="dark"] .e-grid .e-row.e-selectionbackground:hover > .e-rowcell,
[data-theme="dark"] .e-grid .e-row.e-rowselect.e-selectionbackground:hover,
[data-theme="dark"] .e-grid .e-row.e-rowselect.e-selectionbackground:hover > .e-rowcell {
    background-color: var(--dl-dark-surface-raised) !important;
    color: var(--dl-dark-text) !important;
}

/* Focused/active cell (keyboard nav, single-cell selection) */
[data-theme="dark"] .e-grid .e-rowcell.e-active,
[data-theme="dark"] .e-grid .e-cellselectionbackground,
[data-theme="dark"] .e-grid td.e-active {
    background-color: var(--dl-dark-surface-overlay) !important;
    color: var(--dl-dark-text) !important;
    box-shadow: inset 0 0 0 1px var(--b-primary-color) !important;
}

/* Row hover (non-selected) — Syncfusion's default light #f5f5f5 / #fafafa
   bleeds through on any grid that has no per-component dark hover rule.
   Global override catches them all. Lower specificity than selection rules
   so a hovered + selected row still shows the selected styling. */
[data-theme="dark"] .e-grid .e-row:hover,
[data-theme="dark"] .e-grid .e-row:hover > .e-rowcell,
[data-theme="dark"] .e-grid .e-row.e-altrow:hover,
[data-theme="dark"] .e-grid .e-row.e-altrow:hover > .e-rowcell {
    background-color: var(--dl-dark-surface-raised) !important;
    color: var(--dl-dark-text) !important;
}


/* ==========================================================================
   Global Syncfusion SfRichTextEditor dark-mode overrides
   --------------------------------------------------------------------------
   Catches the RTE wrapper, editable content area, toolbar, and toolbar
   buttons. Currently used by ReportScheduleComponent (Message editor); any
   future SfRichTextEditor usage inherits these automatically.
   ========================================================================== */

[data-theme="dark"] .e-richtexteditor,
[data-theme="dark"] .e-richtexteditor .e-rte-content,
[data-theme="dark"] .e-richtexteditor .e-rte-content .e-content {
    background-color: var(--dl-dark-surface) !important;
    color: var(--dl-dark-text) !important;
    border-color: var(--dl-dark-border) !important;
}

[data-theme="dark"] .e-richtexteditor .e-rte-content .e-content::-webkit-input-placeholder { color: var(--dl-dark-text-muted) !important; }
[data-theme="dark"] .e-richtexteditor .e-rte-content .e-content::placeholder { color: var(--dl-dark-text-muted) !important; }
[data-theme="dark"] .e-richtexteditor .e-rte-content .e-content[contenteditable]:empty::before { color: var(--dl-dark-text-muted) !important; }

/* Toolbar outer + inner item-rail layers (the white pockets between groups). */
[data-theme="dark"] .e-richtexteditor .e-rte-toolbar,
[data-theme="dark"] .e-richtexteditor .e-toolbar,
[data-theme="dark"] .e-richtexteditor .e-toolbar-extended,
[data-theme="dark"] .e-richtexteditor .e-toolbar-items,
[data-theme="dark"] .e-richtexteditor .e-toolbar-item,
[data-theme="dark"] .e-richtexteditor .e-toolbar .e-toolbar-items,
[data-theme="dark"] .e-richtexteditor .e-toolbar .e-toolbar-item,
[data-theme="dark"] .e-richtexteditor .e-toolbar-pop,
[data-theme="dark"] .e-richtexteditor .e-rte-srcview {
    background-color: var(--dl-dark-surface-raised) !important;
    border-color: var(--dl-dark-border) !important;
}

/* All button glyph variants — base, dropdown-anchor, split-button */
[data-theme="dark"] .e-richtexteditor .e-toolbar .e-tbar-btn,
[data-theme="dark"] .e-richtexteditor .e-toolbar .e-tbar-btn .e-icons,
[data-theme="dark"] .e-richtexteditor .e-toolbar .e-tbar-btn .e-btn-icon,
[data-theme="dark"] .e-richtexteditor .e-toolbar .e-dropdown-btn,
[data-theme="dark"] .e-richtexteditor .e-toolbar .e-rte-dropdown-btn,
[data-theme="dark"] .e-richtexteditor .e-toolbar .e-dropdown-btn .e-btn-icon,
[data-theme="dark"] .e-richtexteditor .e-toolbar .e-dropdown-btn .e-rte-dropdown-btn-text,
[data-theme="dark"] .e-richtexteditor .e-toolbar .e-rte-dropdown-popup {
    background-color: transparent !important;
    color: var(--dl-dark-text) !important;
    border-color: var(--dl-dark-border) !important;
}

[data-theme="dark"] .e-richtexteditor .e-toolbar .e-tbar-btn:hover,
[data-theme="dark"] .e-richtexteditor .e-toolbar .e-tbar-btn.e-active,
[data-theme="dark"] .e-richtexteditor .e-toolbar .e-dropdown-btn:hover,
[data-theme="dark"] .e-richtexteditor .e-toolbar .e-dropdown-btn.e-active {
    background-color: var(--dl-dark-surface-overlay) !important;
    color: var(--dl-dark-text) !important;
}

/* Disabled buttons (undo/redo when nothing to undo) */
[data-theme="dark"] .e-richtexteditor .e-toolbar .e-tbar-btn.e-overlay,
[data-theme="dark"] .e-richtexteditor .e-toolbar .e-tbar-btn[disabled] {
    background-color: var(--dl-dark-surface-raised) !important;
    color: var(--dl-dark-text-muted) !important;
    opacity: 0.55 !important;
}

[data-theme="dark"] .e-richtexteditor .e-toolbar-item.e-separator,
[data-theme="dark"] .e-richtexteditor .e-toolbar .e-toolbar-items .e-toolbar-item.e-separator {
    border-color: var(--dl-dark-border) !important;
}

/* Dropdown POPUP (Paragraph / Alignment menus) when opened */
[data-theme="dark"] .e-rte-dropdown-popup,
[data-theme="dark"] .e-rte-dropdown-popup .e-item,
[data-theme="dark"] .e-rte-dropdown-popup .e-dropdown-popup,
[data-theme="dark"] .e-dropdown-popup ul .e-item {
    background-color: var(--dl-dark-surface-raised) !important;
    color: var(--dl-dark-text) !important;
    border-color: var(--dl-dark-border) !important;
}
[data-theme="dark"] .e-rte-dropdown-popup .e-item:hover,
[data-theme="dark"] .e-dropdown-popup ul .e-item:hover {
    background-color: var(--dl-dark-surface-overlay) !important;
}


/* ==========================================================================
   Global Syncfusion SfDatePicker / SfCalendar dark-mode coverage
   --------------------------------------------------------------------------
   Calendar popup chrome (.e-calendar) + header (.e-header — the "month/year +
   nav arrows" bar at top of the calendar) + content cells. Without these
   the popup renders white-on-white when a date input is opened in dark mode.
   ========================================================================== */

[data-theme="dark"] .e-calendar,
[data-theme="dark"] .e-datepicker.e-popup-container,
[data-theme="dark"] .e-datepicker .e-popup,
[data-theme="dark"] .e-popup.e-popup-open.e-datepicker {
    background-color: var(--dl-dark-surface) !important;
    color: var(--dl-dark-text) !important;
    border-color: var(--dl-dark-border) !important;
}

/* Calendar header — month/year title + prev/next arrows */
[data-theme="dark"] .e-calendar .e-header,
[data-theme="dark"] .e-calendar .e-header.e-month,
[data-theme="dark"] .e-calendar .e-header.e-year,
[data-theme="dark"] .e-calendar .e-header.e-decade {
    background-color: var(--dl-dark-surface-raised) !important;
    color: var(--dl-dark-text) !important;
    border-color: var(--dl-dark-border) !important;
}
[data-theme="dark"] .e-calendar .e-header .e-title,
[data-theme="dark"] .e-calendar .e-header .e-day {
    color: var(--dl-dark-text) !important;
}
[data-theme="dark"] .e-calendar .e-header .e-icon-container .e-btn,
[data-theme="dark"] .e-calendar .e-header button {
    background-color: transparent !important;
    color: var(--dl-dark-text) !important;
}
[data-theme="dark"] .e-calendar .e-header .e-icon-container .e-btn:hover,
[data-theme="dark"] .e-calendar .e-header button:hover {
    background-color: var(--dl-dark-surface-overlay) !important;
}

/* Calendar body — weekday row + day cells */
[data-theme="dark"] .e-calendar .e-content {
    background-color: var(--dl-dark-surface) !important;
    color: var(--dl-dark-text) !important;
}
[data-theme="dark"] .e-calendar .e-content th,
[data-theme="dark"] .e-calendar .e-content thead {
    background-color: var(--dl-dark-surface) !important;
    color: var(--dl-dark-text-muted) !important;
}
[data-theme="dark"] .e-calendar .e-content td,
[data-theme="dark"] .e-calendar .e-content td span,
[data-theme="dark"] .e-calendar .e-content td.e-cell span.e-day {
    color: var(--dl-dark-text) !important;
}
[data-theme="dark"] .e-calendar .e-content td.e-other-month span.e-day,
[data-theme="dark"] .e-calendar .e-content td.e-other-year span.e-day,
[data-theme="dark"] .e-calendar .e-content td.e-other-decade span.e-day {
    color: var(--dl-dark-text-muted) !important;
}
[data-theme="dark"] .e-calendar .e-content td:hover span.e-day {
    background-color: var(--dl-dark-surface-overlay) !important;
    color: var(--dl-dark-text) !important;
}
[data-theme="dark"] .e-calendar .e-content td.e-today span.e-day {
    border-color: var(--b-primary-color) !important;
    color: var(--b-primary-color) !important;
}
[data-theme="dark"] .e-calendar .e-content td.e-selected span.e-day,
[data-theme="dark"] .e-calendar .e-content td.e-focused-date.e-selected span.e-day {
    background-color: var(--b-primary-color) !important;
    color: white !important;
}

/* Footer row (Today button) */
[data-theme="dark"] .e-calendar .e-footer-container,
[data-theme="dark"] .e-calendar .e-footer-container .e-btn {
    background-color: var(--dl-dark-surface) !important;
    color: var(--dl-dark-text) !important;
    border-color: var(--dl-dark-border) !important;
}


/* ==========================================================================
   Global Syncfusion SfAccordion dark-mode coverage
   --------------------------------------------------------------------------
   Used in /Queries QueryFormatComponent (Configuration/Type/Calculation
   accordions), QueryParameterComponents, and elsewhere.
   ========================================================================== */

[data-theme="dark"] .e-accordion,
[data-theme="dark"] .e-accordion .e-acrdn-item,
[data-theme="dark"] .e-accordion .e-acrdn-item.e-select.e-selectfocus,
[data-theme="dark"] .e-accordion .e-acrdn-item.e-expand-state {
    background-color: var(--dl-dark-surface) !important;
    color: var(--dl-dark-text) !important;
    border-color: var(--dl-dark-border) !important;
}

[data-theme="dark"] .e-accordion .e-acrdn-header,
[data-theme="dark"] .e-accordion .e-acrdn-item .e-acrdn-header {
    background-color: var(--dl-dark-surface-raised) !important;
    color: var(--dl-dark-text) !important;
    border-color: var(--dl-dark-border) !important;
}
[data-theme="dark"] .e-accordion .e-acrdn-header:hover {
    background-color: var(--dl-dark-surface-overlay) !important;
}
[data-theme="dark"] .e-accordion .e-acrdn-header .e-toggle-icon,
[data-theme="dark"] .e-accordion .e-acrdn-header .e-icons {
    color: var(--dl-dark-text) !important;
}

[data-theme="dark"] .e-accordion .e-acrdn-panel,
[data-theme="dark"] .e-accordion .e-acrdn-content {
    background-color: var(--dl-dark-surface) !important;
    color: var(--dl-dark-text) !important;
    border-color: var(--dl-dark-border) !important;
}


/* ==========================================================================
   Global Syncfusion SfTab dark-mode coverage
   --------------------------------------------------------------------------
   Tabs in QueryFormatComponent (General/Rows/Columns) + other surfaces.
   ========================================================================== */

/* html+body prefix + Syncfusion's own subclass chain (.e-tab.e-control)
   pushes specificity to (2,4,2), overriding the compiled vendor rule even
   when the bundle loads after dl-effects.css. The .e-fill variant (filled
   tab style) and .e-tab-text-wrap (compact tabs) are also covered. */
html[data-theme="dark"] body .e-tab,
html[data-theme="dark"] body .e-tab.e-control,
html[data-theme="dark"] body .e-tab.e-control .e-content,
html[data-theme="dark"] body .e-tab.e-control .e-tab-content {
    background-color: var(--dl-dark-surface) !important;
    color: var(--dl-dark-text) !important;
    border-color: var(--dl-dark-border) !important;
}

html[data-theme="dark"] body .e-tab.e-control .e-tab-header,
html[data-theme="dark"] body .e-tab.e-control .e-tab-header.e-horizontal-bottom,
html[data-theme="dark"] body .e-tab.e-control.e-fill .e-tab-header,
html[data-theme="dark"] body .e-tab.e-control .e-tab-header .e-toolbar,
html[data-theme="dark"] body .e-tab.e-control .e-tab-header .e-toolbar-items,
html[data-theme="dark"] body .e-tab.e-control .e-tab-header .e-toolbar-item,
html[data-theme="dark"] body .e-tab.e-control .e-tab-header .e-hor-nav,
html[data-theme="dark"] body .e-tab.e-control .e-tab-header .e-scroll-nav,
html[data-theme="dark"] body .e-tab.e-control .e-tab-header .e-toolbar-pop {
    background-color: var(--dl-dark-surface-raised) !important;
    border-color: var(--dl-dark-border) !important;
}

html[data-theme="dark"] body .e-tab.e-control .e-tab-header .e-toolbar-item .e-tab-wrap,
html[data-theme="dark"] body .e-tab.e-control .e-tab-header .e-toolbar-item .e-tab-text,
html[data-theme="dark"] body .e-tab.e-control .e-tab-header .e-toolbar-item .e-icons,
html[data-theme="dark"] body .e-tab.e-control .e-tab-header .e-toolbar-item .e-tab-wrap .e-tab-text {
    background-color: transparent !important;
    color: var(--dl-dark-text-muted) !important;
}
html[data-theme="dark"] body .e-tab.e-control .e-tab-header .e-toolbar-item:hover .e-tab-wrap,
html[data-theme="dark"] body .e-tab.e-control .e-tab-header .e-toolbar-item:hover .e-tab-text {
    background-color: var(--dl-dark-surface-overlay) !important;
    color: var(--dl-dark-text) !important;
}
html[data-theme="dark"] body .e-tab.e-control .e-tab-header .e-toolbar-item.e-active .e-tab-wrap,
html[data-theme="dark"] body .e-tab.e-control .e-tab-header .e-toolbar-item.e-active .e-tab-text {
    background-color: transparent !important;
    color: var(--b-primary-color) !important;
}
html[data-theme="dark"] body .e-tab.e-control .e-tab-header .e-indicator {
    background-color: var(--b-primary-color) !important;
}

/* Syncfusion CSS-variable override fallback — many compiled bundles drive
   tab chrome from these custom properties. Setting them at body[data-theme]
   scope cascades to every SfTab without needing per-selector overrides. */
body[data-theme="dark"] {
    --tab-bg-color: var(--dl-dark-surface) !important;
    --tab-header-bg-color: var(--dl-dark-surface-raised) !important;
    --tab-content-bg-color: var(--dl-dark-surface) !important;
    --tab-text-color: var(--dl-dark-text) !important;
    --tab-active-text-color: var(--b-primary-color) !important;
    --tab-hover-bg-color: var(--dl-dark-surface-overlay) !important;
    --tab-indicator-bg-color: var(--b-primary-color) !important;
    --tab-header-border-color: var(--dl-dark-border) !important;
}


/* ==========================================================================
   Global Syncfusion SfRadioButton / SfSwitch / SfCheckBox label dark coverage
   ========================================================================== */

[data-theme="dark"] .e-radio-wrapper .e-label,
[data-theme="dark"] .e-checkbox-wrapper .e-label,
[data-theme="dark"] .e-switch-wrapper .e-switch-handle ~ .e-label {
    color: var(--dl-dark-text) !important;
}
[data-theme="dark"] .e-radio + label::before,
[data-theme="dark"] .e-checkbox-wrapper .e-frame {
    background-color: var(--dl-dark-surface-raised) !important;
    border-color: var(--dl-dark-border-emphasis) !important;
}


/* ==========================================================================
   Bootstrap form labels inside Syncfusion / form containers (dark)
   ========================================================================== */

[data-theme="dark"] .control-section,
[data-theme="dark"] .content-wrapper {
    background-color: transparent !important;
    color: var(--dl-dark-text) !important;
}
[data-theme="dark"] .form-group > label,
[data-theme="dark"] .control-section label,
[data-theme="dark"] .content-wrapper label,
[data-theme="dark"] .dl-control label,
[data-theme="dark"] .field-label,
[data-theme="dark"] .e-float-text,
[data-theme="dark"] .e-float-input label,
[data-theme="dark"] .e-input-group .e-float-text {
    color: var(--dl-dark-text) !important;
}

/* Alert.warning ("Loading Parameter Display Name…") inside DLParameterSelection */
[data-theme="dark"] .alert.alert-warning {
    background: rgba(245, 158, 11, 0.15) !important;
    color: var(--dl-dark-text) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
}

/* .dl-param-label — shared light banner used by DLDatePicker / DLDropdownList /
   DLNumericTextBox / DLTextBox / DLDateRangePicker (the "Second End Date"
   blue band on /Parameters Parameter Preview, etc.). All five components use
   inline <style> with hardcoded #f8f9fa bg + #495057 text. */
[data-theme="dark"] .dl-param-label {
    background: var(--dl-dark-surface-raised) !important;
    color: var(--dl-dark-text) !important;
    border: 1px solid var(--dl-dark-border) !important;
}
[data-theme="dark"] .dl-param-label i {
    color: var(--b-primary-color) !important;
}

/* ==========================================================================
   DL-2493 — friendly error pages (/not-found, /not-authorised)
   Centres the DLErrorState block in the content area. Global (not scoped)
   because App.razor's <NotFound> renders the same wrapper outside any page.
   ========================================================================== */
.dl-error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: 24px 12px;
}

/* ==========================================================================
   DL-2386 — report-card preview keyframes
   ==========================================================================
   🛑 These live HERE, in a global stylesheet, and must not move back into
   ReportCardPreview.razor.css.

   Blazor's scoped-CSS compiler RENAMES @keyframes declared in a .razor.css
   file, appending the component's scope id (rcp-drift -> rcp-drift-b-k7ymj91uw6)
   and rewriting references *within that same file*. It cannot rewrite the
   references in ReportsViewReportList.razor.css / DefaultPage.razor.css, which
   is where every one of these animations is actually applied (the trigger is
   the HOST card's :hover). Declared in the scoped file, the hosts referenced
   names that did not exist, and the browser silently ran nothing — no error,
   no warning, the whole hover experience simply dead.

   Global file = names survive verbatim = the host rules resolve. */

@keyframes rcp-sweep {
    0% { opacity: 1; background-position: 180% 0; }
    85% { opacity: 1; background-position: -60% 0; }
    100% { opacity: 0; background-position: -60% 0; }
}

@keyframes rcp-grow {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

@keyframes rcp-widen {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes rcp-draw {
    from { stroke-dashoffset: 260; }
    to { stroke-dashoffset: 0; }
}

@keyframes rcp-fade-in {
    from { opacity: 0; }
    to { opacity: 0.14; }
}

/* ── The drift ────────────────────────────────────────────────────────────────────────────────
   YouTube-thumbnail behaviour: point at a card and someone starts scrolling the report.

   The loop has no visible snap because the jump home happens while the scroller is transparent:
   it holds at the fold (52-78%), fades out there (90%), returns to the top in the SAME 1% window
   at opacity 0, then fades back in (100%). 0% and 100% are the identical state — translateY(0),
   opacity 1 — so `infinite` cycles seamlessly and the return reads as deliberate rather than as
   a rewind.

   The 0.9s start delay lets the existing grow/sheen intro land first. */
@keyframes rcp-drift {
    0%        { transform: translateY(0);     opacity: 1; }
    48%, 78%  { transform: translateY(-100%); opacity: 1; }
    90%       { transform: translateY(-100%); opacity: 0; }
    91%       { transform: translateY(0);     opacity: 0; }
    100%      { transform: translateY(0);     opacity: 1; }
}

/* ── In-view stagger, without JS ──────────────────────────────────────────────────────────────
   No IntersectionObserver and no timers. The drift and these share one clock — both are declared
   only under :hover, so both start at the same instant and run the same 6.4s period forever. A
   band's charts can therefore be told to animate "as it scrolls into view" purely by matching the
   keyframe percentages to the drift's: page 2 crosses the fold between 14% and 52%, so its content
   builds over 14-34% and holds. Measured first at 24-44% and rejected — the incoming half of the
   frame arrived visibly EMPTY and only filled once it had settled, which reads as a loading glitch
   rather than as scrolling. Content must already be there as it comes into view. */
@keyframes rcp-grow-inview {
    0%, 1%   { transform: scaleY(0); }
    20%, 100% { transform: scaleY(1); }
}

@keyframes rcp-widen-inview {
    0%, 1%   { transform: scaleX(0); }
    20%, 100% { transform: scaleX(1); }
}

@keyframes rcp-appear-inview {
    0%, 1%   { opacity: 0; }
    20%, 100% { opacity: 1; }
}

/* Frozen DATA cells — Syncfusion paints them opaque white; the dark theme styled the
   frozen header (above) but never the body cells, leaving a white strip down the frozen
   column. Must stay opaque (it occludes scrolled cells) — match the grid body surface. */
[data-theme="dark"] .e-grid .e-content td.e-rowcell.e-leftfreeze,
[data-theme="dark"] .e-grid .e-content td.e-rowcell.e-rightfreeze,
[data-theme="dark"] .e-grid .e-content td.e-rowcell.e-freezeleftborder,
[data-theme="dark"] .e-grid .e-content td.e-rowcell.e-freezerightborder {
    background: var(--dl-dark-surface) !important;
    background-color: var(--dl-dark-surface) !important;
}


/* ==========================================================================
   DL-2969 — Report view A1 chrome: the DARK grid rules.
   These live here, not beside the component, because a scoped stylesheet's
   [data-theme="dark"] ::deep .foo compiles to [data-theme="dark"][b-xxxx] .foo
   and never matches (see DLDatagridV2.razor.css:305-311). Everything below is
   scoped under .dl-a1-chrome so only the report view is touched.
   ========================================================================== */

/* Alternating rows — barely-there banding that survives the dark surface. */
[data-theme="dark"] .dl-a1-chrome .e-grid .e-content tr.e-altrow td.e-rowcell:not(.cell-positive):not(.cell-negative):not(.cell-zero):not(.cell-highlight) {
    background-color: rgba(255, 255, 255, 0.02);
}

/* Frozen cells paint opaque, so they need the banding explicitly or the stripe
   breaks across the freeze line. */
[data-theme="dark"] .dl-a1-chrome .e-grid .e-content tr.e-altrow td.e-rowcell.e-leftfreeze,
[data-theme="dark"] .dl-a1-chrome .e-grid .e-content tr.e-altrow td.e-rowcell.e-rightfreeze,
[data-theme="dark"] .dl-a1-chrome .e-grid .e-content tr.e-altrow td.e-rowcell.e-freezeleftborder,
[data-theme="dark"] .dl-a1-chrome .e-grid .e-content tr.e-altrow td.e-rowcell.e-freezerightborder {
    /* Opaque (they occlude scrolled cells) and built from the token, not a new hex:
       the same 2% white tint composited over the grid body surface. */
    background-color: var(--dl-dark-surface) !important;
    background-image: linear-gradient(rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)) !important;
}

/* The total / summary row. */
[data-theme="dark"] .dl-a1-chrome .e-grid .e-summaryrow .e-summarycell,
[data-theme="dark"] .dl-a1-chrome .e-grid .e-row.row-class-total .e-rowcell {
    background: rgba(16, 113, 185, 0.22) !important;
    background-color: rgba(16, 113, 185, 0.22) !important;
    color: var(--dl-dark-text) !important;
    font-weight: 700;
    border-bottom: none;
}

/* DL-2969 — the report view's DARK card chrome. Same reason as the grid rules above: a
   scoped stylesheet cannot express [data-theme="dark"] + ::deep, so every dark override
   that has to cross a component boundary lives here, scoped under .dl-a1-chrome. */

[data-theme="dark"] .dl-a1-chrome .dl-actionbar__title {
    color: var(--dl-dark-text);
}

[data-theme="dark"] .dl-a1-chrome .dl-actionbar__subtitle {
    color: var(--dl-dark-text-muted);
}

/* DL-2969 — the tile's dark type moved to DLTile.razor.css with the rest of it. */


[data-theme="dark"] .dl-a1-chrome .e-grid .e-content td.e-rowcell {
    border-color: var(--dl-dark-border);
}

/* ==========================================================================
   DL-2969 (round 2, Ro's review) — the report view's CONTENT-AREA background.

   The A2/A3 mock pins the canvas the cards sit on: #F7F9FC light, #1a1d27 dark.
   `.content-body` is an ANCESTOR of the `.dl-a1-chrome` wrapper, so a scoped
   `::deep` rule in ReportsViewDisplayReport.razor.css cannot reach it — CSS only
   walks downward. `:has()` does the scoping instead, and the wrapper class exists
   on the report view and nowhere else, so no other page is touched. (`:has()` is
   already used in that stylesheet for `.chart-card:has(.e-grid)`.)

   Measured on the live page before this change:
     light  #F7F9FC  — already the mock value, pinned here so a branding override of
                       --dl-bg-primary can never drift the report canvas off the mock.
     dark   #0f1117  — var(--dl-dark-bg), which is NOT A3's canvas. A3 pins
                       #1a1d27 (= --dl-dark-surface): the cards read as raised
                       against it, where against #0f1117 the whole stack goes flat.
   ========================================================================== */

/* The LIGHT half of this pair is gone — round 3's add-on makes the whole canvas white in the
   layout's own rule (DLMainLayoutDesktop.razor.css), so pinning #F7F9FC for one route would
   now be the odd one out rather than a guarantee. The DARK half stays: `.content-body`
   resolves var(--dl-dark-bg) = #0f1117 there, and A3 pins #1a1d27. */

[data-theme="dark"] .content-body:has(.dl-a1-chrome) {
    background: var(--dl-dark-surface);
}

/* ==========================================================================
   DL-2969 — THE FILTERS CARD. One definition, used by every page that shows an
   applied-parameter strip.

   The report view got this card in round 2. The Dashboard had a SEPARATE,
   copied implementation (`.applied-params*` in DefaultPage.razor.css) that never
   received it — a bare row with a green "PARAMETERS" label, which is what Ro
   flagged. Rather than copy the card a second time, the chrome lives here once
   and both pages opt in with `.dl-filters-card`.

   The selectors are grouped so the report view's existing class names
   (`param-section-header`, `filters-card-title`, `parameter-display`,
   `param-section-label`, `parameter-pill`) and the Dashboard's new BEM names
   resolve to the SAME declarations. Change a value here and both pages move.
   The duplicated declarations under `.dl-a1-chrome` in
   ReportsViewDisplayReport.razor.css were deleted when this landed.
   ========================================================================== */

/* DL-2969 — THE FLAT CARD CHROME. One definition, every consumer.
   `.dl-filters-card` was the first; the ReportsView report cards and type cards joined it
   rather than getting a third copy of the same four values. Anything that should read as a
   peer of the action bar card carries `.dl-flat-card`. */
.dl-flat-card,
.dl-filters-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    /* DL-2969 — the POP shadow, the same lift `.content-body` uses. Was 0 1px 3px
       rgba(0,0,0,.05), which against a near-white page read as a border rather than a lift.
       The 1px ring sharpens the edge; the 12px drop is what makes the card sit above. */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04),
                0 2px 12px rgba(0, 0, 0, 0.08);
}

.dl-filters-card {
    padding: 0;
    margin: 0 0 12px 0;
    overflow: hidden;
    width: auto;
    box-sizing: border-box;
}

.dl-filters-card .param-section-header.applied,
.dl-filters-card .dl-filters-card__header {
    display: flex;
    align-items: center;
    /* DL-2969 — title, then the APPLIED pill 8px after it. The header's right-hand
       content (hint text, date button, collapse chevron) keeps its place via
       `margin-left: auto` below, so this is a gap, not space-between. */
    gap: 8px;
    padding: 10px 14px 9px;
    margin-bottom: 0;
    border-bottom: 1px solid #E5E7EB;
}

/* Whatever the header carries on its right stays hard right. */
.dl-filters-card .param-header-actions,
.dl-filters-card .dl-filters-card__header > .applied-params__action-btn {
    margin-left: auto;
}

.dl-filters-card .param-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* DL-2969 — the parameter hint. It lived in ReportsViewDisplayReport.razor.css, which is
   SCOPED CSS: those rules compile to `selector[b-xxx]` and only ever match elements that
   component itself renders, so the Dashboard's copy of the same markup got no styling at
   all. It belongs with the rest of the card, here, once. */
.dl-filters-card .parameter-edit-hint {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fcd34d;
    border-radius: 4px;
    font-size: 10px;
    color: #92400e;
    margin-right: 8px;
}

.dl-filters-card .parameter-edit-hint i {
    color: #f59e0b;
    font-size: 10px;
}

.dl-filters-card .parameter-edit-hint span {
    line-height: 1.2;
}

.dl-filters-card .parameter-edit-hint strong {
    color: #16a34a;
}

@media (max-width: 768px) {
    .dl-filters-card .parameter-edit-hint {
        font-size: 9px;
        padding: 3px 6px;
        gap: 4px;
    }

    .dl-filters-card .parameter-edit-hint i {
        font-size: 9px;
    }
}

/* Off entirely on a phone — it is a nicety, and the header has no room for it. */
@media (max-width: 480px) {
    .dl-filters-card .parameter-edit-hint {
        display: none;
    }
}

/* DL-2969 — the hint had never had a dark block, so it rendered cream-on-dark inside an
   otherwise dark card. background-image (not the `background` shorthand) so the light
   gradient is actually replaced rather than layered under. */
[data-theme="dark"] .dl-filters-card .parameter-edit-hint {
    background: rgba(245, 158, 11, 0.10);
    background-image: none;
    border-color: rgba(245, 158, 11, 0.30);
    color: var(--dl-dark-text-muted, #9ca3af);
}

[data-theme="dark"] .dl-filters-card .parameter-edit-hint i {
    color: #f59e0b;
}

[data-theme="dark"] .dl-filters-card .parameter-edit-hint strong {
    color: #4ade80;
}

.dl-filters-card .filters-card-title,
.dl-filters-card .dl-filters-card__title {
    font-size: 13.5px;
    font-weight: 600;
    color: #111827;
}

.dl-filters-card .parameter-display,
.dl-filters-card .dl-filters-card__body {
    padding: 8px 10px;
    width: 100%;
    box-sizing: border-box;
}

.dl-filters-card .dl-filters-card__body {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

/* DL-2969 — APPLIED now rides in the header next to the title, not at the head of the
   chip row, so the chips get the whole row. No dividers of its own: it no longer leads
   anything, and the header spaces it with a plain 8px gap. */
.dl-filters-card .param-section-label.applied,
.dl-filters-card .dl-filters-card__applied {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #28a745;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    padding: 0;
    margin: 0;
    white-space: nowrap;
    flex: 0 0 auto;
}

.dl-filters-card .param-section-label.applied i,
.dl-filters-card .dl-filters-card__applied i {
    font-size: 11px;
    color: #28a745;
}

/* Chips read as one divider row: no fill, the pipe stays. */
.dl-filters-card .parameter-pill,
.dl-filters-card .dl-filters-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    border-left: 1px solid #D1D5DB;
    border-radius: 0;
    padding: 4px 14px;
    transition: background 0.15s ease;
    /* DL-2969 — chips size to their content. They may shrink if the row runs out, but they
       never get a width imposed on them while there is room. */
    flex: 0 1 auto;
    min-width: 0;
    /* The row, not a fraction of the chip, is the only limit. */
    max-width: 100%;
    white-space: nowrap;
}

/* The ROW handles running out of room, by wrapping. A chip is short; a second line costs
   nothing and is readable, where a scroll bar hides values entirely. */
.dl-filters-card .parameter-pills-container,
.dl-filters-card .dl-filters-card__body {
    flex-wrap: wrap;
    row-gap: 6px;
}

/* Last resort, and only for a chip whose value alone would eat the row: clip that ONE chip.
   Everything narrower stays whole.
   DL-2969 — `max-width: 60%` here resolved against the chip's own shrink-to-fit width, so
   every long value was cut at 60% of itself no matter how much free row there was. The chip
   carries the limit now (max-width: 100% of the row); the value just needs to be shrinkable. */
.dl-filters-card .parameter-pill .param-value,
.dl-filters-card .dl-filters-card__chip .dl-filters-card__val {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The pipe is a DIVIDER between chips, so the first one doesn't get one. */
.dl-filters-card .parameter-pills-container .parameter-pill:first-child,
.dl-filters-card .dl-filters-card__body .dl-filters-card__chip:first-child {
    border-left: none;
    padding-left: 4px;
}

.dl-filters-card .parameter-pill.clickable,
.dl-filters-card .dl-filters-card__chip.clickable {
    background: transparent;
    cursor: pointer;
}

.dl-filters-card .parameter-pill.clickable:hover,
.dl-filters-card .dl-filters-card__chip.clickable:hover {
    background: #f3f8fc;
}

.dl-filters-card .param-label,
.dl-filters-card .dl-filters-card__key {
    font-size: 11px;
    font-weight: 500;
    color: #6C757D;
    text-transform: lowercase;
}

.dl-filters-card .param-value,
.dl-filters-card .dl-filters-card__val {
    font-size: 13px;
    font-weight: 600;
    color: #231F20;
}

/* ---------- the Filters card, dark ---------- */

[data-theme="dark"] .dl-flat-card,
[data-theme="dark"] .dl-filters-card {
    background: var(--dl-dark-surface-raised);
    border-color: var(--dl-dark-border);
    box-shadow: none;
}

[data-theme="dark"] .dl-filters-card .param-section-header.applied,
[data-theme="dark"] .dl-filters-card .dl-filters-card__header {
    border-bottom-color: var(--dl-dark-border);
}

[data-theme="dark"] .dl-filters-card .filters-card-title,
[data-theme="dark"] .dl-filters-card .dl-filters-card__title,
[data-theme="dark"] .dl-filters-card .param-value,
[data-theme="dark"] .dl-filters-card .dl-filters-card__val {
    color: var(--dl-dark-text);
}

[data-theme="dark"] .dl-filters-card .param-label,
[data-theme="dark"] .dl-filters-card .dl-filters-card__key {
    color: var(--dl-dark-text-muted);
}

[data-theme="dark"] .dl-filters-card .parameter-pill,
[data-theme="dark"] .dl-filters-card .dl-filters-card__chip {
    border-left-color: var(--dl-dark-border);
}

[data-theme="dark"] .dl-filters-card .parameter-pill.clickable:hover,
[data-theme="dark"] .dl-filters-card .dl-filters-card__chip.clickable:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* ==========================================================================
   DL-2969 — the tile panel keeps its HEADER, exactly like every other card: title,
   description and the "…" menu. An earlier pass hid the title and subtitle for tile
   panels so the name showed once in the tile's own label row; Ro reversed that — a tile
   is a card and should wear the same header as its neighbours. The tile body's label row
   now yields instead: it prints only when it has something the header does not already
   say (see DLTile.razor).
   ========================================================================== */

/* A1's tile padding; the body stack fills the card rather than sitting in its top-left.
   `container-type: size` is what lets the value's clamp read the panel's height — and it has
   to be declared HERE: `.tile-body` is rendered by DLChartRenderer, so the same rule inside
   DLTile.razor.css compiles to `.tile-body[b-<DLTile>]` and matches nothing. */
.chart-card:has(.tile-body) .tile-body {
    padding: 14px 16px 16px;
    container-type: size;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.chart-card:has(.tile-body) .tile-media {
    width: 100%;
}