/* p-overzicht: pagina "Overzicht". Alleen var(--token), geen hex. */

/* ---- kerncijfers: één band, verdeeld door haarlijnen ---- */
.ov-kern {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.ov-kern__cel {
  padding: 20px 20px 18px;
  border-right: 1px solid var(--lijn);
  min-width: 0;
}
.ov-kern__cel:last-child { border-right: 0; }
.ov-kern__label {
  font-size: 10.5px; font-weight: 600; font-stretch: 88%; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tekst-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ov-kern__waarde {
  font-size: 34px; font-weight: 700; font-stretch: 96%; letter-spacing: -.035em;
  line-height: 1.08; margin: 9px 0 8px; color: var(--tekst);
}
.ov-kern__voet { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.ov-kern__voet .mini { font-size: 11.5px; }

/* het eerste cijfer is het antwoord: iets zwaarder, met een roest maatstreepje */
.ov-kern__cel:first-child { position: relative; }
.ov-kern__cel:first-child::before {
  content: ""; position: absolute; left: 20px; top: 0; width: 26px; height: 3px;
  background: var(--roest);
}
.ov-kern__cel:first-child .ov-kern__waarde { font-size: 38px; }

@media (max-width: 1180px) {
  .ov-kern { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ov-kern__cel:nth-child(3n) { border-right: 0; }
  .ov-kern__cel:nth-child(-n+3) { border-bottom: 1px solid var(--lijn); }
}
@media (max-width: 700px) {
  .ov-kern { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-kern__cel { padding: 15px 15px 13px; border-right: 1px solid var(--lijn); }
  .ov-kern__cel:nth-child(3n) { border-right: 1px solid var(--lijn); }
  .ov-kern__cel:nth-child(2n) { border-right: 0; }
  .ov-kern__cel:nth-child(-n+4) { border-bottom: 1px solid var(--lijn); }
  .ov-kern__cel:last-child { grid-column: 1 / -1; border-right: 0; }
  .ov-kern__waarde { font-size: 27px; margin: 6px 0; }
  .ov-kern__cel:first-child .ov-kern__waarde { font-size: 29px; }
  .ov-kern__cel:first-child::before { left: 15px; }
}

/* ---- signalen: de bellijst van deze week ---- */
.ov-sigs { display: grid; }
.ov-sig {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 15px 20px; border-top: 1px solid var(--lijn);
}
.ov-sigs .ov-sig:first-child { border-top: 0; }
.ov-sig:hover { background: var(--opp-2); }
.ov-sig__staaf {
  width: 3px; align-self: stretch; border-radius: 3px; flex: none;
  background: var(--neutraal); margin-top: 2px;
}
.ov-sig[data-ernst="slecht"] .ov-sig__staaf { background: var(--slecht); }
.ov-sig[data-ernst="let-op"] .ov-sig__staaf { background: var(--let-op); }
.ov-sig[data-ernst="goed"]   .ov-sig__staaf { background: var(--goed); }
.ov-sig__tekst { min-width: 0; flex: 1; }
.ov-sig__kop { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ov-sig__titel {
  font-weight: 650; font-stretch: 100%; letter-spacing: -.012em; font-size: 14.5px;
}
.ov-sig__uitleg { font-size: 13px; color: var(--tekst-2); margin-top: 3px; }
.ov-sig__knop { align-self: center; flex: none; color: var(--roest-tekst); }

@media (max-width: 700px) {
  .ov-sig { padding: 13px 15px; gap: 11px; flex-wrap: wrap; }
  .ov-sig__knop { margin-left: 17px; }
}

/* ---- grafieken ---- */
.ov-grafiek { padding: 14px 18px 18px; }
.ov-grafiek .grafiek { touch-action: pan-y; }

.ov-hit { fill: transparent; cursor: crosshair; }
.ov-hl { transition: opacity .1s; opacity: 0; }
.ov-hl[data-aan="ja"] { opacity: 1; }
.ov-kruis {
  stroke: var(--lijn-sterk); stroke-width: 1; stroke-dasharray: 3 3;
  opacity: 0; transition: opacity .1s; pointer-events: none;
}
.ov-kruis[data-aan="ja"] { opacity: 1; }

.ov-naam { font-size: 11.5px; font-stretch: 88%; fill: var(--tekst-2); }
.ov-bedrag {
  font-size: 11.5px; font-stretch: 88%; font-weight: 600;
  fill: var(--tekst-2); font-variant-numeric: tabular-nums;
}
.ov-annotatie { font-size: 12px; font-stretch: 92%; font-weight: 650; fill: var(--tekst); }
.ov-beugel { stroke: var(--roest); stroke-width: 1.5; fill: none; }

@media (max-width: 700px) {
  .ov-grafiek { padding: 12px 12px 14px; }
}

/* ---- waarom-uitklap bij een signaal ---- */
.ov-sig__acties { margin-top: 8px; }
.ov-sig__waarom-knop { padding: 4px 9px; color: var(--tekst-2); }
.ov-sig__waarom {
  margin-top: 10px; border-left: 2px solid var(--lijn-2); padding-left: 2px;
}

/* ---- welke maanden dragen het jaar ---- */
.grafiek .ov-jaar {
  font-size: 12.5px; font-weight: 650; font-stretch: 88%; fill: var(--tekst-2);
}
.grafiek .ov-jaartotaal { font-size: 11.5px; font-stretch: 88%; fill: var(--tekst-3); }
.grafiek .ov-celtekst { font-size: 11.5px; font-stretch: 88%; font-weight: 600; }
.grafiek .ov-cel-leeg {
  fill: none; stroke: var(--lijn-2); stroke-width: 1; stroke-dasharray: 3 3;
}
.grafiek .ov-maand--top { fill: var(--roest-tekst); font-weight: 700; }
.grafiek .ov-deel { font-size: 10.5px; font-stretch: 88%; fill: var(--tekst-3); }
.grafiek .ov-deel--top { fill: var(--roest-tekst); font-weight: 700; }

.ov-seizoen__voet { padding: 0 18px 18px; }
.ov-seizoen__conclusie { font-size: 13.5px; line-height: 1.55; margin-bottom: 5px; }