/* ============================================================================
   SVS HRM — basis: lettertype, reset, typografie, focus, grid, hulpklassen
   ========================================================================= */

/* Geen @font-face meer. Het werkbonnenportaal laadt geen lettertypebestand en
   zet `font-family: system-ui, ...` op :root; dit systeem doet nu hetzelfde.
   Zie `--letter` in tokens.css. Er wordt dus niets meer geladen vóór de eerste
   tekst zichtbaar is, en de CSP hoeft geen font-src te dulden. */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Voorkomt dat de pagina horizontaal kan schuiven; kolommen die te breed
     worden krijgen hun eigen scrollgebied. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--grond);
  color: var(--text-primary);
  font-family: var(--letter);
  font-size: var(--tekst-xl);
  line-height: var(--regelhoogte);
  -webkit-font-smoothing: antialiased;
  /* Alleen tabelcijfers — dit systeem staat vol met uren- en saldokolommen die
     recht onder elkaar horen. `cv05`/`ss01` stonden hier ook; dat zijn
     Inter-eigen varianten die op de systeemletter niets meer doen. */
  font-feature-settings: "tnum" 1;
  font-variant-ligatures: none;
}

h1, h2, h3, h4 { margin: 0; line-height: var(--regelhoogte-kop); color: var(--text-primary); }
h1 { font-size: var(--tekst-pagina); font-weight: 660; letter-spacing: -.02em; }
h2 { font-size: var(--tekst-sectie); font-weight: 640; letter-spacing: -.014em; }
h3 { font-size: var(--tekst-kaart); font-weight: 620; letter-spacing: -.008em; }
h4 { font-size: var(--tekst-l);      font-weight: 620; }
p  { margin: 0 0 var(--ruimte-3); }

a { color: var(--svs-green-800); text-decoration-thickness: 1px; text-underline-offset: 2px; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

img, svg { max-width: 100%; }
table { border-collapse: collapse; }

/* ---- Focus ----------------------------------------------------------------
   Een duidelijke ring van 3 px, geen subtiele schaduw. Wie met het toetsenbord
   werkt moet zonder zoeken zien waar hij is. */
:focus-visible {
  outline: var(--focusring) solid var(--svs-green-700);
  outline-offset: 2px;
  border-radius: var(--radius-1);
}
:focus:not(:focus-visible) { outline: none; }

/* ---- Skip-link ------------------------------------------------------------
   Eerste tabstop van elke pagina: direct naar de inhoud, langs de navigatie. */
.overslaan {
  position: absolute; left: var(--ruimte-4); top: -100px; z-index: 100;
  padding: var(--ruimte-3) var(--ruimte-4);
  background: var(--svs-ink-900); color: var(--text-on-dark);
  border-radius: var(--radius-2); font-weight: 600; text-decoration: none;
  transition: top var(--duur-normaal) var(--soepel);
}
.overslaan:focus { top: var(--ruimte-4); }

/* ---- Typografische hulpklassen ------------------------------------------ */

/* Labels boven gegevens. Kleine letters met lichte spatiëring — herkenbaar als
   SVS zonder de leesbaarheid te schaden. De vorige waarde (.1em op 11,5 px)
   was te ruim om nog snel te kunnen scannen; nu .01em op 12 px. */
.label {
  display: block;
  font-size: var(--tekst-xs); font-weight: 600; letter-spacing: .01em;
  color: var(--text-muted);
}
.meta { font-size: var(--tekst-s); color: var(--text-secondary); }
.getal { font-variant-numeric: tabular-nums; }
.afgekapt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.twee-regels {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.alleen-schermlezer {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Grid ----------------------------------------------------------------- */
.raster { display: grid; gap: var(--ruimte-4); grid-template-columns: repeat(12, 1fr); }
.kol-3  { grid-column: span 3; }
.kol-4  { grid-column: span 4; }
.kol-5  { grid-column: span 5; }
.kol-6  { grid-column: span 6; }
.kol-7  { grid-column: span 7; }
.kol-8  { grid-column: span 8; }
.kol-12 { grid-column: 1 / -1; }

.stapel { display: flex; flex-direction: column; gap: var(--ruimte-4); }
.rij { display: flex; align-items: center; gap: var(--ruimte-3); }
.rij-eind { margin-left: auto; }
.verspreid { display: flex; align-items: center; justify-content: space-between;
  gap: var(--ruimte-4); }

@media (max-width: 1023px) {
  .kol-3, .kol-4, .kol-5, .kol-6, .kol-7, .kol-8 { grid-column: 1 / -1; }
}

/* ---- Beweging -------------------------------------------------------------
   Wie beweging heeft uitgezet krijgt geen enkele animatie — ook geen
   binnenkomende kaarten, want juist die zijn het meest storend. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@keyframes opkomen { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes vervagen { from { opacity: 0; } to { opacity: 1; } }
@keyframes glans { from { background-position: -200% 0; } to { background-position: 200% 0; } }


/* `hidden` moet winnen van elke `display`-regel.

   Zonder dit stond onder élk formulierveld in de applicatie een lege rode
   waarschuwing: `.veld .veldfout { display: flex }` is specifieker dan het
   `hidden`-attribuut van de browser, dus het foutvak dat nog niets te melden had
   werd toch getekend. Vijf rode tekens onder een leeg formulier zeggen dat er van
   alles mis is voordat de gebruiker één toets heeft aangeraakt. */
[hidden] { display: none !important; }