/* Uitbreiding van de visuele Nexus-demo: extra schermen in dezelfde huisstijl (antraciet met champagne).
   demo.css blijft de basis; dit bestand voegt toe en verbreedt voor grote schermen. */
:root { --lijn: #34393c; --paneel: #1d2125; --paneel2: #252a2e; --stil: #9ca6aa; --champagne: #dfc79c; --groen: #b1c5b5; --rood: #e0a48f; }
main { max-width: 1760px; }
main[data-scherm=mail], main[data-scherm=agenda], main[data-scherm=overzicht] { max-width: 2300px; }
input, select, textarea { font: inherit; color: inherit; background: #15181b; border: 1px solid #454b4f; border-radius: 5px; padding: 8px 10px; max-width: 100%; }
textarea { width: 100%; line-height: 1.6; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--champagne); outline-offset: 2px; }
label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: #b4bcbf; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { text-align: left; font-size: 10px; letter-spacing: .6px; color: var(--stil); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--lijn); white-space: nowrap; }
td { padding: 11px 12px; border-bottom: 1px solid #2c3134; vertical-align: top; }
tr.actief td { background: #dfc79c0d; }
tr.totaal td { font-weight: 650; border-top: 1px solid var(--lijn); }
.tabel-wrap { overflow-x: auto; }
.tabel-wrap.panel { padding: 6px 8px; }
.mono { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 11px; color: #d6c39f; }
.soort { font-size: 9px; color: var(--stil); border: 1px solid #3f4548; border-radius: 3px; padding: 1px 5px; margin-left: 4px; white-space: nowrap; }
.leeg { color: #8e999e; font-size: 12px; padding: 8px 0; }
.note { font-size: 10px; color: #8e999e; line-height: 1.6; margin-top: 8px; }
.knoppen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.button.klein { padding: 6px 10px; font-size: 10.5px; }
.linkknop { background: none; border: 0; padding: 0; color: var(--champagne); font-size: inherit; text-decoration: underline; text-underline-offset: 3px; }
.linkknop:disabled { color: #6f777b; text-decoration: none; }
.status.rood { background: #c0705a1c; color: var(--rood); border-color: #7b4a3d; }
.ai-label { display: inline-block; font-size: 9px; letter-spacing: .4px; color: #e1c593; border: 1px dashed #7a6848; border-radius: 4px; padding: 2px 7px; margin: 2px 0; white-space: nowrap; }
.illustratie { display: inline-block; font-size: 11px; color: #e1c593; border-left: 2px solid #7a6848; padding-left: 8px; }
.callout a { color: var(--champagne); }
.linkrij { display: flex; gap: 8px 14px; flex-wrap: wrap; margin-top: 12px; }
.segment { display: inline-flex; border: 1px solid #454b4f; border-radius: 6px; overflow: hidden; flex-wrap: wrap; }
.segment > * { border: 0; background: transparent; padding: 7px 12px; font-size: 11px; color: #b6bdc0; border-right: 1px solid #353a3d; }
.segment > *:last-child { border-right: 0; }
.segment [aria-pressed=true] { background: #dfc79c22; color: #ecd6ad; }
.segment.scroll { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
.segment.scroll > * { white-space: nowrap; }
.tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--lijn); margin-bottom: 18px; overflow-x: auto; }
.tabs > * { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 0 12px; font-size: 12px; color: #a9b2b5; white-space: nowrap; border-radius: 0; }
.tabs [aria-selected=true] { border-bottom-color: var(--champagne); color: #f0e3c8; }
.panel .tabs { margin-top: -6px; }
.page-title .knoppen { justify-content: flex-end; }
.page-title .sub a { color: var(--champagne); }

/* Navigatie: vijf groepen; op een telefoon een menuknop */
.sidebar { overflow-y: auto; padding-top: 24px; }
.workspace { margin: 22px 10px 8px; }
nav small { margin: 18px 10px 6px; }
nav a { padding: 8px 10px; }
.nav-handleiding { margin-top: 14px; border-top: 1px solid var(--lijn); border-radius: 0 0 5px 5px; }
.menu-knop { display: none; }
.aside-note { margin-top: 18px; }

/* Uitleg per scherm (ingeklapt, onderaan) */
.uitleg { margin-top: 26px; border: 1px solid var(--lijn); border-radius: 7px; padding: 12px 16px; background: #1a1e21; font-size: 12px; }
.uitleg summary { cursor: pointer; color: #c9cfd1; font-size: 11px; }
.uitleg ul { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.uitleg li { color: #b3bcbf; }
.demopil { display: inline-block; font-size: 9px; letter-spacing: .5px; border-radius: 4px; padding: 2px 7px; margin-right: 8px; border: 1px solid; }
.demopil.werkt { color: var(--groen); border-color: #54685c; background: #829d8b15; }
.demopil.vooraf { color: #c7ccce; border-color: #4a5155; }
.demopil.nog { color: #e1c593; border-color: #7a6848; background: #ab8e5718; }

/* Bedrijfsoverzicht: schakelaar kantoor / gebouw */
.schakelaar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.schakelaar button { background: transparent; border: 1px solid #4a5155; border-radius: 5px; padding: 6px 10px; font-size: 10.5px; color: #b8c0c3; }
.schakelaar [aria-pressed=true] { background: #dfc79c22; color: #ecd6ad; border-color: #7a6848; }
iframe.hoog { height: 560px; }
.office-grid { grid-template-columns: minmax(0, 1fr) clamp(260px, 22vw, 360px); }
.attention h3 { font-size: 24px; }
.bottom-grid .dossier-row + .dossier-row { margin-top: 10px; }
.metrics .tegel, .metrics > button { background: #1e2226; border: 1px solid #34393c; border-top: 2px solid #ae9872; border-radius: 7px; padding: 17px 18px; text-align: left; display: block; color: inherit; }
.metrics > button.gekozen { background: #dfc79c14; border-color: #7a6848; }
.metrics strong.klein { font-size: 18px; letter-spacing: -.3px; }
.metrics.drie { grid-template-columns: repeat(3, 1fr); }
#besluiten-lijst { display: block; }

/* Commerciële aanpak */
.aanpak-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; }
.rollen-panel { position: sticky; top: 20px; }
.rollen { padding-left: 18px; line-height: 1.8; color: #c0c7ca; font-size: 12px; }
.aanpak-stappen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; }
.aanpak-stappen li { display: flex; gap: 18px; }
.nr { font-size: 22px; color: var(--champagne); font-weight: 600; letter-spacing: -.5px; min-width: 32px; }
.aanpak-stappen h2 { font-size: 17px; margin-bottom: 8px; }
.aanpak-stappen p { color: #b2bbbe; font-size: 12px; line-height: 1.7; }
.besluit { margin-top: 8px; color: #d8cdb4 !important; }

/* Vandaag */
.vandaag-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 20vw, 340px); gap: 18px; align-items: start; }
.werkblok { margin-top: 18px; }
.werkblok h3 { font-size: 13px; letter-spacing: 0; font-weight: 600; margin-bottom: 8px; }
.werkblok.urgent { border-left: 2px solid var(--rood); padding-left: 12px; }
.teller { font-size: 10px; background: #3b3b35; border-radius: 3px; padding: 1px 6px; margin-left: 6px; color: #ddd; font-weight: 500; }
.werkkop, .werkitem { display: grid; grid-template-columns: minmax(150px, 1fr) 100px 70px 230px; gap: 12px; align-items: center; }
.werkkop { grid-template-columns: 208px minmax(150px, 1fr) 100px 70px 230px; font-size: 9px; letter-spacing: .6px; color: var(--stil); text-transform: uppercase; padding: 4px 0; border-bottom: 1px solid var(--lijn); }
.werkgroep { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid #2c3134; }
.werkklant { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.werkklant small { color: var(--stil); font-size: 10px; }
.werkacties { display: grid; gap: 6px; }
.werktitel { font-size: 12px; color: #eceee9; text-decoration: underline; text-decoration-color: #5a5548; text-underline-offset: 3px; }
.bron, .datum { font-size: 10.5px; color: #a8b1b4; }
.bediening { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.bediening select { padding: 5px 6px; font-size: 10.5px; }
.klaar-lijst { margin-top: 16px; font-size: 12px; color: #a8b1b4; }
.klaar-lijst p { margin: 6px 0; }
.zijkolom { display: grid; gap: 14px; }
.zijkolom .panel { padding: 18px; }
.zijregel { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; padding: 10px 0; border: 0; border-top: 1px solid #2f3437; background: none; font-size: 11.5px; color: inherit; }
.zijregel span { color: #a3adb0; font-size: 10.5px; }
.zijregel:hover strong { color: #ecd6ad; }
.zijregel.voorstel strong::before { content: '◌ '; color: var(--champagne); }
.telling { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.telling a { display: flex; flex-direction: column; background: var(--paneel2); border-radius: 5px; padding: 9px 10px; font-size: 10.5px; color: #b6bfc3; }
.telling b { font-size: 18px; color: #eee; }

/* Mail als mailclient */
.verbinding { font-size: 11px; color: #a9b2b5; border: 1px solid var(--lijn); border-radius: 6px; padding: 8px 12px; margin: -10px 0 18px; background: #1a1e21; }
.mailclient { display: grid; grid-template-columns: 190px minmax(300px, 400px) minmax(0, 1040px); gap: 16px; align-items: start; }
.mailclient > .mail-context { grid-column: 3; }
.mail-mappen { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 16px; }
.mail-mappen a { display: flex; justify-content: space-between; padding: 9px 12px; border-radius: 5px; color: #b3b8bb; font-size: 12px; }
.mail-mappen a[aria-current] { background: #dfc79c20; color: #e5cda3; }
.mail-mappen b { font-size: 10px; background: #3b3b35; padding: 0 6px; border-radius: 3px; }
.mail-lijst { border: 1px solid var(--lijn); border-radius: 7px; background: var(--paneel); overflow: hidden; }
.mail-lijst > .eyebrow { padding: 16px 16px 8px; }
.mail-filters { padding: 0 16px 12px; display: grid; gap: 8px; }
.mail-filters form { display: flex; gap: 6px; }
.mail-filters input { flex: 1; min-width: 0; }
.mail-filters details summary { font-size: 11px; color: #c0c7ca; cursor: pointer; }
.mail-filters .segment { margin-top: 8px; }
.message { text-decoration: none; }
.message .regel { display: flex; justify-content: space-between; gap: 10px; margin: 0; }
.message .regel small { margin: 0; color: #8e999e; }
.mail-lezen { display: grid; gap: 16px; min-width: 0; }
.leeg-venster { min-height: 240px; display: grid; place-items: center; color: #8e999e; }
.terug-lijst { display: none; font-size: 11px; color: var(--champagne); }
.bijlage { font-size: 11px; color: #c9b892; }
.mail-original .linkrij { margin-top: 0; }
.archiveer { margin-top: 16px; font-size: 11px; color: #b4bcbf; }
.archiveer form, .inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.mail-context { padding: 18px 20px; }
.ctx-blok { border-top: 1px solid var(--lijn); padding: 14px 0 4px; font-size: 12px; color: #b9c1c4; }
.ctx-blok:first-of-type { border-top: 0; }
.ctx-blok p { margin: 6px 0; }
.ctx-blok form { display: grid; gap: 8px; margin: 8px 0; }
.ctx-blok form.inline { display: flex; }
.ctx-blok .dossier-row { margin-top: 0; }
.draft-copy br { line-height: 1.9; }

/* Agenda */
.agenda-balk { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.agenda-balk strong { font-size: 14px; margin-left: 6px; }
.agenda-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 20vw, 360px); gap: 18px; align-items: start; }
.agenda-hoofd { min-width: 0; }
.rooster-scroll { max-height: 650px; overflow: auto; border: 1px solid var(--lijn); border-radius: 7px; background: var(--paneel); }
.rooster { display: grid; grid-template-columns: 56px repeat(5, minmax(115px, 1fr)); min-width: 640px; }
.rooster.dag { grid-template-columns: 56px minmax(260px, 1fr); min-width: 0; }
.dagkop { position: sticky; top: 0; z-index: 2; background: #1f2427; border-bottom: 1px solid var(--lijn); padding: 9px 8px; font-size: 11px; color: #c4cacc; height: 36px; }
.dagvlak { position: relative; height: 1440px; }
.uurkolom .dagvlak span { position: absolute; left: 6px; font-size: 9.5px; color: #7f898d; transform: translateY(-50%); }
.uurkolom .dagvlak span:first-child { transform: none; }
.dagkolom { border-left: 1px solid #2c3134; }
.dagkolom .dagvlak { background: repeating-linear-gradient(to bottom, transparent 0 59px, #2a2f32 59px 60px); }
.dagkolom.vandaag .dagkop { color: #ecd6ad; box-shadow: inset 0 -2px 0 var(--champagne); }
.blok { position: absolute; text-align: left; background: #dfc79c26; border: 1px solid #7a6848; border-left: 3px solid var(--champagne); border-radius: 5px; padding: 4px 7px; font-size: 10.5px; line-height: 1.35; overflow: hidden; color: #f2ead9; }
.blok small { display: block; color: #c3b89f; font-size: 9.5px; }
.blok.voorstel { background: transparent; border-style: dashed; border-left-style: dashed; color: #d8cdb4; }
.blok.gekozen { outline: 2px solid var(--champagne); z-index: 1; }
.maand { border: 1px solid var(--lijn); border-radius: 7px; overflow: hidden; background: var(--paneel); }
.maandkop, .maandraster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.maandkop span { padding: 8px; font-size: 10px; color: var(--stil); border-bottom: 1px solid var(--lijn); }
.maanddag { min-height: 96px; border-right: 1px solid #2c3134; border-bottom: 1px solid #2c3134; padding: 6px; display: flex; flex-direction: column; gap: 3px; font-size: 11px; min-width: 0; }
.maanddag.buiten { opacity: .45; }
.maanddag.vandaag { background: #dfc79c0f; }
.maanditem { text-align: left; background: #dfc79c22; border: 1px solid #7a6848; border-radius: 3px; font-size: 9.5px; padding: 2px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.maanditem.voorstel { background: transparent; border-style: dashed; }
.zonder-tijd { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 14px 0; }
.zonder-tijd .eyebrow { margin: 0 6px 0 0; }
.afspraak-form summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.afspraak-form form { display: grid; gap: 12px; margin-top: 14px; max-width: 640px; }
.formrij { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.afspraak-detail { position: sticky; top: 16px; }
.afspraak-detail h2 { margin-bottom: 8px; }
.afspraak-detail p { font-size: 12px; color: #b9c1c4; margin: 6px 0; }
.detailregel { text-transform: capitalize; }
.afspraak-detail .knoppen { margin: 12px 0; }

/* Dossiers */
.volgende-stap { display: flex; justify-content: space-between; align-items: center; gap: 20px; border: 1px solid #7a6848; background: linear-gradient(90deg, #dfc79c18, #1d2125 70%); border-radius: 8px; padding: 18px 22px; margin-bottom: 18px; flex-wrap: wrap; }
.volgende-stap .eyebrow { color: #e1c593; margin-bottom: 4px; }
.volgende-stap .zin { font-size: 15px; color: #f2ead9; max-width: 80ch; }
.volgende-stap .note { margin-top: 4px; }
.inline-details { position: relative; }
.inline-details summary { list-style: none; cursor: pointer; }
.inline-details summary::-webkit-details-marker { display: none; }
.inline-details form { display: flex; gap: 6px; margin-top: 8px; }
.ankers { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; font-size: 11px; }
.steps.keten span { padding: 11px 12px; }
.dossier-balk { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.dossier-balk .segment.scroll { flex: 1 1 auto; }
.bord { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.baan { background: #1a1e21; border: 1px solid var(--lijn); border-radius: 7px; padding: 12px; min-height: 160px; }
.baan h3 { font-size: 12px; letter-spacing: 0; font-weight: 600; margin-bottom: 10px; }
.kaartje { display: flex; flex-direction: column; gap: 3px; background: var(--paneel2); border-radius: 5px; padding: 10px; margin-bottom: 8px; font-size: 12px; }
.kaartje small { color: var(--stil); font-size: 10px; }
.drie-kol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 16px 0; }
.drie-kol h3 { font-size: 12px; letter-spacing: 0; font-weight: 600; margin-bottom: 6px; color: #e3d3b2; }
.drie-kol ul { padding-left: 16px; margin: 0; color: #b7c0c3; font-size: 12px; line-height: 1.8; }
.drie-kol p { font-size: 12px; color: #b7c0c3; margin: 6px 0; line-height: 1.6; }
.beoordeling { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.beoordeling div { background: var(--paneel2); border-radius: 5px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 11px; }
.beoordeling small { color: var(--stil); font-size: 10px; }
.beoordeling span { color: #c3b89f; }
.detail-grid.breed-zij { grid-template-columns: minmax(0, 1fr) clamp(300px, 22vw, 380px); }
.detail-grid > *, .vandaag-grid > *, .agenda-grid > *, .aanpak-grid > *, .gebouw-grid > *, .mailclient > * { min-width: 0; }
.detail-side .panel { margin-bottom: 18px; }
.detail-side .button + .button { margin-top: 8px; width: 100%; }

/* Atelier en 3D-gebouw */
.gebouw-blok { padding: 0; margin-bottom: 18px; }
.gebouw-blok > summary { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; cursor: pointer; font-size: 14px; font-weight: 600; }
.gebouw-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 20vw, 340px); border-top: 1px solid var(--lijn); }
.gebouw-grid iframe { height: clamp(460px, 34vw, 720px); border-bottom-left-radius: 8px; }
.gebouw-zij, .office-grid .attention#gebouw-persoon { padding: 20px; border-left: 1px solid var(--lijn); background: #202529; font-size: 12px; color: #b9c1c4; }
.gebouw-zij h3, #gebouw-persoon h3 { font-size: 20px; margin: 4px 0 8px; }
.gebouw-zij p, #gebouw-persoon p { margin: 6px 0; }
.project .section-head { margin-bottom: 14px; }
.auto { flex-direction: row; align-items: center; gap: 8px; font-size: 11px; color: #c0c7ca; }
.stappenstrook { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.stapkaart { flex: 0 0 150px; text-align: left; display: flex; flex-direction: column; gap: 4px; background: #1a1e21; border: 1px solid var(--lijn); border-radius: 6px; padding: 10px 11px; font-size: 11px; color: #8e999e; scroll-snap-align: start; }
.stapkaart small { font-size: 9px; letter-spacing: .3px; }
.stapkaart strong { color: #c9cfd1; font-size: 11.5px; font-weight: 600; }
.stapkaart.done { color: #8eab98; }
.stapkaart.done strong { color: #a7bbb0; }
.stapkaart.actief { border-color: var(--champagne); background: #dfc79c1a; color: #e1c593; }
.stapkaart.actief strong { color: #f2ead9; }
.stapkaart.bekeken { outline: 2px dashed #7a6848; }
.stapdetail { margin-top: 14px; padding: 16px; background: #1a1e21; border-radius: 6px; border: 1px solid var(--lijn); }
.stapdetail h3 { font-size: 20px; margin-bottom: 6px; }
.stapdetail p { font-size: 12px; color: #b9c1c4; margin-bottom: 12px; }
.poort { display: grid; gap: 10px; max-width: 760px; }
.aandacht { border-top: 2px solid #ae9872; }
.aandacht p { font-size: 12px; color: #c0c7ca; margin: 8px 0; }
.logboek { max-height: 280px; overflow-y: auto; font-size: 11px; color: #aeb7ba; line-height: 1.6; }
.logboek p { padding: 6px 0; border-bottom: 1px solid #2c3134; }

/* Agents */
.aanzet { display: grid; gap: 10px; margin: 10px 0; }
.aanzet div { display: flex; flex-direction: column; background: var(--paneel2); border-radius: 5px; padding: 9px 11px; }
.aanzet small { color: var(--stil); font-size: 10px; }
.aanzet strong { font-size: 13px; margin: 0; }
.aanzet span { font-size: 10px; color: #a3adb0; }
.agents-grid { margin-top: 18px; }
.agentkaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 14px; }
.agentkaart { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto auto; column-gap: 10px; row-gap: 3px; text-align: left; background: #1a1e21; border: 1px solid var(--lijn); border-radius: 7px; padding: 12px; }
.agentkaart .robot { grid-row: 1 / 3; font-size: 22px; color: var(--champagne); }
.agentkaart strong { font-size: 12px; }
.agentkaart small { font-size: 10px; color: var(--stil); }
.agentkaart .status { grid-column: 1 / 3; justify-self: start; margin-top: 6px; }
.agentkaart.gekozen { border-color: var(--champagne); background: #dfc79c12; }
.agentkaart.s-uit { opacity: .6; }
.geselecteerd p { font-size: 12px; color: #b9c1c4; margin: 10px 0; }
.geselecteerd .status { margin-top: 8px; }
.geselecteerd .primary { width: 100%; margin-top: 8px; }

/* HR */
.capaciteit .bar { margin-top: 6px; max-width: 180px; }
.rood-bar i { background: var(--rood) !important; }
.tekort { color: var(--rood); font-weight: 600; }
.werving .steps { margin: 16px 0; }
.hr-stap { border-top: 1px solid var(--lijn); padding: 14px 0; display: grid; gap: 10px; justify-items: start; }
.hr-stap h3 { font-size: 13px; letter-spacing: 0; font-weight: 600; }
.hr-stap form { display: grid; gap: 8px; width: 100%; max-width: 760px; }
.vink { flex-direction: row; align-items: center; gap: 8px; font-size: 12px; color: #c0c7ca; }

/* Marketing */
.overzichtblokken { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.overzichtblokken .panel { padding: 18px; }
.campagnekaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 18px; }
.campagnekaart { display: flex; flex-direction: column; gap: 8px; text-align: left; background: var(--paneel); border: 1px solid var(--lijn); border-radius: 8px; padding: 16px; align-items: flex-start; }
.campagnekaart small { font-size: 10px; color: var(--stil); letter-spacing: .3px; }
.campagnekaart strong { font-size: 14px; }
.campagnekaart p { font-size: 11.5px; color: #aeb7ba; line-height: 1.6; }
.campagnekaart .volgende { font-size: 10.5px; color: #d8cdb4; }
.campagnekaart.gekozen { border-color: var(--champagne); background: #dfc79c10; }
.campagnekaart.placeholder { border-style: dashed; }
.campagne-detail:focus { outline: none; }
.concept { border-top: 1px solid var(--lijn); padding-top: 16px; display: grid; gap: 10px; }
.concept form { display: grid; gap: 10px; max-width: 900px; }
.concept > p { font-size: 12px; color: #b9c1c4; }
.segmenten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 18px; }
.segmenten h3 { font-size: 15px; margin-bottom: 8px; }
.segmenten p { font-size: 12px; color: #b9c1c4; margin: 6px 0; line-height: 1.6; }
td details summary { cursor: pointer; }

/* Cijfers */
.cijfer-balk { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.cijfer-balk label { flex-direction: row; align-items: center; gap: 8px; }
.staven { display: flex; align-items: flex-end; gap: 10px; height: 240px; padding: 20px 0 0; border-bottom: 1px solid var(--lijn); }
.staaf { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; min-width: 0; }
.staaf i { width: 100%; max-width: 46px; background: linear-gradient(#dfc79c, #a68b60); border-radius: 3px 3px 0 0; }
.staaf span { font-size: 10px; color: var(--stil); }
.staaf b { font-size: 10px; color: #c9cfd1; font-weight: 500; }
.besluitbalk { display: grid; gap: 4px; margin: 10px 0; font-size: 11px; color: #c0c7ca; }
.detail-side h3 { font-size: 13px; letter-spacing: 0; margin: 14px 0 4px; font-weight: 600; }

/* Handleiding */
.pillen-uitleg { display: grid; gap: 10px; margin-bottom: 18px; font-size: 12px; color: #b9c1c4; }
.hoofdstukken { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.hoofdstukken h2 { font-size: 17px; margin: 6px 0 8px; }
.hoofdstukken p { font-size: 12px; color: #b9c1c4; line-height: 1.75; max-width: 70ch; }
.reset-vraag { margin-bottom: 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#melding { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; background: #2a2c2a; border: 1px solid var(--champagne); color: #f2ead9; padding: 10px 16px; border-radius: 6px; font-size: 12px; box-shadow: 0 8px 24px #0007; max-width: calc(100vw - 32px); }

/* Grote schermen: meer ruimte, extra kolom in de mail */
@media (min-width: 1800px) {
  .mailclient { grid-template-columns: 190px minmax(320px, 400px) minmax(0, 1fr) minmax(320px, 400px); }
  .mailclient > .mail-context { grid-column: 4; grid-row: 1; position: sticky; top: 16px; }
  iframe.hoog { height: 640px; }
}
@media (min-width: 2400px) { main, main[data-scherm] { max-width: 2300px; padding-left: 48px; padding-right: 48px; } .metrics strong { font-size: 36px; } .gebouw-grid iframe { height: 760px; } }

@media (max-width: 1520px) {
  .werkkop { display: none; }
  .werkgroep { grid-template-columns: 1fr; }
  .werkitem { grid-template-columns: minmax(0, 1fr) auto auto; }
  .werkitem .bediening { grid-column: 1 / -1; justify-content: flex-start; }
}
/* Tablet */
@media (max-width: 1100px) {
  .mailclient { grid-template-columns: 1fr; }
  .mailclient > .mail-context { grid-column: auto; }
  .mail-mappen { flex-direction: row; position: static; overflow-x: auto; }
  .mail-mappen a { white-space: nowrap; gap: 8px; }
  .mailclient.open .mail-lijst { order: 5; }
  .mailclient.open .terug-lijst { display: inline-block; }
  .agenda-grid, .vandaag-grid, .aanpak-grid, .detail-grid.breed-zij, .gebouw-grid { grid-template-columns: 1fr; }
  .rollen-panel, .afspraak-detail { position: static; }
  .gebouw-zij { border-left: 0; border-top: 1px solid var(--lijn); }
  .overzichtblokken { grid-template-columns: 1fr; }
  .werkkop { display: none; }
  .werkgroep { grid-template-columns: 1fr; }
  .werkitem { grid-template-columns: minmax(0, 1fr) auto; }
  .werkitem .bediening { grid-column: 1 / -1; justify-content: flex-start; }
  .metrics.drie { grid-template-columns: repeat(3, 1fr); }
}

/* Telefoon (390 px): menuknop, één kolom, geen horizontale scroll van de pagina */
@media (max-width: 720px) {
  .sidebar { position: sticky; top: 0; z-index: 20; flex-wrap: wrap; overflow: visible; padding: 12px 16px; }
  .menu-knop { display: inline-flex; margin-left: auto; background: transparent; border: 1px solid #56584f; border-radius: 5px; padding: 7px 12px; font-size: 12px; }
  nav#hoofdnavigatie { display: none; width: 100%; flex-direction: column; gap: 0; padding-top: 8px; }
  .sidebar.menu-open { max-height: 100dvh; overflow-y: auto; }
  .sidebar.menu-open nav#hoofdnavigatie { display: flex; }
  .sidebar.menu-open nav small { display: block; margin: 12px 4px 4px; }
  nav#hoofdnavigatie a { padding: 9px 8px; font-size: 13px; }
  nav#hoofdnavigatie a span, nav#hoofdnavigatie b { display: inline; }
  nav#hoofdnavigatie a.active { border-left: 2px solid #dfc79c; border-bottom: 0; }
  .metrics, .metrics.drie { grid-template-columns: 1fr 1fr; }
  .page-title .knoppen { justify-content: flex-start; }
  .office-grid { grid-template-columns: 1fr; }
  iframe.hoog, .gebouw-grid iframe { height: 440px; }
  .office-panel > .section-head { flex-direction: column; }
  .aanpak-stappen { grid-template-columns: 1fr; }
  .aanpak-stappen li { gap: 10px; }
  .drie-kol, .beoordeling { grid-template-columns: 1fr; }
  .formrij { grid-template-columns: 1fr 1fr; }
  .rooster { min-width: 560px; }
  .rooster.dag { min-width: 0; }
  .maanddag { min-height: 64px; padding: 4px; }
  .maanditem { display: none; }
  .maanddag:has(.maanditem)::after { content: '•'; color: var(--champagne); }
  .volgende-stap { padding: 14px 16px; }
  .volgende-stap .zin { font-size: 13px; }
  .hoofdstukken { grid-template-columns: 1fr; }
  .campagnekaarten, .segmenten, .agentkaarten { grid-template-columns: 1fr; }
  .werkitem { grid-template-columns: 1fr; gap: 4px; }
  .gebouw-blok > summary { padding: 14px 16px; flex-wrap: wrap; gap: 6px; }
  .stapkaart { flex-basis: 132px; }
  .mail-filters form { flex-wrap: wrap; }
  table { font-size: 11px; }
  .uitleg { padding: 10px 12px; }
}
#besluiten-aantal { font: inherit; }
.tegels-noot { margin: -12px 0 18px; }