/* Kot56: de basis die elke skin deelt. Indeling, tabellen, formulieren en de gsm-weergave.

   Kleuren, letters, vormen en versiering komen uit de skin (`skins/<naam>/skin.css`), via de
   variabelen hieronder. Een skin zet die variabelen en voegt versiering toe (kop, titels,
   kaders); de indeling zelf blijft hier. Zonder skin is alles sober maar bruikbaar.

   Beelden (SVG, PNG, JPG) staan in `skins/<naam>/beelden/` en hangt de skin met `url()` aan, altijd
   in een regel van skin.css: een url() in een variabele wordt opgelost tegenover dit bestand.
   `--achtergrond-beeld` en `--kop-beeld` zijn er dus enkel voor kleurverlopen. Plaatsen voor beelden:
   - de achtergrond van `body` en `.kop`;
   - in de lege plaatsen `.kop-sier-links` en `.kop-sier-rechts` (grote beelden in de kop);
   - in de vrije pseudo-elementen: `.kop::before` en `::after`, `h1` en `h2` (`::before` en
     `::after`), `.paneel` (`::before` en `::after`), `.medaillon::after`, `.knop::before`,
     `.inhoud::before`;
   - per pagina via `body[data-pagina="<naam van de url>"]`. */

:root {
  /* Kleur. Paren voor tekst halen minstens 4,5 : 1. */
  --achtergrond: #f5f5f2;
  --achtergrond-beeld: none;
  --tekst: #1f2328;
  --zacht: #5c6168;
  --vlak: #ffffff;
  --rand: #b9bec4;
  --lijn: #e3e6ea;
  --veld-rand: #8a9097;
  --accent: #3b6ea8;
  --accent-tekst: #2d5785;
  --link: var(--tekst);
  --link-lijn: var(--accent);

  --kop-vlak: #1f2933;
  --kop-beeld: none;
  --kop-rand: 3px solid var(--accent);
  --kop-tekst: #e4e7eb;
  --kop-merk: #ffffff;
  --kop-lijn: rgba(255, 255, 255, 0.25);
  --kop-actief: #ffffff;
  --kop-gedimd: #b3bac2;
  --aantal-vlak: var(--fout);
  --aantal-tekst: #ffffff;

  --knop-vlak: var(--kop-vlak);
  --knop-vlak-hover: #2e3b47;
  --knop-tekst: #ffffff;
  --knop-tekst-hover: #ffffff;
  --knop-rand: inset 0 0 0 1px var(--knop-vlak);
  --knop-licht-rand: inset 0 0 0 1px var(--tekst);
  --knop-licht-hover: var(--lijn);

  --medaillon-vlak: var(--kop-vlak);
  --medaillon-alarm: var(--medaillon-vlak);
  --medaillon-goed: var(--medaillon-vlak);
  --medaillon-tekst: #d5d9de;
  --medaillon-label: #ffffff;
  --medaillon-getal: #ffffff;
  --medaillon-alarmtekst: #f4b8a8;
  --medaillon-kader: rgba(255, 255, 255, 0.3);
  --medaillon-knop-vlak: #ffffff;
  --medaillon-knop-tekst: var(--kop-vlak);

  --teken-vlak: var(--kop-vlak);
  --teken-tekst: #ffffff;
  --teller-tekst: var(--teken-tekst);

  --goed: #2f6b4f;
  --goed-vlak: #e8f2ec;
  --let-op: #8f5a17;
  --let-op-vlak: #fbf0dc;
  --let-op-tekst: #6e420c;
  --fout: #a1322b;
  --fout-vlak: #f8e8e4;

  /* Letters. `--spatiering` schaalt de letterafstand van labels en titels (1 = zoals bedoeld). */
  --letter-titel: Georgia, serif;
  --letter-kop: var(--letter-tekst);
  --letter-tekst: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --letter-label: var(--letter-tekst);
  --letter-getal: var(--letter-kop);
  --tekstgrootte: 1rem;
  --spatiering: 1;
  --hoofdletters: uppercase;
  --titel-hoofdletters: none;
  --kop-gewicht: 600;

  /* Vorm. Een skin mag een clip-path geven voor vormen die border-radius niet kan maken. */
  --hoek: 0.5rem;
  --hoek-knop: 0.375rem;
  --hoek-veld: 0.25rem;
  --hoek-medaillon: var(--hoek);
  --medaillon-vorm: none;
  --medaillon-kader-hoek: calc(var(--hoek-medaillon) * 0.6);
  --medaillon-kader-inset: 0.625rem;
  --paneel-binnenlijn: none;
  --chip-vorm: none;
  --chip-hoek: 999px;
  --ruit-vorm: none;
  --ruit-hoek: 50%;
  --teken-vorm: none;
  --teken-hoek: 50%;
  --icoon-hoek: 50%;
  --icoon-draai: none;

  --breedte: 80rem;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--letter-tekst);
  font-size: var(--tekstgrootte);
  line-height: 1.5;
  color: var(--tekst);
  background: var(--achtergrond-beeld), var(--achtergrond);
}

a {
  color: var(--link);
  text-decoration-color: var(--link-lijn);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-color: var(--link);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Kop: woordmerk, adres en menu ---------- */

.kop {
  /* Boven de inhoud (ook boven de vastgeklikte tabelkolom), zodat de tabbalk op een gsm bovenaan ligt. */
  position: relative;
  z-index: 10;
  overflow: hidden;
  background: var(--kop-beeld), var(--kop-vlak);
  color: var(--kop-tekst);
  border-bottom: var(--kop-rand);
}

/* De plaatsen voor beelden van de skin: leeg en zonder afmetingen, tot een skin ze vult. */
.kop-sier {
  position: absolute;
  bottom: 0;
  pointer-events: none;
}

.kop-sier-links {
  left: 0;
}

.kop-sier-rechts {
  right: 0;
}

.navigatie {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--breedte);
  margin: 0 auto;
  padding: 2rem 1rem 0;
}

/* Zonder login (de loginpagina) is er geen menu: ruimte onder het adres. */
.navigatie > .adres:last-child {
  margin-bottom: 2.25rem;
}

.navigatie .merk {
  font-family: var(--letter-titel);
  font-size: clamp(2.5rem, 7vw, 4rem);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  color: var(--kop-merk);
}

.adres {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  letter-spacing: calc(0.5em * var(--spatiering));
  text-align: center;
  text-transform: var(--hoofdletters);
  color: var(--kop-tekst);
}

.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-self: stretch;
  margin-top: 1.75rem;
  border-top: 1px solid var(--kop-lijn);
}

.menu a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  padding: 0 1.75rem;
  color: var(--kop-tekst);
  font-family: var(--letter-label);
  font-size: 0.875rem;
  letter-spacing: calc(0.28em * var(--spatiering));
  text-transform: var(--hoofdletters);
  text-decoration: none;
}

.menu a:hover {
  color: var(--kop-actief);
}

.menu a[aria-current="page"] {
  color: var(--kop-actief);
}

/* Het aantal te verwerken naast "Betalingen". */
.menu .teller {
  display: inline-grid;
  place-items: center;
  min-width: 1.375rem;
  height: 1.375rem;
  margin-left: 0.5rem;
  padding: 0 0.375rem;
  border-radius: 999px;
  background: var(--aantal-vlak);
  color: var(--aantal-tekst);
  font-family: var(--letter-tekst);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
}

/* Rechtsboven in de kop: het tandwiel naar het beheer, en afmelden. */
.kop-acties {
  position: absolute;
  z-index: 2;
  top: 0.75rem;
  right: 1rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.kop-acties a,
.kop-acties button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 0.625rem;
  border-radius: var(--hoek-knop);
  background: none;
  box-shadow: none;
  color: var(--kop-tekst);
  font-family: var(--letter-label);
  font-size: 0.8125rem;
  letter-spacing: calc(0.16em * var(--spatiering));
  text-decoration: none;
  text-transform: var(--hoofdletters);
}

.kop-acties a:hover,
.kop-acties button:hover,
.kop-acties a[aria-current="page"] {
  background: none;
  color: var(--kop-actief);
}

.kop-acties svg {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
}

/* Op een gsm: een compacte kop en het menu als tabbalk onderaan, binnen bereik van de duim. */
@media (max-width: 40rem) {
  body.ingelogd {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
  }

  .navigatie {
    padding: 1.25rem 1rem;
  }

  .navigatie > .adres:last-child {
    margin-bottom: 0;
  }

  .navigatie .merk {
    font-size: 2.5rem;
  }

  /* Op een gsm: enkel het tandwiel; afmelden staat op de pagina Beheer. */
  .kop-acties {
    top: 0.5rem;
    right: 0.5rem;
  }

  .kop-acties .label,
  .kop-acties .afmelden {
    display: none;
  }

  /* De teller zit op het pictogram van "Betalingen". */
  .menu .teller {
    position: absolute;
    top: 0.375rem;
    left: calc(50% + 0.25rem);
    min-width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    font-size: 0.625rem;
  }

  .adres {
    margin-top: 0.5rem;
    font-size: 0.625rem;
    letter-spacing: calc(0.38em * var(--spatiering));
  }

  .menu {
    position: fixed;
    z-index: 10;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    margin: 0;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: var(--kop-rand);
    background: var(--kop-beeld), var(--kop-vlak);
  }

  .menu a {
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.5rem;
    min-height: 4.25rem;
    padding: 0.75rem 0.125rem 0.5rem;
    color: var(--kop-gedimd);
    font-size: 0.5625rem;
    letter-spacing: calc(0.12em * var(--spatiering));
    line-height: 1.2;
    text-align: center;
  }

  /* Elk item krijgt een pictogram (vorm uit de skin); gevuld voor de pagina waar je bent. */
  .menu a::before,
  .menu a + a::before {
    content: "";
    position: static;
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
    border: 1.5px solid currentColor;
    border-radius: var(--icoon-hoek);
    background: none;
    transform: var(--icoon-draai);
  }

  .menu a[aria-current="page"]::before {
    background: var(--kop-actief);
  }

  .menu a::after,
  .menu a[aria-current="page"]::after {
    content: none;
  }
}

/* ---------- Inhoud ---------- */

.inhoud {
  max-width: var(--breedte);
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
}

h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin: 0 0 1.75rem;
  font-family: var(--letter-titel);
  font-size: clamp(1.625rem, 4.5vw, 2.5rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: calc(0.12em * var(--spatiering));
  text-align: center;
  text-transform: var(--titel-hoofdletters);
  color: var(--tekst);
}

.titel {
  margin-bottom: 1.75rem;
  text-align: center;
}

.titel h1 {
  margin-bottom: 0.375rem;
}

.titel p {
  margin: 0;
  font-family: var(--letter-label);
  font-size: 0.8125rem;
  letter-spacing: calc(0.42em * var(--spatiering));
  text-transform: var(--hoofdletters);
  color: var(--accent-tekst);
}

h2 {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 1.75rem 0 0.875rem;
  font-family: var(--letter-kop);
  font-size: 1.5rem;
  font-weight: var(--kop-gewicht);
  line-height: 1.25;
  letter-spacing: calc(0.1em * var(--spatiering));
  color: var(--tekst);
}

h2 a {
  text-decoration: none;
}

@media (max-width: 30rem) {
  h1 {
    gap: 0.75rem;
  }

  .inhoud h2 {
    font-size: 1.25rem;
  }
}

.blok {
  margin: 0 0 1.75rem;
}

.blok > h2:first-child {
  margin-top: 0;
}

.blok p {
  margin: 0 0 0.75rem;
}

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

.paneel {
  position: relative;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--rand);
  border-radius: var(--hoek);
  outline: var(--paneel-binnenlijn);
  outline-offset: -7px;
  background: var(--vlak);
}

@media (max-width: 30rem) {
  .paneel {
    padding: 1.25rem 1rem;
  }
}

.raster {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
  margin-bottom: 1.75rem;
}

.raster > *,
.kolom > * {
  margin-bottom: 0;
}

.kolom {
  display: grid;
  /* minmax(0, …): een brede tabel scrolt binnen haar blok in plaats van de kolom op te rekken. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
}

@media (max-width: 60rem) {
  .raster {
    grid-template-columns: minmax(0, 1fr);
  }
}

.toelichting,
.sub {
  color: var(--zacht);
  font-size: 0.875rem;
}

.knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

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

/* ---------- Medaillons: de grote getallen op het startscherm ---------- */

.medaillons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.25rem;
  margin: 0 0 2rem;
}

@media (max-width: 40rem) {
  .medaillons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
}

.medaillon {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin: 0;
  padding: 1.5rem 2rem 1.375rem;
  border-radius: var(--hoek-medaillon);
  background: var(--medaillon-vlak);
  color: var(--medaillon-tekst);
  text-align: center;
  text-decoration: none;
  clip-path: var(--medaillon-vorm);
}

/* Een binnenkader; bij een link licht het op (een clip-path snijdt een gewone focusrand weg). */
.medaillon::before {
  content: "";
  position: absolute;
  inset: var(--medaillon-kader-inset);
  border: 1px solid var(--medaillon-kader);
  border-radius: var(--medaillon-kader-hoek);
  pointer-events: none;
}

a.medaillon:focus-visible {
  outline: none;
}

a.medaillon:focus-visible::before,
a.medaillon:hover::before {
  border: 2px solid var(--medaillon-getal);
}

.medaillon.alarm {
  background: var(--medaillon-alarm);
}

.medaillon.goed {
  background: var(--medaillon-goed);
}

.medaillon .medaillon-label {
  display: block;
  margin: 0;
  font-family: var(--letter-label);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: calc(0.36em * var(--spatiering));
  line-height: 1.5;
  text-transform: var(--hoofdletters);
  color: var(--medaillon-label);
}

.medaillon .medaillon-label::before,
.medaillon .medaillon-label::after {
  content: none;
}

.medaillon .medaillon-getal {
  margin: 0;
  font-family: var(--letter-getal);
  font-size: 2.75rem;
  line-height: 1.15;
  font-variant-numeric: lining-nums;
  color: var(--medaillon-getal);
  white-space: nowrap;
}

.medaillon.alarm .medaillon-getal {
  color: var(--medaillon-alarmtekst);
}

.medaillon p {
  margin: 0;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

.medaillon .medaillon-melding {
  margin-top: 0.375rem;
  color: var(--medaillon-alarmtekst);
  overflow-wrap: anywhere;
}

.medaillon form {
  margin-top: 0.75rem;
}

.medaillon .knop,
.medaillon button {
  background: var(--medaillon-knop-vlak);
  color: var(--medaillon-knop-tekst);
  box-shadow: inset 0 0 0 1px var(--medaillon-knop-vlak), inset 0 0 0 3px var(--medaillon-knop-tekst);
}

.medaillon .knop:hover,
.medaillon button:hover {
  background: var(--medaillon-getal);
  color: var(--medaillon-knop-tekst);
}

@media (max-width: 40rem) {
  .medaillon {
    padding: 1.125rem 1.25rem 1rem;
  }

  .medaillon .medaillon-label {
    font-size: 0.5625rem;
    letter-spacing: calc(0.24em * var(--spatiering));
  }

  .medaillon .medaillon-getal {
    font-size: 1.875rem;
  }

  .medaillon p {
    font-size: 0.75rem;
  }
}

/* ---------- Kamernummer in een teken (vorm uit de skin) ---------- */

.kamer-nr {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: var(--teken-hoek);
  background: var(--teken-vlak);
  color: var(--teken-tekst);
  font-family: var(--letter-titel);
  font-size: 1rem;
  line-height: 1;
  vertical-align: middle;
  clip-path: var(--teken-vorm);
}

/* ---------- Meldingen ---------- */

.meldingen {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.melding {
  margin-bottom: 0.75rem;
  padding: 0.875rem 1.125rem;
  border: 1px solid var(--rand);
  border-left: 0.3125rem solid var(--accent);
  border-radius: var(--hoek-veld);
  background: var(--vlak);
}

.melding.success {
  border-left-color: var(--goed);
  background: var(--goed-vlak);
}

.melding.warning {
  border-left-color: var(--let-op);
  background: var(--let-op-vlak);
}

.melding.error {
  border-left-color: var(--fout);
  background: var(--fout-vlak);
}

.melding p {
  margin: 0 0 0.75rem;
}

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

/* ---------- Knoppen en formulieren ---------- */

.knop,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.625rem 1.5rem;
  border: 0;
  border-radius: var(--hoek-knop);
  background: var(--knop-vlak);
  color: var(--knop-tekst);
  box-shadow: var(--knop-rand);
  font-family: var(--letter-label);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: calc(0.22em * var(--spatiering));
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  text-transform: var(--hoofdletters);
  cursor: pointer;
}

.knop:hover,
button:hover {
  background: var(--knop-vlak-hover);
  color: var(--knop-tekst-hover);
}

button:disabled {
  opacity: 0.6;
  cursor: progress;
}

.knop-neutraal {
  background: transparent;
  color: var(--tekst);
  box-shadow: var(--knop-licht-rand);
}

.knop-neutraal:hover {
  background: var(--knop-licht-hover);
  color: var(--tekst);
}

label {
  font-weight: 500;
}

input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="month"],
input[type="date"],
input[type="file"],
select,
textarea {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--veld-rand);
  border-radius: var(--hoek-veld);
  background: var(--vlak);
  color: inherit;
  font: inherit;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--tekst);
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

input[type="checkbox"],
input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--knop-vlak);
  vertical-align: middle;
}

.formulier {
  max-width: 32rem;
}

.formulier .veld {
  margin-bottom: 1.25rem;
}

.formulier label {
  display: block;
  margin-bottom: 0.375rem;
}

.formulier small {
  display: block;
  margin-top: 0.375rem;
  color: var(--zacht);
}

.fouten {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
  color: var(--fout);
}

/* De pagina's van allauth (inloggen, verificatiecode, passkey): één smalle kolom. */
.allauth {
  max-width: 34rem;
  margin: 0 auto;
}

.allauth form p > label {
  display: block;
  margin-bottom: 0.375rem;
}

.allauth form p > input[type="checkbox"] + label,
.allauth form p > input[type="radio"] + label {
  display: inline;
  margin-left: 0.5rem;
}

.allauth form p > span {
  display: block;
  margin-top: 0.25rem;
  color: var(--zacht);
  font-size: 0.875rem;
}

.allauth button,
.allauth .knop {
  margin: 0.25rem 0.5rem 0.5rem 0;
}

.allauth table {
  width: 100%;
  border-collapse: collapse;
}

.allauth th,
.allauth td {
  padding: 0.5rem;
  border-bottom: 1px solid var(--lijn);
  text-align: left;
}

/* ---------- Te verwerken: een kaart per verrichting, bedienbaar met één hand op een gsm ---------- */

.verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rijen {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rij {
  padding: 1rem 1.25rem;
  border: 1px solid var(--rand);
  border-radius: var(--hoek);
  outline: var(--paneel-binnenlijn);
  outline-offset: -5px;
  background: var(--vlak);
}

.rij.melding {
  border-left: 0.3125rem solid var(--goed);
  outline: 0;
}

.rij p {
  margin: 0.25rem 0 0;
  overflow-wrap: anywhere;
}

.rij-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--lijn);
}

.rij-kop time {
  color: var(--accent-tekst);
  font-size: 0.875rem;
  letter-spacing: calc(0.12em * var(--spatiering));
}

.bedrag {
  font-size: 1.375rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.bedrag.uitgaand {
  color: var(--fout);
}

.iban {
  color: var(--zacht);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.reden {
  padding: 0.375rem 0.625rem;
  border-left: 3px solid var(--let-op);
  background: var(--let-op-vlak);
  color: var(--let-op-tekst);
  font-size: 0.875rem;
}

.verwerk {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.875rem;
}

.verwerk label {
  display: block;
  margin-bottom: 0.25rem;
}

.verwerk .fouten {
  margin: 0.25rem 0 0;
}

.keuze {
  display: flex;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Drie grote knoppen in plaats van een keuzelijst; het keuzerondje zelf is onzichtbaar maar vult de knop. */
.verwerk .pil {
  position: relative;
  flex: 1;
  margin: 0;
  font-weight: 400;
}

.pil input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.pil span {
  display: block;
  min-height: 2.75rem;
  padding: 0.75rem 0.5rem 0.625rem;
  border: 1px solid var(--tekst);
  border-radius: var(--hoek-knop);
  background: var(--vlak);
  font-family: var(--letter-label);
  font-size: 0.8125rem;
  letter-spacing: calc(0.16em * var(--spatiering));
  text-align: center;
  text-transform: var(--hoofdletters);
}

.pil input:checked + span {
  background: var(--knop-vlak);
  color: var(--knop-tekst);
  box-shadow: var(--knop-rand);
}

.pil input:focus-visible + span {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.verwerk .vink {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
}

/* Toon enkel de velden die bij de keuze horen; zonder :has() zijn ze allemaal zichtbaar. */
@supports selector(:has(a)) {
  .verwerk .veld {
    display: none;
  }

  .verwerk:has(input[name="keuze"][value="huur"]:checked) :is(.veld-contract, .veld-maand, .veld-onthoud),
  .verwerk:has(input[name="keuze"][value="waarborg"]:checked) :is(.veld-contract, .veld-onthoud),
  .verwerk:has(input[name="keuze"][value="overig"]:checked) .veld-notitie {
    display: block;
  }
}

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

/* Een tabel scrolt horizontaal binnen haar eigen blok; de pagina zelf scrolt nooit opzij. */
.tabel-blok {
  /* Houdt de verborgen (absoluut gepositioneerde) tekst in de cellen binnen het blok. */
  position: relative;
  max-width: 100%;
  margin: 0 0 1rem;
  overflow-x: auto;
  border: 1px solid var(--rand);
  border-radius: var(--hoek);
  background: var(--vlak);
}

/* In een paneel heeft de tabel al een kader. */
.paneel .tabel-blok {
  margin-bottom: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* `separate` in plaats van `collapse`, anders verdwijnen de randen van de vastgeklikte kolom. */
.tabel {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.tabel th,
.tabel td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--lijn);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.tabel thead th {
  border-bottom: 2px solid var(--tekst);
  color: var(--accent-tekst);
  font-family: var(--letter-label);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: calc(0.18em * var(--spatiering));
  text-transform: var(--hoofdletters);
}

.tabel tbody tr:last-child > * {
  border-bottom: 0;
}

/* De eerste kolom (kamer of maand) blijft staan terwijl de rest opzij scrolt. */
.tabel th:first-child,
.tabel td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--vlak);
}

@media (max-width: 30rem) {
  .tabel th,
  .tabel td {
    padding: 0.5rem;
  }
}

.tabel .getal {
  text-align: right;
}

/* Een lange naam breekt af in plaats van de tabel breder te maken. */
.tabel .naam,
.tabel .notitie {
  min-width: 8rem;
  white-space: normal;
}

.tabel .notitie {
  min-width: 12rem;
}

.negatief {
  color: var(--fout);
}

/* Op een gsm wordt een tabel met `kaarten` een stapel kaartjes: kamer links, de rest ernaast. */
@media (max-width: 40rem) {
  .kaarten thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .kaarten,
  .kaarten tbody {
    display: block;
  }

  .kaarten tr {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    grid-template-areas:
      "kamer naam status"
      "kamer maand maand"
      "kamer bedrag bedrag"
      "kamer betaald betaald";
    gap: 0.125rem 0.75rem;
    align-items: center;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--lijn);
  }

  .kaarten tr:last-child {
    border-bottom: 0;
  }

  .tabel.kaarten td {
    position: static;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
  }

  .kaarten .kol-kamer { grid-area: kamer; }
  .kaarten .kol-naam { grid-area: naam; }
  .kaarten .kol-maand { grid-area: maand; color: var(--zacht); font-size: 0.875rem; }
  .tabel.kaarten .kol-bedrag { grid-area: bedrag; text-align: left; }
  .tabel.kaarten .kol-betaald { grid-area: betaald; text-align: left; }
  .kaarten .kol-status { grid-area: status; text-align: right; }

  .kaarten [data-label]::before {
    content: attr(data-label) " ";
    color: var(--accent-tekst);
    font-family: var(--letter-label);
    font-size: 0.6875rem;
    letter-spacing: calc(0.16em * var(--spatiering));
    text-transform: var(--hoofdletters);
  }
}

/* ---------- Statussen: een chip in tabellen, een teken in de matrix ---------- */

/* De skin zet per status `--s-vlak` en `--s-tekst`; dit zijn sobere standaarden. */
.status-betaald { --s-vlak: #dcefe3; --s-tekst: #14532d; }
.status-verrekend { --s-vlak: #dff1f0; --s-tekst: #134e4a; }
.status-te-weinig { --s-vlak: #fff0d9; --s-tekst: #7a4100; }
.status-te-veel { --s-vlak: #e6ecfb; --s-tekst: #1e3a8a; }
.status-ontbreekt { --s-vlak: #fde3e0; --s-tekst: #8c1d12; }
.status-lopende-maand { --s-vlak: #fff9db; --s-tekst: #5f4b00; }
.status-niet-zichtbaar { --s-vlak: #edf0f3; --s-tekst: #52606d; }
.status-toekomst { --s-vlak: #f1f3f5; --s-tekst: #52606d; }

.status {
  display: inline-block;
  padding: 0.25rem 0.875rem 0.1875rem;
  border-radius: var(--chip-hoek);
  background: var(--s-vlak, var(--lijn));
  color: var(--s-tekst, var(--tekst));
  font-family: var(--letter-label);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: calc(0.16em * var(--spatiering));
  line-height: 1.4;
  text-transform: var(--hoofdletters);
  white-space: nowrap;
  clip-path: var(--chip-vorm);
}

/* In de matrix en de legende: een teken met het symbool erin. Kleur én symbool, dus ook leesbaar in zwart-wit. */
.ruit {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--ruit-hoek);
  background: var(--s-vlak, var(--lijn));
  color: var(--s-tekst, var(--tekst));
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  vertical-align: middle;
  clip-path: var(--ruit-vorm);
}

.status-toekomst .ruit,
.ruit.status-toekomst {
  width: 1.125rem;
  height: 1.125rem;
}

/* ---------- Matrix ---------- */

.matrix .kamer-cel {
  min-width: 9rem;
  max-width: 13rem;
  font-size: 0.9375rem;
  white-space: normal;
}

.matrix tbody .kamer-cel {
  font-weight: 400;
}

.kamer-huurder {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.matrix .cel {
  min-width: 2.75rem;
  padding: 0.5rem 0.25rem;
  text-align: center;
}

.matrix thead .cel {
  font-size: 0.6875rem;
  letter-spacing: calc(0.12em * var(--spatiering));
  line-height: 1.2;
  text-align: center;
}

.matrix thead .cel small {
  display: block;
  font-family: var(--letter-tekst);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--zacht);
}

.matrix .cel.leeg::after {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 2px;
  background: var(--lijn);
  vertical-align: middle;
}

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem 1.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--zacht);
  font-family: var(--letter-label);
  font-size: 0.75rem;
  letter-spacing: calc(0.12em * var(--spatiering));
  text-transform: var(--hoofdletters);
}

.legende li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.jaarkeuze {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.25rem;
}

.jaarkeuze a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  letter-spacing: calc(0.12em * var(--spatiering));
}

.jaarkeuze strong {
  font-family: var(--letter-titel);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: calc(0.12em * var(--spatiering));
}

/* ---------- Startscherm: waarborgen, te verwerken en account ---------- */

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

.waarborgen li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--lijn);
}

.waarborgen li:first-child {
  padding-top: 0;
}

.waarborgen li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.waarborgen .wie {
  flex: 1;
  min-width: 0;
}

.meter {
  display: block;
  width: 100%;
  max-width: 14rem;
  height: 0.375rem;
  margin: 0.375rem 0 0.25rem;
  border-radius: var(--chip-hoek);
  background: var(--lijn);
  overflow: hidden;
}

.meter span {
  display: block;
  height: 100%;
  max-width: 100%;
  background: var(--accent);
}

.tekort {
  color: var(--fout);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.teller {
  display: flex;
  align-items: center;
  gap: 1.125rem;
}

.teller-ruit {
  display: grid;
  place-items: center;
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--teken-hoek);
  background: var(--teken-vlak);
  color: var(--teller-tekst);
  font-family: var(--letter-titel);
  font-size: 2rem;
  line-height: 1;
  clip-path: var(--teken-vorm);
}

.blok .teller p {
  margin: 0;
}

.account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rand);
}

.blok.account p {
  margin: 0;
}

/* Tabbladen binnen een onderdeel (bv. Betalingen): Overzicht, Te verwerken, Verrichtingen. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: -0.5rem 0 1.75rem;
}

.tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1.125rem;
  border: 1px solid var(--rand);
  border-radius: var(--hoek-knop);
  background: var(--vlak);
  color: var(--tekst);
  font-family: var(--letter-label);
  font-size: 0.8125rem;
  letter-spacing: calc(0.16em * var(--spatiering));
  text-decoration: none;
  text-transform: var(--hoofdletters);
}

.tabs a:hover {
  border-color: var(--tekst);
}

.tabs a[aria-current="page"] {
  border-color: var(--knop-vlak);
  background: var(--knop-vlak);
  color: var(--knop-tekst);
  box-shadow: var(--knop-rand);
}

/* De pagina Beheer: de onderdelen naast elkaar op een groot scherm. */
.beheer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.75rem;
  align-items: start;
  margin-bottom: 1.75rem;
}

.beheer > .blok {
  margin: 0;
}

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

.lijst li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--lijn);
}

.lijst li:last-child {
  border-bottom: 0;
}

/* De keuze van de skin: een keuzelijst en een knop naast elkaar. */
.skinkeuze {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.skinkeuze select {
  width: auto;
}

/* ---------- Huurder: totalen en waarborg als kleine medaillons ---------- */

.totalen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.875rem;
  margin: 0 0 0.875rem;
}

.totalen > div {
  padding: 0.875rem 1.25rem;
  border-radius: var(--hoek-medaillon);
  background: var(--medaillon-vlak);
  text-align: center;
  clip-path: var(--medaillon-vorm);
}

.totalen dt {
  color: var(--medaillon-label);
  font-family: var(--letter-label);
  font-size: 0.6875rem;
  letter-spacing: calc(0.3em * var(--spatiering));
  text-transform: var(--hoofdletters);
}

.totalen dd {
  margin: 0;
  color: var(--medaillon-getal);
  font-size: 1.375rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.totalen dd.negatief {
  color: var(--medaillon-alarmtekst);
}

.pagina-kop {
  margin-bottom: 1.75rem;
  text-align: center;
}

.pagina-kop h1 {
  margin-bottom: 0.375rem;
}

.pagina-kop p {
  margin: 0 0 0.375rem;
}

.terug {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  letter-spacing: calc(0.12em * var(--spatiering));
}

/* Het verificatierapport van de migratie: lange regels scrollen binnen het blok, zoals een tabel. */
.rapport {
  max-width: 100%;
  margin: 0 0 1rem;
  padding: 0.875rem;
  overflow-x: auto;
  border: 1px solid var(--rand);
  border-radius: var(--hoek-veld);
  background: var(--vlak);
  font-size: 0.8125rem;
}

/* ---------- Lijsten, fiches en formulieren (huurders, contracten, kamers, verrichtingen) ---------- */

/* Boven een lijst: zoeken links, de hoofdknop rechts. */
.werkbalk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
}

.zoekbalk {
  display: flex;
  flex: 1 1 22rem;
  gap: 0.5rem;
  max-width: 36rem;
}

.zoekbalk input {
  flex: 1;
  min-width: 0;
}

.tabs-klein a {
  min-height: 2.25rem;
  padding: 0.25rem 0.875rem;
  font-size: 0.75rem;
}

/* Gegevens op een fiche: label links, waarde rechts; onder elkaar op een gsm. */
.gegevens {
  margin: 0 0 0.5rem;
}

.gegevens > div {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 0.25rem 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--lijn);
}

.gegevens > div:last-child {
  border-bottom: 0;
}

.gegevens dt {
  color: var(--accent-tekst);
  font-family: var(--letter-label);
  font-size: 0.8125rem;
  letter-spacing: calc(0.12em * var(--spatiering));
  text-transform: var(--hoofdletters);
}

.gegevens dd {
  margin: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 30rem) {
  .gegevens > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Formulieren met veel velden: in kolommen die zich aanpassen aan de breedte. */
.velden {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0 1.25rem;
}

.velden .veld,
.formulier .veld {
  margin-bottom: 1.125rem;
}

.velden .veld > label:not(.vink),
.formulier .veld > label:not(.vink) {
  display: block;
  margin-bottom: 0.375rem;
}

.veld small {
  display: block;
  margin-top: 0.375rem;
  color: var(--zacht);
  font-size: 0.875rem;
}

.veld-breed {
  grid-column: 1 / -1;
}

.veld .vink {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  font-weight: 400;
}

.veld-fout input,
.veld-fout select,
.veld-fout textarea {
  border-color: var(--fout);
}

/* Bij onderverhuur verschijnt het hoofdcontract; anders is het veld overbodig. */
@supports selector(:has(a)) {
  .velden:not(:has(select[name="soort"] option[value="ONDERVERHUUR"]:checked)) .veld-hoofdcontract {
    display: none;
  }
}

.formulier-breed h2:first-of-type {
  margin-top: 0;
}

.groep {
  margin: 0 0 1.25rem;
  padding: 1rem 1.25rem 0.25rem;
  border: 1px solid var(--lijn);
  border-radius: var(--hoek-veld);
}

.groep legend {
  padding: 0 0.5rem;
  font-family: var(--letter-label);
  letter-spacing: calc(0.12em * var(--spatiering));
}

/* Een uitklapper voor een formulier dat je niet elke keer nodig hebt. */
.uitklap {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--lijn);
}

.uitklap > summary {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  color: var(--link);
  font-family: var(--letter-label);
  letter-spacing: calc(0.12em * var(--spatiering));
  text-decoration: underline;
  text-decoration-color: var(--link-lijn);
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.uitklap[open] > summary {
  margin-bottom: 0.75rem;
}

/* Een knop die eruitziet als een link, voor kleine acties zoals verwijderen. */
.knop-tekst,
.knop-tekst:hover {
  display: inline;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--fout);
  font-family: var(--letter-tekst);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
  text-decoration: underline;
  text-transform: none;
}

.acties {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  margin-left: 0.5rem;
}

.acties form {
  display: inline;
}

.documenten li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
}

/* Een kamer van een vorig contract (geen lopend contract). */
.kamers.vroeger .kamer-nr {
  opacity: 0.45;
}

.kamers .kamer-nr + .kamer-nr {
  margin-left: 0.25rem;
}

/* Kamers als kaartjes. */
.kaartjes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 1.75rem;
  margin-bottom: 1.75rem;
}

.kaartje {
  margin: 0;
}

.kaartje .gegevens > div {
  grid-template-columns: 5.5rem minmax(0, 1fr);
}

.kaartje-kop {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.kaartje-kop h2 {
  margin: 0;
}

.kaartje-kop h2::before,
.kaartje-kop h2::after {
  content: none;
}

.kamer-nr.groot {
  width: 3rem;
  height: 3rem;
  font-size: 1.375rem;
}

/* Huur per maand op de fiche van een contract: een regel per maand, open voor details. */
.maanden {
  margin: 0;
  padding: 0;
  list-style: none;
}

.maanden > li {
  border-bottom: 1px solid var(--lijn);
}

.maanden > li:last-child {
  border-bottom: 0;
}

.maanden-kop,
.maand > summary {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.5fr);
  align-items: center;
  gap: 0.5rem 1rem;
  min-height: 2.75rem;
  padding: 0.375rem 0;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  list-style: none;
}

.maanden-kop {
  border-bottom: 2px solid var(--tekst);
  color: var(--accent-tekst);
  font-family: var(--letter-label);
  font-size: 0.75rem;
  letter-spacing: calc(0.18em * var(--spatiering));
  text-transform: var(--hoofdletters);
}

.maanden-kop span:first-child {
  padding-left: 1.25rem;
}

.maanden-kop .getal {
  text-align: right;
}

.maand > summary::-webkit-details-marker {
  display: none;
}

.maand > summary .maand-naam::before {
  content: "▸";
  display: inline-block;
  width: 1.25rem;
  color: var(--accent);
  transition: transform 0.15s;
}

.maand[open] > summary .maand-naam::before {
  transform: rotate(90deg);
}

.maand > summary .getal {
  text-align: right;
}

.maand-inhoud {
  padding: 0.25rem 0 1rem 1.25rem;
}

.correcties {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.correctie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.correctie label {
  flex: 0 0 13rem;
}

.correctie input {
  width: auto;
  flex: 0 1 9rem;
}

.correctie input[name="notitie"] {
  flex: 1 1 14rem;
}

@media (max-width: 40rem) {
  .maanden-kop {
    display: none;
  }

  .maand > summary {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .maand > summary .getal:nth-of-type(3) {
    display: none;
  }

  .correctie label {
    flex-basis: 100%;
  }
}

.paginering {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0 0;
  font-size: 0.875rem;
}

.paginering a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* Statussen van huurders, terugkeer en verrichtingen, met de kleuren van de skin. */
.status-huurder-actief,
.status-terugkeer-1,
.status-categorie-huur { --s-vlak: var(--goed-vlak); --s-tekst: var(--goed); }
.status-huurder-vertrekt,
.status-terugkeer-0,
.status-categorie-nieuw { --s-vlak: var(--let-op-vlak); --s-tekst: var(--let-op-tekst); }
.status-huurder-vertrokken,
.status-terugkeer--1,
.status-categorie-overig { --s-vlak: var(--lijn); --s-tekst: var(--tekst); }
.status-categorie-waarborg { --s-vlak: var(--accent); --s-tekst: var(--tekst); }