/* =====================================================================
   LaundryIQ — huisstijl (tokens en lettertype van LeisureIQ, beheer/thema/assets/site.css)
   Eén stylesheet voor de gast, het parkbeheer en het leveranciersbeheer.
   ===================================================================== */
@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;
  src:url(fonts/archivo-latin-ext-wdth-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;
  src:url(fonts/archivo-latin-wdth-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --font:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
}
/* Huisstijl LeisureIQ (docs/huisstijl.md, 15 oktober 2026): donker is voor klanten, licht voor
   LeisureIQ zelf. Niet de stand van het apparaat volgen; de pagina zet data-thema (gedeeld/thema.js),
   met een schakelaar. Zonder data-thema: donker. */
:root,:root[data-thema="donker"]{
  --papier:#071624; --vlak:#0E2537; --vlak-2:#143047; --vlak-3:#1A3A52; --rand:#1E3D55; --rand-sterk:#2C536F;
  --inkt:#F5F9FC; --tekst:#E6EDF3; --zacht:#8CA3B8; --uit:#5A7086;
  --merk-a:#72C1A5; --merk-b:#00B1E9; --accent:#00A0D8;
  --knop:#0678FC; --knop-tekst:#FFFFFF; --knop-over:#00A0D8;
  --ok:#05D996; --ok-vlak:#0C3A32; --let:#F5B841; --let-vlak:#3A2E10; --stil:#8CA3B8; --stil-vlak:#143047;
  --nee:#F0524D; --nee-vlak:#43201F; --bezig:#5CC8F0; --bezig-vlak:#0F3550; --lijn-meting:#00A0D8;
  --schaduw:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35); --hoek:14px;
  color-scheme:dark;
}
:root[data-thema="licht"]{
  --papier:#F3F7F8; --vlak:#FFFFFF; --vlak-2:#E9F0F3; --vlak-3:#DCE7EC; --rand:#D3DEE4; --rand-sterk:#AFC1CB;
  --inkt:#05121D; --tekst:#182C3B; --zacht:#526A7C; --uit:#7C91A0;
  --merk-a:#72C1A5; --merk-b:#00B1E9; --accent:#006C91;
  --knop:linear-gradient(135deg,#72C1A5,#00B1E9); --knop-tekst:#05121D; --knop-over:linear-gradient(135deg,#5FB396,#0098CC);
  --ok:#0B6B4A; --ok-vlak:#DFF4EB; --let:#8A6400; --let-vlak:#FBF2D5; --stil:#526A7C; --stil-vlak:#E9F0F3;
  --nee:#B4232F; --nee-vlak:#FBE9EA; --bezig:#006C91; --bezig-vlak:#DDEFF7; --lijn-meting:#00B1E9;
  --schaduw:0 1px 2px rgba(5,18,29,.06),0 8px 24px rgba(5,18,29,.08); --hoek:10px;
  color-scheme:light;
}

*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);background:var(--papier);color:var(--tekst);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{color:var(--inkt);margin:0;text-wrap:balance;line-height:1.2}
h1{font-size:1.6rem;font-stretch:112%}
h2{font-size:1.15rem}
h3{font-size:.98rem}
p{margin:0}
a{color:var(--accent)}
code,.mono{font-family:var(--mono);font-size:.85em;word-break:break-all}
.num{font-variant-numeric:tabular-nums}
.zacht{color:var(--zacht)}
.klein{font-size:.85rem}
.verborgen{display:none!important}
[hidden]{display:none!important}

.woordmerk{font-weight:800;font-stretch:125%;letter-spacing:-.01em;color:var(--inkt);white-space:nowrap;text-decoration:none}
.woordmerk b{font-weight:800;background:linear-gradient(160deg,var(--merk-a),var(--merk-b));-webkit-background-clip:text;background-clip:text;color:transparent}
.label-proto{display:inline-block;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--let);background:var(--let-vlak);padding:.15rem .5rem;border-radius:4px;font-weight:600}
.kolomkop{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--zacht);font-weight:600;margin:0}

/* knoppen en velden */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:0;background:var(--knop);color:var(--knop-tekst);border-radius:12px;padding:.75rem 1rem;font-weight:700;cursor:pointer;font-size:1rem;text-align:center;text-decoration:none}
.knop:hover{background:var(--knop-over)}
.knop.licht{background:transparent;color:var(--inkt);border:1px solid var(--rand-sterk)}
.knop.licht:hover{background:var(--vlak-2)}
.knop.gevaar{background:transparent;color:var(--nee);border:1px solid var(--nee)}
.knop.klein{padding:.4rem .7rem;font-size:.85rem;border-radius:8px}
.knop.breed{width:100%}
.knop[disabled]{opacity:.45;cursor:not-allowed}
.veld{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;min-width:0}
.veld input,.veld select,.veld textarea{border:1px solid var(--rand-sterk);background:var(--vlak);border-radius:8px;padding:.5rem .6rem;font-size:.95rem;min-width:0;width:100%}
.veld .hulp{color:var(--zacht);font-size:.78rem}
.velden{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.7rem}
.velden .vol{grid-column:1/-1}
.vink{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.92rem}
.vink input{width:1.1rem;height:1.1rem;accent-color:var(--accent)}
.rij{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.rij.tussen{justify-content:space-between}
.stapel{display:flex;flex-direction:column;gap:.75rem}

.kaart{background:var(--vlak);border:1px solid var(--rand);border-radius:var(--hoek);padding:1rem;display:flex;flex-direction:column;gap:.75rem;min-width:0}
.kaart.smal{max-width:440px;margin:2rem auto}
.melding{font-size:.9rem;padding:.6rem .75rem;border-radius:10px}
.melding.let{background:var(--let-vlak);color:var(--let)}
.melding.nee{background:var(--nee-vlak);color:var(--nee)}
.melding.ok{background:var(--ok-vlak);color:var(--ok)}
.melding.info{background:var(--bezig-vlak);color:var(--bezig)}
.prijs{font-size:1.6rem;font-weight:800;color:var(--inkt);font-variant-numeric:tabular-nums}

.pil{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;font-weight:600;padding:.12rem .5rem;border-radius:99px;white-space:nowrap;width:max-content}
.pil::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:currentColor}
.pil.vrij,.pil.ok,.pil.betaald{color:var(--ok);background:var(--ok-vlak)}
.pil.bezig,.pil.wacht,.pil.info,.pil.open{color:var(--bezig);background:var(--bezig-vlak)}
.pil.klaar,.pil.let,.pil.terugbetaald,.pil.gecrediteerd{color:var(--let);background:var(--let-vlak)}
.pil.gereserveerd,.pil.geblokkeerd,.pil.stil,.pil.verlopen,.pil.geannuleerd{color:var(--stil);background:var(--stil-vlak)}
.pil.storing,.pil.nee,.pil.mislukt{color:var(--nee);background:var(--nee-vlak)}
.pil.wacht::before{animation:knipper 1.2s infinite}
@keyframes knipper{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.pil.wacht::before{animation:none}}

.voortgang{height:10px;border-radius:99px;background:var(--vlak-2);overflow:hidden}
.voortgang>div{height:100%;background:linear-gradient(90deg,var(--merk-a),var(--merk-b));border-radius:99px;transition:width .6s linear}
.laden{width:42px;height:42px;border-radius:50%;border:4px solid var(--vlak-2);border-top-color:var(--accent);animation:draai 1s linear infinite;align-self:center}
@keyframes draai{to{transform:rotate(360deg)}}

/* tabellen */
.tabel-wrap{overflow-x:auto;background:var(--vlak);border:1px solid var(--rand);border-radius:12px}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--zacht);font-weight:600;padding:.6rem .75rem;border-bottom:1px solid var(--rand);white-space:nowrap}
td{padding:.6rem .75rem;border-bottom:1px solid var(--rand);vertical-align:middle}
tr:last-child td{border-bottom:0}
tr.klikbaar{cursor:pointer}
tr.klikbaar:hover td,tr[aria-selected="true"] td{background:var(--vlak-2)}
td .naam{font-weight:700;color:var(--inkt)}
.rechts{text-align:right}
.acties{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:flex-end}

/* beheerschermen */
.kop{position:sticky;top:0;z-index:20;background:var(--vlak);border-bottom:1px solid var(--rand);padding:.6rem 16px}
.kop-in{max-width:1400px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.2rem}
.kop .woordmerk{font-size:1.2rem}
.kop .wie{margin-left:auto;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.band{background:var(--let-vlak);color:var(--let);padding:.45rem 16px;font-size:.88rem;font-weight:600}
.band-in{max-width:1400px;margin:0 auto;display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;justify-content:space-between}
.hoofd{max-width:1400px;margin:0 auto;padding-block:1.25rem 3rem;padding-inline:16px;display:flex;flex-direction:column;gap:1rem}
.tabs{display:flex;flex-wrap:wrap;gap:.25rem;border-bottom:1px solid var(--rand)}
.tabs button{border:0;background:transparent;padding:.55rem .8rem;cursor:pointer;font-weight:600;color:var(--zacht);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--inkt);border-bottom-color:var(--accent)}
.tabs .tel{font-size:.72rem;background:var(--nee-vlak);color:var(--nee);border-radius:99px;padding:0 .4rem;margin-left:.25rem}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
@media (max-width:700px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{background:var(--vlak);border:1px solid var(--rand);border-radius:12px;padding:.75rem .9rem}
.kpi .k-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.07em;color:var(--zacht);font-weight:600}
.kpi .k-waarde{font-size:1.6rem;font-weight:800;color:var(--inkt);font-stretch:112%;font-variant-numeric:tabular-nums}
.kpi .k-sub{font-size:.8rem;color:var(--zacht)}
.kpi.aandacht .k-waarde{color:var(--nee)}
.twee{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:1rem;align-items:start}
@media (max-width:900px){.twee{grid-template-columns:minmax(0,1fr)}}
.feiten{display:grid;grid-template-columns:auto 1fr;gap:.25rem .9rem;font-size:.88rem;margin:0}
.feiten dt{color:var(--zacht)}
.feiten dd{margin:0;color:var(--inkt);min-width:0;overflow-wrap:anywhere}
.grafiek{width:100%;height:auto;display:block}
.grafiek text{fill:var(--zacht);font-size:11px;font-family:var(--font)}
.spark{display:block}
.niveau{width:.6rem;height:.6rem;border-radius:50%;display:inline-block;flex:none}
.niveau.info{background:var(--accent)} .niveau.let{background:var(--let)} .niveau.nee{background:var(--nee)} .niveau.ok{background:var(--ok)} .niveau.beveiliging{background:var(--stil)}
.toast{position:fixed;bottom:calc(1rem + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:var(--knop);color:var(--knop-tekst);padding:.6rem 1rem;border-radius:10px;z-index:50;font-weight:600;box-shadow:var(--schaduw);max-width:calc(100% - 32px)}
.toast.fout{background:var(--nee);color:#fff}
.kopieer{display:flex;gap:.4rem;align-items:stretch}
.kopieer code{flex:1;background:var(--vlak-2);border-radius:8px;padding:.5rem .6rem;display:block}
.dialoog{position:fixed;inset:0;background:rgba(5,18,29,.45);display:grid;place-items:center;z-index:40;padding:16px}
.dialoog .kaart{max-width:520px;width:100%;max-height:calc(100vh - 32px);overflow:auto;box-shadow:var(--schaduw)}

/* inlogscherm */
body.los{display:grid;place-items:center;min-height:100vh;padding:16px}
.inlog{width:100%;max-width:420px}
.inlog .woordmerk{font-size:1.6rem}
.inlog .qr svg{width:180px;height:180px;display:block;margin:0 auto;border-radius:8px}
.scheiding{display:flex;align-items:center;gap:.6rem;color:var(--zacht);font-size:.8rem}
.scheiding::before,.scheiding::after{content:"";flex:1;height:1px;background:var(--rand)}
.knop.licht[aria-pressed="true"]{background:var(--knop);color:var(--knop-tekst);border-color:var(--knop)}
.zijbalk{display:grid;grid-template-columns:220px minmax(0,1fr);gap:1.25rem;align-items:start}
@media (max-width:900px){.zijbalk{grid-template-columns:minmax(0,1fr)}}
.menu{display:flex;flex-direction:column;gap:.15rem;position:sticky;top:4rem}
@media (max-width:900px){.menu{position:static;flex-direction:row;flex-wrap:wrap}}
.menu button{border:0;background:transparent;text-align:left;padding:.5rem .7rem;border-radius:8px;cursor:pointer;font-weight:600;color:var(--zacht)}
.menu button[aria-current="true"]{background:var(--vlak);color:var(--inkt);box-shadow:inset 3px 0 0 var(--accent)}
.stappen{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.35rem;font-size:.92rem}
pre.ruw{background:var(--vlak-2);border-radius:8px;padding:.75rem;overflow:auto;max-height:360px;font-size:.78rem;margin:0}

/* de schakelaar donker/licht */
.thema-knop{display:inline-flex;align-items:center;gap:.35rem}
.thema-knop svg{width:16px;height:16px}
.pil.gesloten{color:var(--stil);background:var(--stil-vlak)}