/* Bol Intelligence Center: alleen wat écht app-specifiek is. De rest komt uit design/tokens.css, components.css en app.css. */
[hidden] { display: none !important; }
.inlog-kaart { width: min(26rem, 100%); display: grid; gap: var(--r-3); }
.inlog-kaart h1 { font-size: var(--tekst-l); margin: var(--r-2) 0 0; }
.inlog-kaart .veld input { width: 100%; }
.app-inhoud h2 { font-size: var(--tekst-m); color: var(--tekst); margin: 0; }
.app-inhoud h3 { font-size: var(--tekst-s); color: var(--tekst); margin: 0; }
.kaart { display: grid; gap: var(--r-3); }
.kaart-kop { display: flex; justify-content: space-between; align-items: center; gap: var(--r-3); flex-wrap: wrap; }
.kaart-kop .sub { color: var(--tekst-3); font-size: var(--tekst-xs); }
.klein { font-size: var(--tekst-xs); color: var(--tekst-3); }
.mono { font-family: var(--font-mono); font-size: 12px; }
.rechts { text-align: right; }
.kpi-raster-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 47.99rem) { .kpi-raster-4 { grid-template-columns: 1fr 1fr; } }
.twee-kolommen { display: grid; gap: var(--r-5); }
@media (min-width: 64rem) { .twee-kolommen { grid-template-columns: 1fr 1fr; } }
.werkvlak { display: grid; gap: var(--r-5); align-items: start; }
@media (min-width: 72rem) { .werkvlak { grid-template-columns: minmax(0, 1fr) minmax(22rem, 30rem); } .werkvlak.breed { grid-template-columns: minmax(0, 1fr) minmax(26rem, 40rem); } .werkvlak.smal-links { grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr); } }
.werkvlak.smal-links .rij.rij-c { grid-template-columns: 1fr; gap: 2px; }
.werkvlak.smal-links .rij.rij-c .reactie { display: none; }
.werkvlak.smal-links .rij.rij-c .tijd { order: 2; }
.werkvlak.smal-links .rij.rij-c .status { justify-self: start; order: 3; }
.filters { display: flex; gap: var(--r-2); flex-wrap: wrap; align-items: center; }
.filters select, .filters input { height: 32px; font-size: var(--tekst-xs); }
.rij.rij-c { grid-template-columns: 5.5rem 1fr auto auto auto; }
.rij.rij-p { grid-template-columns: 1fr 5rem 5rem 6rem auto; }
.rij.rij-s { grid-template-columns: 5.5rem 1fr auto; align-items: start; }
.rij.rij-k { grid-template-columns: 6rem 1fr auto auto; }
.rij .onder { white-space: normal; }
@media (max-width: 47.99rem) { .rij.rij-c, .rij.rij-p, .rij.rij-k { grid-template-columns: 1fr auto; } .rij.rij-c > :nth-child(n+4), .rij.rij-p > :nth-child(n+3):not(:last-child) { display: none; } }
a.rij:hover { background: var(--vlak-2); }
.rij.geselecteerd { background: var(--accent-zacht); }
.status-blokkade { color: var(--let-op); border-color: rgba(245,158,11,.5); }
.pil-soort { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--tekst-3); }

/* Kalender */
.kal { overflow-x: auto; border: 1px solid var(--lijn); border-radius: var(--radius-l); background: var(--vlak); }
.kal-raster { display: grid; min-width: 56rem; }
.kal-kop, .kal-rij { display: grid; grid-template-columns: 12rem 1fr; border-bottom: 1px solid var(--lijn); }
.kal-kop { position: sticky; top: 0; background: var(--vlak); z-index: 2; }
.kal-label { padding: 8px 12px; font-size: var(--tekst-xs); color: var(--tekst-2); border-right: 1px solid var(--lijn); display: flex; align-items: center; gap: 6px; min-width: 0; }
.kal-label b { color: var(--tekst); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-groep .kal-label { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-3); background: rgba(255,255,255,.015); }
.kal-groep .kal-vlak { background: rgba(255,255,255,.015); }
.kal-vlak { position: relative; display: grid; min-height: 34px; }
.kal-weken { display: grid; }
.kal-week { font-family: var(--font-mono); font-size: 10px; color: var(--tekst-3); padding: 8px 0 6px; text-align: center; border-left: 1px solid var(--lijn); }
.kal-week small { display: block; color: var(--tekst-3); font-size: 9px; }
.kal-lijnen { position: absolute; inset: 0; display: grid; pointer-events: none; }
.kal-lijnen i { border-left: 1px solid var(--lijn); }
.kal-balk { position: absolute; top: 6px; height: 22px; border-radius: 6px; font-size: 11px; line-height: 22px; padding: 0 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--tekst); border: 1px solid var(--lijn-sterk); background: var(--vlak-3); cursor: pointer; }
.kal-balk.bol_piek { background: var(--accent-zacht); border-color: rgba(224,193,65,.45); }
.kal-balk.bol_categorie { background: var(--vlak-3); }
.kal-balk.eigen { background: rgba(74,222,128,.14); border-color: rgba(74,222,128,.4); }
.kal-balk.lancering { background: rgba(255,255,255,.05); border-style: dashed; }
.kal-balk.test { background: rgba(255,255,255,.05); border-style: dotted; }
.kal-balk.leeg { opacity: .55; }
.kal-balk:hover { filter: brightness(1.15); }
.kal-balk b { font-weight: 500; }
.kal-balk small { color: var(--tekst-3); margin-left: 6px; font-family: var(--font-mono); font-size: 10px; }
.kal-vandaag { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); z-index: 1; pointer-events: none; }
.kal-dag { position: absolute; top: 2px; font-size: 10px; color: var(--tekst-3); white-space: nowrap; transform: translateX(-50%); }
.kal-dag::before { content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--tekst-3); margin: 0 auto 2px; }
.kal-dag.feestdag::before, .kal-dag.eigen::before { background: var(--accent); }
.kal-dag.om { top: 24px; }
.kal-deadline { position: absolute; top: 9px; width: 2px; height: 16px; background: var(--let-op); }
.legenda { display: flex; gap: var(--r-3); flex-wrap: wrap; font-size: var(--tekst-xs); color: var(--tekst-3); }
.legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; border: 1px solid var(--lijn-sterk); background: var(--vlak-3); }

/* Product-tijdlijn: 120 dagen als strook */
.strook { display: flex; gap: 1px; height: 18px; border-radius: 4px; overflow: hidden; background: var(--vlak-3); }
.strook i { flex: 1; min-width: 1px; background: var(--vlak-3); }
.strook i.regulier { background: var(--lijn-sterk); }
.strook i.promo { background: var(--accent); }
.strook i.onbekend { background: transparent; }
.strook i.toekomst { opacity: .45; }
.strook-as { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--tekst-3); margin-top: 4px; }
.venster-balk { height: 6px; border-radius: 999px; background: var(--vlak-3); overflow: hidden; display: flex; }
.venster-balk i { display: block; height: 100%; }
.venster-balk i.regulier { background: var(--ok); }
.venster-balk i.promo { background: var(--accent); }
.venster-balk i.onbekend { background: var(--lijn-sterk); }

/* Sparklines (één maat per grafiek; nooit twee assen) */
.spark { display: grid; gap: 4px; }
.spark svg { width: 100%; height: 56px; display: block; }
.spark path { fill: none; stroke: var(--tekst-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark rect.promo { fill: var(--accent-zacht); }
.spark line.as { stroke: var(--lijn); }
.spark .kop { display: flex; justify-content: space-between; font-size: var(--tekst-xs); color: var(--tekst-3); }
.spark .kop b { color: var(--tekst); font-weight: 500; font-family: var(--font-mono); }
.tooltip { position: fixed; z-index: 20; pointer-events: none; background: var(--vlak-2); border: 1px solid var(--lijn-sterk); border-radius: var(--radius-s); padding: 6px 8px; font-size: 11px; color: var(--tekst); box-shadow: var(--schaduw-venster); max-width: 16rem; }
.tooltip small { display: block; color: var(--tekst-3); }

/* Tabellen */
.tabel { width: 100%; border-collapse: collapse; font-size: var(--tekst-xs); }
.tabel th { text-align: left; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-3); padding: 8px 10px; border-bottom: 1px solid var(--lijn); font-weight: 500; white-space: nowrap; }
.tabel td { padding: 8px 10px; border-bottom: 1px solid var(--lijn); vertical-align: top; color: var(--tekst-2); }
.tabel td.naam { color: var(--tekst); }
.tabel td.getal, .tabel th.getal { text-align: right; font-family: var(--font-mono); font-size: 11.5px; white-space: nowrap; }
.tabel tr.blok td { opacity: .7; }
.tabel input.prijs { width: 5.5rem; height: 26px; font-family: var(--font-mono); font-size: 11.5px; padding: 0 6px; text-align: right; }
.tabel-wrap { overflow-x: auto; }
.signaal { font-size: 11px; color: var(--let-op); display: block; }
.signaal.info { color: var(--tekst-3); }
.bulk { display: flex; gap: var(--r-2); flex-wrap: wrap; align-items: center; }
.formulier-raster { display: grid; gap: var(--r-3); }
.formulier-raster.twee { grid-template-columns: 1fr 1fr; }
.formulier-raster.drie { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 47.99rem) { .formulier-raster.twee, .formulier-raster.drie { grid-template-columns: 1fr; } }
.veld input, .veld textarea { width: 100%; } /* select: zo breed als de inhoud (design-systeem 0.1.3) */
.kanaal-rij { display: grid; grid-template-columns: 6rem 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--lijn); font-size: var(--tekst-xs); }
.kanaal-rij:last-child { border-bottom: 0; }
.kanaal-rij .kanaal { color: var(--tekst); font-weight: 500; }
.kanaal-rij select { height: 26px; font-size: 11px; }
details.inklap summary { cursor: pointer; color: var(--tekst-2); font-size: var(--tekst-xs); list-style: none; }
details.inklap summary::before { content: "▸ "; } details.inklap[open] summary::before { content: "▾ "; }
.vergelijk { display: grid; gap: var(--r-3); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 47.99rem) { .vergelijk { grid-template-columns: 1fr; } }
.tegel { border: 1px solid var(--lijn); border-radius: var(--radius); padding: var(--r-3) var(--r-4); display: grid; gap: 6px; background: var(--vlak); }
.tegel h3 { display: flex; align-items: center; gap: 8px; }
.tegel h3 i { width: 10px; height: 10px; border-radius: 3px; background: var(--lijn-sterk); }
.tegel h3 i.promo { background: var(--accent); } .tegel h3 i.regulier { background: var(--ok); }
.tegel .eig { grid-template-columns: 8rem 1fr; }
.weer { font-size: var(--tekst-xs); color: var(--tekst-3); }
.stap-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--tekst-xs); }
.stap-lijst li b { color: var(--tekst); font-weight: 500; }
.stap-lijst li.fout { color: var(--let-op); }
.knop-rij { display: flex; gap: var(--r-2); flex-wrap: wrap; }
.kaart hr, .paneel hr { border: 0; border-top: 1px solid var(--lijn); margin: 0; width: 100%; height: 0; }

/* Thema-schakelaar in de zijbalk */
.thema-wissel { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 8px 0; }
.thema-wissel .segment button { height: 24px; font-size: 11px; padding: 0 8px; }

/* Kalender per product */
.kal-product .kal-label { padding-block: 6px; }
.kal-product .kal-label .dek { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--tekst-3); white-space: nowrap; }
.kal-product .kal-label .dek.vol { color: var(--ok); } .kal-product .kal-label .dek.ruimte { color: var(--let-op); }
.kal-seg { position: absolute; top: 8px; height: 18px; border-radius: 4px; font-size: 10px; line-height: 18px; padding: 0 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--tekst); }
.kal-seg.promo { background: var(--accent); color: var(--accent-tekst); }
.kal-seg.gepland { background: var(--accent-zacht); border: 1px solid rgba(224,193,65,.6); }
.kal-seg.voorgesteld { border: 1px dashed var(--lijn-sterk); background: transparent; color: var(--tekst-3); }
.kal-seg.nieuw { background: repeating-linear-gradient(135deg, var(--vlak-3) 0 4px, transparent 4px 8px); color: var(--tekst-3); }
.kal-seg.onbekend { background: transparent; border-bottom: 1px dotted var(--lijn-sterk); color: var(--tekst-3); }
.kal-gat { position: absolute; top: 12px; height: 10px; border-radius: 3px; border: 1px dashed rgba(245,158,11,.6); }
.legenda i.promo { background: var(--accent); } .legenda i.gepland { background: var(--accent-zacht); border-color: rgba(224,193,65,.6); } .legenda i.voorgesteld { border-style: dashed; background: transparent; } .legenda i.nieuw { background: repeating-linear-gradient(135deg, var(--vlak-3) 0 3px, transparent 3px 6px); } .legenda i.gat { border: 1px dashed rgba(245,158,11,.6); background: transparent; }
.dekking { display: grid; gap: 4px; }
.dekking .balk { height: 6px; border-radius: 999px; background: var(--vlak-3); overflow: hidden; }
.dekking .balk i { display: block; height: 100%; background: var(--accent); }
.dekking small { font-family: var(--font-mono); font-size: 10px; color: var(--tekst-3); }
.rij.rij-p { grid-template-columns: 1fr 5rem 5rem 6rem 6rem auto; }

/* ---------- Schil van het Bol Intelligence Center ---------- */
.inlog-wissel { display: flex; gap: var(--r-3); flex-wrap: wrap; font-size: var(--tekst-xs); }
.inlog-wissel a { color: var(--tekst-3); }
.app-groep .uit { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tekst-3); opacity: .7; }
.start-raster { display: grid; gap: var(--r-5); }
@media (min-width: 64rem) { .start-raster { grid-template-columns: 1fr 1fr; } }
.start-kaart.uit { opacity: .6; }
.kpi-raster-3 { grid-template-columns: repeat(3, 1fr); }
.module-lijst { display: grid; gap: var(--r-2); }
.module-regel { display: flex; gap: var(--r-3); align-items: flex-start; padding: var(--r-2) var(--r-3); border: 1px solid var(--lijn); border-radius: var(--radius-s); cursor: pointer; }
.module-regel input { margin-top: 3px; }
.module-regel > span { display: grid; gap: 2px; }
.paneel h3 { margin-top: var(--r-3); }
.app-merk { flex-wrap: wrap; }
.app-merk small { flex-basis: 100%; margin-left: 0; margin-top: 4px; white-space: nowrap; }
.inlog-kaart .app-merk small { flex-basis: auto; margin-left: auto; margin-top: 0; }

/* Zijbalk: modules als inklapbare groepen */
.app-groep-knop { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; cursor: pointer; font: inherit; text-align: left; color: var(--tekst-2); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin: 14px 0 4px; padding: 6px 8px; border-radius: var(--radius-s); }
.app-groep-knop:hover { color: var(--tekst); background: rgba(255,255,255,.035); }
.app-groep-knop i { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--overgang); opacity: .7; }
.app-groep-knop.open i { transform: rotate(45deg); }
.app-groep-inhoud { display: grid; gap: 2px; }