/* Kendrix design-systeem — app-laag (dashboards en tools)
   Bouwt op tokens.css + components.css. Klassen met voorvoegsel app- vormen de schil;
   kpi-, rij-, status-, paneel- en tijdlijn- zijn de bouwstenen. Zie TOEPASSEN-IN-APPS.md. */

/* ---------- Schil: zijbalk + hoofdvlak ---------- */
.app { display: grid; grid-template-columns: 1fr; min-height: 100dvh; background: var(--canvas); color: var(--tekst-2); font-size: var(--tekst-s); }
@media (min-width: 60rem) { .app { grid-template-columns: 14rem 1fr; } }
.app-zij { display: none; flex-direction: column; border-right: 1px solid var(--lijn); padding: var(--r-4) var(--r-3); background: rgba(255,255,255,.015); position: sticky; top: 0; height: 100dvh; overflow-y: auto; }
@media (min-width: 60rem) { .app-zij { display: flex; } }
.app-merk { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--tekst); margin: 2px 6px 18px; font-size: 0; }
/* Het echte woordmerk (0.1.2, 17 okt 2026): het <i> tekent KENDRIX als masker in de
   tekstkleur, dus het volgt het thema (licht én donker). De getypte naam ernaast in
   de HTML blijft staan voor schermlezers en zoekmachines, maar is onzichtbaar
   (font-size 0 op de ouder; de kinderen krijgen hun maat terug). Het masker is het
   witte PNG uit Bedrijf/Kendrix Huisstijl, ingebed zodat geen app een bestand hoeft
   te kopiëren. Eerder stond hier een geel vierkantje als plaatshouder. */
.app-merk i { flex: 0 0 auto; display: inline-block; height: 18px; aspect-ratio: 1000 / 224; background: currentColor; border-radius: 0;
  -webkit-mask: url("data:image/png;base64,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") center / contain no-repeat; mask: url("data:image/png;base64,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") center / contain no-repeat; }
.app-merk > * { font-size: var(--tekst-s); }
.app-merk small { margin-left: auto; font-weight: 400; color: var(--tekst-3); font-size: var(--tekst-xs); }
.app-nav { display: grid; gap: 2px; }
.app-nav a { display: flex; justify-content: space-between; align-items: center; gap: var(--r-2); padding: 7px 8px; border-radius: var(--radius-s); color: var(--tekst-3); transition: background var(--overgang), color var(--overgang); }
.app-nav a:hover { color: var(--tekst); background: rgba(255,255,255,.035); }
.app-nav a.actief, .app-nav a[aria-current="page"] { background: rgba(255,255,255,.06); color: var(--tekst); }
.app-nav a b, .teller { font-weight: 500; font-family: var(--font-mono); font-size: 10px; color: var(--tekst-3); background: rgba(255,255,255,.06); padding: 1px 6px; border-radius: 999px; }
.app-groep { margin: 16px 8px 6px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-3); }
.app-zij-voet { margin-top: auto; padding: var(--r-3) 8px 0; font-size: var(--tekst-xs); color: var(--tekst-3); border-top: 1px solid var(--lijn); }
.app-zij-voet a { color: var(--tekst-2); }
/* Uitloggen (0.1.4): altijd een tekstknop onderaan de voet, in elke app op dezelfde plek. */
.app-zij-voet .knop-tekst { margin: var(--r-2) 0 0 -10px; }

/* Mobiel: de zijbalk wordt een horizontale balk bovenin */
.app-mobiel { display: flex; gap: 2px; overflow-x: auto; padding: var(--r-2) var(--r-3); border-bottom: 1px solid var(--lijn); scrollbar-width: none; }
.app-mobiel::-webkit-scrollbar { display: none; }
.app-mobiel a { white-space: nowrap; padding: 6px 10px; border-radius: var(--radius-s); color: var(--tekst-3); font-size: var(--tekst-xs); font-weight: 500; }
.app-mobiel a.actief { background: rgba(255,255,255,.06); color: var(--tekst); }
.app-mobiel a b { margin-left: 6px; }
@media (min-width: 60rem) { .app-mobiel { display: none; } }

.app-hoofd { display: flex; flex-direction: column; min-width: 0; }
.app-balk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--r-3); padding: 10px var(--r-5); border-bottom: 1px solid var(--lijn); position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--canvas) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.app-balk h1 { font-size: var(--tekst-m); font-weight: 600; color: var(--tekst); letter-spacing: -.01em; }
.app-balk h1 span { color: var(--tekst-3); font-weight: 400; }
.app-balk-acties { display: flex; align-items: center; gap: var(--r-2); }
.app-zoek { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--lijn-sterk); border-radius: var(--radius-s); color: var(--tekst-3); font-size: var(--tekst-xs); min-width: 12rem; background: transparent; }
@media (max-width: 47.99rem) { .app-balk-acties { flex: 1 1 100%; } .app-zoek { flex: 1; min-width: 0; } }
/* De invoer erin is kaal, ook als de app zelf alle inputs een rand geeft; de focusring zit op de balk. */
.app-zoek input, .app-zoek input[type="search"] { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; color: var(--tekst); font: inherit; font-size: var(--tekst-xs); outline: none; width: 100%; min-width: 0; }
.app-zoek input:focus, .app-zoek input[type="search"]:focus { border: 0; box-shadow: none; outline: none; }
.app-zoek input::-webkit-search-decoration, .app-zoek input::-webkit-search-cancel-button { -webkit-appearance: none; }
.app-zoek:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-zacht); color: var(--tekst); }
.app-zoek kbd { margin-left: auto; font-family: var(--font-mono); font-size: 10px; border: 1px solid var(--lijn-sterk); border-radius: 4px; padding: 0 5px; }
.app-inhoud { padding: var(--r-5); display: grid; gap: var(--r-5); align-content: start; }
.app-inhoud-smal { max-width: 40rem; }

/* ---------- Kengetallen ---------- */
.kpi-raster { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--lijn); border-radius: var(--radius-l); overflow: hidden; background: var(--vlak); }
.kpi { padding: 14px 18px; border-right: 1px solid var(--lijn); min-width: 0; }
.kpi:last-child { border-right: 0; }
.kpi small { display: block; color: var(--tekst-3); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.kpi strong { color: var(--tekst); font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.kpi em { font-style: normal; font-size: 11px; margin-left: 8px; font-family: var(--font-mono); color: var(--tekst-3); }
.kpi em.goed { color: var(--ok); } .kpi em.slecht { color: var(--let-op); }
@media (max-width: 47.99rem) { .kpi-raster { grid-template-columns: 1fr; } .kpi { border-right: 0; border-bottom: 1px solid var(--lijn); } .kpi:last-child { border-bottom: 0; } }

/* ---------- Lijst (rijen) ---------- */
.lijst { border: 1px solid var(--lijn); border-radius: var(--radius-l); overflow: hidden; background: var(--vlak); }
.rij { display: grid; grid-template-columns: 3.5rem 1fr auto auto; gap: 12px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--lijn); color: inherit; transition: background var(--overgang); }
.rij > * { min-width: 0; }
.rij:last-child { border-bottom: 0; }
a.rij:hover { background: rgba(255,255,255,.025); }
.rij-kop { color: var(--tekst-3); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding-block: 8px; background: rgba(255,255,255,.015); }
.rij .tijd { font-family: var(--font-mono); font-size: 11px; color: var(--tekst-3); }
.rij .naam { color: var(--tekst); font-weight: 500; }
.rij .bron { color: var(--tekst-3); margin-left: 6px; }
.rij .reactie { font-family: var(--font-mono); font-size: 11px; color: var(--tekst-3); min-width: 3rem; text-align: right; }
.rij.geselecteerd { background: rgba(255,255,255,.035); box-shadow: inset 2px 0 0 var(--accent); }
.rij .onder { display: block; color: var(--tekst-3); font-size: var(--tekst-xs); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 47.99rem) { .rij { grid-template-columns: 3rem 1fr auto; gap: 8px; padding-inline: 12px; } .rij .reactie { display: none; } .rij .bron { display: block; margin-left: 0; } }

/* ---------- Statuspil ---------- */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--lijn-sterk); white-space: nowrap; color: var(--tekst-3); }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.status-ok { color: var(--ok); } .status-bezig { color: var(--accent); } .status-wacht { color: var(--tekst-3); } .status-let-op { color: var(--let-op); }
/* Een pil naast een kop hangt in het midden van de regel, niet op de basislijn */
h1 .status, h2 .status, h3 .status, .app-balk h1 .status { vertical-align: middle; margin-inline-start: .4em; position: relative; top: -.1em; letter-spacing: 0; }

/* ---------- Werkvlak met detailpaneel ---------- */
.werkvlak { display: grid; gap: var(--r-5); align-items: start; }
.werkvlak > * { min-width: 0; }
@media (min-width: 72rem) { .werkvlak { grid-template-columns: 1fr 22rem; } }
.paneel { border: 1px solid var(--lijn); border-radius: var(--radius-l); background: var(--vlak); padding: var(--r-5); display: grid; gap: var(--r-4); }
@media (min-width: 72rem) { .paneel { position: sticky; top: 4rem; max-height: calc(100dvh - 5rem); overflow-y: auto; } }
.paneel h2 { font-size: var(--tekst-m); color: var(--tekst); }
.paneel .sub { color: var(--tekst-3); font-size: var(--tekst-xs); margin-top: 2px; }
.eig { display: grid; grid-template-columns: 6rem 1fr; gap: 6px 8px; font-size: var(--tekst-xs); }
.eig span:nth-child(odd) { color: var(--tekst-3); }
.eig span:nth-child(even) { color: var(--tekst); }
.paneel-acties { display: flex; flex-wrap: wrap; gap: var(--r-2); }
.paneel-acties .knop { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 6px; }
.paneel hr { border: 0; border-top: 1px solid var(--lijn); margin: 0; }
.paneel-kop { display: flex; justify-content: space-between; align-items: start; gap: var(--r-3); }

/* ---------- Tijdlijn ---------- */
.tijdlijn { list-style: none; margin: 0; padding: 0; position: relative; }
.tijdlijn::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--lijn-sterk); }
.tijdlijn li { position: relative; padding-left: 20px; margin-bottom: 12px; font-size: var(--tekst-xs); }
.tijdlijn li:last-child { margin-bottom: 0; }
.tijdlijn li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--vlak-3); border: 1px solid var(--lijn-sterk); }
.tijdlijn li.klaar::before { background: var(--ok); border-color: var(--ok); box-shadow: 0 0 8px var(--ok); }
.tijdlijn li.nu::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 8px var(--accent); }
.tijdlijn li b { display: block; color: var(--tekst); font-weight: 500; }
.tijdlijn li span { color: var(--tekst-3); font-family: var(--font-mono); font-size: 10px; }
.tijdlijn li p { margin: 4px 0 0; color: var(--tekst-2); }

/* ---------- Invoervelden: basis voor élk veld, ook buiten .veld ----------
   Zonder deze regel valt een los <input>, <select> of <textarea> terug op de browser (wit, vierkant).
   Bewust in :where() (specificiteit 0), zodat elke gerichtere regel wint: .veld, .app-zoek, .taak-nieuw, .rooster… */
:where(.app, .inlog) :where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"], [type="file"], [type="submit"], [type="button"], [type="reset"]), select, textarea) {
  font: inherit; font-size: var(--tekst-s); color: var(--tekst); min-width: 0;
  background: var(--vlak); border: 1px solid var(--lijn-sterk); border-radius: var(--radius); padding: 0.7rem 0.85rem;
  transition: border-color var(--overgang), box-shadow var(--overgang);
}
:where(.app, .inlog) :where(input, select, textarea):focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-zacht); }
:where(.app, .inlog) :where(input, select, textarea)::placeholder { color: var(--tekst-3); opacity: 1; }
:where(.app, .inlog) :where(input, select, textarea):disabled { opacity: .5; cursor: not-allowed; }
:where(.app, .inlog) textarea { min-height: 4.5rem; resize: vertical; }
/* Keuzelijsten (0.1.3): zo breed als de inhoud, eigen chevron vlak naast de tekst. Een keuzelijst die
   de hele regel vult zet zijn pijltje anders ergens ver rechts; dat zag er in alle tools verkeerd uit. */
:where(.app, .inlog) select { cursor: pointer; width: auto; max-width: 100%; appearance: none; -webkit-appearance: none;
  padding-right: 2.1rem; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; }
:where(.app, .inlog) :where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--accent); }
/* Bestandsveld: de knop oogt als een kleine secundaire knop, de bestandsnaam als gewone tekst */
:where(.app, .inlog) input[type="file"] { font: inherit; font-size: var(--tekst-xs); color: var(--tekst-3); max-width: 100%; }
:where(.app, .inlog) input[type="file"]::file-selector-button { font: inherit; font-size: 12.5px; font-weight: 500; color: var(--tekst); background: var(--vlak-2); border: 1px solid var(--lijn-sterk); border-radius: 6px; padding: 0 10px; height: 28px; margin-right: 10px; cursor: pointer; transition: background var(--overgang), border-color var(--overgang); }
:where(.app, .inlog) input[type="file"]::file-selector-button:hover { background: var(--vlak-3); border-color: var(--accent); }

/* ---------- Lege staat, meldingen, formulieren ---------- */
.leeg { padding: var(--r-8) var(--r-5); text-align: center; color: var(--tekst-3); display: grid; gap: var(--r-2); justify-items: center; }
.leeg b { color: var(--tekst); font-weight: 600; }
.melding { padding: var(--r-3) var(--r-4); border-radius: var(--radius); border: 1px solid var(--lijn-sterk); background: var(--vlak); font-size: var(--tekst-xs); color: var(--tekst-2); }
.melding-accent { border-color: rgba(224,193,65,.4); background: var(--accent-zacht); color: var(--tekst); }
.melding-fout { border-color: rgba(245,158,11,.5); color: var(--let-op); }
/* Een melding heeft zelf geen buitenmarge: de omliggende grid geeft de afstand. Staat hij los onder
   een formulier (0.1.5), dan krijgt hij de gewone rij-afstand erboven, anders plakt hij tegen het laatste veld. */
form + .melding { margin-top: var(--r-3); }
.veld select { font: inherit; font-size: var(--tekst-s); color: var(--tekst); background: var(--vlak) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .7rem center; border: 1px solid var(--lijn-sterk); border-radius: var(--radius); padding: 0.7rem 2.1rem 0.7rem 0.85rem; width: auto; max-width: 100%; min-width: 10rem; justify-self: start; appearance: none; -webkit-appearance: none; }
.veld select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-zacht); }
.formulier-raster { display: grid; gap: var(--r-4); }
@media (min-width: 40rem) { .formulier-raster.twee { grid-template-columns: 1fr 1fr; } }
.knop-gevaar { color: var(--let-op); border-color: rgba(245,158,11,.35); }
.knop-gevaar:hover { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.5); }

/* ---------- Inlogscherm ---------- */
.inlog { min-height: 100dvh; display: grid; place-items: center; padding: var(--r-5); }
.inlog .frame { width: min(100%, 24rem); padding: var(--r-6); display: grid; gap: var(--r-4); }
.inlog .app-merk { margin: 0 0 var(--r-2); }