/* Huisstijlcomponenten voor webapps. Laad eerst tokens.css, dan dit bestand.
   Alleen var(--…) uit tokens.css; geen losse hexwaarden (zie components.test.mjs).
   Regels: tokens.json → ui, type.screen, type.screen-compact en styles. Voorbeelden: voorbeeld.html. */

/* ---------- Basis ---------- */

.h-app {
  font-family: var(--font-sans);
  font-size: var(--size-body);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background: var(--color-surface);
}
.h-app :focus-visible {
  outline: var(--focus-ring) solid var(--brand-orange);
  outline-offset: 2px;
}

/* ---------- Kopbalk ----------
   Logo zonder pay-off links, in donker het diapositieve logo. Geen pay-off in de kopbalk.
   App-naam (.h-header__name) naar keuze; weglaten als de navigatie de naam al toont.
   Maten en tekstgrootte gelijk aan de planning: tekst 13 px, knoppen 28 px hoog.
   Rechts (.h-header__end) standaard: actieknop, .h-sep, ongedaan maken / opnieuw, Instellingen, infoknop. */

.h-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  padding: 10px 16px;
  background: var(--color-surface);
  border-bottom: var(--header-border) solid var(--brand-orange);
  color: var(--color-text-ui);
  font-size: var(--size-compact-body);
}
.h-header__logo { height: var(--header-logo-height); width: auto; display: block; }
.h-header__logo--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .h-header__logo--light { display: none; }
  :root:not([data-theme="light"]) .h-header__logo--dark { display: block; }
}
:root[data-theme="dark"] .h-header__logo--light { display: none; }
:root[data-theme="dark"] .h-header__logo--dark { display: block; }
.h-header__name { font-size: var(--size-h2); font-weight: 700; }
.h-header__end { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.h-sep { flex: none; width: 1px; height: 22px; margin: 0 2px; background: var(--color-line); }

/* ---------- Tabbladen ----------
   Actief: oranje streep van 3 px, zo breed als de tekst, geen gekleurd vlak. */

.h-tabs { display: flex; gap: 4px; }
.h-tab {
  position: relative;
  margin: 0 10px;
  padding: 6px 0 3px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: linear-gradient(var(--brand-orange), var(--brand-orange)) 50% 100% / 0 3px no-repeat border-box;
  color: var(--color-muted);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-standard), background-size var(--motion-slow) var(--ease-standard);
}
.h-tab:hover { color: var(--color-text-ui); }
/* De streep groeit vanuit het midden (zie Beweging). */
.h-tab[aria-selected="true"] { color: var(--color-text-ui); background-size: 100% 3px; }
.h-tab .h-badge { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; }

/* ---------- Knoppen ----------
   Primair: oranje met witte tekst, 16 px vet. Overige knoppen neutraal. */

.h-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text-ui);
  font: inherit;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), scale var(--motion-fast) var(--ease-standard);
}
.h-btn:hover { border-color: var(--color-text-ui); }
.h-btn:active:not(:disabled) { scale: var(--motion-press); }
.h-btn:disabled { opacity: .45; cursor: default; }
.h-btn--primary {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  color: var(--color-on-brand);
  font-size: 16px;
  font-weight: 700;
}
.h-btn--primary:hover { border-color: var(--brand-orange); box-shadow: 0 2px 6px color-mix(in srgb, var(--brand-orange) 35%, transparent); }

/* In de kopbalk: maten van de planning, ook de primaire knop 13 px halfvet. */
.h-header .h-btn { height: var(--header-button-height); padding: 0 10px; }
.h-header .h-btn--primary { font-size: inherit; font-weight: 600; }

/* Infoknop: rond 24 px met een cursieve i; open (aria-expanded) in oranje. */
.h-btn--info,
.h-header .h-btn--info {
  flex: none;
  width: 24px;
  height: 24px;
  padding: 0;
  margin-left: 2px;
  justify-content: center;
  border-radius: 50%;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 700;
}
.h-btn--info[aria-expanded="true"] { background: var(--brand-orange); border-color: var(--brand-orange); color: var(--color-on-brand); }

/* ---------- Meldingsbadge ----------
   Rood van 'voldoet niet' met witte cijfers, rond. */

.h-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-fail);
  color: var(--color-on-brand);
  font-size: var(--size-compact-caption);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--color-surface);
}

/* ---------- Statuspil ----------
   Rond, altijd met kaderrand. Gereed: ok. Te laat en ligt stil: fail. Rand en tekst in ok / fail, vlak 15% / 12% op de ondergrond. */

.h-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-surface-alt);
  color: var(--color-text-ui);
  font-size: var(--size-compact-caption);
  font-weight: 600;
}
.h-pill--ok, .h-status--ok {
  border-color: var(--color-ok);
  background: color-mix(in srgb, var(--color-ok) 15%, var(--color-surface));
  color: var(--color-ok);
}
.h-pill--fail, .h-status--fail {
  border-color: var(--color-fail);
  background: color-mix(in srgb, var(--color-fail) 12%, var(--color-surface));
  color: var(--color-fail);
}

/* Projectstatus, gelijk aan de planning: vlak met kaderrand, zonder bolletje en zonder ✓ / ✗.
   Wacht op reactie is ook de waarschuwing; ligt stil gebruikt --fail, net als te laat. */
.h-pill--wacht, .h-status--wacht       { border-color: var(--status-wacht);    background: var(--status-wacht-surface);    color: var(--status-wacht-ink); }
.h-pill--controle, .h-status--controle { border-color: var(--status-controle); background: var(--status-controle-surface); color: var(--status-controle-ink); }
.h-pill--lang, .h-status--lang         { border-color: var(--status-lang);     background: var(--status-lang-surface);     color: var(--status-lang-ink); }

/* Vlak voor een status (kaart, regel, blok). */
.h-status--ok, .h-status--fail, .h-status--wacht, .h-status--controle, .h-status--lang { border-width: 1px; border-style: solid; border-radius: var(--radius); }

/* ---------- Rolkleuren ----------
   Vlak in de rolkleur, tekst in de bijbehorende -ink. */

.h-role { display: inline-block; padding: 2px 8px; border-radius: var(--radius); font-weight: 600; }
.h-role--ber        { background: var(--role-ber);        color: var(--role-ber-ink); }
.h-role--ber-light  { background: var(--role-ber-light);  color: var(--role-ber-light-ink); }
.h-role--tek        { background: var(--role-tek);        color: var(--role-tek-ink); }
.h-role--tek-light  { background: var(--role-tek-light);  color: var(--role-tek-light-ink); }
.h-role--meet       { background: var(--role-meet);       color: var(--role-meet-ink); }
.h-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-muted); }
.h-dot.h-role--ber       { background: var(--role-ber); }
.h-dot.h-role--ber-light { background: var(--role-ber-light); }
.h-dot.h-role--tek       { background: var(--role-tek); }
.h-dot.h-role--tek-light { background: var(--role-tek-light); }
.h-dot.h-role--meet      { background: var(--role-meet); }

/* ---------- Rapportklassen ----------
   Dezelfde namen als de Word-stijlen (tokens.json → styles), zodat scherm en rapport gelijk zijn.
   Koppen (h-title, h-1 …) gelden overal; de rest alleen binnen .h-rapport, zodat namen als
   .ok, .warn en .table niet botsen met eigen klassen van een app. */

.h-title { font-size: var(--size-title); font-weight: 700; color: var(--brand-orange); margin: 0 0 12px; }
.h-1 { font-size: var(--size-h1); font-weight: 700; color: var(--brand-orange); margin: 24px 0 8px; }
.h-2 { font-size: var(--size-h2); font-weight: 700; color: var(--color-text-ui); margin: 16px 0 6px; }
.h-3 { font-size: var(--size-h3); font-weight: 700; color: var(--color-text-ui); margin: 12px 0 4px; }
.h-rapport .text { font-size: var(--size-body); line-height: var(--line-height-body); margin: 0 0 6px; }
.h-rapport .caption { font-size: var(--size-caption); font-style: italic; color: var(--color-muted); }
.h-rapport .source { color: var(--color-muted); }
.h-rapport .conclusion { font-weight: 700; margin: 8px 0; }

/* Rekenregels: omschrijving | formule | waarde (decimaal uitgelijnd via tabular-nums en rechts). */
.h-rapport .calc-head { font-size: var(--size-calc); font-weight: 700; margin: 12px 0 4px; }
.h-rapport .calc-line, .h-rapport .calc-check {
  display: grid;
  grid-template-columns: minmax(8em, 30%) 1fr auto;
  gap: 4px 12px;
  font-size: var(--size-calc);
  font-variant-numeric: tabular-nums;
}
.h-rapport .calc-line > :last-child, .h-rapport .calc-check > :last-child { text-align: right; white-space: nowrap; }
.h-rapport .calc-check { font-weight: 700; }

/* Toetsresultaat nooit alleen in kleur: altijd met ✓ / ✗ / ⚠ in de tekst. */
.h-rapport .ok { color: var(--color-ok); font-weight: 700; }
.h-rapport .fail { color: var(--color-fail); font-weight: 700; }
.h-rapport .warn { color: var(--color-text-ui); font-weight: 700; }

.h-rapport .software {
  font-family: var(--font-mono);
  font-size: var(--size-software);
  white-space: pre;
  overflow-x: auto;
  padding: 8px;
  background: var(--color-surface-alt);
  border-radius: var(--radius);
}

/* ---------- Tabellen ---------- */

.h-rapport .table, .h-rapport .table-wide {
  border-collapse: collapse;
  font-size: var(--size-table);
  color: var(--color-text);
}
.h-rapport .table-wide { font-family: var(--font-narrow); }
.h-rapport .table th, .h-rapport .table-wide th {
  text-align: left;
  font-weight: 700;
  color: var(--color-text-ui);
  border-bottom: 2px solid var(--color-line);
  padding: 4px 8px;
}
.h-rapport .table td, .h-rapport .table-wide td { border-bottom: 1px solid var(--color-line); padding: 4px 8px; }
.h-rapport .num, .h-rapport :is(.table, .table-wide) th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Compacte schaal ----------
   Voor schermen met veel gegevens (planning, dashboards). Koppen niet oranje onder 20 px. */

.h-compact { font-size: var(--size-compact-body); line-height: var(--line-height-compact); }
.h-compact .h-title { font-size: var(--size-compact-title); }
.h-compact .h-1 { font-size: var(--size-compact-h1); color: var(--color-text-ui); }
.h-compact .h-2 { font-size: var(--size-compact-h2); }
.h-compact .h-3 { font-size: var(--size-compact-h3); }
:is(.h-compact .h-rapport, .h-rapport .h-compact, .h-rapport.h-compact) .text { font-size: var(--size-compact-body); line-height: var(--line-height-compact); }
:is(.h-compact .h-rapport, .h-rapport .h-compact, .h-rapport.h-compact) .table, :is(.h-compact .h-rapport, .h-rapport .h-compact, .h-rapport.h-compact) .table-wide { font-size: var(--size-compact-table); }
:is(.h-compact .h-rapport, .h-rapport .h-compact, .h-rapport.h-compact) .table th, :is(.h-compact .h-rapport, .h-rapport .h-compact, .h-rapport.h-compact) .table-wide th { font-size: var(--size-compact-h3); }
:is(.h-compact .h-rapport, .h-rapport .h-compact, .h-rapport.h-compact) .caption { font-size: var(--size-compact-caption); }
:is(.h-compact .h-rapport, .h-rapport .h-compact, .h-rapport.h-compact) .software { font-size: var(--size-compact-mono); }

/* ---------- Beweging ----------
   Regels: tokens.json → motion. Kort (0,1–0,2 s), alleen bij wat de gebruiker zelf opent of aanklikt,
   nooit bij het verversen van gegevens. Openen beweegt, sluiten gebeurt direct.
   Zet de klasse op het element op het moment dat het verschijnt:
   h-anim-pop (menu, keuzelijst, klein venster), h-anim-fade (achtergrond achter een venster),
   h-anim-panel (zijvenster; op een smal scherm van onderen), h-anim-toast (melding onderin),
   h-anim-open (uitgeklapte regel of kaart), h-anim-swipe-left|right (tabblad na vegen op de telefoon). Knoppen (h-btn) en tabbladen (h-tab) bewegen vanzelf.
   Alleen translate/scale/opacity, zodat bestaande transforms van een app blijven werken. */

@keyframes h-pop-in { from { opacity: 0; translate: 0 calc(-1 * var(--motion-pop)); scale: .98; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes h-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes h-panel-in { from { opacity: .4; translate: var(--motion-panel) 0; } to { opacity: 1; translate: 0 0; } }
@keyframes h-panel-up { from { opacity: .4; translate: 0 var(--motion-panel); } to { opacity: 1; translate: 0 0; } }
@keyframes h-toast-in { from { opacity: 0; translate: 0 var(--motion-toast); } to { opacity: 1; translate: 0 0; } }
@keyframes h-swipe-left { from { opacity: .5; translate: var(--motion-swipe) 0; } to { opacity: 1; translate: 0 0; } }
@keyframes h-swipe-right { from { opacity: .5; translate: calc(-1 * var(--motion-swipe)) 0; } to { opacity: 1; translate: 0 0; } }
@keyframes h-open-in { from { opacity: 0; translate: 0 calc(-1 * var(--motion-open)); } to { opacity: 1; translate: 0 0; } }

.h-anim-pop { animation: h-pop-in var(--motion-base) var(--ease-standard); transform-origin: top center; }
.h-anim-fade { animation: h-fade-in var(--motion-slow) var(--ease-standard); }
.h-anim-panel { animation: h-panel-in var(--motion-slow) var(--ease-out); }
.h-anim-toast { animation: h-toast-in var(--motion-slow) var(--ease-standard); }
.h-anim-open { animation: h-open-in var(--motion-base) var(--ease-standard); }
/* Telefoon: na het vegen schuift het nieuwe tabblad in vanaf de kant waar je naartoe veegde
   (h-anim-swipe-left = naar links geveegd, volgende tabblad). Tijdens het vegen volgt de app zelf de vinger. */
.h-anim-swipe-left { animation: h-swipe-left var(--motion-slow) var(--ease-out); }
.h-anim-swipe-right { animation: h-swipe-right var(--motion-slow) var(--ease-out); }
@media (max-width: 767px) {
  .h-anim-panel { animation-name: h-panel-up; }
}

/* Minder beweging in het systeem: geen animaties en overgangen. */
@media (prefers-reduced-motion: reduce) {
  .h-app, .h-app *, [class*="h-anim-"], .h-btn, .h-tab { animation: none !important; transition: none !important; }
  .h-btn:active:not(:disabled) { scale: none; }
}