/* ══════════════════════════════════════════════════════════════════
   Theme Tokens — Semantische bruglaag (--t- prefix)
   Elk thema definieert dezelfde ~25 tokens. Component-CSS leest
   alleen --t-* tokens zodat thema-wisseling zonder selector-explosie werkt.

   Matrix:  data-theme  ×  data-mode  ×  data-env
            (vorm)         (kleur)        (merk — ongewijzigd)
   ══════════════════════════════════════════════════════════════════ */

/* ══ 1. CLASSIC (default) ════════════════════════════════════════ */
:root,
[data-theme="classic"] {
    /* Achtergronden */
    --t-bg-page:       #f0f2f5;
    --t-bg-card:       #ffffff;
    --t-bg-header:     #f7fafc;
    --t-bg-input:      #f7fafc;
    --t-bg-elevated:   #ffffff;
    --t-bg-hover:      #f7fafc;
    --t-bg-subtle:     #edf2f7;

    /* Borders */
    --t-border:        #e2e8f0;
    --t-border-light:  #e8edf5;
    --t-border-focus:  var(--pr-color);
    --t-border-width:  1px;

    /* Text */
    --t-text-primary:  #2d3748;
    --t-text-secondary:#4a5568;
    --t-text-muted:    #718096;
    --t-text-heading:  #2d3748;

    /* Hover & interactie */
    --t-hover:         #f7fafc;
    --t-hover-strong:  #e2e8f0;

    /* Shadows */
    --t-shadow-sm:     0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --t-shadow-md:     0 2px 8px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
    --t-shadow-lg:     0 8px 24px rgba(0,0,0,0.08), 0 16px 40px rgba(0,0,0,0.04);

    /* Radius & blur */
    --t-card-radius:   var(--radius-md, 12px);
    --t-input-radius:  var(--radius-sm, 8px);
    --t-backdrop-blur:  0px;

    /* Specifieke kleuren */
    --t-skeleton:      #e2e8f0;
    --t-divider:       #edf2f7;
    --t-overlay:       rgba(0,0,0,0.5);
    --t-toast-shadow:  0 8px 30px rgba(0,0,0,0.15);
}

/* ── Classic DARK ── */
[data-theme="classic"][data-mode="dark"],
[data-mode="dark"] [data-theme="classic"],
[data-mode="dark"]:root {
    --t-bg-page:       #0f172a;
    --t-bg-card:       #1e293b;
    --t-bg-header:     #1e293b;
    --t-bg-input:      #334155;
    --t-bg-elevated:   #1e293b;
    --t-bg-hover:      #2d3a4f;
    --t-bg-subtle:     #243044;

    --t-border:        #334155;
    --t-border-light:  #475569;

    --t-text-primary:  #e2e8f0;
    --t-text-secondary:#94a3b8;
    --t-text-muted:    #64748b;
    --t-text-heading:  #e2e8f0;

    --t-hover:         #2d3a4f;
    --t-hover-strong:  #374357;

    --t-shadow-sm:     0 1px 3px rgba(0,0,0,0.2);
    --t-shadow-md:     0 2px 8px rgba(0,0,0,0.25);
    --t-shadow-lg:     0 8px 24px rgba(0,0,0,0.3);

    --t-skeleton:      #334155;
    --t-divider:       #334155;
    --t-overlay:       rgba(0,0,0,0.7);
    --t-toast-shadow:  0 8px 30px rgba(0,0,0,0.4);
}


/* ══ 2. GLASS ════════════════════════════════════════════════════ */
[data-theme="glass"] {
    --t-bg-page:       #eef2f7;
    --t-bg-card:       rgba(255,255,255,0.65);
    --t-bg-header:     rgba(255,255,255,0.45);
    --t-bg-input:      rgba(255,255,255,0.7);
    --t-bg-elevated:   rgba(255,255,255,0.82);
    --t-bg-hover:      rgba(255,255,255,0.5);
    --t-bg-subtle:     rgba(237,242,247,0.6);

    --t-border:        rgba(255,255,255,0.35);
    --t-border-light:  rgba(255,255,255,0.25);
    --t-border-focus:  var(--pr-color);
    --t-border-width:  1px;

    --t-text-primary:  #1a202c;
    --t-text-secondary:#475569;
    --t-text-muted:    #64748b;
    --t-text-heading:  #1a202c;

    --t-hover:         rgba(255,255,255,0.6);
    --t-hover-strong:  rgba(255,255,255,0.75);

    --t-shadow-sm:     0 2px 8px rgba(0,0,0,0.04);
    --t-shadow-md:     0 4px 16px rgba(0,0,0,0.06);
    --t-shadow-lg:     0 8px 32px rgba(0,0,0,0.08);

    --t-card-radius:   16px;
    --t-input-radius:  10px;
    --t-backdrop-blur:  16px;

    --t-skeleton:      rgba(226,232,240,0.5);
    --t-divider:       rgba(255,255,255,0.3);
    --t-overlay:       rgba(0,0,0,0.35);
    --t-toast-shadow:  0 8px 32px rgba(0,0,0,0.12);
}

/* ── Glass DARK ── */
[data-theme="glass"][data-mode="dark"] {
    --t-bg-page:       #0c1322;
    --t-bg-card:       rgba(30,41,59,0.55);
    --t-bg-header:     rgba(30,41,59,0.45);
    --t-bg-input:      rgba(51,65,85,0.6);
    --t-bg-elevated:   rgba(30,41,59,0.75);
    --t-bg-hover:      rgba(45,58,79,0.6);
    --t-bg-subtle:     rgba(36,48,68,0.5);

    --t-border:        rgba(71,85,105,0.35);
    --t-border-light:  rgba(71,85,105,0.2);

    --t-text-primary:  #e2e8f0;
    --t-text-secondary:#94a3b8;
    --t-text-muted:    #64748b;
    --t-text-heading:  #e2e8f0;

    --t-hover:         rgba(45,58,79,0.7);
    --t-hover-strong:  rgba(55,67,87,0.7);

    --t-shadow-sm:     0 2px 8px rgba(0,0,0,0.15);
    --t-shadow-md:     0 4px 16px rgba(0,0,0,0.2);
    --t-shadow-lg:     0 8px 32px rgba(0,0,0,0.3);

    --t-skeleton:      rgba(51,65,85,0.5);
    --t-divider:       rgba(71,85,105,0.3);
    --t-overlay:       rgba(0,0,0,0.6);
    --t-toast-shadow:  0 8px 32px rgba(0,0,0,0.35);
}


/* ══ 3. MINIMAL ══════════════════════════════════════════════════ */
[data-theme="minimal"] {
    --t-bg-page:       #fafafa;
    --t-bg-card:       #ffffff;
    --t-bg-header:     #ffffff;
    --t-bg-input:      #ffffff;
    --t-bg-elevated:   #ffffff;
    --t-bg-hover:      #f5f5f5;
    --t-bg-subtle:     #f5f5f5;

    --t-border:        #e5e5e5;
    --t-border-light:  #f0f0f0;
    --t-border-focus:  var(--pr-color);
    --t-border-width:  1px;

    --t-text-primary:  #171717;
    --t-text-secondary:#525252;
    --t-text-muted:    #737373;
    --t-text-heading:  #0a0a0a;

    --t-hover:         #f5f5f5;
    --t-hover-strong:  #e5e5e5;

    --t-shadow-sm:     none;
    --t-shadow-md:     none;
    --t-shadow-lg:     0 1px 3px rgba(0,0,0,0.04);

    --t-card-radius:   8px;
    --t-input-radius:  6px;
    --t-backdrop-blur:  0px;

    --t-skeleton:      #e5e5e5;
    --t-divider:       #f0f0f0;
    --t-overlay:       rgba(0,0,0,0.4);
    --t-toast-shadow:  0 2px 12px rgba(0,0,0,0.08);
}

/* ── Minimal DARK ── */
[data-theme="minimal"][data-mode="dark"] {
    --t-bg-page:       #0a0a0a;
    --t-bg-card:       #171717;
    --t-bg-header:     #171717;
    --t-bg-input:      #262626;
    --t-bg-elevated:   #171717;
    --t-bg-hover:      #262626;
    --t-bg-subtle:     #1c1c1c;

    --t-border:        #2a2a2a;
    --t-border-light:  #333333;

    --t-text-primary:  #e5e5e5;
    --t-text-secondary:#a3a3a3;
    --t-text-muted:    #737373;
    --t-text-heading:  #fafafa;

    --t-hover:         #262626;
    --t-hover-strong:  #333333;

    --t-shadow-sm:     none;
    --t-shadow-md:     none;
    --t-shadow-lg:     0 1px 3px rgba(0,0,0,0.1);

    --t-skeleton:      #262626;
    --t-divider:       #262626;
    --t-overlay:       rgba(0,0,0,0.7);
    --t-toast-shadow:  0 2px 12px rgba(0,0,0,0.3);
}


/* ══ 4. PRO ══════════════════════════════════════════════════════ */
[data-theme="pro"] {
    --t-bg-page:       #f8fafc;
    --t-bg-card:       #ffffff;
    --t-bg-header:     #f1f5f9;
    --t-bg-input:      #f1f5f9;
    --t-bg-elevated:   #ffffff;
    --t-bg-hover:      #f1f5f9;
    --t-bg-subtle:     #e2e8f0;

    --t-border:        #cbd5e1;
    --t-border-light:  #e2e8f0;
    --t-border-focus:  #6366f1;
    --t-border-width:  1px;

    --t-text-primary:  #0f172a;
    --t-text-secondary:#475569;
    --t-text-muted:    #64748b;
    --t-text-heading:  #0f172a;

    --t-hover:         #f1f5f9;
    --t-hover-strong:  #e2e8f0;

    --t-shadow-sm:     0 1px 2px rgba(0,0,0,0.04);
    --t-shadow-md:     0 1px 4px rgba(0,0,0,0.06);
    --t-shadow-lg:     0 4px 12px rgba(0,0,0,0.08);

    --t-card-radius:   8px;
    --t-input-radius:  6px;
    --t-backdrop-blur:  0px;

    --t-skeleton:      #e2e8f0;
    --t-divider:       #e2e8f0;
    --t-overlay:       rgba(0,0,0,0.5);
    --t-toast-shadow:  0 4px 16px rgba(0,0,0,0.12);
}

/* ── Pro DARK (standaard look voor Pro) ── */
[data-theme="pro"][data-mode="dark"] {
    --t-bg-page:       #0b0f19;
    --t-bg-card:       #141926;
    --t-bg-header:     #181d2e;
    --t-bg-input:      #1e2538;
    --t-bg-elevated:   #181d2e;
    --t-bg-hover:      #1e2538;
    --t-bg-subtle:     #1a2035;

    --t-border:        #252d40;
    --t-border-light:  #2e374d;

    --t-text-primary:  #e2e8f0;
    --t-text-secondary:#94a3b8;
    --t-text-muted:    #64748b;
    --t-text-heading:  #f1f5f9;

    --t-hover:         #1e2538;
    --t-hover-strong:  #283148;

    --t-shadow-sm:     0 1px 2px rgba(0,0,0,0.2);
    --t-shadow-md:     0 2px 6px rgba(0,0,0,0.25);
    --t-shadow-lg:     0 4px 16px rgba(0,0,0,0.3);

    --t-skeleton:      #252d40;
    --t-divider:       #252d40;
    --t-overlay:       rgba(0,0,0,0.7);
    --t-toast-shadow:  0 4px 16px rgba(0,0,0,0.4);
}


/* ══ 5. BRUTALISM ════════════════════════════════════════════════ */
[data-theme="brutalism"] {
    --t-bg-page:       #f5f0e8;
    --t-bg-card:       #fffdf8;
    --t-bg-header:     #f5f0e8;
    --t-bg-input:      #fffdf8;
    --t-bg-elevated:   #fffdf8;
    --t-bg-hover:      #f0ead8;
    --t-bg-subtle:     #ebe5d3;

    --t-border:        #1a1a1a;
    --t-border-light:  #1a1a1a;
    --t-border-focus:  #1a1a1a;
    --t-border-width:  3px;

    --t-text-primary:  #1a1a1a;
    --t-text-secondary:#333333;
    --t-text-muted:    #666666;
    --t-text-heading:  #1a1a1a;

    --t-hover:         #f0ead8;
    --t-hover-strong:  #e5ddc6;

    --t-shadow-sm:     4px 4px 0 #1a1a1a;
    --t-shadow-md:     6px 6px 0 #1a1a1a;
    --t-shadow-lg:     8px 8px 0 #1a1a1a;

    --t-card-radius:   0px;
    --t-input-radius:  0px;
    --t-backdrop-blur:  0px;

    --t-skeleton:      #e5ddc6;
    --t-divider:       #1a1a1a;
    --t-overlay:       rgba(0,0,0,0.6);
    --t-toast-shadow:  6px 6px 0 #1a1a1a;
}

/* ── Brutalism DARK ── */
[data-theme="brutalism"][data-mode="dark"] {
    --t-bg-page:       #1a1a1a;
    --t-bg-card:       #2a2a2a;
    --t-bg-header:     #2a2a2a;
    --t-bg-input:      #333333;
    --t-bg-elevated:   #2a2a2a;
    --t-bg-hover:      #3a3a3a;
    --t-bg-subtle:     #333333;

    --t-border:        #e5e5e5;
    --t-border-light:  #e5e5e5;

    --t-text-primary:  #f5f5f5;
    --t-text-secondary:#d4d4d4;
    --t-text-muted:    #a3a3a3;
    --t-text-heading:  #ffffff;

    --t-hover:         #3a3a3a;
    --t-hover-strong:  #4a4a4a;

    --t-shadow-sm:     4px 4px 0 #e5e5e5;
    --t-shadow-md:     6px 6px 0 #e5e5e5;
    --t-shadow-lg:     8px 8px 0 #e5e5e5;

    --t-skeleton:      #3a3a3a;
    --t-divider:       #e5e5e5;
    --t-overlay:       rgba(0,0,0,0.75);
    --t-toast-shadow:  6px 6px 0 #e5e5e5;
}


/* ══ 6. COMPACT ═════════════════════════════════════════════════ */
/* Visueel identiek aan Classic — verschil is puur layout */
[data-theme="compact"] {
    --t-bg-page:       #f0f2f5;
    --t-bg-card:       #ffffff;
    --t-bg-header:     #f7fafc;
    --t-bg-input:      #f7fafc;
    --t-bg-elevated:   #ffffff;
    --t-bg-hover:      #f7fafc;
    --t-bg-subtle:     #edf2f7;

    --t-border:        #e2e8f0;
    --t-border-light:  #e8edf5;
    --t-border-focus:  var(--pr-color);
    --t-border-width:  1px;

    --t-text-primary:  #2d3748;
    --t-text-secondary:#4a5568;
    --t-text-muted:    #718096;
    --t-text-heading:  #2d3748;

    --t-hover:         #f7fafc;
    --t-hover-strong:  #e2e8f0;

    --t-shadow-sm:     0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --t-shadow-md:     0 2px 8px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
    --t-shadow-lg:     0 8px 24px rgba(0,0,0,0.08), 0 16px 40px rgba(0,0,0,0.04);

    --t-card-radius:   var(--radius-md, 12px);
    --t-input-radius:  var(--radius-sm, 8px);
    --t-backdrop-blur:  0px;

    --t-skeleton:      #e2e8f0;
    --t-divider:       #edf2f7;
    --t-overlay:       rgba(0,0,0,0.5);
    --t-toast-shadow:  0 8px 30px rgba(0,0,0,0.15);
}

/* ── Compact DARK ── */
[data-theme="compact"][data-mode="dark"] {
    --t-bg-page:       #0f172a;
    --t-bg-card:       #1e293b;
    --t-bg-header:     #1e293b;
    --t-bg-input:      #334155;
    --t-bg-elevated:   #1e293b;
    --t-bg-hover:      #2d3a4f;
    --t-bg-subtle:     #243044;

    --t-border:        #334155;
    --t-border-light:  #475569;

    --t-text-primary:  #e2e8f0;
    --t-text-secondary:#94a3b8;
    --t-text-muted:    #64748b;
    --t-text-heading:  #e2e8f0;

    --t-hover:         #2d3a4f;
    --t-hover-strong:  #374357;

    --t-shadow-sm:     0 1px 3px rgba(0,0,0,0.2);
    --t-shadow-md:     0 2px 8px rgba(0,0,0,0.25);
    --t-shadow-lg:     0 8px 24px rgba(0,0,0,0.3);

    --t-skeleton:      #334155;
    --t-divider:       #334155;
    --t-overlay:       rgba(0,0,0,0.7);
    --t-toast-shadow:  0 8px 30px rgba(0,0,0,0.4);
}

/* ── Compact: Layout overrides ── */
[data-theme="compact"] .header {
    padding: 14px var(--page-gutter, 32px);
    align-items: center;
}
[data-theme="compact"] .header-logo {
    height: 34px;
}
[data-theme="compact"] .header-left h1,
[data-theme="compact"] .header-left p {
    display: none;
}
[data-theme="compact"] .page-title-bar {
    display: flex;
}
[data-theme="compact"] .nav-primary {
    background: rgba(255,255,255,0.04);
}


/* ══════════════════════════════════════════════════════════════════
   THEMA-SPECIFIEKE POLISH — Component overrides per thema
   ══════════════════════════════════════════════════════════════════ */

/* ── Glass: Frosted effect op cards en toolbar ── */
[data-theme="glass"] .stat-card,
[data-theme="glass"] .project-card,
[data-theme="glass"] .transport-card,
[data-theme="glass"] .dash-card,
[data-theme="glass"] .skeleton-card,
[data-theme="glass"] .settings-section {
    backdrop-filter: blur(var(--t-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--t-backdrop-blur));
}

[data-theme="glass"] .toolbar {
    backdrop-filter: blur(var(--t-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--t-backdrop-blur));
}

[data-theme="glass"] .controls--glass {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

[data-theme="glass"] body {
    background: linear-gradient(135deg, #c9d6ff 0%, #e2e2e2 50%, #dce8f7 100%);
    background-attachment: fixed;
}

[data-theme="glass"][data-mode="dark"] body {
    background: linear-gradient(135deg, #0c1322 0%, #1a1f35 50%, #0f1929 100%);
    background-attachment: fixed;
}

/* ── Minimal: Extra witruimte en subtielere styling ── */
[data-theme="minimal"] .stat-card,
[data-theme="minimal"] .project-card,
[data-theme="minimal"] .transport-card,
[data-theme="minimal"] .dash-card {
    border: 1px solid var(--t-border);
}

[data-theme="minimal"] h1,
[data-theme="minimal"] h2,
[data-theme="minimal"] h3,
[data-theme="minimal"] .theme-name,
[data-theme="minimal"] .settings-section-header {
    letter-spacing: 0.01em;
}

[data-theme="minimal"] .btn {
    font-weight: 500;
}

/* ── Pro: Compact en strak ── */
[data-theme="pro"] .stat-card,
[data-theme="pro"] .project-card,
[data-theme="pro"] .transport-card {
    border: 1px solid var(--t-border);
}

[data-theme="pro"] .btn-primary {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
}

[data-theme="pro"] .btn-primary:hover {
    box-shadow: 0 4px 12px rgba(99,102,241,0.35);
}

[data-theme="pro"] .btn-toolbar.active {
    background: #6366f1;
    border-color: #6366f1;
}

[data-theme="pro"] .date-shortcuts button:hover,
[data-theme="pro"] .date-shortcuts button.active {
    background: #6366f1;
    border-color: #6366f1;
}

[data-theme="pro"] .filter-badge {
    background: #6366f1;
}

/* ── Brutalism: Offset schaduwen en accentkleuren ── */
[data-theme="brutalism"] .btn {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 800;
}

[data-theme="brutalism"] .project-card:hover,
[data-theme="brutalism"] .transport-card:hover,
[data-theme="brutalism"] .stat-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 #1a1a1a;
}

[data-theme="brutalism"][data-mode="dark"] .project-card:hover,
[data-theme="brutalism"][data-mode="dark"] .transport-card:hover,
[data-theme="brutalism"][data-mode="dark"] .stat-card:hover {
    box-shadow: 8px 8px 0 #e5e5e5;
}

[data-theme="brutalism"] .btn-primary {
    box-shadow: 4px 4px 0 #1a1a1a;
    border: 2px solid #1a1a1a;
}

[data-theme="brutalism"] .btn-primary:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 #1a1a1a;
}

[data-theme="brutalism"] .theme-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 #1a1a1a;
}

/* Brutalism: accent kleuren op nth-child cards */
[data-theme="brutalism"] .stat-card:nth-child(4n+1) { border-left: 5px solid #ff6b35; }
[data-theme="brutalism"] .stat-card:nth-child(4n+2) { border-left: 5px solid #ffd23f; }
[data-theme="brutalism"] .stat-card:nth-child(4n+3) { border-left: 5px solid #06d6a0; }
[data-theme="brutalism"] .stat-card:nth-child(4n+4) { border-left: 5px solid #118ab2; }


/* ══ PRINT — altijd wit ═════════════════════════════════════════ */
@media print {
    :root {
        --t-bg-page:      white !important;
        --t-bg-card:      white !important;
        --t-bg-header:    white !important;
        --t-bg-elevated:  white !important;
        --t-text-primary: black !important;
        --t-text-heading: black !important;
        --t-border:       #ccc !important;
        --t-shadow-sm:    none !important;
        --t-shadow-md:    none !important;
        --t-shadow-lg:    none !important;
    }
}