/* =====================================================================
   prijzen.css — Module 1.7 · Prijsbeheer. Bouwt op tokens + bouwstenen.
===================================================================== */

.px-grid { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .px-grid { grid-template-columns: 1fr; } }
.px-links, .px-rechts { display: flex; flex-direction: column; gap: 14px; }
.px-blok { padding: 16px 18px; }
.px-blok__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.px-kicker { display: block; margin-bottom: 10px; }
.px-kicker--groen { color: var(--c-groen-d); }
.px-sub { font-size: .72rem; color: var(--c-ink-3); margin: 2px 0 0; }
.px-groen { color: var(--c-groen-d); }
.px-amber { color: var(--c-amber); }
.px-terra { color: var(--c-terra-d); font-weight: 800; }

/* Woning-keuze + maatregel-toggles */
.px-woningen, .px-maten { display: flex; flex-direction: column; gap: 8px; }
.px-woning { text-align: left; padding: 10px 12px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; background: #fff; cursor: pointer; font-family: var(--font-ui); transition: border-color var(--overgang), background var(--overgang); }
.px-woning:hover { border-color: var(--c-lijn-2); }
.px-woning.is-actief { border-color: var(--c-groen); background: var(--c-groen-t); }
.px-woning__adres { font-weight: 800; font-size: .8rem; }
.px-woning__sub { font-size: .68rem; color: var(--c-ink-3); margin-top: 1px; }
.px-maat { display: flex; align-items: center; gap: 9px; text-align: left; padding: 9px 12px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; background: #fff; cursor: pointer; font-family: var(--font-ui); font-weight: 700; font-size: .78rem; color: var(--c-ink-2); }
.px-maat__dot { width: 18px; height: 18px; flex: none; border-radius: 6px; border: 2px solid var(--c-lijn-2); background: #fff; color: transparent; display: inline-flex; align-items: center; justify-content: center; font-size: .66rem; }
.px-maat.is-aan { border-color: var(--c-groen); color: var(--c-ink); }
.px-maat.is-aan .px-maat__dot { background: var(--c-groen); border-color: var(--c-groen); color: #fff; }
.px-onbekend { font-size: .58rem; color: var(--c-amber); }

/* Statusbalk */
.px-statusbalk { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; }
.px-statusbalk__links { display: flex; align-items: center; gap: 12px; }
.px-geldig { font-size: .74rem; color: var(--c-ink-3); }

/* Interne opbouw */
.px-comp { display: grid; grid-template-columns: 1.4fr 1.2fr .8fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.px-comp--kop { border-top: 0; padding: 6px 0; font-family: var(--font-mono); font-size: .56rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); }
.px-comp__naam { font-weight: 700; font-size: .82rem; }
.px-comp__detail { font-size: .72rem; color: var(--c-ink-3); }
.px-comp__netto { text-align: right; font-weight: 800; }
.px-bar { height: 14px; border-radius: 8px; overflow: hidden; display: flex; background: var(--c-paneel); margin: 14px 0 8px; }
.px-bar__seg--ink { background: var(--c-lijn-2); }
.px-bar__seg--marge { background: var(--c-groen); }
.px-bar__seg--btw { background: var(--c-amber); }
.px-legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: .72rem; color: var(--c-ink-2); align-items: center; }
.px-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; }
.px-dot--ink { background: var(--c-lijn-2); }
.px-dot--marge { background: var(--c-groen); }
.px-dot--btw { background: var(--c-amber); }
.px-marge { margin-left: auto; font-weight: 700; color: var(--c-groen-d); }

/* BTW + subsidie duo */
.px-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .px-duo { grid-template-columns: 1fr; } }
.px-rij { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: .8rem; color: var(--c-ink-2); }
.px-rij--totaal { border-bottom: 0; font-weight: 800; color: var(--c-ink); }
.px-eind { display: flex; align-items: baseline; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: var(--lijndikte) solid var(--c-lijn-2); font-size: .78rem; color: var(--c-ink-2); }
.px-eind .mono { font-size: 1.5rem; font-weight: 800; color: var(--c-ink); }
.px-subsidie { background: var(--c-groen-t); }
.px-subsidie__kop { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 6px; }
.px-subsidie__bedrag { font-size: 1.7rem; font-weight: 800; color: var(--c-groen-d); }
.px-subsidie__geen { font-weight: 800; font-size: 1.05rem; color: var(--c-ink-3); margin-bottom: 4px; }
.px-subsidie__uitleg { font-size: .74rem; line-height: 1.55; color: var(--c-ink-2); }

/* Tarieven */
.px-tarieven { padding: 16px 20px; margin-bottom: 14px; }
.px-tarieven__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.px-tarief { display: grid; grid-template-columns: 1.5fr .9fr .8fr .8fr .7fr 1fr 76px; gap: 10px; align-items: center; padding: 11px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.px-tarief--kop { border-top: 0; padding: 6px 0; font-family: var(--font-mono); font-size: .56rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); }
.px-tarief__naam { font-weight: 700; font-size: .8rem; }
.px-tarief__unit { font-size: .72rem; color: var(--c-ink-3); }
.px-tarief__rvo { font-size: .74rem; color: var(--c-ink-2); }
.px-tarief .chip { justify-self: start; }
.px-invoer { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; color: var(--c-ink-3); }
.px-invoer input { width: 92px; padding: 8px 10px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 9px; font-family: var(--font-mono); font-size: .8rem; font-weight: 700; color: var(--c-ink); background: #fff; text-align: right; }
.px-invoer input:focus-visible { border-color: var(--c-groen); }

/* Versiebeheer */
.px-pending { padding: 18px 20px; margin-bottom: 16px; border-color: var(--c-amber); background: var(--c-amber-t); }
.px-pending__kop { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; font-size: .88rem; }
.px-pending__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 14px; align-items: center; }
@media (max-width: 760px) { .px-pending__grid { grid-template-columns: 1fr; } }
.px-pending__wat { font-weight: 700; font-size: .82rem; }
.px-pending__delta { font-size: .82rem; color: var(--c-ink-2); }
.px-pending__delta strong { color: var(--c-ink); }
.px-pending__actie { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.px-versies { padding: 6px 20px 16px; }
.px-versies__titel { padding: 14px 0 6px; margin: 0; }
.px-versie { display: flex; gap: 12px; padding: 13px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.px-versie__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-groen); flex: none; margin-top: 5px; }
.px-versie__kop { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; font-size: .82rem; }
.px-versie__v { font-size: .64rem; font-weight: 700; color: var(--c-ink-2); background: var(--c-paneel); padding: 2px 8px; border-radius: 6px; }
.px-versie__delta { font-size: .76rem; color: var(--c-ink-2); margin-top: 4px; }
.px-versie__fiat { font-size: .7rem; font-weight: 700; color: var(--c-groen-d); margin-top: 3px; }

/* Nacalculatie */
.px-nacs { padding: 0 20px 6px; }
.px-nac { display: grid; grid-template-columns: 1fr 1.3fr .9fr .9fr .8fr 1fr; gap: 10px; align-items: center; padding: 12px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.px-nac--kop { border-top: 0; padding: 12px 0 8px; font-family: var(--font-mono); font-size: .56rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); }
.px-nac__ord { font-weight: 700; font-size: .72rem; color: var(--c-groen-d); }
.px-nac__klant { font-weight: 700; font-size: .8rem; }
.px-nac__calc, .px-nac__werk, .px-nac__afw { text-align: right; font-size: .78rem; }
.px-nac.is-struct { background: var(--c-terra-t); border-radius: 8px; padding-left: 8px; padding-right: 8px; margin: 0 -8px; }
.px-signaal { justify-self: start; background: #fff; border: var(--lijndikte) solid var(--c-terra); border-radius: var(--radius-pill); color: var(--c-terra-d); font-family: var(--font-ui); font-size: .68rem; font-weight: 700; padding: 5px 11px; cursor: pointer; }
.px-signaal:hover { background: var(--c-terra-t); }

/* Producten */
.px-prod { display: grid; grid-template-columns: 2fr .8fr .8fr .9fr .5fr; gap: 10px; align-items: center; padding: 9px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.px-prod--kop { border-top: 0; padding: 6px 0; font-family: var(--font-mono); font-size: .56rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); }
.px-prod__naam { font-weight: 700; font-size: .8rem; }
.px-prod .chip { justify-self: start; }
.px-prod__btw { font-size: .74rem; color: var(--c-ink-3); }
.px-nieuw { border: 1.5px dashed var(--c-lijn-2); border-radius: var(--radius); background: var(--c-creme); padding: 20px; }
.px-nieuw__rij { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.px-nieuw__naam { flex: 2; min-width: 200px; width: auto; }
.px-nieuw__cats { display: flex; gap: 7px; }
.px-invoer--nieuw input { width: 110px; }

/* =====================================================================
   Besparingsmotor & CasaScore (tab, spec 1.2)
===================================================================== */
.bm-status { margin-top: 14px; padding-top: 14px; border-top: var(--lijndikte) solid var(--c-lijn); display: flex; flex-direction: column; gap: 8px; }
.bm-status__rij { display: flex; align-items: center; justify-content: space-between; font-size: .76rem; color: var(--c-ink-3); }
.bm-verify { margin-top: 4px; font-size: .74rem; padding: 9px 14px; }
.bm-geverifieerd { font-size: .74rem; font-weight: 700; color: var(--c-groen-d); }

/* Score-ringen (SVG-boog — geen gradient) */
.bm-scorekaart { padding: 20px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.bm-ringen { display: flex; align-items: center; gap: 18px; }
.bm-pijl { font-size: 1.6rem; color: var(--c-lijn-2); }
.bm-ring__spoor { fill: none; stroke: var(--c-paneel); stroke-width: 9; }
.bm-ring__boog { fill: none; stroke-width: 9; stroke-linecap: round; }
.bm-ring--nu .bm-ring__boog { stroke: var(--c-amber); }
.bm-ring--mogelijk .bm-ring__boog { stroke: var(--c-groen); }
.bm-ring__score { font-family: var(--font-mono); font-size: 26px; font-weight: 800; fill: var(--c-ink); text-anchor: middle; }
.bm-ring__sublabel { font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; fill: var(--c-ink-3); text-anchor: middle; }
.bm-scoretekst { flex: 1; min-width: 190px; }
.bm-scoretitel { font-weight: 800; font-size: 1rem; }
.bm-scoresub { font-size: .8rem; color: var(--c-ink-2); margin-top: 4px; }
.bm-scoresub strong { color: var(--c-groen-d); }
.bm-disclaimer { font-size: .68rem; color: var(--c-ink-3); margin-top: 8px; }

/* Bouwdeel-tabel */
.bm-deel { display: grid; grid-template-columns: 1.4fr 1fr .8fr 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-top: var(--lijndikte) solid var(--c-lijn); cursor: pointer; }
.bm-deel.is-vast { cursor: default; }
.bm-deel--kop { border-top: 0; padding: 6px 0; cursor: default; font-family: var(--font-mono); font-size: .56rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); }
.bm-deel__naam { font-weight: 700; font-size: .82rem; }
.bm-deel__meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.bm-deel__comfort { font-size: .66rem; color: var(--c-ink-3); }
.bm-balk { height: 9px; border-radius: var(--radius-pill); background: var(--c-paneel); display: flex; overflow: hidden; }
.bm-balk__cur { background: var(--c-groen); }
.bm-balk__pot { background: var(--c-amber-t); }
.bm-deel__delta { font-weight: 800; color: var(--c-ink-3); }
.bm-groen { color: var(--c-groen-d); }
.bm-deel__besp { font-size: .78rem; font-weight: 700; color: var(--c-groen-d); }
.bm-deel__actie { display: flex; justify-content: flex-end; }
.bm-afnemen { padding: 7px 12px; background: var(--c-groen-t); color: var(--c-groen-d); border: 0; border-radius: 9px; font-family: var(--font-ui); font-size: .7rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.bm-afnemen:hover { background: var(--c-groen); color: #fff; }

/* Modelbeheer */
.bm-modelgrid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .bm-modelgrid { grid-template-columns: 1fr; } }
.bm-dot { background: var(--c-amber); }
.bm-v { color: var(--c-amber); background: var(--c-amber-t); }
.bm-aanname { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.bm-aanname__par { font-weight: 700; font-size: .8rem; }
.bm-aanname__waarde { font-weight: 800; color: var(--c-groen-d); font-size: .8rem; }

.px-link { font-weight: 700; color: var(--c-groen-d); text-decoration: none; }
.px-link:hover { text-decoration: underline; }

/* Wat-als-simulator (B4a) */
.px-simkpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0; }
.px-simkpis span { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 10px 12px; }
.px-simkpis em { font-style: normal; font-size: 11.5px; color: var(--c-ink-2); }
.px-simkpis b { font-size: 15px; }
.px-simrij { display: grid; grid-template-columns: 1.2fr 1fr 1.4fr auto; gap: 10px; align-items: center; padding: 7px 2px; border-bottom: 1px solid var(--c-lijn); font-size: 13px; }
.px-simrij--kop { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-2); }
.px-sim__bron { margin-top: 10px; }

/* Grandfathering (B4c) */
.px-gf { border: 1px solid var(--c-lijn); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.px-gf--oud { border-color: var(--c-amber); }
.px-gf__kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.px-gf__versie { font-weight: 800; }
.px-gf__tel { margin-left: auto; font-size: 12.5px; color: var(--c-ink-2); }
.px-gf__lijst { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 12.5px; color: var(--c-ink-2); }
.px-gf__open { margin-top: 4px; }

/* ---------- Prijsregel-beheer (regels toevoegen/bewerken/archiveren) ---------- */
.px-regelacties { display: flex; gap: 4px; justify-self: end; }
.px-mini { background: #fff; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; padding: 5px 8px;
  font: 600 .68rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; transition: background 160ms ease, border-color 160ms ease; }
.px-mini:hover { background: var(--c-creme); border-color: var(--c-groen); color: var(--c-groen-d); }
.px-regelnieuw { margin-top: 12px; background: transparent; border: 1px dashed var(--c-lijn-2); border-radius: var(--radius);
  padding: 9px 14px; font: 700 .72rem var(--font-ui); color: var(--c-ink-3); cursor: pointer; width: 100%;
  transition: border-color 160ms ease, color 160ms ease; }
.px-regelnieuw:hover { border-color: var(--c-groen); color: var(--c-groen-d); }
.px-archief { margin-top: 14px; border-top: 1px dashed var(--c-lijn); padding-top: 11px; display: grid; gap: 6px; }
.px-archrij { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font: 600 .76rem var(--font-ui); color: var(--c-ink-3); }
.px-archrij em { font-size: .66rem; font-style: normal; color: var(--c-ink-3); }