/* ============================================================================
   theme.css — "Kweeklicht" (UI-experiment, branch ui-experiment)
   ----------------------------------------------------------------------------
   Eén laag over de hele site, geladen direct na style.css in header.php.
   Idee: een kas in Aalsmeer 's avonds — nachtblauw met het paars/magenta
   gloed van LED-groeilampen. Lime is géén decoratie meer, alleen "live/ok".

   Selectors op `html:root` / `html body.dark` zijn bewust specifieker dan de
   `:root` / `body.dark` in de pagina-CSS (graphs.css, teelt.css, index.css …),
   zodat deze tokens winnen ongeacht laadvolgorde.
   ============================================================================ */

html:root {
    /* Kernpalet */
    --kl-nacht:      #000644;   /* Yuverta donkerblauw — inkt + nav */
    --kl-nacht-2:    #0B1257;
    --kl-glas:       #F3F5FA;   /* pagina: koel kasglas, geen crème */
    --kl-blad:       #FFFFFF;   /* kaarten */
    --kl-lijn:       #DCE0EC;
    --kl-lijn-zacht: #EBEDF4;
    --kl-mist:       #5B6185;   /* secundaire tekst */
    --kl-vaag:       #8E93B0;
    --kl-licht:      #B8A1FF;   /* kweeklicht (Yuverta lila) */
    --kl-licht-heet: #D46BFF;   /* kern van de lamp */
    --kl-licht-zacht:#EEE8FF;
    --kl-live:       #A7FF00;   /* alleen: online / live */
    --kl-alarm:      #FF2F00;
    --kl-inkt-accent:#5A3FD6;   /* lila dat leesbaar is op wit */

    --font-display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
    --font-body:    'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-data:    'Figtree', system-ui, sans-serif;   /* tabular-nums, geen mono */

    --r-groot: 22px;   /* secties / panelen */
    --r-kaart: 14px;   /* kaarten */
    --r-klein: 8px;    /* inputs, knoppen-in-groep */

    /* Bestaande site-tokens omleiden */
    --bg-page:       var(--kl-glas);
    --bg-card:       var(--kl-blad);
    --text-main:     var(--kl-nacht);
    --text-muted:    var(--kl-mist);
    --border-subtle: var(--kl-lijn);
    --shadow-card:   none;
    --shadow-soft:   none;

    /* graphs.css */
    --gr-ink:       var(--kl-nacht);
    --gr-ink-soft:  var(--kl-nacht-2);
    --gr-paper:     var(--kl-blad);
    --gr-cream:     #F7F5FF;
    --gr-line:      var(--kl-lijn);
    --gr-line-soft: var(--kl-lijn-zacht);
    --gr-muted:     var(--kl-mist);
    --gr-faded:     var(--kl-vaag);
    --gr-accent:    var(--kl-licht);

    /* teelt.css / kar_teelt.css / kar_overzicht.css */
    --tl-bg:          var(--kl-blad);
    --tl-bg-soft:     #F7F8FC;
    --tl-border:      var(--kl-lijn);
    --tl-border-soft: var(--kl-lijn-zacht);
    --tl-text:        var(--kl-nacht);
    --tl-muted:       var(--kl-mist);
    --tl-faint:       var(--kl-vaag);
    --tl-accent:      #6A4DE0;
    --tl-accent-soft: var(--kl-licht-zacht);

    /* index.css */
    --primary-color: var(--kl-nacht);
    --primary-hover: var(--kl-nacht-2);
    --accent-glow:   rgba(184, 161, 255, .45);
    --bg-light:      var(--kl-glas);
    --text-dark:     var(--kl-nacht);
    --glass-bg:      var(--kl-blad);
    --glass-border:  var(--kl-lijn);
}

html body.dark {
    --kl-glas:       #050934;
    --kl-blad:       #0C1145;
    --kl-lijn:       #222A66;
    --kl-lijn-zacht: #181F58;
    --kl-mist:       #A9AED3;
    --kl-vaag:       #7479A6;
    --kl-licht-zacht:rgba(184, 161, 255, .14);
    --kl-inkt-accent:#C9B8FF;

    --text-main:  #EEF0FF;
    --gr-ink:     #EEF0FF;
    --gr-ink-soft:#C9CCF0;
    --gr-cream:   #121852;
    --tl-text:    #EEF0FF;
    --tl-bg-soft: #10164C;
    --tl-accent:  var(--kl-licht);
    --text-dark:  #EEF0FF;
}

/* ── Basis ─────────────────────────────────────────────────────────────── */
html body {
    background: var(--kl-glas);
    background-attachment: initial;
    color: var(--text-main);
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}
/* style.css zet body.dark een grijsblauwe gradient met !important */
html body.dark { background: var(--kl-glas) !important; color: var(--text-main); }
html:has(body.dark) { background: #050934; }
html body.dark {
    --bg-page: var(--kl-glas);
    --bg-card: var(--kl-blad);
    --bg-card-soft: #121852;
    --border-color: var(--kl-lijn);
    --input-bg: var(--kl-blad);
    --text-muted: var(--kl-mist);
}

h1, h2, h3, h4, .page-title, .section-title {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    letter-spacing: -0.02em;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #6A4DE0; }
body.dark a:hover { color: var(--kl-licht); }

:focus-visible {
    outline: 2px solid var(--kl-licht-heet);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection { background: var(--kl-licht); color: var(--kl-nacht); }

/* ── Navigatie: nachtblauw met de "lampstrip" eronder ─────────────────── */
html body .navbar,
html body .navbar.dark {
    background: var(--kl-nacht) !important;
    box-shadow: none;
    padding-top: .55rem;
    padding-bottom: .55rem;
    position: relative;
    z-index: 50;
}
html body .navbar::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -3px;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%, var(--kl-licht) 18%, var(--kl-licht-heet) 50%,
        var(--kl-licht) 82%, transparent 100%);
    box-shadow: 0 0 18px 2px rgba(212, 107, 255, .55);
    pointer-events: none;
}
html body .logo-img { height: 42px; }

html body .navbar .nav-link {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: .95rem;
    color: rgba(238, 240, 255, .78) !important;
    padding: .45rem .8rem !important;
    border-radius: 999px;
    transition: color .15s, background-color .15s;
}
html body .navbar .nav-link:hover { color: #fff !important; background: rgba(184, 161, 255, .12); }
html body .navbar .nav-link.active {
    color: var(--kl-nacht) !important;
    background: var(--kl-licht);
    font-weight: 600;
}
html body .navbar .nav-link.active::after { display: none; }
html body .navbar .text-success,
html body .navbar .text-danger {
    color: #fff !important;
    border: 1px solid rgba(184, 161, 255, .45);
    margin-left: .25rem;
}
html body .navbar .text-success:hover,
html body .navbar .text-danger:hover { border-color: var(--kl-licht); }

html body #lang-toggle,
html body #theme-toggle {
    width: 38px; height: 38px;
    border-radius: 999px !important;
    border: 1px solid rgba(184, 161, 255, .35) !important;
    background: transparent !important;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 !important;
}
html body #theme-toggle img { width: 20px; height: 20px; border-radius: 50%; }

/* ── Knoppen & formulieren ─────────────────────────────────────────────── */
html body .btn-primary,
html body .tl-btn.primary {
    background: var(--kl-nacht);
    color: #fff;
    border: 1px solid var(--kl-nacht);
    border-radius: 999px;
    box-shadow: none;
    font-weight: 600;
}
html body .btn-primary:hover,
html body .tl-btn.primary:hover {
    background: var(--kl-nacht-2);
    box-shadow: 0 0 0 4px rgba(184, 161, 255, .45);
}
body.dark .btn-primary,
body.dark .tl-btn.primary { background: var(--kl-licht); color: var(--kl-nacht); border-color: var(--kl-licht); }

html body .btn-outline-primary {
    border-radius: 999px;
    border-color: var(--kl-lijn);
    color: var(--text-main);
}
html body .btn-outline-primary:hover { background: var(--kl-licht-zacht); border-color: var(--kl-licht); color: var(--text-main); }

html body .form-control,
html body .form-select {
    border-radius: var(--r-klein);
    border-color: var(--kl-lijn);
    background-color: var(--kl-blad);
    color: var(--text-main);
}
html body .form-control:focus,
html body .form-select:focus {
    border-color: var(--kl-licht);
    box-shadow: 0 0 0 4px rgba(184, 161, 255, .3);
}

html body .card,
html body .metric-card,
html body .chart-card,
html body .table-card {
    border-radius: var(--r-kaart);
    border: 1px solid var(--kl-lijn) !important;
    box-shadow: none;
    background: var(--kl-blad);
}

/* ── Footer ────────────────────────────────────────────────────────────── */
html body footer {
    color: var(--kl-mist);
    border-top: 1px solid var(--kl-lijn) !important;
    font-size: .85rem;
}
html body footer a { color: var(--text-main); }

/* ── Chatbubbel: een lampje, geen groene stip ──────────────────────────── */
html body #chatBubble {
    background: var(--kl-nacht);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(184, 161, 255, .5), 0 0 24px rgba(212, 107, 255, .45);
}
html body #chatBubble:hover { box-shadow: 0 0 0 2px var(--kl-licht), 0 0 32px rgba(212, 107, 255, .65); }

/* ── Systeemoverzicht (index) in het nieuwe palet ──────────────────────── */
html body .ov-wrap,
html body .plant-tip-widget {
    background: var(--kl-blad) !important;
    border: 1px solid var(--kl-lijn) !important;
    border-left-width: 1px !important;
    border-radius: var(--r-groot) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    color: var(--text-main);
}

html body .plant-tip-widget { padding: 20px 24px; }
html body.dark .plant-tip-label,
html body.dark .plant-tip-refresh { color: var(--kl-inkt-accent); }
html body.dark .plant-tip-text { color: var(--text-main); }
html body.dark .plant-tip-date { color: var(--kl-vaag); }
html body.dark footer a { color: var(--text-main); }
html body .ov-stat-value,
html body .ov-stat-num {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-main) !important;
}

/* ── Karren-overzicht (graphs.php) ─────────────────────────────────────── */
html body .gr-masthead { border-bottom-width: 1px; }
html body .gr-masthead-title { font-weight: 800; letter-spacing: -0.035em; font-size: clamp(2.2rem, 5vw, 3.6rem); }
html body .gr-toolbar { border-radius: 999px; overflow: hidden; background: var(--kl-blad); }
html body .gr-toolbar-btn:hover { background: var(--kl-licht-zacht); }
html body .gr-school-head { border-bottom-color: var(--kl-lijn); }
html body .gr-school-name { font-weight: 700; letter-spacing: -0.025em; }
html body .gr-cards {
    border-radius: var(--r-groot);
    overflow: hidden;
    background: var(--kl-blad);
}
html body .gr-card:last-child { border-bottom: 0; }
html body .gr-card-row-name { font-weight: 600; }
html body .gr-card-teelt {
    background: var(--kl-licht-zacht);
    border-color: rgba(184, 161, 255, .55);
    border-radius: 999px;
}
html body .gr-inactive details { border-radius: var(--r-kaart); overflow: hidden; }

/* ── Kar-pagina: tegels in dezelfde rondingen ──────────────────────────── */
html body .kar-topstrip,
html body .kov-stat,
html body .kov-ctx-card,
html body .kov-tile { border-radius: var(--r-kaart); }
html body .kar-topstrip { border-radius: var(--r-groot); }
html body .kar-topstrip-title,
html body .kov-stat-value,
html body .kov-tile-value { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em; }
html body .kov-tile--neutral { --kov-accent: var(--kl-licht); }

/* ── Animaties (speels) ────────────────────────────────────────────────────
   Doorlopend: lampstrip stroomt, hover-gloed op kaarten.
   Alleen bij het eerste bezoek per sessie (html.kl-intro, zie header.php):
   sparkline-balkjes groeien, tellers lopen op (assets/animaties.js).
   Bij een nieuwe meting: .kl-ping op de tegel (assets/animaties.js). */
html body .navbar::after {
    background-size: 200% 100%;
    animation: kl-strip 7s linear infinite;
}
@keyframes kl-strip { to { background-position: -200% 0; } }

html body .kov-tile,
html body .kov-stat,
html body .kov-ctx-card,
html body .ov-stat {
    transition: transform .25s cubic-bezier(.3,.8,.3,1), box-shadow .25s, border-color .25s, background-color .25s;
}
html body .kov-tile:hover,
html body .kov-ctx-card:hover {
    transform: translateY(-3px);
    border-color: var(--kl-licht);
    box-shadow: 0 0 0 4px rgba(184,161,255,.16), 0 16px 32px -18px rgba(90,63,214,.45);
}
html body .ov-stat:hover { background-color: var(--kl-licht-zacht); }
html body .gr-card-row { transition: background-color .2s; }
html body .gr-card-row:hover { background: var(--kl-licht-zacht); }

html.kl-intro .kov-spark-bar {
    transform-box: fill-box;
    transform-origin: bottom;
    animation: kl-balk .6s cubic-bezier(.2,.8,.2,1) both;   /* delay per balkje via JS */
}
@keyframes kl-balk { from { transform: scaleY(0); } }

/* Nieuwe meting binnen */
html body .kov-tile.kl-ping { animation: kl-tegel-ping 1.3s ease-out; }
html body .kov-tile.kl-ping .kov-tile-value { animation: kl-tik .7s cubic-bezier(.3,.8,.3,1); }
@keyframes kl-tegel-ping {
    0%   { box-shadow: 0 0 0 0 rgba(184,161,255,.75); border-color: var(--kl-licht-heet); }
    100% { box-shadow: 0 0 0 16px rgba(184,161,255,0); }
}
@keyframes kl-tik {
    0%   { transform: translateY(-7px); color: var(--kl-inkt-accent); }
    100% { transform: none; }
}

/* Tab-streep die meeglijdt (kar.php) */
html body .kar-tabbar { position: relative; }
html body .kar-tabbar.kl-streep-aan .kar-tab.active { border-bottom-color: transparent; }
.kl-tabstreep {
    position: absolute;
    bottom: -1px;
    height: 3px;
    border-radius: 3px;
    background: var(--kl-licht-heet);
    box-shadow: 0 0 10px rgba(212,107,255,.7);
    pointer-events: none;
    transition: left .38s cubic-bezier(.3,.8,.3,1), width .38s cubic-bezier(.3,.8,.3,1);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}