/* Harder tools – gedeelde opmaak op basis van harder-huisstijl (map huisstijl/).
   Laad eerst huisstijl/tokens.css en huisstijl/components/components.css, dan dit bestand.
   Alle klassen beginnen met "hx-" zodat ze niet botsen met de eigen CSS van een tool.
   Geen losse hexwaarden: de --hx-variabelen wijzen naar de tokens (tests/run.js controleert dit). */
:root{
  --hx-donker:var(--color-text-ui);
  --hx-grijs:var(--color-muted);
  --hx-lijn:var(--color-line);
  --hx-lijn-licht:color-mix(in srgb,var(--color-line) 55%,var(--color-surface));
  --hx-achtergrond:var(--color-surface-alt);
  --hx-vlak:var(--color-surface);
  --hx-vlak-zacht:color-mix(in srgb,var(--color-surface-alt) 60%,var(--color-surface));
  --hx-oranje:var(--brand-orange);   /* enige accentkleur */
  --hx-oranje-zacht:color-mix(in srgb,var(--brand-orange) 12%,var(--color-surface));
  --hx-groen:var(--color-ok);        --hx-groen-zacht:color-mix(in srgb,var(--color-ok) 15%,var(--color-surface));
  --hx-geel:var(--status-wacht);     --hx-geel-zacht:var(--status-wacht-surface);
  --hx-rood:var(--color-fail);       --hx-rood-zacht:color-mix(in srgb,var(--color-fail) 12%,var(--color-surface));
  --hx-font:var(--font-sans);
  --hx-mono:var(--font-mono);
  --hx-radius:var(--radius);
  --hx-radius-groot:var(--radius);
}

body{margin:0}
[class^="hx-"][hidden],[class*=" hx-"][hidden]{display:none!important}
/* huisstijlcomponenten zetten zelf display; hidden moet ze toch verbergen */
.h-btn[hidden],.h-tab[hidden],.h-pill[hidden]{display:none!important}

/* ---------- kopbalk ----------
   De huisstijl-kopbalk (h-header): wit, logo links, oranje lijn. Hier alleen wat tools-hub extra nodig heeft:
   vast bovenaan, de padregel en het smalle Word-zijvenster. */
.hx-banner{position:sticky;top:0;z-index:50;gap:12px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.hx-banner a{color:inherit;text-decoration:none}
.hx-merk{display:flex;align-items:center;gap:12px;white-space:nowrap}
.hx-banner .hx-pad{color:var(--color-muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hx-banner .hx-rechts{margin-left:auto;display:flex;gap:4px;align-items:center}
.hx-word-label{white-space:nowrap}
/* Smal (Word-zijvenster): logo zo hoog als een knop, geen app-naam. Kandidaat voor components.css. */
@media (max-width:520px){
  .hx-banner .h-header__logo{height:var(--header-button-height)}
  .hx-banner .h-header__name{display:none}
}

/* ---------- knoppen ----------
   De knoppen komen uit de huisstijl (h-btn, h-btn--primary). Hier alleen wat tools-hub extra nodig heeft. */
a.h-btn{text-decoration:none}
.h-btn{white-space:nowrap}
/* Tekstknop zonder rand en vlak, voor bijzaken (Voorbeeld, Toon, Losmaken). Kandidaat voor components.css. */
.h-btn.hx-ghost{background:transparent;border-color:transparent;text-decoration:underline;text-decoration-color:var(--hx-oranje);text-underline-offset:4px}
.h-btn.hx-ghost:hover{border-color:transparent}
.h-btn:focus-visible,.h-tab:focus-visible,.hx-select:focus-visible{outline:var(--focus-ring) solid var(--hx-oranje);outline-offset:2px}
.hx-select{font:inherit;font-family:var(--hx-font);font-size:14px;height:36px;border:1px solid var(--hx-lijn);border-radius:var(--hx-radius);
  padding:0 8px;background:var(--hx-vlak);color:var(--hx-donker);min-width:0;max-width:100%}

/* ---------- uitvoerbalk (onderaan elke tool) ---------- */
body.hx-met-uitvoer{padding-bottom:84px}
.hx-uitvoer{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--hx-vlak);border-top:1px solid var(--hx-lijn);
  box-shadow:0 -6px 18px color-mix(in srgb,var(--brand-darkgrey) 8%,transparent);font-family:var(--hx-font);color:var(--hx-donker);
  padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.hx-uitvoer-rij{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;max-width:1240px;margin:0 auto}
.hx-uitvoer label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--hx-grijs);min-width:0;flex:1 1 220px}
.hx-uitvoer label .hx-select{flex:1 1 auto}
.hx-uitvoer .hx-knoppen{display:flex;flex-wrap:wrap;gap:8px}
.hx-status{display:flex;align-items:center;gap:8px;font-size:13px;max-width:1240px;margin:8px auto 0;flex-wrap:wrap}
.hx-status[hidden]{display:none}
.hx-status [data-hx="gekoppeld-tekst"]{flex:1 1 160px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hx-stip{width:7px;height:7px;border-radius:50%;display:inline-block;background:var(--hx-oranje);flex:none}
.hx-melding{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--hx-oranje-zacht);border-left:3px solid var(--hx-oranje);
  border-radius:var(--hx-radius);padding:8px 12px;font-size:13px}

/* ---------- toast ---------- */
.hx-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:96px;z-index:60;background:var(--brand-darkgrey);color:var(--color-on-brand);
  border-radius:var(--radius);padding:10px 14px;font-family:var(--hx-font);font-size:13px;box-shadow:0 8px 24px color-mix(in srgb,var(--brand-darkgrey) 25%,transparent);max-width:calc(100vw - 32px)}
.hx-toast[hidden]{display:none}

/* ---------- voorbeeldvenster ---------- */
.hx-dialoog{border:1px solid var(--hx-lijn);border-radius:var(--hx-radius-groot);padding:0;width:min(900px,calc(100vw - 24px));max-height:calc(100vh - 48px);
  font-family:var(--hx-font);color:var(--hx-donker)}
.hx-dialoog::backdrop{background:color-mix(in srgb,var(--brand-darkgrey) 40%,transparent)}
.hx-dialoog-kop{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--hx-lijn);position:sticky;top:0;background:var(--hx-vlak)}
.hx-dialoog-kop b{flex:1}
.hx-papier{padding:24px 28px;background:var(--color-surface);font-family:var(--font-sans);font-size:10pt;color:var(--color-text);overflow:auto}   /* schermlettertype; in Word wordt het Aptos (sjabloon) */
.hx-papier *{font-family:inherit!important;white-space:normal!important;position:static!important}
.hx-papier table{width:auto!important}

/* ---------- formulieren en vensters (nieuwe berekening, versies) ---------- */
.hx-formulier{width:min(760px,calc(100vw - 24px))}
.hx-formulier form{margin:0}
.hx-velden{display:flex;flex-direction:column;gap:12px;padding:16px}
.hx-velden label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:var(--size-caption);color:var(--color-text-ui)}
.hx-velden input,.hx-zoek{font:inherit;font-size:var(--size-body);font-weight:400;height:36px;border:1px solid var(--color-line);border-radius:var(--radius);
  padding:0 10px;background:var(--color-surface);color:var(--color-text);min-width:0}
.hx-velden input:focus-visible,.hx-zoek:focus-visible{outline:var(--focus-ring) solid var(--hx-oranje);outline-offset:1px}
.hx-dialoog-voet{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--hx-lijn)}
.hx-keuzes{list-style:none;margin:0;padding:0;max-height:240px;overflow:auto;border:1px solid var(--color-line);border-radius:var(--radius)}
.hx-keuzes li{padding:6px 10px;border-bottom:1px solid var(--hx-lijn-licht);cursor:pointer}
.hx-keuzes li:hover{background:var(--hx-vlak-zacht)}
.hx-keuzes li[aria-selected="true"]{background:var(--hx-oranje-zacht)}
.hx-keuzes li small{display:block;color:var(--color-muted);font-size:var(--size-caption)}
.hx-fout{margin:0;color:var(--color-fail);font-weight:600}
.hx-fout.hx-ok{color:var(--color-ok)}
.hx-rij{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* ---------- menu Instellingen (onder de kopbalk, rechts) ---------- */
.hx-menu{position:absolute;right:16px;top:100%;margin-top:6px;z-index:60;width:min(320px,calc(100vw - 32px));display:flex;flex-direction:column;gap:8px;
  padding:12px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius);
  box-shadow:0 8px 24px color-mix(in srgb,var(--brand-darkgrey) 15%,transparent);font-size:var(--size-caption)}
.hx-menu p{margin:0}

/* ---------- project in de uitvoerbalk van een tool ---------- */
.hx-project [data-hx="project-tekst"]{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hx-staat{color:var(--color-muted);flex:1 1 auto}
.hx-let{color:var(--color-text-ui);font-weight:700}   /* ⚠ let op: donkergrijs vet, geen eigen kleur */

/* ---------- overzicht (hub) ----------
   h-app op <body> geeft lettertype, grootte en kleuren; koppen met h-title en h-2. */
.hx-hub{min-height:100vh;margin:0}
.hx-hub main{max-width:1100px;margin:0 auto;padding:24px max(16px,env(safe-area-inset-right,0px)) 48px max(16px,env(safe-area-inset-left,0px))}
.hx-hub section{display:flex;flex-direction:column;gap:14px}
.hx-hub .h-title,.hx-hub .h-2,.hx-hub p{margin:0}
.hx-hub a:not(.h-btn):not(.h-tab):not(.hx-tegel){color:inherit;text-decoration-color:var(--hx-oranje);text-underline-offset:3px}
.hx-tabs{flex-wrap:wrap;align-items:center}   /* midden in de kopbalk, net als in de planning */
.hx-kop{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.hx-intro{color:var(--color-muted);font-size:var(--size-caption);max-width:70ch}
.hx-terug{font-size:var(--size-caption);color:var(--color-muted)}
.hx-zoek{width:100%;max-width:360px}
.hx-smal{max-width:420px}
.hx-smal .hx-velden{padding:0}
.hx-grijs{color:var(--color-muted)}

/* lijsten: projecten, berekeningen, versies */
.hx-tabel-wrap{overflow-x:auto}
.hx-tabel{width:100%;border-collapse:collapse;font-size:var(--size-table)}
.hx-tabel th{text-align:left;font-weight:700;color:var(--color-text-ui);border-bottom:2px solid var(--color-line);padding:6px 8px;white-space:nowrap}
.hx-tabel td{border-bottom:1px solid var(--color-line);padding:8px;vertical-align:middle}
.hx-tabel td small{display:block;color:var(--color-muted);font-size:var(--size-caption)}
.hx-tabel .num{text-align:right;font-variant-numeric:tabular-nums}
.hx-tabel tbody tr[data-href]{cursor:pointer}
.hx-tabel tbody tr:hover{background:var(--hx-vlak-zacht)}
.hx-tabel a{text-decoration:none}
.hx-acties{white-space:nowrap;text-align:right}
/* resultaat van een berekening: nooit alleen in kleur, altijd met ✓ / ✗ */
.hx-uc{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.hx-uc.ok{color:var(--color-ok)}
.hx-uc.fail{color:var(--color-fail)}
.hx-leeg-blok{display:flex;flex-direction:column;gap:8px;padding:24px;border:1px dashed var(--color-line);border-radius:var(--radius)}

/* tools */
.hx-tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.hx-tegel{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:6px;
  color:inherit;text-decoration:none;min-height:140px}
a.hx-tegel:hover{border-color:var(--color-text-ui)}
.hx-tegel .h-pill{align-self:flex-start}
.hx-tegel .h-2{margin-top:4px}
.hx-tegel-knoppen{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.hx-oms{font-size:var(--size-caption);color:var(--color-muted);flex:1}
.hx-norm{font-size:var(--size-caption);color:var(--color-muted)}
.hx-tegel.hx-uit{background:transparent;border-style:dashed}

/* in Word: blokken in dit document */
.hx-lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.hx-lijst li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--color-line)}
.hx-lijst li:first-child{border-top:0}
.hx-lijst li span{flex:1 1 180px;min-width:0}
.hx-lijst li small{display:block;color:var(--color-muted);font-size:var(--size-caption)}
.hx-leeg{color:var(--color-muted);font-size:var(--size-caption)}

/* smal (Word-zijvenster): bijzaken in tabellen weglaten */
@media (max-width:520px){
  .hx-breed{display:none}
  .hx-acties{white-space:normal}
}

/* ---------- inloggen: gelijk aan het inlogscherm van de planning (supabase-adapter.js, #sbGate) ---------- */
.hx-poort{min-height:calc(100vh - 160px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px 0}
.hx-poort form{width:100%;max-width:340px;background:var(--color-surface);border:1px solid var(--color-line);border-top:var(--header-border) solid var(--brand-orange);
  border-radius:var(--radius);padding:22px;display:grid;gap:12px;box-shadow:0 10px 30px color-mix(in srgb,var(--brand-darkgrey) 18%,transparent)}
.hx-poort h1{margin:0;font-size:var(--size-h1);font-weight:800;color:var(--color-text-ui)}
.hx-poort p{margin:0;font-size:var(--size-caption);color:var(--color-muted);line-height:1.4}
.hx-poort label{display:grid;gap:4px;font-size:12px;font-weight:600;color:var(--color-muted)}
.hx-poort input{height:34px;border:1px solid var(--color-line);border-radius:var(--radius);padding:0 10px;font:inherit;font-size:14px;background:var(--color-surface);color:inherit}
.hx-poort input:focus{outline:var(--focus-ring) solid var(--brand-orange);outline-offset:-1px}
.hx-poort button[type=submit]{height:34px;border-radius:var(--radius);border:1px solid var(--brand-orange);background:var(--brand-orange);color:var(--color-on-brand);font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.hx-poort button[disabled]{opacity:.6;cursor:default}
.hx-poort-link{all:unset;cursor:pointer;font-size:12.5px;color:var(--color-text-ui);text-decoration:underline;justify-self:start}
.hx-poort-melding{font-size:12.5px;padding:8px 10px;border-radius:var(--radius);background:color-mix(in srgb,var(--color-fail) 12%,var(--color-surface));color:var(--color-fail)}
.hx-poort-melding.hx-ok{background:color-mix(in srgb,var(--color-ok) 15%,var(--color-surface));color:var(--color-ok)}
.hx-poort-melding:empty{display:none}
.hx-hub:has(.hx-poort){background:var(--color-surface-alt)}