/* ══════════════════════════════════════════════════════════════════════════
   DSE Machine Monitor — Theme System
   Include dit bestand op elke pagina voor consistente dark/light theming.
   Toggle: html.light class toevoegen/verwijderen
   ══════════════════════════════════════════════════════════════════════════ */

/* ── DARK (default) ─────────────────────────────────────────────────────── */
:root {
    --bg-body:          #0c1220;
    --bg-header:        rgba(12, 18, 32, 0.8);
    --bg-panel:         linear-gradient(135deg, #1a2332 0%, #162030 100%);
    --bg-panel-solid:   #1a2332;
    --bg-input:         #0c1220;
    --bg-tile:          #0f172a;
    --bg-filter:        #131c2a;
    --bg-card:          linear-gradient(135deg, #1a2332 0%, #162030 100%);

    --border:           #1e2d40;
    --border-hover:     #2a4060;
    --border-tile:      #1a2535;

    --text-primary:     #e2e8f0;
    --text-secondary:   #94a3b8;
    --text-muted:       #64748b;
    --text-faint:       #475569;
    --text-heading:     #ffffff;

    --shadow-card:      0 4px 16px rgba(0,0,0,0.2);
    --shadow-hover:     0 8px 32px rgba(0,0,0,0.3);
    --shadow-popup:     0 8px 32px rgba(0,0,0,0.5);

    --logo-filter:      brightness(0) invert(1);
    --logo-opacity:     0.85;
}

/* ── LIGHT ──────────────────────────────────────────────────────────────── */
html.light {
    --bg-body:          #f4f2ef;
    --bg-header:        rgba(255, 255, 255, 0.88);
    --bg-panel:         #ffffff;
    --bg-panel-solid:   #ffffff;
    --bg-input:         #f8f7f5;
    --bg-tile:          #f0eeeb;
    --bg-filter:        #ffffff;
    --bg-card:          #ffffff;

    --border:           #d6d0c8;
    --border-hover:     #b8b0a6;
    --border-tile:      #e0dbd4;

    --text-primary:     #1c1917;
    --text-secondary:   #44403c;
    --text-muted:       #78716c;
    --text-faint:       #a8a29e;
    --text-heading:     #0c0a09;

    --shadow-card:      0 1px 3px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
    --shadow-hover:     0 4px 16px rgba(0,0,0,0.10);
    --shadow-popup:     0 8px 32px rgba(0,0,0,0.12);

    --logo-filter:      none;
    --logo-opacity:     1;
}

/* ── LIGHT BLUE (clean professional) ────────────────────────────────────── */
html.light-blue {
    --bg-body:          #f0f4f8;
    --bg-header:        rgba(255, 255, 255, 0.92);
    --bg-panel:         #ffffff;
    --bg-panel-solid:   #ffffff;
    --bg-input:         #f7f9fc;
    --bg-tile:          #edf2f7;
    --bg-filter:        #ffffff;
    --bg-card:          #ffffff;

    --border:           #cbd5e1;
    --border-hover:     #94a3b8;
    --border-tile:      #e2e8f0;

    --text-primary:     #1e293b;
    --text-secondary:   #475569;
    --text-muted:       #64748b;
    --text-faint:       #94a3b8;
    --text-heading:     #0f172a;

    --shadow-card:      0 1px 3px rgba(0,0,0,0.05), 0 2px 8px rgba(59,130,246,0.04);
    --shadow-hover:     0 4px 16px rgba(59,130,246,0.08);
    --shadow-popup:     0 8px 32px rgba(0,0,0,0.12);

    --logo-filter:      none;
    --logo-opacity:     1;
}

/* ── DSE (light industrial — clean SCADA / HMI control panel) ──────────── */
/* Light backgrounds, industrial blue accent, sharp corners, thick left    */
/* borders. Designed for field technicians & fleet managers.               */
html.dse {
    /* Backgrounds — clean light grays, professional */
    --bg-body:          #f5f5f5;
    --bg-header:        rgba(255, 255, 255, 0.95);
    --bg-panel:         #ffffff;
    --bg-panel-solid:   #ffffff;
    --bg-input:         #ffffff;
    --bg-tile:          #fafafa;
    --bg-filter:        #ffffff;
    --bg-card:          #ffffff;

    /* Borders — crisp, structured */
    --border:           #e5e5e5;
    --border-hover:     #d4d4d4;
    --border-tile:      #e5e5e5;

    /* Text — high contrast on light */
    --text-primary:     #171717;
    --text-secondary:   #525252;
    --text-muted:       #737373;
    --text-faint:       #a3a3a3;
    --text-heading:     #0a0a0a;

    /* Shadows — very subtle, professional */
    --shadow-card:      0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-hover:     0 4px 12px rgba(0,0,0,0.08);
    --shadow-popup:     0 8px 24px rgba(0,0,0,0.12);

    --logo-filter:      none;
    --logo-opacity:     1;
}

/* ── DSE component overrides ───────────────────────────────────────────── */
/* Sharp 4px corners, industrial blue accent, thick left-border cards,     */
/* bold status colors — feels like professional control room software.     */

html.dse .panel,
html.dse .machine-card,
html.dse .stat-card,
html.dse .sensor-tile,
html.dse .hero-metric,
html.dse .modal-box { border-radius: 4px; }

/* Machine card — thick left border for status, no top accent bar */
html.dse .machine-card::before { display: none; }
html.dse .machine-card {
    border-color: #e5e5e5;
    border-left: 4px solid #d4d4d4;
    background: #ffffff;
}
html.dse .machine-card:hover {
    border-color: #d4d4d4;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Status: running — solid green left border, subtle green tint */
html.dse .machine-card.status-running {
    border-color: #e5e5e5;
    border-left: 4px solid #16a34a;
    background: linear-gradient(90deg, rgba(22,163,74,0.04) 0%, #ffffff 15%);
    box-shadow: var(--shadow-card);
}
html.dse .machine-card.status-running:hover {
    border-color: #d4d4d4;
    border-left-color: #16a34a;
    box-shadow: 0 4px 12px rgba(22,163,74,0.12);
}

/* Status: standby — industrial blue left border */
html.dse .machine-card.status-standby {
    border-color: #e5e5e5;
    border-left: 4px solid #2563eb;
    box-shadow: var(--shadow-card);
}
html.dse .machine-card.status-standby:hover {
    border-color: #d4d4d4;
    border-left-color: #2563eb;
    box-shadow: 0 4px 12px rgba(37,99,235,0.10);
}

/* Status: alarm — red left border, light red background wash */
html.dse .machine-card.status-alarm {
    border-color: rgba(220,38,38,0.2);
    border-left: 4px solid #dc2626;
    background: linear-gradient(90deg, rgba(220,38,38,0.06) 0%, rgba(254,242,242,0.5) 20%, #ffffff 40%);
    box-shadow: 0 1px 4px rgba(220,38,38,0.10);
}
html.dse .machine-card.status-alarm:hover {
    border-color: rgba(220,38,38,0.3);
    border-left-color: #dc2626;
    box-shadow: 0 4px 16px rgba(220,38,38,0.15);
}

/* Status: warning — amber left border */
html.dse .machine-card.status-warning {
    border-color: rgba(217,119,6,0.2);
    border-left: 4px solid #d97706;
    background: linear-gradient(90deg, rgba(217,119,6,0.04) 0%, #ffffff 15%);
    box-shadow: var(--shadow-card);
}
html.dse .machine-card.status-warning:hover {
    border-color: rgba(217,119,6,0.3);
    border-left-color: #d97706;
    box-shadow: 0 4px 12px rgba(217,119,6,0.12);
}

/* Status: offline — gray left border, slightly faded */
html.dse .machine-card.status-offline {
    border-color: #e5e5e5;
    border-left: 4px solid #9ca3af;
    opacity: 0.75;
    box-shadow: none;
}
html.dse .machine-card.status-offline:hover {
    opacity: 1;
    border-color: #d4d4d4;
    border-left-color: #9ca3af;
    box-shadow: var(--shadow-card);
}

/* Primary button — industrial blue */
html.dse .btn-primary { background: #1d4ed8; }
html.dse .btn-primary:hover:not(:disabled) { background: #1e40af; }

/* LED indicators — keep original colors, add ring for light-bg visibility */
html.dse .led-online  { box-shadow: 0 0 0 2px rgba(16,185,129,0.2), 0 0 6px 1px rgba(16,185,129,0.3); }
html.dse .led-active  { box-shadow: 0 0 0 2px rgba(16,185,129,0.2), 0 0 6px 1px rgba(16,185,129,0.3); }
html.dse .led-offline { background: #9ca3af; color: #9ca3af; box-shadow: 0 0 0 2px rgba(156,163,175,0.2); }
html.dse .led-inactive { background: #9ca3af; color: #9ca3af; box-shadow: 0 0 0 2px rgba(156,163,175,0.2); }
html.dse .led-alarm   { box-shadow: 0 0 0 2px rgba(239,68,68,0.2), 0 0 6px 1px rgba(239,68,68,0.3); }
html.dse .led-running { box-shadow: 0 0 0 2px rgba(245,158,11,0.2), 0 0 6px 1px rgba(245,158,11,0.3); }
html.dse .led-warn    { box-shadow: 0 0 0 2px rgba(245,158,11,0.2), 0 0 6px 1px rgba(245,158,11,0.3); }
html.dse .led-danger  { box-shadow: 0 0 0 2px rgba(239,68,68,0.2), 0 0 6px 1px rgba(239,68,68,0.3); }

/* Fuel / progress bar — flat, sharp, industrial */
html.dse .fuel-fill, html.dse .fuel-track,
html.dse .fuel-gauge-fill, html.dse .fuel-gauge-track,
html.dse .progress-fill, html.dse .progress-track { border-radius: 2px; }

/* Panel headers — bottom border in industrial blue, bold separator */
html.dse .panel-header { border-bottom: 2px solid #1d4ed8; }

/* Header bar — clean white, thin bottom border, no colored accent */
html.dse header {
    border-bottom: 1px solid #e5e5e5 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* Hero metrics / stat cards — colored top accent line */
html.dse .hero-metric,
html.dse .stat-card {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-top: 3px solid #1d4ed8;
}

/* Alarm banner — red left border, light red background, high visibility */
html.dse .alarm-banner, html.dse .alarm-bar {
    background: linear-gradient(90deg, rgba(254,226,226,0.7) 0%, rgba(254,242,242,0.4) 100%);
    border: 1px solid rgba(220,38,38,0.2);
    border-left: 4px solid #dc2626;
    border-radius: 4px;
}

/* ── DSE light-mode Tailwind overrides (hardcoded dark hex → light) ────── */
html.dse body { background: var(--bg-body); color: var(--text-primary); }

html.dse .bg-\[\#0c1220\]    { background-color: var(--bg-body) !important; }
html.dse .bg-\[\#0c1220\]\/80 { background-color: rgba(255,255,255,0.95) !important; }
html.dse .bg-\[\#0f172a\]    { background-color: var(--bg-tile) !important; }
html.dse .bg-\[\#1a2332\]    { background-color: var(--bg-panel-solid) !important; }
html.dse .bg-\[\#162030\]    { background-color: #fafafa !important; }
html.dse .bg-\[\#1e2d40\]    { background-color: #f0f0f0 !important; }
html.dse .bg-\[\#0a0f1a\]    { background-color: #fafafa !important; }
html.dse .bg-\[\#131c2a\]    { background-color: var(--bg-filter) !important; }
html.dse .bg-surface-700     { background-color: var(--bg-tile) !important; }
html.dse .bg-surface-900     { background-color: var(--bg-body) !important; }

/* Hover backgrounds */
html.dse .hover\:bg-\[\#1e2d40\]:hover { background-color: #ebebeb !important; }
html.dse .hover\:bg-\[\#1a2332\]:hover { background-color: #f5f5f5 !important; }
html.dse .hover\:bg-\[\#162030\]:hover { background-color: #f0f0f0 !important; }

/* Borders */
html.dse .border-\[\#1e2d40\]  { border-color: var(--border) !important; }
html.dse .border-\[\#1a2535\]  { border-color: var(--border-tile) !important; }
html.dse .border-\[\#2a4060\]  { border-color: var(--border-hover) !important; }
html.dse .border-\[\#111827\]  { border-color: var(--border) !important; }
html.dse .hover\:border-\[\#2a4060\]:hover { border-color: var(--border-hover) !important; }

/* Text: dark-mode slate scale → high-contrast neutrals for light bg */
html.dse .text-slate-200 { color: #1c1917 !important; }
html.dse .text-slate-300 { color: #292524 !important; }
html.dse .text-slate-400 { color: #525252 !important; }
html.dse .text-slate-500 { color: #737373 !important; }
html.dse .text-slate-600 { color: #a3a3a3 !important; }
html.dse .text-slate-700 { color: #d4d4d4 !important; }
html.dse .text-white { color: #0a0a0a !important; }
html.dse .hover\:text-white:hover { color: #0a0a0a !important; }
html.dse .hover\:text-slate-200:hover { color: #171717 !important; }
html.dse .hover\:text-slate-300:hover { color: #1c1917 !important; }
html.dse .hover\:text-slate-400:hover { color: #525252 !important; }

/* Header */
html.dse header {
    background: var(--bg-header) !important;
}
html.dse header .bg-\[\#1e2d40\] { background-color: var(--border) !important; }

/* Stat cards / hero metrics */
html.dse .stat-card { box-shadow: var(--shadow-card) !important; }

/* Panels */
html.dse .panel {
    background: var(--bg-panel) !important;
    border-color: var(--border) !important;
}

/* Fuel / progress bars */
html.dse .fuel-track,
html.dse .fuel-gauge-track { background: #ebebeb !important; }
html.dse .progress-track { background: #ebebeb !important; }

/* Form inputs */
html.dse select,
html.dse input[type="text"],
html.dse input[type="number"],
html.dse input[type="email"],
html.dse input[type="date"],
html.dse input[type="search"],
html.dse textarea {
    background-color: var(--bg-input) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
    border-radius: 4px;
}
html.dse select:focus,
html.dse input:focus,
html.dse textarea:focus {
    border-color: #1d4ed8 !important;
    box-shadow: 0 0 0 2px rgba(29,78,216,0.15);
}
html.dse select option {
    background: var(--bg-panel-solid);
    color: var(--text-primary);
}

/* Scrollbar */
html.dse ::-webkit-scrollbar-thumb { background: #d4d4d4; }
html.dse ::-webkit-scrollbar-thumb:hover { background: #a3a3a3; }

/* Data rows */
html.dse .data-row { border-bottom-color: rgba(0,0,0,0.06) !important; }

/* Table overrides */
html.dse table th { color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; }
html.dse table td { color: var(--text-primary); border-color: var(--border-tile) !important; }
html.dse tr:hover td { background-color: #fafafa; }

/* Placeholder text */
html.dse ::placeholder { color: var(--text-faint) !important; }

/* Backdrop blur */
html.dse .backdrop-blur-xl { background-color: rgba(255,255,255,0.95) !important; }

/* Code / mono text */
html.dse code,
html.dse pre { background: #f5f5f5; color: #525252; border-radius: 4px; }

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT MODE — Hardcoded Tailwind overrides
   (applies to BOTH :is(html.light, html.light-blue) AND html.light-blue)
   All bg-[#hex], border-[#hex], text-slate-*, text-white classes that
   are used in templates with dark-mode values need light equivalents.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Backgrounds ────────────────────────────────────────────────────────── */
:is(html.light, html.light-blue) body { background: var(--bg-body); color: var(--text-primary); }

:is(html.light, html.light-blue) .bg-\[\#0c1220\]    { background-color: var(--bg-body) !important; }
:is(html.light, html.light-blue) .bg-\[\#0c1220\]\/80 { background-color: rgba(255,255,255,0.88) !important; }
:is(html.light, html.light-blue) .bg-\[\#0f172a\]    { background-color: var(--bg-tile) !important; }
:is(html.light, html.light-blue) .bg-\[\#1a2332\]    { background-color: var(--bg-panel-solid) !important; }
:is(html.light, html.light-blue) .bg-\[\#162030\]    { background-color: #f8f7f5 !important; }
:is(html.light, html.light-blue) .bg-\[\#1e2d40\]    { background-color: #e8e4de !important; }
:is(html.light, html.light-blue) .bg-\[\#0a0f1a\]    { background-color: #f8f7f5 !important; }
:is(html.light, html.light-blue) .bg-\[\#131c2a\]    { background-color: var(--bg-filter) !important; }
:is(html.light, html.light-blue) .bg-surface-700     { background-color: var(--bg-tile) !important; }
:is(html.light, html.light-blue) .bg-surface-900     { background-color: var(--bg-body) !important; }

/* Hover backgrounds */
:is(html.light, html.light-blue) .hover\:bg-\[\#1e2d40\]:hover { background-color: #e0dbd4 !important; }
:is(html.light, html.light-blue) .hover\:bg-\[\#1a2332\]:hover { background-color: #f0eeeb !important; }
:is(html.light, html.light-blue) .hover\:bg-\[\#162030\]:hover { background-color: #e8e4de !important; }

/* ── Borders ────────────────────────────────────────────────────────────── */
:is(html.light, html.light-blue) .border-\[\#1e2d40\]  { border-color: var(--border) !important; }
:is(html.light, html.light-blue) .border-\[\#1a2535\]  { border-color: var(--border-tile) !important; }
:is(html.light, html.light-blue) .border-\[\#2a4060\]  { border-color: var(--border-hover) !important; }
:is(html.light, html.light-blue) .border-\[\#111827\]  { border-color: var(--border) !important; }

/* Hover borders */
:is(html.light, html.light-blue) .hover\:border-\[\#2a4060\]:hover { border-color: var(--border-hover) !important; }

/* ── Text: Tailwind slate scale → Warm stone scale ──────────────────────
   Dark mode slate is designed for dark backgrounds (light text).
   Light mode maps these to the warm stone palette for light backgrounds.
   ────────────────────────────────────────────────────────────────────────── */
:is(html.light, html.light-blue) .text-slate-200 { color: #292524 !important; }
:is(html.light, html.light-blue) .text-slate-300 { color: #44403c !important; }
:is(html.light, html.light-blue) .text-slate-400 { color: #57534e !important; }
:is(html.light, html.light-blue) .text-slate-500 { color: #78716c !important; }
:is(html.light, html.light-blue) .text-slate-600 { color: #a8a29e !important; }
:is(html.light, html.light-blue) .text-slate-700 { color: #d6d3d1 !important; }

/* text-white: heading text on dark → heading text on light */
:is(html.light, html.light-blue) .text-white { color: #1c1917 !important; }

/* Hover text */
:is(html.light, html.light-blue) .hover\:text-white:hover { color: #0c0a09 !important; }
:is(html.light, html.light-blue) .hover\:text-slate-200:hover { color: #1c1917 !important; }
:is(html.light, html.light-blue) .hover\:text-slate-300:hover { color: #292524 !important; }
:is(html.light, html.light-blue) .hover\:text-slate-400:hover { color: #44403c !important; }

/* ── Header ─────────────────────────────────────────────────────────────── */
:is(html.light, html.light-blue) header {
    background: var(--bg-header) !important;
    border-color: var(--border) !important;
}
/* Divider lines in header */
:is(html.light, html.light-blue) header .bg-\[\#1e2d40\] { background-color: var(--border) !important; }

/* ── Machine cards ──────────────────────────────────────────────────────── */
:is(html.light, html.light-blue) .machine-card {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow-card) !important;
}
:is(html.light, html.light-blue) .machine-card::before { background: var(--border) !important; }
:is(html.light, html.light-blue) .machine-card:hover { box-shadow: var(--shadow-hover) !important; }

:is(html.light, html.light-blue) .machine-card.status-running { border-color: #10b981 !important; box-shadow: 0 2px 12px rgba(16,185,129,0.15) !important; }
:is(html.light, html.light-blue) .machine-card.status-running::before { background: #10b981 !important; }
:is(html.light, html.light-blue) .machine-card.status-standby { border-color: #3b82f6 !important; box-shadow: 0 2px 12px rgba(59,130,246,0.10) !important; }
:is(html.light, html.light-blue) .machine-card.status-standby::before { background: #3b82f6 !important; }
:is(html.light, html.light-blue) .machine-card.status-alarm { border-color: #ef4444 !important; box-shadow: 0 2px 12px rgba(239,68,68,0.15) !important; }
:is(html.light, html.light-blue) .machine-card.status-alarm::before { background: #ef4444 !important; }
:is(html.light, html.light-blue) .machine-card.status-warning { border-color: #f59e0b !important; box-shadow: 0 2px 12px rgba(245,158,11,0.15) !important; }
:is(html.light, html.light-blue) .machine-card.status-warning::before { background: #f59e0b !important; }
:is(html.light, html.light-blue) .machine-card.status-offline { border-color: var(--border) !important; opacity: 0.8; }
:is(html.light, html.light-blue) .machine-card.status-offline::before { background: #94a3b8 !important; }

/* ── Stat cards / hero metrics ──────────────────────────────────────────── */
:is(html.light, html.light-blue) .stat-card,
:is(html.light, html.light-blue) .hero-metric {
    background: var(--bg-card) !important;
    border-color: var(--border-tile) !important;
    box-shadow: var(--shadow-card) !important;
}

/* ── Panels ─────────────────────────────────────────────────────────────── */
:is(html.light, html.light-blue) .panel {
    background: var(--bg-panel) !important;
    border-color: var(--border) !important;
}

/* ── Alarm banner ───────────────────────────────────────────────────────── */
:is(html.light, html.light-blue) .alarm-banner,
:is(html.light, html.light-blue) .alarm-bar {
    background: linear-gradient(90deg, rgba(254,202,202,0.5) 0%, rgba(254,202,202,0.15) 100%) !important;
    border-color: rgba(239,68,68,0.25) !important;
}

/* ── Fuel / progress bars ───────────────────────────────────────────────── */
:is(html.light, html.light-blue) .fuel-track,
:is(html.light, html.light-blue) .fuel-gauge-track { background: #e8e4de !important; }
:is(html.light, html.light-blue) .progress-track { background: #e8e4de !important; }

/* ── Form inputs (select, input) with hardcoded dark bg ─────────────────── */
:is(html.light, html.light-blue) select,
:is(html.light, html.light-blue) input[type="text"],
:is(html.light, html.light-blue) input[type="number"],
:is(html.light, html.light-blue) input[type="email"],
:is(html.light, html.light-blue) input[type="date"],
:is(html.light, html.light-blue) input[type="search"],
:is(html.light, html.light-blue) textarea {
    background-color: var(--bg-input) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}
:is(html.light, html.light-blue) select:focus,
:is(html.light, html.light-blue) input:focus,
:is(html.light, html.light-blue) textarea:focus {
    border-color: #3b82f6 !important;
}
:is(html.light, html.light-blue) select option {
    background: var(--bg-panel-solid);
    color: var(--text-primary);
}

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
:is(html.light, html.light-blue) ::-webkit-scrollbar-thumb { background: #d6d0c8; }
:is(html.light, html.light-blue) ::-webkit-scrollbar-thumb:hover { background: #c4bdb4; }

/* ── LEDs in light mode ─────────────────────────────────────────────────── */
:is(html.light, html.light-blue) .led-offline  { background: #94a3b8; color: #94a3b8; }
:is(html.light, html.light-blue) .led-inactive { background: #94a3b8; color: #94a3b8; }

/* ── Data rows (card content separators) ────────────────────────────────── */
:is(html.light, html.light-blue) .data-row { border-bottom-color: rgba(0,0,0,0.06) !important; }

/* ── Table overrides ────────────────────────────────────────────────────── */
:is(html.light, html.light-blue) table th { color: var(--text-muted); }
:is(html.light, html.light-blue) table td { color: var(--text-primary); border-color: var(--border-tile) !important; }
:is(html.light, html.light-blue) tr:hover td { background-color: #f8f7f5; }

/* ── Placeholder text ───────────────────────────────────────────────────── */
:is(html.light, html.light-blue) ::placeholder { color: var(--text-faint) !important; }

/* ── Backdrop blur header (standalone pages) ────────────────────────────── */
:is(html.light, html.light-blue) .backdrop-blur-xl { background-color: rgba(255,255,255,0.88) !important; }

/* ── Code / mono text ───────────────────────────────────────────────────── */
:is(html.light, html.light-blue) code,
:is(html.light, html.light-blue) pre { background: #f0eeeb; color: #44403c; }

/* ══════════════════════════════════════════════════════════════════════════
   COMPONENTS (shared between dark & light, using CSS variables)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Theme toggle button ────────────────────────────────────────────────── */
.theme-toggle {
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-tile);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: var(--text-muted);
    position: relative;
}
.theme-toggle:hover {
    border-color: var(--border-hover);
    color: var(--text-primary);
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon { position: absolute; transition: all 0.3s ease; }
.theme-toggle .icon-sun  { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }
html.light .theme-toggle .icon-sun  { opacity: 1; transform: rotate(0deg) scale(1); }
html.light .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(0.6); }