/* Offerte-module — viewer + blokken-composer.
   Stijl volgt de gedeelde tokens (The Whitest Boy Alive): warm, rustig, geen
   decoratie. Twee kolommen: onderdelen links, de stapel rechts. */

.off-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--space-lg) var(--space-lg) var(--space-2xl);
}

.laad-scherm {
    padding: var(--space-2xl);
    text-align: center;
    color: var(--tekst-secundair);
}

/* --- Kop ------------------------------------------------------------------ */

.off-kop {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-lg);
}

.off-kop h1 {
    font-size: 1.55rem;
    font-weight: var(--font-weight-medium);
    margin: 0 0 2px;
    letter-spacing: -0.01em;
}

.off-kop .off-sub {
    color: var(--tekst-secundair);
    font-size: 0.9rem;
}

.off-totalen {
    display: flex;
    gap: var(--space-lg);
    text-align: right;
}

.off-totaal-blok .label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tekst-tertiair);
}

.off-totaal-blok .waarde {
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
}

.off-totaal-blok.groot .waarde { font-size: 1.5rem; }

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

.off-melding {
    border-left: 3px solid var(--border-sterk);
    background: var(--bg-kaart);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-sm);
    font-size: 0.88rem;
    border-radius: 0 var(--radius) var(--radius) 0;
}
.off-melding.fout    { border-color: var(--rood);   background: var(--rood-bg); }
.off-melding.letop   { border-color: var(--oranje); background: var(--oranje-bg); }
.off-melding.info    { border-color: var(--blauw);  background: var(--blauw-bg); }
.off-melding .bron   { color: var(--tekst-secundair); font-size: 0.8rem; }

.off-bevroren {
    border: 1px solid var(--border-sterk);
    background: var(--bg-sidebar);
    padding: var(--space-md);
    border-radius: var(--radius);
    margin-bottom: var(--space-lg);
}
.off-bevroren strong { display: block; margin-bottom: 4px; }

/* --- Twee kolommen -------------------------------------------------------- */

.off-kolommen {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--space-lg);
    align-items: start;
}

@media (max-width: 900px) {
    .off-kolommen { grid-template-columns: 1fr; }
}

.off-lijst {
    background: var(--bg-kaart);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    position: sticky;
    top: var(--space-md);
}

/* De tegel is een RIJ met twee knoppen: kiezen (het grote vlak) en
   verwijderen (het kruisje). Een knop in een knop is geen geldige HTML, dus
   staan ze naast elkaar in een flexrij die er als een tegel uitziet. */
.off-lijst-rij {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--border-licht);
}
.off-lijst-rij:hover  { background: var(--bg-hover); }
.off-lijst-rij.actief { background: var(--bg-actief); }

.off-lijst-item {
    display: block;
    flex: 1;
    min-width: 0;
    text-align: left;
    background: none;
    border: 0;
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    font: inherit;
    color: inherit;
}

/* Het kruisje blijft weg tot je met de muis op de tegel staat -- zo is het
   binnen handbereik zonder dat de lijst eruitziet als een rij weg-knoppen. */
.off-lijst-weg {
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: 0 var(--space-md);
    cursor: pointer;
    font: inherit;
    color: var(--tekst-tertiair);
    opacity: 0;
    transition: opacity 0.12s ease;
}
.off-lijst-rij:hover .off-lijst-weg,
.off-lijst-weg:focus-visible { opacity: 1; }
.off-lijst-weg:hover { color: var(--rood, #b3261e); }
.off-lijst-item .naam  { display: block; }
.off-lijst-item .meta  {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    font-size: 0.8rem;
    color: var(--tekst-secundair);
    font-variant-numeric: tabular-nums;
}
.off-lijst-item .join {
    font-size: 0.72rem;
    color: var(--tekst-tertiair);
}

.off-lijst-voet { padding: var(--space-sm); }

/* --- Onderdeel-paneel ----------------------------------------------------- */

.off-paneel {
    background: var(--bg-kaart);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-lg);
}

.off-veldrij {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

/* Uitlijning van een veldrij: zie de regels onder .off-veld.bool hieronder. */
.off-veld {
    display: flex;
    flex-direction: column;
}
.off-veld label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tekst-tertiair);
    margin-bottom: 3px;
}

.off-veld input[type="text"],
.off-veld input[type="number"],
.off-veld select,
.off-veld textarea {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    font: inherit;
    font-size: 0.9rem;
    color: var(--tekst);
}
.off-veld textarea { min-height: 60px; resize: vertical; }
/* Afgeleid veld: de server bepaalt het, de app toont het. Bewust niet als
   uitgegrijsd invoerveld — dat suggereert dat er iets te typen valt. */
.off-veld .off-vast {
    padding: 7px 0;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    color: var(--tekst);
}
.off-veld .hint { font-size: 0.75rem; color: var(--tekst-tertiair); margin-top: 2px; }
/* Een vinkje heeft geen label erboven, dus moet het handmatig op de hoogte van
   de invoervakken naast zich gezet worden. `align-self: start` is daarbij het
   halve werk: zonder dat rekt de cel mee met de hoogste buur en centreert het
   vinkje zich in die hele cel -- dan zakt het steeds een ander stuk weg,
   afhankelijk van hoe lang de hint van de buurman is. */
.off-veld.bool { display: flex; flex-direction: row; align-items: center;
                 align-self: start; gap: 8px; padding-top: 40px; }
.off-veld.bool label { flex: 0 1 auto; text-transform: none; letter-spacing: 0;
                       margin: 0; font-size: 0.88rem; color: var(--tekst); }

/* De invoervakken op een lijn zonder de labelhoogte te laten zwerven.

   Twee eerdere pogingen faalden. De flexkolom met een MEEGROEIEND label duwde
   juist het veld met de kortste hint het verst omlaag. En `subgrid` -- op zich
   het nette antwoord -- liet Chrome vastlopen in combinatie met de
   `auto-fit`-kolommen van .off-veldrij: de pagina bevroor bij het scrollen.

   Dus simpel: het label krijgt de hoogte van twee regels (bijna elk label hier
   is een of twee regels, en twee regels is de langste), en de hint wordt naar
   de onderkant van de cel geduwd. Daarmee staan de vakken op een lijn en
   hangen de hints netjes onderaan, zonder exotische layout-features. */
.off-veld > label {
    min-height: 2.1em;
    display: flex;
    align-items: flex-end;
}
.off-veld > .hint { margin-top: auto; padding-top: 2px; }

/* Een vinkje heeft geen label erboven; het handmatige inspringen (padding-top)
   zet hem op de hoogte van de invoervakken naast zich. */
.off-veld.bool > label { min-height: 0; display: inline; }

/* Velden die de hele breedte pakken staan alleen op hun regel en hebben dus
   niemand om mee uit te lijnen -- die houden hun eigen indeling. */
.off-veld.off-breed > label,
.off-veld.off-vakken > label { min-height: 0; display: block; }

/* Vakken-rijtjes in het Kast-blok: compacte tabel, één regel per vak.
   Smalle invoervelden — het gaat om vier getallen en twee keuzes naast elkaar,
   niet om een formulier per vak. */
.off-vaktabel { margin: var(--space-sm) 0; }
.off-vaktabel th { font-weight: 500; white-space: nowrap; }
.off-vaktabel td { padding: 2px 4px; vertical-align: middle; }
.off-vaktabel td.nr { white-space: nowrap; color: var(--tekst-zacht, #666); }
.off-vaktabel input,
.off-vaktabel select { width: 100%; min-width: 5.5rem; padding: 2px 4px; }
.off-vakken > label { display: block; margin-bottom: var(--space-xs, 4px); }

/* --- Blokken -------------------------------------------------------------- */

.off-blok {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: var(--space-md);
    overflow: hidden;
}

.off-blok-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    background: var(--bg-sidebar);
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
}
.off-blok-kop .titel { font-weight: var(--font-weight-medium); }
.off-blok-kop .ident {
    font-size: 0.85rem;
    color: var(--tekst-secundair);
}
.off-blok-kop .soort {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--tekst-tertiair);
}
.off-blok-kop .knoppen { display: flex; gap: 4px; }

/* Sleepgreep + de lijn die aangeeft waar het blok landt. */
.off-blok-kop .greep {
    color: var(--tekst-tertiair);
    cursor: grab;
    margin-right: 8px;
    user-select: none;
}
.off-blok-kop:active .greep { cursor: grabbing; }
.off-blok.sleept { opacity: 0.4; }
.off-blok.sleep-boven { box-shadow: inset 0 3px 0 0 var(--zwart); }
.off-blok.sleep-onder { box-shadow: inset 0 -3px 0 0 var(--zwart); }

/* Uitkomst-sectie: zelfde kop als voorheen, nu klikbaar om weg te klappen. */
.off-uitklap > summary.off-sectiekop { cursor: pointer; list-style: none; }
.off-uitklap > summary.off-sectiekop::-webkit-details-marker { display: none; }
.off-uitklap > summary.off-sectiekop::before { content: '▾ '; }
.off-uitklap:not([open]) > summary.off-sectiekop::before { content: '▸ '; }
.off-blok-body { padding: var(--space-md); border-top: 1px solid var(--border-licht); }

.off-blok-uitkomst {
    font-size: 0.82rem;
    color: var(--tekst-secundair);
    font-variant-numeric: tabular-nums;
}

.off-toevoegen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
    padding-top: var(--space-md);
    border-top: 1px dashed var(--border);
}
.off-toevoegen .groep {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--tekst-tertiair);
    margin-bottom: 3px;
}
/* Een keuzelijst per groep: de groepsnaam als label erboven, de lijst
   eronder. Even breed, zodat de rij niet gaat rafelen. */
.off-kiezer {
    display: flex;
    flex-direction: column;
    min-width: 150px;
}
.off-kiezer select {
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    font: inherit;
    font-size: 0.85rem;
    color: var(--tekst);
    cursor: pointer;
}

/* Dichtgeklapte meldingen. Waarschuwingen en uitleg hoeven niet permanent in
   beeld, maar de TELLING wel: verbergen mag, stil verbergen niet. */
.off-meldingstrip {
    margin: var(--space-sm) 0;
}
.off-meldingstrip > summary {
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--tekst-tertiair);
    user-select: none;
    padding: 2px 0;
}
.off-meldingstrip > summary:hover { color: var(--tekst-secundair); }
.off-meldingstrip-body { margin-top: var(--space-xs, 4px); }

/* --- Regeltabellen -------------------------------------------------------- */

.off-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-top: var(--space-sm);
}
.off-tabel th {
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tekst-tertiair);
    border-bottom: 1px solid var(--border);
    padding: 4px 8px 4px 0;
    font-weight: var(--font-weight-normaal);
}
.off-tabel td {
    padding: 4px 8px 4px 0;
    border-bottom: 1px solid var(--border-licht);
    vertical-align: top;
}
.off-tabel td.num, .off-tabel th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.off-kasten { max-width: 480px; }
.off-tabel .canon { color: var(--tekst-tertiair); font-size: 0.75rem; }
.off-tabel tfoot td { font-weight: var(--font-weight-medium); border-bottom: 0; }

.off-sectiekop {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tekst-tertiair);
    margin: var(--space-lg) 0 0;
}

/* --- Balk onderaan -------------------------------------------------------- */

.off-balk {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    background: var(--bg);
    border-top: 1px solid var(--border);
    padding: var(--space-md) 0;
    margin-top: var(--space-lg);
}
.off-balk .status { font-size: 0.85rem; color: var(--tekst-secundair); }
.off-balk .knoppen { display: flex; gap: var(--space-sm); }

/* --- Projectlijst --------------------------------------------------------- */

.off-projecten { display: grid; gap: var(--space-sm); }
.off-project {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    background: var(--bg-kaart);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-sm) var(--space-md);
    color: inherit;
    text-decoration: none;
}
.off-project:hover { background: var(--bg-hover); }
.off-project .code { font-weight: var(--font-weight-medium); min-width: 90px; }
.off-project .meta { color: var(--tekst-secundair); font-size: 0.85rem; }

/* Overige opties: de override-helft van een blokformulier. Ingeklapt tenzij er
   werkelijk iets afwijkt van de onderdeelkop (zie blokFormulier). De driehoek is
   de NATIVE details-marker, net als bij .off-paneel — een eigen ::before met
   CSS-escapes leverde alleen maar losse tekens op het scherm. */
.off-geavanceerd {
    margin-top: var(--space-md);
    border-top: 1px solid var(--border-subtle, #e5e2dd);
    padding-top: var(--space-sm);
}
.off-geavanceerd > summary {
    cursor: pointer;
    font-size: var(--font-size-sm, 0.85rem);
    color: var(--text-muted, #77716a);
    user-select: none;
}
.off-geavanceerd > summary:hover { color: var(--text-primary, #2b2926); }
.off-geavanceerd > summary .badge { margin-left: var(--space-xs, 4px); }