/* ═══════════════════════════════════════════════════════════
   נדל״ן פרו — Premium Theme System v1
   Ported from LexManager V299 → new architecture tokens
   ───────────────────────────────────────────────────────────
   6 Themes:
     1. light    — Default (defined in variables.css :root)
     2. dark     — Deep navy + gold
     3. ocean    — Teal + cyan
     4. emerald  — Forest green
     5. rose     — Rose gold + pink
     6. midnight — Deep purple
   
   HOW IT WORKS:
   Each theme overrides the palette tokens (--navy-*, --gold-*,
   --emerald-*) and semantic tokens (--bg-*, --text-*, etc.)
   at the [data-theme] selector level. Because ALL component CSS
   references these tokens, themes cascade automatically.
   ═══════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────
   THEME 1: LIGHT — Default
   Already in variables.css :root — no overrides needed.
   ───────────────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────
   THEME 2: DARK — Deep Navy + Champagne Gold
   Classic dark mode with royal navy + gold accents
   ───────────────────────────────────────────────────────── */
[data-theme="dark"] {
    color-scheme: dark;

    /* Surfaces */
    --bg-app: #0a1628;
    --bg-surface: #0f2744;
    --bg-elevated: #153050;
    --bg-sunken: #091220;
    --bg-sidebar: #080e1a;
    --bg-header: rgba(10,22,40,0.92);

    /* Text */
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --text-muted: #64748b;
    --text-inverse: #0f172a;
    --text-link: var(--navy-300);
    --text-accent: var(--gold-400);

    /* Borders */
    --border-default: rgba(212,175,55,0.08);
    --border-subtle: rgba(212,175,55,0.04);
    --border-strong: rgba(212,175,55,0.15);
    --border-focus: var(--gold-500);

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.12);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.10);
    --shadow-md: 0 2px 4px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.14);
    --shadow-lg: 0 4px 6px rgba(0,0,0,0.08), 0 12px 28px rgba(0,0,0,0.18);
    --shadow-xl: 0 8px 16px rgba(0,0,0,0.10), 0 24px 48px rgba(0,0,0,0.22);
    --shadow-card: 0 0 0 1px rgba(212,175,55,0.06), 0 2px 8px rgba(0,0,0,0.12), 0 8px 32px rgba(0,0,0,0.18);
    --shadow-card-hover: 0 0 0 1px rgba(212,175,55,0.08), 0 4px 12px rgba(0,0,0,0.15), 0 16px 48px rgba(0,0,0,0.22);
    --shadow-sidebar: 4px 0 32px rgba(0,0,0,0.3);
    --shadow-focus: 0 0 0 3px rgba(212,175,55,0.2);
    --shadow-glow-gold: 0 4px 24px rgba(212,175,55,0.18), 0 8px 40px rgba(212,175,55,0.1);

    /* Neutrals */
    --gray-0:   #f8fafc;
    --gray-25:  #f1f5f9;
    --gray-50:  #e2e8f0;
    --gray-75:  #cbd5e1;
    --gray-100: #94a3b8;
    --gray-150: #64748b;
    --gray-200: #475569;
    --gray-300: #334155;
    --gray-400: #1e293b;
    --gray-500: #0f172a;
    --gray-600: #0a1628;
    --gray-700: #091220;
    --gray-800: #070e1a;
    --gray-900: #050a14;
    --gray-950: #030710;

    /* Gradients */
    --gradient-surface: linear-gradient(180deg, #0f2744 0%, #0a1628 100%);
}

/* Dark sidebar */
[data-theme="dark"] .app-sidebar {
    background: linear-gradient(180deg, #080e1a 0%, #0b1220 100%);
}

/* Dark header backdrop */
[data-theme="dark"] .app-header {
    background: rgba(10,22,40,0.92);
    backdrop-filter: blur(24px) saturate(1.5);
    border-bottom-color: rgba(212,175,55,0.08);
}

/* Dark login */
[data-theme="dark"] .login-page {
    background: radial-gradient(ellipse at 30% 20%, #0f2744 0%, #080e1a 50%, #030710 100%);
}

/* Dark scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-track { background: #0a1628; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.15); border-color: #0a1628; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(212,175,55,0.3); }

/* Dark body background for ambient glow */
[data-theme="dark"] body::before {
    content: '';
    position: fixed; inset: 0;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(212,175,55,0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(46,92,138,0.05) 0%, transparent 50%);
    pointer-events: none; z-index: 0;
}


/* ─────────────────────────────────────────────────────────
   THEME 3: OCEAN — Deep Teal + Cyan
   ───────────────────────────────────────────────────────── */
[data-theme="ocean"] {
    color-scheme: dark;

    /* Override accent palette → cyan */
    --gold-50:  rgba(6,182,212,0.06);
    --gold-100: rgba(6,182,212,0.10);
    --gold-200: #67e8f9;
    --gold-300: #22d3ee;
    --gold-400: #06b6d4;
    --gold-500: #0891b2;
    --gold-600: #0e7490;
    --gold-700: #155e75;
    --gold-800: #164e63;
    --gold-900: #0c2a3a;

    /* Override primary palette → teal */
    --navy-50:  rgba(14,165,233,0.08);
    --navy-100: #bae6fd;
    --navy-200: #7dd3fc;
    --navy-300: #38bdf8;
    --navy-400: #0ea5e9;
    --navy-500: #0284c7;
    --navy-600: #164e63;
    --navy-700: #0c3b52;
    --navy-800: #0b2d42;
    --navy-900: #0b1e2d;
    --navy-950: #082135;

    /* Override emerald stays */
    --emerald-500: #06b6d4;
    --emerald-600: #0891b2;

    /* Surfaces */
    --bg-app: #0b1e2d;
    --bg-surface: #0f2a3d;
    --bg-elevated: #143548;
    --bg-sunken: #091a28;
    --bg-sidebar: #082135;
    --bg-header: rgba(11,30,45,0.92);

    /* Text */
    --text-primary: #f0fdfa;
    --text-secondary: #99f6e4;
    --text-tertiary: #5eead4;
    --text-muted: #2dd4bf;
    --text-inverse: #042f2e;
    --text-accent: #22d3ee;

    /* Borders */
    --border-default: rgba(6,182,212,0.08);
    --border-subtle: rgba(6,182,212,0.04);
    --border-strong: rgba(6,182,212,0.15);

    /* Shadows */
    --shadow-card: 0 0 0 1px rgba(6,182,212,0.06), 0 2px 8px rgba(0,0,0,0.12), 0 8px 32px rgba(0,0,0,0.18);
    --shadow-card-hover: 0 0 0 1px rgba(6,182,212,0.1), 0 4px 12px rgba(0,0,0,0.15), 0 20px 48px rgba(0,0,0,0.22);
    --shadow-glow-gold: 0 4px 24px rgba(6,182,212,0.18), 0 8px 40px rgba(6,182,212,0.1);
    --shadow-focus: 0 0 0 3px rgba(6,182,212,0.2);

    /* Gradients */
    --gradient-navy: linear-gradient(135deg, #164e63, #0b2d42);
    --gradient-gold: linear-gradient(135deg, #06b6d4, #0891b2);
    --gradient-surface: linear-gradient(180deg, #0f2a3d 0%, #0b1e2d 100%);

    /* Status overrides */
    --status-active: #0ea5e9;
    --status-pending: #06b6d4;
}

[data-theme="ocean"] .app-sidebar { background: linear-gradient(180deg, #082135 0%, #0b1e2d 100%); }
[data-theme="ocean"] .app-header { background: rgba(11,30,45,0.92); backdrop-filter: blur(24px); border-bottom-color: rgba(6,182,212,0.08); }
[data-theme="ocean"] .login-page { background: radial-gradient(ellipse at 30% 20%, #0f2a3d 0%, #082135 50%, #041018 100%); }
[data-theme="ocean"] ::-webkit-scrollbar-thumb { background: rgba(6,182,212,0.15); }
[data-theme="ocean"] ::-webkit-scrollbar-thumb:hover { background: rgba(6,182,212,0.3); }


/* ─────────────────────────────────────────────────────────
   THEME 4: EMERALD — Rich Forest Green
   ───────────────────────────────────────────────────────── */
[data-theme="emerald"] {
    color-scheme: dark;

    /* Override accent → emerald */
    --gold-50:  rgba(16,185,129,0.06);
    --gold-100: rgba(16,185,129,0.10);
    --gold-200: #a7f3d0;
    --gold-300: #34d399;
    --gold-400: #10b981;
    --gold-500: #059669;
    --gold-600: #047857;
    --gold-700: #065f46;
    --gold-800: #064e3b;
    --gold-900: #022c22;

    /* Override primary → dark green */
    --navy-50:  rgba(16,185,129,0.08);
    --navy-100: #d1fae5;
    --navy-200: #a7f3d0;
    --navy-300: #6ee7b7;
    --navy-400: #34d399;
    --navy-500: #10b981;
    --navy-600: #065f46;
    --navy-700: #0a4233;
    --navy-800: #0f2e20;
    --navy-900: #0a1f16;
    --navy-950: #071a12;

    /* Surfaces */
    --bg-app: #0a1f16;
    --bg-surface: #0f2e20;
    --bg-elevated: #14382a;
    --bg-sunken: #071610;
    --bg-sidebar: #071a12;
    --bg-header: rgba(10,31,22,0.92);

    /* Text */
    --text-primary: #f0fdf4;
    --text-secondary: #bbf7d0;
    --text-tertiary: #86efac;
    --text-muted: #4ade80;
    --text-inverse: #052e16;
    --text-accent: #34d399;

    /* Borders */
    --border-default: rgba(16,185,129,0.08);
    --border-subtle: rgba(16,185,129,0.04);
    --border-strong: rgba(16,185,129,0.15);

    /* Shadows */
    --shadow-card: 0 0 0 1px rgba(16,185,129,0.06), 0 2px 8px rgba(0,0,0,0.12), 0 8px 32px rgba(0,0,0,0.18);
    --shadow-card-hover: 0 0 0 1px rgba(16,185,129,0.1), 0 4px 12px rgba(0,0,0,0.15), 0 20px 48px rgba(0,0,0,0.22);
    --shadow-glow-gold: 0 4px 24px rgba(16,185,129,0.18), 0 8px 40px rgba(16,185,129,0.1);
    --shadow-focus: 0 0 0 3px rgba(16,185,129,0.2);

    /* Gradients */
    --gradient-navy: linear-gradient(135deg, #065f46, #0a2118);
    --gradient-gold: linear-gradient(135deg, #10b981, #059669);
    --gradient-surface: linear-gradient(180deg, #0f2e20 0%, #0a1f16 100%);

    --status-active: #10b981;
    --status-pending: #059669;
}

[data-theme="emerald"] .app-sidebar { background: linear-gradient(180deg, #071a12 0%, #0a1f16 100%); }
[data-theme="emerald"] .app-header { background: rgba(10,31,22,0.92); backdrop-filter: blur(24px); border-bottom-color: rgba(16,185,129,0.08); }
[data-theme="emerald"] .login-page { background: radial-gradient(ellipse at 30% 20%, #0f2e20 0%, #071a12 50%, #030d09 100%); }
[data-theme="emerald"] ::-webkit-scrollbar-thumb { background: rgba(16,185,129,0.15); }
[data-theme="emerald"] ::-webkit-scrollbar-thumb:hover { background: rgba(16,185,129,0.3); }


/* ─────────────────────────────────────────────────────────
   THEME 5: ROSE GOLD — Warm & Elegant
   ───────────────────────────────────────────────────────── */
[data-theme="rose"] {
    color-scheme: dark;

    /* Override accent → pink */
    --gold-50:  rgba(244,114,182,0.06);
    --gold-100: rgba(244,114,182,0.10);
    --gold-200: #fbcfe8;
    --gold-300: #f9a8d4;
    --gold-400: #f472b6;
    --gold-500: #db2777;
    --gold-600: #be185d;
    --gold-700: #9d174d;
    --gold-800: #831843;
    --gold-900: #500724;

    /* Override primary → rose */
    --navy-50:  rgba(236,72,153,0.08);
    --navy-100: #fce7f3;
    --navy-200: #fbcfe8;
    --navy-300: #f9a8d4;
    --navy-400: #ec4899;
    --navy-500: #db2777;
    --navy-600: #831843;
    --navy-700: #5c1130;
    --navy-800: #271620;
    --navy-900: #1c1017;
    --navy-950: #160b10;

    /* Surfaces */
    --bg-app: #1c1017;
    --bg-surface: #271620;
    --bg-elevated: #311d2a;
    --bg-sunken: #140c10;
    --bg-sidebar: #160b10;
    --bg-header: rgba(28,16,23,0.92);

    /* Text */
    --text-primary: #fff1f2;
    --text-secondary: #fecdd3;
    --text-tertiary: #fda4af;
    --text-muted: #fb7185;
    --text-inverse: #1c0a14;
    --text-accent: #f9a8d4;

    /* Borders */
    --border-default: rgba(244,114,182,0.08);
    --border-subtle: rgba(244,114,182,0.04);
    --border-strong: rgba(244,114,182,0.15);

    /* Shadows */
    --shadow-card: 0 0 0 1px rgba(244,114,182,0.06), 0 2px 8px rgba(0,0,0,0.12), 0 8px 32px rgba(0,0,0,0.18);
    --shadow-card-hover: 0 0 0 1px rgba(244,114,182,0.1), 0 4px 12px rgba(0,0,0,0.15), 0 20px 48px rgba(0,0,0,0.22);
    --shadow-glow-gold: 0 4px 24px rgba(244,114,182,0.18), 0 8px 40px rgba(244,114,182,0.1);
    --shadow-focus: 0 0 0 3px rgba(244,114,182,0.2);

    /* Gradients */
    --gradient-navy: linear-gradient(135deg, #831843, #1c0a14);
    --gradient-gold: linear-gradient(135deg, #f472b6, #db2777);
    --gradient-surface: linear-gradient(180deg, #271620 0%, #1c1017 100%);

    --status-active: #ec4899;
    --status-pending: #f472b6;
}

[data-theme="rose"] .app-sidebar { background: linear-gradient(180deg, #160b10 0%, #1c1017 100%); }
[data-theme="rose"] .app-header { background: rgba(28,16,23,0.92); backdrop-filter: blur(24px); border-bottom-color: rgba(244,114,182,0.08); }
[data-theme="rose"] .login-page { background: radial-gradient(ellipse at 30% 20%, #271620 0%, #160b10 50%, #0a0508 100%); }
[data-theme="rose"] ::-webkit-scrollbar-thumb { background: rgba(244,114,182,0.15); }
[data-theme="rose"] ::-webkit-scrollbar-thumb:hover { background: rgba(244,114,182,0.3); }


/* ─────────────────────────────────────────────────────────
   THEME 6: MIDNIGHT — Deep Purple
   ───────────────────────────────────────────────────────── */
[data-theme="midnight"] {
    color-scheme: dark;

    /* Override accent → violet */
    --gold-50:  rgba(167,139,250,0.06);
    --gold-100: rgba(167,139,250,0.10);
    --gold-200: #e9d5ff;
    --gold-300: #c4b5fd;
    --gold-400: #a78bfa;
    --gold-500: #7c3aed;
    --gold-600: #6d28d9;
    --gold-700: #5b21b6;
    --gold-800: #4c1d95;
    --gold-900: #2e1065;

    /* Override primary → purple */
    --navy-50:  rgba(139,92,246,0.08);
    --navy-100: #ede9fe;
    --navy-200: #ddd6fe;
    --navy-300: #c4b5fd;
    --navy-400: #8b5cf6;
    --navy-500: #7c3aed;
    --navy-600: #4c1d95;
    --navy-700: #3b1578;
    --navy-800: #160f2e;
    --navy-900: #0f0a1e;
    --navy-950: #0a0618;

    /* Surfaces */
    --bg-app: #0f0a1e;
    --bg-surface: #160f2e;
    --bg-elevated: #1d1540;
    --bg-sunken: #0a0718;
    --bg-sidebar: #0a0618;
    --bg-header: rgba(15,10,30,0.92);

    /* Text */
    --text-primary: #faf5ff;
    --text-secondary: #e9d5ff;
    --text-tertiary: #c084fc;
    --text-muted: #a855f7;
    --text-inverse: #1e1038;
    --text-accent: #c4b5fd;

    /* Borders */
    --border-default: rgba(167,139,250,0.08);
    --border-subtle: rgba(167,139,250,0.04);
    --border-strong: rgba(167,139,250,0.15);

    /* Shadows */
    --shadow-card: 0 0 0 1px rgba(167,139,250,0.06), 0 2px 8px rgba(0,0,0,0.12), 0 8px 32px rgba(0,0,0,0.18);
    --shadow-card-hover: 0 0 0 1px rgba(167,139,250,0.1), 0 4px 12px rgba(0,0,0,0.15), 0 20px 48px rgba(0,0,0,0.22);
    --shadow-glow-gold: 0 4px 24px rgba(139,92,246,0.18), 0 8px 40px rgba(139,92,246,0.1);
    --shadow-focus: 0 0 0 3px rgba(139,92,246,0.2);

    /* Gradients */
    --gradient-navy: linear-gradient(135deg, #4c1d95, #0f0726);
    --gradient-gold: linear-gradient(135deg, #a78bfa, #7c3aed);
    --gradient-surface: linear-gradient(180deg, #160f2e 0%, #0f0a1e 100%);

    --status-active: #8b5cf6;
    --status-pending: #a78bfa;
}

[data-theme="midnight"] .app-sidebar { background: linear-gradient(180deg, #0a0618 0%, #0f0a1e 100%); }
[data-theme="midnight"] .app-header { background: rgba(15,10,30,0.92); backdrop-filter: blur(24px); border-bottom-color: rgba(167,139,250,0.08); }
[data-theme="midnight"] .login-page { background: radial-gradient(ellipse at 30% 20%, #160f2e 0%, #0a0618 50%, #050310 100%); }
[data-theme="midnight"] ::-webkit-scrollbar-thumb { background: rgba(167,139,250,0.15); }
[data-theme="midnight"] ::-webkit-scrollbar-thumb:hover { background: rgba(167,139,250,0.3); }


/* ═══════════════════════════════════════════════════════════
   SHARED DARK-MODE OVERRIDES (all themes except light)
   Applies to dark, ocean, emerald, rose, midnight
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"],
[data-theme="ocean"],
[data-theme="emerald"],
[data-theme="rose"],
[data-theme="midnight"] {
    /* Ensure semantic aliases track correctly */
    --primary-50: var(--navy-50);
    --primary-100: var(--navy-100);
    --primary-200: var(--navy-200);
    --primary-500: var(--navy-500);
    --primary-600: var(--navy-600);
    --primary-700: var(--navy-700);
    --primary-800: var(--navy-800);
    --primary-900: var(--navy-900);

    --accent-50: var(--gold-50);
    --accent-100: var(--gold-100);
    --accent-200: var(--gold-200);
    --accent-400: var(--gold-400);
    --accent-500: var(--gold-500);
    --accent-600: var(--gold-600);
    --accent-700: var(--gold-700);

    --success-500: #22c55e;
    --success-600: #16a34a;
    --danger-500: #ef4444;
    --danger-600: #dc2626;
    --warning-500: #eab308;
    --info-500: #3b82f6;
}

/* ── Ambient body glow (dark themes) ── */
[data-theme="ocean"] body::before,
[data-theme="emerald"] body::before,
[data-theme="rose"] body::before,
[data-theme="midnight"] body::before {
    content: '';
    position: fixed; inset: 0;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(var(--_glow-r,212),var(--_glow-g,175),var(--_glow-b,55),0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(var(--_glow-r,212),var(--_glow-g,175),var(--_glow-b,55),0.02) 0%, transparent 50%);
    pointer-events: none; z-index: 0;
}


/* ═══════════════════════════════════════════════════════════
   THEME PICKER — Sidebar UI Component
   ═══════════════════════════════════════════════════════════ */
.theme-picker {
    padding: var(--space-2) var(--space-3);
}

.theme-picker-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.35);
    font-weight: 700;
    padding: var(--space-1) var(--space-1) var(--space-2);
    font-family: var(--font-primary);
}

.theme-picker-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
}

.theme-swatch {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 150ms ease;
    position: relative;
    overflow: hidden;
}

.theme-swatch:hover {
    transform: scale(1.12);
    z-index: 1;
}

.theme-swatch:active {
    transform: scale(0.95);
}

.theme-swatch.active {
    border-color: #fff;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.3), 0 2px 8px rgba(0,0,0,0.3);
}

/* Swatch accent stripe */
.theme-swatch::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 40%;
}

/* Individual swatch colors */
.theme-swatch[data-theme-id="light"]    { background: #f1f5f9; }
.theme-swatch[data-theme-id="light"]::after { background: #b8962e; }

.theme-swatch[data-theme-id="dark"]     { background: #0f2744; }
.theme-swatch[data-theme-id="dark"]::after { background: #d4af37; }

.theme-swatch[data-theme-id="ocean"]    { background: #0f2a3d; }
.theme-swatch[data-theme-id="ocean"]::after { background: #06b6d4; }

.theme-swatch[data-theme-id="emerald"]  { background: #0f2e20; }
.theme-swatch[data-theme-id="emerald"]::after { background: #10b981; }

.theme-swatch[data-theme-id="rose"]     { background: #271620; }
.theme-swatch[data-theme-id="rose"]::after { background: #f472b6; }

.theme-swatch[data-theme-id="midnight"] { background: #160f2e; }
.theme-swatch[data-theme-id="midnight"]::after { background: #a78bfa; }

/* Light theme → darker active border */
:root .theme-swatch.active,
[data-theme="light"] .theme-swatch.active {
    border-color: var(--navy-700, #293b5e);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.1);
}

/* Dark themes → white active border */
[data-theme="dark"] .theme-swatch.active,
[data-theme="ocean"] .theme-swatch.active,
[data-theme="emerald"] .theme-swatch.active,
[data-theme="rose"] .theme-swatch.active,
[data-theme="midnight"] .theme-swatch.active {
    border-color: #fff;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.3), 0 2px 8px rgba(0,0,0,0.3);
}


/* ═══════════════════════════════════════════════════════════
   THEME-AWARE COMPONENT ADJUSTMENTS
   Fine-tuning for specific components under dark themes
   ═══════════════════════════════════════════════════════════ */

/* Nav item active bar — use themed accent */
[data-theme="dark"] .nav-item.active::before,
[data-theme="ocean"] .nav-item.active::before,
[data-theme="emerald"] .nav-item.active::before,
[data-theme="rose"] .nav-item.active::before,
[data-theme="midnight"] .nav-item.active::before {
    background: linear-gradient(180deg, var(--gold-400), var(--gold-600));
}

/* Nav active text */
[data-theme="dark"] .nav-item.active,
[data-theme="ocean"] .nav-item.active,
[data-theme="emerald"] .nav-item.active,
[data-theme="rose"] .nav-item.active,
[data-theme="midnight"] .nav-item.active {
    color: var(--gold-300);
}

/* Sidebar text in dark themes */
[data-theme="dark"] .sidebar-brand h1,
[data-theme="ocean"] .sidebar-brand h1,
[data-theme="emerald"] .sidebar-brand h1,
[data-theme="rose"] .sidebar-brand h1,
[data-theme="midnight"] .sidebar-brand h1 {
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Table row hover — themed accent */
[data-theme="dark"] .data-table tbody tr:hover,
[data-theme="ocean"] .data-table tbody tr:hover,
[data-theme="emerald"] .data-table tbody tr:hover,
[data-theme="rose"] .data-table tbody tr:hover,
[data-theme="midnight"] .data-table tbody tr:hover {
    background: var(--gold-50);
}

/* Modal overlay — darker backdrop for dark themes */
[data-theme="dark"] .modal-overlay,
[data-theme="ocean"] .modal-overlay,
[data-theme="emerald"] .modal-overlay,
[data-theme="rose"] .modal-overlay,
[data-theme="midnight"] .modal-overlay {
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
}

/* Toast container — themed */
[data-theme="dark"] .toast,
[data-theme="ocean"] .toast,
[data-theme="emerald"] .toast,
[data-theme="rose"] .toast,
[data-theme="midnight"] .toast {
    background: var(--bg-elevated);
    border-color: var(--border-default);
    color: var(--text-primary);
}

/* Badge styles in dark modes */
[data-theme="dark"] .badge-active,
[data-theme="ocean"] .badge-active,
[data-theme="emerald"] .badge-active,
[data-theme="rose"] .badge-active,
[data-theme="midnight"] .badge-active {
    background: var(--navy-50);
    color: var(--navy-400);
}

/* Filter chips */
[data-theme="dark"] .filter-chip.active,
[data-theme="ocean"] .filter-chip.active,
[data-theme="emerald"] .filter-chip.active,
[data-theme="rose"] .filter-chip.active,
[data-theme="midnight"] .filter-chip.active {
    background: var(--gold-50);
    color: var(--gold-400);
    border-color: var(--gold-500);
}

/* Form inputs in dark themes */
[data-theme="dark"] .form-input,
[data-theme="ocean"] .form-input,
[data-theme="emerald"] .form-input,
[data-theme="rose"] .form-input,
[data-theme="midnight"] .form-input {
    background: var(--bg-elevated);
    border-color: var(--border-default);
    color: var(--text-primary);
}

[data-theme="dark"] .form-input:focus,
[data-theme="ocean"] .form-input:focus,
[data-theme="emerald"] .form-input:focus,
[data-theme="rose"] .form-input:focus,
[data-theme="midnight"] .form-input:focus {
    border-color: var(--gold-500);
    box-shadow: var(--shadow-focus);
}

/* Card backgrounds */
[data-theme="dark"] .card,
[data-theme="ocean"] .card,
[data-theme="emerald"] .card,
[data-theme="rose"] .card,
[data-theme="midnight"] .card {
    background: var(--bg-surface);
    border-color: var(--border-default);
}

/* Dropdown menus */
[data-theme="dark"] .dropdown-menu,
[data-theme="ocean"] .dropdown-menu,
[data-theme="emerald"] .dropdown-menu,
[data-theme="rose"] .dropdown-menu,
[data-theme="midnight"] .dropdown-menu {
    background: var(--bg-elevated);
    border-color: var(--border-default);
}

/* Kanban columns */
[data-theme="dark"] .kanban-column,
[data-theme="ocean"] .kanban-column,
[data-theme="emerald"] .kanban-column,
[data-theme="rose"] .kanban-column,
[data-theme="midnight"] .kanban-column {
    background: var(--bg-surface);
    border-color: var(--border-default);
}

/* Empty state text */
[data-theme="dark"] .empty-state-text,
[data-theme="ocean"] .empty-state-text,
[data-theme="emerald"] .empty-state-text,
[data-theme="rose"] .empty-state-text,
[data-theme="midnight"] .empty-state-text {
    color: var(--text-tertiary);
}


/* ═══════════════════════════════════════════════════════════
   SMOOTH THEME TRANSITION
   Animate bg/color/border when switching themes
   ═══════════════════════════════════════════════════════════ */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition:
        background-color 400ms ease,
        color 400ms ease,
        border-color 400ms ease,
        box-shadow 400ms ease,
        fill 400ms ease,
        stroke 400ms ease !important;
}


/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION — Respect user preference
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    html.theme-transitioning,
    html.theme-transitioning *,
    html.theme-transitioning *::before,
    html.theme-transitioning *::after {
        transition-duration: 0.01ms !important;
    }
}