/* Lettertype: Exo, voor de hele applicatie.
   Standaard via Google Fonts. Wil je het zelf hosten (aan te raden: geen
   verzoek naar Google vanaf de bezoeker), draai dan `npm run fonts` en
   vervang de regel hieronder door:  @import url('/fonts/exo.css'); */
@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,300..800;1,400&display=swap');

:root {
  --inkt: #14120F; --koolzwart: #1B1815; --paper: #F7F4EC; --paper2: #EDE8DC;
  --geel: #FFCC00; --geel-d: #E0B200; --groen: #2F6B4A; --rood: #A32A21;
  --grijs: #8A8078; --lijn: #D9D1C2;
  /* Eén familie, drie rollen. Het verschil zit in gewicht en spatiëring. */
  --disp: 'Exo', 'Segoe UI', Tahoma, sans-serif;   /* koppen: 800, uppercase   */
  --mono: 'Exo', 'Segoe UI', Tahoma, sans-serif;   /* data en labels: 500, wijd */
  --body: 'Exo', 'Segoe UI', Tahoma, sans-serif;   /* lopende tekst: 400        */
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--body); background: var(--koolzwart); color: var(--paper);
  min-height: 100vh; -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Exo is geen monospace, dus de rollen krijgen hun eigen gewicht.
   Bedragen en lotnummers staan op tabulaire cijfers, zodat kolommen uitlijnen. */
.hero, .bon-kop h2, .lotblok .nr, .knop, .dropzone strong,
.p-titel, .stat .v, .trekdoos .rol { font-weight: 800; }
.eyebrow, .bon-kop p, .rij, .lotblok .lbl, label.veld, .mini, .voet a,
.stat .k, .pil, .linkje, .leeg, .tabs button, .zoek, .knop.rand, .knop.klein,
table.p, table.p th, input[type=text], input[type=email], input[type=password] { font-weight: 500; }
.rij span:last-child, .lotblok .nr, .stat .v, .trekdoos .rol { font-variant-numeric: tabular-nums; }
.lead, .check span, .melding { font-weight: 400; }
.wrap { max-width: 560px; margin: 0 auto; padding: 28px 16px 64px; }
.wide { max-width: 1180px; margin: 0 auto; padding: 24px 16px 64px; }
.verborgen { display: none !important; }

.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--geel); margin: 0 0 14px; }
.hero { font-family: var(--disp); line-height: .94; letter-spacing: -.005em; text-transform: uppercase; margin: 0; font-size: clamp(34px, 11vw, 58px); }
.hero.geel { color: var(--geel); }
.lead { color: #B8AEA2; font-size: 15px; line-height: 1.6; margin: 16px 0 0; max-width: 46ch; }

/* kassabon */
.bon { position: relative; margin: 26px 0 0; filter: drop-shadow(0 18px 34px rgba(0,0,0,.45)); }
.zig { height: 9px; background-image:
  linear-gradient(45deg, var(--paper) 50%, transparent 50%),
  linear-gradient(-45deg, var(--paper) 50%, transparent 50%);
  background-size: 15px 15px; background-repeat: repeat-x; }
.zig.boven { transform: scaleY(-1); }
.bon-body { background: var(--paper); color: var(--inkt); padding: 22px 20px 24px; animation: printuit .45s cubic-bezier(.2,.7,.3,1) both; }
@keyframes printuit { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

.bon-kop { text-align: center; border-bottom: 2px dashed var(--lijn); padding-bottom: 14px; margin-bottom: 16px; }
.bon-kop h2 { font-family: var(--disp); text-transform: uppercase; font-size: 19px; margin: 0; letter-spacing: .01em; }
.bon-kop p { font-family: var(--mono); font-size: 11px; color: var(--grijs); margin: 6px 0 0; letter-spacing: .06em; }

.rij { display: flex; justify-content: space-between; gap: 14px; font-family: var(--mono); font-size: 13px; padding: 7px 0; }
.rij span:first-child { color: var(--grijs); }
.rij span:last-child { text-align: right; font-weight: 700; word-break: break-word; }
.rij.groot { font-size: 16px; border-top: 2px dashed var(--lijn); margin-top: 8px; padding-top: 12px; }

.lotblok { text-align: center; margin: 20px 0 6px; padding: 16px 10px; background: var(--inkt); color: var(--paper); }
.lotblok .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--geel); }
.lotblok .nr { font-family: var(--disp); font-size: clamp(30px, 9vw, 42px); letter-spacing: .04em; margin-top: 6px; }
.streepjes { display: flex; gap: 2px; justify-content: center; align-items: flex-end; height: 26px; margin-top: 12px; }
.streepjes i { display: block; background: var(--paper); }

label.veld { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--grijs); margin: 14px 0 6px; }
input[type=text], input[type=email], input[type=password] {
  width: 100%; padding: 12px 13px; border: 1.5px solid var(--lijn); background: #fff; color: var(--inkt);
  font-family: var(--mono); font-size: 15px; border-radius: 0; outline: none;
}
input:focus-visible { border-color: var(--inkt); box-shadow: 0 0 0 3px var(--geel); }

.check { display: flex; gap: 11px; align-items: flex-start; margin: 14px 0 0; cursor: pointer; }
.check input { margin: 2px 0 0; width: 18px; height: 18px; accent-color: var(--inkt); flex: none; }
.check span { font-size: 13.5px; line-height: 1.5; color: #443C36; }

.knop { width: 100%; border: none; cursor: pointer; padding: 16px 18px; background: var(--geel); color: var(--inkt);
  font-family: var(--disp); text-transform: uppercase; font-size: 16px; letter-spacing: .02em; transition: transform .12s, background .12s; }
.knop:hover:not(:disabled) { background: var(--geel-d); }
.knop:active:not(:disabled) { transform: translateY(2px); }
.knop:disabled { background: var(--paper2); color: #A79C8E; cursor: not-allowed; }
.knop:focus-visible { outline: 3px solid var(--inkt); outline-offset: 2px; }
.knop.donker { background: var(--inkt); color: var(--paper); }
.knop.donker:hover:not(:disabled) { background: #000; }
.knop.rand { background: transparent; border: 1.5px solid var(--lijn); color: var(--inkt); font-family: var(--mono); font-size: 12px; letter-spacing: .1em; padding: 11px 14px; }
.knop.rand:hover { background: var(--paper2); }
.knop.klein { width: auto; padding: 9px 14px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; }
.knoprij { display: flex; gap: 8px; flex-wrap: wrap; }

.dropzone { border: 2px dashed var(--lijn); background: #fff; padding: 30px 18px; text-align: center; cursor: pointer; transition: border-color .15s; }
.dropzone:hover, .dropzone.over { border-color: var(--inkt); background: #FFFDF7; }
.dropzone p { margin: 10px 0 0; font-size: 13.5px; color: #5C534B; }
.dropzone strong { display: block; font-family: var(--disp); text-transform: uppercase; font-size: 15px; color: var(--inkt); }

.melding { padding: 13px 15px; font-size: 13.5px; line-height: 1.55; margin-top: 16px; border-left: 4px solid; }
.melding.fout { background: #FBEEEC; border-color: var(--rood); color: #7A1E17; }
.melding.ok { background: #EBF3EE; border-color: var(--groen); color: #1F4A33; }
.melding.let { background: #FFF8DC; border-color: var(--geel-d); color: #6B5400; }

.laden { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 34px 0; }
.scanner { width: 74px; height: 96px; background: #fff; border: 1.5px solid var(--lijn); position: relative; overflow: hidden; }
.scanner i { position: absolute; left: 8px; right: 8px; height: 3px; background: var(--grijs); opacity: .35; }
.scanner .balk { position: absolute; left: 0; right: 0; height: 3px; background: var(--geel); box-shadow: 0 0 12px 3px rgba(255,204,0,.55); animation: scan 1.5s ease-in-out infinite; }
@keyframes scan { 0%,100% { top: 4px; } 50% { top: 88px; } }

.mini { font-family: var(--mono); font-size: 11px; color: var(--grijs); letter-spacing: .06em; }
.voet { text-align: center; margin-top: 26px; }
.voet a { color: #7A6E63; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.voet a:hover { color: var(--geel); }
img.bonfoto { width: 100%; margin-top: 10px; border: 1px solid var(--lijn); display: block; }

/* beheer */
.p-kop { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid #332E29; padding-bottom: 18px; }
.p-titel { font-family: var(--disp); text-transform: uppercase; font-size: 26px; margin: 0; letter-spacing: .01em; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: #332E29; border: 1px solid #332E29; margin: 22px 0; }
.stat { background: #211D19; padding: 16px 18px; }
.stat .k { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #8A8078; }
.stat .v { font-family: var(--disp); font-size: 26px; margin-top: 6px; }
.stat .v.geel { color: var(--geel); }
.tabelwrap { overflow-x: auto; border: 1px solid #332E29; }
table.p { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12.5px; min-width: 820px; }
table.p th { text-align: left; padding: 11px 12px; background: #211D19; color: #8A8078; font-weight: 400; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; border-bottom: 1px solid #332E29; white-space: nowrap; }
table.p td { padding: 11px 12px; border-bottom: 1px solid #2A2521; }
table.p tr:hover td { background: #201C19; }
table.p tr.winnaar td { background: rgba(255,204,0,.1); }
.pil { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; padding: 3px 7px; border: 1px solid; text-transform: uppercase; }
.pil.geel { color: var(--geel); border-color: var(--geel); }
.pil.grijs { color: #8A8078; border-color: #4A433C; }
.linkje { background: none; border: none; color: var(--geel); font-family: var(--mono); font-size: 11.5px; cursor: pointer; padding: 0; text-decoration: underline; }
.linkje.rood { color: #C9705F; }
.leeg { padding: 46px 20px; text-align: center; color: #8A8078; font-family: var(--mono); font-size: 13px; }
.tabs { display: flex; gap: 1px; background: #332E29; border: 1px solid #332E29; margin-top: 26px; }
.tabs button { flex: 1; background: #1B1815; border: none; color: #8A8078; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 12px 8px; cursor: pointer; }
.tabs button.aan { background: var(--geel); color: var(--inkt); }
.zoek { width: 100%; max-width: 300px; padding: 10px 12px; background: #211D19; border: 1px solid #332E29; color: var(--paper); font-family: var(--mono); font-size: 12.5px; outline: none; }
.zoek:focus-visible { border-color: var(--geel); }
.trekdoos { background: #211D19; border: 1px solid #332E29; padding: 26px; text-align: center; margin-top: 22px; }
.trekdoos .rol { font-family: var(--disp); font-size: clamp(30px, 8vw, 46px); letter-spacing: .05em; color: var(--geel); min-height: 54px; }
.modal { position: fixed; inset: 0; background: rgba(10,8,6,.86); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50; }
.modal-in { background: var(--paper); color: var(--inkt); max-width: 460px; width: 100%; max-height: 88vh; overflow: auto; padding: 20px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}