/* Teamapp Extreme Performance. Huisstijl: wit en soft black, geen accentkleur, 0 radius, geen schaduw.
   Alleen licht (donker is niet getest, bb-webapp §6). Inter als hij op het toestel staat, anders system-ui
   (geen Google Fonts in de app; zelf hosten staat in OPEN.md). */
:root {
  --achter: #F5F4F2;
  --vlak: #FFFFFF;
  --vlak-2: #ECEAE7;
  --inkt: #1C1C1C;      /* op wit 16,7:1 */
  --tekst: #5A5A5A;     /* op wit 6,9:1 */
  --zacht: #7A7570;     /* op wit 4,56:1 */
  --lijn: #E5E3E0;
  --op-inkt: #FFFFFF;
  --goed: #1F7A4D;      /* op wit 5,4:1 */
  --fout: #B3261E;      /* op wit 6,5:1 */
  --tik: 44px; --tik-hoofd: 56px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100dvh; }
body { background: var(--achter); color: var(--tekst); font-family: var(--font); font-size: 15px; line-height: 1.45; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
button, input, select { font-family: inherit; font-size: 16px; }
:focus-visible { outline: 2px solid var(--inkt); outline-offset: 2px; }
[hidden] { display: none !important; }
p { margin: 0; }

.testbalk { background: var(--inkt); color: var(--op-inkt); text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: calc(6px + env(safe-area-inset-top)) 16px 6px; }
.app { max-width: 480px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; }

.kop { position: sticky; top: 0; z-index: 5; background: var(--achter); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); border-bottom: 1px solid var(--lijn); }
.testbalk:not([hidden]) + .app .kop { padding-top: 12px; }
.merk { display: flex; align-items: center; gap: 10px; min-width: 0; }
.xx { width: 36px; height: 36px; flex: none; background: var(--inkt); color: var(--op-inkt); display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.xx img { width: 22px; height: auto; display: block; }
.kop h1 { margin: 0; font-size: 15px; font-weight: 600; color: var(--inkt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kop .sub { font-size: 12px; color: var(--zacht); }
.kopknop { min-height: var(--tik); padding: 0 12px; background: transparent; border: 1px solid var(--lijn); color: var(--inkt); font-size: 13px; font-weight: 600; cursor: pointer; }

main { flex: 1; outline: none; display: flex; flex-direction: column; gap: 14px;
  padding: 18px max(16px, env(safe-area-inset-right)) calc(96px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.laden { color: var(--zacht); }
.titel { margin: 2px 0 0; font-size: 30px; font-weight: 700; text-transform: uppercase; letter-spacing: -.025em; line-height: 1; color: var(--inkt); }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--zacht); }
.klein { font-size: 13px; color: var(--zacht); }
.kaart { background: var(--vlak); border: 1px solid var(--lijn); padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.kaart h2 { margin: 0; font-size: 18px; font-weight: 600; color: var(--inkt); line-height: 1.25; }
.kaart.donker { background: var(--inkt); border-color: var(--inkt); color: var(--op-inkt); }
.kaart.donker h2, .kaart.donker .groot { color: var(--op-inkt); }
.kaart.donker .eyebrow, .kaart.donker .klein { color: var(--op-inkt); opacity: .8; }
.rij { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.groot { font-size: 30px; font-weight: 700; color: var(--inkt); font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; }
.num { font-variant-numeric: tabular-nums; }

.teller { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.teller div { border: 1px solid currentColor; padding: 8px 4px 6px; text-align: center; }
.teller b { display: block; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.teller span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.eisen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.eisen li { display: flex; align-items: center; gap: 10px; }
.stappen { margin: 0; padding-left: 22px; list-style: decimal; display: grid; gap: 6px; }
.stappen li { padding-left: 2px; }
.vink { width: 18px; height: 18px; border: 1.5px solid currentColor; flex: none; display: grid; place-items: center; }
.vink.ja { background: currentColor; }
.vink.ja::after { content: ""; width: 8px; height: 4px; border-left: 2px solid var(--inkt); border-bottom: 2px solid var(--inkt); transform: rotate(-45deg) translate(1px, -1px); }
.balk { height: 8px; background: var(--vlak-2); position: relative; }
.balk i { position: absolute; inset: 0 auto 0 0; background: var(--inkt); }
.balk.licht i { background: var(--zacht); }
.staaf { display: grid; gap: 4px; margin-top: 10px; }
.weken { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--lijn); margin-top: 10px; }
.weken .week { display: grid; gap: 2px; padding: 8px 4px; text-align: center; border-left: 1px solid var(--lijn); }
.weken .week:first-child { border-left: 0; }
.weken .week:last-child { background: var(--vlak-2); }
.weken .week b { font-size: 18px; font-weight: 700; color: var(--inkt); }
.matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 14px; border: 1px solid var(--lijn); }
.matrix .vak { display: grid; gap: 2px; padding: 10px; border-right: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
.matrix .vak:nth-child(2n) { border-right: 0; }
.matrix .vak:nth-child(n+3) { border-bottom: 0; }
.matrix .vak b { font-size: 22px; font-weight: 700; color: var(--inkt); }
.matrix .vak.zwaar { background: var(--inkt); }
.matrix .vak.zwaar b, .matrix .vak.zwaar .klein { color: var(--op-inkt); }

.knop { min-height: var(--tik-hoofd); width: 100%; background: var(--inkt); color: var(--op-inkt); border: 1px solid var(--inkt); padding: 0 16px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
a.knop { display: grid; place-items: center; text-align: center; text-decoration: none; }
.knop.licht { background: transparent; color: var(--inkt); min-height: 48px; }
.kaart.donker .knop { background: var(--op-inkt); color: var(--inkt); border-color: var(--op-inkt); }
.knop:disabled { opacity: .5; cursor: default; }
.link { background: none; border: 0; padding: 10px 0; min-height: var(--tik); color: var(--inkt); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 14px; text-align: left; }

.kopieer { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--lijn); padding: 6px 6px 6px 12px; background: var(--achter); min-height: var(--tik); }
.kopieer code { font-family: var(--font); font-weight: 600; color: var(--inkt); font-size: 15px; overflow-wrap: anywhere; min-width: 0; }

.lijst { list-style: none; margin: 0; padding: 0; }
.lijst > li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; border-top: 1px solid var(--lijn); align-items: start; }
.lijst > li:first-child { border-top: 0; }
.datum .d { display: block; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--zacht); }
.datum .n { display: block; font-size: 18px; font-weight: 600; color: var(--inkt); line-height: 1.1; font-variant-numeric: tabular-nums; }
.wat { color: var(--inkt); font-weight: 600; overflow-wrap: anywhere; }
.meta { font-size: 12px; color: var(--zacht); }
.acties { display: flex; flex-wrap: wrap; gap: 0 14px; }
.tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border: 1px solid var(--lijn); color: var(--inkt); white-space: nowrap; }
.tag.vol { background: var(--inkt); color: var(--op-inkt); border-color: var(--inkt); }
.tag.zacht { background: var(--vlak-2); border-color: var(--vlak-2); }
.tag.goed { color: var(--goed); border-color: currentColor; }
.leeg { color: var(--zacht); }

.veld { display: flex; flex-direction: column; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.veld label, .veld legend { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--zacht); padding: 0; }
.veld input, .veld select { width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid var(--lijn); background: var(--vlak); color: var(--inkt); border-radius: 0; }
.veld textarea { width: 100%; min-height: 96px; padding: 12px; border: 1px solid var(--lijn); background: var(--vlak); color: var(--inkt); border-radius: 0; font: inherit; resize: vertical; }
.veldfout { color: var(--fout); font-size: 13px; }
.keuzes { display: flex; flex-wrap: wrap; gap: 6px; }
.keuzes button { min-height: var(--tik); border: 1px solid var(--lijn); background: var(--vlak); color: var(--inkt); padding: 0 12px; cursor: pointer; }
.keuzes button[aria-pressed="true"] { background: var(--inkt); color: var(--op-inkt); border-color: var(--inkt); }
.vinkrij { display: grid; grid-template-columns: 24px 1fr; gap: 10px; font-size: 14px; color: var(--tekst); align-items: start; cursor: pointer; }
.vinkrij input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--inkt); }

.tabs { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; z-index: 6; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--vlak); border-top: 1px solid var(--lijn); padding-bottom: env(safe-area-inset-bottom); }
.tabs a { min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--zacht); text-decoration: none; font-size: 11px; font-weight: 600; }
.tabs a[aria-current="page"] { color: var(--inkt); }
.tabs svg { width: 22px; height: 22px; }

dialog.blad { width: 100%; max-width: 480px; margin: auto auto 0; border: 0; border-top: 1px solid var(--inkt); padding: 18px max(16px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: var(--vlak); max-height: 88dvh; }
dialog.blad::backdrop { background: rgba(0, 0, 0, .45); }
dialog.blad form { display: flex; flex-direction: column; gap: 14px; }
dialog.blad h2 { margin: 0; font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; color: var(--inkt); }

.toast { position: fixed; z-index: 30; left: 50%; transform: translateX(-50%); bottom: calc(72px + env(safe-area-inset-bottom)); width: calc(100% - 32px); max-width: 448px; background: var(--inkt); color: var(--op-inkt); padding: 14px; font-size: 14px; }

.stat { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--lijn); background: var(--vlak); }
.stat div { padding: 10px 8px; border-left: 1px solid var(--lijn); }
.stat div:first-child { border-left: 0; }
.stat b { display: block; font-size: 22px; font-weight: 700; color: var(--inkt); font-variant-numeric: tabular-nums; }
.stat span { font-size: 11px; color: var(--zacht); }

@media (prefers-reduced-motion: no-preference) {
  .toast { animation: op .18s ease-out; }
  @keyframes op { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
}

/* Fase 1b: delen, grafiek, signalen. */
.bedrag { color: var(--inkt); font-weight: 600; }
.stat em.trend { display: block; margin-top: 4px; font-style: normal; font-size: 11px; color: var(--zacht); }
.kaart.tip { border-color: var(--inkt); }
.code-groot { font-size: 34px; font-weight: 800; letter-spacing: .04em; color: var(--op-inkt); line-height: 1.05; overflow-wrap: anywhere; }
.knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.knoppen .knop { min-height: 48px; }
.kaart.donker .knop.rand { background: transparent; color: var(--op-inkt); border-color: var(--op-inkt); }
.voorbeeld { font-weight: 600; color: var(--inkt); overflow-wrap: anywhere; }
.grafiek { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; height: 120px; align-items: end; border-bottom: 1px solid var(--inkt); }
.grafiek .kolom { height: 100%; display: flex; align-items: flex-end; }
.grafiek .kolom i { display: block; width: 100%; background: var(--vlak-2); }
.grafiek .kolom.nu i { background: var(--inkt); }
.grafiek .kolom:not(.nu) i { background: #BDB9B4; }
.as { display: flex; justify-content: space-between; font-size: 11px; color: var(--zacht); margin-top: 4px; }
.bijschriften { list-style: none; margin: 0; padding: 0; }
.bijschriften li { border-top: 1px solid var(--lijn); padding: 10px 0 0; margin-top: 10px; }
.bijschriften li:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.bijschriften p { color: var(--inkt); }
.toppers { margin: 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 8px; }
.toppers li { padding-left: 2px; }
.toppers li::marker { font-weight: 700; color: var(--inkt); font-variant-numeric: tabular-nums; }
.toppers .wat { display: block; }
.lijst.kort > li { grid-template-columns: 40px minmax(0, 1fr) auto; }
.lijst .xx { width: 36px; height: 36px; font-size: 12px; }
/* Lijst zonder datumblok (eigen telling): naam links, label rechts. */
.lijst.zonder > li { grid-template-columns: minmax(0, 1fr) auto; }
.lijst > li > .resultaat { grid-column: 1 / -1; }
.briefing { white-space: pre-line; }
.waarschuw { color: var(--inkt); font-weight: 600; font-size: 14px; }
.waarschuw:empty { display: none; }
.veld .label { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--zacht); }
.keuzes button:disabled { opacity: .35; cursor: default; }
.veld select { width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid var(--lijn); background: var(--vlak); color: var(--inkt); border-radius: 0; }
.tabs a span { white-space: nowrap; }
.kaart.melding { text-decoration: none; border-color: var(--inkt); color: var(--tekst); }
.keuring { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.keuring .knop { min-height: 48px; }
.keuring select { min-height: var(--tik); border: 1px solid var(--lijn); background: var(--vlak); color: var(--inkt); padding: 0 8px; border-radius: 0; flex: 1; min-width: 0; font-size: 14px; }
.keuze { min-height: var(--tik); display: inline-flex; align-items: center; border: 1px solid var(--lijn); background: var(--vlak); color: var(--inkt); padding: 0 12px; text-decoration: none; font-size: 14px; }
.keuze[aria-current="page"] { background: var(--inkt); color: var(--op-inkt); border-color: var(--inkt); }
.lijst > li > .keuring { grid-column: 1 / -1; margin-top: 0; }
.keuring .rij { align-items: center; }
.kaart.punten { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; text-decoration: none; color: var(--tekst); }
.kaart.punten .plek { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
fieldset.groep { border: 1px solid var(--lijn); padding: 12px; gap: 12px; }
fieldset.groep legend { padding: 0 6px; }
.rondleiding { display: flex; flex-direction: column; gap: 16px; padding-top: 8vh; }
.rondleiding .titel { font-size: 34px; }
.rondleiding-tekst { font-size: 17px; line-height: 1.5; color: var(--inkt); }
.stippen { display: flex; gap: 6px; margin: 8px 0; }
.stippen i { width: 28px; height: 4px; background: var(--vlak-2); }
.stippen i.aan { background: var(--inkt); }
a.wat { display: block; text-decoration: none; }
a.wat:hover, a.wat:focus-visible { text-decoration: underline; }
.rondleiding .titel:focus { outline: none; }
/* Producten delen: klein beeld, naam en prijs, knoppen rechts. */
.lijst.producten > li { grid-template-columns: 48px minmax(0, 1fr) auto auto; align-items: center; }
.lijst.producten img, .lijst.producten .beeld-leeg { width: 48px; height: 60px; object-fit: cover; background: var(--lijn); display: block; }
.lijst.producten s { color: var(--zacht, #7a7570); }
.lijst.producten .sale { color: #C8102E; }
/* Codewachter */
.ernst-hoog { border-left: 4px solid var(--inkt); padding-left: 10px; }
.ernst-middel { border-left: 2px solid var(--zacht); padding-left: 10px; }
.ernst-laag { border-left: 3px solid var(--lijn); padding-left: 10px; }
/* Merk: woordmerk onder de titel, merkblok op het inlogscherm (logo's uit 0-context/logo-vector). */
.kop .woordmerk { display: block; width: 150px; height: auto; margin-top: 3px; opacity: .55; }
.merkblok { background: var(--inkt); color: var(--op-inkt); display: grid; justify-items: start; gap: 18px; padding: 32px 24px 28px; margin: 0 0 24px; }
.merkblok img:first-child { width: 64px; height: auto; }
.merkblok .woordmerk { width: 220px; height: auto; }
.merkblok p { margin: -10px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; opacity: .7; }
/* Inzicht: filterknoppen, uitklapbare rijen. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px; }
.chip { min-height: 36px; padding: 0 12px; border: 1px solid var(--lijn); background: var(--vlak); color: var(--inkt); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--inkt); color: var(--op-inkt); border-color: var(--inkt); }
.kaart input[type="search"] { width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid var(--lijn); background: var(--vlak); color: var(--inkt); border-radius: 0; font: inherit; }
.inzicht-rij { border-top: 1px solid var(--lijn); }
.inzicht-rij:first-child { border-top: 0; }
.inzicht-rij > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; cursor: pointer; }
.inzicht-rij > summary::-webkit-details-marker { display: none; }
.inzicht-rij .rechts { display: grid; justify-items: end; gap: 4px; }
.inzicht-detail { padding: 0 0 16px; }
.stat b.num { white-space: nowrap; }
.inzicht-detail .eisen li { display: block; padding: 10px 0; }
.inzicht-detail .eisen .knoppen { display: flex; gap: 16px; margin-top: 6px; }

/* ---------- Breed scherm en Shopify-admin (2 nov 2026) ---------- */
/* Het menu voor de Shopify-zijbalk is alleen voor App Bridge; in de pagina zelf nooit tonen. */
ui-nav-menu { display: none; }
/* In de Shopify-admin: Shopify toont titel en menu, dus geen eigen kop, testbalk of tabbalk. */
/* In de Shopify-admin: Shopify toont titel en menu (onder de appnaam), dus geen eigen kop, testbalk of menu. */
html.shopify .kop, html.shopify .testbalk, html.shopify .tabs { display: none !important; }
html.shopify main { padding-bottom: 32px; }
html.shopify body { background: #F1F1F1; }
/* Vanaf een laptop: kaarten naast elkaar in plaats van één telefoonkolom. Kop, cijfers en lijsten blijven over de
   volle breedte; losse kaarten vullen twee (vanaf 1400 px drie) kolommen. */
@media (min-width: 900px) {
  .app { max-width: 1280px; }
  main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; align-items: start; padding-left: 28px; padding-right: 28px; }
  main > * { grid-column: 1 / -1; }
  main > .kaart, main > form.kaart, main > section.kaart { grid-column: auto; }
  main > .kaart.breed { grid-column: 1 / -1; }
  main > .kaart:has(> .lijst, > .inzicht-lijst, > .matrix, > table) { grid-column: 1 / -1; }
  main > .stat { margin: 0; }
  .titel { font-size: 36px; }
  .stat b { font-size: 26px; }
  .toast { bottom: 24px; }
  dialog.blad { margin: auto; border: 1px solid var(--inkt); }
}
@media (min-width: 1700px) {
  main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Inzicht als tabel op een breed scherm. */
.inzicht-rij .kol, .inzicht-kop { display: none; }
@media (min-width: 900px) {
  .inzicht-kop { display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(7, minmax(0, 1fr)) minmax(170px, 1.3fr); gap: 12px; padding: 4px 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--zacht); border-bottom: 1px solid var(--inkt); }
  .inzicht-kop span:not(:first-child) { text-align: right; }
  .inzicht-rij > summary { grid-template-columns: minmax(0, 2.2fr) repeat(7, minmax(0, 1fr)) minmax(170px, 1.3fr); align-items: center; }
  .inzicht-rij .kol { display: block; text-align: right; font-variant-numeric: tabular-nums; }
  .inzicht-rij > summary .meta { display: none; }
  .inzicht-rij > summary:hover { background: #FAFAF9; }
  .inzicht-rij .rechts { grid-auto-flow: column; align-items: center; justify-content: end; gap: 10px; }
  main > .knoppen { display: flex; gap: 12px; }
  main > .knoppen > .knop { width: auto; padding: 0 28px; }
}

@media (min-width: 900px) { .inzicht-rij .rechts b { white-space: nowrap; } }
.meta .breed { display: none; }
.chips.sorteer { align-items: center; margin-top: 0; }
.chips.sorteer .klein { margin-right: 4px; }
@media (min-width: 900px) {
  .inzicht-rij > summary .meta { display: block; }
  .meta .smal, .inzicht-rij .rechts b.smal { display: none; }
  .meta .breed { display: inline; }
  .inzicht-rij .kol.sterk { font-weight: 700; color: var(--inkt); }
}

/* ==========================================================================
   Beheer in dashboardstijl (2 nov 2026), net als EP Retouren en Sendcloud: zachte witte kaarten, kopjes in gewone
   zinnen, kerncijfers als losse kaarten, pillen voor labels. Alleen voor beheer (html.beheer); wat atleten en klanten
   zien blijft in de huisstijl (geheugen: interne dashboards in Sendcloud-stijl).
   ========================================================================== */
html.beheer {
  --r: 12px;
  --lijn: #E7E5E2;
  --doek: #F5F5F3;
  --goed: #13804B;
  --slecht: #C8102E;
}
html.beheer body, html.shopify.beheer body { background: var(--doek); font-size: 14px; }
html.beheer .titel { text-transform: none; letter-spacing: -.4px; font-size: 26px; font-weight: 700; line-height: 1.2; }
html.beheer .eyebrow { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: var(--zacht); }
/* Het eerste label in een kaart is de titel van die kaart. */
html.beheer .kaart > .eyebrow:first-child, html.beheer .kaart > .rij:first-child .eyebrow { font-size: 16px; font-weight: 600; color: var(--inkt); letter-spacing: -.1px; }
html.beheer .kaart { border-radius: var(--r); border-color: var(--lijn); padding: 20px 22px; gap: 12px; }
html.beheer .kaart h2 { font-size: 15px; font-weight: 500; color: var(--tekst); }
html.beheer .knop { border-radius: 8px; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; min-height: 40px; padding: 0 16px; }
html.beheer .knop.licht { background: #fff; border-color: #D6D3CF; }
html.beheer .knop.licht:hover { border-color: var(--inkt); }
html.beheer .tag { border-radius: 999px; text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; padding: 2px 10px; border: 0; background: var(--doek); color: var(--zacht); }
html.beheer .tag.goed { background: #E7F4EC; color: var(--goed); }
html.beheer .tag.vol { background: var(--inkt); color: #fff; }
html.beheer .tag:not(.goed):not(.zacht):not(.vol) { background: #FBEAEC; color: var(--slecht); }
html.beheer .veld label, html.beheer .veld legend { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--inkt); }
html.beheer .veld input, html.beheer .veld select, html.beheer .veld textarea, html.beheer .kaart input[type="search"] { border-radius: 8px; border-color: #D6D3CF; min-height: 42px; }
html.beheer .chip { border-radius: 8px; min-height: 32px; font-size: 13px; }
html.beheer .chip[aria-pressed="true"] { background: var(--inkt); color: #fff; }
html.beheer .link { text-decoration: none; border-bottom: 1px solid #CFCBC6; padding: 2px 0; min-height: 0; font-weight: 600; font-size: 13px; }
html.beheer .link:hover { border-color: var(--inkt); }
/* Kerncijfers: losse kaarten in plaats van één blok met lijnen. */
html.beheer .stat { border: 0; background: transparent; gap: 16px; }
html.beheer .stat > div { background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); padding: 18px 20px; border-left: 1px solid var(--lijn) !important; }
html.beheer .stat b { font-size: 28px; letter-spacing: -.6px; line-height: 1.15; }
html.beheer .stat span { font-size: 13px; color: var(--zacht); }
html.beheer .balk { border-radius: 6px; overflow: hidden; height: 10px; }
html.beheer .balk i { border-radius: 6px; }
html.beheer .weken { border-radius: 10px; overflow: hidden; }
html.beheer .eisen li { border-radius: 0; }
html.beheer .toast { border-radius: 10px; }
html.beheer dialog.blad { border-radius: 14px; }

/* Laptop: menu links (donker, met iconen), inhoud rechts. Ook in de Shopify-admin, zoals EP Retouren. */
@media (min-width: 900px) {
  html.beheer .kop, html.beheer .testbalk { display: none; }
  html.beheer .app { max-width: none; margin: 0 0 0 232px; }
  html.beheer main { max-width: 1360px; padding: 28px 32px 64px; gap: 16px; }
  html.beheer .tabs { top: 0; bottom: 0; left: 0; transform: none; width: 232px; max-width: none; display: flex; flex-direction: column; gap: 2px; padding: 20px 12px; background: var(--inkt); border: 0; z-index: 20; }
  html.beheer .tabs a { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 0; padding: 9px 12px; border-radius: 8px; color: rgba(255, 255, 255, .78); font-size: 14px; font-weight: 500; }
  html.beheer .tabs a svg { width: 19px; height: 19px; }
  html.beheer .tabs a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
  html.beheer .tabs a[aria-current="page"] { background: rgba(255, 255, 255, .14); color: #fff; font-weight: 600; }
  html.beheer .zijmerk { display: flex; align-items: center; gap: 10px; padding: 4px 10px 20px; color: #fff; font-weight: 700; font-size: 15px; }
  html.beheer .zijmerk .mk { width: 30px; height: 30px; border-radius: 8px; background: rgba(255, 255, 255, .12); display: grid; place-items: center; }
  html.beheer .stat b { font-size: 28px; }
}
.zijmerk { display: none; }
@media (min-width: 900px) { html.beheer .zijmerk { display: flex; } }

html.beheer .inzicht-kop { text-transform: none; letter-spacing: 0; font-size: 12px; border-bottom-color: var(--lijn); }
/* Overzicht: te doen, commissie, top, programma's (Sendcloud-stijl, alleen beheer). */
.akk { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.ak { background: #fff; border: 1px solid var(--lijn); border-radius: 12px; padding: 16px 18px; text-decoration: none; color: var(--inkt); display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; }
.ak:hover { border-color: var(--inkt); }
.ak .at { font-weight: 600; font-size: 14px; }
.ak .pijl { color: var(--zacht); display: flex; }
.ak b { grid-column: 1 / -1; font-size: 28px; font-weight: 700; letter-spacing: -.6px; line-height: 1.15; margin-top: 4px; }
.ak small { grid-column: 1 / -1; color: var(--zacht); font-size: 12px; }
.ak:first-child:not(.nul) { background: var(--inkt); border-color: var(--inkt); color: #fff; }
.ak:first-child:not(.nul) .pijl, .ak:first-child:not(.nul) small { color: rgba(255, 255, 255, .7); }
.ak.nul b { color: #B5B0AA; font-weight: 500; }
.eyebrow.sectie { margin-bottom: -6px; }
.gt { font-size: 30px; font-weight: 700; letter-spacing: -.6px; line-height: 1.1; color: var(--inkt); }
.kaart > .stippen { list-style: none; margin: 0; padding: 0; display: block; }
.kaart > .stippen li { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--lijn); }
.kaart > .stippen li:first-child { border-top: 0; }
.kaart > .stippen .stip { width: 9px; height: 9px; border-radius: 50%; display: block; padding: 0; border: 0; }
.stip.geel { background: #F5B014; } .stip.blauw { background: #2C6ECB; } .stip.grijs { background: #9A958F; } .stip.groen { background: #13804B; }
.toplijst { list-style: none; margin: 0; padding: 0; display: block; }
.toplijst li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--lijn); }
.toplijst li:first-child { border-top: 0; }
.toplijst .plek { width: 24px; height: 24px; border-radius: 50%; background: var(--doek, #F5F5F3); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.toplijst .wat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.prog { border: 1px solid var(--lijn); border-radius: 10px; padding: 14px 16px; display: grid; gap: 10px; }
.prog .drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.prog .drie span { display: block; font-size: 12px; color: var(--zacht); }
.prog .drie b { font-size: 18px; font-weight: 700; }
.segment { display: inline-flex; background: var(--doek, #F5F5F3); border-radius: 10px; padding: 3px; gap: 2px; align-self: flex-start; }
.segment button { border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--zacht); padding: 7px 14px; border-radius: 8px; cursor: pointer; }
.segment button[aria-selected="true"] { background: #fff; color: var(--inkt); outline: 1px solid var(--lijn); }
.segment .tel { background: rgba(0, 0, 0, .06); border-radius: 999px; padding: 0 7px; font-size: 11px; margin-left: 4px; }
@media (min-width: 900px) {
}

.prog .drie b { white-space: nowrap; }
/* Shopify: geen eigen menu links, dus de inhoud over de volle breedte. */
@media (min-width: 900px) {
  html.shopify.beheer .app { margin-left: 0; }
  html.shopify.beheer main { padding: 24px 28px 48px; margin: 0 auto; }
}
/* Atleet: stand bovenaan Vandaag en de code bij de hand. */
.kaart.stand { gap: 12px; }
.kaart.stand .stat { border: 0; }
.kaart.stand .statlink { display: block; padding: 10px 8px; border-left: 1px solid var(--lijn); text-decoration: none; color: inherit; }
.kaart.stand .statlink b { display: block; font-size: 22px; font-weight: 700; color: var(--inkt); font-variant-numeric: tabular-nums; }
.kaart.stand .statlink span { font-size: 12px; color: var(--zacht); }
.codebalk { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; border-top: 1px solid var(--lijn); padding-top: 12px; }
.codebalk b { display: block; font-size: 20px; letter-spacing: .04em; color: var(--inkt); }
.codebalk .knop { width: auto; min-height: 44px; padding: 0 16px; }
details.uitleg summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--inkt); padding: 4px 0; }
details.uitleg[open] summary { margin-bottom: 6px; }
.saldokeuze { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.saldokeuze .klein { margin: 6px 0 0; }
.verzoeklijst { list-style: none; margin: 0; padding: 0; display: block; }
.verzoeklijst li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--lijn); }
.verzoeklijst li:first-child { border-top: 0; }
.knoppen-rij { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.knoppen-rij .knop { width: auto; min-height: 38px; padding: 0 14px; }
@media (max-width: 899px) { .verzoeklijst li { grid-template-columns: 1fr; } .knoppen-rij { justify-content: flex-start; } }

.honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }