/* =========================================================================
   Financiën: meerjarige baten en lasten, gebouwlasten, kengetallen, vlaggen.
   Gedeeld door de demo (/demo/financien/, het gebouwdossier) en /dossier/.
   ========================================================================= */

:root {
  /*
   * De twee reekskleuren. Niet Leisteen en Oker zelf: Leisteen is voor een
   * grafiek te donker en te grijs, en Oker haalt geen 3:1 tegen wit. Deze twee
   * liggen in dezelfde families, zijn met de palet-validator gecontroleerd
   * (lichtheid, verzadiging, kleurenblind onderscheid, contrast) en slagen op
   * alle zes de controles.
   */
  --fin-baten: #2f6a9e;
  --fin-lasten: #b87a1f;
  --fin-baten-licht: #dce8f2;
  --fin-lasten-licht: #f6e7cc;
  --fin-lijn: var(--colour-base);
  --fin-raster: var(--colour-line);
}

.fin {
  display: grid;
  gap: var(--space-l);
}

.fin-blok {
  background-color: var(--colour-surface);
  border: 1px solid var(--colour-line);
  border-radius: var(--radius-card);
  padding: var(--space-l);
  min-width: 0;
}

.fin-blok > :last-child {
  margin-bottom: 0;
}

.fin-blok h2,
.fin-blok h3 {
  font-size: 1.25rem;
  margin-bottom: var(--space-m);
}

.fin-klein {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--colour-text-muted);
  font-weight: 400;
}

.fin-reden {
  display: block;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--colour-text-muted);
  font-style: italic;
}

.fin-leeg {
  color: var(--colour-text-muted);
}

.fin-kenmerken {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
}

.fin-kenmerk {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background-color: var(--colour-fond);
  border: 1px solid var(--colour-line);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--colour-ink);
}

/* -------------------------------------------------------------------------
   Tabellen
   ------------------------------------------------------------------------- */

.fin-tabelhouder {
  overflow-x: auto;
}

.fin-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.fin-tabel th,
.fin-tabel td {
  text-align: left;
  padding: var(--space-s) var(--space-m) var(--space-s) 0;
  border-bottom: 1px solid var(--colour-line);
  vertical-align: top;
}

.fin-tabel thead th {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--colour-text-muted);
}

.fin-tabel tbody th {
  font-weight: 600;
}

.fin-tabel .fin-bedrag {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.fin-kengetallen {
  min-width: 44rem;
}

.fin-kengetallen td a {
  white-space: nowrap;
}

.fin-kengetallen .fin-waarde {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 10rem;
}

.fin-kengetallen .fin-waarde .fin-reden,
.fin-kengetallen .fin-waarde .fin-klein {
  font-weight: 400;
}

.fin-groep {
  margin-bottom: var(--space-s);
}

.fin-tabelweergave {
  margin-top: var(--space-m);
}

.fin-tabelweergave summary {
  cursor: pointer;
  color: var(--colour-base);
  font-weight: 600;
  font-size: 0.9375rem;
}

.fin-tabelweergave[open] summary {
  margin-bottom: var(--space-s);
}

/* -------------------------------------------------------------------------
   Grafieken
   ------------------------------------------------------------------------- */

.fin-grafiek {
  display: block;
  width: 100%;
  height: auto;
  font-family: inherit;
  overflow: visible;
}

/*
 * Op een telefoon wordt de staafgrafiek anders zo klein dat de as onleesbaar is.
 * Dan scrolt hij liever binnen zijn eigen kader dan dat de tekst krimpt.
 */
.fin-grafiekhouder {
  overflow-x: auto;
}

.fin-grafiek--breed {
  min-width: 34rem;
  max-width: 52rem;
}

/* Een SVG schaalt zijn tekst mee; zonder bovengrens wordt de as op een breed scherm een kop. */
.fin-grafiek--klein {
  max-width: 28rem;
}

.fin-grafiek__raster {
  stroke: var(--fin-raster);
  stroke-width: 1;
}

.fin-grafiek__basis {
  stroke: var(--colour-text-muted);
  stroke-width: 1;
}

.fin-grafiek__as {
  fill: var(--colour-text-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.fin-grafiek__waarde {
  fill: var(--colour-ink);
  font-size: 13px;
  font-weight: 700;
}

/* Het raakvlak is groter dan de staaf of de stip: de tooltip mag niet op een pixel hangen. */
.fin-grafiek__raak {
  fill: transparent;
}

.fin-grafiek__punt:hover .fin-grafiek__raak {
  fill: var(--colour-fond);
}

.fin-staaf--baten {
  fill: var(--fin-baten);
}

.fin-staaf--lasten {
  fill: var(--fin-lasten);
}

.fin-staaf--begroting {
  stroke-width: 1.5;
}

.fin-staaf--baten.fin-staaf--begroting {
  stroke: var(--fin-baten);
}

.fin-staaf--lasten.fin-staaf--begroting {
  stroke: var(--fin-lasten);
}

.fin-arcering__vlak--baten {
  fill: var(--fin-baten-licht);
}

.fin-arcering__vlak--lasten {
  fill: var(--fin-lasten-licht);
}

.fin-arcering__lijn {
  stroke-width: 2.5;
}

.fin-arcering__lijn--baten {
  stroke: var(--fin-baten);
}

.fin-arcering__lijn--lasten {
  stroke: var(--fin-lasten);
}

.fin-lijn {
  fill: none;
  stroke: var(--fin-lijn);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

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

.fin-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-m);
  margin: 0 0 var(--space-s);
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  color: var(--colour-ink);
}

.fin-legenda li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.fin-legenda__staal {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 3px;
}

.fin-legenda__staal--baten {
  background-color: var(--fin-baten);
}

.fin-legenda__staal--lasten {
  background-color: var(--fin-lasten);
}

.fin-legenda__staal--begroting.fin-legenda__staal--baten {
  background: repeating-linear-gradient(
    45deg,
    var(--fin-baten) 0 2px,
    var(--fin-baten-licht) 2px 5px
  );
  box-shadow: inset 0 0 0 1.5px var(--fin-baten);
}

.fin-legenda__staal--begroting.fin-legenda__staal--lasten {
  background: repeating-linear-gradient(
    45deg,
    var(--fin-lasten) 0 2px,
    var(--fin-lasten-licht) 2px 5px
  );
  box-shadow: inset 0 0 0 1.5px var(--fin-lasten);
}

.fin-tweeluik {
  display: grid;
  gap: var(--space-l);
}

@media (min-width: 48rem) {
  .fin-tweeluik {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.fin-figuur {
  margin: 0;
  min-width: 0;
}

.fin-figuur figcaption {
  font-size: 0.9375rem;
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

/* -------------------------------------------------------------------------
   Vlaggen. Kleur is nooit het enige verschil: er staat altijd een woord bij.
   ------------------------------------------------------------------------- */

.fin-vlaggen {
  max-width: 48rem;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-s);
}

.fin-vlag {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-s) var(--space-m);
  border-left: 4px solid var(--colour-line);
  background-color: var(--colour-fond);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.fin-vlag--verlopen {
  border-left-color: var(--status-verlopen-dot);
}

.fin-vlag--aandacht {
  border-left-color: var(--status-aandacht-dot);
}

.fin-vlag--info {
  border-left-color: var(--colour-slate-60);
}

.fin-vlag h4 {
  font-size: 0.9375rem;
  margin: 0 0 0.25rem;
}

.fin-vlag p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

.fin-status {
  justify-self: start;
  display: inline-block;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.fin-status--verlopen {
  color: var(--status-verlopen-text);
  background-color: var(--status-verlopen-bg);
}

.fin-status--aandacht {
  color: var(--status-aandacht-text);
  background-color: var(--status-aandacht-bg);
}

.fin-status--info {
  color: var(--colour-base);
  background-color: var(--colour-soft);
}

.fin-status--in-orde {
  color: var(--status-ok-text);
  background-color: var(--status-ok-bg);
}

/* -------------------------------------------------------------------------
   Op het gebouwdossier
   ------------------------------------------------------------------------- */

.fin-object dl {
  display: grid;
  gap: var(--space-s);
  margin: 0 0 var(--space-s);
}

@media (min-width: 40rem) {
  .fin-object dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.fin-object dt {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--colour-text-muted);
}

.fin-object dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.fin-object strong {
  font-size: 1.375rem;
}

@media print {
  .fin-tabelweergave {
    display: none;
  }
}

@media (forced-colors: active) {
  .fin-staaf--baten,
  .fin-staaf--lasten,
  .fin-lijn__punt {
    fill: CanvasText;
  }

  .fin-lijn {
    stroke: CanvasText;
  }
}

/* De exploitatie: groepkoppen, gebouwregels en totalen. */
.fin-exploitatie .fin-groepkop th {
  padding-top: var(--space-m);
  font-weight: 700;
  color: var(--colour-base);
}

.fin-exploitatie tbody:first-of-type .fin-groepkop th {
  padding-top: var(--space-s);
}

.fin-exploitatie .fin-gebouwregel th,
.fin-exploitatie .fin-gebouwregel td {
  background-color: var(--fin-lasten-licht);
}

.fin-exploitatie .fin-gebouwregel th {
  box-shadow: inset 3px 0 0 var(--fin-lasten);
  padding-left: var(--space-s);
}

.fin-exploitatie .fin-totaalregel th,
.fin-exploitatie .fin-totaalregel td {
  font-weight: 700;
  border-top: 2px solid var(--colour-ink);
}

.fin-exploitatie .fin-begroting {
  color: var(--colour-text-muted);
  font-style: italic;
}

.fin-exploitatie tbody th[scope="row"] {
  font-weight: 400;
  min-width: 16rem;
}

/* Het ledental onder de kengetallen. */
.fin-ledental {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-s);
  margin-top: var(--space-m);
}

.fin-ledental label {
  display: grid;
  gap: 0.25rem;
  font-size: 0.9375rem;
}

.fin-ledental input {
  min-width: 8rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--colour-line);
  border-radius: 6px;
  font: inherit;
}