h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* ============================================================
   SPA Presales Assistant — moderne web-look (foundation)
   ============================================================ */

/* ---- Merklettertype: DM Sans (zelf-gehost, offline-proof) ----
   Variabel bestand dekt gewicht 400–700; latin + latin-ext voor diacritics.
   Aptos is de Microsoft-only fallback (niet meegeleverd). */
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/dm-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/dm-sans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* ---- TKH Security huisstijl — gespiegeld op tkhsecurity.com (thema tkh2026) ----
       De webapp draait op spa.tkhsecurity.com en moet ogen als onderdeel van de
       hoofdsite. Palet = de WP-preset-tokens van de site:
         accent-1 #CCCC00 (lime), accent-2 #009FE3 (azuur), base #FFFFFF (wit canvas),
         base-2 #F3F3F3, contrast #000 (tekst), blue #284363 / dark-blue #1C2637 /
         medium-blue #1E3045 (navy-structuur), ash #DCDEE3 (rand), light-grey #808595.
       Site-principes: WIT canvas, ZWARTE tekst, NAVY structuur/knoppen, lime als
       spaarzaam accent (dunne lijnen + banden), radius 6px. Font: DM Sans (= site). */
    --lime: #cccc00; /* site accent-1 — signatuur-accent (dunne lijnen, banden, pop) */
    --lime-600: #b3b300; /* donkerder limoen: randen / hover */
    --lime-050: #f6f6d6; /* zachte limoen-tint voor vlakken/banden */
    --azure: #009fe3; /* site accent-2 — secundair accent (spaarzaam: info/links) */
    --navy: #284363; /* site 'blue' — structuur (tabs/actief/knoppen) */
    --navy-800: #1c2637; /* site 'dark-blue' — donkerste navy (hover/donker vlak) */
    --navy-700: #1e3045; /* site 'medium-blue' */
    --ink: #1c2637; /* koppen/structuur-donker = dark-blue (bijna zwart, navy-getint) */
    --ink-soft: #284363; /* zachtere donkertint (navy) */
    --on-lime: #1c2637; /* tekst óp limoen = dark-blue */
    --on-dark: #ffffff; /* tekst op donkere vlakken = wit */
    --on-dark-dim: #b7bccb; /* gedempte tekst op donkere vlakken */
    --bg: #ffffff; /* site base — WIT canvas */
    --surface-2: #f3f3f3; /* site base-2 — licht alt-oppervlak */
    --panel: #ffffff;
    --line: #dcdee3; /* site ash — rand/lijn */
    --text: #000000; /* site contrast — primaire tekst (zwart) */
    --muted: #808595; /* site light-grey — secundaire tekst */
    --ok: #2e9e4f;
    --warn: #b78100;
    --bad: #c8412f;
    /* Aliassen: bestaande regels blijven werken. 'blauw' = de site-navy (structuur);
       'accent' = limoen. Zo volgen tabs/active/route-num/plan-head automatisch de navy. */
    --blue: var(--navy);
    --blue-700: var(--navy-800);
    --accent: var(--lime);
    --radius: 6px; /* site radius-standard (0.375rem) */
    --radius-lg: 12px; /* site radius-big (0.75rem) */
    --shadow: 0 1px 3px rgba(28,38,55,.10), 0 1px 2px rgba(28,38,55,.06);
    --focus: #284363; /* focusring op lichte vlakken (navy) */
}

* { box-sizing: border-box; }
html, body { margin: 0; }

/* ---- Toegankelijkheid: zichtbare toetsenbord-focus (cyan-token) ----
   Alleen bij toetsenbordnavigatie (:focus-visible), niet bij muisklik. */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--focus); outline-offset: 1px;
}
/* De appbar is nu een licht/wit vlak → de navy focusring is daar gewoon zichtbaar. */
/* Disabled-affordance, overal consistent. */
button:disabled, input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }
/* Respecteer 'reduce motion' (vestibulaire klachten): geen transities/animaties. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .card:hover { transform: none; }
}
body {
    font-family: "DM Sans", Aptos, "Helvetica Neue", Arial, sans-serif;
    color: var(--text);
    background: var(--bg); /* site base — WIT canvas (cards/panels krijgen Ash-randen) */
    font-size: 15px; /* richting site-16px, iets compacter voor de datadichte tabellen */
    line-height: 1.5;
}
/* Site-koppen: DM Sans, vet, met strakke negatieve letter-spacing (tkh2026-tokens). */
h1, h2, h3, h4 { color: var(--ink); font-weight: 700; margin: 0 0 .5rem; letter-spacing: -.02em; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.4rem; }
/* Elke pagina-titel krijgt een korte limoen-accentstreep als TKH-signatuur. */
h1 { position: relative; padding-bottom: .35rem; }
h1::after { content: ""; display: block; width: 46px; height: 3px; margin-top: .35rem; background: var(--lime); border-radius: 2px; }
a { color: var(--ink); }
/* Dunne-lijn SVG-iconen (Icon.razor); erven currentColor. */
.ico { display: inline-block; vertical-align: middle; flex: 0 0 auto; }

/* ---- App bar (site-stijl: LICHTE/witte header + limoen accentlijn + kleurenlogo) ----
   Spiegelt de tkhsecurity.com-header: wit vlak, zwarte/navy bediening, het
   kleurenlogo (zwart utility-tekst op de site → lichte balk). */
.appbar {
    display: flex; align-items: center; gap: 2rem;
    background: #fff; border-bottom: 2px solid var(--lime);
    padding: 0 1.4rem; height: 56px; box-shadow: 0 1px 3px rgba(28,38,55,.08);
    position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: baseline; gap: .5rem; }
/* "SPA"-tegel spiegelt de limoen-tegel van het logo: limoen vlak, dark-blue letters. */
.brand-mark {
    background: var(--lime); color: var(--on-lime); font-weight: 800; letter-spacing: .5px;
    padding: .25rem .5rem; border-radius: var(--radius); font-size: 1rem;
}
.brand-title { color: var(--muted); font-weight: 600; }
/* Het kleurenlogo (officiële site-SVG) staat op het witte vlak. */
.brand-logo-link { display: inline-flex; align-items: center; cursor: pointer; }
.brand-logo { height: 32px; width: auto; display: block; }
.topnav { display: flex; gap: .4rem; }
.topnav a {
    text-decoration: none; color: var(--ink); font-weight: 600;
    padding: .45rem .8rem; border-radius: var(--radius);
}
.topnav a:hover { background: rgba(28,38,55,.06); color: var(--ink); }
/* Actieve nav: navy tekst + limoen onderstreep-indicator (i.p.v. gevuld vlak),
   consistent met de h1-accentstreep en de site-accentlijn. */
.topnav a.active { background: rgba(28,38,55,.04); color: var(--ink); box-shadow: inset 0 -3px 0 var(--lime); }

.content { padding: 1.2rem 1.4rem; max-width: 1200px; margin: 0 auto; }
/* Catalogus en storage calculator gebruiken de volledige schermbreedte. */
.content:has(> .catalog-layout), .content:has(> .sc-layout-3) { max-width: none; }

/* ---- Catalogus-layout met persistente categorieboom ---- */
.catalog-layout { display: grid; grid-template-columns: 244px 1fr; gap: 1.2rem; align-items: start; }
.catalog-main { min-width: 0; }
.cat-tree {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: .4rem; position: sticky; top: 70px; max-height: calc(100vh - 88px); overflow-y: auto;
}
.cat-tree-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; padding: .3rem .5rem .4rem; }
.tree-line { display: flex; align-items: center; gap: .1rem; }
.tree-caret {
    flex: 0 0 1.1rem; width: 1.1rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center;
    border: none; background: none; cursor: pointer; color: var(--muted); font-size: .7rem; padding: 0; border-radius: 4px;
}
.tree-caret:hover { background: var(--surface-2); color: var(--ink); }
.tree-caret-empty { cursor: default; }
.tree-row {
    flex: 1; min-width: 0; text-align: left; border: none; background: none; cursor: pointer; font: inherit;
    color: var(--text); padding: .3rem .5rem; border-radius: 6px;
}
.tree-row:hover { background: var(--surface-2); }
.tree-row.active { background: var(--lime-050); font-weight: 700; box-shadow: inset 3px 0 0 var(--lime); color: var(--ink); }
.tree-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-toggle { display: none; }
@media (max-width: 900px) {
    .catalog-layout { grid-template-columns: 1fr; }
    .cat-tree { display: none; position: static; max-height: 50vh; }
    .cat-tree.open { display: block; }
    .tree-toggle { display: inline-flex; align-items: center; order: -1; }
}

/* ---- Toolbar (breadcrumb + search) ---- */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.crumbs { color: var(--muted); font-size: .95rem; }
.crumbs a { cursor: pointer; text-decoration: none; font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .sep { margin: 0 .4rem; color: #808595; }
.search {
    width: 320px; max-width: 100%; padding: .55rem .8rem; font-size: .95rem;
    border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.search:focus { outline: 2px solid var(--focus); border-color: var(--focus); }
.count { color: var(--muted); margin: 0 0 .8rem; }
.hint { color: var(--muted); font-style: italic; }
/* Zoek-highlight + branded lege-staat. */
mark { background: var(--lime-050); color: inherit; padding: 0 .05em; border-radius: 2px; }
.empty-state { text-align: center; color: var(--muted); padding: 3rem 1rem; }
.empty-state .ico { color: var(--lime-600); margin-bottom: .6rem; }
.empty-state .empty-title { font-weight: 700; color: var(--ink); margin: 0 0 .2rem; }
.muted { color: var(--muted); font-size: .85em; }

/* ---- AI-zoeken ---- */
.searchbox { display: flex; align-items: stretch; gap: .4rem; }
/* Knop zonder label: alleen het sprankel-icoon. */
.ai-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; padding: 0; border: 1px solid var(--line); border-radius: 8px;
    background: #fff; color: var(--muted); cursor: pointer;
    transition: background .12s, color .12s, border-color .12s, box-shadow .12s;
}
.ai-toggle:hover { color: var(--ink); border-color: var(--lime-600); }
.ai-toggle.on {
    background: var(--lime); color: var(--on-lime); border-color: var(--lime-600);
    box-shadow: 0 0 0 3px var(--lime-050);
}
/* AI-modus: opvallend andere achtergrond op de zoekbalk. */
.searchbox.ai .ai-input {
    background: linear-gradient(90deg, var(--lime-050), #fffef2);
    border-color: var(--lime-600);
}
.searchbox.ai .ai-input:focus { outline: 2px solid var(--lime-600); border-color: var(--lime-600); }
.searchbox.ai .ai-input::placeholder { color: #8a8a55; }

.ai-panel { display: block; }
.ai-hint {
    display: flex; gap: 1rem; align-items: flex-start;
    background: linear-gradient(180deg, var(--lime-050), var(--panel));
    border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.4rem;
}
.ai-hint-icon { color: var(--lime-600); line-height: 0; }
.ai-hint-title { font-weight: 700; color: var(--ink); margin: 0 0 .2rem; }
.ai-examples { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }

.ai-interpret { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.ai-badge {
    display: inline-flex; align-items: center; gap: .25rem;
    background: var(--ink); color: #fff; font-weight: 800; font-size: .72rem;
    padding: .15rem .5rem; border-radius: 999px;
}
.ai-badge .ico { color: var(--lime); }
.ai-understood { color: var(--muted); font-size: .9rem; }
/* Chip = één begrepen eis; als .ex ook een klikbare voorbeeldvraag. */
.ai-chip {
    display: inline-block; background: var(--lime-050); color: var(--ink);
    border: 1px solid var(--lime-600); border-radius: 999px;
    padding: .18rem .6rem; font-size: .82rem; font-weight: 600;
}
.ai-chip.ex { cursor: pointer; font-weight: 500; background: #fff; }
.ai-chip.ex:hover { background: var(--lime-050); }

.ai-reach { color: var(--lime-600); font-weight: 700; font-size: .78rem; }

.ai-storage {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.1rem 1.3rem; max-width: 640px;
}
.ai-storage-head { display: flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--ink); margin-bottom: .8rem; }
.ai-storage-head .ico { color: var(--lime-600); }
.ai-storage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1.2rem; margin-bottom: .9rem; }
.ai-storage-grid > div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--line); padding-bottom: .3rem; }
.ai-storage-grid .k { color: var(--muted); }
.ai-storage-grid .v { font-weight: 700; color: var(--ink); text-align: right; }
@media (max-width: 560px) { .ai-storage-grid { grid-template-columns: 1fr; } }

/* ---- Card grid (catalogus) — feature-card-taal van tkhsecurity.com (tkh2026) ----
   Beeld-forward: afbeelding bovenaan (vaste ratio, 'contain' op base-2), inhoud
   eronder LINKS uitgelijnd; hover = lift + lichte beeld-zoom (scale 1.05) + limoen-rand.
   Dit haalt de catalogus weg bij de gedateerde 'directory-listing' van de oude
   catalog-site en dicht 'm aan bij de marketing-site. */
.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 1.25rem; }
.card {
    position: relative; background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 0 0 .9rem; overflow: hidden;
    text-align: left; cursor: pointer; font: inherit; color: inherit;
    display: flex; flex-direction: column; gap: .35rem;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.card:hover { box-shadow: 0 10px 24px rgba(28,38,55,.10); transform: translateY(-3px); border-color: var(--lime); }
.card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Beeldblok bovenaan: volle breedte, vaste 4:3-ratio, product 'contained' op licht vlak. */
.card .card-img, .card .folder-icon {
    width: 100%; aspect-ratio: 4 / 3; margin: 0 0 .6rem; line-height: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-2); overflow: hidden;
}
.card .card-img img { width: 100%; height: 100%; max-height: none; object-fit: contain; padding: .9rem; transition: transform .3s ease; }
.card:hover .card-img img { transform: scale(1.05); }
.card .folder-icon { color: var(--lime-600); }
.card .folder-icon svg { width: 82px; height: 82px; }
.card:hover .folder-icon { color: var(--lime); }
/* Folder-preview: een LICHTE TKH-lime 'map' met max 3 productminiaturen ERIN (binnen de map
   geclipt, zonder wit kader rond de foto's). De map-vulling is een lichte tint van de
   merk-lime (--lime = #CCCC00) — zo licht als de tkh2026-huisstijl toelaat en toch herkenbaar
   groen. De tab is iets dieper zodat de map-vorm afleesbaar blijft. */
.card .folder-viz { position: relative; width: 82%; aspect-ratio: 1.5 / 1; }
.card .folder-tab {
    position: absolute; top: 0; left: 5%; width: 42%; height: 24%;
    background: color-mix(in srgb, var(--lime) 58%, #fff); border-radius: 7px 7px 0 0;
}
.card .folder-body {
    position: absolute; left: 0; right: 0; top: 15%; bottom: 0;
    background: color-mix(in srgb, var(--lime) 38%, #fff);
    border: 1px solid color-mix(in srgb, var(--lime) 55%, #fff); border-radius: 9px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 3px rgba(28,38,55,.14);
    display: flex; align-items: stretch; gap: 5%; padding: 8% 7%; overflow: hidden;
}
/* Geen wit kader: de productfoto staat rechtstreeks in de map. */
.card .folder-body .ft {
    flex: 1 1 0; min-width: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.card .folder-body .ft img { width: 100%; height: 100%; object-fit: contain; padding: 5%; }
.card:hover .folder-tab { background: color-mix(in srgb, var(--lime) 74%, #fff); }
.card:hover .folder-body { background: color-mix(in srgb, var(--lime) 50%, #fff); }
.card.mini .folder-viz { width: 92%; }
.card.mini .folder-icon svg { width: 40px; height: 40px; }
.card .card-name { font-weight: 700; padding: 0 .9rem; letter-spacing: -.01em; }
.card.product .card-name { color: var(--ink); }
/* Eén-/tweeregelige beschrijving met gereserveerde hoogte → geen layout-shift. */
.card-desc { color: var(--muted); font-size: .82rem; font-weight: 400; line-height: 1.3; padding: 0 .9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.1em; }
.card .muted { padding: 0 .9rem; }
.card .ai-reach { padding: 0 .9rem; }
.card > .badge { align-self: flex-start; margin: .1rem .9rem 0; }
/* Compacte variant (Related-grid in productdetail): kleiner beeldpaneel, strakker. */
.card.mini { padding-bottom: .6rem; }
.card.mini .card-img { margin-bottom: .4rem; }
.card.mini .card-img img { padding: .55rem; }

/* ---- Status badge ---- */
.badge { display: inline-block; font-size: .72rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; }
.badge:empty { padding: .35rem; border-radius: 50%; min-width: .35rem; }
.badge.ok { background: #e6f4ea; color: var(--ok); }
.badge.warn { background: #fcf3da; color: var(--warn); }
.badge.bad { background: #fbe9e7; color: var(--bad); }
.badge.optical { background: #e3f0fd; color: #1565c0; }
.badge.thermal { background: #fdeee3; color: #d84315; }

/* ---- Product view (sidebar + detail) ---- */
.product-view { display: grid; grid-template-columns: 260px 1fr; gap: 1.2rem; align-items: start; }
.sidebar {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; max-height: 78vh; overflow-y: auto;
}
.sb-item {
    display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
    padding: .5rem .7rem; border: none; border-bottom: 1px solid var(--line);
    background: #fff; cursor: pointer; font: inherit; color: inherit;
}
.sb-item:hover { background: var(--surface-2); }
.sb-item.active { background: var(--lime-050); box-shadow: inset 3px 0 0 var(--lime); }
.sb-thumb { width: 44px; height: 36px; flex: 0 0 44px; display: flex; align-items: center; justify-content: center; }
.sb-thumb img { max-width: 44px; max-height: 36px; object-fit: contain; }
.sb-name { flex: 1; font-weight: 600; font-size: .9rem; }

.detail-pane { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.4rem; min-height: 60vh; }
.pd-empty { color: var(--muted); padding: 2rem; }
.pd-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: .8rem; margin-bottom: .2rem; }
.pd-header h2 { margin: 0; }
.pd-sub { color: var(--muted); margin: .3rem 0 0; }
.pd-links a { font-weight: 600; text-decoration: none; white-space: nowrap; }

/* ---- Tabs ---- */
.tabs { display: flex; gap: .2rem; border-bottom: 2px solid var(--line); margin: .8rem 0 1rem; }
.tab { border: none; background: none; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; padding: .6rem .9rem; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.subtabs { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 1rem; }
.subtab { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: .35rem .8rem; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; }
.subtab.active { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ---- Web tab ---- */
.web { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.web .hero { max-width: 320px; max-height: 320px; object-fit: contain; }
.web .webinfo { flex: 1; min-width: 240px; }
/* Primaire knop = site-CTA: navy vlak + witte tekst (de site gebruikt navy knoppen;
   limoen blijft spaarzaam accent, niet de default-vulkleur). */
.btn { display: inline-block; background: var(--navy); color: #fff; font-weight: 700; padding: .55rem 1rem; border-radius: var(--radius); text-decoration: none; border: 1px solid var(--navy); }
.btn:hover { background: var(--navy-800); border-color: var(--navy-800); filter: none; }
/* Limoen-accentknop voor de zeldzame 'pop'-actie (tekst = dark-blue voor contrast). */
.btn.accent { background: var(--lime); color: var(--on-lime); border-color: var(--lime-600); }
.btn.accent:hover { background: var(--lime-600); }

/* ---- Related grid reuses .cardgrid/.card.mini ---- */

/* ---- Mounting routes ---- */
.routes { display: flex; flex-direction: column; gap: .6rem; }
.route { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .8rem; }
.route-num { font-weight: 800; color: var(--blue); min-width: 1.6rem; }
.route .plus { font-weight: 800; color: var(--muted); font-size: 1.2rem; }
.part { margin: 0; text-align: center; width: 96px; }
.part img { max-width: 90px; max-height: 70px; object-fit: contain; }
.part figcaption { font-size: .8rem; font-weight: 600; margin-top: .2rem; }

/* ---- Projection ---- */
.proj { margin-bottom: 1.4rem; }
.proj h4 { color: var(--muted); font-weight: 600; margin-bottom: .5rem; }
.proj-aov, .proj-dori { border-collapse: collapse; margin: .3rem 0; }
.proj-aov td, .proj-dori td { padding: .2rem .6rem; }
.proj .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.proj .dots { color: var(--muted); }
/* Alle sectiekoppen vet en in dezelfde grijstint; EN 62676-4:2014 staat kleiner. */
.proj-std { color: var(--muted); margin: .6rem 0 .2rem; font-weight: 700; }
.proj-std-2025 { margin-top: .3rem; }
.proj-dori-2014 td, .proj-johnson td, .proj-vca td { font-size: .86rem; }
/* Scheidingslijn tussen meerdere camera/lens-combinaties (bv. box camera). */
.proj + .proj { border-top: 1px solid var(--line); padding-top: 1.4rem; }

/* ---- Properties table ---- */
.props { border-collapse: collapse; width: 100%; }
.props th { text-align: left; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid var(--line); padding: .4rem .8rem .4rem 0; }
.props td { border-bottom: 1px solid var(--line); padding: .35rem .8rem .35rem 0; vertical-align: top; overflow-wrap: anywhere; }
/* Categorie-label: zwart (limoen-tekst op wit heeft te weinig contrast). */
.props .cat { color: var(--ink); font-weight: 700; white-space: nowrap; }
/* Filterbare, scanbare Properties-tabel: eigen scroll-container + sticky header,
   categorie-groepskoppen, zebra-rijen. */
.props-tools { margin: 0 0 .6rem; }
.props-search { width: 320px; max-width: 100%; }
.props-wrap { max-height: 62vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.props-wrap .props { width: 100%; }
.props-wrap thead th { position: sticky; top: 0; z-index: 2; background: var(--panel); box-shadow: inset 0 -2px 0 var(--line); }
.props-wrap .props th, .props-wrap .props td { padding: .4rem .8rem; }
.props tbody tr:nth-child(even) td { background: #f2f3f5; }
.props-group th {
    position: sticky; top: 1.9rem; z-index: 1; text-align: left;
    background: var(--lime-050); color: var(--ink); font-weight: 700;
    text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--line);
    box-shadow: inset 3px 0 0 var(--lime);
}
/* Kern-specs in de Web-tab. */
.props-mini { margin-top: .8rem; }
.props-mini td { border-bottom: 1px solid var(--line); padding: .3rem .8rem .3rem 0; }

/* ---- Storage calculator (eenvoudig) ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: .6rem; max-width: 720px; }
.grid label { display: flex; flex-direction: column; font-weight: 600; gap: .2rem; }
.grid input, .grid select { padding: .45rem; border: 1px solid var(--line); border-radius: 6px; }

@media (max-width: 760px) {
    .product-view { grid-template-columns: 1fr; }
    .sidebar { max-height: none; display: flex; overflow-x: auto; }
}

/* ---- Responsive header + toolbar (mobiel/tablet) ----
   Onder 768px verhuist nav + taalkeuze naar het hamburgermenu, staat de zoekbalk
   over de volle breedte en verdwijnt alle horizontale overflow (360–414px). */
@media (max-width: 768px) {
    .appbar { gap: .6rem; padding: 0 .8rem; }
    .brand-title { display: none; }
    .topnav, .admin-link, .langpicker { display: none; }
    .app-menu { min-width: 250px; max-width: 86vw; max-height: 78vh; overflow-y: auto; }

    .toolbar { gap: .6rem; }
    .tools { width: 100%; flex-wrap: wrap; align-items: stretch; gap: .6rem; }
    .search { width: 100%; }
}

/* klikbare montage-part */
.part.clickable { cursor: pointer; border: 1px solid transparent; border-radius: 8px; padding: .3rem; background: none; transition: border-color .12s, background .12s; }
.part.clickable:hover { border-color: var(--blue); background: #fff; }

/* filter-schakelaar */
.tools { display: flex; align-items: center; gap: 1rem; }
.toggle { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; }
.toggle input { width: 16px; height: 16px; accent-color: var(--blue); cursor: pointer; }

/* twee gestapelde filter-checkboxes naast de zoekbalk */
.tools { align-items: flex-start; }
.toggles { display: flex; flex-direction: column; gap: .25rem; }

/* taalkiezer */
.langpicker { margin-left: auto; position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: .4rem; background: none; border: 1px solid rgba(28,38,55,.18); border-radius: var(--radius); padding: .4rem .7rem; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; }
.lang-btn:hover { background: rgba(28,38,55,.06); }
.lang-btn .globe { font-size: 1.1rem; }
.lang-btn .caret { color: var(--muted); }
.lang-menu { position: absolute; right: 0; top: 115%; list-style: none; margin: 0; padding: .3rem; min-width: 150px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); z-index: 30; }
.lang-menu li button { width: 100%; text-align: left; border: none; background: none; padding: .45rem .6rem; border-radius: 6px; font: inherit; cursor: pointer; color: var(--text); }
.lang-menu li button:hover { background: var(--surface-2); }
.lang-menu li button.active { background: var(--blue); color: #fff; }

/* Beheer (/beheer) */
.admin-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; margin-left: .4rem; border-radius: 8px;
    text-decoration: none; font-size: 1.1rem; color: var(--muted);
    border: 1px solid transparent;
}
.admin-link:hover { background: rgba(28,38,55,.06); color: var(--ink); border-color: transparent; }
.admin-card {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 1.2rem 1.4rem; max-width: 760px;
}
.admin-card .kv { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.admin-card .kv td { padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-card .kv tr td:first-child { color: var(--muted); white-space: nowrap; width: 1%; padding-right: 1.4rem; }
.admin-card code { background: var(--surface-2); padding: .15rem .4rem; border-radius: 6px; font-size: .9em; word-break: break-all; }
.admin-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
button.btn { border: none; cursor: pointer; font: inherit; font-weight: 700; }
.btn[disabled] { opacity: .6; cursor: default; filter: none; }
.ok-msg { color: var(--ok); font-weight: 600; }
.err-msg { color: var(--bad); font-weight: 600; }

/* Hamburgermenu (linksboven) + versie-modal */
.menuwrap { position: relative; display: flex; align-items: center; }
.hamburger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 8px;
    background: none; border: 1px solid transparent; cursor: pointer;
    font-size: 1.25rem; line-height: 1; color: var(--ink);
}
.hamburger:hover { background: rgba(28,38,55,.06); border-color: transparent; }
.app-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
    margin: 0; padding: .35rem; list-style: none; min-width: 210px;
    background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
}
.app-menu li { list-style: none; }
.app-menu button, .app-menu a {
    display: block; width: 100%; text-align: left; background: none; border: none;
    padding: .55rem .7rem; border-radius: 7px; font: inherit; color: var(--text); cursor: pointer;
    text-decoration: none;
}
.app-menu button:hover, .app-menu a:hover { background: var(--surface-2); }
/* Nav-items in het (mobiele) menu krijgen dezelfde look; actief = limoen-indicator links. */
.app-menu .menu-nav { display: block; width: 100%; padding: .55rem .7rem; border-radius: 7px; font: inherit; font-weight: 600; color: var(--text); text-decoration: none; }
.app-menu .menu-nav:hover { background: var(--surface-2); }
.app-menu .menu-nav.active { box-shadow: inset 3px 0 0 var(--lime); background: var(--lime-050); }
.app-menu .menu-label { padding: .5rem .7rem .15rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.app-menu .menu-divider { height: 1px; margin: .35rem .3rem; padding: 0; background: var(--line); }
.app-menu button.active { background: var(--lime-050); box-shadow: inset 3px 0 0 var(--lime); }
/* Op desktop staan nav + taalkeuze inline in de balk; verberg de mobiele kopieën. */
@media (min-width: 769px) { .app-menu .menu-mobile-only { display: none; } }

.modal-backdrop {
    position: fixed; inset: 0; z-index: 50; padding: 1rem;
    background: rgba(28, 29, 31, .45); display: flex; align-items: center; justify-content: center;
}
.modal {
    background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(28, 29, 31, .25);
    padding: 1.4rem 1.6rem; min-width: 320px; max-width: 90vw;
}
.modal:focus { outline: none; } /* dialoog krijgt focus voor Esc/schermlezer, zonder zichtbare ring */
.modal h3 { margin: 0 0 1rem; }
.modal .kv { width: 100%; border-collapse: collapse; margin-bottom: 1.2rem; }
.modal .kv td { padding: .45rem .6rem; border-bottom: 1px solid var(--line); }
.modal .kv tr td:first-child { color: var(--muted); padding-right: 1.6rem; white-space: nowrap; }
.modal-actions { display: flex; justify-content: flex-end; }

/* Opslagcalculator (/storage) */
.sc-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.2rem; align-items: start; }
@media (max-width: 980px) { .sc-layout { grid-template-columns: 1fr; } }
.sc-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.sc-card h2 { font-size: 1.05rem; margin: 0 0 .7rem; }
.sc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.sc-card-head h2 { margin: 0; }
.sc-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.sc-table th, .sc-table td { padding: .4rem .5rem; border-bottom: 1px solid var(--line); text-align: left; }
.sc-table th { color: var(--muted); font-weight: 600; }
.sc-table .num, td.num, th.num { text-align: right; }
.sc-rowbtns { white-space: nowrap; text-align: right; }
.iconbtn { background: none; border: 1px solid transparent; border-radius: 6px; cursor: pointer; font-size: .95rem; padding: .2rem .4rem; color: var(--muted); }
.iconbtn:hover { background: var(--surface-2); color: var(--blue); border-color: var(--line); }
.sc-params { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1rem; }
.sc-params label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; color: var(--muted); }
.sc-params input, .sc-params select { padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; color: var(--text); background: #fff; }
.sc-params .sc-check { flex-direction: row; align-items: center; gap: .5rem; grid-column: 1 / -1; }
.sc-totals .kv { width: 100%; }
.sc-totals .kv td { padding: .35rem .4rem; border-bottom: 1px solid var(--line); }
.sc-plan { border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem; margin-bottom: .9rem; }
.sc-plan.recommended { border-color: var(--lime); box-shadow: 0 0 0 2px rgba(204,204,0,.22); }
.sc-plan-head { font-weight: 700; color: var(--blue); margin-bottom: .5rem; }
.sc-plan-select { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.sc-plan-select input[type="radio"] { cursor: pointer; margin: 0; }
/* Opslagplan-regel: producten met foto boven de naam (zoals in de catalogus), met de
   rekenkundige notatie (+, × n, { }) als tekst ertussen. Producten zonder foto tonen
   alleen hun naam; alles staat verticaal gecentreerd zodat de regel netjes uitlijnt. */
.sc-plan-line { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: 1.02rem; margin: .45rem 0; }
.sc-plan-item { display: flex; flex-direction: column; align-items: center; gap: .2rem; max-width: 120px; }
.sc-plan-img { width: 96px; height: 62px; object-fit: contain; }
.sc-plan-name { font-weight: 600; text-align: center; line-height: 1.2; }
.sc-plan-op { color: var(--muted); font-weight: 700; white-space: nowrap; }
.sc-plan-brace { color: var(--muted); font-size: 1.7rem; line-height: 1; }
/* Houdt aantal + accolade + product bij elkaar op één regel. */
.sc-plan-group { display: inline-flex; align-items: center; gap: .4rem; }
.sc-plan-plus { margin: 0 .5rem; }
.sc-plan-table { width: 100%; margin-top: .6rem; }
.sc-plan-table td { padding: .25rem .5rem; border-bottom: 1px solid var(--line); }
.sc-plan-table td.num { text-align: right; font-weight: 600; white-space: nowrap; }
.sc-editor { min-width: 420px; max-width: 560px; }
.sc-editgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1rem; }
.sc-editgrid label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; color: var(--muted); }
.sc-editgrid input, .sc-editgrid select { padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.sc-editgrid .sc-check { flex-direction: row; align-items: center; gap: .5rem; }
/* Eigen bron-combobox met stijlbare suggestie-popup. Een native <datalist> laat de
   breedte van zijn popup niet bepalen, waardoor lange modelnamen (bijv. BL2002v2LPR)
   werden afgekapt; deze popup groeit mee met de langste naam (width: max-content). */
.sc-combo { position: relative; }
.sc-combo-input { width: 100%; box-sizing: border-box; padding-right: 1.9rem; }
/* Wisknop (×) rechts in het bronveld. */
.sc-combo-clear {
    position: absolute; top: 50%; right: .4rem; transform: translateY(-50%);
    width: 1.3rem; height: 1.3rem; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: none; background: none; cursor: pointer;
    color: var(--muted); font-size: 1.15rem; line-height: 1; border-radius: 50%;
}
.sc-combo-clear:hover { background: rgba(0, 0, 0, .08); color: var(--text); }
.sc-combo-list {
    position: absolute; left: 0; top: calc(100% + 3px); z-index: 60;
    margin: 0; padding: .25rem; list-style: none;
    min-width: 100%; width: max-content; max-width: min(360px, 80vw);
    max-height: 260px; overflow-y: auto;
    background: var(--panel); color: var(--text);
    border: 1px solid var(--line); border-radius: 8px;
    box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, .18));
}
.sc-combo-item { padding: .35rem .55rem; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.sc-combo-item:hover { background: rgba(0, 0, 0, .06); }
.sc-combo-item.is-selected { background: var(--accent); color: var(--text); }
/* Motion-checkbox + %-veld over de volle breedte, verticaal gestapeld, zodat het
   %-invoerveld recht onder de checkbox verschijnt i.p.v. in de volgende grid-cel. */
.sc-editgrid .sc-motion { grid-column: 1 / -1; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.sc-editgrid .sc-motion label:not(.sc-check) { width: calc(50% - .5rem); }
.sc-editbitrate { margin: 1rem 0 .4rem; color: var(--muted); }
.btn.ghost { background: none; color: var(--text); border: 1px solid var(--line); }

/* Storage calculator — groups/streams UX (3-koloms) */
.sc-layout-3 { display: grid; grid-template-columns: 3fr 5fr 4fr; gap: 1.2rem; align-items: start; }
@media (max-width: 1200px) { .sc-layout-3 { grid-template-columns: 1fr; } }
.sc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1rem; }
.sc-fields.one { grid-template-columns: 1fr; }
.sc-fields label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; color: var(--muted); }
.sc-fields input, .sc-fields select, .sc-fields textarea { padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; color: var(--text); background: #fff; }
.sc-fields textarea { resize: vertical; min-height: 3.2rem; }
.sc-fields .full { grid-column: 1 / -1; }
/* Motion-checkbox + %-veld over de volle breedte, verticaal gestapeld: het %-veld
   verschijnt recht onder de checkbox i.p.v. in de volgende grid-cel. */
.sc-fields .sc-motion { grid-column: 1 / -1; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.sc-fields .sc-motion .sc-check { flex-direction: row; align-items: center; gap: .5rem; }
.sc-fields .sc-motion label:not(.sc-check) { width: min(50%, 12rem); }
.sc-req { color: #d33; }
.sc-notice { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); line-height: 1.5; }
.sc-notice b { color: var(--text); }
.sc-alert { display: flex; align-items: center; gap: .5rem; border: 1px solid #f0b4b4; background: #fff6f6; color: #c0143c; border-radius: 8px; padding: .6rem .8rem; margin-bottom: .9rem; font-size: .9rem; }
.sc-alert .ico { flex: none; }

.sc-group { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 1rem; background: #fff; }
.sc-group-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .8rem; background: rgba(204,204,0,.30); cursor: pointer; }
.sc-group-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text); }
.sc-group-titlewrap { display: flex; align-items: center; gap: .4rem; }
.sc-group-actions { display: flex; align-items: center; gap: .2rem; }
.sc-name-input { font-size: 1.02rem; font-weight: 700; padding: .2rem .4rem; border: 1px solid var(--line); border-radius: 6px; }
.sc-group-body { padding: .9rem .8rem; display: flex; flex-direction: column; gap: .9rem; }

.sc-stream { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.sc-stream-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .45rem .7rem; background: rgba(204,204,0,.10); cursor: pointer; font-weight: 600; }
.sc-stream-actions { display: flex; align-items: center; gap: .2rem; }
.sc-stream-body { padding: .8rem .7rem; display: flex; flex-direction: column; gap: .8rem; }
.sc-stream-body .sub { padding-top: .7rem; border-top: 1px solid var(--line); }
.sc-fields.sub { padding-top: .8rem; border-top: 1px solid var(--line); }
.sc-record { display: flex; flex-direction: column; gap: .2rem; }
.sc-record .sc-check { flex-direction: row; align-items: center; gap: .5rem; }
.sc-record .hint { margin: 0; }
.sc-sep-below { border-bottom: 1px solid var(--line); padding-bottom: .8rem; }
/* Calculated/Manual bitrate-toggle: de actieve knop licht lime op. */
.sc-toggle { display: inline-grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.sc-toggle-btn { padding: .45rem .9rem; border: none; background: #fff; color: var(--text); cursor: pointer; font: inherit; transition: background .12s; }
.sc-toggle-btn + .sc-toggle-btn { border-left: 1px solid var(--line); }
.sc-toggle-btn:hover { background: rgba(204,204,0,.14); }
.sc-toggle-btn.is-active { background: var(--lime); font-weight: 600; }
.sc-toggle-btn.is-active:hover { background: var(--lime); }
.sc-addstream { width: 100%; }
.sc-bitrate { font-size: .85rem; color: var(--muted); }
.sc-bitrate b { color: var(--text); }
.sc-vca-placeholder { font-size: .8rem; color: var(--muted); font-style: italic; padding-top: .6rem; border-top: 1px dashed var(--line); }

.sc-sum-total td { background: rgba(204,204,0,.16); font-weight: 700; }
.sc-sum-group td { background: var(--surface-2); font-weight: 600; }
.sc-sum-stream td:first-child { padding-left: 1.1rem; color: var(--muted); }

/* Video Server Capacity — puntenbudget-balk per plan */
.sc-cap { margin-top: .7rem; }
.sc-cap-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .3rem; }
.sc-cap-title { font-weight: 700; color: var(--text); }
.sc-cap-count { font-size: .85rem; color: var(--muted); }
.sc-cap-bar { height: 8px; border-radius: 6px; background: rgba(0,0,0,.08); overflow: hidden; }
.sc-cap-fill { height: 100%; background: var(--lime); border-radius: 6px; transition: width .2s; }
.sc-cap-fill.over { background: #d33; }
.sc-cap-error { color: #d33; font-size: .82rem; margin: .35rem 0 0; }

/* 3D-projectie-overlay */
.btn-3d { margin-left: .6rem; font-size: .8rem; padding: .15rem .55rem; vertical-align: middle; }
.proj3d-modal { width: min(940px, 94vw); max-width: 94vw; }
.proj3d-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .6rem; }
.proj3d-head h3 { margin: 0; }
.proj3d-actions { display: flex; align-items: center; gap: .5rem; }
.proj3d-toggle { display: flex; gap: .25rem; }
.proj3d-tabs { margin: 0 0 .8rem; }
.proj3d-pane { display: none; }
.proj3d-pane.active { display: block; }

/* Preset-tab: instelbaar zij- + bovenaanzicht (SVG). */
.preset-ctl { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; align-items: center; margin: 0 0 .5rem; }
.preset-ctl label { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--muted); white-space: nowrap; }
.preset-ctl input[type=range] { width: 150px; }
.preset-ctl b { color: var(--text); font-weight: 600; }
.preset-num { width: 4.6rem; padding: .2rem .35rem; border: 1px solid var(--line); border-radius: 6px; font: inherit; color: var(--text); }
.preset-out { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: 0 0 .6rem; font-size: .9rem; color: var(--muted); }
.preset-out b { color: var(--text); }
.preset-svg { width: 100%; height: auto; display: block; background: #fff; border: 1px solid var(--line); border-radius: 10px; margin-bottom: .5rem; }
.pre-ground { stroke: var(--ink); stroke-width: 1.5; }
.pre-ref { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 5 4; }
.pre-axis { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 6 3 2 3; }
.pre-ray { stroke: var(--ink); stroke-width: 2; fill: none; }
.pre-axisline { stroke: var(--muted); stroke-width: 1; }
.pre-tick { stroke: var(--muted); stroke-width: 1; }
.pre-tlab { font-size: 10.5px; fill: var(--muted); }
.pre-arc { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.pre-ang { font-size: 15px; font-style: italic; font-weight: 600; fill: var(--ink); }
.pre-person { fill: var(--ink); }
.pre-dim { stroke: var(--muted); stroke-width: 1; }
.pre-lab { font-size: 12px; fill: var(--muted); }
.pre-dimlab { font-size: 14px; font-weight: 600; fill: var(--ink); }
.pre-fov { fill: #f6f6d6; fill: color-mix(in srgb, var(--accent) 22%, #fff); stroke: var(--ink); stroke-width: 1.5; }
/* Dekkingsomtrek wanneer het gebied met DORI-kleurbanden (EN 62676-4:2025) is gevuld. */
.pre-fovline { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.pre-coneguide { stroke: var(--ink); stroke-width: 1; }
.pre-inset { fill: none; stroke: var(--ink); stroke-width: 2; }
.preset-print-legend { display: none; }   /* alleen tonen bij printen (printElement) */
/* Kleurlegenda EN 62676-4:2025-zichtgebieden onder het bovenaanzicht. */
.preset-zonekey { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: -.2rem 0 .6rem; font-size: .8rem; color: var(--muted); }
.preset-zonekey-item { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.preset-zonekey-sw { width: 15px; height: 10px; border: 1px solid var(--line); border-radius: 2px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* Inzet-achtergrond = dezelfde vulling als de FoV-achtergrond van de onderste grafiek. */
.pre-inset-bg { fill: #f6f6d6; fill: color-mix(in srgb, var(--accent) 22%, #fff); }
.pre-fovlab { font-size: 13px; fill: var(--muted); letter-spacing: .02em; }
/* HFoV / W: sterk aangezet en leesbaar boven de kegelvulling (witte omranding). */
.pre-outval { font-size: 17px; font-weight: 800; fill: var(--ink); stroke: #fff; stroke-width: 3px; paint-order: stroke; stroke-linejoin: round; }
.pre-doll { fill: var(--accent); stroke: var(--ink); stroke-width: 1; }
.pre-scenew { stroke: var(--ink); stroke-width: 2; }
.proj3d-canvas { width: 100%; height: 60vh; min-height: 320px; display: block; border-radius: 10px; background: #fff; border: 1px solid var(--line); cursor: grab; touch-action: none; }
.proj3d-canvas:active { cursor: grabbing; }
.proj3d-zoom { display: flex; align-items: center; gap: .75rem; margin: 0 0 .6rem; flex-wrap: wrap; }
.proj3d-zoom input[type=range] { flex: 1 1 160px; min-width: 140px; }
.proj3d-zoom-end { font-size: .85rem; color: var(--muted); white-space: nowrap; }
.proj3d-focal-now { font-size: .9rem; white-space: nowrap; }
.proj3d-focal-now b { color: var(--text); }
.proj3d-object { font-size: .85rem; color: var(--muted); display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.proj3d-object select { padding: .2rem .4rem; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.proj3d-vd { font-size: .9rem; white-space: nowrap; }
.proj3d-vd-input { width: 5rem; padding: .2rem .4rem; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.proj3d-hint { color: var(--muted); font-size: .85rem; margin: .4rem 0 0; }
.proj3d-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .5rem; font-size: .85rem; color: var(--muted); }
.proj3d-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: .35rem; vertical-align: middle; }
.btn.ghost:hover { background: var(--surface-2); filter: none; }
.proj3d-foot { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
.proj3d-print { display: inline-flex; align-items: center; gap: .4rem; }
.proj3d-print .print-ico { display: block; }