/* B-Wise salestracker, ronde 5 (stijl A4 Merkblauw, na de tweede critique). Ronde 4: gedeelde opbouw voor de drie stijlrichtingen.
   Buiten het Ecofix-designsysteem (D14). Dit bestand bevat enkel maten, letters en de opbouw van
   de onderdelen; alle kleuren komen uit stijl.css van de versie (a4, b4 of c4), voor licht en donker.
   Tekstmaten staan in rem: op een iPhone volgt de app zo de tekstgrootte die de gebruiker koos. */

:root {
  --radius: 14px;
  --radius-sm: 10px;
  --radius-knop: 12px;
  --r-pil: 999px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;
  --t-xs: .75rem; --t-s: .875rem; --t-m: 1rem; --t-l: 1.1875rem; --t-xl: 1.5rem; --t-xxl: 2.125rem; --t-titel: 2rem;
  --duur: 180ms;
  --uit: cubic-bezier(.16, 1, .3, 1);
  --toestel: 430px;
  --kop-h: 52px;
  --nav-h: 52px;
  --f-tekst: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-kop: "Avenir Next", "Avenir", "Nunito Sans", "Segoe UI", Roboto, sans-serif;
  --f-getal: var(--f-tekst);
  --f-cijfer: var(--f-tekst);
}
html { font-size: 106.25%; -webkit-text-size-adjust: 100%; }
@media (pointer: coarse) { @supports (font: -apple-system-body) { html { font: -apple-system-body; } } }

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 var(--t-m)/1.45 var(--f-tekst);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--tint-bg); color: var(--text); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
input, select { caret-color: var(--tint); accent-color: var(--tint); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cijfer, .getal-tab { font-variant-numeric: tabular-nums; }
.ico { inline-size: 1.1em; block-size: 1.1em; vertical-align: -.18em; flex: none; }

/* Het toestel: gsm-first. Op een breed scherm staat de app als gsm in het midden. */
.toestel {
  max-width: var(--toestel); margin: 0 auto; min-height: 100vh; min-height: 100dvh;
  background: var(--bg); border-inline: 1px solid var(--border);
  display: flex; flex-direction: column; position: relative;
}
@media (max-width: 460px) { .toestel { border-inline: 0; } }

.demo {
  background: var(--demo-bg); color: var(--demo-tekst); font-size: var(--t-xs); font-weight: 600;
  text-align: center; padding: calc(3px + env(safe-area-inset-top, 0px)) var(--s3) 3px;
}

/* Kop: logo links (of terug), avatar rechts. De titel verschijnt pas als de grote titel weg is. */
.kop {
  position: sticky; top: 0; z-index: 5; min-block-size: var(--kop-h);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s2);
  padding: 0 max(var(--s4), env(safe-area-inset-right, 0px)) 0 max(var(--s4), env(safe-area-inset-left, 0px));
  background: var(--kop-bg); color: var(--kop-tekst); border-bottom: 1px solid var(--kop-rand);
  -webkit-backdrop-filter: var(--kop-filter, none); backdrop-filter: var(--kop-filter, none);
  transition: border-color var(--duur), background var(--duur);
}
.kop.ingeklapt { border-bottom-color: var(--kop-rand-in, var(--kop-rand)); background: var(--kop-bg-in, var(--kop-bg)); }
.kop .links { justify-self: start; display: flex; align-items: center; min-width: 0; }
.kop .titel { font-weight: 650; font-size: var(--t-m); opacity: 0; translate: 0 4px; transition: opacity var(--duur), translate var(--duur) var(--uit);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 52vw; }
.kop.ingeklapt .titel { opacity: 1; translate: 0 0; }
.kop .rechts { justify-self: end; display: flex; align-items: center; gap: var(--s2); }
.logo-link { display: flex; align-items: center; min-block-size: 44px; border-radius: var(--radius-sm); }
.logo {
  display: block; block-size: 26px; inline-size: calc(26px * 1294 / 398); background: var(--logo);
  -webkit-mask: url(logo/woordmerk.png) left center / contain no-repeat; mask: url(logo/woordmerk.png) left center / contain no-repeat;
}
.logo.merk { inline-size: calc(26px * 418 / 398); -webkit-mask-image: url(logo/merk.png); mask-image: url(logo/merk.png); }
.kop.ingeklapt .logo { opacity: var(--logo-ingeklapt, 1); transition: opacity var(--duur); }
.terugknop { display: inline-flex; align-items: center; gap: 2px; min-block-size: 44px; padding-right: var(--s2); margin-left: -6px;
  color: var(--kop-tint); text-decoration: none; font-size: var(--t-m); font-weight: 500; }
.terugknop .ico { inline-size: 1.45em; block-size: 1.45em; stroke-width: 2.4; }
.avatar {
  inline-size: 36px; block-size: 36px; border-radius: 50%; display: inline-grid; place-items: center;
  font: 650 .8125rem/1 var(--f-tekst); color: #fff; flex: none; letter-spacing: .01em;
}
.avatar.admin { background: #8A3FA8; }
.avatar.groot { inline-size: 56px; block-size: 56px; font-size: var(--t-l); }
.avatar.xl { inline-size: 72px; block-size: 72px; font-size: var(--t-xl); }
.avatar .ico { inline-size: 20px; block-size: 20px; }

.inhoud {
  flex: 1; display: flex; flex-direction: column; gap: var(--s5);
  padding: var(--s3) max(var(--s4), env(safe-area-inset-right, 0px)) calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + var(--s8)) max(var(--s4), env(safe-area-inset-left, 0px));
}
h1 { font: 700 var(--t-titel)/1.1 var(--f-kop); letter-spacing: -.01em; margin: 0; text-wrap: balance; }
h2 { font: 700 var(--t-l)/1.2 var(--f-kop); margin: 0; text-wrap: balance; }
h3 { font: 650 var(--t-m)/1.3 var(--f-tekst); margin: 0; }
p { margin: 0; }
.sub { color: var(--sub); font-size: var(--t-s); }
.klein { font-size: .8125rem; color: var(--sub); }
.paginatitel { display: flex; flex-direction: column; gap: 2px; }

.kaart { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s4); box-shadow: var(--kaart-schaduw, none); }
.kaart.vlak { background: var(--card2); }

/* Knoppen. Eén accentkleur (--tint) voor alles wat je kan aantikken; groen is enkel voor gelukt. */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-block-size: 50px; padding: 0 var(--s5); border-radius: var(--radius-knop);
  border: 1px solid var(--knop-rand); background: var(--knop-bg); color: var(--knop-tekst); font-weight: 600; font-size: var(--t-m);
  transition: background var(--duur), transform 120ms var(--uit), filter var(--duur);
}
.knop.hoofd { background: var(--tint); border-color: var(--tint); color: var(--op-tint); font-weight: 700; }
.knop.breed { inline-size: 100%; }
.knop.klein { min-block-size: 44px; padding: 0 var(--s4); font-size: var(--t-s); }
.knop-tekst { background: none; border: 0; color: var(--tint-tekst); font-weight: 650; font-size: var(--t-m); min-block-size: 44px; min-inline-size: 44px; padding: 0 var(--s1); }
.knop:active, .chip:active, .segment button:active, .plusmin button:active, .lijst-rij:active, .regel:active, .plek:active, .dag:active { transform: scale(.97); }
.knop:active { filter: brightness(.94); }
@media (hover: hover) { .knop:hover { filter: brightness(1.06); } }
a.knop { text-decoration: none; }

.chips { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chip {
  flex: none; min-block-size: 44px; padding: 0 var(--s4); border-radius: var(--r-pil);
  border: 1px solid var(--knop-rand); background: var(--card); color: var(--sub); font-size: var(--t-s); font-weight: 600;
  transition: background var(--duur), color var(--duur), transform 120ms var(--uit);
}
.chip[aria-pressed="true"] { background: var(--tint-bg); border-color: var(--tint); color: var(--tint-tekst); }

/* Gesegmenteerde keuze, zoals op iOS: hooguit vier opties naast elkaar. */
.segment { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; padding: 3px; border-radius: var(--radius-knop); background: var(--segment-bg); }
.segment button { min-block-size: 44px; border: 0; border-radius: 9px; background: none; color: var(--text); font-size: var(--t-s); font-weight: 550; padding: 0 var(--s1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background var(--duur), transform 120ms var(--uit); }
@media (max-width: 359px) { .segment button { font-size: var(--t-xs); } }
.segment button[aria-pressed="true"] { background: var(--segment-aan); font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 1px rgba(0, 0, 0, .06); }
.kiezer { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-s); color: var(--sub); }
.kiezer select { appearance: none; -webkit-appearance: none; min-block-size: 44px; border-radius: var(--r-pil); border: 1px solid var(--knop-rand); background: var(--card);
  color: var(--tint-tekst); font-weight: 650; padding: 0 var(--s6) 0 var(--s4);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(-45deg, transparent 50%, currentColor 50%);
  background-size: 5px 5px; background-position: right 16px center, right 11px center; background-repeat: no-repeat; }

.status { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-xs); font-weight: 650;
  padding: 3px var(--s2); border-radius: var(--r-pil); line-height: 1.2; max-inline-size: 100%; }
.status .ico { inline-size: 1.15em; block-size: 1.15em; stroke-width: 2.4; }
.status.ok { color: var(--green-tekst); background: var(--green-bg); }
.status.let { color: var(--gold-tekst); background: var(--gold-bg); }
.status.nee { color: var(--red-tekst); background: var(--red-bg); }
.status.neutraal { color: var(--sub); background: var(--card2); }

.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.kpi { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s3); }
.kpi .w { font: 700 var(--t-xl)/1.1 var(--f-getal); font-variant-numeric: tabular-nums; }
.kpi .l { font-size: var(--t-xs); color: var(--sub); font-weight: 600; }
.kpi .v { font-size: var(--t-xs); color: var(--sub); margin-top: 2px; }

.balk { block-size: 10px; background: var(--spoor); border-radius: var(--r-pil); overflow: hidden; }
.balk > i { display: block; block-size: 100%; background: var(--voortgang); border-radius: var(--r-pil); }

/* Tabbalk onderaan: vijf secties, de gekozen met een gevuld icoon. */
.navbalk {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  inline-size: 100%; max-width: var(--toestel); z-index: 6;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--nav-bg); border-top: 1px solid var(--nav-rand);
  -webkit-backdrop-filter: var(--nav-filter, none); backdrop-filter: var(--nav-filter, none);
  padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
.navbalk a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-block-size: var(--nav-h); padding-top: 3px;
  color: var(--nav-tekst); text-decoration: none; font-size: 11px; font-weight: 600; letter-spacing: .01em; min-width: 0;
}
.navbalk a > span { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navbalk svg { inline-size: 26px; block-size: 26px; }
.navbalk .vol { display: none; }
.navbalk a[aria-current="page"] { color: var(--nav-actief); }
.navbalk a[aria-current="page"] .lijn { display: none; }
.navbalk a[aria-current="page"] .vol { display: inline; }
.navbalk a:active svg { transform: scale(.9); }

.tabel { inline-size: 100%; border-collapse: collapse; font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.tabel th { text-align: left; font-size: var(--t-xs); color: var(--sub); font-weight: 650; padding: var(--s2); border-bottom: 1px solid var(--border2); white-space: nowrap; }
.tabel td { padding: var(--s2); border-bottom: 1px solid var(--border); vertical-align: middle; }
.tabel .r { text-align: right; }
.tabel tr.ik td { background: var(--tint-bg); }

/* Blad (sheet) dat van onder opschuift. Sluiten met de knop, Escape, de achtergrond of door te vegen. */
.blad-achter { position: fixed; inset: 0; background: var(--scrim); z-index: 20; display: none; }
.blad {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); inline-size: 100%; max-width: var(--toestel);
  background: var(--blad-bg); border-radius: 18px 18px 0 0; box-shadow: var(--schaduw);
  max-block-size: 88vh; overflow: auto; overscroll-behavior: contain; z-index: 21; display: none;
  padding: 0 var(--s4) calc(var(--s6) + env(safe-area-inset-bottom, 0px));
  transition: translate 260ms var(--uit);
}
.blad.sleept { transition: none; }
.open .blad, .open .blad-achter { display: block; }
.open .blad { animation: opschuiven 340ms var(--uit); }
.open .blad-achter { animation: invagen 260ms ease-out; }
@keyframes opschuiven { from { translate: 0 100%; } }
@keyframes invagen { from { opacity: 0; } }
.blad-kop { position: sticky; top: 0; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s3);
  padding: var(--s4) 0 var(--s3); margin-bottom: var(--s2); background: var(--blad-bg); touch-action: none; cursor: grab; }
.greep { position: absolute; top: 6px; left: 50%; translate: -50% 0; inline-size: 36px; block-size: 5px; border-radius: 3px; background: var(--greep); }
.blad-kop h2 { outline: none; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + var(--s4)); transform: translateX(-50%); z-index: 30;
  background: var(--text); color: var(--bg); padding: var(--s3) var(--s4); border-radius: var(--radius);
  font-size: var(--t-s); font-weight: 600; max-inline-size: min(90vw, 400px); box-shadow: var(--schaduw);
  opacity: 0; translate: 0 8px; pointer-events: none; transition: opacity 200ms, translate 260ms var(--uit);
}
.toast.zien { opacity: 1; translate: 0 0; }
.toast:empty { visibility: hidden; }

.rij { display: flex; align-items: center; gap: var(--s3); }
.tussen { justify-content: space-between; flex-wrap: wrap; }
.stapel { display: flex; flex-direction: column; gap: var(--s2); }
.verberg { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
  .knop:active, .chip:active, .segment button:active, .plusmin button:active, .lijst-rij:active, .regel:active, .plek:active, .dag:active { transform: none; }
}

/* ---------- Ronde 5 ---------- */
/* Focus op de blauwe kop, tabbalk en onthaal: de gewone ring haalt daar geen 3:1, dus een eigen kleur. */
.kop :focus-visible, .navbalk :focus-visible, .onthaal :focus-visible, .c-rail :focus-visible { outline-color: var(--focus-merk); }
/* De avatar is een knop naar je profiel, met een doel van 44 bij 44. */
.profielknop { display: grid; place-items: center; inline-size: 44px; block-size: 44px; margin-right: -4px; padding: 0; border: 0; border-radius: 50%; background: none; }
.profielknop:active .avatar { transform: scale(.94); }
.profiel-kop { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.profiel-kop b { display: block; font-size: var(--t-l); }
.blad .sectiekop { font: 650 var(--t-xs)/1.2 var(--f-tekst); color: var(--sub); letter-spacing: .04em; text-transform: uppercase; margin: var(--s2) 0 var(--s2); }
.blad .segment + .klein { margin-top: var(--s2); }
/* Schermen onder Meer: de titel staat klein in de kop, niet groot in de inhoud. */
.diep .kop .titel { opacity: 1; translate: 0 0; }
.diep main > .paginatitel h1 { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Menuknop en keuzelijst, zoals een pull-down-menu op iOS. */
.menuknop { display: inline-flex; align-items: center; gap: var(--s2); min-block-size: 44px; padding: 0 var(--s3) 0 var(--s4); border-radius: var(--r-pil); border: 1px solid var(--knop-rand); background: var(--knop-bg); color: var(--knop-tekst); max-inline-size: 100%; }
.menuknop { flex-wrap: wrap; text-align: left; row-gap: 0; }
.menuknop .klein { color: var(--sub); }
.menuknop b { font-weight: 650; color: var(--tint-tekst); overflow-wrap: anywhere; }
.menuknop .ico { stroke-width: 2.4; color: var(--tint-tekst); }
.menu-lijst { list-style: none; margin: 0; padding: 0; border-radius: var(--radius); overflow: hidden; background: var(--card2); }
.menu-lijst li + li { border-top: 1px solid var(--border); }
.menu-optie { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); inline-size: 100%; min-block-size: 52px; padding: var(--s2) var(--s4); border: 0; background: none; color: var(--text); text-align: left; }
.menu-optie b { display: block; font-weight: 600; }
.menu-optie .ico { color: var(--tint-tekst); stroke-width: 2.6; inline-size: 1.3em; block-size: 1.3em; }
.menu-optie[aria-current="true"] b { color: var(--tint-tekst); }
/* Knoppen onderaan een blad: de bevestiging bij de duim, terug eronder. */
.bladknoppen { display: grid; gap: var(--s2); margin-top: var(--s4); }
.controle { list-style: none; margin: 0; padding: 0; }
.controle li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--border); }
.controle li b { font-weight: 600; } .controle li .klein { display: block; }
.controle li.totaal { border-bottom: 0; font-weight: 800; font-size: var(--t-l); }
/* Meldingen over tijd en bereik: icoon, kop en uitleg; kleur is nooit het enige teken. */
.melding { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); align-items: start; padding: var(--s3) var(--s4); border-radius: var(--radius); }
.melding > .ico { inline-size: 24px; block-size: 24px; stroke-width: 2.2; margin-top: 1px; }
.melding b { display: block; } .melding p { font-size: var(--t-s); margin-top: 2px; }
.melding .knop { margin-top: var(--s3); }
.melding.let { background: var(--gold-bg); color: var(--gold-tekst); } .melding.let p { color: var(--text); }
.melding.nee { background: var(--red-bg); color: var(--red-tekst); } .melding.nee p { color: var(--text); }
.melding.info { background: var(--tint-bg); color: var(--tint-tekst); } .melding.info p { color: var(--text); }
/* Demo: links naar de andere toestanden van Vandaag. */
.demo-staten { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); padding: var(--s1) var(--s4) var(--s2); background: var(--demo-bg); color: var(--demo-tekst); font-size: var(--t-xs); font-weight: 600; justify-content: center; }
.demo-staten a { color: inherit; min-block-size: 32px; display: inline-flex; align-items: center; padding: 0 var(--s1); text-underline-offset: 3px; }
.demo-staten a[aria-current="true"] { text-decoration: none; background: rgba(0, 0, 0, .08); border-radius: var(--radius-sm); padding: 0 var(--s2); }
/* Plus en min: een min op nul is uitgeschakeld; de knoppen groeien mee met grote tekst. */
.plusmin button[aria-disabled="true"] { opacity: .38; cursor: default; }
.plusmin button[aria-disabled="true"]:active { transform: none; }
.teller { inline-size: 2.6em; min-block-size: 44px; text-align: center; border: 1px solid var(--border2); border-radius: var(--radius-sm); background: var(--card); font: 700 var(--t-xl)/1 var(--f-getal); font-variant-numeric: tabular-nums; color: var(--text); padding: 0; }
.teller:focus { border-color: var(--tint); }

/* Demo: de schakelaar Verkoper / Admin in de demoband. Hoort niet bij de app; doelen van minstens 24 px (WCAG 2.2). */
.demo-rol { display: inline-flex; gap: 2px; margin-left: var(--s2); padding: 2px; border-radius: 999px; background: rgba(0, 0, 0, .08); vertical-align: middle; }
.demo-rol button { min-block-size: 26px; padding: 0 var(--s3); border: 0; border-radius: 999px; background: none; color: inherit; font: inherit; }
.demo-rol button[aria-pressed="true"] { background: var(--demo-tekst); color: var(--demo-bg); }
.rolband { background: var(--brand); color: #fff; font-size: var(--t-xs); text-align: center; padding: var(--s1) var(--s3); font-weight: 600; }