/* infra/nginx/status-site/status.css — r120-statuspagina-eigen.
   Tokens 1:1 overgenomen uit ref/mockup-index.html (die ze zelf 1:1 overnam
   uit apps/builder/src/styles/tokens.css — alleen de waarden die deze pagina
   gebruikt, geen nieuwe kleuren, geen eigen afstanden). De mockup toonde vier
   staten naast elkaar als review-blokken (".sp-staat"-titel, ".voorstel"-
   stippellijn, ".sp-legende"); die drie klassen zijn hier weggelaten — de
   echte pagina toont telkens precies ÉÉN staat, gekozen door status-app.js. */
:root {
  --bg: oklch(0.985 0.004 70);

  --border: oklch(0.905 0.006 70);
  --border-faint: oklch(0.935 0.005 70);

  --ink: oklch(0.28 0.012 70);
  --ink-strong: oklch(0.22 0.014 70);
  --ink-muted: oklch(0.34 0.011 70);
  --ink-faint: oklch(0.48 0.010 70);

  --error: oklch(0.55 0.17 27);
  --warning: oklch(0.54 0.13 65);
  --success: oklch(0.52 0.12 150);

  --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --text-xs: 12px;
  --text-base: 14px;
  --text-lg: 18px;

  --fw-regular: 400;
  --fw-bold: 700;

  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  --radius-sm: 4px;
}

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

html {
  font-size: 16px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.tnum {
  font-variant-numeric: tabular-nums;
}

.sp-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md) var(--space-2xl);
}

/* Kop: logo + titel, zoals de inlogkant van het portaal het logo toont
   (apps/builder/src/portal/styles/portal.css .login-form-logo, 32px hoog).
   Geen los wordmerk ernaast: het logo spelt zelf al "GLR". */
.sp-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
  padding-bottom: var(--space-lg);
}
.sp-logo {
  height: 32px;
  width: auto;
  display: block;
}
.sp-title {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--ink-strong);
  margin: 0;
}

.sp-staat {
  padding-top: var(--space-lg);
}

.sp-summary {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}
/* Bolletje draagt hier echte toestand (operationeel/storing), de enige
   uitzondering op decoratieve status-bolletjes. */
.sp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}
.sp-dot--ok {
  background: var(--success);
}
.sp-dot--down {
  background: var(--error);
}
.sp-summary-tekst {
  font-weight: var(--fw-bold);
  color: var(--ink-strong);
  font-size: var(--text-base);
}

/* Onderhoudsmelding: tekst + hairline, geen kleurvlak. */
.sp-onderhoud {
  font-size: var(--text-base);
  color: var(--ink);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--space-sm) 0;
  margin: 0 0 var(--space-lg);
}

.sp-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sp-rij {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border);
}
.sp-rij:last-child {
  border-bottom: none;
}
.sp-rij-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}
.sp-naam {
  font-weight: var(--fw-bold);
  color: var(--ink-strong);
  font-size: var(--text-base);
  word-break: break-word;
  text-decoration: none;
}
a.sp-naam:hover,
a.sp-naam:focus-visible {
  text-decoration: underline;
}
.sp-stand {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.sp-stand--ok {
  color: var(--success);
}
.sp-stand--down {
  color: var(--error);
}

.sp-bar {
  display: flex;
  gap: 2px;
  height: 28px;
  margin-bottom: var(--space-2xs);
}
.sp-cel {
  flex: 1 1 0;
  min-width: 2px;
  border-radius: var(--radius-sm);
  background: var(--border-faint);
}
.sp-cel--ok {
  background: var(--success);
}
.sp-cel--warn {
  background: var(--warning);
}
.sp-cel--down {
  background: var(--error);
}

.sp-bar-onder {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--ink-faint);
}
.sp-pct {
  font-weight: var(--fw-bold);
  color: var(--ink-muted);
}

.sp-bijgewerkt {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  margin-top: var(--space-lg);
  text-align: center;
}

.sp-fout {
  font-size: var(--text-base);
  color: var(--ink-muted);
  text-align: center;
  padding: var(--space-2xl) 0;
}

@media (max-width: 480px) {
  .sp-wrap {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }
  .sp-rij-top {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2xs);
  }
}