/* =====================================================================
   offertes.css — Commercie › Offertes. Alleen module-eigen stijlen;
   gedeelde patronen (lijst, poort, audit, woning, modaal, knoppen)
   staan in bouwstenen.css (fase 0). Geen blauw, schaduw of gradient.
===================================================================== */

.off { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }

.off-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.off-kop h1 { margin: 4px 0 0; font-size: 1.55rem; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
.off-versie { font-size: .8rem; color: var(--c-ink-3); font-weight: 700; }
.off-terug { background: transparent; border: 0; cursor: pointer; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em; color: var(--c-ink-3); text-transform: uppercase; padding: 0 0 6px; }
.off-terug:hover { color: var(--c-ink); }

/* Lijstkaart: kolommen van het offertes-overzicht (prototype-grid) */
.off-lijstkaart { padding: 0; overflow: hidden; --bs-kolommen: 26px 132px 92px 1.1fr 1.2fr 1.2fr .8fr .7fr .9fr; }

/* ---------- Editor-grid ---------- */
.off-grid { display: grid; grid-template-columns: 1fr 360px; gap: 22px; align-items: start; }
@media (max-width: 900px) { .off-grid { grid-template-columns: 1fr; } }

.off-config { display: flex; flex-direction: column; gap: 20px; }
.off-sectie__kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.off-grens { color: var(--c-ink-3); font-size: .68rem; }
.off-toeslag { color: var(--c-amber); font-size: .74rem; font-weight: 700; }

/* Maatregel-regels */
.off-regels { display: flex; flex-direction: column; gap: 10px; }
.off-regel { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 14px 16px; transition: border-color var(--overgang); }
.off-regel:hover { border-color: var(--c-lijn-2); }
.off-regel__hoofd { display: flex; align-items: flex-start; justify-content: space-between; }
.off-regel__naam { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.off-regel__titel { font-weight: 800; font-size: .92rem; }
.off-regel__meld { font-size: .62rem; color: var(--c-ink-3); }
.off-regel__weg { background: transparent; border: 0; cursor: pointer; color: var(--c-ink-3); font-size: .8rem; padding: 2px 6px; border-radius: 6px; }
.off-regel__weg:hover { color: var(--c-rood); background: var(--c-rood-t); }
.off-regel__body { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-top: 12px; flex-wrap: wrap; }
.off-regel__meta { display: flex; align-items: flex-end; gap: 18px; margin-left: auto; }
.off-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.off-btw { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .04em; color: var(--c-ink-2); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-pill); padding: 2px 8px; }
.off-regel__prijs { text-align: right; display: flex; flex-direction: column; }
.off-regel__excl { font-size: .62rem; color: var(--c-ink-3); }
.off-regel__totaal { font-size: 1rem; font-weight: 800; }

/* Velden */
.off-veld { display: flex; flex-direction: column; gap: 5px; }
.off-veld--breed { width: 100%; }
.off-veld__label { font-size: .68rem; color: var(--c-ink-2); font-weight: 600; }
.off-veld__input { display: flex; align-items: center; background: #fff; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); overflow: hidden; }
.off-veld__input:focus-within { border-color: var(--c-groen); }
.off-veld__input input { border: 0; padding: 9px 10px; font-family: var(--font-mono); font-size: .9rem; width: 92px; background: transparent; color: var(--c-ink); }
/* Focus-ring nooit uitzetten (CLAUDE.md) — de globale :focus-visible geldt. */
.off-veld__eenheid { font-family: var(--font-mono); font-size: .7rem; color: var(--c-ink-3); padding: 0 10px 0 4px; }
.off-veld__eenheid--pre { padding: 0 4px 0 10px; }
.off-reden { border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 9px 11px; font-family: var(--font-ui); font-size: .82rem; background: #fff; color: var(--c-ink); width: 100%; }
.off-reden:focus-visible { border-color: var(--c-groen); }
.off-select { border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 9px 11px; font-family: var(--font-ui); font-size: .82rem; background: #fff; color: var(--c-ink); width: 100%; }

/* Catalogus-chips */
.off-catalogus { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.off-add { font-family: var(--font-ui); font-size: .78rem; font-weight: 700; color: var(--c-groen-d); background: var(--c-groen-t); border: var(--lijndikte) solid transparent; border-radius: var(--radius-pill); padding: 7px 14px; cursor: pointer; transition: background var(--overgang); }
.off-add:hover { background: #fff; border-color: var(--c-lijn-2); }
.off-leeg { color: var(--c-ink-3); font-size: .82rem; }

/* Korting-kaart */
.off-korting { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }

/* Fiat-acties (module-eigen aanvulling op bs-poort) */
.off-mini { margin-top: 8px; align-self: flex-start; font-size: .78rem; padding: 8px 14px; }
.off-fiat-mgr { margin-top: 8px; padding: 10px 12px; border: 1px dashed var(--c-lijn-2); border-radius: var(--radius); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.off-fiat-mgr__label { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-3); }
.off-fiat-mgr__acties { display: flex; gap: 8px; }
.off-fiat-mgr__acties .btn { margin-top: 0; padding: 7px 14px; }
.bs-poort--sam { margin-top: 12px; }

/* ---------- Samenvatting (sticky) ---------- */
.off-samenvatting-wrap { position: sticky; top: 22px; }
.off-samenvatting { position: relative; padding: 20px 20px 18px; overflow: hidden; }
.off-sam__accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--c-groen); }
.off-sam__kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.off-sam__geldig { font-size: .68rem; color: var(--c-amber); }

.off-sam__eind { margin: 12px 0 4px; display: flex; flex-direction: column; gap: 2px; }
.off-sam__eindlabel { font-size: .72rem; color: var(--c-ink-2); }
.off-sam__eindwaarde { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }

/* ISDE-blok */
.off-subsidie { margin: 14px 0; padding: 13px 14px; border-radius: var(--radius); background: var(--c-groen-t); border: var(--lijndikte) solid transparent; }
.off-subsidie--nul { background: var(--c-paneel); }
.off-subsidie__kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.off-subsidie__label { font-size: .74rem; font-weight: 700; color: var(--c-groen-d); }
.off-subsidie--nul .off-subsidie__label { color: var(--c-ink-2); }
.off-subsidie__bedrag { font-size: 1.35rem; font-weight: 800; color: var(--c-groen-d); margin: 3px 0 4px; }
.off-subsidie--nul .off-subsidie__bedrag { color: var(--c-ink-3); }
.off-subsidie__uitleg { font-size: .72rem; line-height: 1.45; color: var(--c-ink-2); }

/* Prijsopbouw */
.off-opbouw { border-top: var(--lijndikte) solid var(--c-lijn); padding-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.off-opbouwrij { display: flex; justify-content: space-between; font-size: .82rem; color: var(--c-ink); }
.off-opbouwrij--korting { color: var(--c-terra-d); }
.off-btwsplit { display: flex; flex-direction: column; gap: 5px; margin-top: 3px; padding-top: 8px; border-top: 1px dashed var(--c-lijn); }
.off-btwrij { display: flex; justify-content: space-between; font-size: .74rem; color: var(--c-ink-2); }

/* Marge (gevoelig) */
.off-marge { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius); background: var(--c-paneel); font-size: .82rem; }
.off-marge__label { font-weight: 700; }
.off-gevoelig { font-family: var(--font-mono); font-size: .54rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-amber); background: var(--c-amber-t); border-radius: var(--radius-pill); padding: 2px 7px; margin-left: 6px; }

/* Acties */
.off-acties { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.off-versturen { width: 100%; }
.off-acties__sub { display: flex; gap: 8px; }
.off-acties__sub .btn { flex: 1; }
.off-sam__bron { margin-top: 14px; font-size: .68rem; color: var(--c-ink-3); line-height: 1.4; }

/* =====================================================================
   Offerte-document (preview → PDF via browser-print)
===================================================================== */
.off-preview-laag { position: fixed; inset: 0; z-index: 70; background: var(--c-paneel-2); display: flex; flex-direction: column; overflow: auto; }
.off-preview__bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; background: var(--c-creme); border-bottom: var(--lijndikte) solid var(--c-lijn); }
.off-preview__titel { font-weight: 800; font-size: .9rem; }
.off-preview__acties { display: flex; gap: 10px; }
.off-preview__blad { padding: 28px 20px 60px; }

.off-doc {
  max-width: 820px; margin: 0 auto; background: #fff;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 46px 52px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

.doc-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 18px; border-bottom: 2px solid var(--c-ink); }
.doc-merk { font-weight: 800; font-size: 1.35rem; letter-spacing: -.01em; }
.doc-meta { display: flex; gap: 26px; }
.doc-meta > div { display: flex; flex-direction: column; gap: 2px; }
.doc-nr { font-weight: 700; }
.doc-meta .mono { font-size: .78rem; }

.doc-partijen { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 22px 0; }
.doc-partij__naam { font-weight: 800; font-size: 1rem; margin-top: 4px; }
.doc-partij__regel { font-size: .82rem; color: var(--c-ink-2); line-height: 1.5; }

.doc-intro { font-size: .86rem; line-height: 1.55; color: var(--c-ink); margin: 0 0 20px; }

.doc-tabel { width: 100%; border-collapse: collapse; }
.doc-tabel thead th { text-align: left; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3); padding: 8px 0; border-bottom: var(--lijndikte) solid var(--c-lijn-2); }
.doc-tabel tbody td { padding: 12px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); vertical-align: top; }
.doc-num { text-align: right; white-space: nowrap; }
.doc-maat__naam { font-weight: 700; font-size: .9rem; }
.doc-maat__meld { display: block; font-size: .62rem; color: var(--c-ink-3); margin-top: 2px; }
.doc-tabel .doc-num.mono { font-size: .86rem; }

.doc-onder { display: grid; grid-template-columns: 1fr 300px; gap: 34px; margin-top: 26px; }
.doc-voorwaarden ul { margin: 8px 0 0; padding-left: 18px; }
.doc-voorwaarden li { font-size: .78rem; line-height: 1.6; color: var(--c-ink-2); }

.doc-tot__rij { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: .84rem; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.doc-tot__rij--korting { color: var(--c-terra-d); }
.doc-tot__rij--eind { border-bottom: 0; margin-top: 4px; padding-top: 12px; border-top: 2px solid var(--c-ink); font-weight: 800; font-size: 1.05rem; }
.doc-subsidie { margin-top: 16px; padding: 13px 14px; border-radius: var(--radius); background: var(--c-groen-t); }
.doc-subsidie__kop { display: flex; align-items: center; justify-content: space-between; font-size: .74rem; font-weight: 700; color: var(--c-groen-d); }
.doc-subsidie__bedrag { font-size: 1.2rem; font-weight: 800; color: var(--c-groen-d); margin: 3px 0 1px; }
.doc-subsidie__uitleg { font-size: .7rem; color: var(--c-ink-2); }

.doc-voet { display: flex; justify-content: space-between; gap: 16px; margin-top: 34px; padding-top: 14px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .68rem; color: var(--c-ink-3); }

@media print {
  body.preview-open .app, #toast, .bs-modal-laag { display: none !important; }
  .off-preview-laag { position: static; overflow: visible; background: #fff; }
  .off-preview__bar { display: none !important; }
  .off-preview__blad { padding: 0 !important; }
  .off-doc { border: 0; border-radius: 0; max-width: 100%; padding: 0; }
  @page { size: A4; margin: 16mm; }
}

/* Previewmail */
.off-mail { margin: 18px 20px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); overflow: hidden; }
.off-mail__van, .off-mail__aan { padding: 10px 16px; font-size: .78rem; }
.off-mail__van { background: var(--c-paneel); border-bottom: var(--lijndikte) solid var(--c-lijn); }
.off-mail__aan { color: var(--c-ink-2); border-bottom: var(--lijndikte) solid var(--c-lijn); }
.off-mail__body { padding: 18px 16px; font-size: .86rem; line-height: 1.5; }
.off-mail__body p { margin: 0 0 12px; }
.off-cta { margin: 4px 0 10px; }
.off-mail__klein { font-size: .72rem; color: var(--c-ink-3); }

/* Marge-stoplicht (B2a) */
.off-marge__stand { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.off-marge__stand em { font-style: normal; font-size: 11.5px; color: var(--c-ink-2); }
.off-margelamp { font-size: 11px; margin-right: 4px; }
.off-marge--groen .off-margelamp { color: var(--c-groen-d); }
.off-marge--amber .off-margelamp { color: var(--c-amber); }
.off-marge--terra .off-margelamp { color: var(--c-terra); }
.off-marge--amber .off-marge__stand em { color: var(--c-amber); }
.off-marge--terra .off-marge__stand em { color: var(--c-terra); font-weight: 600; }

/* Versie-diff (B2b) */
.off-diff__kop { display: flex; align-items: center; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--c-lijn); margin-bottom: 12px; }
.off-diff__kolom { display: flex; flex-direction: column; gap: 4px; }
.off-diff__prijs { font-size: 17px; font-weight: 800; }
.off-diff__pijl { color: var(--c-ink-2); font-size: 18px; }
.off-diff__kiezer { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 10px; }
.off-diff__kiezer select { border: 1px solid var(--c-lijn); border-radius: 12px; padding: 6px 10px; font: inherit; background: var(--c-paneel); color: var(--c-ink); }
.off-diff__rijen { display: flex; flex-direction: column; }
.off-diffrij { display: flex; justify-content: space-between; gap: 14px; padding: 8px 2px; border-bottom: 1px solid var(--c-lijn); font-size: 13.5px; }
.off-diffrij--plus span:first-child { color: var(--c-groen-d); font-weight: 600; }
.off-diffrij--min span:first-child { color: var(--c-terra); font-weight: 600; }
.off-diffrij--wijzig span:first-child { color: var(--c-amber); font-weight: 600; }
.off-diffrij--totaal { border-bottom: 0; padding-top: 12px; font-weight: 700; }

/* Startpakketten (B2c) */
.off-startpakket__intro { font-size: 13.5px; color: var(--c-ink-2); margin: 0 0 12px; }
.off-startpakketten { display: flex; flex-direction: column; gap: 10px; }
.off-startpakket { display: flex; flex-direction: column; gap: 5px; text-align: left; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 12px 14px; background: var(--c-paneel); cursor: pointer; font: inherit; color: var(--c-ink); }
.off-startpakket:hover { border-color: var(--c-groen-d); }
.off-startpakket.is-aanbevolen { border-color: var(--c-groen-d); background: color-mix(in srgb, var(--c-groen-d) 6%, var(--c-paneel)); }
.off-startpakket__kop { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.off-startpakket__sub { font-size: 12.5px; color: var(--c-ink-2); }
.off-startpakket__regels { font-size: 11.5px; color: var(--c-ink-2); }

/* B27 · backend-kaart: concept-offertes versturen naar de Woningkluis */
.off-b27kaart { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; margin-bottom: 16px; }
.off-b27kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.off-b27kop > span { font-size: 11px; color: var(--c-ink-2); }
.off-b27rij { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 8px 12px; }
.off-b27rij > div { display: flex; flex-direction: column; }
.off-b27rij .mono { font-size: 11.5px; color: var(--c-ink-2); }

/* Fase A (01-08): gedeelde teltegel-kop van de offerte-modules */
.ofk-host:empty { min-height: 96px; }
.ofk-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0 0 4px; }
.ofk-tegel { display: flex; flex-direction: column; gap: 2px; text-align: left; background: #fff;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 12px 16px;
  font-family: var(--font-ui); box-shadow: var(--schaduw-tegel); }
.ofk-tegel--klik { cursor: pointer; transition: border-color var(--overgang), box-shadow var(--overgang); }
.ofk-tegel--klik:hover { border-color: var(--c-groen); box-shadow: var(--schaduw-tegel-hover); }
.ofk-tegel__lbl { font-size: .74rem; font-weight: 700; color: var(--c-ink-2); }
.ofk-tegel__n { font-size: 1.3rem; font-weight: 800; color: var(--c-ink); }
.ofk-tegel__n.is-amber { color: var(--c-amber); }
.ofk-tegel__sub { font-size: .66rem; color: var(--c-ink-3); }
@media (prefers-reduced-motion: reduce) { .ofk-tegel--klik { transition: none; } }

/* De opvolging van kozijnoffertes loopt sinds KO8 via de gedeelde module
   Opvolging; de eigen stijlen zijn daarmee vervallen. */

/* ═══ OF1 (OFFERTEFLOW §1) · wizard-editor ═══ */
.off-autosave { margin-left: auto; font-size: .66rem; color: var(--c-ink-3); align-self: flex-start; padding-top: 6px; }
.off-wizvoet { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
.off-grid--breed { grid-template-columns: 1fr; }
.off-cat { display: flex; flex-direction: column; gap: 9px; }
.off-cat__zoek { border: 1px solid var(--lijn2); border-radius: var(--radius-klein); padding: 8px 12px; font: inherit; font-size: .78rem; }
.off-regelacties { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.off-opt { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; color: var(--ink2); font-weight: 700; cursor: pointer; }
.off-mini2 { border: 1px solid var(--lijn2); background: #fff; border-radius: 6px; width: 24px; height: 24px; font-size: .7rem; color: var(--ink2); cursor: pointer; }
.off-mini2:hover { background: var(--grijs); }
.off-mini2:disabled { opacity: .35; cursor: default; }
.off-check { display: flex; gap: 8px; align-items: flex-start; font-size: .76rem; padding: 4px 0; line-height: 1.5; }
.off-check__tk { font-weight: 800; width: 15px; text-align: center; flex: none; }
.off-check--ok .off-check__tk { color: var(--goed-d); }
.off-check--let .off-check__tk { color: var(--let-d); }
.off-check--rood .off-check__tk { color: var(--stop); }