/* Werkvoorraad 403: de statuspagina in de huisstijl van sensebase.nl (teal), licht en donker volgens het apparaat. */
:root {
  color-scheme: light dark;
  --rond: 14px;
  --breed: 880px;
  --achtergrond: #f5f7fb;
  --vlak: #ffffff;
  --rand: #dde3ee;
  --tekst: #0f1a2b;
  --tekst-zacht: #526079;
  --merk: #0d9488;
  --merk-donker: #0f766e;
  /* Review 403-5: witte labeltekst op deze kleuren haalt 4,5:1 (AA). */
  --goed: #0f766e;
  --verstoord: #d99a06;
  --deels: #ea7a1a;
  --slecht: #c62828;
  --onderhoud: #1d4ed8;
  --geen: #d3d9e4;
  --label-tekst: #ffffff;
  --schaduw: 0 1px 2px rgba(15, 26, 43, 0.06), 0 8px 24px rgba(15, 26, 43, 0.06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --achtergrond: #0b1220;
    --vlak: #111a2c;
    --rand: #24324d;
    --tekst: #e6edf7;
    --tekst-zacht: #a3b1c6;
    --merk: #2dd4bf;
    --merk-donker: #5eead4;
    --goed: #2dd4bf;
    --verstoord: #f5c044;
    --deels: #fb9a4b;
    --slecht: #f87171;
    --onderhoud: #60a5fa;
    --geen: #2a3854;
    --label-tekst: #04201d;
    --schaduw: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--achtergrond);
  color: var(--tekst);
  font: 16px/1.55 Inter, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: var(--merk-donker); }
.breed { width: min(var(--breed), 100% - 32px); margin-inline: auto; }
.zacht { color: var(--tekst-zacht); }
.klein { font-size: 14px; }

.kop { background: var(--vlak); border-bottom: 1px solid var(--rand); }
.kop-rij { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.merk { display: inline-flex; align-items: center; gap: 10px; color: var(--tekst); text-decoration: none; font-weight: 700; font-size: 19px; }
.kop-status { color: var(--tekst-zacht); font-weight: 600; padding-left: 12px; border-left: 1px solid var(--rand); }
.taal { margin-left: auto; font-size: 14px; }

main { padding: 32px 0 48px; }
h1.geheel {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 24px; padding: 18px 20px;
  border-radius: var(--rond); font-size: 20px; line-height: 1.3;
  background: var(--vlak); border: 1px solid var(--rand); border-left: 6px solid var(--kleur, var(--goed));
  box-shadow: var(--schaduw);
}
.geheel .stip { flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--kleur, var(--goed)); }
.geheel-werkt { --kleur: var(--goed); }
.geheel-verstoord { --kleur: var(--verstoord); }
.geheel-storing { --kleur: var(--slecht); }
.geheel-onderhoud { --kleur: var(--onderhoud); }
.geheel-onbekend { --kleur: var(--geen); }
h2 { font-size: 17px; margin: 32px 0 12px; }
.let-op { margin: -8px 0 24px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--verstoord); }

.melding { background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--rond); padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--schaduw); }
.melding p { margin: 0; }
.melding-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.melding-tekst { margin-top: 8px !important; overflow-wrap: anywhere; }
.melding .klein { margin-top: 8px; }
.label, .pil { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 600; color: var(--label-tekst); white-space: nowrap; }
.label-onderhoud, .pil-onderhoud { background: var(--onderhoud); }
.label-verstoring, .pil-verstoord { background: var(--verstoord); color: #1f1400; }
.label-storing, .pil-storing { background: var(--slecht); }
.label-opgelost, .label-afgerond, .pil-werkt { background: var(--goed); }
.pil-onbekend { background: var(--geen); color: var(--tekst); }

.onderdelen { list-style: none; margin: 0; padding: 0; background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--rond); box-shadow: var(--schaduw); }
.onderdeel { padding: 16px; }
.onderdeel + .onderdeel { border-top: 1px solid var(--rand); }
.onderdeel-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.balken { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; height: 34px; }
.balk { flex: 1 1 0; min-width: 2px; border-radius: 2px; background: var(--geen); }
.balk-goed { background: var(--goed); }
.balk-verstoord { background: var(--verstoord); }
.balk-deels { background: var(--deels); }
.balk-slecht { background: var(--slecht); }
.balk-onderhoud { background: var(--onderhoud); }
.balken-voet { display: flex; justify-content: space-between; gap: 8px; margin: 6px 0 0; }
.voet { margin-top: 40px; }
.voet p { margin: 4px 0; }

/* Op een telefoon de laatste 30 dagen (90 balkjes worden te smal). */
@media (max-width: 640px) {
  main { padding-top: 20px; }
  h1.geheel { font-size: 18px; }
  .kop-status { display: none; }
  .balk:nth-child(-n + 60) { display: none; }
  .balken-voet span:first-child { display: none; }
}