/* ==========================================================================
   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;

    /* ── Colour Architecture ── */
    --dl-bg-primary: #F7F9FC;
    --dl-bg-secondary: #EDF2F7;
    --dl-text-primary: #1A202C;
    --dl-text-secondary: #4A5568;
    --dl-text-muted: #A0AEC0;
    --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: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --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 — frosted glass */
.content-body-wrapper {
    background: var(--dl-bg-glass-strong) !important;
    backdrop-filter: blur(var(--dl-blur)) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(var(--dl-blur)) saturate(1.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: var(--dl-shadow-md),
                inset 0 1px 0 rgba(255, 255, 255, 0.6) !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-top: 1px solid rgba(var(--dl-primary-rgb), 0.08) !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: none; /* Hidden until dark mode is fully polished */
    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;
}

/* Sun icon (shown in dark mode) */
.theme-toggle .theme-icon-sun { display: none; }
.theme-toggle .theme-icon-moon { display: flex; }

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

[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-text: #e4e4e7;
    --dl-dark-text-muted: #9ca3af;
    --dl-dark-text-subtle: #6b7280;

    /* 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 glass */
[data-theme="dark"] .content-body-wrapper {
    background: var(--dl-bg-glass-strong) !important;
    border-color: var(--dl-dark-border) !important;
    box-shadow: var(--dl-shadow-md),
                inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

/* Content body — dark background */
[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: rgba(255, 255, 255, 0.02) !important;
    border-top-color: var(--dl-dark-border) !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 */
[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;
}

/* Skeleton shimmer dark */
[data-theme="dark"] .dl-skeleton {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.04) 25%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.04) 75%);
    background-size: 200% 100%;
}

/* 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;
}

/* 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)) {
    .content-body-wrapper {
        background: rgba(255, 255, 255, 0.95) !important;
    }

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

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