/* =========================================================================
   Onskerkgebouw.nl — module Meerjarenonderhoud en financiële impact

   Bovenop site.css, demo.css en module.css. Alleen wat deze module eigen heeft:
   de grafiek, de matrix bouwdeel × jaar, de versies.

   De twee grafiekkleuren zijn gecontroleerd op kleurenblindheid en op contrast
   tegen wit: een verzadigd blauw voor de staven en een donker oker voor de lijn.
   Leisteen 60 zelf is te grijs om als datakleur te dragen; naast de oker leest
   het als "uit".
   ========================================================================= */

:root {
  --mjop-staaf: #2f6fae;
  --mjop-lijn: #a86f1c;
}

.mjop-bij {
  max-width: 44rem;
  color: var(--colour-text-muted);
  font-size: 0.9375rem;
}

.mjop-code {
  font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
  font-size: 0.8125rem;
  color: var(--colour-text-muted);
}

/* -------------------------------------------------------------------------
   De grafiek
   ------------------------------------------------------------------------- */

.mjop-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-l);
  margin: 0 0 var(--space-s);
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}

.mjop-legenda li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.mjop-legenda__staaf {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background-color: var(--mjop-staaf);
}

.mjop-legenda__lijn {
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background-color: var(--mjop-lijn);
}

/* Op een telefoon krimpt de grafiek niet mee tot onleesbare cijfers; hij houdt
   een minimale breedte en scrolt zelf, net als de tabellen. */
.mjop-grafiek {
  overflow-x: auto;
}

.mjop-grafiek svg {
  display: block;
  width: 100%;
  min-width: 36rem;
  height: auto;
}

.mjop-grafiek__band {
  fill: var(--colour-fond);
}

.mjop-grafiek__bandlabel,
.mjop-grafiek__as,
.mjop-grafiek__jaar {
  fill: var(--colour-text-muted);
  font-size: 13px;
}

.mjop-grafiek__raster {
  stroke: var(--colour-line);
  stroke-width: 1;
}

/* De nul is de belangrijkste lijn van de grafiek. */
.mjop-grafiek__nul {
  stroke: var(--colour-ink);
  stroke-width: 1.5;
}

.mjop-grafiek__staaf rect {
  fill: var(--mjop-staaf);
}

.mjop-grafiek__staaf:hover rect {
  fill: var(--colour-base);
}

.mjop-grafiek__lijn {
  fill: none;
  stroke: var(--mjop-lijn);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.mjop-grafiek__punt {
  fill: var(--mjop-lijn);
  stroke: var(--colour-surface);
  stroke-width: 2;
}

/* Onder nul: een open punt, zodat het verschil niet alleen in de kleur zit. */
.mjop-grafiek__punt--tekort {
  fill: var(--colour-surface);
  stroke: var(--status-verlopen-dot);
  stroke-width: 2.5;
}

.mjop-grafiek__tekort {
  fill: var(--status-verlopen-text);
  font-size: 13px;
  font-weight: 700;
}

.mjop-details {
  margin-top: var(--space-s);
}

.mjop-details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--colour-base);
}

.mjop-tekort {
  color: var(--status-verlopen-text);
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   De matrix: bouwdeel × jaar
   ------------------------------------------------------------------------- */

.mjop-matrix {
  min-width: 60rem;
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
}

/* Ruimte aan beide kanten van een bedrag; anders lopen de getallen van twee
   jaren in de totaalregel in elkaar over. */
.mjop-matrix th.demo-bedrag,
.mjop-matrix td.demo-bedrag {
  padding-left: var(--space-s);
}

.mjop-activiteit {
  display: block;
  margin-top: 0.15em;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--colour-text-muted);
}

/* De regelnamen blijven staan bij het schuiven; anders weet u in kolom elf niet
   meer welk bedrag u leest. */
.mjop-matrix__regelkop {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 15rem;
  max-width: 18rem;
  background-color: var(--colour-surface);
  font-weight: 600;
  color: var(--colour-ink);
}

.mjop-matrix__regelkop summary {
  cursor: pointer;
}

.mjop-matrix__regelkop details p {
  margin: var(--space-xs) 0 0;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--colour-text-muted);
}

.mjop-matrix__periode th {
  padding-bottom: 0;
  border-bottom: 3px solid var(--colour-soft);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mjop-matrix__groep th {
  padding-top: var(--space-m);
  background-color: var(--colour-surface);
  color: var(--colour-base);
  font-size: 1rem;
  font-weight: 800;
}

.mjop-matrix__som {
  font-weight: 700;
}

.mjop-matrix__totaal th,
.mjop-matrix__totaal td {
  border-top: 2px solid var(--colour-base);
  font-weight: 800;
  color: var(--colour-base);
}

.mjop-matrix__totaal th {
  position: sticky;
  left: 0;
  background-color: var(--colour-surface);
}

/* -------------------------------------------------------------------------
   Lijsten, uitgangspunten, versies
   ------------------------------------------------------------------------- */

.mjop-lijst {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mjop-lijst li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--space-m);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--colour-line);
}

.mjop-uitgangspunten {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: var(--space-xs) var(--space-l);
  margin: 0;
}

.mjop-uitgangspunten dt {
  font-weight: 700;
}

.mjop-uitgangspunten dd {
  margin: 0;
}

.mjop-versies {
  margin: var(--space-m) 0 0;
  padding: 0;
  list-style: none;
}

.mjop-versie {
  padding: var(--space-m) 0;
  border-top: 1px solid var(--colour-line);
}

.mjop-versie__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
}

.mjop-versie__kop h3 {
  margin: 0;
}

.mjop-versie ul {
  margin: var(--space-xs) 0 0;
}

/* In de demo staan de exportknoppen uit; dat moet ook te zien zijn. */
.button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* -------------------------------------------------------------------------
   Inlezen
   ------------------------------------------------------------------------- */

.mjop-inlezen {
  display: grid;
  /* Een bestandsveld is breder dan een telefoon; zo krimpt het mee. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xs);
  margin-top: var(--space-m);
  padding: var(--space-m) var(--space-l);
  background-color: var(--colour-fond);
  border: 1px dashed var(--colour-slate-60);
  border-radius: var(--radius-card);
}

.mjop-inlezen__label {
  font-weight: 700;
}

.mjop-inlezen__bestand {
  font: inherit;
  max-width: 100%;
}

.mjop-inlezen__of {
  margin: var(--space-s) 0 0;
}

.mjop-inlezen .actions {
  margin: 0;
}

.mjop-controle__samenvatting {
  font-weight: 700;
}

.mjop-meldingen {
  margin: var(--space-s) 0;
  padding: 0;
  list-style: none;
}

.mjop-melding {
  display: grid;
  grid-template-columns: 5rem minmax(9rem, 14rem) 1fr;
  align-items: baseline;
  gap: var(--space-s);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--colour-line);
}

.mjop-melding .badge {
  justify-self: start;
}

.mjop-melding__plek {
  color: var(--colour-text-muted);
  font-size: 0.9375rem;
}

@media (max-width: 40em) {
  .mjop-melding {
    grid-template-columns: auto 1fr;
  }

  .mjop-melding__tekst {
    grid-column: 1 / -1;
  }
}

.mjop-verschil {
  display: grid;
  gap: var(--space-m) var(--space-l);
}

@media (min-width: 62em) {
  .mjop-verschil {
    grid-template-columns: repeat(2, 1fr);
  }
}

.mjop-verschil__groep h3 {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0 0 var(--space-xs);
  font-size: 1.0625rem;
}

.mjop-verschil__lijst {
  margin: 0;
  padding-left: 1.1rem;
}

.mjop-verschil__lijst > li {
  margin-bottom: var(--space-xs);
}

.mjop-wijzigingen {
  margin: 0.2em 0 0;
  padding-left: 1rem;
  font-size: 0.9375rem;
}

.mjop-wijziging__veld {
  color: var(--colour-text-muted);
}

/* Oud doorgestreept, nieuw vet: het verschil zit niet alleen in de kleur. */
.mjop-wijzigingen del {
  color: var(--colour-text-muted);
}

.mjop-wijzigingen ins {
  text-decoration: none;
  font-weight: 700;
}

.mjop-vergelijk {
  min-width: 28rem;
}

.mjop-vergelijk td {
  font-variant-numeric: tabular-nums;
}

.mjop-vergelijk__anders {
  font-weight: 800;
  color: var(--colour-base);
}

.mjop-bevestiging {
  margin-top: var(--space-s);
  padding: var(--space-s) var(--space-m);
  border-left: 4px solid var(--status-ok-dot);
  background-color: var(--status-ok-bg);
}

.mjop-bevestiging p {
  margin: 0.25em 0;
}

.mjop-bevestiging--fout {
  border-left-color: var(--status-verlopen-dot);
  background-color: var(--status-verlopen-bg);
}

/* Op het dossier: welke code uit het bestand bij welk gebouw hoort. */
.mjop-koppeling {
  margin: var(--space-s) 0 var(--space-m);
  padding: var(--space-s) var(--space-m);
  border: 1px solid var(--colour-line);
  border-radius: var(--radius-card);
  background-color: var(--colour-fond);
}

.mjop-koppeling h3 {
  margin: 0 0 var(--space-xs);
  font-size: 1.0625rem;
}

.mjop-koppeling__regel {
  display: grid;
  grid-template-columns: minmax(10rem, 16rem) minmax(0, 22rem);
  align-items: center;
  gap: var(--space-s);
  margin: var(--space-xs) 0 0;
}

.mjop-koppeling__regel label {
  font-weight: 700;
}

.mjop-koppeling select,
.mjop-organisatie select {
  font: inherit;
  padding: 0.3em 0.5em;
  max-width: 100%;
}

@media (max-width: 40em) {
  .mjop-koppeling__regel {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------
   Werkpakketten: het plan per vakgebied en jaar (onderhoud/werkpakketscherm.ts)
   ------------------------------------------------------------------------- */

.wp-jaar {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  margin: var(--space-m) 0 var(--space-xs);
}

.wp-jaar__bedrag,
.wp-pakket__bedrag,
.wp-regel__bedrag {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wp-pakket {
  border-top: 1px solid var(--colour-line);
  padding: var(--space-xs) 0;
}

.wp-pakket__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-s);
  cursor: pointer;
}

.wp-pakket__naam {
  flex: 1 1 12rem;
  font-weight: 600;
}

.wp-pakket__aantal {
  color: var(--colour-text-muted);
  font-size: 0.9375rem;
}

.wp-regels {
  margin: var(--space-xs) 0;
  padding: 0;
  list-style: none;
}

.wp-regel {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-s);
  padding: 0.25rem 0;
}

.wp-regel__wat {
  flex: 1 1 14rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.wp-regel__in {
  flex-basis: 100%;
  color: var(--colour-text-muted);
  font-size: 0.875rem;
}

.wp-pakket__tussenkop {
  margin: var(--space-s) 0 var(--space-xs);
  font-size: 0.9375rem;
}

.wp-omschrijving {
  max-width: 44rem;
  margin: 0 0 var(--space-s);
  padding: var(--space-xs) var(--space-s);
  background: var(--colour-fond);
  font: inherit;
  font-size: 0.9375rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}