/* ══════════════════════════════════════════════════════════════════════════════
   onboarding-form.css — de invulrijen van het aanmeldformulier

   Gedeeld door twee plekken die hetzelfde formulier tonen:
     • onboarding.php          — het aanmeldformulier op de website
     • het aanvulvenster in portal.php (#onbpOverlay, js/portal/aanvullen.js)

   Deze regels stonden eerder twee keer, in css/onboarding.css en nog eens met
   een #onbpOverlay-voorvoegsel in css/portal.css. Daardoor werd een fout maar
   op één plek gerepareerd. Wijzig ze hier, dan lopen beide mee.

   LET OP: dit bestand wordt door beide pagina's geladen en mag daarom alleen
   leunen op de --onb-* variabelen, die in css/onboarding.css én css/portal.css
   staan. Niet op --font-h / --font-b: die bestaan alleen in het portaal.
   Lettertypen dus voluit, en geen Poppins 400 — het portaal laadt die niet.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Basisvelden ────────────────────────────────────────────────────────────── */
.onb-input, .onb-select, .onb-textarea {
  border: 1.5px solid var(--onb-border);
  border-radius: 9px;
  padding: 10px 14px;
  font-size: .9rem;
  font-family: 'Inter', sans-serif;
  color: var(--onb-text);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.onb-input:focus, .onb-select:focus, .onb-textarea:focus {
  outline: none;
  border-color: var(--onb-green);
  box-shadow: 0 0 0 3px rgba(44,74,62,.1);
}
.onb-input.error { border-color: #c0392b; }

/* ── Rijenlijst ─────────────────────────────────────────────────────────────── */
.onb-dyn-list  { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.onb-dyn-row   { display: grid; grid-template-columns: 1fr 140px 36px; gap: 8px; align-items: center; }
.onb-dyn-row.three-col { grid-template-columns: 1fr 130px 130px 36px; }
.onb-dyn-row input { margin: 0; }

/* Op breed scherm bestaan de omhullers niet: display:contents haalt ze uit de
   boom, zodat de velden zelf de rasterkolommen vullen. Zo houdt de bestaande
   tabelweergave exact dezelfde vier kolommen als voorheen. */
.onb-amount { display: contents; }
.onb-amount-prefix,
.onb-amount-suffix,
.onb-pill { display: none; }

.onb-dyn-del {
  width: 36px; height: 36px; border-radius: 8px;
  border: 1.5px solid #e0e0e0; background: transparent;
  color: #c0392b; cursor: pointer; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
}
.onb-dyn-del:hover { background: #fef0f0; border-color: #c0392b; }

.onb-dyn-add {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1.5px dashed var(--onb-border);
  color: var(--onb-green); font-size: .85rem; font-weight: 600;
  padding: 8px 14px; border-radius: 9px; cursor: pointer;
  width: 100%; justify-content: center;
  transition: border-color .15s, background .15s;
}
.onb-dyn-add:hover { border-color: var(--onb-green); background: var(--onb-green-l); }

.onb-dyn-header { display: grid; grid-template-columns: 1fr 140px 36px; gap: 8px; margin-bottom: 4px; }
.onb-dyn-header.three-col { grid-template-columns: 1fr 130px 130px 36px; }
.onb-dyn-header span {
  font-size: .72rem; font-weight: 700; color: var(--onb-muted);
  letter-spacing: .04em; text-transform: uppercase; padding-left: 4px;
}

/* ── Totaalbalk ─────────────────────────────────────────────────────────────── */
.onb-total-bar {
  background: var(--onb-green-l);
  border: 1.5px solid var(--onb-border);
  border-radius: var(--onb-radius);
  padding: 14px 18px;
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px;
}
.onb-total-label  { font-size: .85rem; font-weight: 600; color: var(--onb-muted); }
.onb-total-amount { font-family: 'Poppins', sans-serif; font-size: 1.1rem; font-weight: 800; color: var(--onb-green); }

/* ══════════════════════════════════════════════════════════════════════════════
   Mobiel: elke rij wordt een kaartje
   ──────────────────────────────────────────────────────────────────────────────
   In de tabelweergave staat alles op één regel. Dat past niet op een telefoon:
   de omschrijving werd tot 141px geknepen, het bedrag tot 36px, en bij
   reserveringen was het jaarveld zelfs verborgen — juist het enige veld dat de
   klant daar mag invullen. Een reservering opvoeren kon dus niet op mobiel.

   Nu krijgt elke rij twee regels: omschrijving met de verwijderknop erboven,
   de bedragen eronder. Dat gebeurt met grid-template-areas en niet met extra
   omhullers, zodat de volgorde in de HTML gelijk blijft aan die op desktop.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* De kolomkop hoort bij de tabelweergave. Op mobiel draagt elke rij zijn
     eigen labels ("per jaar", "P/MND"), en de kop paste toch al niet: 420px
     aan kolommen in een doos van 303px. */
  .onb-dyn-header { display: none; }

  .onb-dyn-list { gap: 12px; }

  /* .three-col moet erbij: die selector staat hierboven buiten de media query
     en weegt zwaarder dan een kale .onb-dyn-row, dus anders blijven de vier
     tabelkolommen staan en wordt de omschrijving tot enkele pixels geknepen. */
  .onb-dyn-row,
  .onb-dyn-row.three-col {
    position: relative;
    background: #fff;
    border: 1.5px solid var(--onb-border);
    border-radius: var(--onb-radius);
    padding: 12px 14px 14px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 8px;
    align-items: center;
  }

  /* De verwijderknop staat absoluut rechtsboven. Dat is niet alleen de vorm uit
     het ontwerp: zolang hij een rastercel bezet, delen regel 1 en regel 2
     dezelfde kolombreedtes. De pil van 106px zou de omschrijving dan tot 159px
     knijpen — precies de krapte die we wilden oplossen. */
  .onb-dyn-row .onb-dyn-del {
    position: absolute;
    top: 10px; right: 10px;
    width: 32px; height: 32px;
  }

  /* Vaste lasten en budgetten: omschrijving + één bedrag. */
  .onb-dyn-row {
    grid-template-areas:
      "label  label"
      "bedrag bedrag";
  }
  /* Reserveringen: het jaarbedrag is invulbaar, het maandbedrag is de uitkomst. */
  .onb-dyn-row.three-col.is-reserv {
    grid-template-areas:
      "label label"
      "jaar  mnd";
  }
  /* Doelen: bedrag en streefdatum elk op een eigen regel — een datumveld naast
     een bedrag wordt op deze breedte onleesbaar smal. */
  .onb-dyn-row.three-col.is-goal {
    grid-template-areas:
      "label  label"
      "bedrag bedrag"
      "datum  datum";
  }

  .onb-dyn-row .dyn-label { grid-area: label; }
  .onb-dyn-row .dyn-datum { grid-area: datum; }

  /* De omschrijving leest als kop, niet als invulveld — maar blijft bewerkbaar,
     want met "+ Rij toevoegen" typt de klant een eigen omschrijving. De rand is
     doorzichtig in plaats van weg, zodat de tekst bij focus niet verspringt. */
  .onb-dyn-row .dyn-label {
    border-color: transparent;
    background: transparent;
    font-family: 'Poppins', sans-serif;
    font-size: .95rem; font-weight: 700;
    color: var(--onb-text);
    /* De padding is in beide standen gelijk: verandert alleen de kleur van rand
       en achtergrond, dan blijft de tekst staan waar hij staat. Wijzigde de
       padding bij focus, dan sprong de tekst zichtbaar opzij op het moment dat
       je het veld aantikte.
       10px links laat de omschrijving bovendien uitlijnen met het bedrag
       eronder: .onb-amount heeft dezelfde binnenmarge.
       42px rechts houdt de verwijderknop vrij. Alleen dit veld wijkt daarvoor —
       zou de hele kaart dat doen, dan verliest ook de bedragregel die ruimte. */
    padding-left: 10px;
    padding-right: 42px;
  }
  .onb-dyn-row .dyn-label:focus {
    border-color: var(--onb-green);
    background: #fff;
  }
  .onb-dyn-row .dyn-label::placeholder { font-weight: 600; color: var(--onb-muted); }

  /* Bedragveld: rand om de hele groep, met het euroteken en de eenheid erin. */
  .onb-amount {
    display: flex; align-items: center; gap: 5px;
    border: 1.5px solid var(--onb-border);
    border-radius: 10px;
    background: #fff;
    padding: 0 10px;
    min-width: 0;
  }
  .onb-amount:focus-within {
    border-color: var(--onb-text);
    box-shadow: 0 0 0 3px rgba(44,74,62,.08);
  }
  .onb-amount .onb-input {
    border: none; box-shadow: none; background: none;
    padding: 11px 0; width: 100%; min-width: 0;
    font-weight: 600;
  }
  .onb-amount .onb-input:focus { box-shadow: none; }
  .onb-amount-prefix, .onb-amount-suffix {
    display: block; flex-shrink: 0;
    font-size: .8rem; color: var(--onb-muted);
  }
  .onb-amount-prefix { font-weight: 600; color: var(--onb-text); }

  /* Welke cel het bedragveld pakt hangt af van het soort rij. */
  .onb-dyn-row .onb-amount                     { grid-area: bedrag; }
  .onb-dyn-row.three-col.is-reserv .onb-amount { grid-area: jaar; }

  /* Het omgerekende maandbedrag: een pil, geen veld — je kunt er niet in typen.
     Het echte readonly-veld blijft in de HTML staan (verborgen) omdat de
     totaaltelling en het opslaan daaruit lezen. */
  .onb-dyn-row.three-col.is-reserv .dyn-bedrag { display: none; }
  .onb-pill {
    grid-area: mnd;
    display: inline-flex; align-items: baseline; gap: 5px;
    background: var(--onb-green-l);
    border-radius: 10px;
    padding: 10px;
    white-space: nowrap;
  }
  .onb-pill-label {
    font-size: .58rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--onb-muted);
  }
  .onb-pill-value {
    font-family: 'Poppins', sans-serif;
    font-size: .9rem; font-weight: 700; color: var(--onb-green);
  }

  /* Het jaarveld werd hier verborgen; dat is precies wat het invullen
     onmogelijk maakte. Het staat nu weer aan. */
  .onb-dyn-row.three-col .onb-dyn-year { display: block; }

  /* iOS zoomt in zodra je een veld met tekst kleiner dan 16px aantikt, en die
     zoom maakt de pagina breder dan het venster. */
  .onb-input, .onb-select, .onb-textarea { font-size: 16px; }
  .onb-amount .onb-input { font-size: 16px; }
}

/* Op de smalste toestellen passen het invoerveld en de pil niet naast elkaar:
   de pil houdt ongeveer 100px vast, waardoor er voor het bedrag zelf nog geen
   20px overbleef en het getal werd afgekapt. Dan liever onder elkaar. */
@media (max-width: 360px) {
  .onb-dyn-row.three-col.is-reserv {
    grid-template-areas:
      "label label"
      "jaar  jaar"
      "mnd   mnd";
  }
  .onb-pill { justify-content: space-between; }
}