/* ═══ Archief ═════════════════════════════════════════════════════════════
 *
 * Eén stijlvraag stuurt dit hele bestand: hoe ziet ontbrekende data eruit?
 * Niet als een nul, niet als een gaatje dat je over het hoofd ziet, maar als
 * iets dat je ziet en waarvan je kunt lezen waarom. Vandaar de arcering: een
 * vlak dat duidelijk niet leeg-maar-nul is, met altijd een reden ernaast.
 */

/* ══ cijfers bovenaan ═════════════════════════════════════════════════════ */

.kerncijfers { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }

.kerncijfer {
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: 12px;
  padding: 12px 16px;
  min-width: 140px;
}

.kerncijfer .getal { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kerncijfer .label { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ══ de jaargrafiek ═══════════════════════════════════════════════════════ */

.jaargrafiek { padding: 20px; }

.jaargrafiek-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

.staven {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 160px;
  margin-top: 16px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--lijn-zacht);
}

.staaf-knop {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.staaf-knop:disabled { cursor: default; }

.staaf {
  width: 100%;
  max-width: 30px;
  border-radius: 5px 5px 0 0;
  background: var(--cyaan);
}

.staaf-knop:hover:not(:disabled) .staaf { background: var(--diep); }

/* Een onvolledig jaar krijgt niet alleen een blekere kleur maar ook arcering.
   Het gemiddelde van juni tot december 2012 staat naast dat van heel 2013, en
   dat zijn geen vergelijkbare getallen — dat hoort te zien te zijn zonder dat
   je het bijschrift eerst leest. */
.staaf.deels {
  background: #BEE7EF;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.85) 0 3px, transparent 3px 7px);
}

.staaf-knop:hover:not(:disabled) .staaf.deels { background-color: #8FD3E4; }

.jaarlegende { font-size: 11.5px; color: var(--flauw); margin: 10px 0 0; line-height: 1.5; }

/* Een jaar zonder metingen blijft staan als een lege, gearceerde staaf van
   volle hoogte. Weglaten zou de reeks aaneengesloten doen lijken. */
.staaf.leeg {
  background: #F3F4F6;
  background-image: repeating-linear-gradient(45deg, var(--lijn) 0 4px, transparent 4px 9px);
  border: 1px dashed #C7CDD3;
}

.staaf-knop[aria-pressed='true'] .staaf { box-shadow: 0 0 0 3px rgba(0, 99, 122, 0.5); }

.jaarlabels { display: flex; gap: 8px; margin-top: 6px; }

.jaarlabel {
  flex: 1;
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--flauw);
}

.jaarlabel.gekozen { font-weight: 900; color: var(--ink); }

.jaardetail {
  margin-top: 16px;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: 12px;
  padding: 16px 18px;
}

.jaardetail .jaartal { font-size: 15px; font-weight: 800; }
.jaardetail .reden { font-size: 13.5px; color: var(--flauw); margin: 6px 0 0; }

.jaarcijfers { display: flex; gap: 28px; margin-top: 10px; flex-wrap: wrap; }
.jaarcijfers .label { font-size: 11px; color: var(--flauw); }
.jaarcijfers .getal { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ══ maandraster ══════════════════════════════════════════════════════════ */

.maanden {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.maand-tegel {
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: 10px;
  padding: 9px 11px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.maand-tegel:hover { border-color: var(--flauw); }
.maand-tegel[aria-pressed='true'] { border-color: var(--diep); box-shadow: 0 0 0 2px rgba(0, 99, 122, 0.18); }

.maand-tegel .naam { font-size: 12.5px; font-weight: 800; }
.maand-tegel .reeks { font-size: 13px; font-weight: 700; color: var(--cyaan); font-variant-numeric: tabular-nums; }
.maand-tegel .reeks small { color: var(--geel-ink); }
.maand-tegel .regen { font-size: 11px; color: var(--flauw); }

.maand-tegel.deels { border-left: 3px solid var(--let-op-lijn); }

.maand-tegel.leeg {
  border-style: dashed;
  background-image: repeating-linear-gradient(45deg, var(--lijn-zacht) 0 5px, transparent 5px 10px);
  cursor: default;
}

/* Een maand die nog moet komen is iets anders dan een maand zonder metingen.
   Arcering betekent hier "er ontbreekt iets", en aan september 2026 ontbreekt
   niets — die is gewoon nog niet geweest. */
.maand-tegel.toekomst {
  border-style: dashed;
  background: transparent;
  background-image: none;
  cursor: default;
}

.maand-tegel.leeg .naam, .maand-tegel.toekomst .naam { color: var(--flauw); }
.maand-tegel.toekomst .reeks { color: var(--flauw); font-weight: 600; font-size: 11.5px; }
.maand-tegel.leeg .reeks { color: var(--flauw); font-weight: 600; font-size: 11.5px; }

/* ══ dagenstrook ══════════════════════════════════════════════════════════ */

.maand-samenvatting { font-size: 12.5px; color: var(--muted); margin: 14px 0 8px; }

/* Een raster en geen flex-rij: bij flex rekt de laatste regel (25 tot 31) zich
   uit over de volle breedte en lijkt de maand ineens uit brede dagen te bestaan. */
.dagen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(32px, 1fr));
  gap: 5px;
}

.dag-knop {
  min-width: 32px;
  padding: 5px 0;
  border-radius: 8px;
  border: 1px solid var(--lijn);
  background: var(--kaart);
  color: var(--ink);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.dag-knop:hover { border-color: var(--flauw); }
.dag-knop[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: #fff; }
.dag-knop.onvolledig { border-bottom: 3px solid var(--let-op-lijn); }

.dag-knop.leeg {
  color: var(--flauw);
  background: transparent;
  border-style: dashed;
  cursor: not-allowed;
}

/* ══ de dag zelf ══════════════════════════════════════════════════════════ */

.dagweergave { margin-top: 18px; }

.dag-kop { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dag-kop h3 { font-size: 17px; font-weight: 800; margin: 0; }

.merk-chip {
  font-size: 11.5px;
  font-weight: 700;
  background: var(--vlak);
  color: var(--muted);
  border: 1px solid var(--lijn);
  padding: 2px 9px;
  border-radius: 999px;
}

.merk-chip.let-op {
  background: var(--let-op-vlak);
  border-color: var(--let-op-lijn);
  color: var(--let-op-ink);
}

.dag-cijfers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.dag-cijfer {
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.dag-cijfer .label { font-size: 11px; font-weight: 700; color: var(--muted); }
.dag-cijfer .getal { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dag-cijfer .getal small { font-size: 11px; font-weight: 700; color: var(--flauw); }
.dag-cijfer .tijd { font-size: 11px; color: var(--flauw); }

.dag-cijfer.stuk { border-left: 3px solid var(--let-op-lijn); }

/* Een woord in plaats van een getal krijgt ook niet de typografie van een
   getal: "volgt vannacht" in 19 px vet leest als een meting. */
.dag-cijfer .getal.woord { font-size: 13.5px; font-weight: 700; color: var(--flauw); }

/* ══ de daggrafiek ════════════════════════════════════════════════════════ */

.plaat {
  margin: 16px 0 0;
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--muted);
}

.plaat-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.plaat-titel { font-size: 13px; font-weight: 700; color: var(--muted); }

.legende { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--flauw); }
.legende i { width: 11px; height: 3px; border-radius: 2px; background: var(--cyaan); display: inline-block; }
.legende i.staaf { height: 9px; width: 6px; background: var(--geel); border-radius: 1px; }
.legende i.leeg { height: 9px; width: 9px; background: var(--lijn); border-radius: 2px; }

.plaat svg { width: 100%; height: auto; display: block; margin-top: 8px; }

.plaat .raster { stroke: var(--lijn); stroke-width: 1; }
.plaat .as { font-size: 10px; fill: var(--flauw); font-family: var(--sans); font-weight: 600; }

.plaat .gat-vlak { fill: url(#arcering); stroke: var(--lijn); stroke-dasharray: 3 3; }
/* Het nu-scherm tekent zijn eigen arcering, met een eigen id: het archief zit
   in een verborgen tabblad en een patroon daaruit is niet betrouwbaar te
   hergebruiken. */
.plaat .gat-vlak.nu { fill: url(#arcering-nu); }

/* De neerslagschaal staat rechts van de grafiek en leest dus van links af. */
.plaat .as-regen { text-anchor: start; fill: var(--geel-ink); }

/* De dagovergang in het rollende venster van het nu-scherm. Geen raster maar
   een eigen streep: hij zegt iets anders dan de uren eromheen. */
.plaat .middernacht { stroke: var(--flauw); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.9; }

.plaat-leeg { font-size: 13px; color: var(--muted); margin: 14px 0 4px; }

.plaat figcaption .voorbehoud { color: var(--geel-ink); }
.plaat .gat-tekst { font-size: 10.5px; fill: var(--flauw); font-family: var(--sans); font-weight: 700; }

.plaat figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 11.5px;
  color: var(--flauw);
  margin-top: 6px;
}

.melding {
  font-size: 13px;
  line-height: 1.55;
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--let-op-vlak);
  border: 1px solid var(--let-op-lijn);
  color: var(--let-op-ink-diep);
}

.melding.stil {
  background: var(--vlak);
  border-color: var(--lijn);
  color: var(--muted);
}

/* ══ records ══════════════════════════════════════════════════════════════ */

.record-lijst {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.record {
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.record:hover { border-color: var(--diep); }

.record .wat { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.record .hoeveel { font-size: 22px; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; }
.record .hoeveel small { font-size: 12px; font-weight: 700; color: var(--flauw); }
.record .wanneer { font-size: 12px; color: var(--flauw); margin-top: 4px; }

/* ══ wat er mankeert ══════════════════════════════════════════════════════ */

.mankement-lijst { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }

.mankement {
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-left: 3px solid var(--let-op-lijn);
  border-radius: 10px;
  padding: 12px 14px;
}

.mankement.zwaar { border-left-color: #DC2626; }

.mankement .wat { font-size: 14px; font-weight: 800; }
.mankement .wanneer { font-weight: 600; color: var(--flauw); font-size: 12.5px; }
.mankement .waarom { font-size: 13px; color: var(--muted); margin: 4px 0 0; line-height: 1.5; }

/* Een afgesloten oordeel gaat over een periode die voorbij is. Het blijft
   staan — het archief eronder verandert er niet door — maar het mag niet
   meer lezen als een storing van vandaag: grijze rand, grijs kaartje, en
   een label dat het met zoveel woorden zegt. */
.mankement .staat {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  vertical-align: 1px;
  white-space: nowrap;
}
.mankement .staat.nu {
  background: var(--let-op-vlak); color: var(--let-op-ink); border: 1px solid var(--let-op-lijn);
}
.mankement.zwaar .staat.nu { background: #FEF2F2; color: #B91C1C; border-color: #FCA5A5; }
.mankement .staat.voorbij {
  background: var(--vlak); color: var(--muted); border: 1px solid var(--lijn);
}

.mankement.afgesloten { background: var(--vlak); border-left-color: var(--lijn); }
.mankement.afgesloten.zwaar { border-left-color: var(--lijn); }
.mankement.afgesloten .wat { color: var(--muted); }
.mankement .afloop { font-size: 12px; color: var(--flauw); margin: 6px 0 0; line-height: 1.5; }

.gat-kader {
  background: var(--let-op-vlak);
  border: 1px solid var(--let-op-lijn);
  border-radius: var(--rond);
  padding: 16px 18px;
  margin-top: 22px;
}

.gat-kader .titel { font-weight: 800; font-size: 14px; color: var(--let-op-ink-diep); }
.gat-kader p { margin: 6px 0 0; font-size: 13.5px; color: var(--let-op-ink-diep); line-height: 1.5; }

@media (max-width: 560px) {
  .staven { gap: 4px; height: 130px; }
  .jaarlabels { gap: 4px; }
  .kerncijfer { flex: 1 0 140px; }
}