/* ─────────────────────────────────────────────────────────────────────────
   Beheertoring — instrumentpaneel.

   Die ontwerp is 'n INSTRUMENT, nie 'n dokument nie: jy skandeer dit, jy lees dit
   nie. Daarom: toestand word in VORM sowel as syfer gekodeer (lampie, strook, chip),
   die opsomming staan altyd bo die detail, en die aksentkleur (teal) is doelbewus
   apart van die betekeniskleure (groen/amber/rooi) sodat 'n aksent nooit soos 'n
   waarskuwing lyk nie.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --bg:        #F6F7F7;
  --paneel:    #FFFFFF;
  --paneel-2:  #EDF1F1;
  --ink:       #16201F;
  --ink-2:     #566462;
  --ink-3:     #8496941a;
  --lyn:       #DCE3E2;
  --lyn-sterk: #C3CFCD;

  --aksent:     #12736E;
  --aksent-sag: #E2EFEE;

  --goed:       #2E7D4F;  --goed-sag:    #E6F1EA;
  --waarsku:    #96680F;  --waarsku-sag: #F7EFDC;
  --krities:    #AF3A2B;  --krities-sag: #F8E7E4;
  --info:       #2C5F8A;  --info-sag:    #E6EEF5;
  --dood:       #77817F;  --dood-sag:    #ECEFEE;

  --r:      10px;
  --r-klein: 7px;
  --skadu:  0 1px 2px rgba(16, 32, 30, .05), 0 1px 1px rgba(16, 32, 30, .04);

  --mono: "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1414; --paneel: #151D1D; --paneel-2: #1B2626;
    --ink: #DEE7E5; --ink-2: #8FA3A0; --ink-3: #6f89861f;
    --lyn: #253232; --lyn-sterk: #334442;
    --aksent: #52B5AE; --aksent-sag: #16302F;
    --goed: #5FB380; --goed-sag: #162C20;
    --waarsku: #D2A24C; --waarsku-sag: #2F2718;
    --krities: #E07A5F; --krities-sag: #33201B;
    --info: #6FA3CE; --info-sag: #17262F;
    --dood: #6D7B79; --dood-sag: #1C2524;
    --skadu: 0 1px 2px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"] {
  --bg: #0E1414; --paneel: #151D1D; --paneel-2: #1B2626;
  --ink: #DEE7E5; --ink-2: #8FA3A0; --ink-3: #6f89861f;
  --lyn: #253232; --lyn-sterk: #334442;
  --aksent: #52B5AE; --aksent-sag: #16302F;
  --goed: #5FB380; --goed-sag: #162C20;
  --waarsku: #D2A24C; --waarsku-sag: #2F2718;
  --krities: #E07A5F; --krities-sag: #33201B;
  --info: #6FA3CE; --info-sag: #17262F;
  --dood: #6D7B79; --dood-sag: #1C2524;
  --skadu: 0 1px 2px rgba(0,0,0,.3);
}
:root[data-theme="light"] {
  --bg: #F6F7F7; --paneel: #FFFFFF; --paneel-2: #EDF1F1;
  --ink: #16201F; --ink-2: #566462; --ink-3: #8496941a;
  --lyn: #DCE3E2; --lyn-sterk: #C3CFCD;
  --aksent: #12736E; --aksent-sag: #E2EFEE;
  --goed: #2E7D4F; --goed-sag: #E6F1EA;
  --waarsku: #96680F; --waarsku-sag: #F7EFDC;
  --krities: #AF3A2B; --krities-sag: #F8E7E4;
  --info: #2C5F8A; --info-sag: #E6EEF5;
  --dood: #77817F; --dood-sag: #ECEFEE;
  --skadu: 0 1px 2px rgba(16,32,30,.05), 0 1px 1px rgba(16,32,30,.04);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--aksent); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ── Uitleg ─────────────────────────────────────────────────────────────── */

#skil { display: grid; grid-template-columns: 226px 1fr; min-height: 100vh; }

#rail {
  background: var(--paneel); border-right: 1px solid var(--lyn);
  display: flex; flex-direction: column; gap: 2px; padding: 14px 10px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.merk { display: flex; align-items: baseline; gap: 7px; padding: 4px 8px 14px; }
.merk b { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.merk span { font-size: 10.5px; color: var(--ink-2); letter-spacing: .12em; text-transform: uppercase; }

.rail-groep {
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-2); padding: 16px 8px 5px; font-weight: 600;
}
.rail-groep.gogga { color: var(--info); }

.rail-knop {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: none; border: 0; border-radius: var(--r-klein);
  padding: 7px 9px; cursor: pointer; text-align: left;
  font-size: 14px; color: var(--ink-2);
}
.rail-knop:hover { background: var(--paneel-2); color: var(--ink); }
.rail-knop[aria-current="true"] { background: var(--aksent-sag); color: var(--aksent); font-weight: 600; }
.rail-knop .ik { width: 16px; text-align: center; opacity: .85; font-size: 13px; }
.rail-knop .telling {
  margin-left: auto; font-family: var(--mono); font-size: 11px;
  background: var(--krities-sag); color: var(--krities);
  padding: 1px 6px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.rail-voet { margin-top: auto; padding: 12px 8px 4px; font-size: 11.5px; color: var(--ink-2); }
.rail-voet button {
  background: none; border: 1px solid var(--lyn); border-radius: var(--r-klein);
  padding: 4px 9px; cursor: pointer; color: var(--ink-2); font-size: 12px; margin-right: 6px;
}
.rail-voet button:hover { border-color: var(--lyn-sterk); color: var(--ink); }

#hoof { min-width: 0; display: flex; flex-direction: column; }

#kroon {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--lyn);
  display: flex; align-items: center; gap: 14px; padding: 11px 22px; flex-wrap: wrap;
}
#kroon h1 { font-size: 17px; font-weight: 650; margin: 0; letter-spacing: -.01em; }
#kroon .rek { flex: 1; }
#blad { padding: 20px 22px 64px; }

@media (max-width: 780px) {
  #skil { grid-template-columns: 1fr; }
  #rail { position: static; height: auto; flex-direction: row; flex-wrap: wrap;
          border-right: 0; border-bottom: 1px solid var(--lyn); }
  .merk { width: 100%; padding-bottom: 6px; }
  .rail-groep { padding: 6px 4px 2px; width: 100%; }
  .rail-voet { margin-top: 0; width: 100%; }
  #blad { padding: 16px 14px 56px; }
}

/* ── Lampies en toestand ────────────────────────────────────────────────── */

.lamp {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: var(--dood); box-shadow: 0 0 0 3px var(--dood-sag);
}
.lamp.goed    { background: var(--goed);    box-shadow: 0 0 0 3px var(--goed-sag); }
.lamp.waarsku { background: var(--waarsku); box-shadow: 0 0 0 3px var(--waarsku-sag); }
.lamp.krities { background: var(--krities); box-shadow: 0 0 0 3px var(--krities-sag); }
.lamp.info    { background: var(--info);    box-shadow: 0 0 0 3px var(--info-sag); }
.lamp.dood    { background: var(--dood);    box-shadow: 0 0 0 3px var(--dood-sag); }
.lamp.aksent  { background: var(--aksent);  box-shadow: 0 0 0 3px var(--aksent-sag); }
.lamp.klop    { animation: klop 2.4s ease-in-out infinite; }
@keyframes klop { 0%,100% { opacity: 1 } 50% { opacity: .45 } }

.staat { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); }
.staat b { color: var(--ink); font-weight: 600; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--dood-sag); color: var(--dood);
}
.chip.goed { background: var(--goed-sag); color: var(--goed); }
.chip.waarsku { background: var(--waarsku-sag); color: var(--waarsku); }
.chip.krities { background: var(--krities-sag); color: var(--krities); }
.chip.info { background: var(--info-sag); color: var(--info); }
.chip.aksent { background: var(--aksent-sag); color: var(--aksent); }
.chip.dood { background: var(--dood-sag); color: var(--dood); }

/* ── Kaarte ─────────────────────────────────────────────────────────────── */

.rooster { display: grid; gap: 12px; }
.rooster.k2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.rooster.k3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.rooster.k4 { grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); }

.kaart {
  background: var(--paneel); border: 1px solid var(--lyn);
  border-radius: var(--r); box-shadow: var(--skadu); overflow: hidden;
}
.kaart > header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--lyn); background: var(--paneel-2);
}
.kaart > header h2 {
  margin: 0; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 650;
}
.kaart > header .rek { flex: 1; }
.kaart > .inhoud { padding: 13px 14px; }
.kaart > .inhoud.dig { padding: 6px; }

/* Metriek-teël: die syfer is die held, die etiket die byskrif. */
.meet { padding: 13px 14px; }
.meet .waarde {
  font-size: 27px; font-weight: 650; letter-spacing: -.02em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.meet .etiket { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
.meet .onder { font-size: 11.5px; color: var(--ink-2); margin-top: 7px; display: flex; align-items: center; gap: 6px; }
.meet.goed .waarde { color: var(--goed); }
.meet.waarsku .waarde { color: var(--waarsku); }
.meet.krities .waarde { color: var(--krities); }
.meet.dood .waarde { color: var(--dood); }
.meet.info .waarde { color: var(--info); }

/* Strook links = erns, sonder om die kleur op die teks te dwing. */
.strook { border-left: 3px solid var(--lyn-sterk); }
.strook.goed { border-left-color: var(--goed); }
.strook.waarsku { border-left-color: var(--waarsku); }
.strook.krities { border-left-color: var(--krities); }
.strook.info { border-left-color: var(--info); }
.strook.aksent { border-left-color: var(--aksent); }
.strook.dood { border-left-color: var(--dood); }

/* ── Rye ────────────────────────────────────────────────────────────────── */

.ry {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--r-klein); border: 1px solid transparent;
}
.ry + .ry { border-top: 1px solid var(--lyn); border-radius: 0; }
.ry:hover { background: var(--paneel-2); }
.ry .hoof { min-width: 0; flex: 1; }
.ry .naam { font-weight: 600; font-size: 14px; }
.ry .sub { font-size: 12px; color: var(--ink-2); margin-top: 1px; }
.ry .regs { text-align: right; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.ry.klikbaar { cursor: pointer; }
.ry.klikbaar:hover { border-color: var(--lyn); }

/* ── Tabelle ────────────────────────────────────────────────────────────── */

.tabelhouer { overflow-x: auto; }
table.t { border-collapse: collapse; width: 100%; font-size: 13.5px; }
table.t th {
  text-align: left; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 650; padding: 8px 11px;
  border-bottom: 1px solid var(--lyn); white-space: nowrap; position: sticky; top: 0;
  background: var(--paneel-2);
}
table.t td { padding: 7px 11px; border-bottom: 1px solid var(--lyn); vertical-align: top; }
table.t tr:last-child td { border-bottom: 0; }
table.t td.num, table.t th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.t td.mono { font-family: var(--mono); font-size: 12px; }
table.t tbody tr:hover td { background: var(--paneel-2); }

/* ── Kontroles ──────────────────────────────────────────────────────────── */

.knop {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--paneel); border: 1px solid var(--lyn-sterk);
  border-radius: var(--r-klein); padding: 6px 12px; cursor: pointer; font-size: 13.5px;
}
.knop:hover { background: var(--paneel-2); }
.knop.primer { background: var(--aksent); border-color: var(--aksent); color: #fff; font-weight: 600; }
.knop.primer:hover { filter: brightness(1.08); }
.knop:disabled { opacity: .5; cursor: default; }

.veld {
  background: var(--paneel); border: 1px solid var(--lyn-sterk); color: var(--ink);
  border-radius: var(--r-klein); padding: 7px 11px; font-size: 14px; width: 100%;
}
.veld::placeholder { color: var(--ink-2); opacity: .8; }
.veld.mono { font-family: var(--mono); }

.skakelaar {
  width: 36px; height: 20px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--lyn-sterk); position: relative; flex: 0 0 auto; transition: background .14s;
}
.skakelaar::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: transform .14s;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.skakelaar[aria-checked="true"] { background: var(--goed); }
.skakelaar[aria-checked="true"]::after { transform: translateX(16px); }
.skakelaar:disabled { opacity: .45; cursor: not-allowed; }

/* ── Boodskappe ─────────────────────────────────────────────────────────── */

.nota {
  border: 1px solid var(--lyn); border-left: 3px solid var(--info);
  background: var(--paneel); border-radius: var(--r-klein);
  padding: 10px 13px; font-size: 13.5px; margin: 10px 0;
}
.nota.krities { border-left-color: var(--krities); background: var(--krities-sag); }
.nota.waarsku { border-left-color: var(--waarsku); background: var(--waarsku-sag); }
.nota.goed { border-left-color: var(--goed); background: var(--goed-sag); }
.nota.dood { border-left-color: var(--dood); background: var(--dood-sag); }
.nota b { display: block; margin-bottom: 2px; }

.leeg {
  text-align: center; padding: 30px 16px; color: var(--ink-2); font-size: 13.5px;
  border: 1px dashed var(--lyn-sterk); border-radius: var(--r);
}

.laai { display: flex; align-items: center; gap: 9px; color: var(--ink-2); font-size: 13.5px; padding: 18px; }
.laai::before {
  content: ""; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--lyn-sterk); border-top-color: var(--aksent);
  animation: draai .8s linear infinite;
}
@keyframes draai { to { transform: rotate(360deg) } }

/* Skelet vir 'n kaart wat nog laai — hou die uitleg stil sodat niks spring nie. */
.skelet { background: var(--ink-3); border-radius: 5px; height: 11px; animation: klop 1.6s ease-in-out infinite; }

/* ── Log-aansig ─────────────────────────────────────────────────────────── */

.log {
  font-family: var(--mono); font-size: 12px; line-height: 1.65;
  background: var(--paneel-2); border: 1px solid var(--lyn); border-radius: var(--r-klein);
  padding: 9px 11px; max-height: 460px; overflow: auto; white-space: pre-wrap;
  word-break: break-word;
}
.log .reel { padding: 1px 0; border-left: 2px solid transparent; padding-left: 7px; margin-left: -7px; }
.log .reel.fout { border-left-color: var(--krities); }
.log .reel.waarsku { border-left-color: var(--waarsku); }
.log .tyd { color: var(--ink-2); }

/* ── Aanmeld ────────────────────────────────────────────────────────────── */

#aanmeld {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: var(--bg); z-index: 50; padding: 20px;
}
#aanmeld form {
  background: var(--paneel); border: 1px solid var(--lyn); border-radius: var(--r);
  box-shadow: var(--skadu); padding: 26px; width: min(340px, 100%);
  display: flex; flex-direction: column; gap: 11px;
}
#aanmeld h1 { margin: 0; font-size: 18px; font-weight: 650; }
#aanmeld p { margin: 0; color: var(--ink-2); font-size: 13px; }
#aanmeld .fout { color: var(--krities); font-size: 13px; min-height: 18px; }

.verborge { display: none !important; }
.stil { color: var(--ink-2); }
.klein { font-size: 12.5px; }
.mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }
.rek { flex: 1; }
.wrap { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.stapel { display: flex; flex-direction: column; gap: 12px; }
h3.afdeling {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
  margin: 22px 0 8px; font-weight: 650;
}