/* ═══════════════════════════════════════════════════════
   Beter Theme — modern running cockpit
   Alle regels gescoped onder [data-theme="beter"]
   ═══════════════════════════════════════════════════════ */

/* ── Light mode tokens ────────────────────────────────── */
[data-theme="beter"] {
    color-scheme: light;

    --page-bg:  #eaf4f1;
    --page-bg-2: #d9ecff;

    --surface:        rgba(255,255,255,0.82);
    --surface-strong: #ffffff;
    --surface-muted:  rgba(255,255,255,0.58);

    --text-primary:   #17201f;
    --text-secondary: #5f6f6c;
    --text-inverse:   #f7fbff;

    --accent:      #006dff;
    --accent-2:    #00a676;
    --accent-warm: #ffb000;
    --rain:        #2678ff;
    --temp:        #ff5c35;
    --humidity:    #00a676;
    --dewpoint:    #8b5cf6;

    --success-color: #168a4a;
    --warning-color: #d89200;
    --danger-color:  #d83b2d;

    --border-soft:   rgba(23,32,31,0.10);
    --border-strong: rgba(23,32,31,0.18);

    --shadow-soft:    0 14px 40px rgba(24,47,66,0.12);
    --shadow-card:    0 1px 0 rgba(255,255,255,0.75) inset, 0 18px 50px rgba(24,47,66,0.14);
    --shadow-pressed: 0 8px 20px rgba(24,47,66,0.12);

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;

    --space-1: 6px;
    --space-2: 10px;
    --space-3: 14px;
    --space-4: 18px;
    --space-5: 24px;
    --space-6: 32px;

    /* Chart */
    --chart-bg:             transparent;
    --chart-grid:           rgba(23,32,31,0.07);
    --chart-tick:           #5f6f6c;
    --chart-tooltip-bg:     rgba(255,255,255,0.97);
    --chart-tooltip-text:   #17201f;
    --chart-tooltip-border: rgba(23,32,31,0.1);
}

/* ── Dark mode tokens ─────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    [data-theme="beter"] {
        color-scheme: dark;

        --page-bg:  #071516;
        --page-bg-2: #10223a;

        --surface:        rgba(16,27,31,0.82);
        --surface-strong: #111d21;
        --surface-muted:  rgba(255,255,255,0.07);

        --text-primary:   #eff8f5;
        --text-secondary: #a9bbb6;
        --text-inverse:   #071516;

        --accent:      #63a6ff;
        --accent-2:    #33d39c;
        --accent-warm: #ffd166;
        --rain:        #74aaff;
        --temp:        #ff8a66;
        --humidity:    #33d39c;
        --dewpoint:    #c4b5fd;

        --success-color: #5fe09a;
        --warning-color: #ffd166;
        --danger-color:  #ff7b6d;

        --border-soft:   rgba(255,255,255,0.10);
        --border-strong: rgba(255,255,255,0.18);

        --shadow-soft:    0 18px 60px rgba(0,0,0,0.28);
        --shadow-card:    0 1px 0 rgba(255,255,255,0.08) inset, 0 22px 70px rgba(0,0,0,0.34);
        --shadow-pressed: 0 10px 24px rgba(0,0,0,0.26);

        /* Chart */
        --chart-bg:             transparent;
        --chart-grid:           rgba(255,255,255,0.09);
        --chart-tick:           #a9bbb6;
        --chart-tooltip-bg:     rgba(16,27,31,0.97);
        --chart-tooltip-text:   #eff8f5;
        --chart-tooltip-border: rgba(255,255,255,0.1);
    }
}

/* ── Body & page ──────────────────────────────────────── */
[data-theme="beter"] body {
    background:
        radial-gradient(circle at 18% -10%,
            color-mix(in srgb, var(--accent-warm) 28%, transparent),
            transparent 34rem),
        radial-gradient(circle at 105% 12%,
            color-mix(in srgb, var(--accent) 24%, transparent),
            transparent 30rem),
        linear-gradient(145deg, var(--page-bg), var(--page-bg-2));
    color: var(--text-primary);
}

/* ── App container ────────────────────────────────────── */
[data-theme="beter"] #app {
    max-width: 520px;
}

@media (min-width: 900px) {
    [data-theme="beter"] #app {
        max-width: 1080px;
    }
}

/* ── Focus visible ────────────────────────────────────── */
[data-theme="beter"] :focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
    outline-offset: 3px;
}

/* ── Reduced motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    [data-theme="beter"] *,
    [data-theme="beter"] *::before,
    [data-theme="beter"] *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Header ───────────────────────────────────────────── */
[data-theme="beter"] header {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: var(--radius-lg);
}

[data-theme="beter"] .header-main h1 {
    font-weight: 700;
    letter-spacing: 0;
    color: var(--text-primary);
}

[data-theme="beter"] .logo {
    border-radius: 12px;
    box-shadow: 0 0 0 2px var(--border-soft);
}

/* ── Search toggle ────────────────────────────────────── */
[data-theme="beter"] .search-toggle {
    background: var(--surface-muted);
    color: var(--text-secondary);
    border: 1px solid var(--border-soft);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    min-width: 40px;
    min-height: 40px;
}
[data-theme="beter"] .search-toggle:hover {
    background: var(--surface-strong);
    color: var(--text-primary);
    border-color: var(--border-strong);
}
[data-theme="beter"] .search-toggle.active {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ── Search container ─────────────────────────────────── */
[data-theme="beter"] .search-container {
    background: var(--surface-muted);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    transition: border-color 0.15s, box-shadow 0.15s, max-height 0.3s ease, opacity 0.25s ease;
}
[data-theme="beter"] .search-container:focus-within {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
[data-theme="beter"] #city-search {
    color: var(--text-primary);
}
[data-theme="beter"] #city-search::placeholder {
    color: var(--text-secondary);
}

/* ── Search suggestions ───────────────────────────────── */
[data-theme="beter"] .search-suggestions {
    background: var(--surface-strong);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
[data-theme="beter"] .search-suggestion-item {
    border-bottom: 1px solid var(--border-soft);
    transition: background 0.1s;
}
[data-theme="beter"] .search-suggestion-item:hover,
[data-theme="beter"] .search-suggestion-item.active {
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}
[data-theme="beter"] .suggestion-name   { color: var(--text-primary); }
[data-theme="beter"] .suggestion-detail { color: var(--text-secondary); }

/* ── Cards ────────────────────────────────────────────── */
[data-theme="beter"] .card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
}
[data-theme="beter"] .card h3 {
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ── Alerts ───────────────────────────────────────────── */
[data-theme="beter"] .alert-expires { color: var(--text-secondary); }
[data-theme="beter"] .alert-desc    { color: var(--text-secondary); }
[data-theme="beter"] .alert-divider { border-color: var(--border-soft); }

/* ── Weather hero ─────────────────────────────────────── */
[data-theme="beter"] #weather-hero {
    container-type: inline-size;
}

[data-theme="beter"] #current-temp {
    font-size: clamp(2.4rem, 14cqi, 4.4rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.03em;
    color: var(--text-primary);
}

[data-theme="beter"] .hero-temp-sep {
    font-size: clamp(1.4rem, 8cqi, 2.4rem);
    font-weight: 300;
    color: var(--text-secondary);
}

[data-theme="beter"] .hero-feels-temp {
    font-size: clamp(1.4rem, 8cqi, 2.4rem);
    font-weight: 600;
    color: var(--text-secondary);
}

[data-theme="beter"] .location-info h2    { color: var(--text-primary); }
[data-theme="beter"] #current-time        { color: var(--text-secondary); }
[data-theme="beter"] #weather-description { color: var(--text-secondary); }
[data-theme="beter"] #weather-icon-container { color: var(--accent-warm); }

/* ── Metrics grid ─────────────────────────────────────── */
[data-theme="beter"] .weather-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: var(--space-2);
    flex-wrap: unset;
}

[data-theme="beter"] .metric-item {
    background: var(--surface-muted);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    flex: unset;
}

[data-theme="beter"] .metric-item .label { color: var(--text-secondary); }
[data-theme="beter"] .metric-item .value { color: var(--text-primary); }

[data-theme="beter"] .wind-arrow { color: var(--accent); }

@container (max-width: 380px) {
    [data-theme="beter"] .weather-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Comfort badge ────────────────────────────────────── */
[data-theme="beter"] .comfort-badge {
    background: var(--surface-muted);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    box-shadow: none;
}
[data-theme="beter"] .comfort-badge.very-comfortable {
    color: var(--success-color);
    background: color-mix(in srgb, var(--success-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--success-color) 25%, transparent);
}
[data-theme="beter"] .comfort-badge.comfortable {
    color: var(--success-color);
    background: color-mix(in srgb, var(--success-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--success-color) 25%, transparent);
}
[data-theme="beter"] .comfort-badge.humid {
    color: var(--warning-color);
    background: color-mix(in srgb, var(--warning-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--warning-color) 25%, transparent);
}
[data-theme="beter"] .comfort-badge.uncomfortable {
    color: #f57c00;
    background: color-mix(in srgb, #f57c00 10%, transparent);
    border-color: color-mix(in srgb, #f57c00 25%, transparent);
}
[data-theme="beter"] .comfort-badge.oppressive {
    color: var(--danger-color);
    background: color-mix(in srgb, var(--danger-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--danger-color) 25%, transparent);
}

/* ── Running recommendation badges ───────────────────── */
[data-theme="beter"] .badge {
    border-radius: var(--radius-md);
    box-shadow: none;
    border: 1px solid currentColor;
    background: color-mix(in srgb, currentColor 12%, transparent);
}

/* ── Clothing list ────────────────────────────────────── */
[data-theme="beter"] .tip-content  { color: var(--text-primary); }
[data-theme="beter"] .clothing-list {
    gap: 8px;
}
[data-theme="beter"] .clothing-list li {
    background: var(--surface-muted);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    align-items: center;
}
[data-theme="beter"] .clothing-list li::before {
    color: var(--accent-2);
}

/* ── Warnings ─────────────────────────────────────────── */
[data-theme="beter"] .warnings {
    background: var(--surface-muted);
    border: 1px solid var(--border-soft);
    color: var(--text-primary);
    border-radius: var(--radius-md);
}

/* ── UV section ───────────────────────────────────────── */
[data-theme="beter"] .uv-stat-value     { color: var(--text-primary); }
[data-theme="beter"] .uv-stat-secondary { color: var(--text-secondary); }
[data-theme="beter"] .uv-stat-label     { color: var(--text-secondary); }
[data-theme="beter"] .uv-tip            { color: var(--text-secondary); }

[data-theme="beter"] .uv-badge {
    border-radius: var(--radius-md);
    border: 1px solid currentColor;
    background: color-mix(in srgb, currentColor 12%, transparent);
}
[data-theme="beter"] .uv-badge.uv-none      { color: var(--text-secondary); }
[data-theme="beter"] .uv-badge.uv-low       { color: #168a4a; }
[data-theme="beter"] .uv-badge.uv-moderate  { color: #c47b00; }
[data-theme="beter"] .uv-badge.uv-high      { color: #c05a00; }
[data-theme="beter"] .uv-badge.uv-very-high { color: var(--danger-color); }
[data-theme="beter"] .uv-badge.uv-extreme   { color: #7b1fa2; }

@media (prefers-color-scheme: dark) {
    [data-theme="beter"] .uv-badge.uv-low      { color: #5fe09a; }
    [data-theme="beter"] .uv-badge.uv-moderate { color: #ffd166; }
    [data-theme="beter"] .uv-badge.uv-high     { color: #ffad60; }
}

/* ── Chart containers ─────────────────────────────────── */
[data-theme="beter"] .chart-container,
[data-theme="beter"] .uv-chart-container {
    background: var(--surface-muted);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: 8px;
    overflow: hidden;
}

/* ── Chart legend dots ────────────────────────────────── */
[data-theme="beter"] .dot.temp     { background-color: var(--temp); }
[data-theme="beter"] .dot.rain     { background-color: var(--rain); border-radius: 2px; }
[data-theme="beter"] .dot.humidity { background-color: var(--humidity); }
[data-theme="beter"] .dot.dewpoint { background-color: var(--dewpoint); }

/* ── AQI panel & overlay ──────────────────────────────── */
[data-theme="beter"] .aqi-dot:hover {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--aqi-color, var(--accent)) 25%, transparent);
}
[data-theme="beter"] .aqi-panel {
    background: var(--surface-muted);
    border: 1px solid var(--border-soft);
}
[data-theme="beter"] .aqi-overlay-panel {
    background: var(--surface-strong);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-soft);
}
[data-theme="beter"] .aqi-overlay-close {
    background: var(--surface-muted);
    border: 1px solid var(--border-soft);
    color: var(--text-secondary);
}
[data-theme="beter"] .aqi-overlay-close:hover {
    background: var(--surface-strong);
    color: var(--text-primary);
}
[data-theme="beter"] .aqi-overlay-title { color: var(--text-primary); }
[data-theme="beter"] .aqi-overlay-level {
    border: 1px solid currentColor;
    background: color-mix(in srgb, currentColor 12%, transparent);
}
[data-theme="beter"] .aqi-overlay-level.aqi-good      { color: #168a4a; }
[data-theme="beter"] .aqi-overlay-level.aqi-fair      { color: #92b000; }
[data-theme="beter"] .aqi-overlay-level.aqi-moderate  { color: #d89200; }
[data-theme="beter"] .aqi-overlay-level.aqi-poor      { color: #e05a00; }
[data-theme="beter"] .aqi-overlay-level.aqi-very-poor { color: #c8221c; }
[data-theme="beter"] .aqi-overlay-level.aqi-extreme   { color: #7b1fa2; }

/* ── Weather report ───────────────────────────────────── */
[data-theme="beter"] .weather-report-summary { color: var(--text-primary); }
[data-theme="beter"] .weather-report-time    { color: var(--text-secondary); }
[data-theme="beter"] .weather-report-toggle  { color: var(--accent); }
[data-theme="beter"] .weather-report-body    { color: var(--text-primary); }
[data-theme="beter"] .weather-report-outlook-header { color: var(--text-secondary); }
[data-theme="beter"] .weather-report-outlook-item   { color: var(--text-primary); }

/* ── Buienradar ───────────────────────────────────────── */
[data-theme="beter"] #buienradar-section .buienradar-container {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    overflow: hidden;
}
[data-theme="beter"] .buienradar-credit   { color: var(--text-secondary); }
[data-theme="beter"] .buienradar-credit a { color: var(--accent); }

/* ── Footer ───────────────────────────────────────────── */
[data-theme="beter"] footer {
    color: var(--text-secondary);
}
[data-theme="beter"] .footer-links a {
    color: var(--text-secondary);
}
[data-theme="beter"] .footer-links a:hover { color: var(--text-primary); }
[data-theme="beter"] .footer-dot  { color: var(--border-strong); }
[data-theme="beter"] .footer-made { color: var(--text-secondary); }
[data-theme="beter"] .footer-made a {
    color: var(--text-secondary);
}
[data-theme="beter"] .footer-made a:hover { color: var(--text-primary); }

/* ── Lang select ──────────────────────────────────────── */
[data-theme="beter"] .lang-select {
    background-color: var(--surface-muted);
    border: 1px solid var(--border-soft);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(95,111,108,0.7)'/%3E%3C/svg%3E");
    transition: background-color 0.15s, border-color 0.15s;
}
[data-theme="beter"] .lang-select:hover {
    background-color: var(--surface-strong);
    border-color: var(--border-strong);
}
[data-theme="beter"] .lang-select option {
    background: var(--surface-strong);
    color: var(--text-primary);
}

/* ── Desktop layout (grid, niet columns) ─────────────── */
@media (min-width: 900px) {
    [data-theme="beter"] main {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 20px;
        align-items: start;
        columns: unset;
        column-gap: unset;
    }

    [data-theme="beter"] main > * {
        break-inside: unset;
        margin-bottom: 0;
    }

    [data-theme="beter"] #alerts-section,
    [data-theme="beter"] #metric-expand-area {
        grid-column: 1 / -1;
        column-span: none;
    }

    [data-theme="beter"] .weather-hero-container {
        grid-column: 1 / -1;
        margin-bottom: 0;
    }

    /* Cards vullen hun grid-cel, geen max-width beperking meer */
    [data-theme="beter"] .card,
    [data-theme="beter"] #weather-hero {
        max-width: none;
        margin-bottom: 0;
        margin-left: 0;
        margin-right: 0;
    }

    [data-theme="beter"] .weather-hero-container {
        display: block;
    }

    [data-theme="beter"] #weather-hero {
        max-width: none;
        margin: 0;
    }
}