/*
 * Receptie en beheer: LeisureIQ-huisstijl (navidoctor/leisureiq, docs/huisstijl.md).
 * Donker voor klanten is de standaard; met de schakelaar naar licht. Lettertype Archivo, in de app zelf.
 */
@font-face { font-family: "Archivo"; font-weight: 400; font-display: swap; src: url("fonts/archivo-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 600; font-display: swap; src: url("fonts/archivo-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 700; font-display: swap; src: url("fonts/archivo-latin-700-normal.woff2") format("woff2"); }

:root {
  --grond: #071624; --vlak: #0E2537; --vlak2: #143047; --vlak3: #1A3A52;
  --rand: #1E3D55; --rand2: #2C536F;
  --tekst: #E6EDF3; --zacht: #8CA3B8; --uit: #5A7086;
  --groen: #05D996; --cyaan: #00A0D8; --blauw: #0678FC;
  --let: #F5B841; --nee: #F0524D;
  --goed-vlak: #0C3A30; --let-vlak: #3B2F12; --nee-vlak: #3A1B1A;
  --knop: var(--blauw); --knop-tekst: #FFFFFF; --knop-hover: var(--cyaan);
  --hoek: 14px;
}
:root[data-thema="licht"] {
  --grond: #F3F7F8; --vlak: #FFFFFF; --vlak2: #E9F0F3; --vlak3: #DDE8EE;
  --rand: #D3DEE4; --rand2: #B9CAD3;
  --tekst: #182C3B; --zacht: #526A7C; --uit: #7A8F9E;
  --groen: #0B6B4A; --cyaan: #006C91; --blauw: #006C91;
  --let: #8A6400; --nee: #B4232F;
  --goed-vlak: #DFF4EB; --let-vlak: #FBF2D5; --nee-vlak: #FBE9EA;
  --knop: #00B1E9; --knop-tekst: #05121D; --knop-hover: #72C1A5;
  --hoek: 10px;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--grond); color: var(--tekst); font-family: "Archivo", system-ui, sans-serif; font-size: 15px; line-height: 1.5; }
a { color: var(--cyaan); }
:focus-visible { outline: 2px solid var(--cyaan); outline-offset: 2px; }
[hidden] { display: none !important; }
.zacht { color: var(--zacht); }
.klein { font-size: 13px; }

.balk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding: 12px 24px; background: var(--vlak); border-bottom: 1px solid var(--rand); }
.balk-links { display: flex; align-items: center; gap: 12px; }
.logo { height: 22px; width: auto; }
.logo-licht { display: none; }
:root[data-thema="licht"] .logo-licht { display: block; }
:root[data-thema="licht"] .logo-donker { display: none; }
.product { font-weight: 600; color: var(--zacht); border-left: 1px solid var(--rand2); padding-left: 12px; }
.menu { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; }
.menu button { border: 0; background: transparent; color: var(--zacht); font: inherit; font-weight: 600; padding: 8px 12px; border-radius: 8px; cursor: pointer; min-height: 40px; }
.menu button[aria-current="page"] { background: var(--vlak3); color: var(--tekst); }
.menu button:hover { color: var(--tekst); }
.balk-rechts { display: flex; gap: 8px; margin-left: auto; }
.knop-klein { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--rand2); border-radius: 8px; background: transparent; color: var(--tekst); font: inherit; font-size: 14px; text-decoration: none; cursor: pointer; }
.knop-klein:hover { border-color: var(--cyaan); }

main { max-width: 1100px; margin: 0 auto; padding: 28px 24px 64px; outline: none; }
h1 { margin: 0 0 16px; font-size: 24px; font-weight: 700; }
.paneel { background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--hoek); padding: 20px 22px; margin-bottom: 18px; }
.paneel h2 { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--zacht); }
:root[data-thema="licht"] .paneel h2 { font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--tekst); }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; }

.smal { max-width: 420px; margin: 40px auto; }
label { display: block; font-weight: 600; margin: 14px 0 6px; }
input[type=text], input[type=password], input[type=search], input:not([type]), textarea { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--rand2); border-radius: 8px; background: var(--grond); color: var(--tekst); font: inherit; }
textarea { min-height: 110px; }
.knop { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border: 0; border-radius: 8px; background: var(--knop); color: var(--knop-tekst); font: inherit; font-weight: 700; cursor: pointer; margin-top: 16px; }
.knop:hover { background: var(--knop-hover); }
.knop:disabled { opacity: .6; cursor: wait; }
.knop-rand { background: transparent; color: var(--tekst); border: 1px solid var(--rand2); }
.knop-rand:hover { background: var(--vlak2); }
.vol { width: 100%; }
.of { display: flex; align-items: center; gap: 12px; color: var(--zacht); margin: 18px 0 2px; }
.of::before, .of::after { content: ""; flex: 1; border-top: 1px solid var(--rand); }
.fout { padding: 10px 12px; border-radius: 8px; background: var(--nee-vlak); color: var(--nee); margin: 12px 0 0; }
.ok { padding: 10px 12px; border-radius: 8px; background: var(--goed-vlak); color: var(--groen); margin: 12px 0 0; }
.qr { background: #FFFFFF; padding: 8px; border-radius: 8px; width: 200px; }
.qr svg { display: block; width: 100%; height: auto; }
code { font-family: ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }

.status { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.stip { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.stip-goed { background: var(--groen); }
.stip-let { background: var(--let); }
.stip-nee { background: var(--nee); }
.gegevens { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 10px 0 0; }
.gegevens dt { color: var(--zacht); }
.gegevens dd { margin: 0; overflow-wrap: anywhere; }

.zoekrij { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.zoekrij > div { flex: 1 1 280px; }
.zoekrij .knop { margin-top: 0; }
.kaartjes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--vlak3); font-size: 13px; }
.plaat { display: inline-block; padding: 2px 8px; border-radius: 4px; background: #F7C928; color: #1D1D2B; font-weight: 800; letter-spacing: 1px; }
.tabel-doos { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rand); vertical-align: top; }
th { color: var(--zacht); font-weight: 600; }

@media (max-width: 640px) {
  .balk { padding: 10px 16px; }
  main { padding: 20px 16px 48px; }
  .product { display: none; }
}