/* ========================================================
   STANDAARD THEMA INSTELLING
   ======================================================== */
:root {
    --default-theme: theme-halloween;
}

/* Vaste achtergrond op HTML niveau */
html {
    min-height: 100%;
    background-attachment: fixed !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

/* Thema Achtergronden */
html.theme-synthwave84,
html:not([class*="theme-"]) {
    background-color: #0b0620;
    background-image:
        radial-gradient(circle at 50% 15%, rgba(255, 126, 219, 0.08), transparent 32%),
        linear-gradient(180deg, rgba(25, 10, 55, 0.72), rgba(5, 3, 18, 0.96));
}

html.theme-green { background-color: #020804; background-image: none; }
html.theme-amber { background-color: #0a0600; background-image: none; }

/* Cyan Thema */
html.theme-cyan {
    background-color: #000a0d;
    background-image: radial-gradient(circle at 50% 50%, rgba(0, 240, 255, 0.08), transparent 70%);
}

/* Red Thema */
html.theme-red {
    background-color: #0d0202;
    background-image: radial-gradient(circle at 50% 50%, rgba(255, 34, 34, 0.08), transparent 70%);
}

html.theme-white { background-color: #080808; background-image: none; }

/* Radar Thema */
html.theme-radar {
    background-color: #01140a;
    background-image:
        radial-gradient(circle at 50% 50%, rgba(0,255,110,.18) 0%, transparent 55%),
        repeating-radial-gradient(circle at 50% 50%, transparent 0, transparent 60px, rgba(0,255,110,.12) 61px, transparent 62px),
        linear-gradient(rgba(0,255,110,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,255,110,.05) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
    position: relative;
}
html.theme-radar::after {
    content: "";
    position: fixed;
    top: 50%; left: 50%;
    width: 200vw; height: 200vw;
    margin-top: -100vw; margin-left: -100vw;
    background: conic-gradient(from 0deg at 50% 50%, rgba(0,255,110,0.22) 0deg, transparent 40deg, transparent 360deg);
    animation: radar-sweep 8s linear infinite;
    pointer-events: none;
    z-index: 1;
}
@keyframes radar-sweep {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* RADAR MILITAIRE CALLSIGNS STYLING */
.radar-target {
    position: fixed;
    transform: translate(-50%, -50%);
    transition: all 1s linear;
    white-space: nowrap;
    pointer-events: none;
    z-index: 5;
}

.radar-blip {
    width: 7px;
    height: 7px;
    background-color: #00ffcc;
    border-radius: 50%;
    box-shadow: 0 0 8px #00ffcc, 0 0 15px rgba(0, 255, 204, 0.8);
    display: inline-block;
}

.radar-label {
    position: absolute;
    top: -4px;
    left: 12px;
    color: #00ffcc;
    text-shadow: 0 0 5px rgba(0, 255, 204, 0.8);
    line-height: 1.1;
    background: rgba(1, 20, 10, 0.85);
    padding: 2px 5px;
    border-radius: 3px;
    border: 1px solid rgba(0, 255, 204, 0.4);
    font-size: 10px;
}

@keyframes blip-fade-in {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.radar-target-spawn {
    animation: blip-fade-in 0.6s ease-out;
}

/* Halloween Thema */
html.theme-halloween {
    background-color: #0f0518;
    background-image:
        linear-gradient(180deg, rgba(15, 5, 24, 0.82), rgba(5, 2, 10, 0.95)),
        url("https://images.unsplash.com/photo-1509557965875-b88c97052f0e?auto=format&fit=crop&w=1920&q=80");
    animation: lightning-flash 10s infinite;
}
@keyframes lightning-flash {
    0%, 91%, 95%, 100% { filter: brightness(1); }
    93% { filter: brightness(1.4) drop-shadow(0 0 12px #ff6600); }
    94% { filter: brightness(0.85); }
}

/* ========================================================
   RAINFOREST THEMA
   ======================================================== */
html.theme-rainforest {
    background-color: #040e08;
    background-image:
        linear-gradient(180deg, rgba(10, 30, 20, 0.6) 0%, rgba(4, 14, 8, 0.85) 50%, rgba(2, 6, 4, 0.95) 100%),
        url("img/rainforest.jpg");
    background-blend-mode: overlay, normal;
    position: relative;
    overflow-x: hidden;
}

html.theme-rainforest::before {
    content: "";
    position: fixed;
    top: -50px; left: -50px; width: calc(100% + 100px); height: calc(100% + 100px);
    background-image: 
        radial-gradient(circle, rgba(180, 255, 210, 0.75) 1px, transparent 1px),
        radial-gradient(circle, rgba(140, 230, 180, 0.55) 1.2px, transparent 1.2px);
    background-size: 25px 35px, 45px 65px;
    background-position: 0 0, 15px 20px;
    animation: fine-rain-1 0.22s linear infinite;
    pointer-events: none;
    z-index: 2;
}

html.theme-rainforest::after {
    content: "";
    position: fixed;
    top: -50px; left: -50px; width: calc(100% + 100px); height: calc(100% + 100px);
    background-image: 
        radial-gradient(circle, rgba(120, 210, 160, 0.45) 1px, transparent 1px);
    background-size: 35px 50px;
    background-position: 10px 10px;
    animation: fine-rain-2 0.38s linear infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes fine-rain-1 {
    0% { transform: translate(0, 0) rotate(-10deg); }
    100% { transform: translate(-20px, 120px) rotate(-10deg); }
}

@keyframes fine-rain-2 {
    0% { transform: translate(0, 0) rotate(-10deg); }
    100% { transform: translate(-10px, 90px) rotate(-10deg); }
}

html.theme-rainforest .theme-panel {
    background: linear-gradient(180deg, rgba(10, 24, 16, 0.88), rgba(4, 12, 8, 0.94)) !important;
    border-color: rgba(74, 222, 128, 0.35) !important;
    box-shadow: 0 0 15px rgba(20, 50, 32, 0.5) !important;
}

/* ========================================================
   TOMB OF THE MASK THEMA (Kaders animeren via borders, afbeeldingen 100% vrij)
   ======================================================== */
html.theme-tomb {
    background-color: #0c0c14;
    background-image:
        radial-gradient(circle at 50% 50%, rgba(255, 230, 0, 0.12) 0%, transparent 65%),
        linear-gradient(rgba(0, 240, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 0, 128, 0.04) 1px, transparent 1px);
    background-size: 100% 100%, 24px 24px, 24px 24px;
}

/* We animeren de kaders via border-color en box-shadow i.p.v. een globale filter */
html.theme-tomb .theme-panel,
html.theme-tomb .tab-btn {
    animation: tomb-border-pulse 6s infinite alternate !important;
}

@keyframes tomb-border-pulse {
    0% { 
        border-color: rgba(255, 0, 127, 0.6); 
        box-shadow: 0 0 15px rgba(0, 255, 204, 0.25), inset 0 0 10px rgba(255, 0, 127, 0.2); 
    }
    50% { 
        border-color: rgba(0, 240, 255, 0.7); 
        box-shadow: 0 0 20px rgba(255, 0, 127, 0.35), inset 0 0 12px rgba(0, 240, 255, 0.3); 
    }
    100% { 
        border-color: rgba(255, 230, 0, 0.6); 
        box-shadow: 0 0 15px rgba(255, 230, 0, 0.3), inset 0 0 10px rgba(255, 230, 0, 0.2); 
    }
}

/* Gegarandeerd dat afbeeldingen nooit geraakt worden */
html.theme-tomb img,
html.theme-tomb picture,
html.theme-tomb video {
    filter: none !important;
    -webkit-filter: none !important;
}

html.theme-tomb body { color: #00ffcc; }
html.theme-tomb .crt-glow { color: #ff007f !important; text-shadow: 0 0 8px rgba(255, 0, 127, 0.8), 0 0 20px rgba(0, 255, 204, 0.5); }
html.theme-tomb [class*="text-emerald-"] { color: #00ffcc !important; }
html.theme-tomb .bg-emerald-500, html.theme-tomb .tab-btn.active { background-color: #ff007f !important; color: #ffffff !important; border-color: #00ffcc !important; }
html.theme-tomb .theme-checkbox { accent-color: #ff007f; }
html.theme-tomb .theme-panel {
    background: linear-gradient(135deg, rgba(15, 10, 30, 0.92), rgba(5, 20, 25, 0.95)) !important;
}

/* ========================================================
   GEZELLIGE KERST THEMA
   ======================================================== */
html.theme-christmas {
    background-color: #120402;
    background-image:
        radial-gradient(circle at 50% 100%, rgba(255, 90, 0, 0.35), transparent 60%),
        radial-gradient(circle at 20% 20%, rgba(211, 47, 47, 0.3), transparent 50%),
        linear-gradient(180deg, rgba(25, 8, 5, 0.75), rgba(8, 2, 1, 0.95)),
        url("https://images.unsplash.com/photo-1543589077-47d81606c1bf?auto=format&fit=crop&w=1920&q=80");
    animation: fireplace-glow 4s ease-in-out infinite alternate;
}
@keyframes fireplace-glow {
    0% { filter: brightness(0.95); }
    100% { filter: brightness(1.15) drop-shadow(0 0 30px rgba(255, 100, 0, 0.3)); }
}
html.theme-christmas .theme-panel {
    background: linear-gradient(180deg, rgba(28, 10, 8, 0.9), rgba(12, 4, 3, 0.95)) !important;
    border-color: rgba(211, 47, 47, 0.6) !important;
    box-shadow: 0 0 20px rgba(211, 47, 47, 0.25), inset 0 0 10px rgba(255, 176, 0, 0.1) !important;
}

html.theme-halloween .seasonal-header::before {
    content: "🏚️ 👻 🎃 🦇 🕷️ 🎃 👻 💀 🏚️ 🦇 🎃 👻 🕷️ 🎃 🏚️";
    position: absolute;
    top: 6px; left: 0; right: 0;
    text-align: center;
    font-size: 15px;
    letter-spacing: 12px;
    opacity: 0.95;
    pointer-events: none;
    filter: drop-shadow(0 0 6px #ff6600);
}

body {
    font-family: 'JetBrains Mono', monospace;
    background: transparent !important;
    color: #ff7edb;
    overflow-x: hidden;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #160b31; }
::-webkit-scrollbar-thumb { background: #ff2dbf; border-radius: 2px; }

/* CRT Scanlines & Toggle via body classes */
body.no-scanlines::before {
    display: none !important;
}

.crt-scanlines::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.28) 50%), linear-gradient(90deg, rgba(255, 45, 191, 0.035), rgba(99, 102, 241, 0.025), rgba(0, 220, 255, 0.035));
    z-index: 99;
    background-size: 100% 3px, 6px 100%;
    pointer-events: none;
    opacity: 0.42;
}

.crt-glow { text-shadow: 0 0 4px rgba(255, 126, 219, 0.85), 0 0 12px rgba(255, 126, 219, 0.45); }
.box-glow { box-shadow: 0 0 10px rgba(255, 45, 191, 0.16), 0 0 24px rgba(99, 102, 241, 0.08), inset 0 0 10px rgba(255, 126, 219, 0.035); }

/* Vaste kleuren voor de grafiek labels */
.cpu-util-label { color: #00ff66 !important; }
.cpu-temp-label { color: #ff2244 !important; }

/* Thema Kleuren & Overrides */
html.theme-amber body { color: #ffb000; }
html.theme-amber .crt-glow { text-shadow: 0 0 6px rgba(255, 176, 0, 0.6); }
html.theme-amber [class*="border-emerald-"] { border-color: rgba(255, 176, 0, 0.4) !important; }
html.theme-amber .bg-emerald-500 { background-color: #ffb000 !important; color: #0a0600 !important; }
html.theme-amber [class*="text-emerald-"] { color: #ffb000 !important; }

html.theme-cyan body { color: #00f0ff; }
html.theme-cyan .crt-glow { text-shadow: 0 0 6px rgba(0, 240, 255, 0.6); }
html.theme-cyan [class*="border-emerald-"] { border-color: rgba(0, 240, 255, 0.4) !important; }
html.theme-cyan .bg-emerald-500 { background-color: #00f0ff !important; color: #000a0d !important; }
html.theme-cyan [class*="text-emerald-"] { color: #00f0ff !important; }

html.theme-red body { color: #ff2222; }
html.theme-red .crt-glow { text-shadow: 0 0 6px rgba(255, 34, 34, 0.7); }
html.theme-red [class*="border-emerald-"] { border-color: rgba(255, 34, 34, 0.4) !important; }
html.theme-red .bg-emerald-500 { background-color: #ff2222 !important; color: #0d0202 !important; }
html.theme-red [class*="text-emerald-"] { color: #ff2222 !important; }

html.theme-white body { color: #e0e0e0; }
html.theme-white .crt-glow { text-shadow: 0 0 6px rgba(224, 224, 224, 0.5); }
html.theme-white [class*="border-emerald-"] { border-color: rgba(224, 224, 238, .34) !important; }
html.theme-white .bg-emerald-500 { background-color: #e0e0e0 !important; color: #080808 !important; }
html.theme-white [class*="text-emerald-"] { color: #e7e7ef !important; }

html.theme-green body { color: #00ff66; }
html.theme-green .crt-glow { text-shadow: 0 0 4px rgba(0, 255, 102, 0.42); }
html.theme-green [class*="text-emerald-"] { color: #00ff66 !important; }
html.theme-green [class*="border-emerald-"] { border-color: rgba(0, 255, 102, 0.4) !important; }
html.theme-green .bg-emerald-500 { background-color: #00ff66 !important; color: #020804 !important; }

html.theme-synthwave84 body { color: #ff7edb; }
html.theme-synthwave84 .crt-glow { color: #ff7edb !important; text-shadow: 0 0 4px rgba(255, 126, 219, 0.85), 0 0 12px rgba(255, 126, 219, 0.45); }
html.theme-synthwave84 [class*="border-emerald-"] { border-color: rgba(255, 45, 191, 0.42) !important; }
html.theme-synthwave84 [class*="text-emerald-"] { color: #ff7edb !important; }
html.theme-synthwave84 .bg-emerald-500 { background-color: #ff2dbf !important; color: #0b0620 !important; }

html.theme-radar body { color: #79ffad; }
html.theme-radar .crt-glow { color: #8affb2 !important; text-shadow: 0 0 4px rgba(0,255,110,.75), 0 0 12px rgba(0,255,110,.28); }
html.theme-radar [class*="text-emerald-"] { color: #79ffad !important; }
html.theme-radar [class*="border-emerald-"] { border-color: rgba(0,255,110,.36) !important; }
html.theme-radar .bg-emerald-500 { background-color: #00b85a !important; color: #020b08 !important; }

html.theme-rainforest body { color: #80e2a3; }
html.theme-rainforest .crt-glow { color: #80e2a3 !important; text-shadow: 0 0 4px rgba(74, 222, 128, 0.75); }
html.theme-rainforest [class*="text-emerald-"] { color: #80e2a3 !important; }
html.theme-rainforest [class*="border-emerald-"] { border-color: rgba(74, 222, 128, 0.4) !important; }
html.theme-rainforest .bg-emerald-500 { background-color: #2e7d32 !important; color: #ffffff !important; }

html.theme-halloween body { color: #ffb366; }
html.theme-halloween .crt-glow { color: #ffb366 !important; text-shadow: 0 0 6px rgba(255, 102, 0, 0.8), 0 0 15px rgba(123, 44, 191, 0.5); }
html.theme-halloween [class*="border-emerald-"] { border-color: rgba(255, 102, 0, 0.5) !important; }
html.theme-halloween [class*="text-emerald-"] { color: #ffb366 !important; }
html.theme-halloween .bg-emerald-500 { background-color: #ff6600 !important; color: #12051c !important; }

html.theme-christmas body { color: #ffeb3b; }
html.theme-christmas .crt-glow { color: #ffffff !important; text-shadow: 0 0 6px rgba(255, 140, 0, 0.9), 0 0 14px rgba(211, 47, 47, 0.6); }
html.theme-christmas [class*="border-emerald-"] { border-color: rgba(255, 165, 0, 0.6) !important; }
html.theme-christmas [class*="text-emerald-"] { color: #ffeb3b !important; }
html.theme-christmas .bg-emerald-500 { background-color: #d32f2f !important; color: #ffffff !important; }

/* VU-Meters & Dashboard */
.vu-meter-bar { display: flex; flex-direction: column-reverse; gap: 2px; height: 120px; width: 14px; background: #08080c; padding: 2px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 2px; }
.vu-segment { width: 100%; height: 4px; background: #141824; border-radius: 1px; }
.vu-segment.active-green { background-color: #00ff66; box-shadow: 0 0 6px rgba(0, 255, 102, 0.8); }
.vu-segment.active-yellow { background-color: #ffcc00; box-shadow: 0 0 6px rgba(255, 204, 0, 0.8); }
.vu-segment.active-red { background-color: #ff2244; box-shadow: 0 0 6px rgba(255, 34, 68, 0.8); }
.vu-segment.active-cyan { background-color: #00e5ff; box-shadow: 0 0 6px rgba(0, 229, 255, 0.8); }
.vu-segment.active-magenta { background-color: #ff00cc; box-shadow: 0 0 6px rgba(255, 0, 204, 0.8); }
.vu-segment.active-purple { background-color: #9d00ff; box-shadow: 0 0 8px rgba(157, 0, 255, 0.9); }

.horiz-vu-bar { display: flex; gap: 2px; height: 10px; width: 100%; background: #08080c; padding: 2px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 2px; }
.horiz-vu-segment { flex: 1; height: 100%; background: #121520; }