/* =====================================================================
   Energietool — FRISSE LOOK (stap 1 scaffold)
   ---------------------------------------------------------------------
   Tweede, omschakelbare frontend-look naast de klassieke public/css/app.css.
   - Skinbaar via design-tokens: alle kleuren komen uit CSS-variabelen die
     onder .fris-app[data-skin="..."] hangen, zodat licht/donker reactief
     wisselen zonder reload.
   - Hergebruikt dezelfde semantische klassen als de klassieke partials
     (invoer/resultaat), zodat er GEEN markup gedupliceerd wordt — alleen
     de presentatie verschilt.
   - Bewust nog plain CSS (geen Vite/Tailwind): de buildflow blijft in stap 1
     ongemoeid. De migratie naar de Tailwind/Vite-pipeline is stap 2.
   ===================================================================== */

* { box-sizing: border-box; }

/* ---------- Design-tokens per skin ---------- */

.fris-app {
    /* gedeelde maatvoering */
    --radius: 14px;
    --radius-sm: 9px;
    --gap: 1.25rem;
    --shadow-kaart: 0 1px 2px rgba(16,24,40,0.04), 0 8px 24px -12px rgba(16,24,40,0.18);
    --font: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.fris-app[data-skin="licht"] {
    --bg:           #f4f7f5;
    --vlak:         #ffffff;
    --vlak-zacht:   #f7faf8;
    --rand:         #e3e9e5;
    --rand-sterk:   #cfd9d2;
    --tekst:        #1c2620;
    --tekst-zacht:  #5d6b63;
    --accent:       #15936a;
    --accent-diep:  #0f7a57;
    --accent-zacht: #e6f6ef;
    --accent-tekst: #ffffff;
    --markeer:      #fff6dd;
    --markeer-rand: #f0d68a;
    --huidig-vlak:  #f3f5f4;
    --positief:     #1f9254;
    --negatief:     #d04545;
    --topbar-bg:    rgba(255,255,255,0.85);
}

.fris-app[data-skin="donker"] {
    --bg:           #11161a;
    --vlak:         #1a2127;
    --vlak-zacht:   #20292f;
    --rand:         #2c373f;
    --rand-sterk:   #3a4751;
    --tekst:        #e7edea;
    --tekst-zacht:  #9bb0a6;
    --accent:       #3ecf8e;
    --accent-diep:  #2bb377;
    --accent-zacht: #18352a;
    --accent-tekst: #08130d;
    --markeer:      #33301c;
    --markeer-rand: #6b5d2c;
    --huidig-vlak:  #1f272d;
    --positief:     #4ad991;
    --negatief:     #f08585;
    --topbar-bg:    rgba(26,33,39,0.85);
}

/* ---------- Basis ---------- */

body { margin: 0; }

.fris-app {
    min-height: 100vh;
    background:
        radial-gradient(1200px 480px at 100% -10%, var(--accent-zacht), transparent 60%),
        var(--bg);
    color: var(--tekst);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    /* Zachte overgang bij skin-wissel (licht <-> donker) */
    transition: background-color 0.25s ease, color 0.25s ease;
}
/* Respecteer reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .fris-app, .fris-app * { transition: none !important; }
}

.fris-app h1, .fris-app h2, .fris-app h3, .fris-app h4, .fris-app h5 { color: var(--tekst); }

/* ---------- Topbar ---------- */

.fris-topbar {
    position: sticky; top: 0; z-index: 50;
    background: var(--topbar-bg);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--rand);
    /* Gedeelde hoogte voor álle topbar-controls (toggles links + knoppen/toggles rechts). */
    --ctrl-h: 35px;
}
.fris-topbar-inner {
    display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
    padding: 0.6rem 1.5rem;
}
.fris-merk { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; }
.fris-merk-dot { color: var(--accent); font-size: 1.2rem; }
.fris-merk-naam { font-size: 1.05rem; letter-spacing: -0.01em; }
.fris-topbar-spacer { flex: 1 1 auto; }

.fris-controls { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.fris-acties { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* Segment-control (pill toggle) */
.fris-seg {
    display: inline-flex; background: var(--vlak-zacht);
    border: 1px solid var(--rand); border-radius: 999px; padding: 3px;
    height: var(--ctrl-h); box-sizing: border-box;
}
.fris-seg button {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
    height: 100%; overflow: hidden;
    border: none; background: transparent; color: var(--tekst-zacht);
    padding: 0 0.85rem; font-size: 0.85rem; font-weight: 600; line-height: 1;
    border-radius: 999px; cursor: pointer; transition: background 0.12s, color 0.12s;
}
/* icoon (☀/☾) op tekstgrootte forceren — voorkomt dat emoji-rendering de pill oprekt */
.fris-seg button .seg-ico { font-size: 0.95em; line-height: 1; }
.fris-seg button:hover { color: var(--tekst); }
.fris-seg button.actief { background: var(--accent); color: var(--accent-tekst); box-shadow: 0 1px 2px rgba(0,0,0,0.12); }

.fris-skin {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.85rem; color: var(--tekst-zacht); cursor: pointer; user-select: none;
}
/* .fris-app-prefix nodig: anders wint de algemene `.fris-app select { background }`
   shorthand (gelijke specificiteit, latere bronvolgorde) en reset background-repeat
   naar repeat → getilede chevron. */
.fris-app .fris-skin select {
    /* Native pijl weg + eigen chevron, zodat de afstand tot de afgeronde
       rechterrand instelbaar is (background-position). */
    appearance: none; -webkit-appearance: none;
    background-color: var(--vlak); color: var(--tekst); border: 1px solid var(--rand);
    border-radius: 999px; padding: 0.3rem 1.9rem 0.3rem 0.85rem; font-size: 0.82rem; cursor: pointer;
    background-repeat: no-repeat; background-position: right 0.85rem center; background-size: 11px;
}
.fris-app[data-skin="licht"] select {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1%201l5%205%205-5'%20fill='none'%20stroke='%235d6b63'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}
.fris-app[data-skin="donker"] select {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1%201l5%205%205-5'%20fill='none'%20stroke='%239bb0a6'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Knoppen */
.fris-knop {
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: var(--vlak); color: var(--tekst); border: 1px solid var(--rand-sterk);
    border-radius: 999px; padding: 0 0.95rem; font-size: 0.85rem; font-weight: 600; line-height: 1;
    height: var(--ctrl-h); box-sizing: border-box;
    cursor: pointer; text-decoration: none; transition: border-color 0.12s, transform 0.06s;
}
.fris-knop:hover { border-color: var(--accent); }
.fris-knop:active { transform: translateY(1px); }
.fris-knop.primair { background: var(--accent); color: var(--accent-tekst); border-color: var(--accent); }
.fris-knop.spook { background: transparent; color: var(--tekst-zacht); border-style: dashed; }

.fris-adviseur-strip {
    background: var(--markeer); color: var(--tekst); border-top: 1px solid var(--markeer-rand);
    font-size: 0.78rem; padding: 0.3rem 1.25rem; text-align: center;
}
.fris-footer {
    margin: 1.5rem 0 0; padding: 1.25rem 1.5rem 0;
    border-top: 1px solid var(--rand);
    color: var(--tekst-zacht); font-size: 0.78rem; text-align: center; line-height: 1.6;
}

/* ---------- Werkblad ---------- */

.fris-werkblad {
    display: grid; grid-template-columns: minmax(340px, 440px) minmax(0, 1fr);
    gap: var(--gap); padding: 1.1rem 1.5rem 1.25rem;
    align-items: start;
}
.fris-kolom-resultaat, .fris-kolom-invoer {
    min-width: 0;
    /* Onafhankelijk scrollende kolommen onder de sticky topbar (56px) +
       werkblad-padding, zodat alleen de kolommen scrollen, niet de pagina. */
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    padding-right: 0.4rem;
}

.fris-kaart {
    background: var(--vlak); border: 1px solid var(--rand);
    border-radius: var(--radius); box-shadow: var(--shadow-kaart);
    padding: 1.1rem 1.25rem;
}

.resultaat-leeg {
    border: 1px dashed var(--rand-sterk); border-radius: var(--radius);
    color: var(--tekst-zacht); padding: 3rem 1.5rem; text-align: center;
    font-size: 0.95rem; background: var(--vlak);
}

@media (max-width: 900px) {
    .fris-werkblad { grid-template-columns: 1fr; }
    .fris-kolom-resultaat, .fris-kolom-invoer { max-height: none; overflow: visible; padding-right: 0; }
}

/* =====================================================================
   Gedeelde semantische klassen (uit partials.invoer / partials.resultaat)
   opnieuw geskind voor de frisse look.
   ===================================================================== */

/* ---------- Invoer-formulier ---------- */

.fris-app fieldset {
    border: 1px solid var(--rand); border-radius: var(--radius-sm);
    margin: 0 0 1.1rem; padding: 0.9rem 1.05rem 1.05rem; background: var(--vlak-zacht);
}
.fris-app fieldset legend {
    color: var(--accent-diep); font-weight: 700; font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: 0.12rem 0.55rem; background: var(--accent-zacht); border-radius: 999px;
}
.fris-app fieldset.klantgegevens { background: var(--accent-zacht); border-color: var(--accent); }

.fris-app .form-grid {
    /* Compacte value-kolom (~30% smaller dan vol): invoervelden hoeven niet
       breed. Verwarmingssysteem is de uitzondering (eigen regel hieronder). */
    display: grid; grid-template-columns: minmax(200px, 1fr) 6.25rem;
    gap: 0.55rem 1rem; align-items: center;
}
/* Uitzondering: het verwarmingssysteem-select heeft een lange optie
   ("Vloerverwarming") en krijgt daarom een eigen, bredere regel — de
   overige invoervelden blijven compact. */
.fris-app #verwarming_type {
    grid-column: 1 / -1; justify-self: start; width: 100%; max-width: 22rem;
}
.fris-app .form-grid label { font-size: 0.9rem; color: var(--tekst); }
.fris-app .form-grid .hint { grid-column: 1 / -1; font-size: 0.78rem; color: var(--tekst-zacht); margin: -0.3rem 0 0.2rem; }

.fris-app input[type="number"],
.fris-app input[type="text"],
.fris-app input[type="tel"],
.fris-app input[type="email"],
.fris-app input[type="search"],
.fris-app select {
    padding: 0.4rem 0.55rem; border: 1px solid var(--rand-sterk); border-radius: 8px;
    font-size: 0.9rem; width: 100%; max-width: 220px;
    background: var(--vlak); color: var(--tekst); font-family: inherit;
}
.fris-app input:focus, .fris-app select:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-zacht);
}
/* Alle selects in de frisse look: native pijl weg + eigen chevron met ruimte
   tot de rand. Na de gedeelde input-regel zodat deze longhands de
   `background`-shorthand (die repeat/image zou resetten) verslaan. */
.fris-app select {
    appearance: none; -webkit-appearance: none;
    padding-right: 1.9rem;
    background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 11px;
}
.fris-app input.kort { max-width: 120px; }

.fris-app .checkbox-rij { display: flex; align-items: center; gap: 0.5rem; margin: 0.35rem 0; font-size: 0.9rem; }
.fris-app .checkbox-rij input { width: auto; accent-color: var(--accent); }

.fris-app .info-box {
    background: var(--vlak-zacht); border-left: 3px solid var(--markeer-rand); border-radius: 8px;
    padding: 0.6rem 0.8rem; font-size: 0.85rem; margin-top: 0.75rem; color: var(--tekst);
}
.fris-app .info-box.neutraal { background: var(--accent-zacht); border-left-color: var(--accent); }

/* Dakvlakken-tabel */
.fris-app .dakvlak-tabel { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.fris-app .dakvlak-tabel th { text-align: left; font-size: 0.8rem; color: var(--tekst-zacht); padding: 0.25rem 0.4rem; }
.fris-app .dakvlak-tabel td { padding: 0.25rem 0.4rem; }
.fris-app .dakvlak-tabel input, .fris-app .dakvlak-tabel select { max-width: 130px; }
.fris-app .verwijder-knop {
    border: 1px solid var(--negatief); color: var(--negatief); background: var(--vlak);
    border-radius: 50%; width: 26px; height: 26px; cursor: pointer; font-weight: 700;
}
.fris-app .toevoeg-knop {
    border: 1px dashed var(--accent); color: var(--accent-diep); background: transparent;
    border-radius: 999px; padding: 0.4rem 0.9rem; cursor: pointer; font-size: 0.85rem; margin-top: 0.5rem;
}

.fris-app .bereken-knop {
    background: var(--accent); color: var(--accent-tekst); border: none; border-radius: 999px;
    padding: 0.7rem 1.6rem; font-size: 1.05rem; font-weight: 700; cursor: pointer;
}
.fris-app .bereken-knop:disabled { opacity: 0.6; cursor: wait; }

.fout-melding {
    background: color-mix(in srgb, var(--negatief) 14%, var(--vlak));
    border: 1px solid var(--negatief); color: var(--negatief);
    border-radius: var(--radius-sm); padding: 0.6rem 0.9rem; font-size: 0.9rem;
    margin: 0.75rem 1.5rem 0; }

.fris-app .actie-balk { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin: 0.75rem 0; }
.fris-app .sec-knop {
    background: var(--vlak); color: var(--accent-diep); border: 1px solid var(--accent);
    border-radius: 999px; padding: 0.45rem 0.95rem; font-size: 0.85rem; cursor: pointer;
    text-decoration: none; display: inline-block;
}
/* knop-groep (sommige partials gebruiken hem nog) */
.fris-app .knop-groep { display: inline-flex; border: 1px solid var(--rand); border-radius: 999px; overflow: hidden; }
.fris-app .knop-groep button { border: none; background: var(--vlak-zacht); color: var(--tekst-zacht); padding: 0.4rem 0.9rem; font-size: 0.85rem; cursor: pointer; }
.fris-app .knop-groep button + button { border-left: 1px solid var(--rand); }
.fris-app .knop-groep button.actief { background: var(--accent); color: var(--accent-tekst); font-weight: 600; }

/* ---------- Resultaat-secties ---------- */

.fris-app section.resultaat-sectie {
    margin-top: var(--gap);
    background: var(--vlak); border: 1px solid var(--rand);
    border-radius: var(--radius); box-shadow: var(--shadow-kaart);
    padding: 1.1rem 1.25rem;
}
.fris-app section.resultaat-sectie:first-child { margin-top: 0; }
.fris-app section.resultaat-sectie > h2 {
    color: var(--accent-diep); font-size: 1.15rem; margin: 0 0 0.7rem;
    display: flex; align-items: center; gap: 0.55rem; letter-spacing: -0.01em;
}
.fris-app section.resultaat-sectie > h2::before {
    content: ""; flex: 0 0 auto; width: 4px; height: 1.05em; border-radius: 2px;
    background: linear-gradient(var(--accent), var(--accent-diep));
}
.fris-app .sectie-uitleg { font-size: 0.85rem; color: var(--tekst-zacht); margin: 0 0 0.6rem; }
.fris-app .sectie-voetnoot { font-size: 0.8rem; color: var(--tekst-zacht); font-style: italic; margin-top: 0.5rem; }

/* Energielabel-kaarten */
.fris-app .label-kaarten { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.fris-app .label-kaart {
    border: 1px solid var(--rand); border-radius: var(--radius-sm); padding: 0.6rem 0.9rem;
    min-width: 110px; text-align: center; background: var(--vlak-zacht);
}
.fris-app .label-kaart.huidig { background: var(--huidig-vlak); border-color: var(--rand-sterk); }
.fris-app .label-kaart .kop { text-transform: uppercase; font-size: 0.72rem; color: var(--tekst-zacht); margin-bottom: 0.35rem; }
.fris-app .label-sprong {
    display: inline-block; background: var(--accent-zacht); color: var(--accent-diep); border-radius: 999px;
    font-size: 0.72rem; padding: 0.1rem 0.5rem; margin-top: 0.3rem; font-weight: 600;
}

/* Energielabel-balk (NEN-7120): de kleur komt inline uit de label-balk-component;
   hier de vorm + leesbare witte tekst (deze regels staan alleen in app.css en
   moeten dus ook in de frisse look bestaan — anders rauwe ongestylede blokjes). */
.fris-app .label-balk {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2rem; height: 1.65rem; padding: 0 0.6rem; border-radius: 6px;
    color: #fff; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.01em;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22), 0 1px 2px rgba(0,0,0,0.2);
}
.fris-app .label-balk.groot { min-width: 2.6rem; height: 2.3rem; padding: 0 1rem; font-size: 1.15rem; border-radius: 7px; }
/* Brede labels (A++, A+++, A++++): groei mee + ruime padding zodat de tekst niet tegen de rand zit */
.fris-app .label-balk.breed { width: auto; padding: 0 0.85rem; }
.fris-app .label-balk.groot.breed { padding: 0 1.15rem; }
.fris-app .label-leeg { color: var(--tekst-zacht); font-weight: 600; }

.fris-app .adviseur-badge {
    background: var(--markeer); border: 1px solid var(--accent); color: var(--accent-diep);
    font-size: 0.7rem; padding: 0.1rem 0.5rem; border-radius: 999px; margin-left: 0.4rem;
    text-transform: none; letter-spacing: 0;
}

/* Tabellen */
.fris-app .tabel-scroll { overflow-x: auto; }
.fris-app table.resultaat-tabel { border-collapse: collapse; width: 100%; font-size: 0.85rem; table-layout: fixed; }
.fris-app table.resultaat-tabel th, .fris-app table.resultaat-tabel td {
    border: 1px solid var(--rand); padding: 0.45rem 0.6rem; text-align: right; white-space: nowrap;
}
.fris-app table.resultaat-tabel th { background: var(--vlak-zacht); color: var(--accent-diep); }
.fris-app table.resultaat-tabel td:first-child, .fris-app table.resultaat-tabel th:first-child { text-align: left; font-weight: 600; }
/* Alleen de cellen krijgen de zachte grijs; de kolomkop blijft gelijk aan de andere koppen. */
.fris-app table.resultaat-tabel td.huidig-kolom { background: var(--huidig-vlak); }
/* Scenario-kolommen overal even breed én op dezelfde x (vanaf rechts uitgelijnd),
   ongeacht of een tabel een Huidig-kolom heeft — de label-kolom slokt het verschil op. */
.fris-app table.resultaat-tabel th:not(:first-child):not(.huidig-kolom),
.fris-app table.resultaat-tabel td:not(:first-child):not(.huidig-kolom) { width: 10%; }
.fris-app table.resultaat-tabel .huidig-kolom { width: 9%; }
.fris-app table.resultaat-tabel th,
.fris-app table.resultaat-tabel td:first-child { white-space: normal; }
.fris-app table.resultaat-tabel td.nvt {
    background: repeating-linear-gradient(45deg, var(--vlak-zacht), var(--vlak-zacht) 4px, var(--rand) 4px, var(--rand) 8px);
}

.fris-app .positief { color: var(--positief); font-weight: 600; }
.fris-app .negatief { color: var(--negatief); font-weight: 600; }
.fris-app td.tvt-goed { background: var(--accent-zacht); }
.fris-app td.tvt-middel { background: var(--markeer); }

/* Strategie-detail kaarten */
.fris-app .detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.fris-app .detail-kaart {
    border: 1px solid var(--rand); border-radius: var(--radius-sm); padding: 0.8rem 1rem;
    background: var(--vlak-zacht);
    transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.fris-app .detail-kaart:hover { border-color: var(--rand-sterk); transform: translateY(-2px); box-shadow: var(--shadow-kaart); }
.fris-app .label-kaart { transition: border-color 0.15s ease, transform 0.12s ease; }
.fris-app .label-kaart:hover { transform: translateY(-2px); }
.fris-app .detail-kaart h4 { margin: 0 0 0.5rem; color: var(--accent-diep); font-size: 1rem; }
.fris-app .detail-kaart h5 { margin: 0.7rem 0 0.25rem; font-size: 0.8rem; text-transform: uppercase; color: var(--tekst-zacht); }
.fris-app .detail-rij { display: flex; justify-content: space-between; font-size: 0.85rem; padding: 0.15rem 0.4rem; }
.fris-app .detail-rij.totaal { font-weight: 700; background: var(--vlak); border-radius: 6px; padding: 0.25rem 0.4rem; }

/* Uncertainty-badge */
.fris-app .uncertainty-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%; font-size: 0.7rem; font-weight: 700;
    color: #1c2620; cursor: help; flex-shrink: 0; vertical-align: middle; margin-left: 0.3rem;
}
.fris-app .uncertainty-badge.pending_wim { background: #ffc107; box-shadow: 0 0 4px rgba(255,193,7,0.7); }
.fris-app .uncertainty-badge.afgeleid { background: var(--rand-sterk); }

/* Decisions-overlay */
.fris-app .decisions-groep { margin-bottom: 1rem; }
.fris-app .decisions-groep > .groep-kop {
    display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
    font-weight: 700; font-size: 0.95rem; padding: 0.35rem 0;
}
.fris-app .status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.fris-app .status-dot.pending { background: #ffc107; box-shadow: 0 0 5px rgba(255,193,7,0.8); }
.fris-app .status-dot.replicated { background: var(--positief); }
.fris-app .decision-kaart {
    border: 1px solid var(--rand); border-left: 3px solid #ffc107; border-radius: 6px;
    padding: 0.5rem 0.7rem; margin: 0.35rem 0; cursor: pointer; font-size: 0.85rem; background: var(--vlak-zacht);
}
.fris-app .decision-kaart.replicated { border-left-color: var(--positief); }
.fris-app .decision-kaart .id { font-family: monospace; color: var(--tekst-zacht); font-size: 0.75rem; }
.fris-app .decision-kaart .excel-ref {
    font-family: monospace; background: var(--accent-zacht); color: var(--accent-diep);
    padding: 0.2rem 0.4rem; border-radius: 4px; display: block; margin: 0.3rem 0; font-size: 0.78rem; white-space: pre-wrap;
}
.fris-app .decision-kaart .reden { background: var(--markeer); padding: 0.25rem 0.4rem; border-radius: 4px; margin-top: 0.25rem; }

/* Onder-de-motorkap */
.fris-app .motorkap-knop {
    background: var(--vlak-zacht); border: 1px solid var(--rand-sterk); border-radius: 999px;
    padding: 0.45rem 0.9rem; cursor: pointer; font-size: 0.85rem; font-family: monospace; color: var(--tekst);
}
.fris-app .motorkap-paneel { border: 1px solid var(--rand); border-radius: var(--radius-sm); margin-top: 0.6rem; padding: 0.7rem; background: var(--vlak-zacht); }
.fris-app .motorkap-tabel-wrap { max-height: 400px; overflow-y: auto; margin-top: 0.5rem; }
.fris-app .motorkap-tabel { border-collapse: collapse; width: 100%; font-size: 0.8rem; }
.fris-app .motorkap-tabel th, .fris-app .motorkap-tabel td { border-bottom: 1px solid var(--rand); padding: 0.25rem 0.5rem; text-align: left; }
.fris-app .motorkap-tabel code { font-family: monospace; }
.fris-app .type-badge { font-size: 0.7rem; padding: 0.1rem 0.35rem; border-radius: 4px; }
.fris-app .type-badge.number { background: #e3f0fb; color: #1c4e7a; }
.fris-app .type-badge.string { background: #e8f5e9; color: #2e7d32; }
.fris-app .type-badge.boolean { background: #fff8e1; color: #8a6d00; }
.fris-app .type-badge.null { background: #fdecea; color: #c62828; }

/* ---------- Rapport (inline preview) ---------- */

.fris-app .rapport { border: 1px solid var(--rand); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-top: 1rem; background: var(--vlak); }
.fris-app .rapport-kop {
    display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start;
    border-bottom: 3px solid var(--accent); padding-bottom: 0.7rem; margin-bottom: 1rem;
}
.fris-app .rapport-kop .logo { color: var(--accent-diep); font-weight: 700; font-size: 0.85rem; }
.fris-app .rapport-kop h1 { font-size: 1.3rem; margin: 0 0 0.3rem; }
.fris-app .rapport-kop .gegevens { font-size: 0.85rem; color: var(--tekst-zacht); }
.fris-app .rapport h3 { color: var(--accent-diep); font-size: 1.05rem; margin: 1.2rem 0 0.5rem; }
.fris-app .rapport-voetnoot { margin-top: 1.5rem; padding-top: 0.6rem; border-top: 1px solid var(--rand); font-size: 0.8rem; color: var(--tekst-zacht); font-style: italic; }
.fris-app .aanbeveling-box { background: var(--accent-zacht); border-left: 4px solid var(--accent); border-radius: 8px; padding: 0.5rem 0.8rem; font-size: 0.88rem; margin-top: 0.6rem; }
.fris-app .samenvatting-kaarten { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.fris-app .samenvatting-kaarten .kaart { border: 1px solid var(--rand); border-radius: 8px; padding: 0.45rem 0.7rem; text-align: center; min-width: 96px; background: var(--vlak-zacht); }
.fris-app .samenvatting-kaarten .kaart.huidig { background: var(--markeer); }
.fris-app .samenvatting-kaarten .kaart .kop { font-size: 0.72rem; color: var(--tekst-zacht); margin-bottom: 0.25rem; }
.fris-app .samenvatting-kaarten .kaart .sub { font-size: 0.72rem; color: var(--tekst-zacht); margin-top: 0.25rem; }

/* ---------- Print ---------- */

@page { size: A4 portrait; margin: 15mm; }

@media print {
    .no-print { display: none !important; }
    .fris-app { background: #fff; color: #000; }
    .fris-app section.resultaat-sectie, .fris-kaart { box-shadow: none; border-color: #ccc; }
    .fris-app table.resultaat-tabel th { background: #fff; color: #000; }
    .rapport-blok { page-break-inside: avoid; }
    * { box-shadow: none !important; }
}