:root {
  --bg: #f4f5f7; --vlak: #fff; --tekst: #1d2330; --zacht: #6b7280; --lijn: #dfe3ea;
  --accent: #1f6feb; --groen: #1a7f37; --rood: #c62828; --geel: #fff4d6;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--tekst); font-size: 16px; }
[hidden] { display: none !important; }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
a { color: var(--accent); }

.menu { display: flex; align-items: center; gap: .25rem; background: #1d2330; color: #fff; padding: .4rem 1rem; flex-wrap: wrap; }
.menu strong { margin-right: 1rem; }
.menu button { background: none; border: 0; color: #cfd6e4; padding: .5rem .75rem; border-radius: 6px; font: inherit; cursor: pointer; }
.menu button.actief, .menu button:hover { background: #2f3747; color: #fff; }
.menu .rechts { margin-left: auto; font-size: .9rem; color: #cfd6e4; display: flex; gap: .5rem; align-items: center; }
.proef { background: var(--geel); padding: .4rem 1rem; font-size: .9rem; }

main, .pagina { padding: 1rem; max-width: 1100px; margin: 0 auto; }
.smal { max-width: 560px; }

.knop { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; border: 1px solid var(--lijn); background: var(--vlak);
  color: var(--tekst); padding: .55rem .9rem; border-radius: 8px; font: inherit; cursor: pointer; text-decoration: none; min-height: 44px; }
.knop:hover { border-color: #b8c0cc; }
.knop:disabled { opacity: .45; cursor: default; }
.knop.groot { font-size: 1.1rem; padding: .8rem 1.2rem; min-height: 56px; }
.knop.groen { background: var(--groen); border-color: var(--groen); color: #fff; }
.knop.rood { color: var(--rood); }
.knop.klein { min-height: 36px; padding: .25rem .6rem; }
.knoppen { display: flex; gap: .5rem; flex-wrap: wrap; }

input, select, textarea { font: inherit; padding: .55rem .6rem; border: 1px solid var(--lijn); border-radius: 8px; background: #fff; min-height: 44px; width: 100%; }
label { display: block; margin-bottom: .75rem; font-size: .9rem; color: var(--zacht); }
label input, label select, label textarea { margin-top: .25rem; color: var(--tekst); }
label.vink { display: flex; gap: .5rem; align-items: center; color: var(--tekst); }
label.vink input { width: auto; min-height: 0; margin: 0; }
fieldset { border: 1px solid var(--lijn); border-radius: 10px; margin: 0 0 1rem; padding: 1rem; background: var(--vlak); }
legend { font-weight: 600; padding: 0 .3rem; }
.hint { font-size: .85rem; color: var(--zacht); margin: .25rem 0 .75rem; }
.regel { display: flex; gap: .5rem; align-items: end; flex-wrap: wrap; margin-bottom: 1rem; }
.regel label { margin: 0; }
.regel input { width: auto; }

table { width: 100%; border-collapse: collapse; background: var(--vlak); }
th, td { text-align: left; padding: .5rem; border-bottom: 1px solid var(--lijn); vertical-align: middle; }
th { font-size: .85rem; color: var(--zacht); font-weight: 600; }
.r { text-align: right; }
tr.uit td { color: var(--zacht); }
.tabelvak { overflow-x: auto; }

.melding { padding: .6rem .8rem; border-radius: 8px; margin: .5rem 0; }
.melding.fout { background: #fdecea; color: var(--rood); }
.melding.ok { background: #e6f4ea; color: var(--groen); }

.tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; margin: 1rem 0; }
.tegels div { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 10px; padding: .75rem 1rem; }
.tegels span { display: block; font-size: .85rem; color: var(--zacht); }
.tegels b { font-size: 1.4rem; }

/* Kassascherm */
.kassa { display: grid; grid-template-columns: 1fr 340px; gap: 1rem; padding: 1rem; height: calc(100vh - 52px); max-width: none; }
.kassa-links { display: flex; flex-direction: column; min-height: 0; }
.balk { display: flex; gap: .5rem; }
.balk input { font-size: 1.2rem; min-height: 56px; }
.balk select { width: auto; min-height: 56px; }
.resultaten { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 10px; margin-top: .5rem; max-height: 40vh; overflow-y: auto; }
.resultaat { display: grid; grid-template-columns: 1fr auto; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--lijn); background: none; padding: .6rem .8rem; font: inherit; cursor: pointer; }
.resultaat:hover { background: #f0f4ff; }
.resultaat small { grid-column: 1; color: var(--zacht); }
.resultaat b { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
.bonvak { flex: 1; overflow-y: auto; margin-top: .75rem; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 10px; }
.bonvak .aantal { white-space: nowrap; }
.aantalknop { border: 0; background: none; font: inherit; font-weight: 600; min-width: 2.2rem; cursor: pointer; }
small.korting { color: var(--groen); display: block; }
.leeg { color: var(--zacht); text-align: center; padding: 2rem; }
.kassa-rechts { display: flex; flex-direction: column; gap: .75rem; }
.totaalvak { background: #1d2330; color: #fff; border-radius: 12px; padding: 1rem; }
.totaalvak span { display: block; color: #cfd6e4; }
.totaalvak b { font-size: 2.4rem; }
.totaalvak small { display: block; color: #9fe0b0; min-height: 1.2em; }
.knoprooster { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }

.dlg { border: 0; border-radius: 14px; padding: 1.25rem; width: min(440px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.dlg.breed { width: min(720px, calc(100vw - 32px)); }
.dlg::backdrop { background: rgba(20, 24, 33, .5); }
.dlg h2 { margin-top: 0; }
.dlg-knoppen { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }
.afr-totaal { font-size: 1.2rem; margin-bottom: 1rem; }
.afr-totaal b { font-size: 2rem; display: block; }
.afr-knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1rem; }
.snelgeld { display: flex; gap: .4rem; flex-wrap: wrap; margin: -.25rem 0 .75rem; }
.snelgeld .knop { flex: 1; }
.afr-status { font-size: 1.3rem; font-weight: 600; min-height: 1.6em; }
.afr-status.ok { color: var(--groen); }
.afr-status.fout { color: var(--rood); }
.wisselgeld { font-size: 2rem; font-weight: 700; color: var(--groen); margin: 1rem 0; }
input.smal { width: 5rem; }
.bonvoorbeeld { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; background: #fff; padding: 1rem; border: 1px solid var(--lijn); overflow-x: auto; max-height: 60vh; }

#printvak { display: none; }
@media print {
  body > *:not(#printvak) { display: none !important; }
  #printvak { display: block !important; }
  #printvak pre { font: 11px/1.25 ui-monospace, Menlo, Consolas, monospace; margin: 0; white-space: pre; }
  @page { size: 80mm auto; margin: 3mm; }
}

@media (max-width: 800px) {
  .kassa { grid-template-columns: 1fr; height: auto; }
  .bonvak { min-height: 240px; }
  .totaalvak b { font-size: 2rem; }
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #12151c; --vlak: #1b1f29; --tekst: #e6e9ef; --zacht: #9aa3b2; --lijn: #2c3240; --geel: #3a3218; }
  input, select, textarea { background: #12151c; color: var(--tekst); }
  .resultaat:hover { background: #222a3a; }
  .melding.fout { background: #3a1d1d; } .melding.ok { background: #183222; }
  .bonvoorbeeld { background: #fff; color: #111; }
}