/* =========================================================================
   27 Moments portaal, stijlen voor de module budget
   Eigen bestand per module zodat parallelle wijzigingen elkaar niet raken.

   De bouwstenen (.kaart, .veld, .voortgang, .tabelhoes, .leeg) komen uit
   portaal.css; hier staat alleen wat eigen is aan het budget: de cijferrij
   bovenaan met het inline aanpasbare totaal, de ene voortgangsbalk, de
   compacte postentabel met haar groepskoppen, de bewerkbare cellen en het
   uitklapbare vergelijkingsblok.

   De leidraad is compact: één kaart met de getallen, één tabel met de
   posten, en alle uitleg achter een uitklapper. Vandaar de strakke maten
   hieronder; ze zijn bewust kleiner dan de standaard van portaal.css.
   ========================================================================= */

/* ====================== De kaart bovenaan ============================== */

/* Titel links, knop rechts. Dezelfde rij gebruiken we boven de postenlijst,
   zodat de twee kaarten dezelfde kop hebben. */
.bud-kop-rij {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 14px;
}

.bud-kop-rij h3 { margin: 0; }
.bud-kop-rij .m27-btn { margin-left: auto; }

/* De vier getallen naast elkaar. Op een smal scherm vallen ze vanzelf in
   twee kolommen: nog altijd één blok, geen vier losse kaarten. */
.bud-cijfers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 12px 18px;
  align-items: end;
  margin-bottom: 16px;
}

.bud-cijfer { min-width: 0; }

.bud-cijfer__label {
  display: block;
  font-size: 11.5px;
  letter-spacing: var(--m27-ls-label);
  text-transform: uppercase;
  color: #8a857e;
  margin-bottom: 4px;
}

/* De maat krimpt mee op een smal scherm. Een bedrag mag nooit afgekapt
   worden: "€ 100.00…" leest als een ander getal dan het is.

   De opvulling is er alleen om op dezelfde grondlijn te landen als het
   invoerveld van het totaalbudget: 2px opvulling plus 1.5px rand. Zonder haar
   zweefde dat ene bedrag een paar pixels ten opzichte van de andere drie,
   want .bud-cijfers zet de onderkanten gelijk. Geen horizontale opvulling,
   anders schuiven de eurotekens uit elkaar. */
.bud-cijfer strong {
  display: block;
  font-family: var(--m27-font-titel);
  font-weight: 400;
  font-size: clamp(17px, 4.4vw, 21px);
  line-height: 1.15;
  padding: 3.5px 0;
  color: var(--m27-donkergroen);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Boven het budget: hetzelfde roodbruin als de balk, zodat het getal en de
   balk hetzelfde zeggen. */
.bud-cijfer--over strong { color: #a4432f; }

/* Het totaal pas je hier ter plekke aan. Het veld ziet er in rust uit als
   de andere drie getallen; pas als je erover gaat of erin klikt, verschijnt
   de omranding. Zo staat er geen formulier in het overzicht, maar is het
   wel meteen duidelijk dat je eraan kan. */
.bud-totaalveld {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--m27-font-titel);
  font-size: clamp(17px, 4.4vw, 21px);
  color: var(--m27-donkergroen);
}

.bud-totaalveld input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  font: inherit;
  color: inherit;
  padding: 2px 6px;
  margin-left: -2px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: transparent;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.bud-totaalveld input::placeholder {
  font-family: var(--m27-font-tekst);
  font-size: 14px;
  color: #b3aea6;
}

.bud-totaalveld input:hover { border-color: #dad5cd; background: #fff; }

.bud-totaalveld input:focus {
  outline: none;
  border-color: var(--m27-paars);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(194, 177, 215, 0.5);
}

.bud-totaalveld input:disabled { opacity: 0.55; }

/* ------------------------- De ene voortgangsbalk ----------------------- */
/* Twee lagen in één balk: de lila vulling is wat jullie raamden, de
   donkergroene daarbovenop wat er echt al vastligt. Boven het budget wordt
   de raming waarschuwend roodbruin: vol is vol. */

.bud-balk {
  position: relative;
  height: 12px;
}

/* Twee klassen diep, want portaal.css kleurt .voortgang span donkergroen en
   dat weegt zwaarder dan één losse klasse. */
.bud-balk .bud-vul--geraamd { background: var(--m27-lila); }

.bud-balk .bud-vul--werkelijk {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--m27-donkergroen);
}

.bud-balk--over .bud-vul--geraamd { background: #a4432f; }

.bud-balklegende {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 8px 0 0;
  font-size: 12px;
  color: #8a857e;
}

.bud-balklegende span { display: inline-flex; align-items: center; gap: 6px; }

.bud-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}

.bud-dot--geraamd,
.bud-dot--vlaams { background: var(--m27-lila); }

.bud-dot--werkelijk,
.bud-dot--eigen { background: var(--m27-donkergroen); }

.bud-hint {
  margin: 0;
  font-size: 12.5px;
  color: #8a857e;
}

.bud-waarschuwing {
  font-size: 13px;
  color: #8a6d2f;
  background: #f8f2e2;
  border: 1px solid #ecdcb8;
  border-radius: 10px;
  padding: 9px 12px;
  margin: 12px 0 0;
}

/* ====================== De postenlijst ================================= */
/* Eén tabel voor alle categorieën. Vroeger was elke categorie een eigen
   kaart; acht omlijstingen onder elkaar tonen niet meer dan één lijst, ze
   duwen de cijfers alleen maar van het scherm. */

.bud-tabelhoes th,
.bud-tabelhoes td { padding: 8px 9px; }

.bud-th-getal { text-align: right; }

.bud-postnaam { font-weight: 400; }

/* De categorie in de rij zelf, in het stille grijs van de notitie: de
   groepskop erboven blijft de kop, deze cel is de knop om te verhuizen. */
.bud-postcat { color: #6b665f; }

/* Bedragen rechts uitgelijnd, dan lezen ze als een rekening. */
.bud-cel--getal { text-align: right; white-space: nowrap; }

.bud-notitie {
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #6b665f;
}

.bud-verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------- De groepskoppen --------------------------- */
/* Een gewone tabelrij met één cel over de volle breedte, in de cremekleur.
   Zo blijven de bedragen in dezelfde kolommen staan en lees je de hele
   lijst als één rekening. */

.bud-groep td {
  background: var(--m27-creme);
  padding: 7px 9px;
}

.bud-tabelhoes tbody tr.bud-groep:hover td { background: var(--m27-creme); }

.bud-groep-rij {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
}

.bud-groep-naam {
  font-size: 12px;
  letter-spacing: var(--m27-ls-label);
  text-transform: uppercase;
  color: var(--m27-paars);
}

.bud-groep-som {
  margin-left: auto;
  font-size: 12.5px;
  color: #6b665f;
  white-space: nowrap;
}

/* Een categorie zonder posten blijft staan als één stille regel: zo zie je
   waar nog niets voor voorzien is, zonder een lege kaart die plaats vreet. */
.bud-groep--leeg td { background: transparent; }
.bud-tabelhoes tbody tr.bud-groep--leeg:hover td { background: transparent; }
.bud-groep--leeg .bud-groep-naam { color: #a9a49c; }

.bud-groep-stil {
  margin-left: auto;
  font-size: 12px;
  color: #b3aea6;
  white-space: nowrap;
}

.bud-plus {
  flex: none;
  border: 1.5px solid #e4dfd7;
  border-radius: var(--m27-radius-pill);
  background: #fff;
  color: var(--m27-paars);
  font: inherit;
  font-size: 11.5px;
  letter-spacing: var(--m27-ls-label);
  text-transform: uppercase;
  padding: 5px 12px;
  cursor: pointer;
}

.bud-plus:hover { border-color: var(--m27-lila); background: rgba(194, 177, 215, 0.12); }
.bud-plus:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 2px; }

/* ================ Rechtstreeks bewerkbare cellen ======================= */
/* Zelfde patroon als de gastenlijst (gl-cel), met een eigen naam zodat de
   twee modules elkaars stijl nooit per ongeluk meeslepen. */

.bud-cel { cursor: text; border-radius: 8px; position: relative; }
.bud-cel:hover { background: rgba(194, 177, 215, 0.14); }
.bud-cel:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: -3px; }
.bud-cel--leeg { color: #b3aea6; }

.bud-cel input {
  width: 100%;
  min-width: 70px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 300;
  color: var(--m27-tekst);
  padding: 6px 8px;
  border: 1.5px solid var(--m27-paars);
  border-radius: 8px;
  background: #fff;
}

/* De categoriecel wordt een keuzelijst: zelfde omlijsting als de
   invoervelden, zodat de rij niet verspringt terwijl je kiest. */
.bud-cel select {
  width: 100%;
  font: inherit;
  font-size: 13.5px;
  font-weight: 300;
  color: var(--m27-tekst);
  padding: 6px 8px;
  border: 1.5px solid var(--m27-paars);
  border-radius: 8px;
  background: #fff;
}

.bud-cel--getal input { text-align: right; }

.bud-cel input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(194, 177, 215, 0.5);
}

@keyframes bud-bewaard {
  from { background: var(--m27-lichtgroen); }
  to { background: transparent; }
}

.bud-cel--bewaard { animation: bud-bewaard 1.1s ease; }

/* Zolang de server nog niet geantwoord heeft, staat de cel er lichtjes
   doorzichtig bij. Niets is bevestigd tot de belofte rond is. */
.bud-cel--wacht { opacity: 0.55; }

/* ------------------------------ Betaald -------------------------------- */

.bud-betaald {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: #8a857e;
  cursor: pointer;
  white-space: nowrap;
}

.bud-betaald input {
  accent-color: var(--m27-donkergroen);
  width: 16px;
  height: 16px;
}

.bud-betaald input:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 2px; }

/* In de tabel zegt de kolomkop al "Betaald", dus daar volstaat het vinkje;
   dat scheelt een kolom breedte. Het vinkje draagt zijn eigen aria-label,
   dus wie met een schermlezer werkt hoort nog altijd om welke post het gaat.
   Op telefoon zetten we de tekst terug (zie onderaan): daar is er plaats en
   wordt het tikdoel er groter van. */
.bud-betaald-cel .bud-betaald span { display: none; }

.bud-betaald--modal {
  font-size: 14.5px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--m27-tekst);
}

/* ------------------------------- Acties -------------------------------- */

.bud-acties-cel { text-align: right; white-space: nowrap; }

.bud-ikoon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 1.5px solid #e4dfd7;
  border-radius: 10px;
  background: #fff;
  color: var(--m27-paars);
  cursor: pointer;
  padding: 0;
}

.bud-ikoon svg { width: 16px; height: 16px; }
.bud-ikoon:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 2px; }

/* In rust blijft de prullenbak paars zoals elke andere icoonknop, want dertig
   rode iconen onder elkaar maken de lijst alarmerend. Zodra je erover gaat of
   erin landt, wordt hij rood: dan gaat het wel over iets onomkeerbaars. */
.bud-ikoon:hover,
.bud-ikoon:focus-visible {
  color: var(--m27-rood);
  border-color: var(--m27-rood);
  background: #f9efec;
}

.bud-modal-fout {
  color: #a4432f;
  font-size: 13.5px;
}

/* ================= De vergelijking, uitklapbaar ======================== */
/* In rust één regel hoog. De vergelijking met Vlaanderen is boeiend, maar
   het is uitleg: die hoort niet permanent boven de cijfers te staan. */

.bud-verdeling { padding: 0; }

.bud-verdeling summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: var(--m27-radius-kaart);
}

.bud-verdeling summary::-webkit-details-marker { display: none; }
.bud-verdeling summary:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 2px; }

/* Zelfde maat als de uitklapper in de gastenlijst, zodat de twee modules
   dezelfde kop hebben. */
.bud-verdeling summary h3 { margin: 0; font-size: 16px; }

.bud-verd-pijl {
  display: inline-flex;
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--m27-paars);
  transition: transform 0.18s ease;
}

.bud-verd-pijl svg { width: 16px; height: 16px; }
.bud-verdeling[open] .bud-verd-pijl { transform: rotate(90deg); }

.bud-verd-inhoud { padding: 0 18px 18px; }

.bud-verd-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 12px;
  font-size: 12.5px;
  color: #6b665f;
}

.bud-verd-legende span { display: inline-flex; align-items: center; gap: 7px; }

.bud-verd-rij {
  padding: 9px 0;
  border-bottom: 1px solid #efece6;
}

.bud-verd-rij:last-of-type { border-bottom: 0; }

.bud-verd-naam {
  font-size: 13.5px;
  color: var(--m27-tekst);
  margin-bottom: 5px;
}

.bud-verd-balken {
  display: grid;
  gap: 4px;
}

.bud-verd-balk {
  height: 8px;
  border-radius: var(--m27-radius-pill);
  background: #ece8e0;
  overflow: hidden;
}

.bud-verd-vul {
  display: block;
  height: 100%;
  border-radius: var(--m27-radius-pill);
  transition: width 0.4s ease;
}

.bud-verd-vul--eigen { background: var(--m27-donkergroen); }
.bud-verd-vul--vlaams { background: var(--m27-lila); }

.bud-verd-cijfers {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  font-size: 11.5px;
  color: #8a857e;
}

.bud-voetnoot {
  margin-top: 14px;
  font-size: 12.5px;
  color: #8a857e;
}

/* ================ Telefoon: dezelfde rijen als kaartjes ================= */
/* Zelfde afspraak als de gastenlijst: de thead verdwijnt, elke postrij
   wordt een kaartje en elke cel toont haar label via data-label. Zo kan er
   op telefoon nooit een kolom ontbreken. De groepskoppen blijven wel
   gewone strookjes: het zijn koppen, geen kaartjes. */

/* De kolom Categorie is op een groot scherm nuttig: je verhuist een post naar
   een andere categorie zonder het venster te openen. Op telefoon is ze puur
   herhaling, want de groepskop staat direct boven de kaartjes van diezelfde
   categorie, en de standaard zegt: zeg niets twee keer op één scherm. Bewerken
   blijft daar via het potlood. */
@media (max-width: 768px) {
  .bud-tabelhoes td[data-veld="categorie"] { display: none; }

  .bud-kop-rij .m27-btn { margin-left: 0; }
  .bud-cijfers { gap: 10px 14px; }

  .bud-tabelhoes { overflow: visible; }

  .bud-tabelhoes table,
  .bud-tabelhoes tbody,
  .bud-tabelhoes tr,
  .bud-tabelhoes td { display: block; width: auto; }

  .bud-tabelhoes thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .bud-tabelhoes tbody tr {
    background: #fff;
    border: 1px solid #efece6;
    border-radius: var(--m27-radius-kaart);
    padding: 12px 14px;
    margin-bottom: 10px;
  }

  .bud-tabelhoes tbody tr:hover td { background: none; }

  .bud-tabelhoes td {
    border-bottom: 1px solid #f4f1ec;
    padding: 9px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
  }

  .bud-tabelhoes td:last-child { border-bottom: 0; }

  .bud-tabelhoes td::before {
    content: attr(data-label);
    flex: none;
    width: 92px;
    font-size: 10.5px;
    letter-spacing: var(--m27-ls-label);
    text-transform: uppercase;
    color: #8a857e;
  }

  .bud-tabelhoes td > * { flex: 1 1 auto; min-width: 0; }

  .bud-cel--getal { text-align: left; }
  .bud-cel--getal input { text-align: left; }
  .bud-notitie { max-width: none; }

  /* De naam is de kop van het kaartje. */
  .bud-tabelhoes td[data-veld="naam"] { padding-top: 0; font-size: 16px; }
  .bud-tabelhoes td[data-veld="naam"]::before { display: none; }

  /* Hier is wel plaats voor het woordje bij het vinkje, en het tikdoel
     wordt er meteen een stuk groter van. */
  .bud-betaald-cel .bud-betaald span { display: inline; }
  .bud-betaald-cel .bud-betaald { padding: 4px 0; }

  .bud-acties-cel { text-align: left; }
  .bud-acties-cel::before { display: none; }
  /* Een duim heeft 44px nodig; hierboven stond 38. */
  .bud-ikoon { width: 44px; height: 44px; }

  /* De groepskop is geen kaartje maar een strookje boven de kaartjes. */
  .bud-tabelhoes tbody tr.bud-groep {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 16px 0 8px;
  }

  .bud-tabelhoes tbody tr.bud-groep:first-child { margin-top: 4px; }

  .bud-tabelhoes tr.bud-groep td {
    background: transparent;
    border-bottom: 1px solid #e4dfd7;
    padding: 0 0 6px;
    display: block;
    min-height: 0;
  }

  .bud-tabelhoes tr.bud-groep td::before { display: none; }
  .bud-tabelhoes tr.bud-groep td > * { flex: none; }

  /* Het pilletje in de groepskop is op telefoon een echt tikdoel: 36px was te
     krap voor een duim. */
  .bud-plus { padding: 8px 14px; min-height: 44px; }
}