/* Agrilibrium — Produk Koördinering (PKA) prototipe
   Kleure gemonster uit die Die Fabriek-koppelvlak. */
:root{
  --ink:#002531;          /* Agrilibrium-donker — reg uit die logo */
  --ink-2:#0b3a4c;
  --nav-active:#1e453e;   /* aktiewe navigasie */
  --forest:#1b6d4d;       /* groen aksent */
  --lime:#a3da57;         /* Agrilibrium-groen — logo se pyl */
  --lime-dark:#91bc4d;
  --cream:#fcf8f4;        /* Agrilibrium-room — logo se agtergrondtoon */
  --card:#ffffff;
  --line:#e5e7eb;
  --line-soft:#f0eee9;
  --muted:#6b7b83;
  --muted-2:#9aa7ad;
  --amber:#c98a12;
  --amber-bg:#fdf3dd;
  --red:#b4443a;
  --red-bg:#fbeae8;
  --blue:#3b6f8c;
  --blue-bg:#e8f1f6;
  --green-bg:#e9f5ec;
  --radius:12px;
  --sidebar:280px;   /* smaller onder 1240px — sien die media-navraag onderaan */
  --shadow:0 1px 2px rgba(5,42,57,.06), 0 1px 3px rgba(5,42,57,.04);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  background:var(--cream); color:var(--ink);
  font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--forest)}
button{font-family:inherit}

/* ───────────────────────── uitleg ───────────────────────── */
.app{
  display:flex; min-height:100vh;
  /* die donker strook loop af tot onder, ook wanneer die bladsy langer as die venster is */
  background:linear-gradient(to right, var(--ink) 0 var(--sidebar), var(--cream) var(--sidebar));
}
.sidebar{
  width:var(--sidebar); flex:0 0 var(--sidebar);
  background:var(--ink); color:#fff;
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.brand{padding:22px 22px 20px; display:flex; align-items:center; gap:13px}
.brand img{width:38px;height:38px;flex:0 0 38px}
.brand h1{font-size:21px; margin:0; font-weight:700; letter-spacing:-.5px; line-height:1.1}
.brand-sub{font-size:12px; color:#8fbdcc; letter-spacing:.02em; margin-top:2px}

/* legende-ry op die oorsig — klik om die produkregister te filter */
.legend-row{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 8px; margin:0 -8px; border:0; border-radius:8px;
  background:transparent; cursor:pointer; text-align:left;
  border-bottom:1px solid var(--line-soft);
}
.legend-row:hover{background:#f7f5f1}
.legend-row b{margin-left:auto; font-variant-numeric:tabular-nums; font-size:15px}
.legend-row svg{color:var(--muted-2); flex:0 0 15px}
.legend-row:hover svg{color:var(--ink)}

.nav{padding:4px 12px; flex:1; overflow-y:auto}
.nav-label{
  padding:18px 12px 8px; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:#5c8798; font-weight:600;
}
.nav button{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:11px 14px; margin-bottom:2px;
  background:transparent; border:0; border-radius:10px;
  color:#d7e6ec; font-size:14.5px; text-align:left; cursor:pointer;
}
.nav button:hover{background:rgba(255,255,255,.06); color:#fff}
.nav button.active{background:var(--nav-active); color:#fff; font-weight:600}
.nav button.active svg{color:var(--lime)}
.nav svg{width:19px;height:19px;flex:0 0 19px;stroke-width:1.7}
.nav .count{
  margin-left:auto; font-size:11.5px; font-weight:700;
  background:rgba(255,255,255,.12); color:#cfe3ea;
  padding:1px 7px; border-radius:20px;
}
.nav button.active .count{background:var(--lime); color:var(--ink)}

.who{
  border-top:1px solid rgba(255,255,255,.09); padding:14px 20px;
  display:flex; align-items:center; gap:11px;
}
.who .av{
  width:32px;height:32px;border-radius:50%; background:#123f52;
  display:grid;place-items:center; color:var(--lime); flex:0 0 32px;
}
.who .wie-lyf{min-width:0}
.who .nm{font-size:13.5px;font-weight:600;color:#fff;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who .rl{font-size:11.5px;color:#7ba7b8;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* demo-gereedskap onder in die sybalk — JSON uit, JSON in, en herstel */
.tools{
  border-top:1px solid rgba(255,255,255,.09);
  padding:12px 14px 14px;
  display:flex; flex-direction:column; gap:7px;
}
.tools-row{display:flex; gap:7px}
.tool{
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:8px 9px; border-radius:8px; cursor:pointer;
  font:inherit; font-size:12.5px; font-weight:600; white-space:nowrap;
  background:rgba(255,255,255,.07); color:#cfe3ea;
  border:1px solid rgba(255,255,255,.10);
}
.tool:hover{background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.20)}
.tool svg{width:15px;height:15px;flex:0 0 15px;stroke-width:1.9}
.tool-uit{background:var(--lime); color:var(--ink); border-color:transparent}
.tool-uit:hover{background:var(--lime-dark); color:var(--ink); border-color:transparent}
.tool-wyd{width:100%}
.tool-uit-app:hover{background:rgba(180,68,58,.30); color:#fff; border-color:rgba(255,255,255,.22)}
.berging{
  display:flex; align-items:center; gap:7px;
  font-size:11px; line-height:1.35; color:#7ba7b8; padding:3px 2px 0;
}
.berging i{width:6px;height:6px;border-radius:50%;background:var(--lime);flex:0 0 6px}
.berging.af{color:#dcb977}
.berging.af i{background:var(--amber)}

.main{flex:1; min-width:0; padding:34px 40px 70px}
.page-head{display:flex; align-items:flex-start; gap:20px; margin-bottom:26px}
.page-head h2{font-size:30px; margin:0 0 6px; letter-spacing:-.6px; font-weight:800}
.page-head p{margin:0; color:var(--muted); font-size:14.5px; max-width:74ch}
.page-head .actions{margin-left:auto; display:flex; gap:10px; flex:0 0 auto}

/* ───────────────────────── knoppies ───────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:10px; border:1px solid transparent;
  font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.btn svg{width:17px;height:17px;stroke-width:1.9}
.btn-primary{background:var(--lime); color:var(--ink); box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--lime-dark)}
.btn-dark{background:var(--ink); color:#fff}
.btn-dark:hover{background:var(--ink-2)}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{background:#f7f5f1}
.btn-quiet{background:transparent;color:var(--muted);border-color:transparent;padding:8px 10px}
.btn-quiet:hover{color:var(--ink);background:#f0ede8}
.btn:disabled{opacity:.45; cursor:not-allowed}

/* ───────────────────────── kaarte ───────────────────────── */
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:22px;
}
.card-head{
  display:flex; align-items:center; gap:12px;
  padding:16px 20px; border-bottom:1px solid var(--line);
}
.card-head h3{margin:0; font-size:16px; font-weight:700}
.card-head .sub{color:var(--muted); font-size:13px; font-weight:400}
.card-head .right{margin-left:auto; color:var(--muted-2); font-size:12.5px}
.card-body{padding:20px}
.card-icon{
  width:30px;height:30px;border-radius:8px;background:var(--green-bg);
  display:grid;place-items:center;color:var(--forest);flex:0 0 30px;
}
.card-icon svg{width:17px;height:17px;stroke-width:1.8}

/* ───────────────────────── statistiek ───────────────────────── */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:24px}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow)}
.stat .lbl{font-size:12px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:600}
.stat .val{font-size:32px; font-weight:800; letter-spacing:-1px; margin:6px 0 2px}
.stat .hint{font-size:12.5px; color:var(--muted-2)}
.stat.accent{border-left:3px solid var(--lime)}
.stat.warn{border-left:3px solid var(--amber)}
.stat.good{border-left:3px solid var(--forest)}
.stat.info{border-left:3px solid var(--blue)}

/* Die tellers is knoppies. ’n <button> bring sy eie belyning en tipografie saam,
   en dié moet teruggestel word of die getal sit skeef in sy blokkie. */
.stat{font:inherit; color:inherit; text-align:left; width:100%; cursor:pointer;
  transition:border-color .12s, box-shadow .12s, transform .12s}
.stat:hover{border-color:var(--muted-2); transform:translateY(-1px)}
.stat:focus-visible{outline:2px solid var(--forest); outline-offset:2px}
/* Ingedruk: die hele blad is gefiltreer, so dit moet van ver af sigbaar wees
   en nie soos ’n muisaanwyser lyk nie.
   ⚠ Net drie kante — `border-color` sou die gekleurde linkerstreep saam
   doodverf, en dan verloor die teller sy eie kleur op die oomblik dat hy die
   blad regeer. Die ring lê buite die raam, so die streep bly staan. */
.stat.aan{border-top-color:var(--ink); border-right-color:var(--ink);
  border-bottom-color:var(--ink); box-shadow:0 0 0 1px var(--ink)}
.stat.aan .lbl{color:var(--ink)}

/* ’n Teller op nul het niks om te wys nie. Klikbaar sou hy die blad leegmaak en
   soos ’n fout lyk; dit is die verskil tussen “niks hier nie” en “stukkend”. */
.stat[disabled]{cursor:default; opacity:.55}
.stat[disabled]:hover{transform:none; border-color:var(--line)}

.oorsig-filter{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:-10px 0 22px; padding:10px 14px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--card)}
.oorsig-filter-teks{font-size:13.5px; color:var(--muted); flex:1}
.oorsig-filter .btn{padding:6px 12px; font-size:13px}

/* Sorteerbare kolomkoppe. Die pyl staan altyd in die vloei — hy word net
   deursigtig as die kolom nie die aktiewe een is nie, sodat die kop nie ’n
   halwe karakter breër word op die oomblik dat jy hom kies nie. */
th.sorteer{cursor:pointer; user-select:none; white-space:nowrap}
th.sorteer:hover{color:var(--ink)}
th.sorteer:focus-visible{outline:2px solid var(--forest); outline-offset:-2px}
th.sorteer .pyl{font-size:9px; margin-left:5px; opacity:0; vertical-align:1px}
th.sorteer:hover .pyl{opacity:.35}
th.sorteer.aan{color:var(--ink)}
th.sorteer.aan .pyl{opacity:1}

/* ───────────────────────── tabelle ───────────────────────── */
/* ’n Tabel wat sywaarts kan rol, moet SÊ dat sy kan rol. Hierdie vier gradiënte
   doen dit sonder JS: die twee wittes is gekoppel aan die tabel se eie rolposisie
   (background-attachment:local) en skuif dus saam weg sodra daar in daardie rigting
   nog inhoud is, en die twee skaduwees daaronder bly staan. Die skadu verskyn dus
   net op die kant waar iets weggesteek is.

   Onder omtrent 1200px pas die produkregister se sewe kolomme nie meer nie — dit
   is die enigste plek waar dit gebeur, en dan sien ’n mens die skadu regs. */
.tbl-wrap{
  overflow-x:auto;
  background:
    linear-gradient(to right,  #fff 34%, rgba(255,255,255,0)) left  center,
    linear-gradient(to left,   #fff 34%, rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0   50%, rgba(5,42,57,.15), rgba(5,42,57,0)) left  center,
    radial-gradient(farthest-side at 100% 50%, rgba(5,42,57,.15), rgba(5,42,57,0)) right center;
  background-repeat:no-repeat;
  background-size:38px 100%, 38px 100%, 15px 100%, 15px 100%;
  background-attachment:local, local, scroll, scroll;
}
/* ⚠ Met outomatiese uitleg meet die blaaier elke kolom teen sy inhoud, en een
   lang produknaam stoot die laaste drie kolomme by die kaart uit. Die tabel het
   wel ’n rolbak, maar ’n status wat net sigbaar is as jy sywaarts rol, is nie
   sigbaar nie. Die <colgroup> in app.js is wat hier tel; hierdie reël is wat dit
   laat geld. Sien lysKolGroep(). */
.vaste-lys{table-layout:fixed}
.vaste-lys td{overflow-wrap:break-word}
/* ⚠ Die globale `thead th{white-space:nowrap}` is die tweede helfte van dieselfde
   probleem: onder vaste uitleg krimp die SEL na sy verklaarde breedte, maar die
   kop se teks doen dit nie — hy loop oor sy buurman heen. "PRODUK" en "SPOOR"
   het letterlik oormekaar gelê. In ’n vaste lys vou die koppe dus. */
.vaste-lys thead th{white-space:normal; line-height:1.25}
.vaste-lys thead th,
.vaste-lys tbody td{padding-left:12px; padding-right:12px}
/* ’n Tweede reël onder die opskrif: die soort dokument en hoeveel lêers daaraan
   hang. Dit hou twee kolomme uit die tabel uit sonder om hulle weg te steek. */
.ry-sub{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:5px; font-weight:400;
}
table{width:100%; border-collapse:collapse; font-size:14px}
thead th{
  text-align:left; padding:11px 16px; font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; color:var(--muted);
  border-bottom:1px solid var(--line); white-space:nowrap; background:#fcfbf9;
}
thead th.num, td.num{text-align:right}
tbody td{padding:12px 16px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr.click{cursor:pointer}
tbody tr.click:hover{background:#fbfaf7}
td.prod{font-weight:600}
td.dim{color:var(--muted)}
td.mono{font-family:ui-monospace,"Cascadia Mono",Menlo,monospace; font-size:13px; color:var(--forest)}

/* ───────────────────────── merkers ───────────────────────── */
.tag{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600; white-space:nowrap;
}
/* ’n Statusplaatjie hoort op een reël; ’n VOLSIN wat toevallig ’n plaatjie dra —
   "Formulasie-protokol opstel" — hoort te vou. Sonder dit steek hy by die kaart
   se rand uit en die laaste woord is weg. */
.tag.vloei{white-space:normal; text-align:left; line-height:1.35; align-items:flex-start}
.tag.vloei .dot{margin-top:5px}
.tag.green{background:var(--green-bg); color:var(--forest)}
.tag.amber{background:var(--amber-bg); color:var(--amber)}
.tag.red{background:var(--red-bg); color:var(--red)}
.tag.blue{background:var(--blue-bg); color:var(--blue)}
.tag.grey{background:#f1f0ed; color:var(--muted)}
.tag.lime{background:#eef8d8; color:#5d7a1e}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 7px}

/* vorderingsbalk */
.bar{width:110px;height:7px;border-radius:5px;background:#eeece7;overflow:hidden;display:inline-block;vertical-align:middle}
.bar i{display:block;height:100%;background:var(--lime-dark);border-radius:5px}
.bar.full i{background:var(--forest)}
.bar-row{display:flex;align-items:center;gap:9px}
.bar-row .pc{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:34px}

/* Die stadium onder die balk. Die balk sê hoe ver, die stadium sê waarvandaan
   — hulle staan onder mekaar sodat die naam kan uitloop sonder om die kolom te
   dwing, en die naam breek nie oor twee reëls as die kolom breed genoeg is nie. */
.vord{display:flex;flex-direction:column;gap:3px}
.vord-stadium{font-size:12px;line-height:1.3;color:var(--muted);font-weight:500}

/* Die hernuwingsdatum, onder die registrasienommer. Stil totdat sy iets beteken:
   amber ’n maand voor die tyd, rooi sodra die registrasie verval het. */
/* ⚠ Die sel is `td.mono`. Sonder ’n eie font-family erf die datum die
   monospace en staan hy soos ’n kode langs ’n registrasienommer wat wél een is. */
.hernu{font-size:11.5px;line-height:1.35;color:var(--muted-2);margin-top:3px;
  white-space:nowrap;font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif}
.hernu.amber{color:var(--amber);font-weight:600}
.hernu.red{color:var(--red);font-weight:600}
.hernu svg{width:11px;height:11px;vertical-align:-1px;margin-right:3px}

/* ───────────────────────── filters ───────────────────────── */
.toolbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px}
.search{
  display:flex;align-items:center;gap:8px; background:#fff; border:1px solid var(--line);
  border-radius:10px; padding:0 12px; min-width:260px; flex:1; max-width:380px;
}
.search svg{width:16px;height:16px;color:var(--muted-2);flex:0 0 16px}
.search input{border:0;outline:0;padding:10px 0;font-size:14px;width:100%;background:transparent;color:var(--ink)}
select.filter{
  border:1px solid var(--line); background:#fff; border-radius:10px;
  padding:10px 12px; font-size:14px; color:var(--ink); cursor:pointer;
}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{
  padding:7px 14px;border-radius:20px;border:1px solid var(--line);background:#fff;
  font-size:13px;cursor:pointer;color:var(--muted);font-weight:500;
}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ───────────────────────── vorms ───────────────────────── */
.form-layout{display:grid; grid-template-columns:1fr 268px; gap:26px; align-items:start}
@media(max-width:1200px){.form-layout{grid-template-columns:1fr}}

.sect{border:1px solid var(--line); border-radius:var(--radius); background:#fff; margin-bottom:16px; box-shadow:var(--shadow)}
.sect-head{
  display:flex;align-items:center;gap:12px; padding:14px 18px; cursor:pointer;
  border-bottom:1px solid transparent;
}
.sect.open .sect-head{border-bottom-color:var(--line)}
.sect-letter{
  width:26px;height:26px;border-radius:7px;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:800;flex:0 0 26px;
}
.sect.done .sect-letter{background:var(--forest)}
.sect-head h4{margin:0;font-size:15px;font-weight:700;flex:1}
.sect-head .chev{color:var(--muted-2);transition:transform .15s}
.sect.open .sect-head .chev{transform:rotate(90deg)}
.sect-body{padding:18px; display:none}
.sect.open .sect-body{display:block}

.part-banner{
  display:flex;align-items:center;gap:12px; padding:13px 18px; border-radius:10px;
  margin:0 0 14px; font-size:13.5px;
}
.part-banner.p1{background:var(--ink); color:#cfe3ea}
.part-banner.p2{background:#f3f0ea; color:var(--muted); border:1px dashed #d8d3c8}
.part-banner b{color:#fff}
.part-banner.p2 b{color:var(--ink)}
.part-banner .lock{margin-left:auto;font-size:12px}

.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px 18px; align-items:end}
.grid .full{grid-column:1/-1}
@media(max-width:760px){.grid{grid-template-columns:1fr}}

.field > label{display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--ink)}
.field .hint{font-size:12px;color:var(--muted-2);font-weight:400;margin-left:4px}
.field input[type=text],.field input[type=date],.field input[type=number],
.field input[type=email],.field textarea,.field select{
  width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:9px;
  font-size:14px; font-family:inherit; color:var(--ink); background:#fff; outline:0;
}
.field textarea{min-height:82px; resize:vertical; line-height:1.5}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--forest); box-shadow:0 0 0 3px rgba(27,109,77,.1);
}
.field input:disabled,.field textarea:disabled,.field select:disabled{background:#f7f6f3;color:var(--muted-2)}

.opts{display:flex; flex-wrap:wrap; gap:8px}
.opt{
  display:inline-flex;align-items:center;gap:8px; padding:8px 14px;
  border:1px solid var(--line); border-radius:9px; background:#fff;
  font-size:13.5px; cursor:pointer; user-select:none;
}
.opt:hover{border-color:#cfd6d9}
.opt input{accent-color:var(--forest); margin:0}
.opt.on{border-color:var(--forest); background:var(--green-bg); color:var(--forest); font-weight:600}

/* herhalende rye (rou-materiale, komitee) */
.rep table{border:1px solid var(--line); border-radius:9px; overflow:hidden}
.rep thead th{background:#fcfbf9}
.rep input{border:0;outline:0;width:100%;padding:8px 10px;font-size:13.5px;background:transparent;font-family:inherit;color:var(--ink)}
.rep input:focus{background:#f4faf6}
.rep td{padding:0;border-bottom:1px solid var(--line-soft)}
/* ’n Notule se sel vou om en groei saam (field-sizing waar die blaaier dit ken). */
.rep textarea.rep-lang{border:0;outline:0;width:100%;padding:8px 10px;font-size:13.5px;background:transparent;
  font-family:inherit;color:var(--ink);resize:vertical;min-height:36px;field-sizing:content;display:block;line-height:1.4}
.rep textarea.rep-lang:focus{background:#f4faf6}
.rep td{vertical-align:top}
.rep-vink{display:flex;justify-content:center;padding:9px 0;cursor:pointer}
.rep-vink input{width:17px;height:17px;accent-color:var(--forest);cursor:pointer}
.rep td.act{width:38px;text-align:center;padding:0 4px}
.rep .del{border:0;background:transparent;color:var(--muted-2);cursor:pointer;padding:6px;border-radius:6px}
.rep .del:hover{color:var(--red);background:var(--red-bg)}
.rep-foot{display:flex;align-items:center;gap:14px;margin-top:10px}
.rep-total{margin-left:auto;font-size:13.5px;color:var(--muted)}
.rep-total b{color:var(--ink);font-size:15px}

/* Ou teks uit die dae toe die veld ’n enkele reël was. Hy staan bo die tabel,
   omgevou — die hele punt is dat ’n mens hom kan LEES sonder om te sleep. */
.rep-oud{
  display:flex; gap:9px; align-items:flex-start;
  margin:0 0 11px; padding:10px 12px;
  border:1px solid #e6dcc2; border-radius:9px; background:#fdf8ec;
  font-size:13px; line-height:1.5; color:var(--muted);
}
.rep-oud svg{flex:none; margin-top:1px; color:#b08a2e}
.rep-oud b{color:var(--ink)}
.rep-oud-toe{
  flex:none; margin-left:auto; border:0; background:transparent; cursor:pointer;
  color:#b08a2e; padding:2px; border-radius:6px; line-height:0;
}
.rep-oud-toe:hover{background:#f3e7c8; color:var(--ink)}
.rep-oud p{
  margin:5px 0 0; white-space:pre-wrap; overflow-wrap:anywhere;
  font-family:ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;
  font-size:12.5px; color:var(--ink);
}

/* foto's */
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.photo-drop{
  border:2px dashed #d8d3c8; border-radius:10px; aspect-ratio:4/3;
  display:grid;place-items:center;text-align:center;color:var(--muted-2);
  font-size:12.5px; cursor:pointer; background:#fcfbf9; padding:10px;
}
.photo-drop:hover{border-color:var(--forest);color:var(--forest);background:var(--green-bg)}
.photo-drop img{width:100%;height:100%;object-fit:cover;border-radius:8px}
/* ’n foto op die bediener: tik maak oop, net die × verwyder */
.foto-tegel{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--line-soft)}
.foto-tegel a{display:block;width:100%;height:100%}
.foto-tegel img{width:100%;height:100%;object-fit:cover;display:block}
.foto-del{
  position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;border:0;cursor:pointer;
  background:rgba(0,0,0,.55);color:#fff;
}
.foto-del:hover{background:#b3261e}

/* ── aanhegsels: sertifikate, foto's en ondersteunende dokumente ──────────
   'n Lêer is 'n naam, 'n grootte en 'n ding wat oopgemaak word. Anders as by
   'n foto is die naam die punt, nie die prentjie nie. */
.leers{display:flex;flex-direction:column;gap:8px}
.leer{
  display:flex;align-items:center;gap:11px;
  border:1px solid var(--line); border-radius:10px; background:#fff;
  padding:9px 11px;
}
.leer-ik{
  width:36px;height:36px;flex:0 0 36px;border-radius:8px;
  display:grid;place-items:center;background:var(--green-bg);color:var(--forest);
}
.leer-duim{
  width:36px;height:36px;flex:0 0 36px;border-radius:8px;overflow:hidden;
  display:block;background:var(--line-soft);
}
.leer-duim img{width:100%;height:100%;object-fit:cover;display:block}
.leer-lyf{min-width:0;flex:1}
.leer-naam{
  display:block;font-size:13.5px;font-weight:600;color:var(--ink);
  text-decoration:none; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding:4px 0;   /* ’n 20px-hoë skakel is ’n skakel wat ’n mens moet mik */
}
.leer-naam:hover{color:var(--forest);text-decoration:underline}
.leer-meta{font-size:11.5px;color:var(--muted-2);margin-top:1px}
.leer .del{border:0;background:transparent;color:var(--muted-2);cursor:pointer;padding:7px;border-radius:7px}
.leer .del:hover{color:var(--red);background:var(--red-bg)}
.leer-drop{
  border:2px dashed #d8d3c8; border-radius:10px; background:#fcfbf9;
  padding:20px 16px; display:grid;place-items:center;gap:4px;text-align:center;
  color:var(--muted); cursor:pointer;
}
.leer-drop:hover,.leer-drop.oor{border-color:var(--forest);color:var(--forest);background:var(--green-bg)}
.leer-drop span{font-size:13.5px}
.leer-drop small{font-size:11.5px;color:var(--muted-2)}
.leer-drop.oor{border-style:solid}
.leer-tel{
  display:inline-flex;align-items:center;gap:4px;
  font-size:12.5px;font-weight:600;color:var(--muted);
}

/* die dokumentkaart in die produkpaneel */
/* die vier kerndokumente — ✓ as daar een is, + om een te laai */
.kern-strook{display:flex;flex-wrap:wrap;gap:7px;padding:12px 16px 4px}
.kern{
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  padding:6px 11px;border-radius:999px;font:inherit;font-size:12.5px;font-weight:600;
  border:1px dashed var(--line);background:transparent;color:var(--muted);
}
.kern:hover{border-color:var(--forest);color:var(--forest)}
.kern.het{border-style:solid;border-color:transparent;background:var(--green-bg);color:var(--forest)}
.dok-item{
  display:flex;align-items:center;gap:11px;
  padding:9px 10px;border-radius:9px;border:1px solid var(--line-soft);
  margin-bottom:7px;
}
.dok-item.click{cursor:pointer}
.dok-item.click:hover{border-color:var(--forest);background:var(--green-bg)}
.dok-ik{
  width:30px;height:30px;flex:0 0 30px;border-radius:7px;
  display:grid;place-items:center;background:var(--line-soft);color:var(--forest);
}
.dok-lyf{min-width:0;flex:1}
.dok-lyf b{display:block;font-size:13.5px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dok-meta{font-size:11.5px;color:var(--muted-2);margin-top:1px}

/* sy-paneel in vorm */
.aside{position:sticky; top:24px}
.aside .card-body{padding:16px}
.steps{list-style:none;margin:0;padding:0}
.steps li{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13.5px;color:var(--muted);cursor:pointer}
.steps li:hover{color:var(--ink)}
.steps li .mk{
  width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line);
  display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--muted-2);flex:0 0 20px;
}
.steps li.done{color:var(--ink)}
.steps li.done .mk{background:var(--forest);border-color:var(--forest);color:#fff}
.steps li.cur .mk{border-color:var(--ink);color:var(--ink)}

/* ───────────────────────── modaal ───────────────────────── */
.modal-bg{
  position:fixed;inset:0;background:rgba(5,42,57,.45);z-index:50;
  display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto;
}
.modal{
  background:var(--cream); border-radius:14px; width:100%; max-width:960px;
  box-shadow:0 24px 60px rgba(5,42,57,.28); overflow:hidden;
}
.modal-head{
  display:flex;align-items:center;gap:14px;padding:18px 24px;
  background:var(--ink);color:#fff;
}
.modal-head h3{margin:0;font-size:18px;font-weight:700}
.modal-head .sub{font-size:12.5px;color:#8fbdcc}
.modal-head .x{margin-left:auto;background:transparent;border:0;color:#8fbdcc;cursor:pointer;padding:6px;border-radius:8px}
.modal-head .x:hover{background:rgba(255,255,255,.1);color:#fff}
.modal-body{padding:22px 24px; max-height:calc(100vh - 220px); overflow-y:auto}
.modal-foot{
  display:flex;align-items:center;gap:10px;padding:14px 24px;
  background:#fff;border-top:1px solid var(--line);
  /* ⚠ Die produkpaneel dra ses knoppies. Sonder omvou val "Evalueer" buite die
     modaal uit en niemand weet dat hy bestaan nie. */
  flex-wrap:wrap; row-gap:9px;
}
.modal-foot .btn{flex:0 0 auto}
/* Die produkpaneel se ses knoppies in twee groepe: links wat MET hierdie produk
   gebeur, regs wat NUUT begin word. Só vou hulle betekenisvol om wanneer hulle
   nie op een reël pas nie — nie een verdwaalde knoppie op ’n tweede reël nie. */
.modal-foot.twee-groepe{justify-content:space-between}
.voet-groep{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.modal-foot .spacer{flex:1}
.modal-foot .note{font-size:12.5px;color:var(--muted-2)}

/* ───────────────────────── allerlei ───────────────────────── */
.empty{text-align:center;padding:52px 20px;color:var(--muted-2)}
.empty svg{width:38px;height:38px;stroke-width:1.4;margin-bottom:12px;color:#cfd6d9}
.empty p{margin:0 0 4px;font-size:15px;color:var(--muted)}
.empty small{font-size:13px}

.kv{display:grid;grid-template-columns:190px 1fr;gap:9px 16px;font-size:14px}
.kv dt{color:var(--muted);font-size:13.5px}
.kv dd{margin:0}

.toast{
  position:fixed;top:22px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:10px;
  font-size:14px;box-shadow:0 8px 26px rgba(5,42,57,.3);z-index:90;
  display:flex;align-items:center;gap:10px;
}
.toast svg{width:17px;height:17px;color:var(--lime)}

.proto-note{
  display:flex;align-items:center;gap:10px; margin-bottom:22px;
  padding:11px 16px; border-radius:10px; background:#eef8d8;
  border:1px solid #d6ecab; color:#4d6a17; font-size:13px;
}
.proto-note svg{width:17px;height:17px;flex:0 0 17px}

.foot{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted-2);font-size:12.5px;
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
/* Die weergawe staan regs en stil. Dit is nie ’n mededeling nie — dit is die
   ding waarna ’n mens kyk as hy wil weet of hy sien wat in die brief staan. */
.foot-weergawe{margin-left:auto;font-variant-numeric:tabular-nums;opacity:.75}

@media print{
  .sidebar,.page-head .actions,.toolbar,.proto-note{display:none}
  .main{padding:0}
  .sect-body{display:block !important}
}

/* ───────────────────────── notas ───────────────────────── */
/* Die Notas-sel in die produkregister */
.nota-sel{max-width:340px}
.nota-teks{
  font-size:13.5px; line-height:1.45; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.nota-meta{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  font-size:11.5px; color:var(--muted-2); margin-top:3px;
}
.nota-tel{
  background:#f1f0ed; color:var(--muted); padding:1px 7px;
  border-radius:20px; font-weight:600;
}
.nota-leeg{
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  font-size:12.5px; color:var(--muted-2); font-style:italic;
}
.nota-leeg svg{width:13px;height:13px}
tbody tr.click:hover .nota-leeg{color:var(--forest); font-style:normal}

/* Die opsteller */
.nota-nuut{
  border:1px solid var(--line); border-radius:10px;
  background:#fcfbf9; padding:12px; margin-bottom:16px;
}
.nota-nuut textarea{
  width:100%; border:1px solid var(--line); border-radius:8px;
  padding:9px 11px; font-family:inherit; font-size:14px; color:var(--ink);
  background:#fff; outline:0; resize:vertical; min-height:70px; line-height:1.5;
}
.nota-nuut textarea:focus{border-color:var(--forest); box-shadow:0 0 0 3px rgba(27,109,77,.1)}
.nota-nuut-voet{display:flex; align-items:center; gap:9px; margin-top:10px; flex-wrap:wrap}
.nota-nuut-voet label{font-size:12.5px; color:var(--muted); font-weight:600}
.nota-nuut-voet input{
  border:1px solid var(--line); border-radius:8px; padding:8px 11px;
  font-size:13.5px; font-family:inherit; color:var(--ink); background:#fff;
  outline:0; width:190px;
}
.nota-nuut-voet input:focus{border-color:var(--forest); box-shadow:0 0 0 3px rgba(27,109,77,.1)}
.nota-nuut-voet .btn{margin-left:auto}

/* Die draad — jongste bo, niks word ooit oorgeskryf nie */
.nota-lys{display:flex; flex-direction:column; gap:0}
.nota{padding:13px 0 13px 16px; border-left:2px solid var(--line); position:relative}
.nota::before{
  content:''; position:absolute; left:-5px; top:19px;
  width:8px; height:8px; border-radius:50%;
  background:#d8d3c8; border:2px solid #fff;
}
.nota.jongste{border-left-color:var(--lime-dark)}
.nota.jongste::before{background:var(--lime-dark)}
.nota-kop{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:4px}
.nota-wie{font-size:13.5px; font-weight:700; color:var(--ink)}
.nota-wanneer{font-size:12px; color:var(--muted-2); font-variant-numeric:tabular-nums}
.nota-weg{
  display:flex; border:0; background:transparent; color:var(--muted-2);
  padding:4px; margin-left:auto; border-radius:6px; cursor:pointer;
}
.nota-weg:hover, .nota-weg:focus-visible{color:var(--red); background:var(--red-bg)}
.nota-lyf{font-size:14px; line-height:1.55; color:var(--ink); white-space:pre-wrap}
.nota-geen{margin:0; font-size:13.5px; color:var(--muted-2); text-align:center; padding:14px 0}

/* ═══════════════════════ vasgevriesde tabelkoppe ═══════════════════════ */
/* Die registrasietabel is lank. Die koppe bly staan terwyl die lys onder hulle
   deur rol — die tabel kry sy eie hoogte, want ’n sticky kop het ’n rolbak nodig
   om aan vas te steek. Die rand word ’n box-shadow, want ’n border op ’n
   sticky <th> verdwyn onder border-collapse. */
.tbl-wrap.vries{
  max-height:min(70vh, 680px);
  overflow:auto;
  scrollbar-gutter:stable;
}
.tbl-wrap.vries thead th{
  position:sticky; top:0; z-index:3;
  border-bottom:0;
  box-shadow:inset 0 -1px 0 var(--line), 0 1px 0 var(--line);
}
.tbl-wrap.vries tbody td{background:#fff}
.tbl-wrap.vries tbody tr.click:hover td{background:#fbfaf7}

/* ═══════════════════════ gekanselleerde produkte ═══════════════════════ */
/* ’n Gekanselleerde produk word nooit verwyder nie — hy word deurgehaal,
   sodat die register bly wys wat daar was en hoekom dit weg is. */
.uit{text-decoration:line-through; text-decoration-thickness:1.5px; text-decoration-color:var(--red); color:var(--muted)}
.uit-merk{margin-left:7px; vertical-align:middle}
.uit-merk svg{width:12px;height:12px;stroke-width:2}
tr.ry-uit td{background:#fcfaf9}
tr.ry-uit td:not(.prod){opacity:.62}
tr.ry-uit.click:hover td{background:#faf5f4}
.stat.stop{border-left:3px solid var(--red)}

.kans-baan{
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 16px; border-radius:10px; margin-bottom:20px;
  background:var(--red-bg); border:1px solid #f0c9c4; color:var(--red);
}
.kans-baan svg{width:18px;height:18px;flex:0 0 18px;margin-top:1px}
.kans-baan b{font-size:14px}
.kans-rede{color:var(--ink); font-size:13.5px; line-height:1.5; margin-top:4px}
.kans-meta{color:var(--muted); font-size:12px; margin-top:5px}

/* ═══════════════════════ toewysing per afdeling ═══════════════════════ */
/* Elke afdeling van die aansoek dra ’n afhandelingsdatum en ’n naam. */
.sect-tw{display:flex; align-items:center; gap:6px; margin-right:4px; flex:0 0 auto}
.sect-tw .tag svg{width:12px;height:12px;stroke-width:2}
.sect-head{flex-wrap:wrap; row-gap:8px}
@media(max-width:640px){.sect-tw{order:3; width:100%; margin:0}}

.sect-foot{
  display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap;
  margin:18px -18px -18px; padding:14px 18px;
  background:#fcfbf9; border-top:1px solid var(--line);
  border-radius:0 0 var(--radius) var(--radius);
}
.sect-foot.laat{background:var(--red-bg); border-top-color:#f0c9c4}
.sect-foot .sf-lbl{
  display:flex; align-items:center; gap:6px; align-self:center;
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); white-space:nowrap;
}
.sect-foot .sf-lbl svg{width:15px;height:15px}
.sect-foot .sf-veld{display:flex; flex-direction:column; gap:5px; min-width:180px}
.sect-foot .sf-veld label{font-size:12.5px; font-weight:600; color:var(--ink)}
.sect-foot input[type=date], .sect-foot select{
  border:1px solid var(--line); border-radius:9px; padding:8px 11px;
  font-size:13.5px; font-family:inherit; color:var(--ink); background:#fff; outline:0;
}
.sect-foot input[type=date]:focus, .sect-foot select:focus{
  border-color:var(--forest); box-shadow:0 0 0 3px rgba(27,109,77,.1);
}
.sf-laat{
  display:flex;align-items:center;gap:6px;align-self:center;margin-left:auto;
  font-size:12.5px;font-weight:600;color:var(--red);
}
.sf-laat svg{width:14px;height:14px}

/* keuselys van mense wat by die stelsel aanmeld */
select.persoon{
  width:100%; border:1px solid var(--line); border-radius:9px;
  padding:10px 12px; font-size:14px; font-family:inherit;
  color:var(--ink); background:#fff; outline:0; cursor:pointer;
}
select.persoon:focus{border-color:var(--forest); box-shadow:0 0 0 3px rgba(27,109,77,.1)}
select.persoon:disabled{background:#f7f6f3;color:var(--muted-2)}
select.rep-keuse{
  border:0; outline:0; width:100%; padding:8px 8px;
  font-size:13.5px; background:transparent; font-family:inherit;
  color:var(--ink); cursor:pointer;
}
select.rep-keuse:focus{background:#f4faf6}

/* die verantwoordelike persoon — ’n eie keuselys met × en + (app.js, vk*) */
.vk-knop{
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  width:100%; border:0; outline:0; background:transparent; padding:8px;
  font-family:inherit; font-size:13.5px; color:var(--ink); text-align:left; cursor:pointer;
}
.vk-knop:hover, .vk-knop:focus-visible{background:#f4faf6}
.vk-knop svg{color:var(--muted-2); flex:0 0 auto; transform:rotate(90deg)}
.vk-knop:disabled{cursor:default}
.vk-leeg{color:var(--muted-2)}
.vk-pop{
  position:fixed; z-index:80; max-height:320px; overflow-y:auto; padding:4px;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 8px 24px rgba(5,42,57,.16);
}
.vk-ry{display:flex; align-items:center; border-radius:7px}
.vk-ry:hover{background:#f4faf6}
.vk-ry.gekies .vk-kies{font-weight:600; color:var(--forest)}
.vk-kies{
  flex:1; display:flex; align-items:center; gap:6px; width:100%;
  border:0; background:transparent; border-radius:7px; padding:7px 10px;
  font-family:inherit; font-size:13.5px; color:var(--ink); text-align:left; cursor:pointer;
}
.vk-geen{color:var(--muted-2)}
.vk-geen:hover, .vk-nuut:hover{background:#f4faf6}
.vk-weg{
  display:flex; border:0; background:transparent; color:var(--muted-2);
  padding:5px; margin-right:4px; border-radius:6px; cursor:pointer;
}
.vk-weg:hover, .vk-weg:focus-visible{color:var(--red); background:var(--red-bg)}
.vk-nuut{color:var(--forest); font-weight:600; border-top:1px solid var(--line-soft); border-radius:0 0 7px 7px; margin-top:2px}

/* die opsomming in die sypaneel */
.tw-ry{display:flex; align-items:flex-start; gap:10px; padding:8px 0; cursor:pointer; border-bottom:1px solid var(--line-soft)}
.tw-ry:last-child{border-bottom:0}
.tw-ry:hover .tw-titel{color:var(--forest)}
.tw-let{
  width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line);
  display:grid;place-items:center;font-size:11px;font-weight:700;
  color:var(--muted-2);flex:0 0 20px;margin-top:1px;
}
.tw-ry.klaar .tw-let{background:var(--forest);border-color:var(--forest);color:#fff}
.tw-ry.laat .tw-let{background:var(--red-bg);border-color:#f0c9c4;color:var(--red)}
.tw-lyf{min-width:0}
.tw-titel{font-size:13px;font-weight:600;color:var(--ink);line-height:1.35}
.tw-meta{font-size:11.5px;color:var(--muted-2);margin-top:2px}
.tw-ry.laat .tw-meta{color:var(--red);font-weight:600}

/* ═══════════════════════ Slaag / Druip-toetse ═══════════════════════ */
.field.toets{
  border:1px solid var(--line); border-radius:10px; padding:14px 16px; background:#fcfbf9;
}
.field.toets.slaag{border-color:#c9e3d2; background:var(--green-bg)}
.field.toets.druip{border-color:#f0c9c4; background:var(--red-bg)}
.field.toets.kort{border-color:var(--red); box-shadow:0 0 0 3px rgba(180,68,58,.09)}
.toets-kop{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.toets-kop > label{margin:0; flex:1; min-width:180px}
.toets-knoppe{display:flex; gap:8px; flex:0 0 auto}
.tg{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 16px; border-radius:9px; border:1.5px solid var(--line);
  background:#fff; font-size:13.5px; font-weight:600; color:var(--muted); cursor:pointer;
}
.tg svg{width:15px;height:15px;stroke-width:2.4}
.tg input{position:absolute; opacity:0; width:0; height:0}
.tg:hover{border-color:#cfd6d9}
.tg-slaag.on{background:var(--forest); border-color:var(--forest); color:#fff}
.tg-druip.on{background:var(--red); border-color:var(--red); color:#fff}
.toets-rede{margin-top:14px; padding-top:14px; border-top:1px dashed #e2cfcb}
.toets-rede label{display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--ink)}
.toets-rede textarea{
  width:100%; border:1px solid var(--line); border-radius:9px; padding:10px 12px;
  font-family:inherit; font-size:14px; color:var(--ink); background:#fff;
  outline:0; resize:vertical; min-height:68px; line-height:1.5;
}
.toets-rede textarea:focus{border-color:var(--red); box-shadow:0 0 0 3px rgba(180,68,58,.1)}
.toets-kort{
  display:flex; align-items:center; gap:6px; margin-top:8px;
  font-size:12.5px; font-weight:600; color:var(--red);
}
.toets-kort svg{width:14px;height:14px;flex:0 0 14px}

/* ═══════════════════════ agendas en notas ═══════════════════════ */
.sub-sel{font-size:12px; color:var(--muted-2); font-weight:400; margin-top:3px; line-height:1.35}
td .tag svg{width:12px;height:12px;stroke-width:2}

@media print{
  .tbl-wrap.vries{max-height:none; overflow:visible}
  .tbl-wrap.vries thead th{position:static}
  .sect-foot{background:#fff}
}

/* @terugvoerlaag-begin — gestroop deur build-standalone.py --sonder-terugvoer */
/* ───────────────────────── terugvoer ─────────────────────────
   Anneri se notas oor die app self. Alles hier bo-op die app se eie lae:
   die modaal sit op z-index 50, die toast op 90 — die terugvoer sit hoër,
   want sy moet ook ʼn nota binne ʼn oop vorm kan los. */
#tv-laag{position:fixed;inset:0;pointer-events:none;z-index:200}

/* ⚠ Die terugvoerlaag mag nie oor die aanmeldskerm lê nie. Sy hele punt is om
   ’n nota by ’n element in die APP te los, en voor aanmelding is daar geen app.
   Dit staan binne die sentinels, sodat die skoon bou dit saam wegvat. */
body.afgemeld #tv-laag,
body.afgemeld .tv-knop,
body.afgemeld .tv-wenkbalk,
body.afgemeld .tv-paneel,
body.afgemeld .tv-opstel,
body.afgemeld .tv-borrel{display:none !important}

.tv-merker{
  position:absolute;top:0;left:0;margin:-30px 0 0 -5px;
  width:27px;height:27px;padding:0;border:0;border-radius:50% 50% 50% 4px;
  background:var(--red);color:#fff;cursor:pointer;pointer-events:auto;
  display:grid;place-items:center;
  box-shadow:0 2px 7px rgba(5,42,57,.35), 0 0 0 2px #fff;
  transition:box-shadow .12s, background .12s;
}
.tv-merker svg{width:14px;height:14px;position:absolute;opacity:.32}
.tv-merker b{font-size:12px;font-weight:800;line-height:1;position:relative}
.tv-merker:hover{background:#9c352c;box-shadow:0 3px 11px rgba(5,42,57,.45), 0 0 0 2px #fff}
.tv-merker.aktief{box-shadow:0 3px 11px rgba(5,42,57,.45), 0 0 0 3px var(--lime)}
.tv-merker.klaar{background:var(--muted-2);opacity:.75}
.tv-merker.flits{animation:tv-flits 1.7s ease-out}
@keyframes tv-flits{
  0%,100%{box-shadow:0 2px 7px rgba(5,42,57,.35), 0 0 0 2px #fff}
  25%,75%{box-shadow:0 2px 7px rgba(5,42,57,.35), 0 0 0 9px rgba(180,68,58,.28)}
}

.tv-tip{
  position:absolute;bottom:calc(100% + 9px);left:-6px;width:230px;
  background:var(--ink);color:#fff;border-radius:9px;padding:9px 11px;
  font-size:12.5px;line-height:1.45;font-weight:400;text-align:left;
  box-shadow:0 8px 22px rgba(5,42,57,.3);
  opacity:0;visibility:hidden;transition:opacity .12s;pointer-events:none;
}
.tv-tip i{display:block;font-style:normal;font-size:10.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#8fbdcc;margin-bottom:3px}
.tv-merker:hover .tv-tip{opacity:1;visibility:visible}

/* ── die opsteller en die leesborrel ── */
.tv-opstel,.tv-borrel{
  position:fixed;z-index:210;width:330px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 44px rgba(5,42,57,.26);
  font-size:14px;color:var(--ink);
}
.tv-borrel{width:300px;padding-bottom:4px}
.tv-opstel .tv-kop,.tv-borrel .tv-kop{
  display:flex;align-items:center;gap:9px;padding:11px 13px;
  border-bottom:1px solid var(--line-soft);
}
.tv-opstel .tv-kop b,.tv-borrel .tv-kop b{font-size:14px}
.tv-bel{display:grid;place-items:center;width:22px;height:22px;flex:0 0 22px;
  border-radius:50% 50% 50% 4px;background:var(--red);color:#fff}
.tv-bel svg{width:13px;height:13px}
.tv-nommer{display:grid;place-items:center;width:22px;height:22px;flex:0 0 22px;
  border-radius:50% 50% 50% 4px;background:var(--red);color:#fff;
  font-size:11.5px;font-weight:800}
.tv-x{margin-left:auto;background:transparent;border:0;color:var(--muted-2);
  cursor:pointer;font-size:21px;line-height:1;border-radius:6px;
  min-width:30px;min-height:30px;display:grid;place-items:center;padding:0}
.tv-x:hover{background:var(--line-soft);color:var(--ink)}

.tv-mik{
  margin:9px 13px 0;padding:5px 8px;border-radius:7px;background:var(--line-soft);
  font-size:11.5px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tv-soorte{display:flex;gap:5px;padding:9px 13px 0;flex-wrap:wrap}
.tv-soort{
  border:1px solid var(--line);background:#fff;color:var(--muted);
  border-radius:99px;padding:3px 10px;font-size:12px;font-weight:600;cursor:pointer;
}
.tv-soort:hover{border-color:var(--muted-2)}
.tv-soort.aan.amber{background:var(--amber-bg);border-color:#f0dfb4;color:var(--amber)}
.tv-soort.aan.red{background:var(--red-bg);border-color:#f0cdc8;color:var(--red)}
.tv-soort.aan.blue{background:var(--blue-bg);border-color:#cbdfea;color:var(--blue)}
.tv-soort.aan.green{background:var(--green-bg);border-color:#c8e4d0;color:var(--forest)}

.tv-opstel textarea{
  display:block;width:calc(100% - 26px);margin:9px 13px;padding:9px 10px;
  border:1px solid var(--line);border-radius:9px;font:inherit;font-size:13.5px;
  resize:vertical;color:var(--ink);background:#fff;
}
.tv-opstel textarea:focus{outline:2px solid var(--lime);outline-offset:-1px;border-color:var(--lime-dark)}
.tv-opstel .tv-voet,.tv-borrel .tv-voet{
  display:flex;align-items:center;gap:6px;padding:0 13px 11px;
}
.tv-opstel #tv-wie{
  width:118px;padding:5px 8px;border:1px solid var(--line);border-radius:7px;
  font:inherit;font-size:12.5px;color:var(--muted);
}
.tv-spasie{flex:1}
.tv-wenk{padding:0 13px 11px;font-size:11.5px;color:var(--muted-2)}

.tv-btn{
  border:1px solid var(--line);background:#fff;color:var(--ink);
  border-radius:8px;padding:5px 11px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
}
.tv-btn:hover{background:var(--line-soft)}
.tv-btn.aksie{background:var(--lime);border-color:var(--lime-dark);color:#243a08}
.tv-btn.aksie:hover{background:var(--lime-dark)}
.tv-btn.rooi{color:var(--red);border-color:#f0cdc8}
.tv-btn.rooi:hover{background:var(--red-bg)}

.tv-borrel p{margin:10px 13px 6px;font-size:13.5px;line-height:1.5}
.tv-borrel .tv-meta{margin:0 13px 10px;font-size:11.5px;color:var(--muted-2)}

/* ── die lys-paneel ── */
.tv-paneel{
  position:fixed;top:0;right:0;bottom:0;width:390px;max-width:92vw;z-index:205;
  background:var(--cream);border-left:1px solid var(--line);
  box-shadow:-14px 0 40px rgba(5,42,57,.16);
  display:flex;flex-direction:column;
}
.tv-paneel-kop{
  display:flex;align-items:center;gap:9px;padding:15px 16px;
  background:var(--ink);color:#fff;
}
.tv-paneel-kop b{font-size:16px}
.tv-paneel-kop .tag.grey{background:rgba(255,255,255,.13);color:#8fbdcc}
.tv-paneel-kop .tv-x{color:#8fbdcc}
.tv-paneel-kop .tv-x:hover{background:rgba(255,255,255,.1);color:#fff}
.tv-wys{
  display:flex;align-items:center;gap:8px;padding:10px 16px;
  background:#fff;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted);
}
.tv-lys{flex:1;min-height:0;overflow-y:auto;padding:6px 14px 14px}
.tv-groep h5{
  margin:14px 0 7px;font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-2);display:flex;align-items:center;gap:7px;
}
.tv-groep h5 span{background:#f1f0ed;color:var(--muted);border-radius:99px;
  padding:1px 7px;font-size:11px;letter-spacing:0}
.tv-item{
  display:flex;gap:10px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:11px;margin-bottom:8px;
}
.tv-item.klaar{opacity:.55}
.tv-item.klaar .tv-nommer{background:var(--muted-2)}
.tv-item-lyf{flex:1;min-width:0}
.tv-item-kop{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:5px}
.tv-item p{margin:0 0 5px;font-size:13.5px;line-height:1.45}
.tv-item .tv-meta{font-size:11.5px;color:var(--muted-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-item-aksies{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}
.tv-leeg{text-align:center;padding:46px 22px;color:var(--muted-2)}
.tv-leeg span{display:inline-grid;place-items:center;width:44px;height:44px;
  border-radius:50% 50% 50% 7px;background:var(--red-bg);color:var(--red);margin-bottom:12px}
.tv-leeg span svg{width:22px;height:22px}
.tv-leeg p{margin:0 0 5px;font-size:15px;color:var(--muted)}
.tv-leeg small{font-size:12.5px;line-height:1.5;display:block}
.tv-paneel-voet{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:12px 16px;
  background:#fff;border-top:1px solid var(--line);
}
.tv-paneel-voet .tv-btn{padding:8px 11px;text-align:center}

/* ── die aanknop en die eerste wenk ── */
.tv-knop{
  position:fixed;right:20px;bottom:20px;z-index:195;
  display:flex;align-items:center;gap:8px;
  background:var(--red);color:#fff;border:0;border-radius:99px;
  padding:10px 16px;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
  box-shadow:0 8px 22px rgba(5,42,57,.28);
}
.tv-knop:hover{background:#9c352c}
.tv-knop svg{width:16px;height:16px}
.tv-knop.weg{display:none}
.tv-knop.leeg{background:var(--ink);opacity:.82}
.tv-knop.leeg:hover{opacity:1}
.tv-tel{background:#fff;color:var(--red);border-radius:99px;
  padding:0 7px;font-size:12px;font-weight:800;min-width:19px;text-align:center}

/* Die wenk hang bo die aanknop, nie in die middel van die skerm nie, en sy
   vang géén kliek nie — net haar toemaak-kruisie doen dit. Sy mag nooit ʼn
   knoppie onder haar blokkeer terwyl sy daar staan nie. */
.tv-wenkbalk{
  position:fixed;right:20px;bottom:74px;z-index:196;pointer-events:none;
  display:flex;align-items:flex-start;gap:11px;width:min(330px,86vw);
  background:var(--ink);color:#fff;border-radius:11px;padding:12px 14px;
  font-size:13px;line-height:1.45;box-shadow:0 12px 32px rgba(5,42,57,.32);
}
.tv-wenkbalk .tv-bel{margin-top:1px}
.tv-wenkbalk .tv-x{pointer-events:auto}
.tv-wenkbalk .tv-x{color:#8fbdcc}
.tv-wenkbalk .tv-x:hover{background:rgba(255,255,255,.1);color:#fff}

@media (max-width:900px){
  .tv-knop span:not(.tv-tel){display:none}
  .tv-knop{padding:12px}
  .tv-wenkbalk{left:14px;right:14px;width:auto}
}
/* @terugvoerlaag-einde */

/* ══════════════════════════════════════════════════════════════════════════
   Anneri se ronde 1 en 2 — nuwe veldsoorte en veldtoestande
   ══════════════════════════════════════════════════════════════════════════ */

/* Nota 7 — die waarskuwing wat bo-aan Deel 1 staan. Dit moet swaarder weeg as
   ’n afdeling se eie wenk, want dit stop die hele proses. */
.deel-nota{
  display:flex; gap:11px; align-items:flex-start;
  margin:-6px 0 16px; padding:13px 16px;
  background:var(--amber-bg); border:1px solid #f0dfb4; border-left:3px solid var(--amber);
  border-radius:10px; color:#7d5a0d; font-size:13.5px; line-height:1.5;
}
.deel-nota svg{width:18px;height:18px;flex:0 0 18px;margin-top:1px;color:var(--amber)}

/* Nota 4 — die getal en sy eenheid staan langs mekaar en lees as één ding. */
.ge{display:flex; gap:8px}
.ge input{flex:1 1 auto; min-width:0}
.ge select{flex:0 0 132px}

/* Notas 19 en 20 — ’n veld wat nie van toepassing is nie. Hy bly sigbaar, want
   ’n veld wat wegraak laat niemand weet dat hy bestaan nie; hy word net stil. */
.field.dood > label{color:var(--muted-2)}
.field.dood input,
.field.dood select,
.field.dood textarea{
  background:#f7f6f4; color:var(--muted-2); border-style:dashed; cursor:not-allowed;
}
.field.dood textarea{min-height:56px}
.nvt{
  display:flex; gap:6px; align-items:center; margin-top:6px;
  font-size:12px; color:var(--muted); font-style:italic;
}
.nvt svg{width:13px;height:13px;flex:0 0 13px;color:var(--blue)}

/* ── Nota 11: ’n hele afdeling wat nog nie van toepassing is nie ───────────
   Weergawe 2 bestaan lank voor sy nodig is. Sy staan oop en leesbaar — die
   velde is daar, sodat niemand hoef te raai wat kom nie — maar sy is stil,
   sy tel nie in die vordering nie, en sy sê self hoekom sy stil is. */
/* ⚠ Die klas heet nvt-afd, nie nvt nie: ".nvt" is reeds die klein wenkie by ’n
   dooie VELD, en daardie reël is display:flex + italic. Sit dieselfde naam op
   ’n afdeling en die hele afdeling word ’n skuins flexboks. */
.sect.nvt-afd{opacity:.86}
.sect.nvt-afd .sect-head{background:#faf9f6}
.sect.nvt-afd .sect-letter{background:#f0eee9; color:var(--muted-2); box-shadow:none}
.sect.nvt-afd h4{color:var(--muted)}
.sect.nvt-afd .field > label{color:var(--muted-2)}
.sect.nvt-afd .field.toets{opacity:.62}
.sect.nvt-afd .tg{cursor:not-allowed}
.afd-nvt{
  display:flex; gap:9px; align-items:flex-start; margin-bottom:16px;
  background:var(--blue-bg); border:1px dashed #c5dae6; border-radius:10px;
  padding:11px 14px; font-size:13px; line-height:1.5; color:#2f5d75;
}
.afd-nvt svg{width:17px;height:17px;flex:0 0 17px;margin-top:1px;color:var(--blue)}
.steps li.nvt-stap{opacity:.6}
.steps li .stap-nvt{
  margin-left:auto; font-size:11px; letter-spacing:.02em; text-transform:uppercase;
  color:var(--muted-2); font-weight:600;
}

/* ── Nota 24: die onderwerp-blok ───────────────────────────────────────────
   ’n Herhaaltabel gee jou kolomme; ’n onderwerp het nie kolomme nodig nie maar
   ’n bladsy — die saak, die produkte, die besluit en die aksie onder mekaar.
   Elke blok is dus ’n kaartjie met sy eie nommer en sy eie skrapknoppie. */
.blokke{display:flex; flex-direction:column; gap:14px}
.blok{
  border:1px solid var(--line); border-radius:11px; background:#fdfcfa;
  padding:0 0 14px; overflow:hidden;
}
.blok-kop{
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:#f4f7f2; border-bottom:1px solid var(--line-soft);
}
.blok-kop b{font-size:14px; color:var(--ink); flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.blok-nr{
  flex:0 0 22px; height:22px; border-radius:7px; background:var(--ink); color:var(--lime);
  display:grid; place-items:center; font-size:12px; font-weight:700;
}
.blok-kop .del{border:0;background:transparent;color:var(--muted-2);cursor:pointer;padding:5px;border-radius:6px}
.blok-kop .del:hover{color:var(--red);background:var(--red-bg)}
.blok > .grid{padding:14px 14px 0}
.blok .field textarea{min-height:62px}

/* Die produkte onder ’n onderwerp. Name, nie skakels nie — sy het gesê name is
   genoeg — maar hulle word uit die register gekies sodat die spelling klop, want
   dis presies waarop die produkbladsy die aksie later herken. */
.prod-chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; min-height:26px; align-items:center}
.prod-chip{
  display:inline-flex; align-items:center; gap:5px; padding:4px 6px 4px 10px;
  background:var(--green-bg); border:1px solid #cfe6d6; border-radius:999px;
  font-size:12.5px; font-weight:600; color:var(--forest);
}
.prod-chip button{border:0;background:transparent;color:#7ba98c;cursor:pointer;padding:1px;display:grid;place-items:center;border-radius:999px}
.prod-chip button:hover{color:var(--red);background:#fff}
.prod-geen{font-size:12.5px;color:var(--muted-2);font-style:italic}
/* Die byvoeg-keuselys is ’n handeling, nie ’n veld nie — hy hoef nie die volle
   breedte te vat en soos ’n antwoord te lyk nie. */
.prodkies select{max-width:300px}

/* Wat ’n vergadering by ’n produk agterlaat — op die produkbladsy self. */
.verg-item{
  border:1px solid var(--line-soft); border-radius:10px; padding:11px 13px;
  margin-top:10px; background:#fdfcfa; cursor:pointer;
}
.verg-item:hover{border-color:#cfe0d5; background:#f8fbf8}
.verg-kop{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:6px}
.verg-kop b{font-size:13.5px; color:var(--ink)}
.verg-uit{margin-left:auto; font-size:12px; color:var(--muted-2)}
.verg-reel{display:flex; gap:9px; font-size:13px; line-height:1.55; padding:3px 0}
.verg-lbl{
  flex:0 0 58px; font-size:11px; text-transform:uppercase; letter-spacing:.03em;
  font-weight:700; color:var(--muted-2); padding-top:3px;
}
.verg-meta{display:block; font-size:12px; color:var(--muted); margin-top:2px}
.verg-reel .tag{margin-top:4px}

/* ══════════════════════════════════════════════════════════════════════════
   Anneri se ronde 4 — die afgeleide besluit en ’n tabel binne ’n blok
   ══════════════════════════════════════════════════════════════════════════ */

/* Nota 34 — die registrasiebesluit word afgelei. Hy lyk soos ’n poortveld sodat
   dit duidelik is dat hy by daardie vier hoort, maar hy dra geen kontrole nie:
   daar is niks om te klik nie, en die reël sê self waarop hy staan. */
.besluit-reel{
  display:flex; gap:9px; align-items:flex-start;
  font-size:13.5px; line-height:1.55; color:var(--ink);
}
.besluit-reel svg{width:16px;height:16px;flex:0 0 16px;margin-top:2px}
.besluit-reel b{font-weight:700}
.besluit-reel.wag{color:var(--muted)}
.besluit-reel.wag svg{color:var(--muted-2)}
.besluit-reel.wag b{color:var(--ink)}
.besluit-reel.ja,  .besluit-reel.ja svg{color:var(--forest)}
.besluit-reel.nee, .besluit-reel.nee svg{color:var(--red)}

/* Vraag 2 van 2026-09-07 — die aksielys binne ’n onderwerp. Sy erf die gewone
   .rep-tabel; net die maat verskil, want sy staan reeds binne ’n kaart. */
.blok-rep table{background:#fff}
.blok-rep thead th{font-size:11px; padding:7px 10px}
.blok-rep input,
.blok-rep .rep-keuse{font-size:13px}
.blok-rep .rep-foot{margin-top:8px}

/* ══════════════════════════════════════════════════════════════════════════
   Stand van sake — die bord
   ══════════════════════════════════════════════════════════════════════════ */

/* Elke toestand is sy eie kaart. Die kop dra die toestand, hoeveel daar is, en
   by wie dit lê — sodat ’n mens die blad kan aflees sonder om te sorteer. */
.bord-groep{margin-bottom:18px}
.bord-kop{
  display:flex; align-items:center; gap:11px;
  padding:14px 18px; border-bottom:1px solid var(--line-soft);
}
.bord-tel{
  font-size:12.5px; font-weight:700; color:var(--muted);
  background:#f1f0ed; border-radius:20px; padding:2px 10px;
}
.bord-wag{margin-left:auto; font-size:12.5px; color:var(--muted-2)}

.bord-tabel{min-width:1080px}
.bord-tabel th{font-size:11px; padding:8px 12px}
.bord-tabel td{padding:7px 12px; vertical-align:middle}
.bord-naam{font-weight:600; color:var(--ink); cursor:pointer}
.bord-naam:hover{color:var(--forest); text-decoration:underline}
.bord-merk{margin-left:7px; font-size:10.5px; padding:1px 7px; vertical-align:middle}
.bord-moet{
  display:inline-flex; align-items:center; gap:3px;
  margin-left:5px; color:var(--forest); font-weight:700;
}
.bord-tabel .sub-sel{margin-top:3px}
.bord-moet svg{width:11px;height:11px}

/* Die twee wysigbare velde en die twee keuselyste. Hulle moet soos ’n tabel lyk
   en soos ’n vorm werk — sonder rame tot jy hulle raak. */
.bord-tabel input[type=text],
.bord-tabel input[type=date],
.bord-sel{
  width:100%; border:1px solid transparent; border-radius:7px;
  padding:6px 8px; font-family:inherit; font-size:13px; color:var(--ink);
  background:transparent; outline:0;
}
.bord-tabel input[type=text]:hover,
.bord-tabel input[type=date]:hover,
.bord-sel:hover{border-color:var(--line); background:#fff}
.bord-tabel input[type=text]:focus,
.bord-tabel input[type=date]:focus,
.bord-sel:focus{border-color:var(--forest); background:#fff}
.bord-sel{appearance:auto; cursor:pointer}

/* “sedert onbekend” is nie ’n leemte nie, dis ’n knoppie: een klik en die klok
   begin loop. Dis die enigste plek waar die bord om iets vra. */
.bord-sedert{font-size:13px; color:var(--muted)}
.bord-datum-knop{
  border:1px dashed var(--line); background:transparent; cursor:pointer;
  border-radius:7px; padding:4px 9px; font-family:inherit;
  font-size:11.5px; font-style:italic; color:var(--muted-2);
}
.bord-datum-knop:hover{border-color:var(--forest); color:var(--forest); background:var(--green-bg)}

/* Die twee lyste stry. Dit staan bo-aan die blad omdat dit die een ding is wat
   niemand kon sien solank die lyste apart gelê het nie. */
.bord-waarsku{
  background:var(--red-bg); border:1px solid #f0c9c4; border-left:3px solid var(--red);
  border-radius:var(--radius); padding:16px 20px; margin-bottom:20px;
}
.bw-kop{display:flex; align-items:center; gap:9px; color:var(--red); margin-bottom:7px}
.bw-kop svg{flex:0 0 18px}
.bord-waarsku p{margin:0 0 12px; font-size:13.5px; line-height:1.55; color:#7a3b34}
.bw-lys{display:flex; flex-wrap:wrap; gap:7px}
.bw-chip{
  border:1px solid #e6b3ac; background:#fff; color:var(--red); cursor:pointer;
  border-radius:20px; padding:4px 13px; font-family:inherit; font-size:12.5px; font-weight:600;
}
.bw-chip:hover{background:var(--red); color:#fff}

/* ── die verslag ── */
/* Twee van die drie stroke is nie ’n alarm nie, hulle is ’n leemte: dieselfde
   vorm, blou in plaas van rooi, sodat die rooi een bly beteken wat hy beteken. */
.bord-waarsku.sag{background:var(--blue-bg); border-color:#c7dbe8; border-left-color:var(--blue)}
.bord-waarsku.sag .bw-kop{color:var(--blue)}
.bord-waarsku.sag p{color:#38566b}
.bord-waarsku.sag .bw-chip{border-color:#bcd4e4; color:var(--blue)}
.bord-waarsku.sag .bw-chip:hover{background:var(--blue); color:#fff}
.stat .val.geld{font-size:25px; letter-spacing:-.4px; white-space:nowrap}
.bw-geld{margin-left:7px; font-variant-numeric:tabular-nums; opacity:.72}
.bw-beslis{display:flex; gap:8px; align-items:flex-start; margin:0 0 12px;
  padding-top:11px; border-top:1px solid #f0c9c4;
  font-size:13.5px; line-height:1.55; color:#7a3b34}
.bw-beslis svg{flex:0 0 15px; margin-top:3px}

/* ⚠ Sonder table-layout:fixed reken die blaaier elke kolom se breedte uit sy
   inhoud, en die geldkolom — die punt van die blad — word van die skerm af
   gestoot in haar 1239px-venster. Die colgroup is die enigste ding wat dit hou. */
.verslag-tabel{table-layout:fixed}
.verslag-tabel td, .verslag-tabel th{padding-left:13px; padding-right:13px}
/* thead is orals nowrap; met table-layout:fixed loop ’n lang kop oor sy buurman. */
.verslag-tabel thead th{white-space:normal}
.verslag-tabel td.prod{overflow-wrap:anywhere}
.verslag-tabel td.geld, .verslag-tabel th.geld{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.verslag-tabel td.tel,  .verslag-tabel th.tel {text-align:right; font-variant-numeric:tabular-nums}
.verslag-tabel .sub{font-size:11.5px; margin-top:2px}
.reg-kat{display:flex; align-items:center; gap:8px; margin-top:5px; font-weight:400; font-size:11.5px}
.reg-kat .dim{white-space:nowrap; font-variant-numeric:tabular-nums}
.reg-kat .tag{font-size:10.5px; padding:2px 7px}
.verslag-tabel tfoot td{
  border-top:2px solid var(--line); font-weight:700; background:var(--line-soft);
  position:sticky; bottom:0;
}

.bord-nota{
  display:flex; gap:11px; align-items:flex-start;
  padding:13px 17px; margin-bottom:20px;
  background:var(--blue-bg); border:1px solid #cfe0ea; border-left:3px solid var(--blue);
  border-radius:10px; font-size:13.5px; line-height:1.55; color:#2c5468;
}
.bord-nota svg{flex:0 0 16px; margin-top:2px; color:var(--blue)}

/* Die rou tabel bly bereikbaar — sy is die bron waaruit die bord gebou is. */
.bord-rou{margin-top:26px}
.bord-rou summary{
  cursor:pointer; font-size:13px; color:var(--muted);
  padding:9px 2px; user-select:none;
}
.bord-rou summary:hover{color:var(--forest)}
.bord-rou[open] summary{margin-bottom:12px}

@media print{
  .blok{break-inside:avoid}
  .verg-item{break-inside:avoid}
  .blok-rep{break-inside:avoid}
  .bord-groep{break-inside:avoid}
  .bord-datum-knop{border:0}
}

/* ═══════════════════════ aanmeldskerm ═══════════════════════
   Die app bly heeltemal weg tot daar aangemeld is. Die klas staan van die begin
   af op <body> in index.html, sodat die sybalk nie ’n oomblik verbyflits nie. */
body.afgemeld .app,
body.afgemeld #toast-root,
body.afgemeld #modal-root{display:none}

.aanmeld{
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:22px; padding:32px 20px;
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(163,218,87,.16), transparent 62%),
    var(--ink);
}
.aanmeld-kaart{
  width:100%; max-width:392px; background:var(--card);
  border-radius:16px; padding:34px 32px 28px;
  box-shadow:0 18px 44px rgba(0,16,22,.34), 0 2px 6px rgba(0,16,22,.18);
  display:flex; flex-direction:column;
}
.aanmeld-merk{display:block; height:38px; width:auto; margin:0 0 20px; object-fit:contain}
.aanmeld-kaart h1{font-size:21px; font-weight:700; margin:0; letter-spacing:-.2px}
.aanmeld-sub{font-size:13.5px; color:var(--muted); margin:5px 0 22px}

.aanmeld-kaart label{
  font-size:12.5px; font-weight:600; color:var(--ink);
  margin-bottom:6px; display:block;
}
.aanmeld-kaart input{
  width:100%; font:inherit; font-size:14.5px;
  padding:11px 13px; margin-bottom:16px;
  border:1px solid var(--line); border-radius:9px; background:#fcfbf9; color:var(--ink);
}
.aanmeld-kaart input:focus{
  outline:none; border-color:var(--forest); background:#fff;
  box-shadow:0 0 0 3px rgba(27,109,77,.12);
}
.aanmeld-fout{
  font-size:13px; color:var(--red); background:var(--red-bg);
  border:1px solid #f0c9c4; border-radius:8px;
  padding:9px 11px; margin:-4px 0 16px;
}
.aanmeld-knop{width:100%; justify-content:center; padding:11px; font-size:14.5px}
.aanmeld-voet{
  font-size:11.5px; line-height:1.55; color:var(--muted-2);
  border-top:1px solid var(--line-soft); margin-top:22px; padding-top:14px;
}
.aanmeld-voet b{color:var(--muted)}
.aanmeld-onder{font-size:12px; color:#5d8697; letter-spacing:.3px}

@media (max-width:460px){
  .aanmeld-kaart{padding:26px 22px 22px}
}

/* ── nouer skerms ──────────────────────────────────────────────────────────
   Die tabelle pas tot by 1239px, wat Anneri se venster is. Daaronder koop ’n
   smaller sybalk ongeveer 70px terug — dit help elke blad, nie net die tabelle
   nie — en waar dit steeds nie pas nie, sê die skadu regs dat daar meer is. */
@media (max-width:1240px){
  :root{--sidebar:212px}
  .brand h1{font-size:17px}
  .nav button{padding:8px 12px; font-size:13.5px}
  .who{padding:12px 14px}
  .tool{font-size:11.5px; padding:8px 6px}
}

/* Aksie-items: die stand is ’n knoppie vir wie vergaderings mag wysig. */
button.aksie-wissel{border:0;cursor:pointer;font:inherit}
button.aksie-wissel:hover{box-shadow:inset 0 0 0 1px currentColor}
button.aksie-wissel.grey svg{opacity:.35}
.card-head .right.chips .chip{padding:4px 11px;font-size:12.5px}

/* Besig: die Agrilibrium-merk draai terwyl ’n klik op die bediener wag. */
.besig{
  position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
  background:rgba(250,248,243,.45); backdrop-filter:blur(1.5px); animation:besig-in .18s ease-out;
}
.besig-kaart{
  display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 26px 14px;
  border-radius:16px; background:var(--card); border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(0,37,49,.18); font-size:13px; color:var(--muted);
}
.besig-merk{width:46px; height:46px; animation:besig-draai 1.1s cubic-bezier(.5,.15,.5,.85) infinite}
@keyframes besig-in{from{opacity:0} to{opacity:1}}
@keyframes besig-draai{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  .besig, .besig-merk{animation:none}
}

/* Aksie-items: ’n afgemerkte ry gly regs uit en vou dan toe. */
.tbl-wrap.gly-aan{overflow:hidden}
tr.ry-gly td{transform:translateX(110%); opacity:0;
  transition:transform .32s cubic-bezier(.55,0,.75,.3), opacity .32s ease-in}
tr.ry-gly td:nth-child(2){transition-delay:.02s} tr.ry-gly td:nth-child(3){transition-delay:.04s}
tr.ry-gly td:nth-child(4){transition-delay:.06s} tr.ry-gly td:nth-child(5){transition-delay:.08s}
tr.ry-vou td{padding-top:0; padding-bottom:0; font-size:0; line-height:0; border-color:transparent;
  transition:padding .2s ease, font-size .2s ease, line-height .2s ease}
tr.ry-vou td *{display:none}

/* die dokument se skakel terug na sy laboratoriumtoets */
.lb-skakel{display:inline-flex;align-items:center;gap:6px;padding:8px 0;font-weight:600;color:var(--forest);text-decoration:none}
.lb-skakel:hover{text-decoration:underline}

/* ── UAT ────────────────────────────────────────────────────────────────
   uat-pka.melior.co.za: ’n oranje strook bo-aan elke blad, sodat niemand ’n
   regte toets in die toetsomgewing log nie. Hy bly staan as die blad rol. */
.uat-strook{
  /* fixed, nie sticky nie: op ’n smal skerm rol die blad sywaarts en ’n sticky
     strook rol saam uit sig */
  position:fixed;top:0;left:0;right:0;z-index:60;height:34px;
  display:flex;align-items:center;justify-content:center;gap:6px;padding:0 16px;
  background:#e8730c;color:#fff;font-size:13.5px;text-align:center;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
body.uat{padding-top:34px}
@media (max-width:600px){ .uat-strook .uat-meer{display:none} }
body.uat .sidebar{top:34px;height:calc(100vh - 34px)}