/* ── casa360-stijl.css ── */ /* ===================================================================== casa360-stijl.css — dé huisstijl als code (v3.0 «Werkbank» · 23-08-2026) Vervangt v2.0 «Blauw» (13-08); v2.0 verving v1.0 (Japandi). Besluit Michiel 23-08-2026, na de drie beeldrichtingen (docs/prototypes/beeldrichtingen-v1.html): het wordt Werkbank. Wat er verandert, en waarom: · **Geen sierkleur meer.** Blauw was accent én primaire knop én actieve module. Daardoor betekende blauw alles en dus niets. De primaire knop wordt zwart, de actieve module wordt zwart, en kleur is voortaan uitsluitend betekenis: rood blokkeert, amber vraagt aandacht, groen is in orde. Zie je kleur, dan is er iets aan de hand. · **De navigatie wordt donker.** Een bijna zwarte rail duwt het werkvlak naar voren en geeft de tellers en statuspunten een grond waarop ze leesbaar zijn zonder te schreeuwen. · **Rustiger vormen.** Radius van 14 naar 10, schaduwen zachter en grijzer. Het accent-token blijft bestaan — als bijna-zwart — zodat de dertig modulestylesheets niet hoeven te veranderen. Het blauw is niet verboden zoals groen dat ooit was; het is alleen geen dráger meer. Waar een module nog var(--accent) gebruikt, krijgt hij nu inkt — en dat is precies de bedoeling. Besluit Michiel 05-08-2026: de stijl uit de wireframes wint. Blauw is weer toegestaan; lichte schaduwen en gradients mogen waar ze diepte geven en nergens anders. De regel «geen blauw» uit CLAUDE.md vervalt — pas dat bestand aan, anders staan er twee waarheden in de repo. Twee dingen die hierin zitten: 1. de nieuwe tokens (blok A) en de componenten uit de wireframes (blok C); 2. een compatibiliteitslaag (blok B) die de oude --c-*-namen op de nieuwe waarden zet. Dertig CSS-bestanden blijven daardoor werken zonder dat er één regel in verandert. Nieuwe code gebruikt de namen uit blok A; een module stapt over op het moment dat hij door het herontwerp gaat. ===================================================================== */ /* ═══ A · tokens ═══════════════════════════════════════════════════ */ :root{ /* lijnen en vlakken — Werkbank (v3.0): koel neutraal grijs, geen blauwe ondertoon meer. Het werkvlak is licht, de kaarten zijn wit, en het verschil tussen die twee draagt de indeling in plaats van een rand. */ --lijn: #DCDFE3; /* standaard 1px-rand */ --lijn2: #C9CDD3; /* nadruk-rand, inputs */ --grijs: #F1F2F4; /* zachte zone op een kaart, hover, tip-blok */ --grijs2: #E4E6E9; /* scheidingslijn in een tabel, balkje-achtergrond */ --kaart: #FFFFFF; /* het vlak van een kaart, paneel of invoerveld */ --vlak: #EFF1F3; /* app-achtergrond */ --rail: #F1F2F4; /* tabelkoppen */ /* de donkere navigatierail (v3.0) — eigen tokens, want dit is het enige donkere vlak in de applicatie en het heeft zijn eigen inkt nodig */ --nav: #16191C; /* de rail zelf */ --nav2: #23272C; /* actieve stap, hover */ --nav-lijn: #262A2F; /* scheiding tussen stappen */ --nav-ink: #C9CDD2; /* tekst op de rail */ --nav-ink2: #7E858E; /* onderschrift op de rail */ --nav-actief:#FFFFFF; /* de actieve stap en focus op de rail (PW-naloop 24-09: was overal een literal) */ /* werkbreedte (RESPONSIVE 06-10): de maximale modulebreedte; schaal.js zet hem per schermbreedte uit de regelset weergave */ --werkbreedte: 1240px; --werkbreedte-breed: 1360px; /* inkt */ --ink: #14171A; /* primaire tekst */ --ink2: #545B63; /* secundaire tekst, labels */ --ink3: #838B94; /* tertiair, placeholders — nooit lopende tekst */ /* «accent» is in v3.0 geen kleur meer maar inkt. De naam blijft staan omdat dertig modulestylesheets hem gebruiken; wat eruit komt is zwart. Een primaire knop valt op door contrast, niet door een kleur die ook nog eens «actief» en «geselecteerd» moet betekenen. */ --accent: #14171A; /* actieve module, selectie, primaire knop */ --accent-t: #EDEEF0; /* accentvlak, actieve tab/menu-item */ --accent-t2: #F6F7F8; /* rijhover, geselecteerde rij */ --accent-d: #000000; /* hover primaire knop */ --knop-ink: #FFFFFF; /* tekst op een gekleurd vlak: primaire knop, chip, badge (PW-naloop 24-09) */ /* KNOPFAMILIE (besluit 339, Michiel 09-10-2026): --knop is het vlak van elke primaire knop en elke «aan»-stand van een keuze. In de eigenaarswereld is dat inkt (test-stijl bewaakt --knop = --ink); een tenantwereld zet hem in /huisstijl.css op zijn diepe merkkleur (ThermoSolutions: --donker, petrol). Geen module zet nog --ink op een knop. */ --knop: #14171A; --knop-d: #000000; /* hover van de primaire knop */ /* semantisch — déze drie dragen de kleur van het systeem, en zij alleen */ --goed: #1B7A4B; /* in orde, betaald, klaar */ --goed-t: #E2F1E8; --goed-d: #14603A; /* teksttint op een goed-tintvlak (AA) */ --let: #A97A08; /* let op, wacht op iets, buiten de norm */ --let-t: #FBF1DC; --let-d: #7E5A06; /* teksttint op een let-tintvlak (AA) */ --stop: #A63B27; /* blokkade, poort dicht, fout */ --stop-t: #F8E7E3; --stop-d: #8A2F1E; /* dezelfde drie betekenissen op een donker vlak (de tv van een wallboard, de rail): licht genoeg voor AA op --nav. DISPLAYCAST (besluit 340, 09-10-2026) — tot dan stonden ze als literal in wallboard.css. */ --goed-licht: #8CC8A3; --let-licht: #E6B95C; --stop-licht: #F0A08C; /* de tv van een wallboard (DISPLAYCAST, besluit 340): één donkere weergave in elke wereld. De rail van een tenant kan licht zijn (ThermoSolutions), de tv niet — daarom eigen tokens naast --nav, zodat /huisstijl.css de rail kan kleuren zonder de tv mee te nemen. */ --tv: #16191C; /* het vlak van de tv */ --tv2: #23272C; /* tegel, paneel, mededeling */ --tv-lijn: #2A2F36; --tv-ink: #F4F5F7; /* getal, titel */ --tv-ink2: #AEB4BC; /* label */ --tv-ink3: #7C838C; /* definitie, peildatum, voet */ /* soortkleur keten — soortregister, geen semantiek. Gedempt in v3.0: een soort mag herkenbaar zijn, niet luid. */ --paars: #5B4BA8; --paars-t: #ECEAF5; --memo: #F1F73B; /* alléén interne notities */ /* avatar-palet (BS.avatar, prompt §2) — identiteitskleuren met een vaste toewijzing per naam; géén semantiek, dus bewust los van de betekeniskleuren */ --avatar-1: #3A5A8C; --avatar-2: #2F6B4F; --avatar-3: #5B4BA8; --avatar-4: #9C5F2E; --avatar-5: #16707A; --avatar-6: #914462; /* typografie — Manrope (besluit 23-08, v3.0): Nunito is rond en vriendelijk en dat is precies wat een werkbank níet is. Manrope staat rechter en leest strakker in dichte lijsten; mono blijft JetBrains. */ --font-ui: 'Manrope', 'Nunito', -apple-system, 'Segoe UI', Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* vorm — strakker dan Blauw: 14 werd 10, 11 werd 8. Een werkbank heeft rechte hoeken; te ronde kaarten maken een lijst zachter dan hij is. */ --radius: 10px; --radius-klein:8px; --radius-pill: 99px; --lijndikte: 1px; /* diepte — mag, maar spaarzaam: alleen op wat boven het vlak zweeft */ --schaduw-kaart: 0 1px 3px rgba(20,23,26,.06); --schaduw-zwevend: 0 2px 8px rgba(20,23,26,.09); --schaduw-knop: 0 1px 3px rgba(20,23,26,.22); /* alléén de primaire knop */ --schaduw-laag: 0 10px 28px rgba(20,23,26,.18); /* overlay, pdf-viewer */ /* de halfdoorzichtige laag achter een venster of overlay — één token, zodat module-CSS er geen eigen rgba-literal voor hoeft te dragen */ --sluier: rgba(20, 20, 20, .45); --overgang: 160ms ease; --focus-ring:3px solid var(--accent); /* EÉN SCHERM (besluit 336h, Michiel 09-10-2026) · dichtheid als drie tokens. Dicht is de standaard: een dossier wordt op een armlengte gelezen en past op één scherm. Ruim is de keuze per gebruiker (Mijn zone › Dichtheid) en komt als html[data-dichtheid="ruim"]. Modules gebruiken deze tokens voor rijhoogte, paneelvulling en de KPI-maat; de grote cijfermaat (1,7 rem) blijft van Vandaag en de borden. */ --rij: 34px; /* werkbank-rij, tijdlijnrij, registerrij */ --pad: 10px; /* vulling van een paneel */ --kpi: 1.15rem; /* cijfer in een dossier of lijst (mono, 700) */ --kop-hoogte:52px; /* de kopband van een dossier */ --tab-hoogte:40px; /* de tabbalk eronder */ } html[data-dichtheid="ruim"] { --rij: 44px; --pad: 14px; --kpi: 1.3rem; --kop-hoogte: 60px; --tab-hoogte: 44px; } /* ═══ B · compatibiliteit met v1.0 ═════════════════════════════════ De oude namen blijven werken en wijzen naar de nieuwe waarden. Niet uitbreiden; deze laag verdwijnt als de laatste module is omgezet. */ :root{ --c-creme: var(--grijs); --c-paneel: var(--grijs2); --c-paneel-2: var(--vlak); --c-ink: var(--ink); --c-ink-2: var(--ink2); --c-ink-3: var(--ink3); --c-lijn: var(--lijn); --c-lijn-2: var(--lijn2); /* groen bleef groen: het betekende «goed», niet «primaire kleur». */ --c-groen: var(--goed); --c-groen-d: var(--goed-d); --c-groen-t: var(--goed-t); /* AFBOUW Blauw 13-08: terra vervalt. In de module-stylesheets droeg --c-terra vrijwel altijd signaal-semantiek ([]gevoelig, onder norm, herzien nodig) — dat is «let op». Geldbedragen horen op --ink; een module die dat via --c-terra deed, gaat om bij zijn herontwerp. */ --c-terra: var(--let); --c-terra-d: var(--let-d); --c-terra-t: var(--let-t); --c-amber: var(--let); --c-amber-t: var(--let-t); --c-rood: var(--stop); --c-rood-d: var(--stop-d); --c-rood-t: var(--stop-t); --c-memo: var(--memo); --c-sage: #B9B99D; /* blijft — decoratief, geen betekenis */ --c-sage-t: #E9E9DC; /* de tint erbij; stond hier niet en daarmee vielen veertien achtergronden terug op transparant — o.a. de gefactureerd-balk en chip--groen-licht */ --c-oker: #DCB482; --c-blush: #E0CFC3; /* Ook deze twee misten: amber-donker (tekst op een amber vlak) en de app-achtergrond onder zijn oude naam. */ --c-amber-d: #7A4E22; --c-vlak: var(--vlak); --schaduw-tegel: var(--schaduw-kaart); --schaduw-tegel-hover: var(--schaduw-zwevend); /* Blauw 13-08: de primaire knop is accent-blauw met de blauwe schaduw (prompt §1) — de zwarte primair van Zand vervalt. */ --gradient-primair: var(--accent); --gradient-primair-hover: var(--accent-d); } /* ═══ C · componenten ══════════════════════════════════════════════ */ *{box-sizing:border-box} body{margin:0;font-family:var(--font-ui);color:var(--ink);background:var(--kaart);font-size:14px; font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased} button{font-family:inherit;cursor:pointer} /* blok I (13-10-2026) · een link zonder eigen stijl kreeg het blauw van de browser (offertedossier, opdrachtdossier, woningdossier, fieldmarketing, briefbouwer). Kleur is betekenis: een link draagt de inkt van zijn omgeving en is herkenbaar aan zijn streep. Een link met een eigen klasse houdt zijn eigen stijl. */ a{color:inherit;text-underline-offset:2px} .mono{font-family:var(--font-mono)} input,select,textarea{border:1px solid var(--lijn2);border-radius:var(--radius-klein);padding:5px 8px; font-family:inherit;font-size:.76rem;color:var(--ink);background:var(--kaart)} :focus-visible{outline:var(--focus-ring);outline-offset:2px} /* knoppen */ .knopje{border:1px solid var(--lijn2);background:var(--kaart);border-radius:var(--radius-klein); padding:6px 12px;font-size:.72rem;font-weight:700;color:var(--ink2)} .knopje:hover{background:var(--grijs)} .knopje.pri{background:var(--knop);border-color:var(--knop);color:var(--knop-ink)} .knopje.pri:hover{background:var(--knop-d)} .knopje:disabled{opacity:.45;cursor:not-allowed} /* status en chips */ .st{font-size:.61rem;font-weight:700;border:1px solid var(--lijn2);border-radius:3px;padding:1px 6px; color:var(--ink2);white-space:nowrap} .st.goed{border-color:var(--goed);color:var(--goed-d)} .st.let{border-color:var(--let);color:var(--let-d)} .st.stop{border-color:var(--stop);color:var(--stop-d)} .fchip{border:1px solid var(--lijn2);background:var(--kaart);border-radius:14px;padding:4px 11px; font-size:.68rem;font-weight:700;color:var(--ink2)} .fchip.act{background:var(--accent);border-color:var(--accent);color:var(--knop-ink)} .pil{display:inline-block;border:1px solid var(--lijn2);border-radius:14px;padding:3px 10px;font-size:.67rem; font-weight:700;color:var(--ink2);background:var(--kaart);margin:0 4px 4px 0;cursor:pointer} .pil.act{background:var(--accent);border-color:var(--accent);color:var(--knop-ink)} .bol{width:9px;height:9px;border-radius:50%;flex:none} .bol.goed{background:var(--goed)} .bol.let{background:var(--let)} .bol.stop{background:var(--stop)} .bol.rust{background:var(--lijn2)} /* schil — witte zijbalk met icoon + label, inklapbaar tot een glyph-rail (Blauw 13-08, prompt §2 — het «geen iconen»-besluit van 05-08 is terug- gedraaid: ingeklapt blijven de werkruimte-glyphs staan) */ .app{display:grid;grid-template-columns:264px minmax(0,1fr);height:100vh;transition:grid-template-columns var(--overgang)} .app.in{grid-template-columns:52px minmax(0,1fr)} .app.in .nav__voet,.app.in .navkop b,.app.in .nav__merk{display:none} .app.in .navkop{justify-content:center;padding:15px 0} .app.in .dom__label,.app.in .dom__pijl,.app.in .dom__badge,.app.in .nav__groep,.app.in .dom__modules{display:none} .app.in .dom__kop{justify-content:center;padding:9px 0} .app.in .nav__boom{padding:4px 6px 10px} .nav{background:var(--kaart);border-right:1px solid var(--lijn);display:flex;flex-direction:column;overflow:hidden} .navkop{display:flex;align-items:center;gap:8px;padding:15px 14px 11px} .navkop b{font-weight:800;font-size:1rem;flex:1;white-space:nowrap} .navkop b span{color:var(--accent-d)} .navklap{border:1px solid var(--lijn);background:var(--kaart);border-radius:6px;width:26px;height:26px;flex:none; display:grid;place-items:center;font-size:.8rem;color:var(--ink2);line-height:1} .navklap:hover{background:var(--grijs)} .nav__boom{flex:1;overflow-y:auto;padding:4px 10px 10px} .dom{margin-bottom:1px} .dom__kop{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent; padding:9px 12px;border-radius:10px;font-size:.82rem;font-weight:700;color:var(--ink2)} .dom__kop:hover{background:var(--vlak)} .dom__ico{width:18px;text-align:center;opacity:.85;flex:none} .dom.is-actief .dom__kop{background:var(--accent-t);color:var(--accent)} .dom.is-actief.is-open .dom__kop{background:transparent;color:var(--ink)} .dom__pijl{margin-left:auto;font-size:.56rem;color:var(--ink3)} .dom.is-open .dom__pijl{transform:rotate(90deg)} .dom__badge{font-size:.56rem;font-weight:800;background:var(--let);color:var(--knop-ink);border-radius:20px;padding:1px 6px} .dom__modules{display:none;padding:2px 0 6px} .dom.is-open .dom__modules{display:block} .nav__groep{padding:9px 14px 3px 26px;font-size:.58rem;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--ink2)} .module{display:flex;align-items:center;gap:7px;width:100%;text-align:left;padding:7px 12px 7px 26px; margin-bottom:1px;border:0;border-radius:9px;background:transparent; font-size:.78rem;color:var(--ink2)} .module:hover{background:var(--vlak)} .module.nu{background:var(--accent-t);color:var(--accent);font-weight:800} .module .mbadge{margin-left:auto;font-size:.56rem;font-weight:800;background:var(--let);color:var(--knop-ink); border-radius:20px;padding:1px 6px;font-family:var(--font-mono)} /* F-R1 (12-08): de prototype-pil — zelfde pil als in de Marketing-ronde */ .module .mproto{margin-left:auto;font-size:.56rem;font-weight:800;background:var(--stop-t);color:var(--stop); border-radius:99px;padding:1px 7px;font-family:var(--font-mono)} /* N2 (12-08) · de prototype-band bovenaan een prototype-scherm — zelfde pil als in het menu, mét korte uitleg (MARKETING-NAV §2) */ .protoband{padding:10px 26px 0;max-width: var(--werkbreedte, 1240px);margin:0 auto;display:flex;align-items:center;gap:9px} .protoband .mproto{font-size:.56rem;font-weight:800;background:var(--stop-t);color:var(--stop); border-radius:99px;padding:2px 8px;font-family:var(--font-mono)} .protoband-uitleg{font-size:.68rem;color:var(--ink2)} .nav__voet{margin-top:auto;border-top:1px solid var(--lijn);padding:11px 13px;display:flex;flex-direction:column;gap:8px} .rol{display:flex;align-items:center;gap:9px;border:1px solid var(--lijn);background:var(--kaart);border-radius:10px;padding:7px 9px} .rol__avatar{width:29px;height:29px;border-radius:9px;background:var(--accent);color:var(--knop-ink);display:grid; place-items:center;font-weight:800;font-size:.72rem} .rol__naam{font-size:.74rem;font-weight:700} .rol__sub{font-size:.6rem;color:var(--ink2)} /* modulebalk en cluster-tabs */ .content{overflow:hidden;min-width:0;display:flex;flex-direction:column} .modbalk{display:flex;align-items:center;gap:8px;height:52px;padding:0 22px;border-bottom:1px solid var(--lijn); background:var(--kaart);flex:none} .stapbalk{display:flex;gap:6px;align-items:center;padding:8px 22px;border-bottom:1px solid var(--lijn); background:var(--kaart);flex:none} /* Blauw 13-08 · de zand-bánd vervalt: de kopband is wit en de tabs zijn een segmentgroep (witte kaart, actieve tab accent-tint) — prompt §2. */ .cluster-tabs{display:flex;gap:2px;align-items:center;flex-wrap:wrap;padding:12px 32px; background:var(--kaart);border-bottom:1px solid var(--lijn)} .cluster-tab{border:0;background:transparent;color:var(--ink2);border-radius:8px; padding:8px 14px;font:700 .8rem var(--font-ui);text-decoration:none; transition:background var(--overgang),color var(--overgang)} .cluster-tab:hover{color:var(--ink);background:var(--grijs)} .cluster-tab.is-actief{background:var(--accent-t);color:var(--accent)} /* Besluit Michiel 03-09 · de weg terug staat links in de tabbalk, als eerste knop, alleen als er een herkomst is — de band erboven en de Overzicht-tab zijn vervallen. Zelfde maat als een tab, lijn rechts als scheiding. */ .cluster-terug{border:0;background:transparent;color:var(--ink2);border-radius:8px; padding:8px 14px;font:700 .8rem var(--font-ui);cursor:pointer;margin-right:6px; border-right:1px solid var(--lijn);border-radius:8px 0 0 8px; transition:background var(--overgang),color var(--overgang)} .cluster-terug:hover{color:var(--ink);background:var(--grijs)} .cluster-terug:focus-visible{outline:3px solid var(--accent);outline-offset:1px} .vlak{height:calc(100vh - 53px - 46px);overflow-y:auto} .kol{padding:15px 22px 60px;max-width:1420px} /* tegels en kaarten */ .tegels{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-bottom:14px} .tegel{border:1px solid var(--lijn);border-radius:7px;padding:9px 12px;background:var(--kaart)} .tegel b{display:block;font-family:var(--font-mono);font-size:1.22rem;line-height:1.1} .tegel span{font-size:.58rem;color:var(--ink2);font-weight:700;text-transform:uppercase;letter-spacing:.04em} .tegel.stop b{color:var(--stop)} .tegel.let b{color:var(--let)} .tegel.goed b{color:var(--goed)} .kaartje{border:1px solid var(--lijn);border-radius:7px;padding:12px 14px;margin-bottom:11px;background:var(--kaart)} .kaartje h4{margin:0 0 8px;font-size:.63rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2); display:flex;gap:8px;align-items:center} .kaart{background:var(--kaart);border:var(--lijndikte) solid var(--lijn);border-radius:var(--radius)} /* tabellen */ table.vt,.kaartje table{width:100%;border-collapse:collapse;font-size:.73rem} .vt th,.kaartje th{font-size:.58rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink2); text-align:left;padding:6px 7px;border-bottom:1px solid var(--lijn2)} .vt td,.kaartje td{padding:7px;border-bottom:1px solid var(--grijs2);vertical-align:top} .vt tr.rij:hover td{background:var(--grijs)} .m{font-family:var(--font-mono);text-align:right;white-space:nowrap} /* meldingen — de enige plek waar kleur betekenis draagt */ .melddoos{border-radius:7px;padding:9px 12px;font-size:.71rem;line-height:1.55;margin-bottom:11px} .melddoos.goed{background:var(--goed-t);border:1px solid var(--goed);color:var(--goed-d)} .melddoos.let{background:var(--let-t);border:1px solid var(--let);color:var(--let-d)} .melddoos.stop{background:var(--stop-t);border:1px solid var(--stop);color:var(--stop-d)} .waarsch{border-radius:7px;padding:8px 10px;font-size:.67rem;line-height:1.55;margin-bottom:7px} .waarsch.goed{background:var(--goed-t);border:1px solid var(--goed);color:var(--goed-d)} .waarsch.let{background:var(--let-t);border:1px solid var(--let);color:var(--let-d)} .waarsch.stop{background:var(--stop-t);border:1px solid var(--stop);color:var(--stop-d)} .tip{font-size:.65rem;color:var(--ink2);line-height:1.6;margin-top:8px;background:var(--grijs); border-radius:6px;padding:8px 10px} /* rijkaart — één regel per object in een werkvoorraad */ .rij{display:grid;gap:10px;align-items:center;border:1px solid var(--lijn);border-left-width:4px; border-radius:7px;padding:9px 12px;margin-bottom:7px;background:var(--kaart)} .rij.goed{border-left-color:var(--goed)} .rij.let{border-left-color:var(--let)} .rij.stop{border-left-color:var(--stop)} .rij.rust{border-left-color:var(--lijn2)} .rij b{font-size:.78rem} .rij span{font-size:.63rem;color:var(--ink2)} .rij div>span:not(.st){display:block;margin-top:2px} /* ketenbalk met poortsloten — stappen van een proces */ .keten{display:flex;align-items:stretch;flex-wrap:wrap} .stap{flex:1;min-width:112px;border:1px solid var(--lijn);border-left-width:0;padding:7px 9px; background:var(--kaart);position:relative} .stap:first-child{border-left-width:1px;border-radius:6px 0 0 6px} .stap:last-child{border-radius:0 6px 6px 0} .stap b{font-size:.69rem;display:block} .stap span{font-size:.58rem;color:var(--ink2);display:block;margin-top:2px;line-height:1.4} .stap.klaar{background:var(--goed-t)} .stap.nu{background:var(--ink);color:var(--knop-ink)} .stap.nu span{color:rgba(255,255,255,.78)} .stap.slot{background:var(--stop-t)} .slotje{position:absolute;top:5px;right:6px;font-size:.68rem} /* inklapbare sectie in een zijpaneel */ .vouw{border-top:1px solid var(--grijs2)} .vouw>button{width:100%;text-align:left;border:0;background:none;padding:9px 0;font-size:.74rem; font-weight:700;display:flex;align-items:center;gap:7px;color:var(--ink)} .vouw>button s{text-decoration:none;margin-left:auto;font-size:.65rem;color:var(--ink2);font-weight:400} .vouw__in{padding:0 0 11px} /* melding onderin */ .toast{display:none;position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--ink); color:var(--knop-ink);border-radius:8px;padding:11px 18px;font-size:.74rem;z-index:60;max-width:820px;line-height:1.55} .toast.aan{display:block} /* document — offerte, opdrachtbevestiging, order */ .a4{width:794px;background:var(--kaart);box-shadow:var(--schaduw-laag);padding:50px 58px;font-size:.72rem;line-height:1.65} .a4 .kop{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid var(--ink); padding-bottom:14px} .a4 h2{font-size:.72rem;margin:20px 0 6px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2)} .a4 .klein{font-size:.63rem;color:var(--ink2);line-height:1.6} .a4 .tot{display:flex;justify-content:space-between;padding:3px 0;font-size:.72rem} .a4 .tot.eind{border-top:1px solid var(--ink);margin-top:5px;padding-top:7px;font-weight:800;font-size:.85rem} @media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important}} /* ===================================================================== Wat hier NIET in hoort: kleuren per module. Heeft een scherm een tint nodig die er niet is, dan is dat een gesprek over betekenis — niet een literal in een modulebestand. De vier semantische kleuren (accent, goed, let, stop) dekken alles wat we tot nu toe tegenkwamen. ===================================================================== */ /* ═══ Zand (besluit 10-08) · filtergroepen, betekeniskleur en sorteerkoppen ═══ Referentie: docs/prototypes/stijlvoorstel-mengvorm2.html — standaardstand. */ /* §3 · een chipgroep is één blok: geen losse ovalen meer */ .filters{display:flex;gap:0;align-items:center;flex-wrap:wrap;margin:14px 0 18px} .fgroep{display:inline-flex;align-items:center;margin-right:22px;margin-top:6px} .flabel{font:700 10.5px var(--font-mono);letter-spacing:.12em;color:var(--ink3); text-transform:uppercase;margin-right:10px} /* blok I (13-10-2026) · een lange rij breekt af in plaats van het scherm buiten beeld te duwen (Veiligheid › Matrix: 2.266 px) */ .chips{display:inline-flex;flex-wrap:wrap;max-width:100%;border:1px solid var(--lijn);border-radius:9px;overflow:hidden;background:var(--kaart)} .chips .chip{border:0;border-right:1px solid var(--grijs2);background:transparent; padding:7px 14px;font:600 12.5px var(--font-ui);color:var(--ink2);cursor:pointer} .chips .chip:last-child{border-right:0} .chips .chip:hover{background:var(--grijs)} .chips .chip.is-actief{background:var(--knop);color:var(--knop-ink);font-weight:700} /* §4 · soort heeft een vaste kleur, platformbreed (register in bouwstenen.js): isolatie/spouw groen, kozijnen accent-blauw, keten paars (Blauw 13-08 — terra vervallen), overig neutraal */ .soortchip{display:inline-block;font:700 10.5px var(--font-mono);padding:3px 9px;border-radius:6px; background:var(--goed-t);color:var(--goed-d);white-space:nowrap} .soortchip.k-kozijnen{background:var(--accent-t);color:var(--accent-d)} .soortchip.k-keten{background:var(--paars-t);color:var(--paars)} .soortchip.k-neutraal{background:var(--grijs);color:var(--ink2)} /* §4 · status: tonale pillen, altijd mét het woord erbij (leeslaagregel) */ .status{display:inline-block;font-size:11.5px;font-weight:700;padding:4px 12px;border-radius:99px;white-space:nowrap} .status.s-geplaatst{background:var(--accent-t);color:var(--accent-d)} .status.s-uitvoering{background:var(--goed-t);color:var(--goed-d)} .status.s-wacht{background:var(--let-t);color:var(--let-d)} .status.s-af{background:var(--grijs);color:var(--ink2)} /* §5 · de sorteertabel (component .tafel) + generieke sorteerkop-lagen. De pijl en de actieve kolom werken in élke tabel waar BS.sorteerbaar op staat; .tafel is de volledige prototype-vorm voor lijstschermen. */ .tafel{background:var(--kaart);border:1px solid var(--lijn);border-radius:16px;overflow:hidden; box-shadow:var(--schaduw-kaart)} .tafel table{width:100%;border-collapse:collapse} .tafel th{font:700 10.5px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3); text-align:left;padding:0;background:var(--rail);border-bottom:1px solid var(--lijn)} .tafel th .bs-sorteerknop{padding:12px 14px} .tafel td{padding:13px 14px;border-bottom:1px solid var(--grijs);vertical-align:top;font-size:13.5px} .tafel tr:last-child td{border-bottom:0} .tafel tbody tr:hover td{background:var(--accent-t2)} .tafel tbody tr[data-vkb-doel],.tafel tbody tr[data-doel]{cursor:pointer} .tafel td .sub{font-size:11.5px;color:var(--ink3);margin-top:2px} .tafel .nr{font:700 13px var(--font-mono)} .tafel .dash{color:var(--ink3)} .tafel td.num{font-family:var(--font-mono);font-size:12.5px} .bs-sorteerknop{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:6px;width:100%; font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer} .bs-sorteerknop:hover{background:var(--grijs2);color:var(--ink)} .bs-sorteerknop:focus-visible{outline:var(--focus-ring, 3px solid var(--accent));outline-offset:-3px} th .pijl{font-size:9px;opacity:0;transition:opacity .12s} th .bs-sorteerknop:hover .pijl{opacity:.45} th.sort-op .pijl,th.sort-neer .pijl{opacity:1;color:var(--accent-d)} th.sort-op .bs-sorteerknop,th.sort-neer .bs-sorteerknop{color:var(--ink);background:var(--kaart); box-shadow:inset 0 -2px 0 var(--accent)} th.sort-neer .pijl{display:inline-block;transform:rotate(180deg)} /* ═══ D · knopfamilie (besluit 339, Michiel 09-10-2026 «akkoord, bouw») ══════════════════════════════════════════ Eén familie met vier rollen: .knop (primair · gevaar · link · klein · groot), .keuze (één van enkele, aan = --knop gevuld), .filter (meerdere tegelijk, aan = accent-tint + inktrand + ✓) en .chip (status, nooit klikbaar). Radius 8 overal; de pil (99 px) blijft alleen voor een teller. Geen gradient, geen slagschaduw op een knop. D2 zet de oude families op dezelfde maten tot hun module door het herontwerp (H4) gaat — dan verdwijnen die namen uit de module. */ .knop{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:0 12px;border:var(--lijndikte) solid var(--lijn2);border-radius:var(--radius-klein);background:var(--kaart);font:700 13px/1.2 var(--font-ui);color:var(--ink);white-space:nowrap;cursor:pointer;text-decoration:none;transition:background var(--overgang),border-color var(--overgang)} .knop:hover{background:var(--grijs)} .knop.primair{background:var(--knop);border-color:var(--knop);color:var(--knop-ink)} .knop.primair:hover{background:var(--knop-d);border-color:var(--knop-d)} .knop.gevaar{color:var(--stop);border-color:var(--stop)} .knop.gevaar:hover{background:var(--stop-t)} .knop.gevaar.vol{background:var(--stop);border-color:var(--stop);color:var(--knop-ink)} .knop.link{border-color:transparent;background:none;text-decoration:underline;text-underline-offset:3px;font-weight:600;color:var(--ink2)} .knop.klein{min-height:26px;padding:0 9px;font-size:12px} .knop.groot{min-height:38px;padding:0 16px;font-size:14px} .knop:disabled,.knop[aria-disabled="true"]{opacity:.45;cursor:not-allowed} .knop .g{color:var(--ink3);font-weight:500}.knop.primair .g{color:inherit;opacity:.8} .knop .tel,.keuze .tel,.filter .tel{font:700 10.5px var(--font-mono);background:var(--grijs2);border-radius:var(--radius-pill);padding:1px 6px;color:var(--ink2)} .knop.primair .tel,.keuze button[aria-pressed="true"] .tel{background:rgba(255,255,255,.22);color:inherit} .keuze{display:inline-flex;min-height:28px;border:var(--lijndikte) solid var(--lijn2);border-radius:var(--radius-klein);overflow:hidden;background:var(--kaart);vertical-align:middle} .keuze button{border:0;border-right:var(--lijndikte) solid var(--lijn);background:none;padding:0 10px;font:700 12.5px var(--font-ui);color:var(--ink2);display:inline-flex;align-items:center;gap:6px;cursor:pointer;border-radius:0} .keuze button:last-child{border-right:0} .keuze button:hover{background:var(--grijs)} .keuze button[aria-pressed="true"]{background:var(--knop);color:var(--knop-ink)} .keuze button:focus-visible{outline:var(--focus-ring);outline-offset:-3px} .filter{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border:var(--lijndikte) solid var(--lijn2);border-radius:var(--radius-klein);background:var(--kaart);font:600 12.5px var(--font-ui);color:var(--ink);cursor:pointer} .filter:hover{background:var(--grijs)} .filter[aria-pressed="true"],.filter.is-aan{background:var(--accent-t);border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)} .filter[aria-pressed="true"]::before,.filter.is-aan::before{content:"✓";font-weight:800;font-size:11px} .filter .m{font:600 10.5px var(--font-mono);color:var(--ink3)} :where(.chip){display:inline-flex;align-items:center;min-height:20px;padding:0 7px;border-radius:6px;font-size:11px;font-weight:700;background:var(--grijs);color:var(--ink2);white-space:nowrap} .chip.goed,.chip--goed{background:var(--goed-t);color:var(--goed-d)} .chip.let,.chip--let{background:var(--let-t);color:var(--let-d)} .chip.stop,.chip--stop{background:var(--stop-t);color:var(--stop-d)} .chip.rand{background:none;border:var(--lijndikte) solid currentColor} /* D2 · de oude families op de maten van de familie (tot hun module door het herontwerp gaat) */ /* D2 · het hidden-attribuut wint van het display van de familie: een verborgen knop blijft weg */ .knop[hidden], .keuze[hidden], .filter[hidden], .btn[hidden], .knopje[hidden], .bs-knop[hidden], .wbrij__knop[hidden], [class*="-knop"][hidden]{display:none} .btn, .knopje, .bs-knop, .wbrij__knop, .an-knop, .bd-knop, .bp-knop, .bs-knop, .cf-knop, .cfg-knop, .cpl-knop, .cred-knop, .ctrl-knop, .dc-knop, .dm-knop, .fac-knop, .fin-knop, .fn-knop, .hd-knop, .ia-knop, .ig-knop, .intra-knop, .kl-knop, .koz-knop, .kzc-knop, .lm-knop, .op-knop, .opl-knop, .org-knop, .pd-knop, .pf-knop, .pr-knop, .sb-knop, .sp-knop, .vb-knop, .vdw-knop, .vz-knop, .wbb-knop, .wd-knop, .wf-knop, .ws-knop, .wsc-knop, .wv-knop{min-height:32px;padding-top:0;padding-bottom:0;padding-left:12px;padding-right:12px;border-radius:var(--radius-klein);font-size:13px;font-weight:700;line-height:1.2;box-shadow:none;background-image:none;display:inline-flex;align-items:center;justify-content:center;gap:6px} .btn--klein, .knopje, .wbb-knop--klein, .an-knop--klein, .bd-knop--klein, .bp-knop--klein, .bs-knop--klein, .cf-knop--klein, .cfg-knop--klein, .cpl-knop--klein, .cred-knop--klein, .ctrl-knop--klein, .dc-knop--klein, .dm-knop--klein, .fac-knop--klein, .fin-knop--klein, .fn-knop--klein, .hd-knop--klein, .ia-knop--klein, .ig-knop--klein, .intra-knop--klein, .kl-knop--klein, .koz-knop--klein, .kzc-knop--klein, .lm-knop--klein, .op-knop--klein, .opl-knop--klein, .org-knop--klein, .pd-knop--klein, .pf-knop--klein, .pr-knop--klein, .sb-knop--klein, .sp-knop--klein, .vb-knop--klein, .vdw-knop--klein, .vz-knop--klein, .wbb-knop--klein, .wd-knop--klein, .wf-knop--klein, .ws-knop--klein, .wsc-knop--klein, .wv-knop--klein{min-height:26px;padding-left:9px;padding-right:9px;font-size:12px} .btn--primary, .btn--donker, .knopje.pri, .wbb-knop--p, .wbrij__knop--p, .cred-knop--zwart, .fn-knop--groen, .an-knop--primair, .bd-knop--primair, .bp-knop--primair, .bs-knop--primair, .cf-knop--primair, .cfg-knop--primair, .cpl-knop--primair, .cred-knop--primair, .ctrl-knop--primair, .dc-knop--primair, .dm-knop--primair, .fac-knop--primair, .fin-knop--primair, .fn-knop--primair, .hd-knop--primair, .ia-knop--primair, .ig-knop--primair, .intra-knop--primair, .kl-knop--primair, .koz-knop--primair, .kzc-knop--primair, .lm-knop--primair, .op-knop--primair, .opl-knop--primair, .org-knop--primair, .pd-knop--primair, .pf-knop--primair, .pr-knop--primair, .sb-knop--primair, .sp-knop--primair, .vb-knop--primair, .vdw-knop--primair, .vz-knop--primair, .wbb-knop--primair, .wd-knop--primair, .wf-knop--primair, .ws-knop--primair, .wsc-knop--primair, .wv-knop--primair{background:var(--knop);border-color:var(--knop);color:var(--knop-ink);box-shadow:none;background-image:none} .btn--primary:hover, .btn--donker:hover, .knopje.pri:hover, .wbb-knop--p:hover, .wbrij__knop--p:hover, .cred-knop--zwart:hover, .fn-knop--groen:hover, .an-knop--primair:hover, .bd-knop--primair:hover, .bp-knop--primair:hover, .bs-knop--primair:hover, .cf-knop--primair:hover, .cfg-knop--primair:hover, .cpl-knop--primair:hover, .cred-knop--primair:hover, .ctrl-knop--primair:hover, .dc-knop--primair:hover, .dm-knop--primair:hover, .fac-knop--primair:hover, .fin-knop--primair:hover, .fn-knop--primair:hover, .hd-knop--primair:hover, .ia-knop--primair:hover, .ig-knop--primair:hover, .intra-knop--primair:hover, .kl-knop--primair:hover, .koz-knop--primair:hover, .kzc-knop--primair:hover, .lm-knop--primair:hover, .op-knop--primair:hover, .opl-knop--primair:hover, .org-knop--primair:hover, .pd-knop--primair:hover, .pf-knop--primair:hover, .pr-knop--primair:hover, .sb-knop--primair:hover, .sp-knop--primair:hover, .vb-knop--primair:hover, .vdw-knop--primair:hover, .vz-knop--primair:hover, .wbb-knop--primair:hover, .wd-knop--primair:hover, .wf-knop--primair:hover, .ws-knop--primair:hover, .wsc-knop--primair:hover, .wv-knop--primair:hover{background:var(--knop-d);border-color:var(--knop-d);color:var(--knop-ink)} .btn--primary:disabled, .knopje.pri:disabled, .an-knop--primair:disabled, .bd-knop--primair:disabled, .bp-knop--primair:disabled, .bs-knop--primair:disabled, .cf-knop--primair:disabled, .cfg-knop--primair:disabled, .cpl-knop--primair:disabled, .cred-knop--primair:disabled, .ctrl-knop--primair:disabled, .dc-knop--primair:disabled, .dm-knop--primair:disabled, .fac-knop--primair:disabled, .fin-knop--primair:disabled, .fn-knop--primair:disabled, .hd-knop--primair:disabled, .ia-knop--primair:disabled, .ig-knop--primair:disabled, .intra-knop--primair:disabled, .kl-knop--primair:disabled, .koz-knop--primair:disabled, .kzc-knop--primair:disabled, .lm-knop--primair:disabled, .op-knop--primair:disabled, .opl-knop--primair:disabled, .org-knop--primair:disabled, .pd-knop--primair:disabled, .pf-knop--primair:disabled, .pr-knop--primair:disabled, .sb-knop--primair:disabled, .sp-knop--primair:disabled, .vb-knop--primair:disabled, .vdw-knop--primair:disabled, .vz-knop--primair:disabled, .wbb-knop--primair:disabled, .wd-knop--primair:disabled, .wf-knop--primair:disabled, .ws-knop--primair:disabled, .wsc-knop--primair:disabled, .wv-knop--primair:disabled{background:var(--grijs2);border-color:var(--grijs2);color:var(--ink3)} /* losse chips zijn filters: tint + inktrand, nooit gevuld */ .bs-chip, .wbb-chip, .rs-chip, .opl-chip, .vr-chip, .ct-chip, .pm-flt, .an-flt, .fac-flt, .lm-flt, .org-flt, .pd-flt, .sb-flt, .ctrl-flt, .mgmt-chip, .mk-chip, .kr-chip, .kt-chip, .co-chip, .dc-chip, .cfg-chip, .sop-chip, .rb-chip, .an-chip, .cf-vglchip, .tpl-merkchip, .va-advchip, .va-afwchip, .va-dagchip{min-height:28px;padding-top:0;padding-bottom:0;padding-left:10px;padding-right:10px;border-radius:var(--radius-klein);font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;box-shadow:none} .bs-chip.is-actief, .wbb-chip.is-actief, .rs-chip.is-actief, .opl-chip.is-actief, .vr-chip.is-actief, .ct-chip.is-actief, .pm-flt.is-actief, .an-flt.is-actief, .fac-flt.is-actief, .lm-flt.is-actief, .org-flt.is-actief, .pd-flt.is-actief, .sb-flt.is-actief, .ctrl-flt.is-actief, .mgmt-chip.is-actief, .mk-chip.is-actief, .kr-chip.is-actief, .kt-chip.is-actief, .co-chip.is-actief, .dc-chip.is-actief, .cfg-chip.is-actief, .sop-chip.is-actief, .rb-chip.is-actief, .an-chip.is-actief, .cf-vglchip.is-actief, .tpl-merkchip.is-actief, .va-advchip.is-actief, .va-afwchip.is-actief, .va-dagchip.is-actief, .bs-chip.is-aan, .wbb-chip.is-aan, .rs-chip.is-aan, .opl-chip.is-aan, .vr-chip.is-aan, .ct-chip.is-aan, .pm-flt.is-aan, .an-flt.is-aan, .fac-flt.is-aan, .lm-flt.is-aan, .org-flt.is-aan, .pd-flt.is-aan, .sb-flt.is-aan, .ctrl-flt.is-aan, .mgmt-chip.is-aan, .mk-chip.is-aan, .kr-chip.is-aan, .kt-chip.is-aan, .co-chip.is-aan, .dc-chip.is-aan, .cfg-chip.is-aan, .sop-chip.is-aan, .rb-chip.is-aan, .an-chip.is-aan, .cf-vglchip.is-aan, .tpl-merkchip.is-aan, .va-advchip.is-aan, .va-afwchip.is-aan, .va-dagchip.is-aan{background:var(--accent-t);border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink)} /* aaneengesloten groepen zijn keuzes: aan = --knop */ .chips .chip.is-actief, .bs-kg button[aria-pressed="true"], .wbb-seg button.is-aan, .cm-seg.is-actief, .rl-seg.is-actief, .org-glseg.is-actief, .iz-perkies button.is-aan{background:var(--knop);color:var(--knop-ink);border-color:var(--knop)} .chips, .bs-kg, .wbb-seg{border-radius:var(--radius-klein)} /* tabs als pil waren er nog in een paar modules: zelfde maat, zelfde «aan» */ .bs-tab, .wbb-tab, .cred-tab{border-radius:var(--radius-klein);min-height:32px;padding-top:0;padding-bottom:0;display:inline-flex;align-items:center} .bs-tab.is-actief, .wbb-tab[aria-selected="true"], .cred-tab.is-actief{background:var(--knop);border-color:var(--knop);color:var(--knop-ink)} /* D3 · de oude chipnamen (chip--groen/amber/rood/stil/terra, 650× in de modules) krijgen de betekenistinten van de familie */ .chip--groen{background:var(--goed-t);color:var(--goed-d)} .chip--amber,.chip--terra{background:var(--let-t);color:var(--let-d)} .chip--rood{background:var(--stop-t);color:var(--stop-d)} .chip--stil{background:var(--grijs);color:var(--ink2)} /* ── thema-petrol-werkbank.css ── */ /* thema-petrol-werkbank.css — de componentlaag van «Petrol werkbank» (PETROL-WERKBANK-BOUWSPEC, 24-09-2026). Alleen actief onder html[data-thema="petrol-werkbank"]; die vlag zet app.js (en veld.js, login.html) uit /api/tenant-merk, dus alleen op de host van ThermoSolutions. De tokens zelf komen uit /huisstijl.css (server, per host) — dit bestand kent geen enkele kleurwaarde, alleen var(). De donkere stand is html[data-stand="donker"], of «systeem» via prefers-color-scheme zolang niemand «licht» koos. Wat hier staat is maat en vorm (besluit 126): één laag, meer lucht, minder kaders, één merkkleur op handelingen. */ /* ═══ rail ═══════════════════════════════════════════════════════════ */ html[data-thema="petrol-werkbank"] #nav { border-right: var(--lijndikte) solid var(--nav-lijn); } html[data-thema="petrol-werkbank"] .nav__merk { padding: 22px 20px 16px; border-bottom: var(--lijndikte) solid var(--nav-lijn); margin-bottom: 6px; } html[data-thema="petrol-werkbank"] .nav__logo { display: none; height: 20px; width: auto; max-width: 180px; } html[data-thema="petrol-werkbank"] .nav__logo--licht { display: block; } html[data-thema="petrol-werkbank"] .nav__host { display: block; margin-top: 8px; font: 500 9.5px var(--font-mono); letter-spacing: .06em; color: var(--nav-ink2); } html[data-thema="petrol-werkbank"] .nav__merk--smal { color: var(--accent); letter-spacing: .08em; border-bottom: 0; } html[data-thema="petrol-werkbank"] .stapV { position: relative; border-radius: 7px; margin: 0 8px; } html[data-thema="petrol-werkbank"] .stapV:hover { background: var(--accent-t2); } html[data-thema="petrol-werkbank"] .stapV[aria-current="true"] { background: var(--nav2); } html[data-thema="petrol-werkbank"] .stapV[aria-current="true"]::before { content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--cyaan); } html[data-thema="petrol-werkbank"] .stapV[aria-current="true"] .stapV__nm, html[data-thema="petrol-werkbank"] .stapV[aria-current="true"] .stapV__tel { color: var(--nav-actief); } html[data-thema="petrol-werkbank"] .stapV__nm { font-weight: 600; } html[data-thema="petrol-werkbank"] .stapV__tel { font-weight: 500; color: var(--nav-ink2); } html[data-thema="petrol-werkbank"] .submods { background: transparent; } html[data-thema="petrol-werkbank"] .submod:hover, html[data-thema="petrol-werkbank"] .submod[aria-current="true"] { color: var(--nav-actief); } html[data-thema="petrol-werkbank"] .submod[aria-current="true"] { box-shadow: inset 2px 0 0 var(--cyaan); } html[data-thema="petrol-werkbank"] .railwie__tekst b { color: var(--nav-actief); } html[data-thema="petrol-werkbank"] .stapV:focus-visible, html[data-thema="petrol-werkbank"] .submod:focus-visible, html[data-thema="petrol-werkbank"] .railwie:focus-visible, html[data-thema="petrol-werkbank"] .railicoon:focus-visible, html[data-thema="petrol-werkbank"] .railklap:focus-visible { outline: 3px solid var(--nav-focus); } html[data-thema="petrol-werkbank"] .stapV__punt.is-stop, html[data-thema="petrol-werkbank"] .stapV__punt.is-let, html[data-thema="petrol-werkbank"] .stapV__punt.is-goed { border: 0; } html[data-thema="petrol-werkbank"] .stapV__punt.is-stop { background: var(--stop); } html[data-thema="petrol-werkbank"] .stapV__punt.is-let { background: var(--let); } html[data-thema="petrol-werkbank"] .stapV__punt.is-goed { background: var(--goed); } html[data-thema="petrol-werkbank"] .railicoon--stand .railicoon__glyph { font-size: 15px; } html[data-thema="petrol-werkbank"] .app.rail-smal .stapV[aria-current="true"] .stapV__glyph { color: var(--nav-actief); } /* ═══ tabbalk en paginakop ═══════════════════════════════════════════ */ html[data-thema="petrol-werkbank"] .cluster-tabs { gap: 20px; padding: 12px 28px 0; background: var(--kaart); border-bottom: var(--lijndikte) solid var(--lijn); } html[data-thema="petrol-werkbank"] .cluster-tab { border-radius: 0; padding: 8px 0 11px; background: transparent; color: var(--ink2); font-weight: 500; } html[data-thema="petrol-werkbank"] .cluster-tab:hover { background: transparent; color: var(--ink); } html[data-thema="petrol-werkbank"] .cluster-tab.is-actief { background: transparent; color: var(--accent); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); } html[data-thema="petrol-werkbank"] .cluster-terug { color: var(--ink2); } html[data-thema="petrol-werkbank"] .kicker { color: var(--accent); letter-spacing: .1em; } /* ═══ KPI-strip: één object met hairlines ════════════════════════════ */ html[data-thema="petrol-werkbank"] .bs-stats { gap: 0; background: var(--kaart); border: var(--lijndikte) solid var(--lijn); border-radius: 12px; box-shadow: var(--schaduw-kaart); overflow: hidden; } html[data-thema="petrol-werkbank"] .bs-stat { display: block; position: relative; background: transparent; border: 0; border-left: var(--lijndikte) solid var(--lijn); border-radius: 0; padding: 14px 18px 12px; } html[data-thema="petrol-werkbank"] .bs-stat:first-child { border-left: 0; } html[data-thema="petrol-werkbank"] .bs-stat__bol { display: none; } html[data-thema="petrol-werkbank"] .bs-stat__label { font: 500 .62rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); } html[data-thema="petrol-werkbank"] .bs-stat__waarde { font-size: 1.7rem; font-weight: 600; letter-spacing: -.02em; margin: 6px 0 2px; font-variant-numeric: tabular-nums; color: var(--ink); } html[data-thema="petrol-werkbank"] .bs-stat__sub { color: var(--ink3); } html[data-thema="petrol-werkbank"] .bs-stat--amber::after, html[data-thema="petrol-werkbank"] .bs-stat--rood::after, html[data-thema="petrol-werkbank"] .bs-stat--groen::after { content: ""; position: absolute; top: 14px; right: 14px; width: 8px; height: 8px; border-radius: 50%; } html[data-thema="petrol-werkbank"] .bs-stat--amber::after { background: var(--let); } html[data-thema="petrol-werkbank"] .bs-stat--rood::after { background: var(--stop); } html[data-thema="petrol-werkbank"] .bs-stat--groen::after { background: var(--goed); } html[data-thema="petrol-werkbank"] .bs-stat--amber .bs-stat__waarde { color: var(--let-d); } html[data-thema="petrol-werkbank"] .bs-stat--rood .bs-stat__waarde { color: var(--stop-d); } html[data-thema="petrol-werkbank"] .bs-stat--groen .bs-stat__waarde { color: var(--goed-d); } html[data-thema="petrol-werkbank"] .bs-stat--donker { background: var(--accent-t); } html[data-thema="petrol-werkbank"] .bs-stat--donker .bs-stat__waarde { color: var(--accent-d); } html[data-thema="petrol-werkbank"] .bs-stat--donker .bs-stat__label, html[data-thema="petrol-werkbank"] .bs-stat--donker .bs-stat__sub { color: var(--ink2); } html[data-thema="petrol-werkbank"] .bs-stat.is-actief { border-color: var(--lijn); box-shadow: inset 0 -3px 0 var(--accent); } /* ═══ chips, segmentbalk, knoppen ════════════════════════════════════ */ html[data-thema="petrol-werkbank"] .vp-seggroep, html[data-thema="petrol-werkbank"] .chips { display: inline-flex; gap: 0; padding: 2px; border: 0; border-radius: 8px; background: var(--grijs); } html[data-thema="petrol-werkbank"] .vp-seggroep .bs-chip, html[data-thema="petrol-werkbank"] .chips .chip { border: 0; border-radius: 6px; padding: 5px 12px; background: transparent; color: var(--ink2); font-weight: 500; } html[data-thema="petrol-werkbank"] .vp-seggroep .bs-chip.is-actief, html[data-thema="petrol-werkbank"] .chips .chip.is-actief { background: var(--kaart); color: var(--ink); font-weight: 600; box-shadow: var(--schaduw-knop); } html[data-thema="petrol-werkbank"] .bs-chip { background: var(--kaart); border-color: var(--lijn2); color: var(--ink2); } html[data-thema="petrol-werkbank"] .bs-chip.is-actief { background: var(--accent-t); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); } html[data-thema="petrol-werkbank"] .btn--primary { background: var(--knop); color: var(--knop-ink); } html[data-thema="petrol-werkbank"] .btn--primary:hover { background: var(--knop-d); } html[data-thema="petrol-werkbank"] .btn--stil { background: var(--kaart); border-color: var(--lijn2); color: var(--ink); } html[data-thema="petrol-werkbank"] .btn:focus-visible, html[data-thema="petrol-werkbank"] input:focus-visible, html[data-thema="petrol-werkbank"] select:focus-visible, html[data-thema="petrol-werkbank"] textarea:focus-visible { outline: var(--focus-ring); } /* ═══ panelen, tabellen, drawer, modaal ══════════════════════════════ */ html[data-thema="petrol-werkbank"] thead th { background: var(--rail); color: var(--ink2); font: 500 .62rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; } html[data-thema="petrol-werkbank"] .bs-drawer { background: var(--vlak); } html[data-thema="petrol-werkbank"] .bs-drawer__kop { background: var(--kaart); } html[data-thema="petrol-werkbank"] .bs-modal { background: var(--kaart); color: var(--ink); box-shadow: var(--schaduw-laag); } html[data-thema="petrol-werkbank"] .bs-modal-laag, html[data-thema="petrol-werkbank"] .bs-drawer-laag { background: var(--sluier); } /* ═══ planning: blokken als kaartjes, raster, nu-lijn ════════════════ */ html[data-thema="petrol-werkbank"] .vp-rooster--dag thead th, html[data-thema="petrol-werkbank"] .vp-dag__adv { background: var(--kaart); } html[data-thema="petrol-werkbank"] .vp-rooster--dag thead th { background: var(--rail); } html[data-thema="petrol-werkbank"] .vp-rooster--dag tbody td:nth-child(even) { background: var(--accent-t2); } html[data-thema="petrol-werkbank"] .vp-blok { background: var(--kaart); border: var(--lijndikte) solid var(--lijn); border-left: 2px solid var(--accent); border-radius: 7px; box-shadow: var(--schaduw-knop); margin: 4px 4px 4px 3px; } html[data-thema="petrol-werkbank"] .vp-blok__tijd { color: var(--accent-d); } html[data-thema="petrol-werkbank"] .vp-blok.is-concept, html[data-thema="petrol-werkbank"] .vp-blok.is-conceptvak { border-style: dashed; box-shadow: none; background: transparent; } html[data-thema="petrol-werkbank"] .pb-blok.is-schouw { border-left-color: var(--ink3); } html[data-thema="petrol-werkbank"] .pb-blok.is-uitvoering { background: var(--grijs); border-left-color: var(--ink3); } html[data-thema="petrol-werkbank"] .pb-blok .pb-reis.is-stop { color: var(--stop-d); } html[data-thema="petrol-werkbank"] .pb-groep td, html[data-thema="petrol-werkbank"] .up-groep td { background: var(--rail); } html[data-thema="petrol-werkbank"] .pb-nu { background: var(--cyaan); } html[data-thema="petrol-werkbank"] .pb-nu::before { background: var(--cyaan); } html[data-thema="petrol-werkbank"] .pb-paneel { box-shadow: var(--schaduw-kaart); } /* ═══ veld-app ═══════════════════════════════════════════════════════ */ html[data-thema="petrol-werkbank"] .va-dagchip.is-actief { background: var(--accent); color: var(--knop-ink); } /* ═══ login ══════════════════════════════════════════════════════════ */ /* LOGIN-A (01-10): de tenantvoordeur is één kaart (login.html, body.is-tenant); het merkvlak hieronder blijft voor wie het nog aanzet */ html[data-thema="petrol-werkbank"] .login-schil { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; } html[data-thema="petrol-werkbank"] body.is-tenant .login-schil, body.is-tenant .login-schil { grid-template-columns: minmax(0, 1fr); } html[data-thema="petrol-werkbank"] .login-merk { display: flex; flex-direction: column; justify-content: space-between; padding: 40px 44px; background: var(--merkvlak); color: var(--nav-ink); } html[data-thema="petrol-werkbank"] .login-merk img { height: 22px; width: auto; } html[data-thema="petrol-werkbank"] .login-merk h2 { margin: 0 0 6px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--kaart); } html[data-thema="petrol-werkbank"] .login-merk p { margin: 0; max-width: 34ch; line-height: 1.5; } html[data-thema="petrol-werkbank"] .login-merk .mono { color: var(--nav-ink2); font-size: 9.5px; letter-spacing: .06em; } html[data-thema="petrol-werkbank"] .login-vlak { display: grid; place-items: center; padding: 24px 16px; } html[data-thema="petrol-werkbank"] .kaart { box-shadow: var(--schaduw-kaart); border-radius: 14px; } @media (max-width: 860px) { html[data-thema="petrol-werkbank"] .login-schil { grid-template-columns: 1fr; } html[data-thema="petrol-werkbank"] .login-merk { display: none; } } /* ═══ donkere stand (besluit 125): de witte literals van de gedeelde laag op de kaartkleur ══ */ html[data-thema="petrol-werkbank"][data-stand="donker"] .nav__logo--licht { display: none; } html[data-thema="petrol-werkbank"][data-stand="donker"] .nav__logo--donker { display: block; } html[data-thema="petrol-werkbank"][data-stand="donker"] :is(.bs-stat, .bs-chip, .bs-drawer__kop, .bs-modal, .btn--stil, .vp-dag__adv, .vp-rooster--dag thead th, th.sort-op .bs-sorteerknop, th.sort-neer .bs-sorteerknop, .va-scherm, .va-appbody, .va-afspraak, .va-kaart, .vf-kaart, .kaartje, .pb-paneel, input, select, textarea) { background: var(--kaart); color: var(--ink); } html[data-thema="petrol-werkbank"][data-stand="donker"] :is(.vp-blok, .pb-blok) { background: var(--kaart); } html[data-thema="petrol-werkbank"][data-stand="donker"] .btn--primary { color: var(--knop-ink); } html[data-thema="petrol-werkbank"][data-stand="donker"] .bs-chip.is-actief { background: var(--accent-t); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); } html[data-thema="petrol-werkbank"][data-stand="donker"] .nav__merk--smal { color: var(--accent); } @media (prefers-color-scheme: dark) { html[data-thema="petrol-werkbank"]:not([data-stand="licht"]) .nav__logo--licht { display: none; } html[data-thema="petrol-werkbank"]:not([data-stand="licht"]) .nav__logo--donker { display: block; } html[data-thema="petrol-werkbank"]:not([data-stand="licht"]) :is(.bs-stat, .bs-chip, .bs-drawer__kop, .bs-modal, .btn--stil, .vp-dag__adv, .vp-rooster--dag thead th, th.sort-op .bs-sorteerknop, th.sort-neer .bs-sorteerknop, .va-scherm, .va-appbody, .va-afspraak, .va-kaart, .vf-kaart, .kaartje, .pb-paneel, input, select, textarea) { background: var(--kaart); color: var(--ink); } html[data-thema="petrol-werkbank"]:not([data-stand="licht"]) :is(.vp-blok, .pb-blok) { background: var(--kaart); } html[data-thema="petrol-werkbank"]:not([data-stand="licht"]) .btn--primary { color: var(--knop-ink); } html[data-thema="petrol-werkbank"]:not([data-stand="licht"]) .bs-chip.is-actief { background: var(--accent-t); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); } } @media (prefers-reduced-motion: no-preference) { html[data-thema="petrol-werkbank"] .stapV, html[data-thema="petrol-werkbank"] .cluster-tab, html[data-thema="petrol-werkbank"] .bs-chip { transition: background var(--overgang), color var(--overgang); } } /* ── app.css ── */ /* ===================================================================== app.css — Casa360 Beheer · navigatieschil (variant A) + Vandaag Bouwt uitsluitend voort op casa360-tokens.css. Geen nieuwe kleuren, diepte via de tokens in casa360-diepte.css; geen blauw. Basis = 1px-lijnen en paneel-tinten. Zie CLAUDE.md. ===================================================================== */ * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { overflow: hidden; } .app { display: grid; /* minmax(0,1fr): content mag krimpen — brede tabellen scrollen dan bínnen de contentkolom i.p.v. de hele pagina breder te duwen */ grid-template-columns: 264px minmax(0, 1fr); height: 100vh; /* Werkbank v3.0 · een goot tussen rail en inhoud. Systeembreed en op het raster, niet per module: de module-wortelnorm (padding 26/32/72) wordt nu eenmaal vergeten — het moduleoverzicht had `padding: 4px 0 8px` en plakte daardoor tegen de rail. Met de goot op het raster kán dat niet meer, hoe een scherm zijn eigen binnenwerk ook opmaakt. Tegen een donkere rail is dit bovendien geen luxe. Wit tegen wit vergeeft een krappe marge; zwart tegen wit maakt er een naad van. */ /* UITLIJNING (Michiel 04-09): de goot is weg — de pagina sluit direct op de rail aan, en elke modulewortel begint op dezelfde linkerlijn (zie de uitlijnregel bij .content hieronder). De marge zit in de wortel zelf (padding 32px), niet meer in een grijze strook ertussen. */ column-gap: 0; background: var(--vlak); } /* ---------- Navigatie: accordion-boom (UX-besluit 14-07-2026) ---------- */ .nav { /* Blauw 13-08 (prompt §2): de zijbalk is wit; --rail blijft alleen voor tabelkoppen bestaan. */ background: var(--kaart); border-right: var(--lijndikte) solid var(--c-lijn); display: flex; flex-direction: column; overflow: hidden; } .nav__merk { padding: 20px 18px 12px; font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em; } .nav__merk span { color: var(--accent); } /* Blauw 13-08: de cijfers in accent */ .nav__boom { flex: 1; overflow-y: auto; padding: 4px 10px 10px; } .dom { margin-bottom: 2px; } .dom__kop { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; padding: 10px 12px; border-radius: 10px; font-family: var(--font-ui); font-size: .84rem; font-weight: 700; color: var(--c-ink-2); transition: background var(--overgang), color var(--overgang); } .dom__kop:hover { background: var(--c-vlak); } .dom.is-actief .dom__kop { background: var(--accent-t); color: var(--accent); } .dom.is-actief.is-open .dom__kop { background: transparent; color: var(--c-ink); } .dom__pijl { margin-left: auto; font-size: .58rem; color: var(--c-ink-3); transition: transform var(--overgang); } .dom.is-open .dom__pijl { transform: rotate(90deg); } .dom__badge { font-size: .58rem; font-weight: 800; background: var(--c-terra); color: var(--knop-ink); border-radius: var(--radius-pill); padding: 1px 6px; } .dom__modules { display: none; padding: 2px 0 6px; } .dom.is-open .dom__modules { display: block; } .nav__groep { padding: 10px 14px 3px 26px; } .module { display: block; width: 100%; text-align: left; padding: 7px 12px 7px 26px; margin-bottom: 1px; border: 0; border-left: 2px solid transparent; border-radius: 9px; background: transparent; cursor: pointer; font-family: var(--font-ui); font-size: .8rem; color: var(--c-ink-2); transition: background var(--overgang), color var(--overgang); } .module:hover { background: var(--c-vlak); } .module[aria-current="true"] { background: var(--accent-t); color: var(--accent); font-weight: 800; } /* voet: zoeken + AANZICHT + rol-switch */ .nav__voet { margin-top: auto; border-top: var(--lijndikte) solid var(--c-lijn); padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; } .paneel__zoek { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); color: var(--c-ink-3); font-size: .78rem; cursor: text; } .paneel__zoek kbd { margin-left: auto; font-family: var(--font-mono); font-size: .6rem; background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: 5px; padding: 1px 5px; color: var(--c-ink-2); } .entiteit { display: flex; align-items: center; gap: 7px; background: transparent; border: 0; cursor: pointer; color: var(--c-ink-2); font-family: var(--font-mono); font-size: .62rem; letter-spacing: .04em; padding: 0 2px; text-align: left; } /* AANZICHT-stip: geconsolideerd = neutraal, casa360 = groen, casa365 = terra */ .entiteit__stip { width: 9px; height: 9px; border-radius: 50%; background: var(--c-ink-3); flex: none; } .entiteit.is-casa360 .entiteit__stip { background: var(--c-groen); } .entiteit.is-casa365 .entiteit__stip { background: var(--c-terra); } .rol { display: flex; align-items: center; gap: 10px; border: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); border-radius: 10px; padding: 8px 10px; cursor: pointer; font-family: var(--font-ui); text-align: left; } .rol:hover { border-color: var(--c-lijn-2); } .rol__avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--nav-actief); display: grid; place-items: center; font-weight: 800; font-size: .74rem; flex: none; } .rol__tekst { min-width: 0; display: flex; flex-direction: column; } .rol__naam { font-size: .76rem; font-weight: 700; color: var(--c-ink); } .rol__sub { font-size: .62rem; color: var(--c-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rol__wissel { margin-left: auto; font-size: .64rem; color: var(--accent-d); font-weight: 700; flex: none; } /* ---------- Content ---------- */ .content { position: relative; overflow-y: auto; overflow-x: auto; background: var(--c-paneel-2); min-width: 0; } /* UITLIJNING (Michiel 04-09): alle pagina's links uitgelijnd op de rail. De modulewortels dragen zelf «margin: 0 auto» (module-wortel-norm); dat centreerde ze en gaf op een breed scherm links een wisselende leegte — het meest op Vandaag. Deze regel wint van de wortelregel (id + klasse) en zet elke wortel op dezelfde linkerlijn; de max-breedte en de eigen padding van de wortel blijven. */ #content > .cluster-inhoud > *, #content > *:not(.cluster-tabs):not(.protoband):not(.cluster-inhoud) { margin-left: 0; margin-right: auto; } /* blok I (13-10-2026) · een wortel die direct in het werkvlak staat kromp tot de breedte van zijn inhoud (het vlak is een kolom en de rechtermarge is «auto»); hij vult nu het vlak tot zijn werkbreedte, net als een wortel in een tabbladgroep */ #content > *:not(.cluster-tabs):not(.protoband):not(.cluster-inhoud) { width: 100%; } .vandaag { max-width: var(--werkbreedte, 1240px); margin: 0; padding: 26px 32px 60px; } .begroeting { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .begroeting h1 { margin: 2px 0 0; font-size: 1.55rem; font-weight: 800; letter-spacing: -.01em; } .begroeting__rol { color: var(--c-ink-2); font-weight: 600; } .datum { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; color: var(--c-ink-3); text-transform: uppercase; } /* rolwisselaar */ .rolwissel { display: flex; gap: 4px; margin: 16px 0 4px; background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-pill); padding: 3px; width: max-content; } .rolwissel button { border: 0; background: transparent; cursor: pointer; padding: 6px 14px; border-radius: var(--radius-pill); font-family: var(--font-ui); font-size: .78rem; font-weight: 700; color: var(--c-ink-2); transition: background var(--overgang), color var(--overgang); } .rolwissel button[aria-pressed="true"] { background: var(--donker, var(--c-ink)); color: var(--donker-ink, var(--c-creme)); } /* signalenstrook — "wat vraagt vandaag om aandacht" */ .signalen { margin: 18px 0 6px; } .signalen__kop { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .signalen__lijst { display: flex; gap: 10px; flex-wrap: wrap; } .signaal { display: flex; align-items: center; gap: 8px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-left-width: 3px; border-radius: var(--radius); padding: 8px 12px; font-size: .8rem; color: var(--c-ink); cursor: pointer; transition: border-color var(--overgang); } .signaal:hover { border-color: var(--c-lijn-2); } .signaal--rood { border-left-color: var(--c-rood); } .signaal--amber { border-left-color: var(--c-amber); } .signaal--groen { border-left-color: var(--c-groen); } .signaal__icoon { font-size: .95rem; } /* tegels */ .sectiekop { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-3); margin: 26px 0 10px; } .tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .tegel { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-top-width: 3px; border-radius: var(--radius); padding: 14px 16px 16px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 10px; transition: border-color var(--overgang), transform var(--overgang); font-family: var(--font-ui); } .tegel:hover { border-color: var(--c-lijn-2); } .tegel--groen { border-top-color: var(--c-groen); } .tegel--terra { border-top-color: var(--c-terra); } .tegel--amber { border-top-color: var(--c-amber); } .tegel--stil { border-top-color: var(--c-lijn-2); } .tegel__kop { display: flex; align-items: center; gap: 8px; } .tegel__icoon { font-size: 1rem; } .tegel__naam { font-weight: 800; font-size: .92rem; } .tegel__pijl { margin-left: auto; color: var(--c-ink-3); font-size: .9rem; } .kpis { display: flex; flex-wrap: wrap; gap: 14px 20px; } .kpi { display: flex; flex-direction: column; gap: 2px; } .kpi__waarde { font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; } .kpi__waarde.mono { font-family: var(--font-mono); } .kpi__label { font-size: .68rem; color: var(--c-ink-2); } .kpi__waarde--rood { color: var(--c-rood); } .kpi__waarde--amber { color: var(--c-amber); } .kpi__waarde--groen { color: var(--c-groen-d); } /* funnel-mini */ .funnel { display: flex; align-items: flex-end; gap: 4px; height: 34px; } .funnel span { flex: 1; background: var(--c-groen-t); border-radius: 4px 4px 0 0; } .funnel span:last-child { background: var(--c-groen); } /* Voor mij te doen */ .tedoen { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); overflow: hidden; } .taak { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-top: var(--lijndikte) solid var(--c-lijn); } .taak:first-child { border-top: 0; } .taak:hover { background: var(--c-creme); } .taak__check { width: 18px; height: 18px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 6px; flex: 0 0 auto; display: grid; place-items: center; color: transparent; background: var(--kaart); cursor: pointer; padding: 0; font-size: .7rem; } .taak.is-klaar .taak__check { background: var(--c-groen); border-color: var(--c-groen); color: var(--knop-ink); } .taak.is-klaar .taak__titel { text-decoration: line-through; color: var(--c-ink-3); } .taak__titel { font-size: .85rem; font-weight: 600; background: transparent; border: 0; cursor: pointer; text-align: left; font-family: var(--font-ui); color: var(--c-ink); padding: 0; flex: 1; min-width: 0; } .taak__titel:hover { color: var(--c-groen-d); } .taak__meta { margin-left: auto; display: flex; align-items: center; gap: 8px; } .taak__bron { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); } /* één-bron-notie */ .bronnotie { margin-top: 22px; display: flex; align-items: center; gap: 8px; color: var(--c-ink-3); font-size: .72rem; } .bronnotie::before { content: "◉"; color: var(--c-groen); } /* toast (undo) */ .toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--donker, var(--c-ink)); color: var(--c-creme); padding: 10px 14px; border-radius: var(--radius); display: flex; align-items: center; gap: 14px; font-size: .82rem; opacity: 0; pointer-events: none; transition: opacity var(--overgang), transform var(--overgang); z-index: 40; } .toast.is-zichtbaar { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .toast button { background: transparent; border: 0; color: var(--c-groen-t); font-weight: 800; cursor: pointer; font-family: var(--font-ui); } @media (max-width: 720px) { .app { grid-template-columns: 200px minmax(0, 1fr); } .nav__merk { font-size: .9rem; } } /* ＋ Taak toevoegen (E6): rustige stippellijn-knop onderaan de takenlijst */ .taak--nieuw { display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px dashed var(--c-lijn-2, var(--c-lijn)); border-radius: 12px; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--c-ink-2); padding: 10px 14px; cursor: pointer; } .taak--nieuw:hover { border-color: var(--c-groen-d); color: var(--c-groen-d); } /* Doorstroom-flits (keten-wow, 18-07-2026): een record dat net uit een keten-stap is ontstaan licht kort op waar het landt. Alleen een zachte achtergrond-puls binnen de tokens; reduced-motion krijgt een statische tint. */ .is-vers { animation: casa-flits 3.2s ease-out; } @keyframes casa-flits { 0% { background-color: var(--c-groen-t); box-shadow: inset 3px 0 0 var(--c-groen); } 70% { background-color: var(--c-groen-t); box-shadow: inset 3px 0 0 var(--c-groen); } 100% { background-color: transparent; box-shadow: none; } } @media (prefers-reduced-motion: reduce) { .is-vers { animation: none; background-color: var(--c-groen-t); box-shadow: inset 3px 0 0 var(--c-groen); } } /* Keten-werkvoorraad op Vandaag (18-07-2026): echte tellers, klikbaar */ .vt-keten { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; margin-top: 14px; } .vt-ketenrij { display: flex; align-items: center; gap: 12px; border: 1px solid var(--c-lijn); border-radius: 12px; background: none; font: inherit; font-size: 12.5px; color: var(--c-ink); padding: 9px 14px; cursor: pointer; text-align: left; } .vt-ketenrij:hover { border-color: var(--c-groen-d); background: var(--c-creme); } .vt-ketenrij strong { font-size: 15px; color: var(--c-groen-d); min-width: 22px; } .vt-ketenrij span:last-child { margin-left: auto; color: var(--c-ink-3); } /* Cluster-tabbalk (menu-consolidatie 18-07-2026): werkbank-tabs boven de module — zelfde rustige pill-stijl als de beheer-tabs. */ /* Zand §2: de cluster-tabbalk is de kopband — canoniek in casa360-stijl.css. */ /* ⌘K command-palette (uitbreiding 1, 18-07-2026) */ .zd-laag { position: fixed; inset: 0; z-index: 90; background: color-mix(in srgb, var(--c-ink) 32%, transparent); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; } .zd-paneel { width: min(640px, 92vw); background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); box-shadow: var(--schaduw-tegel-hover); overflow: hidden; } .zd-zoekrij { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: var(--lijndikte) solid var(--c-lijn); color: var(--c-ink-3); } .zd-zoekrij input { flex: 1; border: 0; outline-offset: 4px; font: 600 .95rem var(--font-ui); color: var(--c-ink); background: none; } .zd-zoekrij kbd { font: 600 .6rem var(--font-mono); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 6px; padding: 2px 7px; color: var(--c-ink-3); } .zd-lijst { max-height: 46vh; overflow-y: auto; } .zd-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: none; cursor: pointer; padding: 10px 18px; font: 500 .8rem var(--font-ui); color: var(--c-ink); border-bottom: var(--lijndikte) solid var(--c-lijn); } .zd-item:last-child { border-bottom: 0; } .zd-item.is-actief, .zd-item:hover { background: var(--c-creme); } .zd-item__soort { flex: none; width: 64px; font-size: .56rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-groen-d); } .zd-item__t { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; } .zd-item__t span { font-size: .64rem; color: var(--c-ink-3); } .zd-leeg { padding: 18px; font: 400 .74rem var(--font-ui); color: var(--c-ink-3); } .zd-voet { padding: 8px 18px; font: 500 .6rem var(--font-ui); color: var(--c-ink-3); background: var(--c-creme); border-top: var(--lijndikte) solid var(--c-lijn); } /* Meldingen (uitbreiding 2): knop in de nav-voet + dropdown-paneel */ .attentie { display: flex; align-items: center; gap: 8px; width: 100%; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 12px; background: var(--kaart); font: 600 12.5px var(--font-ui); color: var(--c-ink-2); padding: 9px 12px; cursor: pointer; margin-bottom: 8px; } .attentie:hover { border-color: var(--c-groen-d); color: var(--c-groen-d); } .attentie__badge { margin-left: auto; background: var(--c-terra); color: var(--knop-ink); border-radius: 99px; font-size: 10.5px; padding: 1px 8px; } .att-paneel { position: fixed; left: 210px; bottom: 90px; z-index: 80; width: min(400px, 90vw); max-height: 60vh; display: flex; flex-direction: column; overflow: hidden; } .att-kop { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .att-gelezen { border: 0; background: none; font: 600 11px var(--font-ui); color: var(--c-groen-d); cursor: pointer; } .att-lijst { overflow-y: auto; } .att-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; border: 0; background: none; cursor: pointer; padding: 10px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); font: 500 12.5px var(--font-ui); color: var(--c-ink); } .att-item:hover { background: var(--c-creme); } .att-item.is-gelezen { opacity: .55; } .att-item__soort { flex: none; color: var(--c-groen-d); font-size: 12px; margin-top: 2px; } .att-item__t { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; } .att-item__t span { font-size: 11px; color: var(--c-ink-2); } .att-item__t em { font-style: normal; font-size: 9.5px; color: var(--c-ink-3); } .att-leeg { padding: 16px; font: 400 12px var(--font-ui); color: var(--c-ink-3); } /* FT-1.1 · aandacht-strip: gecapt op 3 chips, uitgeklapt als opsomming */ .signalen__lijst.is-opsomming { flex-direction: column; align-items: stretch; gap: 6px; } .signaal--meer { border-style: dashed; color: var(--c-ink-2); background: none; } .signaal--meer:hover { border-color: var(--c-groen-d); color: var(--c-groen-d); } .signaal-regel { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--c-lijn); border-radius: 12px; background: var(--kaart); font: 600 13px var(--font-ui); color: var(--c-ink); padding: 9px 14px; cursor: pointer; } .signaal-regel:hover { border-color: var(--c-groen-d); } .signaal-regel__dot { flex: none; width: 8px; height: 8px; border-radius: 99px; } .signaal-regel__dot.is-rood { background: var(--c-rood); } .signaal-regel__dot.is-amber { background: var(--c-amber); } .signaal-regel__dot.is-groen { background: var(--c-groen); } .signaal-regel__tekst { flex: 1; min-width: 0; } .signaal-regel > span:last-child { color: var(--c-ink-3); } /* R1 bouwplan · Mijn werk-blok op Vandaag (WP1.4) */ .mwb { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 14px 18px; box-shadow: var(--schaduw-tegel); } .mwb-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; } .mwb-open { border: 0; background: none; cursor: pointer; font: 700 .76rem var(--font-ui); color: var(--c-groen-d); padding: 0; } .mwb-open:hover { color: var(--c-ink); } .mwb-cellen { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .mwb-cel { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; border: var(--lijndikte) solid var(--c-lijn); border-radius: 10px; padding: 9px 12px; background: var(--c-creme); cursor: pointer; font: inherit; color: var(--c-ink); text-align: left; transition: border-color var(--overgang); } .mwb-cel:hover { border-color: var(--c-groen); } .mwb-cel b { font-size: 1.05rem; } .mwb-cel span { font-size: .62rem; color: var(--c-ink-3); text-transform: uppercase; letter-spacing: .05em; } .mwb-cel.is-rood b { color: var(--c-rood); } .mwb-cel.is-amber b { color: var(--c-amber); } .mwb-cel.is-groen b { color: var(--c-groen-d); } @media (max-width: 980px) { .mwb-cellen { grid-template-columns: repeat(3, 1fr); } } .mwb-leerpunt { margin: 8px 0 0; padding: 10px 12px; background: var(--c-memo); border-radius: 9px; font-size: .8rem; line-height: 1.55; color: var(--c-ink); } .mwb-leerpunt span { color: var(--c-ink-3); font-size: .72rem; } /* Vandaag-herindeling (01-08): keten-tegelrij — vijf gelijke stops */ .tegels--keten { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); } .vd-ketentegel .kpi__waarde { font-size: 1.25rem; } /* OI1 · teller in een menu-item (Doorzetten, Opvolging) — stil getal, dezelfde vorm als de werkruimte-badge maar kleiner. */ .module .mbadge { margin-left: 6px; font-size: .62rem; font-weight: 800; color: var(--c-ink-3); background: var(--c-paneel-2); border-radius: 99px; padding: 0 6px; } .module[aria-current="true"] .mbadge { background: var(--c-groen-t); color: var(--c-groen-d); } /* ═══ Inklapbare rail. Blauw 13-08 (prompt §2): het menu toont weer icoon + label, dus de smalle stand houdt de werkruimte-glyphs — het «niets te tonen»-argument van 05-08 vervalt met de iconen. De content schuift mee omdat de schil een grid is. */ .navkop { display: flex; align-items: center; gap: 8px; padding-right: 12px; } .navkop .nav__merk { flex: 1; min-width: 0; } .navklap { border: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); border-radius: 6px; width: 26px; height: 26px; flex: none; display: grid; place-items: center; font-size: .8rem; color: var(--c-ink-2); line-height: 1; transition: background var(--overgang); } .navklap:hover { background: var(--c-creme); } .app { transition: grid-template-columns var(--overgang); } /* min-width:0 is hier geen detail maar de hele truc: een grid-item wordt standaard niet smaller dan zijn min-content, en dan blijft de rail op de breedte van zijn breedste kind hangen — hoeveel je de kolom ook verkleint. */ .app > .nav { min-width: 0; overflow: hidden; } @media (prefers-reduced-motion: reduce) { .app { transition: none; } } /* ═══════════════════════════════════════════════════════════════════════ N1 · de keten als menu — verticaal (besluit Michiel 22-08-2026) Het menu staat weer links, maar de accordion komt niet terug. Zes ketenstappen onder elkaar met hun teller ernáást — verticaal is daar ruimte voor, horizontaal moest het onderschrift onder het getal en werd «€ 1.529K debiteuren open» krap. De actieve stap toont zijn modules ingesprongen. De andere niet. Er klapt niets open of dicht: dát was wat er aan de oude boom van dertien werkruimtes mankeerde — dezelfde klik deed iets anders afhankelijk van wat er al openstond. Geen iconen (besluit 22-08): alleen het woord telt. ═══════════════════════════════════════════════════════════════════ */ .app.nav-keten { grid-template-columns: 258px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); } /* ═══ Werkbank v3.0 (besluit 23-08-2026) · de donkere rail ═══════════ De navigatie was wit, net als de kaarten ernaast — daardoor liep de rand van de app door het werk heen. Een bijna zwarte rail zet het werkvlak naar voren en geeft de tellers en statuspunten een grond waarop ze leesbaar zijn zonder te schreeuwen. De rail heeft zijn eigen inkt-tokens (--nav-ink, --nav-ink2). Dat moet wel: --ink is gemaakt voor donkere tekst op een licht vlak, en hier is het precies andersom. */ .app.nav-keten .nav { background: var(--nav); border-right: 0; display: flex; flex-direction: column; overflow: visible; } .app.nav-keten .nav__merk { padding: 15px 16px 14px; font-weight: 800; font-size: 1rem; letter-spacing: -.01em; color: var(--knop-ink); flex: none; } .app.nav-keten .nav__merk span { color: var(--nav-ink); } .ketenrail { flex: 1; overflow-y: auto; padding: 2px 0 10px; } .stapwrap { position: relative; } .stapV__glyph { display: none; } /* ---- één stap ---- */ .stapV { display: grid; grid-template-columns: 8px 1fr; align-items: center; gap: 8px; width: 100%; border: 0; background: none; cursor: pointer; text-align: left; padding: 10px 14px 10px 10px; border-top: var(--lijndikte) solid var(--nav-lijn); transition: background var(--overgang, 160ms ease); } .stapV:hover { background: var(--nav2); } .stapV:focus-visible { outline: 3px solid var(--nav-actief); outline-offset: -3px; } .stapV[aria-current="true"] { background: var(--nav2); } /* Het statuspunt. Geen punt betekent: hier ligt niets — een groen bolletje bij alles is een kerstboom, en dan zegt rood niets meer. */ .stapV__punt { width: 8px; height: 8px; border-radius: 50%; background: transparent; } .stapV__punt.is-stop { background: #D2543A; } .stapV__punt.is-let { background: #D19B14; } .stapV__punt.is-goed { background: #2E9E68; } .stapV__tekst { min-width: 0; } .stapV__rij { display: flex; align-items: baseline; gap: 8px; } .stapV__nm { font: 700 13.5px var(--font-ui); color: var(--nav-ink); } .stapV[aria-current="true"] .stapV__nm { color: var(--nav-actief); } .stapV__tel { margin-left: auto; font: 700 13.5px var(--font-mono); color: var(--nav-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .stapV[aria-current="true"] .stapV__tel { color: var(--nav-actief); } .stapV__sub { display: block; font-size: 10.5px; color: var(--nav-ink2); line-height: 1.35; margin-top: 1px; } .stapV__sub.is-let { color: #D19B14; font-weight: 700; } /* ---- de modules van de actieve stap ---- */ .submods { padding: 0 0 8px; background: var(--nav2); } .submod { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; border: 0; background: none; cursor: pointer; padding: 5px 14px 5px 30px; font: 600 12.5px var(--font-ui); color: var(--nav-ink2); } .submod:hover { color: var(--nav-actief); } .submod:focus-visible { outline: 3px solid var(--nav-actief); outline-offset: -3px; } .submod[aria-current="true"] { color: var(--nav-actief); font-weight: 700; box-shadow: inset 2px 0 0 var(--kaart); } .submod .mbadge, .submod .mproto { margin-left: auto; } .railscheiding { height: var(--lijndikte); background: var(--nav-lijn); margin: 8px 0; } /* ---- de voet (04-09, naar Gripp): «Ingelogd als» + een rij glyphs ---- */ .railvoet { flex: none; padding: 8px 8px 8px; display: flex; flex-direction: column; gap: 6px; border-top: var(--lijndikte) solid var(--nav-lijn); } .railwie { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: 100%; border: 0; background: none; cursor: pointer; text-align: left; padding: 6px 6px; border-radius: var(--radius-klein); color: var(--nav-ink); } .railwie:hover { background: var(--nav2); } .railwie:focus-visible { outline: 3px solid var(--nav-actief); outline-offset: -3px; } .railwie .rol__avatar { width: 28px; height: 28px; font-size: 10px; } .railwie__tekst { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .railwie__tekst b { font: 700 12.5px var(--font-ui); color: var(--nav-actief); } .railwie__tekst em { font-style: normal; font-size: 11px; color: var(--nav-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .railwie__pijl { font: 700 16px var(--font-ui); color: var(--nav-ink2); } /* RAILVOET (05-09, tweede ronde): alleen tekens; Meldingen = uitroepteken in een vaste ronde cirkel; de inklapknop hangt óp de scheiding tussen rail en inhoud en wordt ingeklapt een uitklapknop */ .railiconen { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; border-top: var(--lijndikte) solid var(--nav-lijn); padding: 6px 30px 0 0; } .railiconen--4 { grid-template-columns: repeat(4, 1fr); } .railiconen--6 { grid-template-columns: repeat(6, 1fr); } .railicoon--nieuw .railicoon__glyph { font-size: 20px; } .railicoon { position: relative; height: 40px; border: 0; background: none; border-radius: var(--radius-klein); cursor: pointer; padding: 0; color: var(--knop-ink); display: grid; place-items: center; } /* elk teken in hetzelfde vakje van 22 × 22, zodat ze even groot ogen */ .railicoon__glyph { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; font: 600 17px var(--font-ui); line-height: 1; color: var(--nav-actief); } .railicoon--zoek .railicoon__glyph { font-size: 19px; } .railicoon--berichten .railicoon__glyph { font-size: 18px; } .railicoon--zone .railicoon__glyph { font-size: 18px; } .railicoon__uitroep { position: relative; flex: none; box-sizing: border-box; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--kaart); display: inline-flex; align-items: center; justify-content: center; font: 700 11px var(--font-ui); color: var(--cta, var(--let)); line-height: 1; background: none; } /* het uitroepteken in de cta-kleur (TS roze), het rondje wit */ .railicoon.heeft-open { background: var(--nav2); } .railicoon:hover { background: var(--nav2); } .railicoon:focus-visible { outline: 3px solid var(--nav-actief); outline-offset: -3px; } .railicoon__badge { position: absolute; top: -8px; right: -11px; font-size: 9.5px; line-height: 1.3; padding: 1px 5px; border-radius: 99px; background: var(--let); color: #14171A; } .app > .nav, .app.nav-keten .nav { position: relative; overflow: visible; z-index: 3; } /* het klaprondje hangt over de rand; .ketenrail scrollt zelf */ .railklap { position: absolute; right: -13px; bottom: 15px; width: 26px; height: 26px; border-radius: 50%; /* op de hoogte van de onderste tekens */ border: 2px solid var(--nav); background: var(--kaart); color: var(--cta, var(--accent)); font: 700 16px var(--font-ui); line-height: 1; /* wit rondje, de pijl in de cta-kleur (TS: roze) */ display: grid; place-items: center; cursor: pointer; padding: 0 0 2px; z-index: 5; box-shadow: var(--schaduw-kaart); } .railklap:hover { background: var(--cta-t, var(--accent-t)); } .railklap:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } /* (04-09) de losse voetknoppen zijn vervangen door .railwie + .railiconen hierboven */ .railvoet .rol__avatar { width: 20px; height: 20px; border-radius: 50%; background: #3A4148; color: var(--knop-ink); display: grid; place-items: center; font: 800 9px var(--font-ui); flex: none; } .railvoet .rol__naam { font-weight: 700; color: var(--nav-actief); } /* Smal scherm: de rail wordt een strook boven het werk. Zonder iconen valt er in een échte smalle rail niets te tonen — dat is de consequentie van het icoonbesluit, en dus wordt hij hier horizontaal in plaats van smal. */ /* ---- NAVIGATIE V2 (besluit 8, 04-09): de smalle rail ---- 56 px, één glyph per ingang, het statuspunt rechtsboven, naam en teller in de tooltip; het submenu als zweeflijst naast de rail. */ .app.nav-keten.rail-smal { grid-template-columns: 56px minmax(0, 1fr); } .app.rail-smal .nav__merk { padding: 14px 0 10px; text-align: center; font-size: 1.05rem; } .app.rail-smal .nav__merk--smal { font-size: .95rem; letter-spacing: .02em; } .app.rail-smal .stapV { grid-template-columns: 1fr; gap: 0; padding: 11px 0; justify-items: center; position: relative; } .app.rail-smal .stapV__glyph { display: block; font: 600 17px var(--font-ui); color: var(--nav-ink); line-height: 1; text-align: center; } .app.rail-smal .stapV[aria-current="true"] .stapV__glyph { color: var(--nav-actief); } .app.rail-smal .stapV__tekst { display: none; } .app.rail-smal .stapV__punt { position: absolute; top: 7px; right: 12px; width: 7px; height: 7px; } .app.rail-smal .submods { display: none; } .app.rail-smal .submods--fly { position: fixed; left: 56px; z-index: 60; min-width: 236px; max-height: calc(100vh - 16px); overflow-y: auto; background: var(--nav2); border: var(--lijndikte) solid var(--nav-lijn); border-left: 0; border-radius: 0 var(--radius-klein) var(--radius-klein) 0; box-shadow: var(--schaduw-zwevend); padding: 6px 0 8px; } .app.rail-smal .submods--fly .submod { padding-left: 16px; } .app.rail-smal .submods__kop { padding: 6px 16px 6px; font: 700 12.5px var(--font-ui); color: var(--nav-actief); border-bottom: var(--lijndikte) solid var(--nav-lijn); margin-bottom: 4px; } .app.rail-smal .stapwrap:hover > .submods--fly, .app.rail-smal .stapwrap.is-open > .submods--fly, .app.rail-smal .stapwrap:focus-within > .submods--fly { display: block; } .app.rail-smal .railvoet { padding: 6px 4px 8px; align-items: stretch; } .app.rail-smal .railwie { grid-template-columns: 1fr; justify-items: center; padding: 6px 0; } .app.rail-smal .railwie__tekst, .app.rail-smal .railwie__pijl { display: none; } .app.rail-smal .railiconen { grid-template-columns: 1fr; gap: 2px; padding-right: 0; } .app.rail-smal .railicoon { width: 40px; margin: 0 auto; } /* de glyph van de actieve stap vóór de paginatitel, alleen ingeklapt */ .app.rail-smal > .content[data-stapglyph]:not([data-stapglyph=""])::before { content: attr(data-stapglyph); display: block; flex: 0 0 auto; width: 100%; box-sizing: border-box; padding: 10px 32px 0; font: 700 11px var(--font-mono); letter-spacing: .04em; color: var(--ink2); } /* ═══ LADE (≤ 1279 px) · bovenbalk met ☰; het menu is een lade mét woorden óver de inhoud ═══ blok I (13-10-2026, besluit P24): tussen 601 en 1100 px stond hier een strook van 56 px met alleen tekens. Het hoofdmenu toont geen iconen: onder 1280 px is het menu daarom een lade met woorden, en blijft de inhoud de volle breedte houden. Tot 600 px komt daar de onderbalk met vier knoppen bij en vult de lade het hele scherm. */ .navmobiel { display: none; } .mobielbalk { display: none; } .navmobiel__titel { font: 700 15px var(--font-ui); color: var(--nav-actief); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 4px; } .navmobiel__knop { height: 40px; border: 0; border-radius: var(--radius-klein); background: none; color: var(--nav-actief); font: 600 19px var(--font-ui); display: grid; place-items: center; cursor: pointer; position: relative; } .navmobiel__knop:focus-visible { outline: 3px solid var(--nav-actief); outline-offset: -3px; } .navmobiel__meld.heeft-open { background: var(--nav2); } @media (max-width: 1279px) { .app.nav-keten, .app.nav-keten.rail-smal { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); } .app.nav-keten .nav { flex-direction: column; border-right: 0; overflow: visible; } .app.nav-keten .nav__merk { display: none; } .navmobiel { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px 40px; align-items: center; gap: 4px; padding: 6px 8px; min-height: 52px; } .ketenrail, .railvoet, .railklap { display: none; } .app.lade-open .ketenrail { display: block; flex: 1; overflow-y: auto; padding: 4px 8px 12px; } .app.lade-open .railvoet { display: flex; } .app.lade-open .navmobiel__knop[data-lade]::before { content: "✕"; } .app.lade-open .navmobiel__knop[data-lade] { font-size: 0; } .app.lade-open .navmobiel__knop[data-lade]::before { font-size: 19px; } .stapV__glyph { display: none; } .app.rail-smal > .content[data-stapglyph]::before { display: none; } } @media (max-width: 1279px) and (min-width: 601px) { .app.lade-open .nav { position: fixed; left: 0; top: 0; bottom: 0; width: 300px; z-index: 50; overflow: auto; box-shadow: var(--schaduw-zwevend); } .app.lade-open > .content::before { content: ""; position: fixed; inset: 0; background: rgba(20, 23, 26, .32); z-index: 39; } } /* ═══ MOBIEL (≤ 600 px) · de onderbalk met vier knoppen erbij; ☰ = het menu als volledig scherm ═══ */ @media (max-width: 600px) { /* de zwevende berichtenknop dubbelt op mobiel met Berichten in de onderbalk en hangt over «Meer» */ #casa-intranet { display: none; } .app.nav-keten, .app.nav-keten.rail-smal { grid-template-rows: auto minmax(0, 1fr) auto; } .app.lade-open .nav { position: fixed; inset: 0; z-index: 50; overflow: auto; } .mobielbalk { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--kaart); border-top: var(--lijndikte) solid var(--lijn); padding: 4px 4px calc(6px + env(safe-area-inset-bottom)); position: sticky; bottom: 0; z-index: 30; } .mobielbalk__knop { position: relative; border: 0; background: none; border-radius: var(--radius-klein); padding: 5px 2px 3px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ink2); cursor: pointer; } .mobielbalk__knop.is-actief { color: var(--accent); } .mobielbalk__knop:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; } .mobielbalk__glyph { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; font: 600 18px var(--font-ui); line-height: 1; } .mobielbalk__glyph .railicoon__badge { top: -8px; right: -12px; } .mobielbalk__woord { font: 600 10.5px var(--font-ui); } .content { padding-bottom: 8px; } } @media (prefers-reduced-motion: reduce) { .stapV { transition: none; } } /* ═══ Werkbank v3.0 · het blokkadepaneel op Vandaag ══════════════════ Rijen met een statusstrook links, het bedrag rechts en de handeling permanent zichtbaar. De strook laat je de lijst scannen zonder te lezen; de knop maakt van kijken doen. */ .wbpaneel { background: var(--kaart); border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius); overflow: hidden; margin: 16px 0; box-shadow: var(--schaduw-kaart); } .wbpaneel__kop { display: flex; align-items: baseline; gap: 10px; padding: 11px 15px; border-bottom: var(--lijndikte) solid var(--lijn); } .wbpaneel__kop strong { font: 800 .86rem var(--font-ui); } .wbpaneel__som { margin-left: auto; font-size: .78rem; color: var(--ink2); } .wbrij { display: grid; grid-template-columns: 5px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding-right: 15px; border-bottom: var(--lijndikte) solid var(--lijn); } .wbrij:last-child { border-bottom: 0; } .wbrij:hover { background: var(--accent-t2); } .wbrij__streep { align-self: stretch; } .wbrij__streep.is-stop { background: var(--stop); } .wbrij__streep.is-let { background: var(--let); } .wbrij__wat { padding: 11px 0 11px 13px; min-width: 0; } .wbrij__wat b { display: block; font: 700 .84rem var(--font-ui); } .wbrij__wat span { display: block; font-size: .76rem; color: var(--ink2); } .wbrij__geld { font: 700 .88rem var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; } .wbrij__knop { border: var(--lijndikte) solid var(--lijn); background: var(--kaart); color: var(--ink); font: 700 .76rem var(--font-ui); padding: 6px 11px; border-radius: var(--radius-klein); cursor: pointer; white-space: nowrap; } .wbrij__knop:hover { background: var(--knop); border-color: var(--knop); color: var(--knop-ink); } .wbrij__knop:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .wbrij__knop--stil { background: none; border-color: transparent; color: var(--ink3); cursor: default; font-weight: 500; } .wbrij__knop--stil:hover { background: none; color: var(--ink3); } .signaal--stil { color: var(--ink2); background: var(--grijs); border-color: var(--lijn); } @media (max-width: 720px) { .wbrij { grid-template-columns: 5px minmax(0, 1fr); } .wbrij__geld, .wbrij__knop { grid-column: 2; justify-self: start; margin-bottom: 10px; } } /* een tegel met een 0 vult ruimte en zegt niets; wat er niet is krijgt één regel in plaats van zes lege vakken */ .mwb-leeg { align-self: center; font-size: .74rem; color: var(--ink3); padding-left: 4px; } /* VP14 · focus-modus voor het planbord op een tweede scherm: rail weg, de module op de volle breedte. De module zet en wist de klasse; app.js wist hem zodra een ander scherm opent. */ .app.pb-focus { grid-template-columns: minmax(0, 1fr) !important; } .app.pb-focus #nav { display: none; } /* ─── Schermronde stap 3 (29-09) · het startscherm ─────────────────────────────── Drie lagen onder elkaar: cijfers van de keten, wat vastzit, het eigen werk. */ .vandaag.vandaag--start { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 18px; } .vandaag.vandaag--start .sectiekop { margin: 0 0 -8px; } .vandaag.vandaag--start .wbpaneel, .vandaag.vandaag--start .mwb { margin: 0; } .vdw { display: flex; flex-direction: column; gap: 12px; } .vdw-kop { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .vdw-kop strong { font: 800 1rem var(--font-ui); } .vdw-keuze { display: flex; gap: 4px; padding: 4px; background: var(--c-paneel); border-radius: var(--radius); } .vdw-knop { border: var(--lijndikte) solid transparent; background: none; border-radius: var(--radius-klein, 8px); padding: 7px 14px; font: 700 .78rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; transition: background 160ms, color 160ms; } .vdw-knop:hover { color: var(--c-ink); } .vdw-knop.is-actief { background: var(--kaart); border-color: var(--c-lijn); color: var(--c-ink); } .vdw-knop:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } .vdw-knop b { margin-left: 4px; font-weight: 700; color: var(--c-ink-3); } .vdw-knop b.is-let { color: var(--let); } @media (max-width: 600px) { .vandaag.vandaag--start { padding: 18px 14px 60px; } } @media (prefers-reduced-motion: reduce) { .vdw-knop { transition: none; } } .vandaag.vandaag--start .tegels--keten { grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; } @media (max-width: 1100px) { .vandaag.vandaag--start .tegels--keten { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); } } /* ═══ EÉN SCHERM (besluit 336, Michiel 09-10-2026) · een scherm dat op de norm staat meldt zich met .es-scherm ═══ Het inhoudselement blijft de scroller voor alle andere schermen; voor een .es-scherm wordt het een kolom met de hoogte van het venster, de clusterbalk gaat uit (de kopband draagt de weg terug en «Hoe werkt dit?»), en de kolommen van het scherm scrollen in zichzelf. Tot en met 1240 px (tablet, smalle laptop) valt het terug op gewoon scrollen: daar stapelen de kolommen toch al. */ #content:has(> .cluster-inhoud > .es-scherm) { display: flex; flex-direction: column; overflow: hidden; } #content:has(> .cluster-inhoud > .es-scherm) > .cluster-tabs, #content:has(> .cluster-inhoud > .es-scherm) > .protoband { display: none; } #content:has(> .cluster-inhoud > .es-scherm) > .cluster-inhoud { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } #content > .cluster-inhoud > .es-scherm { flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); max-width: var(--werkbreedte-breed, 1360px); width: 100%; margin: 0; padding: 0; gap: 0; } .es-lichaam { min-height: 0; display: grid; gap: 12px; padding: 12px 16px; } .es-kolom { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; } @media (max-width: 1240px) { #content:has(> .cluster-inhoud > .es-scherm) { overflow-y: auto; } #content > .cluster-inhoud > .es-scherm { display: flex; flex-direction: column; } .es-lichaam { grid-template-columns: 1fr !important; } .es-kolom { overflow: visible; } } /* DOORLOOP blok C (B9) · een scherm dat dicht is: één melding, voor elk scherm dezelfde. Geen kleur — er is niets mis, het is alleen niet van jou; de module-wortelmaat houdt hem op de plek van het scherm. */ .geen-toegang { max-width: var(--werkbreedte); margin: 0 auto; padding: 26px 32px 72px; box-sizing: border-box; } .geen-toegang h1 { font-size: 1.35rem; margin: 6px 0 12px; color: var(--ink); } .geen-toegang p { max-width: 62ch; margin: 0 0 10px; color: var(--ink2); line-height: 1.55; } .geen-toegang .btn { margin-top: 10px; } .vd-weggelaten { margin: 6px 0 0; font-size: .74rem; color: var(--ink3); } /* ── bouwstenen.css ── */ /* ===================================================================== bouwstenen.css — Fase 0: stijl van de gedeelde bouwstenen (bs-*). Bouwt uitsluitend op casa360-tokens.css. Diepte = 1px-lijnen en paneel-tinten; geen blauw, schaduw of gradient. Zie WERKPLAN fase 0. ===================================================================== */ /* ---------- Knoppen ---------- */ .btn { font-family: var(--font-ui); font-weight: 700; font-size: .84rem; border-radius: var(--radius); padding: 10px 16px; border: var(--lijndikte) solid transparent; cursor: pointer; transition: background var(--overgang), color var(--overgang), border-color var(--overgang); } .btn--primary { background: var(--knop); color: var(--knop-ink); } .btn--primary:hover { background: var(--knop-d); } .btn--primary:disabled { background: var(--c-paneel); color: var(--c-ink-3); cursor: not-allowed; border-color: var(--c-lijn); } .btn--stil { background: var(--kaart); color: var(--c-ink); border-color: var(--c-lijn-2); } .btn--stil:hover { background: var(--c-creme); } /* KE5 · de ene extra call-to-action per scherm, in de cta-kleur van de tenant (roze bij ThermoSolutions); zonder tenantkleur is het de primaire knop */ .btn--cta { background: var(--cta, var(--accent)); color: var(--knop-ink); } .btn--cta:hover { background: var(--cta-d, var(--accent-d)); } .btn--donker { background: var(--knop); color: var(--knop-ink); } .btn--donker:hover { background: var(--knop-d); } .btn--klein { padding: 6px 11px; font-size: .7rem; } /* Vangnet: een knop zónder kleurvariant viel terug op het grijs van de browser (buiten de tokenset) — zichtbaar op elke "Exporteer lijst"-knop. Kale .btn (ook mét .btn--klein) krijgt daarom de stille look. */ .btn:not(.btn--primary):not(.btn--stil):not(.btn--donker):not(.btn--rood) { background: var(--kaart); color: var(--c-ink); border-color: var(--c-lijn-2); } .btn:not(.btn--primary):not(.btn--stil):not(.btn--donker):not(.btn--rood):hover { background: var(--c-creme); } .btn:not(.btn--primary):not(.btn--stil):not(.btn--donker):not(.btn--rood):disabled { background: var(--c-paneel); color: var(--c-ink-3); border-color: var(--c-lijn); cursor: not-allowed; } /* Rood is blokkadekleur: alleen op de bevestigknop van een onomkeerbare stap. */ .btn--rood { background: var(--c-rood); color: var(--knop-ink); border-color: var(--c-rood); } .btn--rood:hover { background: var(--c-rood-d); } /* ---------- Bevestigdialoog (BS.bevestig) ---------- */ .bs-bevestig__tekst { margin: 0 0 4px; font-size: .82rem; line-height: 1.55; color: var(--c-ink-2); } /* ---------- Statuschip-variant (aanvulling op tokens) ---------- */ .chip--groen-licht { background: var(--c-sage-t); color: #6B6B4E; } /* ---------- 0.1 KPI-strip: zie .bs-stats/.bs-stat verderop (vaste stijl voor elke module — witte stat-tegels, norm module 1.1). ---------- */ /* ---------- 0.1 werkbalk: zoeken + sorteren ---------- */ .bs-werkbalk { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px 10px; } .bs-zoek { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 8px 12px; } .bs-zoek:focus-within { border-color: var(--c-groen); } .bs-zoek__icoon { color: var(--c-ink-3); display: inline-flex; } .bs-zoek input { border: 0; background: transparent; font-family: var(--font-ui); font-size: .84rem; width: 100%; color: var(--c-ink); } /* Focus-ring nooit uitzetten (CLAUDE.md) — de globale :focus-visible geldt. */ .bs-sorteer { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .bs-sorteer__label { font-size: .74rem; color: var(--c-ink-3); } .bs-sort { font-family: var(--font-ui); font-size: .76rem; font-weight: 700; padding: 7px 12px; border-radius: 9px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); color: var(--c-ink-3); cursor: pointer; transition: border-color var(--overgang), background var(--overgang), color var(--overgang); } .bs-sort:hover { background: var(--c-creme); } .bs-sort.is-actief { border-color: var(--c-groen); background: var(--c-groen-t); color: var(--c-ink); } .bs-telling { font-size: .74rem; color: var(--c-ink-3); margin: 0; padding: 0 20px 8px; } /* ---------- 0.1 bulk-balk ---------- */ .bs-bulk { display: flex; align-items: center; gap: 12px; padding: 11px 20px; background: var(--donker, var(--c-ink)); color: var(--donker-ink, var(--c-creme)); flex-wrap: wrap; } .bs-bulk__label { font-weight: 700; font-size: .8rem; } .bs-bulk__acties { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; } .bs-bulk__knop { padding: 7px 14px; border-radius: 8px; border: var(--lijndikte) solid var(--c-ink-3); background: transparent; color: var(--c-creme); font-family: var(--font-ui); font-size: .76rem; font-weight: 700; cursor: pointer; transition: background var(--overgang); } .bs-bulk__knop:hover { background: var(--c-ink-2); } .bs-bulk__knop--wit { background: var(--c-creme); color: var(--c-ink); border-color: transparent; } .bs-bulk__knop--wit:hover { background: var(--kaart); } .bs-bulk__knop--stil { border-color: transparent; color: var(--c-ink-3); } /* ---------- 0.1 kolomkop + grid-rijen (kolommen via --bs-kolommen) ---------- */ .bs-lkop, .bs-lrij { display: grid; grid-template-columns: var(--bs-kolommen, 1fr); gap: 10px; align-items: center; padding: 9px 20px; } .bs-lkop { font-family: var(--font-mono); font-size: .6rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); padding-bottom: 8px; } .bs-lrij { border-top: var(--lijndikte) solid var(--c-lijn); transition: background var(--overgang); } .bs-lrij:hover { background: var(--c-creme); } .bs-lrij.is-gekozen { background: var(--c-groen-t); } .bs-checkbox { width: 17px; height: 17px; flex: none; border-radius: 5px; border: 2px solid var(--c-lijn-2); background: var(--kaart); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .bs-checkbox.is-checked { background: var(--c-groen); border-color: var(--c-groen); } /* rij-cellen */ .bs-nr { font-size: .72rem; color: var(--c-groen-d); background: transparent; border: 0; cursor: pointer; text-align: left; padding: 0 0 0 8px; border-left: 3px solid var(--c-groen); white-space: nowrap; } .bs-nr:hover { color: var(--c-ink); } .bs-entiteit { justify-self: start; font-size: .6rem; font-weight: 700; padding: 2px 7px; border-radius: 5px; color: var(--knop-ink); background: var(--c-groen); } .bs-entiteit--casa365 { background: var(--c-terra-t); } .bs-klant { font-family: var(--font-ui); font-weight: 700; font-size: .82rem; background: transparent; border: 0; cursor: pointer; text-align: left; padding: 0; color: var(--c-ink); } .bs-klant:hover { color: var(--c-groen-d); } .bs-adres, .bs-pakket { color: var(--c-ink-2); font-size: .78rem; } .bs-bedrag { font-weight: 800; font-size: .84rem; white-space: nowrap; } .bs-geldig { color: var(--c-ink-3); font-size: .72rem; white-space: nowrap; } .bs-status { justify-self: start; } /* ---------- 0.1 paginering + lege staat + uitleg ---------- */ .bs-paging { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: var(--lijndikte) solid var(--c-lijn); } .bs-paging__label { font-size: .76rem; color: var(--c-ink-3); } .bs-paging__knoppen { display: flex; gap: 8px; } .bs-paging__knop { padding: 8px 16px; border-radius: 9px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); font-family: var(--font-ui); font-size: .76rem; font-weight: 700; color: var(--c-groen-d); cursor: pointer; transition: background var(--overgang); } .bs-paging__knop:hover:not(:disabled) { background: var(--c-creme); } .bs-paging__knop:disabled { color: var(--c-ink-3); cursor: not-allowed; } .bs-leeg-rij { text-align: center; color: var(--c-ink-3); padding: 28px 20px; font-size: .82rem; border-top: var(--lijndikte) solid var(--c-lijn); } .bs-uitleg { margin-top: 14px; padding: 14px 18px; border-radius: var(--radius); background: var(--c-groen-t); font-size: .78rem; line-height: 1.55; color: var(--c-ink-2); } .bs-uitleg strong { color: var(--c-ink); } /* ---------- 0.2 poorten ---------- */ .bs-poort { display: flex; align-items: flex-start; gap: 8px; border-radius: var(--radius); padding: 10px 12px; font-size: .8rem; line-height: 1.4; } .bs-poort--blok { background: var(--c-rood-t); color: var(--c-rood); border: var(--lijndikte) solid var(--c-rood); } .bs-poort--ok { background: var(--c-groen-t); color: var(--c-groen-d); } .bs-poort--wacht { background: var(--c-amber-t); color: var(--c-amber); border: var(--lijndikte) solid var(--c-amber); } .bs-poort--info { background: var(--c-paneel); color: var(--c-ink-2); } .bs-poort__icoon { flex: 0 0 auto; } /* ---------- 0.3 auditlog ---------- */ .bs-sectie__kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-wrap: wrap; gap: 6px 12px; } /* RESPONSIVE 06-10: op tablet wikkelt de kop netjes */ .bs-sectie__meta { color: var(--c-ink-3); font-size: .68rem; } .bs-audit { padding: 2px 0; } .bs-audit__rij { display: flex; align-items: baseline; gap: 12px; padding: 9px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: .8rem; } .bs-audit__rij:last-child { border-bottom: 0; } .bs-audit__tijd { color: var(--c-ink-3); font-size: .68rem; flex: 0 0 auto; width: 62px; } .bs-audit__actie { font-weight: 700; } .bs-audit__detail { color: var(--c-ink-3); font-weight: 400; font-family: var(--font-mono); font-size: .68rem; } .bs-audit__door { margin-left: auto; color: var(--c-ink-2); font-size: .72rem; text-align: right; } /* ---------- 0.4 gebouwcontext (BAG) ---------- */ .bs-woning { padding: 16px 18px; } .bs-woning__kop { display: flex; align-items: center; gap: 14px; } .bs-woning__badge { width: 42px; height: 42px; border-radius: var(--radius); background: var(--c-groen-t); display: grid; place-items: center; font-size: 1.2rem; flex: 0 0 auto; } .bs-woning__adres { font-weight: 800; font-size: 1rem; } .bs-woning__klant { color: var(--c-ink-2); font-size: .82rem; } .bs-woning__bag { margin-left: auto; text-align: right; display: flex; flex-direction: column; gap: 2px; } .bs-woning__bag .mono { font-size: .72rem; color: var(--c-ink-2); } .bs-woning__kenmerken { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; padding-top: 12px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .8rem; color: var(--c-ink); } .bs-woning__kenmerken em { font-style: normal; color: var(--c-ink-3); margin-right: 5px; font-family: var(--font-mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; } /* ---------- 0.5 modaal ---------- */ .bs-modal-laag { position: fixed; inset: 0; background: var(--sluier); display: grid; place-items: center; z-index: 60; padding: 24px; } .bs-modal { width: 100%; max-width: 520px; padding: 0; overflow: hidden; } /* Een formulier dat hoger is dan het scherm (telefoon, plankaart met handtekening) scrolt ín het modaal; anders staat de voet met de knoppen buiten beeld en is hij onbereikbaar. */ .bs-modal { max-height: calc(100dvh - 48px); overflow-y: auto; } @media (max-width: 640px) { .bs-modal-laag { padding: 12px; align-items: start; } .bs-modal { max-height: calc(100dvh - 24px); } } .bs-modal--smal { max-width: 440px; } .bs-modal__kop { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .bs-modal__x { background: transparent; border: 0; cursor: pointer; color: var(--c-ink-3); font-size: .9rem; } .bs-modal__x:hover { color: var(--c-ink); } .bs-modal__body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; } .bs-modal__voet { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: var(--lijndikte) solid var(--c-lijn); background: var(--c-creme); } /* ---------- Stat-tegel — dé KPI-huisstijl voor elke module (norm 1.1): witte kaart, label · grote waarde · subregel; accent op de waarde; optioneel donker; klikbaar als filter wanneer de module dat wil. ---------- */ /* Blauw 13-08 (prompt §2): witte KPI-kaart met een gekleurde icoon-bol links — de border-top-streep van Zand is vervallen; het accent kleurt voortaan de bol, niet de rand of het cijfer. */ .bs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; } .bs-stat { display: flex; align-items: center; gap: 12px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 13px 15px; } .bs-stat__bol { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; font-size: 1rem; background: var(--accent-t); color: var(--accent); } .bs-stat--groen .bs-stat__bol { background: var(--goed-t); color: var(--goed-d); } .bs-stat--amber .bs-stat__bol { background: var(--let-t); color: var(--let-d); } .bs-stat--terra .bs-stat__bol { background: var(--accent-t); color: var(--accent); } /* afbouw-alias */ .bs-stat--rood .bs-stat__bol { background: var(--stop-t); color: var(--stop-d, var(--stop)); } /* blokkade (BEHEER-RONDE2) */ .bs-stat__tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; } button.bs-stat { cursor: pointer; text-align: left; font-family: var(--font-ui); transition: border-color var(--overgang); } button.bs-stat:hover { border-color: var(--c-lijn-2); } .bs-stat.is-actief { border-color: var(--accent); } .bs-stat__label { font-size: .72rem; font-weight: 700; color: var(--c-ink-2); } .bs-stat__waarde { font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; } .bs-stat__sub { font-size: .66rem; color: var(--c-ink-3); } .bs-stat--geld .bs-stat__waarde { color: var(--ink); } /* geldbedragen zijn --ink */ .bs-stat--donker { background: var(--donker, var(--c-ink)); border-color: var(--donker, var(--c-ink)); } .bs-stat--donker .bs-stat__bol { background: rgba(255,255,255,.12); color: var(--knop-ink); } .bs-stat--donker .bs-stat__waarde, .bs-stat--donker.bs-stat--geld .bs-stat__waarde { color: var(--c-creme); } .bs-stat--donker .bs-stat__label, .bs-stat--donker .bs-stat__sub { color: var(--c-lijn-2); } /* ---------- BS.avatar — initialen-cirkel, vaste kleur per naam ---------- */ .bs-avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; font: 800 .64rem var(--font-ui); color: var(--knop-ink); flex: none; vertical-align: middle; } .bs-avatar--klein { width: 22px; height: 22px; font-size: .55rem; } .bs-avatar--1 { background: var(--avatar-1); } .bs-avatar--2 { background: var(--avatar-2); } .bs-avatar--3 { background: var(--avatar-3); } .bs-avatar--4 { background: var(--avatar-4); } .bs-avatar--5 { background: var(--avatar-5); } .bs-avatar--6 { background: var(--avatar-6); } /* ---------- BS.wizard — genummerde bollen met verbindingslijn ---------- */ .bs-wizard { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 14px; } .bs-wizard__stap { display: inline-flex; align-items: center; gap: 8px; } .bs-wizard__bol { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 800 .7rem var(--font-ui); font-style: normal; background: var(--c-vlak); color: var(--c-ink-2); border: var(--lijndikte) solid var(--c-lijn-2); flex: none; } .bs-wizard__label { font-size: .76rem; font-weight: 700; color: var(--c-ink-2); } .bs-wizard__stap.is-actief .bs-wizard__bol { background: var(--accent); border-color: var(--accent); color: var(--knop-ink); } .bs-wizard__stap.is-actief .bs-wizard__label { color: var(--c-ink); } .bs-wizard__stap.is-klaar .bs-wizard__bol { background: var(--goed-t); border-color: var(--goed); color: var(--goed-d); } .bs-wizard__lijn { flex: 1; min-width: 18px; height: 2px; background: var(--c-lijn); border-radius: 1px; } /* ---------- Filterchip (donker als actief) ---------- */ .bs-chip { padding: 8px 14px; border-radius: 10px; font-family: var(--font-ui); font-size: .76rem; font-weight: 700; white-space: nowrap; cursor: pointer; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); color: var(--c-ink-2); transition: background var(--overgang), color var(--overgang); } .bs-chip.is-actief { background: var(--accent-t); border-color: var(--ink); color: var(--ink); font-weight: 600; } .bs-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } /* ---------- Schakelaar ---------- */ .bs-switch { width: 42px; height: 24px; flex: none; border-radius: var(--radius-pill); cursor: pointer; position: relative; border: 0; background: var(--c-lijn-2); transition: background var(--overgang); padding: 0; } .bs-switch.is-aan { background: var(--c-groen); } .bs-switch span { position: absolute; top: 2.5px; left: 2.5px; width: 19px; height: 19px; border-radius: 50%; background: var(--kaart); transition: transform var(--overgang); } .bs-switch.is-aan span { transform: translateX(18px); } /* ---------- Detail-drawer rechts — vaste huisstijl (norm 1.1) ---------- */ .bs-drawer-laag { position: fixed; inset: 0; background: rgba(51, 50, 46, .38); z-index: 60; display: flex; justify-content: flex-end; } .bs-drawer { width: min(480px, 92vw); height: 100%; background: var(--c-creme); border-left: var(--lijndikte) solid var(--c-lijn); display: flex; flex-direction: column; overflow: hidden; } .bs-drawer__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); } .bs-drawer__kop h2 { margin: 3px 0 4px; font-size: 1.15rem; font-weight: 800; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .bs-drawer__sub { font-size: .72rem; color: var(--c-ink-3); } .bs-drawer__body { padding: 16px 20px; overflow-y: auto; flex: 1; } .bs-drawer__voet { display: flex; flex-direction: column; gap: 8px; padding: 14px 20px; border-top: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); } .bs-drawer__feiten { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; } .bs-feit { display: inline-flex; flex-direction: column; gap: 1px; font-size: .8rem; font-weight: 700; } .bs-feit em { font-style: normal; font-family: var(--font-mono); font-size: .56rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-3); } /* ---------- 0.5 beheerpatroon: vijf tabs ---------- */ .bs-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; } .bs-tab { font-family: var(--font-ui); font-size: .8rem; font-weight: 700; padding: 8px 16px; border-radius: var(--radius-klein); border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); color: var(--c-ink-2); cursor: pointer; transition: background var(--overgang), color var(--overgang); } .bs-tab.is-actief { background: var(--donker, var(--c-ink)); color: var(--donker-ink, var(--c-creme)); border-color: var(--donker, var(--c-ink)); } /* ---- 0.8 formulier-velden (norm "werkbaar", 14-07-2026) ---- Grid voor twee kolommen; .bs-veld--breed spant de volle breedte. */ .bs-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .bs-veld { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .bs-veld--breed { grid-column: 1 / -1; } /* een poortblok in een formulier loopt over de volle breedte; in één kolom brak de waarschuwing na twee woorden af */ .bs-form > .bs-poort, .bs-form > .bs-bevestig__tekst, .bs-form > .bs-bevestig__rijen { grid-column: 1 / -1; } .bs-form > p:empty { display: none; } /* blok G: de regels van het bevestigvenster sluiten de alinea eromheen af; wat leeg overblijft neemt geen rij */ .bs-veld > span { font: 600 .66rem var(--font-ui); color: var(--c-ink-2); } .bs-veld > span b { color: var(--c-terra); font-weight: 700; } .bs-veld input, .bs-veld select, .bs-veld textarea { box-sizing: border-box; width: 100%; padding: 9px 11px; border: 1.5px solid var(--c-lijn-2); border-radius: 9px; font: 500 .78rem var(--font-ui); color: var(--c-ink); background: var(--kaart); } .bs-veld textarea { resize: vertical; } .bs-veld em { font: 400 .6rem var(--font-ui); font-style: normal; color: var(--c-ink-3); } /* ---- 0.9 invoer-lat: inline verplicht-validatie (rood = blokkade) ---- */ .bs-veld [aria-invalid="true"] { border-color: var(--c-rood); background: var(--c-rood-t); } .bs-veld .bs-veld-fout { font: 600 .6rem var(--font-ui); font-style: normal; color: var(--c-rood); } /* ---- 0.9 zoek-kiezer (relatie/opdracht/leverancier) ---- */ .bs-kz-zoek { position: relative; } .bs-kz-icoon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--c-ink-3); font-size: .82rem; pointer-events: none; } .bs-kz-zoek input[data-kz-zoek] { padding-left: 30px; } .bs-kz-res { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); box-shadow: var(--schaduw-tegel); overflow: hidden; max-height: 230px; overflow-y: auto; } .bs-kz-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; border: 0; background: none; cursor: pointer; padding: 9px 12px; border-bottom: var(--lijndikte) solid var(--c-lijn); font: 500 .74rem var(--font-ui); color: var(--c-ink); } .bs-kz-item:last-child { border-bottom: 0; } .bs-kz-item:hover { background: var(--c-creme); } .bs-kz-item__t { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .bs-kz-item__t small { font: 400 .62rem var(--font-ui); color: var(--c-ink-3); } .bs-kz-item__tag { flex: none; font-size: .56rem; color: var(--c-groen-d); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius-pill); padding: 2px 8px; background: var(--c-creme); } .bs-kz-leeg { padding: 10px 12px; font: 400 .68rem var(--font-ui); color: var(--c-ink-3); } .bs-kz-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; border: var(--lijndikte) solid var(--c-groen); background: var(--c-groen-t); border-radius: var(--radius); padding: 7px 8px 7px 12px; } .bs-kz-chip__t { display: flex; flex-direction: column; gap: 1px; min-width: 0; font: 700 .74rem var(--font-ui); color: var(--c-groen-d); } .bs-kz-chip__t small { font: 500 .62rem var(--font-ui); color: var(--c-ink-2); } .bs-kz-chip__x { flex: none; border: 0; background: none; cursor: pointer; font-size: .68rem; color: var(--c-ink-2); padding: 2px 4px; border-radius: 6px; } .bs-kz-chip__x:hover { color: var(--c-rood); } .bs-form-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .bs-form-kop h2 { margin: 3px 0 0; font-size: 1.05rem; } .bs-form-kop p { margin: 7px 0 0; font: 400 .76rem/1.55 var(--font-ui); color: var(--c-ink-2); max-width: 54ch; } .bs-form-voet { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding-top: 12px; border-top: var(--lijndikte) solid var(--c-lijn); flex-wrap: wrap; } /* In een modaal krijgt het bs-form-patroon zijn vaste binnenmarge en een verankerde voet (crème balk, knoppen rechts) — stijlfix 14-07-2026. */ .bs-modal > .bs-form-kop { padding: 20px 22px 0; } .bs-modal > .bs-form { padding: 0 22px; } .bs-modal > .bs-form-voet { justify-content: flex-end; margin-top: 18px; padding: 14px 22px; background: var(--c-creme); } .bs-modal > .bs-form-voet > span, .bs-modal > .bs-form-voet > em { margin-right: auto; font-size: .68rem; color: var(--c-ink-3); } /* ---- 0.8 Custom filters (Gripp-norm) ---- */ .bs-flt-tel { font-size: 11px; opacity: .7; margin-left: 2px; } .bs-flt-chip { display: inline-flex; align-items: stretch; border: 1px solid var(--c-groen-d); border-radius: var(--radius-klein); overflow: hidden; } .bs-flt-chip__naam { border: 0; background: color-mix(in srgb, var(--c-groen-d) 10%, var(--c-paneel)); color: var(--c-ink); font: inherit; font-weight: 600; font-size: 13px; padding: 7px 12px; cursor: pointer; } .bs-flt-chip__x { border: 0; border-left: 1px solid var(--c-groen-d); background: none; color: var(--c-ink); font: inherit; padding: 0 10px; cursor: pointer; } .bs-flt-chip__naam:hover, .bs-flt-chip__x:hover { background: color-mix(in srgb, var(--c-groen-d) 18%, var(--c-paneel)); } .bs-flt-sectie { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--c-lijn); } .bs-flt-sectie:last-child { border-bottom: 0; } .bs-flt-rij { display: grid; grid-template-columns: 1.1fr 0.9fr 1.2fr 32px; gap: 8px; align-items: center; } .bs-flt-rij select, .bs-flt-rij input { border: 1px solid var(--c-lijn); border-radius: 12px; padding: 8px 10px; font: inherit; font-size: 13.5px; background: var(--c-paneel); color: var(--c-ink); min-width: 0; } /* Documentkluis-inkijk (bonnen, CV's): iframe in het modaal */ .bs-doc-preview { min-height: 420px; } .bs-doc-preview iframe { width: 100%; height: 60vh; border: 1px solid var(--c-lijn); border-radius: 12px; background: var(--c-paneel); } /* Multi-select bij keuze-velden: chips met checkbox (OF binnen het veld) */ .bs-flt-rij--multi { grid-template-columns: 1.1fr 0.9fr 32px; } .bs-flt-rij--multi .bs-flt-multi { grid-column: 1 / -2; } .bs-flt-multi { display: flex; flex-wrap: wrap; gap: 6px; } .bs-flt-optie { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--c-lijn); border-radius: var(--radius-klein); padding: 5px 12px; font-size: 13px; cursor: pointer; background: var(--c-paneel); color: var(--c-ink); } .bs-flt-optie input { accent-color: var(--c-groen-d); margin: 0; } .bs-flt-optie.is-aan { border-color: var(--c-groen-d); background: color-mix(in srgb, var(--c-groen-d) 10%, var(--c-paneel)); font-weight: 600; } .bs-flt-optie:has(input:focus-visible) { outline: var(--focus-ring); outline-offset: 1px; } .bs-flt-del { border: 1px solid var(--c-lijn); border-radius: 12px; background: none; color: var(--c-ink-2); cursor: pointer; height: 34px; } .bs-flt-del:hover { color: var(--c-rood); border-color: var(--c-rood); } .bs-flt-add { align-self: flex-start; } .bs-flt-modus { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; } .bs-flt-modus label { display: inline-flex; gap: 7px; align-items: center; cursor: pointer; } .bs-flt-opgeslagen { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--c-lijn); border-radius: 12px; } .bs-flt-opgeslagen__info { display: flex; flex-direction: column; gap: 2px; font-size: 13px; } .bs-flt-opgeslagen__info span { color: var(--c-ink-2); font-size: 12px; } .bs-flt-opgeslagen__acties { display: flex; gap: 6px; } .bs-flt-bewaar .btn--primary { align-self: flex-start; } /* ---- 0.9 klikbare referentie + universele dossier-drawer (18-07-2026) ---- */ .bs-ref { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--c-lijn-2); text-underline-offset: 3px; text-align: left; } .bs-ref:hover { color: var(--c-groen-d); text-decoration-color: var(--c-groen); } .bs-ref--opdracht, .bs-ref--factuur, .bs-ref--case { font-family: var(--font-mono); } .dos-laden { padding: 18px; font: 400 .78rem var(--font-ui); color: var(--c-ink-3); } .dos-stat { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; } .dos-rij { display: flex; flex-direction: column; gap: 2px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 9px 12px; background: var(--kaart); } .dos-rij span { font: 600 .58rem var(--font-ui); text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); } .dos-rij b { font: 800 .88rem var(--font-mono); color: var(--c-ink); } .dos-kaartje { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: var(--kaart); padding: 10px 12px; margin-bottom: 6px; cursor: pointer; font: 500 .76rem var(--font-ui); color: var(--c-ink); } .dos-kaartje:hover { border-color: var(--c-groen-d); background: var(--c-creme); } .dos-kaartje.is-stil { cursor: default; } .dos-kaartje.is-stil:hover { border-color: var(--c-lijn); background: var(--kaart); } .dos-kaartje > div { display: flex; align-items: center; gap: 8px; } .dos-kaartje span { font-size: .68rem; color: var(--c-ink-2); } .dos-event { display: flex; gap: 10px; padding: 7px 0; font: 500 .74rem var(--font-ui); } .dos-event__dot { flex: none; width: 7px; height: 7px; border-radius: 99px; background: var(--c-groen); margin-top: 6px; } .dos-event__meta { font-size: .6rem; color: var(--c-ink-3); } .dos-actie { margin-top: 14px; } /* ===================================================================== 0.9 Formuliermotor — één stijl voor alle formulieren in het systeem. Secties met tussenkop, tweekoloms raster, vaste voet met teller. ===================================================================== */ .bs-form__sectie { grid-column: 1 / -1; } .bs-form__sectie + .bs-form__sectie { margin-top: 16px; padding-top: 15px; border-top: var(--lijndikte) solid var(--c-lijn); } .bs-form__sectiekop { display: flex; align-items: baseline; gap: 10px; margin-bottom: 11px; flex-wrap: wrap; } .bs-form__sectiekop em { font: 400 .64rem var(--font-ui); font-style: normal; color: var(--c-ink-3); } .bs-form__raster { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* Voet: teller links, knoppen rechts — overal dezelfde volgorde. */ .bs-form-voet { justify-content: space-between; } .bs-form__knoppen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .bs-form__teller { font: 600 .68rem var(--font-ui); color: var(--c-terra-d); } .bs-form__teller.is-klaar { color: var(--c-groen-d); } /* Bedragveld: het €-teken staat vast vóór het invoervak. */ .bs-veld--bedrag { position: relative; } .bs-veld__pre { position: absolute; left: 11px; top: 26px; font: 700 .78rem var(--font-mono); color: var(--c-ink-3); pointer-events: none; } .bs-veld--bedrag input { padding-left: 26px; } /* Aanvinkvakje: label naast het vakje in plaats van erboven. */ .bs-veld--vink { flex-direction: row; align-items: flex-start; gap: 9px; padding: 9px 0; } .bs-veld--vink input { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--c-groen); } .bs-veld--vink > span { font-size: .76rem; color: var(--c-ink); } /* Radio- en meerkeuzegroep: rijen die als geheel klikbaar zijn. */ .bs-veld__kop { font: 600 .66rem var(--font-ui); color: var(--c-ink-2); display: block; margin-bottom: 7px; } .bs-keuzerijen { display: grid; gap: 6px; } .bs-keuzerij { display: flex; align-items: flex-start; gap: 9px; padding: 9px 12px; cursor: pointer; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: var(--kaart); transition: border-color 160ms ease, background 160ms ease; } .bs-keuzerij:hover { border-color: var(--c-groen); background: var(--c-creme); } .bs-keuzerij:has(input:checked) { border-color: var(--c-groen); background: var(--c-groen-t); } .bs-keuzerij input { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--c-groen); } .bs-keuzerij strong { display: block; font: 600 .76rem var(--font-ui); } .bs-keuzerij em { display: block; font: 400 .64rem var(--font-ui); font-style: normal; color: var(--c-ink-3); margin-top: 1px; } .bs-veld--keuze.is-fout .bs-keuzerij { border-color: var(--c-rood); } .bs-veld__fout { display: block; font: 600 .6rem var(--font-ui); font-style: normal; color: var(--c-rood); } .bs-veld__fout:empty { display: none; } /* blok G (P24) · een waarde buiten het gewone bereik: het veld vraagt de reden dat hij toch klopt */ .bs-veld__afwijking { display: block; margin-top: 4px; } .bs-veld__afwijking label { display: flex; flex-direction: column; gap: 4px; font: 600 .68rem var(--font-ui); color: var(--let-d); } .bs-veld__afwijking input { font: inherit; font-weight: 500; color: var(--c-ink); } /* ---- Werkblad: lange formulieren rechts, in de stijl van de detail-drawer. Kop en voet staan vast; alleen het middendeel scrolt. ---- */ .bs-werkblad-laag { position: fixed; inset: 0; z-index: 70; background: rgba(31, 30, 28, .34); display: flex; justify-content: flex-end; animation: bs-vervaag 160ms ease; } .bs-werkblad { width: min(680px, 94vw); height: 100%; background: var(--c-creme); display: flex; flex-direction: column; border-left: var(--lijndikte) solid var(--c-lijn); box-shadow: var(--schaduw-tegel-hover); animation: bs-schuifin 180ms cubic-bezier(.22, .61, .36, 1); } .bs-werkblad .bs-form-kop { padding: 22px 26px 15px; margin: 0; background: var(--kaart); border-bottom: var(--lijndikte) solid var(--c-lijn); } .bs-werkblad__body { flex: 1; overflow-y: auto; padding: 20px 26px; } .bs-werkblad .bs-form-voet { margin: 0; padding: 14px 26px; border-top: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); } @keyframes bs-schuifin { from { transform: translateX(26px); opacity: .5; } to { transform: none; opacity: 1; } } @keyframes bs-vervaag { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .bs-werkblad, .bs-werkblad-laag { animation: none; } } @media (max-width: 640px) { .bs-form__raster { grid-template-columns: 1fr; } .bs-werkblad { width: 100%; } } .bs-veld--bestand input[type="file"] { font: 500 .72rem var(--font-ui); padding: 9px 11px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); cursor: pointer; } .bs-veld--bestand input[type="file"]::file-selector-button { font: 700 .68rem var(--font-ui); margin-right: 10px; padding: 5px 11px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; background: var(--c-creme); color: var(--c-ink-2); cursor: pointer; } /* Voet mét teller: teller links, knoppen rechts (ook bij bestaande formulieren die nog geen .bs-form__knoppen-wikkel hebben). */ .bs-form-voet--teller { justify-content: flex-end; } .bs-form-voet--teller .bs-form__teller { margin-right: auto; } /* Tweede voetvariant (bs-modal__voet) krijgt dezelfde teller-uitlijning. */ .bs-modal__voet.bs-form-voet--teller { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; } .bs-modal__voet.bs-form-voet--teller .bs-form__teller { margin-right: auto; } /* Leesregel in een formulier: berekende uitkomst, geen invoer. */ .bs-veld--toon { background: var(--c-paneel); border-radius: var(--radius); padding: 10px 13px; gap: 2px; } .bs-veld--toon > span { font: 600 .62rem var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); } .bs-veld--toon > strong { font: 700 .82rem var(--font-ui); color: var(--c-ink); } /* Verzendlijst: eerst zien wát er weggaat, dan pas versturen (norm 19-07-2026). Het vinkje breekt bewust de spierherinnering van doorklikken — je moet de lijst gezien hebben. */ .bs-vzsub { margin: 6px 0 0; font: 400 .78rem/1.55 var(--font-ui); color: var(--c-ink-2); max-width: 68ch; } .bs-vzlijst { max-height: 320px; overflow-y: auto; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: var(--c-creme); margin: 14px 0 0; } .bs-vzrij { display: grid; grid-template-columns: 1.1fr 1.6fr auto 1fr; gap: 12px; align-items: center; padding: 8px 14px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; } .bs-vzrij:first-child { border-top: 0; } .bs-vzrij--kop { position: sticky; top: 0; background: var(--c-paneel); font-size: .58rem; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); } .bs-vzrij__wie { font-weight: 700; } .bs-vzrij__wat { color: var(--c-ink-2); } .bs-vzrij__bedrag { text-align: right; } .bs-vzrij__extra { font-size: .68rem; color: var(--c-ink-3); } .bs-vzleeg, .bs-vzmeer { padding: 12px 14px; font-size: .76rem; color: var(--c-ink-3); border-top: var(--lijndikte) solid var(--c-lijn); } .bs-vzvoet { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 2px 0; font-size: .82rem; } .bs-vzvoet__extra { font-size: .7rem; color: var(--c-ink-3); margin-left: auto; } .bs-vzcheck { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 0; padding: 11px 13px; border-radius: var(--radius); background: var(--c-amber-t); font-size: .78rem; line-height: 1.5; cursor: pointer; } .bs-vzcheck input { margin-top: 2px; flex: none; } /* 0.10 · uniforme schermtoestanden (R1 bouwplan, EPIC 2) */ .bs-toestand { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 20px; text-align: center; color: var(--c-ink-2); } .bs-toestand strong { font-size: .88rem; color: var(--c-ink); } .bs-toestand span { font-size: .78rem; max-width: 52ch; line-height: 1.5; } .bs-toestand--laden { flex-direction: row; justify-content: center; } .bs-toestand__spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--c-lijn-2); border-top-color: var(--c-groen); animation: bs-spin 900ms linear infinite; } @keyframes bs-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .bs-toestand__spin { animation: none; } } .bs-toestand--fout strong { color: var(--c-rood); } .bs-verouderd { font-size: .68rem; color: var(--c-amber); } /* ---- Klantcontext (klantkaart v2, 31-07): gele memo + "Loopt nu" ---- De memo is strikt intern (memo-geel is exclusief voor interne notities); de strip reist mee in dossier-drawer en configurator. */ .kc-host:empty { display: none; } .kc-host--koz { max-width: var(--werkbreedte, 1240px); margin: 10px auto 0; padding: 0 32px; display: flex; flex-direction: column; gap: 8px; } .kc-memo { display: flex; flex-direction: column; gap: 4px; background: var(--c-memo); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 10px; padding: 10px 14px; margin: 10px 0; } .kc-memo__kop { font-size: .6rem; letter-spacing: .08em; color: var(--c-ink-2); } .kc-memo__tekst { font-size: .8rem; color: var(--c-ink); } .kc-memo__bewerk { align-self: flex-start; border: 0; background: transparent; padding: 0; cursor: pointer; font-family: var(--font-ui); font-size: .66rem; color: var(--c-ink-2); text-decoration: underline; } .kc-memo__bewerk:hover { color: var(--c-ink); } .kc-memo--compact { margin: 0; } .kc-zaken { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; } .kc-zaken__kop { font-size: .6rem; letter-spacing: .08em; color: var(--c-ink-3); } .kc-zaken--compact { flex-direction: row; flex-wrap: wrap; margin: 0 0 6px; } .kc-zaak { display: flex; align-items: center; gap: 8px; text-align: left; text-decoration: none; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 10px; background: var(--kaart); padding: 7px 12px; cursor: pointer; font-family: var(--font-ui); font-size: .74rem; color: var(--c-ink); max-width: 100%; min-width: 0; box-sizing: border-box; transition: border-color var(--overgang); } .kc-zaak:hover { border-color: var(--c-groen); } .kc-zaak b { font-size: .68rem; white-space: nowrap; } .kc-zaak__ic { color: var(--c-ink-3); } .kc-zaak__label { color: var(--c-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; } .kc-zaak__st { margin-left: auto; color: var(--c-groen-d); font-weight: 700; font-size: .68rem; white-space: nowrap; } .kc-zaken--compact .kc-zaak { padding: 5px 10px; } .rel-memoknop { align-self: flex-start; margin: 8px 0; } @media (prefers-reduced-motion: reduce) { .kc-zaak { transition: none; } } /* ---- Staafgroei-animatie (vaste stijl, akkoord Michiel 01-08) ---- Elke staaf in een diagram groeit bij het openen van 0 naar zijn waarde: 900ms met zachte uitloop, rijen 110ms na elkaar via --groei-i. Bewust langer dan de 150-180ms-interactienorm — dit is een eenmalige data-onthulling, geen UI-overgang. Bewegingsarm ingesteld? Dan staan de staafjes direct op volle breedte. */ @keyframes bsGroei { from { width: 0; } } @keyframes bsGroeiV { from { height: 0; } } .bs-groei { animation: bsGroei 900ms cubic-bezier(.22, .8, .36, 1) both; animation-delay: calc(var(--groei-i, 0) * 110ms); } .bs-groei-v { animation: bsGroeiV 900ms cubic-bezier(.22, .8, .36, 1) both; animation-delay: calc(var(--groei-i, 0) * 110ms); } @media (prefers-reduced-motion: reduce) { .bs-groei, .bs-groei-v { animation: none; } } /* ---- 0.10 Fotokijker (SUB A7) — doorbladeren zonder de werkbon te openen. Alleen tokens; de overlay gebruikt --schaduw-laag, net als de pdf-viewer. ---- */ .bs-fotokijker-laag { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(20, 20, 20, .52); padding: 24px; } .bs-fotokijker { width: min(680px, 100%); max-height: 90vh; overflow: auto; background: var(--c-vlak); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); box-shadow: var(--schaduw-laag); } .bs-fotokijker__kop { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .bs-fotokijker__kop .kicker { font: 700 .64rem var(--font-mono); letter-spacing: .06em; color: var(--c-ink-2); } .bs-fotokijker__sluit { border: 0; background: transparent; font-size: .9rem; color: var(--c-ink-2); cursor: pointer; border-radius: var(--radius-klein); padding: 2px 8px; } .bs-fotokijker__sluit:hover { color: var(--c-ink); } .bs-fotokijker__sluit:focus-visible, .bs-fotokijker__pijl:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; } .bs-fotokijker__beeld { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; padding: 16px; } .bs-fotokijker__pijl { height: 44px; border: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); border-radius: var(--radius-klein); font-size: 1.2rem; line-height: 1; color: var(--c-ink); cursor: pointer; } .bs-fotokijker__pijl:disabled { opacity: .35; cursor: not-allowed; } .bs-fotokijker__vlak { min-height: 168px; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 20px; text-align: center; border: var(--lijndikte) dashed var(--c-lijn-2); border-radius: var(--radius-klein); background: var(--c-paneel); } .bs-fotokijker__fase { font: 700 .78rem var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--c-ink-2); } .bs-fotokijker__geen { max-width: 42ch; font: 500 .68rem var(--font-ui); color: var(--c-ink-3); } .bs-fotokijker__feiten { display: grid; grid-template-columns: 132px 1fr; gap: 6px 14px; margin: 0; padding: 0 16px 16px; } .bs-fotokijker__feiten dt { font: 500 .66rem var(--font-ui); color: var(--c-ink-3); } .bs-fotokijker__feiten dd { margin: 0; font: 600 .72rem var(--font-ui); color: var(--c-ink); } /* ═══ Bladervoet (N3a) ══════════════════════════════════════════════ Onder elke lijst die niet in één keer past. Hij toont wat er staat én wat er is: «100 van 2.605» in plaats van een lijst die compleet lijkt. Een lijst die stil bij honderd ophoudt is erger dan een lange lijst, want er is niets aan te zien. */ .bs-blader { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding: 10px 14px; border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--kaart); } .bs-blader__tel { font-size: 13px; color: var(--ink2); } .bs-blader__klaar { font-size: 13px; color: var(--ink3); font-style: italic; } /* RE18 · de woning in beeld */ .bs-wv { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: start; } .bs-wv.is-compact { grid-template-columns: 160px minmax(0, 1fr); gap: 10px; } .bs-wv.is-laden, .bs-wv.is-leeg { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--ink2); } .bs-wv__foto { position: relative; width: 300px; height: 200px; overflow: hidden; border-radius: var(--radius); background: var(--paneel-2, var(--c-paneel-2)); border: var(--lijndikte, 1px) solid var(--lijn, var(--c-lijn)); } .bs-wv__foto.is-compact { width: 160px; height: 106px; } .bs-wv__mozaiek { position: absolute; left: 50%; top: 50%; width: 0; height: 0; } .bs-wv__mozaiek img { position: absolute; width: 256px; height: 256px; left: calc(var(--dx) * 256px - var(--wv-px)); top: calc(var(--dy) * 256px - var(--wv-py)); display: block; } .bs-wv__foto.is-compact .bs-wv__mozaiek { transform: scale(.55); } .bs-wv__punt { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--stop); font-size: 1.1rem; text-shadow: 0 0 3px var(--kaart), 0 0 6px var(--kaart); } .bs-wv__attr { position: absolute; right: 4px; bottom: 2px; font-size: .55rem; color: var(--knop-ink); background: rgba(20,23,26,.55); padding: 1px 5px; border-radius: 4px; } .bs-wv__foto.is-leeg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink3, var(--c-ink-3)); font-size: .74rem; } .bs-wv__foto.is-leeg span { font-size: 1.6rem; } .bs-wv__rest { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .bs-wv__adres { font-weight: 800; font-size: .92rem; } .bs-wv.is-compact .bs-wv__adres { font-size: .8rem; } .bs-wv__kenmerken { display: flex; flex-wrap: wrap; gap: 6px 14px; } .bs-wv__k { display: inline-flex; flex-direction: column; font-size: .74rem; } .bs-wv__k .kicker { font-size: .56rem; } .bs-wv__deuren { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .bs-wv.is-compact .bs-wv__deuren { gap: 6px; } .bs-wv__deur { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: var(--ink, var(--c-ink)); border: var(--lijndikte, 1px) solid var(--lijn-2, var(--c-lijn-2)); border-radius: var(--radius); padding: 10px 8px; background: var(--kaart); transition: background 150ms ease, border-color 150ms ease; } .bs-wv__deur:hover { background: var(--paneel-2, var(--c-paneel-2)); border-color: var(--ink, var(--c-ink)); } .bs-wv__deur:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .bs-wv__deur[aria-disabled="true"] { opacity: .5; pointer-events: none; } .bs-wv__deur.has-beeld { padding: 0; overflow: hidden; } .bs-wv__deur img { width: 100%; height: 70px; object-fit: cover; display: block; } .bs-wv__glyph { font-size: 1.3rem; line-height: 1; } .bs-wv.is-compact .bs-wv__glyph { font-size: 1rem; } .bs-wv.is-compact .bs-wv__deur { padding: 6px 4px; } .bs-wv__lbl { text-align: center; font-size: .7rem; line-height: 1.25; } /* ---- PK3 · de woningstrook (BS.woningstrook) ---- */ .bs-ws { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 14px; align-items: stretch; padding: 12px; background: var(--kaart); border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius); box-shadow: var(--schaduw-kaart); } .bs-ws.is-compact { grid-template-columns: 200px minmax(0, 1fr); gap: 10px; padding: 8px; } .bs-ws.is-laden, .bs-ws.is-leeg { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--ink2); } /* het beeld: een figuur met de foto (of luchtfoto/schets) en de bron eronder */ .bs-ws__fig { margin: 0; display: flex; flex-direction: column; gap: 5px; min-width: 0; position: relative; } .bs-ws__beeld { position: relative; display: block; width: 100%; height: 180px; overflow: hidden; border-radius: var(--radius-klein); background: var(--grijs); } .bs-ws.is-compact .bs-ws__beeld { height: 112px; } .bs-ws__beeld--knop { border: 0; padding: 0; margin: 0; font: inherit; cursor: zoom-in; } .bs-ws__beeld--knop:focus-visible { outline: var(--focus-ring); outline-offset: 3px; } .bs-ws__vergroot { position: absolute; right: 8px; top: 8px; font-size: .68rem; font-weight: 700; color: var(--knop-ink); background: var(--sluier); padding: 2px 8px; border-radius: var(--radius-pill); } .bs-ws.is-compact .bs-ws__vergroot { display: none; } .bs-ws__sv { width: 100%; height: 100%; object-fit: cover; display: block; } .bs-ws__beeld .bs-ws__mozaiek { position: absolute; left: 50%; top: 50%; width: 0; height: 0; } .bs-ws__beeld .bs-ws__mozaiek img { position: absolute; width: 256px; height: 256px; left: calc(var(--dx) * 256px - var(--wv-px)); top: calc(var(--dy) * 256px - var(--wv-py)); } .bs-ws__bron { display: flex; justify-content: space-between; gap: 4px 8px; flex-wrap: wrap; font-size: .66rem; color: var(--ink2); line-height: 1.3; } .bs-ws__datum { font-size: .64rem; color: var(--ink3); } .bs-ws__datum:empty { display: none; } /* compact (planwerkbak, veld): de bron blijft klein óp het beeld, er is geen ruimte eronder */ .bs-ws.is-compact .bs-ws__bron { position: absolute; right: 4px; bottom: 3px; left: auto; font-size: .56rem; color: var(--knop-ink); background: var(--sluier); padding: 1px 6px; border-radius: 4px; } .bs-ws.is-compact .bs-ws__datum { color: var(--knop-ink); font-size: .56rem; } .bs-ws__schets { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink3); font-size: .72rem; text-align: center; padding: 8px; } .bs-ws__schets span { font-size: 1.8rem; } .bs-ws__rest { display: flex; flex-direction: column; gap: 8px; min-width: 0; justify-content: space-between; } .bs-ws__adres { display: flex; align-items: baseline; gap: 6px; font-weight: 800; font-size: .92rem; flex-wrap: wrap; } .bs-ws__adresregel { min-width: 0; } .bs-ws__bag { font-size: .62rem; color: var(--ink3); font-weight: 400; margin-left: auto; } .bs-ws__feiten { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; } .bs-ws__feit { display: inline-flex; flex-direction: column; font-size: .76rem; min-width: 0; } .bs-ws__feit dt { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); } .bs-ws__feit dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; } .bs-ws__feit small { display: block; font-size: .58rem; font-weight: 500; color: var(--ink3); } .bs-ws__feit.is-onbekend dd { font-weight: 500; color: var(--ink2); } .bs-ws__conf { font-size: .56rem; font-weight: 800; min-width: 14px; height: 14px; margin-left: 2px; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; border-radius: 3px; border: var(--lijndikte) solid var(--lijn2); color: var(--ink2); } .bs-ws__conf.conf-A { border-color: var(--goed); color: var(--goed-d); } .bs-ws__conf.conf-D { border-color: var(--stop); color: var(--stop-d); } .bs-ws__leeg { margin: 0; font-size: .72rem; color: var(--ink3); } .bs-ws__deuren { display: flex; gap: 6px; flex-wrap: wrap; } .bs-ws__deur { font-size: .7rem; font-weight: 700; text-decoration: none; color: var(--ink); padding: 4px 10px; border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-pill); } .bs-ws__deur:hover { border-color: var(--ink); background: var(--grijs); } .bs-ws__deur:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } @media (max-width: 640px) { .bs-ws, .bs-ws.is-compact { grid-template-columns: 1fr; } } /* WONINGKAART (Michiel 11-10-2026) · smalle plek: de foto bovenaan, volle breedte, liggend 4:3; de tekst eronder */ /* staand ligt de kaart al in een paneel: geen tweede rand of schaduw eromheen */ .bs-ws.is-staand { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0; border: 0; background: none; box-shadow: none; } .bs-ws.is-staand .bs-ws__beeld { height: auto; aspect-ratio: 4 / 3; max-width: 100%; border-radius: var(--radius); } .bs-ws.is-staand .bs-ws__bron { font-size: .74rem; } .bs-ws.is-staand .bs-ws__datum { font-size: .7rem; color: var(--ink2); } .bs-ws.is-staand .bs-ws__vergroot { font-size: .72rem; padding: 3px 9px; } .bs-ws.is-staand .bs-ws__rest { gap: 12px; justify-content: flex-start; } .bs-ws.is-staand .bs-ws__adres { gap: 2px 6px; font-size: 1.08rem; line-height: 1.25; text-wrap: balance; } .bs-ws.is-staand .bs-ws__bag { flex-basis: 100%; margin-left: 0; font-size: .7rem; } .bs-ws.is-staand .bs-ws__feiten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; padding: 12px 0; border-block: var(--lijndikte) solid var(--lijn); } .bs-ws.is-staand .bs-ws__feit { display: grid; gap: 1px; } .bs-ws.is-staand .bs-ws__feit dt { font-family: inherit; font-size: .7rem; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--accent); } .bs-ws.is-staand .bs-ws__feit dd { font-size: .98rem; font-variant-numeric: tabular-nums; } .bs-ws.is-staand .bs-ws__feit small { font-size: .66rem; } .bs-ws.is-staand .bs-ws__deur { font-size: .76rem; padding: 5px 12px; background: var(--kaart); } @media (prefers-reduced-motion: no-preference) { .bs-ws__beeld--knop { transition: transform .16s ease; } .bs-ws__beeld--knop:hover { transform: translateY(-1px); } } /* vergroot: het vooraanzicht als laag over het scherm (één dialoog per pagina) */ .bs-ws-groot { border: 0; padding: 0; border-radius: var(--radius); width: min(920px, calc(100vw - 32px)); max-height: calc(100vh - 32px); background: var(--kaart); color: var(--ink); box-shadow: var(--schaduw-laag); overflow: auto; } .bs-ws-groot::backdrop { background: var(--sluier); } .bs-ws-groot__kop { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: var(--lijndikte) solid var(--lijn); } .bs-ws-groot__titel { font-weight: 800; min-width: 0; } .bs-ws-groot img { display: block; width: 100%; max-width: 100%; height: auto; } .bs-ws-groot__bron { margin: 0; padding: 8px 14px 12px; font-size: .74rem; color: var(--ink2); } .bs-wv__lbl b { display: block; font-size: .72rem; } .bs-wv__lbl small { color: var(--ink3, var(--c-ink-3)); font-size: .62rem; } /* in een smalle kolom (klantdossier) staat de foto boven en de rest eronder */ [data-wv] { container-type: inline-size; display: block; min-width: 0; } @container (max-width: 560px) { .bs-wv { grid-template-columns: 1fr; } .bs-wv__foto:not(.is-compact) { width: 100%; height: 190px; } } @media (max-width: 700px) { .bs-wv { grid-template-columns: 1fr; } .bs-wv__foto { width: 100%; } } /* VB1 · verzendbevestiging (besluit 51): samenvatting vóór elke verzending naar de klant */ .bs-vb { display: grid; gap: 12px; padding: 4px 22px 8px; } .bs-vb__aan { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--lijn); border-radius: var(--radius-klein, 8px); background: var(--paneel, var(--vlak2)); } .bs-vb__aan strong { font-size: 15px; } .bs-vb__adres { font-size: 12px; color: var(--ink2); } .bs-vb__regels { display: grid; grid-template-columns: 130px 1fr; gap: 4px 12px; margin: 0; font-size: 13px; } .bs-vb__regels dt { color: var(--ink2); } .bs-vb__regels dd { margin: 0; overflow-wrap: anywhere; } .bs-vb__bijlagen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .bs-vb__voorbeeld { border: 1px solid var(--lijn); border-radius: var(--radius-klein, 8px); padding: 10px 12px; font-size: 12.5px; color: var(--ink2); max-height: 180px; overflow: auto; white-space: pre-wrap; } /* BP1 · de bevestigingspoort: samenvattingsregels in het venster */ .bs-bevestig__rijen { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 4px 0 6px; font-size: .9rem; line-height: 1.45; } .bs-bevestig__rij { display: contents; } .bs-bevestig__rij span { color: var(--c-ink-2); } .bs-bevestig__rij b { font-weight: 600; } .bs-bevestig__rij span { white-space: nowrap; } .bs-bevestig__waarschuwing { margin: 0 0 8px; padding: 6px 10px; border-radius: var(--radius-klein); background: color-mix(in srgb, var(--let) 14%, var(--kaart)); font-size: .85rem; } /* ---------- LEESLAAG (LEESLAAG-BOUWSPEC §2, 25-09) · stat-tegel, sparkline, bullet, kolommen, tijdlijn ---------- */ .bs-spark { display: block; } .bs-spark-leeg { color: var(--ink3); font-size: .8rem; } .bs-op { color: var(--goed); font-weight: 700; } .bs-af { color: var(--stop); font-weight: 700; } .bs-neutraal { color: var(--ink2); font-weight: 700; } .bs-st { background: var(--kaart); border: 1px solid var(--lijn); border-top: 3px solid var(--lijn2); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--schaduw-kaart); } .bs-st--goed { border-top-color: var(--goed); } .bs-st--aandacht { border-top-color: var(--let); } .bs-st--achter { border-top-color: var(--stop); } .bs-st[role="button"] { cursor: pointer; } .bs-st:focus-visible, .bs-kol[role="button"]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .bs-st__l { font-size: .74rem; color: var(--ink2); font-weight: 600; line-height: 1.3; } .bs-st__rij { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 4px; } .bs-st__v { font-size: 1.7rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; font-family: var(--font-mono); white-space: nowrap; min-width: 0; } .bs-st__s { flex: none; } .bs-st__b { font-size: .95rem; font-weight: 600; color: var(--ink3); letter-spacing: 0; } .bs-st__sub { font-size: .72rem; color: var(--ink3); margin-top: 4px; line-height: 1.35; } .bs-st__woord { font-weight: 700; color: var(--ink2); } .bs-bul { position: relative; height: 20px; background: var(--vlak); border-radius: 3px; overflow: hidden; } .bs-bul__grens { position: absolute; top: 0; bottom: 0; left: 0; background: var(--lijn2); } .bs-bul__bar { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 0 3px 3px 0; } .bs-bul__doel { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--ink); border-radius: 1px; } .bs-kolgraf { display: flex; align-items: flex-end; gap: 6px; height: 132px; padding-top: 20px; } .bs-kol { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; position: relative; } .bs-kol[role="button"] { cursor: pointer; } .bs-kol__baan { flex: 1; width: 100%; max-width: 38px; display: flex; align-items: flex-end; justify-content: center; } .bs-kol__baan i { display: block; width: 100%; background: var(--accent-t); border: 1px solid var(--lijn2); border-bottom: 0; border-radius: 3px 3px 0 0; min-height: 2px; } .bs-kol.is-aan .bs-kol__baan i { background: var(--accent); border-color: var(--accent); } .bs-kol:hover .bs-kol__baan i { background: var(--accent-d); border-color: var(--accent-d); } .bs-kol__l { font-size: .68rem; color: var(--ink3); margin-top: 5px; font-weight: 600; } .bs-kol__w { position: absolute; top: -18px; font-size: .74rem; font-weight: 800; white-space: nowrap; font-family: var(--font-mono); } .bs-tijdlijn { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 6px; } .bs-tl-p { position: relative; text-align: left; border: 1px solid var(--lijn); border-radius: var(--radius-klein); padding: 9px 8px 8px; background: var(--kaart); font: inherit; color: var(--ink); cursor: pointer; } .bs-tl-p:hover { border-color: var(--ink3); } .bs-tl-p.is-aan { border-color: var(--ink); box-shadow: 0 0 0 2px var(--accent-t); } .bs-tl-slot { display: block; height: 4px; border-radius: 2px; margin-bottom: 7px; background: var(--lijn2); } .bs-tl-p--dicht .bs-tl-slot { background: var(--goed); } .bs-tl-p--klaar .bs-tl-slot { background: var(--let); } .bs-tl-p--live .bs-tl-slot { background: var(--accent-t); border: 1px solid var(--accent); height: 2px; } .bs-tl-m { font-size: .7rem; color: var(--ink3); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .bs-tl-w { font-size: .92rem; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; } .bs-tl-s { font-size: .66rem; color: var(--ink3); margin-top: 2px; } .bs-tl-c { position: absolute; top: 6px; right: 6px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 99px; background: var(--stop); color: var(--knop-ink); font-size: .62rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; } .bs-tl-c--stil { background: var(--ink3); } /* ---------- GESCHIEDENIS (27-09) · één paneel voor elk record ---------- */ .bs-gs { margin-top: 14px; } .bs-gs__kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .bs-gs__meta { font-size: .72rem; color: var(--ink3); } .bs-gs__rek { flex: 1; } .bs-gs__lijst { border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--kaart); } .bs-gs__rij { display: grid; grid-template-columns: 118px 1fr; gap: 0 14px; padding: 8px 12px; border-top: 1px solid var(--lijn); font-size: .84rem; } .bs-gs__rij:first-child { border-top: 0; } .bs-gs__tijd { font-size: .72rem; color: var(--ink2); padding-top: 2px; } .bs-gs__door { color: var(--ink3); font-weight: 400; } .bs-gs__pil { display: inline-block; font-size: .64rem; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--vlak); border: 1px solid var(--lijn); color: var(--ink2); margin-left: 4px; } .bs-gs__diff { font-size: .78rem; margin-top: 2px; } .bs-gs__oud { color: var(--ink3); text-decoration: line-through; } .bs-gs__detail { font-size: .76rem; color: var(--ink2); margin-top: 2px; } .bs-gs__reden { font-size: .76rem; color: var(--ink2); margin-top: 2px; font-style: italic; } .bs-gs__voet { margin-top: 8px; } @media (max-width: 640px) { .bs-gs__rij { grid-template-columns: 1fr; gap: 2px; } } /* ---- moduleroot «mo» (schermronde 29-09, stap 1) ---- Zes schermen (klanttaken, planwensen, postwachtrij, werkregels, eigen velden, webbestellingen) zetten hun inhoud in .mo; de klasse had geen stijl, waardoor de inhoud tegen de rail stond. Eén definitie, de norm van elke module. */ .mo { max-width: var(--werkbreedte, 1240px); margin: 0 auto; width: 100%; padding: 26px 32px 72px; box-sizing: border-box; } /* ─── Schermronde stap 4 (29-09) · bladeren en zoeken in een lijst (BS.maakBlader) ─── */ .bs-blzoek { display: inline-flex; flex-direction: column; gap: 3px; min-width: 220px; flex: 0 1 320px; } .bs-blzoek__lbl { font: 700 .62rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-3); } .bs-blzoek input { width: 100%; box-sizing: border-box; padding: 8px 11px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius-klein); background: var(--kaart); color: var(--c-ink); font: 500 .8rem var(--font-ui); } .bs-blzoek input:focus-visible { outline: var(--focus-ring); outline-offset: 1px; border-color: var(--accent); } .bs-paging--bl { padding: 10px 14px; flex-wrap: wrap; } .bs-paging--bl .bs-paging__knoppen { align-items: center; } .bs-paging--bl .bs-paging__knop { padding: 6px 12px; } .bs-paging__knop:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } .bs-blbalk { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; } /* ─── Schermronde stap 5 (30-09) · .bs-tabel ──────────────────────────────────────────── De klasse stond op 68 tabellen (Verlof, Veiligheid, Beoordelen, Personen, Inzicht) maar had geen stijl: dat was de «browseropmaak» uit de ronde — geen rijlijnen, cijfers tegen elkaar, koppen zonder ruimte. Dezelfde vorm als .tafel, zonder de kaart eromheen (die staat er meestal al omheen). */ .bs-tabel { width: 100%; border-collapse: collapse; font-size: 13.5px; } .bs-tabel th { font: 700 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); text-align: left; padding: 10px 12px; background: var(--rail); border-bottom: 1px solid var(--lijn); white-space: nowrap; } .bs-tabel td { padding: 10px 12px; border-bottom: 1px solid var(--grijs); vertical-align: top; } .bs-tabel tr:last-child td { border-bottom: 0; } .bs-tabel tbody tr:hover td { background: var(--accent-t2); } .bs-tabel tbody tr[data-doel], .bs-tabel tbody tr[role="button"], .bs-tabel tbody tr[tabindex] { cursor: pointer; } .bs-tabel th.num, .bs-tabel td.num { text-align: right; font-family: var(--font-mono); font-size: 12.5px; } .bs-tabel td small, .bs-tabel td .sub { display: block; font-size: 11.5px; color: var(--ink3); margin-top: 2px; } .bs-tabel td .chip { white-space: nowrap; } .bs-tabel tbody tr:focus-visible { outline: var(--focus-ring); outline-offset: -2px; } /* ═══ EÉN SCHERM (besluit 336, Michiel 09-10-2026) · kopband, tabbalk, reisbalk, spoor, register, velden, keuzegroep ═══ Alles op de tokens --rij, --pad, --kpi, --kop-hoogte en --tab-hoogte (dicht/ruim via html[data-dichtheid]). */ /* kopband: één regel met wie het is, de reis en drie handelingen plus «Meer» */ .bs-kopband { display: flex; align-items: center; gap: 12px; min-height: var(--kop-hoogte); padding: 0 16px; border-bottom: var(--lijndikte) solid var(--lijn); background: var(--kaart); min-width: 0; } .bs-kopband__terug { font-size: .72rem; color: var(--ink2); text-decoration: none; white-space: nowrap; } .bs-kopband__terug:hover { color: var(--ink); } .bs-kopband__nr { font-size: .68rem; color: var(--ink3); white-space: nowrap; } .bs-kopband h1 { margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; } .bs-kopband__chips { display: flex; gap: 4px; align-items: center; flex-wrap: nowrap; } .bs-kopband__chips .chip { white-space: nowrap; } .bs-kopband__adres { font-size: .72rem; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; } .bs-kopband__reis { margin-left: auto; flex: 1 1 240px; max-width: 340px; min-width: 0; } .bs-kopband__reis:has(.fin-exact) { flex-basis: 400px; max-width: 560px; } /* koppelingen in de reis-sleuf: drie stippen met tekst vragen meer breedte */ .bs-kopband__acties { display: flex; align-items: center; gap: 6px; flex: none; } .bs-kopband__acties .btn { padding: 0 10px; height: 28px; font-size: .74rem; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .bs-kopband .cluster-hoe { height: 28px; } .bs-meer { position: relative; } .bs-meer__menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 190px; display: flex; flex-direction: column; padding: 4px; background: var(--kaart); border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein); } /* geen schaduw: test-sr4 bewaakt dit blok, de rand draagt de laag */ .bs-meer__menu[hidden] { display: none; } .bs-meer__menu .btn { justify-content: flex-start; height: 30px; border-color: transparent; background: none; } .bs-meer__menu .btn:hover { background: var(--accent-t2); } /* tabbalk: één regel tabs, rechts een vak voor filters of een zoekveld */ .bs-tabbalk { display: flex; align-items: stretch; gap: 2px; min-height: var(--tab-hoogte); padding: 0 16px; border-bottom: var(--lijndikte) solid var(--lijn); background: var(--kaart); min-width: 0; } .bs-tabbalk__tab { border: 0; background: none; padding: 0 10px; font: 600 .8rem var(--font-ui); color: var(--ink2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; align-items: center; text-decoration: none; } .bs-tabbalk__scheiding { width: 1px; background: var(--lijn); margin: 10px 6px; } .bs-tabbalk__tab.is-actief { color: var(--ink); border-bottom-color: var(--accent); } .bs-tabbalk__tab:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; } .bs-tabbalk__rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; } /* reisbalk: een segment per stap; klaar = inkt, de stap met een poort = let, komend = grijs; één regel eronder */ .bs-reis { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .bs-reis__balk { display: flex; gap: 3px; align-items: center; } .bs-reis__balk i { flex: 1; height: 5px; border-radius: 99px; background: var(--grijs2); } .bs-reis__balk i.is-klaar { background: var(--ink); } .bs-reis__balk i.is-nu { background: var(--ink2); } .bs-reis__balk i.is-poort { background: var(--let); height: 7px; } .bs-reis__regel { font-size: .68rem; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; } .bs-reis__regel b { color: var(--ink); font-weight: 700; } .bs-reis__regel .punt { width: 7px; height: 7px; border-radius: 50%; background: var(--let); flex: none; } /* spoor: dezelfde stappen uitgeschreven */ .bs-spoor { display: flex; flex-direction: column; padding: 4px var(--pad) 8px; } .bs-spoor__stap { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 4px 0; position: relative; font-size: .8rem; line-height: 1.25; color: inherit; text-decoration: none; border-radius: 6px; } a.bs-spoor__stap:hover { background: var(--accent-t2); } .bs-spoor__stap::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: -6px; width: 2px; background: var(--grijs2); } .bs-spoor__stap:last-child::before { display: none; } .bs-spoor__stap i { width: 10px; height: 10px; border-radius: 50%; margin: 3px 2px 0; background: var(--kaart); border: 2px solid var(--lijn2); box-sizing: border-box; position: relative; z-index: 1; } .bs-spoor__stap.is-klaar i { background: var(--ink); border-color: var(--ink); } .bs-spoor__stap.is-klaar::before { background: var(--ink); } .bs-spoor__stap.is-nu i { background: var(--ink2); border-color: var(--ink2); } .bs-spoor__stap.is-poort i { background: var(--let); border-color: var(--let); outline: 3px solid var(--let-t); outline-offset: 0; } .bs-spoor__stap.is-poort b { color: var(--let); } .bs-spoor__stap.is-komend b, .bs-spoor__stap.is-komend span { color: var(--ink3); } .bs-spoor__stap b { display: block; font-weight: 700; } .bs-spoor__stap span { display: block; font-size: .68rem; color: var(--ink2); } .bs-spoor__stap .bs-spoor__poort { color: var(--let); font-weight: 600; } .bs-spoor__stap small { font: .68rem var(--font-mono); color: var(--ink3); white-space: nowrap; padding-top: 2px; } /* paneel en register: de werkbank-rij op --rij, met weggelaten nul-rijen */ .bs-paneel { background: var(--kaart); border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius); overflow: hidden; flex: none; } .bs-paneel__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 8px var(--pad) 0; } .bs-paneel__kop .bs-kicker { font: .62rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; flex: none; } .bs-paneel__kop .bs-som { font: .62rem var(--font-mono); color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 60%; } .bs-paneel__lijf { padding: 6px var(--pad) 10px; } .bs-reg { display: flex; flex-direction: column; padding-top: 4px; } .bs-reg__rij { display: grid; grid-template-columns: 5px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; min-height: var(--rij); padding-right: var(--pad); border-bottom: var(--lijndikte) solid var(--lijn); font-size: .8rem; color: inherit; text-decoration: none; background: none; border-left: 0; border-top: 0; border-right: 0; text-align: left; font-family: var(--font-ui); cursor: pointer; width: 100%; } .bs-reg__rij:last-of-type { border-bottom: 0; } .bs-reg__rij:hover { background: var(--accent-t2); } .bs-reg__rij:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; } .bs-reg__streep { align-self: stretch; } .bs-reg__streep.is-let { background: var(--let); } .bs-reg__streep.is-stop { background: var(--stop); } .bs-reg__streep.is-goed { background: var(--goed); } .bs-reg__wat { min-width: 0; display: flex; flex-direction: column; } .bs-reg__wat b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; } .bs-reg__wat span { font-size: .68rem; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bs-reg__n { font: .72rem var(--font-mono); color: var(--ink2); white-space: nowrap; } .bs-reg__geld { font: 700 .8rem var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; } .bs-reg__geld.is-let { color: var(--let); } .bs-reg__pijl { color: var(--ink3); } .bs-weggelaten { padding: 6px var(--pad) 8px; font-size: .68rem; color: var(--ink3); } .bs-weggelaten button, .bs-toonknop { border: 0; background: none; font: inherit; font-size: .68rem; color: var(--ink2); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; padding: 0; } /* toonvak: wat verborgen is (nul, leeg, gevouwen) komt terug met «toon» */ [data-bs-toonvak]:not(.is-toon) .is-verborgen { display: none !important; } [data-bs-toonvak].is-toon [data-bs-toon] { display: none; } /* velden: label/waarde-rooster met lege velden ingeklapt */ .bs-velden { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 4px 10px; margin: 0; padding: 6px var(--pad) 10px; font-size: .8rem; align-items: baseline; } .bs-velden dt { color: var(--ink2); font-weight: 600; } .bs-velden dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } .bs-velden .bs-weggelaten { grid-column: 1 / -1; padding: 0; } /* kpi-strook: vier cijfers op leesmaat */ .bs-strook { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 8px; padding: 6px var(--pad) 10px; } .bs-strook__kpi { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .bs-strook__kpi .l { font-size: .62rem; color: var(--ink3); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; } .bs-strook__kpi .w { font-family: var(--font-mono); font-weight: 700; font-size: var(--kpi); letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; } .bs-strook__kpi .w.is-let { color: var(--let); } .bs-strook__kpi .s { font-size: .62rem; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* keuzegroep: één aaneengesloten groep, 28 px, actief in inkt, teller in mono, nul gedempt */ .bs-kg { display: inline-flex; align-items: stretch; height: 28px; border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein); background: var(--kaart); overflow: hidden; vertical-align: middle; max-width: 100%; } .bs-kg button { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 0; border-right: var(--lijndikte) solid var(--lijn); background: none; font: 700 .72rem var(--font-ui); color: var(--ink2); white-space: nowrap; cursor: pointer; border-radius: 0; } .bs-kg button:last-child { border-right: 0; } .bs-kg button:hover { background: var(--accent-t2); } .bs-kg button[aria-pressed="true"] { background: var(--accent); color: var(--knop-ink); } .bs-kg button:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; } .bs-kg__tel { font-family: var(--font-mono); font-weight: 700; font-size: .62rem; opacity: .85; } .bs-kg button.is-nul { color: var(--ink3); font-weight: 600; } .bs-kg--klein { height: 24px; } .bs-kg--klein button { padding: 0 8px; font-size: .66rem; } /* ═══ OPSLAAN-NORM (besluit 339) · de wijzigingsbalk (patroon A) en het stempel (patroon B) ═══ */ .bs-wijzigingsbalk { position: sticky; bottom: 0; z-index: 4; margin-top: 10px; background: var(--knop); color: var(--knop-ink); border-radius: var(--radius-klein); padding: 9px 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-weight: 700; font-size: .8rem; border-top: var(--lijndikte) solid var(--knop-d); } .bs-wijzigingsbalk[hidden] { display: none; } .bs-wijzigingsbalk .bs-wb__uitleg { opacity: .75; font-weight: 500; } .bs-wijzigingsbalk .bs-wb__rek { flex: 1; } .bs-wijzigingsbalk .knop { border-color: color-mix(in srgb, var(--knop-ink) 45%, transparent); background: transparent; color: inherit; } .bs-wijzigingsbalk .knop:hover { background: color-mix(in srgb, var(--knop-ink) 12%, transparent); } .bs-wijzigingsbalk .knop.wit { background: var(--kaart); color: var(--ink); border-color: var(--kaart); } .bs-wijzigingsbalk .knop.wit:hover { background: var(--grijs); } .is-gewijzigd, input.is-gewijzigd, select.is-gewijzigd, textarea.is-gewijzigd { border-color: var(--let) !important; border-left-width: 3px !important; } .bs-stempel { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--ink3); white-space: nowrap; } .bs-stempel b { color: var(--goed); font-weight: 700; } .bs-stempel.is-bezig b { color: var(--let); } .bs-stempel.is-fout b { color: var(--stop); } .bs-stempel button { border: 0; background: none; padding: 0; font: 600 .72rem var(--font-ui); color: var(--ink2); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .bs-stempel button:disabled { opacity: .4; text-decoration: none; cursor: default; } /* DOORLOOP B21/B36 · de lijst vóór een bulkhandeling op toegang: wie krijgt een uitnodiging, welk account gaat dicht */ .bs-voorlijst { display: block; margin: 0 0 10px; } .bs-voorlijst strong { display: block; margin: 8px 0 2px; color: var(--c-ink); font-size: .86rem; } .bs-voorlijst ul { margin: 0; padding: 6px 10px 6px 26px; max-height: 180px; overflow: auto; border: 1px solid var(--c-lijn); border-radius: var(--radius-klein); font-size: .84rem; color: var(--c-ink); } .bs-voorlijst li { margin: 1px 0; } .bs-voorlijst small { color: var(--c-ink-2); } /* blok I · de regel onder de tegels die zegt welke tellers op nul zijn weggelaten */ .bs-stats-rest { margin: 6px 2px 0; font: 400 .74rem var(--font-ui); color: var(--c-ink-3); } /* ===================================================================== INVOERVENSTER (13-10-2026, docs/INVOERVENSTER-BOUWSPEC.md) — van formulier naar werkvenster. Eén schil in drie maten: klein (bevestigen), middel (korte invoer) en groot (links het formulier, rechts wat er ontstaat). Dezelfde kop, dezelfde voet met links de stand en rechts de knoppen, fouten bij het veld. Vorm en maten komen uit docs/prototypes/wireframe-invoervenster-v1.html. ===================================================================== */ /* elk venster van de bouwsteen: dezelfde sluier, hoek en diepte */ .bs-modal-laag { background: var(--sluier); } .bs-modal { border-radius: 14px; box-shadow: var(--schaduw-laag); } .bs-modal > .bs-form-kop { padding: 18px 22px 14px; border-bottom: var(--lijndikte) solid var(--lijn); } .bs-modal > .bs-form-voet { background: var(--grijs); } .bs-modal.bs-venster--klein { max-width: 460px; } /* het kleine venster heeft één veld met zijn eigen teller: de stand in de voet zou hetzelfde twee keer zeggen */ .bs-venster--klein .bs-form__teller { display: none; } .bs-modal-laag.bs-venster-laag { padding: 20px; } .bs-modal.bs-venster { max-width: 620px; max-height: calc(100dvh - 40px); overflow: hidden; border: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; font-size: 14px; animation: bs-venster-in 170ms ease; } .bs-modal.bs-venster--groot { max-width: 1040px; } .bs-modal.bs-venster--enkel, .bs-modal.bs-venster--breed { max-width: 760px; } .bs-modal.bs-venster.bs-venster--klein { max-width: 460px; } .bs-modal.bs-venster--smalmiddel { max-width: 620px; } .bs-modal.bs-venster--zonderkop { grid-template-rows: minmax(0, 1fr) auto; } @keyframes bs-venster-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* kop */ .bs-venster > .bs-form-kop { margin: 0; gap: 14px; } .bs-venster > .bs-form-kop h2 { margin: 2px 0 0; font-size: 17px; font-weight: 800; text-wrap: balance; } .bs-venster > .bs-form-kop p { margin: 3px 0 0; font: 500 13px/1.5 var(--font-ui); color: var(--ink2); max-width: 60ch; } .bs-venster .bs-modal__x { width: 34px; height: 34px; flex: none; border-radius: var(--radius-klein); font-size: 16px; color: var(--ink2); } .bs-venster .bs-modal__x:hover { background: var(--grijs); color: var(--ink); } /* het midden: het formulier schuift, het gevolg blijft in beeld (elke kolom heeft zijn eigen schuifruimte) */ .bs-venster__midden { min-height: 0; overflow: auto; } .bs-venster__midden--twee { overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: minmax(0, 1fr); } .bs-venster__midden--twee > .bs-venster__links, .bs-venster__midden--twee > .bs-venster__gevolg { overflow: auto; min-height: 0; } .bs-venster__links { padding: 6px 22px 20px; min-width: 0; } /* een venster dat een module zelf tekent: de velden staan los in het raster; BS.formulier werkt met blokken */ .bs-venster__links > .bs-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; padding: 14px 0 0; } .bs-venster__links > .bs-form.bs-form--blokken { display: block; padding: 0; } .bs-venster--klein .bs-venster__links { padding-bottom: 16px; } .bs-venster .bs-form__sectie { margin: 0; padding: 16px 0; border-bottom: var(--lijndikte) solid var(--grijs2); } .bs-venster .bs-form__sectie + .bs-form__sectie { margin-top: 0; padding-top: 16px; border-top: 0; } .bs-venster .bs-form__sectie:last-child { border-bottom: 0; } .bs-venster .bs-form__sectiekop { margin-bottom: 12px; } .bs-venster .bs-form__sectiekop .kicker { font: 800 13px/1.4 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--ink); } .bs-venster .bs-form__sectiekop em { font-size: 12.5px; } .bs-venster .bs-form__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; } .bs-venster__reden { display: block; padding: 0 0 4px; } .bs-venster__reden[hidden] { display: none; } /* velden op de maat van het venster */ .bs-venster .bs-veld { gap: 5px; position: relative; } .bs-venster .bs-veld > span, .bs-venster .bs-veld__kop, .bs-venster--klein .bs-veld > span { display: flex; gap: 6px; align-items: baseline; margin: 0; font: 700 12.5px/1.4 var(--font-ui); color: var(--ink2); } .bs-venster .bs-veld > span b, .bs-venster .bs-veld__kop b { color: var(--stop); } /* :where houdt de regel licht: de kiezer (ruimte voor het zoekteken) en het bedragveld (ruimte voor €) winnen er zo van */ .bs-venster .bs-veld :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea), .bs-venster--klein .bs-veld :where(input:not([type="checkbox"]):not([type="radio"]), textarea) { padding: 8px 10px; border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein); font: 500 14px/1.4 var(--font-ui); } .bs-venster .bs-veld :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):hover { border-color: var(--ink3); } .bs-venster .bs-veld em { font-size: 12.5px; } .bs-venster .bs-veld .bs-veld-fout, .bs-venster .bs-veld__fout, .bs-venster--klein .bs-veld .bs-veld-fout { font-size: 12.5px; font-weight: 600; color: var(--stop-d); } .bs-venster .bs-veld.is-fout input:not([type="checkbox"]):not([type="radio"]), .bs-venster .bs-veld.is-fout textarea, .bs-venster .bs-veld.is-fout select { border-color: var(--stop); } .bs-venster .bs-veld--bedrag input { padding-left: 26px; font-family: var(--font-mono); } .bs-venster .bs-veld__pre { top: 30px; left: 10px; font-size: 13px; } .bs-venster .bs-veld--toon strong { font: 700 14px/1.4 var(--font-ui); } .bs-venster .bs-kz-zoek input[data-kz-zoek] { padding-left: 30px; } .bs-venster .bs-kz-item { font-size: 13.5px; padding: 8px 10px; } .bs-venster .bs-kz-item__t small { font-size: 12px; } .bs-venster .bs-kz-leeg { font-size: 12.5px; } .bs-venster .bs-kz-res { border-radius: var(--radius-klein); box-shadow: var(--schaduw-zwevend); } .bs-venster .bs-kz-chip { display: flex; border-color: var(--lijn2); background: var(--kaart); border-radius: var(--radius-klein); padding: 6px 8px 6px 10px; } .bs-venster .bs-kz-chip__t { font-size: 14px; color: var(--ink); } .bs-venster .bs-kz-chip__t small { font-size: 12px; } .bs-venster .bs-kz-chip__x { margin-left: auto; font-size: 13px; } .bs-kz-item--nieuw { font-weight: 700; } /* de teller bij een reden */ .bs-veld__tel { float: right; margin-left: auto; font: 600 11px/1.6 var(--font-mono); font-style: normal; color: var(--ink3); } /* een smal venster met de stand in de voet: de stand op zijn eigen regel, de knoppen naast elkaar eronder */ .bs-modal--smal > .bs-form-voet--teller .bs-form__teller { flex: 1 1 100%; } /* een korte keuzelijst als tikknoppen: de lijst zelf blijft bestaan (de module leest hem), onzichtbaar */ .bs-veld select.bs-tik-bron { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; } .bs-veld--tiklijst { position: relative; } .bs-veld--tiklijst.is-fout .bs-tik button { border-color: var(--stop); } /* tikkeuze: een rij knoppen voor twee tot zes mogelijkheden */ .bs-tik { display: flex; flex-wrap: wrap; gap: 6px; } .bs-tik button { border: var(--lijndikte) solid var(--lijn2); background: var(--kaart); border-radius: var(--radius-klein); padding: 6px 11px; font: 700 13.5px/1.4 var(--font-ui); color: var(--ink); cursor: pointer; transition: background 160ms ease, border-color 160ms ease; } .bs-tik button:hover { background: var(--grijs); } .bs-tik button[aria-pressed="true"] { background: var(--accent-t); border-color: var(--knop); } .bs-veld--tik.is-fout .bs-tik button { border-color: var(--stop); } /* schakelaar: aan of uit, met een regel uitleg */ .bs-veld--schakel { flex-direction: row; align-items: flex-start; gap: 10px; cursor: pointer; padding: 2px 0; } .bs-veld--schakel input { appearance: none; -webkit-appearance: none; width: 38px; height: 22px; flex: none; margin: 0; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--lijn2); position: relative; cursor: pointer; transition: background 160ms ease; } .bs-veld--schakel input::after { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: var(--radius-pill); background: var(--kaart); transition: transform 160ms ease; } .bs-veld--schakel input:checked { background: var(--knop); } .bs-veld--schakel input:checked::after { transform: translateX(16px); } .bs-venster .bs-veld--schakel > span, .bs-veld--schakel > span { display: grid; gap: 1px; } .bs-veld--schakel strong { font: 700 14px/1.4 var(--font-ui); color: var(--ink); } /* bestanden: sleepvlak, kiezer en de lijst van wat erbij zit */ .bs-sleep { display: grid; gap: 4px; justify-items: start; padding: 16px; border: 1.5px dashed var(--lijn2); border-radius: var(--radius); background: var(--grijs); transition: background 160ms ease, border-color 160ms ease; } .bs-sleep.is-over { border-color: var(--knop); background: var(--accent-t); } .bs-sleep b { font: 700 14px/1.4 var(--font-ui); color: var(--ink); } .bs-sleep span { font: 500 12.5px/1.4 var(--font-ui); color: var(--ink2); } .bs-sleep .btn { margin-top: 4px; } .bs-bestanden { display: grid; gap: 6px; } .bs-bestanden:empty { display: none; } .bs-bestand { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius-klein); background: var(--kaart); } .bs-bestand b { font: 700 13.5px/1.4 var(--font-ui); min-width: 0; overflow-wrap: anywhere; } .bs-bestand small { margin-left: auto; font: 500 12px/1 var(--font-mono); color: var(--ink2); white-space: nowrap; } .bs-bestand__x, .bs-regel__x { flex: none; width: 28px; height: 28px; border: 0; background: transparent; border-radius: 6px; cursor: pointer; color: var(--ink2); font-size: 13px; } .bs-bestand__x:hover, .bs-regel__x:hover { background: var(--grijs); color: var(--ink); } /* regels: een korte lijst die je aanvult, met voorstellen */ .bs-regels { display: grid; gap: 8px; } .bs-regel { display: flex; gap: 8px; align-items: center; } .bs-regel > input, .bs-regel > select { flex: 1 1 0; min-width: 0; } .bs-regel > :first-child { flex: 1.6 1 0; } /* vier kolommen of meer: de tekst krijgt een eigen regel, de rest staat eronder */ .bs-regel--breed { flex-wrap: wrap; padding: 8px; border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius-klein); background: var(--grijs); } .bs-regel--breed > :first-child { flex: 1 1 100%; } .bs-regel-leeg { margin: 0; font: 500 12.5px/1.5 var(--font-ui); color: var(--ink2); } .bs-regel-tips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .bs-regel-tips button { border: var(--lijndikte) dashed var(--lijn2); background: transparent; border-radius: var(--radius-klein); padding: 4px 9px; font: 700 12.5px/1.4 var(--font-ui); color: var(--ink2); cursor: pointer; } .bs-regel-tips button:hover { background: var(--grijs); color: var(--ink); } @media (max-width: 560px) { .bs-regel { flex-wrap: wrap; } .bs-regel > :first-child { flex-basis: 100%; } } /* snel starten */ .bs-venster__start { padding: 16px 0; border-bottom: var(--lijndikte) solid var(--grijs2); display: grid; gap: 12px; } .bs-venster__start .bs-form__sectiekop { margin: 0; } .bs-start { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; } .bs-start button { text-align: left; display: grid; gap: 1px; border: var(--lijndikte) solid var(--lijn2); background: var(--kaart); border-radius: var(--radius-klein); padding: 9px 11px; cursor: pointer; font-family: var(--font-ui); color: var(--ink); transition: background 160ms ease, border-color 160ms ease; } .bs-start button:hover { background: var(--grijs); } .bs-start button[aria-pressed="true"] { background: var(--accent-t); border-color: var(--knop); } .bs-start b { font-weight: 800; font-size: 14px; } .bs-start span { font-size: 12px; color: var(--ink2); } /* het gevolg: wat er ontstaat als je nu vastlegt */ .bs-venster__gevolg { background: var(--grijs); border-left: var(--lijndikte) solid var(--lijn); padding: 18px; display: grid; gap: 14px; align-content: start; min-width: 0; } .bs-gv-blok { background: var(--kaart); border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius); padding: 14px; display: grid; gap: 8px; } .bs-gv-blok h3 { margin: 0; font: 800 13px/1.4 var(--font-ui); } .bs-gv-blok--let { border-color: var(--let); } .bs-gv-kicker { font-size: 12px; color: var(--ink2); } .bs-gv-naam { font: 800 15px/1.35 var(--font-ui); text-wrap: balance; overflow-wrap: anywhere; } .bs-gv-paar { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; } .bs-gv-paar span { color: var(--ink2); } .bs-gv-paar b { font-weight: 700; text-align: right; overflow-wrap: anywhere; } .bs-gv-naam.is-leeg, .bs-gv-paar b.is-leeg { color: var(--ink3); } .bs-gv-leeg, .bs-gv-tekst { margin: 0; font: 500 12.5px/1.5 var(--font-ui); color: var(--ink2); } /* een document zoals het eruit komt (contract, brief): letterlijk, met zijn regeleinden, en schuifbaar */ .bs-gv-voorbeeld { margin: 0; max-height: 340px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 500 12px/1.55 var(--font-ui); color: var(--ink); background: var(--grijs); border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius-klein); padding: 10px 12px; } .bs-gv-lijn { position: relative; height: 38px; margin: 6px 6px 22px; } .bs-gv-lijn__baan { position: absolute; left: 0; right: 0; top: 16px; height: 6px; border-radius: var(--radius-pill); background: var(--grijs2); } .bs-gv-lijn__vul { position: absolute; top: 16px; height: 6px; border-radius: var(--radius-pill); background: var(--knop); } .bs-gv-lijn__vrij { position: absolute; top: 16px; height: 6px; border-radius: 0 var(--radius-pill) var(--radius-pill) 0; background: var(--let); } .bs-gv-lijn__punt { position: absolute; top: 11px; width: 16px; height: 16px; box-sizing: border-box; border-radius: var(--radius-pill); background: var(--kaart); border: 3px solid var(--knop); transform: translateX(-50%); } .bs-gv-lijn__punt--let { border-color: var(--let); } .bs-gv-lijn__lab { position: absolute; top: 34px; font: 600 10.5px/1.25 var(--font-mono); color: var(--ink2); white-space: nowrap; } .bs-gv-lijn__lab--midden { transform: translateX(-50%); text-align: center; } .bs-gv-lijn__lab--eind { transform: translateX(-100%); text-align: right; } .bs-gv-wijzig { display: grid; gap: 2px; font-size: 13px; } .bs-gv-wijzig > span { color: var(--ink2); } .bs-gv-wijzig > div { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; } .bs-gv-wijzig s { color: var(--ink3); } .bs-gv-wijzig b { font-weight: 700; overflow-wrap: anywhere; } .bs-gv-dubbel { display: flex; gap: 8px; align-items: center; justify-content: space-between; font-size: 13px; } .bs-gv-dubbel > span { display: grid; min-width: 0; } .bs-gv-dubbel b { font-weight: 700; overflow-wrap: anywhere; } .bs-gv-dubbel small { color: var(--ink2); font-size: 12px; } .bs-gv-nodig { display: grid; gap: 4px; } .bs-gv-nodig button { display: flex; gap: 8px; align-items: center; border: 0; background: transparent; padding: 3px 0; cursor: pointer; text-align: left; font: 500 13px/1.4 var(--font-ui); color: var(--ink); } .bs-gv-nodig button i { width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--lijn2); display: grid; place-items: center; font-style: normal; font-size: 10px; flex: none; } .bs-gv-nodig button.is-ok { color: var(--ink2); } .bs-gv-nodig button.is-ok i { background: var(--goed); border-color: var(--goed); color: var(--knop-ink); } .bs-gv-melding { border-radius: var(--radius-klein); padding: 9px 11px; font: 600 13px/1.45 var(--font-ui); } .bs-gv-melding--let { background: var(--let-t); color: var(--let-d); } .bs-gv-melding--stop { background: var(--stop-t); color: var(--stop-d); } .bs-gv-melding--goed { background: var(--goed-t); color: var(--goed-d); } /* het bevestigvenster: wat de stap raakt */ .bs-raakt { grid-column: 1 / -1; display: grid; gap: 6px; padding: 12px 14px; border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius); background: var(--grijs); } /* voet: links de stand, rechts de knoppen */ .bs-venster > .bs-form-voet, .bs-venster > .bs-modal__voet { margin: 0; padding: 12px 22px; gap: 10px; border-top: var(--lijndikte) solid var(--lijn); justify-content: space-between; } .bs-venster > .bs-modal__voet { display: flex; align-items: center; flex-wrap: wrap; background: var(--grijs); } .bs-venster > .bs-form-voet--teller { justify-content: flex-end; } .bs-venster > .bs-form-voet > .bs-form__knoppen { margin: 0 0 0 auto; font-size: inherit; color: inherit; } .bs-form-voet > [hidden], .bs-modal__voet > [hidden] { display: none; } /* de vraag «Weggooien?» neemt de voet over */ .bs-venster .btn--klein { border-radius: var(--radius-klein); } .bs-stand { display: inline-flex; gap: 8px; align-items: center; margin-right: auto; padding: 4px 0; border: 0; background: transparent; cursor: pointer; text-align: left; font: 700 13px/1.4 var(--font-ui); color: var(--ink); } .bs-stand:disabled { cursor: default; color: var(--ink); opacity: 1; } .bs-stand i { width: 9px; height: 9px; flex: none; border-radius: var(--radius-pill); background: var(--let); } .bs-stand.is-klaar { color: var(--ink); } .bs-stand.is-klaar i { background: var(--goed); } .bs-stand.is-stop { color: var(--stop-d); } .bs-stand.is-stop i, .bs-stand.is-tik i { background: var(--stop); } .bs-stand.is-tik { color: var(--stop-d); } .bs-stand.is-leeg { visibility: hidden; } .bs-toets { margin-left: 4px; padding: 3px 5px; border: var(--lijndikte) solid currentColor; border-bottom-width: 2px; border-radius: 5px; font: 600 11px/1 var(--font-mono); opacity: .8; } .bs-venster__weg { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; width: 100%; } .bs-venster__weg b { margin-right: auto; font: 700 13.5px/1.4 var(--font-ui); } .bs-venster__noot { font: 500 12.5px/1.5 var(--font-ui); color: var(--ink2); max-width: 46ch; } /* klaar: het venster zegt wat er gebeurd is en wat je nu kunt doen */ .bs-klaar { padding: 28px 22px; display: grid; gap: 16px; justify-items: start; } .bs-klaar__vink { width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--goed-t); color: var(--goed-d); display: grid; place-items: center; font-size: 22px; font-weight: 800; } .bs-klaar__titel { margin: 0; font: 800 17px/1.35 var(--font-ui); text-wrap: balance; } .bs-klaar__sub { margin: 2px 0 0; font: 500 13.5px/1.5 var(--font-ui); color: var(--ink2); } .bs-klaar__regels { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; } .bs-klaar__regels li { display: flex; gap: 9px; align-items: baseline; } .bs-klaar__regels li > span { flex: 1 1 auto; min-width: 0; } .bs-klaar__regels li > .btn { flex: none; } .bs-klaar__regels li::before { content: "✓"; color: var(--goed); font-weight: 800; } .bs-klaar__regels li.is-mislukt { color: var(--stop-d); } .bs-klaar__regels li.is-mislukt::before { content: "✕"; color: var(--stop); } .bs-vervolg { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; width: 100%; } .bs-vervolg button { text-align: left; display: grid; gap: 1px; border: var(--lijndikte) solid var(--lijn2); background: var(--kaart); border-radius: var(--radius-klein); padding: 11px 12px; cursor: pointer; font-family: var(--font-ui); color: var(--ink); transition: background 160ms ease; } .bs-vervolg button:hover { background: var(--grijs); } .bs-vervolg b { font-weight: 800; font-size: 14px; } .bs-vervolg span { font-size: 12.5px; color: var(--ink2); } /* een knop die een recht vraagt dat je niet hebt: zichtbaar, uitgeschakeld, met de reden in de titel */ .is-geenrecht { opacity: .5; cursor: not-allowed; } /* smal scherm: het gevolg onder het formulier, het venster als blad van onderen */ @media (max-width: 900px) { .bs-modal-laag.bs-venster-laag { padding: 0; place-items: end center; } .bs-modal.bs-venster { max-width: none; border-radius: 14px 14px 0 0; max-height: calc(100dvh - 24px); } .bs-venster__midden--twee { overflow: auto; display: block; } .bs-venster__midden--twee > .bs-venster__links, .bs-venster__midden--twee > .bs-venster__gevolg { overflow: visible; } .bs-venster__gevolg { border-left: 0; border-top: var(--lijndikte) solid var(--lijn); } .bs-venster .bs-form__raster { grid-template-columns: minmax(0, 1fr); } .bs-toets { display: none; } /* op een telefoon is er geen toetsenbord om de sneltoets op te drukken */ } @media (prefers-reduced-motion: reduce) { .bs-modal.bs-venster { animation: none; } .bs-tik button, .bs-start button, .bs-vervolg button, .bs-sleep, .bs-veld--schakel input, .bs-veld--schakel input::after { transition: none; } } /* «Nieuw» voor het hele systeem: zoekveld en de lijst van wat je kunt vastleggen, per ketenstap */ .bs-nieuw { padding: 14px 22px 18px; display: grid; gap: 12px; } .bs-nieuw__lijst { display: grid; gap: 2px; max-height: min(52vh, 420px); overflow: auto; } .bs-nieuw__groep { padding: 10px 2px 4px; } .bs-nieuw__groep:first-child { padding-top: 0; } .bs-nieuw__rij { display: grid; gap: 1px; text-align: left; padding: 8px 10px; border: var(--lijndikte) solid transparent; border-radius: var(--radius-klein); background: transparent; cursor: pointer; font-family: var(--font-ui); color: var(--ink); } .bs-nieuw__rij:hover, .bs-nieuw__rij.is-actief { background: var(--grijs); border-color: var(--lijn); } .bs-nieuw__rij b { font-weight: 700; font-size: 14px; } .bs-nieuw__rij span { font-size: 12.5px; color: var(--ink2); } .bs-nieuw__leeg { margin: 0; font: 500 13px/1.5 var(--font-ui); color: var(--ink2); } /* ── casa360-diepte.css ── */ /* ===================================================================== casa360-diepte.css — vaste diepte-laag (goedgekeurde uitzondering 14-07-2026, aangescherpt in handoff 2.0). Basis blijft 1px-lijnen en paneel-tinten; dáárbovenop: subtiele schaduw op tegels/kaarten en knoppen, gradient uitsluitend op primaire knoppen. Uitsluitend via de diepte-tokens in casa360-tokens.css — nooit losse literals. ===================================================================== */ /* kaarten en KPI-tegels: subtiele schaduw bovenop de 1px-rand */ .kaart { box-shadow: var(--schaduw-tegel); } .bs-stat { box-shadow: var(--schaduw-tegel); transition: transform var(--overgang), box-shadow var(--overgang); } button.bs-stat:hover { transform: translateY(-2px); box-shadow: var(--schaduw-tegel-hover); } @media (prefers-reduced-motion: reduce) { button.bs-stat:hover { transform: none; } } /* primaire knoppen: gradient + zachte gloed (enige gradient-plek) */ .btn--primary { background: var(--gradient-primair); box-shadow: var(--schaduw-knop); } .btn--primary:hover { background: var(--gradient-primair-hover); } /* klantpagina: zelfde regels */ .kl-knop--primair { background: var(--gradient-primair); box-shadow: var(--schaduw-knop); } .kl-knop--primair:hover { background: var(--gradient-primair-hover); } /* ── artikelen.css ── */ /* ===================================================================== artikelen.css — Module 2.4b · Artikelbeheer. Registerlijst met soort-chips en beheerdossier (vijf tabs) in de drawer. Bouwt op tokens + bouwstenen.css. ===================================================================== */ /* Module-wortel: zelfde pagina-marge als de overige modules (fix 14-07-2026) */ .art { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; } .art-lijst { padding: 0 0 6px; overflow: hidden; margin-bottom: 14px; } .art-lijst__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; flex-wrap: wrap; } .art-lijst__kop strong { font-size: .95rem; } .art-lijst__sub { font-size: .74rem; color: var(--c-ink-3); margin-top: 2px; } .art-lijst__acties { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .art-zoek { max-width: 250px; } .art-rij { display: grid; grid-template-columns: 1.6fr .7fr .9fr 1fr 1fr .8fr .5fr; gap: 10px; align-items: center; padding: 11px 18px; border-top: var(--lijndikte) solid var(--c-lijn); cursor: pointer; transition: background var(--overgang); } .art-rij:hover { background: var(--c-creme); } .art-rij--kop { padding: 6px 18px 8px; border-top: 0; cursor: default; font-size: .56rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); } .art-rij--kop:hover { background: transparent; } .art-rij__naam { display: block; border: 0; background: transparent; padding: 0; cursor: pointer; text-align: left; font-family: var(--font-ui); font-weight: 700; font-size: .8rem; color: var(--c-ink); } .art-rij__cat { font-size: .74rem; color: var(--c-ink-2); } .art-rij__sub { font-size: .66rem; color: var(--c-ink-3); font-weight: 400; } .art-rij__extra { font-size: .72rem; color: var(--c-ink-2); } .art-rij__code { font-size: .68rem; color: var(--c-groen-d); } .art-rij__versie { font-size: .7rem; font-weight: 700; color: var(--c-groen-d); } .art-rij .chip { justify-self: start; } /* drawer / beheerdossier */ .art-tabinhoud { padding-top: 13px; } .art-kop { display: block; margin: 14px 0 6px; } .art-kop:first-child { margin-top: 0; } .art-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 2px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; } .art-kv > span:first-child { color: var(--c-ink-2); } .art-kv > span:last-child { text-align: right; } .art-link { border: 0; background: transparent; padding: 0; cursor: pointer; font-family: var(--font-ui); font-size: .78rem; font-weight: 700; color: var(--c-groen-d); text-decoration: none; } .art-link:hover { text-decoration: underline; } .art-uitleg { font-size: .74rem; line-height: 1.55; color: var(--c-ink-2); margin: 0 0 10px; } .art-voetnoot { font-size: .7rem; color: var(--c-ink-3); } .art-bewerk { margin-top: 14px; width: 100%; } .art-velden { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .art-veld { display: flex; flex-direction: column; gap: 4px; } .art-veld--breed { grid-column: 1 / -1; } .art-input { width: 100%; padding: 9px 12px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 10px; font-family: var(--font-ui); font-size: .8rem; color: var(--c-ink); background: var(--kaart); box-sizing: border-box; } .art-bewerk__voet { display: flex; gap: 8px; margin-top: 14px; } .art-status { text-transform: capitalize; } /* Prijsimport (E5a): diff-preview vóór doorvoeren */ .art-diffrij { display: grid; grid-template-columns: 1.3fr 1.2fr 1.2fr; gap: 12px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--c-lijn); font-size: 13px; } .art-diffrij--kop { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-2); border-bottom-width: 2px; } .art-delta--op { color: var(--c-terra); font-weight: 700; } .art-delta--af { color: var(--c-groen-d); font-weight: 700; } /* VRD-D (02-09) · de dubbeltelling tussen catalogus en magazijn. Staat bovenaan omdat een van de twee getallen niet waar is en niemand weet welke; --let, want het is «let op» en geen blokkade. */ .art-dubbel { display: flex; flex-direction: column; gap: 4px; border: var(--lijndikte) solid var(--let); border-left-width: 4px; border-radius: var(--radius); padding: 12px 16px; margin-bottom: 18px; background: var(--kaart); } .art-dubbel b { font-size: .84rem; color: var(--ink); } .art-dubbel__rij { font-size: .74rem; color: var(--ink2); } .art-dubbel__rij i { font-style: normal; color: var(--ink3); } .art-dubbel__uitleg { font-size: .76rem; color: var(--ink2); max-width: 82ch; margin-top: 4px; } /* ── offertes.css ── */ /* ===================================================================== offertes.css — Commercie › Offertes. Alleen module-eigen stijlen; gedeelde patronen (lijst, poort, audit, woning, modaal, knoppen) staan in bouwstenen.css (fase 0). Geen blauw, schaduw of gradient. ===================================================================== */ .off { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; } .off-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .off-kop h1 { margin: 4px 0 0; font-size: 1.55rem; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; } .off-versie { font-size: .8rem; color: var(--c-ink-3); font-weight: 700; } .off-terug { background: transparent; border: 0; cursor: pointer; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em; color: var(--c-ink-3); text-transform: uppercase; padding: 0 0 6px; } .off-terug:hover { color: var(--c-ink); } /* Lijstkaart: kolommen van het offertes-overzicht (prototype-grid) */ .off-lijstkaart { padding: 0; overflow: hidden; --bs-kolommen: 132px 92px 1.1fr 1.2fr 1.2fr .8fr .7fr .9fr; } .off-sub { margin: 4px 0 0; font-size: .78rem; color: var(--ink2); max-width: 70ch; line-height: 1.5; } .off-standen { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 6px 20px 2px; } .off-standen .bs-telling { margin: 0; } .off-b27rij .btn + .btn { margin-left: 6px; } /* ---------- Editor-grid ---------- */ .off-grid { display: grid; grid-template-columns: 1fr 360px; gap: 22px; align-items: start; } @media (max-width: 900px) { .off-grid { grid-template-columns: 1fr; } } .off-config { display: flex; flex-direction: column; gap: 20px; } .off-sectie__kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .off-grens { color: var(--c-ink-3); font-size: .68rem; } .off-toeslag { color: var(--c-amber); font-size: .74rem; font-weight: 700; } /* Maatregel-regels */ .off-regels { display: flex; flex-direction: column; gap: 10px; } .off-regel { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 14px 16px; transition: border-color var(--overgang); } .off-regel:hover { border-color: var(--c-lijn-2); } .off-regel__hoofd { display: flex; align-items: flex-start; justify-content: space-between; } .off-regel__naam { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .off-regel__titel { font-weight: 800; font-size: .92rem; } .off-regel__meld { font-size: .62rem; color: var(--c-ink-3); } .off-regel__weg { background: transparent; border: 0; cursor: pointer; color: var(--c-ink-3); font-size: .8rem; padding: 2px 6px; border-radius: 6px; } .off-regel__weg:hover { color: var(--c-rood); background: var(--c-rood-t); } .off-regel__body { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-top: 12px; flex-wrap: wrap; } .off-regel__meta { display: flex; align-items: flex-end; gap: 18px; margin-left: auto; } .off-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .off-btw { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .04em; color: var(--c-ink-2); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-pill); padding: 2px 8px; } .off-regel__prijs { text-align: right; display: flex; flex-direction: column; } .off-regel__excl { font-size: .62rem; color: var(--c-ink-3); } .off-regel__totaal { font-size: 1rem; font-weight: 800; } /* Velden */ .off-veld { display: flex; flex-direction: column; gap: 5px; } .off-veld--breed { width: 100%; } .off-veld__label { font-size: .68rem; color: var(--c-ink-2); font-weight: 600; } .off-veld__input { display: flex; align-items: center; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); overflow: hidden; } .off-veld__input:focus-within { border-color: var(--c-groen); } .off-veld__input input { border: 0; padding: 9px 10px; font-family: var(--font-mono); font-size: .9rem; width: 92px; background: transparent; color: var(--c-ink); } /* Focus-ring nooit uitzetten (CLAUDE.md) — de globale :focus-visible geldt. */ .off-veld__eenheid { font-family: var(--font-mono); font-size: .7rem; color: var(--c-ink-3); padding: 0 10px 0 4px; } .off-veld__eenheid--pre { padding: 0 4px 0 10px; } .off-reden { border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 9px 11px; font-family: var(--font-ui); font-size: .82rem; background: var(--kaart); color: var(--c-ink); width: 100%; } .off-reden:focus-visible { border-color: var(--c-groen); } .off-select { border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 9px 11px; font-family: var(--font-ui); font-size: .82rem; background: var(--kaart); color: var(--c-ink); width: 100%; } /* Catalogus-chips */ .off-catalogus { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .off-add { font-family: var(--font-ui); font-size: .78rem; font-weight: 700; color: var(--c-groen-d); background: var(--c-groen-t); border: var(--lijndikte) solid transparent; border-radius: var(--radius-klein); padding: 7px 14px; cursor: pointer; transition: background var(--overgang); } .off-add:hover { background: var(--kaart); border-color: var(--c-lijn-2); } .off-leeg { color: var(--c-ink-3); font-size: .82rem; } /* Korting-kaart */ .off-korting { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; } /* Fiat-acties (module-eigen aanvulling op bs-poort) */ .off-mini { margin-top: 8px; align-self: flex-start; font-size: .78rem; padding: 8px 14px; } .off-fiat-mgr { margin-top: 8px; padding: 10px 12px; border: 1px dashed var(--c-lijn-2); border-radius: var(--radius); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .off-fiat-mgr__label { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-3); } .off-fiat-mgr__acties { display: flex; gap: 8px; } .off-fiat-mgr__acties .btn { margin-top: 0; padding: 7px 14px; } .bs-poort--sam { margin-top: 12px; } /* ---------- Samenvatting (sticky) ---------- */ .off-samenvatting-wrap { position: sticky; top: 22px; } .off-samenvatting { position: relative; padding: 20px 20px 18px; overflow: hidden; } .off-sam__accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--c-groen); } .off-sam__kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .off-sam__geldig { font-size: .68rem; color: var(--c-amber); } .off-sam__eind { margin: 12px 0 4px; display: flex; flex-direction: column; gap: 2px; } .off-sam__eindlabel { font-size: .72rem; color: var(--c-ink-2); } .off-sam__eindwaarde { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; } /* ISDE-blok */ .off-subsidie { margin: 14px 0; padding: 13px 14px; border-radius: var(--radius); background: var(--c-groen-t); border: var(--lijndikte) solid transparent; } .off-subsidie--nul { background: var(--c-paneel); } .off-subsidie__kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .off-subsidie__label { font-size: .74rem; font-weight: 700; color: var(--c-groen-d); } .off-subsidie--nul .off-subsidie__label { color: var(--c-ink-2); } .off-subsidie__bedrag { font-size: 1.35rem; font-weight: 800; color: var(--c-groen-d); margin: 3px 0 4px; } .off-subsidie--nul .off-subsidie__bedrag { color: var(--c-ink-3); } .off-subsidie__uitleg { font-size: .72rem; line-height: 1.45; color: var(--c-ink-2); } /* Prijsopbouw */ .off-opbouw { border-top: var(--lijndikte) solid var(--c-lijn); padding-top: 12px; display: flex; flex-direction: column; gap: 7px; } .off-opbouwrij { display: flex; justify-content: space-between; font-size: .82rem; color: var(--c-ink); } .off-opbouwrij--korting { color: var(--c-terra-d); } .off-btwsplit { display: flex; flex-direction: column; gap: 5px; margin-top: 3px; padding-top: 8px; border-top: 1px dashed var(--c-lijn); } .off-btwrij { display: flex; justify-content: space-between; font-size: .74rem; color: var(--c-ink-2); } /* Marge (gevoelig) */ .off-marge { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius); background: var(--c-paneel); font-size: .82rem; } .off-marge__label { font-weight: 700; } .off-gevoelig { font-family: var(--font-mono); font-size: .54rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-amber); background: var(--c-amber-t); border-radius: var(--radius-pill); padding: 2px 7px; margin-left: 6px; } /* Acties */ .off-acties { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; } .off-versturen { width: 100%; } .off-acties__sub { display: flex; gap: 8px; } .off-acties__sub .btn { flex: 1; } .off-sam__bron { margin-top: 14px; font-size: .68rem; color: var(--c-ink-3); line-height: 1.4; } /* ===================================================================== Offerte-document (preview → PDF via browser-print) ===================================================================== */ .off-preview-laag { position: fixed; inset: 0; z-index: 70; background: var(--c-paneel-2); display: flex; flex-direction: column; overflow: auto; } .off-preview__bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; background: var(--c-creme); border-bottom: var(--lijndikte) solid var(--c-lijn); } .off-preview__titel { font-weight: 800; font-size: .9rem; } .off-preview__acties { display: flex; gap: 10px; } .off-preview__blad { padding: 28px 20px 60px; } .off-doc { max-width: 820px; margin: 0 auto; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 46px 52px; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .doc-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 18px; border-bottom: 2px solid var(--c-ink); } .doc-merk { font-weight: 800; font-size: 1.35rem; letter-spacing: -.01em; } .doc-meta { display: flex; gap: 26px; } .doc-meta > div { display: flex; flex-direction: column; gap: 2px; } .doc-nr { font-weight: 700; } .doc-meta .mono { font-size: .78rem; } .doc-partijen { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 22px 0; } .doc-partij__naam { font-weight: 800; font-size: 1rem; margin-top: 4px; } .doc-partij__regel { font-size: .82rem; color: var(--c-ink-2); line-height: 1.5; } .doc-intro { font-size: .86rem; line-height: 1.55; color: var(--c-ink); margin: 0 0 20px; } .doc-tabel { width: 100%; border-collapse: collapse; } .doc-tabel thead th { text-align: left; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3); padding: 8px 0; border-bottom: var(--lijndikte) solid var(--c-lijn-2); } .doc-tabel tbody td { padding: 12px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); vertical-align: top; } .doc-num { text-align: right; white-space: nowrap; } .doc-maat__naam { font-weight: 700; font-size: .9rem; } .doc-maat__meld { display: block; font-size: .62rem; color: var(--c-ink-3); margin-top: 2px; } .doc-tabel .doc-num.mono { font-size: .86rem; } .doc-onder { display: grid; grid-template-columns: 1fr 300px; gap: 34px; margin-top: 26px; } .doc-voorwaarden ul { margin: 8px 0 0; padding-left: 18px; } .doc-voorwaarden li { font-size: .78rem; line-height: 1.6; color: var(--c-ink-2); } .doc-tot__rij { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: .84rem; border-bottom: var(--lijndikte) solid var(--c-lijn); } .doc-tot__rij--korting { color: var(--c-terra-d); } .doc-tot__rij--eind { border-bottom: 0; margin-top: 4px; padding-top: 12px; border-top: 2px solid var(--c-ink); font-weight: 800; font-size: 1.05rem; } .doc-subsidie { margin-top: 16px; padding: 13px 14px; border-radius: var(--radius); background: var(--c-groen-t); } .doc-subsidie__kop { display: flex; align-items: center; justify-content: space-between; font-size: .74rem; font-weight: 700; color: var(--c-groen-d); } .doc-subsidie__bedrag { font-size: 1.2rem; font-weight: 800; color: var(--c-groen-d); margin: 3px 0 1px; } .doc-subsidie__uitleg { font-size: .7rem; color: var(--c-ink-2); } .doc-voet { display: flex; justify-content: space-between; gap: 16px; margin-top: 34px; padding-top: 14px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .68rem; color: var(--c-ink-3); } @media print { body.preview-open .app, #toast, .bs-modal-laag { display: none !important; } .off-preview-laag { position: static; overflow: visible; background: var(--kaart); } .off-preview__bar { display: none !important; } .off-preview__blad { padding: 0 !important; } .off-doc { border: 0; border-radius: 0; max-width: 100%; padding: 0; } @page { size: A4; margin: 16mm; } } /* Previewmail */ .off-mail { margin: 18px 20px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); overflow: hidden; } .off-mail__van, .off-mail__aan { padding: 10px 16px; font-size: .78rem; } .off-mail__van { background: var(--c-paneel); border-bottom: var(--lijndikte) solid var(--c-lijn); } .off-mail__aan { color: var(--c-ink-2); border-bottom: var(--lijndikte) solid var(--c-lijn); } .off-mail__body { padding: 18px 16px; font-size: .86rem; line-height: 1.5; } .off-mail__body p { margin: 0 0 12px; } .off-cta { margin: 4px 0 10px; } .off-mail__klein { font-size: .72rem; color: var(--c-ink-3); } /* Marge-stoplicht (B2a) */ .off-marge__stand { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; } .off-marge__stand em { font-style: normal; font-size: 11.5px; color: var(--c-ink-2); } .off-margelamp { font-size: 11px; margin-right: 4px; } .off-marge--groen .off-margelamp { color: var(--c-groen-d); } .off-marge--amber .off-margelamp { color: var(--c-amber); } .off-marge--terra .off-margelamp { color: var(--c-terra); } .off-marge--amber .off-marge__stand em { color: var(--c-amber); } .off-marge--terra .off-marge__stand em { color: var(--c-terra); font-weight: 600; } /* Versie-diff (B2b) */ .off-diff__kop { display: flex; align-items: center; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--c-lijn); margin-bottom: 12px; } .off-diff__kolom { display: flex; flex-direction: column; gap: 4px; } .off-diff__prijs { font-size: 17px; font-weight: 800; } .off-diff__pijl { color: var(--c-ink-2); font-size: 18px; } .off-diff__kiezer { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 10px; } .off-diff__kiezer select { border: 1px solid var(--c-lijn); border-radius: 12px; padding: 6px 10px; font: inherit; background: var(--c-paneel); color: var(--c-ink); } .off-diff__rijen { display: flex; flex-direction: column; } .off-diffrij { display: flex; justify-content: space-between; gap: 14px; padding: 8px 2px; border-bottom: 1px solid var(--c-lijn); font-size: 13.5px; } .off-diffrij--plus span:first-child { color: var(--c-groen-d); font-weight: 600; } .off-diffrij--min span:first-child { color: var(--c-terra); font-weight: 600; } .off-diffrij--wijzig span:first-child { color: var(--c-amber); font-weight: 600; } .off-diffrij--totaal { border-bottom: 0; padding-top: 12px; font-weight: 700; } /* Startpakketten (B2c) */ .off-startpakket__intro { font-size: 13.5px; color: var(--c-ink-2); margin: 0 0 12px; } .off-startpakketten { display: flex; flex-direction: column; gap: 10px; } .off-startpakket { display: flex; flex-direction: column; gap: 5px; text-align: left; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 12px 14px; background: var(--c-paneel); cursor: pointer; font: inherit; color: var(--c-ink); } .off-startpakket:hover { border-color: var(--c-groen-d); } .off-startpakket.is-aanbevolen { border-color: var(--c-groen-d); background: color-mix(in srgb, var(--c-groen-d) 6%, var(--c-paneel)); } .off-startpakket__kop { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .off-startpakket__sub { font-size: 12.5px; color: var(--c-ink-2); } .off-startpakket__regels { font-size: 11.5px; color: var(--c-ink-2); } /* B27 · backend-kaart: concept-offertes versturen naar de Woningkluis */ .off-b27kaart { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; margin-bottom: 16px; } .off-b27kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; } .off-b27kop > span { font-size: 11px; color: var(--c-ink-2); } .off-b27rij { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 8px 12px; } .off-b27rij > div { display: flex; flex-direction: column; } .off-b27rij .mono { font-size: 11.5px; color: var(--c-ink-2); } /* Fase A (01-08): gedeelde teltegel-kop van de offerte-modules */ .ofk-host:empty { min-height: 96px; } .ofk-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0 0 4px; } .ofk-tegel { display: flex; flex-direction: column; gap: 2px; text-align: left; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 12px 16px; font-family: var(--font-ui); box-shadow: var(--schaduw-tegel); } .ofk-tegel--klik { cursor: pointer; transition: border-color var(--overgang), box-shadow var(--overgang); } .ofk-tegel--klik:hover { border-color: var(--c-groen); box-shadow: var(--schaduw-tegel-hover); } .ofk-tegel__lbl { font-size: .74rem; font-weight: 700; color: var(--c-ink-2); } .ofk-tegel__n { font-size: 1.3rem; font-weight: 800; color: var(--c-ink); } .ofk-tegel__n.is-amber { color: var(--c-amber); } .ofk-tegel__sub { font-size: .66rem; color: var(--c-ink-3); } @media (prefers-reduced-motion: reduce) { .ofk-tegel--klik { transition: none; } } /* De opvolging van kozijnoffertes loopt sinds KO8 via de gedeelde module Opvolging; de eigen stijlen zijn daarmee vervallen. */ /* ═══ OF1 (OFFERTEFLOW §1) · wizard-editor ═══ */ .off-autosave { margin-left: auto; font-size: .66rem; color: var(--c-ink-3); align-self: flex-start; padding-top: 6px; } .off-wizvoet { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; } .off-grid--breed { grid-template-columns: 1fr; } .off-cat { display: flex; flex-direction: column; gap: 9px; } .off-cat__zoek { border: 1px solid var(--lijn2); border-radius: var(--radius-klein); padding: 8px 12px; font: inherit; font-size: .78rem; } .off-regelacties { display: flex; align-items: center; gap: 6px; margin-top: 6px; } .off-opt { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; color: var(--ink2); font-weight: 700; cursor: pointer; } .off-mini2 { border: 1px solid var(--lijn2); background: var(--kaart); border-radius: 6px; width: 24px; height: 24px; font-size: .7rem; color: var(--ink2); cursor: pointer; } .off-mini2:hover { background: var(--grijs); } .off-mini2:disabled { opacity: .35; cursor: default; } .off-check { display: flex; gap: 8px; align-items: flex-start; font-size: .76rem; padding: 4px 0; line-height: 1.5; } .off-check__tk { font-weight: 800; width: 15px; text-align: center; flex: none; } .off-check--ok .off-check__tk { color: var(--goed-d); } .off-check--let .off-check__tk { color: var(--let-d); } .off-check--rood .off-check__tk { color: var(--stop); } /* PF4 (gat 24) · het rekenvoorbeeld zegt wat het is */ .off-rekenvoorbeeld { display: flex; gap: 12px; align-items: baseline; padding: 10px 14px; margin: 0 0 14px; border: var(--lijndikte) solid var(--c-lijn); border-left: 4px solid var(--let); border-radius: var(--radius); background: var(--let-t, var(--c-paneel)); font-size: .9rem; } .off-rekenvoorbeeld a { color: inherit; font-weight: 700; } /* ── offdossier.css ── */ /* offdossier.css — de isolatieofferte op één scherm (besluit 341, bouwspec ISOLATIEOFFERTE-EEN-SCHERM §1). Kopband, tabbalk, reis, panelen, keuzegroep en velden komen uit bouwstenen.css; hier staat alleen wat dit scherm eigen is: de drie kolommen, de regeltabel die de editor is, de poortenlijst, de inspector en de voet. Geen kleurliteral — kleur is betekenis (--goed / --let / --stop), de rest is inkt op vlak. */ .ofd-wortel { padding: 20px 32px 48px; } /* module-wortelnorm: nooit tegen de rail; compact van boven (één-scherm-norm) */ .ofd-lichaam { grid-template-rows: minmax(0, 1fr) auto; } .ofd-lichaam.is-drie { grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(260px, 310px); } .ofd-lichaam.is-twee { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ofd-lichaam.is-een { grid-template-columns: minmax(0, 1fr); } @media (max-width: 1240px) { .ofd-lichaam.is-drie { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); } .ofd-lichaam.is-drie .ofd-links { grid-column: 1 / -1; order: 3; } } @media (max-width: 900px) { .ofd-lichaam.is-drie, .ofd-lichaam.is-twee { grid-template-columns: 1fr; } .ofd-lichaam.is-drie .ofd-links { order: 0; } } /* kopband: statuschip en het telletje op de tab */ .ofd-chip { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: var(--radius-pill); font: 700 .66rem var(--font-ui); background: var(--vlak); color: var(--ink2); white-space: nowrap; } .ofd-chip.is-let { background: var(--let-t); color: var(--let-d); } .ofd-chip.is-goed { background: var(--goed-t); color: var(--goed-d); } .ofd-chip.is-stop { background: var(--stop-t); color: var(--stop-d); } .ofd-chip.is-akkoord { background: var(--accent); color: var(--knop-ink); } .ofd-chip.is-af { background: var(--vlak); color: var(--ink3); text-decoration: line-through; } .ofd-tel { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: var(--radius-pill); background: var(--vlak); color: var(--ink2); font-size: .64rem; line-height: 17px; text-align: center; } .ofd-tel.is-stop { background: var(--stop); color: var(--knop-ink); } .ofd-tel.is-let { background: var(--let); color: var(--knop-ink); } .ofd-tabrechts { font-size: .72rem; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ofd-intern { font-style: normal; font: .58rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); border: var(--lijndikte) solid var(--lijn); border-radius: 3px; padding: 0 4px; vertical-align: middle; } .ofd-let { font-size: .74rem; color: var(--ink2); line-height: 1.5; margin: 6px 0; } .ofd-let b { color: var(--ink); } .is-goed { color: var(--goed-d); } .is-let { color: var(--let-d); } .is-stop { color: var(--stop-d); } .is-dim { color: var(--ink3); } .ofd-mini { border: var(--lijndikte) solid var(--lijn); background: var(--kaart); border-radius: var(--radius-klein); font: inherit; font-size: .7rem; padding: 0 5px; cursor: pointer; color: var(--ink2); } .ofd-mini:hover { background: var(--accent-t2); } .ofd-link { border: 0; background: none; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; cursor: pointer; } /* ---- links: maatregelen, catalogus, herkomst ---- */ .ofd-regelrij { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; min-height: var(--rij); padding: 5px var(--pad); border: 0; border-top: var(--lijndikte) solid var(--lijn); background: none; font: inherit; text-align: left; cursor: pointer; color: var(--ink); } .ofd-regelrij:hover { background: var(--accent-t2); } .ofd-regelrij.is-aan { background: var(--accent-t); box-shadow: inset 3px 0 0 var(--accent); } .ofd-regelrij.is-uit { opacity: .55; } .ofd-regelrij__ico { display: grid; place-items: center; width: 34px; height: 26px; border-radius: var(--radius-klein); background: var(--vlak); font-size: .6rem; font-weight: 700; color: var(--ink2); } .ofd-regelrij__wat { min-width: 0; display: flex; flex-direction: column; } .ofd-regelrij__wat b { font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ofd-regelrij__wat span { font-size: .66rem; color: var(--ink3); } .ofd-regelrij__geld { display: flex; flex-direction: column; align-items: flex-end; font-size: .78rem; font-weight: 700; } .ofd-regelrij__geld small { font-weight: 400; font-size: .62rem; color: var(--goed-d); } .ofd-vouw { border-top: var(--lijndikte) solid var(--lijn); } .ofd-vouw summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px var(--pad); font-size: .76rem; font-weight: 700; cursor: pointer; list-style: none; } .ofd-vouw summary::-webkit-details-marker { display: none; } .ofd-vouw summary .bs-kicker { font: .58rem var(--font-mono); color: var(--ink3); letter-spacing: .08em; } .ofd-zoek { display: block; width: calc(100% - 2 * var(--pad)); margin: 0 var(--pad) 6px; padding: 5px 8px; border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein); font: inherit; font-size: .74rem; } .ofd-cat { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; padding: 6px var(--pad); border: 0; border-top: var(--lijndikte) dashed var(--lijn); background: none; font: inherit; text-align: left; cursor: pointer; color: var(--ink); } .ofd-cat:hover { background: var(--accent-t2); } .ofd-cat:disabled { cursor: default; opacity: .5; } .ofd-cat > span { display: flex; flex-direction: column; min-width: 0; } .ofd-cat b { font-size: .76rem; } .ofd-cat > span > span { font-size: .64rem; color: var(--ink3); } .ofd-cat em { font-style: normal; font-size: .7rem; white-space: nowrap; } .ofd-herk__p { margin: 0; padding: 4px var(--pad) 10px; font-size: .74rem; line-height: 1.5; color: var(--ink2); } .ofd-notitie { margin: 0 var(--pad) 10px; padding: 7px 9px; border-radius: var(--radius-klein); background: var(--memo); font-size: .74rem; line-height: 1.5; color: var(--ink); } .ofd-notitie b { display: flex; justify-content: space-between; font-size: .64rem; margin-bottom: 2px; } .ofd-vraagkaart { margin: 0 var(--pad) 10px; padding: 8px 10px; border: var(--lijndikte) solid var(--let); border-radius: var(--radius-klein); background: var(--let-t); font-size: .74rem; } .ofd-vraagkaart b { display: block; color: var(--let-d); } .ofd-vraagkaart p { margin: 3px 0 6px; } /* ---- midden: de regeltabel ís de editor ---- */ .ofd-tabelrol { overflow-x: auto; } .ofd-tabel { width: 100%; min-width: 520px; table-layout: fixed; border-collapse: collapse; font-size: .76rem; } .ofd-tabel td b { overflow-wrap: anywhere; white-space: normal; } .ofd-tabel td small { white-space: normal; } .ofd-tabel .ofd-stempel { display: block; } .ofd-tabel .ofd-stempel .bs-stempel { margin-left: 0; white-space: normal; display: block; line-height: 1.5; } .ofd-tabel .ofd-stempel .bs-stempel b, .ofd-tabel .ofd-stempel .bs-stempel button { white-space: nowrap; overflow-wrap: normal; } .ofd-tabel th { font: .58rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); text-align: left; padding: 8px 6px 4px; border-bottom: var(--lijndikte) solid var(--lijn); white-space: nowrap; } .ofd-tabel th:first-child, .ofd-tabel td:first-child { padding-left: var(--pad); } .ofd-tabel th:last-child, .ofd-tabel td:last-child { padding-right: var(--pad); } .ofd-tabel td { padding: 6px 6px; border-bottom: var(--lijndikte) solid var(--lijn); vertical-align: top; } .ofd-tabel .r { text-align: right; } .ofd-tabel td.mono, .ofd-tabel td .mono { white-space: nowrap; } .ofd-tabel td b { display: inline; font-size: .78rem; } .ofd-tabel td small { display: block; font-size: .64rem; color: var(--ink3); margin-top: 1px; } .ofd-tabel tr.is-aan td { background: var(--accent-t2); } .ofd-tabel tr.is-uit td { color: var(--ink3); } .ofd-tabel tr.is-uit td b { text-decoration: line-through; font-weight: 500; } .ofd-tabel tr.is-blok td { box-shadow: inset 3px 0 0 var(--stop); } .ofd-tabel input.mono { width: 56px; padding: 3px 5px; border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein); font: inherit; font-family: var(--font-mono); font-size: .76rem; text-align: right; background: var(--kaart); color: var(--ink); } .ofd-tabel input.mono:disabled { border-color: transparent; background: none; } .ofd-tabel input.is-verhoogd { border-color: var(--let); } .ofd-aan { display: inline-block; margin-right: 6px; vertical-align: middle; } .ofd-optie { font-size: .64rem; color: var(--ink2); white-space: nowrap; } .ofd-tabel tr.som-sub td { color: var(--ink2); border-bottom: 0; padding-top: 3px; padding-bottom: 3px; } .ofd-tabel tr.som-sub + tr.som-sub td, .ofd-tabel tbody tr:not(.som-sub):not(.som) + tr.som-sub td { padding-top: 10px; } .ofd-tabel tr.som td { font-weight: 800; font-size: .84rem; border-top: 2px solid var(--ink); border-bottom: 0; padding-top: 8px; } .ofd-onder { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 6px var(--pad) 10px; font-size: .72rem; color: var(--ink2); border-top: var(--lijndikte) solid var(--lijn); } .ofd-onder em { font-style: normal; color: var(--ink3); } .ofd-stempel .bs-stempel { margin-left: 6px; } /* poorten: een lijst van standen — kleur alleen waar iets vastzit */ .ofd-poorten { border-top: var(--lijndikte) solid var(--lijn); } .ofd-poort { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px var(--pad); border-bottom: var(--lijndikte) solid var(--lijn); font-size: .74rem; line-height: 1.45; color: var(--ink2); } .ofd-poort:last-child { border-bottom: 0; } .ofd-poort i { width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; border: var(--lijndikte) solid var(--lijn2); background: var(--kaart); } .ofd-poort b { display: block; color: var(--ink); } .ofd-poort.is-stop i { background: var(--stop); border-color: var(--stop); } .ofd-poort.is-stop b { color: var(--stop-d); } .ofd-poort.is-let i { background: var(--let); border-color: var(--let); } .ofd-poort.is-let b { color: var(--let-d); } .ofd-poort.is-goed i { background: var(--goed); border-color: var(--goed); } .ofd-poort.is-info i { border-style: dashed; } .btn--klein { padding: 2px 8px; font-size: .68rem; min-height: 24px; } /* ---- rechts: de inspector ---- */ .ofd-inspector { display: flex; flex-direction: column; } .ofd-itabs { display: flex; border-bottom: var(--lijndikte) solid var(--lijn); } .ofd-itabs button { flex: 1; padding: 8px 4px; border: 0; border-bottom: 2px solid transparent; background: none; font: 700 .72rem var(--font-ui); color: var(--ink2); cursor: pointer; } .ofd-itabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); } .ofd-itabs button:hover { background: var(--accent-t2); } .ofd-prijsgroot { padding: 12px var(--pad) 4px; font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; } .ofd-prijsgroot small { display: block; font: .64rem var(--font-ui); color: var(--ink3); letter-spacing: 0; } .ofd-regels { padding: 4px var(--pad) 8px; font-size: .74rem; } .ofd-regels > div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; color: var(--ink2); } .ofd-regels > div.som { border-top: var(--lijndikte) solid var(--lijn); margin-top: 4px; padding-top: 6px; color: var(--ink); font-weight: 700; } .ofd-regels > div.is-sub { color: var(--goed-d); } .ofd-x2 { font-style: normal; font: 700 .58rem var(--font-mono); padding: 0 4px; border-radius: 3px; background: var(--goed-t); color: var(--goed-d); } .ofd-stopvak { margin: 4px var(--pad) 8px; padding: 8px 10px; border: var(--lijndikte) solid var(--stop); border-radius: var(--radius-klein); background: var(--stop-t); color: var(--stop-d); font-size: .74rem; line-height: 1.5; } .ofd-stopvak em { font-style: normal; color: var(--ink2); } .ofd-stopvak.is-let { border-color: var(--let); background: var(--let-t); color: var(--let-d); } .ofd-stopvak ul { margin: 4px 0; padding-left: 18px; } .ofd-kortvak { position: relative; padding: 8px var(--pad) 10px; border-top: var(--lijndikte) solid var(--lijn); display: flex; flex-direction: column; gap: 8px; } .ofd-kortvak > .bs-kicker { font: .62rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); } .ofd-kinvoer { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--ink2); flex-wrap: wrap; } .ofd-kinvoer input, .ofd-kinvoer select { padding: 4px 7px; border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein); font: inherit; font-size: .76rem; background: var(--kaart); color: var(--ink); } .ofd-kinvoer input.mono { width: 90px; text-align: right; font-family: var(--font-mono); } .ofd-kreden input { flex: 1; min-width: 160px; } .ofd-kinvoer input.is-gewijzigd, .ofd-kinvoer select.is-gewijzigd { border-color: var(--let); } .ofd-opname { padding: 8px var(--pad) 10px; border-top: var(--lijndikte) solid var(--lijn); display: flex; flex-direction: column; gap: 7px; } .ofd-opname > .bs-kicker { font: .62rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); display: flex; justify-content: space-between; } .ofd-veld { display: flex; flex-direction: column; gap: 2px; font-size: .7rem; color: var(--ink2); } .ofd-veld input, .ofd-veld select { padding: 5px 8px; border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein); font: inherit; font-size: .76rem; background: var(--kaart); color: var(--ink); } .ofd-veld input:disabled, .ofd-veld select:disabled { background: var(--vlak); color: var(--ink2); } .ofd-bijlage { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 6px var(--pad); border-top: var(--lijndikte) solid var(--lijn); font-size: .74rem; } .ofd-bijlage__ico { display: grid; place-items: center; height: 26px; border-radius: var(--radius-klein); background: var(--vlak); font-size: .56rem; font-weight: 700; color: var(--ink2); } .ofd-bijlage > div { min-width: 0; display: flex; flex-direction: column; } .ofd-bijlage b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ofd-bijlage > div > span { font-size: .64rem; color: var(--ink3); } .ofd-bijlage label { font-size: .66rem; color: var(--ink2); white-space: nowrap; } .ofd-dropzone { display: block; margin: 8px var(--pad) 10px; padding: 12px; border: 2px dashed var(--lijn2); border-radius: var(--radius-klein); text-align: center; font-size: .74rem; color: var(--ink2); cursor: pointer; line-height: 1.5; } .ofd-dropzone:hover, .ofd-dropzone.is-over { border-color: var(--accent); background: var(--accent-t2); } .ofd-dropzone .bs-kicker { font: .6rem var(--font-mono); color: var(--ink3); letter-spacing: .06em; } /* ---- controleren & versturen ---- */ .ofd-verzend__lijf { padding-bottom: 6px; } .ofd-vzbijlagen { display: flex; flex-direction: column; gap: 3px; font-size: .74rem; } .ofd-vzbijlagen .bs-kicker { font: .6rem var(--font-mono); color: var(--ink3); margin-top: 2px; } .ofd-slot { margin: 8px var(--pad); padding: 8px 10px; border: var(--lijndikte) solid var(--let); border-radius: var(--radius-klein); background: var(--let-t); color: var(--let-d); font-size: .72rem; line-height: 1.5; } .ofd-nadien { padding: 4px var(--pad) 6px; font-size: .72rem; color: var(--ink2); line-height: 1.5; } .ofd-nadien > div { padding-left: 14px; position: relative; } .ofd-nadien > div::before { content: "→"; position: absolute; left: 0; color: var(--ink3); } /* ---- wat de klant ziet ---- */ .ofd-gezichten { display: flex; gap: 4px; flex-wrap: wrap; } .ofd-gknop { padding: 6px 12px; border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius-klein); background: var(--kaart); font: 700 .72rem var(--font-ui); color: var(--ink2); cursor: pointer; } .ofd-gknop.is-actief { background: var(--accent); border-color: var(--accent); color: var(--knop-ink); } .ofd-kvregels { display: flex; flex-direction: column; } .ofd-kvregel { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: var(--lijndikte) solid var(--lijn); font-size: .78rem; } .ofd-kvregel.is-optie b::before { content: "☐ "; color: var(--ink3); } .ofd-kvregel.is-optie:not(.is-uit) b::before { content: "☑ "; color: var(--ink); } .ofd-kvregel.is-uit { color: var(--ink3); } .ofd-kvregel em { font-style: normal; font-size: .68rem; color: var(--ink3); } .ofd-kvsub { display: block; font-size: .66rem; color: var(--ink3); } .ofd-kvtotaal { margin-top: 8px; } .ofd-trij { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: .78rem; color: var(--ink2); } .ofd-trij.is-sub { color: var(--goed-d); } .ofd-trij.is-groot { font-weight: 800; font-size: .92rem; color: var(--ink); border-top: 2px solid var(--ink); margin-top: 4px; padding-top: 6px; } .ofd-trij.is-klein { font-size: .7rem; } .ofd-kvbijlagen { display: flex; gap: 5px; flex-wrap: wrap; margin: 4px 0 8px; } .ofd-mail { border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius-klein); overflow: hidden; } .ofd-mailkop { padding: 8px 12px; background: var(--vlak); font-size: .7rem; line-height: 1.6; border-bottom: var(--lijndikte) solid var(--lijn); } .ofd-maillijf { padding: 12px; font-size: .8rem; line-height: 1.55; } .ofd-mailknop { display: inline-block; margin: 6px 0; padding: 8px 14px; border-radius: var(--radius-klein); background: var(--knop); color: var(--knop-ink); font-weight: 700; font-size: .76rem; } .ofd-mailbijlage { display: flex; gap: 10px; align-items: center; margin-top: 10px; padding: 8px 10px; border: var(--lijndikte) dashed var(--lijn2); border-radius: var(--radius-klein); font-size: .74rem; } .ofd-mailbijlage > span { padding: 4px 6px; border-radius: 3px; background: var(--ink); color: var(--knop-ink); font-size: .58rem; font-weight: 700; } .ofd-url { padding: 6px 10px; border-radius: var(--radius-klein); background: var(--vlak); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ofd-kluisbalk { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 8px; border-radius: var(--radius-klein); background: var(--ink); color: var(--knop-ink); font-size: .76rem; font-weight: 700; } .ofd-idin { font-size: .56rem; letter-spacing: .08em; padding: 2px 6px; border-radius: 3px; background: var(--goed); color: var(--knop-ink); } .ofd-pdfknoppen { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 10px; } .ofd-pdfkijk { width: 100%; height: 560px; border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius-klein); box-shadow: var(--schaduw-laag); background: var(--vlak); } /* ---- tijdlijn ---- */ .ofd-tlrij { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-bottom: var(--lijndikte) solid var(--lijn); font-size: .76rem; } .ofd-tlrij:last-child { border-bottom: 0; } .ofd-tltijd { font-size: .68rem; color: var(--ink3); padding-top: 2px; } .ofd-tltekst { line-height: 1.5; } .ofd-tltekst em { display: block; font-style: normal; font-size: .68rem; color: var(--ink3); } .ofd-tlwissel { font-family: var(--font-mono); } .ofd-tlreden { color: var(--ink2); } /* ---- de voet: het totaal en de ene knop die bij de fase hoort ---- */ /* rechts ruimte voor de zwevende berichtenknop van de schil */ .ofd-voet { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-height: 48px; padding: 8px 76px 8px 14px; border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius); background: var(--kaart); box-shadow: var(--schaduw-zwevend); } .ofd-voet__tot { font-size: 1.15rem; font-weight: 700; } .ofd-voet__sub { font-size: .72rem; color: var(--ink2); } .ofd-voet__punten { display: flex; gap: 12px; font-size: .72rem; color: var(--ink2); } .ofd-voet__punten span { display: inline-flex; align-items: center; gap: 5px; } .ofd-voet__punten i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink3); } .ofd-voet__punten .is-stop i { background: var(--stop); } .ofd-voet__punten .is-let i { background: var(--let); } .ofd-voet__acties { margin-left: auto; display: flex; gap: 6px; } @media (max-width: 900px) { .ofd-voet__acties { margin-left: 0; width: 100%; } .ofd-pdfkijk { height: 380px; } } @media (prefers-reduced-motion: no-preference) { .ofd-regelrij, .ofd-cat, .ofd-itabs button, .ofd-gknop { transition: background 150ms; } } /* DOORLOOP B17 (12-10) · wat het kozijnofferte-dossier (kozdossier.js) nog van de oude opmaak gebruikt. Het herontwerp van het isolatie-offertedossier haalde deze regels weg; het kozijndossier stond daarna zonder balk en tabs. */ .ofd-balk { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .ofd-terug { font-size: .76rem; font-weight: 700; color: var(--c-ink-2); text-decoration: none; } .ofd-terug:hover { color: var(--c-ink); text-decoration: underline; } .ofd-klant { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; } .ofd-klant a { color: var(--c-ink); text-decoration: none; } .ofd-klant a:hover { text-decoration: underline; } .ofd-nr { font-size: .74rem; color: var(--c-ink-3); } .ofd-rek { flex: 1; } .ofd-bedrag { font-size: .9rem; font-weight: 800; } .ofd-status { font-size: .64rem; font-weight: 700; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 99px; padding: 1px 9px; color: var(--c-ink-2); } .ofd-status.is-verstuurd { border-color: var(--c-ink-2); color: var(--c-ink); } .ofd-status.is-akkoord { background: var(--donker, var(--c-ink)); border-color: var(--c-ink); color: var(--knop-ink); } .ofd-status.is-af { border-color: var(--c-lijn-2); color: var(--c-ink-3); } .ofd-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: var(--lijndikte) solid var(--c-lijn); } .ofd-tab { border: 0; background: none; padding: 8px 14px; font-size: .8rem; font-weight: 700; color: var(--c-ink-3); font-family: inherit; cursor: pointer; border-bottom: 2px solid transparent; } .ofd-tab:hover { color: var(--c-ink); } .ofd-tab.is-actief { color: var(--c-ink); border-bottom-color: var(--accent); } .ofd-tab:focus-visible, .ofd-terug:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .ofd-inhoud { display: flex; flex-direction: column; gap: 14px; } .ofd-tl { display: flex; flex-direction: column; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 8px 14px; } .ofd-tlbron { display: block; font-size: .66rem; color: var(--c-ink-3); font-style: normal; } /* OB2 (Michiel 14-10) · de voorwaarden van deze offerte in het tabblad Uitvoering */ .ofd-vw { display: inline-flex; align-items: center; gap: 6px; } .ofd-vw input { width: 64px; padding: 3px 6px; border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein); background: var(--kaart); color: var(--ink); text-align: right; } .ofd-vwtekst { width: 100%; max-width: 280px; padding: 4px 7px; border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein); background: var(--kaart); color: var(--ink); font: inherit; } /* ── kozdossier.css ── */ /* kozdossier.css — het kozijnofferte-dossier (KO1) en het beheer van de configurator. Leunt op de vormtaal van het offerte-dossier: kozijnen is hetzelfde als isolatie, dus de binnendienst hoeft niet om te schakelen. Alleen tokens. */ .kzd-wortel, .kzb-wortel { max-width: var(--werkbreedte, 1240px); margin: 0 auto; width: 100%; padding: 20px 32px 72px; display: flex; flex-direction: column; gap: 12px; } .kzd-blok, .kzb-blok { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; box-shadow: var(--schaduw-tegel); } .kzd-let, .kzb-let { font-size: .72rem; color: var(--c-ink-3); font-style: italic; margin: 0; line-height: 1.6; } .kzd-rek { flex: 1; } /* posities: één positie is één offerteregel */ .kzd-posities { display: flex; flex-direction: column; gap: 8px; } .kzd-positie { border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 10px 12px; background: var(--c-paneel); } .kzd-poskop { display: flex; align-items: baseline; gap: 9px; font-size: .84rem; padding-bottom: 7px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .kzd-poskop span { font-size: .7rem; color: var(--c-ink-3); } .kzd-poskop .mono { font-size: .8rem; font-weight: 800; color: var(--c-ink); } .kzd-posrooster { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 9px; padding-top: 8px; } .kzd-posrooster span { display: block; font-size: .58rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-3); margin-bottom: 2px; } .kzd-posrooster b { font-size: .78rem; } /* beheer: negen tabbladen */ .kzb-kop { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; } .kzb-h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; } .kzb-sub { font-size: .76rem; color: var(--c-ink-3); margin: 2px 0 0; } .kzb-tabs { display: flex; gap: 5px; flex-wrap: wrap; } .kzb-tab { border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); border-radius: var(--radius-klein); padding: 5px 13px; font: 700 .72rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; } .kzb-tab.is-actief { border-color: var(--c-groen); background: var(--c-groen); color: var(--knop-ink); } .kzb-blokkop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .88rem; padding-bottom: 8px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .kzb-blokkop span { font-size: .66rem; color: var(--c-ink-3); } .kzb-tabel { border-collapse: collapse; width: 100%; font-size: .78rem; } .kzb-tabel th { text-align: left; font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-3); padding: 5px 7px; border-bottom: var(--lijndikte) solid var(--c-lijn-2); } .kzb-tabel td { padding: 6px 7px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .kzb-leeg { font-size: .78rem; color: var(--c-ink-3); margin: 0; } .kzb-staal { display: inline-block; width: 13px; height: 13px; border-radius: 3px; border: var(--lijndikte) solid var(--c-lijn-2); vertical-align: -2px; margin-right: 5px; } /* ═══ KO3 · de configurator: drie kolommen — links waar je begint, midden de tekening, rechts de maten en wat het kost. ═══ */ .kzc-rooster { display: grid; grid-template-columns: 250px minmax(0, 1fr) 290px; gap: 12px; align-items: start; } .kzc-kolom { display: flex; flex-direction: column; gap: 12px; min-width: 0; } @media (max-width: 1180px) { .kzc-rooster { grid-template-columns: 1fr; } } /* de positielijst met miniatuurtjes uit dezelfde tekenfunctie */ .kzc-poslijst { display: flex; flex-direction: column; gap: 5px; } .kzc-posrij { display: flex; align-items: center; gap: 9px; text-align: left; width: 100%; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: var(--kaart); padding: 6px 8px; cursor: pointer; font: inherit; transition: border-color 150ms, background 150ms; } .kzc-posrij:hover { border-color: var(--c-lijn-2); background: var(--c-paneel); } .kzc-posrij.is-actief { border-color: var(--c-groen); background: var(--c-paneel); } .kzc-mini { flex: 0 0 46px; display: flex; align-items: center; justify-content: center; } .kzc-postxt { min-width: 0; } .kzc-postxt b { display: block; font-size: .78rem; } .kzc-postxt span { display: block; font-size: .66rem; color: var(--c-ink-3); } .kzc-postxt em { color: var(--c-amber-d); font-style: normal; font-weight: 700; } /* de modellenbibliotheek */ .kzc-groep { font-size: .58rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--c-ink-3); margin: 8px 0 4px; } .kzc-modelrij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .kzc-model { border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: var(--kaart); padding: 5px 3px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; font: inherit; transition: border-color 150ms, background 150ms; } .kzc-model:hover { border-color: var(--c-lijn-2); background: var(--c-paneel); } .kzc-model.is-actief { border-color: var(--c-groen); background: var(--c-paneel); } .kzc-model small { font-size: .56rem; line-height: 1.25; text-align: center; color: var(--c-ink-2); } .kzc-model small .mono { font-size: .5rem; color: var(--c-ink-3); } /* het doek */ .kzc-doekblok { position: relative; } .kzc-doek { display: flex; align-items: center; justify-content: center; min-height: 340px; background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 8px; } .kzc-standknop { position: absolute; top: 44px; right: 22px; display: flex; gap: 4px; z-index: 1; } .kzc-stand { border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); border-radius: var(--radius-klein); padding: 3px 11px; font: 700 .66rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; } .kzc-stand.is-actief { border-color: var(--c-groen); background: var(--c-groen); color: var(--knop-ink); } .kzc-doekvoet { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .68rem; color: var(--c-ink-3); } /* besluit 339 · opslaan-norm: het stempel per positie («✓ opgeslagen 16:12 · naam») in de kop van de tekening — leeg neemt het geen plek in; de vorm komt uit bouwstenen.css */ .kzc-stempel { margin-left: auto; } .kzc-stempel:empty { display: none; } .kzc-stempel .bs-stempel { white-space: normal; } /* velden: label boven het veld, nooit alleen een placeholder */ .kzc-velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 9px; } .kzc-veld { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .kzc-veld > span { font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); } .kzc-veld input, .kzc-veld select { border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; padding: 5px 8px; font: 500 .78rem var(--font-ui); background: var(--kaart); color: var(--c-ink); width: 100%; } .kzc-veld input:focus-visible, .kzc-veld select:focus-visible { outline: var(--focus-ring); outline-offset: 1px; } .kzc-veld select:disabled { opacity: .45; } .kzc-smal { max-width: 110px; } /* de indeling: één rij per vak */ .kzc-vakken { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .kzc-vakrij { display: flex; align-items: flex-end; gap: 7px; } .kzc-vaknr { flex: 0 0 20px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: .66rem; font-weight: 800; color: var(--c-ink-3); } .kzc-weg { border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); border-radius: 8px; padding: 4px 9px; font: 700 .74rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; } .kzc-weg:disabled { opacity: .3; cursor: default; } .kzc-knopje { align-self: flex-start; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); border-radius: var(--radius-klein); padding: 4px 12px; font: 700 .7rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; } .kzc-knopje:hover { border-color: var(--c-groen); color: var(--c-groen-d); } .kzc-knop { align-self: flex-start; border: none; background: var(--gradient-primair); color: var(--knop-ink); border-radius: var(--radius-klein); padding: 6px 15px; font: 800 .74rem var(--font-ui); cursor: pointer; box-shadow: var(--schaduw-knop); } .kzc-knop:hover { background: var(--gradient-primair-hover); } /* de prijsopbouw: elke euro terug te rekenen naar de matrixcel */ .kzc-opbouw { display: flex; flex-direction: column; gap: 4px; } .kzc-opbouwkop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 6px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .kzc-opbouwkop b { font-size: 1.1rem; font-family: var(--font-mono); color: var(--c-groen-d); } .kzc-opbouwkop span { font-size: .62rem; color: var(--c-ink-3); } .kzc-opbouwrij { display: flex; justify-content: space-between; gap: 10px; font-size: .72rem; color: var(--c-ink-2); } .kzc-opbouwrij.is-som { border-top: var(--lijndikte) solid var(--c-lijn); padding-top: 4px; margin-top: 2px; font-weight: 700; color: var(--c-ink); } /* geen prijs uit de matrix: op aanvraag, met fiat */ .kzc-geenprijs { display: flex; flex-direction: column; gap: 7px; border-left: 3px solid var(--c-rood); padding-left: 10px; } .kzc-geenprijs b { font-size: .8rem; color: var(--c-rood-d); } .kzc-geenprijs p { font-size: .72rem; color: var(--c-ink-2); margin: 0; line-height: 1.5; } .kzc-aanvraag, .kzc-fiat { display: flex; flex-direction: column; gap: 7px; } .kzc-fiat { flex-direction: row; align-items: center; flex-wrap: wrap; } .kzc-fiat em { font-size: .64rem; color: var(--c-ink-3); font-style: italic; } /* de kleurenkaart van het gekozen merk */ .kzc-stalen { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 3px; } .kzc-staal { width: 24px; height: 24px; border-radius: 5px; border: var(--lijndikte) solid var(--c-lijn-2); cursor: pointer; } .kzc-staal.is-actief { border: 2px solid var(--c-ink); } /* ═══ KO4 · beheer met toevoegen, wijzigen en uit de lijst halen ═══ */ .kzb-acties { white-space: nowrap; text-align: right; } .kzb-mini { border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); border-radius: var(--radius-klein); padding: 3px 10px; font: 700 .66rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; margin-left: 4px; } .kzb-mini:hover { border-color: var(--c-groen); color: var(--c-groen-d); } .kzb-tabel tr.is-vervallen td { opacity: .5; } .kzb-uitleg { display: block; font-size: .64rem; color: var(--c-ink-3); font-style: italic; margin-top: 2px; line-height: 1.4; } .kzb-voet { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: var(--lijndikte) solid var(--c-lijn); } .kzb-varrooster { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; } /* de versiegeschiedenis in de drawer */ .kzb-hist { display: flex; flex-direction: column; gap: 9px; } .kzb-histrij { display: flex; gap: 10px; font-size: .74rem; padding-bottom: 8px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .kzb-histrij > .mono { flex: 0 0 96px; font-size: .64rem; color: var(--c-ink-3); } .kzb-histrij b { display: block; } .kzb-histrij em { display: block; font-size: .68rem; color: var(--c-ink-2); font-style: normal; } .kzb-histreden { color: var(--c-amber-d) !important; } .kzb-histdoor { color: var(--c-ink-3) !important; font-style: italic !important; } /* de vier kleurvlakken: kader en draaideel, buiten en binnen */ .kzc-vlakken { display: flex; flex-direction: column; gap: 8px; } .kzc-vlakkop { display: flex; align-items: center; gap: 10px; font-size: .6rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--c-ink-3); padding-top: 6px; border-top: var(--lijndikte) solid var(--c-lijn); } .kzc-kleurrij { display: flex; flex-direction: column; gap: 5px; } .kzc-vink { display: flex; align-items: center; gap: 5px; margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: .66rem; color: var(--c-ink-2); cursor: pointer; } .kzc-vink input { accent-color: var(--c-groen); } /* ═══ KO5 · controles en opties ═══ */ .kzc-controles { display: flex; flex-direction: column; gap: 7px; } .kzc-melding { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-left-width: 3px; border-radius: var(--radius); padding: 9px 12px; display: flex; flex-direction: column; gap: 3px; box-shadow: var(--schaduw-tegel); } .kzc-melding b { font-size: .62rem; text-transform: uppercase; letter-spacing: .07em; } .kzc-melding span { font-size: .76rem; color: var(--c-ink-2); line-height: 1.5; } .kzc-melding .kzc-knopje { margin-top: 4px; } .kzc-melding.is-stop { border-left-color: var(--c-rood); } .kzc-melding.is-stop b { color: var(--c-rood-d); } .kzc-melding.is-let { border-left-color: var(--c-amber); } .kzc-melding.is-let b { color: var(--c-amber-d); } .kzc-melding.is-goed { border-left-color: var(--c-groen); } .kzc-melding.is-goed b { color: var(--c-groen-d); } .kzc-optierij { display: flex; align-items: flex-start; gap: 9px; padding: 5px 0; cursor: pointer; border-bottom: var(--lijndikte) solid var(--c-lijn); } .kzc-optierij:last-of-type { border-bottom: 0; } .kzc-optierij input { margin-top: 2px; accent-color: var(--c-groen); } .kzc-optierij > span { flex: 1; min-width: 0; } .kzc-optierij b { display: block; font-size: .76rem; font-weight: 600; } .kzc-optierij em { display: block; font-size: .64rem; color: var(--c-ink-3); font-style: italic; line-height: 1.4; } .kzc-optierij .mono { flex: 0 0 auto; font-size: .7rem; color: var(--c-ink-3); } .kzc-extras { display: flex; flex-direction: column; gap: 5px; } .kzc-extrarij { display: flex; align-items: center; gap: 7px; font-size: .74rem; } .kzc-extrarij > span:first-child { flex: 1; min-width: 0; } .kzc-extrarij input { width: 62px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; padding: 3px 6px; font: 500 .74rem var(--font-ui); } .kzc-extrarij input:focus-visible { outline: var(--focus-ring); outline-offset: 1px; } .kzc-opbouwrij.is-optie { color: var(--c-ink-3); font-style: italic; } /* KO6 · de maatcodes van een dakraam */ .kzc-maatrij { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 5px; } .kzc-maatrij .kzc-model b { font-size: .76rem; color: var(--c-ink); } /* ═══ KO7 · wat de klant ziet ═══ */ .kzv-rooster { grid-template-columns: 320px minmax(0, 1fr); } @media (max-width: 1180px) { .kzv-rooster { grid-template-columns: 1fr; } } .kzv-positie { border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 9px; background: var(--c-paneel); } .kzv-poskop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .kzv-poskop b { font-size: .86rem; } .kzv-poskop span { display: block; font-size: .68rem; color: var(--c-ink-3); } .kzv-poskop .mono { font-size: .92rem; color: var(--c-groen-d); } .kzv-tek { display: flex; justify-content: center; padding: 8px 0 4px; } .kzv-tek svg { max-width: 100%; height: auto; } .kzv-spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 7px; padding-top: 8px; border-top: var(--lijndikte) solid var(--c-lijn); } .kzv-spec span { display: block; font-size: .56rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-3); } .kzv-spec b { font-size: .74rem; font-weight: 600; } .kzv-extras { margin-top: 9px; padding-top: 7px; border-top: var(--lijndikte) solid var(--c-lijn); display: flex; flex-direction: column; gap: 3px; } .kzv-extra { display: flex; justify-content: space-between; gap: 10px; font-size: .74rem; color: var(--c-ink-2); } .kzv-possom { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px; padding-top: 6px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; font-weight: 700; } .kzv-totaal { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 14px; border: var(--lijndikte) solid var(--c-groen); border-radius: var(--radius); background: var(--kaart); box-shadow: var(--schaduw-tegel); } .kzv-totaal .mono { font-size: 1.15rem; font-weight: 800; color: var(--c-groen-d); } .kzv-knoppen { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .kzv-knoppen a.kzc-knopje { text-decoration: none; display: inline-block; } /* de vaste aanzichten op het klantvoorstel (route B, open punt §8.1) */ .kzv-strip { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; margin-top: 4px; } .kzc-standknop .kzc-stand { min-width: 30px; text-align: center; } /* OFFERTE ÉÉN BRON · OB6 · de verkooplaag */ .kzk-intern { font-style: normal; font: .58rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); border: var(--lijndikte) solid var(--lijn); border-radius: 3px; padding: 0 4px; vertical-align: middle; } .kzk-velden { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px 12px; margin: 10px 0; } .kzk-velden .bs-veld--breed { grid-column: auto; } .kzk-kanaal { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--ink2); } @media (max-width: 720px) { .kzk-velden { grid-template-columns: minmax(0, 1fr); } } .kzc-knop:disabled, .kzc-knopje:disabled { opacity: .45; cursor: not-allowed; } /* ── doorzet.css ── */ /* doorzet.css — de fase Doorzetten (bouwspec Offertes isolatie §5). Links de lijst met wat er wacht, rechts wat eruit komt. De opmaak blijft kaal: op dit scherm doet maar één knop er echt toe. Alleen tokens. */ .dz-wortel { max-width: var(--werkbreedte, 1240px); margin: 0 auto; width: 100%; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 14px; } .dz-kop { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; } .dz-h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; } .dz-rek { flex: 1; } .dz-oudste { font-size: .74rem; color: var(--c-ink-3); font-weight: 700; } .dz-oudste.is-let { color: var(--c-amber); } .dz-let { font-size: .72rem; color: var(--c-ink-3); font-style: italic; margin: 0; line-height: 1.6; } .dz-let a { color: var(--c-groen-d); } .dz-rs { font-style: normal; } /* twee kolommen: de lijst en het splitsvoorstel */ .dz-twee { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; } @media (max-width: 1080px) { .dz-twee { grid-template-columns: minmax(0, 1fr); } } .dz-kolL, .dz-kolR { min-width: 0; } .dz-lijst { display: flex; flex-direction: column; gap: 8px; } .dz-kaart { display: flex; flex-direction: column; gap: 3px; text-align: left; width: 100%; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-groen); border-radius: var(--radius); padding: 11px 13px; cursor: pointer; font-family: inherit; box-shadow: var(--schaduw-tegel); transition: border-color 160ms ease, background 160ms ease; } .dz-kaart.is-voorbehoud { border-left-color: var(--c-amber); } .dz-kaart.is-gekozen { background: var(--c-groen-t); border-color: var(--c-groen); } .dz-kaart:hover { border-color: var(--c-groen); } .dz-kr1 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: .86rem; } .dz-stand { font-size: .56rem; font-weight: 700; letter-spacing: .07em; color: var(--c-ink-3); white-space: nowrap; } .dz-kaart.is-voorbehoud .dz-stand { color: var(--c-amber); } .dz-ks { font-size: .7rem; color: var(--c-ink-3); } .dz-leeg { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 22px 18px; text-align: center; font-size: .86rem; font-weight: 700; color: var(--c-groen-d); } .dz-leeg span { display: block; margin-top: 5px; font-size: .72rem; font-weight: 400; color: var(--c-ink-3); } /* het dagstart-signaal (besluit 14) */ .dz-dagstart { background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 13px 15px; display: flex; flex-direction: column; gap: 8px; } .dz-dskop { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .66rem; color: var(--c-ink-3); } .dz-dstegel { display: flex; align-items: center; gap: 14px; } .dz-cijfer { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--c-amber); } .dz-cijfer.is-goed { color: var(--c-groen-d); } .dz-dstekst { font-size: .78rem; line-height: 1.55; color: var(--c-ink-2); } .dz-dstekst b { color: var(--c-ink); } /* het splitsvoorstel */ .dz-detail { display: flex; flex-direction: column; gap: 11px; } .dz-h2 { margin: 4px 0 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; } .dz-nr { font-size: .76rem; color: var(--c-ink-3); font-weight: 600; } .dz-sub { margin: 0; font-size: .74rem; color: var(--c-ink-2); line-height: 1.6; } .dz-voorbehoud { background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-amber); border-radius: var(--radius); padding: 10px 13px; font-size: .76rem; line-height: 1.6; color: var(--c-ink-2); } .dz-opk { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--schaduw-tegel); } .dz-opkop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .88rem; padding-bottom: 8px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .dz-opkop span { font-size: .66rem; color: var(--c-ink-3); } .dz-oprooster { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; padding-top: 9px; } .dz-oprooster span { display: block; font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-3); margin-bottom: 2px; } .dz-oprooster b { font-size: .8rem; } .dz-koppel { display: flex; gap: 9px; align-items: flex-start; font-size: .78rem; font-weight: 700; } .dz-koppel input { width: 17px; height: 17px; accent-color: var(--c-groen); margin-top: 1px; flex: 0 0 auto; } .dz-koppel i { display: block; font-weight: 400; font-style: normal; color: var(--c-ink-3); font-size: .7rem; } .dz-acties { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; } .dz-slot { font-size: .74rem; font-weight: 700; color: var(--c-amber); } .dz-gedaan { background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); border-radius: var(--radius); padding: 10px 13px; font-size: .78rem; line-height: 1.6; color: var(--c-groen-d); } .dz-gedaan a { color: var(--c-groen-d); } /* VA3 · fiat-verzoeken korting bovenaan de doorzetlijst */ .dz-fiats { margin: 0 0 14px; padding: 14px 16px; display: grid; gap: 8px; border-left: 3px solid var(--let); } .dz-fiatkop { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .dz-fiatrij { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--lijn); } .dz-fiatknoppen { display: flex; gap: 6px; flex-shrink: 0; } /* ---- bladeren en zoeken in de lijst links (BS.maakBlader) ---- De kolom is smal en de kaarten staan los: de voet krijgt hier geen lijn erboven en het zoekveld vult de kolom. */ .dz-kolL .bs-blzoek { flex: 1 1 100%; } .dz-kolL .bs-paging--bl { border-top: 0; padding: 10px 2px 0; } /* ── werkbak.css ── */ /* werkbak.css — de voordeur van Verkoop (bouwspec Verkoopstraat v7 §3.1). Kleurkeuze: te lang wachten is een **signaal**, geen blokkade — daarom amber/terra en géén rood. Rood blijft in dit platform voorbehouden aan blokkades en confidence D (CLAUDE.md). Eén rij per opname, en de wachttijd is het enige dat opvalt: een gekleurde rand links en één cijfer rechts. Verder blijft het scherm kaal, want de binnendienst scant hier en leest niet. Alleen tokens. */ .wbk-wortel { max-width: var(--werkbreedte, 1240px); margin: 0 auto; width: 100%; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 14px; } .wbk-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .wbk-kop h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; } .wbk-lead { margin: 6px 0 0; max-width: 62ch; font-size: .78rem; line-height: 1.6; color: var(--c-ink-2); } .wbk-regelset { font-size: .64rem; color: var(--c-ink-3); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: 99px; padding: 5px 11px; white-space: nowrap; } .wbk-meld { border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 11px 14px; font-size: .78rem; line-height: 1.6; color: var(--c-ink-2); background: var(--c-paneel); } .wbk-meld.is-stop { background: var(--c-amber-t); border-color: var(--c-amber); } .wbk-meld.is-goed { background: var(--c-groen-t); border-color: var(--c-groen); } .wbk-meld b { color: var(--c-ink); } .wbk-zoek { display: flex; align-items: center; gap: 8px; } .wbk-zoek .bs-zoek { flex: 1; max-width: 380px; } .wbk-hoofd { margin: 8px 0 0; font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); font-weight: 700; } /* één rij per opname — zes kolommen, links de wachttijdkleur */ .wbk-rij { display: grid; align-items: center; gap: 12px; grid-template-columns: 34px minmax(0, 2.1fr) minmax(0, 1.3fr) minmax(0, 1.2fr) 120px auto; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-lijn); border-radius: var(--radius); padding: 11px 14px; box-shadow: var(--schaduw-tegel); transition: border-color 160ms ease; } .wbk-rij:hover { border-color: var(--c-groen); } .wbk-rij.is-goed { border-left-color: var(--c-groen); } .wbk-rij.is-let { border-left-color: var(--c-amber); } .wbk-rij.is-stop { border-left-color: var(--c-terra-d); } .wbk-rij.is-rust { border-left-color: var(--c-lijn); } @media (max-width: 1080px) { .wbk-rij { grid-template-columns: 34px minmax(0, 1fr); grid-auto-rows: min-content; } .wbk-rij .wbk-kol, .wbk-rij .wbk-akties { grid-column: 2; } } .wbk-avatar { width: 30px; height: 30px; border-radius: 99px; display: flex; align-items: center; justify-content: center; font-size: .64rem; font-weight: 800; letter-spacing: .02em; background: var(--c-groen-t); color: var(--c-groen-d); border: var(--lijndikte) solid var(--c-lijn); } .wbk-kol { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .82rem; } .wbk-kol b { font-weight: 700; } .wbk-sub { font-size: .69rem; color: var(--c-ink-3); line-height: 1.45; overflow: hidden; text-overflow: ellipsis; } .wbk-kol--wacht { text-align: right; } .wbk-kol--wacht b { font-size: .92rem; font-weight: 800; } .wbk-kol--wacht b.is-goed { color: var(--c-groen-d); } .wbk-kol--wacht b.is-let { color: var(--c-amber); } .wbk-kol--wacht b.is-stop { color: var(--c-terra-d); } .wbk-kol--wacht b.is-rust { color: var(--c-ink-3); } .wbk-stat { display: inline-block; align-self: flex-start; font-size: .64rem; font-weight: 700; border: var(--lijndikte) solid var(--c-lijn); border-radius: 99px; padding: 3px 9px; color: var(--c-ink-2); } .wbk-stat.is-goed { border-color: var(--c-groen); color: var(--c-groen-d); } .wbk-stat.is-let { border-color: var(--c-amber); color: var(--c-amber); } .wbk-akties { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; } .wbk-akties .btn { padding: 5px 11px; font-size: .7rem; } /* de opname zelf, in de drawer */ .wbk-opnamekaart { background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; } .wbk-opnamekaart p { margin: 0; font-size: .8rem; line-height: 1.6; color: var(--c-ink-2); } .wbk-lijstje { margin: 0; padding-left: 16px; font-size: .74rem; color: var(--c-ink-2); line-height: 1.7; } .wbk-let { font-size: .72rem; color: var(--c-ink-3); font-style: italic; line-height: 1.6; margin: 10px 0 0; } .wbk-bijlagen { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } /* WB1/WB4 · bron, tafelvoorstel en de halten per spoor in de rij */ .wbk-bron { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 99px; border: 1px solid var(--lijn); font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: var(--ink2); vertical-align: middle; } .wbk-bron.is-tafel { border-color: var(--let); color: var(--let); } .wbk-halten { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; } .wbk-halte { font-size: 10.5px; padding: 1px 7px; border-radius: 99px; background: var(--paneel); border: 1px solid var(--lijn); color: var(--ink2); } .wbk-halte.is-tafelvoorstel { border-color: var(--let); color: var(--let); } .wbk-halte.is-akkoord, .wbk-halte.is-doorgezet { border-color: var(--goed); color: var(--goed); } /* IS1 · tabbladen Opnames · Aanvragen, en het ingebedde instroomscherm zonder eigen module-wortel */ .wbk-tabs { display: flex; gap: 4px; margin: 14px 0 10px; border-bottom: 1px solid var(--lijn); } .wbk-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; font: inherit; font-weight: 600; color: var(--ink2); cursor: pointer; border-radius: 0; } .wbk-tab.is-actief { color: var(--ink); border-bottom-color: var(--accent); } .wbk-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } /* 09-10 · het aantal onder elk tabblad; op nul stil (geen vlak), nooit kleur — kleur is betekenis */ .wbk-tab__tel { display: inline-block; margin-left: 7px; padding: 0 7px; min-width: 20px; border-radius: var(--radius-pill); background: var(--grijs); color: var(--ink2); font-size: .72rem; line-height: 18px; font-weight: 700; vertical-align: 1px; } .wbk-tab.is-actief .wbk-tab__tel { background: var(--accent-t); color: var(--ink); } .wbk-tab__tel.is-nul { background: none; color: var(--ink3); padding: 0 2px; } .wbk-aanvraag-groep { display: flex; gap: 8px; margin: 0 0 6px; } .wbk-aanvraag-groep .bs-chip.is-actief { background: var(--accent-t); color: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } [data-wbk-aanvragen] .in-wortel { max-width: none; padding: 8px 0 48px; } /* VERKOPERS-APP §4 B–D (10-10) · het verhaal van tafel, de lus met de verkoper en de geweigerde acties uit de app */ .wbk-meld.is-let { background: var(--let-t); border-color: var(--let); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .wbk-notitie { color: var(--ink); font-style: italic; } .wbk-bron.is-aangevuld { margin-left: 0; border-color: var(--goed); color: var(--goed-d, var(--goed)); } .wbk-tafel { display: grid; gap: 8px; margin-top: 12px; } .wbk-quote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--lijn2); font-size: .84rem; line-height: 1.55; color: var(--ink); } .wbk-quote cite { display: block; margin-top: 4px; font-style: normal; font-size: .68rem; color: var(--ink3); } .wbk-tafeltabel { display: grid; gap: 0; } /* een regel van tafel: de naam bovenaan, eronder omvang × prijs, de afwijking en rechts het bedrag — past in de smalle drawer */ .wbk-tafelregel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; padding: 6px 0; border-top: var(--lijndikte) solid var(--lijn); font-size: .74rem; color: var(--ink2); } .wbk-tafelregel:first-child { border-top: 0; } .wbk-tafelregel__naam { grid-column: 1; color: var(--ink); font-weight: 600; } .wbk-tafelregel__bedrag { grid-column: 2; grid-row: 1; color: var(--ink); text-align: right; } .wbk-tafelregel .wbk-stat { grid-column: 1 / -1; justify-self: start; } .wbk-tafelrij { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; padding: 5px 0; border-top: var(--lijndikte) solid var(--lijn); font-size: .74rem; color: var(--ink2); } .wbk-tafelrij b { color: var(--ink); text-align: right; font-weight: 600; } .wbk-foto { display: inline-grid; gap: 4px; justify-items: start; text-decoration: none; color: var(--ink2); font-size: .68rem; } .wbk-foto img { width: 132px; height: 96px; object-fit: cover; border-radius: var(--radius-klein); border: var(--lijndikte) solid var(--lijn2); } .wbk-foto:focus-visible { outline: var(--focus-ring); outline-offset: 3px; } .wbk-aanvullingen { display: grid; gap: 6px; padding-top: 6px; border-top: var(--lijndikte) solid var(--lijn); } .wbk-aanvulling p { margin: 2px 0; color: var(--ink); } /* ── opname.css ── */ /* opname.css — stap 1 van de werkstraat (bouwspec Verkoopstraat v7 §8, V2). Links wat er binnenkwam, rechts wat de binnendienst ermee doet. De stappenbalk bovenaan zegt waar je bent en waar je heen kunt; verder blijft het scherm een leesscherm. Alleen tokens. */ .opn-wortel { max-width: var(--werkbreedte, 1240px); margin: 0 auto; width: 100%; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 14px; } .opn-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .opn-kop h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; } .opn-sub { margin: 5px 0 0; font-size: .76rem; color: var(--c-ink-2); line-height: 1.6; } .opn-kopakties { display: flex; gap: 6px; flex-wrap: wrap; } /* de stappenbalk — één rij per spoor */ .opn-balk { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 7px 9px; } .opn-spoorlabel { align-self: center; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-3); padding: 0 6px; } .opn-stap { display: flex; align-items: baseline; gap: 7px; flex: 1; min-width: 150px; text-align: left; background: transparent; border: var(--lijndikte) solid transparent; border-radius: var(--radius); padding: 7px 11px; font-family: inherit; font-size: .78rem; color: var(--c-ink-2); transition: background 160ms ease, border-color 160ms ease; } button.opn-stap { cursor: pointer; } button.opn-stap:hover { background: var(--kaart); border-color: var(--c-groen); color: var(--c-ink); } .opn-stap b { font-family: var(--mono, ui-monospace), monospace; font-size: .66rem; font-weight: 800; color: var(--c-ink-3); } .opn-stap em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); } .opn-stap.is-nu { background: var(--kaart); border-color: var(--c-groen); color: var(--c-ink); font-weight: 700; } .opn-stap.is-nu b { color: var(--c-groen-d); } .opn-stap.is-uit { opacity: .55; } .opn-nr { align-self: center; font-size: .64rem; color: var(--c-ink-3); padding: 0 6px; } .opn-meld { background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-amber); border-radius: var(--radius); padding: 11px 14px; font-size: .78rem; line-height: 1.6; color: var(--c-ink-2); } .opn-meld b { color: var(--c-ink); } .opn-twee { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; } @media (max-width: 1020px) { .opn-twee { grid-template-columns: minmax(0, 1fr); } } .opn-kol { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .opn-kaart { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 13px 15px; box-shadow: var(--schaduw-tegel); } .opn-kaart.is-nadruk { border-color: var(--c-ink); } .opn-kaart h3 { margin: 0 0 9px; font-size: .82rem; font-weight: 800; letter-spacing: -.01em; } .opn-veld { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 5px 0; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; } .opn-veld:first-of-type { border-top: 0; } .opn-veld span { color: var(--c-ink-3); font-size: .7rem; } .opn-veld b { text-align: right; font-weight: 700; } .opn-notitie { margin-top: 10px; border-top: var(--lijndikte) solid var(--c-lijn); padding-top: 9px; } .opn-notitie p { margin: 5px 0 0; font-size: .8rem; line-height: 1.65; color: var(--c-ink-2); } .opn-bijlagen { display: flex; flex-direction: column; gap: 6px; } .opn-bijlage { display: flex; align-items: center; gap: 9px; text-decoration: none; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 8px 11px; color: var(--c-ink); transition: border-color 160ms ease; } .opn-bijlage:hover { border-color: var(--c-groen); } .opn-bijlage b { font-size: .76rem; font-weight: 700; display: block; } .opn-bijlage em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); } .opn-bijicoon { color: var(--c-ink-3); font-size: .9rem; } /* het akkoord aan tafel */ .opn-keuze { display: block; width: 100%; text-align: left; background: var(--kaart); cursor: pointer; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 8px 11px; margin-bottom: 5px; font-family: inherit; transition: border-color 160ms ease, background 160ms ease; } .opn-keuze:hover { border-color: var(--c-groen); } .opn-keuze.is-nu { border-color: var(--c-groen); background: var(--c-groen-t); } .opn-keuze b { font-size: .78rem; font-weight: 700; } .opn-keuze em { font-style: normal; font-size: .7rem; color: var(--c-ink-3); display: block; } .opn-vb { margin-top: 8px; } .opn-check { display: flex; gap: 9px; padding: 7px 0; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .76rem; } .opn-check:first-of-type { border-top: 0; } .opn-check b { font-weight: 700; } .opn-check em { font-style: normal; display: block; font-size: .68rem; color: var(--c-ink-3); line-height: 1.5; } .opn-vink { font-weight: 800; } .opn-vink.is-goed { color: var(--c-groen-d); } .opn-vink.is-let { color: var(--c-amber); } .opn-vink.is-stop { color: var(--c-rood); } .opn-let { font-size: .72rem; color: var(--c-ink-3); font-style: italic; line-height: 1.6; margin: 9px 0 0; } .opn-goed { font-size: .74rem; color: var(--c-groen-d); line-height: 1.6; margin: 9px 0 0; } .opn-door { width: 100%; justify-content: center; margin-bottom: 6px; } .opn-door em { font-style: normal; font-size: .66rem; opacity: .8; margin-left: 6px; } .opn-tl { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 9px; font-size: .72rem; padding: 6px 0; border-top: var(--lijndikte) solid var(--c-lijn); } .opn-tl:first-of-type { border-top: 0; } .opn-tl span:first-child { color: var(--c-ink-3); font-size: .64rem; } .opn-tl em { font-style: normal; display: block; font-size: .66rem; color: var(--c-ink-3); line-height: 1.5; } /* WB1/WB2 · app-opname en verschil opname ↔ offerte */ .opn-tabel { width: 100%; border-collapse: collapse; margin: 6px 0; } .opn-tabel td { padding: 4px 0; border-bottom: 1px solid var(--lijn); font-size: 13px; } .opn-tabel td:last-child, .opn-tabel td:nth-child(2) { text-align: right; } .opn-tabel tr.opn-tot td { font-weight: 700; border-bottom: 0; } .opn-verschil { border-left: 3px solid var(--goed); } .opn-verschil.is-let { border-left-color: var(--let); } .opn-verschil.is-stop { border-left-color: var(--stop); } .opn-verschilrij { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 13px; } .opn-verschilrij.opn-tot { font-weight: 700; border-top: 1px solid var(--lijn); margin-top: 4px; padding-top: 6px; } /* PF3 (gat 20) · het gesprek aan tafel */ .opn-gesprek { margin-top: 12px; padding-top: 10px; border-top: var(--lijndikte) solid var(--c-lijn); } .opn-gesprek__lijst { display: grid; grid-template-columns: minmax(140px, 32%) 1fr; gap: 4px 12px; margin: 8px 0 0; font-size: .9rem; } .opn-gesprek__lijst dt { color: var(--c-ink-2); } .opn-gesprek__lijst dd { margin: 0; } /* ── vkbeheer.css ── */ /* vkbeheer.css — de regels van de verkoopstraat (Verkoopstraat v7 §8, V8). Vier blokken onder elkaar, elk met zijn regelsetversie zichtbaar in de kop. Dat is geen detail: het is de reden dat een oude offerte over een jaar nog uit te leggen valt. Alleen tokens. */ .vbr-wortel { max-width: var(--werkbreedte, 1240px); margin: 0 auto; width: 100%; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 14px; } .vbr-hoofd h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; } .vbr-lead { margin: 6px 0 0; max-width: 70ch; font-size: .78rem; line-height: 1.6; color: var(--c-ink-2); } .vbr-blokken { display: flex; flex-direction: column; gap: 12px; } .vbr-kaart { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--schaduw-tegel); } .vbr-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .vbr-kop h3 { margin: 0; font-size: .92rem; font-weight: 800; letter-spacing: -.01em; } .vbr-versie { text-align: right; font-size: .64rem; color: var(--c-ink-3); white-space: nowrap; background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 6px 11px; line-height: 1.5; } .vbr-versie em { font-style: normal; } .vbr-tabel { width: 100%; border-collapse: collapse; margin-top: 11px; } .vbr-tabel th { text-align: left; vertical-align: top; width: 170px; padding: 8px 12px 8px 0; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .74rem; font-weight: 700; color: var(--c-ink-2); } .vbr-tabel td { padding: 8px 0; border-top: var(--lijndikte) solid var(--c-lijn); } .vbr-w { display: inline-flex; flex-direction: column; gap: 1px; margin: 0 18px 6px 0; } .vbr-w em { font-style: normal; font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); font-weight: 700; } .vbr-w b { font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; } .vbr-akties { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; } .vbr-let { font-size: .72rem; color: var(--c-ink-3); line-height: 1.6; margin: 5px 0 0; } .vbr-groep { border-top: var(--lijndikte) solid var(--c-lijn); padding-top: 10px; margin-top: 10px; } .vbr-groep:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; } .vbr-meld { background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 10px 13px; font-size: .75rem; line-height: 1.6; color: var(--c-ink-2); margin-top: 12px; } .vbr-meld b { color: var(--c-ink); } /* de marge-ondergrens per maatregel: haalt de prijslijst hem? */ .vbr-tabel tr.is-let th { color: var(--c-amber); } .vbr-waar, .vbr-ok, .vbr-toel { font-style: normal; display: block; font-weight: 400; font-size: .64rem; line-height: 1.45; margin-top: 2px; } .vbr-waar { color: var(--c-amber); } .vbr-ok, .vbr-toel { color: var(--c-ink-3); } /* MG1 · een waarde die uit de productcategorie komt is hier alleen te lezen; aanpassen doe je in het blok «Minimale marge per productcategorie». */ .vbr-w--afgeleid b { color: var(--c-ink-2); } .vbr-w--afgeleid em::after { content: " ↗"; color: var(--c-ink-3, var(--c-ink-2)); } /* OB8 · groepen en verwijzingen */ .vbr-groepkop { font-size: .82rem; font-weight: 800; letter-spacing: .02em; margin: 22px 0 10px; color: var(--ink2); } .vbr-links { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .vbr-links li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 6px 0; border-top: var(--lijndikte) solid var(--lijn); font-size: .8rem; } .vbr-links em { font-style: normal; font-size: .66rem; color: var(--ink3); } /* ── support.css ── */ /* support.css — Meldingen (bouwspec SUPPORT §2.1, fase S1). Kleurkeuze: rood (terra-d) is hier voorbehouden aan wat écht klem zit — geen woning gekoppeld, een klant die na het sluiten zegt dat het niet opgelost is, en een verlopen reactienorm. Alles wat alleen aandacht vraagt is amber. De WIP-limiet kleurt amber en niet rood: hij is een signaal, geen blokkade (§2.1). Dit scherm is breder dan de moduleregel van 1240px omdat het een bord met vijf kolommen én het dossier naast elkaar draagt — de vastgelegde uitzondering voor borden. Alleen tokens, geen losse hex of schaduw. */ .sup-wortel { max-width: var(--werkbreedte-breed, 1360px); margin: 0 auto; width: 100%; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 14px; } .sup-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .sup-kop h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; } .sup-kicker { font-family: var(--font-mono); font-size: .6rem; text-transform: uppercase; letter-spacing: .12em; color: var(--c-ink-3); margin: 0; } .sup-lead { margin: 6px 0 0; max-width: 64ch; font-size: .78rem; line-height: 1.6; color: var(--c-ink-2); } .sup-regelset { font-family: var(--font-mono); font-size: .62rem; color: var(--c-ink-3); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: 99px; padding: 5px 11px; white-space: nowrap; } /* ---- signaalstrip: één regel per signaal ---- */ .sup-sig { border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: var(--c-paneel); overflow: hidden; } .sup-sig.is-goed { background: var(--c-groen-t); border-color: var(--c-groen); padding: 11px 14px; font-size: .78rem; color: var(--c-ink-2); } .sup-sig.is-goed b { color: var(--c-ink); } .sup-sigkop { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: none; border: 0; padding: 10px 14px; cursor: pointer; font: inherit; font-size: .72rem; font-weight: 700; color: var(--c-ink-2); text-align: left; } .sup-caret { color: var(--c-ink-3); } .sup-sigrijen { display: flex; flex-direction: column; border-top: var(--lijndikte) solid var(--c-lijn); } .sup-sigrij { display: grid; grid-template-columns: 12px 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 14px; background: none; border: 0; border-top: var(--lijndikte) solid var(--c-lijn); cursor: pointer; font: inherit; font-size: .76rem; color: var(--c-ink-2); text-align: left; transition: background 160ms ease; } .sup-sigrij:first-child { border-top: 0; } .sup-sigrij:hover { background: var(--c-paneel-2); } .sup-sigrij b { font-family: var(--font-mono); color: var(--c-ink); } .sup-bol { width: 8px; height: 8px; border-radius: 99px; background: var(--c-lijn); } .sup-sigrij.is-stop .sup-bol { background: var(--c-terra-d); } .sup-sigrij.is-let .sup-bol { background: var(--c-amber); } .sup-nrs { font-family: var(--font-mono); font-size: .62rem; color: var(--c-ink-3); white-space: nowrap; } /* ---- filters + weergave-schakelaar ---- */ .sup-filters { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; } .sup-schakel { display: inline-flex; border: var(--lijndikte) solid var(--c-lijn); border-radius: 99px; overflow: hidden; background: var(--c-paneel); } .sup-sch { border: 0; background: none; padding: 7px 16px; font: inherit; font-size: .74rem; font-weight: 700; color: var(--c-ink-3); cursor: pointer; transition: background 160ms ease, color 160ms ease; } .sup-sch.is-aan { background: var(--c-groen); color: var(--knop-ink); } .sup-vld { display: flex; flex-direction: column; gap: 4px; font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); font-weight: 700; } .sup-vld input, .sup-vld select { font: inherit; font-size: .78rem; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--c-ink); padding: 7px 10px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: var(--kaart); min-width: 170px; } .sup-vld input[type="search"] { min-width: 260px; } /* ---- het vlak: links de lijst of het bord, rechts het dossier ---- */ .sup-vlak { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; } .sup-vlak.is-open { grid-template-columns: minmax(0, 1fr) 440px; } @media (max-width: 1180px) { .sup-vlak.is-open { grid-template-columns: minmax(0, 1fr); } } .sup-links { min-width: 0; display: flex; flex-direction: column; gap: 8px; } .sup-hoofd { margin: 6px 0 0; font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); font-weight: 700; } .sup-niets { font-size: .74rem; color: var(--c-ink-3); margin: 4px 0; } .sup-lijst { display: flex; flex-direction: column; gap: 8px; } /* één rij per melding — links de ernstkleur, rechts de klok */ .sup-rij { display: grid; align-items: center; gap: 12px; width: 100%; text-align: left; grid-template-columns: 22px minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.3fr) 150px; /* «21,5 werkdagen te laat» past op één regel */ background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-lijn); border-radius: var(--radius); padding: 10px 14px; cursor: pointer; font: inherit; box-shadow: var(--schaduw-tegel); transition: border-color 160ms ease; } .sup-rij:hover { border-color: var(--c-groen); } .sup-rij.is-gekozen { border-color: var(--c-groen); background: var(--c-groen-t); } .sup-rij.is-goed { border-left-color: var(--c-groen); } .sup-rij.is-let { border-left-color: var(--c-amber); } .sup-rij.is-stop { border-left-color: var(--c-terra-d); } .sup-rij.is-rust { border-left-color: var(--c-lijn); } .sup-soortbol { font-size: .9rem; color: var(--c-ink-3); text-align: center; } .sup-cel { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .8rem; color: var(--c-ink); } .sup-cel b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sup-cel em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sup-leeg { font-style: normal; color: var(--c-amber); } .sup-klok { display: flex; flex-direction: column; gap: 2px; text-align: right; font-family: var(--font-mono); font-size: .72rem; color: var(--c-ink); } .sup-klok em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); } @media (max-width: 1080px) { .sup-rij { grid-template-columns: 22px minmax(0, 1fr) 110px; } .sup-rij .sup-kanaal, .sup-rij .sup-eig { display: none; } } /* ---- het bord: vijf fasen, WIP als signaal ---- */ .sup-bord { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 6px; } .sup-kolom { display: flex; flex-direction: column; gap: 8px; min-width: 0; background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 10px; } .sup-kolom > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .74rem; } .sup-wip { font-family: var(--font-mono); font-size: .64rem; color: var(--c-ink-3); border: var(--lijndikte) solid var(--c-lijn); border-radius: 99px; padding: 2px 8px; background: var(--kaart); } .sup-wip.is-over { color: var(--c-amber); border-color: var(--c-amber); background: var(--c-amber-t); } .sup-kolom.is-vol { border-color: var(--c-amber); } .sup-wipuitleg { margin: 0; font-size: .66rem; line-height: 1.5; color: var(--c-ink-3); } .sup-kaart { display: flex; flex-direction: column; gap: 3px; text-align: left; width: 100%; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 9px 11px; cursor: pointer; font: inherit; box-shadow: var(--schaduw-tegel); transition: border-color 160ms ease; } .sup-kaart:hover { border-color: var(--c-groen); } .sup-kaart.is-gekozen { border-color: var(--c-groen); background: var(--c-groen-t); } .sup-kaartkop { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .62rem; color: var(--c-ink-3); } .sup-kaart b { font-size: .76rem; line-height: 1.4; color: var(--c-ink); } .sup-kaart em { font-style: normal; font-size: .68rem; color: var(--c-ink-2); } .sup-kaartklok { font-family: var(--font-mono); font-size: .62rem; color: var(--c-ink-3); } .sup-kaartklok.is-stop { color: var(--c-terra-d); } .sup-kaartklok.is-let { color: var(--c-amber); } /* ---- het dossier: de rechterhelft, geen tweede scherm ---- */ .sup-dossier { display: flex; flex-direction: column; gap: 12px; min-width: 0; background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 16px 18px; } .sup-dossier.is-leeg { font-size: .78rem; line-height: 1.6; color: var(--c-ink-2); } .sup-uitleg { margin: 0; font-size: .7rem; line-height: 1.6; color: var(--c-ink-3); } .sup-doskop h2 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; margin: 4px 0 0; line-height: 1.35; } .sup-dossub { margin: 4px 0 0; font-size: .72rem; color: var(--c-ink-2); } .sup-rood { color: var(--c-terra-d); font-weight: 700; } .sup-watnu { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: var(--kaart); } .sup-watnu.is-stop { background: var(--c-terra-t); border-color: var(--c-terra-d); } .sup-watnu.is-let { background: var(--c-amber-t); border-color: var(--c-amber); } .sup-watnu b { font-size: .82rem; } .sup-watnu span { font-size: .72rem; line-height: 1.55; color: var(--c-ink-2); } .sup-feiten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: var(--kaart); overflow: hidden; } .sup-feit { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 10px; padding: 7px 12px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .74rem; } .sup-feit:first-child { border-top: 0; } .sup-feit span { color: var(--c-ink-3); } .sup-feit b { font-weight: 600; color: var(--c-ink); word-break: break-word; } .sup-blok { display: flex; flex-direction: column; gap: 8px; } .sup-blok h3 { font-size: .78rem; font-weight: 800; margin: 0; } .sup-blokkop { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .sup-wissel { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: var(--kaart); } .sup-wissel .sup-vld input, .sup-wissel .sup-vld select { min-width: 0; width: 100%; } .sup-tijdlijn { list-style: none; margin: 0; padding: 0 0 0 14px; display: flex; flex-direction: column; gap: 10px; border-left: var(--lijndikte) solid var(--c-lijn); } .sup-tijdlijn li { display: flex; flex-direction: column; gap: 2px; position: relative; font-size: .74rem; line-height: 1.55; color: var(--c-ink); } .sup-tijdlijn li::before { content: ""; position: absolute; left: -18px; top: 6px; width: 7px; height: 7px; border-radius: 99px; background: var(--c-lijn); } .sup-tijdlijn li.is-in::before { background: var(--c-groen); } .sup-tijdlijn li.is-uit::before { background: var(--c-ink-3); } .sup-tijdlijn li.is-escalatie::before { background: var(--c-terra-d); } .sup-tlkop { font-family: var(--font-mono); font-size: .62rem; color: var(--c-ink-3); } .sup-audit { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .sup-audit li { font-size: .72rem; line-height: 1.5; color: var(--c-ink-2); } .sup-audit b { color: var(--c-ink); } .sup-audit em { display: block; font-style: normal; font-family: var(--font-mono); font-size: .6rem; color: var(--c-ink-3); } /* ═══ S2 · de handelingen op een melding ════════════════════════════ Zeven knoppen op een rij, en één paneel tegelijk eronder. De knoppen zijn bewust klein en gelijk: alleen wat nú het meest voor de hand ligt (oppakken, of het eerste antwoord) krijgt de primaire vorm. */ .sup-acties { display: flex; flex-wrap: wrap; gap: 6px; } .sup-acties .bs-knop.is-aan { border-color: var(--c-groen); } .sup-paneel { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: var(--lijndikte) solid var(--c-groen); border-radius: var(--radius); background: var(--c-paneel); } .sup-paneelkop { margin: 0; font-size: .82rem; font-weight: 800; } .sup-form { display: flex; flex-direction: column; gap: 10px; } .sup-form .bs-knop { align-self: flex-start; } .sup-velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; } /* zoekresultaten bij «woning koppelen»: één regel per adres, klikbaar */ .sup-treffers { display: flex; flex-direction: column; gap: 4px; } .sup-treffer { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; text-align: left; font: inherit; font-size: .74rem; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 8px 12px; cursor: pointer; transition: border-color 160ms ease; } .sup-treffer:hover { border-color: var(--c-groen); } .sup-treffer em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); } @media (max-width: 1080px) { .sup-treffer { grid-template-columns: minmax(0, 1fr) auto; } .sup-treffer > span:nth-child(2) { display: none; } } /* ═══ S3 · de intake ════════════════════════════════════════════════ Drie stappen in een overlay. Bewust een modaal en geen apart scherm: de intake gebeurt met een klant aan de lijn, en dan wil je de lijst erachter kunnen laten staan. */ .sup-kopacties { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sup-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; background: color-mix(in srgb, var(--c-ink) 42%, transparent); overflow-y: auto; } .sup-modaal { width: min(940px, 100%); display: flex; flex-direction: column; background: var(--c-paneel-2, var(--kaart)); border-radius: var(--radius); border: var(--lijndikte) solid var(--c-lijn); box-shadow: var(--schaduw-tegel); } .sup-modkop { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .sup-modkop > b { font-size: .92rem; } .sup-stappen { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; font-size: .68rem; color: var(--c-ink-3); } .sup-stappen li.is-nu { color: var(--c-ink); font-weight: 800; } .sup-stappen li.is-klaar { color: var(--c-groen-d); } .sup-modkop .bs-knop { margin-left: auto; } .sup-modlijf { padding: 18px; display: flex; flex-direction: column; gap: 14px; } .sup-modtitel { margin: 0; font-size: 1rem; font-weight: 800; } .sup-modvoet { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: var(--lijndikte) solid var(--c-lijn); } .sup-vul { flex: 1; } .sup-woningkaart { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: var(--lijndikte) solid var(--c-groen); border-radius: var(--radius); background: var(--c-groen-t); } .sup-woningkaart .sup-feiten { background: var(--kaart); } .sup-woningkaart .bs-knop { align-self: flex-start; } .sup-feit b em { display: block; font-style: normal; font-size: .66rem; color: var(--c-ink-3); font-weight: 500; } .sup-normregel { font-size: .74rem; color: var(--c-ink-2); padding: 8px 12px; background: var(--c-paneel); border-radius: var(--radius); } .sup-vink { display: flex; align-items: flex-start; gap: 8px; font-size: .78rem; line-height: 1.5; } .sup-link { background: none; border: 0; padding: 0; font: inherit; color: var(--c-groen-d); text-decoration: underline; cursor: pointer; } .sup-zacht { color: var(--c-ink-3); } @media (max-width: 720px) { .sup-overlay { padding: 12px; } .sup-stappen { display: none; } } /* ═══ S4 · besluiten ════════════════════════════════════════════════ */ .sup-peillijst { display: flex; flex-direction: column; gap: 6px; } .sup-besluitrij { display: grid; align-items: baseline; gap: 4px 12px; grid-template-columns: minmax(0, 160px) 90px minmax(0, 1fr); background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 8px 12px; font-size: .74rem; } .sup-besluitrij em { grid-column: 1 / -1; font-style: normal; font-family: var(--font-mono); font-size: .6rem; color: var(--c-ink-3); } @media (max-width: 900px) { .sup-besluitrij { grid-template-columns: minmax(0, 1fr) 80px; } .sup-besluitrij > span:last-of-type { grid-column: 1 / -1; } } /* ═══ S5 · de twee handtekeningen ═══════════════════════════════════ Naast elkaar, want dat is de vraag: wie heeft getekend en wie nog niet. Een gezette handtekening krijgt de groene rand; een lege blijft neutraal — dit is geen blokkade maar een stap die nog moet. */ .sup-handtekeningen { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; } .sup-handtekening { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 10px 12px; } .sup-handtekening.is-gezet { border-color: var(--c-groen); background: var(--c-groen-t); } .sup-hkop { font-size: .72rem; font-weight: 800; } .sup-handtekening em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); } .sup-handtekening b { font-size: .76rem; color: var(--c-groen-d); } .sup-chip { font-family: var(--font-mono); font-size: .62rem; color: var(--c-ink-3); border: var(--lijndikte) solid var(--c-lijn); border-radius: 99px; padding: 3px 9px; white-space: nowrap; } .sup-chip.is-goed { color: var(--c-groen-d); border-color: var(--c-groen); background: var(--c-groen-t); } .sup-chip.is-let { color: var(--c-amber); border-color: var(--c-amber); background: var(--c-amber-t); } /* ═══ criterium 12 · de bevroren factuur ════════════════════════════ Amber, niet rood: er is niets kapot, er staat iets stil. Rood blijft voor blokkades. */ .sup-geschil { padding: 12px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: var(--kaart); } .sup-geschil.is-bevroren { border-color: var(--c-amber); background: var(--c-amber-t); } .sup-geschil .sup-chip { border-color: var(--c-amber); color: var(--c-amber); background: var(--kaart); } /* ═══ de tabbenbalk van Support ═════════════════════════════════════ */ .sup-tabs { display: flex; gap: 6px; border-bottom: var(--lijndikte) solid var(--c-lijn); overflow-x: auto; scrollbar-width: thin; } .sup-tab { padding: 8px 14px; font-size: .78rem; font-weight: 700; color: var(--c-ink-3); white-space: nowrap; flex: none; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 160ms ease, border-color 160ms ease; } .sup-tab:hover { color: var(--c-ink); } .sup-tab.is-aan { color: var(--c-ink); border-bottom-color: var(--c-groen); } /* ═══ S6 · faalkosten en verhaal ════════════════════════════════════ De balk toont de verhouding, niet het bedrag — dat staat ernaast in cijfers. Wie de verdeling ziet weet met wie hij het gesprek moet voeren; wie alleen het totaal ziet, weet dat niet. */ .sup-balken { display: flex; flex-direction: column; gap: 8px; } .sup-balkrij { display: grid; align-items: center; gap: 4px 12px; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) 90px 130px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 9px 12px; font-size: .76rem; } .sup-balklabel { display: flex; flex-direction: column; } .sup-balklabel em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); } .sup-balk { height: 8px; border-radius: 99px; background: var(--c-paneel); overflow: hidden; } .sup-balk i { display: block; height: 100%; border-radius: 99px; background: var(--c-terra); } .sup-balksub { font-size: .68rem; color: var(--c-ink-3); } .sup-subs { grid-column: 1 / -1; font-style: normal; font-size: .64rem; color: var(--c-ink-3); } .sup-betalers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; } .sup-betaler { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--c-paneel); border-radius: var(--radius); font-size: .74rem; } .sup-betaler b { font-size: .92rem; } .sup-betaler em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); } .sup-verhaalrij { display: grid; align-items: center; gap: 6px 12px; grid-template-columns: minmax(0, 1.4fr) 90px 110px minmax(0, 1.6fr) 130px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-lijn); border-radius: var(--radius); padding: 9px 12px; font-size: .76rem; } .sup-verhaalrij.is-betwist { border-left-color: var(--c-amber); } .sup-verhaalrij.is-verrekend { border-left-color: var(--c-groen); } .sup-verhaalrij.is-afgeboekt { border-left-color: var(--c-terra-d); } .sup-verhaalreden { font-size: .7rem; color: var(--c-ink-2); } .sup-verhaalreden em { display: block; font-style: normal; font-size: .62rem; color: var(--c-ink-3); } .sup-verhaalform { grid-column: 1 / -1; margin-top: 6px; } .sup-rijknoppen { display: flex; justify-content: flex-end; } @media (max-width: 1080px) { .sup-balkrij { grid-template-columns: minmax(0, 1fr) 90px; } .sup-balkrij > .sup-balk, .sup-balkrij > .sup-balksub { display: none; } .sup-verhaalrij { grid-template-columns: minmax(0, 1fr) 90px 110px; } .sup-verhaalrij > .sup-verhaalreden { grid-column: 1 / -1; } } /* ═══ S7 · contracten en planbaar werk ══════════════════════════════ De planbare regel draagt de rand als kleurcode: neutraal is «komt eraan», amber «te laat maar het kan nog», terra «gemist». Die laatste verdwijnt niet uit beeld — de verplichting verdwijnt ook niet. */ .sup-planrij { display: grid; align-items: center; gap: 6px 12px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 70px 170px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-lijn); border-radius: var(--radius); padding: 9px 12px; font-size: .76rem; } .sup-planrij.is-telaat { border-left-color: var(--c-amber); } .sup-planrij.is-gemist { border-left-color: var(--c-terra-d); background: var(--c-terra-t); } .sup-planrij.is-uitgevoerd { border-left-color: var(--c-groen); } .sup-planrij .sup-cel em { display: block; font-style: normal; font-size: .66rem; color: var(--c-ink-3); } .sup-planform { grid-column: 1 / -1; margin-top: 6px; } @media (max-width: 1080px) { .sup-planrij { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 150px; } .sup-planrij > .mono, .sup-planrij > .sup-cel:nth-child(2) { display: none; } } /* open punten uit de bouwspec: geen signaalstrip maar een notitie — dit is werk voor Michiel, niet voor de supportmedewerker */ .sup-openpunten { display: flex; flex-direction: column; gap: 6px; background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-amber); border-radius: var(--radius); padding: 12px 14px; } .sup-openpunten b { font-size: .76rem; } .sup-openpunten .bs-knop { align-self: flex-start; margin-top: 4px; } .sup-looptijd { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; } .sup-looptijd .sup-uitleg { margin: 0; } .sup-openpunten p { margin: 0; font-size: .74rem; line-height: 1.6; color: var(--c-ink-2); max-width: 82ch; } /* ═══ S8 · patronen en beheer ═══════════════════════════════════════ Een patroon is uitklapbaar: de kop zegt hoeveel en waarheen, het lijf toont welke meldingen het zijn. Wie alleen de kop leest weet genoeg om te beslissen of hij verder kijkt. */ .sup-patroon { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-amber); border-radius: var(--radius); overflow: hidden; } .sup-patroon.is-opgepakt { border-left-color: var(--c-groen); } .sup-patroonkop { display: grid; align-items: center; gap: 12px; width: 100%; grid-template-columns: minmax(0, 1.6fr) 50px minmax(0, 1fr) 120px; text-align: left; font: inherit; font-size: .78rem; background: none; border: 0; padding: 10px 12px; cursor: pointer; } .sup-patroonkop:hover { background: var(--c-paneel); } .sup-patroonkop em { display: block; font-style: normal; font-size: .66rem; color: var(--c-ink-3); } .sup-patroonlijf { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 10px; } .sup-patroonrij { display: grid; align-items: baseline; gap: 12px; grid-template-columns: 118px minmax(0, 1.6fr) minmax(0, 1fr) 70px; font-size: .74rem; padding: 5px 0; border-top: var(--lijndikte) solid var(--c-lijn); } .sup-recallrij { display: grid; align-items: center; gap: 6px 12px; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 100px 110px 110px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-terra-d); border-radius: var(--radius); padding: 10px 12px; font-size: .76rem; } .sup-recallrij.is-afgerond { border-left-color: var(--c-groen); } .sup-recalladressen { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; } .sup-adres { font-size: .64rem; background: var(--c-paneel); border-radius: 99px; padding: 2px 8px; } /* een adres zonder melding is juist het adres dat je moet bellen */ .sup-adres.is-stil { background: var(--c-terra-t); color: var(--c-terra-d); font-weight: 700; } .sup-beheervelden { display: flex; flex-direction: column; gap: 4px; } .sup-beheerveld { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 8px 12px; } .sup-beheerveld.is-open { border-color: var(--c-groen); } .sup-beheerrij { display: grid; align-items: center; gap: 12px; grid-template-columns: minmax(0, 1.6fr) 190px minmax(0, 1fr) 96px; font-size: .76rem; } .sup-beheerlabel { display: flex; flex-direction: column; gap: 1px; } .sup-beheerlabel em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); } .sup-beheerrij .bs-knop { justify-self: end; } .sup-beheerveld .sup-form { margin-top: 10px; } .sup-versies { display: flex; flex-wrap: wrap; gap: 6px; } .sup-versie { font-family: var(--font-mono); font-size: .64rem; color: var(--c-ink-3); background: var(--c-paneel); border-radius: var(--radius); padding: 4px 9px; } .sup-versie.is-nu { color: var(--c-groen-d); background: var(--c-groen-t); } .sup-versie em { font-style: normal; } .sup-sjabloonrij { display: grid; align-items: center; gap: 12px; grid-template-columns: minmax(0, 1fr) 110px 80px; font-size: .76rem; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 8px 12px; } .sup-sjabloonrij em { display: block; font-style: normal; font-size: .66rem; color: var(--c-ink-3); } @media (max-width: 1080px) { .sup-patroonkop { grid-template-columns: minmax(0, 1fr) 50px 110px; } .sup-patroonkop > .sup-cel:nth-child(3) { display: none; } .sup-patroonrij { grid-template-columns: 110px minmax(0, 1fr); } .sup-patroonrij > span:nth-child(3), .sup-patroonrij > span:nth-child(4) { display: none; } .sup-recallrij { grid-template-columns: minmax(0, 1fr) 100px 110px; } .sup-recallrij > .sup-cel:nth-child(2), .sup-recallrij > .sup-zacht { display: none; } .sup-beheerrij { grid-template-columns: minmax(0, 1fr) 150px 90px; } .sup-beheerrij > span:nth-child(3) { display: none; } } /* ═══ KLACHTEN EN VERKOOP (Michiel 06-10-2026) · Support › Verkoop en het paneel op het dossier ═══ Kleur is betekenis: paars = soortregister «naar verkoop» (geen semantiek), amber = dossier open, groen = besproken, rood = de drempel of te lang niet besproken. */ .sup-chip { display: inline-block; border-radius: 99px; padding: 2px 8px; font-size: .62rem; font-weight: 700; white-space: nowrap; line-height: 1.5; } .sup-chip.is-goed { background: var(--c-groen-t); color: var(--c-groen-d); } .sup-chip.is-let { background: var(--c-amber-t); color: var(--c-amber-d, var(--c-amber)); } .sup-chip.is-stop { background: var(--c-terra-t); color: var(--c-terra-d); } .sup-chip.is-paars { background: var(--paars-t); color: var(--paars); } .sup-klok .sup-chip { display: block; width: max-content; margin-top: 2px; } .sup-kvgroep { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; } .sup-kvgroep h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: .8rem; font-weight: 800; margin: 6px 0 0; padding-bottom: 4px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .sup-kvgroep h3 em { font-style: normal; font-family: var(--font-mono); font-size: .62rem; color: var(--c-ink-3); font-weight: 600; } .sup-kv { border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: var(--kaart); } .sup-kv.is-open { border-color: var(--c-groen); } .sup-kvkop { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 9px 12px; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; border-radius: var(--radius); } .sup-kvkop:hover { background: var(--c-paneel); } .sup-kvtitel { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sup-kvtitel b { font-size: .78rem; } .sup-kvtitel em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sup-kvlijf { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px; } .sup-kvleer { margin: 0; font-size: .76rem; line-height: 1.5; padding: 8px 10px; background: var(--c-paneel); border-radius: var(--radius-klein, 8px); } .sup-kvleer span { display: block; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3); margin-bottom: 2px; } .sup-kvafvink { display: flex; flex-direction: column; gap: 8px; width: 100%; padding-top: 6px; border-top: var(--lijndikte) dashed var(--c-lijn); } .sup-kvafvink .bs-knop { align-self: flex-start; } .sup-kvherhaling { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .sup-kvherhaling li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 10px; align-items: center; font-size: .74rem; padding: 7px 10px; border: var(--lijndikte) solid var(--c-lijn); border-left-width: 3px; border-radius: var(--radius); background: var(--kaart); } .sup-kvherhaling li.is-stop { border-left-color: var(--c-terra-d); } .sup-kvherhaling li.is-let { border-left-color: var(--c-amber); } .sup-kvherhaling li span { color: var(--c-ink-2); } .sup-kvherhaling li em { font-style: normal; font-weight: 700; } .sup-kvrapport { margin-top: 8px; } .sup-kvfilters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .7rem; color: var(--c-ink-2); } .sup-kvfilters select { font: inherit; padding: 4px 8px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-klein, 8px); background: var(--kaart); color: var(--c-ink); } .sup-kvgrafieken { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; } .sup-kvgrafieken > div { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 10px 12px; min-width: 0; } .sup-chart { width: 100%; height: auto; display: block; } .sup-chart text { font-family: var(--font-mono); font-size: 10px; fill: var(--c-ink-3); } .sup-chart .as { stroke: var(--c-lijn); } .sup-chart .lijn { fill: none; stroke-width: 2; } .sup-legenda { display: flex; flex-wrap: wrap; gap: 12px; font-size: .68rem; color: var(--c-ink-2); } .sup-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; } .sup-legenda em { font-style: normal; color: var(--c-ink-3); } .sup-tabel { width: 100%; border-collapse: collapse; font-size: .74rem; } .sup-tabel th { text-align: left; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3); padding: 6px 8px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .sup-tabel td { padding: 7px 8px; border-bottom: var(--lijndikte) solid var(--c-lijn); vertical-align: top; } .sup-tabel td.num { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; } .sup-fotos { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: var(--lijndikte) dashed var(--c-lijn); } .sup-fotolijst { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .sup-fotolijst li { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-klein, 8px); background: var(--kaart); font-size: .72rem; } .sup-fotolijst a { color: var(--c-ink); text-decoration: none; font-weight: 600; } .sup-fotolijst a:hover { text-decoration: underline; } .sup-fotolijst em { font-style: normal; font-size: .6rem; color: var(--c-ink-3); } .sup-fotoveld { display: flex; flex-direction: column; gap: 4px; font-size: .7rem; font-weight: 600; color: var(--c-ink-2); } .sup-fotoveld input { font: inherit; font-size: .72rem; } .sup-watnu.is-goed { background: var(--c-groen-t); border-color: var(--c-groen); } @media (max-width: 720px) { .sup-kvherhaling li { grid-template-columns: minmax(0, 1fr) auto; } .sup-kvherhaling li span { grid-column: 1 / -1; } .sup-tabel { display: block; overflow-x: auto; } } /* ── matvoorraad.css ── */ /* matvoorraad.css — Voorraad & hub (bouwspec VOORRAAD §2.2, fase V1). Kleurkeuze: de rem is geen fout maar een feit — hij krijgt een groene nadruk zolang er boven het bestelpunt gewerkt kan worden, en terra zodra dat niet meer zo is. Rood (terra-d) blijft voor de IBC's die niet sluiten: daar is niet gescand, en dat blokkeert straks een factuur. Onbalans is amber: geld dat stilstaat is een signaal, geen blokkade. Alleen tokens, geen losse hex of schaduw. */ .vrd-wortel { max-width: var(--werkbreedte, 1240px); margin: 0 auto; width: 100%; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; } .vrd-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .vrd-kop > div { flex: 1 1 480px; min-width: 0; } .vrd-kop h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; } .vrd-kicker { font-family: var(--font-mono); font-size: .6rem; text-transform: uppercase; letter-spacing: .12em; color: var(--c-ink-3); margin: 0; } .vrd-lead { margin: 6px 0 0; max-width: 64ch; font-size: .78rem; line-height: 1.6; color: var(--c-ink-2); } .vrd-regelset { font-family: var(--font-mono); font-size: .62rem; color: var(--c-ink-3); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: 99px; padding: 5px 11px; white-space: nowrap; } .vrd-tabs { display: flex; gap: 6px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .vrd-tab { padding: 8px 14px; font-size: .78rem; font-weight: 700; color: var(--c-ink-3); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 160ms ease, border-color 160ms ease; } .vrd-tab:hover { color: var(--c-ink); } .vrd-tab.is-aan { color: var(--c-ink); border-bottom-color: var(--c-groen); } .vrd-meld { border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 11px 14px; font-size: .78rem; line-height: 1.6; color: var(--c-ink-2); background: var(--c-paneel); } .vrd-meld.is-stop { background: var(--c-terra-t); border-color: var(--c-terra-d); } .vrd-meld.is-goed { background: var(--c-groen-t); border-color: var(--c-groen); } .vrd-meld b { color: var(--c-ink); } .vrd-blok { display: flex; flex-direction: column; gap: 10px; } .vrd-blok h2 { font-size: 15px; font-weight: 800; margin: 4px 0 0; letter-spacing: -.01em; } .vrd-blokkop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .vrd-acties { display: flex; gap: 8px; } .vrd-uitleg { margin: 0; max-width: 78ch; font-size: .72rem; line-height: 1.6; color: var(--c-ink-3); } /* De zin die de klant leest. Apart gezet omdat dit géén toelichting is maar een belofte: hier staat waarop straks gefactureerd wordt. */ .vrd-offertetekst { max-width: 78ch; padding: 10px 12px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: var(--c-paneel-2); display: flex; flex-direction: column; gap: 4px; } .vrd-offertetekst b { font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); } .vrd-offertetekst p { margin: 0; font-size: .76rem; line-height: 1.6; color: var(--c-ink); } .vrd-offertetekst em { font-size: .68rem; color: var(--c-ink-3); font-style: normal; } /* ---- dekking per component: de kern van het scherm ---- */ .vrd-comps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } .vrd-comp { display: flex; flex-direction: column; gap: 8px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--schaduw-tegel); } .vrd-comp.is-rem { border-color: var(--c-groen); } .vrd-comp > header { display: flex; align-items: flex-start; gap: 10px; } .vrd-code { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 700; color: var(--c-ink); background: var(--c-paneel); border-radius: var(--radius); padding: 3px 9px; } .vrd-comp header b { display: block; font-size: .8rem; font-weight: 700; } .vrd-comp header em { display: block; font-style: normal; font-size: .66rem; color: var(--c-ink-3); } .vrd-rembadge { margin-left: auto; font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--knop-ink); background: var(--c-groen); border-radius: 99px; padding: 3px 9px; } .vrd-dekking { margin: 2px 0 0; display: flex; align-items: baseline; gap: 6px; } .vrd-dekking b { font-family: var(--font-mono); font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; } .vrd-dekking span { font-size: .7rem; color: var(--c-ink-3); } .vrd-balk { position: relative; height: 8px; border-radius: 99px; background: var(--c-paneel); overflow: visible; } .vrd-balk i { display: block; height: 100%; border-radius: 99px; background: var(--c-sage); } .vrd-comp.is-rem .vrd-balk i { background: var(--c-groen); } /* het bestelpunt als streepje: je ziet meteen of je erboven of eronder zit */ .vrd-balk u { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--c-ink-3); text-decoration: none; } .vrd-cijfers { display: flex; gap: 16px; margin: 2px 0 0; } .vrd-cijfers div { display: flex; flex-direction: column; gap: 1px; } .vrd-cijfers dt { font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); } .vrd-cijfers dd { margin: 0; font-family: var(--font-mono); font-size: .78rem; color: var(--c-ink); } .vrd-perloc { margin: 0; font-size: .66rem; color: var(--c-ink-3); } /* ---- IBC's die niet sluiten ---- */ .vrd-scheef { display: flex; flex-direction: column; gap: 6px; } .vrd-scheefrij { display: grid; align-items: center; gap: 12px; grid-template-columns: 82px minmax(0, 1.4fr) 120px minmax(0, 1fr) 90px; background: var(--c-terra-t); border: var(--lijndikte) solid var(--c-terra-d); border-radius: var(--radius); padding: 8px 12px; font-size: .74rem; } .vrd-scheefrij .vrd-verschil { text-align: right; font-family: var(--font-mono); color: var(--c-terra-d); } /* ---- het register ---- */ .vrd-filters { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; } .vrd-vld { display: flex; flex-direction: column; gap: 4px; font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); font-weight: 700; } .vrd-vld input, .vrd-vld select { font: inherit; font-size: .78rem; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--c-ink); padding: 7px 10px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: var(--kaart); min-width: 170px; } .vrd-vld input[type="search"] { min-width: 240px; } .vrd-tabel { display: flex; flex-direction: column; gap: 4px; } /* .vrd-tkop is de kolomkop van de tabel — bewust een andere naam dan .vrd-kop (de paginakop), anders erft de leadtekst zijn kapitalen. */ .vrd-tkop, .vrd-rij { display: grid; align-items: center; gap: 12px; grid-template-columns: 88px 110px minmax(0, 1.6fr) 84px 84px 84px 170px; } /* 170: twee knoppen naast elkaar, anders vallen ze over «sluit» */ .vrd-tkop { padding: 0 12px; font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); font-weight: 700; } .vrd-rij { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-lijn); border-radius: var(--radius); padding: 8px 12px; font-size: .76rem; } .vrd-rij.is-scheef { border-left-color: var(--c-terra-d); } .vrd-rij.is-extern { border-left-color: var(--c-sage); } .vrd-rij em { font-style: normal; color: var(--c-ink-3); font-size: .68rem; } .vrd-rood { color: var(--c-terra-d); font-weight: 700; } .vrd-rijknoppen { display: flex; gap: 6px; justify-content: flex-end; } .vrd-uitgifte { margin: 0 0 4px; } /* De verbruikstabel heeft hieronder een eigen smalle indeling: daar is de afwijking het getal waar het scherm om draait, en die mag niet als eerste wegvallen. */ @media (max-width: 1080px) { .vrd-tabel:not(.vrd-vbrtabel) .vrd-tkop, .vrd-tabel:not(.vrd-vbrtabel) .vrd-rij { grid-template-columns: 88px minmax(0, 1fr) 84px 150px; } .vrd-tabel:not(.vrd-vbrtabel) .vrd-tkop span:nth-child(2), .vrd-tabel:not(.vrd-vbrtabel) .vrd-rij > span:nth-child(2), .vrd-tabel:not(.vrd-vbrtabel) .vrd-tkop span:nth-child(5), .vrd-tabel:not(.vrd-vbrtabel) .vrd-rij > span:nth-child(5), .vrd-tabel:not(.vrd-vbrtabel) .vrd-tkop span:nth-child(6), .vrd-tabel:not(.vrd-vbrtabel) .vrd-rij > span:nth-child(6) { display: none; } } /* ---- formulieren ---- */ .vrd-form { display: flex; flex-direction: column; gap: 10px; background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 14px 16px; } .vrd-formkop { margin: 0; font-size: .82rem; font-weight: 800; } .vrd-velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; } .vrd-form .bs-knop { align-self: flex-start; } /* ═══ V2 · Vandaag in de hub ════════════════════════════════════════ Eén blok per ploegdag. De rand links draagt de stand: groen als alles klaarstaat, amber als er nog gepakt moet worden, terra als de dag niet rondkomt. Rood is hier op zijn plaats — een ploeg die zonder materiaal uitrijdt is een verloren dag, geen signaal. */ .vrd-meld.is-let { background: var(--c-amber-t); border-color: var(--c-amber); } .vrd-zacht { color: var(--c-ink-3); } .vrd-dagen { display: flex; flex-direction: column; gap: 12px; } .vrd-dag { display: flex; flex-direction: column; gap: 10px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-lijn); border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--schaduw-tegel); } .vrd-dag.is-goed { border-left-color: var(--c-groen); } .vrd-dag.is-let { border-left-color: var(--c-amber); } .vrd-dag.is-stop { border-left-color: var(--c-terra-d); } .vrd-dag > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .vrd-dag header b { font-size: .88rem; font-weight: 800; } .vrd-dag header em { display: block; font-style: normal; font-size: .68rem; color: var(--c-ink-3); } .vrd-chip { font-family: var(--font-mono); font-size: .64rem; color: var(--c-ink-3); border: var(--lijndikte) solid var(--c-lijn); border-radius: 99px; padding: 3px 10px; white-space: nowrap; } .vrd-chip.is-stop { color: var(--c-terra-d); border-color: var(--c-terra-d); background: var(--c-terra-t); } .vrd-klussen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .vrd-klussen li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.3fr) auto; gap: 10px; align-items: baseline; font-size: .74rem; } .vrd-klussen b { font-weight: 700; } .vrd-klussen span { color: var(--c-ink-2); } .vrd-klussen em { font-style: normal; color: var(--c-ink-3); font-size: .7rem; } .vrd-klussen .mono { font-size: .64rem; color: var(--c-ink-3); } @media (max-width: 900px) { .vrd-klussen li { grid-template-columns: minmax(0, 1fr); } } .vrd-picks { display: flex; flex-direction: column; gap: 4px; } .vrd-pick { display: grid; align-items: center; gap: 12px; grid-template-columns: 26px minmax(0, 1.5fr) 96px 108px minmax(0, 1.4fr); background: var(--c-paneel-2); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 7px 11px; font-size: .74rem; } .vrd-pick.is-stop { background: var(--c-terra-t); border-color: var(--c-terra-d); } .vrd-pick b { font-weight: 600; } .vrd-pick em { display: block; font-style: normal; font-size: .64rem; color: var(--c-ink-3); } .vrd-vink { width: 22px; height: 22px; border-radius: 6px; background: var(--kaart); cursor: pointer; border: var(--lijndikte) solid var(--c-lijn-2); font: inherit; font-size: .72rem; line-height: 1; color: var(--knop-ink); transition: background 160ms ease, border-color 160ms ease; } .vrd-vink.is-aan { background: var(--c-groen); border-color: var(--c-groen); } .vrd-tag { display: inline-block; font-size: .64rem; background: var(--kaart); color: var(--c-ink); border: var(--lijndikte) solid var(--c-lijn); border-radius: 99px; padding: 2px 8px; margin: 0 4px 2px 0; } @media (max-width: 1080px) { .vrd-pick { grid-template-columns: 26px minmax(0, 1fr) 96px; } .vrd-pick > span:nth-child(4), .vrd-pick > span:nth-child(5) { display: none; } } /* ---- peilen ---- */ .vrd-peillijst { display: flex; flex-direction: column; gap: 6px; } .vrd-peilrij { display: grid; align-items: center; gap: 12px; grid-template-columns: 82px minmax(0, 1.2fr) 110px 84px minmax(0, 1.4fr) 84px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-amber); border-radius: var(--radius); padding: 8px 12px; font-size: .74rem; } .vrd-peilrij.is-stop { border-left-color: var(--c-terra-d); background: var(--c-terra-t); } .vrd-peilrij .bs-knop { justify-self: end; } .vrd-peilform { display: flex; flex-direction: column; gap: 10px; background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 12px 14px; } .vrd-peilform .bs-knop { align-self: flex-start; } @media (max-width: 1080px) { .vrd-peilrij { grid-template-columns: 82px minmax(0, 1fr) 84px; } .vrd-peilrij > span:nth-child(3), .vrd-peilrij > span:nth-child(5) { display: none; } } /* ---- retour naar de fabrikant: lege vaten zijn statiegeld ---- */ .vrd-retourklaar { display: flex; flex-direction: column; gap: 6px; background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 11px 14px; } .vrd-tags { display: flex; flex-wrap: wrap; gap: 4px; } .vrd-zending { display: grid; align-items: center; gap: 12px; grid-template-columns: 110px minmax(0, 1.6fr) 120px 110px 110px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-sage); border-radius: var(--radius); padding: 8px 12px; font-size: .74rem; } .vrd-zending .bs-knop { justify-self: end; } @media (max-width: 1080px) { .vrd-zending { grid-template-columns: 110px minmax(0, 1fr) 110px; } .vrd-zending > span:nth-child(3), .vrd-zending > span:nth-child(4) { display: none; } } /* ---- de scanplicht: aan, signaal of uit ---- De gekozen stand krijgt de groene nadruk zolang hij «verplicht» is; op signaal of uit kleurt de chip amber. Niet rood: het is een bewuste keuze van de beheerder, geen storing. De teller eronder is wél amber zodra er bonnen zonder batch door zijn — dat is een gat in de keten. */ .vrd-standen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; } .vrd-stand { display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 10px 12px; font: inherit; transition: border-color 160ms ease, background 160ms ease; } .vrd-stand:hover { border-color: var(--c-groen); } .vrd-stand.is-aan { border-color: var(--c-groen); background: var(--c-groen-t); } .vrd-stand b { font-size: .8rem; font-weight: 700; color: var(--c-ink); } .vrd-stand em { font-style: normal; font-size: .68rem; line-height: 1.5; color: var(--c-ink-3); } .vrd-chip.is-let { color: var(--c-amber); border-color: var(--c-amber); background: var(--c-amber-t); } .vrd-scanteller { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: baseline; background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 10px 14px; } .vrd-scanteller.is-let { background: var(--c-amber-t); border-color: var(--c-amber); } .vrd-scanteller b { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; grid-row: span 2; } .vrd-scanteller span { font-size: .78rem; color: var(--c-ink); } .vrd-scanteller em { font-style: normal; font-size: .7rem; line-height: 1.5; color: var(--c-ink-3); } .vrd-scanrij { display: grid; align-items: center; gap: 12px; grid-template-columns: 110px minmax(0, 1fr) 130px minmax(0, 1.6fr); background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-amber); border-radius: var(--radius); padding: 8px 12px; font-size: .74rem; } @media (max-width: 1080px) { .vrd-scanrij { grid-template-columns: 110px minmax(0, 1fr); } .vrd-scanrij > span:nth-child(3), .vrd-scanrij > span:nth-child(4) { display: none; } } /* ---- V5 · batches en de terugroepactie ---- Een woning zónder melding krijgt géén kleur: hij is niet fout, hij is alleen nog niet benaderd. De amber-rand zit op de rij die op de werklijst staat — dát is wat er nog moet gebeuren. */ .vrd-woningrij { display: grid; align-items: center; gap: 12px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) 104px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-lijn); border-radius: var(--radius); padding: 8px 12px; font-size: .74rem; } .vrd-woningrij.is-open { border-left-color: var(--c-amber); } .vrd-woningrij .bs-knop { justify-self: end; } .vrd-woningrij b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vrd-woningrij span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 1180px) { .vrd-woningrij { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 104px; } .vrd-woningrij > span:nth-child(3), .vrd-woningrij > span:nth-child(4) { display: none; } } .vrd-blok h3 { font-size: .82rem; font-weight: 800; margin: 0; } /* ---- V6 · de uitvoerderstabel heeft eigen kolommen: namen zijn lang, percentages en bedragen kort, en die mogen elkaar niet raken. ---- */ .vrd-uitvtabel .vrd-tkop, .vrd-uitvtabel .vrd-rij { grid-template-columns: minmax(0, 1.8fr) 76px 78px 92px 52px 92px 92px; } .vrd-eigen { color: var(--c-groen); font-size: .7rem; } /* De breedte die telt is die van de kolom, niet die van het venster: staat het dossier open, dan is deze lijst de helft smaller terwijl het scherm even breed blijft. Een container-query kijkt naar het juiste getal. */ .sup-links { container-type: inline-size; } @container (max-width: 700px) { .vrd-uitvtabel .vrd-tkop, .vrd-uitvtabel .vrd-rij { grid-template-columns: minmax(0, 1fr) 72px 88px 84px; } .vrd-uitvtabel .vrd-tkop span:nth-child(2), .vrd-uitvtabel .vrd-rij > span:nth-child(2), .vrd-uitvtabel .vrd-tkop span:nth-child(5), .vrd-uitvtabel .vrd-rij > span:nth-child(5), .vrd-uitvtabel .vrd-tkop span:nth-child(7), .vrd-uitvtabel .vrd-rij > span:nth-child(7) { display: none; } /* de generieke tabel (batches, IBC's) — niet de uitvoerderstabel, die heeft hierboven zijn eigen indeling */ .vrd-tabel:not(.vrd-uitvtabel) .vrd-tkop, .vrd-tabel:not(.vrd-uitvtabel) .vrd-rij { grid-template-columns: 88px minmax(0, 1fr) 76px 84px; } .vrd-tabel:not(.vrd-uitvtabel) .vrd-tkop span:nth-child(3), .vrd-tabel:not(.vrd-uitvtabel) .vrd-rij > span:nth-child(3), .vrd-tabel:not(.vrd-uitvtabel) .vrd-tkop span:nth-child(5), .vrd-tabel:not(.vrd-uitvtabel) .vrd-rij > span:nth-child(5), .vrd-tabel:not(.vrd-uitvtabel) .vrd-tkop span:nth-child(6), .vrd-tabel:not(.vrd-uitvtabel) .vrd-rij > span:nth-child(6) { display: none; } .vrd-woningrij { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 104px; } .vrd-woningrij > span:nth-child(3), .vrd-woningrij > span:nth-child(4) { display: none; } } /* ---- V7 · het bestelvoorstel ---- De rem krijgt de groene rand: dát is het vat dat je écht nodig hebt. De rest is aanvullen, en dat is geen signaal. */ .vrd-bestelrij { display: grid; align-items: center; gap: 12px; grid-template-columns: 44px minmax(0, 1.4fr) minmax(0, 1.3fr) 108px 76px 88px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-lijn); border-radius: var(--radius); padding: 8px 12px; font-size: .74rem; } .vrd-bestelrij.is-rem { border-left-color: var(--c-groen); } @container (max-width: 700px) { .vrd-bestelrij { grid-template-columns: 44px minmax(0, 1fr) 76px 88px; } .vrd-bestelrij > span:nth-child(3), .vrd-bestelrij > span:nth-child(4) { display: none; } } /* ═══ V8 · verbruik, kozijnen en beheer ═════════════════════════════ Drie schermen die dezelfde tabel- en dossiervormen hergebruiken; wat hier staat is alleen wat ze eigen hebben. Kleurkeuze ongewijzigd: terra voor wat een claim of een factuur kost, amber voor signaal, groen voor «dit klopt». */ /* de feitenlijst in een dossier — dezelfde rijen als bij support, maar in een omlijst blok zodat hij van de rest loskomt */ .vrd-feiten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: var(--kaart); padding: 2px 12px; font-size: .76rem; } .vrd-chip.is-goed { color: var(--c-groen-d); border-color: var(--c-groen); background: var(--c-groen-t); } .vrd-rij.is-gekozen { border-color: var(--c-groen); background: var(--c-groen-t); } .vrd-breed { grid-column: 1 / -1; } /* ---- Verbruik: de klus als regel, de componenten eronder ---- */ .vrd-vbrtabel .vrd-tkop, .vrd-vbrtabel .vrd-rij { grid-template-columns: 118px minmax(0, 1.4fr) 74px 78px 74px 74px 92px; } .vrd-vbrdetail { display: flex; flex-direction: column; gap: 4px; background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 10px 12px; margin: -2px 0 4px; } .vrd-vbrkop { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .72rem; padding-bottom: 6px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .vrd-vbrcomp { display: grid; align-items: center; gap: 12px; grid-template-columns: 40px 74px 66px 148px 84px 64px minmax(0, 1fr); font-size: .72rem; padding: 5px 0; } .vrd-vbrcomp .vrd-code { font-size: .8rem; padding: 2px 7px; } /* de datum onder de klantnaam, niet ertegenaan */ .vrd-vbrtabel .vrd-rij em { display: block; } .vrd-vbrcomp em { font-style: normal; color: var(--c-ink-3); } /* ---- Kozijnen: doorstroom, dus de stand telt zwaarder dan het aantal ---- */ .vrd-koztabel .vrd-tkop, .vrd-koztabel .vrd-rij { grid-template-columns: 124px minmax(0, 1.3fr) minmax(0, 1fr) 52px 76px 74px 104px; } /* ---- Beheer: label, waarde, afleiding, knop ---- */ .vrd-beheerblok { padding-top: 4px; } .vrd-beheervelden { display: flex; flex-direction: column; gap: 4px; } .vrd-beheerveld { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 8px 12px; } .vrd-beheerveld.is-open { border-color: var(--c-groen); } .vrd-beheerrij { display: grid; align-items: center; gap: 12px; grid-template-columns: minmax(0, 1.6fr) 190px minmax(0, 1fr) 96px; font-size: .76rem; } .vrd-beheerlabel { display: flex; flex-direction: column; gap: 1px; } .vrd-beheerlabel em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); } .vrd-beheerveld .vrd-form { margin-top: 10px; } .vrd-beheerrij .bs-knop { justify-self: end; } /* ---- locatieregister ---- */ .vrd-locrij { display: grid; align-items: center; gap: 12px; grid-template-columns: 78px minmax(0, 1.5fr) minmax(0, 1fr) 84px 104px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-lijn); border-radius: var(--radius); padding: 7px 12px; font-size: .74rem; } .vrd-locrij.is-uit { background: var(--c-paneel); border-left-color: var(--c-lijn-2); color: var(--c-ink-3); } .vrd-locrij .bs-knop { justify-self: end; } @media (max-width: 1080px) { /* verbruik: de norm-in-liters valt weg, de afwijking en de kosten blijven — dat zijn de twee getallen waarvoor je hier komt */ .vrd-vbrtabel .vrd-tkop, .vrd-vbrtabel .vrd-rij { grid-template-columns: 112px minmax(0, 1fr) 66px 72px 68px 84px; } .vrd-vbrtabel .vrd-tkop span:nth-child(5), .vrd-vbrtabel .vrd-rij > span:nth-child(5) { display: none; } .vrd-beheerrij { grid-template-columns: minmax(0, 1fr) 150px 90px; } .vrd-beheerrij > span:nth-child(3) { display: none; } /* het aantal vaten bepaalt of een locatie eruit kán — dat blijft staan, de soort valt als eerste weg */ .vrd-locrij { grid-template-columns: 78px minmax(0, 1fr) 76px 108px; } .vrd-locrij > span:nth-child(3) { display: none; } .vrd-vbrcomp { grid-template-columns: 40px 66px 78px 64px minmax(0, 1fr); } .vrd-vbrcomp > span:nth-child(2), .vrd-vbrcomp > span:nth-child(4) { display: none; } } @container (max-width: 700px) { .vrd-koztabel .vrd-tkop, .vrd-koztabel .vrd-rij { grid-template-columns: 118px minmax(0, 1fr) 48px 100px; } .vrd-koztabel .vrd-tkop span:nth-child(3), .vrd-koztabel .vrd-rij > span:nth-child(3), .vrd-koztabel .vrd-tkop span:nth-child(5), .vrd-koztabel .vrd-rij > span:nth-child(5), .vrd-koztabel .vrd-tkop span:nth-child(6), .vrd-koztabel .vrd-rij > span:nth-child(6) { display: none; } } /* ── opvolging.css ── */ /* opvolging.css — de module Opvolging (bouwspec Offertes isolatie §6). Links de bellijst op kans × orderwaarde, rechts het gesprek. De opmaak blijft rustig: het werk zit in het gesprek, niet in het scherm. Alleen tokens. */ .ovg-wortel { max-width: var(--werkbreedte, 1240px); margin: 0 auto; width: 100%; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 12px; } .ovg-kop { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; } .ovg-h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; } .ovg-sub { font-size: .76rem; color: var(--c-ink-3); margin: 2px 0 0; line-height: 1.6; } .ovg-sub a { color: var(--c-groen-d); } .ovg-kop2 { font-size: .78rem; color: var(--c-ink-2); margin: 0; line-height: 1.6; } .ovg-let { font-size: .72rem; color: var(--c-ink-3); font-style: italic; margin: 0; line-height: 1.6; } .ovg-let a { color: var(--c-groen-d); font-weight: 700; } .ovg-let2 { font-size: .74rem; color: var(--c-ink-2); margin: 0; line-height: 1.6; } .ovg-twee { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 16px; align-items: start; } @media (max-width: 1080px) { .ovg-twee { grid-template-columns: minmax(0, 1fr); } } .ovg-kolL, .ovg-kolR { min-width: 0; } /* de bellijst */ .ovg-lijst { display: flex; flex-direction: column; gap: 8px; } .ovg-kaart { display: flex; flex-direction: column; gap: 4px; text-align: left; width: 100%; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-lijn-2); border-radius: var(--radius); padding: 11px 13px; cursor: pointer; font-family: inherit; box-shadow: var(--schaduw-tegel); transition: border-color 160ms ease, background 160ms ease; } .ovg-kaart.is-warm { border-left-color: var(--c-groen); } .ovg-kaart.is-gekozen { background: var(--c-groen-t); border-color: var(--c-groen); } .ovg-kaart:hover { border-color: var(--c-groen); } .ovg-kr1 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: .88rem; } .ovg-kans { font-size: .74rem; font-weight: 800; color: var(--c-groen-d); } .ovg-ks { font-size: .7rem; color: var(--c-ink-3); } .ovg-pog { color: var(--c-amber); } .ovg-sigs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; } .ovg-sig { font-size: .6rem; font-weight: 600; border-radius: 99px; padding: 1px 8px; border: var(--lijndikte) solid var(--c-lijn-2); color: var(--c-ink-3); } .ovg-sig.is-warm { border-color: var(--c-groen); color: var(--c-groen-d); } .ovg-sig.is-goed { border-color: var(--c-groen); background: var(--c-groen-t); color: var(--c-groen-d); } .ovg-leeg { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 22px 18px; text-align: center; font-size: .86rem; font-weight: 700; color: var(--c-groen-d); } .ovg-leeg span { display: block; margin-top: 5px; font-size: .72rem; font-weight: 400; color: var(--c-ink-3); } /* het gesprek */ .ovg-detail { display: flex; flex-direction: column; gap: 11px; } .ovg-h2 { margin: 2px 0 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; } .ovg-plaats { font-size: .8rem; font-weight: 600; color: var(--c-ink-3); } .ovg-blok { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--schaduw-tegel); } .ovg-blok.is-notitie { background: var(--c-memo); border-color: var(--c-lijn-2); box-shadow: none; } .ovg-blok.is-let { border-color: var(--c-amber); } .ovg-blokkop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .86rem; padding-bottom: 7px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .ovg-blokkop span { font-size: .58rem; letter-spacing: .07em; text-transform: uppercase; color: var(--c-ink-3); } .ovg-sigrij { font-size: .78rem; padding: 2px 0; } .ovg-notitie { margin: 0; font-size: .82rem; line-height: 1.55; } .ovg-cadans { display: flex; gap: 6px; flex-wrap: wrap; } .ovg-stap { flex: 1 1 100px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 7px 9px; font-size: .68rem; color: var(--c-ink-3); background: var(--c-paneel); } .ovg-stap b { display: block; font-size: .6rem; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 2px; } .ovg-stap.is-klaar { border-color: var(--c-groen); color: var(--c-groen-d); background: var(--c-groen-t); } .ovg-stap.is-nu { border-color: var(--c-ink); color: var(--c-ink); background: var(--kaart); font-weight: 700; } .ovg-uitkomsten { display: flex; gap: 7px; flex-wrap: wrap; } .ovg-gesprek { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; font-size: .74rem; padding: 5px 0; border-top: var(--lijndikte) solid var(--c-lijn); } .ovg-gesprek:first-of-type { border-top: 0; } .ovg-gesprek span:first-child { color: var(--c-ink-3); font-size: .66rem; } .ovg-gesprek em { display: block; font-style: normal; font-size: .66rem; color: var(--c-ink-3); } /* ── OI7 · Later terug, analyse en de adviseur-app ──────────────────── */ .ovg-groep { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 13px 15px; display: flex; flex-direction: column; gap: 7px; box-shadow: var(--schaduw-tegel); } .ovg-groepkop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .92rem; padding-bottom: 7px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .ovg-groepkop span { font-family: var(--font-mono); font-size: .74rem; color: var(--c-ink-3); } .ovg-lrij { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; flex-wrap: wrap; padding: 9px 0; border-top: var(--lijndikte) solid var(--c-lijn); } .ovg-lrij:first-of-type { border-top: 0; } .ovg-lrij.is-vroeg { border-left: 3px solid var(--c-groen); padding-left: 10px; margin-left: -13px; } .ovg-lrij .ovg-ks { display: block; } .ovg-lacties { display: flex; gap: 6px; flex-wrap: wrap; } .ovg-leeg2 { font-size: .76rem; color: var(--c-ink-3); margin: 0; } .ovg-ana { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 8px 15px 14px; box-shadow: var(--schaduw-tegel); } .ovg-anarij { display: grid; grid-template-columns: minmax(0,1.6fr) 70px 100px 110px minmax(80px,1fr); gap: 12px; align-items: center; padding: 9px 0; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .8rem; } .ovg-anarij--kop { border-top: 0; font-size: .6rem; letter-spacing: .07em; text-transform: uppercase; color: var(--c-ink-3); } .ovg-anarij em { display: block; font-style: normal; font-size: .66rem; color: var(--c-ink-3); } .ovg-balk { display: block; height: 7px; border-radius: 99px; background: var(--c-paneel); overflow: hidden; } .ovg-balk i { display: block; height: 100%; background: var(--c-groen); } .ovg-app { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; } .ovg-appkaart { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; box-shadow: var(--schaduw-tegel); } .ovg-appkaart .btn { align-self: flex-start; margin-top: 4px; } /* ── OI8 · de instellingen (§7): één plek voor alles wat de motor stuurt ── */ .ovg-cfg { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; align-items: start; } .ovg-cfgblok { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--schaduw-tegel); } .ovg-cfgrij { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .76rem; } .ovg-cfgrij:first-of-type { border-top: 0; } .ovg-cfgrij > span:first-child { flex: 1; min-width: 0; } .ovg-cfgrij em { display: block; font-style: normal; font-size: .66rem; color: var(--c-ink-3); line-height: 1.45; } .ovg-cfgrij input[type="number"], .ovg-cfgrij select { width: 86px; padding: 4px 7px; font-size: .76rem; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 7px; background: var(--kaart); font-family: var(--font-mono); } .ovg-cfgrij select { width: 128px; font-family: var(--font-ui); } .ovg-cfgrij--vink { align-items: flex-start; } .ovg-cfgrij--vink input { width: 17px; height: 17px; accent-color: var(--c-groen); margin-top: 2px; flex: 0 0 auto; } .ovg-eh { font-size: .66rem; color: var(--c-ink-3); width: 34px; } .ovg-vast { background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 9px 11px; font-size: .7rem; line-height: 1.55; color: var(--c-ink-2); margin-top: 6px; } .ovg-cfgvak { display: flex; flex-direction: column; gap: 12px; } /* de zes blokken + de voet: één vak voor de wijzigingsbalk (besluit 339) */ .ovg-cfgvoet { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 13px 15px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--schaduw-tegel); } .ovg-cfgacties { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; } .ovg-cfgacties [hidden] { display: none; } /* de weggooi-knop: het hidden-attribuut wint van het display van de knopfamilie */ /* ---- adres-motor (bouwspec OPVOLGING · wireframe v3) ---- */ .ov { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 0; } .ov-kaart { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--radius); box-shadow: var(--schaduw-kaart); overflow: hidden; margin-top: 14px; } .ov-bakkop { display: flex; align-items: baseline; gap: 10px; padding: 10px 13px; border-bottom: 1px solid var(--lijn); background: var(--vlak); flex-wrap: wrap; } .ov-bakkop b { font-size: 13px; } .ov-bakkop span { font-size: 11px; color: var(--ink3); } .ov-eind { margin-left: auto; } .ov-lijf { padding: 11px 13px; } .ov-leeg { padding: 22px; color: var(--ink3); line-height: 1.6; } .ov-fout { padding: 12px 14px; border: 1px solid var(--stop); border-radius: var(--radius); background: var(--stop-t); color: var(--stop); margin-top: 14px; } .ov-fijn { color: var(--ink3); font-size: 11px; line-height: 1.5; } .ov-rechts { text-align: right; } .ov-pil { display: inline-block; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: var(--radius-pill); } .ov-pil--goed { background: var(--goed-t); color: var(--goed); } .ov-pil--let { background: var(--let-t); color: var(--let); } .ov-pil--stop { background: var(--stop-t); color: var(--stop); } .ov-pil--acc { background: var(--accent-t); color: var(--accent-d); } .ov-pil--stil { background: var(--vlak); color: var(--ink2); } .is-goed { color: var(--goed); } .ov-bel { display: grid; grid-template-columns: minmax(0, 1fr) 110px 190px 130px; gap: 12px; align-items: center; padding: 10px 13px; border-bottom: 1px solid var(--lijn); cursor: pointer; font-size: 12.5px; } .ov-bel:last-child { border-bottom: 0; } .ov-bel:hover, .ov-bel:focus-visible { background: var(--vlak); } .ov-bel.is-verzoek { border-left: 3px solid var(--goed); } .ov-gesprek { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 14px; align-items: start; } @media (max-width: 1100px) { .ov-gesprek { grid-template-columns: 1fr; } } .ov-gesprek .ov-kaart:first-child { margin-top: 14px; } .ov-tegel { border: 1px solid var(--lijn); border-radius: var(--radius-klein); padding: 10px 11px; margin-bottom: 9px; line-height: 1.55; font-size: 12.5px; } .ov-tegel--goed { border-color: var(--goed); background: var(--goed-t); } .ov-tegel h4 { margin: 0 0 6px; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink3); } .ov-tegel label { display: block; margin-bottom: 8px; font-size: 12px; } .ov-tegel input { display: block; width: 100%; margin-top: 4px; font: inherit; border: 1px solid var(--lijn); border-radius: var(--radius-klein); padding: 5px 8px; background: var(--kaart); color: var(--ink); } .ov-paar { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 12.5px; align-items: flex-start; line-height: 1.5; } .ov-paar--streep { border-top: 1px solid var(--lijn); margin-top: 4px; padding-top: 6px; } .ov-uitk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; } @media (max-width: 900px) { .ov-uitk { grid-template-columns: 1fr 1fr; } } .ov-uitk button { border: 1px solid var(--lijn); background: var(--kaart); border-radius: var(--radius-klein); padding: 9px 10px; font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 3px; } .ov-uitk button b { font-size: 12.5px; } .ov-uitk button span { font-size: 10.5px; color: var(--ink3); } .ov-uitk button.is-aan { border-color: var(--accent); background: var(--accent-t); } .ov-spoor { display: grid; grid-template-columns: 64px 120px minmax(0, 1fr) 150px; gap: 11px; padding: 9px 13px; border-bottom: 1px solid var(--lijn); font-size: 12px; align-items: start; } .ov-spoor:last-child { border-bottom: 0; } .ov-dag { font-family: var(--font-mono); font-weight: 800; font-size: 11px; color: var(--ink2); } .ov-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; } @media (max-width: 1000px) { .ov-twee { grid-template-columns: 1fr; } } .ov-twee .ov-kaart { margin-top: 14px; } /* ---- bellijst · bladeren en zoeken (BS.maakBlader) ---- Het zoekveld staat ín de kaart «Loopt in de flow», onder de kop. */ .ov-blbalk { margin: 0; padding: 10px 13px; border-bottom: 1px solid var(--lijn); } /* blok E (12-10) · van wie is deze bellijst: een regel boven de tegels */ .ov-eigen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding: 10px 13px; background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--radius); font-size: 13px; } .ov-eigen span { color: var(--ink3); font-size: 12px; } .ov-eigen select { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--lijn); border-radius: var(--radius-klein); background: var(--kaart); color: var(--ink); } /* ── opdrachtenlijst.css ── */ /* opdrachtenlijst.css — scherm `opdrachten` (bouwspec OPDRACHTEN §3). Referentie: wireframe-opdrachten-v8. Vorm en kleur uit casa360-stijl.css; geen kleurliteral. */ .opl { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; } .opl-fout { padding: 12px 14px; border: 1px solid var(--stop); border-radius: var(--radius); background: var(--stop-t); color: var(--stop); margin-top: 14px; } .opl-fijn { color: var(--ink3); font-size: 11px; line-height: 1.45; } .opl-klant { font-weight: 700; } .opl-rechts { text-align: right; } .is-stop { color: var(--stop); } .is-goed { color: var(--goed); } .opl-filters { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 12px 0; } .opl-chip { border: 1px solid var(--lijn); background: var(--kaart); border-radius: var(--radius-klein); padding: 4px 12px; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--ink2); cursor: pointer; } .opl-chip.is-aan { background: var(--accent-t); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); } .opl-scheiding { width: 1px; height: 18px; background: var(--lijn); margin: 0 4px; } .opl-zoek { flex: 1; min-width: 240px; font: inherit; font-size: 12.5px; border: 1px solid var(--lijn); border-radius: var(--radius-klein); padding: 6px 10px; background: var(--kaart); color: var(--ink); } .opl-bak { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 14px; align-items: start; } @media (max-width: 1180px) { .opl-bak { grid-template-columns: 1fr; } } .opl-kaart { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--radius); box-shadow: var(--schaduw-kaart); overflow: hidden; } .opl-kaart--los { margin-top: 14px; } .opl-bakkop { display: flex; align-items: baseline; gap: 10px; padding: 10px 13px; border-bottom: 1px solid var(--lijn); background: var(--vlak); flex-wrap: wrap; } .opl-bakkop b { font-size: 13px; } .opl-bakkop span { font-size: 11px; color: var(--ink3); } .opl-leeg { padding: 26px; text-align: center; color: var(--ink3); } /* de klant krijgt de ruimte: bij 560 px voor het paneel bleef er 70 px over en brak de naam per woord */ .opl-rij { display: grid; grid-template-columns: 88px minmax(180px, 1fr) 110px 120px 80px; gap: 11px; align-items: center; padding: 9px 13px; border-bottom: 1px solid var(--lijn); cursor: pointer; font-size: 12.5px; } .opl-rij:last-child { border-bottom: 0; } .opl-rij--kop { background: var(--vlak); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink3); font-weight: 700; cursor: default; } .opl-rij:not(.opl-rij--kop):hover { background: var(--vlak); } .opl-rij.is-gekozen { background: var(--accent-t); } .opl-pil { display: inline-block; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: var(--radius-pill); } .opl-pil--goed { background: var(--goed-t); color: var(--goed); } .opl-pil--let { background: var(--let-t); color: var(--let); } .opl-pil--stop { background: var(--stop-t); color: var(--stop); } .opl-pil--stil { background: var(--grijs); color: var(--ink2); } .opl-pil--iso { background: var(--goed-t); color: var(--goed); } .opl-pil--koz { background: var(--accent-t); color: var(--accent-d); } .opl-pillen { margin-top: 6px; display: flex; gap: 5px; flex-wrap: wrap; } .opl-balk { height: 8px; border-radius: 99px; background: var(--grijs2); overflow: hidden; display: flex; } .opl-balk i { display: block; height: 100%; } .opl-balk__bet { background: var(--goed); } .opl-balk__fac { background: var(--let); } .opl-marge { font-weight: 800; } .opl-marge.is-onder { color: var(--stop); } .opl-marge.is-ok { color: var(--goed); } .opl-paneel { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--radius); box-shadow: var(--schaduw-kaart); position: sticky; top: 14px; overflow: hidden; max-height: calc(100vh - 40px); display: flex; flex-direction: column; } .opl-paneelkop { padding: 12px 14px; border-bottom: 1px solid var(--lijn); background: var(--vlak); } .opl-paneellijf { padding: 12px 14px; overflow: auto; } .opl-paneelvoet { padding: 10px 14px; border-top: 1px solid var(--lijn); background: var(--vlak); display: flex; gap: 6px; flex-wrap: wrap; } .opl-tegel { border: 1px solid var(--lijn); border-radius: var(--radius-klein); padding: 10px 11px; margin-bottom: 9px; } .opl-tegel--stop { border-color: var(--stop); background: var(--stop-t); } .opl-tegel--let { border-color: var(--let); background: var(--let-t); } .opl-tegel h4 { margin: 0 0 7px; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink3); } .opl-paar { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 12.5px; align-items: flex-start; line-height: 1.5; } .opl-paar--streep { border-top: 1px solid var(--lijn); margin-top: 6px; padding-top: 6px; } .opl-poort { font-size: 11px; color: var(--stop); line-height: 1.5; padding: 2px 0 4px; } .opl-knoppen { display: flex; gap: 6px; margin-top: 7px; } .opl-knop--stop { color: var(--stop); border-color: var(--stop); } .opl-knop--stop:hover { background: var(--stop-t); } .opl-trij { display: grid; grid-template-columns: 96px 200px minmax(0, 1fr) 130px; gap: 11px; align-items: start; padding: 8px 13px; border-bottom: 1px solid var(--lijn); font-size: 12.5px; } .opl-trij:last-child { border-bottom: 0; } /* ---- annuleer-venster (OP6) ---- */ .opl-mask { position: fixed; inset: 0; background: var(--sluier); z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding-top: 5vh; } .opl-venster { background: var(--kaart); border-radius: var(--radius); width: min(640px, 94vw); max-height: 88vh; display: flex; flex-direction: column; box-shadow: var(--schaduw-zwevend); overflow: hidden; } .opl-vensterkop { padding: 12px 15px; border-bottom: 1px solid var(--lijn); background: var(--vlak); display: flex; align-items: center; justify-content: space-between; gap: 10px; } .opl-vensterlijf { padding: 13px 15px; overflow: auto; } .opl-venstervoet { padding: 10px 15px; border-top: 1px solid var(--lijn); background: var(--vlak); display: flex; gap: 6px; justify-content: flex-end; } .opl-veld { display: block; margin-bottom: 8px; font-size: 12px; } .opl-veld input { display: block; width: 100%; margin-top: 4px; font: inherit; border: 1px solid var(--lijn); border-radius: var(--radius-klein); padding: 6px 9px; background: var(--kaart); color: var(--ink); } /* ─── B3 (QUERY-HYGIENE §3) · bladeren ─────────────────────────────── De lijst was 25.544px hoog en toonde 252 records zonder te zeggen dat er meer waren. De balk hoort onderaan de lijst, niet erboven: je leest hem als je het einde bereikt. */ .opl-blader { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-top: var(--lijndikte) solid var(--c-lijn); } .opl-bladerknoppen { display: flex; gap: 6px; } .opl-blader .opl-chip[disabled] { opacity: .42; cursor: default; } /* KK · ketenkaart in het detailpaneel */ .opl-keten .opl-ketenstap { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: center; padding: 4px 0; border-top: 1px solid var(--lijn); font-size: 12.5px; } .opl-keten .opl-ketenstap:first-of-type { border-top: 0; } .opl-ketenstap i { font-style: normal; text-align: center; color: var(--ink2); } .opl-ketenstap.is-klaar i { color: var(--goed); } .opl-ketenstap.is-nu i { color: var(--let); } .opl-ketenstap.is-stop i { color: var(--stop); } .opl-ketenstap span { display: grid; } .opl-ketenstap small { color: var(--ink2); font-size: 11.5px; } .opl-ketenstap.is-wacht b { color: var(--ink2); font-weight: 500; } .opl-ketenstap em { font-style: normal; font-size: 11px; color: var(--ink2); white-space: nowrap; } /* ---- termijnen · bladeren en zoeken (BS.maakBlader) ---- Eén zoekveld boven de drie blokken; elk blok bladert zelf. */ .opl-blbalk { margin: 14px 0 0; } /* ── opdrachten.css ── */ /* ===================================================================== opdrachten.css — Module 1.2 · Opdrachten & voorbehoud. Bouwt op tokens + bouwstenen.css (+ drawer-basis uit recovery.css). ===================================================================== */ /* Keten-strip */ .op-keten { padding: 16px 18px; margin-bottom: 16px; } .op-keten__stappen { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 5px; margin-top: 12px; } .op-stap { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 600; color: var(--c-ink-3); } .op-stap__num { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .6rem; font-weight: 800; background: var(--c-paneel); color: var(--c-ink-3); border: var(--lijndikte) solid var(--c-lijn); } .op-stap.is-klaar { color: var(--c-ink-2); } .op-stap.is-klaar .op-stap__num { background: var(--c-groen-t); color: var(--c-groen-d); border-color: transparent; } .op-stap.is-actief { color: var(--c-ink); font-weight: 800; } .op-stap.is-actief .op-stap__num { background: var(--donker, var(--c-ink)); color: var(--c-creme); border-color: var(--c-ink); } .op-stap__pijl { color: var(--c-lijn-2); font-size: .74rem; } .op-keten__toel { margin: 12px 0 0; font-size: .76rem; color: var(--c-ink-2); max-width: 82ch; } /* Lijst */ .op-lijst { padding: 0; overflow: hidden; } .op-rij { display: grid; grid-template-columns: 96px 1.4fr 1.5fr 1.2fr .8fr; gap: 12px; align-items: center; padding: 13px 18px; border-top: var(--lijndikte) solid var(--c-lijn); cursor: pointer; transition: background var(--overgang); } .op-rij:hover { background: var(--c-creme); } .op-rij.is-actief { background: var(--c-groen-t); } .op-rij--kop { padding: 11px 18px; background: var(--c-paneel); border-top: 0; cursor: default; font-family: var(--font-mono); font-size: .56rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-amber); } .op-rij--kop:hover { background: var(--c-paneel); } .op-idcel { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; } .op-id { font-size: .74rem; color: var(--c-ink-2); } .op-cel { min-width: 0; } .op-klant { font-weight: 800; font-size: .84rem; } .op-sub { font-size: .7rem; color: var(--c-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .op-sub--intro { margin: 0 0 13px; white-space: normal; } .op-status, .op-vbnaam { justify-self: start; } .op-vbnaam { font-weight: 700; font-size: .76rem; display: block; margin-bottom: 3px; } .op-marge { text-align: right; display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-weight: 800; } .op-marge--ok { color: var(--c-groen-d); } .op-marge--laag { color: var(--c-terra-d); } .op-fiatvlag { font-size: .56rem; font-weight: 800; color: var(--c-terra-d); background: var(--c-terra-t); border-radius: 5px; padding: 1px 5px; } .op-poorttel { color: var(--c-amber); font-weight: 800; } /* Donker uitlegblok */ .op-uitlegdonker { margin-top: 14px; padding: 18px 20px; border-radius: var(--radius); background: var(--donker, var(--c-ink)); color: var(--c-lijn-2); font-size: .82rem; line-height: 1.6; } .op-uitlegdonker strong { color: var(--c-creme); } .op-uitlegdonker__kicker { color: var(--c-lijn-2); margin-bottom: 9px; display: block; } /* Configuratie */ .op-cfggrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } @media (max-width: 900px) { .op-cfggrid { grid-template-columns: 1fr; } } .op-cfgkaart { padding: 18px 20px; } .op-h2 { font-size: .95rem; font-weight: 800; margin: 0 0 3px; } .op-cfgrijen { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .op-cfgrij { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-radius: 10px; background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); } .op-cfgnum { font-weight: 800; font-size: .72rem; color: var(--c-groen-d); min-width: 18px; } .op-cfglabel { flex: 1; font-weight: 700; font-size: .8rem; } .op-cfgweg { background: transparent; border: 0; cursor: pointer; font-family: var(--font-ui); font-size: .7rem; font-weight: 700; color: var(--c-terra-d); } .op-cfgnieuw { display: flex; gap: 8px; } .op-cfgnieuw .off-reden { flex: 1; } /* Drawer-blokken */ .op-blok { padding: 14px 16px; margin-bottom: 14px; } .op-blok--vb { border-color: var(--c-amber); } .op-blok__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; } .op-kicker--amber { color: var(--c-amber); } .op-prijs { font-size: 1.05rem; font-weight: 800; } .op-maatregel { font-weight: 700; font-size: .8rem; margin-bottom: 4px; } .op-blok .chip { margin-top: 6px; } .op-wijzig { width: 100%; margin-top: 11px; padding: 9px; border-radius: 9px; border: 1px dashed var(--c-lijn-2); background: var(--kaart); font-family: var(--font-ui); font-size: .72rem; font-weight: 700; cursor: pointer; color: var(--c-ink-2); } .op-wijzig:hover { border-color: var(--c-groen); color: var(--c-groen-d); } .op-vbsub { font-size: .8rem; margin-bottom: 4px; } .op-vbacties { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; } .op-mini { padding: 8px 13px; font-size: .72rem; } .op-mini--groen { color: var(--c-groen-d); } .op-mini--terra { color: var(--c-terra-d); border-color: var(--c-terra); } /* Poort-checklist */ .op-poort { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; } @media (max-width: 560px) { .op-poort { grid-template-columns: 1fr; } } .op-check { display: flex; align-items: center; gap: 9px; background: transparent; border: 0; cursor: pointer; text-align: left; padding: 0; font-family: var(--font-ui); font-size: .78rem; font-weight: 600; color: var(--c-ink-3); } .op-check.is-klaar { color: var(--c-ink); } .op-check:disabled { cursor: default; } .op-check__box { width: 20px; height: 20px; flex: none; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--c-lijn-2); background: var(--kaart); color: var(--knop-ink); font-weight: 800; font-size: .72rem; } .op-check.is-klaar .op-check__box { background: var(--c-groen); border-color: var(--c-groen); } /* Margekaart */ .op-mrij { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .76rem; color: var(--c-ink-2); padding: 3px 0; } .op-mrij.is-sterk { font-weight: 800; font-size: .82rem; color: var(--c-ink); } .op-mrij--groen .mono { color: var(--c-groen-d); } .op-mrij--terra .mono { color: var(--c-terra-d); } .op-fiatknop { width: 100%; margin-top: 11px; padding: 10px; border-radius: 10px; border: var(--lijndikte) solid var(--c-terra); background: var(--c-terra-t); font-family: var(--font-ui); font-size: .76rem; font-weight: 700; cursor: pointer; color: var(--c-terra-d); } /* Drawer-voet */ .op-voetknoppen { display: flex; gap: 10px; } .op-annuleer { flex: none; color: var(--c-terra-d); border-color: var(--c-terra); } .op-release { flex: 1; } /* Annuleer-dialoog */ .op-reden { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border-radius: 11px; cursor: pointer; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); font-family: var(--font-ui); font-size: .8rem; font-weight: 700; color: var(--c-ink); text-align: left; } .op-reden__dot { width: 16px; height: 16px; border-radius: 50%; flex: none; border: 5px solid var(--c-lijn-2); background: var(--kaart); } .op-reden.is-actief { border-color: var(--c-terra); background: var(--c-terra-t); } .op-reden.is-actief .op-reden__dot { border-color: var(--c-terra); } .op-gevolg { display: flex; align-items: flex-start; gap: 9px; font-size: .76rem; color: var(--c-ink-2); } .op-gevolg .mono { color: var(--c-terra-d); font-weight: 700; flex: none; } .op-annuleer-bevestig:not(:disabled) { background: var(--c-terra); } .op-annuleer-bevestig:not(:disabled):hover { background: var(--c-terra-d); } /* B39 · backend-kaart: opdracht-dossiers met marge-opbouw */ /* Fix 22-07: zelfde euvel als de magazijn-kaart — de globale .kaart draagt geen padding, dus zonder eigen binnenmarge plakt de tekst tegen de rand. */ .op-bkkaart { padding: 16px 18px; margin-bottom: 14px; } .op-bkkop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .op-bkkop .mono { font-size: .7rem; color: var(--c-ink-3); } .op-bkkop > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .op-bkrijen { display: flex; flex-wrap: wrap; gap: 8px; } .op-bkrij { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 11px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); font-family: var(--font-ui); font-size: .78rem; cursor: pointer; color: var(--c-ink); } .op-bkrij .mono { font-size: .7rem; color: var(--c-ink-3); } .op-bkrij.is-actief { border-color: var(--c-groen); background: var(--c-groen-t); } .op-bkdossier { margin-top: 12px; padding: 13px 14px; border-radius: 12px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-paneel); } .op-bkdoskop { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; } .op-bkdoskop > div { flex: 1; display: flex; flex-direction: column; } .op-bksectie { margin-top: 12px; padding-top: 9px; border-top: var(--lijndikte) solid var(--c-lijn-2); display: flex; flex-direction: column; gap: 5px; } .op-bkregel { display: grid; grid-template-columns: 1.2fr 1fr auto auto; align-items: center; gap: 10px; font-size: .76rem; color: var(--c-ink-2); } .op-bkregel .mono:last-child { text-align: right; font-weight: 700; color: var(--c-ink); } .op-bkform { display: flex; align-items: center; gap: 8px; margin-top: 7px; } .op-bkform select, .op-bkform input { padding: 8px 10px; border-radius: 10px; border: var(--lijndikte) solid var(--c-lijn-2); font-family: var(--font-ui); font-size: .76rem; background: var(--kaart); color: var(--c-ink); } .op-bkform select { flex: 1; min-width: 0; } .op-bkform input { width: 84px; } /* Demo op praktijkschaal (18-07): paginering + "toon meer" bij volume */ .op-paginering { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: var(--lijndikte) solid var(--c-lijn); flex-wrap: wrap; } .op-paginering > .mono { font-size: 11.5px; color: var(--c-ink-3); } .op-bkmeer { margin: 10px 0 0; } /* Fase C (01-08): opdracht-modules per discipline — zelfde gezicht */ .opm-wortel { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 14px; } .opm-h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; } .opm-rij { display: grid; grid-template-columns: 108px 1.3fr 138px 1fr 100px 150px 116px; gap: 12px; align-items: center; padding: 11px 16px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .8rem; } .opm-rij--kop { border-top: 0; font-size: .6rem; letter-spacing: .08em; color: var(--c-ink-3); text-transform: uppercase; } .opm-wie { display: flex; flex-direction: column; min-width: 0; } .opm-adres { font-size: .68rem; color: var(--c-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .opm-voortgang { display: flex; flex-direction: column; gap: 3px; } .opm-baan { position: relative; height: 8px; border-radius: 99px; background: var(--c-paneel); overflow: hidden; } .opm-baan i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; } .opm-fac { background: var(--c-sage-t); } .opm-bet { background: var(--c-groen); } .opm-voortgang em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); } .opm-bron { font-size: .66rem; color: var(--c-ink-3); } /* Financieel (02-08): marge-kolom — rood alléén onder de norm (blokkadekleur) */ .opm-marge { font-size: .72rem; font-weight: 700; } .opm-marge em { font-style: normal; font-weight: 500; font-size: .62rem; color: var(--c-ink-3); } .opm-marge.is-groen { color: var(--c-groen-d); } .opm-marge.is-amber { color: var(--c-amber); } .opm-marge.is-rood { color: var(--c-rood); } .opm-marge--stil { color: var(--c-ink-3); font-weight: 500; } @media (max-width: 1000px) { .opm-rij { grid-template-columns: 1fr 1fr; } .opm-rij--kop { display: none; } } /* Fase D (01-08): Inmeet & fabriek — stappenbalk met betaalpoorten */ .if-wortel { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 12px; } .if-h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; } .if-uitleg { color: var(--c-ink-2); font-size: 13.5px; max-width: 78ch; margin: -4px 0 2px; } .if-kaart { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 12px 16px; display: flex; flex-direction: column; gap: 9px; box-shadow: var(--schaduw-tegel); } .if-kaart.is-gedempt { opacity: .78; border-color: var(--c-lijn); box-shadow: none; } .if-kaart__kop { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .82rem; } .if-adres { color: var(--c-ink-3); font-size: .74rem; } .if-stappen { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .if-pijl { color: var(--c-ink-3); font-size: .62rem; } .if-stap { border-radius: var(--radius-pill); padding: 3px 10px; font-size: .66rem; font-weight: 600; border: var(--lijndikte) solid var(--c-lijn); color: var(--c-ink-3); background: var(--kaart); white-space: nowrap; } .if-stap.is-groen { background: var(--c-groen-t); border-color: var(--c-groen); color: var(--c-groen-d); } .if-stap.is-actief { border: 2px solid var(--c-groen); color: var(--c-ink); font-weight: 700; } .if-stap.is-wacht { background: var(--c-amber-t); border-color: var(--c-amber); color: var(--c-ink); } .if-stap.is-dicht { } .if-wachtlbl { font-size: .7rem; color: var(--c-ink-3); } .if-wachtslot { font-size: .7rem; color: var(--c-ink); background: var(--c-amber-t); border-radius: var(--radius-pill); padding: 4px 12px; } /* Opdrachtdossier (02-08): één scherm per opdracht */ .od-wortel { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 14px; } .od-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; } .od-kop__wie { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; } .od-kop__wie h1 { margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; } .od-klantlink { color: inherit; text-decoration: none; } .od-klantlink:hover { color: var(--c-groen-d); text-decoration: underline; } .od-nr { font-size: .72rem; color: var(--c-ink-3); } .od-adres { font-size: .78rem; color: var(--c-ink-2); } .od-kop__acties { display: flex; gap: 8px; flex-wrap: wrap; } .od-fasen { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .od-fase { border-radius: var(--radius-pill); padding: 4px 12px; font-size: .68rem; font-weight: 600; border: var(--lijndikte) solid var(--c-lijn); color: var(--c-ink-3); background: var(--kaart); white-space: nowrap; } .od-fase.is-groen { background: var(--c-groen-t); border-color: var(--c-groen); color: var(--c-groen-d); } .od-fase.is-actief { border: 2px solid var(--c-groen); color: var(--c-ink); font-weight: 700; } .od-pijl { color: var(--c-ink-3); font-size: .62rem; } .od-raster { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 18px; align-items: start; } .od-links { display: flex; flex-direction: column; gap: 14px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--schaduw-tegel); } .od-inzien { font-style: normal; color: var(--c-ink-3); font-size: .64rem; } .od-rechts { min-width: 0; display: flex; flex-direction: column; gap: 12px; } .od-tegels { margin-bottom: 0; } .od-warm { color: var(--c-amber); font-weight: 700; } .od-termijnen { display: flex; flex-direction: column; } .od-trij { display: grid; grid-template-columns: minmax(0, 1fr) 110px 190px auto; gap: 12px; align-items: center; padding: 10px 4px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .8rem; } .od-trij:first-child { border-top: 0; } .od-tactie { display: flex; justify-content: flex-end; } .od-wacht { font-size: .66rem; color: var(--c-ink-3); } .od-acties { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; } .od-hint { font-size: .68rem; color: var(--c-ink-3); } .od-leeg { font-size: .78rem; color: var(--c-ink-3); margin: 0; } .od-reden { font-style: normal; color: var(--c-ink-2); } .opm-nr { color: var(--c-groen-d); text-decoration: none; font-size: .72rem; font-weight: 700; font-family: var(--font-mono); } .opm-nr:hover { text-decoration: underline; } /* Financieel-gebied (02-08): beoogd naast werkelijk, opbouw links/rechts */ .od-finkaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; } .od-finkaart { background: var(--c-paneel); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; } .od-finkaart__lbl { font-size: .66rem; color: var(--c-ink-3); } .od-finkaart b { font-size: 1.15rem; font-weight: 800; color: var(--c-ink); } .od-finkaart b.is-groen { color: var(--c-groen-d); } .od-finkaart b.is-amber { color: var(--c-amber); } .od-finkaart b.is-rood { color: var(--c-rood); } .od-finkaart__sub { font-size: .64rem; color: var(--c-ink-3); } .od-finnorm { margin-top: 10px; font-size: .72rem; color: var(--c-rood); font-weight: 600; } .od-finkolommen { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 14px; } .od-finrij { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 7px 0; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .76rem; } .od-finrij--stil { color: var(--c-ink-3); font-size: .68rem; } @media (max-width: 980px) { .od-raster { grid-template-columns: 1fr; } } /* ═══ IM1 · «wat er nú moet» ══════════════════════════════════════════ De zin staat bóven de stappenbalk en niet erin: een werkvoorbereider met dertig lopende opdrachten leest liever één regel dan zeven bolletjes. Vier toestanden, want ze vragen een ander soort aandacht — er ligt een besluit, er is werk, we wachten op iemand anders, of het loopt gewoon. */ .if-nu { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: var(--radius); border: var(--lijndikte) solid var(--c-lijn); background: var(--c-paneel-2); font-size: .82rem; } .if-nu b { font-weight: 700; color: var(--c-ink); } .if-nu.is-stop { border-color: var(--c-rood); background: var(--kaart); } .if-nu.is-stop b { color: var(--c-rood); } .if-nu.is-let { border-color: var(--c-amber); background: var(--c-amber-t); } .if-nu.is-rust { color: var(--c-ink-3); } .if-nu.is-goed { border-color: var(--c-groen); background: var(--c-groen-t); } .if-nu.is-goed b { color: var(--c-groen-d); } /* Scheef is een signaal, geen blokkade: amber, met het aantal erbij. */ .if-scheef { font-size: .66rem; font-weight: 700; color: var(--c-amber); border: var(--lijndikte) solid var(--c-amber); background: var(--c-amber-t); border-radius: var(--radius-pill); padding: 2px 8px; } /* ═══ IM5 · het dossier: drie kolommen ══════════════════════════════ In de volgorde waarin de werkvoorbereider kijkt: wélke positie, wát er gemeten is, en wát hij ermee doet. De middenkolom is de breedste — daar staat de maatketen, en dat is waar hij zijn oordeel op baseert. */ .if-drie { display: grid; grid-template-columns: 214px minmax(0, 1.45fr) minmax(0, 1fr); gap: 16px; align-items: start; } @media (max-width: 1100px) { .if-drie { grid-template-columns: 1fr; } } .if-kol { display: flex; flex-direction: column; gap: 9px; min-width: 0; } .if-kol h3 { margin: 0; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); font-weight: 700; } .if-kol--maat, .if-kol--besluit { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--schaduw-tegel); } /* Links: de posities. De linkerrand draagt de stand — beoordeeld groen, buiten de marge amber. Zo zie je waar het geld zit zonder te lezen. */ .if-pos { text-align: left; display: flex; flex-direction: column; gap: 2px; cursor: pointer; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn-2); border-left: 3px solid var(--c-lijn); border-radius: var(--radius); padding: 9px 12px; transition: box-shadow var(--overgang), border-color var(--overgang); } .if-pos:hover { box-shadow: var(--schaduw-tegel); } .if-pos.is-nu { border-left-color: var(--c-groen); box-shadow: var(--schaduw-tegel); } .if-pos.is-buiten { border-left-color: var(--c-amber); } .if-pos__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: .82rem; } .if-pos__sub { font-size: .7rem; color: var(--c-ink-2); } .if-pos__geld { font-family: var(--font-mono); font-size: .7rem; color: var(--c-ink-3); } .if-vink { color: var(--c-groen-d); font-size: .78rem; } /* Midden: de maatketen. Elke regel een stap, bedragen en maten in mono zodat ze onder elkaar uitlijnen — hier wordt vergeleken, niet gelezen. */ .if-maat { display: flex; flex-direction: column; } .if-mrij { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; padding: 7px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); } .if-mrij:last-child { border-bottom: 0; } .if-mrij span { font-size: .76rem; color: var(--c-ink-2); } .if-mrij b { font-family: var(--font-mono); font-size: .82rem; font-variant-numeric: tabular-nums; } .if-mrij b u { text-decoration: none; border-bottom: 2px solid var(--c-groen); } .if-mrij em { grid-column: 1 / -1; font-style: normal; font-size: .66rem; color: var(--c-ink-3); } .if-advies { display: flex; flex-direction: column; gap: 3px; margin-top: 11px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 10px 12px; } .if-advies b { font-size: .8rem; } .if-advies span { font-size: .74rem; line-height: 1.55; color: var(--c-ink-2); } .if-advies.is-goed { border-color: var(--c-groen); background: var(--c-groen-t); } .if-advies.is-goed b { color: var(--c-groen-d); } .if-advies.is-let { border-color: var(--c-amber); background: var(--c-amber-t); } /* Memo-geel: een notitie van een mens, geen systeemtekst. */ .if-memo { margin-top: 11px; background: var(--c-memo); border-radius: var(--radius); padding: 10px 12px; font-size: .76rem; line-height: 1.55; } .if-memo span { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); margin-bottom: 3px; } /* Rechts: het besluit. Vier keuzes met hun gevolg erbij — wie hier klikt moet weten wat er met het geld gebeurt, niet alleen met de status. */ .if-eerder { display: flex; flex-direction: column; gap: 2px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 9px 11px; background: var(--c-paneel-2); } .if-eerder span { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); } .if-eerder b { font-size: .8rem; } .if-eerder em { font-style: normal; font-size: .7rem; color: var(--c-ink-2); line-height: 1.5; } .if-keuzes { display: flex; flex-direction: column; gap: 7px; } .if-keuze { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 9px 11px; } .if-keuze.is-nu { border-color: var(--c-groen); background: var(--c-groen-t); } .if-keuze input { margin-top: 3px; accent-color: var(--c-groen); } .if-keuze span { display: flex; flex-direction: column; gap: 1px; } .if-keuze b { font-size: .8rem; } .if-keuze em { font-style: normal; font-size: .7rem; color: var(--c-ink-2); line-height: 1.45; } .if-bedraghint { margin: 0; font-size: .74rem; line-height: 1.5; color: var(--c-ink-2); } .if-som { margin: 0; font-size: .74rem; color: var(--c-ink-2); } .if-som b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--c-ink); } .if-wachtlbl { font-size: .7rem; color: var(--c-ink-3); } /* Altijd-bereikbare ingang naar het dossier: een tekstknop, geen tegel — hij hoort niet te concurreren met de actieknop in de nu-regel. */ .if-open { border: 0; background: none; padding: 0 0 0 6px; cursor: pointer; font: inherit; font-size: .74rem; color: var(--c-groen-d); text-decoration: underline; } .if-open:hover { color: var(--c-ink); } /* Retour is geen afronding: amber en een kringetje, niet groen met een vink. */ .if-retour { color: var(--c-amber); font-size: .8rem; font-weight: 700; } .if-pos.is-retour { border-left-color: var(--c-amber); } /* ═══ IM6 · het handtekening-blok ═══════════════════════════════════ Onder de drie kolommen: dit is de afsluiting van de stapel, geen vierde ding om tussendoor te doen. */ .if-teken { display: flex; align-items: center; justify-content: space-between; gap: 18px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 14px 18px; box-shadow: var(--schaduw-tegel); } .if-teken > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .if-teken b { font-size: .88rem; } .if-teken em { font-style: normal; font-size: .74rem; line-height: 1.55; color: var(--c-ink-2); max-width: 86ch; } .if-teken.is-goed { border-color: var(--c-groen); background: var(--c-groen-t); } .if-teken.is-goed b { color: var(--c-groen-d); } /* Rood is de blokkadekleur en blijft dat: hier staat de opdracht stil. */ .if-teken.is-stop { border-color: var(--c-rood); } .if-teken.is-stop b { color: var(--c-rood); } .if-teken.is-wacht { border-style: dashed; } .if-zwak { color: var(--c-amber) !important; font-weight: 600; } .if-tekenknoppen { display: flex; gap: 8px; flex-wrap: wrap; flex: none; } .if-rood { color: var(--c-rood); border-color: var(--c-rood); } /* ═══ IM8 · Inmeet & fabriek · Beheer ═══════════════════════════════ Eén gedachte draagt dit scherm: wijzigen is een nieuwe versie, geen overschrijving. Daarom staan de versies bovenaan met wat erop loopt — dat is wat je wilt weten vóór je de aftrek verhoogt. */ .ib-wortel { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 14px; } .ib-h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; } .ib-lead { color: var(--c-ink-2); font-size: 13.5px; line-height: 1.6; max-width: 82ch; margin: -4px 0 0; } .ib-versies { display: flex; gap: 8px; flex-wrap: wrap; } .ib-versie { display: flex; flex-direction: column; gap: 1px; font-family: var(--font-mono); font-size: .72rem; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 6px 11px; background: var(--kaart); } .ib-versie em { font-family: var(--font-ui); font-style: normal; font-size: .62rem; color: var(--c-ink-3); } .ib-versie.is-nu { border-color: var(--c-lijn-2); } .ib-versie.is-nieuw { border-color: var(--c-groen); background: var(--c-groen-t); color: var(--c-groen-d); } .ib-kaart { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--schaduw-tegel); display: flex; flex-direction: column; gap: 2px; } .ib-kaart__kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 8px; } .ib-kaart h3 { margin: 2px 0 0; font-size: .95rem; font-weight: 800; } .ib-uitleg { font-size: .76rem; line-height: 1.6; color: var(--c-ink-2); max-width: 84ch; margin-bottom: 10px; } .ib-kop4 { margin: 12px 0 2px; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); font-weight: 700; } /* Eén regel per instelling: label, waarde, en waarom hij bestaat. */ .ib-rij { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: baseline; padding: 7px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); } .ib-rij:last-child { border-bottom: 0; } .ib-rij span { font-size: .8rem; } .ib-rij b { font-family: var(--font-mono); font-size: .82rem; font-variant-numeric: tabular-nums; } .ib-rij em { grid-column: 1 / -1; font-style: normal; font-size: .68rem; line-height: 1.5; color: var(--c-ink-3); } .ib-fabriek, .ib-inmeter, .ib-mfout { display: grid; align-items: center; gap: 4px 14px; padding: 10px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); } .ib-fabriek { grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1.6fr) auto; } .ib-inmeter { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.4fr) auto auto; } .ib-mfout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) auto auto; } .ib-fabriek:last-child, .ib-inmeter:last-child, .ib-mfout:last-child { border-bottom: 0; } .ib-fabriek > div, .ib-inmeter > div, .ib-mfout > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .ib-fabriek b, .ib-inmeter b, .ib-mfout b { font-size: .84rem; } .ib-fabriek span, .ib-inmeter span, .ib-mfout span { font-size: .72rem; color: var(--c-ink-2); } .ib-sub { font-size: .72rem; color: var(--c-ink-3); } .ib-fmt { font-size: .62rem; letter-spacing: .06em; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-pill); padding: 2px 8px; color: var(--c-ink-2); } .ib-acties { display: flex; gap: 6px; } /* Gearchiveerd blijft zichtbaar — gedempt, niet weg. */ .ib-inmeter.is-weg { opacity: .55; } .ib-fout { font-size: .68rem; font-weight: 700; color: var(--c-amber); } .ib-fout.is-stop { color: var(--c-rood); } .ib-mfout.is-klaar { opacity: .6; } .ib-klaar { font-size: .7rem; color: var(--c-groen-d); font-weight: 700; } .ib-weg { color: var(--c-rood); border-color: var(--c-rood); } /* Twee getallen naast elkaar: breedte en hoogte horen bij elkaar. */ .ib-paar { display: grid; grid-template-columns: minmax(0, 1fr) 110px 110px; gap: 10px; align-items: end; padding: 5px 0; } .ib-paar > span { font-size: .78rem; color: var(--c-ink-2); padding-bottom: 9px; } @media (max-width: 800px) { .ib-fabriek, .ib-inmeter, .ib-mfout, .ib-paar { grid-template-columns: 1fr; } } /* ═══ M1 · de fiat-strook onder het marge-dossier ═════════════════════ Hij hoort op te vallen zonder te schreeuwen: dit is de plek waar iemand een besluit neemt over geld dat de organisatie niet verdient. Amber en niet rood — een marge onder de norm is een afweging, geen blokkade. */ .op-fiat { border-top: var(--lijndikte) solid var(--lijn); padding-top: 10px; } .op-fiat .op-bkform input { flex: 1 1 auto; min-width: 0; } .op-fiat .op-bkregel { background: var(--goed-t); border-radius: var(--radius-klein); padding: 6px 8px; } /* KK · de ketenkaart in de opdracht-drawer */ .op-keten .op-ketenlijst { display: grid; gap: 4px; margin-top: 6px; } .op-ketenstap { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--lijn); font-size: 12.5px; } .op-ketenstap:last-child { border-bottom: 0; } .op-ketenstap > div { display: grid; } .op-ketenstap > div span { color: var(--ink2); font-size: 11.5px; } .op-ketenstap em { font-style: normal; font-size: 11px; color: var(--ink2); white-space: nowrap; } .op-ketenglyph { font-style: normal; text-align: center; color: var(--ink2); } .op-ketenstap.is-klaar .op-ketenglyph { color: var(--goed); } .op-ketenstap.is-nu .op-ketenglyph { color: var(--let); } .op-ketenstap.is-stop .op-ketenglyph { color: var(--stop); } .op-ketenstap.is-nu b { color: var(--ink); } .op-ketenstap.is-wacht b, .op-ketenstap.is-wacht span { color: var(--ink2); } .op-ketenhint { color: var(--ink2); font-size: 12px; margin: 6px 0 0; } /* ── pijplijn.css ── */ /* ===================================================================== pijplijn.css — Module 1.3 · Pijplijn & leads. Bouwt op tokens + bouwstenen.css. Kolomtinten en bron-tags via token-mapping. ===================================================================== */ /* Balk: tabs links, scope rechts */ .pip-balk { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; } .pip-tabs { margin-bottom: 0; } .pip-scope { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .pip-scopenote { font-size: .72rem; color: var(--c-ink-3); } .pip-scopeknop { padding: 7px 14px; border-radius: 9px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); color: var(--c-ink-2); font-family: var(--font-ui); font-size: .74rem; font-weight: 700; cursor: pointer; transition: border-color var(--overgang), background var(--overgang); } .pip-scopeknop.is-actief { border-color: var(--c-groen); background: var(--c-groen-t); color: var(--c-groen-d); } /* KPI-strip: gedeelde .bs-stat (bouwstenen.css). */ /* Kanban */ .pip-kanban { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px; align-items: start; } @media (max-width: 1100px) { .pip-kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .pip-kolom { border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); overflow: hidden; } .pip-kolom--stil { background: var(--c-creme); } .pip-kolom--groen { background: var(--c-groen-t); } .pip-kolom--paneel { background: var(--c-paneel); } .pip-kolom--amber { background: var(--c-amber-t); } .pip-kolom--groend { background: var(--c-groen-t); } .pip-kolom__kop { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 9px 12px; font-weight: 800; font-size: .78rem; } .pip-kolom__tel { font-size: .62rem; color: var(--c-ink-2); font-weight: 700; } .pip-kolom__body { display: flex; flex-direction: column; gap: 9px; padding: 11px; min-height: 80px; } .pip-leeg { text-align: center; color: var(--c-ink-3); font-size: .74rem; padding: 8px 0; } /* Kans-kaart */ .pip-kaart { border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: var(--kaart); padding: 12px 13px; display: flex; flex-direction: column; gap: 8px; } .pip-kaart.is-stagnerend { border-color: var(--c-terra); } .pip-kaart__kop { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; } .pip-id { font-size: .64rem; color: var(--c-ink-3); } .pip-tags { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .pip-scope-tag { font-size: .56rem; color: var(--c-ink-3); text-transform: uppercase; } .pip-klant { font-weight: 800; font-size: .84rem; } .pip-sub { font-size: .68rem; color: var(--c-ink-3); } .pip-bedragen { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .pip-potentie { font-weight: 800; font-size: .84rem; } .pip-gewogen { font-size: .68rem; font-weight: 700; color: var(--c-groen-d); } .pip-kansregel { display: flex; justify-content: space-between; font-size: .62rem; color: var(--c-ink-3); margin-bottom: 3px; } .pip-kaart__voet { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .pip-dagen { font-size: .62rem; color: var(--c-ink-3); } .pip-acties { display: flex; gap: 6px; } .pip-volgende { flex: 1; padding: 8px; border: 0; border-radius: 9px; background: var(--c-groen); color: var(--knop-ink); font-family: var(--font-ui); font-size: .72rem; font-weight: 700; cursor: pointer; transition: background var(--overgang); } .pip-volgende:hover { background: var(--c-groen-d); } .pip-verlies { padding: 8px 10px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 9px; background: var(--kaart); color: var(--c-terra-d); font-family: var(--font-ui); font-size: .72rem; font-weight: 700; cursor: pointer; } .pip-verlies:hover { border-color: var(--c-terra); background: var(--c-terra-t); } /* Bron-tags (blauw/paars uit prototype → stil/terra) */ .pip-bron { font-family: var(--font-mono); font-size: .56rem; font-weight: 700; letter-spacing: .03em; padding: 2px 7px; border-radius: 5px; text-transform: uppercase; } .pip-bron--groen { color: var(--c-groen-d); background: var(--c-groen-t); } .pip-bron--amber { color: var(--c-amber); background: var(--c-amber-t); } .pip-bron--stil { color: var(--c-ink-2); background: var(--c-paneel); } .pip-bron--terra { color: var(--c-terra-d); background: var(--c-terra-t); } /* Lead-instroom */ .pip-merge { margin-left: 10px; padding: 8px 14px; font-size: .74rem; } .pip-leads { padding: 0; overflow: hidden; margin-top: 14px; } .pip-lrij { display: grid; grid-template-columns: 90px 1.3fr 1.3fr 1.6fr 1fr 150px; gap: 12px; align-items: center; padding: 13px 18px; border-top: var(--lijndikte) solid var(--c-lijn); } .pip-lrij--kop { padding: 12px 18px; background: var(--c-paneel); border-top: 0; font-family: var(--font-mono); font-size: .56rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); } .pip-cel { min-width: 0; } .pip-cel .chip { margin-top: 4px; } .pip-woning { font-size: .76rem; color: var(--c-ink-2); } .pip-ctx { font-size: .7rem; line-height: 1.45; color: var(--c-ink-3); } .pip-datum { font-size: .64rem; color: var(--c-ink-3); margin-top: 3px; } .pip-leadactie { display: flex; } .pip-lead-knop { width: 100%; padding: 9px; font-size: .72rem; } .pip-voetnoot { margin-top: 12px; font-size: .7rem; color: var(--c-ink-3); } /* Kop-acties (export + nieuwe lead) naast elkaar */ .pip-kopacties { display: flex; gap: 10px; align-items: center; } /* Bel-eerst-lijst (B1a) */ .pip-bellijst { padding: 14px 18px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 0; } .pip-bellijst__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--c-lijn); } .pip-belnote { font-size: 12px; color: var(--c-ink-2); } .pip-belrij { display: grid; grid-template-columns: 28px 1fr auto auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--c-lijn); } .pip-belrij:last-child { border-bottom: 0; } .pip-belrang { font-weight: 800; color: var(--c-groen-d); font-size: 15px; } .pip-belreden { font-size: 12.5px; color: var(--c-ink-2); } .pip-belrij.is-stagnerend .pip-belreden { color: var(--c-terra); } .pip-belknop { white-space: nowrap; } /* Dubbel-lead-alarm (B1b) */ .pip-dupalarm { grid-column: 1 / -1; background: color-mix(in srgb, var(--c-amber) 12%, var(--c-paneel)); border: 1px solid var(--c-amber); border-radius: 12px; padding: 10px 14px; font-size: 13px; line-height: 1.45; } /* Regelset-notitie (B1c) */ .pip-regelsetnote { grid-column: 1 / -1; font-size: 12.5px; color: var(--c-ink-2); margin: 0; } .pip-filter-reset { margin-left: 10px; } /* B25 · backend-kaart: website & funnel-instroom (web-leads) */ .pip-wlkaart { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; margin-bottom: 16px; } .pip-wlkop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; } .pip-wlkop > span { font-size: 11px; color: var(--c-ink-2); } .pip-wlrij { display: grid; grid-template-columns: 130px 1fr auto auto; gap: 10px; align-items: center; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 8px 12px; } .pip-wlsoort { font-size: 11.5px; color: var(--c-ink-2); } .pip-wlrij > div { display: flex; flex-direction: column; min-width: 0; } .pip-wlrij > div > span { font-size: 11.5px; color: var(--c-ink-2); } .pip-wlrij > div > span em { font-style: normal; color: var(--c-ink-3); } .pip-wlacties { display: flex; gap: 6px; align-items: center; } .pip-wlafspraak { font-size: 11px; color: var(--c-groen-d); } /* FT-1.2: kicker en titel van het instroomblok op eigen regels */ .pip-wlkop .kicker { display: block; margin-bottom: 3px; } /* ── relaties.css ── */ /* relaties.css — de lijst en de ingangen. RE15 (03-09) haalde de regels voor de verdwenen drawer, Woningkluis en het weergaven-paneel eruit. */ /* ===================================================================== relaties.css — Module 1.5 · Relaties & Klant-360. Bouwt op tokens + bouwstenen.css (lijst, drawer, chips). ===================================================================== */ /* Lijst */ .rel-rij.is-actief { background: var(--c-groen-t); } .rel-cs .mono { font-size: 1.25rem; font-weight: 800; } dat blok .off-veld { margin: 0; } .bs-form[hidden] { display: none !important; } .rel-kvkres .mono { font-size: .62rem; color: var(--c-ink-3); } .rel-intgl--klant.is-actief { border-color: var(--c-groen); } .rel-intgl--klant.is-actief .rel-intgl__n { color: var(--c-groen-d); } /* ═══ RE2 · de relatielijst uit wireframe v3 ═══ De lijst: segment- en rollenbalk boven, de tabel met kolomkeuze en bulk-acties eronder. Alleen tokens. */ .rl-schil { display: flex; flex-direction: column; height: 100%; min-height: 0; } .rl-balk { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; padding: 18px 26px 12px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .rl-h1 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; } .rl-rek { flex: 1; } .rl-zoek { min-width: 300px; padding: 8px 12px; font-size: .8rem; font-family: inherit; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); } /* RE7 (voorstel A, 12-08): het weergaven-paneel is weg — de lijst krijgt de volle breedte; het paneel ernaast is weg (RE7); RE15 haalde zijn stijlen eruit. */ .rl-vlak { display: grid; grid-template-columns: minmax(0, 1fr); flex: 1; min-height: 0; } /* RE7 · segment- en rollenbalk: aaneengesloten chipgroepen mét telling */ .rl-segmentbalk { display: flex; align-items: center; gap: 14px; padding: 10px 20px 0; flex-wrap: wrap; } .rl-seggroep { display: inline-flex; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 99px; overflow: hidden; } .rl-seg { border: 0; background: var(--kaart); padding: 6px 12px; font: 700 .72rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; border-right: var(--lijndikte) solid var(--c-lijn); } .rl-seg:last-child { border-right: 0; } .rl-seg.is-actief { background: var(--c-groen); color: var(--knop-ink); } .rl-seg.is-actief .rl-tel { color: var(--knop-ink); opacity: .85; } .rl-tel { font-size: .62rem; color: var(--c-ink-3); } .rl-richting { margin-left: 4px; font-size: .6rem; } .rl-sorteer.is-actief { color: var(--c-ink); } .rl-vknop.is-actief { background: var(--c-groen-t); font-weight: 700; color: var(--c-groen-d); } .rl-vnieuw.is-actief { background: var(--c-groen-t); color: var(--c-groen-d); border-style: solid; border-color: var(--c-groen); } /* rechts: tabel */ .rl-tabelvlak { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .rl-lkop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 20px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .rl-lkop b { font-size: .86rem; } .rl-telling { font-size: .72rem; color: var(--c-ink-3); margin-right: 8px; } .rl-bulk { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 9px 20px; background: var(--c-groen-t); border-bottom: var(--lijndikte) solid var(--c-groen); font-size: .78rem; } .rl-tabelscroll { flex: 1; overflow: auto; } .rl-tabel { border-collapse: collapse; width: 100%; } .rl-tabel th { position: sticky; top: 0; background: var(--kaart); text-align: left; padding: 8px 10px; border-bottom: var(--lijndikte) solid var(--c-lijn-2); z-index: 1; } .rl-sorteer { border: 0; background: none; font: inherit; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-3); cursor: pointer; padding: 0; } .rl-sorteer:hover { color: var(--c-ink); } .rl-tabel td { padding: 9px 10px; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; vertical-align: top; } .rl-rij { cursor: pointer; } .rl-rij:hover td { background: var(--c-paneel-2); } .rl-rij.is-archief td { opacity: .62; } .rl-vink { width: 34px; } .rl-sub { font-size: .68rem; color: var(--c-ink-3); } .rl-fase { font-size: .64rem; font-weight: 700; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 99px; padding: 1px 9px; color: var(--c-ink-2); white-space: nowrap; } .rl-fase.is-klant { background: var(--donker, var(--c-ink)); border-color: var(--c-ink); color: var(--knop-ink); } .rl-fase.is-offerte { border-color: var(--c-groen); color: var(--c-groen-d); } .rl-fase.is-akkoord { background: var(--c-groen-t); border-color: var(--c-groen); color: var(--c-groen-d); } .rl-fase.is-opvolging { border-color: var(--c-amber); color: var(--c-amber); } .rl-dubbel { font-size: .6rem; font-weight: 800; color: var(--c-amber); border: 1px solid var(--c-amber); border-radius: 4px; padding: 0 5px; margin-left: 6px; white-space: nowrap; } .rl-tag { font-size: .62rem; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 99px; padding: 0 7px; margin-right: 3px; color: var(--c-ink-2); } .rl-pagina { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 10px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .74rem; } /* modalen: kolomkeuze en de verzendlijst van een campagne */ .rl-kolkeuze { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; } .rl-kolvink { display: flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--c-ink-2); } .rl-kolvink input { accent-color: var(--c-groen); } .rl-verzendlijst { max-height: 240px; overflow-y: auto; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); } .rl-verzendrij { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; font-size: .74rem; border-bottom: var(--lijndikte) solid var(--c-lijn); } .rl-verzendrij:last-child { border-bottom: 0; } .rl-let { font-size: .72rem; color: var(--c-amber); margin: 8px 0 0; } /* RE4 · de tweede ingang: schakelaar Relaties | Woningen */ .rl-schakel { display: flex; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); overflow: hidden; } .rl-schakelknop { border: 0; background: var(--kaart); padding: 6px 14px; font-size: .74rem; font-weight: 700; color: var(--c-ink-2); font-family: inherit; cursor: pointer; } .rl-schakelknop.is-actief { background: var(--c-groen); color: var(--knop-ink); } /* RE11 · een afgeleide eigenaar is geen toewijzing. Hij komt van de laatste offerte, dus hij staat er lichter bij — met het waaróm ernaast. */ .rel-eig--afgeleid { color: var(--c-ink-2); } .rel-eig--afgeleid i { display: block; font: 400 .62rem/1.3 var(--font-mono); color: var(--c-ink-3, var(--c-ink-2)); font-style: normal; } /* smal: de lijst in één kolom (het weergaven-paneel ernaast is sinds RE7 weg) */ .rl-vlak { grid-template-columns: 1fr; } @media (max-width: 1000px) { .rl-vlak { grid-template-columns: 1fr; } } /* RE16 · een afgevallen lead is een stand, geen leeg vakje */ .rl-fase.is-afgevallen { color: var(--c-ink-2); text-decoration: line-through; } /* ── klantdossier.css ── */ /* klantdossier.css — klantkaart + Klant-360 samengevoegd (31-07). EÉN SCHERM (besluit 336, 09-10-2026): het dossier staat op de dichtheidsnorm — kopband en tabbalk uit de bouwstenen, drie kolommen die zelf scrollen (es-scherm/es-kolom in app.css), panelen op --pad, rijen op --rij, cijfers op --kpi. Alleen Werkbank-tokens; de oude --c-*-namen zijn hier weg. */ .kd-wortel { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; } .kd-kicker { display: block; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); } .kd-leeg { font-size: .74rem; color: var(--ink3); margin: 0; } .kd-blok { display: flex; flex-direction: column; gap: 0; } .kd-blok > .bs-paneel__kop + .bs-strook, .kd-blok > .bs-paneel__kop + .bs-velden { padding-top: 6px; } .kd-links .kc-memo { margin: 0; } /* RE3 · het record in drie kolommen (wireframe v3) → 336b · elke kolom scrolt in zichzelf */ .kd-raster { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; } .kd-raster--drie { grid-template-columns: 300px minmax(0, 1fr) 300px; gap: 12px; align-items: stretch; } .kd-midden { min-width: 0; } .kd-inhoud { padding: 8px var(--pad) 10px; } .kd-inhoud .rec-h3:first-child { margin-top: 0; } /* klantwaarde in cijfers (de strook komt uit de bouwstenen; .kd-waarde blijft de haak) */ .kd-waarde .bs-strook { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* contact: inline bewerken binnen BS.velden */ .kd-inlineknop { border: 0; background: none; font: inherit; color: var(--ink); text-align: left; padding: 1px 3px; margin: -1px -3px; border-radius: 4px; cursor: text; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kd-inlineknop:hover { background: var(--accent-t); box-shadow: inset 0 -1px 0 var(--accent); } .kd-inlineknop:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } .kd-inline { width: 100%; padding: 3px 6px; font: inherit; font-size: .76rem; border: var(--lijndikte) solid var(--accent); border-radius: 5px; } .kd-toon { margin: 0 var(--pad) 10px; border: 1px dashed var(--lijn2); background: none; border-radius: var(--radius-klein); padding: 4px 10px; font-size: .66rem; color: var(--ink2); font-family: inherit; cursor: pointer; } .kd-toon:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } /* woning: de woningkaart staat in de smalle kolom — de bouwsteen zet de foto dan zelf bovenaan (WONINGKAART 11-10) */ .kd-woningvisual { margin: 0 0 8px; } .kd-rooster { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 3px 10px; font-size: .76rem; align-items: baseline; } .kd-lbl { font-weight: 600; color: var(--ink2); } .kd-wrd { color: var(--ink); overflow-wrap: anywhere; } .kd-wrd .mono { font-size: .64rem; } .kd-kenmerken { display: flex; flex-direction: column; gap: 4px; } .kd-kenmerk { font-size: .76rem; color: var(--ink2); } .kd-kenmerk .mono { font-size: .66rem; } .kd-let { font-size: .64rem; color: var(--ink3); margin: 6px 0 0; } .kd-woningknoppen { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } /* dubbel-signaal */ .kd-dubbel { display: flex; flex-direction: column; gap: 4px; border: var(--lijndikte) solid var(--let); border-radius: var(--radius); padding: 8px var(--pad); font-size: .74rem; background: var(--let-t); } .kd-dubbel b { font-size: .78rem; color: var(--let-d, var(--let)); } .kd-dubbel__knoppen { display: flex; gap: 6px; margin-top: 4px; } /* tabs (de tabbalk komt uit de bouwstenen) + tijdlijn op --rij, met gevouwen herhaling */ .kd-tlkop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .kd-pins { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein); padding: 2px 6px; background: var(--accent-t2); } .kd-tllijst { display: flex; flex-direction: column; } .kd-tl { display: grid; grid-template-columns: 104px minmax(0, 1fr) 24px; gap: 10px; align-items: center; min-height: var(--rij); padding: 2px 4px; border-top: var(--lijndikte) solid var(--lijn); font-size: .8rem; } .kd-tl:first-child { border-top: 0; } .kd-tl:hover { background: var(--accent-t2); } .kd-tl__tijd { font-size: .66rem; color: var(--ink3); } .kd-tl__tekst { min-width: 0; line-height: 1.25; } .kd-tl__bron { display: block; font-size: .64rem; color: var(--ink3); font-style: normal; } .kd-tl__pin { border: 0; background: none; color: var(--ink3); cursor: pointer; font-size: .8rem; } .kd-tl__pin:hover { color: var(--ink); } .kd-tl__pin:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .kd-tl.is-pin .kd-tl__pin { color: var(--ink); } .kd-tlvouw { display: contents; } .kd-tlvouw.is-toon .kd-tl--vouw { display: none; } .kd-tl--vouw .bs-toonknop { font-size: .8rem; color: var(--ink); text-decoration: none; } .kd-tl--vouw .bs-toonknop:hover { text-decoration: underline; text-underline-offset: 2px; } /* RE9 · de fasebalk is de reisbalk in de kopband (336i): berekend, alleen tonen — geen klikbare status */ .kd-fasebalk { min-width: 0; } /* RE9 · naam-match-label op de registers + prototype-band op de kluis-tab */ .kd-naammatch { font-size: .56rem; font-weight: 400; color: var(--ink3); border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius-pill); padding: 1px 6px; white-space: nowrap; } .kd-protoband { display: flex; align-items: center; gap: 9px; font-size: .72rem; color: var(--ink2); margin-bottom: 10px; } .kd-protoband .mproto, .bs-tabbalk__tab .mproto { font-size: .56rem; font-weight: 800; background: var(--stop-t); color: var(--stop); border-radius: var(--radius-pill); padding: 1px 7px; } .kd-belnummer { font-size: 1.05rem; margin: 0 0 10px; } .kd-belnummer a { color: var(--ink); text-decoration: none; font-weight: 700; } /* documenten, AVG en samenvoegen (tabs en modalen, ongewijzigd in opzet) */ .kd-docs { display: flex; flex-direction: column; gap: 6px; } .kd-doc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius); padding: 6px 10px; font-size: .78rem; min-height: var(--rij); } .kd-doc__label { color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kd-doc__link { color: var(--ink); text-decoration: none; font-size: .72rem; font-weight: 700; } .kd-doc__link:hover { text-decoration: underline; } .kd-doc__acties { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; } .kd-som { font-size: .8rem; color: var(--ink2); margin: 0 0 10px; } .kd-avgkop { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .kd-avgkop .kd-kicker { margin-bottom: 0; } .kd-samenvoeg { display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow-y: auto; } .kd-svkop { font-size: .76rem; color: var(--ink2); margin: 0 0 4px; } .kd-svrij { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 5px 0; border-top: var(--lijndikte) solid var(--lijn); font-size: .76rem; } .kd-svveld { font-size: .68rem; color: var(--ink3); } .kd-svkeuze { display: flex; gap: 14px; flex-wrap: wrap; } .kd-svkeuze label { display: flex; align-items: center; gap: 5px; } .kd-svkeuze input { accent-color: var(--accent); } .kd-svstukken { font-size: .72rem; color: var(--ink3); margin: 8px 0 0; } @media (max-width: 1240px) { .kd-raster--drie { grid-template-columns: 260px minmax(0, 1fr); } .kd-rechtskol { grid-column: 1 / -1; } } @media (max-width: 900px) { .kd-raster, .kd-raster--drie { grid-template-columns: 1fr; } } /* DOORLOOP B17 (12-10) · de kop en de tegelnavigatie die het opdrachtdossier, het woningdossier en het kozijnofferte- dossier delen. Het herontwerp van het relatiedossier (09-10) haalde deze regels weg omdat dát scherm ze niet meer gebruikte; de drie andere dossiers stonden daarna zonder opmaak (kale knoppen, tekst aan elkaar). Hier terug, op de tokens van de Werkbank: een tegel is een kaart, de actieve tegel draagt de inktrand. */ .kd-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; } .kd-kop__wie { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; } .kd-kop__wie h1 { margin: 0; font-size: 1.4rem; font-weight: 800; letter-spacing: -.01em; } .kd-kop__adres { font-size: .78rem; color: var(--ink2); } .kd-kop__acties { display: flex; gap: 8px; flex-wrap: wrap; } .kd-terug { font-size: .74rem; color: var(--ink2); text-decoration: none; white-space: nowrap; } .kd-terug:hover { color: var(--ink); text-decoration: underline; } .kd-terug:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .kd-knr { font-size: .68rem; color: var(--ink3); } .kd-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 12px; } .kd-tegels--stil { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .kd-tegel { display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer; background: var(--kaart); color: var(--ink); border: 1px solid var(--lijn); border-radius: var(--radius-klein); padding: 12px 16px; font-family: var(--font-ui); box-shadow: var(--schaduw-kaart); transition: border-color var(--overgang); } .kd-tegel:hover { border-color: var(--ink3); } .kd-tegel:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .kd-tegel.is-actief { border-color: var(--accent); } .kd-tegel.is-actief .kd-tegel__lbl { color: var(--ink); } .kd-tegel__lbl { font-size: .74rem; font-weight: 700; color: var(--ink2); } .kd-tegel__sub { font-size: .66rem; color: var(--ink3); } .kd-tegel--stil { padding: 10px 14px; } .kd-tegel--stil .kd-tegel__lbl { color: var(--ink); font-size: .78rem; } .kd-archiveer { align-self: flex-start; } @media (prefers-reduced-motion: reduce) { .kd-tegel { transition: none; } } /* blok G · de naam hoort bij meer dan één relatie: de keuze */ .kd-keuze__uitleg { margin: 0 0 10px; color: var(--ink2); } .kd-keuze { display: grid; grid-template-columns: minmax(160px, 1.2fr) 2fr auto; gap: 12px; align-items: baseline; padding: 10px 12px; border-top: 1px solid var(--lijn); color: var(--ink); text-decoration: none; border-radius: var(--radius-klein); transition: background-color 150ms; } .kd-keuze:hover { background: var(--vlak); } .kd-keuze:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .kd-keuze span { color: var(--ink2); } @media (max-width: 720px) { .kd-keuze { grid-template-columns: 1fr; gap: 2px; } } @media (prefers-reduced-motion: reduce) { .kd-keuze { transition: none; } } /* ── woning.css ── */ /* woning.css — het woning-record (RE4). Zelfde vormtaal als het klantrecord (kd-blok, kd-rooster), met wat dit scherm eigen is: de bewonersperiodes, de maatregelen-strip en de garanties die bij de wóning horen. Alleen tokens. */ .wn-wortel { max-width: var(--werkbreedte, 1240px); margin: 0 auto; width: 100%; padding: 22px 32px 72px; display: flex; flex-direction: column; gap: 16px; } .wn-raster { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; align-items: start; } .wn-links, .wn-rechts { display: flex; flex-direction: column; gap: 14px; } .wn-leeg { font-size: .76rem; color: var(--c-ink-3); margin: 4px 0; } .wn-bron { display: block; font-size: .62rem; color: var(--c-ink-3); font-style: normal; } /* maatregelen */ .wn-maatregelen { display: flex; flex-wrap: wrap; gap: 5px; } .wn-maatregel { font-size: .7rem; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 99px; padding: 2px 10px; color: var(--c-ink-3); } .wn-maatregel.is-gedaan { border-color: var(--c-groen); color: var(--c-groen-d); background: var(--c-groen-t); font-weight: 700; } /* garanties bij de woning */ .wn-garanties { display: flex; flex-direction: column; gap: 8px; } .wn-garantie { display: flex; flex-direction: column; font-size: .74rem; border-left: 3px solid var(--c-lijn-2); padding-left: 8px; color: var(--c-ink-2); } .wn-garantie.is-actief { border-left-color: var(--c-groen); } .wn-garantie em { font-size: .64rem; color: var(--c-ink-3); font-style: normal; } /* bewoners met periode */ .wn-bewoners { display: flex; flex-direction: column; gap: 8px; } .wn-bewoner { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: .78rem; padding: 8px 0; border-top: var(--lijndikte) solid var(--c-lijn); } .wn-bewoner:first-child { border-top: 0; } .wn-bewoner.is-vorig { opacity: .68; } .wn-bewoner__wie { display: flex; align-items: baseline; gap: 8px; flex: 1; min-width: 180px; } .wn-knr { font-size: .64rem; color: var(--c-ink-3); } .wn-rol { font-size: .62rem; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 99px; padding: 0 7px; color: var(--c-ink-3); } .wn-bewoner__periode { font-size: .7rem; color: var(--c-ink-2); } .wn-bewoner__reden { font-size: .68rem; color: var(--c-ink-3); font-style: italic; } /* historie van het adres */ .wn-historie { display: flex; flex-direction: column; } .wn-hrij { display: grid; grid-template-columns: 110px minmax(0, 1fr) 90px; gap: 10px; align-items: baseline; padding: 8px 2px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; } .wn-hrij:first-child { border-top: 0; } .wn-hrij__tijd { font-size: .68rem; color: var(--c-ink-3); } .wn-hrij__wie { display: block; font-size: .66rem; color: var(--c-ink-3); font-style: normal; } .wn-hrij__soort { font-size: .64rem; color: var(--c-ink-3); text-align: right; } .wn-docs { display: flex; flex-direction: column; gap: 4px; } .wn-doc { font-size: .74rem; color: var(--c-ink-2); } @media (max-width: 1000px) { .wn-raster { grid-template-columns: 1fr; } } /* ── nieuwerelatie.css ── */ /* nieuwerelatie.css — de intake in vijf stappen (RE5, wireframe nieuwe-relatie). Rustig formulier, één vraag per stap, de stappenbalk laat zien waar je bent. Alleen tokens. */ .nr-wortel { max-width: 900px; margin: 0 auto; width: 100%; padding: 22px 32px 72px; display: flex; flex-direction: column; gap: 14px; } .nr-balk { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; } .nr-h1 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; } .nr-rek { flex: 1; } /* stappenbalk */ .nr-stappen { display: flex; gap: 4px; flex-wrap: wrap; } .nr-stap { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 120px; border-bottom: 2px solid var(--c-lijn); padding: 6px 2px; font-size: .72rem; color: var(--c-ink-3); } .nr-stap.is-nu { border-bottom-color: var(--c-groen); color: var(--c-ink); font-weight: 700; } .nr-stap.is-klaar { border-bottom-color: var(--c-groen); color: var(--c-groen-d); } .nr-bol { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 99px; border: var(--lijndikte) solid var(--c-lijn-2); font-size: .66rem; font-weight: 800; } .nr-stap.is-nu .nr-bol { background: var(--c-groen); border-color: var(--c-groen); color: var(--knop-ink); } .nr-stap.is-klaar .nr-bol { border-color: var(--c-groen); color: var(--c-groen-d); } /* paneel */ .nr-vlak { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--schaduw-tegel); display: flex; flex-direction: column; gap: 10px; } .nr-kop { font-size: 1.05rem; margin: 0; } .nr-sub { font-size: .8rem; color: var(--c-ink-2); margin: 0 0 6px; } .nr-hint { font-size: .74rem; color: var(--c-ink-3); margin: 4px 0 0; } .nr-link { border: 0; background: none; font: inherit; color: var(--c-groen-d); font-weight: 700; cursor: pointer; padding: 0; } .nr-melding { font-size: .78rem; color: var(--c-amber); margin: 0; } /* velden */ .nr-rij { display: flex; gap: 10px; flex-wrap: wrap; } .nr-veld { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 150px; font-size: .74rem; color: var(--c-ink-2); } .nr-veld--smal { flex: 0 1 130px; } .nr-veld span i { font-style: normal; color: var(--c-ink-3); font-size: .68rem; } .nr-veld input, .nr-veld select, .nr-veld textarea { padding: 7px 10px; font-size: .8rem; font-family: inherit; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); color: var(--c-ink); } .nr-blokkop { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-3); margin-top: 8px; } .nr-blokkop em { text-transform: none; letter-spacing: 0; font-style: normal; font-weight: 400; } .nr-schakel { display: flex; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); overflow: hidden; align-self: flex-start; } .nr-schakel button { border: 0; background: var(--kaart); padding: 7px 16px; font-size: .76rem; font-weight: 700; color: var(--c-ink-2); font-family: inherit; cursor: pointer; } .nr-schakel button.is-actief { background: var(--c-groen); color: var(--knop-ink); } /* stap 2 · woning + dedup */ .nr-woning { border: var(--lijndikte) solid var(--c-groen); border-radius: var(--radius); padding: 14px 16px; background: var(--c-groen-t); display: flex; flex-direction: column; gap: 10px; } .nr-woning__top { display: flex; align-items: flex-start; gap: 10px; } .nr-woning h3 { margin: 0; font-size: .92rem; } .nr-vink { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 99px; background: var(--c-groen); color: var(--knop-ink); font-size: .7rem; flex: none; } .nr-bag { font-size: .68rem; color: var(--c-ink-3); } .nr-kenmerken { display: flex; gap: 18px; flex-wrap: wrap; } .nr-kenmerk { display: flex; flex-direction: column; } .nr-kenmerk b { font-size: .92rem; } .nr-kenmerk span { font-size: .6rem; letter-spacing: .06em; color: var(--c-ink-3); } .nr-autolabel { font-size: .62rem; color: var(--c-groen-d); } .nr-schoon { display: flex; gap: 10px; align-items: flex-start; font-size: .8rem; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 12px 14px; } .nr-bekend { border: var(--lijndikte) solid var(--c-amber); border-radius: var(--radius); padding: 14px 16px; background: var(--c-amber-t); display: flex; flex-direction: column; gap: 8px; } .nr-bekend h3 { margin: 0; font-size: .88rem; color: var(--c-amber); } /* blok E · het adres is klant bij een collega: een blokkade, dus de stopkleur */ .nr-bezet { border: var(--lijndikte) solid var(--stop); border-radius: var(--radius); padding: 14px 16px; background: var(--stop-t); display: flex; flex-direction: column; gap: 8px; } .nr-bezet h3 { margin: 0; font-size: .88rem; color: var(--stop-d); } .nr-bezet p { margin: 0; font-size: .78rem; } .nr-bekend p { margin: 0; font-size: .78rem; } .nr-bekendkaart { background: var(--kaart); border-radius: var(--radius); padding: 10px 12px; font-size: .8rem; } .nr-knr { font-size: .66rem; color: var(--c-ink-3); } .nr-regel { font-size: .72rem; color: var(--c-ink-2); } .nr-keuzes { display: flex; flex-direction: column; gap: 6px; } .nr-keuze { display: flex; gap: 10px; align-items: flex-start; text-align: left; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 10px 12px; font-family: inherit; cursor: pointer; } .nr-keuze.is-gekozen { border: 2px solid var(--c-groen); background: var(--c-groen-t); } .nr-keuze b { display: block; font-size: .8rem; } .nr-keuze small { font-size: .7rem; color: var(--c-ink-2); } .nr-ic { font-size: .9rem; color: var(--c-groen-d); } /* stap 4 · bronnen */ .nr-bronnen { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; } .nr-bronknop { display: flex; flex-direction: column; gap: 2px; text-align: left; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 10px 12px; font-family: inherit; cursor: pointer; } .nr-bronknop.is-actief { border: 2px solid var(--c-groen); background: var(--c-groen-t); } .nr-bronknop b { font-size: .8rem; } .nr-bronknop small { font-size: .68rem; color: var(--c-ink-3); } /* stap 5 · klaar */ .nr-klaar { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0 4px; text-align: center; } .nr-grootvink { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 99px; background: var(--c-groen); color: var(--knop-ink); font-size: 1.4rem; } .nr-klaar h2 { margin: 4px 0 0; font-size: 1.1rem; } .nr-knrgroot { font-size: .78rem; color: var(--c-ink-3); } .nr-gedaan { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .nr-gedaanrij { display: flex; gap: 8px; align-items: flex-start; font-size: .78rem; } .nr-v { color: var(--c-groen-d); font-weight: 800; } .nr-vervolg { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin-top: 12px; } .nr-vervolgknop { display: flex; flex-direction: column; gap: 2px; text-align: left; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 11px 13px; font-family: inherit; font-size: .8rem; font-weight: 700; color: var(--c-ink); cursor: pointer; } .nr-vervolgknop small { font-size: .68rem; font-weight: 400; color: var(--c-ink-3); } .nr-vervolgknop.is-primair { background: var(--gradient-primair); border-color: var(--c-groen); color: var(--knop-ink); box-shadow: var(--schaduw-knop); } .nr-vervolgknop.is-primair small { color: var(--knop-ink); opacity: .85; } /* voet */ .nr-voet { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .nr-stapinfo { font-size: .64rem; letter-spacing: .07em; color: var(--c-ink-3); } /* ── verlof.css ── */ /* verlof.css — M1 · Verlof en rooster. Alleen tokens uit casa360-stijl.css; kleur is betekenis: --goed (verlof/binnen de norm), --let (aangevraagd/knelpunt/signaal), --stop (ziek/te laat). */ .vl { max-width: var(--werkbreedte-breed, 1360px); margin: 0 auto; padding: 26px 32px 72px; } .vl-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .vl-kop h1 { margin: 2px 0 4px; font-size: 1.5rem; letter-spacing: -.01em; } .vl-kop p { margin: 0; color: var(--ink2); max-width: 72ch; font-size: .92rem; } .vl-blok { padding: 14px 16px; margin-top: 14px; } .vl-blokkop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 700; margin-bottom: 10px; } .vl-rek, .vk-rek { flex: 1; } .vl-hint { color: var(--ink3); font-size: .8rem; } .vl-leeg { color: var(--ink2); font-size: .9rem; margin: 4px 0; } .vl-tabel td, .vl-tabel th { vertical-align: top; } .vl-tabel tr.is-open td { background: var(--let-t); } .vl-tabel td.num, .vl-tabel th.num, .vl-bakjes td.num, .vl-bakjes th.num { text-align: right; } .vl-acties { white-space: nowrap; display: flex; gap: 6px; flex-wrap: wrap; } .vl-patroon { letter-spacing: .06em; } .vl-regeling p { margin: 6px 0 0; line-height: 1.5; max-width: 90ch; } .vl-regeling__voet { margin-top: 10px; } .vl-regel { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--lijn); } .vl-regel:last-child { border-bottom: 0; } .vl-niveau { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 99px; border: 1px solid var(--lijn2); font-size: .72rem; } .vl-regel--n1 .vl-niveau { background: var(--stop); color: var(--kaart); border-color: var(--stop); } .vl-regel--n2 .vl-niveau { background: var(--let); color: var(--ink); border-color: var(--let); } .vl-twee { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; } .vl-twee .vl-blok { margin-top: 14px; } .vl-cijfer { font-size: 2rem; font-weight: 700; margin: 4px 0 8px; } .vl-reken { font-size: .88rem; color: var(--ink2); min-height: 1.4em; padding: 6px 0; } .vl-form .bs-form__rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .vl-regels input { width: 100%; box-sizing: border-box; font: inherit; padding: 5px 8px; border: 1px solid var(--lijn2); border-radius: var(--radius-klein); background: var(--kaart); color: var(--ink); } .vl-regels input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } .vl-regels input[type="checkbox"] { width: auto; } /* drawer: saldo, bakjes, patroon */ .vl-drawer { display: grid; gap: 12px; } .vl-saldokop { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--vlak); } .vl-saldokop b { display: block; font-size: 1.6rem; } .vl-saldokop small { color: var(--ink2); } .vl-patroonvelden { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 8px; } .vl-uur { display: grid; gap: 2px; font-size: .72rem; color: var(--ink3); text-transform: uppercase; letter-spacing: .04em; } .vl-uur input { width: 100%; box-sizing: border-box; font: inherit; font-family: var(--font-mono); padding: 6px 4px; text-align: center; border: 1px solid var(--lijn2); border-radius: var(--radius-klein); background: var(--kaart); color: var(--ink); } .vl-uur input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } .vl-mutaties td { font-size: .84rem; } /* kalender */ .vk-balk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 8px; } .vk-veld { display: flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--ink2); } .vk-veld input { font: inherit; padding: 5px 8px; border: 1px solid var(--lijn2); border-radius: var(--radius-klein); background: var(--kaart); color: var(--ink); } .vk-veld input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } .vk-schakel { display: inline-flex; border: 1px solid var(--lijn2); border-radius: 99px; overflow: hidden; } .vk-schakel button { border: 0; background: var(--kaart); font: inherit; font-size: .8rem; padding: 5px 12px; cursor: pointer; color: var(--ink2); } .vk-schakel button.is-actief { background: var(--accent); color: var(--knop-ink); } .vk-schakel button:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; } .vk-legenda, .vl-legenda { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; font-size: .78rem; color: var(--ink2); margin: 6px 0 10px; } .vk-legenda .vk-d { width: 14px; height: 14px; } .vk-knel { color: var(--stop); font-weight: 700; } .vk-raster { --naam: 200px; overflow-x: auto; border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--kaart); } .vk-kop, .vk-rij { display: grid; grid-template-columns: var(--naam) repeat(var(--dagen), minmax(14px, 1fr)); align-items: center; } .vk-kop { position: sticky; top: 0; background: var(--vlak); border-bottom: 1px solid var(--lijn); z-index: 1; } .vk-week { font: 600 .68rem var(--font-mono); color: var(--ink3); padding: 6px 4px; border-left: 1px solid var(--lijn); white-space: nowrap; overflow: hidden; } .vk-naam { padding: 4px 10px; font-size: .82rem; display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .vk-naam small { color: var(--ink3); font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vk-persoon { border: 0; background: none; font: inherit; font-weight: 600; text-align: left; padding: 0; cursor: pointer; color: var(--ink); } .vk-persoon:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .vk-groep { border-top: 1px solid var(--lijn); } .vk-groepkop { display: flex; align-items: baseline; gap: 10px; width: 100%; border: 0; background: var(--vlak); font: inherit; padding: 6px 10px; cursor: pointer; text-align: left; color: var(--ink); } .vk-groepkop span { font-size: .76rem; color: var(--ink3); } .vk-groepkop:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; } .vk-rij { border-top: 1px solid var(--lijn); min-height: 30px; } .vk-rij--bezetting { background: var(--vlak); } .vk-d { display: block; height: 22px; margin: 2px 1px; border-radius: 4px; background: var(--goed-t); border: 1px solid transparent; } .vk-d.is-vrij { background: transparent; border-color: var(--lijn); } .vk-d.is-feest { background: var(--lijn2); } .vk-d.is-verlof { background: var(--goed); } .vk-d.is-aangevraagd { background: var(--let); } .vk-d.is-ziek { background: var(--stop); } /* een dagvak is smal: alleen het aantal dat weg is, de norm staat in de legenda en in de titel */ .vk-b { display: block; text-align: center; font: 600 .62rem var(--font-mono); line-height: 22px; height: 22px; margin: 2px 1px; border-radius: 4px; color: var(--ink2); overflow: hidden; } .vk-b.is-weg { background: var(--goed-t); border: 1px solid var(--lijn); } .vk-b.is-knel { background: var(--stop); color: var(--kaart); } .vk-b.is-sluiting { background: var(--lijn2); } .vk-b.is-piek { box-shadow: inset 0 -2px 0 var(--let); } .vk-noten { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; } .vk-x { border: 0; background: none; font: inherit; cursor: pointer; padding: 0 2px; color: inherit; } .vk-x:focus-visible { outline: 3px solid var(--accent); border-radius: 4px; } /* verzuim */ .vl-verzuim tr.is-laat td { background: var(--stop-t); } /* staafdiagram saldoverloop */ .vl-staven { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; align-items: end; height: 160px; padding: 8px 0 0; } .vl-staaf { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 4px; text-align: center; } .vl-staaf small { font-family: var(--font-mono); font-size: .66rem; color: var(--ink3); } .vl-staaf__kolom { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 100%; } .vl-staaf__opbouw, .vl-staaf__opname { display: block; width: 40%; min-height: 2px; border-radius: 3px 3px 0 0; } .vl-staaf__opbouw { background: var(--lijn2); } .vl-staaf__opname { background: var(--accent); } .vl-legenda .vl-staaf__opbouw, .vl-legenda .vl-staaf__opname { width: 14px; height: 10px; min-height: 0; border-radius: 3px; } @media (max-width: 900px) { .vl { padding: 16px 16px 48px; } .vk-raster { --naam: 130px; } .vl-patroonvelden { grid-template-columns: repeat(4, 1fr); } } @media (prefers-reduced-motion: no-preference) { .vk-d, .vk-b { transition: background-color var(--overgang); } } /* M7 §4.6 · wisselend rooster */ .vl-vink { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--ink2); margin: 2px 0 8px; } .vl-weekb { margin-top: 0; } .vl-blokkop select { font: inherit; padding: 4px 8px; border: 1px solid var(--lijn2); border-radius: var(--radius-klein); background: var(--kaart); color: var(--ink); } .vl-blokkop select:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } /* ── personen.css ── */ /* personen.css — M7 · Personen en Nmbrs. Alleen tokens uit casa360-stijl.css; kleur is betekenis: --stop (einddatum ontbreekt of verstreken), --let (zonder dossier/account), --goed (in orde). */ .pn { max-width: var(--werkbreedte-breed, 1360px); margin: 0 auto; padding: 26px 32px 72px; } .pn-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .pn-kop h1 { margin: 2px 0 4px; font-size: 1.5rem; letter-spacing: -.01em; } .pn-kop p { margin: 0; color: var(--ink2); max-width: 80ch; font-size: .92rem; } .pn-balk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; } .pn-rek { flex: 1; } .pn-zoek { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--ink2); } .pn-zoek input { font: inherit; padding: 6px 10px; border: 1px solid var(--lijn2); border-radius: var(--radius-klein); background: var(--kaart); color: var(--ink); min-width: 220px; } .pn-zoek input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } .pn-blok { padding: 14px 16px; margin-top: 14px; } .pn-blokkop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 700; margin: 12px 0 8px; } .pn-blokkop:first-child { margin-top: 0; } .pn-hint { color: var(--ink3); font-size: .8rem; margin: 4px 0; } .pn-tabel td, .pn-tabel th { vertical-align: top; } .pn-tabel tr[data-pn-persoon] { cursor: pointer; } .pn-tabel tr.is-stop td:first-child { box-shadow: inset 3px 0 0 var(--stop); } .pn-tabel td.num, .pn-tabel th.num { text-align: right; } .pn-stand { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 10px; } .pn-form .bs-form__rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; } .pn-veld { display: grid; gap: 4px; font-size: .82rem; color: var(--ink2); } .pn-veld textarea { font: inherit; font-family: var(--font-mono); font-size: .8rem; padding: 8px 10px; border: 1px solid var(--lijn2); border-radius: var(--radius-klein); background: var(--kaart); color: var(--ink); resize: vertical; } .pn-veld textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } .pn-lijst { margin: 4px 0 0; padding-left: 18px; font-size: .88rem; } .pn-lijst li { margin: 3px 0; } .pn-drawer { display: grid; gap: 12px; } .pn-signalen { display: grid; gap: 6px; } .pn-signaal { padding: 8px 12px; border-radius: var(--radius-klein); border: 1px solid var(--lijn); font-size: .88rem; } .pn-signaal--n1 { background: var(--stop-t); border-color: var(--stop); } .pn-signaal--n2 { background: var(--let-t); border-color: var(--let); } @media (max-width: 720px) { .pn { padding: 16px 16px 48px; } .pn-zoek input { min-width: 0; width: 100%; } } /* besluit 344 · het loonpakket uit Exact: een foutregel in de betekeniskleur, de export als terugval ingeklapt */ .pn-fout { color: var(--stop); } .pn-terugval { margin-top: 10px; } .pn-terugval summary { cursor: pointer; color: var(--ink2); font-size: .82rem; } /* ── veiligheid.css ── */ /* veiligheid.css — M2 · Veiligheid en bevoegdheden. Alleen tokens uit casa360-stijl.css; kleur is betekenis: --goed (in orde), --let (verloopt · gemist · niet bevestigd), --stop (overtreding · verlopen · uit omloop · meldplicht). */ .vb { max-width: var(--werkbreedte-breed, 1360px); margin: 0 auto; padding: 26px 32px 72px; } .vb-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .vb-kop h1 { margin: 2px 0 4px; font-size: 1.5rem; letter-spacing: -.01em; } .vb-kop p { margin: 0; color: var(--ink2); max-width: 78ch; font-size: .92rem; } .vb-blok { padding: 14px 16px; margin-top: 14px; } .vb-blokkop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 700; margin-bottom: 10px; } .vb-blokkop small { font-weight: 400; color: var(--ink3); } .vb-rek { flex: 1; } .vb-hint { color: var(--ink3); font-size: .8rem; margin: 4px 0 8px; } .vb-leeg { color: var(--ink2); font-size: .9rem; margin: 4px 0; } .vb-balk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 6px; } .vb-veld { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--ink2); } .vb-veld select { font: inherit; padding: 6px 10px; border: 1px solid var(--lijn2); border-radius: var(--radius-klein); background: var(--kaart); color: var(--ink); } .vb-veld select:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } .vb-legenda { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .78rem; color: var(--ink2); margin: 8px 0; } .vb-twee { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; } .vb-twee > .vb-blok { margin-top: 14px; } .vb-twee .vb-blok + .vb-blok { margin-top: 14px; } .vb-acties { display: flex; gap: 6px; flex-wrap: wrap; white-space: nowrap; } .vb-link { border: 0; background: none; font: inherit; padding: 0; cursor: pointer; color: var(--ink); text-align: left; } .vb-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .vb-form .bs-form__rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; } /* matrix */ .vb-matrixwrap { overflow-x: auto; } .vb-matrix th { white-space: nowrap; } .vb-matrix .vb-cel { text-align: center; } .vb-matrix .vb-cel.is-nvt { color: var(--ink3); } .vb-matrix .vb-cel .chip small { font-family: var(--font-mono); font-size: .62rem; opacity: .8; } .vb-matrix tr.is-n1 td:first-child { box-shadow: inset 3px 0 0 var(--stop); } .vb-uitdienst { margin-top: 10px; font-size: .82rem; color: var(--ink2); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .vb-soorten td { font-size: .86rem; } tr.is-ingetrokken td { color: var(--ink3); text-decoration: line-through; } tr.is-ingetrokken td .chip { text-decoration: none; } tr.is-n1 td { background: var(--stop-t); } /* regels en signalen */ .vb-regel { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--lijn); } .vb-regel:last-child { border-bottom: 0; } .vb-regel small { color: var(--ink2); } .vb-regel .bs-chip { margin-left: auto; } .vb-niveau { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 99px; border: 1px solid var(--lijn2); font-size: .72rem; flex: none; } .vb-regel--n1 .vb-niveau { background: var(--stop); color: var(--kaart); border-color: var(--stop); } .vb-regel--n2 .vb-niveau { background: var(--let); color: var(--ink); border-color: var(--let); } .vb-patroon { margin-top: 10px; padding: 8px 12px; border-radius: var(--radius-klein); background: var(--stop-t); font-size: .86rem; } /* BHV */ .vb-locatie .vb-twee { align-items: start; } .vb-noemer { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--lijn); font-size: .9rem; } .vb-noemer small { color: var(--ink3); } .vb-dagen { display: flex; gap: 4px; flex-wrap: wrap; margin: 10px 0 4px; } .vb-dag { display: grid; place-items: center; width: 38px; padding: 4px 0; border: 1px solid var(--lijn); border-radius: var(--radius-klein); font: 600 .64rem var(--font-mono); color: var(--ink2); background: var(--goed-t); } .vb-dag b { font-size: .8rem; color: var(--ink); } .vb-dag.is-gat { background: var(--stop-t); border-color: var(--stop); } .vb-alarm { padding: 12px 14px; border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--vlak); display: grid; gap: 6px; font-size: .88rem; } .vb-alarm b { display: inline-block; min-width: 150px; color: var(--ink2); font-weight: 600; } /* presentie */ .vb-presentie input[type="checkbox"] { width: 18px; height: 18px; } .vb-presentie input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } @media (max-width: 900px) { .vb { padding: 16px 16px 48px; } } @media (prefers-reduced-motion: no-preference) { .vb-dag { transition: background-color var(--overgang); } } /* ── beoordelen.css ── */ /* beoordelen.css — M3 · Beoordelen en doelen + M4 · Medewerkersonderzoek. Alleen tokens uit casa360-stijl.css. */ .bo { max-width: var(--werkbreedte-breed, 1360px); margin: 0 auto; padding: 26px 32px 72px; } .bo-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .bo-kop h1 { margin: 2px 0 4px; font-size: 1.5rem; letter-spacing: -.01em; } .bo-kop p { margin: 0; color: var(--ink2); max-width: 78ch; font-size: .92rem; } .bo-blok { padding: 14px 16px; margin-top: 14px; } .bo-blokkop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 700; margin: 6px 0 10px; } .bo-blokkop small { font-weight: 400; color: var(--ink3); } .bo-rek { flex: 1; } .bo-hint { color: var(--ink3); font-size: .8rem; margin: 4px 0 8px; } .bo-leeg { color: var(--ink2); font-size: .9rem; margin: 4px 0; } .bo-balk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 6px; } .bo-veld { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--ink2); } .bo-veld select { font: inherit; padding: 6px 10px; border: 1px solid var(--lijn2); border-radius: var(--radius-klein); background: var(--kaart); color: var(--ink); max-width: 420px; } .bo-veld select:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } .bo-twee { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px 24px; } .bo-twee > .bo-blok { margin-top: 14px; } .bo-acties { display: flex; gap: 6px; flex-wrap: wrap; white-space: nowrap; } .bo-form .bs-form__rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; } .bo-tabel td { vertical-align: top; } .bo-regel { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--lijn); } .bo-regel:last-child { border-bottom: 0; } .bo-regel small { color: var(--ink2); } .bo-saldo { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--vlak); margin-bottom: 10px; } .bo-saldo b { font-size: 1.3rem; } .bo-saldo small { color: var(--ink2); } .bo-scores input { width: 60px; font: inherit; font-family: var(--font-mono); text-align: center; padding: 5px; border: 1px solid var(--lijn2); border-radius: var(--radius-klein); background: var(--kaart); color: var(--ink); } .bo-scores input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } .bo-scores tr.is-groot td { background: var(--let-t); } .bo-uitkomst { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--vlak); } .bo-uitkomst b { font-size: 1.6rem; } .bo-uitkomst > span { flex: 1; min-width: 200px; font-size: .88rem; } .bo-doel.is-af { opacity: .75; } .bo-voortgang { height: 6px; border-radius: 99px; background: var(--lijn); overflow: hidden; margin: 6px 0 10px; } .bo-voortgang span { display: block; height: 100%; background: var(--accent); border-radius: 99px; } .bo-stappen { display: grid; gap: 4px; margin-bottom: 8px; } .bo-textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 8px 10px; border: 1px solid var(--lijn2); border-radius: var(--radius-klein); background: var(--kaart); color: var(--ink); } .bo-textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } .bo-stap { display: flex; align-items: center; gap: 8px; font-size: .88rem; } .bo-stap input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } .bo-verdeling { display: flex; gap: 10px; align-items: flex-end; height: 90px; margin: 12px 0 4px; } .bo-staaf { display: grid; grid-template-rows: 1fr auto auto; align-items: end; justify-items: center; width: 44px; height: 100%; font-size: .72rem; color: var(--ink3); } .bo-staaf span { width: 22px; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; } .bo-staaf b { font-family: var(--font-mono); color: var(--ink); } td.is-let { color: var(--let-d); font-weight: 700; } .bo-gebouwwrap { overflow-x: auto; } .bo-gebouw td, .bo-gebouw th { font-size: .78rem; white-space: nowrap; } .bo-trend td.is-breuk { border-left: 2px dashed var(--lijn2); color: var(--ink2); } .on-enps { display: flex; align-items: center; gap: 16px; padding: 12px 14px; border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--vlak); margin-bottom: 12px; } .on-enps b { font-size: 2rem; } .on-enps div { display: grid; gap: 2px; font-size: .88rem; } .on-enps small { color: var(--ink3); } .on-open { margin: 4px 0 10px 18px; font-size: .9rem; } .on-niet { margin: 4px 0 0 18px; font-size: .9rem; color: var(--ink2); display: grid; gap: 4px; } tr.is-af td { color: var(--ink3); } tr.is-laat td { background: var(--stop-t); } @media (max-width: 900px) { .bo { padding: 16px 16px 48px; } } @media (prefers-reduced-motion: no-preference) { .bo-voortgang span { transition: width var(--overgang); } } /* ── cockpit360.css ── */ /* ===================================================================== cockpit360.css — Module 1.6 · Casa360 cockpit. Bouwt op tokens + bouwstenen.css. Funnel-tinten: oplopend groen (tokens, geen gradient). ===================================================================== */ .ck-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 16px; } .ck-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } @media (max-width: 900px) { .ck-grid, .ck-grid3 { grid-template-columns: 1fr; } } .ck-blok { padding: 18px 20px; } .ck-blok__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .ck-blok .rec-h2 { margin-bottom: 13px; } .ck-blok__kop .rec-h2 { margin-bottom: 0; } .ck-sectiekop { margin: 0 0 11px; } /* Funnel — tinten via opacity-loze token-vlakken */ .ck-funnel { display: flex; flex-direction: column; gap: 9px; } .ck-funnelrij { display: flex; align-items: center; gap: 12px; } .ck-funnellabel { width: 120px; flex: none; font-size: .76rem; color: var(--c-ink-2); } .ck-funnelbaan { flex: 1; height: 22px; border-radius: 7px; background: var(--c-paneel); } .ck-funnelbalk { height: 100%; border-radius: 7px; display: flex; align-items: center; padding-left: 10px; font-size: .68rem; font-weight: 700; color: var(--knop-ink); min-width: 34px; } .ck-funnelbalk--1 { background: var(--c-groen-t); color: var(--c-groen-d); } .ck-funnelbalk--2 { background: var(--c-lijn-2); color: var(--c-ink); } .ck-funnelbalk--3 { background: var(--c-groen); opacity: .75; } .ck-funnelbalk--4 { background: var(--c-groen); } .ck-funnelbalk--5 { background: var(--c-groen-d); } .ck-voetnoot { margin-top: 12px; padding-top: 10px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .68rem; color: var(--c-ink-3); } .ck-voetnoot--midden { border-top: 0; padding-top: 0; margin-top: 8px; text-align: center; } /* Rijen */ .ck-rijen { display: flex; flex-direction: column; gap: 8px; } .ck-rij { display: flex; justify-content: space-between; gap: 10px; font-size: .8rem; color: var(--c-ink-2); } .ck-rij b { font-weight: 800; color: var(--c-ink); text-align: right; } .ck-rij--amber, .ck-rij--amber b { color: var(--c-amber); } .ck-groen { color: var(--c-groen-d); } .ck-sync { color: var(--c-groen-d); font-size: .64rem; } .ck-badge { font-size: .6rem; color: var(--c-ink-2); background: var(--c-paneel); padding: 4px 8px; border-radius: 6px; } /* Facturatie */ .ck-facturatie { display: flex; flex-direction: column; } .ck-facturatie__voet { margin-top: auto; padding-top: 14px; } .ck-verstuur { width: 100%; } /* Module-kaarten */ .ck-modules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; } @media (max-width: 1100px) { .ck-modules { grid-template-columns: repeat(2, 1fr); } } .ck-module { padding: 16px 18px; text-align: left; cursor: pointer; display: flex; flex-direction: column; font-family: var(--font-ui); border-top: 3px solid var(--c-lijn-2); transition: border-color var(--overgang); } .ck-module:hover { border-color: var(--c-lijn-2); } .ck-module--groen { border-top-color: var(--c-groen); } .ck-module--amber { border-top-color: var(--c-amber); } .ck-module--terra { border-top-color: var(--c-terra); } .ck-module--stil { border-top-color: var(--c-ink-2); } .ck-module__titel { font-weight: 800; font-size: .88rem; margin-bottom: 11px; } .ck-module__rijen { display: flex; flex-direction: column; gap: 7px; } .ck-module__rijen .ck-rij { font-size: .76rem; } .ck-module__cta { margin-top: auto; padding-top: 12px; font-weight: 700; font-size: .74rem; color: var(--c-groen-d); } /* Donkere feedback-kaart */ .ck-donker { border-radius: var(--radius); background: var(--donker, var(--c-ink)); color: var(--c-creme); padding: 18px 20px; } .ck-donker__titel { font-weight: 800; font-size: .88rem; margin-bottom: 8px; } .ck-donker__tekst { font-size: .8rem; line-height: 1.6; color: var(--c-lijn-2); } /* ── prijzen.css ── */ /* ===================================================================== prijzen.css — Module 1.7 · Prijsbeheer. Bouwt op tokens + bouwstenen. ===================================================================== */ .px-grid { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; } @media (max-width: 900px) { .px-grid { grid-template-columns: 1fr; } } .px-links, .px-rechts { display: flex; flex-direction: column; gap: 14px; } .px-blok { padding: 16px 18px; } .px-blok__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .px-kicker { display: block; margin-bottom: 10px; } .px-kicker--groen { color: var(--c-groen-d); } .px-sub { font-size: .72rem; color: var(--c-ink-3); margin: 2px 0 0; } .px-groen { color: var(--c-groen-d); } .px-amber { color: var(--c-amber); } .px-terra { color: var(--c-terra-d); font-weight: 800; } /* Woning-keuze + maatregel-toggles */ .px-woningen, .px-maten { display: flex; flex-direction: column; gap: 8px; } .px-woning { text-align: left; padding: 10px 12px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; background: var(--kaart); cursor: pointer; font-family: var(--font-ui); transition: border-color var(--overgang), background var(--overgang); } .px-woning:hover { border-color: var(--c-lijn-2); } .px-woning.is-actief { border-color: var(--c-groen); background: var(--c-groen-t); } .px-woning__adres { font-weight: 800; font-size: .8rem; } .px-woning__sub { font-size: .68rem; color: var(--c-ink-3); margin-top: 1px; } .px-maat { display: flex; align-items: center; gap: 9px; text-align: left; padding: 9px 12px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; background: var(--kaart); cursor: pointer; font-family: var(--font-ui); font-weight: 700; font-size: .78rem; color: var(--c-ink-2); } .px-maat__dot { width: 18px; height: 18px; flex: none; border-radius: 6px; border: 2px solid var(--c-lijn-2); background: var(--kaart); color: transparent; display: inline-flex; align-items: center; justify-content: center; font-size: .66rem; } .px-maat.is-aan { border-color: var(--c-groen); color: var(--c-ink); } .px-maat.is-aan .px-maat__dot { background: var(--c-groen); border-color: var(--c-groen); color: var(--knop-ink); } .px-onbekend { font-size: .58rem; color: var(--c-amber); } /* Statusbalk */ .px-statusbalk { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; } .px-statusbalk__links { display: flex; align-items: center; gap: 12px; } .px-geldig { font-size: .74rem; color: var(--c-ink-3); } /* Interne opbouw */ .px-comp { display: grid; grid-template-columns: 1.4fr 1.2fr .8fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: var(--lijndikte) solid var(--c-lijn); } .px-comp--kop { border-top: 0; padding: 6px 0; font-family: var(--font-mono); font-size: .56rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); } .px-comp__naam { font-weight: 700; font-size: .82rem; } .px-comp__detail { font-size: .72rem; color: var(--c-ink-3); } .px-comp__netto { text-align: right; font-weight: 800; } .px-bar { height: 14px; border-radius: 8px; overflow: hidden; display: flex; background: var(--c-paneel); margin: 14px 0 8px; } .px-bar__seg--ink { background: var(--c-lijn-2); } .px-bar__seg--marge { background: var(--c-groen); } .px-bar__seg--btw { background: var(--c-amber); } .px-legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: .72rem; color: var(--c-ink-2); align-items: center; } .px-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; } .px-dot--ink { background: var(--c-lijn-2); } .px-dot--marge { background: var(--c-groen); } .px-dot--btw { background: var(--c-amber); } .px-marge { margin-left: auto; font-weight: 700; color: var(--c-groen-d); } /* BTW + subsidie duo */ .px-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 760px) { .px-duo { grid-template-columns: 1fr; } } .px-rij { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: .8rem; color: var(--c-ink-2); } .px-rij--totaal { border-bottom: 0; font-weight: 800; color: var(--c-ink); } .px-eind { display: flex; align-items: baseline; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: var(--lijndikte) solid var(--c-lijn-2); font-size: .78rem; color: var(--c-ink-2); } .px-eind .mono { font-size: 1.5rem; font-weight: 800; color: var(--c-ink); } .px-subsidie { background: var(--c-groen-t); } .px-subsidie__kop { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 6px; } .px-subsidie__bedrag { font-size: 1.7rem; font-weight: 800; color: var(--c-groen-d); } .px-subsidie__geen { font-weight: 800; font-size: 1.05rem; color: var(--c-ink-3); margin-bottom: 4px; } .px-subsidie__uitleg { font-size: .74rem; line-height: 1.55; color: var(--c-ink-2); } /* Tarieven */ .px-tarieven { padding: 16px 20px; margin-bottom: 14px; } .px-tarieven__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; } .px-tarief { display: grid; grid-template-columns: 1.5fr .9fr .8fr .8fr .7fr 1fr 76px; gap: 10px; align-items: center; padding: 11px 0; border-top: var(--lijndikte) solid var(--c-lijn); } .px-tarief--kop { border-top: 0; padding: 6px 0; font-family: var(--font-mono); font-size: .56rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); } .px-tarief__naam { font-weight: 700; font-size: .8rem; } .px-tarief__unit { font-size: .72rem; color: var(--c-ink-3); } .px-tarief__rvo { font-size: .74rem; color: var(--c-ink-2); } .px-tarief .chip { justify-self: start; } .px-invoer { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; color: var(--c-ink-3); } .px-invoer input { width: 92px; padding: 8px 10px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 9px; font-family: var(--font-mono); font-size: .8rem; font-weight: 700; color: var(--c-ink); background: var(--kaart); text-align: right; } .px-invoer input:focus-visible { border-color: var(--c-groen); } /* Versiebeheer */ .px-pending { padding: 18px 20px; margin-bottom: 16px; border-color: var(--c-amber); background: var(--c-amber-t); } .px-pending__kop { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; font-size: .88rem; } .px-pending__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 14px; align-items: center; } @media (max-width: 760px) { .px-pending__grid { grid-template-columns: 1fr; } } .px-pending__wat { font-weight: 700; font-size: .82rem; } .px-pending__delta { font-size: .82rem; color: var(--c-ink-2); } .px-pending__delta strong { color: var(--c-ink); } .px-pending__actie { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .px-versies { padding: 6px 20px 16px; } .px-versies__titel { padding: 14px 0 6px; margin: 0; } .px-versie { display: flex; gap: 12px; padding: 13px 0; border-top: var(--lijndikte) solid var(--c-lijn); } .px-versie__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-groen); flex: none; margin-top: 5px; } .px-versie__kop { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; font-size: .82rem; } .px-versie__v { font-size: .64rem; font-weight: 700; color: var(--c-ink-2); background: var(--c-paneel); padding: 2px 8px; border-radius: 6px; } .px-versie__delta { font-size: .76rem; color: var(--c-ink-2); margin-top: 4px; } .px-versie__fiat { font-size: .7rem; font-weight: 700; color: var(--c-groen-d); margin-top: 3px; } /* Nacalculatie */ .px-nacs { padding: 0 20px 6px; } .px-nac { display: grid; grid-template-columns: 1fr 1.3fr .9fr .9fr .8fr 1fr; gap: 10px; align-items: center; padding: 12px 0; border-top: var(--lijndikte) solid var(--c-lijn); } .px-nac--kop { border-top: 0; padding: 12px 0 8px; font-family: var(--font-mono); font-size: .56rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); } .px-nac__ord { font-weight: 700; font-size: .72rem; color: var(--c-groen-d); } .px-nac__klant { font-weight: 700; font-size: .8rem; } .px-nac__calc, .px-nac__werk, .px-nac__afw { text-align: right; font-size: .78rem; } .px-nac.is-struct { background: var(--c-terra-t); border-radius: 8px; padding-left: 8px; padding-right: 8px; margin: 0 -8px; } .px-signaal { justify-self: start; background: var(--kaart); border: var(--lijndikte) solid var(--c-terra); border-radius: var(--radius-klein); color: var(--c-terra-d); font-family: var(--font-ui); font-size: .68rem; font-weight: 700; padding: 5px 11px; cursor: pointer; } .px-signaal:hover { background: var(--c-terra-t); } /* Producten */ .px-prod { display: grid; grid-template-columns: 2fr .8fr .8fr .9fr .5fr; gap: 10px; align-items: center; padding: 9px 0; border-top: var(--lijndikte) solid var(--c-lijn); } .px-prod--kop { border-top: 0; padding: 6px 0; font-family: var(--font-mono); font-size: .56rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); } .px-prod__naam { font-weight: 700; font-size: .8rem; } .px-prod .chip { justify-self: start; } .px-prod__btw { font-size: .74rem; color: var(--c-ink-3); } .px-nieuw { border: 1.5px dashed var(--c-lijn-2); border-radius: var(--radius); background: var(--c-creme); padding: 20px; } .px-nieuw__rij { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; } .px-nieuw__naam { flex: 2; min-width: 200px; width: auto; } .px-nieuw__cats { display: flex; gap: 7px; } .px-invoer--nieuw input { width: 110px; } /* ===================================================================== Besparingsmotor & CasaScore (tab, spec 1.2) ===================================================================== */ .bm-status { margin-top: 14px; padding-top: 14px; border-top: var(--lijndikte) solid var(--c-lijn); display: flex; flex-direction: column; gap: 8px; } .bm-status__rij { display: flex; align-items: center; justify-content: space-between; font-size: .76rem; color: var(--c-ink-3); } .bm-verify { margin-top: 4px; font-size: .74rem; padding: 9px 14px; } .bm-geverifieerd { font-size: .74rem; font-weight: 700; color: var(--c-groen-d); } /* Score-ringen (SVG-boog — geen gradient) */ .bm-scorekaart { padding: 20px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } .bm-ringen { display: flex; align-items: center; gap: 18px; } .bm-pijl { font-size: 1.6rem; color: var(--c-lijn-2); } .bm-ring__spoor { fill: none; stroke: var(--c-paneel); stroke-width: 9; } .bm-ring__boog { fill: none; stroke-width: 9; stroke-linecap: round; } .bm-ring--nu .bm-ring__boog { stroke: var(--c-amber); } .bm-ring--mogelijk .bm-ring__boog { stroke: var(--c-groen); } .bm-ring__score { font-family: var(--font-mono); font-size: 26px; font-weight: 800; fill: var(--c-ink); text-anchor: middle; } .bm-ring__sublabel { font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; fill: var(--c-ink-3); text-anchor: middle; } .bm-scoretekst { flex: 1; min-width: 190px; } .bm-scoretitel { font-weight: 800; font-size: 1rem; } .bm-scoresub { font-size: .8rem; color: var(--c-ink-2); margin-top: 4px; } .bm-scoresub strong { color: var(--c-groen-d); } .bm-disclaimer { font-size: .68rem; color: var(--c-ink-3); margin-top: 8px; } /* Bouwdeel-tabel */ .bm-deel { display: grid; grid-template-columns: 1.4fr 1fr .8fr 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-top: var(--lijndikte) solid var(--c-lijn); cursor: pointer; } .bm-deel.is-vast { cursor: default; } .bm-deel--kop { border-top: 0; padding: 6px 0; cursor: default; font-family: var(--font-mono); font-size: .56rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); } .bm-deel__naam { font-weight: 700; font-size: .82rem; } .bm-deel__meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; flex-wrap: wrap; } .bm-deel__comfort { font-size: .66rem; color: var(--c-ink-3); } .bm-balk { height: 9px; border-radius: var(--radius-pill); background: var(--c-paneel); display: flex; overflow: hidden; } .bm-balk__cur { background: var(--c-groen); } .bm-balk__pot { background: var(--c-amber-t); } .bm-deel__delta { font-weight: 800; color: var(--c-ink-3); } .bm-groen { color: var(--c-groen-d); } .bm-deel__besp { font-size: .78rem; font-weight: 700; color: var(--c-groen-d); } .bm-deel__actie { display: flex; justify-content: flex-end; } .bm-afnemen { padding: 7px 12px; background: var(--c-groen-t); color: var(--c-groen-d); border: 0; border-radius: 9px; font-family: var(--font-ui); font-size: .7rem; font-weight: 700; cursor: pointer; white-space: nowrap; } .bm-afnemen:hover { background: var(--c-groen); color: var(--knop-ink); } /* Modelbeheer */ .bm-modelgrid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; align-items: start; } @media (max-width: 900px) { .bm-modelgrid { grid-template-columns: 1fr; } } .bm-dot { background: var(--c-amber); } .bm-v { color: var(--c-amber); background: var(--c-amber-t); } .bm-aanname { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-top: var(--lijndikte) solid var(--c-lijn); } .bm-aanname__par { font-weight: 700; font-size: .8rem; } .bm-aanname__waarde { font-weight: 800; color: var(--c-groen-d); font-size: .8rem; } .px-link { font-weight: 700; color: var(--c-groen-d); text-decoration: none; } .px-link:hover { text-decoration: underline; } /* Wat-als-simulator (B4a) */ .px-simkpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0; } .px-simkpis span { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 10px 12px; } .px-simkpis em { font-style: normal; font-size: 11.5px; color: var(--c-ink-2); } .px-simkpis b { font-size: 15px; } .px-simrij { display: grid; grid-template-columns: 1.2fr 1fr 1.4fr auto; gap: 10px; align-items: center; padding: 7px 2px; border-bottom: 1px solid var(--c-lijn); font-size: 13px; } .px-simrij--kop { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-2); } .px-sim__bron { margin-top: 10px; } /* Grandfathering (B4c) */ .px-gf { border: 1px solid var(--c-lijn); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; } .px-gf--oud { border-color: var(--c-amber); } .px-gf__kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .px-gf__versie { font-weight: 800; } .px-gf__tel { margin-left: auto; font-size: 12.5px; color: var(--c-ink-2); } .px-gf__lijst { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 12.5px; color: var(--c-ink-2); } .px-gf__open { margin-top: 4px; } /* ---------- Prijsregel-beheer (regels toevoegen/bewerken/archiveren) ---------- */ .px-regelacties { display: flex; gap: 4px; justify-self: end; } .px-mini { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; padding: 5px 8px; font: 600 .68rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; transition: background 160ms ease, border-color 160ms ease; } .px-mini:hover { background: var(--c-creme); border-color: var(--c-groen); color: var(--c-groen-d); } .px-regelnieuw { margin-top: 12px; background: transparent; border: 1px dashed var(--c-lijn-2); border-radius: var(--radius); padding: 9px 14px; font: 700 .72rem var(--font-ui); color: var(--c-ink-3); cursor: pointer; width: 100%; transition: border-color 160ms ease, color 160ms ease; } .px-regelnieuw:hover { border-color: var(--c-groen); color: var(--c-groen-d); } .px-archief { margin-top: 14px; border-top: 1px dashed var(--c-lijn); padding-top: 11px; display: grid; gap: 6px; } .px-archrij { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 600 .76rem var(--font-ui); color: var(--c-ink-3); } .px-archrij em { font-size: .66rem; font-style: normal; color: var(--c-ink-3); } /* VK2 · maatregelen zonder vaste prijs. Een steiger of een e-DNA-onderzoek wordt per geval doorbelast; ze als € 0 in de tarieventabel zetten zou een marge van 0% opleveren en het gemiddelde vervuilen. Hier staan ze apart, mét de reden die de regelset erbij geeft. */ .px-pergeval { margin: 10px 0 0; padding: 12px 14px; border: var(--lijndikte) dashed var(--c-lijn-2); border-radius: var(--radius); background: var(--c-paneel); } .px-pergeval .kicker { display: block; margin-bottom: 8px; } .px-pergeval__rij { display: grid; grid-template-columns: 1.4fr 90px minmax(0, 3fr); gap: 12px; align-items: baseline; padding: 5px 0; font: 400 .72rem/1.5 var(--font-ui); color: var(--c-ink-2); } .px-pergeval__rij strong { color: var(--c-ink); font-size: .74rem; } /* VK2 · de balk die verschijnt zodra er prijzen zijn ingetikt maar nog niet opgeslagen. Zonder deze stap schreef een prijswijziging alleen in de browser: het scherm toonde de nieuwe prijs, de offertemotor de oude. */ .px-conceptbalk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 14px; border: var(--lijndikte) solid var(--c-amber); border-radius: var(--radius); background: var(--c-amber-t); } .px-conceptbalk__tel { font: 700 .78rem/1 var(--font-ui); color: var(--c-ink); } .px-conceptbalk .px-sub { flex: 1 1 200px; margin: 0; } /* blok H · de rekenhulp: links de omvang per maatregel, rechts de uitkomst van de server */ .px-rkgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; align-items: start; } @media (max-width: 980px) { .px-rkgrid { grid-template-columns: 1fr; } } .px-rkinvoer, .px-rkuit { padding: 16px 18px; } .px-rkrij { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--c-lijn); font-size: 13px; } .px-rkrij > span { min-width: 0; } .px-rkrij em, .px-rkregel em { display: block; font-style: normal; } .px-rkrij input { width: 96px; text-align: right; } .px-rkacties { display: flex; gap: 8px; margin-top: 14px; } .px-rkregel { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--c-lijn); font-size: 13px; } .px-rksom { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--c-lijn); font-size: 13px; } .px-rksom.is-totaal { font-weight: 700; border-top-width: 2px; border-top-color: var(--c-ink); } /* ── werkbon.css ── */ /* ===================================================================== werkbon.css — Module 2.2 · Werkbon & dossier: de werkbonnen per uitvoerder en het kwaliteitsdossier met zijn poort. De nagebootste telefoon is weg (blok H, 13-10-2026). Bouwt op tokens + bouwstenen.css. ===================================================================== */ /* Module-wortel: zelfde pagina-marge als de overige modules (fix 14-07-2026) */ .wb { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; } /* ---- beheer: terugkoppeling per uitvoerder ---- */ .wb-lijst { padding: 0 0 6px; overflow: hidden; margin-bottom: 14px; } .wb-lijst__kop { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px 12px; flex-wrap: wrap; } .wb-lijst__kop strong { font-size: .95rem; } .wb-lijst__sub { font-size: .74rem; color: var(--c-ink-3); margin-top: 2px; } .wb-tabs { display: flex; gap: 4px; padding: 4px; background: var(--c-paneel); border-radius: 12px; } .wb-tab { padding: 8px 15px; border-radius: 9px; border: 0; cursor: pointer; font-family: var(--font-ui); font-size: .76rem; font-weight: 600; background: transparent; color: var(--c-ink-2); transition: background var(--overgang); } .wb-tab.is-actief { background: var(--donker, var(--c-ink)); color: var(--knop-ink); } .wb-groep__kop { display: flex; align-items: center; gap: 12px; padding: 13px 20px; background: var(--c-paneel); border-top: var(--lijndikte) solid var(--c-lijn); } .wb-avatar { width: 34px; height: 34px; border-radius: 10px; background: var(--donker, var(--c-ink)); color: var(--knop-ink); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .74rem; flex: none; } .wb-groep__naam { flex: 1; min-width: 0; font-weight: 800; font-size: .84rem; } .wb-groep__naam span { font-weight: 500; font-size: .76rem; color: var(--c-ink-3); } .wb-groep__stat { font-size: .68rem; color: var(--c-ink-2); } .wb-rij { display: grid; grid-template-columns: 78px 1.1fr 1.4fr .9fr .6fr .6fr .9fr; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 10px 20px; border: 0; border-top: var(--lijndikte) solid var(--c-lijn); background: transparent; cursor: pointer; font-family: var(--font-ui); font-size: .76rem; transition: background var(--overgang); } .wb-rij:hover { background: var(--c-creme); } .wb-rij.is-actief { background: var(--c-groen-t); } .wb-rij--kop { padding: 8px 20px 4px; border-top: 0; cursor: default; font-size: .56rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); } .wb-rij--kop:hover { background: transparent; } .wb-rij__id { font-size: .7rem; color: var(--c-ink-2); } .wb-rij__klant { font-weight: 700; } .wb-rij__taak, .wb-rij__tijd { color: var(--c-ink-2); font-size: .74rem; } .wb-groen { color: var(--c-groen-d); } .wb-amber { color: var(--c-amber); } /* ---- kwaliteitsdossier ---- */ .wb-dossier { padding: 20px; margin-bottom: 14px; } .wb-dossier__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .wb-dossier__titel { display: flex; align-items: center; gap: 9px; font-size: .95rem; } .wb-dossier__sub { font-size: .68rem; color: var(--c-ink-3); margin-top: 3px; } .wb-dossier__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; } @media (max-width: 900px) { .wb-dossier__grid { grid-template-columns: 1fr; } } .wb-dossier__fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .wb-dossier__kicker { display: block; margin-bottom: 10px; } /* Controlepunten zijn een oordeel, geen versiering: open = leeg vakje, afgevinkt = groen. Bij een echte bon is de rij een knop (klikbaar). */ .wb-punt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: 400 .78rem var(--font-ui); color: var(--c-ink-3); padding: 5px 0; background: transparent; border: 0; } button.wb-punt { cursor: pointer; transition: color var(--overgang); } button.wb-punt:hover { color: var(--c-ink); } .wb-punt.is-ok { color: var(--c-ink-2); } .wb-punt__box { width: 19px; height: 19px; flex: none; border-radius: 6px; background: var(--c-lijn-2); display: flex; align-items: center; justify-content: center; transition: background var(--overgang); } .wb-punt.is-ok .wb-punt__box { background: var(--c-groen); } /* Zoekbalk boven de werkbonlijst — met honderden werkorders vind je een bon niet meer door te scrollen. */ .wb-zoekbalk { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 12px 18px; border-top: var(--lijndikte) solid var(--c-lijn); } .wb-zoekbalk .kicker { flex: none; } .wb-zoekveld { flex: 1; min-width: 230px; font: 400 .8rem var(--font-ui); color: var(--c-ink); padding: 8px 12px; border-radius: var(--radius); background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn-2); transition: border-color var(--overgang); } .wb-zoekveld:hover { border-color: var(--c-lijn); } .wb-flt { font: 700 .72rem var(--font-ui); padding: 7px 13px; border-radius: var(--radius-klein); border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-creme); color: var(--c-ink-3); cursor: pointer; transition: background var(--overgang), border-color var(--overgang), color var(--overgang); } .wb-flt:hover { border-color: var(--c-lijn); color: var(--c-ink); } .wb-flt.is-actief { border-color: var(--c-rood); background: var(--c-rood-t); color: var(--c-rood); } .wb-zoekstand { font-size: .68rem; color: var(--c-ink-3); margin-left: auto; } .wb-dossier__stand { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .wb-poortacties { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .wb-poortacties .btn { flex: 1; min-width: 170px; } .wb-override { border-color: var(--c-rood); color: var(--c-rood); } .wb-dossier__gate { margin-top: 14px; } .wb-keur { width: 100%; margin-top: 10px; } .wb-goed { padding: 13px; border-radius: 12px; background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); text-align: center; font-size: .8rem; font-weight: 700; color: var(--c-groen-d); } .wb-wacht { padding: 13px; border-radius: 12px; background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-amber); text-align: center; font-size: .76rem; color: var(--c-amber); } /* Teken-vlak klanthandtekening (C3a) */ /* Facturatie-poort (besluit 15-07): klantakkoord → keuring → automatisch */ .wb-facstappen { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; } .wb-facstap { font-size: 12px; color: var(--c-ink-2); } .wb-facstap.is-ok { color: var(--c-groen-d); font-weight: 600; } .wb-facwijze { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; margin-bottom: 10px; } .wb-facwijze select { border: 1px solid var(--c-lijn); border-radius: 10px; padding: 6px 10px; font: inherit; font-size: 12.5px; background: var(--c-paneel); color: var(--c-ink); } /* ---- Voorraad V3 · de batchscan op de bon (P-VRD-SCAN) ---- Het blok kleurt groen zodra elke component gescand is en amber zolang er iets ontbreekt. Geen rood: de bon zelf is niet fout, hij is nog niet af — rood is voor de poort die daarna dichtblijft. */ .wb-batch { margin: 14px 0 0; padding: 11px 13px; border-radius: var(--radius); border: var(--lijndikte) solid var(--c-lijn); background: var(--c-paneel); } .wb-batch.is-ok { border-color: var(--c-groen); background: var(--c-groen-t); } .wb-batch.is-open { border-color: var(--c-amber); background: var(--c-amber-t); } .wb-batch__uitleg { margin: 2px 0 8px; font-size: .72rem; line-height: 1.55; color: var(--c-ink-2); } .wb-batchrij { display: grid; align-items: center; gap: 10px; grid-template-columns: 28px minmax(0, 1.3fr) 66px minmax(0, 1.6fr); padding: 6px 0; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .74rem; } .wb-batchrij:first-of-type { border-top: 0; } .wb-batchcode { font-weight: 700; font-size: .84rem; color: var(--c-ink); } .wb-batchnaam em { display: block; font-style: normal; font-size: .64rem; color: var(--c-ink-3); } .wb-batchvaten { display: flex; flex-wrap: wrap; gap: 4px; } .wb-batchtag { display: inline-flex; align-items: center; gap: 5px; font-size: .64rem; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: 99px; padding: 2px 4px 2px 9px; } .wb-batchweg { border: 0; background: none; cursor: pointer; font: inherit; font-size: .7rem; line-height: 1; color: var(--c-ink-3); padding: 2px 5px; border-radius: var(--radius-klein); } .wb-batchweg:hover { color: var(--c-terra-d); } .wb-batchleeg { font-style: normal; color: var(--c-amber); } .wb-batchvoet { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .7rem; } .wb-scanform { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 8px; padding: 10px; background: var(--kaart); border-radius: var(--radius); border: var(--lijndikte) solid var(--c-lijn); } .wb-scanveld { display: flex; flex-direction: column; gap: 4px; font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); font-weight: 700; } .wb-scanveld select, .wb-scanveld input { font: inherit; font-size: .76rem; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--c-ink); padding: 6px 9px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: var(--kaart); } .wb-scanveld input { width: 110px; } /* blok G (P23) · hoe het klantakkoord er kwam, onder het controlepunt */ .wb-punt__tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .wb-punt__hoe { font-style: normal; font-size: .72rem; color: var(--ink2); } /* ---- blok H · het fotodossier: wat er echt ligt, per fase ---- */ .wb-fotodossier { min-width: 0; } .wb-fotofase { border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; } .wb-fotofase.is-open { border-color: var(--let); } .wb-fotofase__kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .wb-fotofase__kop strong { font-size: .84rem; } .wb-fotofase__kop .mono { font-size: .7rem; color: var(--ink2); margin-right: auto; } .wb-fotorij { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: var(--lijndikte) solid var(--lijn); margin: 0; font-size: .78rem; } .wb-fotorij--stil { color: var(--ink2); border-top: 0; } .wb-fotorij__tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .wb-fotorij__tekst em { font-style: normal; font-size: .7rem; color: var(--ink2); } .wb-fotoduim { width: 56px; height: 42px; flex: none; border-radius: var(--radius-klein); border: var(--lijndikte) solid var(--lijn); overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--ink3); } .wb-fotoduim img { width: 100%; height: 100%; object-fit: cover; display: block; } .wb-fotoduim--leeg { border-style: dashed; } .wb-fotoduim:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .wb-fotolos { display: flex; gap: 8px; flex-wrap: wrap; } .wb-historie { margin-top: 16px; border-top: var(--lijndikte) solid var(--lijn); padding-top: 12px; } .wb-histrij { display: grid; grid-template-columns: 120px minmax(0, 1fr) 160px; gap: 10px; padding: 5px 0; font-size: .76rem; border-top: var(--lijndikte) solid var(--lijn); } .wb-histrij:first-of-type { border-top: 0; } .wb-histrij .mono { font-size: .68rem; color: var(--ink2); } .wb-histrij em { font-style: normal; color: var(--ink2); } .wb-groep__naam a { color: inherit; text-decoration: underline; } @media (max-width: 720px) { .wb-histrij { grid-template-columns: 1fr; gap: 2px; } } /* ── natuur.css ── */ /* natuur.css — Uitvoering › Natuurpoort (dossiers · register · regels). Kleur en vorm uit casa360-stijl.css. */ .nt .bs-tabs { margin: 14px 0 16px; } .nt-lijst { margin-top: 4px; } .nt-rij { display: grid; grid-template-columns: 84px 1.4fr 1.5fr auto auto 74px; gap: 12px; align-items: center; width: 100%; border: 0; background: none; font: inherit; text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--c-lijn); cursor: pointer; color: var(--c-ink); } .nt-rij:last-child { border-bottom: 0; } .nt-rij:hover { background: var(--grijs); } .nt-rij--kop { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-2); cursor: default; } .nt-rij--kop:hover { background: none; } .nt-rij.is-actief { background: var(--grijs); } .nt-id { font-size: 11.5px; color: var(--c-ink-2); } .nt-cel { display: flex; flex-direction: column; gap: 1px; font-size: 13px; min-width: 0; } .nt-cel > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nt-cel .mono, .nt-gem { font-size: 11px; color: var(--c-ink-2); } .nt-poort { font-size: 11.5px; font-weight: 700; white-space: nowrap; } .nt-poort.is-ok { color: var(--goed-d); } .nt-poort.is-blok { color: var(--stop-d); } .nt-leeg { padding: 18px 14px; font-size: 13px; color: var(--c-ink-2); } .nt-drawerchips { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; } .nt-uitleg { font-size: 12.5px; color: var(--c-ink-2); line-height: 1.55; margin: 8px 0; max-width: 78ch; } .nt-acties { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin: 12px 0 0; } .nt-edna { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 10px 0; } .nt-feit { display: flex; flex-direction: column; gap: 2px; font-size: 13px; min-width: 0; overflow-wrap: anywhere; } .nt-let { display: block; color: var(--let-d); font-family: var(--font); } .nt-regkop { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 10px; } .nt-regkop .bs-blbalk { margin: 0; flex: 1 1 320px; } .nt-tabelwrap { overflow-x: auto; } .nt-tabelwrap tbody tr { cursor: pointer; } .nt-tabelwrap th.num { font-size: 10.5px; } .nt-tabelwrap td small { display: block; font-size: 11px; color: var(--c-ink-2); } .nt-regels { padding: 18px 20px; margin-bottom: 14px; } .nt-periode { grid-column: 1 / -1; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; align-items: start; } @media (max-width: 900px) { .nt-rij { grid-template-columns: 1fr 1fr; } .nt-rij--kop { display: none; } .nt-edna { grid-template-columns: 1fr; } .nt-periode { grid-template-columns: 1fr; } } /* ── afwijkingen.css ── */ /* ===================================================================== afwijkingen.css — Module 2.3 · Afwijkingen & meerwerk. Meldingen- kaarten met type-kleurbalk links en gevolg-badges; typenbeheer als geversioneerde regelset-tabel. Bouwt op tokens + bouwstenen.css. ===================================================================== */ /* Module-wortel: zelfde pagina-marge als de overige modules (fix 14-07-2026) */ .afw { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; } /* aanzicht-wissel (prototype: donkere actieve pill) */ .afw-switch { display: flex; gap: 9px; margin-bottom: 18px; } .afw-switch__knop { padding: 9px 17px; border-radius: 10px; border: 0; cursor: pointer; font-family: var(--font-ui); font-size: .8rem; font-weight: 600; background: var(--c-paneel); color: var(--c-ink-2); transition: background var(--overgang); } .afw-switch__knop.is-actief { background: var(--donker, var(--c-ink)); color: var(--knop-ink); } /* ---- meldingen ---- */ .afw-lijst { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; } .afw-kaart { padding: 16px 18px; border-left: 4px solid var(--c-lijn-2); } .afw-kaart--groen { border-left-color: var(--c-groen); } .afw-kaart--terra { border-left-color: var(--c-terra); } .afw-kaart--amber { border-left-color: var(--c-amber); } .afw-kaart--stil { border-left-color: var(--c-lijn-2); } .afw-kaart__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .afw-kaart__links { display: flex; gap: 12px; min-width: 0; flex: 1; } .afw-kaart__ic { font-size: 1.15rem; flex: none; color: var(--c-ink-2); } .afw-kaart__inhoud { min-width: 0; } .afw-kaart__titel { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 3px; } .afw-kaart__titel strong { font-size: .88rem; } .afw-kaart__id { font-size: .68rem; color: var(--c-ink-3); } .afw-kaart__oms { font-size: .78rem; line-height: 1.6; color: var(--c-ink-2); max-width: 640px; margin: 0; } .afw-kaart__meta { display: flex; align-items: center; gap: 9px; margin-top: 7px; flex-wrap: wrap; font-size: .7rem; color: var(--c-ink-3); } .afw-gevolg { font-size: .64rem; font-weight: 600; padding: 4px 10px; border-radius: 8px; white-space: nowrap; } .afw-gevolg--groen { color: var(--c-groen-d); background: var(--c-groen-t); } .afw-gevolg--amber { color: var(--c-amber); background: var(--c-amber-t); } .afw-gevolg--rood { color: var(--c-rood); background: var(--c-rood-t); } .afw-gevolg--stil { color: var(--c-ink-2); background: var(--c-paneel); } .afw-kaart__impact { text-align: right; flex: none; } .afw-kaart__bedrag { font-size: 1.1rem; font-weight: 800; margin-top: 2px; } .afw-kaart__acties { display: flex; gap: 9px; margin-top: 13px; padding-top: 13px; border-top: var(--lijndikte) solid var(--c-lijn); flex-wrap: wrap; align-items: center; } .afw-wachttekst { font-size: .74rem; font-weight: 600; color: var(--c-amber); } .afw-afwijs { border-color: var(--c-terra); color: var(--c-terra-d); } .afw-afwijs:hover:not(:disabled) { background: var(--c-terra-t); } /* ---- typen & gevolgen ---- */ .afw-typen__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; } .afw-typen__intro { max-width: 640px; font-size: .8rem; line-height: 1.6; color: var(--c-ink-2); margin: 0; } .afw-ministats { display: flex; gap: 12px; margin-bottom: 16px; } .afw-ministat { padding: 13px 17px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 13px; background: var(--kaart); font-size: .76rem; color: var(--c-ink-3); } .afw-ministat .mono { font-size: 1.2rem; font-weight: 800; color: var(--c-ink); margin-right: 4px; } .afw-ministat--groen { border-color: var(--c-groen); background: var(--c-groen-t); color: var(--c-groen-d); } .afw-ministat--groen .mono { color: var(--c-groen-d); } .afw-editor { border: 1.5px solid var(--c-groen); background: var(--c-groen-t); padding: 20px 22px; margin-bottom: 18px; } .afw-editor__titel { display: block; font-size: .88rem; margin-bottom: 15px; } .afw-editor__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 900px) { .afw-editor__grid { grid-template-columns: 1fr; } } .afw-editor .kicker { display: block; margin-bottom: 6px; } .afw-editor__kicker { margin-top: 15px; } .afw-input { width: 100%; padding: 10px 13px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 10px; font-family: var(--font-ui); font-size: .8rem; color: var(--c-ink); background: var(--kaart); box-sizing: border-box; } .afw-opties { display: flex; gap: 7px; flex-wrap: wrap; } .afw-optie { padding: 7px 13px; border-radius: 9px; border: 0; cursor: pointer; font-family: var(--font-ui); font-size: .72rem; font-weight: 600; background: var(--kaart); color: var(--c-ink-2); border: var(--lijndikte) solid var(--c-lijn-2); } .afw-optie.is-actief { background: var(--donker, var(--c-ink)); color: var(--knop-ink); border-color: var(--c-ink); } .afw-gevolgen { display: flex; flex-direction: column; gap: 6px; } .afw-gevolgkeuze { padding: 8px 12px; border-radius: 9px; border: var(--lijndikte) solid var(--c-lijn-2); cursor: pointer; font-family: var(--font-ui); font-size: .72rem; font-weight: 600; text-align: left; background: var(--kaart); color: var(--c-ink-2); } .afw-gevolgkeuze--groen.is-actief { background: var(--c-groen); border-color: var(--c-groen); color: var(--knop-ink); } .afw-gevolgkeuze--amber.is-actief { background: var(--c-amber); border-color: var(--c-amber); color: var(--knop-ink); } .afw-gevolgkeuze--rood.is-actief { background: var(--c-rood); border-color: var(--c-rood); color: var(--knop-ink); } .afw-gevolgkeuze--stil.is-actief { background: var(--donker, var(--c-ink)); border-color: var(--c-ink); color: var(--knop-ink); } .afw-editor__voet { display: flex; gap: 9px; margin-top: 18px; padding-top: 16px; border-top: var(--lijndikte) solid var(--c-lijn-2); } .afw-tabel { padding: 0; overflow: hidden; } .afw-trij { display: grid; grid-template-columns: 26px 1.7fr .8fr 1.4fr .9fr .8fr .7fr auto; gap: 12px; align-items: center; padding: 13px 16px; border-top: var(--lijndikte) solid var(--c-lijn); } .afw-trij.is-uit { opacity: .5; } .afw-trij--kop { border-top: 0; background: var(--c-paneel); padding: 12px 16px; font-size: .56rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); } .afw-trij__ic { font-size: 1rem; color: var(--c-ink-2); } .afw-trij__naam strong { display: block; font-size: .82rem; } .afw-trij__naam span { font-size: .66rem; color: var(--c-ink-3); } .afw-cat { font-size: .62rem; font-weight: 600; padding: 3px 9px; border-radius: 7px; justify-self: start; } .afw-cat--terra { color: var(--c-terra-d); background: var(--c-terra-t); } .afw-cat--amber { color: var(--c-amber); background: var(--c-amber-t); } .afw-cat--groen { color: var(--c-groen-d); background: var(--c-groen-t); } .afw-cat--stil { color: var(--c-ink-2); background: var(--c-paneel); } .afw-trij .afw-gevolg { justify-self: start; } .afw-trij .chip { justify-self: start; } .afw-trij__onderb { font-size: .72rem; color: var(--c-ink-2); } .afw-trij__versie { font-weight: 700; font-size: .7rem; color: var(--c-groen-d); } .afw-trij__acties { display: flex; align-items: center; gap: 6px; justify-content: flex-end; } .afw-trij__acties-kop { text-align: right; } .afw-toggle { border: 0; cursor: pointer; font-family: var(--font-ui); } /* Meerwerk-prijslijst-onderbouwing (C4a) */ .afw-prijsbron { display: block; font-size: 11px; color: var(--c-groen-d); margin-top: 3px; } .afw-prijsbron--afwijkend { color: var(--c-amber); font-weight: 600; } /* blok H · de soorten afwijking met hun gevolg (leeslijst uit het platform) */ .afw-soortrij { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 6px 14px; padding: 14px 18px; border-bottom: 1px solid var(--c-lijn); align-items: center; } .afw-soortrij:last-child { border-bottom: 0; } .afw-soortrij p { grid-column: 1 / -1; margin: 0; font-size: 13px; line-height: 1.55; color: var(--c-ink-2); max-width: 78ch; } /* ── templates.css ── */ /* ===================================================================== templates.css — Module 2.5b · Templatebeheer. Registerlijst + drawer met merge-velden en template-editor. Tokens + bouwstenen. ===================================================================== */ /* Module-wortel: zelfde pagina-marge als de overige modules (fix 14-07-2026) */ .tpl { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; } .tpl-lijst { padding: 0 0 6px; overflow: hidden; margin-bottom: 14px; } .tpl-lijst__kop { padding: 16px 18px 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .tpl-lijst__kop strong { font-size: .95rem; } .tpl-lijst__acties { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tpl-lijst__sub { font-size: .74rem; color: var(--c-ink-3); margin-top: 2px; max-width: 72ch; } .tpl-rij { display: grid; grid-template-columns: 1.4fr .7fr 1.6fr 1fr .7fr; gap: 10px; align-items: center; padding: 11px 18px; border-top: var(--lijndikte) solid var(--c-lijn); cursor: pointer; transition: background var(--overgang); } .tpl-rij:hover { background: var(--c-creme); } .tpl-rij--kop { padding: 6px 18px 8px; border-top: 0; cursor: default; font-size: .56rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); } .tpl-rij--kop:hover { background: transparent; } .tpl-rij__naam { display: block; border: 0; background: transparent; padding: 0; cursor: pointer; text-align: left; font-family: var(--font-ui); font-weight: 700; font-size: .8rem; color: var(--c-ink); } .tpl-rij__koppelt { font-size: .7rem; color: var(--c-ink-3); } .tpl-rij__versie { font-size: .68rem; color: var(--c-groen-d); font-weight: 700; } .tpl-rij .chip { justify-self: start; } .tpl-kop { display: block; margin: 14px 0 7px; } .tpl-kop:first-child { margin-top: 0; } .tpl-velden { display: flex; flex-wrap: wrap; gap: 6px; } .tpl-veld { font-size: .64rem; font-weight: 600; color: var(--c-groen-d); background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); padding: 3px 8px; border-radius: 7px; } .tpl-koppeling { font-size: .76rem; line-height: 1.5; color: var(--c-ink-2); margin: 0; } .tpl-body { font-size: .68rem; line-height: 1.6; color: var(--c-ink); background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; padding: 14px 16px; white-space: pre-wrap; margin: 0; max-height: 46vh; overflow: auto; } .tpl-editor { width: 100%; min-height: 320px; box-sizing: border-box; font-family: var(--font-mono); font-size: .68rem; line-height: 1.6; color: var(--c-ink); background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 11px; padding: 14px 16px; resize: vertical; } /* contract-preview (modaal, gedeeld met uitvoerders 2.5b) */ .tpl-preview { white-space: pre-wrap; font-family: var(--font-mono); font-size: .68rem; line-height: 1.65; max-height: 58vh; overflow: auto; padding: 4px 2px; } /* E5b · versies + diff */ .tpl-versierij { display: grid; grid-template-columns: 1fr 1.2fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--c-lijn); font-size: 13px; } .tpl-versierij__door { font-size: 11.5px; color: var(--c-ink-2); } .tpl-versierij__acties { display: flex; gap: 6px; } .tpl-diff { border: 1px solid var(--c-lijn); border-radius: 12px; margin-top: 10px; overflow: hidden; } .tpl-diff__kop { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--c-lijn); background: var(--c-creme); } .tpl-diff__body { max-height: 320px; overflow: auto; font-size: 11.5px; line-height: 1.5; padding: 8px 0; } .tpl-diff__regel { display: flex; gap: 8px; padding: 0 12px; white-space: pre-wrap; } .tpl-diff__regel i { font-style: normal; width: 10px; flex: none; font-weight: 800; } .tpl-diff__regel.is-plus { background: color-mix(in srgb, var(--c-groen) 14%, transparent); } .tpl-diff__regel.is-plus i { color: var(--c-groen-d); } .tpl-diff__regel.is-min { background: color-mix(in srgb, var(--c-terra) 12%, transparent); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--c-terra) 55%, transparent); } .tpl-diff__regel.is-min i { color: var(--c-terra); } /* E5c · merkvarianten */ .tpl-merken { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .tpl-merkchip { border: 1px solid var(--c-lijn); border-radius: var(--radius-klein); background: var(--c-paneel); font: inherit; font-size: 11.5px; padding: 4px 12px; cursor: pointer; color: var(--c-ink); } .tpl-merkchip.is-actief { border-color: var(--c-groen-d); background: color-mix(in srgb, var(--c-groen) 14%, var(--c-paneel)); font-weight: 700; } .tpl-merkblok { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; } .tpl-merkblok textarea { border: 1px solid var(--c-lijn); border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 12.5px; background: var(--c-paneel); color: var(--c-ink); resize: vertical; } /* E5 · merge-velden: kiezer + invoeg-strip */ .tpl-mvkiezer { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 8px 0 14px; max-height: 300px; overflow: auto; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 12px 14px; } .tpl-mvgroep { display: flex; flex-direction: column; gap: 4px; } .tpl-mvkeuze { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; cursor: pointer; } .tpl-mvkeuze__veld { font-size: 10.5px; color: var(--c-ink-2); } .tpl-invoeg { display: flex; gap: 8px; align-items: end; margin-bottom: 8px; flex-wrap: wrap; } .tpl-invoeg__kies { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 220px; } .tpl-invoeg__kies select { border: 1px solid var(--c-lijn); border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 12.5px; background: var(--c-paneel); color: var(--c-ink); } /* E5b · clausule-eisen */ .tpl-clausrij { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--c-lijn); } .tpl-clausrij__zoek { font-size: 10.5px; color: var(--c-ink-2); } .tpl-clmlink { color: var(--c-groen-d); font-weight: 700; text-decoration: none; } .tpl-clmlink:hover { text-decoration: underline; } /* ── intranet.css ── */ /* intranet.css — Intranet & messenger (E5 · 16-07-2026) */ /* ---- zwevend icoon + paneel (rechtsonder, op elk scherm) ---- */ #casa-intranet { position: fixed; right: 24px; bottom: 22px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .intra-knop { position: relative; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--c-lijn); background: var(--gradient-primair); color: var(--c-paneel); font-size: 22px; cursor: pointer; box-shadow: var(--schaduw-knop); display: grid; place-items: center; order: 2; transition: transform 160ms; } .intra-knop:hover { background: var(--gradient-primair-hover); transform: translateY(-1px); } @media (prefers-reduced-motion: reduce) { .intra-knop, .intra-knop:hover { transition: none; transform: none; } } .intra-knop__badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 99px; background: var(--c-amber); color: var(--c-ink); font-size: 10.5px; font-weight: 800; font-family: var(--font-mono); display: grid; place-items: center; padding: 0 4px; } .intra-paneel { order: 1; width: 372px; max-width: calc(100vw - 40px); height: 520px; max-height: calc(100vh - 120px); background: var(--c-paneel); border: 1px solid var(--c-lijn); border-radius: 12px; box-shadow: var(--schaduw-tegel); display: flex; flex-direction: column; overflow: hidden; } .intra-kop { display: flex; justify-content: space-between; align-items: flex-start; padding: 14px 16px 0; } .intra-kop__tabs { display: flex; gap: 4px; margin-top: 8px; border-bottom: 1px solid var(--c-lijn); } .intra-tab { position: relative; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--c-ink-2); padding: 6px 10px 8px; cursor: pointer; border-bottom: 2px solid transparent; } .intra-tab.is-actief { color: var(--c-ink); border-bottom-color: var(--c-groen-d); } .intra-tab__badge { position: static; display: inline-grid; margin-left: 4px; } .intra-x { border: 0; background: none; font-size: 14px; cursor: pointer; color: var(--c-ink-2); padding: 4px 6px; } .intra-lijst { flex: 1; overflow: auto; padding: 6px 8px 10px; display: flex; flex-direction: column; } .intra-rij { display: flex; gap: 10px; align-items: center; width: 100%; border: 0; background: none; font: inherit; text-align: left; padding: 9px 10px; border-radius: 10px; cursor: pointer; color: var(--c-ink); } .intra-rij:hover { background: var(--c-creme); } .intra-rij__mid { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; } .intra-rij__mid strong { font-size: 13px; } .intra-rij__tijd { font-size: 10px; color: var(--c-ink-2); } .intra-rij__badge { position: static; flex: none; } .intra-avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--c-groen-t); color: var(--c-groen-d); font-weight: 800; font-size: 13px; border: 1px solid var(--c-groen); } .intra-avatar.is-team { background: var(--c-creme); color: var(--c-ink-2); border-color: var(--c-lijn); } .intra-sub { font-size: 11px; color: var(--c-ink-2); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .intra-gesprekkop { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--c-lijn); } .intra-gesprekkop strong { font-size: 13.5px; display: block; } .intra-terug { border: 1px solid var(--c-lijn); border-radius: 10px; background: var(--c-paneel); font: inherit; cursor: pointer; padding: 4px 10px; color: var(--c-ink); } .intra-berichten { flex: 1; overflow: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .intra-bericht { max-width: 82%; align-self: flex-start; background: var(--c-creme); border: 1px solid var(--c-lijn); border-radius: 12px 12px 12px 4px; padding: 7px 11px; display: flex; flex-direction: column; gap: 2px; } .intra-bericht.is-ik { align-self: flex-end; background: var(--c-groen-t); border-color: var(--c-groen); border-radius: 12px 12px 4px 12px; } .intra-bericht__van { font-size: 10.5px; font-weight: 800; color: var(--c-groen-d); } .intra-bericht__tekst { font-size: 12.5px; line-height: 1.45; } .intra-bericht__tijd { font-size: 9.5px; color: var(--c-ink-2); align-self: flex-end; } .intra-leeg { font-size: 12px; color: var(--c-ink-2); text-align: center; margin-top: 24px; } .intra-invoer { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--c-lijn); } .intra-invoer input { flex: 1; border: 1px solid var(--c-lijn); border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 12.5px; background: var(--c-paneel); color: var(--c-ink); } .intra-invoer .btn { padding: 6px 14px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .intra-lijst--nieuws { gap: 10px; padding: 12px 14px; } .intra-nieuws { border: 1px solid var(--c-lijn); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; } .intra-nieuws__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .intra-nieuws__kop strong { font-size: 13px; } .intra-nieuws p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--c-ink-2); } .intra-redactielink { font-size: 12px; font-weight: 700; color: var(--c-groen-d); text-decoration: none; align-self: flex-start; } .intra-redactielink:hover { text-decoration: underline; } /* ---- redactiescherm (menu Bedrijf › Intranet) ---- */ .intra-pagina { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; } .intra-h1 { margin: 2px 0 6px; } .intra-uitleg { color: var(--c-ink-2); max-width: 62ch; line-height: 1.55; font-size: 13.5px; margin: 0 0 16px; } .intra-redactie { padding: 0 0 6px; overflow: hidden; margin-bottom: 14px; } .intra-redactie__kop { padding: 16px 18px 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .intra-redactie__acties { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .intra-mdrij { display: grid; grid-template-columns: 1.8fr auto auto auto auto; gap: 12px; align-items: center; padding: 11px 18px; border-top: 1px solid var(--c-lijn); } .intra-mdrij.is-archief { opacity: .55; } .intra-mdrij__acties { display: flex; gap: 6px; } /* IB · rapporten in de messenger: titel en KPI-strip */ .intra-bericht.is-rapport { border-left: 3px solid var(--accent); } .intra-bericht__titel { display: block; font-size: .9rem; margin-bottom: 4px; } .intra-cijfers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 4px 0 6px; } .intra-cijfers span { background: var(--c-paneel-2); border: 1px solid var(--c-lijn); border-radius: var(--radius-klein, 8px); padding: 4px 8px; display: flex; flex-direction: column; } .intra-cijfers b { font-size: .95rem; } .intra-cijfers small { color: var(--c-ink-2); font-size: .7rem; } /* ── berichten.css ── */ /* berichten.css — interne berichtendienst (IB). Alleen tokens uit casa360-stijl.css. */ .bn { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; } .bn-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; } .bn-kop h1 { margin: 4px 0 4px; } .bn-kop p { margin: 0; color: var(--c-ink-2); max-width: 70ch; } .bn-tabs { display: flex; gap: 6px; flex-wrap: wrap; } .bn-inbox { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 14px; min-height: 520px; } @media (max-width: 900px) { .bn-inbox { grid-template-columns: 1fr; } } .bn-lijst { display: flex; flex-direction: column; overflow: hidden; } .bn-zoek { padding: 10px; border-bottom: 1px solid var(--c-lijn); } .bn-zoek input { width: 100%; box-sizing: border-box; border: 1px solid var(--c-lijn-2); border-radius: var(--radius-klein, 8px); padding: 8px 10px; font: inherit; background: var(--kaart); color: var(--c-ink); } .bn-rij { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--c-lijn); background: transparent; padding: 10px 12px; cursor: pointer; font: inherit; color: var(--c-ink); } .bn-rij:hover { background: var(--accent-t2); } .bn-rij.is-actief { background: var(--accent-t); } .bn-rij__avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--c-paneel); font-weight: 800; font-size: .8rem; } .bn-rij__avatar.is-groep { background: var(--accent-t); color: var(--accent); } .bn-rij__avatar.is-rapport { background: var(--donker, var(--c-ink)); color: var(--donker-ink, var(--c-creme)); } .bn-rij__mid { display: flex; flex-direction: column; min-width: 0; } .bn-rij__mid span { color: var(--c-ink-2); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bn-rij__tijd { color: var(--c-ink-3); font-size: .74rem; } .bn-badge { background: var(--accent); color: var(--kaart); border-radius: 99px; padding: 1px 8px; font: 700 .72rem var(--font-mono); } .bn-rechts { display: flex; flex-direction: column; min-height: 520px; } .bn-thread__kop { border-bottom: 1px solid var(--c-lijn); padding: 12px 16px; } .bn-thread__kop em { display: block; color: var(--c-ink-2); font-size: .82rem; font-style: normal; } .bn-thread { flex: 1; overflow: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; max-height: 60vh; } .bn-leeg { padding: 24px 16px; color: var(--c-ink-2); display: flex; flex-direction: column; gap: 10px; } .bn-leeg strong { color: var(--c-ink); } .bn-bericht { border: 1px solid var(--c-lijn); border-radius: var(--radius); padding: 10px 14px; background: var(--kaart); max-width: 720px; } .bn-bericht.is-ik { margin-left: auto; background: var(--accent-t2); } .bn-bericht.is-rapport { border-left: 3px solid var(--accent); } .bn-bericht.is-gepind { border-color: var(--let); } .bn-bericht__kop { display: flex; gap: 10px; align-items: baseline; font-size: .8rem; color: var(--c-ink-2); } .bn-bericht__kop strong { color: var(--c-ink); } .bn-bericht h3 { margin: 6px 0 4px; font-size: 1.02rem; } .bn-bericht p { margin: 6px 0; white-space: pre-wrap; } .bn-cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 8px 0; } .bn-cijfers div { background: var(--c-paneel-2); border: 1px solid var(--c-lijn); border-radius: var(--radius-klein, 8px); padding: 8px 10px; display: flex; flex-direction: column; } .bn-cijfers b { font-size: 1.05rem; } .bn-cijfers small { color: var(--c-ink-2); font-size: .72rem; } .bn-bericht__voet { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; } .bn-duim { border: 1px solid var(--c-lijn); background: var(--kaart); border-radius: 99px; padding: 3px 10px; cursor: pointer; font: inherit; } .bn-duim.is-aan { border-color: var(--accent); background: var(--accent-t); } .bn-klein { padding: 4px 10px; font-size: .8rem; } .bn-gelezen { color: var(--c-ink-3); font-size: .74rem; margin-left: auto; } .bn-reacties { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; font-size: .85rem; border-top: 1px dashed var(--c-lijn); padding-top: 6px; } .bn-invoer { display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--c-lijn); } .bn-invoer input { flex: 1; border: 1px solid var(--c-lijn-2); border-radius: var(--radius-klein, 8px); padding: 9px 12px; font: inherit; background: var(--kaart); color: var(--c-ink); } .bn-kanaal, .bn-schema { padding: 12px 16px; border-bottom: 1px solid var(--c-lijn); display: flex; flex-direction: column; gap: 4px; } .bn-kanaal.is-uit, .bn-schema.is-uit { opacity: .6; } .bn-kanaal em, .bn-schema em { color: var(--c-ink-2); font-style: normal; font-size: .85rem; } .bn-schema p { margin: 2px 0; font-size: .9rem; color: var(--c-ink-2); } .bn-schema__kop { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .bn-schema__acties { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; } .bn-run { display: grid; grid-template-columns: 130px 150px 1fr; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--c-lijn); font-size: .85rem; } .bn-push p { max-width: 70ch; } .bn-treffers { padding: 6px 0; } /* MS2/MS3 · context en bijlagen in het volle scherm */ .bn-ctx { font-size: .78rem; color: var(--c-ink-2); padding: 6px 10px; background: var(--c-paneel-2); border: 1px solid var(--c-lijn); border-radius: var(--radius-klein, 8px); margin: 6px 0; } .bn-bijlagen { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; } .bn-bijlagen img { width: 140px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-klein, 8px); display: block; } .bn-bestand { font-size: .78rem; padding: 4px 10px; border: 1px solid var(--c-lijn); border-radius: 99px; color: var(--c-ink); text-decoration: none; } /* ── berichten-paneel.css ── */ /* berichten-paneel.css — de messenger als half paneel (MS5, besluit 185): 620 px rechts op de desktop, vol scherm op de telefoon (< 720 px). Alleen tokens uit casa360-stijl.css; rust en snelheid, geen versiering (besluit 186). */ #casa-berichten { position: fixed; right: 24px; bottom: 22px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } #casa-berichten.is-veld { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); right: 14px; } .bp-toggle { position: relative; width: 52px; height: 52px; border-radius: 50%; border: var(--lijndikte) solid var(--nav-lijn); background: var(--nav); color: var(--nav-actief); font-size: 22px; cursor: pointer; box-shadow: var(--schaduw-zwevend); } .bp-toggle:focus-visible, .bp-kop__knop:focus-visible, .bp-rij:focus-visible, .bp-filter:focus-visible, .bp-knop:focus-visible, .bp-terug:focus-visible, .bp-link:focus-visible, .bp-duim:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } .bp-knop__badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 99px; background: var(--let); color: var(--knop-ink); font-size: .62rem; font-weight: 800; display: grid; place-items: center; padding: 0 5px; } .bp-paneel { order: 1; width: var(--bp-breedte, 620px); max-width: calc(100vw - 40px); height: min(760px, calc(100vh - 100px)); background: var(--kaart); border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius); box-shadow: var(--schaduw-laag); display: flex; flex-direction: column; overflow: hidden; } .bp-kop { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: var(--lijndikte) solid var(--lijn); background: var(--grijs); } .bp-kop__titel { font-weight: 800; font-size: .92rem; white-space: nowrap; } .bp-kop__titel small { font-weight: 500; color: var(--ink3); } .bp-zoek { flex: 1; min-width: 0; font: inherit; font-size: .8rem; padding: 6px 10px; border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-pill); background: var(--kaart); color: var(--ink); } .bp-zoek:focus-visible { outline: var(--focus-ring); } .bp-kop__knop { border: 0; background: transparent; font: inherit; font-size: .9rem; color: var(--ink2); cursor: pointer; padding: 4px 8px; text-decoration: none; border-radius: var(--radius-klein); } .bp-kop__knop:hover { background: var(--grijs2); color: var(--ink); } .bp-rek { flex: 1; } .bp-filters { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: var(--lijndikte) solid var(--lijn); flex-wrap: wrap; } .bp-filter { font: inherit; font-size: .7rem; font-weight: 700; padding: 4px 10px; color: var(--ink2); background: var(--kaart); border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein); cursor: pointer; } .bp-filter.is-actief { background: var(--accent); color: var(--knop-ink); border-color: var(--accent); } .bp-lijst { flex: 1; overflow: auto; display: flex; flex-direction: column; } .bp-treffers { padding: 6px 12px; border-bottom: var(--lijndikte) solid var(--lijn); display: flex; flex-direction: column; gap: 2px; } .bp-rij { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; text-align: left; border: 0; border-bottom: var(--lijndikte) solid var(--lijn); background: var(--kaart); font: inherit; color: var(--ink); padding: 9px 12px; cursor: pointer; } .bp-rij:hover { background: var(--accent-t2); } .bp-rij.is-actief { background: var(--accent-t); } .bp-rij__mid { display: flex; flex-direction: column; min-width: 0; gap: 1px; } .bp-rij__mid b { font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bp-rij__mid b small { font-weight: 500; color: var(--ink3); } .bp-rij__mid > span { font-size: .76rem; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bp-rij__tijd { font-size: .66rem; color: var(--ink3); } .bp-badge { background: var(--accent); color: var(--knop-ink); border-radius: var(--radius-pill); padding: 1px 8px; font-size: .68rem; font-weight: 700; } .bp-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--grijs2); color: var(--ink2); font-weight: 800; font-size: .78rem; } .bp-avatar.is-groep { background: var(--accent-t); color: var(--accent); } .bp-avatar.is-rapport { background: var(--nav); color: var(--nav-actief); } .bp-chip { display: inline-flex; align-items: center; gap: 4px; font-size: .64rem; font-weight: 700; color: var(--ink2); background: var(--grijs); border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-pill); padding: 1px 8px; font-style: normal; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bp-chip button { border: 0; background: transparent; font: inherit; font-size: .66rem; cursor: pointer; color: var(--ink3); padding: 0 2px; } .bp-leeg { padding: 24px 16px; color: var(--ink2); text-align: center; display: flex; flex-direction: column; gap: 6px; } .bp-leeg strong { color: var(--ink); } .bp-sub { font-size: .7rem; color: var(--ink3); } /* ---- gesprek ---- */ .bp-gkop { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: var(--lijndikte) solid var(--lijn); } .bp-gkop__mid { flex: 1; min-width: 0; display: flex; flex-direction: column; } .bp-gkop__mid b { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bp-gkop__mid span { font-size: .7rem; color: var(--ink3); } .bp-terug { border: var(--lijndikte) solid var(--lijn2); background: var(--kaart); border-radius: var(--radius-klein); font: inherit; cursor: pointer; padding: 4px 10px; color: var(--ink); min-width: 44px; min-height: 36px; } .bp-berichten { flex: 1; overflow: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--vlak); } .bp-dag { text-align: center; margin: 6px 0 2px; } .bp-dag span { font-size: .64rem; font-weight: 700; color: var(--ink3); background: var(--grijs2); border-radius: var(--radius-pill); padding: 2px 10px; } .bp-bericht { max-width: 84%; align-self: flex-start; background: var(--kaart); border: var(--lijndikte) solid var(--lijn); border-radius: 12px 12px 12px 4px; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--schaduw-kaart); } .bp-bericht.is-ik { align-self: flex-end; background: var(--accent-t); border-color: var(--lijn2); border-radius: 12px 12px 4px 12px; } .bp-bericht p { margin: 0; font-size: .86rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; } .bp-bericht__van { font-size: .66rem; font-weight: 800; color: var(--ink2); } .bp-bericht__voet { display: flex; align-items: center; gap: 8px; font-size: .64rem; color: var(--ink3); } .bp-citaat { margin: 0; padding: 4px 8px; border-left: 3px solid var(--lijn2); background: var(--grijs); border-radius: 4px; font-size: .74rem; color: var(--ink2); } .bp-ctx { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; background: var(--kaart); border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein); font-size: .76rem; } .bp-ctx.is-klein { padding: 6px 8px; font-size: .72rem; } .bp-ctx > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .bp-ctx b { font-size: .8rem; } .bp-ctx span { color: var(--ink2); } .bp-ctx__glyph { color: var(--accent); font-size: .9rem; } .bp-ctx__link { font-size: .7rem; font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; } .bp-fotos { display: grid; gap: 4px; grid-template-columns: repeat(1, minmax(0, 1fr)); } .bp-fotos.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bp-fotos.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bp-fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-klein); display: block; } .bp-bestand { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein); background: var(--kaart); color: var(--ink); text-decoration: none; font-size: .76rem; } .bp-bestand small { color: var(--ink3); margin-left: auto; } .bp-taak { font-size: .68rem; font-weight: 700; color: var(--let-d); } .bp-duim { border: var(--lijndikte) solid var(--lijn2); background: var(--kaart); border-radius: var(--radius-pill); padding: 1px 8px; cursor: pointer; font: inherit; font-size: .68rem; } .bp-duim.is-aan { border-color: var(--accent); background: var(--accent-t); } .bp-link { border: 0; background: transparent; font: inherit; font-size: .68rem; color: var(--ink2); cursor: pointer; padding: 0 2px; text-decoration: underline; } .bp-reacties { display: flex; flex-direction: column; gap: 2px; font-size: .74rem; border-top: 1px dashed var(--lijn); padding-top: 4px; } .bp-systeem { align-self: stretch; padding: 8px 12px; border-left: 3px solid var(--lijn2); background: var(--kaart); border-radius: var(--radius-klein); font-size: .78rem; display: flex; flex-direction: column; gap: 4px; } .bp-systeem.is-rapport { border-left-color: var(--accent); } .bp-systeem p { margin: 0; color: var(--ink2); } .bp-cijfers { display: flex; flex-wrap: wrap; gap: 6px; } .bp-cijfers span { display: inline-flex; flex-direction: column; padding: 4px 8px; background: var(--grijs); border-radius: var(--radius-klein); } .bp-cijfers small { font-size: .62rem; color: var(--ink3); } /* ---- invoer ---- */ .bp-invoer { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); border-top: var(--lijndikte) solid var(--lijn); background: var(--kaart); } .bp-invoer__rij { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .bp-invoer textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: .88rem; padding: 10px 12px; border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius); background: var(--kaart); color: var(--ink); resize: none; min-height: 44px; } .bp-invoer textarea:focus-visible { outline: var(--focus-ring); outline-offset: 1px; } .bp-invoer__knoppen { display: flex; align-items: center; gap: 4px; } .bp-knop { display: inline-grid; place-items: center; width: 40px; height: 40px; border: var(--lijndikte) solid var(--lijn2); background: var(--kaart); border-radius: var(--radius-klein); font: inherit; font-size: 1rem; color: var(--ink2); cursor: pointer; } .bp-knop:hover { border-color: var(--ink); color: var(--ink); } .bp-veld { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: var(--kaart); border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein); } .bp-veld select { font: inherit; font-size: .84rem; padding: 8px 10px; border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein); background: var(--kaart); color: var(--ink); } .bp-veld select:focus-visible { outline: var(--focus-ring); } @media (max-width: 720px) { #casa-berichten { right: 12px; bottom: 12px; } .bp-paneel { position: fixed; inset: 0; width: auto; max-width: none; height: auto; border-radius: 0; border: 0; padding-top: env(safe-area-inset-top, 0px); } .bp-kop { padding-top: calc(10px + env(safe-area-inset-top, 0px)); } .bp-bericht { max-width: 92%; } .bp-knop, .bp-terug { min-width: 44px; min-height: 44px; } } @media (prefers-reduced-motion: no-preference) { .bp-rij, .bp-filter, .bp-knop { transition: background-color var(--overgang), border-color var(--overgang); } } /* ── gripp.css ── */ /* gripp.css — Gripp-koppeling (G0–G6). Alleen tokens uit casa360-stijl.css. */ .gr { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; } .gr-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; } .gr-kop h1 { margin: 4px 0 4px; } .gr-kop p { margin: 0; color: var(--c-ink-2); max-width: 78ch; } .gr-stappen { padding: 4px 0; } .gr-stap { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--c-lijn); } .gr-stap:last-child { border-bottom: 0; } .gr-stap em { display: block; color: var(--c-ink-2); font-style: normal; font-size: .85rem; } .gr-run { display: grid; grid-template-columns: 130px 120px 1fr; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--c-lijn); font-size: .85rem; } .gr-run em { color: var(--c-ink-2); font-style: normal; } .gr-filters { display: flex; gap: 6px; } .gr-product { padding: 10px 16px; border-bottom: 1px solid var(--c-lijn); display: flex; flex-direction: column; gap: 4px; } .gr-product.is-klaar { background: var(--goed-t); } .gr-product__kop { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .gr-product__kop .mono { color: var(--c-ink-2); font-size: .8rem; } .gr-product__match { display: flex; gap: 8px; align-items: center; font-size: .9rem; } .gr-product__acties { display: flex; gap: 6px; flex-wrap: wrap; } .gr-fase { display: grid; grid-template-columns: 180px 1fr auto; gap: 10px; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--c-lijn); } .gr-fase em { color: var(--c-ink-2); font-style: normal; font-size: .82rem; } .gr-fase select { border: 1px solid var(--c-lijn-2); border-radius: var(--radius-klein, 8px); padding: 5px 8px; font: inherit; background: var(--kaart); color: var(--c-ink); } .gr-run.is-bezig { background: var(--let-t); } /* schermronde stap 1: een melding in een kaart krijgt binnenmarge */ .gr-meld { padding: 12px 16px; } /* ── buddee.css ── */ /* buddee.css — de overzetting uit Buddee. Bouwt op gripp.css (kop, stappen, runs); alleen tokens uit casa360-stijl.css. */ .bu-inlog { padding: 14px 16px; } .bu-velden { display: grid; grid-template-columns: repeat(2, minmax(0, 320px)); gap: 12px; margin-bottom: 8px; } .bu-akkoord { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: .85rem; color: var(--c-ink); } .bu-tabelkaart { overflow-x: auto; } .bu-tabel { width: 100%; border-collapse: collapse; font-size: .88rem; } .bu-tabel th, .bu-tabel td { text-align: right; padding: 8px 16px; border-bottom: 1px solid var(--c-lijn); } .bu-tabel th:first-child, .bu-tabel td:first-child { text-align: left; } .bu-tabel thead th { font: 600 .68rem var(--font-ui); color: var(--c-ink-2); } .bu-tabel tbody tr:last-child th, .bu-tabel tbody tr:last-child td { border-bottom: 0; } .bu-tabel tbody th { font-weight: 600; } .bu-regel { display: grid; grid-template-columns: 220px 1fr; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--c-lijn); font-size: .86rem; } .bu-regel:last-child { border-bottom: 0; } .bu-regel > span:only-child { grid-column: 1 / -1; } .bu-diag { padding: 12px 16px; } .bu-diag p { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px; } .bu-diag .chip b { margin-right: 4px; } .bu-wat { padding: 12px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; font-size: .88rem; } .bu-wat ul { margin: 6px 0 0; padding-left: 18px; } .bu-wat li { margin-bottom: 4px; } .bu-leeg { display: block; padding: 12px 16px; } .bu-voortgang { padding: 10px 16px 12px; border-bottom: 1px solid var(--c-lijn); font-size: .88rem; } .bu-voortgang label { display: block; margin-bottom: 6px; color: var(--c-ink-2); } .bu-voortgang label strong { color: var(--c-ink); } .bu-voortgang progress { display: block; width: 100%; height: 10px; accent-color: var(--goed); } .bu-voortgang p { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; } .bu-voortgang .chip b { margin-right: 4px; } @media (max-width: 900px) { .bu-velden, .bu-wat { grid-template-columns: 1fr; } .bu-regel { grid-template-columns: 1fr; } } .bu-waarom { display: block; margin: 4px 0 0 26px; font-style: normal; font-size: .8rem; color: var(--c-ink-2); } /* ── mutaties.css ── */ /* mutaties.css — Mutatielog en Salarisperiode. Alleen tokens uit casa360-stijl.css. */ .mu { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; } .mu-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; } .mu-kop h1 { margin: 4px 0; } .mu-kop p { margin: 0; color: var(--c-ink-2); max-width: 78ch; } .mu-meld { padding: 12px 16px; margin-bottom: 14px; } .mu-lijstkop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 10px; } .mu-telling { color: var(--c-ink-2); font-size: .8rem; margin-right: auto; } .mu-tabelkaart { overflow-x: auto; } .mu-tabel { width: 100%; border-collapse: collapse; font-size: .86rem; } .mu-tabel th, .mu-tabel td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--c-lijn); vertical-align: top; } .mu-tabel thead th { font: 600 .68rem var(--font-ui); color: var(--c-ink-2); white-space: nowrap; } .mu-tabel tbody th { font-weight: 600; } .mu-tabel td.mono { white-space: nowrap; } .mu-tabel tbody tr:last-child th, .mu-tabel tbody tr:last-child td { border-bottom: 0; } .mu-tabel small { display: block; color: var(--c-ink-2); font-weight: 400; font-size: .76rem; } .mu-tabel tr.is-weg td, .mu-tabel tr.is-weg th { color: var(--c-ink-3); } .mu-voetnoot { color: var(--c-ink-2); font-size: .82rem; max-width: 90ch; } .mu-maand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .mu-maand strong { min-width: 140px; text-align: center; font-size: 1rem; } .mu-stap { padding: 16px 18px; margin-top: 14px; } .mu-stap > header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; } .mu-stap > header h2 { margin: 0; font-size: 1.02rem; } .mu-stap > header p { margin: 2px 0 0; color: var(--c-ink-2); font-size: .84rem; max-width: 86ch; } .mu-stap > header > .chip { margin-left: auto; } .mu-stap__nr { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border: 1px solid var(--c-lijn-2); border-radius: var(--radius-klein); font-size: .8rem; color: var(--c-ink); } .mu-stap.is-klaar .mu-stap__nr { border-color: var(--goed); color: var(--goed); } .mu-groepen, .mu-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .mu-run { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--c-lijn); margin-top: 10px; font-size: .86rem; } .mu-run > div:first-child { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .mu-run__lijsten { display: flex; flex-wrap: wrap; gap: 8px 18px; } .mu-lijst { display: inline-flex; align-items: center; gap: 6px; } .mu-lijst small { color: var(--c-ink-2); } @media (max-width: 900px) { .mu { padding: 18px 16px 60px; } } /* mensenstart · Mensen › Overzicht (blok D) */ .ms-snel { display: flex; flex-wrap: wrap; gap: 8px; } .ms-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; } .ms-blok { padding: 14px 16px; } .ms-blok > header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; } .ms-blok > header h2 { margin: 0; font-size: 1rem; } .ms-blok > header h2 .mono { color: var(--c-ink-2); font-weight: 500; font-size: .86rem; } .ms-sub { font: 600 .68rem var(--font-ui); color: var(--c-ink-2); margin: 10px 0 2px; } .ms-rij { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--c-lijn); font-size: .88rem; } .ms-rij strong { min-width: 160px; } .ms-rij > span:last-child, .ms-rij > .chip:last-child { margin-left: auto; text-align: right; } .ms-rij span { color: var(--c-ink-2); } .ms-todo { display: grid; gap: 6px; } .ms-todo__rij { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--c-lijn); border-radius: var(--radius-klein); background: var(--kaart); color: var(--c-ink); font: inherit; text-align: left; cursor: pointer; transition: border-color 160ms; } .ms-todo__rij:hover { border-color: var(--c-lijn-2); } .ms-todo__rij:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .ms-todo__rij strong { min-width: 28px; font-size: 1rem; } .ms-todo__rij i { margin-left: auto; font-style: normal; color: var(--c-ink-2); } @media (max-width: 900px) { .ms-raster { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .ms-todo__rij { transition: none; } } a.ms-todo__rij { text-decoration: none; box-sizing: border-box; } /* LN2 · wat er in deze periode naar Exact Online gaat (alleen in een wereld met Exact als loonpakket) */ .mu-la { display: grid; gap: 10px; border-top: 1px solid var(--c-lijn); margin-top: 14px; padding-top: 14px; } .mu-la__kop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; } .mu-la__lijst { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: .86rem; } .mu-la__lijst li { padding: 6px 0; border-top: 1px solid var(--c-lijn); } .mu-la__fout { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } /* ── persdocs.css ── */ /* persdocs.css — Personeelsdocumenten (Mensen › Documenten en het tabblad in het dossier). Alleen tokens uit casa360-stijl.css. */ .pdx { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; } .pdx-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; } .pdx-kop h1 { margin: 4px 0; } .pdx-kop p { margin: 0; color: var(--c-ink-2); max-width: 78ch; } .pdx-meld { padding: 12px 16px; margin-bottom: 14px; } .pdx-lijstkop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 10px; } .pdx-telling { color: var(--c-ink-2); font-size: .8rem; margin-right: auto; } .pdx-vink { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--c-ink-2); cursor: pointer; } .pdx-vink input { margin: 0; } .pdx-vink[hidden], .bs-veld--vink[data-pdx-tekenrij][hidden] { display: none; } .pdx-tabelkaart { overflow-x: auto; } .pdx-tabel { width: 100%; border-collapse: collapse; font-size: .86rem; } .pdx-tabel th, .pdx-tabel td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--c-lijn); vertical-align: top; } .pdx-tabel thead th { font: 600 .68rem var(--font-ui); color: var(--c-ink-2); white-space: nowrap; } .pdx-tabel tbody th { font-weight: 600; white-space: nowrap; } .pdx-tabel td.mono { white-space: nowrap; } .pdx-tabel tbody tr { cursor: pointer; transition: background 160ms; } .pdx-tabel tbody tr:hover { background: var(--paneel); } .pdx-tabel tbody tr:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; } .pdx-tabel tbody tr:last-child th, .pdx-tabel tbody tr:last-child td { border-bottom: 0; } .pdx-tabel small { display: block; color: var(--c-ink-2); font-weight: 400; font-size: .76rem; } .pdx-tabel tr.is-weg td, .pdx-tabel tr.is-weg th { color: var(--c-ink-3); } .pdx-voetnoot { color: var(--c-ink-2); font-size: .82rem; max-width: 90ch; margin: 10px 0 0; } .pdx-blokkop { font: 600 .68rem var(--font-ui); color: var(--c-ink-2); margin: 16px 0 6px; } .pdx-kv { table-layout: fixed; width: 100%; } .pdx-kv td:first-child { width: 42%; color: var(--c-ink-2); } .pdx-kv td { overflow-wrap: anywhere; } .pdx-acties { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } /* het tabblad in het personeelsdossier */ .pdx-dossier { padding: 14px 16px; } .pdx-docs { display: flex; flex-direction: column; } .pdx-docrij { appearance: none; -webkit-appearance: none; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--c-lijn); background: none; font: inherit; color: var(--c-ink); text-align: left; cursor: pointer; transition: background 160ms; } .pdx-docrij:hover { background: var(--paneel); } .pdx-docrij:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; } .pdx-docrij:last-child { border-bottom: 0; } .pdx-docrij.is-weg { color: var(--c-ink-3); } .pdx-docrij__tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pdx-docrij__tekst strong { overflow-wrap: anywhere; } .pdx-docrij__tekst small { color: var(--c-ink-2); font-size: .78rem; } .pdx-docrij__stand { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; flex: none; } .pdx-leeg { color: var(--c-ink-2); margin: 6px 0; } .pdx-archief { margin-top: 10px; } .pdx-archief summary { cursor: pointer; color: var(--c-ink-2); font-size: .84rem; padding: 6px 0; } .pdx-archief summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .pdx-dossiervoet { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--c-lijn); } .pdx-dossiervoet .pdx-voetnoot { margin: 0; } @media (max-width: 900px) { .pdx { padding: 18px 16px 60px; } } @media (prefers-reduced-motion: reduce) { .pdx-tabel tbody tr, .pdx-docrij { transition: none; } } /* salaris in de persoonskaart en het dossier (salaris.js) */ .sal-blok { padding: 14px 16px; } .sal-nu { display: flex; flex-direction: column; gap: 2px; } .sal-nu strong { font-size: 1.15rem; } .sal-nu small, .sal-rij small { color: var(--c-ink-2); font-size: .78rem; } .sal-leeg { color: var(--c-ink-2); margin: 0; } .sal-historie { margin-top: 10px; } .sal-historie summary { cursor: pointer; color: var(--c-ink-2); font-size: .84rem; padding: 6px 0; } .sal-historie summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .sal-rij { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--c-lijn); } .sal-rij:last-child { border-bottom: 0; } .sal-rij.is-weg { color: var(--c-ink-3); } .sal-rij__tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sal-voet { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--c-lijn); } .sal-noot { color: var(--c-ink-2); font-size: .8rem; max-width: 52ch; } /* het indienstformulier in de persoonskaart (indienst.js) */ .ind-blok { padding: 14px 16px; } .ind-stand { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .9rem; } .ind-noot { color: var(--c-ink-2); font-size: .8rem; max-width: 60ch; margin: 8px 0 0; } .ind-voet { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--c-lijn); } .ind-voet .ind-noot { margin: 0; } .ind-knoppen { display: flex; gap: 8px; flex-wrap: wrap; } /* het contract uit een sjabloon: het voorbeeld en de knoppen in de voet van het documentenblok */ .pdx-acties--voet { margin-top: 0; } .pdx-voorbeeld { margin: 6px 0 0; padding: 14px 16px; max-height: 320px; overflow: auto; white-space: pre-wrap; font: .8rem/1.5 var(--font-ui); color: var(--c-ink); background: var(--paneel); border: 1px solid var(--c-lijn); border-radius: var(--radius-klein); } .pdx-voorbeeld:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .bs-form .bs-veld[hidden], .bs-form [data-ct-voorbeeld][hidden] { display: none; } /* ── organisatie.css ── */ /* organisatie.css — Mensen › Organisatie en de agendalink voor verlof. Alleen tokens uit casa360-stijl.css. */ .org { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; } .org-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; } .org-kop h1 { margin: 4px 0; } .org-kop p { margin: 0; color: var(--c-ink-2); max-width: 78ch; } .org-meld { padding: 12px 16px; margin-bottom: 14px; } .org-signalen { padding: 14px 16px; margin: 14px 0; display: flex; flex-direction: column; gap: 8px; } .org-signaal { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .88rem; } .org-signaal > span:nth-child(2) { flex: 1 1 260px; } .org-balk { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 16px 0 10px; } .org-zoek { display: flex; flex-direction: column; gap: 4px; flex: 1 1 260px; max-width: 420px; } .org-zoek > span { font: 600 .68rem var(--font-ui); color: var(--c-ink-2); } .org-zoek input { font: inherit; padding: 9px 12px; border: 1px solid var(--c-lijn-2); border-radius: var(--radius-klein); background: var(--kaart); color: var(--c-ink); } .org-zoek input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .org-keuze { display: flex; gap: 6px; flex-wrap: wrap; margin-right: auto; } .org-kaart { padding: 8px 14px; overflow-x: auto; } .org-boom { list-style: none; margin: 0; padding: 0 0 0 26px; } .org-boom--top { padding-left: 0; } .org-boom .org-boom { border-left: 1px solid var(--c-lijn); margin-left: 11px; } .org-rij { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--c-lijn); min-width: 0; } .org-boom--top > .org-knoop:last-child > .org-rij:only-child { border-bottom: 0; } .org-knoop.is-ik > .org-rij { background: var(--paneel); } .org-klap { appearance: none; -webkit-appearance: none; flex: none; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--c-lijn-2); border-radius: var(--radius-klein); background: var(--kaart); color: var(--c-ink); font: inherit; font-size: .8rem; line-height: 1; cursor: pointer; padding: 0; } .org-klap:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .org-klap:disabled { cursor: default; color: var(--c-ink-3); } .org-klap--leeg { border-color: transparent; background: none; color: var(--c-ink-3); cursor: default; } .org-wie { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; } .org-wie strong { overflow-wrap: anywhere; } .org-wie small { color: var(--c-ink-2); font-size: .78rem; } .org-tel { color: var(--c-ink-2); font-size: .76rem; white-space: nowrap; } .org-afdelingen { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; align-items: start; } .org-afd { padding: 14px 16px; } .org-afd > header h2 { margin: 0 0 6px; font-size: 1rem; } .org-afd > header h2 .mono { color: var(--c-ink-2); font-weight: 500; font-size: .86rem; } .org-lid { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--c-lijn); } .org-lid:last-child { border-bottom: 0; } .org-lid.is-ik strong::after { content: " · jij"; font-weight: 400; color: var(--c-ink-2); } .org-lid__lijn { color: var(--c-ink-2); font-size: .8rem; text-align: right; flex: none; max-width: 45%; overflow-wrap: anywhere; } .org-voetnoot { color: var(--c-ink-2); font-size: .82rem; max-width: 90ch; margin: 12px 0 0; } /* «Lijn wijzigen» staat op elke rij; met een muis verschijnt hij pas op de rij waar je bent, met het toetsenbord zodra hij focus heeft */ @media (hover: hover) { .org-rij [data-org-lijn] { opacity: 0; transition: opacity 160ms; } .org-rij:hover [data-org-lijn], .org-rij:focus-within [data-org-lijn] { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .org-rij [data-org-lijn] { transition: none; } } /* de agendalink voor verlof (kalenderabo.js) */ .kabo-link { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; } .kabo-link input { flex: 1 1 240px; min-width: 0; font: .8rem var(--font-mono); padding: 9px 12px; border: 1px solid var(--c-lijn-2); border-radius: var(--radius-klein); background: var(--paneel); color: var(--c-ink); } .kabo-link input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .kabo-uitleg { color: var(--c-ink-2); font-size: .86rem; margin: 0; } .kabo-stappen { margin: 0; padding-left: 20px; color: var(--c-ink); font-size: .88rem; display: flex; flex-direction: column; gap: 4px; } @media (max-width: 900px) { .org { padding: 18px 16px 60px; } .org-rij { flex-wrap: wrap; } } /* ── mijndag.css ── */ /* mijndag.css — Vandaag-verdieping: signalen · dagboog · meldingen (E6) */ .md-pagina { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; } .md-h1 { margin: 2px 0 12px; } .md-sub { font-size: 11.5px; color: var(--c-ink-2); } .md-uitleg { font-size: 12.5px; color: var(--c-ink-2); line-height: 1.5; margin: 8px 0; } .md-kaart { padding: 0 0 6px; overflow: hidden; margin-bottom: 14px; } .md-kaart__kop { padding: 16px 18px 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .md-acties { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .md-check { display: flex; gap: 8px; align-items: center; font-size: 12.5px; cursor: pointer; } .md-regels { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; } /* signalen */ .md-sigrij { display: grid; grid-template-columns: 34px 1.8fr auto auto auto; gap: 12px; align-items: center; padding: 11px 18px; border-top: 1px solid var(--c-lijn); } .md-sigrij.is-stil { opacity: .55; } .md-sigrij__icoon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; border: 1px solid var(--c-lijn); } .md-sigrij.is-rood .md-sigrij__icoon { color: var(--c-rood); border-color: var(--c-rood); } .md-sigrij.is-amber .md-sigrij__icoon { color: var(--c-amber); border-color: var(--c-amber); } .md-sigrij.is-groen .md-sigrij__icoon { color: var(--c-groen-d); border-color: var(--c-groen); } .md-sigrij__tekst { border: 0; background: none; font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; color: var(--c-ink); padding: 0; } .md-sigrij__tekst:hover { text-decoration: underline; } .md-sigrij__bron { font-size: 11px; color: var(--c-ink-2); } .md-sigrij__acties { display: flex; gap: 6px; } /* dagboog */ .md-tweekolom { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; align-items: start; } @media (max-width: 980px) { .md-tweekolom { grid-template-columns: 1fr; } } .md-kolomrechts { display: flex; flex-direction: column; gap: 14px; } .md-boog { padding: 4px 18px 12px; position: relative; } .md-boogrij { display: grid; grid-template-columns: 52px 14px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; position: relative; } .md-boogrij__tijd { font-size: 11px; color: var(--c-ink-2); } .md-boogrij__stip { width: 10px; height: 10px; border-radius: 50%; background: var(--c-paneel); border: 2px solid var(--c-lijn-2, var(--c-lijn)); justify-self: center; } .md-boogrij.is-taak .md-boogrij__stip { border-color: var(--c-groen-d); } .md-boogrij.is-afspraak .md-boogrij__stip { border-color: var(--c-terra); } .md-boogrij::before { content: ""; position: absolute; left: 62px; top: 0; bottom: 0; width: 2px; background: var(--c-lijn); z-index: 0; } .md-boogrij__stip { position: relative; z-index: 1; } .md-boogrij:first-child::before { top: 50%; } .md-boogrij:last-child::before { bottom: 50%; } .md-boogrij__titel { border: 0; background: none; font: inherit; font-size: 13px; text-align: left; color: var(--c-ink); padding: 0; } button.md-boogrij__titel { cursor: pointer; font-weight: 600; } button.md-boogrij__titel:hover { text-decoration: underline; } .md-doelen { padding: 4px 18px 12px; display: flex; flex-direction: column; gap: 12px; } .md-doelrij { display: flex; flex-direction: column; gap: 6px; } .md-doelrij.is-klaar { opacity: .6; } .md-doelrij__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; } .md-voortgang { height: 8px; border-radius: 99px; background: var(--c-creme); border: 1px solid var(--c-lijn); overflow: hidden; } .md-voortgang span { display: block; height: 100%; background: var(--c-groen-d); border-radius: 99px; transition: width 160ms; } @media (prefers-reduced-motion: reduce) { .md-voortgang span { transition: none; } } .md-doelrij__acties { display: flex; gap: 6px; } .md-memo { background: var(--c-memo); } .md-memo .md-kaart__kop { padding-bottom: 6px; } .md-memo__veld { margin: 0 18px 10px; min-height: 84px; border: 1px solid color-mix(in srgb, var(--c-ink) 14%, transparent); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 12.5px; background: color-mix(in srgb, var(--c-paneel) 55%, transparent); color: var(--c-ink); resize: vertical; } .md-memo .btn { margin: 0 18px 14px; align-self: flex-start; } .md-memo { display: flex; flex-direction: column; } /* meldingen */ .md-meldrij { display: grid; grid-template-columns: 64px auto 1fr auto; gap: 12px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--c-lijn); } .md-meldrij.is-gelezen { opacity: .6; } .md-meldrij:not(.is-gelezen) .md-meldrij__tekst { font-weight: 700; } .md-meldrij__tijd { font-size: 11px; color: var(--c-ink-2); } .md-meldrij__tekst { border: 0; background: none; font: inherit; font-size: 13px; text-align: left; cursor: pointer; color: var(--c-ink); padding: 0; } .md-meldrij__tekst:hover { text-decoration: underline; } .md-voorkeurrij { display: grid; grid-template-columns: 110px repeat(3, auto); gap: 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--c-lijn); font-size: 13px; } /* E6 a/b/c · Vandaag-laag (KPI-strip, briefing, geaggregeerde taken) */ .vt-stripwrap { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 12px; } .vt-stripwrap .bs-stats { flex: 1; margin: 0; } .vt-mini { border: 1px solid var(--c-lijn); border-radius: 9px; background: var(--c-paneel); font: inherit; font-size: 12px; padding: 3px 8px; cursor: pointer; color: var(--c-ink-2); } .vt-mini:hover { color: var(--c-groen-d); border-color: var(--c-groen-d); } .vt-mini[disabled] { opacity: .4; cursor: default; } .vt-stripcfg { margin-top: 4px; } .vt-briefing { padding: 14px 18px 10px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 2px; } .vt-briefregel { display: flex; gap: 10px; align-items: baseline; width: 100%; border: 0; background: none; font: inherit; font-size: 13.5px; text-align: left; padding: 7px 2px; cursor: pointer; color: var(--c-ink); border-top: 1px solid var(--c-lijn); } .vt-briefing .vt-briefregel:first-of-type { border-top: 0; } .vt-briefregel:hover strong { color: var(--c-groen-d); } .vt-briefregel__glyph { flex: none; width: 20px; text-align: center; color: var(--c-groen-d); } .vt-briefregel__pijl { margin-left: auto; color: var(--c-ink-2); } .vt-briefregel span:nth-child(2) { line-height: 1.45; } .vt-taak--snooze { opacity: .6; } .vt-snoozetag { font-size: 10px; color: var(--c-amber); font-weight: 700; } .vt-snoozekop { display: block; width: 100%; border: 0; background: none; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--c-ink-2); text-align: left; padding: 10px 16px; cursor: pointer; border-top: 1px solid var(--c-lijn); } .vt-snoozekop:hover { color: var(--c-groen-d); } .vt-wegtag { font-size: 11px; color: var(--c-ink-2); padding: 10px 16px; border-top: 1px solid var(--c-lijn); } .vt-kpirij { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--c-lijn); font-size: 13px; } .vt-kpirij__acties { display: flex; gap: 4px; } /* Schermronde stap 3 (29-09) · meldingen: bundels, een actie per regel, en ingebed in het startscherm */ .md-meldrij { grid-template-columns: 84px 92px minmax(0, 1fr) auto; } .md-meldrij:first-child { border-top: 0; } .md-meldrij .chip { justify-self: start; } .md-meldrij--in { padding-left: 34px; background: var(--c-paneel); } .md-meldrij__tekst:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } .md-bundel__acties { display: flex; gap: 6px; } .md-meldbalk { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; min-height: 30px; } .md-pagina--ingebed { max-width: none; margin: 0; padding: 0; } /* ── mijnwerk.css ── */ /* ===================================================================== mijnwerk.css — Mijn werk (R1 bouwplan, EPIC 1). Uitsluitend tokens uit casa360-tokens.css; diepte via de vaste laag. ===================================================================== */ .mw { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; } .mw .mw-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .mw .mw-kop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; } .mw .mw-kop p { margin: 0; max-width: 72ch; color: var(--c-ink-2); font-size: .82rem; line-height: 1.5; } .mw .mw-kopacties { display: flex; align-items: center; gap: 12px; flex: none; } .mw .mw-kopacties .bs-toestand { padding: 0; } .mw .mw-vers { font-size: .66rem; color: var(--c-ink-3); } /* balk: tabs · scope · filter · bulk */ .mw .mw-balk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .mw .mw-tabs { display: flex; gap: 4px; padding: 4px; background: var(--c-paneel); border-radius: var(--radius); } .mw .mw-tab { border: var(--lijndikte) solid transparent; background: none; border-radius: 9px; padding: 7px 14px; font: 700 .76rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; } .mw .mw-tab.is-actief { background: var(--kaart); border-color: var(--c-lijn); color: var(--c-ink); } .mw .mw-scope { display: flex; gap: 4px; align-items: center; } .mw .mw-scopeknop { border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); border-radius: var(--radius-klein); padding: 6px 13px; font: 700 .72rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; } .mw .mw-scopeknop.is-actief { border-color: var(--c-groen); background: var(--c-groen-t); color: var(--c-ink); } .mw .mw-scope select { border: var(--lijndikte) solid var(--c-lijn); border-radius: 10px; padding: 6px 9px; font: 600 .74rem var(--font-ui); background: var(--kaart); color: var(--c-ink); } /* takenlijst */ .mw .mw-rij { display: grid; grid-template-columns: 24px 32px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 14px; border-top: var(--lijndikte) solid var(--c-lijn); cursor: pointer; transition: background var(--overgang); } .mw .mw-rij:first-child { border-top: 0; } .mw .mw-rij:hover { background: var(--c-creme); } .mw .mw-rij.is-actief { background: var(--c-groen-t); } .mw .mw-rij.is-telaat { border-left: 3px solid var(--c-rood); } .mw .mw-rij:focus-visible { outline: var(--focus-ring); outline-offset: -2px; } .mw .mw-kies { display: inline-flex; } .mw .mw-kies input { width: 16px; height: 16px; accent-color: var(--c-groen-d); } .mw .mw-glyph { width: 28px; height: 28px; flex: none; border-radius: 9px; font-style: normal; background: var(--c-paneel); color: var(--c-ink-2); display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; } .mw .mw-glyph.is-hoog { background: var(--c-terra-t); color: var(--c-terra-d); } .mw .mw-rij__wat { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .mw .mw-rij__wat strong { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mw .mw-rij__wat span { font-size: .7rem; color: var(--c-ink-3); } /* drawer-delen */ .mw .mw-deel { display: flex; flex-direction: column; gap: 6px; border-top: var(--lijndikte) solid var(--c-lijn); padding: 12px 0; } .mw .mw-deel:first-of-type { border-top: 0; } .mw .mw-tekst { margin: 0; font-size: .8rem; color: var(--c-ink-2); line-height: 1.55; } .mw .mw-context { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: .78rem; } .mw .mw-voetnoot { font-size: .72rem; color: var(--c-ink-3); line-height: 1.5; } @media (max-width: 900px) { .mw { padding: 18px 14px 60px; } .mw .mw-rij { grid-template-columns: auto 1fr auto; } .mw .mw-kies, .mw .mw-rij > button { display: none; } } /* ─── B4 (QUERY-HYGIENE §4) · doorladen ────────────────────────────── De wachtrij was stil begrensd op 400 van 1.011. De regel staat onder de lijst omdat je hem daar tegenkomt: op het moment dat je denkt alles gezien te hebben. */ .mw .mw-meer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-top: var(--lijndikte) solid var(--c-lijn); } .mw .mw-meer .mono { font-size: .74rem; color: var(--c-ink-3); } /* ─── Schermronde stap 3 (29-09) · het voorvoegsel mw- is ook van Maatwerkvelden ───────── Daardoor kregen de rijen hier een eerste kolom van 1fr en stond de titel rechts. Alles hierboven staat nu onder de wortel .mw; wat maatwerkvelden.css zet en wij niet, gaat hier uit. */ .mw .mw-rij { border-bottom: 0; } .mw .mw-tabs { border-bottom: 0; margin: 0; flex-wrap: nowrap; } .mw .mw-tab { border-bottom: var(--lijndikte) solid transparent; } .mw .mw-tab.is-actief { border-bottom-color: var(--c-lijn); font-weight: 700; } .mw .mw-kop { margin-bottom: 0; } .mw .mw-balk { margin-bottom: 0; } /* groepen per soort: eerst het aantal, dan pas de rijen */ .mw .mw-groep { border-top: var(--lijndikte) solid var(--c-lijn); } .mw .mw-groep:first-child { border-top: 0; } .mw .mw-groepkop { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto 20px; gap: 12px; align-items: center; width: 100%; padding: 12px 14px; border: 0; background: none; font: inherit; color: var(--c-ink); text-align: left; cursor: pointer; transition: background 160ms; } .mw .mw-groepkop:hover { background: var(--c-creme); } .mw .mw-groepkop:focus-visible { outline: var(--focus-ring); outline-offset: -2px; } .mw .mw-groepkop strong { font-size: .86rem; } .mw .mw-groepkop em { font-style: normal; font-size: .72rem; color: var(--c-ink-3); } .mw .mw-groepkop .mw-aantal { font-size: .9rem; font-weight: 700; } .mw .mw-groepkop .mw-pijl { color: var(--c-ink-3); transition: transform 160ms; } .mw .mw-groep.is-open .mw-pijl { transform: rotate(90deg); } .mw .mw-groep.is-open .mw-groepkop { background: var(--c-paneel); } .mw .mw-telaat { color: var(--stop); font-weight: 700; } .mw .mw-groepmeer { display: flex; justify-content: center; padding: 8px 14px; border-top: var(--lijndikte) solid var(--c-lijn); } @media (prefers-reduced-motion: reduce) { .mw .mw-groepkop, .mw .mw-groepkop .mw-pijl { transition: none; } } /* ingebed in het startscherm: de pagina is van Vandaag, niet van de module */ .mw.mw--ingebed { max-width: none; margin: 0; padding: 0; } /* ── uitvoerders.css ── */ /* ===================================================================== uitvoerders.css — Module 2.5 · Uitvoerdersbeheer. Master-detail: partnerlijst links, compliance-dossier rechts (verificatie, certs, WKA + G-rekening, tarieven, scores, lifecycle). Tokens + bouwstenen. ===================================================================== */ /* Module-wortel: zelfde pagina-marge als de overige modules (fix 14-07-2026) */ .uv { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; } .uv-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 14px; } @media (max-width: 1000px) { .uv-grid { grid-template-columns: 1fr; } } /* banners */ .uv-banner { display: flex; align-items: center; gap: 11px; padding: 13px 18px; border-radius: 13px; font-size: .82rem; font-weight: 600; margin-bottom: 14px; border: var(--lijndikte) solid var(--c-lijn); } .uv-banner--her { background: var(--c-amber-t); border-color: var(--c-amber); color: var(--c-amber); } .uv-banner--ok { background: var(--c-groen-t); border-color: var(--c-groen); color: var(--c-groen-d); } .uv-banner--blok { background: var(--c-rood-t); border-color: var(--c-rood); color: var(--c-rood); } .uv-banner--klein { margin-bottom: 0; font-size: .78rem; } .uv-banner__ic { width: 26px; height: 26px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem; color: var(--knop-ink); background: var(--c-groen-d); } .uv-banner__ic--rood { background: var(--c-rood); } .uv-banner__ic--amber { background: var(--c-amber); } /* lijst links */ .uv-lijst { padding: 0 0 4px; overflow: hidden; } .uv-lijst__kop { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .uv-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 12px 14px; border: 0; border-top: var(--lijndikte) solid var(--c-lijn); background: transparent; cursor: pointer; font-family: var(--font-ui); transition: background var(--overgang); } .uv-item:first-of-type { border-top: 0; } .uv-item:hover { background: var(--c-creme); } .uv-item.is-actief { background: var(--c-groen-t); } .uv-item__tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; } .uv-item__tekst strong { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .uv-item__tekst span { font-size: .68rem; color: var(--c-ink-3); } .uv-avatar { width: 38px; height: 38px; border-radius: 11px; background: var(--donker, var(--c-ink)); color: var(--knop-ink); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .74rem; flex: none; } .uv-avatar--groot { width: 46px; height: 46px; border-radius: 13px; font-size: .88rem; } .uv-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .uv-dot--groen { background: var(--c-groen); } .uv-dot--amber { background: var(--c-amber); } .uv-dot--rood { background: var(--c-rood); } /* nieuw-formulier */ .uv-nieuw { border: 1.5px dashed var(--c-lijn-2); border-radius: 16px; background: var(--c-creme); padding: 20px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 9px; } .uv-nieuw strong { font-size: .88rem; } .uv-nieuw__sub { font-size: .74rem; color: var(--c-ink-3); margin: 0 0 4px; } .uv-nieuw__rij { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .uv-veld { display: flex; flex-direction: column; gap: 4px; } /* detail */ .uv-detail { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .uv-kaart { padding: 18px 20px; } .uv-kaart__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .uv-kaart__kop strong { font-size: .9rem; } .uv-sub { font-size: .76rem; line-height: 1.55; color: var(--c-ink-3); margin: 0 0 12px; } .uv-kaart__kop + .uv-sub { margin-top: -6px; } .uv-kop { display: flex; align-items: center; gap: 14px; } .uv-kop__tekst { flex: 1; min-width: 0; } .uv-kop__naam { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .uv-kop__naam strong { font-size: 1.1rem; } .uv-kop__sub { font-size: .76rem; color: var(--c-ink-3); } .uv-verif { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; } .uv-verif .kicker { display: block; margin-bottom: 5px; } .uv-verif__w { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .82rem; font-weight: 600; } .uv-trij { display: grid; grid-template-columns: 1.6fr 1fr .8fr 1.1fr; gap: 10px; align-items: center; padding: 10px 0; border-top: var(--lijndikte) solid var(--c-lijn); } .uv-trij--kop { border-top: 0; padding: 0 0 8px; font-size: .56rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); } .uv-trij--doc { grid-template-columns: 1.8fr .8fr .9fr 1fr; } .uv-trij--tarief { grid-template-columns: 1.6fr .9fr .8fr .9fr; } .uv-trij__naam { font-weight: 700; font-size: .8rem; } .uv-trij__nr { font-size: .7rem; color: var(--c-ink-3); } .uv-trij__tot { font-size: .76rem; color: var(--c-ink-2); } .uv-trij__type { font-size: .72rem; color: var(--c-ink-3); text-transform: capitalize; } .uv-trij .chip { justify-self: start; } .uv-artlink { font-size: .64rem; } .uv-fact { display: flex; gap: 10px; margin-bottom: 11px; } .uv-fact__optie { flex: 1; padding: 11px 14px; border-radius: 11px; cursor: pointer; text-align: center; font-family: var(--font-ui); font-size: .8rem; font-weight: 700; border: 1.5px solid var(--c-lijn-2); color: var(--c-ink-2); background: var(--kaart); transition: background var(--overgang); } .uv-fact__optie span { display: block; font-size: .64rem; font-weight: 500; opacity: .75; margin-top: 2px; } .uv-fact__optie.is-actief { border-color: var(--c-groen-d); background: var(--c-groen-d); color: var(--knop-ink); } .uv-hint { font-size: .76rem; line-height: 1.55; color: var(--c-ink-2); padding: 11px 14px; border-radius: 10px; background: var(--c-paneel); } .uv-wka { display: flex; align-items: flex-start; gap: 11px; padding: 6px 0; } .uv-wka__ic { width: 20px; height: 20px; border-radius: 6px; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .68rem; color: var(--knop-ink); background: var(--c-rood); } .uv-wka.is-ok .uv-wka__ic { background: var(--c-groen); } .uv-wka strong { display: block; font-size: .8rem; } .uv-wka span:not(.uv-wka__ic) { font-size: .7rem; color: var(--c-ink-3); } .uv-grek { margin-top: 15px; padding: 14px 16px; border-radius: 12px; background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-amber); } .uv-grek .kicker { display: block; color: var(--c-amber); margin-bottom: 8px; } .uv-grek__vlakken { display: flex; gap: 10px; flex-wrap: wrap; } .uv-grek__vak { flex: 1; min-width: 130px; padding: 10px 13px; border-radius: 10px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); } .uv-grek__vak span { display: block; font-size: .68rem; color: var(--c-ink-3); } .uv-grek__g { font-size: 1.05rem; color: var(--c-amber); } .uv-grek__rest { font-size: 1.05rem; color: var(--c-groen-d); } .uv-grek__nr { display: block; font-size: .7rem; color: var(--c-ink-2); margin-top: 8px; } .uv-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; } .uv-postcodes { display: flex; flex-wrap: wrap; gap: 7px; } .uv-pc { font-size: .72rem; font-weight: 600; color: var(--c-ink); background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); padding: 5px 10px; border-radius: 8px; } .uv-max { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 10px; background: var(--c-paneel); margin-top: 8px; font-size: .78rem; color: var(--c-ink-2); } .uv-max:first-of-type { margin-top: 0; } .uv-max strong { font-size: .88rem; color: var(--c-ink); } .uv-teams { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; } .uv-team { display: inline-flex; flex-direction: column; padding: 8px 13px; border-radius: 11px; background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); } .uv-team strong { font-size: .76rem; } .uv-team span { font-size: .64rem; color: var(--c-ink-3); } .uv-team--plus { padding: 9px 13px; border-radius: 11px; border: 1.5px dashed var(--c-lijn-2); background: transparent; font-family: var(--font-ui); font-size: .74rem; font-weight: 700; color: var(--c-groen-d); cursor: pointer; } .uv-tarief { display: flex; align-items: center; gap: 4px; font-size: .72rem; color: var(--c-ink-3); } .uv-tarief input { width: 76px; padding: 7px 9px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; font-family: var(--font-mono); font-size: .74rem; color: var(--c-ink); background: var(--kaart); } .uv-scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; align-items: end; } .uv-score__kop { display: flex; justify-content: space-between; font-size: .74rem; color: var(--c-ink-2); margin-bottom: 5px; } .uv-balk { height: 8px; border-radius: 99px; background: var(--c-paneel); overflow: hidden; } .uv-balk i { display: block; height: 100%; border-radius: 99px; background: var(--c-groen); } .uv-klachten { padding: 11px 14px; border-radius: 11px; background: var(--c-terra-t); border: var(--lijndikte) solid var(--c-terra); } .uv-klachten span { display: block; font-size: .7rem; color: var(--c-terra-d); } .uv-klachten strong { font-size: 1.3rem; color: var(--c-terra-d); } .uv-life { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; } .uv-info { padding: 20px 22px; border-radius: 16px; background: var(--donker, var(--c-ink)); color: var(--knop-ink); } .uv-info__kicker { color: rgba(255, 255, 255, .75); } .uv-info p { font-size: .84rem; line-height: 1.65; color: rgba(255, 255, 255, .8); max-width: 820px; margin: 9px 0 0; } .uv-info strong { color: var(--knop-ink); } /* ---- 2.5b · inline bewerken, wizard en contracten ---- */ .uv-kaart__acties { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .uv-bewerk__voet { display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: var(--lijndikte) solid var(--c-lijn); } .uv-select { appearance: auto; } .uv-trij--bewerk { grid-template-columns: 1.6fr 1fr .8fr 1.1fr; gap: 8px; padding: 6px 0; } .uv-trij--team, .uv-trij--team.uv-trij--bewerk { grid-template-columns: 1.2fr 1.2fr .6fr; } .uv-rijplus { margin-top: 10px; } .uv-pc__x { border: 0; background: transparent; cursor: pointer; font-size: .62rem; color: var(--c-terra-d); padding: 0 0 0 4px; } .uv-wiz { border-style: solid; border-color: var(--c-groen); background: var(--c-groen-t); } .uv-wiz__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .uv-wiz__kop strong { font-size: .92rem; } .uv-wiz__stappen { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 6px; } .uv-wiz__stap { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 9px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); cursor: pointer; font-family: var(--font-ui); font-size: .72rem; font-weight: 600; color: var(--c-ink-2); } .uv-wiz__stap.is-actief { border-color: var(--c-ink); background: var(--donker, var(--c-ink)); color: var(--knop-ink); } .uv-wiz__stap .mono { font-size: .64rem; font-weight: 700; } .uv-wiz__stap.is-klaar:not(.is-actief) { border-color: var(--c-groen); color: var(--c-groen-d); } .uv-wiz__inhoud { display: flex; flex-direction: column; gap: 9px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: 13px; padding: 16px; } .uv-wiz__types { display: flex; gap: 7px; } .uv-wiz__vink { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--c-ink); cursor: pointer; } .uv-wiz__vink input { width: 16px; height: 16px; accent-color: var(--c-groen); } .uv-wiz__tarieven { display: flex; flex-direction: column; gap: 7px; } .uv-wiz__tarief { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .uv-wiz__voet { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .uv-wiz__status { flex: 1; min-width: 200px; font-size: .72rem; color: var(--c-ink-2); } .uv-trij--ct { grid-template-columns: 1.4fr 1fr .7fr .9fr auto; } .uv-trij__acties-ct { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; } .uv-ctnieuw { display: flex; align-items: flex-end; gap: 9px; margin-top: 12px; padding-top: 12px; border-top: var(--lijndikte) solid var(--c-lijn); flex-wrap: wrap; } .uv-ctnieuw__keuze { flex: 1; min-width: 220px; } .uv-ct__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .uv-ct__kop h2 { margin: 3px 0 0; font-size: 1.05rem; } .uv-ct__voet { display: flex; align-items: center; gap: 9px; margin-top: 14px; padding-top: 12px; border-top: var(--lijndikte) solid var(--c-lijn); flex-wrap: wrap; } /* Kwaliteits-scorecard (C5a) + partner-forecast (C5c) */ .uv-scoresub { font-size: 12px; color: var(--c-ink-2); margin: 0 0 8px; } .uv-scorerij { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--c-lijn); font-size: 13px; } .uv-scorerij:last-child { border-bottom: 0; } .uv-scorerij--kop { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-2); } .uv-scorerij em { display: block; font-style: normal; font-size: 11.5px; color: var(--c-ink-2); } .uv-fcrij { display: grid; grid-template-columns: .8fr 1.2fr 1fr 1fr auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--c-lijn); font-size: 12.5px; } .uv-fcrij:last-child { border-bottom: 0; } .uv-fcrij--kop { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-2); } /* Klantreviews (uitbreiding 4): registratie-rij in het dossier */ .uv-revform { display: flex; gap: 8px; margin-top: 10px; } .uv-revform select, .uv-revform input { border: 1px solid var(--c-lijn-2); border-radius: 9px; padding: 7px 10px; font: 500 12.5px var(--font-ui); color: var(--c-ink); background: var(--kaart); } .uv-revform input { flex: 1; min-width: 0; } /* Prestatie uit de uitvoering (FT-3.4) — naast de klantreviews telt hoe compleet de dossiers binnenkomen; dat is directe werkvoorbereidingstijd. */ .uv-prest { display: flex; flex-wrap: wrap; gap: 10px; } .uv-prest__cel { flex: 1; min-width: 118px; padding: 12px 14px; border-radius: var(--radius); background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); } .uv-prest__cel strong { display: block; font-size: 1.15rem; letter-spacing: -.02em; } .uv-prest__cel span { display: block; margin-top: 3px; font-size: .68rem; color: var(--c-ink-3); } .uv-groen { color: var(--c-groen-d); } .uv-amber { color: var(--c-amber); } .uv-rood { color: var(--c-rood); } .uv-sub--let { color: var(--c-amber); margin: 12px 0 0; } .uv-banner--let { background: var(--c-amber-t); border-color: var(--c-amber); color: var(--c-amber); } /* ===================================================================== UV3 · register en dossier op echte data (bouwspec Uitvoerders §2). Vormtaal uit het beheerplatform: 1px-lijnen, paneel-tinten, de vaste diepte-tokens op kaarten. Geen losse schaduw- of gradient-literals. ===================================================================== */ .uv2 { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; } .uv2-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; } .uv2-h1 { margin: 4px 0 0; font-size: 1.5rem; letter-spacing: -.02em; } .uv2-intro { margin: 7px 0 0; max-width: 640px; font-size: .82rem; line-height: 1.6; color: var(--c-ink-2); } .uv2-rek { flex: 1; } .uv2-voet { margin: 16px 0 0; font-size: .74rem; line-height: 1.6; color: var(--c-ink-3); max-width: 820px; } .uv2-let { margin: 10px 0 0; font-size: .72rem; line-height: 1.6; color: var(--c-ink-3); } .uv2-sub { font-size: .68rem; color: var(--c-ink-3); margin-top: 2px; } /* werkbalk: zoeken + filterlat + export */ .uv2-balk { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 14px 0 12px; } .uv2-zoek { flex: 1; min-width: 240px; padding: 9px 13px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); font: 500 .8rem var(--font-ui); color: var(--c-ink); background: var(--kaart); } .uv2-telling { font-size: .72rem; color: var(--c-ink-3); } /* tabel */ .uv2-vlak { border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: var(--kaart); overflow: auto; box-shadow: var(--schaduw-tegel); } .uv2-tabel { border-collapse: collapse; width: 100%; } .uv2-tabel th { position: sticky; top: 0; background: var(--kaart); text-align: left; padding: 9px 12px; z-index: 1; border-bottom: var(--lijndikte) solid var(--c-lijn-2); font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-3); } .uv2-tabel td { padding: 10px 12px; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; vertical-align: top; } .uv2-tabel tr:last-child td { border-bottom: 0; } .uv2-tabel .rechts { text-align: right; } .uv2-tabel--klein td, .uv2-tabel--klein th { padding: 8px 12px; } .uv2-rij { cursor: pointer; transition: background var(--overgang); } .uv2-rij:hover td { background: var(--c-paneel-2); } .uv2-rij.is-dicht td:first-child { box-shadow: inset 3px 0 0 var(--c-rood); } /* stand-label: compleet / verloopt / mis — kleur draagt betekenis */ .uv2-stand { display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .02em; border-radius: 99px; padding: 2px 10px; border: var(--lijndikte) solid var(--c-lijn-2); color: var(--c-ink-2); } .uv2-stand.is-ok { background: var(--c-groen-t); border-color: var(--c-groen); color: var(--c-groen-d); } .uv2-stand.is-let { background: var(--c-amber-t); border-color: var(--c-amber); color: var(--c-amber); } .uv2-stand.is-stop { background: var(--c-rood-t); border-color: var(--c-rood); color: var(--c-rood); } /* dossier */ .uv2-dbalk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 12px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .uv2-terug { font-size: .74rem; font-weight: 700; color: var(--c-ink-2); text-decoration: none; } .uv2-terug:hover { color: var(--c-groen-d); } .uv2-dnaam { font-size: 1.15rem; letter-spacing: -.02em; } .uv2-melding { border-radius: var(--radius); padding: 13px 17px; margin-bottom: 12px; border: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; line-height: 1.6; } .uv2-melding b { display: block; margin-bottom: 5px; font-size: .82rem; } .uv2-melding ul { margin: 0; padding-left: 18px; } .uv2-melding span { display: block; margin-top: 7px; font-size: .72rem; color: var(--c-ink-2); } .uv2-melding.is-stop { background: var(--c-rood-t); border-color: var(--c-rood); color: var(--c-rood); } .uv2-melding.is-stop span { color: var(--c-ink-2); } .uv2-melding.is-let { background: var(--c-amber-t); border-color: var(--c-amber); color: var(--c-amber); } .uv2-drie { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 14px; } .uv2-twee { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-top: 14px; } .uv2-kaart { padding: 17px 19px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: var(--kaart); box-shadow: var(--schaduw-tegel); } .uv2-kkop { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 11px; } .uv2-kkop b { font-size: .88rem; } .uv2-rooster { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: .78rem; } .uv2-rooster dt { color: var(--c-ink-3); } .uv2-rooster dd { margin: 0; font-weight: 600; color: var(--c-ink); } .uv2-cap { display: flex; align-items: baseline; gap: 9px; padding: 12px 14px; margin-bottom: 11px; border-radius: var(--radius); background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); } .uv2-cap b { font-size: 1.5rem; letter-spacing: -.02em; color: var(--c-groen-d); } .uv2-cap span { font-size: .74rem; color: var(--c-ink-2); } .uv2-knoppen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; padding-top: 12px; border-top: var(--lijndikte) solid var(--c-lijn); } /* aanmeldroute */ .uv2-onboard { padding: 15px 19px; margin-bottom: 12px; border-radius: var(--radius); background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn-2); } .uv2-route { display: flex; gap: 7px; flex-wrap: wrap; list-style: none; margin: 0 0 12px; padding: 0; } .uv2-route li { display: flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 99px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); font-size: .74rem; font-weight: 600; color: var(--c-ink-3); } .uv2-route li .mono { font-size: .64rem; font-weight: 800; } .uv2-route li.is-af { border-color: var(--c-groen); color: var(--c-groen-d); background: var(--c-groen-t); } .uv2-route li.is-nu { border-color: var(--c-ink); background: var(--donker, var(--c-ink)); color: var(--knop-ink); } /* tijdlijn */ .uv2-tl { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow: auto; } .uv2-tl li { display: grid; grid-template-columns: 116px 1fr; gap: 12px; padding: 9px 0; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .76rem; line-height: 1.55; } .uv2-tl li:first-child { border-top: 0; } .uv2-tl .mono { font-size: .66rem; color: var(--c-ink-3); } .uv2-tl b { text-transform: uppercase; font-size: .6rem; letter-spacing: .06em; color: var(--c-ink-3); margin-right: 6px; } .uv2-tl em { display: block; font-style: normal; font-size: .66rem; color: var(--c-ink-3); margin-top: 2px; } @media (max-width: 900px) { .uv2 { padding: 20px 18px 60px; } .uv2-tl li { grid-template-columns: 1fr; gap: 2px; } } /* Kolombreedtes: de naam krijgt ruimte, de smalle kolommen breken niet af halverwege een woord en de zeven kolommen passen samen in het paneel. */ .uv2-tabel th:nth-child(1) { min-width: 168px; } .uv2-tabel th:nth-child(2) { white-space: nowrap; } .uv2-tabel th:nth-child(6) { min-width: 130px; } .uv2-tabel td .chip, .uv2-tabel td .uv2-stand { white-space: nowrap; } .uv2-tabel td { padding: 10px 9px; } .uv2-tabel th { padding: 9px 9px; } /* Snel naar een andere partij vanuit het dossier (wireframe v4) */ .uv2-spring select { padding: 7px 11px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); font: 600 .76rem var(--font-ui); color: var(--c-ink); background: var(--kaart); max-width: 220px; } .uv2 .visueel-verborgen { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* Mensen op de bouw (UV4): een uit-dienst-regel blijft leesbaar maar treedt terug — hij is er nog, hij telt alleen niet meer mee. */ .uv2-tabel tr.is-uit td { opacity: .6; } .uv2-vinkje { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--c-ink-2); } .uv2-vinkje input { width: 15px; height: 15px; accent-color: var(--c-groen); } /* ---- Inzet (UV5): bezettingscel, toewijsvoorstel ---- */ .uv2-melding.is-ok { background: var(--c-groen-t); border-color: var(--c-groen); color: var(--c-groen-d); } .uv2-melding.is-ok span { color: var(--c-ink-2); } .uv2-naam { border: 0; background: none; font: inherit; font-weight: 700; color: var(--c-ink); padding: 0; cursor: pointer; text-align: left; } .uv2-naam:hover { color: var(--c-groen-d); } /* Eén weekcel: percentage groot, wat erachter zit klein, afwezigheid apart. De cel is een knop — afwezigheid vastleggen hoort waar je hem leest. */ .uv2-cel { display: block; width: 100%; min-width: 84px; padding: 7px 9px; border-radius: 10px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); cursor: pointer; font-family: var(--font-ui); text-align: right; transition: background var(--overgang); } .uv2-cel b { display: block; font-size: .84rem; font-family: var(--font-mono); } .uv2-cel span { display: block; font-size: .6rem; color: var(--c-ink-3); } .uv2-cel em { display: block; font-style: normal; font-size: .6rem; font-weight: 700; color: var(--c-amber); } .uv2-cel.is-goed { background: var(--c-groen-t); border-color: var(--c-groen); } .uv2-cel.is-vol { background: var(--c-rood-t); border-color: var(--c-rood); } .uv2-cel.is-vol b { color: var(--c-rood); } .uv2-cel.is-leeg { background: var(--c-creme); } .uv2-cel.is-dicht { background: var(--c-paneel); border-style: dashed; color: var(--c-ink-3); } button.uv2-cel:hover { background: var(--c-paneel-2); } .uv2-totaal td { border-top: var(--lijndikte) solid var(--c-lijn-2); font-weight: 700; } .uv2-voorstel { padding: 11px 0; border-top: var(--lijndikte) solid var(--c-lijn); } .uv2-voorstel:first-of-type { border-top: 0; } .uv2-vkop b { font-size: .84rem; } .uv2-vkop span { display: block; font-size: .7rem; color: var(--c-ink-3); margin-top: 1px; } .uv2-kandidaten { list-style: none; margin: 8px 0 0; padding: 0; } .uv2-kandidaten li { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 12px; align-items: center; padding: 8px 0; border-top: var(--lijndikte) solid var(--c-lijn); } .uv2-kandidaten li b { font-size: .78rem; } .uv2-kandidaten li span { font-size: .68rem; color: var(--c-ink-3); } .uv2-kandidaten li span:first-of-type { grid-column: 1; } .uv2-afvallers { margin-top: 8px; } .uv2-afvallers summary { font-size: .7rem; color: var(--c-ink-3); cursor: pointer; } .uv2-afvallers ul { margin: 6px 0 0; padding-left: 18px; font-size: .7rem; color: var(--c-ink-2); line-height: 1.6; } .uv2-knoppen a.btn { text-decoration: none; } /* ---- Prestatie (UV6) ---- */ .uv2-cijfer { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 10px; font-weight: 800; font-size: .84rem; background: var(--c-paneel); color: var(--c-ink-2); } .uv2-cijfer.is-a { background: var(--c-groen); color: var(--knop-ink); } .uv2-cijfer.is-b { background: var(--c-groen-t); color: var(--c-groen-d); } .uv2-cijfer.is-c { background: var(--c-amber-t); color: var(--c-amber); } .uv2-cijfer.is-d { background: var(--c-rood); color: var(--knop-ink); } .uv2-uitleg { list-style: none; margin: 0; padding: 0; counter-reset: uitleg; } .uv2-uitleg li { padding: 10px 0 10px 34px; border-top: var(--lijndikte) solid var(--c-lijn); position: relative; } .uv2-uitleg li:first-child { border-top: 0; } .uv2-uitleg li::before { counter-increment: uitleg; content: counter(uitleg); position: absolute; left: 0; top: 11px; width: 22px; height: 22px; border-radius: 7px; background: var(--c-paneel); color: var(--c-ink-2); font: 800 .66rem var(--font-mono); display: flex; align-items: center; justify-content: center; } .uv2-uitleg li.is-buiten::before { content: "+"; background: var(--c-creme); } .uv2-uitleg li b { font-size: .8rem; } .uv2-uitleg li .mono { font-size: .62rem; color: var(--c-ink-3); margin-left: 6px; } .uv2-uitleg li p { margin: 4px 0 0; font-size: .74rem; line-height: 1.6; color: var(--c-ink-2); } .uv2-uitleg li em { display: block; margin-top: 4px; font-style: normal; font-size: .64rem; color: var(--c-ink-3); } .uv2-nooit { margin-top: 11px; padding-top: 10px; border-top: var(--lijndikte) solid var(--c-lijn); } .uv2-nooit div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: .76rem; } .uv2-nooit span { color: var(--c-ink-3); } .uv2-nooit b { text-align: right; } /* Genummerde stappen (tekenroute) — zelfde vorm als de aanmeldroute, maar onder elkaar omdat het zinnen zijn en geen labels. */ .uv2-route--stappen { flex-direction: column; align-items: stretch; gap: 6px; } .uv2-route--stappen li { border-radius: var(--radius); justify-content: flex-start; font-weight: 500; color: var(--c-ink-2); text-align: left; line-height: 1.5; } .uv2-route--stappen li .mono { flex: none; width: 18px; } /* ---- Geld (UV8) ---- */ .uv2-rooster--geld { margin-top: 12px; padding-top: 11px; border-top: var(--lijndikte) solid var(--c-lijn-2); grid-template-columns: 1fr auto; } .uv2-rooster--geld dd { text-align: right; } .uv2-mw { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 10px 0; border-top: var(--lijndikte) solid var(--c-lijn); } .uv2-mw:first-of-type { border-top: 0; } .uv2-mw b { font-size: .8rem; } .uv2-mw p { margin: 4px 0 0; font-size: .74rem; line-height: 1.55; color: var(--c-ink-2); } /* ---- Beheer (UV9) ---- */ .uv2-poort { padding: 10px 0; border-top: var(--lijndikte) solid var(--c-lijn); } .uv2-poort:first-of-type { border-top: 0; } .uv2-poort b { font-size: .78rem; } .uv2-poort p { margin: 3px 0 4px; font-size: .74rem; line-height: 1.55; color: var(--c-ink-2); } /* SCHERMRONDE stap 5-rest (06-10): de uitleg onder de scoretabel staat achter een knop */ .uv2-details > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; } .uv2-details > summary::-webkit-details-marker { display: none; } .uv2-details > summary::after { content: "▸"; color: var(--ink3); } .uv2-details[open] > summary::after { content: "▾"; } /* ── cockpit.css ── */ /* ===================================================================== cockpit.css — Module 2.6 · Casa365 cockpit. Operatie-dashboard: veld-signalen, capaciteitsgrafiek, donut en balkkaarten. Tokens + bouwstenen; diepte via 1px-lijnen, geen schaduw. ===================================================================== */ /* Module-wortel: zelfde pagina-marge als de overige modules (fix 14-07-2026) */ .cp { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; } .cp-kaart { padding: 18px 20px; } .cp-kaart > strong, .cp-kaart__kop strong { font-size: .9rem; } .cp-kaart__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .cp-kaart__voet { margin-top: 12px; padding-top: 10px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .7rem; color: var(--c-ink-3); } .cp-sub { font-size: .74rem; color: var(--c-ink-3); margin-top: 2px; } .cp-duo { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin: 16px 0; } .cp-trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } @media (max-width: 1100px) { .cp-duo, .cp-trio { grid-template-columns: 1fr; } } /* signalen uit het veld */ .cp-veld { border: var(--lijndikte) solid var(--c-rood); border-radius: 16px; background: var(--c-rood-t); padding: 16px 18px; margin-bottom: 16px; } .cp-veld__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .cp-veld__titel { display: flex; align-items: center; gap: 9px; } .cp-veld__titel strong { font-size: .9rem; } .cp-puls { width: 8px; height: 8px; border-radius: 50%; background: var(--c-rood); outline: 4px solid var(--c-rood-t); } .cp-veld__aantal { font-size: .64rem; font-weight: 600; color: var(--c-rood); background: var(--kaart); padding: 2px 8px; border-radius: 99px; } .cp-veld__sub { font-size: .7rem; color: var(--c-ink-3); } .cp-signaal { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; border-radius: 12px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); margin-bottom: 9px; } .cp-signaal:last-child { margin-bottom: 0; } .cp-signaal > i { width: 3px; align-self: stretch; border-radius: 2px; flex: none; } .cp-signaal--terra > i { background: var(--c-terra); } .cp-signaal--rood > i { background: var(--c-rood); } .cp-signaal--amber > i { background: var(--c-amber); } .cp-signaal__inhoud { flex: 1; min-width: 0; } .cp-signaal__kop { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; flex-wrap: wrap; } .cp-signaal__kop strong { font-size: .8rem; } .cp-signaal__sev { font-size: .6rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; color: var(--knop-ink); } .cp-signaal--terra .cp-signaal__sev { background: var(--c-terra); } .cp-signaal--rood .cp-signaal__sev { background: var(--c-rood); } .cp-signaal--amber .cp-signaal__sev { background: var(--c-amber); } .cp-signaal__urgent { font-size: .6rem; font-weight: 700; color: var(--c-rood); } .cp-signaal__meta { font-size: .7rem; color: var(--c-ink-2); } .cp-signaal__route { margin-top: 4px; font-size: .72rem; font-weight: 600; } .cp-signaal--terra .cp-signaal__route { color: var(--c-terra-d); } .cp-signaal--rood .cp-signaal__route { color: var(--c-rood); } .cp-signaal--amber .cp-signaal__route { color: var(--c-amber); } /* capaciteit vs. vraag */ .cp-cap__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; } .cp-cap__stats { display: flex; gap: 20px; flex-wrap: wrap; } .cp-statlabel { display: block; font-size: .68rem; color: var(--c-ink-3); } .cp-cap__stats strong { font-size: 1.3rem; } .cp-terra { color: var(--c-terra-d); } .cp-groen { color: var(--c-groen-d); } .cp-cap__grafiek { display: flex; align-items: stretch; gap: 14px; } .cp-cap__as { width: 26px; flex: none; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font-size: .6rem; color: var(--c-ink-3); } .cp-cap__kolommen { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 8px; } .cp-cap__kolom { flex: 1; display: flex; flex-direction: column; align-items: center; } .cp-cap__balken { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; } .cp-cap__tekortlabel { font-size: .64rem; font-weight: 700; color: var(--c-terra-d); margin-bottom: 3px; } .cp-cap__duo { display: flex; align-items: flex-end; gap: 3px; } .cp-cap__vraag { display: flex; flex-direction: column; justify-content: flex-end; } .cp-cap__plan { display: block; width: 15px; border-radius: 4px; background: var(--c-groen); } .cp-cap__plan.is-gestapeld { border-radius: 0 0 4px 4px; } .cp-cap__tekort { display: block; width: 15px; border-radius: 4px 4px 0 0; background: var(--c-terra); } .cp-cap__cap { display: block; width: 15px; border-radius: 4px; background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); box-sizing: border-box; } .cp-cap__dag { margin-top: 8px; text-align: center; } .cp-cap__dag strong { display: block; font-size: .7rem; } .cp-cap__dag span { font-size: .56rem; color: var(--c-ink-3); } .cp-cap__legenda { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .7rem; color: var(--c-ink-2); } .cp-cap__legenda span { display: flex; align-items: center; gap: 7px; } .cp-cap__bezetting { margin-left: auto; color: var(--c-ink-3); } .cp-blokje { width: 11px; height: 11px; border-radius: 3px; } .cp-blokje--groen { background: var(--c-groen); } .cp-blokje--terra { background: var(--c-terra); } .cp-blokje--zacht { background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); } .cp-streepje { width: 12px; height: 3px; border-radius: 2px; background: var(--c-terra); } .cp-advies { margin-top: 12px; padding: 13px 15px; border-radius: 12px; font-size: .78rem; line-height: 1.55; background: var(--c-terra-t); border: var(--lijndikte) solid var(--c-terra); color: var(--c-terra-d); } /* grafieken */ .cp-svg { width: 100%; height: auto; display: block; } .cp-svgtekst { font: 600 8px var(--font-mono); } .cp-svgtekst--vet { font: 700 10px var(--font-mono); } .cp-legenda-mini { display: flex; gap: 16px; font-size: .66rem; color: var(--c-ink-3); } .cp-legenda-mini span { display: flex; align-items: center; gap: 6px; } .cp-legenda-mini .cp-blokje { width: 9px; height: 9px; } /* donut */ .cp-donut { display: flex; align-items: center; gap: 18px; margin-top: 10px; } .cp-donut__ring { position: relative; width: 110px; height: 110px; flex: none; } .cp-donut__midden { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .cp-donut__midden strong { font-size: 1.35rem; } .cp-donut__midden span { font-size: .56rem; color: var(--c-ink-3); } .cp-donut__legenda { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .cp-donut__item { display: flex; align-items: center; gap: 7px; font-size: .7rem; color: var(--c-ink-2); } .cp-donut__item i { width: 8px; height: 8px; border-radius: 3px; flex: none; } /* balk-kaarten */ .cp-balken { display: flex; flex-direction: column; gap: 11px; } .cp-balk__kop { display: flex; justify-content: space-between; font-size: .74rem; color: var(--c-ink-2); margin-bottom: 4px; } .cp-balk__kop.is-stil { color: var(--c-ink-3); } .cp-balklijn { height: 7px; border-radius: 99px; background: var(--c-paneel); overflow: hidden; } .cp-balklijn i { display: block; height: 100%; border-radius: 99px; background: var(--c-groen); } .cp-balklijn i.is-warm { background: var(--c-amber); } .cp-balklijn i.is-stil { background: var(--c-lijn-2); } /* Wat de keten ophoudt (FT-3.5) — op volgorde van geld, en elke rij is een sprong naar het scherm waar je er iets aan doet. */ .cp-blok { padding: 18px 20px; margin-bottom: 18px; } .cp-blok__kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .cp-blok__kop strong { display: block; font-size: 1.05rem; letter-spacing: -.01em; } .cp-blok__sub { font-size: .64rem; color: var(--c-ink-3); } .cp-blok--leeg { font-size: .82rem; color: var(--c-groen-d); background: var(--c-groen-t); } .cp-blokrij { display: grid; grid-template-columns: 62px 1fr auto 20px; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 8px; background: transparent; border: 0; border-top: var(--lijndikte) solid var(--c-lijn); cursor: pointer; font-family: var(--font-ui); transition: background var(--overgang); } .cp-blokrij:hover { background: var(--c-creme); } .cp-blokrij__n { font-size: 1.05rem; font-weight: 700; color: var(--c-rood); } .cp-blokrij__label { font-size: .82rem; color: var(--c-ink); } .cp-blokrij__bedrag { font-size: .78rem; color: var(--c-ink-2); } .cp-blokrij__pijl { color: var(--c-ink-3); } .cp-blokrij:hover .cp-blokrij__pijl { color: var(--c-groen-d); } .cp-balk__blok { font-size: .6rem; font-weight: 700; color: var(--c-rood); } .cp-balk__sub { font-size: .62rem; color: var(--c-ink-3); margin-top: 3px; } /* Omzetkaart (FT-3.5 vervolg): wat we van kosten weten staat eronder, met de eerlijke mededeling waarom er geen margecijfer staat. */ .cp-kaart__meta { font-size: .68rem; color: var(--c-ink-3); } .cp-marge { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; } .cp-marge > div { flex: 1; min-width: 140px; padding: 9px 12px; border-radius: var(--radius); background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); } .cp-marge strong { display: block; font-size: .95rem; margin-top: 2px; } .cp-sub--let { margin-top: 10px; color: var(--c-ink-3); font-size: .68rem; line-height: 1.55; } /* Maatregelmix als volle breedte onder de trio-rij; de balken staan naast elkaar zodat de verhouding in één oogopslag leesbaar blijft. */ .cp-mix .cp-balken { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 22px; } /* ── planning-schil.css ── */ /* planning-schil.css — de gedeelde vormtaal van de twee planmodules (UP1, 05-08). Verkoopplanning en Uitvoerplanning zijn zusterschermen: ze delen de standen-kop, de wortel en de eenvoudige lijstkaart, zodat een planner in beide modules dezelfde taal ziet. Wat eigen is aan een module staat in verkoopplanning.css respectievelijk uitvoerplanning.css. Eerder stond dit impliciet in de CSS van één module — bij het opruimen van UP1 bleek dat broos. Vandaar dit expliciete, gedeelde bestand. */ .vp-schil { display: flex; flex-direction: column; min-height: 100%; } .vp-kop { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; max-width: var(--werkbreedte, 1240px); margin: 0 auto; width: 100%; padding: 26px 32px 0; } .vp-h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; } .vp-standen { display: flex; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 10px; overflow: hidden; } .vp-stand { border: 0; background: var(--kaart); padding: 7px 15px; font-size: .74rem; font-weight: 700; color: var(--c-ink-2); font-family: inherit; cursor: pointer; text-decoration: none; display: inline-block; } .vp-stand.is-actief { background: var(--c-groen); color: var(--knop-ink); } .vp-wortel { max-width: var(--werkbreedte, 1240px); margin: 0 auto; width: 100%; padding: 14px 32px 72px; display: flex; flex-direction: column; gap: 14px; } /* eenvoudige lijstkaart met klikbare rijen (verwijzingen, werkvoorraden) */ .vp-lijst { display: flex; flex-direction: column; padding: 14px 18px; } .vp-rij { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: 0; border-top: var(--lijndikte) solid var(--c-lijn); padding: 9px 2px; font-size: .78rem; font-family: inherit; color: var(--c-ink); text-decoration: none; cursor: pointer; } .vp-rij:first-of-type { border-top: 0; } .vp-rij:hover { background: var(--c-paneel-2); } .vp-rij__nr { font-size: .62rem; color: var(--c-ink-3); width: 18px; } .vp-rij__wie { display: flex; flex-direction: column; min-width: 0; flex: 1; } .vp-rij__adres { font-size: .68rem; color: var(--c-ink-3); } /* ---- UP3 (05-08): de vormtaal die béíde planmodules gebruiken staat hier — tweeluik, werkvoorraad-kolom, werkstrook, roosterbasis, popup met voorstellen, concept-strook, blokmenu-modalen en het kaartvak. Verkoop- en uitvoerplanning zijn zusterschermen; wat écht eigen is (uur-agenda + adviseur-kiezer, respectievelijk het m²-bord) staat in de module-CSS zelf. ---- */ .vp-v7 { display: flex; flex-direction: column; height: 100%; min-height: 0; } .vp-balk { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; padding: 18px 26px 12px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .vp-balk .vp-h1 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; } .vp-rek { flex: 1; } .vp-weeknav { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; color: var(--c-ink-2); } .vp-vlak { display: grid; grid-template-columns: 310px minmax(0, 1fr); flex: 1; min-height: 0; } /* ---- links: de planvoorraad ---- */ .vp-kolom { border-right: var(--lijndikte) solid var(--c-lijn); display: flex; flex-direction: column; min-height: 0; background: var(--c-creme); } .vp-kolomkop { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-3); margin: 0; padding: 14px 16px 2px; font-weight: 700; } .vp-kolomkop b { color: var(--c-ink); font-size: .9rem; } .vp-sorteer { font-size: .66rem; color: var(--c-ink-3); font-style: italic; padding: 0 16px 8px; } .vp-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px 8px; } .vp-items { flex: 1; overflow-y: auto; padding: 0 12px 10px; display: flex; flex-direction: column; gap: 7px; } .vp-item { display: flex; flex-direction: column; gap: 3px; text-align: left; width: 100%; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 10px 12px; cursor: pointer; font-family: inherit; transition: background 150ms ease, border-color 150ms ease; } .vp-item:hover { background: var(--c-paneel-2); } .vp-item.is-sel { border: 2px solid var(--c-groen); background: var(--c-groen-t); } .vp-item__r1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .vp-item__r1 b { font-size: .82rem; color: var(--c-ink); } .vp-item__sub { font-size: .7rem; color: var(--c-ink-2); } .vp-item__hint { font-size: .66rem; color: var(--c-ink-3); font-style: italic; } .vp-merk { font-size: .6rem; font-weight: 800; border-radius: 5px; padding: 1px 7px; white-space: nowrap; } .vp-leeg { font-size: .74rem; color: var(--c-ink-3); margin: 6px 2px; } /* ---- rechts: werkstrook + agenda ---- */ .vp-rechts { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; overflow: hidden; } .vp-nu { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .8rem; padding: 10px 20px; background: var(--c-paneel-2); border-bottom: var(--lijndikte) solid var(--c-lijn); } .vp-nu__leeg { font-style: italic; color: var(--c-ink-3); } .vp-nu__hint { font-size: .72rem; color: var(--c-ink-3); font-style: italic; } .vp-agenda { flex: 1; overflow: auto; padding: 10px 20px 24px; } .vp-rooster { border-collapse: collapse; width: 100%; table-layout: fixed; } .vp-rooster th { font-size: .7rem; color: var(--c-ink-3); font-weight: 600; padding: 6px 4px; border-bottom: var(--lijndikte) solid var(--c-lijn-2); text-align: left; } .vp-rooster td { border: var(--lijndikte) solid var(--c-lijn); height: 42px; vertical-align: top; padding: 0; position: relative; } .vp-vrij { cursor: pointer; } .vp-vrij:hover { background: var(--c-groen-t); } .vp-tip { cursor: pointer; background: var(--c-groen-t); box-shadow: inset 0 0 0 2px var(--c-groen); } .vp-tipsub { position: absolute; bottom: 2px; left: 6px; font-size: .6rem; color: var(--c-groen-d); font-weight: 700; } .vp-blok { display: block; width: calc(100% - 4px); margin: 2px; padding: 3px 7px; text-align: left; font-size: .68rem; font-weight: 700; background: var(--c-paneel); color: var(--c-ink); border: 0; border-left: 3px solid var(--c-lijn-2); border-radius: 4px; font-family: inherit; cursor: pointer; } .vp-blok small { display: block; font-size: .6rem; font-weight: 400; color: var(--c-ink-2); } .vp-blok.is-concept, .vp-blok.is-conceptvak { background: var(--c-groen-t); border-left-color: var(--c-groen); color: var(--c-groen-d); } .vp-blok__notitie { color: var(--c-groen-d); } /* ---- popup met de drie voorstellen ---- */ .vp-popup { position: absolute; top: 96px; right: 22px; width: 340px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); box-shadow: var(--schaduw-tegel-hover); z-index: 25; padding-bottom: 8px; } .vp-popup__kop { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px 2px; } .vp-popup__kop h3 { margin: 0; font-size: .84rem; } .vp-sluit { border: 0; background: var(--c-paneel); border-radius: 5px; width: 24px; height: 24px; font-size: .7rem; cursor: pointer; color: var(--c-ink-2); font-family: inherit; } .vp-popup__sub { font-size: .66rem; color: var(--c-ink-3); padding: 0 14px 8px; margin: 0; } .vp-optie { display: block; width: calc(100% - 24px); margin: 0 12px 7px; text-align: left; cursor: pointer; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 9px 12px; font-family: inherit; } .vp-optie:hover { background: var(--c-paneel-2); } .vp-optie.is-best { border: 2px solid var(--c-groen); } .vp-optie b { display: block; font-size: .8rem; } .vp-best { float: right; font-size: .6rem; font-weight: 800; color: var(--c-groen-d); } .vp-optie__wie { font-size: .72rem; color: var(--c-ink-2); } .vp-optie__why { display: block; font-size: .64rem; color: var(--c-ink-3); font-style: normal; margin: 3px 0; } .vp-optie__klik { display: block; font-size: .64rem; font-weight: 700; color: var(--c-groen-d); } .vp-popup__voet { display: flex; gap: 5px; flex-wrap: wrap; padding: 4px 12px 4px; } /* ---- concept-strook ---- */ .vp-bevestig { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .8rem; padding: 11px 20px; border-top: 2px solid var(--c-groen); background: var(--c-groen-t); } .vp-buiten { font-size: .7rem; color: var(--c-ink-2); font-style: italic; } .vp-notitielabel { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 260px; font-size: .68rem; color: var(--c-ink-2); } .vp-notitielabel input { flex: 1; padding: 6px 10px; font-size: .74rem; font-family: inherit; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); } .vp-nietsverstuurd { font-size: .66rem; color: var(--c-ink-2); } /* ---- modalen ---- */ .vp-blokmenu { display: flex; flex-direction: column; gap: 6px; } .vp-geschlijst { display: flex; flex-direction: column; gap: 2px; max-height: 380px; overflow-y: auto; } .vp-gesch { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; font-size: .74rem; padding: 5px 0; border-top: var(--lijndikte) solid var(--c-lijn); line-height: 1.5; } .vp-gesch em { font-style: normal; color: var(--c-ink-3); } @media (max-width: 1100px) { .vp-vlak { grid-template-columns: 1fr; } .vp-kolom { border-right: 0; border-bottom: var(--lijndikte) solid var(--c-lijn); max-height: 300px; } .vp-popup { position: static; width: auto; margin: 12px 20px; } } /* VP5 · kaart: Leaflet-vak (of dezelfde tekening schematisch), filters, routekaartje met km + reistijd en de legenda. */ .vp-kaartvlak { flex: 1; display: flex; flex-direction: column; min-height: 0; } .vp-kaartbalk { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 20px 8px; } .vp-kaartadv { font-size: .68rem; color: var(--c-ink-3); } .vp-kaartvak { position: relative; flex: 1; min-height: 420px; margin: 0 20px 20px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); overflow: hidden; } .vp-leaflet { position: absolute; inset: 0; } .vp-kaartsvg { width: 100%; height: 100%; display: block; } .vp-kaartlabel { font-size: 12px; font-weight: 700; fill: var(--c-ink); font-family: var(--font-ui); } .vp-kaartpin { cursor: pointer; } .vp-klegenda { position: absolute; bottom: 12px; left: 12px; z-index: 500; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 9px 12px; font-size: .66rem; display: grid; gap: 4px; box-shadow: var(--schaduw-tegel); } .vp-klegenda i { font-style: normal; display: flex; align-items: center; gap: 7px; color: var(--c-ink-2); } .vp-pin { width: 11px; height: 11px; border-radius: 99px; display: inline-block; border: 2px solid var(--kaart); box-shadow: 0 0 0 1px var(--c-lijn-2); } .vp-pin--plan { background: var(--c-groen); } .vp-pin--gepland { background: var(--c-ink-3); } .vp-pin--nieuw { background: transparent; border: 2px dashed var(--c-ink); box-shadow: none; } .vp-kmerk { position: absolute; bottom: 12px; right: 12px; z-index: 500; background: var(--kaart); border-radius: var(--radius); padding: 4px 10px; font-size: .62rem; color: var(--c-ink-3); } /* UP6: het routekaartje hoort bij béíde planmodules — verkoop toont de dagroute van de adviseur, uitvoering die van de ploegen. */ .vp-routekaart { position: absolute; top: 12px; right: 12px; z-index: 500; background: var(--kaart); border: 2px solid var(--c-groen); border-radius: var(--radius); padding: 10px 14px; font-size: .72rem; line-height: 1.6; box-shadow: var(--schaduw-tegel-hover); display: flex; flex-direction: column; } .vp-routekaart b { font-size: .76rem; } .vp-routekaart em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); } /* UP6: de dagkiezer van de kaart — verkoop kiest de dag van de adviseur, uitvoering die van de ploegroutes. */ .vp-kaartdag { display: flex; align-items: center; gap: 6px; font-size: .7rem; color: var(--c-ink-2); margin-left: auto; } .vp-kaartdag input { padding: 5px 8px; font-size: .74rem; font-family: inherit; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); } /* ── uitvoerplanning.css ── */ /* uitvoerplanning.css — wat eigen is aan de uitvoerkant van het planscherm (wireframe v4, UP3 · 05-08). De schil (tweeluik, werkvoorraad-kolom, popup, concept-strook, kaartvak) komt uit planning-schil.css; hier staat het bord zelf: ploegen gegroepeerd per discipline, hele dagen in plaats van uren, de m²-vulling per dag, "＋ X m² vrij" bij een dag waar nog een klus bij past, en de bruine arcering van een dag waarop het materiaal nog niet binnen is. Alleen tokens. */ /* de module-wortel: dezelfde volle-schermschil als de verkoopplanning, maar met een breder bord (ploegen × dagen vraagt kolombreedte) */ .up-schil { display: flex; flex-direction: column; height: 100%; min-height: 0; } /* ---- lijst: statusmerken en type-chip ---- */ .up-merk { font-size: .6rem; font-weight: 800; border-radius: 5px; padding: 1px 7px; white-space: nowrap; } .up-merk--ok { background: var(--donker, var(--c-ink)); color: var(--knop-ink); } .up-merk--toez { border: 1px solid var(--c-groen); color: var(--c-groen-d); } .up-merk--blok { border: 1px solid var(--c-rood); color: var(--c-rood); } .up-tchip { font-size: .62rem; font-weight: 700; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 4px; padding: 0 5px; color: var(--c-ink-3); } .vp-item.is-blok { opacity: .62; } /* ---- werkstrook ---- */ .up-nu--blok { background: var(--c-paneel); } .up-nogdagen { font-size: .72rem; font-weight: 700; color: var(--c-groen-d); } .up-schakel { display: flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 700; color: var(--c-ink-2); } .up-schakel input { accent-color: var(--c-groen); } /* ---- het bord: ploeg × dag ---- */ .up-bord { padding-top: 12px; } .up-rooster td.up-cel { height: 58px; } .up-ploegkop { width: 190px; } .up-ploeg { padding: 6px 10px; background: var(--c-paneel-2); vertical-align: top; } .up-ploeg b { font-size: .76rem; display: block; } .up-ploeg small { font-size: .62rem; color: var(--c-ink-3); } .up-groep td { background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); padding: 0; } .up-groepknop { width: 100%; text-align: left; background: none; border: 0; font-family: inherit; font-size: .76rem; font-weight: 700; color: var(--c-ink); padding: 7px 11px; cursor: pointer; } .up-groepknop small { color: var(--c-ink-3); font-weight: 400; } .up-vrij { cursor: pointer; } .up-vrij:hover { background: var(--c-groen-t); } .up-tip { cursor: pointer; background: var(--c-groen-t); box-shadow: inset 0 0 0 2px var(--c-groen); } .up-tipsub { position: absolute; bottom: 3px; left: 6px; font-size: .6rem; font-weight: 700; color: var(--c-groen-d); } .up-mis { background: repeating-linear-gradient(45deg, var(--kaart), var(--kaart) 4px, var(--c-paneel-2) 4px, var(--c-paneel-2) 8px); } /* materiaal nog niet binnen én "voorraad hard" aan: deze dag kan niet */ .up-voorraaddicht { cursor: not-allowed; background: repeating-linear-gradient(-45deg, var(--kaart), var(--kaart) 3px, var(--c-amber-t) 3px, var(--c-amber-t) 6px); } .up-blok { display: block; width: calc(100% - 4px); margin: 2px; padding: 3px 7px; text-align: left; font-size: .68rem; font-weight: 700; background: var(--c-paneel); color: var(--c-ink); border: 0; border-left: 3px solid var(--c-lijn-2); border-radius: 4px; font-family: inherit; cursor: pointer; } .up-blok small { display: block; font-size: .6rem; font-weight: 400; color: var(--c-ink-2); } .up-blok.is-concept { background: var(--c-groen-t); border-left-color: var(--c-groen); color: var(--c-groen-d); } .up-blok__notitie { color: var(--c-groen-d); } .up-concept { display: block; margin: 2px; padding: 3px 7px; font-size: .68rem; font-weight: 700; background: var(--c-groen-t); border: 2px dashed var(--c-groen); border-radius: 4px; color: var(--c-groen-d); cursor: pointer; } .up-concept small { display: block; font-size: .6rem; font-weight: 400; color: var(--c-ink-2); } .up-vul { display: block; font-size: .58rem; color: var(--c-ink-3); padding: 0 7px 2px; } /* UP6: de reistijd van een ploegdag staat onder de vulling, in dezelfde stille toon — informatie, geen alarm */ .up-route { display: block; font-size: .56rem; color: var(--c-ink-3); padding: 0 7px 3px; } .up-weekkm { display: block; font-size: .58rem; color: var(--c-ink-3); margin-top: 2px; } .up-ruimte { position: absolute; bottom: 3px; right: 7px; font-size: .58rem; font-weight: 800; color: var(--c-groen-d); } .up-redenlabel input { border-color: var(--c-amber); } .up-knipwarn { font-size: .68rem; font-weight: 700; color: var(--c-amber); border: 1px solid var(--c-amber); border-radius: 5px; padding: 1px 8px; } @media (max-width: 1100px) { .up-ploegkop { width: 130px; } } /* schermronde stap 4 · zoekveld en voet in de smalle opdrachtkolom */ .up-blbalk { margin: 6px 0 4px; } .up-blbalk .bs-blzoek { min-width: 0; flex: 1 1 auto; } .vp-kolom .bs-paging--bl { padding: 8px 0 0; border-top: 0; } /* ── verkoopplanning.css ── */ /* verkoopplanning.css — wat eigen is aan de verkoopkant van het planscherm (wireframe v7): de klantscore en statusmerken, de belsectie, de adviseur-kiezer, de uur-agenda met dagdeel-dimming, de afsprakenlijst en het routekaartje. De gedeelde schil (tweeluik, lijst, popup, concept-strook, kaartvak) staat in planning-schil.css. Alleen tokens. */ .vp-score { font-family: var(--font-mono); font-size: .62rem; font-weight: 800; color: var(--c-groen-d); border: 1.5px solid var(--c-groen); border-radius: 5px; padding: 0 5px; margin-left: 6px; } .vp-merk--nieuw { background: var(--donker, var(--c-ink)); color: var(--knop-ink); } .vp-merk--her { border: 1px solid var(--c-groen); color: var(--c-groen-d); } .vp-merk--stil { border: 1px dashed var(--c-lijn-2); color: var(--c-ink-3); } .vp-oud { font-size: .64rem; color: var(--c-ink-3); } .vp-belsectie { border-top: var(--lijndikte) solid var(--c-lijn); padding: 10px 14px 14px; max-height: 170px; overflow-y: auto; } .vp-belsectie h3 { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-3); margin: 0 0 6px; } .vp-beltaak { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .74rem; padding: 5px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); } .vp-beltaak:last-child { border-bottom: 0; } .vp-beltaak small { display: block; font-size: .64rem; color: var(--c-ink-3); } .vp-nu__tel { font-size: .72rem; color: var(--c-ink-2); } .vp-nu__acties { display: flex; align-items: center; gap: 6px; margin-left: auto; } .vp-nu__ladder { font-size: .66rem; color: var(--c-ink-3); } .vp-advregel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 20px 4px; } .vp-lbl { font-size: .66rem; font-weight: 800; letter-spacing: .06em; color: var(--c-ink-3); } .vp-advkies { position: relative; } .vp-advknop { border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); border-radius: var(--radius); padding: 7px 13px; font-size: .78rem; font-weight: 700; color: var(--c-ink); font-family: inherit; min-width: 250px; text-align: left; cursor: pointer; } .vp-advknop small { color: var(--c-ink-3); font-weight: 400; margin-left: 6px; } .vp-pijl { float: right; color: var(--c-ink-3); font-size: .7rem; } .vp-advlijst { position: absolute; top: 40px; left: 0; width: 340px; max-height: 340px; overflow-y: auto; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); box-shadow: var(--schaduw-tegel-hover); z-index: 30; } .vp-advzoek { width: calc(100% - 20px); margin: 10px; padding: 7px 10px; font-size: .78rem; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); font-family: inherit; } .vp-advgroep { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-3); padding: 8px 13px 4px; border-top: var(--lijndikte) solid var(--c-lijn); } .vp-aitem { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: var(--kaart); padding: 7px 13px; font-size: .78rem; text-align: left; font-family: inherit; cursor: pointer; } .vp-aitem:hover { background: var(--c-groen-t); } .vp-aitem b { flex: 1; font-weight: 600; } .vp-aitem__m { font-size: .64rem; color: var(--c-ink-3); } .vp-aitem.is-uit { opacity: .45; cursor: not-allowed; } .vp-advvoet { border-top: var(--lijndikte) solid var(--c-lijn); padding: 9px 13px; font-size: .64rem; color: var(--c-ink-3); } .vp-advvoet a { color: var(--c-groen-d); font-weight: 700; } .vp-snel { display: flex; gap: 4px; } .vp-legenda { margin-left: auto; display: flex; gap: 12px; font-size: .64rem; color: var(--c-ink-3); } .vp-legenda i { font-style: normal; display: flex; align-items: center; gap: 5px; } .vp-vk { width: 14px; height: 10px; border-radius: 3px; display: inline-block; } .vp-vk--tip { background: var(--c-groen-t); border: 1.5px solid var(--c-groen); } .vp-vk--dim { background: var(--c-paneel-2); border: 1px dashed var(--c-lijn-2); } .vp-uurkop { width: 54px; } .vp-uur { font-size: .66rem; color: var(--c-ink-3); padding: 3px 6px; border: 0; } .vp-rooster td.is-dim { cursor: pointer; background: repeating-linear-gradient(45deg, var(--kaart), var(--kaart) 3px, var(--c-paneel-2) 3px, var(--c-paneel-2) 6px); } /* ---- lijstweergave ---- */ .vp-lijstvlak { flex: 1; overflow-y: auto; padding: 16px 22px 30px; display: flex; flex-direction: column; gap: 12px; } .vp-lijstbalk { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .vp-zoek { flex: 1; max-width: 340px; padding: 7px 11px; font-size: .78rem; font-family: inherit; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); } .vp-arij { display: grid; grid-template-columns: 150px 1.2fr 1fr 110px 130px 150px; gap: 10px; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-top: var(--lijndikte) solid var(--c-lijn); padding: 9px 4px; font-size: .76rem; font-family: inherit; cursor: pointer; color: var(--c-ink); } .vp-arij:hover { background: var(--c-paneel-2); } .vp-arij--kop { border-top: 0; font-size: .6rem; letter-spacing: .07em; color: var(--c-ink-3); text-transform: uppercase; cursor: default; } .vp-arij--kop:hover { background: none; } .vp-arij__stil { color: var(--c-ink-2); } .vp-arij__status { font-size: .68rem; color: var(--c-ink-2); } .vp-arij__status.is-rood { color: var(--c-rood); } .vp-arij__status.is-amber { color: var(--c-amber); } /* VP4 · afsprakenlijst: periode-chips en de notitie-regel in de klantkolom */ .vp-periode { display: flex; gap: 4px; margin-left: auto; } .vp-arij__notitie { display: block; font-size: .64rem; font-style: normal; color: var(--c-groen-d); } .vp-arij__status.is-groen { color: var(--c-groen-d); } /* VP7 · de voorkeursmomenten van de klant. Geen kleur op de wens zelf — dat is geen signaal maar een gegeven; kleur bewaren we voor «het kan niet». */ .vp-wens { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-basis: 100%; margin-top: 6px; } .vp-wens b { font-size: .78rem; } .vp-wens__m { font-size: .72rem; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 99px; padding: 2px 9px; margin-right: 5px; white-space: nowrap; } .vp-wens__bron { font-style: normal; font-size: .7rem; color: var(--c-ink-3); } .vp-wens__leeg { font-style: normal; font-size: .76rem; color: var(--c-ink-3); } .vp-optie.is-wens { border-color: var(--c-ink); } .vp-alt { font-size: .58rem; letter-spacing: .08em; color: var(--c-ink-3); } .vp-popup__mis { margin: 8px 0 0; font-size: .78rem; color: var(--let-d, var(--c-ink)); } .vp-wensrij { display: grid; grid-template-columns: 26px 1fr 1fr; gap: 10px; align-items: end; } .vp-wensrij__n { align-self: center; color: var(--c-ink-3); font-size: .8rem; text-align: center; } /* VP12 · de korte houdtijd in de popup. Geen kleur: dit is uitleg, geen signaal — pas als een moment écht verdwijnt komt er een melding. */ .vp-popup__hold { margin: 0 0 6px; font-size: .72rem; color: var(--c-ink-3); } /* VP13 · de publicatiestand in de kop en de markering op een blok */ .vp-publicatie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 14px; margin: 0 0 8px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: var(--kaart); font-size: .78rem; color: var(--c-ink-2); } .vp-publicatie.is-open { border-color: var(--let); } .vp-publicatie .vp-lbl { flex: none; } .vp-publicatie .btn, .vp-publicatie .bs-chip { margin-left: auto; } .vp-blok.is-nagepub { box-shadow: inset 3px 0 0 var(--let); } /* VP14 · het dagbord: adviseurs als rijen, halve uren als kolommen */ .vp-dagkop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 14px; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; } .vp-dagsom { color: var(--c-ink-2); } .vp-dagsom .is-stop { color: var(--stop); } .vp-seggroep { display: inline-flex; gap: 4px; } .vp-agenda--dag { padding: 0 0 24px; } .vp-rooster--dag { table-layout: fixed; min-width: 1100px; } .vp-rooster--dag thead th { position: sticky; top: 0; background: var(--kaart); z-index: 3; font-size: .66rem; padding: 6px 2px; } .vp-rooster--dag th.is-half { border-left: 0; } .vp-rooster--dag td.is-half, .vp-rooster--dag th.is-half { border-left-color: transparent; } .vp-rooster--dag td { height: 46px; } .vp-dag__adv { position: sticky; left: 0; background: var(--kaart); z-index: 2; width: 200px; text-align: left; padding: 4px 8px; border-right: var(--lijndikte) solid var(--c-lijn-2); } .vp-dag__naam { display: flex; align-items: center; gap: 6px; font-size: .74rem; } .vp-dag__naam b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vp-dag__naam em { font-style: normal; font-size: .6rem; color: var(--c-ink-3); white-space: nowrap; } .vp-dag__last { display: flex; gap: 8px; font-size: .62rem; color: var(--c-ink-2); margin-top: 2px; padding-left: 2px; border-left: 3px solid var(--c-lijn-2); } .vp-dag__last.is-goed { border-left-color: var(--goed); } .vp-dag__last.is-let { border-left-color: var(--let); } .vp-dag__last.is-stop { border-left-color: var(--stop); color: var(--stop); } tr.is-vrijedag td { background: repeating-linear-gradient(45deg, transparent 0 6px, var(--c-paneel) 6px 8px); } td.is-dicht .vp-cel { cursor: not-allowed; } .vp-cel { display: block; width: 100%; height: 100%; min-height: 40px; border: 0; background: transparent; cursor: pointer; font-family: inherit; text-align: left; padding: 0 4px; position: relative; } .vp-cel:disabled { cursor: default; } .vp-cel:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; } .vp-blok--dag { font-size: .64rem; } .vp-blok__tijd { color: var(--c-ink-3); font-weight: 600; } tr.is-half td { border-top-style: dashed; } /* focus-modus: het bord op de volle breedte (zie app.css .app.pb-focus) */ .app.pb-focus .vp-balk { padding-top: 8px; } /* VP15 · slepen mét reden: het blok is te pakken, de cel zegt vóór het loslaten of het kan (goed · let · stop); de ring is een outline, geen schaduw */ .vp-blok[draggable="true"] { cursor: grab; } .vp-blok.is-sleep { opacity: .45; } td.is-drop-goed { background: var(--goed-t); outline: 2px solid var(--goed); outline-offset: -2px; } td.is-drop-let { background: var(--let-t); outline: 2px solid var(--let); outline-offset: -2px; } td.is-drop-stop { background: var(--stop-t); outline: 2px solid var(--stop); outline-offset: -2px; } .vp-verzetstand { margin: 0 0 8px; padding: 8px 12px; border-radius: 8px; font-size: .8rem; font-weight: 700; } .vp-verzetstand.is-goed { background: var(--goed-t); color: var(--goed); } .vp-verzetstand.is-let { background: var(--let-t); color: var(--let); } .vp-verzetstand.is-stop { background: var(--stop-t); color: var(--stop); } /* VP13b · het controlevenster vóór publiceren */ .vp-pub__waarschuw { background: var(--let-t); color: var(--let); border-radius: 8px; padding: 8px 12px; font-size: .8rem; margin: 0 0 12px; } .vp-pub__blok { border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 12px; } .vp-pub__blok h4 { margin: 0 0 6px; font-size: .8rem; display: flex; justify-content: space-between; align-items: baseline; } .vp-pub__blok h4 span { font-weight: 400; color: var(--c-ink-3); font-size: .7rem; } .vp-pub__tabel { width: 100%; border-collapse: collapse; font-size: .8rem; } .vp-pub__tabel th { text-align: left; font: 600 .62rem var(--mono, "JetBrains Mono", monospace); letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); padding: 6px 8px; border-bottom: var(--lijndikte) solid var(--c-lijn-2); } .vp-pub__tabel td { padding: 7px 8px; border-bottom: var(--lijndikte) solid var(--c-lijn); vertical-align: middle; } .vp-pub__tabel tr.is-leeg td { color: var(--c-ink-3); } .vp-pub__sub { display: block; font-size: .66rem; color: var(--c-ink-3); } .vp-pub__let { color: var(--let); font-size: .72rem; margin-left: 6px; } .vp-pub__vink { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; cursor: pointer; } .vp-pub__vink input { width: 15px; height: 15px; accent-color: var(--accent); margin: 0; } .vp-pub__ontvanger { display: inline-flex; align-items: center; gap: 6px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 99px; padding: 2px 8px 2px 12px; font-size: .74rem; margin: 3px 6px 3px 0; } .vp-pub__ontvanger button { border: 0; background: none; color: var(--c-ink-3); cursor: pointer; font-size: .8rem; padding: 0 2px; } .vp-pub__toevoeg { display: flex; gap: 6px; align-items: center; margin-top: 6px; } .vp-pub__toevoeg input { font: inherit; font-size: .8rem; padding: 6px 10px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; min-width: 240px; } .vp-pub__voet { justify-content: space-between; flex-wrap: wrap; gap: 8px; } .vp-pub__som { font-size: .78rem; color: var(--c-ink-2); } /* RE18 · de woning in beeld in het planbord */ .vp-woning { padding: 10px 20px 12px; border-bottom: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); } .vp-bevestig__woning { flex-basis: 100%; margin-bottom: 4px; } .vp-bevestig { flex-wrap: wrap; } /* VP16 · routes per verkoper: kleur = adviseur (identificatie, besluit 22); de kleur komt als data uit de regelset (--adv-kleur), niet uit deze css */ .vp-routelijst { position: absolute; top: 12px; right: 12px; width: 320px; max-height: calc(100% - 24px); overflow: auto; z-index: 500; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); box-shadow: var(--schaduw-kaart); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; font-size: .76rem; } .vp-routelijst__kop { display: flex; flex-direction: column; gap: 2px; padding: 4px 2px 8px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .vp-routelijst__kop em { font-size: .64rem; color: var(--c-ink-3); font-style: italic; } .vp-routelijst .is-stop { color: var(--stop); } .vp-routerij { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; text-align: left; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-left: 4px solid var(--adv-kleur); border-radius: 8px; padding: 6px 8px; cursor: pointer; font-family: inherit; } .vp-routerij:hover { background: var(--c-paneel-2); } .vp-routerij.is-actief { border-color: var(--c-ink); border-left-color: var(--adv-kleur); background: var(--c-paneel-2); } .vp-routerij.is-over .vp-routerij__cijfers { color: var(--stop); } .vp-routerij__pin, .vp-avatarpin { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--adv-kleur); color: var(--knop-ink); font: 700 .62rem/1 var(--mono, monospace); overflow: hidden; position: relative; border: 2px solid var(--kaart); } .vp-routerij__pin img, .vp-avatarpin img { width: 100%; height: 100%; object-fit: cover; } .vp-routerij__wie { display: flex; flex-direction: column; min-width: 0; } .vp-routerij__wie b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .78rem; } .vp-routerij__wie small { font-size: .64rem; color: var(--c-ink-3); } .vp-routerij__cijfers { display: flex; flex-direction: column; align-items: flex-end; font-size: .7rem; } .vp-routerij__cijfers small { font-size: .62rem; color: var(--c-ink-3); } .vp-routedetail { border-left: 3px solid var(--adv-kleur); padding: 4px 0 4px 10px; margin-top: 6px; display: flex; flex-direction: column; gap: 4px; } .vp-routestop { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; font-size: .72rem; align-items: start; } .vp-routestop small { color: var(--c-ink-3); white-space: nowrap; } .vp-routedetail em { font-size: .62rem; color: var(--c-ink-3); } .vp-avatarpin-wrap { background: none; border: 0; } .vp-avatarpin { width: 30px; height: 30px; box-shadow: var(--schaduw-kaart); } .vp-avatarpin b { position: absolute; right: -4px; bottom: -4px; background: var(--donker, var(--c-ink)); color: var(--knop-ink); font-size: .55rem; border-radius: 99px; padding: 1px 4px; line-height: 1; } .vp-avatarpin.is-dim, .vp-thuispin.is-dim { opacity: .45; } .vp-thuispin { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: var(--kaart); color: var(--adv-kleur); border: 2px solid var(--adv-kleur); font-size: .8rem; } .vp-pin--adv { background: var(--c-ink-3); } /* VP16 · het kaartvak heeft een vaste, schermgebonden hoogte — anders groeit de kaart mee met de lange planvoorraad links (2500 px hoog) en ligt de routelijst nergens; de lijst hangt absoluut in het vak */ .vp-kaartvak { flex: 0 0 auto; height: clamp(420px, calc(100vh - 260px), 760px); } /* VP19 · het plangesprek: het script in de volgorde van het gesprek */ .vp-vlak.is-breed { grid-template-columns: minmax(0, 1fr); } .vp-g { padding: 14px 22px 40px; overflow: auto; display: flex; flex-direction: column; gap: 12px; } .vp-g--leeg { align-items: center; justify-content: center; min-height: 240px; } .vp-g__kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .vp-g__kop h2 { margin: 2px 0; font-size: 1.15rem; display: flex; align-items: center; gap: 8px; } .vp-g__kop p { margin: 0; font-size: .78rem; color: var(--c-ink-2); } .vp-g__acties { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .vp-g__stap { border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 10px 14px 12px; background: var(--kaart); } .vp-g__stap h3 { margin: 0 0 8px; font-size: .84rem; display: flex; align-items: center; gap: 8px; } .vp-g__stap h3 .mono { width: 22px; height: 22px; border-radius: 50%; background: var(--donker, var(--c-ink)); color: var(--knop-ink); display: inline-flex; align-items: center; justify-content: center; font-size: .66rem; } .vp-g__extra { margin-left: auto; } .vp-g__vraag { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr) auto; gap: 6px 14px; align-items: center; padding: 6px 0; border-top: var(--lijndikte) solid var(--c-lijn); } .vp-g__vraag:first-of-type { border-top: 0; } .vp-g__tekst { font-size: .8rem; font-weight: 600; } .vp-g__tekst b { color: var(--stop); } .vp-g__veld input[type=text], .vp-g__veld input[type=date], .vp-g__veld select { font: inherit; font-size: .8rem; padding: 6px 9px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; width: 100%; max-width: 420px; } .vp-g__veld input:focus-visible, .vp-g__veld select:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } .vp-g__janee, .vp-g__meer { display: flex; gap: 12px; flex-wrap: wrap; font-size: .78rem; } .vp-g__janee label, .vp-g__meer label { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; } .vp-g__mee { font-size: .68rem; color: var(--c-ink-3); display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; cursor: pointer; } .vp-g__mee input { accent-color: var(--accent); } .vp-g__hint { grid-column: 2 / 4; font-size: .68rem; color: var(--c-ink-3); font-style: italic; } .vp-g__besl { display: flex; flex-direction: column; gap: 8px; } .vp-g__vorm { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: .76rem; } .vp-g__vorm.is-dicht { display: none; } .vp-g__vorm em { font-size: .68rem; color: var(--c-ink-3); } .vp-g__moment { display: inline-flex; gap: 4px; align-items: center; } .vp-g__moment .mono { font-size: .64rem; color: var(--c-ink-3); } .vp-g__moment input, .vp-g__moment select, .vp-g__vorm select { font: inherit; font-size: .76rem; padding: 4px 7px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; } .vp-g__wacht { background: var(--let-t); color: var(--let); border-radius: 8px; padding: 8px 12px; font-size: .78rem; margin: 0 0 8px; } .vp-g__sub { font-size: .74rem; color: var(--c-ink-2); margin: 0 0 8px; } .vp-g__rij { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-top: 6px; } .vp-g__rij .bs-veld { min-width: 140px; } .vp-g .vp-optie { margin-bottom: 6px; } .vp-g__woning { margin: 2px 0; } .vp-g .vp-bevestig { position: static; margin: 0 0 8px; } /* FM1 · deurantwoorden en foto's in het gesprek (intern) */ .vp-g__deur { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; padding: 8px 10px; background: var(--c-paneel-2); border-radius: 8px; font-size: .74rem; } .vp-g__deur b { font-weight: 600; color: var(--c-ink-2); } .vp-g__deur em { color: var(--c-ink-3); font-style: normal; font-size: .66rem; } .vp-g__fotos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; } .vp-g__fotos img { width: 120px; height: 90px; object-fit: cover; border-radius: 6px; border: var(--lijndikte) solid var(--c-lijn); } /* VA5 · niet thuis: het blok boven het dagbord */ .vp-nt { margin: 0 0 12px; padding: 12px 16px; display: grid; gap: 6px; border-left: 3px solid var(--let); } .vp-ntrij { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--lijn); } .vp-ntrij.is-let { border-left: 3px solid var(--stop); padding-left: 10px; } .vp-ntknoppen { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; } /* PK7 · de link naar de werkbak in de standenbalk */ .vp-stand--link { text-decoration: none; } /* WONINGBEELD (05-10) · het vooraanzicht in het afspraakmenu van het planbord */ .vp-blokwoning { margin: 0 0 12px; } .vp-blokwoning .bs-ws { border-radius: var(--radius); } /* ── planbord.css ── */ /* planbord.css — PB4 (23-09-2026) · alleen wat het planbord toevoegt bovenop de vp-*-klassen van verkoopplanning.css en de groepsrijen van uitvoerplanning.css. Kleur is betekenis: het routekwaliteitspunt en de krappe leg spreken in --goed/--let/--stop, verder niets. */ .pb-kop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 14px; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; } .pb-som { padding: 6px 14px; font-size: .72rem; color: var(--c-ink-2); border-bottom: var(--lijndikte) solid var(--c-lijn); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .pb-som .is-stop { color: var(--stop); } .pb-fase { font-size: .7rem; padding: 3px 10px; border-radius: 99px; border: var(--lijndikte) solid var(--c-lijn-2); color: var(--c-ink-2); } .pb-fase.is-buffers { border-color: var(--let); color: var(--let); } .pb-fase.is-publicatie { border-color: var(--goed); color: var(--goed); } .pb-provider { font-size: .7rem; padding: 3px 10px; border-radius: 99px; border: var(--lijndikte) solid var(--c-lijn-2); color: var(--c-ink-2); } .pb-provider.is-let { border-color: var(--let); color: var(--let); } .pb-regie { padding: 10px 14px 0; } .pb-regie__weg { margin: 4px 0 0; font-size: .68rem; color: var(--c-ink-3); } .pb-punt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c-lijn-2); vertical-align: middle; margin-right: 6px; flex: 0 0 auto; } .pb-punt.is-goed { background: var(--goed); } .pb-punt.is-let { background: var(--let); } .pb-punt.is-stop { background: var(--stop); } .pb-rooster td.is-dicht { background: var(--c-paneel); } .pb-rooster td.is-dicht .vp-cel { cursor: default; } .pb-groep td { background: var(--c-paneel); } .pb-leeg { font-size: .72rem; color: var(--c-ink-3); padding: 8px 12px; } .pb-blok { position: relative; padding-right: 54px; } .pb-blok.is-schouw { border-left: 3px solid var(--c-ink-3); } .pb-blok.is-inmeet { border-style: dashed; } .pb-blok.is-uitvoering { background: var(--c-paneel); cursor: default; } .pb-reis { position: absolute; right: 6px; bottom: 4px; font-size: .58rem; color: var(--c-ink-2); } .pb-reis.is-stop { color: var(--stop); font-weight: 700; } .pb-reis.is-onbekend { color: var(--c-ink-3); } .pb-res .vp-dag__naam { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .pb-week th { text-align: left; padding: 6px 8px; } .pb-week th small { display: block; color: var(--c-ink-3); font-weight: 400; } .pb-weekcel { padding: 0; } .pb-weekknop { width: 100%; min-height: 44px; border: 0; background: transparent; font-family: inherit; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 4px 8px; text-align: left; } .pb-weekknop:hover { background: var(--c-paneel); } .pb-weekknop:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; } .pb-weekknop small { color: var(--c-ink-3); } .pb-detail__rij { display: grid; grid-template-columns: 170px 1fr; gap: 8px; padding: 6px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: .82rem; } .pb-detail__rij span { color: var(--c-ink-3); } .pb-detail__rij .is-stop { color: var(--stop); } .pb-override { grid-column: 1 / -1; display: grid; gap: 8px; } .pb-override[hidden] { display: none; } .pb-override__vink { display: flex; gap: 8px; align-items: flex-start; font-size: .8rem; } .pb-lijst { display: grid; gap: 6px; } .pb-lijst__rij { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-klein, 8px); text-decoration: none; color: inherit; } .pb-lijst__rij:hover { background: var(--c-paneel); } .pb-lijst__rij em { font-style: normal; font-size: .72rem; color: var(--c-ink-2); } @media (prefers-reduced-motion: no-preference) { .pb-weekknop { transition: background 150ms; } } /* PW5 (24-09) · nu-lijn en de twee panelen onder het bord */ .pb-bord { position: relative; } .pb-nu { position: absolute; top: 26px; bottom: 0; width: 1px; background: var(--accent); z-index: 2; pointer-events: none; opacity: .9; } .pb-nu::before { content: ""; position: absolute; top: -4px; left: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .pb-twee { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; padding: 14px 14px 0; } .pb-paneel { background: var(--kaart); border: var(--lijndikte) solid var(--lijn); border-radius: 12px; overflow: hidden; } .pb-paneel__kop { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: var(--lijndikte) solid var(--lijn); } .pb-paneel__kop h3 { margin: 0; font-size: .82rem; font-weight: 700; } .pb-paneel__kop .mono { font-size: .68rem; color: var(--c-ink-2); } .pb-regel { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: center; padding: 9px 14px; border-bottom: var(--lijndikte) solid var(--lijn); font-size: .78rem; color: inherit; text-decoration: none; } .pb-regel:last-child { border-bottom: 0; } .pb-regel:hover { background: var(--accent-t2); } /* besluit 342 · integriteit en uitval staan als knop in dezelfde lijst */ button.pb-regel { width: 100%; background: none; border-width: 0 0 var(--lijndikte); border-style: solid; border-color: var(--lijn); text-align: left; font: inherit; font-size: .78rem; cursor: pointer; } .pb-uitvalrij { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr minmax(160px, auto); gap: 12px; align-items: center; padding: 8px 0; border-bottom: var(--lijndikte) solid var(--lijn); } .pb-uitvalrij small { display: block; color: var(--ink2); } .pb-uitval-leeg { grid-column: 1 / -1; margin: 0; } .pb-regel .pb-punt { margin: 0; } .pb-chip { border-radius: 99px; padding: 2px 9px; font-size: .68rem; background: var(--grijs); color: var(--c-ink-2); white-space: nowrap; } .pb-chip.is-stop { background: var(--stop-t); color: var(--stop-d); } .pb-chip.is-let { background: var(--let-t); color: var(--let-d); } .pb-pub { padding: 14px; display: grid; gap: 10px; } .pb-voortgang { height: 6px; border-radius: 99px; background: var(--grijs); overflow: hidden; } .pb-voortgang i { display: block; height: 100%; border-radius: 99px; background: var(--accent); } .pb-pubtekst { margin: 0; font-size: .78rem; color: var(--c-ink-2); } .pb-pubtekst b { color: var(--ink); } @media (max-width: 900px) { .pb-twee { grid-template-columns: 1fr; } } /* PLANNING-NORM (besluit 293) · ploegen in dagdelen */ .pb-dagdeel { vertical-align: middle; padding: 4px 6px; border-left: var(--lijndikte) solid var(--lijn); } .pb-dagdeel.is-dicht { background: var(--grijs); } .pb-dagdeel__leeg { font: 500 .66rem var(--font-ui); color: var(--ink3); } .pb-dagdeelblok { width: 100%; text-align: left; } /* aanwezigheid van de verkoper (10-10): binnen/buiten in de afspraak-drawer */ .pb-aanwezig { margin: 4px 0 0; font-size: .72rem; color: var(--ink2); } /* ── vraagontwerper.css ── */ /* vraagontwerper.css — de vraagkaart (gedeeld met de planwerkbak en straks de veld-app) en de ontwerper. Alleen tokens uit casa360-stijl.css. */ .vo-kaart { display: flex; flex-direction: column; gap: 10px; } .vo-kaart.is-voorbeeld { pointer-events: none; opacity: .92; } .vo-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .vo-zeg { margin: 0; font-size: 1.15rem; font-weight: 500; line-height: 1.45; color: var(--ink); font-style: italic; } .vo-tekst { margin: 0; font-size: .82rem; font-weight: 700; color: var(--ink2); } .vo-hint { margin: 0; font-size: .74rem; color: var(--ink3); } .vo-vlak { display: flex; flex-direction: column; gap: 10px; } .vo-opties { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .vo-opties--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; } .vo-opties--3 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .vo-opties--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 420px; } .vo-alleenbij input { font: inherit; font-size: .76rem; padding: 4px 8px; border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein); min-width: 260px; } .fm-vs5producten { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; } .fm-vs5product { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; font: inherit; color: var(--ink); background: var(--kaart); border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius); cursor: pointer; min-width: 180px; text-align: left; } .fm-vs5product small { font-size: .66rem; color: var(--ink3); } .fm-vs5product.is-actief { border-color: var(--accent); background: var(--accent-t); } .fm-vs5product:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } .vo-optie { display: flex; align-items: center; gap: 10px; padding: 12px 14px; font: inherit; font-size: .84rem; font-weight: 700; color: var(--ink); background: var(--kaart); border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius); cursor: pointer; text-align: left; transition: border-color var(--overgang), background var(--overgang); } .vo-optie:hover { border-color: var(--ink); } .vo-optie:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } .vo-optie.is-actief { background: var(--accent); color: var(--knop-ink); border-color: var(--accent); } .vo-optie kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; font-size: .66rem; border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein); background: var(--grijs); color: var(--ink2); } .vo-optie.is-actief kbd { background: var(--nav2); color: var(--nav-actief); border-color: var(--nav2); } .vo-veld { display: flex; flex-direction: column; gap: 4px; } .vo-veld textarea, .vo-veld input { font: inherit; font-size: .84rem; padding: 10px 12px; border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius); background: var(--kaart); color: var(--ink); } .vo-veld textarea:focus-visible, .vo-veld input:focus-visible { outline: var(--focus-ring); outline-offset: 1px; } .vo-sub { margin: 0; font-size: .7rem; color: var(--ink3); } .vo-mee { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--ink2); } .vo-dagkiezer { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; border-top: var(--lijndikte) solid var(--lijn); transition: opacity var(--overgang); } .vo-dagkiezer.is-wacht { opacity: .45; } .vo-dagen { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; } .vo-dag { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; font: inherit; font-size: .72rem; color: var(--ink); background: var(--kaart); border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein); cursor: pointer; } .vo-dag b { font-size: .84rem; text-transform: capitalize; } .vo-dag span { color: var(--ink3); font-size: .66rem; } .vo-dag.is-actief { background: var(--accent); color: var(--knop-ink); border-color: var(--accent); } .vo-dag.is-actief span { color: var(--nav-ink); } .vo-dag:focus-visible, .vo-dagdeel:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } .vo-dagdelen { display: flex; flex-wrap: wrap; gap: 6px; } .vo-dagdeel { padding: 7px 14px; font: inherit; font-size: .76rem; font-weight: 700; color: var(--ink); background: var(--kaart); border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein); cursor: pointer; } .vo-dagdeel.is-actief { background: var(--accent); color: var(--knop-ink); border-color: var(--accent); } .vo-dagdeel:disabled { opacity: .4; cursor: not-allowed; } /* ---- de ontwerper ---- */ .vo { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; } .vo-kopbalk { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .vo-kopbalk h1 { margin: 2px 0 4px; font-size: 1.3rem; } .vo-kopbalk p { margin: 0; font-size: .78rem; color: var(--ink2); max-width: 64ch; } .vo-kopbalk__acties { display: flex; align-items: center; gap: 10px; } .vo-tweeluik { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 16px; align-items: start; } .vo-lijst { display: flex; flex-direction: column; gap: 6px; } .vo-rij { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; font: inherit; text-align: left; color: var(--ink); background: var(--kaart); border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius); cursor: pointer; box-shadow: var(--schaduw-kaart); } .vo-rij:hover { border-color: var(--ink); } .vo-rij:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } .vo-rij.is-actief { border-color: var(--accent); background: var(--accent-t); } .vo-rij.is-poort .vo-rij__nr { border-color: var(--let); color: var(--let-d); } .vo-rij__nr { flex: 0 0 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 800; border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein); } .vo-rij__tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; } .vo-rij__tekst b { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vo-rij__tekst small { font-size: .66rem; color: var(--ink3); } .vo-rij__acties { display: inline-flex; gap: 2px; } .vo-rij__acties [aria-disabled="true"] { opacity: .3; pointer-events: none; } .vo-form { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; } .vo-form__kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .vo-form__acties { display: inline-flex; gap: 6px; } .vo-form__rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .vo-form__opties { display: flex; flex-direction: column; gap: 6px; } .vo-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .vo-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 8px; font-size: .76rem; font-weight: 700; border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-pill); background: var(--kaart); } .vo-chip kbd { font-size: .62rem; color: var(--ink3); } .vo-chip button { border: 0; background: transparent; font: inherit; font-size: .7rem; color: var(--ink3); cursor: pointer; padding: 0 2px; border-radius: 4px; } .vo-chip button:focus-visible { outline: var(--focus-ring); } .vo-chips input { flex: 1; min-width: 160px; font: inherit; font-size: .78rem; padding: 6px 10px; border: var(--lijndikte) dashed var(--lijn2); border-radius: var(--radius-pill); background: var(--kaart); color: var(--ink); } .vo-chips input:focus-visible { outline: var(--focus-ring); } .vo-form__vinken { display: flex; flex-wrap: wrap; gap: 14px; font-size: .76rem; color: var(--ink2); } .vo-form__vinken label { display: inline-flex; align-items: center; gap: 6px; } .vo-voorbeeld { margin-top: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; background: var(--grijs); } @media (max-width: 1100px) { .vo-tweeluik { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .vo-optie, .vo-dagkiezer { transition: none; } } /* ── planwerkbak.css ── */ /* planwerkbak.css — de Planwerkbak (PK1–PK6). Drie kolommen: bak 330 · gesprek · context 300; onder 1100 px twee, onder 760 px één. Alleen tokens uit casa360-stijl.css; kleur is betekenis (let = wacht, stop = buiten de norm). De vraagkaart zelf staat in vraagontwerper.css. */ .pk { max-width: var(--werkbreedte-breed, 1360px); margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; } .pk-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .pk-kop h1 { margin: 2px 0 4px; font-size: 1.3rem; } .pk-kop p { margin: 0; font-size: .78rem; color: var(--ink2); max-width: 70ch; } .pk-kop__acties { display: flex; gap: 8px; } .pk-drie { display: grid; grid-template-columns: 330px minmax(0, 1fr) 300px; gap: 16px; align-items: start; } .pk-rek { flex: 1; } /* ---- de bak ---- */ .pk-bak { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 12px; } .pk-bak__filters { display: flex; flex-wrap: wrap; gap: 6px; } .pk-filter { font: inherit; font-size: .7rem; font-weight: 700; padding: 5px 10px; color: var(--ink2); background: var(--kaart); border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein); cursor: pointer; } .pk-filter .mono { color: var(--ink3); margin-left: 2px; } .pk-filter.is-actief { background: var(--accent); color: var(--knop-ink); border-color: var(--accent); } .pk-filter.is-actief .mono { color: var(--nav-ink); } .pk-filter:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } .pk-bak__lijst { display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 220px); overflow-y: auto; padding-right: 2px; } .pk-rij { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 10px 12px; font: inherit; text-align: left; color: var(--ink); background: var(--kaart); border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius); cursor: pointer; box-shadow: var(--schaduw-kaart); transition: border-color var(--overgang), background var(--overgang); } .pk-rij:hover { border-color: var(--ink); } .pk-rij:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } .pk-rij.is-actief { border-color: var(--accent); background: var(--accent-t); } .pk-rij__kop { display: flex; justify-content: space-between; gap: 8px; font-size: .84rem; } .pk-rij__kop .mono { font-size: .72rem; color: var(--ink2); } .pk-rij__sub { font-size: .72rem; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pk-rij__chips { display: flex; flex-wrap: wrap; gap: 4px; } .pk-rij__chips .chip { font-size: .6rem; padding: 1px 7px; } /* er is geen globale .chip-basis (alleen .bs-chip als knop) — de statuschips van de werkbak en de ontwerper krijgen hem hier */ .pk .chip, .vo .chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: .64rem; font-weight: 700; line-height: 1.4; color: var(--ink2); background: var(--kaart); border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-pill); white-space: nowrap; } .pk .chip--amber, .vo .chip--amber { color: var(--let-d); background: var(--let-t); border-color: var(--let); } .pk .chip--rood { color: var(--stop-d); background: var(--stop-t); border-color: var(--stop); } .pk .chip--groen { color: var(--goed-d); background: var(--goed-t); border-color: var(--goed); } .pk .chip--donker { background: var(--accent); color: var(--knop-ink); border-color: var(--accent); } .pk .chip--stil { border-style: dashed; color: var(--ink3); background: transparent; } /* ---- het gesprek ---- */ .pk-gesprek { display: flex; flex-direction: column; gap: 14px; min-width: 0; } /* bouwspec 8.3 · een collega belt deze klant al — let op, geen blokkade */ .pk-bezet { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--let); border-radius: var(--radius); background: var(--let-t); } .pk-g__kop { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 18px; background: var(--kaart); border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius); box-shadow: var(--schaduw-kaart); } .pk-g__wie h2 { margin: 2px 0 4px; font-size: 1.25rem; display: flex; align-items: center; gap: 8px; } .pk-g__wie p { margin: 0; font-size: .78rem; color: var(--ink2); } .pk-score { font-size: .62rem; font-weight: 800; color: var(--goed-d); border: 1.5px solid var(--goed); border-radius: 5px; padding: 0 5px; } .pk-g__bel { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .pk-belknop { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; padding: 10px 22px; font-size: 1rem; text-decoration: none; } .pk-belknop small { font-size: .62rem; font-weight: 600; opacity: .8; } .pk-belknop.is-leeg { color: var(--ink3); border: var(--lijndikte) dashed var(--lijn2); border-radius: var(--radius); padding: 10px 16px; font-size: .8rem; } .pk-g__snel { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } .pk-g__snel kbd, .pk-vraag__nav kbd, .pk-uitkomst kbd { font-size: .6rem; padding: 1px 5px; border: var(--lijndikte) solid var(--lijn2); border-radius: 4px; background: var(--grijs); color: var(--ink2); margin-right: 4px; } .btn--primary kbd { background: var(--nav2); color: var(--nav-actief); border-color: var(--nav2); margin: 0 0 0 6px; } .pk-g__ladder { font-size: .66rem; color: var(--ink3); } .pk-woning-leeg { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: .78rem; color: var(--ink2); background: var(--grijs); border-radius: var(--radius); } .pk-voortgang { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; } .pk-voortgang li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; font-size: .72rem; font-weight: 700; color: var(--ink3); border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius-pill); background: var(--kaart); } .pk-voortgang li .mono { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: .64rem; border-radius: 50%; background: var(--grijs); color: var(--ink2); } .pk-voortgang li.is-nu { color: var(--knop-ink); background: var(--accent); border-color: var(--accent); } .pk-voortgang li.is-nu .mono { background: var(--nav2); color: var(--nav-actief); } .pk-voortgang li.is-klaar { color: var(--goed-d); border-color: var(--goed); } .pk-voortgang li.is-klaar .mono { background: var(--goed-t); color: var(--goed-d); } .pk-vraag { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; } .pk-vraag__nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: var(--lijndikte) solid var(--lijn); } .pk-voorstellen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; } .pk-voorstel { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; font: inherit; text-align: left; color: var(--ink); background: var(--kaart); border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius); cursor: pointer; transition: border-color var(--overgang), background var(--overgang); } .pk-voorstel:hover { border-color: var(--ink); } .pk-voorstel:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } .pk-voorstel.is-actief { background: var(--accent); color: var(--knop-ink); border-color: var(--accent); } .pk-voorstel.is-wens:not(.is-actief) { border-color: var(--goed); } .pk-voorstel__nr { font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink3); } .pk-voorstel.is-actief .pk-voorstel__nr, .pk-voorstel.is-actief .pk-voorstel__wie, .pk-voorstel.is-actief em { color: var(--nav-ink); } .pk-voorstel.is-wens:not(.is-actief) .pk-voorstel__nr { color: var(--goed-d); } .pk-voorstel b { font-size: .98rem; } .pk-voorstel__wie { font-size: .76rem; color: var(--ink2); } .pk-voorstel em { font-size: .7rem; color: var(--ink3); font-style: normal; } .pk-uitkomst { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; background: var(--grijs); border-radius: var(--radius); font-size: .76rem; } /* ---- context ---- */ .pk-context { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px; } .pk-blok { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; } .pk-blok dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; } .pk-blok dt { font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink3); margin-top: 6px; } .pk-blok dd { margin: 0; font-size: .78rem; color: var(--ink); } .pk-pogingen { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: .74rem; } .pk-pogingen li .mono { font-size: .64rem; color: var(--ink3); margin-right: 4px; } .pk-pogingen li small { display: block; font-size: .62rem; color: var(--ink3); } .pk-blok .is-nu { font-weight: 800; color: var(--ink); } .pk-sneltoetsen dl { grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; } .pk-sneltoetsen dt { margin: 0; } .pk-sneltoetsen kbd { font-family: var(--font-mono); font-size: .62rem; padding: 1px 5px; border: var(--lijndikte) solid var(--lijn2); border-radius: 4px; background: var(--grijs); color: var(--ink2); } .pk-sneltoetsen dd { font-size: .72rem; color: var(--ink2); } @media (max-width: 1100px) { .pk-drie { grid-template-columns: 300px minmax(0, 1fr); } .pk-context { grid-column: 1 / -1; position: static; flex-direction: row; flex-wrap: wrap; } .pk-context .kaart { flex: 1 1 260px; } } @media (max-width: 760px) { .pk { padding: 16px 16px 60px; } .pk-drie { grid-template-columns: 1fr; } .pk-bak { position: static; } .pk-bak__lijst { max-height: 320px; } .pk-context { flex-direction: column; } } @media (prefers-reduced-motion: reduce) { .pk-rij, .pk-voorstel { transition: none; } } /* ─── PK10/PK11 (30-09) · minder klikken ───────────────────────────────────────────────── de opener in de kop, de compacte woningstrook met «groter», de korte voorstelregel met «waarom?», het paneel «Geboekt» en de vragen na het boeken */ .pk-opener { margin: 6px 0 0; font-style: italic; color: var(--c-ink-2); font-size: .86rem; } .pk-ws { position: relative; } .pk-ws__knop { position: absolute; right: 10px; top: 8px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); border-radius: var(--radius-klein); padding: 3px 10px; font: 700 .68rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; } .pk-ws__knop:hover { color: var(--c-ink); } .pk-ws__knop:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } .pk-voorstel em { display: block; } .pk-waarom { margin-top: 6px; font-size: .68rem; color: var(--c-ink-3); } .pk-waarom summary { cursor: pointer; font-weight: 700; color: var(--c-ink-2); list-style: none; } .pk-waarom summary::before { content: "› "; } .pk-waarom[open] summary::before { content: "⌄ "; } .pk-waarom span { display: block; margin-top: 4px; line-height: 1.45; } .pk-boek__keuzes { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 12px; } .pk-vink { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--c-ink); cursor: pointer; } .pk-vink input { width: 16px; height: 16px; accent-color: var(--accent); } .pk-vink .mono { font-size: .74rem; color: var(--c-ink-3); } .pk-vink em { font-style: normal; font-size: .74rem; color: var(--c-ink-3); } .pk-vink.is-uit { color: var(--c-ink-3); cursor: default; } .pk-boek .vo-veld { margin-top: 8px; } .pk-boek .vo-veld input[type=text] { width: 100%; box-sizing: border-box; padding: 9px 11px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius-klein); font: 500 .84rem var(--font-ui); color: var(--c-ink); background: var(--kaart); } .pk-boek .vo-veld input[type=text]:focus-visible { outline: var(--focus-ring); outline-offset: 1px; } .pk-na-intro { margin: 0 0 8px; } /* besluit 207 · de vraag boven de vouw: cijfers op één regel, de belknoppen naast het nummer, een lage woningstrook */ .pk-cijfers { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 8px 14px; margin: 0 0 12px; background: var(--kaart); border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius-klein); font-size: .72rem; color: var(--ink2); } .pk-cijfers b { font-size: .9rem; color: var(--ink); margin-right: 2px; } .pk-cijfers .is-stop b { color: var(--stop); } .pk-g__kop { padding: 12px 16px; align-items: center; } .pk-g__wie h2 { font-size: 1.1rem; margin: 0 0 2px; } .pk-g__bel { flex-direction: row; align-items: center; gap: 10px; } .pk-belknop { flex-direction: row; gap: 6px; padding: 8px 14px; font-size: .92rem; } .pk-g__snel { flex-wrap: nowrap; } .pk-g__snel .btn { padding: 6px 9px; font-size: .72rem; } .pk-g__ladder { flex-basis: 100%; text-align: right; } .pk-ws .bs-ws.is-compact { grid-template-columns: 150px minmax(0, 1fr); padding: 6px 8px; } .pk-ws .bs-ws.is-compact .bs-ws__beeld { height: 88px; } .pk-ws .bs-ws.is-compact .bs-ws__feit:nth-child(n+5) { display: none; } .pk-ws .bs-ws.is-compact .bs-ws__deuren { margin-top: 4px; } .pk-voortgang li { padding: 3px 10px 3px 4px; font-size: .68rem; } /* de belrij onder de naam, in één regel: het nummer en de vier knoppen naast elkaar */ .pk-g__kop { flex-direction: column; align-items: stretch; gap: 8px; } .pk-g__bel { justify-content: flex-start; flex-wrap: wrap; gap: 8px; } .pk-belknop { white-space: nowrap; } .pk-g__snel .btn { white-space: nowrap; } .pk-g__ladder { flex-basis: auto; text-align: left; margin-left: auto; } .pk-opener { margin-top: 2px; } /* nog lager: de uitleg onder de titel weg (staat in Script), de deuren van de woning alleen bij «groter», de kaart zelf strakker zodat huishouden, dag en dagdeel in één beeld staan */ .pk-kop p { display: none; } .pk-kop h1 { font-size: 1.1rem; margin: 0; } .pk-ws .bs-ws.is-compact .bs-ws__deuren { display: none; } .pk-ws .bs-ws.is-compact .bs-ws__beeld { height: 72px; } .pk-ws .bs-ws.is-compact { grid-template-columns: 120px minmax(0, 1fr); align-items: center; } .pk-vraag .vo-zeg { font-size: .98rem; margin: 4px 0 6px; } .pk-vraag .vo-tekst, .pk-vraag .vo-hint, .pk-vraag .vo-kaart > p.vo-sub { font-size: .74rem; margin: 0 0 6px; } .pk-vraag .vo-opties { gap: 6px; } .pk-vraag .vo-optie, .pk-vraag .vo-opties button { padding: 8px 12px; } .pk-vraag .vo-dagen button, .pk-vraag [data-vo-dag] { padding: 6px 8px; } /* op de huishoudkaart telt alleen wat je aanklikt: de zeg-regel, de drie vormen, de dagen, de dagdelen */ .pk-vraag .vo-kaart[data-vo-type="beslissers"] .vo-tekst, .pk-vraag .vo-kaart[data-vo-type="beslissers"] .vo-hint, .pk-vraag .vo-kaart[data-vo-type="beslissers"] .vo-dagkiezer > .vo-sub, .pk-vraag .vo-kaart[data-vo-type="beslissers"] .vo-mee { display: none; } .pk-vraag .vo-kaart[data-vo-type="beslissers"] .vo-dagkiezer .kicker { margin: 8px 0 4px; display: block; } .pk-vraag .vo-dagen { display: flex; flex-wrap: wrap; gap: 6px; } .pk-vraag .vo-dag { padding: 5px 9px; min-width: 0; } .pk-vraag .vo-dag b { font-size: .72rem; } .pk-vraag .vo-dag span { font-size: .62rem; } .pk-vraag .vo-dagdelen { display: flex; flex-wrap: wrap; gap: 6px; } .pk-vraag .vo-dagdeel { padding: 6px 12px; } /* PK12: de woningstrook staat ónder de vraag — de vraag is de taak, de woning is context */ .pk-ws { margin-top: 4px; } /* drie voorstellen als drie regels in plaats van tegels: nummer · dag en tijd · wie · één regel uitleg · waarom? */ .pk-voorstellen { grid-template-columns: 1fr; gap: 6px; } .pk-voorstel { display: grid; grid-template-columns: 26px auto auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding: 8px 12px; } .pk-voorstel__nr { white-space: nowrap; } .pk-voorstel b { font-size: .9rem; white-space: nowrap; } .pk-voorstel__wie { white-space: nowrap; font-size: .74rem; } .pk-voorstel em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pk-voorstel .pk-waarom { grid-column: 5; } .pk-voorstel .pk-waarom[open] { grid-column: 1 / -1; } .pk-vraag__nav { flex-wrap: nowrap; } .pk-vraag__nav .btn { white-space: nowrap; padding: 7px 10px; font-size: .78rem; } /* de huishoudkaart in één beeld: drie vormen op één rij, de kickers náást de dagen en dagdelen */ .pk-vraag .vo-kaart[data-vo-type="beslissers"] .vo-opties--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pk-vraag .vo-kaart[data-vo-type="beslissers"] .vo-optie { padding: 8px 10px; font-size: .78rem; gap: 7px; } .pk-vraag .vo-kaart[data-vo-type="beslissers"] .vo-dagkiezer { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 6px 10px; } .pk-vraag .vo-kaart[data-vo-type="beslissers"] .vo-dagkiezer .kicker { margin: 0; } .pk-vraag .vo-zeg { font-size: .92rem; line-height: 1.4; } .pk-vraag .vo-dagdeel { padding: 5px 7px; font-size: .72rem; white-space: nowrap; } .pk-vraag .vo-kop { margin-bottom: 4px; } .pk-voorstel__tag { font-style: normal; font-weight: 700; color: var(--ink2); } .pk-voorstel.is-wens:not(.is-actief) .pk-voorstel__tag { color: var(--goed-d); } .pk-voorstel.is-actief .pk-voorstel__tag { color: var(--knop-ink); } /* paneel Geboekt in één beeld: de drie vinkjes op één regel, notitie en taak naast elkaar */ .pk-boek__keuzes { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 6px; } .pk-vink { font-size: .8rem; } .pk-boek__velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .pk-boek .vo-veld { margin-top: 4px; } .pk-boek .vo-veld textarea { width: 100%; box-sizing: border-box; min-height: 0; padding: 7px 10px; font-size: .82rem; } .pk-boek > .vo-sub { margin: 6px 0 0; } /* VD6 (besluit 216) · de lead van de deur: chip met venster en fieldmarketeer, de notitie bij «Wat de klant al zei» */ .pk-deur { border-style: dashed; } .pk-filter--bron { margin-left: auto; } .pk-deurnotitie dd { font-style: italic; } /* ── planregels.css ── */ /* planregels.css — VP11 · de twee planner-schermen naast het bord. Geen kleurliteral: alles uit casa360-stijl.css. */ .pw-kop { margin-bottom: 18px; } .pw-kop h1 { margin: 2px 0 6px; } .pw-kop p { max-width: 76ch; color: var(--ink2); margin: 0; } .pw-rij { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) 90px auto; gap: 14px; align-items: center; padding: 13px 16px; border-bottom: var(--lijndikte) solid var(--lijn); } .pw-rij:last-child { border-bottom: 0; } .pw-rij--kop { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); } /* Kleur alleen waar hij betekenis draagt: een wens die binnen twee dagen valt en nog niet vastligt. De rest is inkt op paneel. */ .pw-rij.is-dringend { border-left: 3px solid var(--let); } .pw-wie { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pw-wie b { font-weight: 700; } .pw-wie em { font-style: normal; font-size: .78rem; color: var(--ink2); } .pw-bron { font-size: .72rem !important; color: var(--ink3) !important; } .pw-momenten, .pw-profiel { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; } .pw-m { font-size: .72rem; border: var(--lijndikte) solid var(--lijn2); border-radius: 99px; padding: 2px 9px; white-space: nowrap; } .pw-waarde { text-align: right; font-size: .8rem; color: var(--ink2); } .pw-acties { display: flex; justify-content: flex-end; } .pw-voet { margin-top: 14px; font-size: .8rem; color: var(--ink2); max-width: 82ch; } @media (max-width: 900px) { .pw-rij { grid-template-columns: minmax(0, 1fr); } .pw-waarde, .pw-acties { justify-content: flex-start; text-align: left; } } /* VP16 · de kaartpin-foto in de adviseurslijst */ .pw-foto { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; vertical-align: middle; } /* VP19 · gespreksvragen-editor */ .pw-vragen .pw-rij { grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) auto auto; align-items: start; } .pw-inp { font: inherit; font-size: .78rem; padding: 5px 8px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; width: 100%; margin-bottom: 4px; } .pw-inp--klein { max-width: 160px; font-size: .68rem; } .pw-inp:focus-visible, .pw-vraag select:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } .pw-vraag select { font: inherit; font-size: .74rem; padding: 4px 6px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; margin: 0 4px 4px 0; } .pw-vink { display: flex; flex-direction: column; gap: 4px; font-size: .72rem; } .pw-vink label { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; } .pw-voet--acties { display: flex; gap: 8px; align-items: center; margin-top: 10px; } /* FM2 · postwachtrij (deelt de lijstvorm van planwensen) */ .pq-rij { grid-template-columns: minmax(0, 2fr) auto minmax(0, 1.5fr) auto; } .pw-h3 { font-size: .9rem; margin: 18px 0 6px; } /* ---- Planregels-tab (besluit 289) ---- */ .pw-regels { padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; } .pw-regel { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 14px; align-items: center; padding: 8px 10px; border-radius: var(--radius-klein); } .pw-regel:hover { background: var(--accent-t2); } .pw-regel.is-gewijzigd { background: var(--let-t); } .pw-regel > span { display: flex; flex-direction: column; min-width: 0; } .pw-regel b { font: 700 .8rem var(--font-ui); } .pw-regel em { font-style: normal; font-size: .72rem; color: var(--ink2); line-height: 1.4; } .pw-regel small { font-size: .62rem; color: var(--ink3); } .pw-regel input, .pw-regel select { padding: 7px 10px; border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein); font: 600 .8rem var(--font-mono); color: var(--ink); background: var(--kaart); } .pw-opslaan { position: sticky; bottom: 12px; gap: 10px; } .pw-opslaan.is-dirty { border-color: var(--accent); box-shadow: var(--schaduw-zwevend); } .pw-knoppen { display: flex; gap: 8px; } /* ---- de noodschakelaar per planbron (11-10-2026) ---- */ .pw-bronnen__uitleg { margin: 0 0 4px; font-size: .74rem; color: var(--ink2); line-height: 1.5; max-width: 72ch; } .pw-bron { grid-template-columns: minmax(0, 1fr) auto; } .pw-bron.is-uit { background: var(--stop-t); } .pw-bron.is-uit small { color: var(--stop); font-size: .7rem; } .pw-punt { display: inline-block; width: 8px; height: 8px; border-radius: 99px; background: var(--stop); margin-right: 6px; vertical-align: 1px; } /* ── planrapportage.css ── */ /* planrapportage.css — Planning › Rapportage (docs/PLANNING-NORMEN-FM-BOUWSPEC.md §PN4). Alleen tokens uit casa360-stijl.css; geen kleurliterals, geen losse schaduw. */ .prap { max-width: var(--werkbreedte, 1240px); padding: 26px 32px 72px; } .prap-kop { margin-bottom: 14px; } .prap-kop h1 { margin: 4px 0 6px; font-size: 1.5rem; } .prap-kop p { margin: 0; max-width: 72ch; color: var(--ink2); font-size: .9rem; } .prap-bovenbalk, .prap-periode { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; font-size: .82rem; color: var(--ink2); } .prap-bovenbalk label, .prap-periode label { font-weight: 700; color: var(--ink); } .prap-dag { font: inherit; font-size: .82rem; padding: 6px 8px; border: var(--lijndikte, 1px) solid var(--c-lijn-2); border-radius: var(--radius-klein); background: var(--kaart); color: var(--ink); } .prap .bs-tabs { margin-bottom: 14px; } .prap .bs-tab .mono { margin-left: 6px; } .prap .bs-stats { margin-bottom: 12px; } .prap .bs-paneel { margin-bottom: 16px; } .prap-groep { margin: 16px 0 8px; font-size: 11px; line-height: 1.3; } .prap-pub { margin: 0 0 14px; font-size: .86rem; color: var(--ink2); max-width: 96ch; } .prap-pub a { margin-left: 6px; } .prap-tabelwrap { overflow-x: auto; } .prap-tabel td, .prap-tabel th { padding-left: 8px; padding-right: 8px; white-space: nowrap; } .prap-tabel td:first-child { white-space: normal; min-width: 150px; } .prap-tabel .r { text-align: right; } .prap-rij { cursor: pointer; transition: background var(--overgang); } .prap-rij:hover td { background: var(--accent-t2); } .prap-zacht { display: block; font-style: normal; font-size: 11.5px; color: var(--ink3); margin-top: 2px; } td.prap-zacht { display: table-cell; } .prap-stop { color: var(--stop-d, var(--stop)); font-weight: 700; } .prap-let { color: var(--let-d, var(--let)); font-weight: 700; } em.prap-let { display: block; font-style: normal; font-size: 11.5px; margin-top: 2px; } .prap-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; white-space: normal; } .prap-balk { display: inline-block; vertical-align: middle; width: 80px; height: 6px; margin-right: 8px; border-radius: 99px; background: var(--grijs); overflow: hidden; } .prap-balk i { display: block; height: 100%; background: var(--ink3); border-radius: 99px; } .prap-balk i.is-let { background: var(--let); } .prap-klein { padding: 5px 10px; font-size: .78rem; } .prap-uitleg { margin: 12px 0 0; max-width: 88ch; color: var(--ink2); font-size: .84rem; line-height: 1.5; } .prap .bs-paneel > .prap-uitleg, .prap .bs-paneel > .prap-acties, .prap .bs-paneel > .prap-regels { padding-left: 12px; padding-right: 12px; } .prap .bs-paneel > .prap-uitleg:last-child, .prap .bs-paneel > .prap-acties:last-child { padding-bottom: 12px; } .prap-acties { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .prap-sorteer { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-transform: inherit; letter-spacing: inherit; } .prap-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; } .prap-raster .bs-paneel { margin-bottom: 0; } .prap-regels { display: grid; gap: 6px; font-size: .86rem; } .prap-regel { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: var(--lijndikte, 1px) solid var(--c-lijn-2); } .prap-regel:last-child { border-bottom: 0; } .prap-regel span { color: var(--ink2); } /* de lade: de dag als tijdlijn */ .prap-h3 { margin: 0 0 8px; font-size: .92rem; } .prap-tijdlijn { display: grid; } .prap-stop-rij { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 6px 0; font-size: .86rem; } .prap-stop-rij .mono { color: var(--ink2); font-size: 12px; padding-top: 1px; } .prap-rit { display: grid; grid-template-columns: 52px 1fr; gap: 10px; font-size: .8rem; color: var(--ink2); } .prap-rit > span:last-child { border-left: 2px solid var(--c-lijn-2); padding: 3px 0 3px 12px; margin-left: -1px; } .prap-rit.is-stop > span:last-child { border-left-color: var(--stop); color: var(--stop-d, var(--stop)); font-weight: 700; } .prap-rit.is-let > span:last-child { border-left-color: var(--let); color: var(--let-d, var(--let)); font-weight: 700; } .prap-rit.is-bewust > span:last-child { border-left-color: var(--ink3); } .prap-oplossen { margin-top: 18px; } @media (max-width: 720px) { .prap { padding: 18px 16px 56px; } } @media (prefers-reduced-motion: reduce) { .prap-rij { transition: none; } } .prap-uitval { padding: 0 12px 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } /* ── sop.css ── */ /* ===================================================================== sop.css — Module 2.8 (deel 1) · S&OP. Integraal planningsbord, forecast, capaciteit vs. vraag, afgeleide behoefte en checklist- beheer. Uitsluitend tokens; losse gradients per module toegestaan (aanvulling 14-07-2026) mits token-kleuren. ===================================================================== */ .sop { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; } .sop-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; } .sop-kop h1 { margin: 2px 0 4px; font-size: 1.35rem; } .sop-kop__sub { margin: 0; font-size: .8rem; color: var(--c-ink-2); max-width: 56ch; } .sop-tabs { display: flex; gap: 6px; flex-wrap: wrap; } .sop-tab { font: 700 .74rem var(--font-ui); padding: 8px 13px; border-radius: var(--radius-klein); border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); color: var(--c-ink-2); cursor: pointer; transition: background var(--overgang), color var(--overgang); } .sop-tab:hover { background: var(--c-creme); } .sop-tab.is-actief { background: var(--donker, var(--c-ink)); border-color: var(--c-ink); color: var(--knop-ink); } .sop-regiorij { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; } .sop-chip { padding: 6px 13px; border-radius: var(--radius-klein); cursor: pointer; font: 600 .74rem var(--font-ui); border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); color: var(--c-ink-2); transition: background var(--overgang); } .sop-chip:hover { background: var(--c-creme); } .sop-chip.is-actief { background: var(--c-groen-d); border-color: var(--c-groen-d); color: var(--knop-ink); } .sop-chip--klein { padding: 5px 11px; font-size: .68rem; } .sop-regelvoet { margin-top: 14px; font-size: .62rem; color: var(--c-ink-3); } .sop-hint { font-size: .74rem; color: var(--c-ink-3); margin: 12px 0 0; } .sop-intro { font-size: .8rem; color: var(--c-ink-2); max-width: 68ch; margin: 0 0 14px; line-height: 1.5; } .sop-sectiekop { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-2); margin: 24px 0 10px; } .sop-sectiekop:first-child { margin-top: 0; } /* signaal-/adviesstrook */ .sop-signaal { display: flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 12px; margin-bottom: 16px; border: var(--lijndikte) solid; font: 600 .78rem var(--font-ui); color: var(--c-ink); } .sop-signaal > i { width: 8px; height: 8px; border-radius: var(--radius-pill); flex: none; } .sop-signaal > span { flex: 1; } .sop-signaal__knop { font: 700 .7rem var(--font-ui); color: var(--knop-ink); border: none; border-radius: 7px; padding: 6px 13px; cursor: pointer; white-space: nowrap; } /* scenario what-if */ .sop-scenario { padding: 16px 20px; margin-bottom: 18px; } .sop-scenario__kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .sop-scenbadge { font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 7px; } .sop-scenario__rek { flex: 1; } .sop-sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; } .sop-slider label { display: flex; justify-content: space-between; font: 600 .76rem var(--font-ui); color: var(--c-ink); margin-bottom: 6px; } .sop-slider input[type="range"] { width: 100%; } .sop-scenario__voet { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 13px; border-top: var(--lijndikte) solid var(--c-lijn); font: 500 .72rem var(--font-ui); color: var(--c-ink-3); } .sop-scenario__acties { display: flex; gap: 8px; align-items: center; } .sop-vastlabel { display: inline-flex; align-items: center; gap: 6px; font: 700 .72rem var(--font-ui); color: var(--c-groen-d); } .sop-vastlabel i { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--c-groen); } /* integraal bord */ .sop-bord { padding: 6px 6px 10px; overflow-x: auto; } .sop-bord__scroll { display: flex; gap: 0; min-width: 840px; } .sop-bord__labels { flex: none; width: 200px; position: sticky; left: 0; z-index: 2; background: var(--kaart); padding: 6px 10px 0; } .sop-bord__labelkop { height: 62px; } .sop-bord__laag { display: flex; align-items: center; gap: 7px; font: 600 .74rem var(--font-ui); color: var(--c-ink); height: 56px; } .sop-bord__laag.is-stil { color: var(--c-ink-3); } .sop-bord__laag .mono { color: var(--c-ink-3); width: 16px; text-align: center; } .sop-bord__kolom { flex: 1; min-width: 78px; padding: 6px 4px 0; border-left: var(--lijndikte) solid var(--c-lijn); } .sop-bord__kolomkop { text-align: center; padding: 9px 6px; border-radius: 9px 9px 0 0; border-bottom: 2px solid; } .sop-bord__kolomkop i { display: block; width: 7px; height: 7px; border-radius: var(--radius-pill); margin: 0 auto 4px; } .sop-bord__kolomkop strong { display: block; font-size: .74rem; } .sop-bord__kolomkop span { display: block; font: 500 .56rem var(--font-ui); color: var(--c-ink-3); } .sop-bord__status { margin-top: 2px; font-size: .54rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; } .sop-bord__cel { height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 0 4px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .sop-bord__cel:last-child { border-bottom: none; } .sop-bord__waarde { min-width: 0; } .sop-bord__waarde strong { display: block; font-size: .84rem; } .sop-bord__waarde span { font: 600 .54rem var(--font-ui); white-space: nowrap; } .sop-bord__cel > i { width: 7px; flex: none; border-radius: var(--radius-pill); align-self: flex-end; margin-bottom: 9px; } .sop-legenda { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font: 600 .7rem var(--font-ui); color: var(--c-ink-3); } .sop-legenda span { display: flex; align-items: center; gap: 6px; } .sop-legenda i { width: 9px; height: 9px; border-radius: var(--radius-pill); } .sop-legenda__streep { width: 16px !important; height: 0 !important; border-radius: 0 !important; border-top: 2px dashed var(--c-groen-d); } .sop-legenda__lijn { width: 16px !important; height: 0 !important; border-radius: 0 !important; border-top: 2px solid var(--c-groen); } .sop-legenda__stil { color: var(--c-ink-3); } /* tabellen (forecast / rolling / materiaal / checklist) */ .sop-tabel { overflow: hidden; } .sop-rij { display: grid; gap: 10px; padding: 13px 20px; border-top: var(--lijndikte) solid var(--c-lijn); align-items: center; } .sop-rij--kop { background: var(--c-paneel); border-top: none; padding: 11px 20px; } .sop-rij--fc { grid-template-columns: 1.6fr .8fr .8fr 2fr .8fr; } .sop-rij--roll { grid-template-columns: .8fr .9fr .9fr 2fr .8fr; } .sop-rij--mat { grid-template-columns: 1.6fr .9fr .8fr .8fr 1.4fr; } .sop-rij--cl { grid-template-columns: 1fr auto auto; } .sop-rij__naam { font: 600 .8rem var(--font-ui); } .sop-rij__sku { display: block; font-size: .6rem; color: var(--c-ink-3); } .sop-rij__verwacht { text-align: right; font-size: .92rem; color: var(--c-groen-d); } .sop-rij__stil { color: var(--c-ink-3); } .sop-rij__actie { text-align: right; } .sop-fcbalk { display: block; height: 9px; border-radius: var(--radius-pill); background: var(--c-groen-d); } .sop-fctotaal { display: inline-flex; flex-direction: column; background: var(--c-groen-d); border-radius: 12px; padding: 15px 20px; color: var(--knop-ink); margin-bottom: 18px; } .sop-fctotaal strong { font-size: 1.6rem; } .sop-fctotaal span { font: 600 .7rem var(--font-ui); opacity: .85; } .sop-rollbalk { position: relative; height: 7px; } .sop-rollbalk i { position: absolute; top: 0; left: 0; height: 7px; border-radius: var(--radius-pill); display: block; } .sop-rollbalk__p { width: 100%; background: var(--c-groen-t); } .sop-rollbalk__w { background: var(--c-groen-d); } /* capaciteit-grafieken */ .sop-grafieken { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; } .sop-grafiek { padding: 18px 20px; } .sop-grafiek strong { font-size: .88rem; } .sop-grafiek__sub { font: 500 .72rem var(--font-ui); color: var(--c-ink-3); margin: 2px 0 14px; } .sop-grafiek svg { width: 100%; height: 180px; } .sop-grafiek__labels { display: flex; justify-content: space-between; font-size: .56rem; color: var(--c-ink-3); margin-top: 4px; } /* afgeleide behoefte · personeel */ .sop-pers { padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .sop-pers__cijfers { display: flex; gap: 28px; flex-wrap: wrap; } .sop-pers__cijfers strong { display: block; font-size: 1.4rem; } .sop-pers__cijfers span { font: 600 .7rem var(--font-ui); color: var(--c-ink-3); } .sop-pers__actie { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font: 600 .78rem var(--font-ui); } /* checklist-beheer */ .sop-versie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .sop-versiechip { font-weight: 700; font-size: .74rem; color: var(--c-groen-d); background: var(--c-groen-t); padding: 4px 11px; border-radius: var(--radius-pill); } .sop-versie__meta { font: 500 .72rem var(--font-ui); color: var(--c-ink-3); } .sop-cl-nieuw { padding: 16px 18px; margin-bottom: 16px; } .sop-cl-nieuw > strong { display: block; font-size: .8rem; margin-bottom: 10px; } .sop-cl-nieuw__scopes { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; } .sop-cl-nieuw__rij { display: flex; gap: 9px; align-items: flex-end; } .sop-cl-nieuw__veld { flex: 1; display: flex; flex-direction: column; gap: 4px; } .sop-cl-nieuw__veld input { padding: 11px 13px; border: 1.5px solid var(--c-lijn-2); border-radius: 10px; font: 500 .8rem var(--font-ui); color: var(--c-ink); background: var(--kaart); } .sop-scopechip { font: 700 .58rem var(--font-ui); padding: 3px 9px; border-radius: var(--radius-pill); white-space: nowrap; } .sop-verwijder { padding: 6px 11px; border-radius: 8px; border: var(--lijndikte) solid var(--c-rood); background: var(--c-rood-t); color: var(--c-rood); font: 600 .68rem var(--font-ui); cursor: pointer; } /* Capaciteit-heatmap (C1a) */ .sop-hm { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; margin-bottom: 14px; } .sop-hm__rij { display: grid; grid-template-columns: 80px repeat(8, 1fr); gap: 5px; align-items: center; } .sop-hm__rij--kop { color: var(--c-ink-2); font-size: 10.5px; } .sop-hm__wk { text-align: center; } .sop-hm__regio { font-size: 12.5px; font-weight: 600; } .sop-hm__cel { border: 0; border-radius: 8px; padding: 8px 0; font: inherit; font-size: 11.5px; cursor: pointer; color: var(--c-ink); } .sop-hm__cel--groen { background: color-mix(in srgb, var(--c-groen) 30%, var(--c-paneel)); } .sop-hm__cel--amber { background: color-mix(in srgb, var(--c-amber) 38%, var(--c-paneel)); } .sop-hm__cel--rood { background: color-mix(in srgb, var(--c-rood) 30%, var(--c-paneel)); font-weight: 700; } /* Live pijplijn-voeding (uitbreiding 7) */ .sop-fcbalk.is-knel { background: var(--c-terra); } .sop-sub { font: 400 11.5px var(--font-ui); color: var(--c-ink-3); margin: 10px 2px 0; } /* ── veldapps.css ── */ /* ===================================================================== veldapps.css — Module 2.10 · Veld-apps. Telefoonframes voor de adviseur-app (Casa360) en uitvoerder-app (Casa365). Tokens only; losse gradients per module toegestaan (aanvulling 14-07-2026). ===================================================================== */ .va { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; } .va-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .va-kop h1 { margin: 2px 0 4px; font-size: 1.35rem; } .va-kop p { margin: 0; font-size: .8rem; color: var(--c-ink-2); max-width: 56ch; } .va-tabs { display: flex; gap: 6px; } .va-tab { font: 700 .76rem var(--font-ui); padding: 8px 14px; border-radius: var(--radius-klein); border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); color: var(--c-ink-2); cursor: pointer; } .va-tab.is-actief { background: var(--donker, var(--c-ink)); border-color: var(--c-ink); color: var(--knop-ink); } .va-groen { color: var(--c-groen-d); } .va-bag { font-size: .62rem; color: var(--c-ink-3); } .va-splitsing { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 24px; align-items: start; } .va-splitsing--uitv { grid-template-columns: 420px minmax(0, 1fr); } @media (max-width: 1000px) { .va-splitsing, .va-splitsing--uitv { grid-template-columns: 1fr; } } .va-splitsing > div > .kicker { display: block; margin-bottom: 8px; } /* ---------- telefoonframe ---------- */ .va-telefoon { border-radius: 32px; background: var(--donker, var(--c-ink)); padding: 12px; } .va-telefoon--uitv { border-radius: 38px; position: sticky; top: 16px; } .va-scherm { border-radius: 24px; overflow: hidden; background: var(--c-creme); } .va-scherm--uitv { border-radius: 28px; display: flex; flex-direction: column; height: 720px; } /* adviseur-app */ .va-appkop { padding: 16px 16px 15px; color: var(--knop-ink); } .va-appkop__rij { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; } .va-wordmark { font: 700 .8rem var(--font-ui); } .va-wordmark em { font-style: normal; opacity: .7; } .va-365 { color: var(--c-terra-t); opacity: 1 !important; } .va-appkop__rij .mono { font-size: .56rem; opacity: .6; } /* B11 · PWA: meldingen-vlag + outbox-chip in de app-kop */ .va-appkop__rechts { display: flex; align-items: center; gap: 8px; } .va-belknop { position: relative; background: color-mix(in srgb, var(--kaart) 14%, transparent); border: 1px solid color-mix(in srgb, var(--kaart) 22%, transparent); color: var(--knop-ink); border-radius: var(--radius-klein); padding: 3px 9px; font-size: .68rem; cursor: pointer; } .va-belknop.is-nieuw { background: color-mix(in srgb, var(--kaart) 26%, transparent); } .va-belknop__tel { margin-left: 5px; font-size: .58rem; font-weight: 800; } .va-outboxchip { font-size: .58rem; opacity: .85; border: 1px solid color-mix(in srgb, var(--kaart) 30%, transparent); border-radius: 99px; padding: 2px 7px; } /* B12 · identiteits-chip: demo-naam vs aangemelde sessie */ .va-idchip { background: transparent; border: 1px dashed color-mix(in srgb, var(--kaart) 40%, transparent); color: var(--knop-ink); border-radius: var(--radius-klein); padding: 3px 9px; font: 600 .58rem var(--font-ui); cursor: pointer; opacity: .85; } .va-idchip.is-aangemeld { border-style: solid; background: color-mix(in srgb, var(--kaart) 18%, transparent); opacity: 1; } .va-meldingen { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; margin: 10px 0; } .va-melding { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 10px 12px; background: var(--c-creme); } .va-melding.is-nieuw { border-color: var(--c-groen); background: var(--c-groen-t); } .va-melding__glyph { font-size: .8rem; color: var(--c-groen-d); margin-top: 1px; } .va-melding div { display: flex; flex-direction: column; gap: 2px; } .va-melding strong { font-size: .74rem; } .va-melding span { font: 500 .66rem var(--font-ui); color: var(--c-ink-2); } .va-melding em { font-style: normal; font-size: .56rem; color: var(--c-ink-3); } .va-appkop > strong { display: block; font-size: 1rem; } .va-appkop > span { font: 500 .66rem var(--font-ui); opacity: .75; } .va-appkop__stats { display: flex; gap: 8px; margin-top: 12px; } .va-appkop__stats > div { flex: 1; background: color-mix(in srgb, var(--kaart) 14%, transparent); border-radius: 10px; padding: 8px 10px; } .va-appkop__stats strong { display: block; font-size: .84rem; } .va-appkop__stats span { font: 500 .56rem var(--font-ui); opacity: .7; } .va-appbody { padding: 13px 13px 16px; } .va-dagrij { display: flex; gap: 5px; margin-bottom: 8px; } .va-dagchip { flex: 1; padding: 7px 0; border-radius: 9px; text-align: center; font: 600 .68rem var(--font-ui); cursor: pointer; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); color: var(--c-ink-2); } .va-dagchip.is-actief { background: var(--donker, var(--c-ink)); border-color: var(--c-ink); color: var(--knop-ink); font-weight: 700; } .va-afspraken { display: flex; flex-direction: column; gap: 9px; } .va-afspraken .bs-leeg-rij { border-top: none; background: var(--kaart); border-radius: 12px; } .va-afspraak { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 11px 13px; border-radius: 12px; border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-groen); background: var(--kaart); cursor: pointer; font-family: var(--font-ui); } .va-afspraak.is-actief { border-color: var(--c-groen-d); background: var(--c-groen-t); border-left-width: 3px; } .va-afspraak__kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .va-afspraak__kop strong { font-size: .8rem; } .va-afspraak__kop em { font: 500 .58rem var(--font-ui); font-style: normal; color: var(--c-ink-3); margin-left: 6px; } .va-afspraak > strong { font-size: .8rem; } .va-afspraak__adres { font: 500 .64rem var(--font-ui); color: var(--c-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .va-afspraak__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 600 .6rem var(--font-ui); margin-top: 3px; } .va-afspraak__meta .mono { background: var(--c-paneel); border-radius: 6px; padding: 2px 6px; } .va-subsidie { color: var(--c-amber) !important; background: var(--c-amber-t) !important; } .va-partner { color: var(--c-ink-2); background: var(--c-paneel); border-radius: 6px; padding: 2px 6px; } .va-adviseurs { display: flex; gap: 8px; margin-top: 14px; justify-content: center; flex-wrap: wrap; } .va-advchip { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font: 700 .74rem var(--font-ui); color: var(--knop-ink); cursor: pointer; border: none; opacity: .4; } .va-advchip.is-actief { opacity: 1; outline: 3px solid var(--c-groen); outline-offset: 2px; } .va-detail { overflow: hidden; } .va-detail__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 20px 0; } .va-detail__kop strong { display: block; font-size: 1.02rem; } /* PF3 (gat 3) · bellen en route vanuit de afspraak */ .va-contact { display: block; margin-top: 4px; font-size: .84rem; color: var(--c-ink-2); } .va-belknop, .va-routeknop { font-weight: 700; color: var(--c-ink); text-decoration: none; border-bottom: 1px solid var(--c-lijn-2); } .va-belknop:focus-visible, .va-routeknop:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .va-detail__kop span:not(.chip) { font: 500 .74rem var(--font-ui); color: var(--c-ink-3); } .va-detail__chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 20px 18px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .va-detail__chips > span { font: 600 .68rem var(--font-ui); background: var(--c-creme); border-radius: 8px; padding: 5px 10px; } .va-detail__body { padding: 18px 20px; } .va-detail__body > .kicker { display: block; margin-bottom: 11px; } .va-statusgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; } @media (max-width: 800px) { .va-statusgrid { grid-template-columns: 1fr 1fr; } } .va-statusknop { padding: 9px 11px; border-radius: 10px; font: 600 .7rem var(--font-ui); cursor: pointer; text-align: left; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); color: var(--c-ink-2); } .va-statusknop:hover { background: var(--c-creme); } .va-statusknop.is-actief { border-color: var(--c-groen-d); background: var(--c-groen-t); color: var(--c-groen-d); font-weight: 700; } .va-notitie { margin-top: 16px; padding: 13px 15px; border-radius: 12px; background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); font: 500 .72rem/1.5 var(--font-ui); color: var(--c-ink-2); } .va-leeg { padding: 40px 30px; border-radius: var(--radius); border: 1.5px dashed var(--c-lijn-2); background: var(--c-creme); text-align: center; font: 500 .8rem/1.5 var(--font-ui); color: var(--c-ink-3); } /* ---------- uitvoerder-app ---------- */ .va-uakop { background: var(--donker, var(--c-ink)); color: var(--knop-ink); padding: 16px 18px 14px; flex: none; } .va-net { font: 700 .56rem var(--font-mono); padding: 4px 9px; border-radius: var(--radius-klein); cursor: pointer; border: none; background: color-mix(in srgb, var(--c-groen) 28%, transparent); color: var(--c-groen-t); } .va-net.is-offline { background: var(--c-terra); color: var(--knop-ink); } .va-uakop__wie { display: flex; align-items: center; gap: 11px; } .va-uakop__wie i { width: 40px; height: 40px; border-radius: 12px; background: var(--nav2); display: grid; place-items: center; font: 800 .78rem var(--font-ui); font-style: normal; color: var(--knop-ink); flex: none; } .va-uakop__wie strong { display: block; font-size: .88rem; } .va-uakop__wie span { font: 500 .62rem var(--font-ui); opacity: .55; } .va-uabody { flex: 1; overflow-y: auto; padding: 15px 15px 18px; } .va-uabody > .kicker { display: block; margin: 4px 0 7px; } .va-uatabs { flex: none; display: flex; background: var(--donker, var(--c-ink)); padding: 6px 4px 8px; } .va-uatab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px; cursor: pointer; background: none; border: none; color: color-mix(in srgb, var(--knop-ink) 42%, transparent); } .va-uatab.is-actief { color: var(--knop-ink); } .va-uatab .mono { font-size: .84rem; line-height: 1; } .va-uatab span:last-child { font: 500 .54rem var(--font-ui); letter-spacing: .02em; } .va-uatab.is-actief span:last-child { font-weight: 700; } .va-route { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 13px; border-radius: 13px; background: var(--donker, var(--c-ink)); color: var(--knop-ink); margin-bottom: 13px; } .va-route strong { display: block; font-size: .76rem; } .va-route span { font: 500 .6rem var(--font-ui); opacity: .6; } .va-route em { font-style: normal; font-size: .58rem; font-weight: 700; padding: 5px 9px; border-radius: 8px; background: var(--c-terra); color: var(--knop-ink); } .va-kluslijst { display: flex; flex-direction: column; gap: 9px; } .va-klus { border: var(--lijndikte) solid var(--c-lijn); border-radius: 13px; overflow: hidden; background: var(--kaart); } .va-klus__kop { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 13px; cursor: pointer; border: none; background: var(--c-creme); text-align: left; font-family: var(--font-ui); } .va-klus__kop.is-open { background: var(--kaart); } .va-klus__kop > strong { font-size: .78rem; width: 44px; flex: none; } .va-klus__kop i { width: 9px; height: 9px; border-radius: var(--radius-pill); flex: none; } .va-klus__wie { flex: 1; min-width: 0; display: flex; flex-direction: column; } .va-klus__wie strong { font-size: .76rem; } .va-klus__wie span { font: 500 .62rem var(--font-ui); color: var(--c-ink-3); } .va-klus__kop em { font-style: normal; font-size: .54rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .va-klus__detail { padding: 0 13px 13px; } .va-klus__velden { display: flex; flex-direction: column; gap: 6px; padding: 11px 0; border-top: var(--lijndikte) solid var(--c-lijn); margin-bottom: 8px; } .va-klus__velden > div { display: flex; justify-content: space-between; gap: 10px; font: 500 .66rem var(--font-ui); color: var(--c-ink-2); } .va-klus__velden strong { color: var(--c-ink); text-align: right; font-weight: 600; } .va-klus__detail .kicker { display: block; margin-bottom: 6px; } .va-mat { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; } .va-mat span { font: 600 .6rem var(--font-ui); padding: 4px 9px; border-radius: 7px; background: var(--c-groen-t); color: var(--c-groen-d); } /* blok I · de hoofdknop van de uitvoerdersapp is de hoofdknop van het platform: de signaalkleur (oker) is voor signalen */ .va-oranje { width: 100%; padding: 11px; border: none; border-radius: var(--radius-klein); background: var(--knop); color: var(--knop-ink); font: 700 .74rem var(--font-ui); cursor: pointer; } .va-wbtitel { font: 700 .7rem var(--font-ui); margin-bottom: 9px; } .va-stappen { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; } .va-stap { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px; cursor: pointer; border: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); text-align: left; font-family: var(--font-ui); } .va-stap i { width: 26px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center; font-size: .68rem; font-style: normal; background: var(--c-paneel); color: var(--c-ink-3); } .va-stap span { font: 600 .76rem var(--font-ui); color: var(--c-ink-2); } .va-stap.is-actief { border-color: var(--c-terra); background: var(--c-terra-t); } .va-stap.is-actief i { background: var(--c-terra); color: var(--knop-ink); } .va-stap.is-actief span { color: var(--c-ink); font-weight: 700; } .va-stap.is-klaar { background: var(--c-groen-t); } .va-stap.is-klaar i { background: var(--c-groen); color: var(--knop-ink); } .va-stap.is-klaar span { color: var(--c-groen-d); } .va-stapkaart { border: var(--lijndikte) solid var(--c-lijn); border-radius: 13px; padding: 14px; background: var(--kaart); margin-bottom: 13px; } .va-stapkaart > strong { display: block; font-size: .72rem; margin-bottom: 3px; } .va-stapkaart > span { display: block; font: 500 .62rem var(--font-ui); color: var(--c-ink-3); margin-bottom: 11px; } .va-scan { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; border-radius: 10px; background: var(--c-groen-t); margin-bottom: 7px; } .va-scan strong { display: block; font-size: .68rem; } .va-scan .mono { font-size: .56rem; color: var(--c-groen-d); } .va-scan em { font-style: normal; font-weight: 700; color: var(--c-groen); } .va-scanknop { width: 100%; padding: 12px; border: 1.5px dashed var(--c-terra); border-radius: 11px; background: var(--c-terra-t); color: var(--c-terra-d); font: 700 .7rem var(--font-ui); cursor: pointer; } .va-scanklaar { text-align: center; padding: 10px; font: 600 .66rem var(--font-ui); color: var(--c-groen-d); } .va-fotos { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; } .va-foto { aspect-ratio: 1; border-radius: 9px; background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-lijn); position: relative; } .va-foto em { position: absolute; top: 4px; left: 4px; font: 600 .5rem var(--font-mono); font-style: normal; text-transform: uppercase; color: var(--knop-ink); background: color-mix(in srgb, var(--c-ink) 55%, transparent); padding: 2px 4px; border-radius: 4px; } .va-foto--leeg { background: none; border: 1.5px dashed var(--c-terra); display: grid; place-items: center; color: var(--c-terra); opacity: .6; } .va-checkrij { display: flex; align-items: center; gap: 9px; font: 600 .7rem var(--font-ui); color: var(--c-groen-d); margin-top: 7px; } .va-checkrij i { width: 19px; height: 19px; border-radius: 6px; background: var(--c-groen); display: grid; place-items: center; color: var(--knop-ink); font-size: .6rem; font-style: normal; } .va-handtekening { border: 1.5px dashed var(--c-lijn-2); border-radius: 11px; padding: 14px; text-align: center; } .va-handtekening em { font-size: 1.25rem; transform: rotate(-4deg); display: inline-block; } .va-handtekening span { display: block; font: 500 .56rem var(--font-ui); color: var(--c-ink-3); margin-top: 3px; } .va-afwrij { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .va-afwchip { padding: 7px 11px; border-radius: 9px; cursor: pointer; font: 600 .64rem var(--font-ui); border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); color: var(--c-ink-2); } .va-afwchip.is-actief { font-weight: 700; } .va-afwmelding { border-radius: 11px; padding: 11px 13px; margin-bottom: 12px; border: var(--lijndikte) solid var(--c-terra); background: var(--kaart); } .va-afwmelding strong { display: block; font-size: .66rem; margin-bottom: 3px; } .va-afwmelding span { font: 500 .62rem/1.5 var(--font-ui); color: var(--c-ink-2); } .va-indienen { width: 100%; padding: 13px; border: none; border-radius: 12px; font: 700 .78rem var(--font-ui); cursor: pointer; background: var(--c-terra); color: var(--knop-ink); } .va-indienen.is-uit { background: var(--c-paneel); color: var(--c-ink-3); cursor: not-allowed; } .va-verdkop { border-radius: 15px; padding: 16px 17px; background: var(--donker, var(--c-ink)); color: var(--knop-ink); margin-bottom: 14px; } .va-verdkop .kicker { color: color-mix(in srgb, var(--knop-ink) 55%, transparent); display: block; margin-bottom: 8px; } .va-verdkop > strong { display: block; font-size: 1.6rem; color: var(--c-terra-t); } .va-verdkop > span { font: 500 .66rem var(--font-ui); opacity: .65; } .va-verdkop__duo { display: flex; gap: 9px; margin-top: 14px; } .va-verdkop__duo > div { flex: 1; padding: 10px 11px; border-radius: 11px; background: color-mix(in srgb, var(--kaart) 7%, transparent); } .va-verdkop__duo strong { display: block; font-size: .84rem; } .va-verdkop__duo span { font: 500 .54rem var(--font-ui); opacity: .55; } .va-verdiensten { display: flex; flex-direction: column; gap: 7px; } .va-verdienste { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; background: var(--kaart); } .va-verdienste > i { width: 7px; height: 7px; border-radius: var(--radius-pill); flex: none; } .va-verdienste > div:first-of-type { flex: 1; min-width: 0; } .va-verdienste strong { display: block; font-size: .72rem; } .va-verdienste strong .mono { font-size: .6rem; font-weight: 500; color: var(--c-ink-3); } .va-verdienste > div:first-of-type > span { font: 600 .6rem var(--font-ui); } .va-verdienste__bedrag { text-align: right; } .va-verdienste__bedrag strong { font-size: .8rem; } .va-verdienste__bedrag span { font: 500 .54rem var(--font-ui); color: var(--c-ink-3); } .va-voetnoot { margin: 12px 0 0; font: 500 .6rem/1.5 var(--font-ui); color: var(--c-ink-3); text-align: center; } .va-chat { display: flex; flex-direction: column; gap: 9px; margin-bottom: 13px; } .va-bericht { display: flex; justify-content: flex-start; } .va-bericht.is-mijn { justify-content: flex-end; } .va-bericht > div { max-width: 78%; padding: 9px 12px; border-radius: 13px 13px 13px 4px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); } .va-bericht.is-mijn > div { border-radius: 13px 13px 4px 13px; background: var(--c-terra-t); border-color: var(--c-terra); } .va-bericht span { display: block; font: 600 .5rem var(--font-mono); color: var(--c-ink-3); margin-bottom: 3px; } .va-bericht p { margin: 0; font: 500 .7rem/1.45 var(--font-ui); } .va-supportacties { display: flex; gap: 6px; margin-bottom: 10px; } .va-supportacties button, .va-supportacties .va-belkantoor { flex: 1; text-align: center; text-decoration: none; padding: 9px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 10px; background: var(--kaart); font: 700 .62rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; } .va-chatrij { display: flex; gap: 7px; align-items: flex-end; } .va-chatveld { flex: 1; display: flex; flex-direction: column; gap: 3px; } .va-chatveld input { padding: 11px 13px; border: 1.5px solid var(--c-lijn-2); border-radius: 11px; font: 500 .7rem var(--font-ui); background: var(--kaart); color: var(--c-ink); } .va-stuur { width: auto; padding: 11px 15px; } .va-score { display: flex; align-items: center; gap: 14px; padding: 15px; border-radius: 14px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); margin-bottom: 13px; } .va-scorering { position: relative; width: 64px; height: 64px; flex: none; display: grid; place-items: center; } .va-scorering svg { position: absolute; inset: 0; transform: rotate(-90deg); } .va-scorering circle { fill: none; stroke-width: 6; } .va-scorering__spoor { stroke: var(--c-amber-t); } .va-scorering__waarde { stroke: var(--c-amber); stroke-linecap: round; } .va-scorering em { font-style: normal; font-weight: 800; font-size: .95rem; color: var(--c-amber); } .va-score strong { display: block; font-size: .78rem; } .va-score span { font: 500 .62rem var(--font-ui); color: var(--c-ink-3); } .va-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .va-badge { flex: 1; min-width: 120px; border: var(--lijndikte) solid; border-radius: 12px; padding: 12px; background: var(--kaart); } .va-badge.is-uit { opacity: .55; } .va-badge i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: .84rem; font-style: normal; background: var(--c-creme); } .va-badge strong { display: block; font-size: .66rem; margin-top: 7px; } .va-badge span { font: 500 .54rem var(--font-ui); color: var(--c-ink-3); } .va-reviews { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .va-review { border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; padding: 11px 12px; background: var(--kaart); } .va-sterren { font: 600 .62rem var(--font-ui); color: var(--c-amber); display: block; margin-bottom: 4px; } .va-review p { margin: 0; font: 500 .68rem/1.5 var(--font-ui); color: var(--c-ink-2); } .va-review em { font: 500 .56rem var(--font-ui); font-style: normal; color: var(--c-ink-3); display: block; margin-top: 5px; } .va-certs { display: flex; flex-direction: column; gap: 6px; } .va-cert { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; background: var(--kaart); } .va-cert i { width: 7px; height: 7px; border-radius: var(--radius-pill); flex: none; } .va-cert strong { flex: 1; font-size: .68rem; } .va-cert span { font: 600 .58rem var(--font-ui); } .va-kennis { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .va-kennis button { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 13px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; background: var(--kaart); cursor: pointer; font-family: var(--font-ui); text-align: left; } .va-kennis span { font: 600 .68rem var(--font-ui); } .va-kennis em { font-style: normal; color: var(--c-terra); font-weight: 600; } /* context-paneel rechts van de uitvoerder-app */ .va-uitleg { padding: 22px 24px; margin-bottom: 16px; } .va-uitleg h2 { margin: 8px 0; font-size: 1.3rem; letter-spacing: -.01em; } .va-uitleg p { margin: 0; font: 400 .84rem/1.6 var(--font-ui); color: var(--c-ink-2); max-width: 62ch; } .va-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (max-width: 800px) { .va-features { grid-template-columns: 1fr; } } .va-features .kaart { padding: 16px 18px; } .va-features strong { display: block; font-size: .8rem; margin-bottom: 5px; } .va-features p { margin: 0; font: 400 .74rem/1.5 var(--font-ui); color: var(--c-ink-2); } /* 4.5 · live provisiestatus in de adviseur-app */ .va-provisie { margin-top: 8px; padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, var(--kaart) 14%, transparent); font-size: .6rem; color: var(--knop-ink); } /* B9 · ESS-paneel + afrond-editor */ .va-ess { margin-top: 10px; border-top: var(--lijndikte) solid var(--c-lijn); padding-top: 8px; } .va-esstabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; } .va-essinhoud { display: flex; flex-direction: column; gap: 4px; } .va-essprov { display: flex; align-items: baseline; gap: 8px; padding: 6px 2px; } .va-essprov strong { font-size: 1.15rem; color: var(--c-groen-d); } .va-essprov span { font: 500 .6rem var(--font-ui); color: var(--c-ink-3); } .va-essrij { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 5px 2px; border-bottom: var(--lijndikte) solid var(--c-lijn); font: 500 .64rem var(--font-ui); } .va-essrij:last-of-type { border-bottom: 0; } .va-essrij .is-rood { color: var(--c-rood); } .va-essrij--blok { flex-direction: column; align-items: flex-start; gap: 2px; } .va-b9editor { padding: 4px 0 10px; display: flex; flex-direction: column; gap: 6px; } .va-b9rij { display: grid; grid-template-columns: 1fr 70px 76px 90px 26px; gap: 6px; align-items: center; } .va-b9rij input, .va-b9rij select { font: 500 .68rem var(--font-ui); padding: 7px 8px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 8px; background: var(--c-paneel); color: var(--c-ink); } /* B9b · fieldmarketeer-app: wijkkaart, looplijst en het klant-plan-scherm */ .va-kaartje { border: var(--lijndikte) solid var(--c-lijn); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; background: var(--c-paneel); } .va-stippen { display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 0 4px; } .va-stip { width: 14px; height: 14px; border-radius: 50%; background: var(--c-ink-3); display: inline-block; } .va-stip.is-afspraak { background: var(--c-groen-d); } .va-stip.is-niet-thuis { background: var(--c-amber); } .va-stip.is-geen-interesse { background: var(--c-rood); } .va-kaartje__legenda { font: 500 .58rem var(--font-ui); color: var(--c-ink-3); } .va-kaartje__legenda .is-groen { color: var(--c-groen-d); font-style: normal; } .va-kaartje__legenda .is-amber { color: var(--c-amber); font-style: normal; } .va-kaartje__legenda .is-rood { color: var(--c-rood); font-style: normal; } .va-looprij { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 9px 10px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 10px; margin-bottom: 6px; background: var(--c-vlak); } .va-looprij.is-klaar { opacity: .72; } .va-looprij > div { display: flex; flex-direction: column; } .va-looprij > div strong { font: 600 .7rem var(--font-ui); } .va-looprij > div span { font: 500 .6rem var(--font-ui); color: var(--c-ink-3); } .va-loopacties { display: flex; gap: 4px; flex-wrap: wrap; } .va-plandagen { display: flex; flex-direction: column; gap: 8px; padding: 6px 0; } .va-plandag strong { font: 600 .72rem var(--font-ui); } .va-planslots { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; } .va-planslot { font: 600 .7rem var(--font-mono); padding: 8px 12px; border-radius: var(--radius-klein); border: var(--lijndikte) solid var(--c-lijn); background: var(--c-paneel); color: var(--c-ink); cursor: pointer; } .va-planslot.is-actief { background: var(--c-groen-d); color: var(--c-paneel); border-color: var(--c-groen-d); } .va-planwie { padding: 8px 0; } .va-planwie p { font: 500 .68rem var(--font-ui); color: var(--c-ink-2); margin: 4px 0 2px; } /* ---------- Keukentafel: uitvoerdatum toezeggen (Planning 2.0) ---------- */ .va-keukentafel { border-top: var(--lijndikte) solid var(--c-lijn); padding-top: 14px; margin-top: 4px; } .va-keukentafel p { margin: 6px 0 10px; font: 400 .74rem/1.55 var(--font-ui); color: var(--c-ink-3); } .va-statusknop--primair { background: var(--c-groen); color: var(--knop-ink); border-color: var(--c-groen); } .va-statusknop--primair:hover { background: var(--c-groen-d); } /* ═══ Afrond-wizard verkoper-veldapp (prototype v3) ═══ */ .vw{display:flex;flex-direction:column;gap:10px;max-height:70vh;overflow-y:auto;padding-right:4px} .vw h3{margin:0;font-size:15px;display:flex;align-items:center;gap:8px} .vw-sub{font-size:12px;color:var(--c-ink-2);margin:0} .vw-kop{display:flex;flex-direction:column;gap:6px} .vw-dots{display:flex;gap:6px} .vw-dots i{flex:1;height:4px;border-radius:99px;background:var(--c-paneel)} .vw-dots i.is-af{background:var(--c-groen-t)} .vw-dots i.is-nu{background:var(--c-groen)} .vw-blok{background:var(--kaart);border:1px solid var(--c-lijn);border-radius:var(--radius);padding:11px 13px} .vw-blok .kicker{display:block;margin-bottom:7px} .vw-chips{display:flex;flex-wrap:wrap;gap:6px} .vw-chip{border:1px solid var(--c-lijn-2);background:var(--c-creme);border-radius:var(--radius-klein);padding:6px 12px;font:600 12px var(--font-ui);color:var(--c-ink-2);cursor:pointer} .vw-chip.is-aan{background:var(--c-groen);border-color:var(--c-groen);color:var(--c-creme)} .vw-veld{display:flex;flex-direction:column;gap:4px} .vw-veld span{font-size:11px;font-weight:700} .vw-veld input,.vw-veld select,.vw-veld textarea{border:1px solid var(--c-lijn-2);border-radius:9px;padding:8px 10px;font:500 13px var(--font-ui);background:var(--c-creme);color:var(--c-ink)} .vw-rij2{display:flex;gap:8px} .vw-veld--onder{margin-top:8px} .vw-rij2 .vw-veld{flex:1;min-width:0} /* een datumveld en een keuzelijst naast elkaar: zonder dit houden ze hun eigen minimumbreedte en loopt de rij op een telefoon uit het vak */ .vw-rij2 .vw-veld input,.vw-rij2 .vw-veld select{min-width:0;width:100%;box-sizing:border-box} .vw-prod{display:grid;grid-template-columns:minmax(0,1fr) 54px 50px 64px;gap:6px;min-width:0;align-items:center;padding:8px 0;border-top:1px solid var(--c-lijn);font-size:12.5px} .vw-prod:first-of-type,.vw-prod--kop{border-top:0} .vw-prod--kop{padding:0 0 2px;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-3)} .vw-prod--kop span{text-align:right} .vw-prod label{display:flex;gap:8px;align-items:center;font-weight:700;font-size:12.5px;min-width:0}.vw-prod label > span{min-width:0;overflow-wrap:break-word;hyphens:auto} .vw-prod label input[type=checkbox]{width:18px;height:18px;accent-color:var(--c-groen)} .vw-prod label input[type=text]{display:block;margin-top:4px;width:100%;border:1px solid var(--c-lijn-2);border-radius:8px;padding:5px 8px;font:500 11.5px var(--font-ui);background:var(--c-creme)} .vw-prod input[type=number]{width:100%;border:1px solid var(--c-lijn-2);border-radius:8px;padding:7px 5px;font:700 12px var(--font-mono);background:var(--c-creme);text-align:right} .vw-prijs{text-align:right;font-weight:700;font-size:12px} .vw-som{border-top:2px solid var(--c-ink);margin-top:8px;padding-top:7px;font-size:12.5px} .vw-som div{display:flex;justify-content:space-between;align-items:baseline;padding:1px 0} .vw-tot{font-size:18px} .vw-fiat{background:var(--c-amber-t);color:var(--c-amber);border-radius:9px;padding:7px 10px;font-size:11.5px;font-weight:600;margin-top:8px} .vw-noot{background:var(--grijs);border-radius:9px;padding:8px 10px;font-size:11.5px;color:var(--c-ink-2);margin-top:8px} .vw-leeg{font-size:12px;color:var(--c-ink-3);font-style:normal} .vw-uitvrij{padding:7px 0;border-top:1px solid var(--c-lijn)} .vw-uitvrij:first-of-type{border-top:0;padding-top:0} .vw-uitvrij strong{display:block;font-size:12px;margin-bottom:5px} .vw-uitvrij strong em{font-style:normal;font-weight:400;font-size:10.5px;color:var(--c-amber)} .vw-uitkomst{display:flex;flex-direction:column;gap:7px} .vw-uknop{display:flex;gap:10px;align-items:center;border:1px solid var(--c-lijn-2);border-radius:var(--radius);background:var(--c-creme);padding:10px 12px;font-weight:700;font-size:13px;text-align:left;cursor:pointer} .vw-uknop i{font-style:normal;font-size:15px} .vw-uknop em{display:block;font-style:normal;font-weight:400;font-size:10.5px;color:var(--c-ink-3)} .vw-uknop.is-aan{border-color:var(--c-groen);background:var(--c-groen-t)} .vw-uknop.is-rood.is-aan{border-color:var(--c-rood);background:var(--c-rood-t)} .vw-uknop.is-stil.is-aan{border-color:var(--c-lijn-2);background:var(--c-paneel)} .vw-fotos{display:grid;grid-template-columns:1fr 1fr;gap:8px} .vw-foto{border:1.5px dashed var(--c-lijn-2);border-radius:var(--radius);background:var(--c-creme);padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:700;font-size:11.5px;color:var(--c-ink-2);cursor:pointer} .vw-foto i{font-style:normal;font-size:18px;color:var(--c-groen)} .vw-foto .mono{font-size:10.5px;color:var(--c-groen-d)} .vw-foto.heeft{border-style:solid;border-color:var(--c-groen);background:var(--c-groen-t)} .vw-schaal{display:flex;gap:6px} .vw-schaal button{flex:1;border:1px solid var(--c-lijn-2);background:var(--c-creme);border-radius:9px;padding:8px 0;font-weight:700;cursor:pointer} .vw-schaal button.is-aan{background:var(--c-groen);color:var(--c-creme);border-color:var(--c-groen)} .vw-sv{display:flex;gap:9px;align-items:flex-start;padding:7px 0;border-top:1px solid var(--c-lijn);font-size:12.5px} .vw-sv:first-of-type{border-top:0} .vw-sv i{font-style:normal;color:var(--c-groen-d);font-weight:800} .vw-sv em{display:block;font-style:normal;color:var(--c-ink-3);font-size:11px} .vw-voet{display:flex;gap:8px;position:sticky;bottom:0;background:linear-gradient(transparent,var(--kaart) 35%);padding-top:10px} .vw-voet .va-statusknop{flex:1} .vw-cfgknop{border:1px solid var(--c-lijn-2);background:var(--c-creme);border-radius:8px;padding:3px 9px;font-size:13px;cursor:pointer} .vw-visueel-weg{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .vw-vraagrij{display:grid;grid-template-columns:1.5fr 90px 1.2fr auto;gap:7px;align-items:center;padding:6px 0} .vw-vraagrij input,.vw-vraagrij select{border:1px solid var(--c-lijn-2);border-radius:8px;padding:7px 9px;font:500 12.5px var(--font-ui);background:var(--c-creme)} .va-afrondknop{width:100%;margin-bottom:8px} /* ===== FM-veldapp (D2D, prototype v2) — vf-* ===== */ .vf-modus{display:flex;gap:7px;margin-bottom:10px} .vf-modus button{flex:1;border:1px solid var(--c-lijn-2);background:var(--c-creme);border-radius: var(--radius-klein);padding:7px 0;font:700 12px var(--font-ui);color:var(--c-ink-2);cursor:pointer} .vf-modus button.is-aan{background:var(--c-terra-d, var(--c-terra));border-color:var(--c-terra-d, var(--c-terra));color:var(--c-creme)} .vf-kaart{position:relative;height:225px;background:var(--c-sage-t);border:1px solid var(--c-lijn);border-radius:var(--radius);overflow:hidden;margin-bottom:6px} .vf-kaart__bron{position:absolute;right:8px;bottom:6px;font-size:9px;color:var(--c-ink-3)} .vf-pin{position:absolute;width:25px;height:25px;border-radius:99px;border:2px solid var(--kaart);background:var(--c-ink-3);color:var(--knop-ink);font:800 10.5px var(--font-mono);display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);padding:0;cursor:pointer} .vf-pin.is-te-bezoeken{background:var(--c-terra)} .vf-pin.is-afspraak,.vf-pin.is-belmij{background:var(--c-groen)} .vf-pin.is-email{background:var(--c-sage)} .vf-pin.is-niet-thuis{background:var(--c-amber)} .vf-pin.is-retour{background:var(--c-amber)} .vf-pin.is-geen-interesse{background:var(--c-ink-3)} .vf-pin.is-actief{box-shadow:0 0 0 4px color-mix(in srgb, var(--c-groen) 35%, transparent)} .vf-legenda{font-size:10px;color:var(--c-ink-3);margin:0 0 8px} .vf-adressen{display:flex;flex-direction:column;gap:6px;margin-bottom:8px} .vf-adres{display:flex;gap:9px;align-items:center;width:100%;text-align:left;border:1px solid var(--c-lijn);background:var(--kaart);border-radius:var(--radius);padding:9px 11px;cursor:pointer} .vf-adres i{font-style:normal;width:10px;height:10px;border-radius:99px;flex-shrink:0;background:var(--c-ink-3)} .vf-adres.is-te-bezoeken i{background:var(--c-terra)} .vf-adres.is-afspraak i,.vf-adres.is-belmij i{background:var(--c-groen)} .vf-adres.is-email i{background:var(--c-sage)} .vf-adres.is-niet-thuis i,.vf-adres.is-retour i{background:var(--c-amber)} .vf-adres div{flex:1;min-width:0} .vf-adres strong{display:block;font-size:12.5px} .vf-adres span{font-size:10.5px;color:var(--c-ink-3)} .vf-hint{font-size:10.5px;color:var(--c-ink-3);margin:6px 0 8px} .vf-terug{border:none;background:none;color:var(--c-ink-2);font:700 12px var(--font-ui);padding:0 0 8px;display:block;cursor:pointer} .vf-blok{background:var(--kaart);border:1px solid var(--c-lijn);border-radius:var(--radius);padding:12px 13px;margin-bottom:8px} .vf-blok h4{margin:2px 0 10px;font-size:14.5px} .vf-feiten{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:4px} .vf-feiten div{background:var(--c-creme);border:1px solid var(--c-lijn);border-radius:9px;padding:7px 9px} .vf-feiten span{display:block;font:700 9px var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--c-ink-3)} .vf-feiten strong{font-size:12.5px} .vf-feiten em{font-style:normal;font-size:9.5px;color:var(--c-ink-3)} .vf-register{background:var(--c-amber-t);color:var(--c-amber);border-radius:9px;padding:8px 10px;font-size:11px;font-weight:600;margin-top:7px} .vf-opener{background:var(--c-creme);border-left:3px solid var(--c-terra);border-radius:0 9px 9px 0;padding:8px 10px;font-size:11.5px;font-style:italic;color:var(--c-ink-2);margin-top:8px} .vf-groteknop{width:100%;border:none;border-radius:var(--radius);background:var(--gradient-primair, var(--c-groen));color:var(--c-creme);padding:12px;font:800 13.5px var(--font-ui);margin-top:10px;cursor:pointer;box-shadow:var(--schaduw-knop, none)} .vf-afboekrij{display:flex;gap:7px;margin-top:7px} .vf-afboekrij button{flex:1;border:1px solid var(--c-lijn-2);background:var(--c-creme);border-radius:var(--radius);padding:10px;font:700 11.5px var(--font-ui);color:var(--c-ink-2);cursor:pointer} .vf-afboekrij button.is-rood{color:var(--c-rood)} .vf-klaarblok{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px;font-size:11px;color:var(--c-ink-2)} .vf-vraagbalk{height:4px;border-radius:99px;background:var(--c-paneel);margin:8px 0 12px;overflow:hidden} .vf-vraagbalk i{display:block;height:100%;background:var(--c-terra-d, var(--c-terra))} .vf-vraag{font-size:14.5px;font-weight:800;margin:0 0 10px} .vf-antwoorden{display:flex;flex-direction:column;gap:7px} .vf-antwoord{border:1px solid var(--c-lijn-2);background:var(--c-creme);border-radius:var(--radius);padding:11px;font:700 12.5px var(--font-ui);text-align:left;cursor:pointer} .vf-schaalrij{display:flex;gap:6px} .vf-schaalrij .vf-antwoord{flex:1;text-align:center} .vf-oversla{border:none;background:none;color:var(--c-ink-3);font:600 11.5px var(--font-ui);margin-top:8px;cursor:pointer} .vf-cfgknop{border:1px solid var(--c-lijn-2);background:var(--c-creme);border-radius:7px;padding:1px 7px;font-size:12px;cursor:pointer} .vf-sub{font-size:11.5px;color:var(--c-ink-2);margin:0 0 10px} .vf-uitkomst{display:flex;flex-direction:column;gap:7px} .vf-uitkomst button{display:flex;gap:9px;align-items:center;border:1px solid var(--c-lijn-2);border-radius:var(--radius);background:var(--c-creme);padding:11px;font:700 12.5px var(--font-ui);text-align:left;cursor:pointer} .vf-uitkomst button i{font-style:normal;font-size:15px} .vf-uitkomst button em{display:block;font-style:normal;font-weight:400;font-size:10px;color:var(--c-ink-3)} .vf-provchip{border:1px solid var(--c-creme);background:transparent;color:var(--c-creme);border-radius: var(--radius-klein);padding:3px 10px;font-size:11px;font-weight:800;cursor:pointer;opacity:.92} .vf-provkaart{background:var(--gradient-primair, var(--c-groen));color:var(--c-creme);border-radius:var(--radius);padding:12px 14px;margin:8px 0;box-shadow:var(--schaduw-tegel, none)} .vf-provkaart span{font-size:10.5px;opacity:.85;display:block} .vf-provkaart strong{font-size:22px} .vf-provrij{display:flex;gap:8px;align-items:center;padding:7px 0;border-top:1px solid var(--c-lijn);font-size:11.5px} .vf-provrij:first-of-type{border-top:0} .vf-provrij div{flex:1;min-width:0} .vf-provrij strong{display:block;font-size:11.5px} .vf-provrij span{font-size:10px;color:var(--c-ink-3)} .vf-provrij em{font-style:normal;font:800 11.5px var(--font-mono);color:var(--c-groen-d)} .vf-consent{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--c-ink-2);margin-top:8px} /* blok G (P18) · nodig en vrij apart */ .vf-consentkop{display:block;margin-top:12px;font:700 .62rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-2)} .vf-consent.is-vrij{border-top:var(--lijndikte) dashed var(--c-lijn);padding-top:8px} .vf-consent input{width:16px;height:16px;accent-color:var(--c-groen);flex-shrink:0;margin-top:1px} .vf-meekijkkop{background:var(--c-groen);color:var(--c-creme);margin:0 0 4px;padding:14px 22px} .vf-meekijkkop .kicker{color:var(--c-sage-t)} .vf-meekijkkop strong{display:block;font-size:15px;margin:2px 0} .vf-meekijkkop span{font-size:11px;opacity:.85} .vf-bevestigd{text-align:center;padding:12px 22px 4px} .vf-bevestigd__vink{font-size:30px;color:var(--c-groen-d);font-weight:800} .vf-bevestigd h3{margin:6px 0 6px;font-size:16px} .vf-bevestigd p{font-size:12.5px;color:var(--c-ink-2);margin:3px 0} .vf-stopvink{display:flex;gap:4px;align-items:center;font:700 10px var(--font-mono);color:var(--c-ink-3)} .vf-stopvink input{width:14px;height:14px;accent-color:var(--c-groen)} [data-fe-rij]{grid-template-columns:1.3fr 82px 1fr auto auto} /* PDOK-kaartlaag: tegels + bron-label leesbaar op de kaart */ .vf-tegel{position:absolute;width:256px;height:256px;pointer-events:none;user-select:none;filter:sepia(.12) brightness(1.02)} .vf-kaart [data-vf-pdok], .vf-kaart{background:var(--c-sage-t)} .vf-kaart .vf-kaart__bron{background:color-mix(in srgb, var(--c-creme) 82%, transparent);border-radius:6px;padding:1px 6px} /* Reviewronde Tim 23-07 · punt 11: uren-tab uitvoerder-app */ .va-urenkop { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin-bottom: 10px; } .va-urenkop > div { text-align: center; display: flex; flex-direction: column; gap: 2px; } .va-urenkop span { font-size: .64rem; color: var(--c-ink-3); } .va-urennav { border: 1px solid var(--c-lijn); border-radius: 10px; background: var(--c-paneel); color: var(--c-ink); font: inherit; padding: 6px 12px; cursor: pointer; } .va-urendagen { display: flex; flex-direction: column; gap: 6px; } .va-urendag { display: grid; grid-template-columns: 56px 1fr auto; gap: 8px; align-items: center; text-align: left; border: 1px solid var(--c-lijn); border-radius: 12px; background: var(--c-paneel); color: var(--c-ink); font: inherit; padding: 9px 12px; cursor: pointer; } .va-urendag span { font-size: .68rem; color: var(--c-ink-2); } .va-urendag.heeft-uren { border-color: var(--c-groen-t); } .va-urendag.is-open { border-color: var(--c-groen-d); } .va-urenform { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border: 1px dashed var(--c-lijn); border-radius: 12px; padding: 10px; margin: 4px 0 6px; } .va-urenform label { display: flex; flex-direction: column; gap: 3px; font-size: .64rem; color: var(--c-ink-3); } .va-urenform input { border: 1px solid var(--c-lijn); border-radius: 10px; padding: 7px 9px; font: inherit; font-size: .78rem; background: var(--c-paneel); color: var(--c-ink); } .va-urenform--breed { grid-column: 1 / -1; } .va-urenform .va-oranje { grid-column: 1 / -1; } .va-urensignaal { margin-top: 8px; } /* punt 11 · HR-kaart urenstaten */ /* VP8 · de adviseur bij het voorstel aan de deur. De bewoner mag weten wie er straks voor zijn deur staat — dat is geen detail maar de helft van de afspraak. */ .va-planadv { display: block; font-style: normal; font-size: .74rem; color: var(--c-ink-3); margin-top: 4px; } .va-planleeg { font-size: .84rem; color: var(--c-ink-2); margin: 6px 0; } /* VP13 · dagkoppen, notitie en een geannuleerde afspraak in de adviseur-app */ .va-dagkop { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 4px 2px; font-size: .68rem; color: var(--c-ink-2); } .va-afspraak__notitie { display: block; font-size: .72rem; color: var(--c-ink-2); margin: 2px 0; } .va-afspraak.is-weg { opacity: .55; } .va-afspraak.is-weg strong { text-decoration: line-through; } /* VP19 · wat de planner meestuurde uit het gesprek (besluit 29) */ .va-afspraak__gesprek { display: flex; flex-direction: column; gap: 2px; font-size: .7rem; color: var(--c-ink-2); margin-top: 4px; } .va-afspraak__gesprek b { font-weight: 600; color: var(--c-ink-3); } /* FM1/FM2 · foto's aan de deur, handtekening op de tablet, eigen tijd */ .vf-fotorij { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; } .vf-fotos { display: flex; gap: 6px; flex-wrap: wrap; } .vf-fotos img { width: 72px; height: 54px; object-fit: cover; border-radius: 6px; border: var(--lijndikte, 1px) solid var(--c-lijn); } .vf-fotoknop { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: var(--lijndikte, 1px) solid var(--c-lijn-2); border-radius: 10px; font-size: .8rem; font-weight: 700; cursor: pointer; background: var(--kaart); } .vf-teken { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; } .bs-form > .vf-teken { grid-column: 1 / -1; } /* blok G: in een venster met twee kolommen krijgt het tekenvlak de volle breedte */ .vf-canvas { width: 100%; height: 150px; border: var(--lijndikte, 1px) dashed var(--c-lijn-2); border-radius: 10px; background: var(--kaart); touch-action: none; color: var(--c-ink); } .vf-tekenrij { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .va-eigentijd { margin-top: 8px; font-size: .8rem; } .va-eigentijd summary { cursor: pointer; font-weight: 700; } .va-eigentijd input, .va-eigentijd select { font: inherit; font-size: .8rem; padding: 6px 8px; border: var(--lijndikte, 1px) solid var(--c-lijn-2); border-radius: 8px; } .va-planslot[disabled] { opacity: .45; cursor: not-allowed; } /* FM3 · looproute van vandaag */ .vf-route { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--c-ink); pointer-events: none; } .vf-dienstkop { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; margin: 0 0 8px; border: var(--lijndikte, 1px) solid var(--c-lijn); border-radius: 10px; background: var(--kaart); font-size: .8rem; } .vf-dienstkop.is-leeg { color: var(--c-ink-3); } .vf-dienstbalk { display: block; height: 6px; border-radius: 99px; background: var(--c-paneel-2); overflow: hidden; } .vf-dienstbalk span { display: block; height: 100%; background: var(--goed); } .vf-volgnr { display: inline-block; min-width: 20px; margin-right: 6px; font-size: .62rem; color: var(--c-ink-3); } /* FM4 · mijn cijfers in de FM-app */ .vf-cijfers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; } .vf-cijferkol { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: baseline; padding: 8px; border: var(--lijndikte, 1px) solid var(--c-lijn); border-radius: 8px; font-size: .74rem; } .vf-cijferkol .kicker { grid-column: 1 / 3; margin-bottom: 4px; } .vf-cijferkol b { font-size: .88rem; text-align: right; } .vf-cijferkol b.is-goed { color: var(--goed); } .vf-cijferkol b.is-let { color: var(--let); } .vf-cijferkol small { color: var(--c-ink-3); } /* ---- VA2/VA3/VA5 · werkbak, poorten en terugkoppeling in de adviseur-app ---- */ .va-viewschakel { display: flex; gap: 6px; padding: 8px 12px 0; } .va-viewschakel b { margin-left: 4px; } .va-werkbak { padding: 8px 12px 12px; display: grid; gap: 10px; } .va-wbtellers { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; } .va-wbtellers > div { background: var(--paneel); border: 1px solid var(--lijn); border-radius: var(--radius-klein); padding: 8px 10px; display: grid; gap: 2px; } .va-wbtellers strong { font-size: 18px; } .va-wbtellers span { font-size: 11px; color: var(--ink2); } .va-wbblok { display: grid; gap: 4px; } .va-terugkoppel { display: grid; gap: 8px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--lijn); } .va-ntrij { display: flex; gap: 6px; flex-wrap: wrap; } .va-nt { border-left: 3px solid var(--let); } .va-nt.is-let { border-left-color: var(--stop); } .va-nt.is-goed { border-left-color: var(--goed); } .va-tklijst { display: grid; gap: 2px; } .vw-fiat-ok { color: var(--goed); font-weight: 600; } .vw-fiat-nee { color: var(--stop); font-weight: 600; } .vw-foto.is-verplicht { border-color: var(--let); } .vw-verplicht { display: block; font-size: 10px; color: var(--let); letter-spacing: .02em; } .vw-foto.heeft .vw-verplicht { color: var(--goed); } .vw-teken .vf-canvas { width: 100%; height: 150px; border: 1px dashed var(--lijn2, var(--lijn)); border-radius: var(--radius-klein); background: var(--paneel); touch-action: none; } .vw-teken .vf-tekenrij { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; } input[data-vw-tarief][readonly] { color: var(--ink2); background: var(--paneel); } /* WF1 · Warmtefonds via Prets in de wizard */ .vw-prets { display: grid; gap: 8px; } .vw-prets .vf-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.4; } /* MK · meekijkstand van de afrond-wizard: de klant kijkt mee, intern gaat pas open als de verkoper dat kiest */ .vw-kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .vw-meekijk { margin-left: auto; padding: 3px 10px; border-radius: var(--radius-klein); border: 1px solid var(--lijn); background: var(--paneel); font-size: 11.5px; font-weight: 600; color: var(--ink2); cursor: pointer; } .vw-meekijk.is-mee { border-color: var(--goed); color: var(--goed); } .vw-meekijk.is-intern { border-color: var(--let); color: var(--let); } .vw-meekijk:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .vw-internbalk { margin: 6px 0 10px; padding: 6px 10px; border-radius: var(--radius-klein); background: var(--memo); color: var(--ink); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; } /* FM9 · signalen (intern) en de foto-poort op de woningkaart */ .vf-signaal{padding:8px 10px;border-radius:var(--radius-klein,8px);font-size:12.5px;font-weight:600;margin:0 0 8px;background:var(--vlak);color:var(--ink2)} .vf-signaal.is-stop{background:var(--stop-t);color:var(--stop)} .vf-signaal.is-let{background:var(--let-t);color:var(--let)} .vf-signaal.is-goed{background:var(--goed-t);color:var(--goed)} .vf-signaalrij{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;padding:3px 2px;border-bottom:1px solid var(--lijn)} .vf-signaalrij span{color:var(--ink2)}.vf-signaalrij em{font-style:normal;text-align:right} .vf-fotoknoppen{display:flex;gap:6px;flex-wrap:wrap} .vf-fotoknop--soort{flex:1;text-align:center;min-width:110px} .vf-fotoknop--soort.is-klaar{background:var(--goed-t);border-color:var(--goed);color:var(--goed)} .vf-groteknop[aria-disabled="true"]{opacity:.45;cursor:not-allowed} /* FM10 · de drie deurkeuzes en de keuzeschermen */ .vf-driekeus{display:grid;gap:6px;margin:8px 0} .vf-keus{display:grid;grid-template-columns:34px 1fr;gap:8px;align-items:center;border:1px solid var(--lijn);border-radius:var(--radius-klein,8px);padding:9px 10px;background:var(--kaart);color:var(--ink);font:inherit;font-weight:700;font-size:14px;text-align:left;cursor:pointer} .vf-keus i{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-style:normal;font-size:15px;background:var(--vlak)} .vf-keus small{display:block;font-weight:500;font-size:11.5px;color:var(--ink2)} .vf-keus--thuis{background:var(--knop);color:var(--knop-ink);border-color:var(--knop)}.vf-keus--thuis i{background:var(--nav-lijn);color:var(--kaart)}.vf-keus--thuis small{color:var(--nav-ink)} .vf-keus--niet i{background:var(--let-t);color:var(--let)} .vf-keus--over i{background:var(--stop-t);color:var(--stop)} .vf-keus[aria-disabled="true"]{opacity:.45;cursor:not-allowed} .vf-keus:focus-visible{outline:3px solid var(--accent);outline-offset:2px} .vf-keuzelijst{display:grid;gap:6px;padding:4px 0 8px} .vf-keuze{display:grid;gap:2px;text-align:left;border:1px solid var(--lijn);border-radius:var(--radius-klein,8px);padding:11px 12px;background:var(--kaart);color:var(--ink);font:inherit;cursor:pointer} .vf-keuze b{font-size:14px}.vf-keuze small{font-size:11.5px;color:var(--ink2)} .vf-keuze.is-stop{border-left:4px solid var(--stop)} .vf-keuze:focus-visible{outline:3px solid var(--accent);outline-offset:2px} /* FM11 · NAW in aparte velden */ .vf-naw{display:grid;grid-template-columns:90px 110px minmax(0,1fr);gap:8px} @media (max-width:480px){.vf-naw{grid-template-columns:1fr 1fr}.vf-naw > :last-child{grid-column:1 / -1}} /* FM26 · de plankaart op een telefoon: één kolom, de NAW-rij en de handtekening over de volle breedte */ @media (max-width:640px){.vf-plan .bs-form{grid-template-columns:1fr}.vf-plan .bs-form > *{grid-column:1 / -1;min-width:0}.vf-plan .bs-form input:not([type=checkbox]),.vf-plan .bs-form select{width:100%;box-sizing:border-box}.vf-plan .vf-canvas{width:100%;height:auto}} /* FM12 · privacy-QR bij de toestemming, flyer-QR bij «niet thuis» */ .vf-privacyqr{display:flex;gap:10px;align-items:center;font-size:11.5px;color:var(--ink2);margin:6px 0} .vf-privacyqr__qr svg{width:64px;height:64px;display:block;border:1px solid var(--lijn);border-radius:6px;background:var(--kaart)} .vf-privacyqr em{font-style:normal;font-size:10.5px} .vf-flyerqr{display:flex;gap:10px;align-items:center;margin-top:8px;font-size:11.5px;color:var(--ink2)} .vf-flyerqr svg{width:88px;height:88px;display:block;border:1px solid var(--lijn);border-radius:6px;background:var(--kaart)} .vf-flyerqr em{font-style:normal} /* RP3 · de standenlijst (Mijn zone en ESS-paneel) */ .veld-stand{display:grid;gap:8px} .veld-stand__kop{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap} .veld-stand__periodes{display:flex;gap:3px;background:var(--vlak);border-radius:99px;padding:2px} .veld-stand__periodes button{border:0;background:none;font:inherit;font-size:.74rem;font-weight:600;color:var(--ink2);padding:3px 9px;border-radius: var(--radius-klein);cursor:pointer} .veld-stand__periodes button.is-actief{background:var(--kaart);color:var(--ink);box-shadow:var(--schaduw-kaart)} .veld-stand__periodes button:focus-visible{outline:3px solid var(--accent);outline-offset:2px} .veld-stand__lijst{display:grid;gap:4px} .veld-stand__rij{display:grid;grid-template-columns:30px minmax(0,1fr) 84px 56px;gap:8px;align-items:center;padding:7px 9px;border:1px solid var(--lijn);border-radius:var(--radius-klein,8px);background:var(--kaart)} .veld-stand__rij.is-mij{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)} .veld-stand__rij>b{font-size:.95rem} .veld-stand__naam{font-weight:700;font-size:.9rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .veld-stand__naam small{display:block;font-weight:400;font-size:.72rem;color:var(--ink2)} .veld-stand__n{font-size:1.05rem;font-weight:700;text-align:right}.veld-stand__n small{font-size:.68rem;font-weight:400;color:var(--ink2)} .veld-stand__c{font-size:.8rem;font-weight:600;text-align:right;color:var(--ink2)}.veld-stand__c.is-goed{color:var(--goed)}.veld-stand__c.is-let{color:var(--let)} .veld-stand__team{font-size:.85rem;color:var(--ink2)}.veld-stand__team i{display:block;height:8px;background:var(--lijn);border-radius:99px;overflow:hidden;margin-top:4px}.veld-stand__team i span{display:block;height:100%;background:var(--goed)} .veld-stand__mij{font-size:.85rem;padding:8px 10px;border-radius:var(--radius-klein,8px);background:var(--let-t);color:var(--let)} .veld-stand__momenten{display:grid;gap:3px;font-size:.8rem;color:var(--ink2)} /* KP5 · foto vóór/ná voor de klant in de werkbon */ .va-werkfoto{display:grid;gap:3px;margin-top:8px;cursor:pointer}.va-werkfoto small{font-size:.72rem;color:var(--ink2)} .va-werkfoto:focus-within .btn{outline:3px solid var(--accent);outline-offset:2px} /* KC4 (B5, 14-09) · de deurfoto's van de loper in het detail van de adviseur — intern, klein, klikbaar groot via de titel */ .va-deurfotos { padding: 10px 20px 4px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .va-deurfotos > div { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; } .va-deurfotos img { width: 84px; height: 64px; object-fit: cover; border-radius: 8px; border: var(--lijndikte) solid var(--c-lijn); background: var(--c-creme); } /* Michiel 14-09 · het huisadres van de medewerker in Mijn zone */ .va-thuisform { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; padding: 8px 20px 14px; } .va-thuisform label { display: grid; gap: 2px; font: 600 .68rem var(--font-ui); color: var(--c-ink-2); } .va-thuisform input { font: inherit; font-size: .8rem; border: var(--lijndikte) solid var(--c-lijn); border-radius: 8px; padding: 5px 8px; } .va-thuisform .vf-hint { flex-basis: 100%; } /* UA1 (14-09) · de uitvoerdersapp op de backend */ .va-poortregel { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; } /* blok G (P23) · de redenen van een dichte poort als leesbare regels; wat kantoor moet oplossen apart */ .va-poortblok { border: var(--lijndikte) solid var(--let); border-radius: var(--radius-klein); background: var(--let-t); padding: 10px 12px; margin: 8px 0; display: flex; flex-direction: column; gap: 4px; } .va-poortblok.is-kantoor { border-color: var(--stop); background: var(--stop-t); } .va-poortblok strong { font-size: .68rem; } .va-poortblok ul, .va-eerst { margin: 0; padding-left: 18px; font: 500 .64rem/1.5 var(--font-ui); color: var(--c-ink); overflow-wrap: anywhere; } .va-poortblok span { font: 500 .6rem/1.5 var(--font-ui); color: var(--c-ink-2); } .va-scansignaal { display: block; margin-top: 3px; font: 600 .6rem/1.45 var(--font-ui); color: var(--let-d); white-space: normal; } .va-scan.is-afwijkend em { color: var(--let-d); } .va-knoppenrij { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .va-scanform { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .va-scanform input { flex: 1; min-width: 7em; font: inherit; font-size: .8rem; border: var(--lijndikte) solid var(--c-lijn); border-radius: 8px; padding: 6px 8px; } .va-klantvink { display: flex; gap: 6px; align-items: center; font: 500 .72rem var(--font-ui); color: var(--c-ink-2); margin: 6px 0 2px; } .va-mat span.is-ok { border-color: var(--c-groen); } .va-dagkop { padding: 6px 0 2px; } /* UA1 · de uitvoerdersapp op een echte telefoon (veld.html): geen frame, het hele scherm */ .va--veld { padding: 0; margin: 0; max-width: none; } .va-scherm--uitv.is-veld { height: 100vh; height: 100dvh; border-radius: 0; } /* VA2 · kozijnposities en de ISDE-regel in de afrondwizard (ook in het beheer) */ .vw-posities { display: grid; gap: 6px; padding: 8px 0 4px 26px; } .vw-pos { display: grid; grid-template-columns: 1.2fr .8fr .8fr .5fr 1.4fr 1.6fr auto; gap: 4px; align-items: center; } .vw-pos input, .vw-pos select { font: inherit; font-size: .78rem; padding: 6px 8px; border: 1px solid var(--c-lijn-2); border-radius: 8px; background: var(--kaart); color: var(--c-ink); min-width: 0; } .vw-pos input:focus-visible, .vw-pos select:focus-visible { outline: 3px solid var(--accent); } .vw-pos__weg { border: 0; background: transparent; color: var(--c-ink-3); cursor: pointer; font: inherit; } .vw-isde { display: flex; justify-content: space-between; gap: 8px; color: var(--c-groen-d); font-weight: 700; border-top: 1px dashed var(--c-lijn); padding-top: 6px; } /* VD5 · de belvensters van «Bel mij» als tegels naast elkaar */ .vf-keuzelijst--rij{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))} .vf-keuze.is-actief{border-color:var(--knop);background:var(--knop);color:var(--knop-ink)} .vf-keuze:focus-visible{outline:var(--focus-ring);outline-offset:2px} .vf-datumvak{display:grid;grid-template-columns:1fr 1fr;gap:10px} .vf-datumvak[hidden]{display:none} /* VELDAPPS V6 · FM26: de huishoudkaart en de drie voorstellen aan de deur; FM24: de vraag vóór intern; FM25: het rustige uitkomstscherm */ .vf-zeg{font-style:italic;font-weight:600;margin:6px 0 0} .vf-huis{display:grid;gap:8px;padding:6px 0 10px} .vf-huis .kicker{margin-top:4px} .vf-dagen{display:grid;grid-template-columns:repeat(6,1fr);gap:5px} .vf-dag{border:1px solid var(--lijn2,var(--c-lijn-2));border-radius:8px;padding:6px 2px;text-align:center;font:600 12px var(--font-ui);background:var(--kaart);color:var(--ink);cursor:pointer;display:grid;gap:1px} .vf-dag small{font-weight:500;color:var(--ink3,var(--ink2));font-size:10px} .vf-dag.is-aan{background:var(--knop);color:var(--knop-ink)}.vf-dag.is-aan small{color:var(--knop-ink);opacity:.7} .vf-dag:focus-visible,.vf-voorstel:focus-visible,.vw-chip:focus-visible{outline:var(--focus-ring);outline-offset:2px} .vf-voorstellen{display:grid;gap:6px;padding:4px 0 8px} .vf-voorstel{display:grid;grid-template-columns:24px 1fr;gap:8px;align-items:center;border:1px solid var(--lijn2,var(--c-lijn-2));border-radius:var(--radius);padding:10px 12px;background:var(--kaart);color:var(--ink);font:inherit;text-align:left;cursor:pointer} .vf-voorstel b{font-size:14px}.vf-voorstel small{display:block;color:var(--ink2);font-size:12px} .vf-voorstel.is-aan{background:var(--knop);color:var(--knop-ink);border-color:var(--knop)}.vf-voorstel.is-aan small,.vf-voorstel.is-aan .mono{color:var(--knop-ink);opacity:.8} .vf-uitkomst button.is-primair{background:var(--knop);color:var(--knop-ink);border-color:var(--knop)} .vf-uitkomst button.is-primair em{color:var(--knop-ink);opacity:.75} .vf-uitkomst__rest{padding:2px 0 8px} .vf-internvraag{display:flex;gap:8px;justify-content:flex-end} /* VA12/VA13 · afwijkende prijs zichtbaar, uitkomsten met code, categorieën «geen offerte» */ .vw-prod.is-afwijkend .vw-prijs{color:var(--let)} @media (max-width:420px){.vw-prod{grid-template-columns:minmax(0,1fr) 48px 44px 58px;gap:4px;font-size:12px}.vw-prod label{gap:6px;font-size:11.5px}.vw-prod input[type=number]{padding:7px 3px;font-size:11px}} .vw-afwijking{display:block;font:600 11px var(--font-mono);color:var(--let)} .vw-uitkomst--v6 .vw-uknop i.mono{font-size:12px;letter-spacing:.04em;min-width:34px;text-align:center} .vw-cats{display:grid;gap:5px;margin-top:6px} .vw-cat{border:1px solid var(--lijn2,var(--c-lijn-2));border-radius:8px;padding:8px 11px;background:var(--kaart);text-align:left;font:inherit;color:var(--ink);cursor:pointer;display:grid;gap:1px} .vw-cat b{font-size:13px}.vw-cat small{color:var(--ink2);font-size:11px} .vw-cat.is-aan{background:var(--knop);color:var(--knop-ink);border-color:var(--knop)}.vw-cat.is-aan small{color:var(--knop-ink);opacity:.75} .vw-cat:focus-visible,.vw-uknop:focus-visible{outline:var(--focus-ring);outline-offset:2px} .vw-details{border:1px solid var(--lijn,var(--c-lijn));border-radius:8px;padding:8px 12px} .vw-details summary{cursor:pointer;font-weight:600;font-size:13px;color:var(--ink2)} .vw-voet .va-statusknop small{display:block;font-weight:500;font-size:11px;opacity:.8} /* PROVISIE-MOTOR V2 (10-10) · het gedeelde provisiebeeld in de apps: de stand per regel, wat nog niet meetelt, bezwaar */ .vf-provkaart small { display: block; font-size: 10.5px; opacity: .85; margin-top: 2px; } .vf-provrij.is-stil strong, .vf-provrij.is-stil em { color: var(--ink3); font-weight: 600; } .vf-provrij em.is-min { color: var(--stop-d, var(--stop)); } .vf-provbezwaar { appearance: none; background: none; border: 0; padding: 6px 0 2px; cursor: pointer; font: 600 10.5px var(--font-ui); color: var(--ink3); text-decoration: underline; } .vf-provbezwaar:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } /* VERKOPERS-APP §4 C/F (10-10) · terug van kantoor en de feiten ter plaatse */ .va-terugvraag { font-style: italic; color: var(--ink); } .vw-feiten .vw-blok { margin-top: 6px; } /* BUDDEE-VERVANGING A · verlof aanvragen: het saldo bij het formulier en de regel die meerekent */ .vl-saldo{margin:6px 0 0;font-size:.9rem;color:var(--c-ink)} .vl-saldo span{color:var(--c-ink-2)} .vl-bakjes{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.78rem;color:var(--c-ink-2)} .vl-reken{padding:10px 12px;border:1px solid var(--c-lijn);border-radius:var(--radius-klein);background:var(--c-creme);font-size:.86rem;color:var(--c-ink);line-height:1.45} .vl-reken.is-let{border-color:var(--let);background:var(--let-t)} .vl-reken.is-stop{border-color:var(--stop);background:var(--stop-t)} /* BUDDEE-VERVANGING D · de todo-rij op de startpagina van de app is een knop, in de vorm van een rij */ .ess-todo{width:100%;appearance:none;-webkit-appearance:none;border:1px solid var(--c-lijn);border-radius:var(--radius-klein);background:var(--kaart);font:inherit;color:var(--c-ink);cursor:pointer;text-align:left;padding:11px 12px;display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px;transition:border-color 160ms} .ess-todo:hover{border-color:var(--c-lijn-2)} .ess-todo:focus-visible{outline:3px solid var(--accent);outline-offset:2px} .ess-beslis{display:flex;gap:8px;margin-top:6px} @media (prefers-reduced-motion: reduce){.ess-todo{transition:none}} /* BUDDEE-VERVANGING E · de keuze voor overuren bij het indienen van een week */ .va-overwerk{display:grid;gap:4px;margin:10px 0} .va-overwerk span{font-size:11px;font-weight:700} .va-overwerk select{border:1px solid var(--c-lijn-2);border-radius:var(--radius-klein);padding:9px 10px;font:500 13px var(--font-ui);background:var(--kaart);color:var(--c-ink)} .va-overwerk select:focus-visible{outline:3px solid var(--accent);outline-offset:1px} .va-overwerk em{font-style:normal;font-size:11px;color:var(--c-ink-2)} /* BUDDEE-VERVANGING G · mijn documenten en het ondertekenen in de app */ .ess-doc{flex-wrap:wrap} .ess-doc__tekst{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 190px} .ess-doc__tekst strong{overflow-wrap:break-word} .ess-doc__tekst em{font-style:normal;font-size:12px;color:var(--c-ink-2)} .ess-docform{grid-template-columns:minmax(0,1fr)} .ess-docbeeld{display:flex;flex-direction:column;gap:8px;align-items:flex-start;min-width:0} .ess-docopen{align-self:stretch;justify-content:center;text-align:center;text-decoration:none} .ess-docbeeld a.btn{text-decoration:none} .ess-docbeeld iframe{width:100%;height:min(56vh,520px);border:1px solid var(--c-lijn);border-radius:var(--radius-klein);background:var(--kaart)} .ess-docbeeld img{max-width:100%;border:1px solid var(--c-lijn);border-radius:var(--radius-klein)} .ess-docteken{border-top:1px solid var(--c-lijn);padding-top:12px;margin-top:0;min-width:0} .ess-docteken .vf-consent{font-size:13px;color:var(--c-ink)} .ess-docteken[hidden]{display:none} /* BUDDEE-VERVANGING H · de ingang naar de agendalink onder «Verlof aanvragen» */ .ess-agendaknop{margin-top:8px;width:100%;justify-content:center;text-align:center} /* BUDDEE-VERVANGING F · het indienstformulier en de verjaardag in de app */ .bs-form .bs-veld[hidden]{display:none} .ess-indienst .vf-groteknop{margin-top:8px} /* blok E (12-10) · de bellijst in de verkopers-app: rijen die je aantikt, de belknop, de zes uitkomsten */ .va-belrij, .va-kantoordag { width: 100%; text-align: left; font: inherit; color: inherit; background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--radius-klein); padding: 10px 12px; cursor: pointer; margin-top: 6px; } .va-belrij strong, .va-kantoordag strong { display: flex; justify-content: space-between; gap: 10px; width: 100%; font-size: .92rem; } .va-belrij > span, .va-kantoordag > span { font-size: .78rem; color: var(--ink2); } .va-kantoordag { margin: 8px 12px 0; width: calc(100% - 24px); border-color: var(--let); } .va-belnoot { margin: 0; font-size: .8rem; color: var(--ink2); } .va-belknopgroot { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 8px; padding: 14px 16px; font-size: 1rem; text-decoration: none; text-align: center; } .va-belknopgroot .vi { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; } .va-beluit { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; } .va-beluit .va-statusknop { display: grid; gap: 2px; min-height: 56px; } .va-beluit .va-statusknop small { font-weight: 500; color: var(--ink3); font-size: .7rem; } /* ── inmeetapp.css ── */ /* ===================================================================== inmeetapp.css — de app van de inmeter (IM3). Twee kolommen: links wat op zijn naam staat, rechts het meetblad in een telefoonvorm. Groot genoeg om met een handschoen te bedienen — dit scherm wordt buiten gebruikt, op een tablet, met koude vingers. ===================================================================== */ .ia-wortel { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 18px; } .ia-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; } .ia-kicker { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-3); margin: 0 0 4px; } .ia-kop h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; } .ia-lead { color: var(--c-ink-2); font-size: 13.5px; line-height: 1.6; max-width: 74ch; margin: 0; } .ia-wie { font-family: var(--font-mono); font-size: .68rem; color: var(--c-ink-2); white-space: nowrap; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-pill); padding: 4px 11px; } .ia-schil { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; align-items: start; } @media (max-width: 900px) { .ia-schil { grid-template-columns: 1fr; } } /* ---- links: mijn klussen ---- */ .ia-lijst { display: flex; flex-direction: column; gap: 8px; } .ia-klus { text-align: left; display: flex; flex-direction: column; gap: 3px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-left: 3px solid var(--c-lijn); border-radius: var(--radius); padding: 11px 13px; cursor: pointer; transition: border-color var(--overgang), box-shadow var(--overgang); } .ia-klus:hover { box-shadow: var(--schaduw-tegel); } .ia-klus.is-nu { border-left-color: var(--c-groen); box-shadow: var(--schaduw-tegel); } .ia-klus__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .ia-klus__kop b { font-size: .84rem; } .ia-klus__kop em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); } .ia-klus__adres { font-size: .7rem; color: var(--c-ink-2); } .ia-klus__stand { font-size: .64rem; color: var(--c-ink-3); } /* ---- rechts: het meetblad ---- */ .ia-telefoon { background: var(--donker, var(--c-ink)); border-radius: 28px; padding: 12px; } .ia-scherm { background: var(--c-paneel-2); border-radius: 20px; overflow: hidden; } .ia-schermkop { background: var(--kaart); padding: 13px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); display: flex; flex-direction: column; gap: 2px; } .ia-schermkop b { font-size: .88rem; } .ia-schermkop span { font-size: .7rem; color: var(--c-ink-2); } .ia-posrij { display: flex; gap: 6px; flex-wrap: wrap; padding: 11px 16px 0; } .ia-pos { border: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); border-radius: var(--radius-klein); padding: 5px 12px; font-size: .7rem; font-weight: 700; color: var(--c-ink-2); cursor: pointer; } .ia-pos.is-klaar { border-color: var(--c-groen); color: var(--c-groen-d); } .ia-pos.is-nu { background: var(--donker, var(--c-ink)); border-color: var(--c-ink); color: var(--knop-ink); } .ia-blad { padding: 13px 16px 18px; display: flex; flex-direction: column; gap: 13px; } .ia-offerte { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 10px 13px; display: flex; flex-direction: column; gap: 2px; } .ia-offerte span { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); } .ia-offerte b { font-size: 1.05rem; } .ia-offerte em { font-style: normal; font-size: .68rem; color: var(--c-ink-2); } .ia-uitleg { font-size: .72rem; line-height: 1.6; color: var(--c-ink-2); margin: 0; } .ia-groep { display: flex; flex-direction: column; gap: 6px; } .ia-groep h4 { margin: 0; font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--c-ink-3); font-weight: 700; } .ia-drie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; } .ia-drie--twee { grid-template-columns: repeat(2, 1fr); } /* min-width:0 hoort hier: zonder die regel weigert een grid-cel te krimpen onder zijn inhoud, en dan valt «2216» weg achter de rand — precies de maat waar het om gaat. */ .ia-veld { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .ia-veld span { font-size: .62rem; color: var(--c-ink-3); } /* Ruim en hoog: dit wordt buiten ingevuld, op een tablet. */ .ia-veld input, .ia-veld textarea { font-family: var(--font-mono); font-size: .92rem; padding: 9px 8px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius-klein); background: var(--kaart); width: 100%; } .ia-veld textarea { font-family: var(--font-ui); font-size: .78rem; resize: vertical; } .ia-veld--breed { width: 100%; } /* De uitkomst komt van de server — hier staat wat er besteld gaat worden. */ .ia-uitkomst { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 11px 13px; display: flex; flex-direction: column; gap: 5px; } .ia-uitkomst.is-let { border-color: var(--c-amber); background: var(--c-amber-t); } .ia-uitkomst > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .ia-uitkomst span { font-size: .66rem; color: var(--c-ink-2); } .ia-uitkomst b { font-size: .86rem; } .ia-scheef { margin: 3px 0 0; font-size: .7rem; line-height: 1.5; color: var(--c-amber); font-weight: 700; } .ia-knop { background: var(--gradient-primair); color: var(--knop-ink); border: 0; border-radius: var(--radius); padding: 13px; font-size: .82rem; font-weight: 700; cursor: pointer; } .ia-knop:hover { background: var(--gradient-primair-hover); } .ia-knop:disabled { opacity: .55; cursor: progress; } .ia-leeg { background: var(--kaart); border: var(--lijndikte) dashed var(--c-lijn); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 5px; text-align: center; } .ia-leeg b { font-size: .86rem; } .ia-leeg span { font-size: .74rem; color: var(--c-ink-2); line-height: 1.6; } /* ---- IM4 · inbouwsituatie en bereikbaarheid ---- */ .ia-veld select { font-family: var(--font-ui); font-size: .8rem; padding: 9px 8px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius-klein); background: var(--kaart); width: 100%; } /* Amber: een signaal dat de maat raakt, geen blokkade. */ .ia-let { margin: 2px 0 0; font-size: .72rem; line-height: 1.55; color: var(--c-amber); background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-amber); border-radius: var(--radius-klein); padding: 8px 10px; } /* De bijzaak is geld: hij hoort op te vallen zonder alarm te slaan. */ .ia-bijzaak { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn-2); border-left: 3px solid var(--c-groen); border-radius: var(--radius); padding: 10px 12px; } .ia-bijzaak b { font-size: .78rem; } .ia-bijzaak span { font-size: .72rem; line-height: 1.55; color: var(--c-ink-2); } .ia-bijzaak em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); } /* ── comm.css ── */ /* ===================================================================== comm.css — Module 3.1 · Gedeelde inbox. Drie kolommen met Gmail-/ WhatsApp-koppelingenbalk, KPI-stuurstrip, SLA-chips, snelacties en memo-gele interne memo's. Tokens only. ===================================================================== */ .cm { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 48px; } .cm-kop { margin-bottom: 14px; } .cm-kop h1 { margin: 2px 0 4px; font-size: 1.35rem; } .cm-kop p { margin: 0; font-size: .8rem; color: var(--c-ink-2); max-width: 66ch; } .cm-groen { color: var(--c-groen-d); } /* koppelingenbalk */ .cm-koppelingen { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 10px 16px; border-radius: 12px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); margin-bottom: 14px; } .cm-koppeling { display: inline-flex; align-items: center; gap: 7px; font: 500 .7rem var(--font-ui); color: var(--c-ink-2); } .cm-koppeling i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-lijn-2); } .cm-koppeling i.is-groen { background: var(--c-groen); } .cm-koppeling strong { font-size: .72rem; color: var(--c-ink); } .cm-koppeling.is-stil { opacity: .7; } .cm-koppelingen__avg { margin-left: auto; font-size: .58rem; color: var(--c-ink-3); } /* raster */ .cm-grid { display: grid; grid-template-columns: 330px minmax(360px, 1fr) 290px; overflow: hidden; height: calc(100vh - 320px); min-height: 540px; margin-top: 14px; } @media (max-width: 1100px) { .cm-grid { grid-template-columns: 1fr; height: auto; } } /* linkerkolom */ .cm-lijst { display: flex; flex-direction: column; border-right: var(--lijndikte) solid var(--c-lijn); min-width: 0; min-height: 0; } .cm-lijst__kop { padding: 12px 14px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .cm-zoek { display: flex; flex-direction: column; gap: 3px; margin-bottom: 9px; } .cm-zoek input { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1.5px solid var(--c-lijn-2); border-radius: 9px; font: 600 .76rem var(--font-ui); color: var(--c-ink); background: var(--kaart); } .cm-boxen, .cm-sorteer { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 2px; } .cm-sorteer { margin-top: 7px; } .cm-boxchip { padding: 5px 10px; border-radius: 7px; cursor: pointer; white-space: nowrap; font: 600 .64rem var(--font-ui); border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); color: var(--c-ink-2); } .cm-boxchip .mono { font-size: .56rem; color: var(--c-ink-3); } .cm-boxchip.is-actief { border-color: var(--c-ink); background: var(--c-paneel); color: var(--c-ink); font-weight: 700; } .cm-lijst__scroll { flex: 1; overflow-y: auto; min-height: 0; } .cm-lijst__teller { padding: 11px 14px; font: 500 .66rem var(--font-ui); color: var(--c-ink-3); } .cm-rij { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; border-left: 3px solid transparent; border-bottom: var(--lijndikte) solid var(--c-lijn); cursor: pointer; } .cm-rij:hover { background: var(--c-creme); } .cm-rij.is-ongelezen { background: color-mix(in srgb, var(--c-groen-t) 35%, var(--kaart)); } .cm-rij.is-actief { border-left-color: var(--c-groen-d); background: var(--c-groen-t); } .cm-rij__kop { display: flex; align-items: center; gap: 8px; } .cm-rij__kop strong { flex: 1; min-width: 0; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cm-ongelezen { width: 7px; height: 7px; border-radius: 50%; background: var(--c-groen-d); flex: none; } .cm-rij__tijd { font: 500 .62rem var(--font-ui); color: var(--c-ink-3); flex: none; } .cm-rij__onderwerp { font: 600 .72rem var(--font-ui); color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cm-rij__snip { font: 400 .68rem var(--font-ui); color: var(--c-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cm-rij__voet { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .cm-sla { font-size: .6rem; font-weight: 700; } .cm-label { display: inline-flex; align-items: center; gap: 4px; font-size: .56rem; font-weight: 600; text-transform: uppercase; } .cm-label i { width: 6px; height: 6px; border-radius: 50%; } .cm-pot { font-size: .6rem; font-weight: 700; color: var(--c-ink-2); } .cm-live { margin-left: auto; font-size: .54rem; font-weight: 600; color: var(--c-terra); } .cm-avatar { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; background: var(--c-paneel); color: var(--c-ink-2); display: grid; place-items: center; font: 700 .54rem var(--font-ui); flex: none; } .cm-live + .cm-avatar { margin-left: 0; } .cm-avatar--leeg { background: none; border: 1.5px dashed var(--c-lijn-2); } .cm-snel { position: absolute; right: 10px; top: 8px; display: none; gap: 4px; } .cm-rij:hover .cm-snel { display: flex; } .cm-snel button { padding: 4px 8px; border-radius: 7px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); font: 700 .58rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; } .cm-snel button:hover { background: var(--c-groen-t); color: var(--c-groen-d); border-color: var(--c-groen); } /* middenkolom */ .cm-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--c-creme); } .cm-thread__kop { padding: 14px 18px; border-bottom: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); } .cm-thread__titel { display: flex; align-items: center; gap: 9px; margin-bottom: 3px; } .cm-thread__titel strong { font-size: .9rem; flex: 1; min-width: 0; } .cm-thread__meta { font: 500 .68rem var(--font-ui); color: var(--c-ink-3); } .cm-thread__meta .mono { font-size: .62rem; } .cm-collision { padding: 8px 18px; background: var(--c-amber-t); border-bottom: var(--lijndikte) solid var(--c-amber); font: 600 .7rem var(--font-ui); color: var(--c-amber); } .cm-wavenster { padding: 8px 18px; background: var(--c-terra-t); border-bottom: var(--lijndikte) solid var(--c-terra); font: 600 .7rem var(--font-ui); color: var(--c-terra-d); } .cm-thread__scroll { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; min-height: 0; } .cm-bericht { display: flex; flex-direction: column; gap: 4px; max-width: 76%; align-self: flex-start; } .cm-bericht.is-uit { align-self: flex-end; } .cm-bericht > div { padding: 11px 14px; border-radius: 13px 13px 13px 4px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); font: 500 .8rem/1.55 var(--font-ui); } .cm-bericht.is-uit > div { border-radius: 13px 13px 4px 13px; background: var(--c-groen-t); border-color: var(--c-groen); } .cm-bericht > span { font: 500 .62rem var(--font-ui); color: var(--c-ink-3); align-self: flex-start; } .cm-bericht.is-uit > span { align-self: flex-end; } /* interne memo — memo-geel (huisstijl: alléén interne notities) */ .cm-memo { align-self: stretch; background: var(--c-memo); border: var(--lijndikte) solid var(--c-amber); border-radius: 11px; padding: 11px 14px; } .cm-memo__kop { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; } .cm-memo__kop .kicker { color: var(--c-amber); } .cm-memo__kop strong { font-size: .7rem; color: var(--c-amber); } .cm-memo__kop span { margin-left: auto; font: 500 .62rem var(--font-ui); color: var(--c-ink-3); } .cm-memo p { margin: 0; font: 500 .76rem/1.55 var(--font-ui); color: var(--c-ink); } /* composer */ .cm-composer { border-top: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); padding: 12px 16px; } .cm-composer.is-memo { background: var(--c-memo); } .cm-composer__tabs { display: flex; gap: 5px; margin-bottom: 9px; align-items: center; flex-wrap: wrap; } .cm-composertab { padding: 6px 13px; border-radius: 8px; cursor: pointer; font: 700 .7rem var(--font-ui); border: var(--lijndikte) solid transparent; background: var(--c-paneel); color: var(--c-ink-2); } .cm-composertab.is-actief { background: var(--donker, var(--c-ink)); color: var(--knop-ink); } .cm-composertab--memo.is-actief { background: var(--c-amber); color: var(--knop-ink); } .cm-composer__rek { flex: 1; } .cm-composer__veld { display: flex; flex-direction: column; gap: 4px; } .cm-composer__veld textarea { width: 100%; box-sizing: border-box; min-height: 64px; resize: vertical; padding: 11px 13px; border: 1.5px solid var(--c-lijn-2); border-radius: 10px; font: 500 .8rem/1.5 var(--font-ui); color: var(--c-ink); background: var(--kaart); } .cm-composer.is-memo textarea { border-color: var(--c-amber); } .cm-composer__voet { display: flex; align-items: center; gap: 8px; margin-top: 9px; } .cm-composer__voet > span { font: 500 .66rem/1.4 var(--font-ui); color: var(--c-ink-3); flex: 1; } /* rechterkolom */ .cm-context { border-left: var(--lijndikte) solid var(--c-lijn); overflow-y: auto; padding: 16px; min-height: 0; } .cm-context > .kicker { display: block; margin-bottom: 9px; } .cm-context__warn { color: var(--c-amber) !important; } .cm-context__naam { display: block; font-size: 1rem; margin-bottom: 2px; } .cm-context__fase { display: block; font: 500 .68rem var(--font-ui); color: var(--c-ink-3); margin-bottom: 14px; } .cm-context__duo { display: flex; gap: 8px; margin-bottom: 14px; } .cm-context__duo > div { flex: 1; padding: 10px; border-radius: 10px; background: var(--c-groen-t); text-align: center; } .cm-context__duo > div:last-child { background: var(--c-paneel); } .cm-context__duo strong { display: block; font-size: .95rem; } .cm-context__feiten { padding: 11px 13px; border-radius: 10px; background: var(--c-creme); margin-bottom: 14px; display: flex; flex-direction: column; gap: 5px; } .cm-context__feiten > div { display: flex; justify-content: space-between; gap: 8px; font: 500 .7rem var(--font-ui); color: var(--c-ink-3); } .cm-context__feiten strong { font-weight: 600; color: var(--c-ink); text-align: right; } .cm-grondslag { font-size: .6rem; color: var(--c-ink-2) !important; } .cm-context__klantkaart { display: block; text-align: center; margin-bottom: 16px; text-decoration: none; } .cm-context__uitleg { font: 400 .74rem/1.6 var(--font-ui); color: var(--c-ink-2); margin: 0 0 14px; } .cm-context__koppel { width: 100%; margin: 10px 0 8px; } .cm-onthoud { display: flex; align-items: center; gap: 8px; font: 500 .7rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; } .cm-onthoud input { accent-color: var(--c-groen); } .cm-tijdlijn { display: flex; flex-direction: column; gap: 9px; } .cm-tijdlijn__rij { display: flex; gap: 9px; } .cm-tijdlijn__rij i { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; font-size: .74rem; font-style: normal; color: var(--c-groen-d); background: var(--c-groen-t); } .cm-tijdlijn__rij strong { display: block; font-size: .72rem; } .cm-tijdlijn__rij span { display: block; font: 400 .64rem var(--font-ui); color: var(--c-ink-2); } .cm-tijdlijn__rij em { font: 400 .58rem var(--font-mono); font-style: normal; color: var(--c-ink-3); } .cm-context .bs-sectie { margin-top: 16px; } /* ===================== 3.2 · Mijn inbox / Telefonie / Stuur-dashboard ===================== */ .cm--smal { max-width: 860px; } .cm-tabs { display: flex; gap: 6px; align-items: center; } .cm-tabs .cm-boxchip { text-decoration: none; } .cm-caserij { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; } .cm-mijnlijst { overflow: hidden; } .cm-mijnrij { width: 100%; display: flex; align-items: center; gap: 13px; padding: 14px 18px; border: none; border-bottom: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); cursor: pointer; text-align: left; font-family: var(--font-ui); } .cm-mijnrij:hover { background: var(--c-creme); } .cm-mijnrij__ic { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center; font-size: .78rem; font-style: normal; color: var(--c-groen-d); background: var(--c-groen-t); } .cm-mijnrij__ic.is-memo { color: var(--c-amber); background: var(--c-memo); } .cm-mijnrij__ic.is-taak { color: var(--c-groen-d); background: var(--c-paneel); } .cm-mijnrij__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cm-mijnrij__kop { display: flex; align-items: center; gap: 8px; } .cm-mijnrij__kop strong { font-size: .78rem; } .cm-mijnrij__snip { font: 400 .72rem var(--font-ui); color: var(--c-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cm-mijnrij__wie { font: 500 .62rem var(--font-ui); color: var(--c-ink-3); } .cm-mijnrij__tijd { font: 500 .66rem var(--font-ui); font-style: normal; color: var(--c-ink-3); flex: none; } .cm--foon { max-width: var(--werkbreedte, 1240px); } .cm-foongrid { display: grid; grid-template-columns: minmax(0, 1.3fr) 340px; gap: 18px; align-items: start; } @media (max-width: 1000px) { .cm-foongrid { grid-template-columns: 1fr; } } .cm-foongrid .kicker { display: block; margin-bottom: 8px; } .cm-dialer { display: flex; align-items: flex-end; gap: 10px; padding: 12px 14px; margin-bottom: 16px; } .cm-dialer > .mono { font-size: .9rem; color: var(--c-groen-d); padding-bottom: 12px; } .cm-dialer__veld { flex: 1; display: flex; flex-direction: column; gap: 3px; } .cm-dialer__veld input { border: none; font: 600 .8rem var(--font-ui); color: var(--c-ink); background: transparent; padding: 6px 0; } .cm-foonlog { overflow: hidden; } .cm-foonrij { display: flex; align-items: flex-start; gap: 13px; padding: 14px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .cm-foonrij > i { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; font-size: .84rem; font-style: normal; color: var(--c-groen-d); background: var(--c-groen-t); } .cm-foonrij > i.is-gemist { color: var(--c-rood); background: var(--c-rood-t); } .cm-foonrij__kop { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 3px; } .cm-foonrij__kop strong { font-size: .78rem; } .cm-foonrij__kop .mono { font-size: .66rem; color: var(--c-ink-3); } .cm-opname { font-size: .58rem; color: var(--c-groen-d); } .cm-foonrij__note { display: block; font: 500 .72rem var(--font-ui); color: var(--c-ink-2); } .cm-foonrij > div > em { font: 500 .62rem var(--font-mono); font-style: normal; color: var(--c-ink-3); } .cm-belpaneel { position: sticky; top: 12px; background: var(--donker, var(--c-ink)); border-radius: 18px; padding: 22px; color: var(--knop-ink); display: flex; flex-direction: column; gap: 4px; } .cm-belpaneel__status { display: flex; align-items: center; gap: 8px; font: 600 .6rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--knop-ink) 65%, transparent); margin-bottom: 14px; } .cm-belpaneel__status i { width: 9px; height: 9px; border-radius: 50%; background: var(--c-groen); } .cm-belpaneel__avatar { width: 64px; height: 64px; border-radius: 50%; background: color-mix(in srgb, var(--kaart) 12%, transparent); display: grid; place-items: center; font: 800 1.2rem var(--font-ui); margin-bottom: 12px; } .cm-belpaneel > strong { font-size: 1.1rem; } .cm-belpaneel__nr { font-size: .76rem; color: color-mix(in srgb, var(--knop-ink) 65%, transparent); margin-bottom: 14px; } .cm-belpaneel__kaart { background: color-mix(in srgb, var(--kaart) 7%, transparent); border-radius: 12px; padding: 13px 15px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 7px; } .cm-belpaneel__kaart .kicker { color: color-mix(in srgb, var(--knop-ink) 55%, transparent); margin-bottom: 3px; } .cm-belpaneel__kaart > div { display: flex; justify-content: space-between; gap: 10px; font: 500 .74rem var(--font-ui); } .cm-belpaneel__kaart span { color: color-mix(in srgb, var(--knop-ink) 60%, transparent); } .cm-belpaneel__kaart strong { text-align: right; font-weight: 600; } .cm-belpaneel__verbonden { text-align: center; font: 600 .74rem var(--font-ui); color: var(--c-groen-t); margin-bottom: 12px; } .cm-belpaneel__acties { display: flex; gap: 10px; } .cm-belpaneel__acties .btn { flex: 1; } .cm-ophangknop { background: var(--c-terra); color: var(--knop-ink); } .cm-belpaneel--leeg { background: none; border: 1.5px dashed var(--c-lijn-2); color: var(--c-ink-3); text-align: center; align-items: center; gap: 12px; padding: 26px; } .cm-belpaneel--leeg span { font: 600 .76rem/1.5 var(--font-ui); } .cm-teams { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; } .cm-team { padding: 16px 18px; } .cm-team__rij { display: grid; grid-template-columns: 1.4fr repeat(3, .8fr) auto auto; gap: 12px; align-items: center; } @media (max-width: 900px) { .cm-team__rij { grid-template-columns: 1fr 1fr; } } .cm-team__rij > div > strong { display: block; font-size: .88rem; } .cm-team__rij > div > span { font: 500 .62rem var(--font-ui); color: var(--c-ink-3); } .cm-amber { color: var(--c-amber); } .cm-team__agents { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 13px; padding-top: 13px; border-top: var(--lijndikte) solid var(--c-lijn); } .cm-agent { flex: 1; min-width: 160px; } .cm-agent__kop { display: flex; justify-content: space-between; margin-bottom: 5px; font: 600 .72rem var(--font-ui); } .cm-agent__kop .mono { font-size: .62rem; font-weight: 500; color: var(--c-ink-3); } .cm-agent__lijn { height: 6px; border-radius: var(--radius-pill); background: var(--c-paneel); } .cm-agent__lijn i { display: block; height: 100%; border-radius: var(--radius-pill); } /* ==== 3.3 · Intern: berichten & meldingen (WhatsApp-vervanger) ==== */ .cm--intern { max-width: var(--werkbreedte, 1240px); } .cm-intgrid { display: grid; grid-template-columns: 260px minmax(340px, 1fr) 300px; overflow: hidden; height: calc(100vh - 220px); min-height: 560px; margin-top: 14px; } @media (max-width: 1100px) { .cm-intgrid { grid-template-columns: 1fr; height: auto; } } .cm-intkanalen { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; border-right: var(--lijndikte) solid var(--c-lijn); background: var(--c-creme); overflow-y: auto; } .cm-intkanalen > .kicker { padding: 4px 8px 6px; } .cm-intkanaal { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: none; border-radius: 10px; background: transparent; cursor: pointer; text-align: left; font: inherit; } .cm-intkanaal:hover { background: var(--c-paneel); } .cm-intkanaal.is-actief { background: var(--c-groen-t); } .cm-intkanaal__av { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; font: 700 .68rem var(--font-mono); color: var(--c-groen-d); background: var(--c-paneel); } .cm-intkanaal__av.is-dm { border-radius: 50%; font-family: var(--font-ui); } .cm-intkanaal.is-actief .cm-intkanaal__av { color: var(--knop-ink); background: var(--c-groen-d); } .cm-intkanaal__naam { flex: 1; min-width: 0; display: flex; flex-direction: column; } .cm-intkanaal__naam strong { font-size: .74rem; font-weight: 600; } .cm-intkanaal__naam strong.is-ongelezen { font-weight: 800; } .cm-intkanaal__naam span { font: 400 .62rem var(--font-ui); color: var(--c-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cm-intkanaal__badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--c-groen-d); color: var(--knop-ink); font-size: .6rem; font-weight: 700; display: grid; place-items: center; flex: none; } .cm-intchat { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--c-creme); } .cm-intchat__kop { padding: 13px 18px; border-bottom: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); } .cm-intchat__kop strong { display: block; font-size: .9rem; } .cm-intchat__kop span { font: 500 .68rem var(--font-ui); color: var(--c-ink-3); } .cm-intchat__feed { flex: 1; overflow-y: auto; min-height: 0; padding: 18px; display: flex; flex-direction: column; gap: 12px; } .cm-intsys { align-self: center; max-width: 88%; text-align: center; padding: 10px 15px; border-radius: 12px; font: 600 .7rem/1.5 var(--font-ui); color: var(--c-ink-2); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); } .cm-intsys.is-cel { color: var(--c-groen-d); background: var(--c-groen-t); border-color: var(--c-groen-d); } .cm-intsys em { display: block; font-style: normal; font-size: .56rem; color: var(--c-ink-3); margin-top: 3px; } .cm-intmsg { display: flex; gap: 9px; max-width: 74%; align-self: flex-start; } .cm-intmsg.is-mijn { align-self: flex-end; flex-direction: row-reverse; } .cm-intmsg__av { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 700 .58rem var(--font-ui); color: var(--knop-ink); background: var(--donker, var(--c-ink)); } .cm-intmsg.is-mijn .cm-intmsg__av { background: var(--c-groen-d); } .cm-intmsg__box { padding: 10px 13px; border-radius: 13px 13px 13px 4px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); font: 500 .74rem/1.5 var(--font-ui); } .cm-intmsg.is-mijn .cm-intmsg__box { border-radius: 13px 13px 4px 13px; background: var(--c-groen-t); border-color: var(--c-groen); } .cm-intmsg__box.is-mention { border-color: var(--c-amber); } .cm-intmsg__tag { display: block; font-size: .58rem; font-weight: 700; color: var(--c-amber); margin-bottom: 2px; } .cm-intmsg__wie { display: block; font: 500 .58rem var(--font-ui); color: var(--c-ink-3); margin-top: 3px; } .cm-intmsg.is-mijn .cm-intmsg__wie { text-align: right; } .cm-intchat__voet { display: flex; gap: 9px; align-items: center; padding: 12px 16px; border-top: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); } .cm-intchat__voet input { flex: 1; box-sizing: border-box; padding: 11px 13px; border: 1.5px solid var(--c-lijn-2); border-radius: 10px; font: 500 .76rem var(--font-ui); color: var(--c-ink); background: var(--kaart); } .cm-intmeldingen { border-left: var(--lijndikte) solid var(--c-lijn); overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--kaart); } .cm-intmeldingen > .kicker { margin-bottom: 2px; } .cm-melding { display: flex; gap: 11px; padding: 11px 12px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; } .cm-melding__ic { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; font-size: .72rem; } .cm-melding__ic.is-amber { color: var(--c-amber); background: var(--c-amber-t); } .cm-melding__ic.is-groen { color: var(--c-groen-d); background: var(--c-groen-t); } .cm-melding__ic.is-groen-d { color: var(--knop-ink); background: var(--c-groen-d); } .cm-melding__ic.is-terra { color: var(--c-terra-d); background: var(--c-terra-t); } .cm-melding > div { flex: 1; min-width: 0; display: flex; flex-direction: column; } .cm-melding strong { font-size: .72rem; } .cm-melding span { font: 400 .66rem var(--font-ui); color: var(--c-ink-2); } .cm-melding em { font: 500 .6rem var(--font-ui); font-style: normal; color: var(--c-ink-3); margin-top: 2px; } .cm-intmeldingen__uitleg { margin: 4px 0 0; font: 400 .66rem/1.55 var(--font-ui); color: var(--c-ink-3); } /* ==== 3.3 · Broadcasts & sales-feed ==== */ .cm--bc { max-width: var(--werkbreedte, 1240px); } .cm-bcgrid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 14px; } @media (max-width: 1000px) { .cm-bcgrid { grid-template-columns: 1fr; } } .cm-bcgrid .kicker { display: block; margin-bottom: 9px; } .cm-bclijst { display: flex; flex-direction: column; gap: 9px; } .cm-bckaart { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 13px 14px; border-radius: 13px; border: 1.5px solid var(--c-lijn); background: var(--kaart); cursor: pointer; text-align: left; font: inherit; } .cm-bckaart.is-actief { border-color: var(--c-ink); background: var(--c-paneel); } .cm-bckaart__kop { display: flex; align-items: center; gap: 9px; width: 100%; } .cm-bckaart__ic { font-size: .9rem; color: var(--c-groen-d); } .cm-bckaart__kop strong { flex: 1; font-size: .8rem; } .cm-bckaart__kop i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-lijn-2); } .cm-bckaart__kop i.is-aan { background: var(--c-groen); } .cm-bckaart .chip { font-size: .56rem; } .cm-bckaart__doel { font: 400 .64rem var(--font-ui); color: var(--c-ink-3); } .cm-bcnieuw { display: block; width: 100%; box-sizing: border-box; margin-top: 10px; padding: 10px 12px; border: 1.5px dashed var(--c-lijn-2); border-radius: 11px; background: transparent; font: 600 .7rem var(--font-ui); color: var(--c-ink-3); text-align: center; cursor: pointer; } .cm-bcnieuw:hover { color: var(--c-ink); border-color: var(--c-ink-3); } .cm-bceditor { padding: 20px; } .cm-bceditor__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .cm-bceditor__kop strong { display: block; font-size: 1rem; } .cm-bceditor__kop span { font: 500 .7rem var(--font-ui); color: var(--c-ink-3); } .cm-bceditor__kop .chip { border: none; cursor: pointer; font: 600 .66rem var(--font-ui); } .cm-bceditor__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } @media (max-width: 900px) { .cm-bceditor__grid { grid-template-columns: 1fr; } } .cm-bcbieb { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; } .cm-bcveld { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px; border: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); cursor: pointer; text-align: left; font: inherit; } .cm-bcveld.is-aan { border-color: var(--c-groen-d); background: var(--c-groen-t); } .cm-bcveld__box { width: 19px; height: 19px; border-radius: 5px; flex: none; display: grid; place-items: center; border: 1.5px solid var(--c-lijn-2); font-size: .62rem; color: var(--knop-ink); } .cm-bcveld.is-aan .cm-bcveld__box { border-color: var(--c-groen-d); background: var(--c-groen-d); } .cm-bcveld__lbl { flex: 1; min-width: 0; display: flex; flex-direction: column; } .cm-bcveld__lbl strong { font-size: .72rem; font-weight: 600; } .cm-bcveld__lbl .mono { font-size: .58rem; color: var(--c-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cm-bcveld .chip { font-size: .54rem; flex: none; } .cm-bcpreview { background: var(--donker, var(--c-ink)); border-radius: 14px; padding: 16px 18px; color: var(--knop-ink); display: flex; flex-direction: column; gap: 10px; } .cm-bcpreview > strong { font-size: .8rem; margin-bottom: 2px; } .cm-bcpreview__regel span { display: block; font: 500 .62rem var(--font-ui); color: color-mix(in srgb, var(--knop-ink) 62%, transparent); } .cm-bcpreview__regel strong { font-size: .8rem; color: var(--knop-ink); } .cm-bcintern { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-amber); font: 500 .68rem/1.5 var(--font-ui); color: var(--c-ink); } .cm-bcintern span { color: var(--c-amber); } .cm-bctest { width: 100%; margin-top: 12px; justify-content: center; } .cm-lijstacties { justify-content: flex-end; margin-bottom: 8px; } /* Eerste-reactie-SLA per kanaal (D4a) */ .cm-eerste { font-size: 10.5px; font-family: var(--font-mono); border-radius: 99px; padding: 1px 8px; border: 1px solid var(--c-lijn); } .cm-eerste--rood { color: var(--c-rood); border-color: var(--c-rood); font-weight: 700; } .cm-eerste--terra { color: var(--c-terra); border-color: var(--c-terra); font-weight: 700; } .cm-eerste--amber { color: var(--c-amber); border-color: var(--c-amber); } .cm-eerste--groen { color: var(--c-groen-d); } /* Belscript-paneel (D4c) */ .cm-beluitgaand { display: grid; grid-template-columns: 1fr 1.2fr; gap: 14px; align-items: start; } .cm-belscript { border: 1px solid var(--c-lijn); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--c-paneel); } .cm-belscript__kop { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .cm-belscript__kop select { border: 1px solid var(--c-lijn); border-radius: 10px; padding: 6px 10px; font: inherit; font-size: 12.5px; background: var(--c-paneel); color: var(--c-ink); } .cm-belscript__stappen { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; } .cm-belscript__stappen button { border: 0; background: none; font: inherit; font-size: 13px; text-align: left; cursor: pointer; color: var(--c-ink); padding: 0; } .cm-belscript__stappen li.is-gehad button { color: var(--c-ink-3); text-decoration: line-through; } .cm-belscript__stappen li.is-nu button { font-weight: 700; color: var(--c-groen-d); } .cm-belscript__noot { font-size: 11.5px; color: var(--c-ink-2); } /* ---- Voorbeeld A: opgeruimde kop + Toezicht-lens + gegroepeerde lijst ---- */ .cm-kop2 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .cm-kop2__titel h1 { margin: 1px 0 0; font-size: 1.2rem; } .cm-kop2__titel .kicker { display: block; } .cm-seg-wrap { display: inline-flex; background: var(--c-paneel); border-radius: var(--radius-pill); padding: 3px; gap: 2px; } .cm-seg { border: 0; background: transparent; font: 600 .66rem var(--font-ui); color: var(--c-ink-2); padding: 6px 12px; border-radius: var(--radius-klein); cursor: pointer; white-space: nowrap; } .cm-seg b { font: 700 .58rem var(--font-mono); margin-left: 5px; color: var(--c-ink-3); } .cm-seg.is-actief { background: var(--kaart); color: var(--c-ink); box-shadow: var(--schaduw-tegel); } .cm-seg.is-actief b { color: var(--c-groen-d); } .cm-zoek2 { flex: 1 1 200px; min-width: 160px; } .cm-zoek2 input { width: 100%; padding: 8px 13px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 10px; background: var(--kaart); font: 500 .74rem var(--font-ui); color: var(--c-ink); } .cm-zoek2 input:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; border-color: var(--c-groen-d); } .cm-lens { display: inline-flex; background: var(--c-paneel); border-radius: var(--radius-pill); padding: 3px; } .cm-lensbtn { border: 0; background: transparent; font: 700 .64rem var(--font-ui); color: var(--c-ink-2); padding: 6px 12px; border-radius: var(--radius-klein); cursor: pointer; } .cm-lensbtn.is-actief { background: var(--kaart); color: var(--c-ink); box-shadow: var(--schaduw-tegel); } .cm-lensbtn--toez.is-actief { background: var(--c-amber); color: var(--knop-ink); } .cm-verbind { display: flex; gap: 12px; align-items: center; margin-left: auto; } .cm-verbind span { display: flex; align-items: center; gap: 6px; font: 600 .64rem var(--font-ui); color: var(--c-ink-2); } .cm-verbind i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-groen); } .cm-toezicht { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 12px 0 0; padding: 9px 16px; background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-amber); border-radius: var(--radius); font: 600 .72rem var(--font-ui); color: var(--c-ink); } .cm-toezicht__lbl { font: 700 .58rem var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--c-amber); } .cm-toezicht__wl b { font-family: var(--font-mono); margin: 0 3px; } .cm-toezicht__sig { color: var(--c-amber); } .cm-toezicht button { margin-left: auto; } .cm-toezicht button[disabled] { opacity: .45; cursor: not-allowed; } .cm-sec { display: flex; align-items: center; gap: 8px; padding: 10px 15px 5px; font: 700 .58rem var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); position: sticky; top: 0; background: var(--kaart); z-index: 1; } .cm-sec__ic { color: var(--c-rood); } .cm-sec__badge { font: 700 .54rem var(--font-mono); background: var(--c-amber); color: var(--knop-ink); padding: 1px 7px; border-radius: var(--radius-pill); } .cm-sec__n { margin-left: auto; color: var(--c-ink-3); } .cm-lijst__balk { display: flex; align-items: center; gap: 7px; padding: 10px 12px; border-bottom: var(--lijndikte) solid var(--c-lijn); flex-wrap: wrap; } .cm-lijst__rek { flex: 1; } .cm-mini { padding: 5px 10px; font-size: .62rem; } .cm-sugg { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin: 0 0 9px; } .cm-sugg .kicker { align-self: center; } .cm-suggchip { font: 600 .66rem var(--font-ui); padding: 5px 11px; border-radius: var(--radius-klein); border: var(--lijndikte) dashed var(--c-groen); background: var(--c-groen-t); color: var(--c-groen-d); cursor: pointer; } .cm-suggchip:hover { background: var(--kaart); } .cm-suggchip:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; } .cm-kop2--smal { align-items: center; } .cm-kop2--smal .cm-caserij { margin: 0; } .cm-mijn-naar { margin-left: auto; text-decoration: none; } .cm-sec__ic--at { color: var(--c-groen-d); font-family: var(--font-mono); } .cm-belpaneel__dossier { display: inline-block; margin-top: 8px; font: 700 .66rem var(--font-ui); color: var(--c-groen-d); text-decoration: none; } .cm-belpaneel__dossier:hover { text-decoration: underline; } /* IB2 F1 · beheer postbussen */ .cm-pb { border: 1px solid var(--lijn); border-radius: var(--radius); padding: 10px 14px 14px; margin: 0 0 12px; } .cm-pb legend { padding: 0 6px; font-size: .74rem; color: var(--ink2); } .cm-pb__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; } .cm-pb__grid .bs-veld--textarea, .cm-pb__grid textarea { grid-column: 1 / -1; } .cm-pb-lijst { max-height: 60vh; overflow: auto; padding-right: 4px; } @media (max-width: 720px) { .cm-pb__grid { grid-template-columns: 1fr; } } /* ─── Schermronde 29-09 · het leesvlak (Michiel: «het scherm waar het bericht van de klant gelezen wordt is te klein, dit moet groter») ──────────────────────────────────────────────────────────────────────────────── De inbox is een bord over de volle breedte. De lijst is smaller, het gesprek krijgt de rest, en de klantgegevens rechts zijn in te klappen. Berichten lopen breder uit en het antwoordveld is hoger. */ .cm { max-width: none; } .cm .cm-grid { grid-template-columns: 300px minmax(0, 1fr) 280px; height: calc(100vh - 270px); min-height: 600px; } .cm .cm-grid.cm-grid--breed { grid-template-columns: 300px minmax(0, 1fr); } .cm .cm-bericht { max-width: 88%; } .cm .cm-bericht > div { font-size: .9rem; line-height: 1.6; padding: 13px 16px; } /* het antwoordveld is klein tot je erin staat: het gesprek lezen gaat vóór het antwoord schrijven */ .cm .cm-composer__veld textarea { min-height: 56px; font-size: .86rem; transition: min-height 160ms; } .cm .cm-composer__veld textarea:focus, .cm .cm-composer__veld textarea:not(:placeholder-shown) { min-height: 132px; } .cm .cm-composer:not(:focus-within) .cm-sugg { display: none; } @media (prefers-reduced-motion: reduce) { .cm .cm-composer__veld textarea { transition: none; } } .cm .cm-thread__titel { display: flex; align-items: center; gap: 8px; } .cm .cm-thread__titel strong { font-size: 1rem; flex: 1; min-width: 0; } .cm .cm-thread__titel .cm-composer__rek { display: none; } .cm .cm-lensbtn b { margin-left: 4px; color: var(--c-ink-3); } @media (max-width: 1100px) { .cm .cm-grid, .cm .cm-grid.cm-grid--breed { grid-template-columns: 1fr; height: auto; } } /* ── inbox.css ── */ /* inbox.css — Inbox en telefonie v4 (Michiel 11-10-2026). Alleen tokens uit casa360-stijl.css. Referentie: docs/prototypes/wireframe-inbox-v4.html. Kleur is betekenis: een punt of een gekleurd blok staat er alleen als er iets vastzit; memo-geel is uitsluitend de interne memo. */ .ib { max-width: var(--werkbreedte-breed, 1360px); margin: 0 auto; padding: 22px 28px 64px; container: ib / inline-size; } .ib--smal { max-width: var(--werkbreedte, 1240px); } .ib h1 { margin: 2px 0 4px; } .ib h2 { margin: 0; font-size: 1rem; } .ib h3 { margin: 0; font-size: .86rem; } .ib p { margin: 0; } .ib-stil { color: var(--ink2); } .ib-klein { font-size: .8rem; } .ib-rij { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .ib-rek { flex: 1; } .ib-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .ib-meld { display: flex; gap: 10px; align-items: flex-start; border-radius: var(--radius-klein); padding: 9px 12px; background: var(--grijs); font-size: .84rem; } .ib-meld--let { background: var(--let-t); color: var(--let-d); } .ib-meld--stop { background: var(--stop-t); color: var(--stop-d); } .ib-meld--goed { background: var(--goed-t); color: var(--goed-d); } .ib-slot { margin-bottom: 10px; } /* een verborgen melding blijft verborgen: `display: flex` hierboven wint anders van het hidden-attribuut */ .ib-meld[hidden], .ib-rij[hidden], .ib [hidden] { display: none; } .ib-punt { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-pill); flex: none; } .ib-punt--let { background: var(--let); } .ib-punt--stop { background: var(--stop); } .ib-punt--goed { background: var(--goed); } .ib-avatar { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-pill); background: var(--accent-t); color: var(--ink); font: 700 .64rem/1 var(--font-ui); flex: none; } .ib-avatar--leeg { background: transparent; border: 1.5px dashed var(--lijn2); } .ib-veld { display: grid; gap: 4px; min-width: 0; } .ib-veld > span { font-size: .8rem; font-weight: 700; color: var(--ink2); } .ib-veld input, .ib-veld select, .ib-veld textarea { border: var(--lijndikte, 1px) solid var(--lijn2); border-radius: var(--radius-klein); padding: 7px 10px; background: var(--kaart); width: 100%; min-width: 0; font: inherit; color: inherit; } .ib-veld textarea { min-height: 84px; resize: vertical; } .ib-veld small { color: var(--ink2); } .ib-schakel { display: flex; gap: 8px; align-items: flex-start; font-weight: 600; } .ib-schakel input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--knop); flex: none; } /* het bord: mappen · lijst · gesprek met de klant ernaast */ .ib-bord { display: grid; grid-template-columns: 196px minmax(240px, 300px) minmax(0, 1fr); height: max(520px, calc(100vh - 190px)); overflow: hidden; } .ib-rail { border-right: var(--lijndikte, 1px) solid var(--lijn); padding: 10px 8px; overflow: auto; display: flex; flex-direction: column; gap: 2px; } .ib-rail button { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; border-radius: var(--radius-klein); padding: 6px 9px; font: 600 .84rem var(--font-ui); color: inherit; cursor: pointer; text-align: left; white-space: nowrap; } .ib-rail button:hover { background: var(--grijs); } .ib-rail button[aria-pressed="true"] { background: var(--accent-t); font-weight: 800; } .ib-rail button.btn--primary { background: var(--knop); color: var(--knop-ink); justify-content: center; margin-bottom: 8px; font-weight: 800; } .ib-rail button.btn--primary:hover { background: var(--knop-d); } .ib-rail b { margin-left: auto; font: 600 .74rem var(--font-mono); } .ib-rail hr { border: 0; border-top: var(--lijndikte, 1px) solid var(--lijn); margin: 8px 4px; width: auto; } .ib-lijstkol { border-right: var(--lijndikte, 1px) solid var(--lijn); display: flex; flex-direction: column; min-width: 0; min-height: 0; } .ib-lijstkop { padding: 10px; border-bottom: var(--lijndikte, 1px) solid var(--lijn); display: grid; gap: 6px; } .ib-zoek { border: var(--lijndikte, 1px) solid var(--lijn2); border-radius: var(--radius-klein); padding: 7px 10px; width: 100%; background: var(--kaart); font: inherit; color: inherit; } .ib-lijst { overflow: auto; flex: 1; } .ib-g { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 8px; padding: 9px 10px; border-bottom: var(--lijndikte, 1px) solid var(--grijs2); cursor: pointer; align-items: center; } .ib-g:hover { background: var(--accent-t2); } .ib-g[aria-current="true"] { background: var(--accent-t); } .ib-g__wie { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ib-g.is-ong .ib-g__wie, .ib-g.is-ong .ib-g__ond { font-weight: 800; } .ib-g__ond { grid-column: 2 / 4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .82rem; } .ib-g__ond span { color: var(--ink2); font-weight: 500; } .ib-g__tijd { font: 500 .7rem var(--font-mono); color: var(--ink2); } .ib-g__voet { grid-column: 2 / 4; display: flex; gap: 6px; align-items: center; font-size: .74rem; color: var(--ink2); min-width: 0; } .ib-g input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--knop); } .ib-ster { border: 0; background: transparent; cursor: pointer; padding: 0 2px; color: var(--ink3); font-size: .95rem; line-height: 1; } .ib-ster.is-aan { color: var(--let); } .ib-bulk { display: flex; gap: 6px; align-items: center; padding: 6px 10px; background: var(--accent-t); font-size: .8rem; font-weight: 700; } .ib-leeg { padding: 28px 16px; text-align: center; color: var(--ink2); } .ib-draadkol { display: grid; grid-template-columns: minmax(0, 1fr) 228px; min-width: 0; min-height: 0; } .ib-draad { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .ib-draadkop { padding: 10px 14px; border-bottom: var(--lijndikte, 1px) solid var(--lijn); display: grid; gap: 8px; } .ib-draadkop h2 { font-size: 1.02rem; } .ib-acties { display: flex; flex-wrap: wrap; gap: 6px; } .ib-berichten { flex: 1; overflow: auto; padding: 14px; display: grid; gap: 10px; align-content: start; background: var(--grijs); } .ib-b { background: var(--kaart); border: var(--lijndikte, 1px) solid var(--lijn); border-radius: var(--radius); padding: 10px 12px; display: grid; gap: 6px; max-width: 700px; min-width: 0; } .ib-b.is-uit { justify-self: end; border-color: var(--lijn2); } .ib-b.is-weg { opacity: .6; } .ib-b.is-memo { background: color-mix(in srgb, var(--memo) 28%, var(--kaart)); border-color: var(--memo); } .ib-b__van { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; font-size: .78rem; color: var(--ink2); } .ib-b__van b { color: var(--ink); font-size: .86rem; } .ib-b p { white-space: pre-wrap; overflow-wrap: anywhere; } .ib-opmaak { width: 100%; height: 320px; border: var(--lijndikte, 1px) solid var(--lijn); border-radius: var(--radius-klein); background: var(--kaart); } .ib-bijl { display: inline-flex; align-items: center; gap: 6px; border: var(--lijndikte, 1px) solid var(--lijn2); border-radius: var(--radius-klein); padding: 3px 9px; font: 500 .8rem var(--font-ui); background: var(--kaart); color: inherit; cursor: pointer; } .ib-bijl.is-vast { cursor: default; } .ib-schrijf { border-top: var(--lijndikte, 1px) solid var(--lijn); padding: 10px 14px; display: grid; gap: 8px; background: var(--kaart); } .ib-schrijf.is-memo { background: color-mix(in srgb, var(--memo) 28%, var(--kaart)); } .ib-schrijf textarea { border: var(--lijndikte, 1px) solid var(--lijn2); border-radius: var(--radius-klein); padding: 8px 10px; min-height: 62px; width: 100%; resize: vertical; background: var(--kaart); font: inherit; color: inherit; } .ib-schrijf textarea:focus { min-height: 128px; } .ib-schrijf select { border: var(--lijndikte, 1px) solid var(--lijn2); border-radius: var(--radius-klein); padding: 4px 8px; background: var(--kaart); font: 600 .8rem var(--font-ui); color: inherit; max-width: 200px; } .ib-tabjes { display: flex; gap: 4px; } .ib-tabjes button { border: var(--lijndikte, 1px) solid transparent; background: transparent; border-radius: var(--radius-klein); padding: 4px 10px; font: 700 .84rem var(--font-ui); cursor: pointer; color: var(--ink2); } .ib-tabjes button[aria-pressed="true"] { border-color: var(--lijn2); background: var(--kaart); color: var(--ink); } .ib-klant { border-left: var(--lijndikte, 1px) solid var(--lijn); padding: 12px; overflow: auto; display: grid; gap: 12px; align-content: start; font-size: .84rem; min-width: 0; } .ib-klant dl { margin: 0; display: grid; gap: 6px; } .ib-klant dt { font-size: .74rem; color: var(--ink2); font-weight: 700; } .ib-klant dd { margin: 0; overflow-wrap: anywhere; } .ib-loopt { padding: 6px 0; border-bottom: var(--lijndikte, 1px) solid var(--grijs2); } .ib-treffer { display: block; width: 100%; text-align: left; white-space: normal; margin-top: 4px; } .ib-terug { display: none; } details.ib-menu { position: relative; } details.ib-menu > summary { list-style: none; } details.ib-menu > summary::-webkit-details-marker { display: none; } details.ib-menu > div { position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; min-width: 240px; background: var(--kaart); border: var(--lijndikte, 1px) solid var(--lijn2); border-radius: var(--radius); box-shadow: var(--schaduw-zwevend); padding: 6px; display: grid; gap: 2px; } details.ib-menu > div button { display: flex; gap: 8px; align-items: center; border: 0; background: transparent; border-radius: var(--radius-klein); padding: 7px 9px; cursor: pointer; text-align: left; font: 600 .84rem var(--font-ui); color: inherit; } details.ib-menu > div button:hover { background: var(--grijs); } details.ib-menu > div small { color: var(--ink2); font-weight: 500; } .ib-mail { background: var(--kaart); border: var(--lijndikte, 1px) solid var(--lijn); border-radius: var(--radius-klein); padding: 14px; margin-inline: auto; width: 100%; overflow-wrap: anywhere; } .ib-mail.is-telefoon { max-width: 340px; } .ib-mail img { max-width: 100%; height: auto; } /* beheer */ .ib-beheer { display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: 560px; } .ib-pblijst { border-right: var(--lijndikte, 1px) solid var(--lijn); padding: 10px; display: grid; gap: 4px; align-content: start; } .ib-pb { display: grid; gap: 2px; width: 100%; text-align: left; border: var(--lijndikte, 1px) solid transparent; background: transparent; border-radius: var(--radius-klein); padding: 8px 10px; cursor: pointer; font: inherit; color: inherit; } .ib-pb:hover { background: var(--grijs); } .ib-pb[aria-pressed="true"] { background: var(--accent-t); } .ib-paneel { padding: 14px 16px; display: grid; gap: 14px; align-content: start; min-width: 0; } .ib-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: var(--lijndikte, 1px) solid var(--lijn); } .ib-tabs button { border: 0; border-bottom: 3px solid transparent; background: transparent; padding: 8px 12px; font: 700 .86rem var(--font-ui); color: var(--ink2); cursor: pointer; } .ib-tabs button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--knop); } .ib-tabelwrap { overflow-x: auto; } .ib-tabel { border-collapse: collapse; width: 100%; font-size: .84rem; } .ib-tabel th, .ib-tabel td { text-align: left; padding: 7px 10px; border-bottom: var(--lijndikte, 1px) solid var(--grijs2); vertical-align: middle; } .ib-tabel thead th { font-size: .74rem; color: var(--ink2); background: var(--rail); white-space: nowrap; } .ib-tabel td input, .ib-tabel td select { border: var(--lijndikte, 1px) solid var(--lijn2); border-radius: var(--radius-klein); padding: 5px 8px; background: var(--kaart); font: inherit; color: inherit; } .ib-check { display: grid; gap: 8px; } .ib-check > div { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border: var(--lijndikte, 1px) solid var(--lijn); border-radius: var(--radius-klein); } .ib-check .ib-punt { margin-top: 6px; } .ib-sigwerk { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.1fr); gap: 16px; } .ib-blok { border: var(--lijndikte, 1px) solid var(--lijn); border-radius: var(--radius-klein); padding: 10px 12px; display: grid; gap: 8px; } .ib-blok > .ib-rij:first-child { font-weight: 800; } .ib-voorbeeld { background: var(--grijs); border-radius: var(--radius); padding: 14px; display: grid; gap: 10px; align-content: start; } .ib-staaf { height: 8px; border-radius: var(--radius-pill); background: var(--grijs2); overflow: hidden; } .ib-staaf i { display: block; height: 100%; background: var(--ink); } .ib-log { padding: 8px 0; border-bottom: var(--lijndikte, 1px) solid var(--grijs2); } /* het werkvlak, niet het venster, bepaalt of de klant naast of onder het gesprek staat: links staat nog het hoofdmenu */ @container ib (max-width: 1040px) { .ib-draadkol { grid-template-columns: minmax(0, 1fr); overflow: auto; } .ib-klant { border-left: 0; border-top: var(--lijndikte, 1px) solid var(--lijn); overflow: visible; } .ib-draad { min-height: 480px; } .ib-sigwerk { grid-template-columns: 1fr; } } @media (max-width: 760px) { .ib { padding: 14px 16px 60px; } .ib-bord { grid-template-columns: 1fr; height: auto; overflow: visible; } .ib-rail { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: var(--lijndikte, 1px) solid var(--lijn); } .ib-rail button { width: auto; white-space: nowrap; } .ib-rail hr { display: none; } .ib-rail b { margin-left: 4px; } .ib-lijstkol { border-right: 0; } .ib-bord.is-draad .ib-rail, .ib-bord.is-draad .ib-lijstkol { display: none; } .ib-bord:not(.is-draad) .ib-draadkol { display: none; } .ib-terug { display: inline-flex; } .ib-draad { min-height: 0; } .ib-beheer { grid-template-columns: 1fr; } .ib-pblijst { border-right: 0; border-bottom: var(--lijndikte, 1px) solid var(--lijn); } details.ib-menu > div { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; } } @media (prefers-reduced-motion: no-preference) { .ib-g, .ib-rail button, .ib-pb { transition: background var(--overgang, 160ms); } } .ib .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* afzeggingen (Michiel 14-10) · de lopende afspraak in de klantkolom */ .ib-afzeg { padding: 10px 0; border-top: var(--lijndikte, 1px) solid var(--c-lijn-2); } .ib-afzeg .ib-loopt { margin-top: 6px; } /* ── commout.css ── */ /* ===================================================================== commout.css — Module 3.4 · Communicatie · Uitgaand (8 schermen). Prototype-navy/mauve → tokens; alleen token-kleuren. Prefix co-. ===================================================================== */ .co { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 48px; } .co-kop { margin-bottom: 14px; } .co-kop h1 { margin: 2px 0 4px; font-size: 1.35rem; } .co-kop p { margin: 0; font-size: .8rem; color: var(--c-ink-2); max-width: 72ch; } .co-kaart { padding: 16px 18px; margin-bottom: 16px; } .co-kaart > .kicker { display: block; margin-bottom: 12px; } .co-kaart > strong { display: block; font-size: .9rem; } .co-kaart--breed { margin-top: 2px; } .co-sub { display: block; font: 500 .7rem var(--font-ui); color: var(--c-ink-3); margin: 3px 0 13px; } .co-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0 16px; align-items: start; margin-top: 14px; } .co-grid--half { grid-template-columns: 1fr 1fr; } @media (max-width: 1000px) { .co-grid, .co-grid--half { grid-template-columns: 1fr; } } /* kanaal-iconen */ .co-kan { font: 600 .74rem var(--font-mono); color: var(--c-lijn-2); } .co-kan.is-mail { color: var(--c-ink-2); } .co-kan.is-wa { color: var(--c-groen); } .co-kan.is-app { font-size: .52rem; color: var(--c-ink-3); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 5px; padding: 1px 4px; } /* chips + switch */ .co-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; } .co-chips--vol { margin-bottom: 14px; } .co-chips--vol .co-chip { flex: 1; text-align: center; } .co-chips__scheider { width: 1px; align-self: stretch; background: var(--c-lijn-2); margin: 2px 4px; } .co-chip { padding: 6px 13px; border-radius: 8px; border: 1.5px solid var(--c-lijn-2); cursor: pointer; font: 600 .7rem var(--font-ui); white-space: nowrap; background: var(--kaart); color: var(--c-ink-2); } .co-chip.is-actief { border-color: var(--c-groen-d); background: var(--c-groen-t); color: var(--c-groen-d); font-weight: 700; } .co-switch { position: relative; width: 38px; height: 21px; border: none; border-radius: var(--radius-pill); background: var(--c-lijn-2); cursor: pointer; flex: none; } .co-switch i { position: absolute; top: 2.5px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--kaart); transition: left .15s; } .co-switch.is-aan { background: var(--c-groen-d); } .co-switch.is-aan i { left: 19px; } .co-telling { font: 500 .72rem var(--font-ui); color: var(--c-ink-3); margin-left: 6px; } /* ---- overzicht ---- */ .co-rij { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); margin-bottom: 8px; } .co-rij__tijd { font-size: .64rem; color: var(--c-groen-d); width: 104px; flex: none; } .co-rij > div { flex: 1; min-width: 0; } .co-rij > div strong { display: block; font-size: .76rem; } .co-rij > div span { font: 500 .66rem var(--font-ui); color: var(--c-ink-3); } .co-feedrij { display: flex; align-items: center; gap: 11px; padding: 8px 4px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .co-feedrij > .mono { font-size: .62rem; color: var(--c-ink-3); width: 44px; flex: none; } .co-feedrij > div { flex: 1; min-width: 0; font: 500 .72rem var(--font-ui); color: var(--c-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .co-feedrij .chip { flex: none; font-size: .58rem; } .co-meer { display: inline-block; margin-top: 10px; font: 600 .7rem var(--font-ui); color: var(--c-groen-d); } .co-kaart--fail { border-color: var(--c-terra); } .co-fail { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 10px; border: var(--lijndikte) solid var(--c-terra); border-left: 3px solid var(--c-terra); margin-bottom: 9px; } .co-fail > div { flex: 1; min-width: 0; } .co-fail strong { display: block; font-size: .76rem; } .co-fail span { font: 500 .66rem var(--font-ui); color: var(--c-terra-d); } .co-kanaalrij { margin-bottom: 13px; } .co-kanaalrij strong { font-size: .76rem; } .co-kanaalrij span { float: right; font: 500 .68rem var(--font-ui); color: var(--c-ink-3); } .co-balk { height: 8px; border-radius: var(--radius-pill); background: var(--c-paneel); overflow: hidden; margin-top: 5px; } .co-balk i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--c-ink-2); } .co-balk i.is-groen { background: var(--c-groen); } .co-balk i.is-amber { background: var(--c-amber); } .co-wawarn { display: flex; gap: 10px; margin-top: 13px; padding: 11px 13px; border-radius: 10px; background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-amber); font: 500 .7rem/1.5 var(--font-ui); } .co-wawarn span { color: var(--c-amber); flex: none; } /* ---- journeys ---- */ .co-jgrid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 14px; } @media (max-width: 1000px) { .co-jgrid { grid-template-columns: 1fr; } } .co-jgrid .kicker { display: block; margin-bottom: 9px; } .co-jlijst { display: flex; flex-direction: column; gap: 9px; } .co-jkaart { display: flex; flex-direction: column; gap: 6px; padding: 13px 14px; border-radius: 13px; border: 1.5px solid var(--c-lijn); background: var(--kaart); cursor: pointer; text-align: left; font: inherit; } .co-jkaart.is-actief { border-color: var(--c-ink); background: var(--c-paneel); } .co-jkaart__kop { display: flex; align-items: center; gap: 9px; width: 100%; } .co-jkaart__ic { font-size: .9rem; color: var(--c-groen-d); } .co-jkaart__kop strong { flex: 1; font-size: .76rem; line-height: 1.2; } .co-jkaart__kop i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-lijn-2); flex: none; } .co-jkaart__kop i.is-aan { background: var(--c-groen); } .co-jkaart__voet { display: flex; justify-content: space-between; width: 100%; font: 500 .64rem var(--font-ui); color: var(--c-ink-3); } .co-nieuw { display: block; width: 100%; box-sizing: border-box; margin-top: 10px; padding: 10px 12px; border: 1.5px dashed var(--c-lijn-2); border-radius: 11px; background: transparent; font: 600 .7rem var(--font-ui); color: var(--c-ink-3); text-align: center; cursor: pointer; } .co-nieuw:hover { color: var(--c-ink); border-color: var(--c-ink-3); } .co-nieuw--stap { width: auto; align-self: center; margin-top: 0; padding: 7px 14px; } .co-jboven { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; margin-bottom: 16px; } @media (max-width: 900px) { .co-jboven { grid-template-columns: 1fr; } } .co-jboven .co-kaart { margin-bottom: 0; } .co-funnelrij { margin-bottom: 10px; } .co-funnelrij > div { display: flex; justify-content: space-between; margin-bottom: 4px; font: 600 .72rem var(--font-ui); } .co-funnelrij .mono { font-size: .64rem; font-weight: 500; color: var(--c-ink-3); } .co-tweeweg { background: var(--donker, var(--c-ink)); border-radius: 14px; padding: 16px 18px; color: var(--knop-ink); } .co-tweeweg .kicker { color: color-mix(in srgb, var(--knop-ink) 60%, transparent); display: block; margin-bottom: 8px; } .co-tweeweg p { margin: 0 0 12px; font: 400 .72rem/1.5 var(--font-ui); color: color-mix(in srgb, var(--knop-ink) 82%, transparent); } .co-tweeweg .btn { width: 100%; justify-content: center; } .co-builder { padding: 20px; } .co-builder__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .co-builder__kop strong { display: block; font-size: .96rem; } .co-builder__kop span { font: 500 .7rem var(--font-ui); color: var(--c-ink-3); } .co-builder__kop .chip { border: none; cursor: pointer; font: 600 .66rem var(--font-ui); } .co-stappen { display: flex; flex-direction: column; align-items: stretch; } .co-stap { border-radius: 13px; padding: 14px 16px; border: 1.5px solid var(--c-lijn); background: var(--kaart); } .co-stap--trigger { border-color: var(--c-groen-d); background: var(--c-groen-t); } .co-stap--wacht { border-color: var(--c-lijn-2); background: var(--c-creme); } .co-stap--split { border-color: var(--c-amber); background: var(--c-amber-t); } .co-lijn { display: block; width: 2px; height: 16px; background: var(--c-lijn-2); margin: 0 auto; } .co-stappen > .co-lijn:last-of-type { height: 12px; } .co-stap__trig { display: flex; align-items: center; gap: 10px; } .co-stap__trig > span { width: 30px; height: 30px; border-radius: 8px; background: var(--c-groen-d); color: var(--knop-ink); display: grid; place-items: center; font: 700 .74rem var(--font-mono); flex: none; } .co-stap__trig--wacht > span { background: var(--c-paneel); color: var(--c-ink-2); } .co-stap__trig strong { display: block; font-size: .78rem; } .co-stap__trig div span { font: 500 .66rem var(--font-ui); color: var(--c-ink-3); } .co-stap__berkop { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; } .co-stap__berkop strong { flex: 1; font-size: .8rem; } .co-stap__berkop .chip { font-size: .56rem; } .co-stap__meta { font: 500 .7rem var(--font-ui); color: var(--c-ink-2); } .co-fallback { font-size: .6rem; color: var(--c-amber); background: var(--c-amber-t); padding: 2px 8px; border-radius: var(--radius-pill); } .co-stap__cta { margin-top: 9px; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 9px; background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn-2); } .co-stap__cta strong { font-size: .7rem; } .co-stap__cta .mono { margin-left: auto; font-size: .62rem; color: var(--c-ink-3); } .co-stap__stats { margin-top: 8px; font: 500 .68rem var(--font-ui); color: var(--c-ink-3); } .co-stap__stats strong { font-family: var(--font-mono); color: var(--c-groen-d); } .co-ab { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 9px; } .co-ab > div { padding: 10px 12px; border-radius: 9px; border: var(--lijndikte) solid var(--c-lijn); background: var(--c-creme); } .co-ab strong { display: block; font-size: .72rem; margin-bottom: 4px; } .co-ab span { font: 500 .64rem var(--font-ui); color: var(--c-ink-3); } .co-ab b { color: var(--c-groen-d); } .co-stap__splitkop { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; font-size: .78rem; } .co-stap__splitkop span { color: var(--c-amber); font-family: var(--font-mono); } .co-split { display: flex; gap: 9px; } .co-split > div { flex: 1; padding: 9px 12px; border-radius: 9px; font: 600 .72rem var(--font-ui); } .co-split__ja { background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); color: var(--c-groen-d); } .co-split__nee { background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-amber); color: var(--c-ink); } .co-split span { display: block; font-size: .56rem; margin-bottom: 2px; } /* ---- automatiseringen ---- */ .co-autokop { font: 500 .76rem var(--font-ui); color: var(--c-ink-2); margin-bottom: 10px; } /* Zes kolommen sinds IN2: bericht · sleutel · kanaal · 30d · laatst · aan. */ .co-autohead, .co-autorij { display: grid; grid-template-columns: 2.2fr 1.3fr 74px 56px 90px 74px; gap: 12px; align-items: center; } .co-autohead { padding: 8px 14px; font-size: .56rem; letter-spacing: .07em; text-transform: uppercase; color: var(--c-ink-3); } .co-fasegroep { margin-bottom: 18px; overflow-x: auto; } .co-fasegroep .co-autohead, .co-fasegroep .co-autorij { min-width: 660px; } .co-fasegroep__kop { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .co-fasegroep__kop i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-groen-d); } .co-fasegroep__kop strong { font-size: .8rem; } .co-fasegroep__kop .mono { font-size: .62rem; color: var(--c-ink-3); } .co-autorij { padding: 10px 14px; border-radius: 10px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); margin-bottom: 6px; } .co-autorij.is-uit { opacity: .55; } .co-autorij > div strong { display: block; font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .co-autorij > div > span { display: flex; gap: 6px; margin-top: 3px; } .co-autorij .chip { font-size: .52rem; } .co-autorij > span { font: 500 .68rem var(--font-ui); color: var(--c-ink-2); } .co-ontv { text-transform: capitalize; } .co-kans { display: flex; gap: 6px; align-items: center; } .co-tpllink { background: none; border: none; cursor: pointer; text-align: left; font: 600 .72rem var(--font-ui); color: var(--c-groen-d); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--c-groen-d) 35%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .co-acties { display: flex; align-items: center; gap: 8px; } /* ---- templates ---- */ .co-tplgrid { display: grid; grid-template-columns: 260px minmax(0, 1fr) minmax(0, .9fr); gap: 16px; align-items: start; margin-top: 14px; } @media (max-width: 1100px) { .co-tplgrid { grid-template-columns: 1fr; } } .co-tplrij { display: flex; align-items: center; gap: 9px; width: 100%; box-sizing: border-box; padding: 10px 11px; border-radius: 10px; border: 1.5px solid transparent; background: transparent; cursor: pointer; text-align: left; font: inherit; } .co-tplrij:hover { background: var(--c-creme); } .co-tplrij.is-actief { border-color: var(--c-groen-d); background: var(--c-groen-t); } .co-tplrij > div { flex: 1; min-width: 0; } .co-tplrij strong { display: block; font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .co-tplrij > div > span { display: flex; gap: 5px; margin-top: 3px; } .co-tplrij .chip { font-size: .52rem; } .co-tplrij__kans { display: flex; gap: 4px; flex: none; } .co-tplnaam { display: block; font-size: .92rem; } .co-tplmeta { display: block; font: 500 .68rem var(--font-ui); color: var(--c-ink-3); margin: 2px 0 12px; } .co-tabs { display: flex; gap: 5px; margin-bottom: 14px; } .co-boxchip { padding: 7px 14px; border-radius: 8px; cursor: pointer; font: 600 .7rem var(--font-ui); border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); color: var(--c-ink-2); } .co-boxchip.is-actief { border-color: var(--c-ink); background: var(--c-paneel); color: var(--c-ink); font-weight: 700; } .co-veld { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; } .co-veld input, .co-veld textarea, .co-veld select { box-sizing: border-box; width: 100%; padding: 10px 12px; border: 1.5px solid var(--c-lijn-2); border-radius: 9px; font: 500 .76rem/1.55 var(--font-ui); color: var(--c-ink); background: var(--kaart); resize: vertical; } .co-wastatus { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .co-telling.mono { display: block; text-align: right; font-size: .62rem; margin: -8px 0 10px; } .co-vars { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 14px; } .co-var { padding: 5px 10px; border-radius: 7px; border: var(--lijndikte) solid var(--c-groen); background: var(--c-groen-t); cursor: pointer; font-size: .6rem; color: var(--c-groen-d); } .co-tplacties { display: flex; gap: 9px; flex-wrap: wrap; } .co-preview { padding: 0; overflow: hidden; margin-bottom: 16px; } .co-preview > .kicker { display: block; padding: 8px 14px; background: var(--c-paneel); border-bottom: var(--lijndikte) solid var(--c-lijn); margin: 0; } .co-preview > strong { display: block; padding: 14px 18px 0; font-size: .84rem; } .co-preview__van { display: block; padding: 2px 18px 0; font: 500 .64rem var(--font-ui); color: var(--c-ink-3); } .co-preview > p { margin: 0; padding: 12px 18px 16px; font: 500 .76rem/1.6 var(--font-ui); white-space: pre-wrap; } .co-preview--wa { background: var(--c-creme); } .co-wabubbel { margin: 16px; max-width: 88%; background: var(--kaart); border-radius: 2px 12px 12px 12px; padding: 11px 13px; box-shadow: var(--schaduw-tegel); } .co-wabubbel b { display: block; font-size: .68rem; color: var(--c-groen); margin-bottom: 3px; } .co-wabubbel p { margin: 0; font: 500 .76rem/1.5 var(--font-ui); white-space: pre-wrap; } .co-wabubbel em { display: block; text-align: right; font: 500 .58rem var(--font-ui); font-style: normal; color: var(--c-ink-3); margin-top: 4px; } .co-preview--plak { position: sticky; top: 12px; } /* ---- levering ---- */ .co-rij--keten { background: var(--kaart); } .co-ketenic { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; font: 600 .84rem var(--font-mono); color: var(--c-groen-d); background: var(--c-groen-t); } .co-toggelrij { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); } .co-toggelrij strong { display: block; font-size: .76rem; } .co-toggelrij span { font: 400 .66rem var(--font-ui); color: var(--c-ink-3); } .co-capkop { display: block; font-size: .76rem; margin: 14px 0 9px; } .co-consentrij { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .co-consentrij strong { flex: 1; font-size: .78rem; } .co-consentrij .chip { font-size: .56rem; } .co-consentres { width: 260px; text-align: right; font: 600 .7rem var(--font-ui); } .co-consentres.is-ok { color: var(--c-groen-d); } .co-consentres.is-nee { color: var(--c-rood); } /* ---- handmatig ---- */ .co-mangrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-top: 14px; max-width: 940px; } @media (max-width: 900px) { .co-mangrid { grid-template-columns: 1fr; } } .co-mangrid .kicker { display: block; margin-bottom: 8px; } .co-manverstuur { width: 100%; justify-content: center; margin-top: 4px; } /* ---- verzendlog ---- */ .co-loghead, .co-logrij { display: grid; grid-template-columns: 52px 1.4fr 74px 1.6fr 66px 100px 86px; gap: 12px; align-items: center; } .co-loghead { padding: 8px 14px; font-size: .56rem; letter-spacing: .07em; text-transform: uppercase; color: var(--c-ink-3); } .co-logrij { padding: 11px 14px; border-radius: 10px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); margin-bottom: 6px; } .co-logrij > .mono { font-size: .64rem; color: var(--c-ink-3); } .co-logrij strong { font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .co-logorder { color: var(--c-groen-d); } .co-logtpl { font: 500 .72rem var(--font-ui); color: var(--c-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .co-logrij .chip { font-size: .58rem; } /* ---- instellingen ---- */ .co-typerij { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 10px; margin-bottom: 10px; } .co-typerij.is-trans { background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); } .co-typerij.is-mkt { background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-amber); } .co-typerij > span { font: 700 .78rem var(--font-ui); flex: none; } .co-typerij.is-trans > span { color: var(--c-groen-d); } .co-typerij.is-mkt > span { color: var(--c-amber); } .co-typerij strong { display: block; font-size: .76rem; } .co-typerij div span { font: 500 .66rem var(--font-ui); color: var(--c-ink-3); } .co-kaart .bs-form { margin-bottom: 12px; } .co-wakaarten { display: flex; gap: 12px; flex-wrap: wrap; } .co-wakaart { flex: 1; min-width: 160px; padding: 13px 15px; border-radius: 11px; } .co-wakaart strong { display: block; font-size: 1.2rem; } .co-wakaart span { font: 600 .7rem var(--font-ui); } .co-wakaart.is-groen { background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); color: var(--c-groen-d); } .co-wakaart.is-amber { background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-amber); color: var(--c-ink); } .co-wakaart.is-rood { background: var(--c-rood-t); border: var(--lijndikte) solid var(--c-rood); color: var(--c-rood); } /* WA-goedkeuringsflow (D4b) */ .co-wareden { border: 1px solid var(--c-rood); border-radius: 12px; padding: 9px 12px; font-size: 12px; margin-bottom: 10px; line-height: 1.5; } .co-waflow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; } .co-wanoot { font-size: 11.5px; color: var(--c-ink-2); } /* ---- FT-5.2a · verzendlog server-side (zoek/filter/paginering) ---- */ .co-logbalk { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; } .co-zoekveld { flex: 1 1 260px; min-width: 200px; padding: 8px 12px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 10px; background: var(--kaart); color: var(--c-ink); font: 500 .74rem var(--font-ui); } .co-zoekveld:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; border-color: var(--c-groen-d); } .co-logbalk .co-telling { margin-left: auto; } .co-logpag { display: flex; gap: 8px; justify-content: center; margin: 12px 0 2px; } .co-logpag .btn[disabled] { opacity: .4; cursor: not-allowed; } .co-loglaad { padding: 24px; text-align: center; color: var(--c-ink-3); font: 500 .8rem var(--font-ui); } /* ---- journeys op de echte keten (IN1) ---- De trechter met open- en klikpercentages is uit het scherm verdwenen; wat ervoor in de plaats komt zijn vier tellingen die wél ergens vandaan komen, en twee tabellen: wie erin zit en wat er is gebeurd. Overgeslagen staat er als eigen teller, want dat is waar het misgaat. */ .co-uitleg { margin: 0 0 14px; font: 400 .74rem/1.6 var(--font-ui); color: var(--c-ink-2); max-width: 62ch; } .co-jtellers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; } .co-jtellers > div { padding: 11px 13px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; background: var(--c-paneel); } .co-jtellers strong { display: block; font-size: 1.05rem; line-height: 1.2; } .co-jtellers span { font: 500 .64rem var(--font-ui); color: var(--c-ink-3); } .co-jtellers .is-let strong { color: var(--c-amber); } .co-poortkaart { margin-top: 12px; } .co-poortkaart p { margin: 6px 0 0; font: 400 .7rem/1.55 var(--font-ui); color: var(--c-ink-2); } .co-jtabel { width: 100%; } .co-jtabel td, .co-jtabel th { vertical-align: top; } .co-jtabel tr.is-let td { background: var(--c-amber-t); } .co-reden { display: block; margin-top: 3px; font: 400 .64rem/1.45 var(--font-ui); color: var(--c-ink-3); max-width: 44ch; } .co-leeg { padding: 14px 2px; font: 400 .74rem var(--font-ui); color: var(--c-ink-3); text-align: center; } /* IN2 · de berichtinventaris. De platform-kolom is weg (dat label stond nergens vast); ervoor in de plaats staan de templatesleutel en de datum van de laatste verzending — twee dingen die je echt kunt nazoeken. */ .co-tplsleutel { font-size: .64rem; color: var(--c-ink-3); } .co-onderwerp { color: var(--c-ink-3); } .co-laatst { font-size: .66rem; color: var(--c-ink-3); } .co-autorij.is-uit { opacity: .62; } /* De band die zegt wat een scherm níét dekt. `--let`, want het is een openstaand gat en geen blokkade. */ .co-band { margin: 0 0 16px; padding: 12px 15px; border: var(--lijndikte) solid var(--let); border-radius: var(--radius); background: var(--let-t); font: 400 .74rem/1.6 var(--font-ui); color: var(--c-ink-2); } .co-band strong { color: var(--c-ink); } /* VD2 (besluit 211) · de voordeur van de klantreis: kaarten per instroompunt, alleen kleur als er iets vastzit */ .co-voordeur { margin-bottom: 16px; } .co-vdkop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 10px; } .co-vdkop__uitleg { font: 400 .7rem/1.5 var(--font-ui); color: var(--c-ink-2); } .co-vdgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 9px; } .co-vdkaart { display: flex; flex-direction: column; gap: 4px; padding: 11px 12px; border-radius: var(--radius); border: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); color: var(--c-ink); text-decoration: none; } .co-vdkaart:hover { border-color: var(--c-ink); } .co-vdkaart:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } .co-vdkaart__kop { display: flex; align-items: center; gap: 8px; font-size: .78rem; } .co-vdkaart__glyph { font-style: normal; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--c-paneel); color: var(--c-ink-2); font-size: .8rem; } .co-vdkaart__let { width: 8px; height: 8px; border-radius: 99px; background: var(--let); margin-left: auto; } .co-vdkaart__n { display: flex; align-items: baseline; gap: 6px; } .co-vdkaart__n b { font-size: 1.15rem; } .co-vdkaart__n small { font-size: .64rem; color: var(--c-ink-3); } .co-vdkaart__stand { font-size: .66rem; color: var(--c-ink-2); } .co-vdkaart:not(.is-werkbak) .co-vdkaart__stand { color: var(--c-ink-3); } .co-vdkaart__signaal { font-size: .66rem; color: var(--let-d, var(--let)); } .co-vdnul { margin: 10px 0 0; font: 400 .66rem/1.5 var(--font-ui); color: var(--c-ink-3); } /* blok H (13-10-2026) · het voorbeeld zoals de klant het leest, de regels van Levering, het verzendlog met bezorging */ .co-autohead, .co-autorij { grid-template-columns: 2.2fr 1.3fr 74px 62px 96px 132px; } .co-loghead, .co-logrij { grid-template-columns: 96px 1.5fr 92px 1.5fr 60px 118px 86px; } .co-logadres { display: block; font: 400 .66rem var(--font-ui); font-style: normal; color: var(--c-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .co-zoek { display: flex; flex-direction: column; gap: 4px; flex: 1 1 260px; } .co-zoek .co-zoekveld { flex: 0 0 auto; min-width: 0; width: 100%; box-sizing: border-box; } /* in de kolom is de basis van 260 px anders een hoogte */ .co-vb { display: flex; flex-direction: column; gap: 12px; } .co-vb__onderwerp { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; } .co-vb__onderwerp strong { font-size: .8rem; } .co-vb__mail { width: 100%; height: 420px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-klein); background: var(--kaart); } .co-vb__wa { padding: 10px 12px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-klein); } .co-vb__wa p { margin: 4px 0 0; font-size: .76rem; white-space: pre-wrap; } .co-regels { display: grid; grid-template-columns: 1fr auto; gap: 7px 16px; margin: 12px 0; font-size: .76rem; } .co-regels dt { color: var(--c-ink-2); } .co-regels dd { margin: 0; font-weight: 600; text-align: right; } /* ── formulieren.css ── */ /* ===================================================================== formulieren.css — module Formulieren (Communicatie › Uitgaand). Uitsluitend tokens uit casa360-tokens.css; diepte via de vaste laag. ===================================================================== */ .frm { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; } .frm-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .frm-kop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; } .frm-kop p { margin: 0; max-width: 72ch; color: var(--c-ink-2); font-size: .82rem; line-height: 1.5; } /* lijst */ .frm-rij { display: grid; grid-template-columns: 1.8fr .9fr .5fr .8fr .6fr; gap: 12px; align-items: center; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--c-lijn); background: none; padding: 11px 4px; cursor: pointer; font: inherit; color: var(--c-ink); } .frm-rij:hover { background: var(--c-creme); } .frm-rij.is-actief { background: var(--c-groen-t); } .frm-rij--kop { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); border-top: 0; cursor: default; } .frm-rij--kop:hover { background: none; } .frm-rij__naam { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .frm-rij__naam em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); } .frm-week { font-style: normal; font-size: .66rem; color: var(--c-groen-d); } /* drawer-inhoud */ .frm-tabs { display: flex; gap: 5px; padding: 4px; background: var(--c-creme); border-radius: 12px; margin-bottom: 12px; flex-wrap: wrap; } .frm-tab { border: 1px solid transparent; background: none; border-radius: 9px; padding: 7px 12px; font: 600 .74rem var(--font-ui, Manrope); color: var(--c-ink-2); cursor: pointer; } .frm-tab.is-actief { background: var(--c-paneel); border-color: var(--c-lijn); color: var(--c-ink); font-weight: 700; } .frm-deel { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--c-lijn); padding: 12px 0; } .frm-deel:first-of-type { border-top: 0; } .frm-tekst { margin: 0; font-size: .78rem; color: var(--c-ink-2); line-height: 1.55; } .frm-veldrij { display: flex; gap: 8px; align-items: center; font-size: .8rem; padding: 5px 0; } .frm-leeg { font-size: .78rem; color: var(--c-ink-3); margin: 0; } .frm-code { border: 1px dashed var(--c-lijn); border-radius: 12px; padding: 10px 12px; font-size: .72rem; white-space: pre-wrap; word-break: break-all; background: var(--c-creme); } .frm-knopjes { display: flex; gap: 8px; flex-wrap: wrap; } .frm-inzrij { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; border-top: 1px solid var(--c-lijn); padding: 9px 0; } .frm-inzrij:first-child { border-top: 0; } .frm-inzrij__tijd { font-size: .68rem; color: var(--c-ink-3); } .frm-inzrij__wat { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .78rem; } .frm-inzrij__wat span { color: var(--c-ink-2); font-size: .72rem; } .frm-inzrij__wat em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); } .frm-bronrij { display: grid; grid-template-columns: 1.6fr .8fr .8fr .6fr; gap: 10px; padding: 7px 0; border-top: 1px solid var(--c-lijn); font-size: .78rem; align-items: center; } .frm-bronrij--kop { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); border-top: 0; } .frm-voetnoot { font-size: .72rem; color: var(--c-ink-3); line-height: 1.5; } @media (max-width: 900px) { .frm { padding: 18px 14px 60px; } .frm-rij { grid-template-columns: 1fr auto; } .frm-rij > span:nth-child(3), .frm-rij > span:nth-child(4), .frm-rij > span:nth-child(5) { display: none; } } /* ── verkoopcockpit.css ── */ /* ===================================================================== verkoopcockpit.css — Verkoopcockpit Buitendienst (spec 27-07, 5.1). Uitsluitend tokens uit casa360-tokens.css; diepte via de vaste laag. ===================================================================== */ .vkc { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; } .vkc-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .vkc-kop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; } .vkc-kop p { margin: 0; max-width: 72ch; color: var(--c-ink-2); font-size: .82rem; line-height: 1.5; } .vkc-kopacties { display: flex; align-items: center; gap: 10px; flex: none; flex-wrap: wrap; } /* entiteit-toggle & datum-nav */ .vkc-ent { display: flex; gap: 4px; padding: 4px; background: var(--c-paneel); border-radius: var(--radius-pill); } .vkc-entknop { border: var(--lijndikte) solid transparent; background: none; border-radius: var(--radius-klein); padding: 6px 13px; font: 700 .72rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; } .vkc-entknop.is-actief { background: var(--kaart); border-color: var(--c-lijn); color: var(--c-ink); } .vkc-datum { display: inline-flex; align-items: center; gap: 4px; } .vkc-datum input { border: var(--lijndikte) solid var(--c-lijn); border-radius: 10px; padding: 6px 9px; font: 600 .74rem var(--font-ui); background: var(--kaart); color: var(--c-ink); } /* tabs */ .vkc-tabs { display: flex; gap: 4px; padding: 4px; background: var(--c-paneel); border-radius: var(--radius); align-self: flex-start; } .vkc-tab { border: var(--lijndikte) solid transparent; background: none; border-radius: 9px; padding: 7px 14px; font: 700 .76rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; } .vkc-tab.is-actief { background: var(--kaart); border-color: var(--c-lijn); color: var(--c-ink); } /* triagestrip */ .vkc-triage { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); box-shadow: var(--schaduw-tegel); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .vkc-triage__cellen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; } .vkc-triage__cel { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: var(--c-creme); } .vkc-triage__cel.is-actief { border-color: var(--c-amber); background: var(--c-amber-t); } .vkc-triage__cel > b { font-size: 1.15rem; flex: none; } .vkc-triage__cel > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .vkc-triage__cel strong { font-size: .76rem; } .vkc-triage__cel span { font-size: .68rem; color: var(--c-ink-3); line-height: 1.4; } .vkc-triage__ok { color: var(--c-groen-d); font-weight: 700; } /* balk + rondesecties */ .vkc-balk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .vkc-balk__notie { font-size: .7rem; color: var(--c-ink-3); } .vkc-lijst { overflow: hidden; } .vkc-ronde__kop { padding: 10px 14px 6px; background: var(--c-creme); border-top: var(--lijndikte) solid var(--c-lijn); } .vkc-ronde:first-child .vkc-ronde__kop { border-top: 0; } .vkc-rij { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 12px; align-items: center; padding: 10px 14px; border-top: var(--lijndikte) solid var(--c-lijn); cursor: pointer; transition: background var(--overgang); } .vkc-rij:hover { background: var(--c-creme); } .vkc-rij.is-actief { background: var(--c-groen-t); } .vkc-rij.is-telaat { border-left: 3px solid var(--c-rood); } .vkc-rij:focus-visible { outline: var(--focus-ring); outline-offset: -2px; } .vkc-rij__wat { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .vkc-rij__wat strong { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vkc-rij__wat span { font-size: .7rem; color: var(--c-ink-3); } .vkc-rij__bedrag { font-size: .78rem; } /* blokken: notitieronde, opvolging, retour */ .vkc-blok { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); box-shadow: var(--schaduw-tegel); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; } .vkc-notrij { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 8px 0; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; } .vkc-notrij:first-of-type { border-top: 0; } .vkc-notrij > span { display: flex; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; } .vkc-notitie { margin: 4px 0 0; padding: 8px 10px; background: var(--c-memo); border-radius: 9px; font-size: .76rem; line-height: 1.5; color: var(--c-ink-2); } /* drawer-delen */ .vkc-deel { display: flex; flex-direction: column; gap: 6px; border-top: var(--lijndikte) solid var(--c-lijn); padding: 12px 0; } .vkc-deel:first-of-type { border-top: 0; } .vkc-tekst { margin: 0; font-size: .8rem; color: var(--c-ink-2); line-height: 1.55; } .vkc-laat { color: var(--c-terra-d); } .vkc-context { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: .78rem; } /* statistieken-tegels */ .vkc-periode { display: flex; gap: 4px; padding: 4px; background: var(--c-paneel); border-radius: var(--radius-pill); } .vkc-perknop { border: var(--lijndikte) solid transparent; background: none; border-radius: var(--radius-klein); padding: 6px 13px; font: 700 .72rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; } .vkc-perknop.is-actief { background: var(--kaart); border-color: var(--c-lijn); color: var(--c-ink); } .vkc-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; } .vkc-teg { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: var(--c-creme); } .vkc-teg span { font-size: .68rem; font-weight: 700; color: var(--c-ink-3); text-transform: uppercase; letter-spacing: .04em; } .vkc-teg b { font-size: 1.2rem; } .vkc-teg em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); line-height: 1.4; } .vkc-teg.is-groen b { color: var(--c-groen-d); } .vkc-teg.is-amber { border-color: var(--c-amber); background: var(--c-amber-t); } .vkc-rondetabel { display: flex; gap: 14px; flex-wrap: wrap; font-size: .72rem; color: var(--c-ink-2); } .vkc-voetnoot { font-size: .72rem; color: var(--c-ink-3); line-height: 1.5; } @media (max-width: 900px) { .vkc { padding: 18px 14px 60px; } .vkc-rij { grid-template-columns: 1fr auto; } .vkc-rij > .chip:first-of-type, .vkc-rij__bedrag { display: none; } } /* ── kozijnoff.css ── */ /* kozijnoff.css — Kozijn-configurator (prototype v6 → app-tokens) Layout, dichtheid en interactie volgen het prototype exact; alle kleuren lopen via casa360-tokens.css zodat het scherm meekleurt met de tenant-huisstijl. De SVG-tekening zelf gebruikt RAL-waarden en glasweergave: dat zijn productkleuren (data), geen UI-kleuren. Vol-scherm werkscherm: uitgezonderd van de module-wortel-marge. */ .kozf { font-size: 14px; line-height: 1.5; } .kozf .kicker { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--c-amber); } .koz-h1 { font-size: 19px; font-weight: 800; margin: 4px 0 14px; } .koz-uitleg { font-size: 12.5px; color: var(--c-ink-3); margin: -6px 0 14px; } .koz-smal { max-width: 640px; margin: 26px auto; padding: 0 20px; } .koz-breed { max-width: 1180px; margin: 16px auto; padding: 0 20px; } .koz-lijstwortel { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; } .koz-kaart { padding: 20px; } .koz-kaart h2 { font-size: 14px; font-weight: 800; margin: 0 0 12px; } /* ---- lijst ---- */ .koz-zoekbalk { display: flex; gap: 8px; align-items: center; margin: 12px 0 10px; } .koz-zoekbalk input { flex: 1; max-width: 420px; height: 32px; font: 400 .78rem var(--font-ui); color: var(--c-ink); padding: 0 12px; border-radius: var(--radius); background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn-2); } .koz-rij { display: grid; grid-template-columns: 130px 1.5fr 70px 100px 120px 130px; gap: 10px; align-items: center; padding: 11px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); cursor: pointer; } .koz-rij:last-child { border-bottom: 0; } .koz-rij:hover { background: var(--c-creme); } .koz-rij--kop { cursor: default; font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); background: var(--c-paneel-2); } .koz-rij--kop:hover { background: var(--c-paneel-2); } .koz-rij__klant strong { display: block; font-size: .78rem; } .koz-rij__klant span { font-size: .64rem; color: var(--c-ink-3); } .koz-rij__nr, .koz-rij__versie { font-size: .68rem; } /* ---- statuschips ---- */ .koz-statuschip { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; border-radius: 5px; padding: 2px 8px; white-space: nowrap; } .koz-st-concept { background: var(--let-t); color: var(--let); } /* Zand §4: geel is memo, geen status */ .koz-st-verzonden { background: var(--c-sage-t); color: var(--c-groen-d); } .koz-st-akkoord { background: var(--c-groen-t); color: var(--c-groen-d); } .koz-st-inmeter { background: var(--c-terra-t); color: var(--c-terra-d); } .koz-st-definitief { background: var(--donker, var(--c-ink)); color: var(--c-creme); } .koz-statuschip.ok { background: var(--c-groen-t); color: var(--c-groen-d); } .koz-statuschip.fout { background: var(--c-rood-t); color: var(--c-rood); } .koz-statuschip.leeg { background: var(--c-lijn); color: var(--c-ink-3); } .koz-statuschip.nieuw { background: var(--c-terra); color: var(--knop-ink); } /* ---- chrome: kop + voet ---- */ .kozf--doc { display: flex; flex-direction: column; min-height: calc(100vh - 0px); min-width: 0; max-width: 100%; } /* KE2: als flex-kind van .content niet meegroeien met de tabel; de gevelsectie scrollt zelf */ .koz-kop { display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-bottom: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-paneel-2); position: sticky; top: 0; z-index: 20; flex-wrap: wrap; } .koz-kop__id { font-weight: 700; font-size: 12px; } .koz-rolwissel { display: flex; gap: 3px; background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: 9px; padding: 2px; } .koz-rolwissel button { border: none; background: none; padding: 5px 11px; border-radius: 7px; font-size: 11.5px; font-weight: 700; color: var(--c-ink-3); cursor: pointer; } .koz-rolwissel button.aan { background: var(--donker, var(--c-ink)); color: var(--c-creme); } .koz-stepper { display: flex; gap: 4px; flex: 1; justify-content: center; flex-wrap: wrap; } .koz-stap { display: flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 9px; font-size: 12px; font-weight: 700; color: var(--c-ink-3); border: none; background: none; cursor: pointer; } .koz-stap .nr { width: 19px; height: 19px; border-radius: 50%; background: var(--c-lijn-2); color: var(--c-ink); font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .koz-stap.actief { background: var(--donker, var(--c-ink)); color: var(--c-creme); } .koz-stap.actief .nr { background: var(--c-terra); color: var(--knop-ink); } .koz-stap.klaar .nr { background: var(--c-groen); color: var(--knop-ink); } .koz-beheerknop { border: var(--lijndikte) solid var(--c-lijn-2); background: none; border-radius: 9px; padding: 6px 12px; font-size: 12px; font-weight: 700; color: var(--c-ink-3); cursor: pointer; } .koz-bewaarstand { font-size: 10px; color: var(--c-ink-3); min-width: 64px; text-align: right; } .koz-voet { position: sticky; bottom: 0; background: var(--c-paneel-2); border-top: var(--lijndikte) solid var(--c-lijn-2); display: flex; align-items: center; gap: 12px; padding: 12px 20px; z-index: 20; margin-top: auto; } .koz-voet__info { flex: 1; font-size: 12.5px; color: var(--c-ink-3); } .koz-knop { border: none; border-radius: var(--radius); padding: 11px 22px; font-weight: 800; font-size: 13.5px; cursor: pointer; font-family: var(--font-ui); } .koz-knop.primair { background: var(--donker, var(--c-ink)); color: var(--c-creme); } .koz-knop.groen { background: var(--c-groen); color: var(--knop-ink); } .koz-knop.terra { background: var(--c-terra); color: var(--knop-ink); } .koz-knop.stil { background: none; border: var(--lijndikte) solid var(--c-lijn-2); color: var(--c-ink-2); } .koz-knop.klein { padding: 8px 14px; font-size: 12px; } .koz-knop.breedvol { width: 100%; margin-bottom: 6px; } .koz-knop:disabled { opacity: .4; cursor: default; } /* ---- velden ---- */ .koz-veld { margin-bottom: 10px; } .koz-veld label { display: block; font-size: 11px; font-weight: 700; color: var(--c-ink-3); margin-bottom: 3px; } .koz-veld input, .koz-veld select, .koz-veld textarea { width: 100%; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; padding: 8px 10px; background: var(--kaart); font-family: var(--font-ui); font-size: 13px; color: var(--c-ink); } .koz-rij2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .koz-rij3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .koz-kleurkeuze { display: flex; gap: 6px; flex-wrap: wrap; } .koz-zwatch { display: flex; align-items: center; gap: 7px; border: 1.5px solid var(--c-lijn-2); border-radius: 9px; padding: 6px 10px; background: var(--c-creme); font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--font-ui); color: var(--c-ink); } .koz-zwatch .bol { width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--c-lijn-2); } .koz-zwatch.aan { border-color: var(--c-ink); background: var(--kaart); } /* ---- stap 2: werkscherm ---- */ .koz-k2wrap { max-width: 1620px; margin: 0 auto; padding: 12px 20px; } .koz-positiebalk { display: flex; gap: 6px; align-items: center; overflow-x: auto; padding: 4px 2px 10px; } .koz-postab { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--c-lijn-2); background: var(--c-creme); border-radius: 10px; padding: 7px 12px; cursor: pointer; white-space: nowrap; } .koz-postab.actief { border-color: var(--c-ink); background: var(--kaart); } .koz-postab .merk { font-size: 10.5px; font-weight: 700; background: var(--donker, var(--c-ink)); color: var(--c-creme); border-radius: 5px; padding: 1px 6px; } .koz-postab .pom { font-size: 12px; font-weight: 700; } .koz-postab .pmaat { font-size: 10px; color: var(--c-ink-3); } .koz-postab .del { border: none; background: none; color: var(--c-rood); font-size: 14px; padding: 0; cursor: pointer; } .koz-postab.plus { border-style: dashed; color: var(--c-groen-d); font-weight: 800; font-size: 12.5px; background: none; cursor: pointer; font-family: var(--font-ui); } .koz-k2grid { display: grid; grid-template-columns: 300px minmax(0, 1fr) 250px; gap: 14px; } @media (max-width: 1100px) { .koz-k2grid { grid-template-columns: 1fr; } } .koz-paneel { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 14px; overflow: auto; max-height: calc(100vh - 218px); box-shadow: var(--schaduw-tegel); } .koz-k2sectie { margin-bottom: 14px; } .koz-k2kop { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .koz-k2kop .snr { width: 20px; height: 20px; border-radius: 50%; background: var(--donker, var(--c-ink)); color: var(--c-creme); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .koz-k2kop b { font-size: 13px; } .koz-k2kop .hint { font-size: 10.5px; color: var(--c-ink-3); margin-left: auto; } .koz-segment { display: flex; gap: 4px; flex-wrap: wrap; } .koz-segment button { border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-creme); border-radius: 8px; padding: 6px 10px; font-size: 11.5px; font-weight: 700; color: var(--c-ink-2); cursor: pointer; font-family: var(--font-ui); } .koz-segment button.aan { background: var(--donker, var(--c-ink)); color: var(--c-creme); border-color: var(--c-ink); } .koz-vakeditor { background: var(--c-creme); border: 1.5px solid var(--c-terra); border-radius: 10px; padding: 10px; margin-top: 8px; } .koz-vakeditor .vkop { font-size: 12px; font-weight: 800; margin-bottom: 6px; } .koz-vakeditor .vsub { font-weight: 400; font-size: 10px; color: var(--c-ink-3); } .koz-chips { display: flex; gap: 4px; flex-wrap: wrap; } .koz-chip { border: var(--lijndikte) solid var(--c-lijn-2); background: none; border-radius: 7px; padding: 4px 9px; font-size: 11px; font-weight: 700; color: var(--c-ink-3); cursor: pointer; font-family: var(--font-ui); } .koz-chip.aan { background: var(--donker, var(--c-ink)); color: var(--c-creme); border-color: var(--c-ink); } .koz-chip.rooster.aan { background: var(--c-groen); border-color: var(--c-groen); color: var(--knop-ink); } .koz-chip:disabled { opacity: .35; cursor: default; } .koz-tekenvlak { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; min-height: 460px; box-shadow: var(--schaduw-tegel); } .koz-tekenkop { display: flex; align-items: baseline; gap: 10px; padding: 0 4px 8px; flex-wrap: wrap; } .koz-tekenkop h1 { font-size: 15px; font-weight: 800; margin: 0; } .koz-tekenkop .sub { font-size: 11.5px; color: var(--c-ink-3); } .koz-tekenkop .tip { margin-left: auto; font-size: 10px; color: var(--c-terra-d); } .kozf svg text { font-family: var(--font-mono); } .koz-svgwrap { flex: 1; display: flex; align-items: center; justify-content: center; } .koz-presets { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 10px; border-top: var(--lijndikte) solid var(--c-lijn); align-items: center; } .koz-presets button { border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-creme); border-radius: 8px; padding: 6px 11px; font-size: 11.5px; font-weight: 700; color: var(--c-ink-2); cursor: pointer; font-family: var(--font-ui); } .koz-presets button:hover { border-color: var(--c-ink); color: var(--c-ink); } .koz-prijskolom { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; max-height: calc(100vh - 218px); overflow: auto; box-shadow: var(--schaduw-tegel); } .koz-tabelinfo { font-size: 11px; color: var(--c-ink-2); margin: 6px 0 2px; } .koz-buiten { color: var(--c-rood); } .koz-grootprijs { font-family: var(--font-mono); font-size: 26px; font-weight: 700; margin: 2px 0 0; } .koz-prijsregel { display: flex; justify-content: space-between; font-size: 12px; padding: 4px 0; border-bottom: 1px dotted var(--c-lijn-2); } .koz-prijsregel .l { color: var(--c-ink-2); } .koz-prijsregel.tot { border-bottom: none; border-top: 2px solid var(--c-ink); margin-top: 6px; padding-top: 8px; font-weight: 800; } .koz-prijsregel.doorgestreept .r { text-decoration: line-through; color: var(--c-ink-3); font-weight: 400; } .koz-handbadge { font-size: 9px; font-weight: 700; background: var(--c-terra); color: var(--knop-ink); border-radius: 5px; padding: 1px 5px; } .koz-tabelbadge { font-size: 9px; font-weight: 700; background: var(--donker, var(--c-ink)); color: var(--c-creme); border-radius: 5px; padding: 1px 5px; } .koz-margegoed { color: var(--c-groen-d); font-weight: 800; } .koz-margefout { color: var(--c-rood); font-weight: 800; } .koz-waarschuw { background: var(--c-rood-t); border: var(--lijndikte) solid var(--c-terra); border-radius: 9px; padding: 8px 10px; margin-top: 8px; font-size: 12px; color: var(--c-rood); font-weight: 700; } .koz-memoblok { background: var(--grijs); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 9px; padding: 8px 10px; font-size: 12px; } .koz-sectie { border-top: var(--lijndikte) solid var(--c-lijn); padding-top: 10px; margin-top: 12px; } .koz-plusbalk { width: 100%; max-width: 420px; border: 1px dashed var(--c-lijn-2); border-radius: 9px; background: none; padding: 8px; font-size: 12.5px; font-weight: 700; color: var(--c-groen-d); cursor: pointer; font-family: var(--font-ui); margin-top: 6px; } .koz-plusbalk:hover { border-color: var(--c-groen); } /* ---- stap 3: producten — compacte regels (verzoek Michiel 29-07) ---- */ .koz-prodlijst { max-width: 760px; } .koz-prodrij { display: grid; grid-template-columns: 1fr 120px 90px 66px; gap: 10px; align-items: center; padding: 7px 14px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .koz-prodrij:last-child { border-bottom: 0; } .koz-prodrij .nm { font-size: 12.5px; font-weight: 600; } /* niet ".pr" — provisie.css claimt die klasse als module-wortel */ .koz-prodrij .stukprijs { font-size: 10.5px; color: var(--c-ink-3); text-align: right; white-space: nowrap; } .koz-prodrij .tot { font-size: 11px; font-weight: 700; text-align: right; } .koz-prodrij input { width: 100%; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 7px; padding: 5px 6px; background: var(--kaart); text-align: right; font-family: var(--font-mono); font-size: 12px; } .koz-prodrij.gekozen { background: var(--c-groen-t); } .koz-prodrij.gekozen .nm { font-weight: 800; } /* label alleen voor de schermlezer — geen grid-item */ .koz-verborgenlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .koz-verborgenlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* ---- stap 4: controle ---- */ .koz-controle { display: grid; grid-template-columns: 1fr 330px; gap: 18px; align-items: start; } @media (max-width: 1000px) { .koz-controle { grid-template-columns: 1fr; } } .koz-tabelwrap { overflow-x: auto; } .koz-margetabel, .koz-difftabel { width: 100%; border-collapse: collapse; font-size: 11.5px; } .koz-margetabel th, .koz-difftabel th { font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-amber); text-align: left; padding: 6px; border-bottom: var(--lijndikte) solid var(--c-lijn-2); } .koz-margetabel td, .koz-difftabel td { padding: 6px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .koz-margetabel td.num, .koz-margetabel th.num, .koz-difftabel td.num, .koz-difftabel th.num { text-align: right; } .koz-margetabel input { width: 78px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 6px; padding: 4px 5px; background: var(--kaart); text-align: right; font-family: var(--font-mono); font-size: 11px; } .koz-margetot td, .koz-difftot td { font-weight: 800; } .koz-difftabel tr.gewijzigd td { background: var(--c-amber-t); } .koz-difftabel tr.nieuw td { background: var(--c-terra-t); } .koz-delta { font-weight: 700; } .koz-delta.plus { color: var(--c-terra-d); } .koz-delta.min { color: var(--c-groen-d); } .koz-inmeetcontrole { margin-bottom: 16px; } .koz-inmeetcontrole.is-afwijkend { border-color: var(--c-terra); } .koz-inmeetcontrole.is-conform { border-color: var(--c-groen); } .koz-inmeetacties { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .koz-intern { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 12px 14px; margin-top: 12px; } .koz-intern summary { font-weight: 800; font-size: 12.5px; cursor: pointer; color: var(--c-ink-2); } .koz-versierij { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 6px 0; border-bottom: 1px dotted var(--c-lijn-2); } .koz-versierij .vnr { font-weight: 700; background: var(--c-lijn); border-radius: 5px; padding: 1px 6px; font-size: 10.5px; } .koz-versierij .vtijd { color: var(--c-ink-3); font-size: 11px; flex: 1; } .koz-versierij .vtot { font-size: 11px; } .koz-versierij button { border: none; background: none; color: var(--c-groen-d); font-size: 11px; font-weight: 700; cursor: pointer; font-family: var(--font-ui); } .koz-procesregel { font-size: 12.5px; color: var(--c-ink-2); margin-bottom: 12px; } .koz-proceskn .koz-memoblok { margin-bottom: 6px; } /* ---- offertevel ---- */ .koz-offertevel { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 40px 48px; box-shadow: var(--schaduw-tegel); } .koz-ofkop { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--c-ink); padding-bottom: 16px; margin-bottom: 20px; gap: 12px; } .koz-ofmerk { font-size: 21px; font-weight: 800; margin: 0; } .koz-ofklant { font-size: 12px; color: var(--c-ink-3); margin-top: 4px; } .koz-ofmeta { text-align: right; font-size: 11px; color: var(--c-ink-2); line-height: 1.7; } .koz-ofblok { margin-bottom: 24px; } .koz-ofblok h3 { font-size: 13px; font-weight: 800; margin-bottom: 8px; } .koz-ofkozijn { display: grid; grid-template-columns: 210px 1fr; gap: 16px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 13px; margin-bottom: 11px; background: var(--c-creme); } @media (max-width: 700px) { .koz-ofkozijn { grid-template-columns: 1fr; } } .koz-ofkozijn .specs { font-size: 12px; } .koz-ofkozijn .specs table { width: 100%; border-collapse: collapse; } .koz-ofkozijn .specs td { padding: 2px 0; vertical-align: top; } .koz-ofkozijn .specs td:first-child { color: var(--c-ink-3); width: 110px; } .koz-ofspecrij { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; } .koz-merkchip { background: var(--donker, var(--c-ink)); color: var(--c-creme); border-radius: 6px; padding: 2px 7px; font-size: 11px; font-weight: 700; } .koz-ofprijs { margin-left: auto; font-weight: 700; } .koz-oftotaal { margin-left: auto; width: 320px; max-width: 100%; } .koz-ofvoet { border-top: var(--lijndikte) solid var(--c-lijn-2); margin-top: 24px; padding-top: 12px; font-size: 10.5px; color: var(--c-ink-3); line-height: 1.7; } .koz-tek { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: 9px; padding: 8px; display: flex; align-items: center; justify-content: center; } /* ---- inmeting ---- */ .koz-imnr { font-size: 13px; color: var(--c-ink-3); } .koz-inmeetkop { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 14px 18px; display: flex; gap: 16px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; box-shadow: var(--schaduw-tegel); } .koz-inmeetkop .klant { font-weight: 800; font-size: 15px; } .koz-inmeetkop .adres { color: var(--c-ink-3); font-size: 12.5px; } .koz-imref { font-size: 12px; color: var(--c-ink-3); } .koz-inmeetpos { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; display: grid; grid-template-columns: 230px 1fr; gap: 16px; box-shadow: var(--schaduw-tegel); } @media (max-width: 800px) { .koz-inmeetpos { grid-template-columns: 1fr; } } .koz-inmeetpos.klaar { border-color: var(--c-groen); } .koz-inmeetpos.vervallen { border-color: var(--c-rood); opacity: .75; } .koz-imkoprij { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; } .koz-indicatie { font-size: 11px; color: var(--c-ink-3); } .koz-imvakken { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; } .koz-vak { background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); border-radius: 9px; padding: 8px; } .koz-vak .kop { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } .koz-vak .kop b { font-size: 12px; } .koz-vak select { width: 100%; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 7px; padding: 5px 7px; background: var(--kaart); margin-bottom: 5px; font-family: var(--font-ui); font-size: 12px; } /* ---- beheer ---- */ .koz-beheer { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 900px) { .koz-beheer { grid-template-columns: 1fr; } } .koz-brij { display: grid; grid-template-columns: 1fr 110px; gap: 8px; align-items: center; margin-bottom: 7px; font-size: 12.5px; } .koz-brij span { color: var(--c-ink-2); } .koz-brij input { border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 7px; padding: 6px 8px; background: var(--kaart); text-align: right; font-family: var(--font-mono); } .koz-catrij { display: grid; grid-template-columns: 1fr 64px 80px 26px; gap: 6px; margin-bottom: 6px; } .koz-catrij input, .koz-catrij select { border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 7px; padding: 5px 7px; background: var(--kaart); font-size: 12px; font-family: var(--font-ui); } .koz-catrij input.num { text-align: right; font-family: var(--font-mono); } .koz-catrij .x { border: none; background: none; color: var(--c-rood); font-size: 15px; cursor: pointer; } .koz-matrixkies { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; } .koz-matrixwrap { max-height: 420px; overflow: auto; border: var(--lijndikte) solid var(--c-lijn); border-radius: 9px; } .koz-matrix { border-collapse: collapse; font-size: 10.5px; } .koz-matrix th { position: sticky; top: 0; background: var(--c-paneel-2); padding: 4px 6px; font-weight: 700; color: var(--c-ink-2); text-align: right; z-index: 1; } .koz-matrix th:first-child { left: 0; z-index: 2; } .koz-matrix td { padding: 1px; } .koz-matrix input { width: 58px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 5px; padding: 3px 4px; background: var(--kaart); text-align: right; font-family: var(--font-mono); font-size: 10.5px; } .koz-hsacties { display: flex; gap: 8px; margin-top: 12px; } /* ---- toegankelijkheid + beweging ---- */ .kozf button:focus-visible, .kozf input:focus-visible, .kozf select:focus-visible, .kozf textarea:focus-visible { outline: var(--focus-ring, 3px solid var(--c-groen)); outline-offset: 1px; } @media (prefers-reduced-motion: no-preference) { .koz-postab, .koz-chip, .koz-stap, .koz-knop, .koz-zwatch { transition: background .16s ease, border-color .16s ease, color .16s ease; } } /* ---- print: alleen het offertevel ---- */ @media print { .koz-actief .nav, .koz-actief .koz-kop, .koz-actief .koz-voet, .koz-actief .koz-intern, .koz-actief .kozf .kicker:first-child, .koz-actief .koz-h1, .koz-actief .koz-inmeetcontrole, .koz-actief .koz-controle > div:last-child, .koz-actief #toast { display: none !important; } .koz-actief .content { padding: 0 !important; } .koz-actief .koz-controle { grid-template-columns: 1fr; } .koz-actief .koz-offertevel { border: none; box-shadow: none; padding: 0; } .koz-actief .koz-breed { margin: 0; padding: 0; max-width: none; } } /* ---- prijsbeheer v2: bulkbalk + compacte cataloguslijst ---- */ .koz-bulkbalk { display: flex; gap: 8px; align-items: center; margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--c-lijn-2); border-radius: 9px; flex-wrap: wrap; } .koz-bulkbalk input { width: 110px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 7px; padding: 6px 8px; background: var(--kaart); text-align: right; font-family: var(--font-mono); } .koz-bulkbalk span { font-size: 12px; color: var(--c-ink-2); } .koz-catwrap { max-height: 300px; overflow: auto; } /* ---- fase 3: maat-slepen, vak-toolbar, preset-start, inmeet/fabriek ---- */ .koz-svgwrap { position: relative; } .koz-vaktool { position: absolute; display: flex; gap: 4px; align-items: center; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 9px; padding: 4px 6px; box-shadow: var(--schaduw-tegel); z-index: 5; } .koz-vaktool select { font: 600 11px var(--font-ui); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 7px; padding: 4px 6px; background: var(--kaart); color: var(--c-ink); max-width: 120px; } .koz-presethint { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); border-radius: 10px; padding: 9px 12px; margin-bottom: 10px; font-size: 12px; color: var(--c-groen-d); } .koz-presethint button { border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); border-radius: 8px; padding: 5px 10px; font: 700 11.5px var(--font-ui); color: var(--c-ink-2); cursor: pointer; } .koz-presethint button:hover { border-color: var(--c-groen); color: var(--c-groen-d); } .koz-presethint__x { margin-left: auto; border: none !important; background: none !important; color: var(--c-ink-3) !important; } .koz-imrij { grid-template-columns: 130px 1.4fr 80px 1fr 130px 130px; } .koz-imbalk { display: block; height: 7px; border-radius: 99px; background: var(--c-paneel); overflow: hidden; } .koz-imbalk b { display: block; height: 100%; background: var(--c-groen); border-radius: 99px; } .koz-forij { display: grid; grid-template-columns: 130px 1.4fr 1fr 150px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: .76rem; } .koz-forij:last-child { border-bottom: 0; } /* elke rij is een eigen raster: vaste kolommen, en de knoppen krijgen de breedte die vijf knoppen vragen */ .koz-forij2 { grid-template-columns: 110px minmax(0, 1.1fr) minmax(0, 1fr) 150px 110px 340px; cursor: default; } .koz-forij2:hover { background: var(--kaart); } .koz-foacties { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; } /* ═══ IM7 · de fabrieksorder in de lijst ════════════════════════════ Het formaat achter de fabrieksnaam (PDF of EOS), en de teller onder de leverweek. Rood pas over de norm: daaronder is het een gewone stand van zaken, daarboven staat de levertijd op losse schroeven. */ .koz-fofmt { font-style: normal; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .06em; color: var(--c-ink-3); margin-left: 6px; } .koz-folever { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .koz-fotel { font-style: normal; font-size: .64rem; line-height: 1.4; color: var(--c-ink-3); } .koz-fotel.is-stop { color: var(--c-rood); font-weight: 700; } /* ===== KE1 · stap 2 = wireframe v9: gevels, regels, varianten, lade ===== */ .koz-g9 { max-width: 1280px; margin: 0 auto; padding: 12px 20px 40px; position: relative; } .koz-varianten { display: flex; gap: 10px; margin: 0 0 12px; } .koz-variant { border: 1px solid var(--lijn); border-radius: var(--radius-klein); padding: 8px 12px; min-width: 170px; display: flex; flex-direction: column; gap: 2px; background: var(--kaart); text-align: left; cursor: pointer; font: inherit; color: inherit; } .koz-variant.is-actief { border-color: var(--accent); background: var(--accent-t); } .koz-variant.subsidie { background: var(--goed-t); border-color: transparent; cursor: default; } .koz-variant .w { font-weight: 800; font-size: 1.1rem; } .koz-variant .l { font-size: .72rem; color: var(--ink2); } .koz-variant .l.plus { color: var(--goed-d); font-family: var(--font-mono); } .koz-gevel { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--radius); box-shadow: var(--schaduw-kaart); margin-bottom: 10px; overflow-x: auto; } .koz-g9tabel { min-width: 980px; } .koz-gevelkop { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--lijn); } .koz-gevelkop h2 { margin: 0; font-size: .95rem; font-weight: 800; } .koz-gevelsom { margin-left: auto; font-weight: 700; } .koz-gevelschets { display: flex; gap: 6px; align-items: flex-end; height: 44px; padding: 0 6px; border-left: 1px solid var(--lijn); border-right: 1px solid var(--lijn); } .koz-venster { background: #DCE6EE; border: 1.5px solid var(--ink); border-radius: 1px; cursor: pointer; min-width: 10px; } .koz-venster.deur { background: #E8E4DA; } .koz-venster.is-actief { outline: 2px solid var(--accent); outline-offset: 1px; } .koz-g9tabel { width: 100%; border-collapse: collapse; } .koz-g9tabel th { font: 700 .66rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); text-align: left; padding: 8px 10px; background: var(--rail); border-bottom: 1px solid var(--lijn); } .koz-g9tabel th.num, .koz-g9tabel td.num { text-align: right; } .koz-g9tabel td { padding: 5px 10px; border-bottom: 1px solid var(--grijs2); vertical-align: middle; font-size: .86rem; } .koz-g9rij:hover td { background: var(--accent-t2); } .koz-g9rij.is-actief td { background: var(--accent-t); } .koz-g9tabel td input, .koz-g9tabel td select { font: inherit; font-size: .86rem; padding: 5px 7px; border: 1px solid transparent; border-radius: 6px; background: transparent; width: 100%; color: var(--ink); } .koz-g9tabel td input:hover, .koz-g9tabel td select:hover { border-color: var(--lijn2); background: var(--kaart); } .koz-g9tabel td input:focus-visible, .koz-g9tabel td select:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; background: var(--kaart); } .koz-g9tabel td input.num { text-align: right; width: 88px; } .koz-rijid { font-weight: 700; color: var(--ink2); } .koz-mini { cursor: pointer; width: 84px; } .koz-mini svg { display: block; width: 72px; height: auto; } .koz-vaktags { display: flex; gap: 4px; flex-wrap: nowrap; white-space: nowrap; } .koz-g9tabel th:nth-child(3), .koz-g9tabel td:nth-child(3) { min-width: 150px; } .koz-g9tabel th:nth-child(4), .koz-g9tabel td:nth-child(4) { min-width: 130px; } .koz-g9tabel th:nth-child(5), .koz-g9tabel td:nth-child(5) { min-width: 150px; } .koz-g9tabel th:nth-child(8), .koz-g9tabel td:nth-child(8) { min-width: 170px; } .koz-g9tabel th:nth-child(9), .koz-g9tabel td:nth-child(9) { min-width: 150px; } .koz-g9tabel { min-width: 1120px; } .koz-vaktag { font: 600 .68rem var(--font-mono); padding: 2px 6px; border-radius: 4px; background: var(--grijs); border: 1px solid var(--lijn); } .koz-vaktag.dk { background: var(--let-t); border-color: transparent; } .koz-stip { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: middle; } .koz-stip.goed { background: var(--goed); } .koz-stip.let { background: var(--let); } .koz-stip.stop { background: var(--stop); } .koz-rijprijs { font-weight: 700; white-space: nowrap; } .koz-rijacties { white-space: nowrap; } .koz-stil { color: var(--ink3); font-size: .74rem; } .koz-nieuwrij td { padding: 8px 10px; } .koz-g9nieuw { display: flex; gap: 8px; align-items: center; margin: 4px 0 12px; } /* KE2 · klantkop, klantpaneel, extra's en de poorten in de voet */ .koz-klantkop { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 14px; } .koz-klantkop__tekst { flex: 1; min-width: 0; } .koz-klantkop .koz-h1 { margin: 4px 0 2px; font-size: 1.3rem; } .koz-klantkop__sub { font-size: .8rem; color: var(--ink3); display: flex; flex-wrap: wrap; gap: 0 4px; align-items: center; } .koz-klantkop__sub .koz-stip { margin: 0 2px 0 4px; } .koz-klantpaneel { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 16px; box-shadow: var(--schaduw-kaart); } .koz-klantvelden { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .koz-klantvelden .koz-kaart { margin: 0 !important; } .koz-klantpaneel__voet { display: flex; justify-content: flex-end; margin-top: 12px; } .koz-extras { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--radius); box-shadow: var(--schaduw-kaart); margin: 6px 0 16px; } .koz-extras.is-open .koz-gevelkop { border-bottom: 1px solid var(--lijn); } .koz-extras:not(.is-open) .koz-gevelkop { border-bottom: 0; } .koz-extras .koz-uitleg { padding: 8px 14px 0; margin: 0; } .koz-extras .koz-prodlijst { border: 0; box-shadow: none; } .koz-extras .koz-gevelkop button { margin-left: auto; } .koz-extras .koz-prodlist, .koz-extras .koz-prodlijst { max-width: none; } .koz-poorten { display: flex; flex-wrap: wrap; gap: 6px 14px; flex: 1 1 auto; } .koz-voet { flex-wrap: wrap; } .koz-voet__info { min-width: 240px; } .koz-stap { white-space: nowrap; } .koz-poort { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--ink); } .koz-voet__totaal { font-size: 1rem; color: var(--ink); } @media (max-width: 900px) { .koz-klantvelden { grid-template-columns: 1fr; } } .koz-rek { flex: 1; } .koz-knop.klein { padding: 5px 9px; font-size: .78rem; } .koz-knop.stil { border-color: transparent; background: none; color: var(--ink2); } /* de lade */ .koz-lade { position: fixed; top: 0; right: 0; height: 100%; width: 560px; max-width: 100vw; background: var(--kaart); border-left: 1px solid var(--lijn); box-shadow: var(--schaduw-laag); display: flex; flex-direction: column; z-index: 40; } .koz-ladekop { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--lijn); } .koz-ladekop h3 { margin: 0; font-size: .95rem; flex: 1; } .koz-ladelijf { flex: 1; overflow: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; } .koz-ladecanvas { background: var(--grijs); border-radius: var(--radius); min-height: 280px; display: block; padding: 8px; } .koz-ladecanvas .koz-svgwrap { width: 100%; display: flex; justify-content: center; } .koz-lever { font-size: .8rem; font-weight: 700; padding: 6px 10px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 6px; } .koz-lever.goed { background: var(--goed-t); color: var(--goed-d); } .koz-lever.let { background: var(--let-t); color: var(--let-d); } .koz-lever.stop { background: var(--stop-t); color: var(--stop-d); } .koz-ladeblok { border-top: 1px solid var(--lijn); padding-top: 10px; } .koz-ladeblok h4 { margin: 0 0 8px; font-size: .8rem; } .koz-opbouw { border: 1px solid var(--lijn); border-radius: var(--radius-klein); padding: 8px 10px; font-size: .78rem; background: var(--accent-t2); } .koz-opbouw div { display: flex; justify-content: space-between; padding: 2px 0; } .koz-opbouw .som { border-top: 1px solid var(--lijn); margin-top: 4px; padding-top: 6px; font-weight: 700; } .koz-ladevoet { border-top: 1px solid var(--lijn); padding: 10px 16px; display: flex; gap: 8px; align-items: center; } .koz-galerij { border: 1px solid var(--lijn); border-radius: var(--radius); padding: 10px 12px; background: var(--accent-t2); } .koz-tegels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 8px 0; } .koz-tegel { border: 1px solid var(--lijn); border-radius: var(--radius-klein); background: var(--kaart); padding: 6px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; font: inherit; color: inherit; } .koz-tegel:hover { border-color: var(--ink); } .koz-tegel svg { width: 92px; height: auto; } .koz-tegel .n { font-weight: 700; font-size: .7rem; text-align: center; } .koz-tegel .t { font-size: .62rem; color: var(--ink3); } @media (prefers-reduced-motion: no-preference) { .koz-lade { animation: koz-lade-in .18s ease-out; } @keyframes koz-lade-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } } } /* TM3 · een waarde die elders wordt beheerd: te lezen, niet te wijzigen */ .koz-afgeleid { display: inline-flex; gap: 10px; align-items: baseline; font-size: .8rem; color: var(--ink2); } /* ── keten.css ── */ /* keten.css — Verkoopketen (prototype v7 → app-tokens) Bouwt voort op de kozf-basis (koz-knop, koz-kaart, koz-prijsregel …) uit kozijnoff.css; hier alleen wat de keten zelf nodig heeft. */ .vkk-wortel { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; } /* ---- tabs + tegels ---- */ .vkk-tabs { display: flex; gap: 6px; margin: 12px 0; } .vkk-tab { border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); border-radius: var(--radius-klein); padding: 7px 16px; font: 700 .74rem var(--font-ui); color: var(--c-ink-3); cursor: pointer; } .vkk-tab .mono { font-size: .64rem; } .vkk-tab.aan { background: var(--donker, var(--c-ink)); color: var(--c-creme); border-color: var(--c-ink); } .vkk-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-bottom: 12px; } .vkk-tegel { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; box-shadow: var(--schaduw-tegel); } .vkk-tegel.aan { border-color: var(--c-ink); } .vkk-tegel .tt { display: flex; align-items: center; gap: 8px; font-size: .72rem; } .vkk-tegel .tt .mono { margin-left: auto; font-size: .64rem; color: var(--c-ink-3); } .vkk-tegel .tgroot { font-size: 1.3rem; font-weight: 700; margin: 4px 0 2px; } .vkk-tegel .tsub { font-size: .66rem; color: var(--c-ink-3); line-height: 1.6; } /* ---- categorie-chips + status ---- */ .vkk-cat { font-family: var(--font-mono); font-size: 9px; font-weight: 700; border-radius: 5px; padding: 2px 7px; white-space: nowrap; } .vkk-cat.is-kozijnen { background: var(--c-terra-t); color: var(--c-terra-d); } .vkk-cat.is-isolatie { background: var(--c-groen-t); color: var(--c-groen-d); } .vkk-cat.is-overig { background: var(--c-lijn); color: var(--c-ink-2); } .vkk-st { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; border-radius: 5px; padding: 2px 8px; white-space: nowrap; } .vkk-st-concept { background: var(--let-t); color: var(--let); } /* Zand §4: geel is memo, geen status */ .vkk-st-verzonden { background: var(--c-sage-t); color: var(--c-groen-d); } .vkk-st-akkoord { background: var(--c-groen-t); color: var(--c-groen-d); } .vkk-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: baseline; } .vkk-dot.is-groen { background: var(--c-groen); } .vkk-dot.is-oranje { background: var(--c-amber); } .vkk-dot.is-rood { background: var(--c-rood); } /* ---- lijstrijen ---- */ .vkk-rij { display: grid; grid-template-columns: 120px 1.1fr 130px 1.3fr 110px 110px; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); cursor: pointer; font-size: .76rem; } .vkk-oprij { display: grid; grid-template-columns: 110px 1fr 1.2fr 90px 90px 90px 90px 90px 110px; gap: 8px; align-items: center; padding: 10px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); cursor: pointer; font-size: .74rem; } .vkk-rij:hover, .vkk-oprij:hover { background: var(--c-creme); } .vkk-rij:last-child, .vkk-oprij:last-child { border-bottom: 0; } .vkk-rij--kop { cursor: default; font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); background: var(--c-paneel-2); } .vkk-rij--kop:hover { background: var(--c-paneel-2); } .vkk-oprij small { color: var(--c-ink-3); font-size: .62rem; } .vkk-oprij.m-rood { box-shadow: inset 3px 0 0 var(--c-rood); } .vkk-oprij.m-oranje { box-shadow: inset 3px 0 0 var(--c-amber); } .vkk-ms { font-size: .7rem; color: var(--c-ink-2); } /* ---- offerte-detail ---- */ .vkk-tweekol { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; } @media (max-width: 1000px) { .vkk-tweekol { grid-template-columns: 1fr; } } .vkk-maatregel { display: grid; grid-template-columns: 1.6fr 150px 100px 100px 26px; gap: 7px; align-items: center; padding: 4px 0; } .vkk-maatregel--kop { font-size: .56rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); padding: 2px 0; } .vkk-maatregel input, .vkk-maatregel select { border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 7px; padding: 6px 8px; background: var(--kaart); font-family: var(--font-ui); font-size: 12px; color: var(--c-ink); min-width: 0; } .vkk-maatregel input.num { text-align: right; font-family: var(--font-mono); } .vkk-maatregel input:disabled, .vkk-maatregel select:disabled { background: var(--c-creme); color: var(--c-ink-2); } .vkk-x { border: none; background: none; color: var(--c-rood); font-size: 15px; cursor: pointer; } .vkk-koflink { color: var(--c-terra-d); font-weight: 700; text-decoration: none; } .vkk-koflink:hover { text-decoration: underline; } .vkk-relblok { font-size: 12px; color: var(--c-ink-3); margin-top: 10px; line-height: 1.6; } .vkk-catknoppen { display: grid; gap: 8px; } .vkk-catknoppen .koz-knop { text-align: left; } .vkk-catknoppen .koz-knop span { font-weight: 500; font-size: 11px; } /* ---- splitsing ---- */ .vkk-splitsrij { display: grid; grid-template-columns: 1fr 110px 110px 150px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; } .vkk-splitsrij small { color: var(--c-ink-3); } .vkk-splitsrij .mono { text-align: right; } .vkk-ink { color: var(--c-ink-3); font-size: .68rem; } .vkk-groepsel { display: flex; gap: 4px; justify-content: flex-end; } .vkk-groepsel button { width: 30px; height: 30px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; background: var(--kaart); font: 700 .72rem var(--font-mono); color: var(--c-ink-3); cursor: pointer; } .vkk-groepsel button.aan { background: var(--donker, var(--c-ink)); color: var(--c-creme); border-color: var(--c-ink); } /* ---- opdracht-detail: facturen ---- */ .vkk-factuurrij { display: grid; grid-template-columns: 110px 1fr 100px 110px 110px; gap: 8px; align-items: center; padding: 8px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: .76rem; } .vkk-factuurrij small { color: var(--c-ink-3); font-size: .62rem; } .vkk-fb { text-align: right; font-weight: 700; } .vkk-factuurknoppen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } @media (prefers-reduced-motion: no-preference) { .vkk-tab, .vkk-tegel, .vkk-rij, .vkk-oprij, .vkk-groepsel button { transition: background .16s ease, border-color .16s ease, color .16s ease; } } /* ---- verkoopwerkbank (gecombineerde lijsten) ---- */ .vkb-rij { display: grid; grid-template-columns: 140px 130px 1fr 1.2fr 110px 120px; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); cursor: pointer; font-size: .74rem; } .vkb-oprij { display: grid; grid-template-columns: 130px 110px 1fr 1.2fr 95px 95px 95px 120px; gap: 8px; align-items: center; padding: 10px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); cursor: pointer; font-size: .74rem; } .vkb-rij:hover, .vkb-oprij:hover { background: var(--c-creme); } .vkb-rij:last-child, .vkb-oprij:last-child { border-bottom: 0; } /* ---- prijsregels-hub ---- */ .pr-schemakop { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0 4px; font-size: .78rem; } .pr-goed { color: var(--c-groen-d); font-weight: 700; } .pr-fout { color: var(--c-rood); font-weight: 700; } .pr-schemarij { display: grid; grid-template-columns: 1fr 80px 26px; gap: 6px; margin-bottom: 5px; } .pr-catrij { display: grid; grid-template-columns: 1fr 140px 90px 26px; gap: 6px; margin-bottom: 5px; } .pr-uitvrij { display: grid; grid-template-columns: 1fr 26px; gap: 6px; margin-bottom: 5px; max-width: 300px; } .pr-schemarij input, .pr-catrij input, .pr-catrij select, .pr-uitvrij input { border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 7px; padding: 6px 8px; background: var(--kaart); font-family: var(--font-ui); font-size: 12px; color: var(--c-ink); min-width: 0; } .pr-schemarij input.num, .pr-catrij input.num { text-align: right; font-family: var(--font-mono); } .pr-prijzen { width: 100%; margin: 8px 0; } .pr-prijzen small { color: var(--c-ink-2); font-size: 11px; font-family: var(--font-ui); } .pr-prijzen .chip { margin-left: 4px; } /* V8 · filterchips en de verkoper in de gecombineerde lijsten */ .vkb-filters { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: 0 0 10px; } .vkb-flabel { font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); font-weight: 700; margin-right: 3px; } .vkb-flabel + .vkb-chip { margin-right: 2px; } .vkb-chip { border: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); border-radius: var(--radius-klein); padding: 3px 11px; font-size: .68rem; font-family: inherit; cursor: pointer; color: var(--c-ink-2); transition: border-color 160ms ease, background 160ms ease; } .vkb-chip:hover { border-color: var(--c-groen); } .vkb-chip.is-actief { background: var(--c-groen-t); border-color: var(--c-groen); color: var(--c-groen-d); font-weight: 700; } .vkb-verk, .vkb-vb { font-style: normal; display: block; font-size: .64rem; color: var(--c-ink-3); line-height: 1.4; } .vkb-vb { color: var(--c-amber); } /* 27-09 · compacte rijen: verkoper en voorbehoud inline; kozijn-poortstand als statuspunt mét woord */ .tafel .vkb-verk, .tafel .vkb-vb { display: inline; font-size: .78rem; } .vkb-poort { display: inline-block; font-size: .7rem; line-height: 1; } .vkb-poort.is-goed { color: var(--goed); } .vkb-poort.is-let { color: var(--let); } .vkb-poort.is-stop { color: var(--stop); } /* ── instroom.css ── */ /* instroom.css — werkruimte Instroom (Scans | Marketing) */ .in-wortel { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; } .in-h1 { font-size: 1.3rem; margin: 2px 0 0; letter-spacing: -.02em; } .in-uitleg { font-size: .8rem; color: var(--c-ink-3); margin: 6px 0 16px; line-height: 1.55; max-width: 720px; } .in-zoekbalk { margin: 12px 0 10px; } .in-zoekbalk input { width: 100%; max-width: 420px; height: 32px; font: 400 .78rem var(--font-ui); color: var(--c-ink); padding: 0 12px; border-radius: var(--radius); background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn-2); } .in-rij { display: grid; grid-template-columns: 110px 1.2fr 1.6fr 120px 110px 100px; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: .76rem; } .in-rij:last-child { border-bottom: 0; } .in-rij:hover { background: var(--c-creme); } .in-rij--kop { font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); background: var(--c-paneel-2); } .in-rij--kop:hover { background: var(--c-paneel-2); } .in-bron { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; background: var(--c-paneel); color: var(--c-ink-2); border-radius: 5px; padding: 2px 8px; white-space: nowrap; } .in-wie strong { display: block; font-size: .78rem; } .in-wie span { font-size: .62rem; color: var(--c-ink-3); } .in-ctx { font-size: .7rem; color: var(--c-ink-2); } .in-utm { font-style: normal; font-size: .58rem; color: var(--c-terra-d); background: var(--c-terra-t); border-radius: 5px; padding: 1px 6px; white-space: nowrap; } .in-relok { font-size: .66rem; font-weight: 700; color: var(--c-groen-d); } .in-relnee { font-size: .64rem; color: var(--c-ink-3); } .in-st { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; border-radius: 5px; padding: 2px 8px; } .in-st.is-nieuw { background: var(--c-amber-t); color: var(--c-amber); } .in-st.is-op { background: var(--c-groen-t); color: var(--c-groen-d); } .in-st.is-af { background: var(--c-lijn); color: var(--c-ink-3); } .in-acties { text-align: right; } /* ── pijplijnlens.css ── */ /* pijplijnlens.css — pijplijn als berekende lens (V3 fase 4) */ .pl-wortel { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 18px; } .pl-h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin: 2px 0 0; } .pl-uitleg { color: var(--c-ink-2); font-size: 13.5px; max-width: 72ch; margin: -6px 0 0; } .pl-funnel { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; } .pl-fase { display: grid; grid-template-columns: 220px 1fr 150px auto; align-items: center; gap: 14px; padding: 11px 12px; border: 1px solid transparent; border-radius: var(--radius); background: none; font: inherit; text-align: left; cursor: pointer; color: var(--c-ink); transition: background var(--overgang), border-color var(--overgang); } .pl-fase:hover { background: var(--c-paneel); border-color: var(--c-lijn); } .pl-fase__naam { font-weight: 700; font-size: 13.5px; display: flex; align-items: baseline; gap: 10px; } .pl-fase__naam b { font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-3); font-weight: 600; } .pl-fase__balk { height: 14px; border-radius: var(--radius-pill); background: var(--c-paneel); overflow: hidden; } .pl-fase__balk i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--c-sage); transition: width 180ms ease; } .pl-fase:nth-child(3) .pl-fase__balk i { background: var(--c-terra); } .pl-fase:nth-child(4) .pl-fase__balk i { background: var(--c-groen); } .pl-fase__n { font-size: 13px; font-weight: 700; text-align: right; } .pl-fase__sub { font-size: 12px; color: var(--c-ink-2); white-space: nowrap; } .pl-fase:hover .pl-fase__sub { color: var(--c-groen-d); } .pl-bronnen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 20px; } .pl-bron { font-size: 12.5px; color: var(--c-ink-2); border: 1px solid var(--c-lijn); border-radius: var(--radius-pill); padding: 4px 12px; } .pl-bron b { color: var(--c-ink); margin-right: 4px; } .pl-voetnoot { font-size: 12px; color: var(--c-ink-2); margin: 0; } .pl-voetnoot a { color: var(--c-groen-d); } @media (max-width: 900px) { .pl-fase { grid-template-columns: 1fr; gap: 6px; } .pl-fase__n { text-align: left; } } @media (prefers-reduced-motion: reduce) { .pl-fase, .pl-fase__balk i { transition: none; } } /* ---- delta-beeld (aanvulling 10-08 · CRM-patroon ②) ---- */ .pl-deltagrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px} .pl-deltablok{padding:14px 16px} .pl-deltakop{display:flex;align-items:baseline;gap:10px;margin-bottom:10px} .pl-deltakop b{font-size:.85rem} .pl-deltakop span{font-size:.7rem;color:var(--ink3)} .pl-deltarij{display:flex;align-items:baseline;gap:10px;padding:6px 0;border-bottom:1px solid var(--grijs);font-size:.78rem} .pl-deltarij:last-child{border-bottom:0} .pl-deltarij>span:nth-child(2){flex:1;min-width:0} .pl-ref{font-size:.72rem;text-decoration:none;color:var(--accent-d)} .pl-ref:hover{text-decoration:underline} .pl-fijn{font-size:.7rem;color:var(--ink3);padding:6px 0} /* te lang in de fase: amber, mét het aantal dagen — kleur draagt nooit alleen */ .pl-deltarij.is-hang .pl-hangdagen{background:var(--let-t);color:var(--let);font-weight:700; padding:2px 8px;border-radius:99px;font-size:.7rem} /* ── verkoopteam.css ── */ /* verkoopteam.css — Verkoop › Team (docs/VERKOPER-EIGEN-WERK-BOUWSPEC.md). Alleen tokens uit casa360-stijl.css; geen kleurliterals, geen losse schaduw. */ .vt { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; } .vt-kop { margin-bottom: 18px; } .vt-kop h1 { margin: 4px 0 6px; font-size: 1.5rem; } .vt-kop p { margin: 0; max-width: 68ch; color: var(--ink2); font-size: .9rem; } .vt .bs-stats { margin-bottom: 18px; } .vt .bs-paneel { margin-bottom: 16px; } .vt-tabelwrap { overflow-x: auto; } .vt-tabel td { white-space: nowrap; } .vt-tabel th, .vt-tabel td { padding-left: 8px; padding-right: 8px; } .vt-tabel td:first-child { white-space: normal; min-width: 150px; } .vt em.vt-zacht, .vt em.vt-let { display: block; font-style: normal; font-size: 11.5px; margin-top: 2px; font-family: var(--font-ui); } .vt .vt-zacht { color: var(--ink3); } .vt .vt-let { color: var(--let); font-weight: 700; } .vt-uitleg { margin: 12px 0 0; max-width: 84ch; color: var(--ink2); font-size: .84rem; line-height: 1.5; } .vt .bs-paneel__kop + .vt-uitleg { margin: 0 0 12px; } .vt-periode { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--ink2); } .vt-periode select, .vt-dag { font: inherit; font-size: .82rem; padding: 6px 8px; border: var(--lijndikte, 1px) solid var(--c-lijn-2); border-radius: var(--radius-klein); background: var(--kaart); color: var(--ink); } .vt-balk { display: block; width: 96px; height: 6px; margin-top: 4px; border-radius: 99px; background: var(--grijs); overflow: hidden; } .vt-balk i { display: block; height: 100%; background: var(--goed); border-radius: 99px; } .vt-cel { font: inherit; font-family: var(--font-mono); font-size: 12.5px; padding: 2px 8px; border: var(--lijndikte, 1px) solid var(--c-lijn-2); border-radius: var(--radius-klein); background: var(--kaart); color: var(--ink); cursor: pointer; transition: background var(--overgang); } .vt-cel:hover { background: var(--accent-t2); } .vt-klein { padding: 5px 10px; font-size: .78rem; } .vt-acties { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .vt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (max-width: 720px) { .vt { padding: 18px 16px 56px; } } @media (prefers-reduced-motion: reduce) { .vt-cel { transition: none; } } .vt .bs-tab .mono { margin-left: 6px; } .vt .bs-paneel > .vt-uitleg, .vt .bs-paneel > .vt-acties { padding-left: 12px; padding-right: 12px; } .vt .bs-paneel > .vt-uitleg:last-child, .vt .bs-paneel > .vt-acties:last-child { padding-bottom: 12px; } /* ── wdb.css ── */ /* ===================================================================== wdb.css — Module 3.5 · Woningdatabase & selectie. Tokens only. Prefix wdb-. "Slate"-accent uit het prototype → groen-d/ink-tokens. ===================================================================== */ .wdb { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 48px; } .wdb-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; } .wdb-kop h1 { margin: 2px 0 4px; font-size: 1.35rem; } .wdb-kop p { margin: 0; font-size: .8rem; color: var(--c-ink-2); max-width: 66ch; } .wdb-kopacties { display: flex; gap: 9px; } .wdb-groen { color: var(--c-groen-d); } .wdb-slate { color: var(--c-ink-2); } .wdb-amber { color: var(--c-amber); } /* connector-balk (patroon comm-koppelingen) */ .wdb-connectors { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 10px 16px; border-radius: 12px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); margin-bottom: 14px; } .wdb-connector { display: inline-flex; align-items: center; gap: 7px; font: 500 .7rem var(--font-ui); color: var(--c-ink-2); } .wdb-connector i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-lijn-2); } .wdb-connector i.is-groen { background: var(--c-groen); } .wdb-connector strong { font-size: .72rem; color: var(--c-ink); } .wdb-connector.is-stil { opacity: .7; } /* schaal-kaart */ .wdb-schaal { display: flex; align-items: center; gap: 20px; padding: 13px 20px; } .wdb-schaal > div strong { display: block; font-size: 1.15rem; letter-spacing: -.01em; } .wdb-schaal > div span { font: 600 .62rem var(--font-ui); color: var(--c-ink-3); } .wdb-schaal > i { width: 1px; height: 34px; background: var(--c-lijn-2); } /* database-tabel */ .wdb-werkbalk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .wdb-zoek { flex: 1; min-width: 240px; display: flex; align-items: center; gap: 9px; padding: 9px 14px; border-radius: 10px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn-2); } .wdb-zoek span { color: var(--c-ink-3); } .wdb-zoek input { flex: 1; border: none; background: transparent; font: 500 .78rem var(--font-ui); color: var(--c-ink); } .wdb-teller { font-size: .64rem; color: var(--c-ink-3); } .wdb-tabel { overflow: hidden; padding: 0; } .wdb-rij { display: grid; grid-template-columns: 118px 1.3fr 52px 58px 96px 84px 150px 1.2fr; gap: 10px; align-items: center; width: 100%; box-sizing: border-box; padding: 11px 18px; border: none; border-bottom: var(--lijndikte) solid var(--c-lijn); background: transparent; cursor: pointer; text-align: left; font: inherit; } .wdb-rij:hover { background: var(--c-creme); } .wdb-rij--kop { cursor: default; background: var(--c-creme); font-size: .56rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); } .wdb-rij--kop:hover { background: var(--c-creme); } .wdb-rij > .mono { font-size: .68rem; } .wdb-rij__adres { font: 600 .74rem var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wdb-rij > span { font: 500 .7rem var(--font-ui); color: var(--c-ink-2); } .wdb-rij .chip { font-size: .56rem; } .wdb-rij__tags { font-size: .6rem; color: var(--c-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wdb-rij__tags em { font-style: normal; color: var(--c-lijn-2); } .wdb-voetnoot { font: 500 .7rem var(--font-ui); color: var(--c-ink-3); margin-top: 10px; } .wdb-voetnoot a { color: var(--c-groen-d); font-weight: 700; } /* woningkaart */ .wdb-detail { margin-top: 14px; padding: 22px 26px; } .wdb-detail__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); margin-bottom: 16px; } .wdb-detail__kop h1 { margin: 4px 0 2px; font-size: 1.25rem; } .wdb-detail__kop > div > span { font: 500 .76rem var(--font-ui); color: var(--c-ink-2); } .wdb-detail__legenda { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; } .wdb-detail__legenda strong { font-size: .8rem; } .wdb-detail__legenda .mono { display: inline-flex; align-items: center; gap: 5px; font-size: .6rem; color: var(--c-ink-2); } .wdb-detail__legenda i, .wdb-veld__bron i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; } .wdb-detail i.is-bag, .wdb-veld__bron i.is-bag { background: var(--c-groen-d); } .wdb-detail i.is-3dbag, .wdb-veld__bron i.is-3dbag { background: var(--c-ink-2); } .wdb-velden { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 11px; margin-bottom: 22px; } .wdb-veld { padding: 12px 14px; border-radius: 11px; background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); } .wdb-veld__lbl { display: block; font: 600 .64rem var(--font-ui); color: var(--c-ink-3); margin-bottom: 4px; } .wdb-veld strong { display: block; font-size: .86rem; margin-bottom: 7px; } .wdb-veld__bron { display: inline-flex; align-items: center; gap: 5px; font: 600 .6rem var(--font-mono); color: var(--c-ink-2); } .wdb-detail__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 20px; } @media (max-width: 800px) { .wdb-detail__duo { grid-template-columns: 1fr; } } .wdb-detail__duo strong { display: block; font-size: .8rem; margin-bottom: 9px; } .wdb-relatie { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-radius: 10px; background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); } .wdb-relatie i { width: 30px; height: 30px; border-radius: 50%; background: var(--c-groen-d); color: var(--knop-ink); display: grid; place-items: center; font-style: normal; } .wdb-relatie strong { margin: 0; font-size: .76rem; } .wdb-relatie span { font: 500 .66rem var(--font-ui); color: var(--c-ink-2); } .wdb-leegrelatie { padding: 12px 14px; border-radius: 10px; background: var(--c-creme); border: 1.5px dashed var(--c-lijn-2); font: 500 .72rem var(--font-ui); color: var(--c-ink-3); } .wdb-tagwolk { display: flex; flex-wrap: wrap; gap: 7px; } .wdb-tagwolk .chip { font-size: .58rem; } .wdb-tls { margin: 10px 0 16px; display: flex; flex-direction: column; gap: 12px; } .wdb-tl { display: flex; gap: 13px; align-items: flex-start; } .wdb-tl i { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; font-style: normal; font-size: .68rem; color: var(--knop-ink); background: var(--c-ink-3); } .wdb-tl i.is-slate { background: var(--c-ink-2); } .wdb-tl i.is-groen { background: var(--c-groen-d); } .wdb-tl strong { display: block; font-size: .76rem; } .wdb-tl .mono { font-size: .62rem; color: var(--c-ink-3); } .wdb-survivorship { padding: 11px 14px; border-radius: 10px; background: var(--c-groen-t); font: 500 .7rem/1.5 var(--font-ui); } /* bouwer */ .wdb-bouwgrid { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 20px; align-items: start; margin-top: 14px; } @media (max-width: 1000px) { .wdb-bouwgrid { grid-template-columns: 1fr; } } .wdb-paneel { padding: 17px 18px; margin-bottom: 14px; } .wdb-paneel > .kicker { display: block; margin-bottom: 13px; } .wdb-paneel > strong { display: block; font-size: .8rem; margin-bottom: 12px; } .wdb-flabel { display: block; font: 600 .7rem var(--font-ui); color: var(--c-ink-3); margin: 12px 0 7px; } .wdb-flabel:first-of-type { margin-top: 0; } .wdb-chips { display: flex; flex-wrap: wrap; gap: 7px; } .wdb-chips--vol .wdb-chip { flex: 1; text-align: center; } .wdb-chip { padding: 6px 12px; border-radius: 8px; font: 600 .7rem var(--font-ui); cursor: pointer; white-space: nowrap; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); color: var(--c-ink-2); } .wdb-chip.is-actief { border-color: var(--c-groen-d); background: var(--c-groen-d); color: var(--knop-ink); } .wdb-chip.is-slate.is-actief { border-color: var(--c-ink-2); background: var(--c-ink-2); } .wdb-chip.is-amber.is-actief { border-color: var(--c-amber); background: var(--c-amber); } .wdb-bjrij { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .wdb-stapper { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 9px; background: var(--c-paneel); } .wdb-stapper button { width: 22px; height: 22px; border: none; border-radius: 6px; background: var(--kaart); cursor: pointer; font: 700 .8rem var(--font-ui); color: var(--c-ink-2); } .wdb-stapper .mono { font-size: .8rem; font-weight: 700; min-width: 38px; text-align: center; } .wdb-rail { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 12px; } .wdb-telling { border-radius: 16px; background: var(--donker, var(--c-ink)); color: var(--knop-ink); padding: 20px; box-shadow: var(--schaduw-tegel); } .wdb-telling .kicker { color: color-mix(in srgb, var(--knop-ink) 60%, transparent); } .wdb-telling > strong { display: block; font-size: 2.4rem; line-height: 1; letter-spacing: -.02em; margin: 9px 0 3px; } .wdb-telling > span { font: 600 .74rem var(--font-ui); color: color-mix(in srgb, var(--knop-ink) 78%, transparent); } .wdb-telling__net { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, var(--kaart) 10%, transparent); margin: 12px 0; } .wdb-telling__net span { font: 600 .66rem var(--font-ui); color: color-mix(in srgb, var(--knop-ink) 72%, transparent); } .wdb-telling__net strong { font-size: .9rem; } .wdb-telling p { margin: 0; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--kaart) 16%, transparent); font: 500 .68rem/1.5 var(--font-ui); color: color-mix(in srgb, var(--knop-ink) 62%, transparent); } .wdb-actie { width: 100%; justify-content: center; } .wdb-actierij { display: flex; gap: 8px; } .wdb-actierij .btn { flex: 1; justify-content: center; } .wdb-paneel--saved { margin-bottom: 0; } .wdb-doelgroep { display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); cursor: pointer; text-align: left; font: inherit; margin-bottom: 8px; } .wdb-doelgroep > span:first-child { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .wdb-doelgroep strong { font-size: .74rem; } .wdb-doelgroep em { font-style: normal; font-size: .62rem; color: var(--c-groen-d); white-space: nowrap; } .wdb-doelgroep__f { display: block; font: 500 .62rem var(--font-ui); color: var(--c-ink-3); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wdb-avg { font-size: .62rem; color: var(--c-ink-3); padding: 0 4px; margin: 0; } /* brief */ .wdb-briefkolom { max-width: 760px; margin-top: 14px; } .wdb-brief__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; } .wdb-brief__kop .mono { font-size: 1.1rem; } .wdb-sups { display: flex; flex-direction: column; gap: 9px; margin: 12px 0 15px; } .wdb-sup { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; border: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); cursor: pointer; text-align: left; font: inherit; } .wdb-sup.is-aan { border-color: var(--c-groen-d); background: var(--c-groen-t); } .wdb-sup i { width: 18px; height: 18px; border-radius: 5px; flex: none; display: grid; place-items: center; font-style: normal; font-size: .62rem; color: var(--knop-ink); border: 1.5px solid var(--c-lijn-2); } .wdb-sup.is-aan i { border-color: var(--c-groen-d); background: var(--c-groen-d); } .wdb-sup span { flex: 1; font: 600 .74rem var(--font-ui); } .wdb-sup em { font-style: normal; font-size: .7rem; color: var(--c-amber); } .wdb-brief__som { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; border-radius: 11px; background: var(--donker, var(--c-ink)); color: var(--knop-ink); } .wdb-brief__som span { font: 600 .72rem var(--font-ui); color: color-mix(in srgb, var(--knop-ink) 80%, transparent); } .wdb-brief__som strong { font-size: 1.2rem; } .wdb-klaar { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 13px; background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); } .wdb-klaar i { width: 34px; height: 34px; border-radius: 50%; background: var(--c-groen-d); color: var(--knop-ink); display: grid; place-items: center; font-style: normal; flex: none; } .wdb-klaar strong { display: block; font-size: .8rem; } .wdb-klaar span { font: 500 .7rem/1.5 var(--font-ui); color: var(--c-ink-2); } /* tags */ .wdb-taggrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start; margin-top: 14px; } .wdb-taggroep { padding: 0; overflow: hidden; } .wdb-taggroep__kop { padding: 14px 17px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .wdb-taggroep__kop strong { display: block; font-size: .8rem; } .wdb-taggroep__kop span { font: 500 .64rem var(--font-ui); color: var(--c-ink-3); } .wdb-tag { padding: 13px 17px 0; } .wdb-tag:last-child { padding-bottom: 13px; } .wdb-tag > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .wdb-tag .mono { font-size: .72rem; font-weight: 600; } .wdb-tag .chip { font-size: .52rem; text-transform: uppercase; letter-spacing: .05em; } .wdb-tag__balk { height: 4px; border-radius: 3px; background: var(--c-paneel); margin-bottom: 5px; } .wdb-tag__balk i { display: block; height: 100%; border-radius: 3px; background: var(--c-groen); } .wdb-tag__balk i.is-amber { background: var(--c-amber); } .wdb-tag__balk i.is-groen-licht { background: var(--c-groen); opacity: .6; } .wdb-tag__balk i.is-stil { background: var(--c-lijn-2); } .wdb-tag em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); } /* ---- live-laag (vereenvoudiging c, 21-07): landelijk register ---- */ .wdb-rij--live { grid-template-columns: 76px 1.6fr 52px 58px 150px 84px 100px; } .wdb-zoek--klein { margin-top: 9px; flex: none; } .wdb-sup.is-stil { opacity: .55; cursor: default; } .wdb-verfijn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 14px; margin: 2px 0 4px; } .wdb-verfijn label { display: flex; align-items: center; gap: 7px; font: 500 .68rem var(--font-ui); color: var(--c-ink-2); white-space: nowrap; } .wdb-verfijn input[type="number"] { width: 72px; padding: 6px 8px; border-radius: 8px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); font: 600 .7rem var(--font-ui); color: var(--c-ink); } .wdb-verfijn__vink { grid-column: 1 / -1; } .wdb-verfijn input[type="checkbox"] { accent-color: var(--c-groen-d); width: 15px; height: 15px; } /* ---- uitleveringslog + Postfilter-bewijs (besluit 10-08) ---- */ .wdb-sup.is-vast { cursor: default; opacity: .92; } .wdb-uitl { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--grijs); font-size: .76rem; flex-wrap: wrap; } .wdb-uitl > span:nth-child(2) { flex: 1; min-width: 0; } .wdb-uitl__sup { color: var(--ink3); font-style: normal; margin-left: 8px; } .wdb-uitl__knop { padding: 4px 10px; font-size: .7rem; } /* ---- fase 2 · houdbaarheid: verlopen claims doorgestreept, ouderdom erbij ---- */ .wdb-veld.is-verlopen strong { text-decoration: line-through; color: var(--ink3); } .wdb-veld__oud { font-style: normal; font-size: .62rem; color: var(--ink3); } /* ---- fase 3 · afgeleide claims: gemarkeerd, nooit een belofte ---- */ .wdb-veld.is-afgeleid strong { color: var(--ink2); } .wdb-veld.is-afgeleid { border-style: dashed; } /* ---- fase 4 · dekking van de waarnemingen ---- */ .wdb-dekking { padding: 14px 16px; margin-top: 12px; } .wdb-dekrij { display: grid; grid-template-columns: 1fr 110px 110px; gap: 10px; padding: 5px 0; border-top: 1px solid var(--grijs); font-size: .76rem; } .wdb-dekrij--kop { border-top: 0; color: var(--ink3); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; } .wdb-dekgroei { margin-top: 8px; font-size: .68rem; color: var(--ink3); } /* ---- fase 6 · raming vóór de knop ---- */ .wdb-raming { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; font-size: .78rem; margin-top: 8px; } .wdb-raming > span:nth-child(odd) { color: var(--ink3); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; align-self: center; } .wdb-venster { margin-top: 10px; padding: 8px 12px; background: var(--let-t); color: var(--let); border-radius: 8px; font-size: .76rem; } /* ─── B1 (QUERY-HYGIENE §1) · de gebiedspoort ──────────────────────── De teller die om een afbakening vraagt is geen fout maar een vraag — daarom het let-vlak en niet het stop-vlak. De donkere tellertegel zou hier suggereren dat er een uitkomst staat; die is er juist niet. */ .wdb-telling--vraag { background: var(--let-t); color: var(--let-d); box-shadow: none; border: var(--lijndikte) solid color-mix(in srgb, var(--let) 34%, transparent); } .wdb-telling--vraag .kicker { color: var(--let-d); } .wdb-telling--vraag > strong { color: color-mix(in srgb, var(--let-d) 46%, transparent); } /* let op de cascade: `.wdb-telling p` is (0,1,1) en wint van een enkele klasse — de reden moet daarom óók twee klassen diep staan, anders komt hij wit op het amber vlak te staan en is hij onleesbaar. */ .wdb-telling--vraag .wdb-telling__reden { padding-top: 12px; border-top: var(--lijndikte) solid color-mix(in srgb, var(--let) 26%, transparent); font: 500 .7rem/1.55 var(--font-ui); color: var(--let-d); margin: 0 0 12px; } .wdb-telling--vraag .btn { width: 100%; justify-content: center; } /* een telling die seconden kostte: eerlijk melden wat het de anderen kostte */ .wdb-telling .wdb-telling__traag { color: color-mix(in srgb, var(--knop-ink) 82%, transparent); border-top: 1px solid color-mix(in srgb, var(--kaart) 16%, transparent); } /* ── cdpsuite.css ── */ /* ===================================================================== cdpsuite.css — Module 3.6 · CDP. Prototype-slate (blauwtint) → ink/groen-tokens. Prefix cdp-/cdps. Tokens only. ===================================================================== */ .cdps { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 48px; } .cdp-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; } .cdp-kop h1 { margin: 2px 0 4px; font-size: 1.35rem; } .cdp-kop p { margin: 0; font-size: .8rem; color: var(--c-ink-2); max-width: 66ch; } .cdp-tabs { display: flex; gap: 7px; } .cdp-boxchip { padding: 6px 15px; border-radius: 8px; cursor: pointer; font: 600 .72rem var(--font-ui); border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); color: var(--c-ink-2); } .cdp-boxchip.is-actief { border-color: var(--c-ink); background: var(--donker, var(--c-ink)); color: var(--knop-ink); font-weight: 700; } .cdp-groen { color: var(--c-groen-d); } .cdp-terra { color: var(--c-terra-d); } .cdp-amber { color: var(--c-amber); } .cdp-groen-d { color: var(--c-groen-d); } .cdp-ink { color: var(--c-ink-2); } .cdp-stil { color: var(--c-ink-3); } /* kanaal-iconen + balken */ .cdp-kanaalic { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center; font-style: normal; font-size: .8rem; } .cdp-kanaalic.is-terra { color: var(--c-terra-d); background: var(--c-terra-t); } .cdp-kanaalic.is-groen { color: var(--c-groen-d); background: var(--c-groen-t); } .cdp-kanaalic.is-groen-d { color: var(--knop-ink); background: var(--c-groen-d); } .cdp-kanaalic.is-amber { color: var(--c-amber); background: var(--c-amber-t); } .cdp-kanaalic.is-ink { color: var(--knop-ink); background: var(--c-ink-2); } .cdp-kanaalic.is-stil { color: var(--c-ink-2); background: var(--c-paneel); } .cdp-balk { height: 9px; border-radius: 5px; background: var(--c-paneel); } .cdp-balk i { display: block; height: 100%; border-radius: 5px; min-width: 14px; background: var(--c-groen); } .cdp-balk i.is-terra { background: var(--c-terra); } .cdp-balk i.is-groen-d { background: var(--c-groen-d); } .cdp-balk i.is-amber { background: var(--c-amber); } .cdp-balk i.is-ink { background: var(--c-ink-2); } .cdp-balk i.is-stil { background: var(--c-lijn-2); } /* attributie */ .cdp-modusrij { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; } .cdp-modusrij > span { font: 500 .72rem var(--font-ui); color: var(--c-ink-3); flex: 1; min-width: 240px; } .cdp-modus { display: flex; gap: 6px; background: var(--c-paneel); border-radius: 10px; padding: 4px; min-width: 260px; } .cdp-modusknop { flex: 1; padding: 8px 6px; border-radius: 8px; cursor: pointer; text-align: center; font: 600 .72rem var(--font-ui); border: none; background: transparent; color: var(--c-ink-2); } .cdp-modusknop.is-actief { background: var(--donker, var(--c-ink)); color: var(--knop-ink); font-weight: 700; } .cdp-tabel { padding: 0; overflow: hidden; margin-top: 4px; } .cdp-attrrij { display: grid; grid-template-columns: 2.2fr 1fr 1.4fr 1fr 1.1fr; gap: 12px; padding: 14px 20px; border-bottom: var(--lijndikte) solid var(--c-lijn); align-items: center; } .cdp-attrrij--kop { padding: 12px 20px; background: var(--c-creme); font-size: .56rem; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); } .cdp-bron { display: flex; gap: 11px; align-items: center; min-width: 0; } .cdp-bron strong { display: block; font-size: .78rem; } .cdp-bron span { font: 500 .66rem var(--font-ui); color: var(--c-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .cdp-rechts { text-align: right; font-size: .76rem; } .cdp-omzet { font-weight: 700; } .cdp-convkop { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; } .cdp-convkop strong { font-size: .82rem; } .cdp-convkop .mono { font-size: .64rem; color: var(--c-ink-3); } .cdp-inzicht { margin-top: 14px; padding: 13px 18px; border-radius: 12px; background: var(--c-groen-t); font: 400 .72rem/1.55 var(--font-ui); color: var(--c-ink-2); } /* segmentatie */ .cdp-seggrid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; margin-top: 14px; } @media (max-width: 1000px) { .cdp-seggrid { grid-template-columns: 1fr; } } .cdp-facetten { padding: 20px 22px; } .cdp-facetten__kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .cdp-facetten__kop strong { font-size: .88rem; } .cdp-facetgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; } @media (max-width: 700px) { .cdp-facetgrid { grid-template-columns: 1fr; } } .cdp-facet .kicker { display: block; margin-bottom: 8px; } .cdp-optie { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; box-sizing: border-box; padding: 8px 11px; border-radius: 8px; cursor: pointer; font: 500 .72rem var(--font-ui); border: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); color: var(--c-ink); margin-bottom: 6px; text-align: left; } .cdp-optie em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); } .cdp-optie.is-actief { border-color: var(--c-groen-d); background: var(--c-groen-t); font-weight: 700; } .cdp-optie.is-actief em { color: var(--c-groen-d); } .cdp-rail { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 14px; } .cdp-telling { border-radius: 14px; background: var(--donker, var(--c-ink)); padding: 24px; color: var(--knop-ink); box-shadow: var(--schaduw-tegel); } .cdp-telling .kicker { color: color-mix(in srgb, var(--knop-ink) 70%, transparent); } .cdp-telling > strong { display: block; font-size: 2.4rem; line-height: 1.05; margin: 8px 0 2px; font-family: var(--font-mono); letter-spacing: -.02em; } .cdp-telling > span { font: 500 .76rem var(--font-ui); color: color-mix(in srgb, var(--knop-ink) 82%, transparent); } .cdp-telling__balk { height: 7px; border-radius: 5px; background: color-mix(in srgb, var(--kaart) 20%, transparent); margin-top: 16px; } .cdp-telling__balk i { display: block; height: 100%; border-radius: 5px; background: var(--kaart); } .cdp-telling__f { display: block; font: 500 .7rem var(--font-ui); color: color-mix(in srgb, var(--knop-ink) 70%, transparent); margin-top: 10px; } .cdp-opslaan { width: 100%; margin-top: 16px; justify-content: center; background: var(--kaart); color: var(--c-ink); font-weight: 800; } .cdp-paneel { padding: 18px 20px; } .cdp-paneel > strong { display: block; font-size: .82rem; margin-bottom: 13px; } .cdp-segment { display: block; width: 100%; box-sizing: border-box; border: none; background: transparent; cursor: pointer; text-align: left; font: inherit; padding: 0; margin-bottom: 14px; } .cdp-segment > span:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .cdp-segment strong { font-size: .74rem; } .cdp-segment em { font-style: normal; font-size: .7rem; font-weight: 700; } .cdp-segment .cdp-balk { height: 6px; margin: 6px 0 5px; } .cdp-segment__voet { font: 500 .62rem var(--font-ui); color: var(--c-ink-3); } /* identiteit */ .cdp-review { text-align: right; } .cdp-review strong { display: block; font-size: 1.4rem; color: var(--c-terra-d); } .cdp-review span { font: 600 .58rem var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); } .cdp-idlijst { display: flex; flex-direction: column; gap: 16px; margin: 14px 0 18px; } .cdp-idkaart { padding: 20px 22px; } .cdp-idkaart__kop { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; } .cdp-ring { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c-groen-d) calc(var(--pct) * 1%), var(--c-paneel) 0); } .cdp-ring.is-amber { background: conic-gradient(var(--c-amber) calc(var(--pct) * 1%), var(--c-paneel) 0); } .cdp-ring.is-terra { background: conic-gradient(var(--c-terra) calc(var(--pct) * 1%), var(--c-paneel) 0); } .cdp-ring span { width: 34px; height: 34px; border-radius: 50%; background: var(--kaart); display: grid; place-items: center; font-size: .56rem; font-weight: 700; } .cdp-idkaart__naam { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cdp-idkaart__naam strong { font-size: .9rem; } .cdp-idkaart__kop > div:last-child > span { font: 500 .72rem var(--font-ui); color: var(--c-ink-3); } .cdp-records { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .cdp-record { display: flex; gap: 11px; align-items: center; padding: 9px 13px; border-radius: 10px; background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); } .cdp-record .cdp-kanaalic { width: 26px; height: 26px; font-size: .68rem; } .cdp-record > div { flex: 1; min-width: 0; font: 500 .72rem var(--font-ui); color: var(--c-ink-2); } .cdp-record strong { color: var(--c-ink); } .cdp-record > .mono { font-size: .6rem; color: var(--c-ink-3); white-space: nowrap; } .cdp-conflict { display: flex; gap: 9px; align-items: flex-start; padding: 10px 13px; border-radius: 10px; background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-amber); margin-bottom: 14px; font: 500 .72rem/1.45 var(--font-ui); } .cdp-conflict span { color: var(--c-amber); } .cdp-idacties { display: flex; gap: 10px; } .cdp-verwerkt { font: 600 .74rem var(--font-ui); color: var(--c-groen-d); } /* Suppressie-preview (B5a) */ .cdp-suppressie { display: flex; flex-direction: column; gap: 4px; } .cdp-suprij { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 5px 0; border-bottom: 1px solid var(--c-lijn); color: var(--c-ink-2); } .cdp-suprij--basis { color: var(--c-ink); font-weight: 600; } .cdp-suprij--eind { border-bottom: 0; color: var(--c-groen-d); font-weight: 800; font-size: 13.5px; } .cdp-supnoot { font-size: 11.5px; color: var(--c-ink-2); margin-top: 4px; } /* Kanaal-vergelijk (B5c) */ .cdp-kanaalvgl { margin-top: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; } .cdp-kanaalvgl__kop { display: flex; flex-direction: column; gap: 3px; } .cdp-kvrij { display: grid; grid-template-columns: 1.6fr .7fr .7fr 1.4fr .8fr .8fr; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--c-lijn); font-size: 13px; } .cdp-kvrij:last-child { border-bottom: 0; } .cdp-kvrij--kop { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-2); } .cdp-kvrij.is-beste { background: color-mix(in srgb, var(--c-groen) 10%, transparent); border-radius: 8px; padding-left: 6px; padding-right: 6px; } /* De parkeerband (02-09). Een scherm met CAC- en omzetcijfers die niemand mag geloven, moet dat bovenaan zeggen — niet als grijze voetnoot met een groen bolletje ervoor. Kleur is betekenis: dit is «let op», geen «goed». */ .parkeerband { display: flex; flex-direction: column; gap: 3px; border: var(--lijndikte) solid var(--let); border-left-width: 4px; border-radius: var(--radius); padding: 12px 16px; margin-bottom: 20px; background: var(--kaart); } .parkeerband b { font-size: .84rem; color: var(--ink); } .parkeerband span { font-size: .78rem; color: var(--ink2); max-width: 78ch; } /* ── marketing.css ── */ /* ===================================================================== marketing.css — Module 3.7 · Campagnes. Tokens only. Prefix mk-. Hergebruikt .co-veld (commout) voor de composer-velden. ===================================================================== */ .mk { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 48px; } .mk-kop { margin-bottom: 14px; } .mk-kop h1 { margin: 2px 0 4px; font-size: 1.35rem; } .mk-kop p { margin: 0; font-size: .8rem; color: var(--c-ink-2); max-width: 70ch; } .mk-groen { color: var(--c-groen-d); } .mk-terra { color: var(--c-terra-d); } .mk-sub { display: block; font: 500 .7rem var(--font-ui); color: var(--c-ink-3); margin: 3px 0 12px; } .mk-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; align-items: start; margin: 14px 0; } @media (max-width: 1000px) { .mk-grid { grid-template-columns: 1fr; } } /* doelgroep */ .mk-doelgroep { padding: 16px 0 0; overflow: hidden; } .mk-doelgroep__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 18px; } .mk-doelgroep__kop strong { font-size: .88rem; } .mk-doelgroep .mk-sub, .mk-doelgroep .mk-chips { padding: 0 18px; } .mk-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; } .mk-chip { padding: 7px 13px; border-radius: var(--radius-klein); border: none; cursor: pointer; font: 600 .7rem var(--font-ui); white-space: nowrap; background: var(--c-paneel); color: var(--c-ink-2); } .mk-chip.is-actief { background: var(--donker, var(--c-ink)); color: var(--knop-ink); font-weight: 700; } .mk-rij { display: grid; grid-template-columns: 24px 1.3fr 1.6fr 44px 1.2fr; gap: 10px; align-items: center; width: 100%; box-sizing: border-box; padding: 11px 18px; border: none; border-top: var(--lijndikte) solid var(--c-lijn); background: transparent; cursor: pointer; text-align: left; font: inherit; } .mk-rij:hover { background: var(--c-creme); } .mk-rij.is-aan { background: var(--c-groen-t); } .mk-rij--kop { cursor: default; border-top: none; padding-bottom: 8px; font-size: .56rem; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); } .mk-rij--kop:hover { background: transparent; } .mk-rij > i { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-style: normal; font-size: .62rem; color: var(--knop-ink); border: 1.5px solid var(--c-lijn-2); } .mk-rij.is-aan > i { border-color: var(--c-groen-d); background: var(--c-groen-d); } .mk-rij strong { font-size: .76rem; } .mk-rij > span { font: 500 .7rem var(--font-ui); color: var(--c-ink-2); } .mk-score { color: var(--c-groen-d); font-weight: 700; } .mk-rij .chip { font-size: .56rem; } .mk-rij em { font-style: normal; font-size: .6rem; color: var(--c-ink-3); } /* composer */ .mk-composer { padding: 18px 20px; } .mk-composer > strong { display: block; font-size: .88rem; } .mk-composer > .kicker { display: block; margin-bottom: 8px; } .mk-kanalen { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; } .mk-kanaal { display: flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 11px; cursor: pointer; font: 600 .76rem var(--font-ui); border: 1.5px solid var(--c-lijn-2); background: var(--kaart); color: var(--c-ink-3); } .mk-kanaal .mono { font-size: .8rem; } .mk-kanaal.is-actief { border-color: var(--c-groen-d); background: var(--c-groen-t); color: var(--c-ink); font-weight: 700; } .mk-sjablonen { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .mk-sjabloon { text-align: left; padding: 11px 14px; border-radius: 11px; cursor: pointer; border: 1.5px solid var(--c-lijn-2); background: var(--kaart); font: 600 .72rem var(--font-ui); color: var(--c-ink-2); } .mk-sjabloon.is-actief { border-color: var(--c-groen-d); background: var(--c-groen-t); color: var(--c-ink); } .mk-verstuurrij { display: flex; align-items: center; gap: 12px; margin-top: 4px; flex-wrap: wrap; } .mk-verstuurrij > span { font: 500 .72rem var(--font-ui); } /* campagne-lijst */ .mk-campagnes { padding: 16px 0 6px; overflow: hidden; margin-bottom: 16px; } .mk-campagnes > strong { display: block; font-size: .88rem; padding: 0 20px 10px; } .mk-camprij { display: grid; grid-template-columns: .9fr 1.6fr .6fr .7fr 1.5fr .8fr; gap: 10px; align-items: center; padding: 12px 20px; border-top: var(--lijndikte) solid var(--c-lijn); } .mk-camprij--kop { border-top: none; padding: 0 20px 8px; font-size: .56rem; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); } .mk-camprij strong { font-size: .76rem; } .mk-camprij > span { font: 500 .72rem var(--font-ui); color: var(--c-ink-2); } .mk-camprij .chip { font-size: .58rem; } .mk-reactie { font-size: .68rem; } /* ---- Marketingkalender (verzoek 15-07) ---- */ .mkal { display: flex; flex-direction: column; gap: 0; padding: 16px 18px; } .mkal-kopr { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding-bottom: 12px; } .mkal-kopr > div { display: flex; flex-direction: column; gap: 3px; } .mkal-koprij { display: grid; grid-template-columns: 260px repeat(11, 1fr); gap: 4px; border-bottom: 1px solid var(--c-lijn); padding-bottom: 6px; } .mkal-wk { display: flex; flex-direction: column; gap: 1px; font-size: 10.5px; text-align: center; color: var(--c-ink-2); } .mkal-wk b { font-size: 11px; } .mkal-wk.is-nu b { color: var(--c-groen-d); } .mkal-wk.is-nu { border-left: 2px solid var(--c-groen-d); } .mkal-rij { display: grid; grid-template-columns: 260px 1fr; gap: 4px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--c-lijn); } .mkal-rij:last-child { border-bottom: 0; } .mkal-info { display: flex; flex-direction: column; gap: 3px; font-size: 13px; } .mkal-resultaat { font-size: 11.5px; } .mkal-spoor { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; align-self: stretch; align-items: center; } .mkal-balk { border-radius: 99px; font-size: 10.5px; font-weight: 700; text-align: center; padding: 4px 0; color: var(--c-ink); border: 1px solid var(--c-lijn); } .mkal-balk--loopt { background: color-mix(in srgb, var(--c-amber) 22%, var(--c-paneel)); border-color: var(--c-amber); } .mkal-balk--gepland { background: color-mix(in srgb, var(--c-ink) 6%, var(--c-paneel)); border-style: dashed; } .mkal-balk--afgerond { background: color-mix(in srgb, var(--c-groen-d) 18%, var(--c-paneel)); border-color: var(--c-groen-d); } /* ---- Capaciteit · vooruitblik ---- */ .mcap { display: flex; flex-direction: column; padding: 16px 18px; } .mcap-rij { display: grid; grid-template-columns: 120px 1fr 64px 190px; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--c-lijn); } .mcap-rij:last-child { border-bottom: 0; } .mcap-rij.is-nu { background: color-mix(in srgb, var(--c-groen-d) 4%, transparent); } .mcap-wk { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--c-ink-2); } .mcap-wk b { font-size: 13px; color: var(--c-ink); } .mcap-wk i { align-self: flex-start; font-style: normal; } .mcap-balkwrap { display: flex; flex-direction: column; gap: 4px; } .mcap-balk { position: relative; height: 14px; border-radius: 99px; background: color-mix(in srgb, var(--c-ink) 7%, var(--c-paneel)); overflow: hidden; } .mcap-balk__vul { display: block; height: 100%; border-radius: 99px; } .mcap-balk__vul--groen { background: var(--c-groen-d); } .mcap-balk__vul--amber { background: var(--c-amber); } .mcap-balk__vul--terra { background: var(--c-terra); } .mcap-doel { position: absolute; right: 5%; top: -2px; bottom: -2px; width: 2px; background: var(--donker, var(--c-ink)); opacity: .35; } .mcap-dekking { font-weight: 800; text-align: right; } .mcap-dekking--groen { color: var(--c-groen-d); } .mcap-dekking--amber { color: var(--c-amber); } .mcap-dekking--terra { color: var(--c-terra); } .mcap-ok { color: var(--c-groen-d); text-align: center; } .mcap-regelknop { border: 0; background: none; cursor: pointer; font-size: 13px; color: var(--c-ink); padding: 0 2px; } .mcap-hrlabel { color: var(--c-amber); font-size: 11.5px; } /* ---- Incentives (verzoek 15-07) ---- */ .minc-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; align-items: start; } .minc { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; margin-top: 12px; } .minc-kop { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; } .minc-kop > div { display: flex; flex-direction: column; gap: 3px; } .minc-koprij { grid-template-columns: 0 repeat(11, 1fr); } .minc-spoor { grid-template-columns: repeat(11, 1fr); } .minc-deelnemer { display: grid; grid-template-columns: 22px 1.2fr 1.6fr auto auto; gap: 10px; align-items: center; font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--c-lijn); } .minc-deelnemer:last-child { border-bottom: 0; } .minc-rang { font-weight: 800; color: var(--c-groen-d); } .minc-voortgang { height: 10px; border-radius: 99px; background: color-mix(in srgb, var(--c-ink) 7%, var(--c-paneel)); overflow: hidden; } .minc-voortgang span { display: block; height: 100%; border-radius: 99px; background: var(--c-amber); } .minc-voortgang span.is-boven { background: var(--c-groen-d); } .minc-stand { font-size: 11.5px; color: var(--c-ink-2); } .minc-verdiend { font-weight: 800; } .minc-app { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; position: sticky; top: 16px; } .minc-telefoon { border: 1px solid var(--c-lijn); border-radius: 22px; padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; background: var(--c-creme); } .minc-appkaart { background: var(--c-paneel); border: 1px solid var(--c-lijn); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; box-shadow: var(--schaduw-tegel); } .minc-appkaart em { font-style: normal; font-size: 12px; color: var(--c-ink-2); } .minc-voortgang--app { height: 8px; } .minc-loonrij { display: flex; justify-content: space-between; padding: 7px 2px; border-bottom: 1px solid var(--c-lijn); font-size: 13.5px; } .minc-loonrij--totaal { border-bottom: 0; font-weight: 800; padding-top: 10px; } .mk-abtoggle { border: 1px dashed var(--c-lijn); border-radius: 99px; background: none; font: inherit; font-size: 12.5px; padding: 7px 14px; cursor: pointer; color: var(--c-ink-2); text-align: left; } .mk-abtoggle.is-aan { border-color: var(--c-groen-d); border-style: solid; color: var(--c-groen-d); font-weight: 600; } .minc-kopacties { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; } .minc-kandidaten { display: flex; flex-direction: column; gap: 6px; } .minc-kandidaat { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 8px 12px; font-size: 13px; cursor: pointer; } .minc-kandidaat:has(input:checked) { border-color: var(--c-groen-d); background: color-mix(in srgb, var(--c-groen) 8%, var(--c-paneel)); } .minc-kandidaat em { font-style: normal; font-size: 11.5px; color: var(--c-ink-2); } .minc-deelnemersblok { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } .minc-beloningvelden { display: contents; } /* IN4 · lege stand van de campagnehistorie. De lijst komt uit het verzendlog en is aan het begin van een maand gewoon leeg — dan zegt hij dat, en toont hij niet drie voorbeeldregels. */ .mk-leeg { padding: 16px 2px; font: 400 .74rem var(--font-ui); color: var(--c-ink-3); text-align: center; } /* ── mkacties.css ── */ /* mkacties.css — MARKETING fase 1 · alleen tokens */ .mk-wortel { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; } .mk-h1 { margin: 4px 0 14px; } .mk-blok { margin: 14px 0; } .mk-fijn { font-size: .72rem; color: var(--ink3); } .mk-taak { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border-top: 1px solid var(--grijs); font-size: .78rem; } .mk-taak i { color: var(--goed); font-style: normal; } .mk-taak.is-af { color: var(--ink3); } .mk-taak em { margin-left: auto; font-style: normal; font-size: .7rem; color: var(--ink3); } .mk-signalen { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .mk-sig { padding: 8px 12px; border-radius: 8px; font-size: .76rem; } .mk-sig.is-rood { background: var(--stop-t); color: var(--stop); } .mk-sig.is-geel { background: var(--let-t); color: var(--let); } .mk-wortel td.is-rood { color: var(--stop); font-weight: 700; } /* ---- fase 2 · de kalender (gelift uit wireframe-marketing-kalender-v3) ---- */ .mkk-kaart { padding: 16px 18px; } .mkk-kiez { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; } .mkk-tl { position: relative; border: 1px solid var(--lijn); border-radius: 10px; overflow: hidden; background: var(--kaart); } .mkk-kop { display: flex; height: 22px; background: var(--rail); border-bottom: 1px solid var(--lijn); } .mkk-kop span { flex: 1; font: 700 10px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink3); display: flex; align-items: center; justify-content: center; } .mkk-kop span.is-nu { color: var(--accent-d); } .mkk-net { position: absolute; inset: 0; display: flex; pointer-events: none; } .mkk-net i { flex: 1; border-right: 1px solid var(--grijs); } .mkk-baan { position: relative; height: 24px; border-top: 1px solid var(--grijs2); background: var(--kaart); } .mkk-baan.is-rail { height: 26px; } .mkk-groep { display: flex; gap: 10px; align-items: baseline; padding: 6px 10px 3px; background: var(--rail); border-top: 1px solid var(--lijn); font-size: .74rem; font-weight: 700; } .mkk-aant { font-weight: 400; font-size: .66rem; color: var(--ink3); } .mkk-bar { position: absolute; top: 3px; bottom: 3px; min-width: 8px; border-radius: 5px; font-size: .62rem; color: var(--knop-ink); display: flex; align-items: center; padding: 0 6px; overflow: hidden; white-space: nowrap; cursor: pointer; } .mkk-bar span { overflow: hidden; text-overflow: ellipsis; } .mkk-bar.st-concept { background: var(--ink3); } .mkk-bar.st-wacht { background: var(--let); } .mkk-bar.st-gepland { background: var(--accent); } .mkk-bar.st-klaar { background: var(--accent-d); } .mkk-bar.st-loopt { background: var(--goed); } .mkk-bar.st-af { background: var(--grijs2); color: var(--ink2); } .mkk-bar.st-stop { background: var(--stop); } .mkk-bar.is-als { outline: 2px dashed var(--accent); outline-offset: 1px; } .mkk-sig { width: 7px; height: 7px; border-radius: 50%; background: var(--let-t); border: 1px solid var(--kaart); flex: none; margin-right: 4px; } .mkk-sig.is-rood { background: var(--stop-t); } .mkk-dicht { position: absolute; top: 22px; bottom: 0; background: repeating-linear-gradient(45deg, transparent 0 6px, var(--let-t) 6px 10px); pointer-events: auto; z-index: 1; } .mkk-nu { position: absolute; top: 22px; bottom: 0; width: 2px; background: var(--accent); z-index: 3; } /* de gestreepte sluiting ligt ónder de balken en de groepskoppen: een label moet leesbaar blijven */ .mkk-bar, .mkk-rail, .mkk-groep { z-index: 2; } .mkk-groep { position: relative; } .mkk-rail { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; color: var(--knop-ink); font-size: .6rem; display: flex; align-items: center; padding: 0 6px; overflow: hidden; } .mkk-rail.is-ok { background: var(--accent); } .mkk-rail.is-let { background: var(--let); } .mkk-rail.is-stop { background: var(--stop); } .mkk-leeg { padding: 20px; color: var(--ink3); font-size: .8rem; } .mkk-fijn { font-size: .7rem; color: var(--ink3); margin: 10px 2px 0; } .mkk-taak { display: flex; gap: 12px; align-items: center; padding: 9px 4px; border-top: 1px solid var(--grijs); font-size: .8rem; } .mkk-taak.is-laat > span:first-child { color: var(--stop); font-weight: 700; } .mkk-taak > span:nth-child(2) { flex: 1; } /* N4 (MARKETING-NAV §7) · de Budget-tab: begroot naast het grootboek */ .mkb-kaart { padding: 16px 18px; margin-top: 14px; } .mkb-rij { display: grid; grid-template-columns: 80px 1fr 110px; gap: 12px; align-items: center; padding: 7px 0; font-size: .8rem; } .mkb-rij .mono:first-child { color: var(--ink3); font-size: .68rem; } .mkb-rij b { text-align: right; } .mkb-balk { height: 12px; background: var(--grijs); border-radius: 99px; overflow: hidden; } .mkb-balk i { display: block; height: 100%; background: var(--accent); border-radius: 99px; } .mkb-balk i.is-over { background: var(--let); } /* ── privacy.css ── */ /* privacy.css — module 7.2 · Persoonsdata, privacy & audit (Zand-stijl, kleuren uitsluitend via casa360-stijl.css-tokens) */ .pv { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 14px; } .pv-kop h1 { margin: 2px 0 6px; } .pv-kop p { max-width: 76ch; color: var(--sub); margin: 0; } .pv-tabs { display: flex; gap: 6px; flex-wrap: wrap; } .pv-tabknop { border: 1px solid var(--lijn); background: var(--c-paneel, var(--vlak)); border-radius: var(--radius-klein); padding: 7px 14px; font: inherit; font-weight: 600; cursor: pointer; color: var(--ink); } .pv-tabknop.is-actief { background: var(--knop); border-color: var(--knop); color: var(--knop-ink); } .pv-tabknop:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } .pv-gebreken { border-left: 3px solid var(--stop); display: flex; flex-direction: column; gap: 6px; padding: 14px 18px; } .pv-gebrek { color: var(--stop); font-weight: 600; } .pv-gebrek--slot { color: var(--ink); } .pv-besluit { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; } .pv-besluit em { color: var(--sub); font-style: normal; } .pv-soort { display: flex; flex-direction: column; gap: 8px; } .pv-soort__kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .pv-soort__meta { display: block; color: var(--sub); font-size: 0.92em; margin-top: 2px; } .pv-note { color: var(--sub); font-style: normal; font-size: 0.92em; } .pv-anon { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius-klein); padding: 8px 10px; font-size: 0.92em; } .pv-anon--schijn { border-color: var(--let); } .pv-tabellen { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.85em; } .pv-tabel { border: 1px solid var(--lijn); border-radius: 99px; padding: 2px 9px; color: var(--sub); } .pv-tabel.is-over { border-color: var(--stop); color: var(--stop); } .pv-onverdeeld { display: flex; flex-wrap: wrap; gap: 6px; } .pv-rij { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--lijn); } .pv-rij:last-of-type { border-bottom: 0; } .pv-rij em { color: var(--sub); font-style: normal; text-align: right; max-width: 58ch; } .pv-rij--info em { text-align: left; display: block; } .pv-rij--info { align-items: center; } .pv-blokkop { display: block; margin-bottom: 8px; } .pv-voet { display: flex; justify-content: flex-end; } /* P4 · de rechtenmatrix */ .pv-matrix td, .pv-matrix th { text-align: center; } .pv-matrix td:first-child, .pv-matrix th:first-child { text-align: left; } .pv-cel.is-gat { background: var(--stop-t); color: var(--stop); font-weight: 700; } .pv-dicht { border: 1px solid var(--stop); background: none; color: var(--stop); border-radius: var(--radius-klein); font: inherit; font-size: 0.8em; padding: 1px 7px; margin-left: 5px; cursor: pointer; } .pv-dicht:focus-visible { outline: 3px solid var(--accent); } .pv-verzoek { display: flex; flex-direction: column; gap: 7px; padding: 10px 0; border-bottom: 1px solid var(--lijn); } .pv-verzoek:last-of-type { border-bottom: 0; } .pv-verzoek__kop { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; } .pv-verzoek.is-over { border-left: 3px solid var(--stop); padding-left: 10px; } .pv-verzoek__acties { display: flex; gap: 6px; flex-wrap: wrap; } .pv-termijnbalk { position: relative; height: 20px; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 99px; overflow: hidden; max-width: 420px; } .pv-termijnbalk i { position: absolute; inset: 0 auto 0 0; background: var(--grijs2); } .pv-termijnbalk span { position: relative; padding: 0 10px; font-size: 0.8em; line-height: 20px; } .pv-klok { border-left: 3px solid var(--stop); } .pv-klok__uren { font-size: 2em; font-weight: 700; } .pv-klok.is-over .pv-klok__uren { color: var(--stop); } /* ── bedrijfsvoering.css ── */ /* bedrijfsvoering.css — blok 8 · Contracten & facilitair. Alleen tokens uit casa360-stijl.css; module-wortel-marge-norm. */ .ct { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 14px; } .ct-kop h1 { margin: 2px 0 6px; } .ct-kop p { max-width: 76ch; color: var(--ink2); margin: 0; } .ct-tabs { display: flex; flex-wrap: wrap; gap: 6px; } .ct-tabknop { border: 1px solid var(--lijn); background: var(--kaart); border-radius: var(--radius-klein); padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer; color: var(--ink); } .ct-tabknop.is-actief { background: var(--knop); border-color: var(--knop); color: var(--knop-ink); } .ct-tabknop:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; } .ct-blokkop { display: block; margin-bottom: 8px; } .ct-filterbalk { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .ct-vulling { flex: 1; } .ct-chip { border: 1px solid var(--lijn); background: var(--kaart); border-radius: var(--radius-klein); padding: 5px 12px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--ink); } .ct-chip.is-actief { background: var(--accent-t); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); } .ct-chip:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; } .ct-rij { display: grid; grid-template-columns: 200px 1fr auto; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--lijn); } .ct-rij:last-of-type { border-bottom: 0; } .ct-rij em { color: var(--ink2); font-style: normal; font-size: 12.5px; } .ct-rij--verstreken td { background: var(--stop-t); } .ct-poort { border: 1px solid var(--lijn); border-radius: var(--radius); padding: 9px 12px; margin-top: 8px; font-size: 13px; line-height: 1.45; } .ct-poort--rood { border-color: var(--stop); } .ct-note { display: block; color: var(--ink2); font-size: 12.5px; font-style: normal; margin-top: 8px; } /* schermronde stap 5: drie knoppen onder elkaar maakten elke regel 100 px hoog — naast elkaar, en de cellen breken niet meer op elk woord (alleen de partij mag afbreken) */ .ct-acties { white-space: nowrap; } .ct-acties .btn { margin: 0 4px 0 0; display: inline-block; } [data-ct-tafel] td { white-space: nowrap; } [data-ct-tafel] td:nth-child(3) { white-space: normal; min-width: 140px; } .ct-stil { border-color: var(--stop); } .ct-lek { display: grid; grid-template-columns: 90px 1fr auto auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--lijn); } .ct-lek:last-of-type { border-bottom: 0; } .ct-lek em { display: block; color: var(--ink2); font-style: normal; font-size: 12.5px; } .ct-tweeluik { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; } .ct-komend { display: grid; grid-template-columns: minmax(150px, 1.1fr) 1.4fr 62px 90px; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--lijn); } .ct-komend:last-of-type { border-bottom: 0; } .ct-komend em { display: block; color: var(--ink2); font-style: normal; font-size: 12px; } .ct-baan { height: 12px; border: 1px solid var(--lijn); border-radius: 99px; overflow: hidden; background: var(--kaart); } .ct-baan i { display: block; height: 100%; } .ct-baan i.is-rood { background: var(--stop); } .ct-baan i.is-amber { background: var(--let); } .ct-baan i.is-groen { background: var(--goed); } .ct-stappen { display: flex; gap: 4px; align-items: center; margin-top: 6px; flex-wrap: wrap; } .ct-stap { border: 1px solid var(--lijn); border-radius: 99px; padding: 2px 9px; font-size: 11.5px; color: var(--ink2); } .ct-stap.is-af { background: var(--ink); border-color: var(--ink); color: var(--kaart); } @media (max-width: 900px) { .ct { padding: 18px 14px 60px; } .ct-tweeluik { grid-template-columns: 1fr; } .ct-rij { grid-template-columns: 1fr; } } /* S4 · middelendossier en klikbare signalen */ .ct-dos-acties { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; } .ct-rij--klik { cursor: pointer; } .ct-rij--klik:hover { background: var(--vlak2, var(--paneel)); } .ct-rij--klik:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .ct-spring { color: var(--ink2); } /* ── fm.css ── */ /* ===================================================================== fm.css — Module 3.8 · D2D-fieldmarketing. Tokens only. Prefix fm-. Hergebruikt wdb-chip/wdb-rail/wdb-telling (wdb.css) en co-veld. ===================================================================== */ .fm { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 48px; } .fm-groen { color: var(--c-groen-d); } .fm-rood { color: var(--c-rood); } .fm-amber { color: var(--c-amber); } .fm-hint { font: 500 .66rem/1.5 var(--font-ui); color: var(--c-ink-3); margin: 10px 0 0; } .fm-terug { border: none; background: transparent; cursor: pointer; font: 600 .7rem var(--font-ui); color: var(--c-ink-2); padding: 0 0 10px; } /* ---- telefoon-schil (app is leidend) ---- */ .fm-schil { display: flex; gap: 30px; flex-wrap: wrap; align-items: flex-start; } .fm-telefoon { width: 400px; max-width: 100%; flex: none; border-radius: 40px; background: var(--donker, var(--c-ink)); padding: 12px; box-shadow: var(--schaduw-tegel); } .fm-telefoon > * { background: var(--c-creme); } .fm-status { display: flex; align-items: center; justify-content: space-between; padding: 12px 22px 6px; border-radius: 30px 30px 0 0; font-size: .66rem; font-weight: 700; } .fm-inhoud { border-radius: 0 0 30px 30px; padding: 14px 16px 24px; min-height: 520px; } .fm-naast { flex: 1; min-width: 260px; max-width: 380px; } .fm-naast h1 { margin: 4px 0 8px; font-size: 1.25rem; } .fm-naast p { font: 400 .78rem/1.6 var(--font-ui); color: var(--c-ink-2); margin: 0 0 16px; } .fm-appkop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 8px 18px 0; } .fm-appkop strong { display: block; font-size: 1rem; } .fm-appkop__sub { font: 500 .62rem var(--font-ui); color: var(--c-ink-3); } .fm-provchip { border: none; cursor: pointer; padding: 8px 13px; border-radius: 12px; background: var(--donker, var(--c-ink)); color: var(--knop-ink); font-size: .76rem; font-weight: 800; } .fm-dagbalk { display: flex; gap: 8px; padding: 10px 16px; } .fm-dagbalk > div { flex: 1; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: 12px; padding: 9px 11px; } .fm-dagbalk strong { display: block; font-size: .96rem; color: var(--c-groen-d); } .fm-dagbalk span { font: 600 .54rem var(--font-ui); color: var(--c-ink-3); } /* ---- kaart met echte pins ---- */ .fm-toggle { display: flex; gap: 6px; margin-bottom: 10px; } .fm-togknop { flex: 1; padding: 9px; border-radius: 10px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); cursor: pointer; font: 700 .7rem var(--font-ui); color: var(--c-ink-2); } .fm-togknop.is-actief { background: var(--donker, var(--c-ink)); border-color: var(--c-ink); color: var(--knop-ink); } .fm-kaart { position: relative; height: 340px; border-radius: 16px; background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); overflow: hidden; } .fm-kaart--dash { height: 300px; } .fm-kaart__weg { position: absolute; background: color-mix(in srgb, var(--kaart) 65%, transparent); } .fm-kaart__weg.is-a { left: 0; right: 0; top: 38%; height: 10px; transform: rotate(-4deg); } .fm-kaart__weg.is-b { top: 0; bottom: 0; left: 44%; width: 8px; transform: rotate(7deg); } .fm-kaart__weg.is-c { left: 0; right: 0; top: 72%; height: 7px; transform: rotate(3deg); } .fm-kaart__bron { position: absolute; right: 10px; bottom: 8px; font-size: .54rem; color: var(--c-ink-3); } .fm-pin { position: absolute; transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--kaart); cursor: pointer; display: grid; place-items: center; font: 800 .56rem var(--font-ui); color: var(--knop-ink); box-shadow: var(--schaduw-tegel); background: var(--c-lijn-2); z-index: 2; } .fm-pin.is-actief { width: 28px; height: 28px; z-index: 5; } .fm-pin.is-afspraak { background: var(--c-groen-d); } .fm-pin.is-email { background: var(--c-groen); } .fm-pin.is-nietthuis { background: var(--c-amber); } .fm-pin.is-geeninteresse { background: var(--c-rood); } .fm-pin.is-dnk { background: var(--c-ink-3); } .fm-ik { position: absolute; transform: translate(-50%, -50%); z-index: 6; pointer-events: none; } .fm-ik i { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--donker, var(--c-ink)); border: 3px solid var(--kaart); outline: 4px solid color-mix(in srgb, var(--c-ink) 18%, transparent); } .fm-fmer { position: absolute; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--kaart); cursor: pointer; background: var(--c-groen-d); color: var(--knop-ink); font: 800 .6rem var(--font-ui); box-shadow: var(--schaduw-tegel); z-index: 3; } .fm-fmer.is-actief { background: var(--donker, var(--c-ink)); z-index: 5; } /* ---- app-lijst + woning ---- */ .fm-adressen { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; } .fm-adres { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 13px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); cursor: pointer; text-align: left; font: inherit; } .fm-adres i { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--c-lijn-2); } .fm-adres.is-afspraak i { background: var(--c-groen-d); } .fm-adres.is-email i { background: var(--c-groen); } .fm-adres.is-nietthuis i { background: var(--c-amber); } .fm-adres.is-geeninteresse i { background: var(--c-rood); } .fm-adres.is-dnk i { background: var(--c-ink-3); } .fm-adres > div { flex: 1; min-width: 0; } .fm-adres strong { display: block; font-size: .74rem; } .fm-adres > div span { font: 500 .6rem var(--font-ui); color: var(--c-ink-3); } .fm-adres em { font-style: normal; font-size: .56rem; color: var(--c-groen-d); } .fm-adres .chip { font-size: .5rem; flex: none; } .fm-woning__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .fm-woning__kop strong { display: block; font-size: .92rem; } .fm-woning__kop span { font: 500 .62rem var(--font-ui); color: var(--c-ink-3); } .fm-feiten { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; } .fm-feiten > div { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; padding: 9px 11px; } .fm-feiten span { display: block; font: 600 .56rem var(--font-ui); color: var(--c-ink-3); } .fm-feiten strong { font-size: .8rem; } .fm-dnk { padding: 12px 14px; border-radius: 11px; background: var(--c-paneel); border: 1.5px dashed var(--c-lijn-2); font: 600 .72rem var(--font-ui); color: var(--c-ink-2); } .fm-haakje { padding: 10px 13px; border-radius: 11px; background: var(--c-groen-t); font: 600 .7rem/1.5 var(--font-ui); margin-bottom: 12px; } .fm-groteknop { width: 100%; justify-content: center; padding: 14px; font-size: .8rem; } .fm-afboekrij { display: flex; gap: 8px; margin-top: 8px; } .fm-afboekrij .btn { flex: 1; justify-content: center; } /* ---- vraagset / afspraak / e-mail / provisie ---- */ .fm-vraagset > .kicker { display: block; margin-bottom: 8px; } .fm-vraagset > strong { display: block; font-size: .92rem; margin: 10px 0; line-height: 1.4; } .fm-vraagbalk { height: 6px; border-radius: var(--radius-pill); background: var(--c-paneel); } .fm-vraagbalk i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--c-groen-d); } .fm-antwoorden { display: flex; flex-direction: column; gap: 8px; } .fm-antwoorden--rij { flex-direction: row; } .fm-antwoord { width: 100%; text-align: left; padding: 13px 15px; border-radius: 13px; border: 1.5px solid var(--c-lijn-2); background: var(--kaart); font: 600 .78rem var(--font-ui); cursor: pointer; } .fm-antwoord span { display: block; font: 500 .6rem var(--font-ui); color: var(--c-ink-3); } .fm-antwoord.is-actief { border-color: var(--c-groen-d); background: var(--c-groen-t); } .fm-schaal { display: flex; gap: 7px; } .fm-schaal .fm-antwoord { text-align: center; font-size: .9rem; font-weight: 800; } .fm-oversla { display: block; width: 100%; margin-top: 10px; border: none; background: transparent; cursor: pointer; font: 600 .68rem var(--font-ui); color: var(--c-ink-3); text-align: center; padding: 8px; } .fm-subrij { display: flex; gap: 7px; margin: 10px 0; } .fm-sub { flex: 1; padding: 10px 8px; border-radius: 11px; cursor: pointer; font: 700 .7rem var(--font-ui); border: 1.5px solid var(--c-lijn-2); background: var(--kaart); color: var(--c-ink-3); } .fm-sub.is-actief { border-color: var(--c-groen-d); background: var(--c-groen-t); color: var(--c-ink); } .fm-consent { display: flex; align-items: flex-start; gap: 9px; font: 600 .7rem/1.45 var(--font-ui); margin: 10px 0; cursor: pointer; } .fm-consent input { width: 17px; height: 17px; accent-color: var(--c-groen-d); flex: none; } .fm-slots { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 14px; } .fm-slot { display: flex; align-items: center; gap: 10px; padding: 12px 13px; border-radius: 13px; border: 1.5px solid var(--c-lijn-2); background: var(--kaart); cursor: pointer; text-align: left; font: inherit; } .fm-slot.is-actief { border-color: var(--c-groen-d); background: var(--c-groen-t); } .fm-slot i { width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center; font-style: normal; font-size: .6rem; color: var(--knop-ink); background: var(--c-lijn-2); } .fm-slot.is-actief i { background: var(--c-groen-d); } .fm-slot > div { flex: 1; min-width: 0; } .fm-slot strong { display: block; font-size: .74rem; } .fm-slot span { font: 500 .6rem var(--font-ui); color: var(--c-ink-3); } .fm-slot .chip { font-size: .5rem; } .fm-provkaart { border-radius: 16px; background: var(--donker, var(--c-ink)); color: var(--knop-ink); padding: 18px; margin-bottom: 12px; } .fm-provkaart > span { font: 600 .62rem var(--font-ui); color: color-mix(in srgb, var(--knop-ink) 70%, transparent); } .fm-provkaart > strong { display: block; font-size: 1.8rem; letter-spacing: -.02em; margin: 6px 0 10px; } .fm-provkaart > div { display: flex; justify-content: space-between; font: 600 .62rem var(--font-ui); color: color-mix(in srgb, var(--knop-ink) 80%, transparent); } .fm-provrij { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; margin-bottom: 7px; } .fm-provrij > .mono { font-size: .6rem; color: var(--c-ink-3); } .fm-provrij > div { flex: 1; min-width: 0; } .fm-provrij strong { display: block; font-size: .72rem; } .fm-provrij > div span { font: 500 .6rem var(--font-ui); color: var(--c-ink-3); } .fm-provrij em { font-style: normal; font-size: .74rem; font-weight: 800; color: var(--c-groen-d); } /* ---- manager-dashboard + beheer ---- */ .fm-dash { max-width: var(--werkbreedte, 1240px); margin: 0 auto; } .fm-dashkop { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; } .fm-dashkop h1 { margin: 2px 0 4px; font-size: 1.35rem; } .fm-dashkop p { margin: 0; font-size: .8rem; color: var(--c-ink-2); max-width: 68ch; } .fm-dashgrid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; align-items: start; margin: 14px 0; } .fm-dashgrid--ll, .fm-dashgrid--vs { grid-template-columns: 1fr 320px; } .fm-dashgrid--vs { grid-template-columns: 320px 1fr; } @media (max-width: 1000px) { .fm-dashgrid, .fm-dashgrid--ll, .fm-dashgrid--vs { grid-template-columns: 1fr; } } .fm-dashkaart, .fm-dashfeed, .fm-bord, .fm-llpaneel { padding: 16px 18px; margin-bottom: 14px; } .fm-dashkaart > .kicker, .fm-dashfeed > .kicker, .fm-bord > .kicker, .fm-llpaneel > .kicker { display: block; margin-bottom: 12px; } .fm-fmerdetail { margin-top: 10px; font: 500 .72rem var(--font-ui); color: var(--c-ink-2); } .fm-fmerdetail strong { color: var(--c-ink); } .fm-feedrij { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .fm-feedrij > .mono { font-size: .62rem; color: var(--c-ink-3); } .fm-feedrij > div { flex: 1; min-width: 0; } .fm-feedrij strong { display: block; font-size: .72rem; } .fm-feedrij > div span { font: 500 .62rem var(--font-ui); color: var(--c-ink-3); } .fm-bordrij { display: grid; grid-template-columns: 28px 1.4fr 90px 70px 84px 1fr 44px 80px; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); margin-bottom: 7px; } .fm-bordrij--kop { background: transparent; border: none; padding: 0 12px 4px; font-size: .54rem; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); } .fm-bordrij.is-ik { background: var(--c-groen-t); border-color: var(--c-groen); } .fm-bordrij strong { font-size: .74rem; } .fm-bordrij .mono { font-size: .66rem; } .fm-rang { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: .64rem; font-weight: 800; background: var(--c-paneel); color: var(--c-ink-2); flex: none; } .fm-convbalk { height: 7px; border-radius: var(--radius-pill); background: var(--c-paneel); } .fm-convbalk i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--c-groen); } .fm-lijstrij { display: grid; grid-template-columns: 1.6fr 1fr 110px; gap: 12px; align-items: center; padding: 11px 4px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .fm-lijstrij--tabel { grid-template-columns: 1.8fr 1fr 130px; } .fm-lijstrij strong { display: block; font-size: .76rem; } .fm-lijstrij span { font: 500 .64rem var(--font-ui); color: var(--c-ink-3); } .fm-lijstrij .chip { font-size: .56rem; justify-self: start; } .fm-vsrij { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 12px 13px; border-radius: 12px; border: 1.5px solid var(--c-lijn); background: var(--kaart); cursor: pointer; text-align: left; font: inherit; margin-bottom: 8px; } .fm-vsrij.is-actief { border-color: var(--c-groen-d); background: var(--c-groen-t); } .fm-vsrij > div { flex: 1; min-width: 0; } .fm-vsrij strong { display: block; font-size: .74rem; } .fm-vsrij .mono { font-size: .58rem; color: var(--c-ink-3); } .fm-vsrij .chip { font-size: .54rem; flex: none; } .fm-vraagrij { display: flex; align-items: flex-start; gap: 10px; padding: 11px 4px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .fm-vraagrij > div { flex: 1; min-width: 0; } .fm-vraagrij strong { display: block; font-size: .76rem; } .fm-vraagrij span { display: block; font: 500 .64rem var(--font-ui); color: var(--c-ink-3); margin-top: 2px; } .fm-vraagrij .chip { font-size: .54rem; flex: none; } .fm-histrij { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .fm-histrij > .mono { font-size: .64rem; color: var(--c-groen-d); font-weight: 700; } .fm-histrij > div { flex: 1; min-width: 0; } .fm-histrij strong { display: block; font-size: .72rem; } .fm-histrij span { font: 500 .62rem var(--font-ui); color: var(--c-ink-3); } .fm-histrij .chip { font-size: .54rem; } /* 4.5 · live provisiestatus uit de provisie-suite */ .fm-provstatus { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; font-size: .64rem; color: var(--c-ink-2); } /* Vraagset-beheer (18-07): per vraag bewerken en verplaatsen */ .fm-vskop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .fm-vraagacties { display: inline-flex; gap: 4px; flex: none; } .fm-vraagknop { border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); border-radius: 8px; width: 26px; height: 26px; cursor: pointer; font-size: 12px; color: var(--c-ink-2); display: inline-flex; align-items: center; justify-content: center; } .fm-vraagknop:hover:not(:disabled) { border-color: var(--c-groen-d); color: var(--c-groen-d); } .fm-vraagknop:disabled { opacity: .35; cursor: not-allowed; } /* FM2 (§2a) · de bewonersweergave — het tweede gezicht: één schoon vlak, niets interns in de DOM zolang het toestel omgedraaid is */ .fm--bewoner { display: flex; justify-content: center; padding: 26px; } .fm-bewoner { max-width: 430px; width: 100%; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 14px; } .fm-bewoner__kop { display: flex; flex-direction: column; gap: 2px; } .fm-bewoner__kop strong { font-size: 1.05rem; } .fm-bewoner__kop span { font-size: .78rem; color: var(--c-ink-2); } .fm-bewoner__blok { border: var(--lijndikte) solid var(--c-lijn); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; } .fm-bewoner__antwoord { display: flex; justify-content: space-between; gap: 10px; font-size: .8rem; border-bottom: var(--lijndikte) solid var(--c-lijn); padding: 4px 0; } .fm-bewoner__antwoord span { color: var(--c-ink-2); } /* FM3 (§3) · de eerlijke wachtrijstand van de offline-buffer */ .fm-bufferbalk { margin: 6px 14px 0; padding: 6px 10px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; background: var(--c-creme); font-size: .68rem; color: var(--c-ink-2); } /* FM3 · weekraster in het loopschema */ .fm-weekraster { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .fm-weekdag { display: flex; flex-direction: column; gap: 4px; font-size: .74rem; border: var(--lijndikte) solid var(--c-lijn); border-radius: 8px; padding: 6px 8px; } .fm-weekdag label { display: inline-flex; gap: 4px; align-items: center; cursor: pointer; } /* ── routebord.css ── */ /* routebord.css — FM14 + RB1–RB4 · het routebord van de manager. Alleen tokens uit casa360-stijl.css. Besluit 78: de kaart over de volle breedte (een bord, geen formulier), daaronder de rest. */ .rb { padding: 18px 24px 72px; } .rb-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; } .rb-kop h1 { margin: 4px 0; } .rb-kop p { margin: 0; color: var(--ink2); max-width: 90ch; } .rb-kopacties { display: flex; gap: 8px; align-items: center; } .rb-weeklabel { font-size: .85rem; } .rb-kaartvak { padding: 10px; display: grid; gap: 8px; } .rb-balk { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; } .rb-groep { display: inline-flex; gap: 2px; border: 1px solid var(--lijn); border-radius: 8px; padding: 2px; background: var(--vlak); } .rb-groep .btn { border: 0; background: transparent; padding: 6px 10px; } .rb-groep .btn.is-actief { background: var(--accent); color: var(--knop-ink); } /* systeemkleur (Michiel 01-10): het accent van de huisstijl of de tenant, nooit los zwart */ .rb-veld { display: grid; gap: 3px; position: relative; } .rb-veld select { font: inherit; border: 1px solid var(--lijn); border-radius: 8px; padding: 7px 10px; background: var(--kaart); color: var(--ink); max-width: 320px; } .rb-veld--groei { min-width: 200px; } .rb-zoek { font: inherit; font-size: .85rem; border: 1px solid var(--lijn); border-radius: 99px; padding: 7px 12px; background: var(--kaart); color: var(--ink); width: 100%; } .rb-springlijst { position: absolute; top: 100%; left: 0; z-index: 1200; min-width: 260px; margin-top: 4px; background: var(--kaart); border: 1px solid var(--lijn); border-radius: 8px; box-shadow: var(--schaduw-zwevend); display: grid; padding: 4px; } .rb-spring { border: 0; background: none; font: inherit; font-size: .85rem; text-align: left; padding: 6px 8px; border-radius: 6px; cursor: pointer; color: var(--ink); display: flex; justify-content: space-between; gap: 8px; } .rb-spring:hover { background: var(--vlak); } .rb-spring em { font-style: normal; color: var(--ink2); font-size: .75rem; } .rb-spring:focus-visible, .rb-klap:focus-visible, .rb-pc4:focus-visible, .rb-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .rb-bewaar { display: inline-flex; gap: 6px; align-items: center; } .rb-bewaar input { font: inherit; font-size: .85rem; border: 1px solid var(--lijn); border-radius: 8px; padding: 6px 10px; background: var(--kaart); color: var(--ink); width: 240px; } .rb-kaart { height: clamp(420px, 64vh, 820px); border-radius: 8px; overflow: hidden; background: var(--vlak); position: relative; } @media (max-width: 1000px) { .rb-kaart { height: 52vh; } .rb { padding: 14px 14px 72px; } } .rb-kaart.is-tekenen { cursor: crosshair; touch-action: none; } .rb-kaart.is-punten { cursor: copy; } .rb-leeg { padding: 40px 20px; text-align: center; color: var(--ink2); } .rb-kaartvoet { display: flex; justify-content: space-between; align-items: center; gap: 14px; font-size: .8rem; color: var(--ink2); flex-wrap: wrap; } .rb-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 99px; background: var(--ink2); margin: 0 4px 0 8px; vertical-align: -1px; } .rb-legenda i:first-child { margin-left: 0; } .rb-let { color: var(--let); font-weight: 600; } .rb-live { display: inline-flex; align-items: center; gap: 6px; } .rb-live i { background: var(--goed); margin: 0; } .rb-telling--voet { display: flex; gap: 16px; align-items: center; } .rb-telling--voet b { font-size: 1rem; margin-right: 4px; color: var(--ink); } .rb-routelabelhouder { background: transparent; border: 0; } .rb-routelabel { display: inline-block; background: var(--kaart); border: 2px solid; border-radius: 99px; padding: 2px 9px; font: 700 11px var(--font-mono, "JetBrains Mono", monospace); white-space: nowrap; box-shadow: var(--schaduw-kaart); } .rb-onder { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 14px; align-items: start; margin-top: 14px; } @media (max-width: 1000px) { .rb-onder { grid-template-columns: 1fr; } } .rb-blok { padding: 14px 16px; display: grid; gap: 8px; } .rb-weekblok { margin-top: 14px; } .rb-blokkop { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; } .rb-sorteer { font-size: .8rem; color: var(--ink2); } .rb-hint { font-size: .8rem; color: var(--ink2); } .rb-link { border: 0; background: none; font: inherit; font-size: .8rem; color: var(--ink); text-decoration: underline; cursor: pointer; padding: 0; } .rb-link.is-aan { text-decoration: none; font-weight: 700; } /* het postcodevak: PC4 als buurt, PC6 als blok */ .rb-pclijst { max-height: 480px; overflow: auto; border: 1px solid var(--lijn); border-radius: 8px; } .rb-pc4 { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 7px 10px 7px 4px; border-bottom: 1px solid var(--lijn); cursor: pointer; } .rb-pc4:hover { background: var(--vlak); } .rb-pc4.is-gekozen { background: var(--teal-t); } .rb-pc4.is-deels { box-shadow: inset 3px 0 0 var(--teal); } .rb-klap { border: 0; background: none; font: inherit; color: var(--ink2); cursor: pointer; padding: 2px 6px; border-radius: 6px; } .rb-pc4__naam { font-weight: 600; font-size: .88rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rb-pc4__naam small { display: block; font-weight: 400; color: var(--ink2); font-size: .74rem; } .rb-pc4__n { text-align: right; font-size: .95rem; } .rb-pc4__n small { display: block; font-size: .7rem; color: var(--ink2); } .rb-pc4__kans { font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; border-radius: 99px; padding: 2px 8px; background: var(--vlak); color: var(--ink2); } .rb-pc4__kans.is-hoog { background: var(--goed-t); color: var(--goed); } .rb-pc4__kans.is-midden { background: var(--let-t); color: var(--let); } .rb-pc6kop, .rb-pc6 { display: grid; grid-template-columns: 22px minmax(0, 1fr) 52px 52px 50px 96px 60px; gap: 6px; align-items: center; padding: 4px 10px 4px 30px; font-size: .8rem; } .rb-pc6kop { font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink2); background: var(--vlak); } .rb-pc6kop span, .rb-pc6 .mono { text-align: right; } .rb-pc6kop span:nth-child(2), .rb-pc6 > .mono:first-of-type { text-align: left; } .rb-pc6 { border-bottom: 1px solid var(--lijn); cursor: pointer; } .rb-pc6:hover, .rb-pc6.is-hover { background: var(--vlak); } .rb-pc6.is-gekozen { background: var(--teal-t); } .rb-pc6 input { margin: 0; accent-color: var(--accent); } .rb-pc6 input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } .rb-pc6 small { display: block; color: var(--ink2); font-size: .68rem; font-family: var(--font, inherit); } .rb-pc6 .mono.is-let { color: var(--let); } .rb-kern label { cursor: pointer; } .rb-pot { font-size: .72rem; color: var(--ink2); text-align: right; } .rb-pot.is-goed { color: var(--goed); } .rb-pot.is-let { color: var(--let); } /* filters, telling, weekbord */ .rb-filters { display: flex; flex-wrap: wrap; gap: 6px; } .rb-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; border: 1px solid var(--lijn); border-radius: var(--radius-klein); padding: 4px 10px; background: var(--vlak); cursor: pointer; } .rb-chip.is-aan { background: var(--accent); color: var(--knop-ink); border-color: var(--accent); } .rb-chip input[type="checkbox"] { width: 12px; height: 12px; margin: 0; } .rb-chip.is-veld input { width: 54px; font: inherit; font-size: .8rem; border: 1px solid var(--lijn); border-radius: 6px; padding: 1px 4px; background: var(--kaart); color: var(--ink); } .rb-telling { display: flex; gap: 18px; } .rb-telling b { display: block; font-size: 1.3rem; } .rb-telling span { font-size: .78rem; color: var(--ink2); } .rb-perroute { width: 50px; font: inherit; font-size: .78rem; border: 1px solid var(--lijn); border-radius: 6px; padding: 1px 4px; background: var(--kaart); color: var(--ink); } .rb-acties { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .rb-routes { display: flex; flex-wrap: wrap; gap: 6px; } .rb-route { display: grid; gap: 1px; border: 2px solid; border-radius: 8px; padding: 5px 9px; background: var(--kaart); font-size: .8rem; cursor: grab; user-select: none; } .rb-route b { font-family: var(--font-mono, "JetBrains Mono", monospace); } .rb-route small { color: var(--ink2); font-size: .7rem; } .rb-route:focus-visible, .rb-cel:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .rb-week { display: grid; grid-template-columns: 130px repeat(6, minmax(0, 1fr)); gap: 3px; font-size: .74rem; } .rb-week__h { text-align: center; color: var(--ink2); font-weight: 600; padding: 3px 2px; } .rb-week__l { color: var(--ink2); font-weight: 600; padding: 4px 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rb-week__l em { font-style: normal; font-size: .65rem; border: 1px solid var(--lijn); border-radius: 99px; padding: 0 5px; } .rb-cel { min-height: 34px; border: 1px dashed var(--lijn); border-radius: 6px; background: var(--vlak); padding: 2px; display: grid; gap: 2px; align-content: start; } .rb-cel.is-doel { border-style: solid; border-color: var(--accent); background: var(--kaart); } .rb-cel.is-verlof { background: var(--let-t); } .rb-cel.is-verlof i { font-style: normal; color: var(--let); font-size: .68rem; } .rb-celroute { display: flex; gap: 3px; align-items: center; border-radius: 4px; padding: 2px 4px; color: var(--kaart); font: 600 .7rem var(--font-mono, "JetBrains Mono", monospace); } .rb-celroute select { font: inherit; font-size: .68rem; border: 0; border-radius: 3px; padding: 0 2px; background: var(--kaart); color: var(--ink); flex: 1; min-width: 0; } .rb-celroute button { border: 0; background: transparent; color: var(--kaart); cursor: pointer; font-size: .75rem; padding: 0 2px; } @media (prefers-reduced-motion: reduce) { .rb-kaart * { transition: none !important; } } /* MW1–MW2 (14-09) · de weekbouwer: uitleg op de cel, signalen onder het bord, huisadres per loper */ .rb-veld--klein select { font-size: .78rem; } .rb-celroute i { font-style: normal; font-size: .58rem; letter-spacing: .04em; text-transform: uppercase; opacity: .85; } .rb-celroute.is-auto, .rb-celroute.is-herhaald { outline: 1px dashed var(--kaart); outline-offset: -3px; } .rb-signalen { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 3px; font-size: .78rem; } .rb-signalen li { padding: 4px 8px; border-radius: 6px; background: var(--let-t); color: var(--ink); } .rb-signalen li.is-stop { background: var(--stop-t, var(--let-t)); } .rb-week__l.is-ziek { color: var(--ink3, var(--ink2)); } .rb-thuisknop { margin-right: 4px; font-size: .85rem; } .rb-thuisknop.is-leeg { opacity: .45; } .rb-thuis { display: inline-flex; gap: 3px; align-items: center; margin-right: 4px; } .rb-thuis input { width: 5.5em; font: inherit; font-size: .72rem; border: 1px solid var(--lijn); border-radius: 6px; padding: 2px 4px; } .rb-thuis input:last-of-type { width: 3.5em; } /* MW3–MW6 (14-09) · terugkomers, weggelaten per kaartje, voorraad, vandaag en de regels */ .rb-route.is-terug { border-style: dashed; background: var(--let-t); } .rb-route .rb-weg { font-style: normal; font-size: .68rem; color: var(--let); margin-left: 4px; } .rb-chip--terug { margin-left: auto; } .rb-voorraad .rb-telling div { min-width: 120px; } .rb-vandaaglijst { display: grid; gap: 4px; margin-top: 6px; } .rb-vandaagrij { display: grid; grid-template-columns: 160px 64px 1fr 56px 70px 60px 1fr; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 8px; background: var(--kaart); font-size: .8rem; } .rb-vandaagrij.is-stil { background: var(--let-t); } .rb-vandaagrij.is-klaar { color: var(--ink2); } .rb-vandaagrij em { font-style: normal; color: var(--ink2); } .rb-dienstbalk { display: block; height: 6px; border-radius: 99px; background: var(--lijn); overflow: hidden; } .rb-dienstbalk span { display: block; height: 100%; background: var(--accent); } .rb-let { color: var(--let); font-weight: 600; } .rb-regels { margin-top: 12px; border: 1px solid var(--lijn); border-radius: 10px; padding: 8px 14px; background: var(--kaart); } .rb-regels summary { cursor: pointer; display: flex; gap: 12px; align-items: baseline; } .rb-regelsgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 10px; } .rb-regelset { border: 1px solid var(--lijn); border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; } .rb-regelvelden { display: grid; gap: 5px; } .rb-regel { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: .78rem; } .rb-regel input[type="number"], .rb-regel input[type="text"], .rb-regel input[type="date"], .rb-regel input[type="time"], .rb-regel select { width: 11em; font: inherit; font-size: .78rem; border: 1px solid var(--lijn); border-radius: 6px; padding: 3px 6px; } .rb-regelvoet { display: flex; gap: 8px; align-items: center; } .rb-regelvoet input { flex: 1; font: inherit; font-size: .78rem; border: 1px solid var(--lijn); border-radius: 6px; padding: 4px 8px; } @media (max-width: 900px) { .rb-vandaagrij { grid-template-columns: 1fr 1fr; } } .rb-vglijst { display: grid; gap: 4px; margin: 4px 0 8px; } .rb-vgrij { display: flex; justify-content: space-between; gap: 8px; text-align: left; font: inherit; font-size: .78rem; padding: 4px 8px; border: 1px solid var(--lijn); border-radius: 6px; background: var(--kaart); cursor: pointer; } .rb-vgrij.is-geldig { border-color: var(--goed); } .rb-vgrij.is-verlopen, .rb-vgrij.is-geweigerd { border-color: var(--let); } .rb-vgrij.is-onbekend span, .rb-vgrij.is-aangevraagd span { color: var(--ink2); } /* ---- FM22 (besluit 214) · de vijf stappen ---- */ .rb-stappen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; } .rb-stap { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font: inherit; text-align: left; color: var(--ink2); background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--radius); cursor: pointer; min-width: 0; } .rb-stap[aria-disabled="true"] { opacity: .5; cursor: not-allowed; } .rb-stap:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .rb-stap.is-nu { border-color: var(--accent); color: var(--ink); background: var(--accent-t); } .rb-stap.is-klaar .rb-stap__nr { background: var(--goed-t); color: var(--goed-d); border-color: var(--goed); } .rb-stap__nr { flex: 0 0 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; border: 1px solid var(--lijn2); border-radius: 50%; background: var(--grijs); } .rb-stap.is-nu .rb-stap__nr { background: var(--accent); color: var(--knop-ink); border-color: var(--accent); } .rb-stap__tekst { display: flex; flex-direction: column; min-width: 0; } .rb-stap__tekst b { font-size: .82rem; } .rb-stap__tekst small { font-size: .66rem; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rb-bronvak { display: grid; gap: 10px; } .rb-bronlijst { display: grid; gap: 6px; } .rb-bronrij { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--lijn); border-radius: var(--radius-klein); background: var(--kaart); } .rb-bronrij.is-goed { border-left: 3px solid var(--goed); } .rb-bronrij.is-let { border-left: 3px solid var(--let); } .rb-bronrij.is-stil { opacity: .8; } .rb-bronrij small, .rb-bronactief span { display: block; font-size: .7rem; color: var(--ink3); } .rb-bronstand { font-size: .72rem; color: var(--ink2); white-space: nowrap; } .rb-bronactief { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--radius-klein); background: var(--goed-t); border: 1px solid var(--goed); } .rb-lopprod { font-size: .62rem; color: var(--ink3); display: block; text-align: left; padding: 0; } .rb-lopprod.is-uit { color: var(--stop); text-decoration: line-through; } @media (max-width: 1000px) { .rb-stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rb-bronrij { grid-template-columns: 1fr; } } /* schermronde stap 1: «hidden» verloor van display:grid, waardoor een lege lijst buiten de kaart hing */ .rb-springlijst[hidden] { display: none; } /* ═══ ROUTEBORD V2 (30-09, besluiten 217–224) · kaart links vast, één stap rechts ═══ */ .rb--v2 .rb-kop { margin-bottom: 10px; } .rb-twee { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 14px; align-items: start; } .rb-twee.is-verdelen { grid-template-columns: minmax(0, 2fr) minmax(560px, 3fr); } .rb-kaartkolom { position: sticky; top: 8px; } .rb--v2 .rb-kaart { height: clamp(420px, calc(100vh - 230px), 900px); } .rb-kaarthouder { position: relative; } .rb-kaartoverlay { position: absolute; top: 10px; right: 10px; z-index: 1000; display: flex; gap: 6px; align-items: end; } .rb-veld--overlay { background: var(--kaart); border: 1px solid var(--lijn); border-radius: 8px; padding: 4px 8px 6px; box-shadow: var(--schaduw-kaart); min-width: 150px; } .rb-veld--overlay .kicker { font-size: .58rem; } .rb-veld--overlay .rb-zoek { width: 200px; padding: 5px 10px; } .rb-veld--overlay select { padding: 5px 8px; font-size: .8rem; } .rb--v2 .rb-balk { gap: 6px; } .rb-glyph { min-width: 34px; font-size: 1rem; padding: 6px 8px; } .rb-menu { position: relative; } .rb-menu summary { list-style: none; cursor: pointer; display: inline-flex; } .rb-menu summary::-webkit-details-marker { display: none; } .rb-menu__vlak { position: absolute; top: calc(100% + 4px); right: 0; z-index: 1100; min-width: 320px; background: var(--kaart); border: 1px solid var(--lijn); border-radius: 10px; padding: 12px; box-shadow: var(--schaduw-zwevend); display: grid; gap: 10px; } .rb-menu__acties { display: flex; flex-wrap: wrap; gap: 6px; } .rb-paneel { display: grid; gap: 10px; min-width: 0; } /* de stapper (Michiel 01-10): nummer en woord in de knop, de stand van de huidige stap op één regel erboven — geen afgekapte tekst meer */ .rb--v2 .rb-stappen { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; } .rb--v2 .rb-stap { flex: 1 1 auto; min-width: max-content; flex-direction: row; align-items: center; justify-content: center; gap: 6px; padding: 7px 12px 7px 8px; position: relative; border-radius: 99px; } .rb--v2 .rb-stap__tekst small { display: none; } .rb--v2 .rb-stap__tekst { min-width: max-content; } .rb--v2 .rb-stap__tekst b { font-size: .76rem; white-space: nowrap; } .rb--v2 .rb-stap__nr { flex: 0 0 22px; height: 22px; font-size: .66rem; } .rb--v2 .rb-stap.is-nu { background: var(--accent); border-color: var(--accent); color: var(--knop-ink); } .rb--v2 .rb-stap.is-nu .rb-stap__nr { background: var(--kaart); color: var(--accent); border-color: var(--kaart); } .rb-stapstatus { flex: 1 1 100%; display: flex; gap: 8px; align-items: baseline; padding: 2px 4px 6px; font-size: .8rem; color: var(--ink2); } .rb-stapstatus b { color: var(--ink); } .rb-bronkeuze select { font: inherit; border: 1px solid var(--lijn2); border-radius: 10px; padding: 9px 12px; background: var(--kaart); color: var(--ink); width: 100%; } .rb-bronkeuze select:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } .rb-stap__let { position: absolute; top: 4px; right: 8px; width: 8px; height: 8px; border-radius: 99px; background: var(--let); } .rb-paneelinhoud { display: grid; gap: 10px; } .rb-paneelinhoud .rb-blok { padding: 12px 14px; } .rb--v2 .rb-onder { display: contents; } .rb--v2 .rb-weekblok { margin-top: 0; } .rb-herhaal { display: flex; flex-wrap: wrap; gap: 6px; } .rb-pclade { display: flex; gap: 8px; align-items: center; } .rb-pclade .rb-zoek { flex: 1; } .rb--v2 .rb-pclijst { max-height: 380px; } .rb-cap { display: grid; gap: 2px; padding: 10px 12px; border-radius: 8px; background: var(--vlak); font-size: .8rem; } .rb-cap b { font-size: .95rem; } .rb-cap span { color: var(--ink2); } .rb-cap.is-let { background: var(--let-t); } /* het compacte weekbord */ .rb-routes--strook { flex-wrap: nowrap; overflow-x: auto; padding: 4px 0 6px; align-items: center; } .rb-routes--strook .rb-route { display: inline-flex; gap: 5px; align-items: baseline; padding: 3px 7px; border-width: 2px; font-size: .74rem; white-space: nowrap; } .rb-routes__tel { white-space: nowrap; margin-left: auto; padding-left: 8px; } .rb--v2 .rb-week { grid-template-columns: 150px repeat(6, minmax(0, 1fr)); gap: 3px; } .rb--v2 .rb-week__l { display: flex; align-items: center; gap: 4px; } .rb-loperkleur { width: 8px; height: 8px; border-radius: 99px; flex: none; } .rb-week__naam { flex: 1; overflow: hidden; text-overflow: ellipsis; } .rb-thuis { text-decoration: none; color: var(--ink2); font-size: .8rem; } .rb-thuis.is-leeg { color: var(--let); } .rb-rijdagdeel { font: inherit; font-size: .62rem; border: 1px solid var(--lijn); border-radius: 4px; background: var(--kaart); color: var(--ink2); padding: 0 2px; } .rb--v2 .rb-cel { min-height: 30px; } .rb--v2 .rb-cel.is-voorbij { opacity: .45; } .rb-week__h.is-voorbij { opacity: .5; } .rb--v2 .rb-celroute { padding: 2px 5px; gap: 4px; cursor: grab; } .rb--v2 .rb-celroute b { font-size: .7rem; } .rb--v2 .rb-celroute small { font-size: .64rem; opacity: .9; } .rb--v2 .rb-celroute select, .rb--v2 .rb-celroute button { display: none; } .rb--v2 .rb-celroute:hover select, .rb--v2 .rb-celroute:focus-within select, .rb--v2 .rb-celroute:hover button, .rb--v2 .rb-celroute:focus-within button { display: inline-block; } .rb--v2 .rb-signalen { display: grid; gap: 4px; } .rb-signaal { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 6px 10px; border-radius: 6px; background: var(--vlak); font-size: .78rem; } .rb-signaal.is-let { background: var(--let-t); } .rb-signaal span { color: var(--ink2); } @media (max-width: 1100px) { .rb-twee, .rb-twee.is-verdelen { grid-template-columns: 1fr; } .rb-kaartkolom { position: static; } .rb--v2 .rb-kaart { height: 52vh; } .rb--v2 .rb-stappen { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { .rb--v2 * { transition: none; } } .rb-weekblok[hidden], [data-rb-regelsblok][hidden], [data-rb-datumvak][hidden] { display: none; } /* de blokkenrijen in het smalle paneel: alleen blok, huizen, na filters en koop */ .rb--v2 .rb-pc6kop, .rb--v2 .rb-pc6 { grid-template-columns: 22px minmax(0, 1fr) 48px 48px 44px; } .rb--v2 .rb-pc6kop span:nth-child(n+6), .rb--v2 .rb-pc6 > :nth-child(n+6) { display: none; } .rb-bronlijst[hidden] { display: none; } /* ── veldrapportage.css ── */ /* veldrapportage.css — RP2 · het rapportagescherm van de manager. Alleen tokens uit casa360-stijl.css. */ .vr { max-width: var(--werkbreedte-breed, 1360px); margin: 0 auto; padding: 26px 32px 72px; display: grid; gap: 12px; } .vr-kop h1 { margin: 4px 0; } .vr-kop p { margin: 0; color: var(--ink2); max-width: 78ch; } .vr-leeg { padding: 40px 20px; text-align: center; color: var(--ink2); } .vr-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .vr-chip { font: inherit; font-size: .82rem; border: 1px solid var(--lijn); border-radius: var(--radius-klein); padding: 5px 11px; background: var(--kaart); color: var(--ink); cursor: pointer; } .vr-chip.is-aan { background: var(--accent-t); color: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .vr-chip:focus-visible, .vr-kpi:focus-visible, .vr-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .vr-veld { display: inline-flex; gap: 6px; align-items: center; font-size: .8rem; color: var(--ink2); } .vr-veld select { font: inherit; font-size: .82rem; border: 1px solid var(--lijn); border-radius: 99px; padding: 4px 9px; background: var(--kaart); color: var(--ink); } .vr-periode { font-size: .78rem; color: var(--ink2); margin-left: auto; } .vr-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; } .vr-kpi { text-align: left; border: 1px solid var(--lijn); border-radius: var(--radius, 10px); background: var(--kaart); padding: 10px 12px; font: inherit; cursor: pointer; display: grid; gap: 2px; box-shadow: var(--schaduw-kaart); } .vr-kpi:disabled { cursor: default; } .vr-kpi b { font-size: 1.35rem; font-weight: 600; } .vr-kpi span { font-size: .78rem; color: var(--ink2); } .vr-kpi small { font-size: .74rem; color: var(--ink2); } .vr-kpi.is-let b { color: var(--let); } .vr-kpi.is-goed b { color: var(--goed); } .vr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 12px; } .vr-blok { padding: 14px 16px; display: grid; gap: 8px; align-content: start; } .vr-blokkop { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; } .vr-hint { font-size: .78rem; color: var(--ink2); } .vr-trechter { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; align-items: end; height: 130px; padding-bottom: 22px; } .vr-trechter div { position: relative; background: var(--goed-t); border: 1px solid var(--goed); border-radius: 6px 6px 0 0; padding: 4px; min-height: 8px; } .vr-trechter b { font-size: .78rem; font-weight: 600; color: var(--goed); } .vr-trechter em { position: absolute; top: 100%; left: 0; right: 0; font-style: normal; font-size: .68rem; color: var(--ink2); padding-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vr-tabelvak { overflow-x: auto; } .vr-tabel { width: 100%; border-collapse: collapse; font-size: .84rem; } .vr-tabel th { text-align: left; font-size: .7rem; color: var(--ink2); font-weight: 600; padding: 5px 8px; border-bottom: 1px solid var(--lijn); white-space: nowrap; } .vr-tabel td { padding: 6px 8px; border-bottom: 1px solid var(--lijn); vertical-align: top; } .vr-tabel td small { display: block; color: var(--ink2); font-size: .7rem; } .vr-tabel--klein td, .vr-tabel--klein th { padding: 4px 6px; font-size: .78rem; text-align: center; } .vr-tabel--klein th:first-child { text-align: left; } .vr-tabel td.is-let { color: var(--let); font-weight: 600; } .vr-tabel td.is-goed { color: var(--goed); } .vr-link { border: 0; background: none; font: inherit; color: var(--ink); text-decoration: underline; cursor: pointer; padding: 0; } .vr-detail { max-width: 380px; color: var(--ink2); font-size: .78rem; } .vr-drill { padding: 14px 16px; display: grid; gap: 8px; } /* ── partners.css ── */ /* ===================================================================== partners.css — Module 3.8 · PartnerHub. Tokens only. Prefix pn-. ===================================================================== */ .pn { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 48px; } .pn-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; } .pn-kop h1 { margin: 2px 0 4px; font-size: 1.35rem; } .pn-kop p { margin: 0; font-size: .8rem; color: var(--c-ink-2); max-width: 68ch; } .pn-tabel { padding: 16px 0 0; overflow: hidden; margin-bottom: 14px; } .pn-tabel__kop { display: flex; align-items: center; gap: 14px; padding: 0 20px 12px; flex-wrap: wrap; } .pn-tabel__kop strong { font-size: .9rem; } .pn-zoek { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 9px; padding: 9px 14px; border: 1.5px solid var(--c-lijn-2); border-radius: 12px; background: var(--c-creme); } .pn-zoek span { color: var(--c-ink-3); } .pn-zoek input { flex: 1; border: none; background: transparent; font: 500 .76rem var(--font-ui); color: var(--c-ink); } .pn-rij { display: grid; grid-template-columns: 1.5fr 1fr .7fr 1.2fr 1fr; gap: 10px; align-items: center; width: 100%; box-sizing: border-box; padding: 12px 20px; border: none; border-top: var(--lijndikte) solid var(--c-lijn); background: transparent; cursor: pointer; text-align: left; font: inherit; } .pn-rij:hover { background: var(--c-creme); } .pn-rij.is-actief { background: var(--c-groen-t); } .pn-rij--kop { cursor: default; border-top: none; padding: 0 20px 8px; font-size: .56rem; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); } .pn-rij--kop:hover { background: transparent; } .pn-rij strong { display: block; font-size: .78rem; } .pn-rij > div > span { display: block; font: 500 .68rem var(--font-ui); color: var(--c-ink-2); } .pn-rij > div > em { font-style: normal; font: 500 .62rem var(--font-ui); color: var(--c-ink-3); } .pn-rij .chip { font-size: .58rem; justify-self: start; } .pn-open { color: var(--c-amber); } .pn-detail { padding: 0; overflow: hidden; margin-bottom: 16px; } .pn-detail__kop { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: var(--lijndikte) solid var(--c-lijn); flex-wrap: wrap; } .pn-avatar { width: 46px; height: 46px; border-radius: 13px; background: var(--donker, var(--c-ink)); color: var(--knop-ink); display: grid; place-items: center; font: 700 .9rem var(--font-ui); flex: none; } .pn-detail__kop > div { flex: 1; min-width: 180px; } .pn-detail__kop strong { display: block; font-size: 1rem; } .pn-detail__kop > div span { font: 500 .7rem var(--font-ui); color: var(--c-ink-3); } .pn-sinds { font-size: .62rem; color: var(--c-ink-3); } .pn-duo { display: grid; grid-template-columns: 1fr 1.1fr; gap: 0; } @media (max-width: 900px) { .pn-duo { grid-template-columns: 1fr; } } .pn-duo > div { padding: 18px 22px; } .pn-duo > div:first-child { border-right: var(--lijndikte) solid var(--c-lijn); } .pn-duo .kicker { display: block; margin-bottom: 13px; } .pn-funnelrij { margin-bottom: 12px; } .pn-funnelrij > div { display: flex; justify-content: space-between; margin-bottom: 5px; font: 500 .72rem var(--font-ui); } .pn-funnelrij strong { font-size: .76rem; } .pn-balk { height: 9px; border-radius: var(--radius-pill); background: var(--c-paneel); } .pn-balk i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--c-groen); } .pn-beloningkop { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .pn-model { padding: 15px 17px; border-radius: 14px; background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); margin-bottom: 12px; } .pn-model strong { display: block; font-size: .96rem; } .pn-model span { font: 400 .7rem var(--font-ui); color: var(--c-ink-2); } .pn-hint { font: 400 .66rem/1.5 var(--font-ui); color: var(--c-ink-3); margin: 8px 0 10px; } .pn-formvoet { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 12px; } .pn-fiatmelding { margin: 10px 0; padding: 11px 14px; border-radius: 11px; background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-amber); font: 600 .7rem/1.5 var(--font-ui); } .pn-histkop { margin-top: 6px; } .pn-versie { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); } .pn-versie > div { flex: 1; min-width: 0; } .pn-versie strong { display: block; font-size: .74rem; } .pn-versie span:not(.chip) { font: 400 .62rem var(--font-ui); color: var(--c-ink-3); } .pn-versie .chip { font-size: .54rem; flex: none; } .pn-fiat { background: var(--c-amber); color: var(--knop-ink); } .pn-vo { margin-top: 12px; padding: 9px 13px; border-radius: 10px; font: 600 .7rem var(--font-ui); } .pn-vo.is-ok { background: var(--c-groen-t); color: var(--c-groen-d); } .pn-vo.is-wacht { background: var(--c-amber-t); color: var(--c-ink); } /* Widget-generator (B6c) */ .pn-widget { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; } .pn-widget__code { display: block; font-size: 11.5px; background: color-mix(in srgb, var(--c-ink) 5%, var(--c-paneel)); border-radius: 8px; padding: 10px 12px; overflow-x: auto; white-space: nowrap; } .pn-widget__acties { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .pn-widget__track { font-size: 11px; color: var(--c-ink-2); } .pn-widget__sub { font-size: 12px; color: var(--c-ink-2); } /* B24 · backend-kaart: partner-leads + commissies (poort) */ .pn-bkkaart { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; margin-bottom: 4px; } .pn-bkkop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; } .pn-bkkop > div { display: flex; flex-direction: column; gap: 2px; } .pn-bkkop > div > strong { font: 800 1rem var(--font-ui); } .pn-bkkop > span { font-size: 11px; color: var(--c-ink-2); } .pn-bkkolom { display: flex; flex-direction: column; gap: 6px; } .pn-bkrij { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 8px 12px; } .pn-bkrij > div { display: flex; flex-direction: column; } .pn-bkrij > div > span { font-size: 11.5px; color: var(--c-ink-2); } .pn-bkacties { display: flex; gap: 6px; align-items: center; } .pn-bkpoort { font-size: 11px; color: var(--c-groen-d); } /* Openstaande fiat: wie hem aanvroeg staat erbij, en je eigen aanvraag levert geen knop op (functiescheiding). */ .pn-versie.is-wachtfiat { border-color: var(--c-amber); background: var(--c-amber-t); } .pn-aanvrager { display: block; font: 600 .64rem var(--font-ui); font-style: normal; color: var(--c-ink-3); margin-top: 2px; } .pn-eigenaanvraag { font: 700 .68rem var(--font-ui); color: var(--c-ink-3); white-space: nowrap; } /* ── fin.css ── */ /* ===================================================================== fin.css — Module 4.1 · Finance cockpit + debiteuren + close. Tokens only. Prefix fin-. Hergebruikt wdb-chip en bs-form. ===================================================================== */ .fin { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 48px; } .fin-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; } .fin-kop h1 { margin: 2px 0 4px; font-size: 1.35rem; } .fin-kop p { margin: 0; font-size: .8rem; color: var(--c-ink-2); max-width: 70ch; } .fin-tabs { display: flex; gap: 6px; } .fin-tab { padding: 8px 15px; border-radius: 9px; font: 600 .72rem var(--font-ui); border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); color: var(--c-ink-2); } .fin-tab.is-actief { border-color: var(--c-ink); background: var(--c-paneel); color: var(--c-ink); font-weight: 700; } .fin-groen { color: var(--c-groen-d); } .fin-amber { color: var(--c-amber); } .fin-rood { color: var(--c-rood); } .fin-sub { display: block; font: 500 .68rem var(--font-ui); color: var(--c-ink-3); margin: 2px 0 12px; } .fin-breed { width: 100%; justify-content: center; margin-top: 12px; } /* Exact Online-balk */ .fin-exact { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 10px 16px; border-radius: 12px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); margin-bottom: 14px; } .fin-koppeling { display: inline-flex; align-items: center; gap: 7px; font: 500 .7rem var(--font-ui); color: var(--c-ink-2); } .fin-koppeling i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-lijn-2); } .fin-koppeling i.is-groen { background: var(--c-groen); } .fin-koppeling i.is-amber { background: var(--c-amber); } .fin-koppeling--link { text-decoration: none; cursor: pointer; } .fin-koppeling--link:hover strong { color: var(--c-amber); } .fin-koppeling strong { font-size: .72rem; color: var(--c-ink); } .fin-koppeling.mono { margin-left: auto; font-size: .6rem; color: var(--c-ink-3); } /* cockpit */ .fin-pnl { padding: 16px 18px; margin-bottom: 14px; } .fin-pnl__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 13px; } .fin-pnl__kop strong { font-size: .84rem; } .fin-pnl__kop .mono { font-size: .62rem; color: var(--c-ink-3); } .fin-entiteiten { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; } .fin-entiteit { flex: 1; min-width: 220px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 14px; padding: 14px 16px; } .fin-entiteit > strong { font-size: .84rem; } .fin-entiteit__dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; } .fin-entiteit__dot.is-groen { background: var(--c-groen); } .fin-entiteit__dot.is-terra { background: var(--c-terra); } .fin-entiteit > div { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 9px; } .fin-entiteit > div span { display: block; font: 500 .6rem var(--font-ui); color: var(--c-ink-3); } .fin-entiteit > div strong { font-size: .96rem; } .fin-entiteit em { display: block; font: 500 .6rem var(--font-ui); font-style: normal; color: var(--c-ink-3); margin-top: 8px; } .fin-entiteit--con { background: var(--donker, var(--c-ink)); color: var(--knop-ink); border: none; } .fin-entiteit--con .kicker { color: color-mix(in srgb, var(--knop-ink) 62%, transparent); } .fin-entiteit--con > div span { color: color-mix(in srgb, var(--knop-ink) 62%, transparent); } .fin-entiteit--con em { color: color-mix(in srgb, var(--knop-ink) 70%, transparent); } .fin-leidend { border-radius: 16px; background: var(--donker, var(--c-ink)); color: var(--knop-ink); padding: 18px 22px; margin: 14px 0; } .fin-leidend .kicker { color: var(--c-groen); display: block; margin-bottom: 12px; } .fin-leidend > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 900px) { .fin-leidend > div { grid-template-columns: 1fr; } } .fin-leidend > div > div { padding: 13px 15px; border-radius: 12px; background: color-mix(in srgb, var(--kaart) 7%, transparent); } .fin-leidend strong { display: block; font-size: .8rem; margin-bottom: 3px; } .fin-leidend span { font: 400 .72rem/1.5 var(--font-ui); color: color-mix(in srgb, var(--knop-ink) 72%, transparent); } .fin-duo { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; align-items: start; } @media (max-width: 1000px) { .fin-duo { grid-template-columns: 1fr; } } .fin-paneel { padding: 18px 20px; margin-bottom: 14px; } .fin-paneel > strong { display: block; font-size: .84rem; margin-bottom: 10px; } .fin-paneel > .kicker { display: block; margin: 14px 0 8px; } .fin-paneel--blok { border-color: var(--c-amber); } .fin-paneel--leeg { color: var(--c-ink-3); font: 500 .74rem/1.5 var(--font-ui); } .fin-pijp { display: flex; align-items: center; gap: 12px; padding: 6px 0; } .fin-pijp > span { width: 96px; flex: none; font: 600 .7rem var(--font-ui); color: var(--c-ink-2); } .fin-pijpbalk { flex: 1; height: 8px; border-radius: 6px; background: var(--c-paneel); overflow: hidden; } .fin-pijpbalk i { display: block; height: 100%; border-radius: 6px; background: var(--c-groen); } .fin-pijp > strong { width: 30px; text-align: right; font-size: .76rem; } .fin-pijp > em { width: 62px; text-align: right; font-style: normal; font-size: .62rem; color: var(--c-ink-3); } .fin-blok { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; box-sizing: border-box; padding: 10px 0; border: none; border-top: var(--lijndikte) solid var(--c-amber); background: transparent; cursor: pointer; text-align: left; font: inherit; } .fin-blok strong { display: block; font-size: .76rem; } .fin-blok span:not(.chip) { font: 400 .66rem var(--font-ui); color: var(--c-amber); } .fin-blok .chip { flex: none; font-size: .56rem; } /* debiteuren */ .fin-buckets { margin-bottom: 12px; align-items: center; } .fin-regelknop { margin-left: auto; } .fin-debgrid { display: grid; grid-template-columns: minmax(0, 1.5fr) 340px; gap: 14px; align-items: start; } @media (max-width: 1050px) { .fin-debgrid { grid-template-columns: 1fr; } } .fin-deblijst { padding: 6px 0; overflow: hidden; } .fin-debrij { display: grid; grid-template-columns: 42px 1.4fr 90px 110px 120px 1fr 64px; gap: 10px; align-items: center; width: 100%; box-sizing: border-box; padding: 11px 16px; border: none; border-top: var(--lijndikte) solid var(--c-lijn); background: transparent; cursor: pointer; text-align: left; font: inherit; } .fin-debrij:hover { background: var(--c-creme); } .fin-debrij.is-actief { background: var(--c-groen-t); } .fin-debrij--kop { cursor: default; border-top: none; padding: 10px 16px 6px; font-size: .54rem; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); } .fin-debrij--kop:hover { background: transparent; } .fin-debrij strong { font-size: .76rem; } .fin-debrij > div .mono { display: block; font-size: .6rem; color: var(--c-ink-3); } .fin-debrij > span { font: 500 .68rem var(--font-ui); color: var(--c-ink-2); } .fin-debrij .chip { font-size: .56rem; } .fin-prio { width: 34px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--c-paneel); font-size: .62rem; font-weight: 800; color: var(--c-ink-2); } .fin-extra { display: flex; gap: 5px; flex-wrap: wrap; } .fin-exactst { font-size: .58rem; color: var(--c-groen-d); } .fin-debrail { position: sticky; top: 12px; } .fin-kasweek { display: flex; align-items: center; gap: 10px; padding: 5px 0; } .fin-kasweek > span { width: 44px; flex: none; font: 600 .64rem var(--font-mono); color: var(--c-ink-3); } .fin-kasweek strong { width: 76px; text-align: right; font-size: .68rem; } .fin-dossier { border-color: var(--c-groen-d); } .fin-dossier__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .fin-dossier__kop strong { display: block; font-size: .84rem; } .fin-dossier__kop .mono { font-size: .62rem; color: var(--c-ink-3); } .fin-dossier__cijfers { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; } .fin-dossier__cijfers span { display: block; font: 600 .56rem var(--font-ui); color: var(--c-ink-3); } .fin-dossier__cijfers strong { font-size: .8rem; } .fin-freeze { padding: 11px 13px; border-radius: 10px; background: var(--c-rood-t); border: var(--lijndikte) solid var(--c-rood); font: 500 .7rem/1.5 var(--font-ui); margin-bottom: 12px; } .fin-acties { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 8px; } .fin-incassoknop { background: var(--c-rood); color: var(--knop-ink); } .fin-hist { display: flex; gap: 10px; padding: 7px 0; border-top: var(--lijndikte) solid var(--c-lijn); font: 500 .68rem/1.45 var(--font-ui); color: var(--c-ink-2); } .fin-hist .mono { flex: none; font-size: .6rem; color: var(--c-ink-3); } /* close */ .fin-closegrid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 14px; align-items: start; } @media (max-width: 1000px) { .fin-closegrid { grid-template-columns: 1fr; } } .fin-maand { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--c-lijn); background: var(--kaart); cursor: pointer; text-align: left; font: inherit; margin-bottom: 8px; } .fin-maand.is-actief { border-color: var(--c-ink); background: var(--c-paneel); } .fin-maand strong { font-size: .78rem; } .fin-maand .chip { font-size: .56rem; } .fin-maand em { font-style: normal; font-size: .58rem; color: var(--c-ink-3); } .fin-close__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .fin-closebalk { height: 9px; margin: 8px 0 6px; } .fin-taak { display: flex; align-items: flex-start; gap: 10px; width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: 10px; border: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); cursor: pointer; text-align: left; font: inherit; margin-bottom: 7px; } .fin-taak i { width: 18px; height: 18px; border-radius: 5px; flex: none; display: grid; place-items: center; font-style: normal; font-size: .6rem; color: var(--knop-ink); border: 1.5px solid var(--c-lijn-2); } .fin-taak.is-klaar { border-color: var(--c-groen); background: var(--c-groen-t); } .fin-taak.is-klaar i { border-color: var(--c-groen-d); background: var(--c-groen-d); } .fin-taak span { font: 500 .72rem/1.45 var(--font-ui); } .fin-taak[disabled] { opacity: .65; cursor: default; } .fin-pbc { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: var(--lijndikte) solid var(--c-lijn); } .fin-pbc i { width: 20px; height: 20px; border-radius: 6px; flex: none; display: grid; place-items: center; font-style: normal; font-size: .6rem; color: var(--knop-ink); } .fin-pbc i.is-ok { background: var(--c-groen-d); } .fin-pbc i.is-mis { background: var(--c-rood); } .fin-pbc > span:not(.chip) { flex: 1; font: 500 .7rem/1.4 var(--font-ui); } .fin-pbc .chip { font-size: .54rem; flex: none; } /* Aging + actievoorstellen + profielen (D2b, 15-07) */ .fin-aging { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; margin-bottom: 14px; } .fin-agingrij { display: grid; grid-template-columns: 140px 1fr 110px; gap: 12px; align-items: center; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; padding: 4px 0; color: var(--c-ink); } .fin-agingrij.is-actief span:first-child { font-weight: 700; } .fin-agingbalk { display: block; height: 12px; border-radius: 99px; background: color-mix(in srgb, var(--c-ink) 6%, var(--c-paneel)); overflow: hidden; } .fin-agingbalk b { display: block; height: 100%; border-radius: 99px; } .fin-agingbalk .is-groen { background: var(--c-groen); } .fin-agingbalk .is-amber { background: var(--c-amber); } .fin-agingbalk .is-terra { background: var(--c-terra); } .fin-advies { grid-column: 1 / -1; font-size: 11.5px; display: flex; gap: 8px; align-items: center; padding-top: 3px; } .fin-advies i { font-style: normal; font-size: 9.5px; letter-spacing: .06em; border: 1px solid var(--c-lijn); border-radius: 99px; padding: 1px 7px; color: var(--c-ink-2); } .fin-advies--amber { color: var(--c-amber); font-weight: 600; } .fin-advies--rood { color: var(--c-rood); font-weight: 700; } .fin-advies--groen { color: var(--c-groen-d); } .fin-advies--stil { color: var(--c-ink-2); } .fin-profkop { grid-column: 1 / -1; margin-top: 6px; } /* Werkbon-poort in de close (D3c) */ .fin-wbpoort { border: 1px solid var(--c-amber); border-radius: 12px; padding: 9px 12px; font-size: 12.5px; margin-bottom: 10px; } .fin-wbpoort.is-ok { border-color: var(--c-groen-d); color: var(--c-groen-d); } .fin-wbpoort a { color: inherit; font-weight: 700; } /* ---- B3b · dagelijkse actielijst (backend) ---- */ .fin-actierij { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .fin-actierij:last-child { border-bottom: 0; } .fin-actierij__prio { font-size: .9rem; font-weight: 700; } .fin-actierij__prio.is-rood { color: var(--c-rood); } .fin-actierij__prio.is-amber { color: var(--c-amber); } .fin-actierij div { display: flex; flex-direction: column; } .fin-actierij div strong { font: 600 .76rem var(--font-ui); } .fin-actierij div span { font-size: .62rem; color: var(--c-ink-3); } /* B16 · declaraties uit de veld-apps */ .fin-declrij { display: grid; grid-template-columns: 1fr auto auto auto; gap: 14px; align-items: center; border-top: 1px solid var(--c-lijn); padding: 10px 2px; } .fin-declrij > div { display: flex; flex-direction: column; gap: 2px; } .fin-declrij strong { font-size: .8rem; } .fin-declrij span { font-size: .68rem; color: var(--c-ink-2); } .fin-knop { font: 700 .68rem var(--font-ui); background: var(--c-paneel); border: 1px solid var(--c-lijn-2); color: var(--c-ink); border-radius: 9px; padding: 6px 11px; cursor: pointer; } .fin-knop:hover { border-color: var(--c-ink); } /* Close-taken die zichzelf toetsen (FT-4.1): de stand komt uit de administratie, dus een openstaande regel is geen vinkje maar werk. */ .fin-taak.is-open { border-color: var(--c-amber); } .fin-taak.is-open > i { background: var(--c-amber-t); color: var(--c-amber); } .fin-taak__stand { display: block; font-size: .68rem; color: var(--c-ink-2); margin-top: 3px; font-style: normal; } .fin-taak__uitleg { display: block; font-size: .64rem; color: var(--c-ink-3); margin-top: 2px; font-style: normal; line-height: 1.5; } .fin-sub--let { color: var(--c-ink-3); font-size: .68rem; line-height: 1.55; margin-top: 10px; } .fin-pnlreeks { display: flex; align-items: flex-end; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: var(--lijndikte) solid var(--c-lijn); } .fin-pnlstaaf { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; } .fin-pnlstaaf i { width: 100%; max-width: 42px; background: var(--c-groen); border-radius: 4px 4px 0 0; } .fin-pnlstaaf span { font-size: .62rem; color: var(--c-ink-3); } /* Zoeken + aanmaningsronde op de debiteurenlijst (FT-4.3): met 244 rijen vind je een dossier niet meer door te scrollen. */ .fin-zoek { display: inline-flex; align-items: center; gap: 7px; margin-left: 8px; } .fin-zoek input { font: 400 .78rem var(--font-ui); color: var(--c-ink); padding: 6px 11px; border-radius: var(--radius); background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn-2); min-width: 190px; } .fin-ronde { margin-left: auto; } .fin-hist__door { font-style: normal; color: var(--c-ink-3); font-size: .66rem; } /* Facturen per post (19-07-2026): batches die klaarstaan om te printen. */ .fin-postbatch { padding: 12px 0 14px; border-bottom: var(--lijndikte) solid var(--c-lijn); margin-bottom: 8px; } .fin-postrij { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 0; border-top: var(--lijndikte) solid var(--c-lijn-2); } .fin-postrij:first-of-type { border-top: 0; } .fin-postrij > div { flex: 1; min-width: 220px; display: flex; flex-direction: column; } .fin-postrij span { font-size: .7rem; color: var(--c-ink-3); } .btn.is-gedaan { border-color: var(--c-groen); color: var(--c-groen-d); } /* Zelf kiezen welke facturen op de post gaan (19-07-2026). */ .fin-debrij { grid-template-columns: 28px auto 1.6fr auto auto auto 1fr auto 1.1fr; } .fin-debrij--kop { grid-template-columns: 28px auto 1.6fr auto auto auto 1fr auto; } .fin-kies { display: flex; align-items: center; justify-content: center; } .fin-kies input { cursor: pointer; } .fin-debrij.is-gekozen { background: var(--c-groen-t); } .fin-postuitleg { font-size: .68rem; color: var(--c-ink-3); margin-left: auto; } /* F-GB · opbrengstkoppelingen in de close. Een koppeling is een regel die je in één blik moet kunnen lezen: doel, rekening, naam, versie. */ .fin-gb .fin-gbrij { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr) auto; gap: 4px 10px; align-items: baseline; padding: 6px 0; border-bottom: var(--lijndikte) solid var(--lijn); font-size: .78rem; } .fin-gb .fin-gbrij:last-of-type { border-bottom: 0; } .fin-gbrij__naam { color: var(--ink2); } .fin-gbrij em { color: var(--ink3); font-size: .72rem; } .fin-gbknoppen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .fin-gbgaten { margin-top: 10px; display: grid; gap: 3px; font-size: .74rem; color: var(--ink2); } .fin-gbgaten em { color: var(--ink); } @media (max-width: 900px) { .fin-gb .fin-gbrij { grid-template-columns: minmax(0, 1fr) auto; } } /* F-OHW · de onderbouwing van het onderhanden werk in de close. */ .fin-ohw .fin-ohwrij { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 4px 12px; align-items: baseline; padding: 6px 0; border-bottom: var(--lijndikte) solid var(--lijn); font-size: .78rem; } .fin-ohw .fin-ohwrij:last-of-type { border-bottom: 0; } .fin-ohwrij--kop { color: var(--ink3); text-transform: uppercase; letter-spacing: .04em; font-size: .68rem; } .fin-ohwrij em { display: block; color: var(--ink2); font-style: normal; font-size: .72rem; } .fin-ohw__let { color: var(--let); } /* ═══ EÉN SCHERM · Debiteurenbeheer op de norm (besluit 336, ES6, 09-10-2026) ═══ Kopband en tabbalk komen uit de bouwstenen; hieronder de strook, de gegroepeerde werkvoorraad op --rij, het dossier met de handelingen als lijst, en de kasstroom in woorden. Alleen Werkbank-tokens; deze regels winnen van de oude hierboven. */ .fin.es-scherm { padding: 0; } .fin-debgrid.es-lichaam { grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; align-items: stretch; } .fin-deb__links, .fin-debrail { gap: 10px; } .fin-debrail { position: static; top: auto; } /* koppelingen als stippen in de kopband */ .bs-kopband .fin-exact { display: flex; gap: 12px; align-items: center; padding: 0; margin: 0; border: 0; background: none; border-radius: 0; flex-wrap: nowrap; overflow: hidden; } .bs-kopband .fin-koppeling { font-size: .66rem; gap: 5px; white-space: nowrap; color: var(--ink2); } .bs-kopband .fin-koppeling strong { font-size: .68rem; color: var(--ink); } .bs-kopband .fin-koppeling i { width: 7px; height: 7px; background: var(--grijs2); } .bs-kopband .fin-koppeling i.is-aan { background: var(--goed); } .bs-kopband .fin-koppeling i.is-let { background: var(--let); } .bs-kopband .fin-koppeling--link:hover strong { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; } /* de strook: openstaand · dso · (tellers) · aging als één balk */ .fin-strook { display: flex; align-items: stretch; gap: 0; } .fin-strook__kpi { padding: 8px 14px; border-right: var(--lijndikte) solid var(--lijn); display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: none; } .fin-strook__kpi .l { font-size: .62rem; color: var(--ink3); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; } .fin-strook__kpi .w { font-family: var(--font-mono); font-weight: 700; font-size: var(--kpi); letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; color: var(--ink); background: none; border: 0; padding: 0; text-align: left; cursor: default; } .fin-strook__kpi button.w { cursor: pointer; border-radius: 4px; } .fin-strook__kpi button.w:hover, .fin-strook__kpi button.w[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 3px; } .fin-strook__kpi button.w:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .fin-strook__kpi .w.is-let { color: var(--let); } .fin-strook__kpi .s { font-size: .62rem; color: var(--ink2); white-space: nowrap; } .fin-ok { color: var(--goed); font-weight: 700; } .fin-aging { flex: 1 1 auto; min-width: 200px; padding: 8px 14px; display: flex; flex-direction: column; gap: 4px; justify-content: center; } .fin-aging__legenda { display: flex; gap: 12px; flex-wrap: wrap; } .fin-aging__legenda button { border: 0; background: none; padding: 0; font: 500 .66rem var(--font-ui); color: var(--ink2); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; border-radius: 4px; } .fin-aging__legenda button b { color: var(--ink); font-weight: 700; } .fin-aging__legenda button.is-nul, .fin-aging__legenda button.is-nul b { color: var(--ink3); font-weight: 500; } .fin-aging__legenda button[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); } .fin-aging__legenda button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .fin-aging__legenda i { width: 8px; height: 8px; border-radius: 2px; background: var(--grijs2); } .fin-aging__balk { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--grijs2); } .fin-aging__balk i { display: block; height: 100%; } .fin-aging .is-lopend { background: var(--ink); } .fin-aging .is-b30 { background: var(--let); } .fin-aging .is-b60 { background: var(--let-d, var(--let)); } .fin-aging .is-b90 { background: var(--stop); } .fin-aging .bs-weggelaten { padding: 0; } /* actielijst: één regel als hij leeg is */ .fin-actie { display: flex; align-items: center; gap: 10px; padding: 7px var(--pad); font-size: .8rem; } .fin-actie b { font-weight: 700; } .fin-actie > span { color: var(--ink2); } .fin-actie--open { display: block; padding: 0; } .fin-actielijst .fin-actierij { padding: 6px var(--pad); grid-template-columns: 44px 1fr auto; border-bottom: var(--lijndikte) solid var(--lijn); } .fin-actierij__prio.is-stop { color: var(--stop); } .fin-actierij__prio.is-let { color: var(--let); } .fin-bulk { display: flex; align-items: center; gap: 10px; padding: 6px var(--pad); font-size: .8rem; } /* de werkvoorraad: rijen op --rij, gegroepeerd op ouderdom */ .fin-deblijst { padding: 0; overflow: hidden; } .fin-groep { display: flex; align-items: center; gap: 10px; padding: 6px var(--pad) 4px; font: .62rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); background: var(--grijs); border-bottom: var(--lijndikte) solid var(--lijn); } .fin-groep b { color: var(--ink2); font-weight: 700; text-transform: none; letter-spacing: 0; } .fin-groep .is-b30, .fin-groep .is-b60 { color: var(--let); } .fin-groep .is-b90 { color: var(--stop); } .fin-debrij, .fin-debrij--kop { grid-template-columns: 24px 34px minmax(200px, 1.5fr) 88px 82px 84px minmax(130px, 1.1fr) minmax(96px, .8fr); gap: 8px; min-height: var(--rij); padding: 0 var(--pad); align-items: center; } .fin-debrij { border-top: var(--lijndikte) solid var(--lijn); } .fin-debrij:hover { background: var(--accent-t2); } .fin-debrij.is-actief, .fin-debrij.is-gekozen { background: var(--accent-t); } .fin-debrij--kop { min-height: 30px; font-size: .58rem; letter-spacing: .08em; color: var(--ink3); border-top: 0; } .fin-debrij--kop .r, .fin-debrij .fin-geld { text-align: right; justify-self: end; } .fin-debrij .fin-wie { display: flex; align-items: center; gap: 6px; min-width: 0; } .fin-debrij .fin-wie strong { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 48px; } .fin-debrij .fin-wie > .mono { font-size: .66rem; color: var(--ink3); white-space: nowrap; flex: none; display: inline; } .fin-tag { font: .56rem var(--font-mono); font-style: normal; color: var(--ink3); border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius-pill); padding: 0 5px; line-height: 14px; flex: none; } .fin-debrij .fin-geld { font-size: .8rem; } .fin-debrij .fin-geld.is-let { color: var(--let); } .fin-debrij .fin-geld.is-stop { color: var(--stop); } .fin-debrij > .fin-stil { font: 500 .7rem var(--font-ui); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .fin-debrij .fin-volgende .chip { font-size: .56rem; vertical-align: 1px; } .fin-debrij .fin-prio { width: 30px; height: 20px; border-radius: 6px; font-size: .62rem; background: var(--grijs); color: var(--ink2); } /* het dossier: één primaire knop, de rest als lijst met toets */ .fin-dossier { border-color: var(--lijn2); padding: 0; } .fin-dossier__kop { padding: 10px var(--pad) 4px; margin: 0; align-items: baseline; } .fin-dossier__kop strong { font-size: .95rem; font-weight: 800; } .fin-dossier__cijfers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 var(--pad) 8px; margin: 0; } .fin-dossier__cijfers > div { display: flex; flex-direction: column; min-width: 0; } .fin-dossier__cijfers strong { font-size: .95rem; } .fin-dossier__cijfers em { font-style: normal; font-size: .62rem; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fin-handel { border-top: var(--lijndikte) solid var(--lijn); padding: 8px var(--pad) 6px; display: grid; gap: 6px; } .fin-handel .btn--primary { width: 100%; justify-content: center; height: 32px; font-size: .8rem; } .fin-handel__uitleg { font-size: .64rem; color: var(--ink2); text-align: center; margin-top: -2px; } .fin-handel__klaar { font-size: .74rem; color: var(--ink2); text-align: center; padding: 6px 0; } .fin-incassoknop { background: var(--stop); border-color: var(--stop); color: var(--knop-ink); } .fin-hlijst { display: grid; padding: 2px var(--pad) 8px; } .fin-freeze + .fin-hlijst { padding-top: 6px; } .fin-hlijst__knop { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; height: 30px; padding: 0 4px; border: 0; background: none; border-radius: 6px; font: 600 .74rem var(--font-ui); color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; } .fin-hlijst__knop:hover { background: var(--accent-t2); } .fin-hlijst__knop:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; } .fin-hlijst__knop .g { color: var(--ink2); text-align: center; } .fin-hlijst__knop kbd { font: .62rem var(--font-mono); color: var(--ink3); border: var(--lijndikte) solid var(--lijn); border-radius: 4px; padding: 0 4px; } .fin-hlijst__knop.is-gedaan { color: var(--goed); } .fin-freeze { margin: 6px var(--pad) 0; border-radius: var(--radius-klein); background: var(--stop-t); border: var(--lijndikte) solid var(--stop); font-size: .7rem; padding: 8px 10px; } .fin-plan { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px var(--pad) 8px; border-top: var(--lijndikte) solid var(--lijn); font-size: .66rem; color: var(--ink3); align-items: baseline; } .fin-plan .bs-kicker { width: 100%; } .fin-plan span b { color: var(--ink3); font-weight: 500; } .fin-plan span.is-klaar { color: var(--ink); } .fin-plan span.is-klaar b { color: var(--ink); font-weight: 700; } .fin-hist-kop { padding: 6px var(--pad) 0; border-top: var(--lijndikte) solid var(--lijn); } .fin-dossier .fin-hist { padding: 5px var(--pad); border-top: 0; font-size: .7rem; } .fin-dossier .fin-hist + .fin-hist { border-top: var(--lijndikte) solid var(--lijn); } /* kasstroom in woorden, met de vier weken op één regel */ .fin-kas__zin { margin: 0 0 6px; font-size: .74rem; color: var(--ink2); line-height: 1.45; } .fin-kas__zin b { color: var(--ink); font-family: var(--font-mono); font-weight: 700; } .fin-kas__weken { display: flex; gap: 10px; flex-wrap: wrap; } .fin-kas .fin-kasweek { display: inline-flex; gap: 5px; align-items: baseline; padding: 0; } .fin-kas .fin-kasweek > span { width: auto; font: 600 .62rem var(--font-mono); color: var(--ink3); } .fin-kas .fin-kasweek strong { width: auto; font-size: .72rem; } .fin-paneel--leeg { padding: 10px var(--pad); color: var(--ink2); font: 500 .74rem/1.5 var(--font-ui); } .fin-debrail .bs-audit, .fin-debrail .kaart { margin: 0; } /* zoekveld in de tabbalk */ .bs-tabbalk .fin-zoek { margin: 0; display: inline-flex; align-items: center; gap: 6px; height: 28px; border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein); padding: 0 8px; background: var(--kaart); color: var(--ink3); font-size: .72rem; } .bs-tabbalk .fin-zoek input { border: 0; background: none; padding: 0; min-width: 150px; font-size: .74rem; outline: none; } .bs-tabbalk .fin-zoek:focus-within { outline: 3px solid var(--accent); outline-offset: 1px; } @media (max-width: 1240px) { .fin-debgrid.es-lichaam { grid-template-columns: 1fr; } } /* ---- FD3/FD5 · vervolgfases en wat er loopt (11-10-2026) ---- */ .fin-plan span.is-nu { color: var(--let-d); } .fin-plan span.is-nu b { color: var(--let-d); font-weight: 700; } .fin-plan span.is-wacht { color: var(--stop-d); } .fin-lopend { margin: 6px var(--pad) 0; padding: 8px 10px; border: var(--lijndikte) solid var(--lijn); border-left-width: 3px; border-radius: var(--radius-klein); font-size: .68rem; } .fin-lopend.is-stop { border-left-color: var(--stop); background: var(--stop-t); } .fin-lopend.is-let { border-left-color: var(--let); background: var(--let-t); } .fin-lopend ul { margin: 4px 0; padding-left: 16px; } .fin-lopend small { color: var(--ink2); } .fin-hint { font-size: .7rem; color: var(--ink2); } /* ---- BR · betalingsregeling (11-10-2026) ---- */ .fin-regeling { margin: 6px var(--pad) 0; padding: 8px 10px; border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius-klein); font-size: .68rem; } .fin-regeling.is-gemist { border-color: var(--stop); } .fin-regeling__kop { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; } .fin-regeling__rij { display: flex; flex-wrap: wrap; gap: 4px 12px; } .fin-regeling__rij span { color: var(--ink3); } .fin-regeling__rij b { font-weight: 500; } .fin-regeling__rij .is-betaald { color: var(--goed-d); } .fin-regeling__rij .is-nu { color: var(--let-d); } .fin-regeling__rij .is-gemist { color: var(--stop-d); font-weight: 600; } .fin-regtabel { width: 100%; border-collapse: collapse; font-size: .72rem; } .fin-regtabel th, .fin-regtabel td { padding: 4px 6px; border-bottom: var(--lijndikte) solid var(--lijn); text-align: left; } .fin-regtabel .r { text-align: right; } .fin-regtabel tfoot td { font-weight: 700; border-bottom: 0; } /* EX (11-10) · de betaalstand uit het boekhoudpakket: de stip in de kopband is een knop, het paneel toont de koppeling */ .bs-kopband button.fin-koppeling { background: none; border: 0; padding: 2px 4px; margin: 0; font: inherit; cursor: pointer; border-radius: var(--radius-klein, 8px); } .bs-kopband button.fin-koppeling:hover strong { text-decoration: underline; } /* het paneel is lezen en een paar handelingen: één kolom, niet het tweekoloms formulierraster */ .bs-form.fin-exact-paneel { display: flex; flex-direction: column; gap: 10px; } .fin-exact-paneel p { margin: 0; line-height: 1.5; max-width: 68ch; } .fin-exact-stappen { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 8px; line-height: 1.5; } .fin-exact-paneel code { font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: .78rem; overflow-wrap: anywhere; } .fin-exact-dl { display: grid; gap: 6px; margin: 0; } .fin-exact-dl > div { display: grid; grid-template-columns: 170px 1fr; gap: 10px; align-items: baseline; } .fin-exact-dl dt { color: var(--ink2); font-size: .78rem; } .fin-exact-dl dd { margin: 0; } .fin-exact-h { font-size: .9rem; margin: 8px 0 0; } .fin-exact-ontkoppel { margin-top: 6px; display: grid; gap: 8px; justify-items: start; } .fin-exact-ontkoppel summary { cursor: pointer; color: var(--ink2); font-size: .8rem; } .fin-exact-paneel .fin-lopend { margin: 0; } .fin-exact-paneel .fin-regtabel td.r, .fin-exact-paneel .fin-regtabel th.r { white-space: nowrap; } @media (max-width: 560px) { .fin-exact-dl > div { grid-template-columns: 1fr; gap: 2px; } } /* ── finmgmt.css ── */ /* ===================================================================== finmgmt.css — Module 4.7 · Managementlaag (dashboard, marge, cashflow, budget). Tokens + bouwstenen; diepte via de vaste laag. ===================================================================== */ .mgmt { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; } .mgmt-kop__rij { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; } .mgmt-kop__titel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .mgmt-kop__titel h1 { margin: 0; font-size: 1.35rem; letter-spacing: -.01em; } .mgmt-sub { font-size: .8rem; color: var(--c-ink-3); margin: 5px 0 0; max-width: 70ch; } .mgmt-kop__rechts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .mgmt-tabs { display: inline-flex; gap: 3px; padding: 3px; border-radius: 10px; background: var(--c-paneel); } .mgmt-tabs--los { margin-bottom: 14px; } .mgmt-tab { padding: 7px 14px; border-radius: 8px; border: 0; cursor: pointer; font-family: var(--font-ui); font-size: .76rem; font-weight: 600; background: transparent; color: var(--c-ink-3); } .mgmt-tab.is-actief { background: var(--kaart); color: var(--c-ink); font-weight: 700; box-shadow: var(--schaduw-tegel); } .mgmt-tab--rand { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn-2); } .mgmt-tab--rand.is-actief { background: var(--c-groen); border-color: var(--c-groen); color: var(--knop-ink); } .mgmt-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .mgmt-chip { padding: 9px 15px; border-radius: 10px; border: 0; cursor: pointer; font-family: var(--font-ui); font-size: .78rem; font-weight: 600; background: var(--c-paneel); color: var(--c-ink-2); } .mgmt-chip.is-actief { background: var(--donker, var(--c-ink)); color: var(--knop-ink); font-weight: 700; } .mgmt-duo { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: start; } .mgmt-duo--marge { grid-template-columns: 1.55fr 1fr; } .mgmt-duo--cf { grid-template-columns: 1.5fr 1fr; } @media (max-width: 980px) { .mgmt-duo, .mgmt-duo--marge, .mgmt-duo--cf { grid-template-columns: 1fr; } } .mgmt-kolom { display: flex; flex-direction: column; gap: 16px; } .mgmt-kaart { padding: 18px 20px; } .mgmt-kaart--strak { padding: 4px 20px; } .mgmt-kaart__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 13px; } .mgmt-kaart__kop strong { font-size: .92rem; } .mgmt-leeg { display: grid; place-items: center; min-height: 180px; text-align: center; font-size: .82rem; color: var(--c-ink-2); line-height: 1.7; } .mgmt-groen { color: var(--c-groen-d); } .mgmt-rood { color: var(--c-rood); } .mgmt-amber { color: var(--c-amber); } .mgmt-stil { color: var(--c-ink-3); } .mgmt-recht { text-align: right; } .mgmt-kop { display: block; margin: 12px 0 7px; } /* P&L */ .mgmt-pnl { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; padding: 9px 16px; border-radius: 9px; font-size: .82rem; } .mgmt-pnl--top, .mgmt-pnl--kosten { border-bottom: var(--lijndikte) solid var(--c-lijn); border-radius: 0; } .mgmt-pnl--kosten .mgmt-pnl__val { color: var(--c-terra-d); } .mgmt-pnl--sub { background: var(--c-amber-t); font-weight: 700; padding: 13px 16px; } .mgmt-pnl--resultaat { background: var(--c-groen-t); font-weight: 800; color: var(--c-groen-d); padding: 13px 16px; } .mgmt-pnl__pct { min-width: 52px; text-align: right; font-weight: 700; font-size: .74rem; color: var(--c-amber); } .mgmt-pnl--resultaat .mgmt-pnl__pct, .mgmt-pnl--resultaat .mgmt-pnl__val { color: var(--c-groen-d); } .mgmt-pnl__val { text-align: right; font-weight: 700; } /* balkjes & splits */ .mgmt-split { margin-bottom: 13px; } .mgmt-split__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; font-size: .8rem; font-weight: 600; } .mgmt-split__rij { display: flex; align-items: center; gap: 10px; font-size: .7rem; } .mgmt-balk { flex: 1; height: 8px; border-radius: 99px; background: var(--c-paneel); overflow: hidden; } .mgmt-balk i { display: block; height: 100%; border-radius: 99px; background: var(--c-groen); } .mgmt-balk i.is-rood { background: var(--c-rood); } .mgmt-balk i.is-amber { background: var(--c-oker); } .mgmt-balk i.is-stil { background: var(--c-lijn-2); } .mgmt-balk--mini { width: 52px; flex: none; } /* marge-tabel */ .mgmt-margerij { display: grid; grid-template-columns: 1.5fr .95fr .8fr .7fr .9fr; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 16px; margin-bottom: 8px; border-radius: 11px; border: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); cursor: pointer; font-family: var(--font-ui); font-size: .78rem; transition: border-color var(--overgang); } .mgmt-margerij:hover { border-color: var(--c-lijn-2); } .mgmt-margerij.is-onder { border-color: var(--c-rood); background: var(--c-rood-t); } .mgmt-margerij.is-actief { border-color: var(--c-groen); } .mgmt-margerij--kop { border: 0; background: transparent; padding: 0 16px 6px; margin: 0; cursor: default; font-size: .56rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); } .mgmt-margerij strong { font-size: .82rem; } .mgmt-margerij i { display: block; font-style: normal; font-size: .64rem; font-weight: 700; margin-top: 2px; } .mgmt-margerij .mono i { font-weight: 400; color: var(--c-ink-3); } .mgmt-margerij b { font-size: .92rem; } .mgmt-margerij__meta { display: flex; align-items: center; gap: 6px; justify-content: flex-end; margin-top: 5px; } .mgmt-margerij__meta em { font-style: normal; font-size: .68rem; font-weight: 700; } /* drill-down */ .mgmt-drill { background: var(--donker, var(--c-ink)); border-radius: 16px; padding: 18px 19px; color: var(--knop-ink); } .mgmt-drill__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 13px; } .mgmt-drill__kop .kicker { color: rgba(255, 255, 255, .55); } .mgmt-drill__kop strong { display: block; font-size: 1rem; margin-top: 3px; } .mgmt-drill__x { border: 0; background: rgba(255, 255, 255, .12); color: var(--knop-ink); width: 26px; height: 26px; border-radius: 8px; cursor: pointer; flex: none; } .mgmt-drillrij { display: grid; grid-template-columns: 1.3fr .8fr .6fr .7fr; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 13px; margin-bottom: 7px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: var(--knop-ink); cursor: pointer; font-family: var(--font-ui); font-size: .74rem; } .mgmt-drillrij.is-actief { border-color: var(--c-oker); background: rgba(255, 255, 255, .12); } .mgmt-drillrij i { display: block; font-style: normal; font-size: .64rem; color: rgba(255, 255, 255, .55); } .mgmt-drillrij .mgmt-groen { color: var(--c-sage); } .mgmt-drillrij .mgmt-rood { color: #E8A9A0; } .mgmt-drillrij .mgmt-stil { color: rgba(255, 255, 255, .5); } .mgmt-orderdetail { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 12px; margin-top: 6px; display: flex; flex-direction: column; gap: 4px; } .mgmt-orderdetail .mgmt-kv { color: rgba(255, 255, 255, .8); } .mgmt-orderdetail .mgmt-kv b { color: var(--knop-ink); } .mgmt-orderdetail .mgmt-rood { color: #E8A9A0 !important; } .mgmt-orderdetail .mgmt-groen { color: var(--c-sage) !important; } .mgmt-orderdetail .btn { margin-top: 10px; align-self: flex-start; background: var(--kaart); } /* norm-beheer */ .mgmt-normrij { display: grid; grid-template-columns: 1.4fr auto auto 1fr; align-items: center; gap: 16px; padding: 13px 4px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .8rem; } .mgmt-normrij:first-child { border-top: 0; } .mgmt-normrij strong { display: block; } .mgmt-normrij .mgmt-stil { font-size: .66rem; } .mgmt-norm__invoer { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; color: var(--c-ink-2); } .mgmt-norm__invoer input { width: 64px; padding: 6px 8px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; font-family: var(--font-mono); font-size: .76rem; background: var(--kaart); color: var(--c-ink); } /* cashflow */ .mgmt-obligo { text-align: right; background: var(--kaart); border: var(--lijndikte) solid var(--c-oker); border-radius: 12px; padding: 11px 16px; } .mgmt-obligo .kicker { display: block; margin-bottom: 3px; } .mgmt-obligo b { display: block; font-size: 1.05rem; color: var(--c-amber); } .mgmt-obligo .mgmt-stil { font-size: .66rem; } .mgmt-waarschuwing { padding: 13px 16px; border-radius: 12px; background: var(--c-rood-t); border: var(--lijndikte) solid var(--c-rood); color: var(--c-rood); font-size: .8rem; font-weight: 600; margin-bottom: 16px; } .mgmt-cf { display: flex; align-items: flex-end; gap: 5px; } .mgmt-cf__kolom { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; border: 0; background: transparent; cursor: pointer; padding: 0; font-family: var(--font-ui); } .mgmt-cf__saldo { font-size: .58rem; font-weight: 600; color: var(--c-ink-3); } .mgmt-cf__kolom.is-actief .mgmt-cf__saldo { font-weight: 800; color: var(--c-ink); } .mgmt-cf__balkwrap { width: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 134px; } .mgmt-cf__balk { width: 100%; max-width: 30px; border-radius: 6px 6px 3px 3px; background: var(--c-sage); transition: height var(--overgang); } .mgmt-cf__balk.is-actief { background: var(--c-groen); } .mgmt-cf__balk.is-rood { background: var(--c-rood); } .mgmt-cf__wk { font-size: .6rem; color: var(--c-ink-3); } .mgmt-cf__kolom.is-actief .mgmt-cf__wk { color: var(--c-ink); font-weight: 700; } .mgmt-kv { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: .78rem; color: var(--c-ink-2); } .mgmt-kv b { font-size: .8rem; color: var(--c-ink); } .mgmt-kv--som { border-top: var(--lijndikte) solid var(--c-lijn); margin-top: 10px; padding-top: 12px; font-weight: 600; } .mgmt-kv--som b, .mgmt-kv--eind b { font-size: 1rem; } .mgmt-kv--eind { font-weight: 800; color: var(--c-ink); } /* budget */ .mgmt-budget { padding: 16px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); } .mgmt-budget:last-child { border-bottom: 0; } .mgmt-budget__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .mgmt-budget__kop strong { font-size: .84rem; } .mgmt-budget__meta { display: flex; align-items: center; gap: 12px; } .mgmt-budget__rij { display: grid; grid-template-columns: 62px 1fr 110px auto; align-items: center; gap: 10px; margin-bottom: 5px; } .mgmt-budget__rij > .mono:first-child { font-size: .62rem; color: var(--c-ink-3); } .mgmt-budget__rij b { font-size: .74rem; text-align: right; } .mgmt-illustratief { margin: 0 0 14px; padding: 9px 14px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 10px; background: var(--c-paneel); color: var(--c-ink-2); font: 500 .68rem var(--font-ui); } /* IN5 · de band boven de budgetlijst. Drie begrotingsregels hebben geen kostenplaats en dus geen realisatie; dat hoort op het scherm te staan, niet in een comment. `--let`, want het is een openstaand besluit en geen blokkade. */ .mgmt-band { margin: 14px 0 4px; padding: 12px 15px; border: var(--lijndikte) solid var(--let); border-radius: var(--radius); background: var(--let-t); font: 400 .74rem/1.6 var(--font-ui); color: var(--c-ink-2); } .mgmt-band strong { color: var(--c-ink); } /* ── facturatie.css ── */ /* ===================================================================== facturatie.css — module 4.2 · Facturatie klant + Warmtefonds (fac-) Uitsluitend tokens uit casa360-tokens.css; diepte via casa360-diepte. ===================================================================== */ /* Module-wortel: zelfde pagina-marge als de overige modules (fix 14-07-2026) */ .fac { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; } .fac-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; } .fac-kop h1 { margin: 2px 0 4px; font-size: 1.35rem; } .fac-kop p { margin: 0; font-size: .8rem; color: var(--c-ink-2); max-width: 78ch; } .fac-tabs { display: flex; gap: 6px; } .fac-tab { padding: 8px 14px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius-klein); background: var(--c-creme); color: var(--c-ink-2); font: 600 .72rem var(--font-ui); cursor: pointer; } .fac-tab.is-actief { background: var(--donker, var(--c-ink)); border-color: var(--donker, var(--c-ink)); color: var(--donker-ink, var(--c-creme)); } /* ---- Warmtefonds-strook: altijd in beeld, klikbaar naar finwf ---- */ .fac-wfbalk { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; padding: 11px 16px; border: var(--lijndikte) solid var(--c-amber); border-radius: var(--radius); background: var(--c-amber-t); text-decoration: none; color: inherit; box-shadow: var(--schaduw-tegel); } .fac-wfbalk:hover { box-shadow: var(--schaduw-tegel-hover); } .fac-wfbalk.is-hier { cursor: default; } .fac-wfbalk__merk { display: flex; flex-direction: column; min-width: 220px; } .fac-wfbalk__merk i { display: none; } .fac-wfbalk__merk strong { font: 700 .8rem var(--font-ui); color: var(--c-amber); } .fac-wfbalk__merk em { font: 500 .62rem var(--font-ui); font-style: normal; color: var(--c-ink-2); } .fac-wfbalk__cel { display: flex; flex-direction: column; } .fac-wfbalk__cel span { font: 500 .6rem var(--font-ui); color: var(--c-ink-2); } .fac-wfbalk__cel strong { font: 700 .78rem var(--font-mono); color: var(--c-ink); } .fac-wfbalk__cel.is-rood strong { color: var(--c-rood); } .fac-wfbalk__pijl { margin-left: auto; font: 600 .68rem var(--font-ui); color: var(--c-amber); } /* ---- mijlpaal-werkvoorraad ---- */ .fac-mijlpalen { padding: 0; overflow: hidden; } .fac-mijlpaal { display: grid; grid-template-columns: 14px 1.5fr 1fr auto; gap: 14px; align-items: center; padding: 12px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .fac-mijlpaal:last-child { border-bottom: 0; } .fac-mijlpaal__dot { width: 9px; height: 9px; border-radius: 50%; } .fac-mijlpaal__dot.is-groen { background: var(--c-groen); } .fac-mijlpaal__dot.is-rood { background: var(--c-rood); } .fac-mijlpaal__wat { display: flex; flex-direction: column; } .fac-mijlpaal__wat strong { font: 600 .76rem var(--font-ui); } .fac-mijlpaal__wat span { font: 500 .66rem var(--font-ui); color: var(--c-ink-2); } .fac-mijlpaal__termijn { font: 600 .7rem var(--font-ui); color: var(--c-groen-d); } .fac-poortchip { font: 600 .64rem var(--font-ui); color: var(--c-rood); background: var(--c-rood-t); padding: 5px 10px; border-radius: var(--radius-pill); } /* ---- filters + facturenlijst ---- Eén filterlat: statuspills links, filter/export rechts. De acties stonden eerder ín de pill-groep, waardoor de pills meerekten met de knophoogte. */ .fac-flts { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; } .fac-flts__set { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .fac-flts__acties { display: flex; align-items: center; gap: 8px; margin-left: auto; } .fac-flts__acties .btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; font-size: .72rem; } .fac-flt { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius-klein); background: var(--kaart); color: var(--c-ink-2); font: 700 .7rem var(--font-ui); cursor: pointer; } .fac-flt strong { font: 700 .68rem var(--font-mono); color: var(--c-ink-3); } .fac-flt:hover { background: var(--c-creme); color: var(--c-ink); } .fac-flt.is-actief { background: var(--c-groen-t); border-color: var(--c-groen); color: var(--c-groen-d); } .fac-flt.is-actief strong { color: var(--c-groen-d); } .fac-flt--los { margin-left: 8px; } .kaart--strak { padding: 0; overflow: hidden; } .fac-rij { display: grid; grid-template-columns: 30px 96px 1.3fr 1.1fr 96px 150px 110px 120px; gap: 10px; align-items: center; padding: 11px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); cursor: pointer; } .fac-rij:last-child { border-bottom: 0; } .fac-rij:hover { background: var(--c-creme); } .fac-rij.is-open { background: var(--c-groen-t); } .fac-rij--kop { cursor: default; font: 600 .58rem var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); background: var(--c-paneel); } .fac-rij--kop:hover { background: var(--c-paneel); } .fac-vink { width: 18px; height: 18px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 5px; background: var(--c-creme); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .fac-vink.is-aan { background: var(--c-groen); border-color: var(--c-groen); } .fac-rij__nr { font: 600 .7rem var(--font-mono); color: var(--c-groen-d); } .fac-rij__klant { display: flex; flex-direction: column; } .fac-rij__klant strong { font: 600 .76rem var(--font-ui); } .fac-rij__klant span { font: 500 .62rem var(--font-mono); color: var(--c-ink-3); } .fac-rij__type { font: 500 .68rem var(--font-ui); color: var(--c-ink-2); } .fac-rij__tot { font-size: .78rem; } .fac-rij__kanalen { font-size: .62rem; color: var(--c-ink-2); } .fac-rij__st { justify-self: end; } /* ---- editor ---- */ .fac-editor { padding: 16px 18px; } .fac-editor__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .fac-editor__kop strong.mono { font-size: .9rem; } .fac-editor__acties { display: flex; gap: 8px; flex-wrap: wrap; } .fac-artikelkeuze { display: flex; gap: 8px; margin-bottom: 12px; padding: 10px; border: var(--lijndikte) dashed var(--c-lijn-2); border-radius: var(--radius); background: var(--c-creme); } .fac-artikelkeuze select { flex: 1; } .fac-artikelkeuze input { width: 84px; } .fac-regel { display: grid; grid-template-columns: 1fr auto 120px 30px; gap: 12px; align-items: center; padding: 9px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); } .fac-regel__wat { display: flex; flex-direction: column; } .fac-regel__wat strong { font: 600 .74rem var(--font-ui); } .fac-regel__wat span { font: 500 .62rem var(--font-mono); color: var(--c-ink-3); } .fac-regel__aantal { width: 76px; } .fac-regel__weg { border: 0; background: none; color: var(--c-rood); font-size: .8rem; cursor: pointer; } .fac-totalen { max-width: 340px; margin-left: auto; margin-top: 12px; display: flex; flex-direction: column; gap: 5px; } .fac-totalen > div { display: flex; justify-content: space-between; gap: 16px; font: 600 .74rem var(--font-ui); } .fac-totalen > div.is-stil { font-weight: 500; color: var(--c-ink-2); } .fac-totalen > div.is-eind { border-top: var(--lijndikte) solid var(--c-lijn-2); padding-top: 7px; font-size: .84rem; } .fac-betaalinfo { margin-top: 16px; padding: 13px 15px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: var(--c-creme); } .fac-betaalinfo__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 9px; } .fac-betaalinfo__grid > div { display: flex; flex-direction: column; gap: 2px; } .fac-betaalinfo__grid strong { font: 700 .72rem var(--font-ui); } .fac-betaalinfo__grid span { font: 500 .64rem var(--font-mono); color: var(--c-ink-2); } .fac-betaalinfo__grid em { font: 500 .62rem var(--font-ui); font-style: normal; color: var(--c-ink-3); } .fac-betaalinfo__grid > div.is-wf { padding: 8px 10px; border-radius: 10px; background: var(--c-amber-t); } .fac-betaalinfo__voldaan { margin-top: 10px; font: 600 .72rem var(--font-ui); color: var(--c-groen-d); } .fac-verstuurinfo { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 4px; font: 500 .7rem var(--font-ui); color: var(--c-ink-2); } .fac-hint { font: 500 .64rem var(--font-ui); color: var(--c-ink-3); margin-right: auto; } /* ---- knoppen ---- */ .fac-knop { padding: 8px 13px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 10px; background: var(--c-creme); color: var(--c-ink); font: 600 .7rem var(--font-ui); cursor: pointer; } .fac-knop--primair { background: var(--gradient-primair); border-color: var(--c-groen-d); color: var(--knop-ink); box-shadow: var(--schaduw-knop); } .fac-knop--primair:hover { background: var(--gradient-primair-hover); } .fac-knop--rood { background: var(--c-rood); border-color: var(--c-rood); color: var(--knop-ink); } .fac-knop--dicht { background: var(--c-paneel); color: var(--c-ink-3); cursor: not-allowed; } /* ---- termijnen & poorten ---- */ .fac-tweekolom { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; align-items: start; } .fac-schema { padding: 14px 18px; } .fac-schema p { margin: 0 0 10px; font: 500 .7rem var(--font-ui); color: var(--c-ink-2); } .fac-termijn { display: grid; grid-template-columns: 56px 1fr 90px auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); } .fac-termijn:last-of-type { border-bottom: 0; } .fac-termijn__pct { font-size: .92rem; color: var(--c-groen-d); } .fac-termijn div { display: flex; flex-direction: column; } .fac-termijn div strong { font: 600 .74rem var(--font-ui); } .fac-termijn div span { font: 500 .62rem var(--font-ui); color: var(--c-ink-3); } .fac-schema__som { margin-top: 10px; font-size: .66rem; color: var(--c-ink-2); } .fac-iso { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; } .fac-iso > strong { font-size: 1.5rem; color: var(--c-groen-d); } .fac-iso div { display: flex; flex-direction: column; gap: 3px; } .fac-iso div strong { font: 700 .76rem var(--font-ui); } .fac-iso div span { font: 500 .66rem var(--font-ui); color: var(--c-ink-2); } .fac-poortkaart { padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; } .fac-poortkaart em { font: 500 .64rem var(--font-ui); font-style: normal; color: var(--c-ink-3); } .fac-poortkaart__acties { display: flex; gap: 8px; flex-wrap: wrap; } .fac-liq { padding: 14px 18px; } .fac-liq__rij { display: grid; grid-template-columns: 48px 1.2fr 1fr 90px; gap: 10px; align-items: center; padding: 7px 0; font: 500 .7rem var(--font-ui); } .fac-liq__balk { height: 8px; border-radius: var(--radius-pill); background: var(--c-paneel); overflow: hidden; } .fac-liq__balk i { display: block; height: 100%; border-radius: var(--radius-pill); } .fac-liq__balk i.is-in { background: var(--c-groen); } .fac-liq__balk i.is-uit { background: var(--c-terra); } .fac-liq__waarschuwing { margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: var(--c-amber-t); color: var(--c-amber); font: 600 .68rem var(--font-ui); } /* ---- betalingen & reconciliatie ---- */ .fac-betaling { display: grid; grid-template-columns: 110px 92px 1.5fr 60px 100px auto; gap: 12px; align-items: center; padding: 11px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); font: 500 .72rem var(--font-ui); } .fac-betaling:last-child { border-bottom: 0; } .fac-betaling__oms { color: var(--c-ink-2); } /* ---- warmtefonds-scherm ---- */ .fac-wfpijp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 18px; } .fac-wfstap { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 108px; padding: 9px 12px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: var(--c-creme); } .fac-wfstap span { font: 600 .62rem var(--font-ui); color: var(--c-ink-2); text-align: center; } .fac-wfstap strong { font: 700 .9rem var(--font-mono); } .fac-wfstap.heeft-dossiers { border-color: var(--c-amber); background: var(--c-amber-t); } .fac-wfstap.is-rood { border-color: var(--c-rood); background: var(--c-rood-t); } .fac-wfstap.is-rood strong { color: var(--c-rood); } .fac-wfstap__pijl { color: var(--c-ink-3); font-size: .8rem; } .fac-wfgrid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0 22px; align-items: start; } /* vaste statuskolom: met «auto» versprong hij per rij, want elke rij is een eigen raster */ .fac-wfrij { display: grid; grid-template-columns: 92px minmax(0, 1.2fr) minmax(0, 1fr) 150px minmax(0, .6fr); gap: 12px; align-items: center; padding: 11px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); cursor: pointer; } .fac-wfrij:last-child { border-bottom: 0; } .fac-wfrij:hover { background: var(--c-creme); } .fac-wfrij.is-open { background: var(--c-amber-t); } .fac-wfrij__id { font: 600 .66rem var(--font-mono); color: var(--c-amber); } .fac-wfrij div { display: flex; flex-direction: column; } .fac-wfrij div strong { font: 600 .74rem var(--font-ui); } .fac-wfrij div span { font: 500 .62rem var(--font-mono); color: var(--c-ink-3); } .fac-wfrij__bedrag span { font-family: var(--font-ui); } .fac-wfrij__meta { font-size: .62rem; color: var(--c-ink-2); } .fac-wfpaneel { padding: 16px 18px; display: flex; flex-direction: column; gap: 11px; } .fac-wfpaneel__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .fac-wfpaneel__kop strong { font: 700 .9rem var(--font-ui); display: block; margin-top: 2px; } .fac-wfpaneel p { margin: 0; font: 500 .72rem var(--font-ui); color: var(--c-ink-2); } .fac-wfpaneel__cijfers { display: flex; gap: 16px; flex-wrap: wrap; font-size: .64rem; color: var(--c-ink-2); } .fac-wfpaneel__cijfers strong { color: var(--c-ink); } .fac-wfpaneel__acties { display: flex; gap: 8px; flex-wrap: wrap; } @media (max-width: 1100px) { .fac-tweekolom, .fac-wfgrid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: no-preference) { .fac-knop, .fac-tab, .fac-flt, .fac-wfbalk { transition: background .16s ease, box-shadow .16s ease, color .16s ease; } } /* B3c · termijnplan uit de backend + schema-editor */ .fac-termijn--schema { grid-template-columns: 56px 1fr auto; } .fac-termijn--b3c { grid-template-columns: 56px 1fr 90px auto auto; } .fac-b3c-editor { padding: 4px 2px 10px; } .fac-b3c-rij { display: grid; grid-template-columns: 1fr 64px 150px 150px 28px; gap: 8px; align-items: center; padding: 4px 0; } .fac-b3c-rij input, .fac-b3c-rij select { font: 500 .7rem var(--font-ui); padding: 7px 9px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 8px; background: var(--c-paneel); color: var(--c-ink); } .fac-b3c-rij input.mono { font-family: var(--font-mono); } .fac-b3c-rij--kop { padding-bottom: 2px; } .fac-b3c-rij--kop span { font: 700 .58rem var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); } /* De factureerbare stapel als werkbank (FT-4.2): zoeken, filteren, pagineren en een selectie in één keer wegwerken. */ .fac-stapelbalk { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 12px 0; } .fac-zoekveld { flex: 1; min-width: 210px; max-width: 420px; height: 30px; font: 400 .76rem var(--font-ui); color: var(--c-ink); padding: 0 12px; border-radius: var(--radius); background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn-2); } /* (de tweede .fac-flt-definitie is vervallen — hij overschreef de eerste half en gaf twee verschillende pill-maten op hetzelfde scherm) */ .fac-stapelstand { font-size: .68rem; color: var(--c-ink-3); margin-left: auto; } .fac-bulk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 14px; border-radius: var(--radius); background: var(--c-groen-t); margin-bottom: 8px; font-size: .78rem; } .fac-bulk > div { flex: 1; min-width: 200px; } .fac-bulk strong { font-size: .95rem; } .fac-kies { display: flex; align-items: center; } .fac-mijlpaal.is-gekozen { background: var(--c-groen-t); } .fac-pagineer { display: flex; gap: 8px; justify-content: center; padding: 12px 0 4px; } /* ═══ F1 · tab «Na oplevering» ════════════════════════════════════════ Werk dat af is en waar het geld stilstaat. Drie kolommen: wie, hoeveel, en wat er moet gebeuren — die laatste is waarom het scherm bestaat. */ .fac-naoprij { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.6fr); gap: 14px; align-items: center; padding: 12px 14px; border-bottom: var(--lijndikte) solid var(--lijn); } .fac-naoprij:last-child { border-bottom: 0; } .fac-naoprij__wie strong, .fac-naoprij__geld strong { display: block; } .fac-naoprij__wie span, .fac-naoprij__geld span { display: block; font-size: .72rem; color: var(--ink2); } .fac-naoprij__geld { text-align: right; } .fac-naoprij__actie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .fac-naoprij__uitleg { font-size: .72rem; color: var(--ink2); flex: 1 1 100%; text-align: right; } .fac-naopnoot { margin-top: 10px; font-size: .74rem; color: var(--ink2); } @media (max-width: 860px) { .fac-naoprij { grid-template-columns: 1fr; } .fac-naoprij__geld, .fac-naoprij__actie, .fac-naoprij__uitleg { text-align: left; justify-content: flex-start; } } /* FA1/FA2 · checks, batchlijst */ .fac-checks { display: grid; gap: 4px; margin-bottom: 10px; } .fac-check { display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: start; padding: 5px 0; border-bottom: 1px solid var(--lijn); font-size: 13px; } .fac-check i { font-style: normal; text-align: center; color: var(--ink2); } .fac-check.is-ok i { color: var(--goed); } .fac-check.is-stop i { color: var(--stop); } .fac-check.is-let i { color: var(--let); } .fac-check span { display: grid; } .fac-check small { color: var(--ink2); font-size: 11.5px; } .fac-hint { color: var(--ink2); font-size: 12.5px; margin: 4px 0 8px; } .fac-batchlijst { display: grid; gap: 4px; max-height: 50vh; overflow: auto; } .fac-batchrij { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--lijn); font-size: 13px; } .fac-batchrij span { display: grid; } .fac-batchrij small { color: var(--ink2); font-size: 11.5px; } .fac-batchrij.is-blok { opacity: .6; } .fac-batchrij label { font-size: 12px; white-space: nowrap; } .fac-batchhist { margin-top: 10px; display: grid; gap: 2px; } .fac-batchhistrij { font-size: 11.5px; color: var(--ink2); } /* de batchdialoog vraagt ruimte: nummer, klant en drie kanaalvinkjes naast elkaar */ .bs-modal:has(.fac-batchlijst) { width: min(760px, 94vw); max-width: none; } .fac-batchlijst { min-width: 0; } .fac-batchrij span { min-width: 0; } .fac-batchrij b.mono { margin-right: 6px; } /* ---- VF3 · vrije factuur en creditnota (11-10-2026) — nieuwe regels op de v3-tokens ---- */ .fac-vf-info { display: grid; gap: 4px; margin: 0 0 12px; padding: 10px 12px; border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius-klein); font-size: .74rem; color: var(--ink2); } .fac-vf-info b { color: var(--ink); } .fac-vf-let { color: var(--let-d); } .fac-vf-link { padding: 0; border: 0; background: none; color: var(--ink); text-decoration: underline; cursor: pointer; font-size: inherit; } .fac-vf-rij { display: grid; grid-template-columns: minmax(0, 1fr) 150px 52px 110px; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: var(--lijndikte) solid var(--lijn); font-size: .76rem; } .fac-vf-rij > :nth-child(n+2) { text-align: right; } .fac-vf-rij--kop { font-size: .62rem; color: var(--ink3); text-transform: uppercase; letter-spacing: .04em; padding-top: 0; } .fac-vf-rij__oms { display: flex; flex-direction: column; min-width: 0; } .fac-vf-rij__oms small { color: var(--ink3); font-size: .62rem; } .fac-vf-credits { display: grid; gap: 6px; margin-top: 14px; } .fac-vf-credit { display: grid; grid-template-columns: 110px minmax(0, 1fr) 100px auto; gap: 10px; align-items: center; padding: 8px 10px; border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius-klein); background: var(--kaart); color: var(--ink); text-align: left; font-size: .72rem; cursor: pointer; } .fac-vf-credit:hover { border-color: var(--lijn2); } .fac-vf-regels { display: grid; gap: 8px; } .fac-vf-regels__kop { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: .74rem; } .fac-vf-stand { display: inline-flex; gap: 6px; align-items: center; font-weight: 500; color: var(--ink2); white-space: nowrap; } .fac-vf-invoer { display: grid; grid-template-columns: 70px 110px minmax(0, 1fr) 120px 30px; gap: 6px 8px; align-items: end; padding-bottom: 8px; border-bottom: var(--lijndikte) solid var(--lijn); } .fac-vf-invoer > label:first-child { grid-column: 1 / -1; } .fac-vf-arbeid.is-uit { visibility: hidden; } .fac-vf-rij__split { grid-column: 1 / -1; margin-top: -4px; color: var(--ink3); font-size: .64rem; text-align: left !important; } .fac-vf-invoer label { display: flex; flex-direction: column; gap: 3px; font-size: .62rem; color: var(--ink2); min-width: 0; } .fac-vf-invoer input, .fac-vf-invoer select { width: 100%; box-sizing: border-box; } .fac-vf-cregels { display: grid; gap: 6px; } .fac-vf-cregel { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 12px; align-items: end; padding: 6px 0; border-bottom: var(--lijndikte) solid var(--lijn); } .fac-vf-cregel > span { display: flex; flex-direction: column; font-size: .74rem; min-width: 0; } .fac-vf-cregel small { color: var(--ink3); font-size: .62rem; } .fac-vf-cregel label { display: flex; flex-direction: column; gap: 3px; font-size: .62rem; color: var(--ink2); } @media (max-width: 640px) { .fac-vf-rij { grid-template-columns: minmax(0, 1fr) 90px; } .fac-vf-rij > :nth-child(2), .fac-vf-rij > :nth-child(3) { display: none; } .fac-vf-invoer { grid-template-columns: 1fr 1fr; } .fac-vf-invoer > button { grid-column: 2; justify-self: end; } .fac-vf-credit { grid-template-columns: 1fr auto; } } .bs-form > .fac-totalen, .bs-form > .fac-hint { grid-column: 1 / -1; } /* ---- FD3/FD5 · vervolgfases en on hold (11-10-2026) — kleur is betekenis: stop = vast, let = let op, goed = gedaan ---- */ .fac-vf-hold { margin: 0 0 12px; padding: 10px 12px; border: var(--lijndikte) solid var(--lijn); border-left-width: 3px; border-radius: var(--radius-klein); font-size: .74rem; } .fac-vf-hold.is-stop { border-left-color: var(--stop); background: var(--stop-t); } .fac-vf-hold.is-let { border-left-color: var(--let); background: var(--let-t); } .fac-vf-hold ul { margin: 6px 0 4px; padding-left: 18px; } .fac-vf-hold small { color: var(--ink2); } .fac-vf-fases { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 6px; margin: 0 0 8px; } .fac-vf-fase { display: flex; gap: 6px; align-items: flex-start; padding: 7px 8px; border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius-klein); font-size: .68rem; min-width: 0; } .fac-vf-fase i { font-style: normal; color: var(--ink3); } .fac-vf-fase span { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; } .fac-vf-fase small { color: var(--ink3); font-size: .6rem; } .fac-vf-fase.is-gedaan i { color: var(--goed); } .fac-vf-fase.is-nu { border-color: var(--let); } .fac-vf-fase.is-nu i { color: var(--let); } .fac-vf-fase.is-wacht { border-color: var(--stop); } .fac-vf-fase.is-wacht i { color: var(--stop); } .fac-hint--klein { font-size: .62rem; color: var(--ink3); } .fac-vf-zending { display: flex; gap: 16px; flex-wrap: wrap; } .fac-vf-zending > div { display: flex; flex-direction: column; gap: 2px; font-size: .72rem; } .fac-vf-zending small { color: var(--ink3); font-size: .62rem; } .fac-batchbalk { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-size: .7rem; } .fac-batchbalk__knoppen { display: flex; gap: 6px; flex-wrap: wrap; } /* ── sbcred.css ── */ /* ===================================================================== sbcred.css — module 4.3 · Self-billing + Inkoop & crediteuren (sb-) Uitsluitend tokens uit casa360-tokens.css; diepte via casa360-diepte. ===================================================================== */ /* Module-wortel: zelfde pagina-marge als de overige modules (fix 14-07-2026) */ .sb { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; } .sb-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; } .sb-kop h1 { margin: 2px 0 4px; font-size: 1.35rem; } .sb-kop p { margin: 0; font-size: .8rem; color: var(--c-ink-2); max-width: 76ch; } .sb-knop { padding: 8px 13px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 10px; background: var(--c-creme); color: var(--c-ink); font: 600 .7rem var(--font-ui); cursor: pointer; } .sb-knop--primair { background: var(--gradient-primair); border-color: var(--c-groen-d); color: var(--knop-ink); box-shadow: var(--schaduw-knop); } .sb-knop--primair:hover { background: var(--gradient-primair-hover); } .sb-knop--klein { padding: 5px 10px; font-size: .64rem; } .sb-knop--dicht { background: var(--c-paneel); color: var(--c-ink-3); cursor: not-allowed; } /* ---- self-billing tabel ---- */ .sb-rij { display: grid; grid-template-columns: 96px 1.4fr 66px 90px 130px 62px 66px 1.4fr; gap: 10px; align-items: center; padding: 11px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .sb-rij:last-child { border-bottom: 0; } .sb-rij.is-blok { background: var(--c-rood-t); } .sb-rij--kop { font: 600 .58rem var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); background: var(--c-paneel); } .sb-rij__nr { font: 600 .68rem var(--font-mono); color: var(--c-groen-d); } .sb-rij__wie { display: flex; flex-direction: column; } .sb-rij__wie strong { font: 600 .76rem var(--font-ui); } .sb-rij__wie span { font: 500 .64rem var(--font-ui); color: var(--c-ink-2); } .sb-rij__wb { font-size: .64rem; color: var(--c-ink-3); } .sb-rij__g { font-size: .64rem; color: var(--c-amber); } .sb-rij__st { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .sb-rij__detail { font-size: .6rem; color: var(--c-ink-3); } .sb-poortje { font: 700 .62rem var(--font-mono); padding: 3px 8px; border-radius: var(--radius-pill); text-align: center; } .sb-poortje.is-ok { background: var(--c-groen-t); color: var(--c-groen-d); } .sb-poortje.is-fout { background: var(--c-rood-t); color: var(--c-rood); } /* ---- matching eigen facturen ---- */ .sb-match { display: grid; grid-template-columns: 1.4fr 100px 110px 1.6fr; gap: 12px; align-items: center; padding: 11px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .sb-match:last-child { border-bottom: 0; } .sb-match > div { display: flex; flex-direction: column; } .sb-match strong { font: 600 .76rem var(--font-ui); } .sb-match > div span { font: 500 .62rem var(--font-mono); color: var(--c-ink-3); } .sb-match__norm { font-size: .64rem; color: var(--c-ink-2); } .sb-match__acties { display: inline-flex; gap: 6px; margin-left: 8px; } /* ---- crediteuren ---- */ .sb-aprij { display: grid; grid-template-columns: 1.3fr 100px 110px 1.5fr 1.3fr; gap: 12px; align-items: center; padding: 11px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .sb-aprij:last-child { border-bottom: 0; } .sb-aprij.is-blok { background: var(--c-rood-t); } .sb-aprij--kop { font: 600 .58rem var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); background: var(--c-paneel); } .sb-koppeling { font-size: .62rem; color: var(--c-ink-2); display: flex; flex-direction: column; } .sb-koppeling em { font-style: normal; color: var(--c-amber); } .is-urgent { color: var(--c-terra); font-weight: 700; } .is-laat { color: var(--c-rood); font-weight: 700; } /* ---- crediteuren op echte data (FT-4.4): zoek/filter-balk, matchvlag, melding & paginering. Alleen tokens, geen losse kleurwaarden. ---- */ .sb-credbalk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; } .sb-credbalk > label.kicker { margin-right: 2px; } .sb-zoekveld { flex: 1 1 260px; min-width: 200px; padding: 8px 12px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 10px; background: var(--c-creme); color: var(--c-ink); font: 500 .74rem var(--font-ui); } .sb-zoekveld:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; border-color: var(--c-groen-d); } .sb-flt { padding: 6px 12px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius-klein); background: var(--c-creme); color: var(--c-ink-2); font: 600 .66rem var(--font-ui); cursor: pointer; } .sb-flt:hover { border-color: var(--c-groen-d); } .sb-flt.is-actief { background: var(--c-groen-t); border-color: var(--c-groen-d); color: var(--c-groen-d); } .sb-flt:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; } .sb-credstand { margin-left: auto; font-size: .64rem; color: var(--c-ink-3); } .sb-credmelding { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 14px; border: var(--lijndikte) solid var(--c-amber); border-radius: 10px; background: var(--c-amber-t); color: var(--c-ink); font: 500 .72rem var(--font-ui); } .sb-mvlag { font: 700 .6rem var(--font-mono); padding: 2px 7px; border-radius: var(--radius-pill); width: fit-content; } .sb-mvlag--match { background: var(--c-groen-t); color: var(--c-groen-d); } .sb-mvlag--mismatch { background: var(--c-rood-t); color: var(--c-rood); } .sb-mvlag--wacht-ontvangst { background: var(--c-paneel); color: var(--c-ink-2); } .sb-mvlag--alleen-opdracht, .sb-mvlag--ongekoppeld { background: var(--c-amber-t); color: var(--c-amber); } .sb-credpag { display: flex; gap: 8px; justify-content: center; margin: 12px 0 0; } .sb-credpag .sb-knop[disabled] { opacity: .4; cursor: not-allowed; } .sb-tweekolom { display: grid; grid-template-columns: 1fr 1.4fr; gap: 0 22px; align-items: start; } .sb-agingkaart { padding: 8px 16px; } .sb-aging { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); font: 600 .74rem var(--font-ui); } .sb-aging:last-child { border-bottom: 0; } .sb-aging em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); } .sb-correctie { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 11px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .sb-correctie:last-child { border-bottom: 0; } .sb-correctie div { display: flex; flex-direction: column; } .sb-correctie strong { font: 600 .74rem var(--font-ui); } .sb-correctie div span { font: 500 .62rem var(--font-mono); color: var(--c-ink-3); } .sb-correctie .is-min { color: var(--c-rood); } /* ---- betaalbatch ---- */ .sb-batch { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; } .sb-batch__stappen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sb-stap { display: flex; align-items: center; gap: 9px; padding: 8px 13px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); background: var(--c-creme); } .sb-stap i { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 .66rem var(--font-mono); font-style: normal; background: var(--c-paneel); color: var(--c-ink-2); } .sb-stap.is-klaar i { background: var(--c-groen); color: var(--knop-ink); } .sb-stap.is-nu { border-color: var(--c-ink); } .sb-stap.is-nu i { background: var(--donker, var(--c-ink)); color: var(--c-creme); } .sb-stap div { display: flex; flex-direction: column; } .sb-stap strong { font: 700 .7rem var(--font-ui); } .sb-stap span { font: 500 .6rem var(--font-ui); color: var(--c-ink-3); } .sb-stap__pijl { color: var(--c-ink-3); } .sb-batch__cijfers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .sb-batch__cijfers > div { display: flex; flex-direction: column; padding: 10px 13px; border-radius: 12px; background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); } .sb-batch__cijfers span { font: 500 .62rem var(--font-ui); color: var(--c-ink-2); } .sb-batch__cijfers strong { font: 700 .9rem var(--font-mono); } .sb-batch__cijfers > div.is-g { background: var(--c-amber-t); border-color: var(--c-amber); } .sb-batch__cijfers > div.is-g strong { color: var(--c-amber); } .sb-batchregel { display: grid; grid-template-columns: 110px 1.2fr 90px 110px 100px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); font: 500 .7rem var(--font-ui); } .sb-batchregel:last-child { border-bottom: 0; } .sb-batch__voet { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .sb-rollen { display: flex; align-items: center; gap: 7px; font: 500 .68rem var(--font-ui); color: var(--c-ink-2); } .sb-rol { padding: 6px 12px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius-klein); background: var(--c-creme); font: 600 .66rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; } .sb-rol.is-actief { background: var(--c-groen-t); border-color: var(--c-groen); color: var(--c-groen-d); } .sb-batch__acties { display: flex; gap: 8px; } .sb-batch em { font: 500 .64rem var(--font-ui); font-style: normal; color: var(--c-ink-3); } /* ---- donkere uitleg-footer ---- */ .sb-footer { margin: 4px 0 18px; padding: 16px 20px; border-radius: var(--radius); background: var(--donker, var(--c-ink)); color: var(--c-creme); box-shadow: var(--schaduw-tegel); } .sb-footer .kicker { color: var(--c-paneel-2); opacity: .75; } .sb-footer p { margin: 7px 0 0; font: 400 .78rem/1.6 var(--font-ui); max-width: 88ch; opacity: .92; } .sb-footer strong { color: var(--knop-ink); } @media (max-width: 1100px) { .sb-tweekolom { grid-template-columns: 1fr; } .sb-batch__cijfers { grid-template-columns: repeat(2, 1fr); } } @media (prefers-reduced-motion: no-preference) { .sb-knop, .sb-rol { transition: background .16s ease, box-shadow .16s ease, color .16s ease; } } /* Inkoop-inbox + betaalbatch (15-07) */ .sb-inboxuitleg { font-size: 12.5px; color: var(--c-ink-2); margin: 4px 0 8px; } .sb-inboxrij { display: grid; grid-template-columns: 80px 1.6fr .8fr 1fr 1.4fr; gap: 12px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--c-lijn); font-size: 13px; } .sb-inboxrij:last-child { border-bottom: 0; } .sb-inboxrij.is-onduidelijk { background: color-mix(in srgb, var(--c-amber) 6%, transparent); } .sb-inboxreden { font-size: 11.5px; color: var(--c-amber); font-weight: 600; } .sb-batchrij { display: grid; grid-template-columns: auto 1.6fr .8fr .8fr 1fr; gap: 12px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--c-lijn); font-size: 13px; cursor: pointer; } .sb-batchvoet { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; font-size: 13px; } .sb-batchkaart { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .sb-batchkop { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } /* Inkoopfactuur-verwerking (spec 15-07) */ .sb-inboxrij { display: block; padding: 0; } .sb-inboxkop { display: grid; grid-template-columns: 76px auto 1.6fr .8fr auto; gap: 12px; align-items: center; width: 100%; border: 0; background: none; font: inherit; text-align: left; padding: 9px 14px; cursor: pointer; color: var(--c-ink); } .sb-inboxdetail { border-top: 1px dashed var(--c-lijn); padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; } .sb-inboxvelden { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 14px; } .sb-inboxveld { display: flex; flex-direction: column; gap: 1px; font-size: 12px; } .sb-ketenrij { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; } .sb-ketenrij i { color: var(--c-ink-3); font-style: normal; } .sb-ketenstap { border: 1px solid var(--c-lijn); border-radius: 99px; padding: 3px 10px; } .sb-checks { display: flex; flex-direction: column; gap: 4px; } .sb-check { display: flex; gap: 8px; font-size: 12.5px; align-items: baseline; } .sb-check i { font-style: normal; font-weight: 800; } .sb-check.is-ok i { color: var(--c-groen-d); } .sb-check.is-fout { color: var(--c-terra); font-weight: 600; } .sb-check.is-fout i { color: var(--c-rood); } .sb-boekklaar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--c-groen-d); } .sb-controle { border: 1px solid var(--c-amber); border-radius: 12px; padding: 9px 12px; font-size: 12.5px; color: var(--c-amber); } .sb-exactref { font-size: 10.5px; border: 1px solid var(--c-lijn); border-radius: 99px; padding: 1px 8px; color: var(--c-ink-2); } /* ---- B3a · rapportage & dashboard ---- */ .sb-rapport { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; } .sb-rapgrid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; } .sb-rapgrid .kicker { display: block; margin-bottom: 8px; } .sb-raprij { display: grid; grid-template-columns: 130px 1fr 90px; gap: 10px; align-items: center; padding: 5px 0; font: 500 .7rem var(--font-ui); } .sb-raprij i { display: block; height: 8px; border-radius: var(--radius-pill); background: var(--c-paneel); overflow: hidden; } .sb-raprij i b { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--c-groen); } .sb-raprij strong { text-align: right; } .sb-rapport > em { font: 500 .64rem var(--font-ui); font-style: normal; color: var(--c-ink-3); } .sb-boekregel { display: grid; grid-template-columns: 2fr 70px 90px 90px 1fr; gap: 8px; margin-top: 8px; padding: 8px 10px; border: var(--lijndikte) dashed var(--c-lijn-2); border-radius: 10px; } @media (max-width: 1100px) { .sb-rapgrid, .sb-boekregel { grid-template-columns: 1fr; } } /* B3d · server-side betaalbatch: overgeslagen regels mét reden */ .sb-batch__overgeslagen { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: var(--lijndikte) solid var(--c-lijn); } .sb-batch__overgeslagen span { font: 500 .64rem var(--font-ui); color: var(--c-ink-2); } .sb-hint { font: 500 .62rem var(--font-ui); color: var(--c-ink-3); margin-right: auto; } /* ============ C+A · inkoopfactuur-invoer (16-07-2026) ============ */ .ci-slim { position: relative; margin: 4px 0 16px; } .ci-slim > input { width: 100%; box-sizing: border-box; border: 2px solid var(--c-groen-d); border-radius: 16px; padding: 15px 190px 15px 44px; font: inherit; font-size: 16px; background: var(--c-paneel); box-shadow: var(--schaduw-tegel); color: var(--c-ink); } .ci-slim::before { content: "⌕"; position: absolute; left: 17px; top: 15px; font-size: 19px; color: var(--c-groen-d); } .ci-slim__hint { position: absolute; right: 16px; top: 20px; font-size: 9.5px; color: var(--c-ink-2); } .ci-res { border: 1px solid var(--c-groen-d); border-radius: 12px; margin-top: 6px; overflow: hidden; box-shadow: var(--schaduw-tegel); } .ci-resrij { display: flex; gap: 12px; align-items: center; width: 100%; border: 0; border-top: 1px solid var(--c-lijn); background: var(--c-paneel); font: inherit; font-size: 13px; text-align: left; padding: 11px 16px; cursor: pointer; color: var(--c-ink); } .ci-resrij:first-child { border-top: 0; } .ci-resrij:hover { background: var(--c-creme); } .ci-resrij i { font-style: normal; width: 20px; text-align: center; color: var(--c-groen-d); } .ci-resrij em { display: block; font-style: normal; font-size: 11px; color: var(--c-ink-2); } .ci-resrij b { margin-left: auto; font-size: 10px; color: var(--c-ink-2); } .ci-resrij.is-leeg { color: var(--c-ink-2); cursor: default; font-size: 12px; } .ci-chip { font-family: var(--font-mono); font-size: 9.5px; border-radius: 99px; padding: 2px 8px; border: 1px solid var(--c-lijn); color: var(--c-ink-2); align-self: flex-start; } .ci-chip.groen { border-color: var(--c-groen); color: var(--c-groen-d); background: var(--c-groen-t); } .ci-chip.amber { border-color: var(--c-amber); color: var(--c-amber); } .ci-grid { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; } .ci-grid.heeft-doc { grid-template-columns: 380px 1fr 300px; } .ci-kies3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; } .ci-kies { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; position: relative; } .ci-kies strong { font-size: 13px; } .ci-kies em { font-style: normal; font-size: 11px; color: var(--c-ink-2); } .ci-ruil { position: absolute; top: 10px; right: 12px; border: 0; background: none; font: inherit; font-size: 11px; color: var(--c-groen-d); font-weight: 700; cursor: pointer; } .ci-leeg { font-size: 12px; color: var(--c-ink-2); padding: 8px 0; } .ci-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ci-duo label { display: flex; flex-direction: column; gap: 2px; font-size: 10px; font-weight: 700; color: var(--c-ink-2); } .ci-duo input, .ci-duo select { border: 1px solid var(--c-lijn); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 12px; background: var(--c-paneel); color: var(--c-ink); } .ci-regels { padding: 14px 16px; } .ci-regels table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .ci-regels th { text-align: left; font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-2); padding: 6px 8px; border-bottom: 1px solid var(--c-lijn); } .ci-regels td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--c-lijn); } .ci-regels input, .ci-regels select { border: 1px solid var(--c-lijn); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 12px; background: var(--c-paneel); width: 100%; box-sizing: border-box; color: var(--c-ink); } .ci-regels td:nth-child(2) { width: 150px; } .ci-regels td:nth-child(3) { width: 100px; } .ci-regels td:nth-child(4) { width: 84px; } .ci-regels td:nth-child(5) { width: 30px; } .ci-mini { border: 1px solid var(--c-lijn); border-radius: 8px; background: var(--c-paneel); font: inherit; font-size: 11px; padding: 4px 8px; cursor: pointer; color: var(--c-ink-2); } .ci-mini:hover { color: var(--c-rood); border-color: var(--c-rood); } .ci-plusregel { display: block; width: 100%; border: 1px dashed var(--c-lijn-2, var(--c-lijn)); border-radius: 10px; background: none; font: inherit; padding: 9px; font-size: 12px; color: var(--c-ink-2); font-weight: 700; margin-top: 10px; cursor: pointer; } .ci-plusregel:hover { color: var(--c-groen-d); border-color: var(--c-groen-d); } .ci-btwhint { font-size: 10.5px; color: var(--c-ink-2); margin-top: 8px; } .ci-link { border: 0; background: none; font: inherit; font-size: inherit; color: var(--c-groen-d); font-weight: 700; cursor: pointer; padding: 0; } .ci-zij { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 14px; } .ci-upload { border-style: dashed; padding: 14px; text-align: center; font-size: 12px; color: var(--c-ink-2); cursor: pointer; } .ci-upload b { display: block; font-size: 18px; color: var(--c-groen-d); } .ci-upload__mini { display: flex; gap: 8px; align-items: center; margin-top: 10px; text-align: left; border: 1px solid var(--c-lijn); border-radius: 8px; padding: 6px 9px; background: var(--c-paneel); } .ci-upload__mini i { font-style: normal; font-size: 9px; border: 1px solid var(--c-lijn); border-radius: 4px; padding: 4px 5px; } .ci-upload__mini em { display: block; font-style: normal; font-size: 10px; color: var(--c-ink-2); } .ci-totalen, .ci-checks { padding: 12px 16px; } .ci-totrij { display: flex; justify-content: space-between; font-size: 12.5px; padding: 4px 0; } .ci-totrij.groot { border-top: 1px solid var(--c-lijn); margin-top: 6px; padding-top: 9px; font-weight: 800; font-size: 14px; } .ci-check { display: flex; gap: 8px; align-items: center; font-size: 12px; padding: 3px 0; color: var(--c-ink-2); } .ci-check.is-ok { color: var(--c-ink); } .ci-check i { font-style: normal; color: var(--c-ink-2); } .ci-check.is-ok i { color: var(--c-groen-d); font-weight: 800; } .ci-breed { width: 100%; box-sizing: border-box; } .ci-idnoot { font-size: 9px; color: var(--c-ink-2); text-align: center; } .ci-doc { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .ci-doc__kop { display: flex; justify-content: space-between; align-items: center; } .ci-doc__pdf { background: var(--c-creme); border: 1px solid var(--c-lijn); border-radius: 10px; padding: 16px 18px; font-size: 11.5px; line-height: 1.6; position: relative; } .ci-doc__pdf h3 { margin: 0 0 2px; font-size: 14px; } .ci-doc__pdf table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 11px; } .ci-doc__pdf td { padding: 4px 0; border-bottom: 1px solid var(--c-lijn); } .ci-doc__pdf td.mono { text-align: right; } .ci-doc__tag { position: absolute; top: 10px; right: 12px; font-size: 9px; border: 1px solid var(--c-groen); color: var(--c-groen-d); border-radius: 99px; padding: 2px 8px; background: var(--c-groen-t); } .ci-doc__leeg { font-size: 12px; color: var(--c-ink-2); padding: 20px; text-align: center; } .ci-btwrij { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; padding: 6px 0; } .ci-btwrij label { display: flex; flex-direction: column; gap: 2px; font-size: 10.5px; font-weight: 700; color: var(--c-ink-2); } .ci-btwrij input { border: 1px solid var(--c-lijn); border-radius: 8px; padding: 6px 9px; font: inherit; font-size: 12.5px; background: var(--c-paneel); color: var(--c-ink); } @media (max-width: 1100px) { .ci-grid, .ci-grid.heeft-doc { grid-template-columns: 1fr; } .ci-kies3 { grid-template-columns: 1fr; } } @media (max-width: 1100px) { .ci-slim__hint { display: none; } .ci-slim > input { padding-right: 16px; } } /* aparte zoekvelden in de kaarten (verzoek Michiel) */ .ci-kaartzoek { position: relative; margin-top: 4px; } .ci-kaartzoek input { width: 100%; box-sizing: border-box; border: 1.5px solid var(--c-groen-d); border-radius: 10px; padding: 9px 12px 9px 30px; font: inherit; font-size: 12.5px; background: var(--c-paneel); color: var(--c-ink); } .ci-kaartzoek::before { content: "⌕"; position: absolute; left: 10px; top: 9px; color: var(--c-groen-d); } .ci-res--kaart { margin-top: 6px; box-shadow: none; } .ci-res--kaart .ci-resrij { padding: 9px 12px; font-size: 12px; } /* opdracht per factuurregel */ .ci-regels td:nth-child(2) { width: 120px; } .ci-regels td:nth-child(3) { width: 150px; } .ci-regels td:nth-child(4) { width: 100px; } .ci-regels td:nth-child(5) { width: 84px; } .ci-regels td:nth-child(6) { width: 30px; } .ci-opkoppel { border: 1px dashed var(--c-groen-d); border-radius: 8px; background: none; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--c-groen-d); padding: 6px 10px; cursor: pointer; width: 100%; } .ci-opkoppel.is-actief { background: var(--c-groen-t); } .ci-opchip { display: inline-flex; gap: 6px; align-items: center; font-family: var(--font-mono); font-size: 10.5px; border: 1px solid var(--c-groen); color: var(--c-groen-d); background: var(--c-groen-t); border-radius: 99px; padding: 4px 6px 4px 10px; } .ci-opchip.is-alg { border-color: var(--c-lijn); color: var(--c-ink-2); background: var(--c-creme); } .ci-opchip__x { border: 0; background: none; font: inherit; font-size: 10px; cursor: pointer; color: inherit; padding: 0 2px; } .ci-opzoekrij td { padding: 8px 0 12px; background: color-mix(in srgb, var(--c-groen) 5%, transparent); border-radius: 10px; } .ci-kies2 { grid-template-columns: 1fr 1.2fr; } /* nieuwe-leverancier-rij in de zoeker (fix 21-07) */ .ci-resrij--nieuw i { color: var(--c-groen-d); font-weight: 700; } .ci-resrij--nieuw strong { color: var(--c-groen-d); } /* ═══ SB2 · het bonvak in het zelffactuur-formulier ═══════════════════ Hier stond een invulveld voor het bedrag. Wat de uitvoerder krijgt is geen invoer maar een uitkomst — dus tonen we de rekensom die bij het keuren is vastgevroren, en niets om in te tikken. */ .sb-bonvak { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--grijs); } .sb-bonrij { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: .8rem; } .sb-bonrij span { color: var(--ink2); } .sb-bonrij.is-eind { border-top: 1px solid var(--lijn); margin-top: 6px; padding-top: 8px; } .sb-bonrij.is-eind strong { font-size: 1.05rem; } .sb-bonuitleg { margin-top: 6px; font-size: .72rem; color: var(--ink2); } .sb-blok { display: block; font-size: .8rem; color: var(--stop); } /* ── crediteuren.css ── */ /* crediteuren.css — scherm `crediteuren` (bouwspec CREDITEUREN §3). Vorm en kleur komen uit casa360-stijl.css; hier staat alleen wat dit scherm eigen is: de twee kolommen van de inbox, de betaalrijen en het xml-vlak. Geen kleurliteral — de vier betekeniskleuren doen het werk. */ .cred { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; } .cred-kop { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; } .cred-kop h1 { font-size: 22px; margin: 4px 0 0; font-weight: 800; } .cred-sub { color: var(--ink2); font-size: 12.5px; margin: 3px 0 0; } .cred-tabs { display: flex; gap: 3px; margin-left: auto; flex-wrap: wrap; } .cred-tab { border: 1px solid var(--lijn); background: var(--kaart); border-radius: var(--radius-klein); padding: 5px 14px; font: inherit; font-size: 12px; font-weight: 700; color: var(--ink2); cursor: pointer; } .cred-tab:hover { border-color: var(--lijn2); } .cred-tab.is-actief { background: var(--knop); border-color: var(--knop); color: var(--knop-ink); } .cred-bak { display: grid; grid-template-columns: minmax(0, 1fr) 620px; gap: 14px; align-items: start; } @media (max-width: 1180px) { .cred-bak { grid-template-columns: 1fr; } } .cred-kaart { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--radius); box-shadow: var(--schaduw-kaart); overflow: hidden; } .cred-kaart--los { margin-top: 14px; } .cred-bakkop { display: flex; align-items: baseline; gap: 10px; padding: 10px 13px; border-bottom: 1px solid var(--lijn); background: var(--vlak); flex-wrap: wrap; } .cred-bakkop b { font-size: 13px; } .cred-bakkop span { font-size: 11px; color: var(--ink3); } .cred-leeg { padding: 26px; text-align: center; color: var(--ink3); } .cred-fout { padding: 12px 14px; border: 1px solid var(--stop); border-radius: var(--radius); background: var(--stop-t); color: var(--stop); margin-bottom: 14px; } /* ---- inbox-lijst ---- */ .cred-rij { display: grid; grid-template-columns: 92px minmax(0, 1fr) 120px 118px; gap: 11px; align-items: center; padding: 9px 13px; border-bottom: 1px solid var(--lijn); cursor: pointer; } .cred-rij:last-child { border-bottom: 0; } .cred-rij--kop { background: var(--vlak); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink3); font-weight: 700; cursor: default; } .cred-rij:not(.cred-rij--kop):hover { background: var(--vlak); } .cred-rij.is-gekozen { background: var(--accent-t); } .cred-naam { font-weight: 700; } .cred-fijn { color: var(--ink3); font-size: 11px; line-height: 1.45; } .cred-sig { font-size: 10.5px; line-height: 1.45; margin-top: 3px; color: var(--ink3); } .cred-sig--stop { color: var(--stop); } .cred-pil { display: inline-block; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap; } .cred-pil--goed { background: var(--goed-t); color: var(--goed); } .cred-pil--let { background: var(--let-t); color: var(--let); } .cred-pil--stop { background: var(--stop-t); color: var(--stop); } .cred-pil--acc { background: var(--accent-t); color: var(--accent-d); } .cred-pil--stil { background: var(--vlak); color: var(--ink2); } .cred-pillen { margin-top: 6px; display: flex; gap: 5px; flex-wrap: wrap; } /* ---- dossierpaneel ---- */ .cred-paneel { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--radius); box-shadow: var(--schaduw-kaart); position: sticky; top: 14px; overflow: hidden; max-height: calc(100vh - 40px); display: flex; flex-direction: column; } .cred-paneelkop { padding: 12px 14px; border-bottom: 1px solid var(--lijn); background: var(--vlak); } .cred-paneelnaam { font-weight: 800; font-size: 15px; margin-top: 2px; } .cred-paneellijf { padding: 12px 14px; overflow: auto; } .cred-paneelvoet { padding: 10px 14px; border-top: 1px solid var(--lijn); background: var(--vlak); display: flex; gap: 6px; flex-wrap: wrap; } .cred-tegel { border: 1px solid var(--lijn); border-radius: var(--radius-klein); padding: 10px 11px; margin-bottom: 9px; } .cred-tegel--stop { border-color: var(--stop); background: var(--stop-t); } .cred-tegel--let { border-color: var(--let); background: var(--let-t); } .cred-tegel--goed { border-color: var(--goed); background: var(--goed-t); } .cred-tegel--plat { margin: 0; } .cred-tegel h4 { margin: 0 0 7px; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink3); } .cred-uitleg { background: var(--kaart); margin-bottom: 14px; line-height: 1.55; } .cred-uitlegblok { padding: 11px 13px; } .cred-paar { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 12px; align-items: flex-start; line-height: 1.5; } .cred-paar--streep { border-top: 1px solid var(--lijn); margin-top: 7px; padding-top: 6px; } .cred-bedrag { font-family: var(--font-mono); font-weight: 700; white-space: nowrap; } .cred-bedrag.is-stop, .is-stop { color: var(--stop); } .cred-bedrag.is-let { color: var(--let); } .cred-bedrag.is-goed, .is-goed { color: var(--goed); } .cred-pdfblok { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 11px; margin-bottom: 9px; } .cred-pdf { background: var(--ink); border-radius: var(--radius-klein); aspect-ratio: 1/1.414; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--kaart); gap: 4px; font-size: 11px; } .cred-pdf__g { font-size: 13px; font-weight: 800; letter-spacing: .05em; } .cred-veldrij { display: grid; grid-template-columns: 126px minmax(0, 1fr) 74px; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px dashed var(--lijn); font-size: 12px; } .cred-veldrij:last-of-type { border-bottom: 0; } .cred-veldrij label { color: var(--ink2); } .cred-veldrij input { width: 100%; font: inherit; font-family: var(--font-mono); border: 1px solid var(--lijn); border-radius: var(--radius-klein); padding: 4px 7px; background: var(--kaart); color: var(--ink); } .cred-veldrij input.is-laag { border-color: var(--let); background: var(--let-t); } .cred-veldrij input.is-fout { border-color: var(--stop); background: var(--stop-t); } .cred-knopveld { display: flex; gap: 5px; align-items: center; } .cred-knopveld input { flex: 1; } .cred-zeker { font-size: 10px; font-weight: 800; text-align: right; font-family: var(--font-mono); color: var(--ink3); } .cred-zeker--goed { color: var(--goed); } .cred-zeker--let { color: var(--let); } .cred-zeker--stop { color: var(--stop); } .cred-rblok { border: 1px solid var(--lijn); border-radius: var(--radius-klein); padding: 6px 7px; margin-bottom: 6px; background: var(--vlak); } .cred-rblok.is-mis { border-color: var(--stop); background: var(--stop-t); } .cred-rblok.is-laag { border-color: var(--let); background: var(--let-t); } .cred-rA { display: grid; grid-template-columns: minmax(0, 1fr) 54px 82px 26px; gap: 6px; align-items: center; margin-bottom: 5px; } .cred-rB { display: grid; grid-template-columns: minmax(0, 1fr) 64px 110px; gap: 6px; align-items: center; } .cred-rblok input, .cred-rblok select { width: 100%; font: inherit; font-size: 11.5px; border: 1px solid var(--lijn); border-radius: 4px; padding: 3px 5px; background: var(--kaart); color: var(--ink); } .cred-rblok select.is-leeg { border-color: var(--stop); } .cred-num { font-family: var(--font-mono); text-align: right; } .cred-rvoet { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; color: var(--ink3); margin-top: 4px; line-height: 1.4; } .cred-weg { border: 1px solid var(--lijn); background: var(--kaart); border-radius: 4px; color: var(--stop); font: inherit; font-weight: 800; padding: 0; height: 22px; cursor: pointer; } .cred-regelknoppen { display: flex; gap: 6px; margin: 2px 0 4px; } /* ---- betaallijst en de brede tabellen ---- */ .cred-rijb { display: grid; grid-template-columns: 28px minmax(0, 1fr) 140px 172px 130px 112px; gap: 10px; align-items: center; padding: 8px 13px; border-bottom: 1px solid var(--lijn); font-size: 12px; } .cred-rijb:last-child { border-bottom: 0; } .cred-rijb--kop { background: var(--vlak); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink3); font-weight: 700; } .cred-rijb--som { background: var(--vlak); } .cred-rijb--stil { opacity: .85; } .cred-rijb.is-gekozen { background: var(--accent-t); } .cred-rijb.is-verlopen .cred-verv { color: var(--stop); font-weight: 800; } .cred-rijb.is-nu .cred-verv { color: var(--let); font-weight: 800; } .cred-rijb input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; } .cred-rechts { text-align: right; } .cred-iban { font-size: 11px; } .cred-selbalk { display: flex; align-items: center; gap: 10px; padding: 9px 13px; background: var(--accent-t); border-bottom: 1px solid var(--accent); flex-wrap: wrap; } .cred-groep { padding: 9px 13px; background: var(--vlak); border-bottom: 1px solid var(--lijn); display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; } .cred-groep b { font-size: 12.5px; } .cred-groep span { font-size: 11px; color: var(--ink3); } .cred-groepknoppen { margin-left: auto; display: flex; gap: 6px; } .cred-weigering { padding: 9px 13px; background: var(--stop-t); border-bottom: 1px solid var(--lijn); font-size: 11.5px; color: var(--stop); line-height: 1.6; } .cred-weigering .cred-fijn { color: var(--ink2); } .cred-rijg { display: grid; grid-template-columns: 70px minmax(0, 1fr) 150px 60px 130px 150px; gap: 10px; align-items: center; padding: 7px 13px; border-bottom: 1px solid var(--lijn); font-size: 12px; } .cred-rijl { display: grid; grid-template-columns: minmax(0, 1fr) 110px 180px 80px 170px 60px; gap: 10px; align-items: center; padding: 8px 13px; border-bottom: 1px solid var(--lijn); font-size: 12px; } .cred-rijg--kop, .cred-rijl--kop { background: var(--vlak); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink3); font-weight: 700; } .cred-rijg:last-child, .cred-rijl:last-child { border-bottom: 0; } .cred-rijl:not(.cred-rijl--kop):hover { background: var(--vlak); } /* ---- vensters ---- */ .cred-mask { position: fixed; inset: 0; background: rgba(20, 20, 20, .45); z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding-top: 6vh; } .cred-venster { background: var(--kaart); border-radius: var(--radius); width: min(680px, 94vw); max-height: 84vh; display: flex; flex-direction: column; box-shadow: var(--schaduw-zwevend); overflow: hidden; } .cred-vensterkop { padding: 12px 15px; border-bottom: 1px solid var(--lijn); background: var(--vlak); display: flex; align-items: center; gap: 10px; } .cred-vensterkop b { font-size: 14px; } .cred-x { margin-left: auto; } .cred-vensterlijf { padding: 13px 15px; overflow: auto; } .cred-venstervoet { padding: 10px 15px; border-top: 1px solid var(--lijn); background: var(--vlak); display: flex; gap: 6px; align-items: center; } .cred-zoekbalk { width: 100%; font: inherit; font-size: 13px; border: 1px solid var(--lijn); border-radius: var(--radius-klein); padding: 7px 10px; background: var(--kaart); color: var(--ink); } .cred-treffers { margin: 10px 0; } .cred-tref { display: grid; grid-template-columns: minmax(0, 1fr) 130px 80px; gap: 10px; align-items: center; padding: 7px 8px; border-bottom: 1px solid var(--lijn); cursor: pointer; border-radius: var(--radius-klein); } .cred-tref:hover, .cred-tref:focus-visible { background: var(--accent-t); } .cred-vform { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 8px 10px; align-items: center; font-size: 12px; } .cred-vform input, .cred-vform select { font: inherit; font-size: 12px; border: 1px solid var(--lijn); border-radius: 4px; padding: 5px 7px; width: 100%; background: var(--kaart); color: var(--ink); } .cred-xml { background: var(--ink); color: var(--kaart); font-family: var(--font-mono); font-size: 10.5px; line-height: 1.5; padding: 11px 13px; border-radius: var(--radius-klein); overflow: auto; max-height: 46vh; white-space: pre; } /* ---- knoppen: eigen klassen, want het platform kent nog geen gedeelde knopcomponent buiten de bouwstenen om ---- */ .cred-knop { border: 1px solid var(--lijn); background: var(--kaart); border-radius: var(--radius-klein); padding: 5px 11px; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--ink); cursor: pointer; transition: border-color var(--overgang), background var(--overgang); } .cred-knop:hover { border-color: var(--lijn2); background: var(--grijs); } .cred-knop--zwart { background: var(--knop); color: var(--knop-ink); border-color: var(--knop); } .cred-knop--zwart:hover { background: var(--knop-d); border-color: var(--knop-d); } .cred-knop--stop { color: var(--stop); border-color: var(--stop); } .cred-knop--stop:hover { background: var(--stop-t); border-color: var(--stop); } .cred-knop--klein { padding: 3px 9px; font-size: 10.5px; } .cred-knop[disabled] { opacity: .45; cursor: not-allowed; } /* ---- bankmutaties (fase 5) ---- */ .cred-mutatieveld { width: 100%; font-family: var(--font-mono); font-size: 11.5px; border: 1px solid var(--lijn); border-radius: var(--radius-klein); padding: 8px 10px; background: var(--kaart); color: var(--ink); line-height: 1.6; resize: vertical; } /* LC · de dossierrijen: naam met de reden eronder, kvk en het aantal stukken ernaast. Drie kolommen, want meer heeft deze rij niet nodig. */ .cred-rijl--dos { grid-template-columns: minmax(0, 1fr) 120px 120px; } /* IK1/IK5 · overzicht: fase-tegels, signalen, brede rijen met opdracht en fase */ .cred-signalen { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 14px; } .cred-rijb--ov { grid-template-columns: 28px 1.6fr 1fr 1fr .8fr .9fr .8fr; } .cred-rijb--batch { grid-template-columns: 1fr .8fr 1.2fr .8fr 1.6fr; } .cred-link { background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; cursor: pointer; font: inherit; } .cred-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .cred-rijb .chip--let { color: var(--let); border-color: var(--let); } .cred-rijb .chip--stop { color: var(--stop); border-color: var(--stop); } .cred-rijb .chip--goed { color: var(--goed); border-color: var(--goed); } /* Schermronde stap 4 · bladeren en zoeken in het overzicht; het signaal «zonder opdracht» is een filterknop */ .cred-blbalk { padding: 10px 13px 0; } .cred-chipknop { border: 0; font-family: inherit; cursor: pointer; } .cred-chipknop.is-actief { font-weight: 800; text-decoration: underline; } .cred-chipknop:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } /* ═══ EÉN SCHERM · Crediteurenbeheer op de norm (besluit 336 ES7 · besluit 337 toewijzing, 09-10-2026) ═══ Kopband en tabbalk komen uit de bouwstenen; hieronder de koppelingen in de kopband, de strook met de toewijzingsbalk, de werkvoorraad op --rij gegroepeerd op toewijzing, de kolom Toewijzing in drie standen en het dossier met de keuze, de poort en de handelingen als lijst. Alleen Werkbank-tokens; deze regels winnen van de oude hierboven. */ .cred.es-scherm { max-width: none; margin: 0; padding: 0; } .cred-een { grid-template-columns: minmax(0, 1fr); } .cred-een > .es-kolom > * { flex: none; } .cred-een > .es-kolom > .cred-kaart--los, .cred-een > .es-kolom > .cred-uitleg { margin-top: 0; } .cred-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: stretch; } .cred-links, .cred-rail { gap: 10px; } @media (max-width: 1240px) { .cred-grid { grid-template-columns: 1fr; } } .cred-tabtel { font-size: .62rem; font-weight: 700; color: var(--ink3); background: var(--grijs); border-radius: var(--radius-pill); padding: 0 6px; line-height: 16px; margin-left: 4px; } .bs-tabbalk__tab.is-actief .cred-tabtel { color: var(--ink); } .cred-punt { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--let); margin-right: 5px; vertical-align: 1px; } .bs-tabbalk .cred-zoek .bs-blzoek { display: inline-flex; align-items: center; gap: 6px; margin: 0; } .bs-tabbalk .cred-zoek .bs-blzoek__lbl { display: none; } .bs-tabbalk .cred-zoek input { height: 28px; width: 150px; font: 400 .74rem var(--font-ui); color: var(--ink); padding: 0 8px; border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein); background: var(--kaart); } /* de koppelingen als drie stippen in de kopband (meer breedte dan een reisbalk, zoals bij debiteuren) */ .bs-kopband__reis:has(.cred-koppelingen) { flex-basis: 420px; max-width: 560px; } .bs-kopband .cred-koppelingen { display: flex; gap: 12px; align-items: center; overflow: hidden; white-space: nowrap; } .cred-koppeling { font-size: .66rem; color: var(--ink2); display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 0; font-family: inherit; white-space: nowrap; } .cred-koppeling strong { font-size: .68rem; color: var(--ink); } .cred-koppeling i { width: 7px; height: 7px; border-radius: 50%; background: var(--grijs2); flex: none; } .cred-koppeling i.is-aan { background: var(--goed); } .cred-koppeling i.is-let { background: var(--let); } button.cred-koppeling { cursor: pointer; border-radius: 4px; } button.cred-koppeling:hover strong { text-decoration: underline; text-underline-offset: 2px; } button.cred-koppeling:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } /* de strook: open · vervalt · koppel nog · (tellers op nul weggelaten) · de toewijzing als één balk */ .cred-strook { display: flex; align-items: stretch; flex-wrap: wrap; } .cred-strook__kpi { padding: 8px 14px; border-right: var(--lijndikte) solid var(--lijn); display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: none; } .cred-strook__kpi .l { font-size: .62rem; color: var(--ink3); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; } .cred-strook__kpi .w { font-family: var(--font-mono); font-weight: 700; font-size: var(--kpi); letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; color: var(--ink); background: none; border: 0; padding: 0; text-align: left; cursor: default; } .cred-strook__kpi button.w { cursor: pointer; border-radius: 4px; } .cred-strook__kpi button.w:hover, .cred-strook__kpi button.w[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 3px; } .cred-strook__kpi button.w:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .cred-strook__kpi .w.is-let { color: var(--let); } .cred-strook__kpi .w.is-stop { color: var(--stop); } .cred-strook__kpi .w.is-goed { color: var(--goed); } .cred-strook__kpi .s { font-size: .62rem; color: var(--ink2); white-space: nowrap; } .cred-ok { color: var(--goed); font-weight: 700; } .cred-toew { flex: 1 1 auto; min-width: 240px; padding: 8px 14px; display: flex; flex-direction: column; gap: 4px; justify-content: center; } .cred-toew__legenda { display: flex; gap: 12px; flex-wrap: wrap; font-size: .66rem; color: var(--ink2); } .cred-toew__legenda button { border: 0; background: none; padding: 0; font: 500 .66rem var(--font-ui); color: var(--ink2); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; border-radius: 4px; } .cred-toew__legenda button b, .cred-toew__legenda span b { color: var(--ink); font-weight: 700; } .cred-toew__legenda button.is-nul, .cred-toew__legenda button.is-nul b { color: var(--ink3); font-weight: 500; } .cred-toew__legenda button[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); } .cred-toew__legenda button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .cred-toew__legenda i { width: 8px; height: 8px; border-radius: 2px; background: var(--grijs2); } .cred-toew__balk { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--grijs2); } .cred-toew__balk i { display: block; height: 100%; } .cred-toew .is-opdracht-vlak { background: var(--ink); } .cred-toew .is-overhead-vlak { background: var(--ink3); } .cred-toew .is-onbepaald-vlak { background: var(--let); } .cred-toew .bs-weggelaten { padding: 0; } /* bulkbalk: pas bij een vinkje */ .cred-bulk { display: flex; align-items: center; gap: 8px; padding: 6px var(--pad); font-size: .8rem; flex-wrap: wrap; } /* de werkvoorraad: rijen op --rij, gegroepeerd op toewijzing */ .cred-lijst { padding: 0; overflow: hidden; } .cred-twgroep { display: flex; align-items: center; gap: 10px; padding: 6px var(--pad) 4px; font: .62rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); background: var(--grijs); border-bottom: var(--lijndikte) solid var(--lijn); } .cred-twgroep b { color: var(--ink2); font-weight: 700; text-transform: none; letter-spacing: 0; } .cred-twgroep .is-onbepaald { color: var(--let); } .cred-twgroep__uitleg { margin-left: auto; text-transform: none; letter-spacing: 0; font: .66rem var(--font-ui); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cred-wr { display: grid; grid-template-columns: 24px minmax(220px, 1.6fr) 88px 72px 76px minmax(190px, 1.3fr) 96px; gap: 8px; align-items: center; min-height: var(--rij); padding: 0 var(--pad); border-top: var(--lijndikte) solid var(--lijn); cursor: pointer; font-size: .76rem; } .cred-wr:hover { background: var(--accent-t2); } .cred-wr.is-actief, .cred-wr.is-gekozen { background: var(--accent-t); } .cred-wr:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; } .cred-wr--kop { min-height: 30px; cursor: default; border-top: 0; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); } .cred-wr--kop:hover { background: transparent; } .cred-wr .r, .cred-wr .cred-geld { text-align: right; justify-self: end; } .cred-kies { display: flex; align-items: center; justify-content: center; } .cred-kies input { cursor: pointer; accent-color: var(--accent); width: 14px; height: 14px; } .cred-wie { display: flex; align-items: center; gap: 6px; min-width: 0; } .cred-wie strong { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 48px; } .cred-wie > .mono { font-size: .66rem; color: var(--ink3); white-space: nowrap; } .cred-wie .chip { font-size: .56rem; flex: none; } .cred-geld { font-size: .8rem; } .cred-wr.is-verlopen .cred-verv { color: var(--stop); font-weight: 700; } .cred-wr > .cred-stil { font: 500 .7rem var(--font-ui); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .cred-wr .cred-stil em { display: block; font-style: normal; font-size: .6rem; color: var(--ink3); overflow: hidden; text-overflow: ellipsis; } .cred-wr .chip--let, .cred-dossier .chip--let { color: var(--let); border-color: var(--let); } .cred-wr .chip--stop, .cred-dossier .chip--stop { color: var(--stop); border-color: var(--stop); } .cred-wr .chip--goed, .cred-dossier .chip--goed { color: var(--goed); border-color: var(--goed); } /* de kolom Toewijzing: drie standen, nooit leeg */ .cred-tw { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: .72rem; } .cred-tw > i { width: 8px; height: 8px; border-radius: 2px; flex: none; background: var(--ink); } .cred-tw--overhead > i { background: var(--ink3); } .cred-tw--onbepaald > i { background: var(--let); } .cred-tw b { font-weight: 700; white-space: nowrap; } .cred-tw--onbepaald b { color: var(--let); } .cred-tw > span { color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .cred-tw__voorstel { display: inline-flex; align-items: center; gap: 4px; } .cred-tw__voorstel button { height: 20px; padding: 0 7px; border: var(--lijndikte) solid var(--let); border-radius: 6px; font: 700 .62rem var(--font-ui); color: var(--let); background: var(--let-t); cursor: pointer; flex: none; } .cred-tw__voorstel button.is-primair { background: var(--accent); color: var(--knop-ink); border-color: var(--accent); } .cred-tw__voorstel button:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } /* het dossier: de toewijzing als eerste blok, één primaire knop, de rest als lijst met toets */ .cred-dossier { padding: 0; } .cred-dossier__kop { padding: 10px var(--pad) 4px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .cred-dossier__kop strong { font-size: .95rem; font-weight: 800; display: block; } .cred-dossier__kop .mono { font-size: .66rem; color: var(--ink2); } .cred-dossier__kop .chip { flex: none; } .cred-dossier__cijfers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 var(--pad) 8px; } .cred-dossier__cijfers > div { display: flex; flex-direction: column; min-width: 0; } .cred-dossier__cijfers > div > span { font-size: .62rem; color: var(--ink3); text-transform: uppercase; letter-spacing: .04em; } .cred-dossier__cijfers strong { font-size: .95rem; } .cred-dossier__cijfers em { font-style: normal; font-size: .62rem; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cred-blok { border-top: var(--lijndikte) solid var(--lijn); padding: 8px var(--pad) 10px; display: grid; gap: 6px; } .cred-blok > .bs-kicker { font: .62rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); display: flex; justify-content: space-between; gap: 8px; } .cred-blok > .bs-kicker em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--let); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cred-opts { display: grid; gap: 6px; } .cred-opt { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px 10px; border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein); background: var(--kaart); cursor: pointer; } .cred-opt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-t2); } .cred-opt:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .cred-opt .r { position: relative; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--lijn2); margin-top: 2px; box-sizing: border-box; } .cred-opt[aria-pressed="true"] .r { border-color: var(--accent); } .cred-opt[aria-pressed="true"] .r::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--accent); } .cred-opt > div > b { display: block; font-size: .78rem; } .cred-opt > div { min-width: 0; } .cred-opt > div > span { display: block; font-size: .64rem; color: var(--ink2); } .cred-voorstelregel { margin-top: 4px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: .64rem; color: var(--ink2); } .cred-voorstelregel .vk { font: 700 .62rem var(--font-mono); color: var(--let); background: var(--let-t); border-radius: 6px; padding: 1px 6px; flex: none; } .cred-opt .bs-kiezer { margin-top: 4px; } .cred-marge { margin-top: 4px; font-size: .64rem; color: var(--ink2); line-height: 1.4; } .cred-marge b { display: inline; color: var(--ink); font-family: var(--font-mono); font-size: inherit; } .cred-marge .is-let, .cred-marge b.is-let { color: var(--let); } .cred-veld { display: grid; gap: 2px; font-size: .64rem; color: var(--ink2); margin-top: 4px; } .cred-veld select, .cred-veld input { font: inherit; font-size: .74rem; height: 28px; border: var(--lijndikte) solid var(--lijn2); border-radius: 6px; padding: 0 8px; background: var(--kaart); color: var(--ink); width: 100%; box-sizing: border-box; } .cred-vink { display: flex; align-items: center; gap: 6px; font-size: .68rem; color: var(--ink2); } .cred-vink input { accent-color: var(--accent); } .cred-vink em { font-style: normal; color: var(--ink3); } .cred-poort { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: var(--radius-klein); background: var(--let-t); color: var(--let); font-size: .66rem; line-height: 1.4; } .cred-poort.is-vrij { background: var(--goed-t); color: var(--goed); } .cred-twknop { width: 100%; justify-content: center; } .cred-handel { border-top: var(--lijndikte) solid var(--lijn); padding: 8px var(--pad) 6px; display: grid; gap: 6px; } .cred-handel .btn--primary { width: 100%; justify-content: center; height: 32px; font-size: .8rem; } .cred-handel .btn--primary[disabled] { opacity: .5; cursor: not-allowed; } .cred-handel__uitleg { font-size: .64rem; color: var(--ink2); text-align: center; margin-top: -2px; } .cred-handel__klaar { font-size: .74rem; color: var(--ink2); text-align: center; padding: 6px 0; } .cred-hlijst { display: grid; padding: 2px 0 4px; } .cred-hknop { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; height: 30px; padding: 0 4px; border: 0; background: none; border-radius: 6px; font: 600 .74rem var(--font-ui); color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; } .cred-hknop:hover { background: var(--accent-t2); } .cred-hknop:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; } .cred-hknop .g { color: var(--ink2); text-align: center; } .cred-hknop kbd { font: .62rem var(--font-mono); color: var(--ink3); border: var(--lijndikte) solid var(--lijn); border-radius: 4px; padding: 0 4px; } .cred-hknop.is-stil { color: var(--ink3); cursor: default; } .cred-hknop.is-stil:hover { background: none; } .cred-hknop > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cred-regels { display: grid; gap: 3px; font-size: .7rem; } .cred-regels > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; color: var(--ink2); align-items: baseline; } .cred-regels > div > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cred-regels b { color: var(--ink); font-weight: 700; } .cred-regels .kp { font-size: .62rem; color: var(--ink3); white-space: nowrap; } .cred-regels em { font-style: normal; color: var(--ink3); } .cred-hist > div > span:first-child { white-space: normal; line-height: 1.35; } .cred-paneel--leeg { padding: 14px var(--pad); color: var(--ink3); font-size: .74rem; line-height: 1.5; } .cred-batches .cred-rijb--batch { padding: 4px var(--pad); font-size: .72rem; min-height: var(--rij); } .cred-regelset { padding: 0 2px; } .cred-rijg--kp { grid-template-columns: 70px minmax(0, 1fr) 200px; } /* ── subsidie.css ── */ /* ===================================================================== subsidie.css — module 4.4 · Subsidiebeheer (scherm `subsidie`). ES8 (besluit 336/338, 09-10-2026): het scherm staat op de één-scherm- norm. Kopband en tabbalk komen uit de bouwstenen; hier staat alleen wat dit scherm eigen is: de koppelingen in de kopband, de strook met de statusbalk, de werkvoorraad op --rij gegroepeerd op status, het dossier rechts met de eisen, de machtiging, het fotodossier, de bewijsstukken en de brief. Uitsluitend Werkbank-tokens uit casa360-stijl.css: kleur is betekenis (--goed / --let / --stop), de rest is inkt en lijn. ===================================================================== */ .subsidie { max-width: none; margin: 0; padding: 0; } .sub-een { grid-template-columns: minmax(0, 1fr); } .sub-grid { grid-template-columns: minmax(0, 1fr) 360px; align-items: stretch; } .sub-links, .sub-rail { gap: 10px; } @media (max-width: 1240px) { .sub-grid { grid-template-columns: 1fr; } } /* tellers in de tabbalk, het zoekveld rechts */ .sub-tabtel { font-size: .62rem; font-weight: 700; color: var(--ink3); background: var(--grijs); border-radius: var(--radius-pill); padding: 0 6px; line-height: 16px; margin-left: 4px; } .bs-tabbalk__tab.is-actief .sub-tabtel { color: var(--ink); } .bs-tabbalk .sub-zoek { margin: 0; display: inline-flex; align-items: center; gap: 6px; height: 28px; border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein); padding: 0 8px; background: var(--kaart); color: var(--ink3); font-size: .72rem; } .bs-tabbalk .sub-zoek input { border: 0; background: none; padding: 0; min-width: 170px; font: 400 .74rem var(--font-ui); color: var(--ink); } .bs-tabbalk .sub-zoek input:focus-visible { outline: var(--focus-ring); outline-offset: 4px; border-radius: 2px; } /* de koppelingen als drie stippen in de kopband: RVO-regelingwacht · machtigingen · PBC */ .bs-kopband__reis:has(.sub-koppelingen) { flex-basis: 440px; max-width: 580px; } .bs-kopband .sub-koppelingen { display: flex; gap: 12px; align-items: center; overflow: hidden; white-space: nowrap; } .sub-koppeling { font-size: .66rem; color: var(--ink2); display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 0; font-family: inherit; white-space: nowrap; cursor: pointer; border-radius: 4px; } .sub-koppeling strong { font-size: .68rem; color: var(--ink); } .sub-koppeling i { width: 7px; height: 7px; border-radius: 50%; background: var(--grijs2); flex: none; } .sub-koppeling i.is-aan { background: var(--goed); } .sub-koppeling i.is-let { background: var(--let); } .sub-koppeling i.is-stop { background: var(--stop); } .sub-koppeling:hover strong { text-decoration: underline; text-underline-offset: 2px; } .sub-koppeling:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } /* de strook: dossiers · klaar · bij RVO · uitbetaald · (minder beschikt, afgevallen: op nul weggelaten) · de statusbalk */ .sub-strook { display: flex; align-items: stretch; flex-wrap: wrap; } .sub-strook__kpi { padding: 8px 14px; border-right: var(--lijndikte) solid var(--lijn); display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: none; } .sub-strook__kpi.is-verborgen { display: none; } .sub-strook.is-toon .sub-strook__kpi.is-verborgen { display: flex; opacity: .6; } .sub-strook__kpi .l { font-size: .62rem; color: var(--ink3); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; } .sub-strook__kpi .w { font-family: var(--font-mono); font-weight: 700; font-size: var(--kpi); letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; color: var(--ink); background: none; border: 0; padding: 0; text-align: left; cursor: default; } .sub-strook__kpi button.w { cursor: pointer; border-radius: 4px; } .sub-strook__kpi button.w:hover, .sub-strook__kpi button.w[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 3px; } .sub-strook__kpi button.w:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } .sub-strook__kpi .w.is-let { color: var(--let); } .sub-strook__kpi .w.is-stop { color: var(--stop); } .sub-strook__kpi .w.is-goed { color: var(--goed); } .sub-strook__kpi .s { font-size: .62rem; color: var(--ink2); white-space: nowrap; } .sub-ok { color: var(--goed); font-weight: 700; } .sub-let { color: var(--let); font-weight: 700; } .sub-balkvak { flex: 1 1 auto; min-width: 260px; padding: 8px 14px; display: flex; flex-direction: column; gap: 4px; justify-content: center; } .sub-balk__legenda { display: flex; gap: 12px; flex-wrap: wrap; font-size: .66rem; color: var(--ink2); } .sub-balk__legenda button { border: 0; background: none; padding: 0; font: 500 .66rem var(--font-ui); color: var(--ink2); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; border-radius: 4px; } .sub-balk__legenda button b { color: var(--ink); font-weight: 700; } .sub-balk__legenda button.is-nul, .sub-balk__legenda button.is-nul b { color: var(--ink3); font-weight: 500; } .sub-balk__legenda button[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); } .sub-balk__legenda button:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } .sub-balk__legenda i { width: 8px; height: 8px; border-radius: 2px; background: var(--grijs2); } .sub-balk { display: flex; height: 8px; border-radius: var(--radius-pill); overflow: hidden; background: var(--grijs2); } .sub-balk i { display: block; height: 100%; } /* de vier stappen van de pijplijn: inkt wordt lichter naarmate het geld dichter bij de klant is; alleen «bij RVO» wacht (--let) */ .sub-balkvak .is-berekend { background: var(--ink); } .sub-balkvak .is-ingediend { background: var(--let); } .sub-balkvak .is-beschikt { background: var(--ink3); } .sub-balkvak .is-uitbetaald { background: var(--goed); } .sub-balkvak .bs-weggelaten { padding: 0; } /* de werkvoorraad: rijen op --rij, gegroepeerd op status */ .sub-lijst { padding: 0; overflow: hidden; } .sub-groep { display: flex; align-items: center; gap: 10px; padding: 6px var(--pad) 4px; font: .62rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); background: var(--grijs); border-bottom: var(--lijndikte) solid var(--lijn); } .sub-groep b { color: var(--ink2); font-weight: 700; text-transform: none; letter-spacing: 0; } .sub-groep .is-ingediend, .sub-groep .is-bezwaar { color: var(--let); } .sub-groep .is-niet-eligible, .sub-groep .is-afgewezen { color: var(--stop); } .sub-groep .is-uitbetaald { color: var(--goed); } .sub-groep__uitleg { margin-left: auto; text-transform: none; letter-spacing: 0; font: .66rem var(--font-ui); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sub-wr { display: grid; grid-template-columns: minmax(200px, 1.5fr) 110px minmax(120px, 1fr) 84px 84px minmax(150px, 1.1fr); gap: 8px; align-items: center; min-height: var(--rij); padding: 0 var(--pad); border-top: var(--lijndikte) solid var(--lijn); cursor: pointer; font-size: .76rem; } .sub-wr:hover { background: var(--accent-t2); } .sub-wr.is-actief { background: var(--accent-t); } .sub-wr:focus-visible { outline: var(--focus-ring); outline-offset: -3px; } .sub-wr--kop { min-height: 30px; cursor: default; border-top: 0; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); } .sub-wr--kop:hover { background: transparent; } .sub-wr .r, .sub-wr .sub-geld { text-align: right; justify-self: end; } .sub-wr--poort { grid-template-columns: minmax(200px, 1.2fr) minmax(300px, 2fr) minmax(150px, 1fr); } .sub-wie { display: flex; align-items: center; gap: 6px; min-width: 0; } .sub-wie strong { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 48px; } .sub-wie > .mono { font-size: .66rem; color: var(--ink3); white-space: nowrap; } .sub-wie .chip { font-size: .56rem; flex: none; } .sub-geld { font-size: .8rem; } .sub-geld s { color: var(--ink3); font-weight: 500; } .sub-wr > .sub-stil { font: 500 .7rem var(--font-ui); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .sub-wr .sub-stil em { font-style: normal; color: var(--ink3); } .sub-stand { font-size: .7rem; } .sub-wr .chip--let, .sub-dossier .chip--let { color: var(--let); border-color: var(--let); } .sub-wr .chip--stop, .sub-dossier .chip--stop { color: var(--stop); border-color: var(--stop); } .sub-wr .chip--goed, .sub-dossier .chip--goed { color: var(--goed); border-color: var(--goed); } .sub-pag { display: flex; gap: 8px; justify-content: flex-end; align-items: center; padding: 6px var(--pad); border-top: var(--lijndikte) solid var(--lijn); font-size: .66rem; color: var(--ink3); } .sub-pag .btn[disabled] { opacity: .4; cursor: not-allowed; } .sub-uitleg { padding: 8px var(--pad); font: 500 .72rem/1.5 var(--font-ui); color: var(--ink2); } .sub-uitleg b { color: var(--ink); } .sub-uitleg .btn { vertical-align: middle; margin-left: 4px; } .sub-paneel--leeg { padding: 10px var(--pad); color: var(--ink2); font: 500 .74rem/1.5 var(--font-ui); } /* de eisen in de wachtrij: één chip per eis, de Rd-eis is het mensenwerk */ .sub-eischips { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; } .sub-eischip { height: 20px; padding: 0 7px; border: var(--lijndikte) solid var(--lijn2); border-radius: 6px; background: var(--kaart); font: 600 .6rem var(--font-mono); color: var(--ink2); cursor: default; white-space: nowrap; } .sub-eischip.is-ok { border-color: var(--goed); color: var(--goed); } .sub-eischip.is-fout { border-color: var(--stop); color: var(--stop); background: var(--stop-t); } .sub-eischip.is-open { border-color: var(--let); color: var(--let); background: var(--let-t); } .sub-eischip.is-mens { cursor: pointer; } .sub-eischip.is-mens:hover { text-decoration: underline; text-underline-offset: 2px; } .sub-eischip:focus-visible { outline: var(--focus-ring); outline-offset: 1px; } /* het dossier rechts: kop, drie cijfers, de poort, één primaire knop, de handelingen als lijst, dan de blokken */ .sub-dossier { padding: 0; border-color: var(--lijn2); } .sub-dossier__kop { padding: 10px var(--pad) 4px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .sub-dossier__kop strong { font-size: .95rem; font-weight: 800; display: block; } .sub-dossier__kop .mono { font-size: .66rem; color: var(--ink2); } .sub-dossier__kop .chip { flex: none; } .sub-dossier__cijfers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 var(--pad) 8px; } .sub-dossier__cijfers > div { display: flex; flex-direction: column; min-width: 0; } .sub-dossier__cijfers > div > span { font-size: .62rem; color: var(--ink3); text-transform: uppercase; letter-spacing: .04em; } .sub-dossier__cijfers strong { font-size: .95rem; } .sub-dossier__cijfers em { font-style: normal; font-size: .62rem; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sub-poort { margin: 0 var(--pad) 6px; padding: 8px 10px; border-radius: var(--radius-klein); background: var(--let-t); color: var(--let); font-size: .66rem; line-height: 1.4; } .sub-poort.is-vrij { background: var(--goed-t); color: var(--goed); } .sub-handel { border-top: var(--lijndikte) solid var(--lijn); padding: 8px var(--pad) 6px; display: grid; gap: 6px; } .sub-handel .btn--primary { width: 100%; justify-content: center; height: 32px; font-size: .8rem; } .sub-handel .btn--primary[disabled] { opacity: .5; cursor: not-allowed; } .sub-handel__uitleg { font-size: .64rem; color: var(--ink2); text-align: center; margin-top: -2px; } .sub-handel__klaar { font-size: .74rem; color: var(--ink2); text-align: center; padding: 6px 0; } .sub-hlijst { display: grid; padding: 2px 0 4px; } .sub-hlijst:empty { display: none; } .sub-hknop { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; height: 30px; padding: 0 4px; border: 0; background: none; border-radius: 6px; font: 600 .74rem var(--font-ui); color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; } .sub-hknop:hover { background: var(--accent-t2); } .sub-hknop:focus-visible { outline: var(--focus-ring); outline-offset: -3px; } .sub-hknop .g { color: var(--ink2); text-align: center; } .sub-hknop kbd { font: .62rem var(--font-mono); color: var(--ink3); border: var(--lijndikte) solid var(--lijn); border-radius: 4px; padding: 0 4px; } .sub-hknop > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sub-blok { border-top: var(--lijndikte) solid var(--lijn); padding: 8px var(--pad) 10px; display: grid; gap: 6px; } .sub-blok > .bs-kicker { font: .62rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); display: flex; justify-content: space-between; gap: 8px; } .sub-blok > .bs-kicker em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--ink2); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sub-fijn { font: 500 .66rem/1.45 var(--font-ui); color: var(--ink2); } /* de eisen mét hun bron: vijf rekent het systeem, de Rd-eis is klikbaar */ .sub-eisen { display: grid; gap: 4px; } .sub-eis { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; padding: 3px 4px; border-radius: 6px; } .sub-eis.is-klik { cursor: pointer; } .sub-eis.is-klik:hover { background: var(--accent-t2); } .sub-eis:focus-visible { outline: var(--focus-ring); outline-offset: -3px; } .sub-eis > i, .sub-check { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 .66rem var(--font-mono); font-style: normal; flex: none; } .sub-eis > i.is-ok, .sub-check.is-ok { background: var(--goed-t); color: var(--goed); } .sub-eis > i.is-fout, .sub-check.is-fout { background: var(--stop-t); color: var(--stop); } .sub-eis > i.is-open, .sub-check.is-open { background: var(--let-t); color: var(--let); } .sub-eis b { display: block; font-size: .72rem; font-weight: 600; line-height: 1.3; } .sub-eis span { display: block; font-size: .62rem; color: var(--ink2); line-height: 1.35; } /* machtiging (BV2b) */ .sub-machtiging { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 500 .7rem/1.4 var(--font-ui); } .sub-machtiging > i { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 .62rem var(--font-mono); font-style: normal; flex: none; } .sub-machtiging > i.is-ok { background: var(--goed-t); color: var(--goed); } .sub-machtiging > i.is-fout { background: var(--stop-t); color: var(--stop); } .sub-machtiging > i.is-open { background: var(--let-t); color: var(--let); } .sub-machtiging > span { flex: 1 1 200px; color: var(--ink2); } /* bewijsstukken en de eigen maatregelen van de klant: één regel per stuk, «vraag op» bij wat ontbreekt */ .sub-stukken { display: grid; gap: 4px; } .sub-stuk { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 3px 4px; } .sub-stuk > i { font-style: normal; font: 700 .7rem var(--font-mono); text-align: center; color: var(--ink3); } .sub-stuk.is-aanwezig > i { color: var(--goed); } .sub-stuk.is-opgevraagd > i { color: var(--let); } .sub-stuk.is-ontbreekt > i { color: var(--stop); } .sub-stuk b { display: block; font-size: .72rem; font-weight: 600; } .sub-stuk span { display: block; font-size: .62rem; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sub-stuk > div { min-width: 0; } .sub-eigenacties { display: inline-flex; gap: 4px; } /* tijdlijn en historie */ .sub-tijdlijn { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 600 .64rem var(--font-ui); color: var(--ink3); } .sub-tijdlijn i { font-style: normal; } .sub-tijdlijn b { font-weight: 500; color: var(--ink3); } .sub-tijdlijn .is-klaar { color: var(--ink2); } .sub-tijdlijn .is-nu { color: var(--ink); font-weight: 800; } .sub-hist { display: grid; gap: 3px; font-size: .68rem; } .sub-hist > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; color: var(--ink2); align-items: baseline; } .sub-hist > div > span:first-child { line-height: 1.35; } .sub-hist em { font-style: normal; color: var(--ink3); } .sub-hist .mono { font-size: .6rem; color: var(--ink3); white-space: nowrap; } /* ---- SUB A5 · de beschikking en de bezwaartermijn (bouwspec §3, §5.4): wat de klant is voorgerekend, wat RVO heeft toegekend, en hoeveel tijd er nog is. De klok: --let voor «krap», --stop voor «verlopen». ---- */ .sub-brief { display: grid; gap: 8px; } .sub-brief__cijfers, .sub-brief__brief { display: flex; flex-wrap: wrap; gap: 6px 16px; } .sub-brief__cijfers span, .sub-brief__brief span { font: 500 .66rem var(--font-ui); color: var(--ink2); } .sub-brief__cijfers strong, .sub-brief__brief strong { font: 700 .76rem var(--font-mono); color: var(--ink); display: block; } .sub-brief__cijfers .is-tekort strong { color: var(--let); } .sub-brief__brief .is-mist { color: var(--let); align-self: center; } .sub-briefklok { display: grid; gap: 3px; border-left: 3px solid var(--goed); padding: 7px 11px; border-radius: 0 var(--radius-klein) var(--radius-klein) 0; background: var(--goed-t); } .sub-briefklok span { font: 500 .68rem var(--font-ui); color: var(--ink2); } .sub-briefklok strong { font-weight: 700; color: var(--ink); } .sub-briefklok__grond { color: var(--ink3); font-size: .62rem; } .sub-briefklok__tekort { color: var(--let); } .sub-briefklok--krap { border-left-color: var(--let); background: var(--let-t); } .sub-briefklok--dicht { border-left-color: var(--stop); background: var(--stop-t); } .bs-modal .sub-briefklok { margin: 0 0 10px; } /* ---- SUB A7 · het fotodossier (bouwspec §2, §3): per maatregel een vóór en een ná; de stip zegt de stand ---- */ .sub-fotos { display: grid; gap: 8px; } .sub-fotogroep { border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius-klein); padding: 7px 9px; } .sub-fotogroep__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .sub-fotogroep__kop strong { font: 700 .72rem var(--font-ui); } .sub-fotogroep__kop .st { font: 600 .62rem var(--font-ui); color: var(--ink2); } .sub-fotogroep__kop .st.goed { color: var(--goed); } .sub-fotogroep__kop .st.let { color: var(--let); } .sub-fotostrip { display: flex; flex-wrap: wrap; gap: 6px; } .sub-foto { position: relative; width: 64px; height: 48px; display: grid; place-items: center; border: var(--lijndikte) solid var(--lijn2); border-left-width: 3px; border-radius: var(--radius-klein); background: var(--grijs); cursor: pointer; } .sub-foto:hover { border-color: var(--ink); } .sub-foto:focus-visible { outline: var(--focus-ring); outline-offset: 1px; } .sub-foto__fase { font: 700 .58rem var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink2); } .sub-foto__gps { position: absolute; top: 1px; right: 4px; font-size: .62rem; color: var(--let); } .sub-foto.is-mee { border-left-color: var(--goed); } .sub-foto.is-later { border-left-color: var(--let); } .sub-foto.is-klaar { border-left-color: var(--lijn2); } .sub-fotoleeg { font: 500 .66rem/1.45 var(--font-ui); color: var(--ink3); padding: 2px 0; } .sub-fotovoet { font: 500 .64rem/1.45 var(--font-ui); color: var(--ink3); } .sub-fotovoet strong { color: var(--ink2); } /* ---- regelingen (regelset-patroon: een wijziging is een nieuwe versie met ingangsdatum) ---- */ .sub-reggrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 10px; } .sub-regeling { padding: 10px var(--pad) 12px; display: flex; flex-direction: column; gap: 7px; } .sub-regeling__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .sub-regeling__kop strong { font: 800 .9rem var(--font-ui); display: block; } .sub-regeling__kop span { font: 500 .64rem var(--font-ui); color: var(--ink2); } .sub-regeling__meta { font-size: .62rem; color: var(--ink3); } .sub-regeling__acties { display: flex; gap: 5px; flex-wrap: wrap; } .sub-regeling__plafond { display: flex; justify-content: space-between; font: 600 .68rem var(--font-ui); color: var(--ink2); } .sub-regbalk { height: 8px; border-radius: var(--radius-pill); background: var(--grijs2); overflow: hidden; } .sub-regbalk i { display: block; height: 100%; background: var(--ink); } .sub-regbalk i.is-let { background: var(--let); } .sub-regbalk i.is-stop { background: var(--stop); } .sub-regeling__benut { font-size: .6rem; color: var(--ink3); } .sub-regeling__stats { font-size: .64rem; color: var(--ink2); padding: 6px 0; border-top: var(--lijndikte) solid var(--lijn); } .sub-regeling__tarieven, .sub-regeling__eisen { display: flex; flex-direction: column; gap: 2px; font: 500 .66rem/1.45 var(--font-ui); color: var(--ink2); } .sub-regeling__tarieven .bs-kicker, .sub-regeling__eisen .bs-kicker { font: .6rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); margin-bottom: 2px; } .sub-regeling__tarieven b { color: var(--ink); } .sub-regeling__tarieven em { font-style: normal; color: var(--ink3); } .sub-archief { padding: 0 0 6px; } .sub-archrij { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px var(--pad); border-top: var(--lijndikte) solid var(--lijn); } .sub-archrij strong { font: 700 .76rem var(--font-ui); display: block; color: var(--ink2); } .sub-archrij span { font-size: .62rem; color: var(--ink3); } .sub-reghist { display: grid; gap: 6px; padding: 0 16px 8px; } .sub-reghistrij { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 11px; border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius); padding: 8px 12px; } .sub-reghistrij.is-actief { border-color: var(--ink); } .sub-reghistrij strong { font: 700 .76rem var(--font-ui); display: block; } .sub-reghistrij > div span { font: 500 .64rem var(--font-ui); color: var(--ink3); } @media (prefers-reduced-motion: no-preference) { .sub-wr, .sub-hknop, .sub-foto { transition: background var(--overgang), border-color var(--overgang); } } /* ── provisie.css ── */ /* ===================================================================== provisie.css — Finance › Provisie (provisie-motor v2, 10-10-2026). Herbouwd op de Werkbank-tokens uit casa360-stijl.css: geen oude --c-*-namen meer, geen literals. Kleur is betekenis: --goed (in orde, afgerekend), --let (wacht, ontbreekt), --stop (retour, te laat). Knoppen komen uit de familie (.btn); schaduw alleen via de tokens. ===================================================================== */ .pr { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; display: grid; gap: 12px; min-width: 0; align-content: start; } .pr-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .pr-kop h1 { margin: 2px 0 4px; font-size: 1.35rem; } .pr-kop p { margin: 0; font-size: .8rem; color: var(--ink2); max-width: 76ch; line-height: 1.5; } /* gelabelde keuzes in de kop en boven een lijst */ .pr-maand, .pr-veld { display: grid; gap: 4px; min-width: 0; } .pr-maand select, .pr-veld input { height: 32px; border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein); padding: 0 9px; background: var(--kaart); color: var(--ink); font: 500 .8rem var(--font-ui); min-width: 170px; } .pr-veld input { font-family: var(--font-mono); width: 150px; min-width: 0; } /* het statuspunt: een stand, geen icoon */ .pr-punt { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--grijs2); margin-right: 7px; } .pr-punt.is-stop { background: var(--stop); } .pr-punt.is-let { background: var(--let); } .pr-punt.is-goed { background: var(--goed); } .pr .is-stop { color: var(--stop-d, var(--stop)); } .pr .is-let { color: var(--let-d, var(--let)); } .pr .is-stil { color: var(--ink3); } .pr-punt.is-stop, .pr-punt.is-let, .pr-punt.is-goed, .pr-punt.is-stil { color: inherit; } .pr-fijn { font-size: .66rem; color: var(--ink3); font-weight: 500; } .pr-weggelaten { font-size: .7rem; color: var(--ink3); margin-top: -6px; } .pr-kalender { display: flex; align-items: center; font-size: .74rem; color: var(--ink2); } .pr-kalender.is-laat { color: var(--stop-d, var(--stop)); font-weight: 600; } .pr-fout { padding: 14px 16px; font-size: .8rem; color: var(--ink); border-color: var(--stop); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } /* aandachtspunten */ .pr-aandacht { padding: 12px 16px; display: grid; gap: 6px; } .pr-aandacht__rij { display: flex; align-items: center; gap: 4px; font-size: .78rem; color: var(--ink); min-width: 0; } .pr-aandacht__rij span { flex: 1; min-width: 0; } /* bezwaren */ .pr-bezwaren { padding: 12px 16px; display: grid; gap: 8px; border-color: var(--let); } .pr-bezwaar { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; padding-top: 8px; border-top: var(--lijndikte) solid var(--lijn); flex-wrap: wrap; } .pr-bezwaar__wat { display: grid; gap: 2px; min-width: 0; flex: 1 1 320px; } .pr-bezwaar__wat strong { font-size: .8rem; } .pr-bezwaar__wat span { font-size: .78rem; color: var(--ink); } .pr-bezwaar__wat em { font-style: normal; font-size: .64rem; color: var(--ink3); } .pr-bezwaar__acties { display: flex; gap: 6px; } .pr-bezwaar__stil { font-style: normal; font-size: .7rem; color: var(--ink3); } /* grafiek en rekenhulp */ .pr-tweekolom { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; } .pr-grafiek, .pr-simulator { padding: 14px 16px; display: grid; gap: 10px; align-content: start; min-width: 0; } .pr-balken { display: flex; align-items: flex-end; gap: 12px; height: 130px; } .pr-balk { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; } .pr-balk span { font-size: .58rem; color: var(--ink2); white-space: nowrap; } .pr-balk i { width: 100%; max-width: 52px; border-radius: var(--radius-klein) var(--radius-klein) 2px 2px; background: var(--grijs2); } .pr-balk i.is-nu { background: var(--ink); } .pr-balk em { font: 600 .62rem var(--font-ui); font-style: normal; color: var(--ink3); } .pr-simrij { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; } .pr-simuit { display: grid; gap: 2px; min-width: 0; } .pr-simuit strong { font-size: 1.3rem; } .pr-simuit em { font-style: normal; font-size: .7rem; color: var(--ink2); } .pr-simnoot { font-size: .68rem; color: var(--ink3); line-height: 1.5; } /* de lat boven een lijst: zoeken, filter, telling, handelingen */ .pr-lijstkop { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; } .pr-telling { margin-left: auto; align-self: center; font-size: .64rem; color: var(--ink3); } /* rijen */ .pr-rij, .pr-ledrij, .pr-regrij, .pr-runrij, .pr-payrij { display: grid; gap: 10px; align-items: center; padding: 9px 14px; border-top: var(--lijndikte) solid var(--lijn); font-size: .76rem; color: var(--ink); min-width: 0; } .pr-rij > *, .pr-ledrij > *, .pr-regrij > *, .pr-runrij > *, .pr-payrij > * { min-width: 0; overflow-wrap: anywhere; } .pr-rij { grid-template-columns: minmax(0, 1.6fr) 110px repeat(5, minmax(72px, 96px)) 128px; width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; text-align: left; font-family: inherit; } .pr-rij.is-klikbaar { cursor: pointer; transition: background var(--overgang, 160ms) ease; } .pr-rij.is-klikbaar:hover { background: var(--vlak); } .pr-rij.is-klikbaar:focus-visible { outline: var(--focus-ring, 3px solid var(--accent)); outline-offset: -3px; } .pr-ledrij { grid-template-columns: 86px minmax(0, 1.1fr) 120px 86px 96px 104px minmax(0, 1.6fr) auto; } .pr-ledrij.is-stil { background: var(--vlak); } .pr-regrij { grid-template-columns: minmax(0, 1.1fr) 110px minmax(0, 1.5fr) 92px 92px 108px minmax(0, 1.3fr) auto; } .pr-runrij { grid-template-columns: minmax(0, 1.2fr) 110px 140px minmax(0, 1.4fr) 84px 110px; } .pr-payrij { grid-template-columns: minmax(0, 1.5fr) 110px 100px 100px 110px 120px auto; } .pr-rij--kop, .pr-ledrij--kop, .pr-regrij--kop, .pr-runrij--kop, .pr-payrij--kop { border-top: 0; font: 600 .58rem var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ink3); padding-top: 10px; padding-bottom: 8px; } .pr-ledrij__per { font-size: .72rem; color: var(--ink2); line-height: 1.45; } .pr-ledrij__acties { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; } .pr-ledrij__ord { font-weight: 600; } .pr-versierij { display: grid; grid-template-columns: 54px 100px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 14px; border-top: var(--lijndikte) solid var(--lijn); font-size: .76rem; } .pr-versierij:first-child { border-top: 0; } .pr-voetnoot { font: 500 .7rem/1.55 var(--font-ui); color: var(--ink3); max-width: 96ch; display: flex; align-items: baseline; } /* saldo-kaartjes in het grootboek */ .pr-saldi { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .pr-saldo { padding: 12px 14px; display: grid; gap: 2px; align-content: start; } .pr-saldo span { font: 600 .6rem var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ink3); } .pr-saldo strong { font-size: 1.05rem; } .pr-saldo em { font-style: normal; font-size: .68rem; color: var(--ink2); line-height: 1.45; } /* regelkaarten */ .pr-regelgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; } .pr-regelkaart { padding: 14px 16px; display: grid; gap: 6px; align-content: start; } .pr-regelkaart__kop { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; margin-bottom: 4px; } .pr-regelkaart__kop > div { display: grid; gap: 2px; min-width: 0; } .pr-regelkaart__kop strong { font-size: .84rem; } .pr-regelkaart__kop span { font: 500 .62rem var(--font-mono); color: var(--ink3); } .pr-paar { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 5px 0; border-top: var(--lijndikte) solid var(--lijn); font-size: .76rem; color: var(--ink2); } .pr-paar strong { color: var(--ink); font-size: .76rem; text-align: right; } .pr-regelinfo { display: flex; align-items: baseline; font-size: .7rem; color: var(--ink2); line-height: 1.5; padding-top: 6px; } /* het jaar */ .pr-jaarwrap { overflow-x: auto; } .pr-jaar { width: 100%; border-collapse: collapse; font-size: .74rem; min-width: 980px; } .pr-jaar th, .pr-jaar td { padding: 8px 10px; border-top: var(--lijndikte) solid var(--lijn); text-align: right; white-space: nowrap; } .pr-jaar thead th { border-top: 0; font: 600 .58rem var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ink3); } .pr-jaar th[scope="row"], .pr-jaar thead th:first-child { text-align: left; font-weight: 600; white-space: normal; } .pr-cel { background: none; border: 0; padding: 2px 4px; margin: -2px -4px; font: inherit; color: inherit; cursor: pointer; border-radius: var(--radius-klein); } .pr-cel:hover { background: var(--vlak); } /* de drie stappen van de uitbetaling */ .pr-stappen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } .pr-stap { padding: 14px 16px; display: grid; gap: 8px; align-content: start; } .pr-stap__kop { display: flex; gap: 10px; align-items: center; } .pr-stap__kop strong { font-size: .86rem; } .pr-stap__nr { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .68rem; background: var(--grijs); color: var(--ink2); flex: none; } .pr-stap.is-actief { border-color: var(--ink); } .pr-stap.is-actief .pr-stap__nr { background: var(--knop); color: var(--knop-ink); } .pr-stap.is-klaar .pr-stap__nr { background: var(--goed); color: var(--kaart); } .pr-stap__lijf { font-size: .76rem; color: var(--ink2); line-height: 1.55; } .pr-stap__acties { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } @media (max-width: 1080px) { .pr { padding: 18px 16px 60px; } .pr-tweekolom { grid-template-columns: 1fr; } .pr-rij { grid-template-columns: minmax(0, 1.4fr) 96px repeat(2, minmax(64px, 88px)) 110px; } .pr-rij > :nth-child(3), .pr-rij > :nth-child(6), .pr-rij > :nth-child(7) { display: none; } .pr-ledrij, .pr-regrij, .pr-runrij, .pr-payrij { grid-template-columns: 1fr 1fr; } .pr-ledrij--kop, .pr-regrij--kop, .pr-runrij--kop, .pr-payrij--kop { display: none; } } @media (prefers-reduced-motion: reduce) { .pr-rij.is-klikbaar { transition: none; } } /* teams (teamprovisie) en de stand Maand · Jaar op de tab Provisie */ .pr-kop__rechts { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; } .pr-zicht { display: inline-flex; border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein); overflow: hidden; background: var(--kaart); } .pr-zicht__knop { appearance: none; border: 0; background: none; padding: 0 14px; height: 32px; font: 600 .78rem var(--font-ui); color: var(--ink2); cursor: pointer; } .pr-zicht__knop + .pr-zicht__knop { border-left: var(--lijndikte) solid var(--lijn2); } .pr-zicht__knop.is-actief { background: var(--vlak); color: var(--ink); } .pr-zicht__knop:focus-visible { outline: var(--focus-ring); outline-offset: -3px; } .pr-telling--links { margin-left: 0; margin-right: auto; } .pr-team { padding: 14px 16px; display: grid; gap: 8px; } .pr-teamcijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 24px; } .pr-teamrij { display: grid; grid-template-columns: minmax(0, 1.6fr) 90px repeat(3, minmax(90px, 130px)); gap: 10px; align-items: center; padding: 7px 0; border-top: var(--lijndikte) solid var(--lijn); font-size: .76rem; } .pr-teamrij--kop { border-top: 0; font: 600 .58rem var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ink3); padding-bottom: 4px; } .pr-teamleden { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding-top: 6px; border-top: var(--lijndikte) solid var(--lijn); } /* ── ctrl.css ── */ /* ===================================================================== ctrl.css — module 4.6 · Controle & poorten (ctrl-) Uitsluitend tokens uit casa360-tokens.css; diepte via casa360-diepte. ===================================================================== */ /* Module-wortel: zelfde pagina-marge als de overige modules (fix 14-07-2026) */ .ctrl { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; } .ctrl-knop { padding: 8px 13px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 10px; background: var(--c-creme); color: var(--c-ink); font: 600 .7rem var(--font-ui); cursor: pointer; } .ctrl-knop--primair { background: var(--gradient-primair); border-color: var(--c-groen-d); color: var(--knop-ink); box-shadow: var(--schaduw-knop); } .ctrl-knop--fiat { background: var(--c-amber); border-color: var(--c-amber); color: var(--knop-ink); } .ctrl-knop--klein { padding: 5px 10px; font-size: .62rem; } .kicker.is-rood { color: var(--c-rood); } .kicker.is-amber { color: var(--c-amber); } /* ---- actielijst ---- */ .ctrl-vandaagkop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; } .ctrl-vandaagkop h2 { margin: 3px 0 2px; font-size: 1.15rem; } .ctrl-sub { font: 500 .7rem var(--font-ui); color: var(--c-ink-2); } .ctrl-actie { display: grid; grid-template-columns: 52px 1fr auto 24px; gap: 14px; align-items: center; width: 100%; padding: 13px 16px; border: 0; border-bottom: var(--lijndikte) solid var(--c-lijn); background: none; text-align: left; cursor: pointer; font: inherit; } .ctrl-actie:last-child { border-bottom: 0; } .ctrl-actie:hover { background: var(--c-creme); } .ctrl-actie__n { font-size: 1.3rem; font-weight: 700; } .ctrl-actie__n.is-rood { color: var(--c-rood); } .ctrl-actie__n.is-amber { color: var(--c-amber); } .ctrl-actie__n.is-groen-licht { color: var(--c-groen); } .ctrl-actie div { display: flex; flex-direction: column; } .ctrl-actie div strong { font: 700 .78rem var(--font-ui); } .ctrl-actie div span { font: 500 .66rem var(--font-ui); color: var(--c-ink-2); } .ctrl-actie em { font-style: normal; color: var(--c-ink-3); } /* ---- WVB-poort ---- */ .ctrl-donker { padding: 16px 20px; border-radius: var(--radius); background: var(--donker, var(--c-ink)); color: var(--c-creme); margin-bottom: 16px; box-shadow: var(--schaduw-tegel); } .ctrl-donker .kicker { color: var(--c-paneel-2); opacity: .7; } .ctrl-donker strong { display: block; font: 700 .95rem var(--font-ui); margin: 5px 0 4px; } .ctrl-donker p { margin: 0; font: 400 .76rem/1.55 var(--font-ui); opacity: .85; max-width: 88ch; } .ctrl-wvbkaart { padding: 15px 18px; margin-bottom: 14px; border-left: 3px solid var(--c-lijn-2); } .ctrl-wvbkaart.is-groen { border-left-color: var(--c-groen); } .ctrl-wvbkaart.is-rood { border-left-color: var(--c-rood); } .ctrl-wvbkaart.is-amber { border-left-color: var(--c-amber); } .ctrl-wvbkaart__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 11px; } .ctrl-wvbkaart__kop strong { font: 700 .82rem var(--font-ui); display: block; } .ctrl-wvbkaart__kop span { font: 500 .66rem var(--font-ui); color: var(--c-ink-2); } .ctrl-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; } .ctrl-check { display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px; border-radius: 10px; background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); } .ctrl-check i { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 .64rem var(--font-mono); font-style: normal; flex: none; } .ctrl-check.is-groen i { background: var(--c-groen-t); color: var(--c-groen-d); } .ctrl-check.is-rood i { background: var(--c-rood-t); color: var(--c-rood); } .ctrl-check.is-amber i { background: var(--c-amber-t); color: var(--c-amber); } .ctrl-check div { display: flex; flex-direction: column; } .ctrl-check strong { font: 600 .7rem var(--font-ui); } .ctrl-check span { font: 500 .62rem/1.4 var(--font-ui); color: var(--c-ink-2); } .ctrl-poortbalk { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 13px; border-radius: 10px; font: 600 .72rem var(--font-ui); } .ctrl-poortbalk.is-groen { background: var(--c-groen-t); color: var(--c-groen-d); } .ctrl-poortbalk.is-rood { background: var(--c-rood-t); color: var(--c-rood); } .ctrl-poortbalk.is-amber { background: var(--c-amber-t); color: var(--c-amber); } .ctrl-constraint { display: block; margin-top: 8px; font: 500 .64rem var(--font-ui); font-style: normal; color: var(--c-rood); } /* ---- margekaart ---- */ .ctrl-margetabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .ctrl-margetab { display: flex; flex-direction: column; gap: 1px; padding: 9px 14px; text-align: left; cursor: pointer; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 12px; background: var(--c-creme); font: inherit; } .ctrl-margetab.is-onder { border-color: var(--c-rood); background: var(--c-rood-t); } .ctrl-margetab.is-actief { border-color: var(--c-ink); } .ctrl-margetab strong { font: 700 .72rem var(--font-mono); } .ctrl-margetab span { font: 500 .62rem var(--font-ui); color: var(--c-ink-2); } .ctrl-margetab em { font-style: normal; font-size: .66rem; font-weight: 700; } .ctrl-margegrid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: start; } .ctrl-margekaart { padding: 15px 18px; } .ctrl-margekaart__kop { margin-bottom: 10px; } .ctrl-margekaart__kop strong { display: block; font: 700 .84rem var(--font-ui); } .ctrl-margekaart__kop span { font: 500 .66rem var(--font-ui); color: var(--c-ink-2); } .ctrl-margerij { display: grid; grid-template-columns: 1fr auto 110px; gap: 10px; align-items: center; padding: 7px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); font: 500 .72rem var(--font-ui); } .ctrl-margerij strong { text-align: right; } .ctrl-margerij.is-som { font-weight: 700; } .ctrl-margerij.is-kosten strong { color: var(--c-rood); } .ctrl-margebox { margin-top: 12px; padding: 13px 15px; border-radius: 12px; display: flex; flex-direction: column; gap: 4px; } .ctrl-margebox.is-groen { background: var(--c-groen-t); } .ctrl-margebox.is-rood { background: var(--c-rood-t); } .ctrl-margebox span { font: 500 .66rem var(--font-ui); color: var(--c-ink-2); } .ctrl-margebox strong { font-size: 1.15rem; } .ctrl-margebox.is-groen strong { color: var(--c-groen-d); } .ctrl-margebox.is-rood strong { color: var(--c-rood); } .ctrl-margezij { display: flex; flex-direction: column; gap: 12px; } .ctrl-paneel { padding: 13px 16px; display: flex; flex-direction: column; gap: 7px; } .ctrl-paneel.is-rood { border-left: 3px solid var(--c-rood); } .ctrl-paneel.is-groen { border-left: 3px solid var(--c-groen); } .ctrl-paneel.is-amber { border-left: 3px solid var(--c-amber); } .ctrl-paneel strong { font: 700 .76rem var(--font-ui); } .ctrl-paneel p { margin: 0; font: 500 .68rem/1.55 var(--font-ui); color: var(--c-ink-2); } .ctrl-paneel .ctrl-knop { align-self: flex-start; } .ctrl-legenda { display: flex; align-items: center; gap: 8px; font: 500 .68rem var(--font-ui); color: var(--c-ink-2); } /* ---- geldstromen ---- */ .ctrl-intro { margin: 0 0 14px; font: 500 .76rem/1.55 var(--font-ui); color: var(--c-ink-2); max-width: 72ch; } .ctrl-flowgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .ctrl-flow { padding: 15px 17px; display: flex; flex-direction: column; gap: 9px; border-top: 3px solid var(--c-lijn-2); } .ctrl-flow.is-groen { border-top-color: var(--c-groen); } .ctrl-flow.is-rood { border-top-color: var(--c-rood); } .ctrl-flow__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .ctrl-flow__kop strong { font: 700 .82rem var(--font-ui); display: block; } .ctrl-flow__kop span { font: 500 .64rem var(--font-ui); color: var(--c-ink-2); } .ctrl-flow__regel { display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border-radius: 10px; background: var(--c-paneel); font: 600 .68rem/1.45 var(--font-ui); } .ctrl-flow__regel em { font-style: normal; } .ctrl-flow__regel .is-groen, em.is-groen { color: var(--c-groen-d); } .ctrl-flow__regel .is-rood, em.is-rood { color: var(--c-rood); } .ctrl-flowitem { display: grid; grid-template-columns: 12px 1fr 90px; gap: 10px; align-items: center; padding: 6px 0; } .ctrl-flowitem i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-lijn-2); } .ctrl-flowitem i.is-groen { background: var(--c-groen); } .ctrl-flowitem i.is-rood { background: var(--c-rood); } .ctrl-flowitem i.is-amber { background: var(--c-amber); } .ctrl-flowitem i.is-groen-licht { background: var(--c-groen); opacity: .5; } .ctrl-flowitem div { display: flex; flex-direction: column; } .ctrl-flowitem strong { font: 600 .72rem var(--font-ui); } .ctrl-flowitem span { font: 500 .62rem var(--font-ui); } .ctrl-flowitem span.is-groen { color: var(--c-groen-d); } .ctrl-flowitem span.is-rood { color: var(--c-rood); } .ctrl-flowitem span.is-amber { color: var(--c-amber); } .ctrl-flowitem span.is-groen-licht { color: var(--c-groen); } .ctrl-flowitem > strong.mono { text-align: right; } .ctrl-flowreden { padding: 8px 11px; border-radius: 9px; background: var(--c-rood-t); color: var(--c-rood); font: 600 .66rem var(--font-ui); } .ctrl-flow .ctrl-knop--klein { align-self: flex-start; } /* ---- afwijkingen ---- */ .ctrl-afwrij { display: grid; grid-template-columns: 44px 1fr auto; gap: 15px; align-items: center; width: 100%; padding: 14px 17px; margin-bottom: 12px; text-align: left; cursor: pointer; font: inherit; border: var(--lijndikte) solid var(--c-lijn); } .ctrl-afwicoon { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; } .ctrl-afwicoon.is-rood { background: var(--c-rood-t); color: var(--c-rood); } .ctrl-afwicoon.is-amber { background: var(--c-amber-t); color: var(--c-amber); } .ctrl-afwicoon.is-groen-licht { background: var(--c-groen-t); color: var(--c-groen); } .ctrl-afwrij__mid { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .ctrl-afwrij__mid > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ctrl-afwrij__mid > span { font: 500 .7rem var(--font-ui); color: var(--c-ink-2); } .ctrl-afwrij__mid em { font-style: normal; font: 600 .66rem var(--font-ui); } .ctrl-afwrij__mid em.is-rood { color: var(--c-rood); } .ctrl-afwrij__mid em.is-amber { color: var(--c-amber); } .ctrl-afwrij__mid em.is-groen-licht { color: var(--c-groen); } .ctrl-afwrij__badge { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; } .ctrl-afwrij__badge i { width: 22px; height: 22px; border-radius: 50%; border: var(--lijndikte) solid var(--c-lijn-2); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: .7rem; color: var(--c-ink-2); } /* ---- adviesomzet ---- */ .ctrl-advieskop { margin-bottom: 12px; } .ctrl-advieskop h2 { margin: 4px 0 0; font-size: 1.1rem; } .ctrl-advrij { display: grid; grid-template-columns: 60px 1.5fr 1.1fr 96px 96px; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); font: 500 .72rem var(--font-ui); } .ctrl-advrij:last-child { border-bottom: 0; } .ctrl-advrij--kop { font: 600 .58rem var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-3); background: var(--c-paneel); } .ctrl-advrij > div strong { font: 600 .74rem var(--font-ui); } .ctrl-advrij__twijfel { color: var(--c-ink-2); font-size: .68rem; } .ctrl-potbalk { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .ctrl-potbalk i { display: block; height: 7px; max-width: 120px; border-radius: var(--radius-pill); background: var(--c-lijn-2); } .ctrl-potbalk i.is-groen { background: var(--c-groen); } .ctrl-potbalk i.is-ink { background: var(--c-ink-2); } .ctrl-potbalk span { font-size: .64rem; } /* ---- auditlog ---- */ .ctrl-auditkaart { padding: 0; overflow: hidden; max-width: 860px; } .ctrl-auditkop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: var(--lijndikte) solid var(--c-lijn); } .ctrl-auditkop > div { display: flex; flex-direction: column; gap: 3px; } .ctrl-audittitel { font: 700 .9rem var(--font-ui); } .ctrl-auditkop span { font: 500 .68rem var(--font-ui); color: var(--c-ink-2); } .ctrl-audittijdlijn { padding: 16px 22px; } .ctrl-audittijdlijn > .kicker { display: block; margin-bottom: 14px; } .ctrl-auditrij { display: grid; grid-template-columns: 20px 1fr; gap: 13px; } .ctrl-auditlijn { display: flex; flex-direction: column; align-items: center; } .ctrl-auditlijn i { width: 12px; height: 12px; border-radius: 50%; flex: none; } .ctrl-auditlijn i.is-groen { background: var(--c-groen); outline: 3px solid var(--c-groen-t); } .ctrl-auditlijn i.is-rood { background: var(--c-rood); outline: 3px solid var(--c-rood-t); } .ctrl-auditlijn i.is-amber { background: var(--c-amber); outline: 3px solid var(--c-amber-t); } .ctrl-auditlijn em { width: 2px; flex: 1; background: var(--c-lijn); margin: 3px 0; } .ctrl-auditrij__body { padding-bottom: 18px; display: flex; flex-direction: column; gap: 3px; } .ctrl-auditrij__body > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .ctrl-auditrij__body > div strong { font: 700 .76rem var(--font-ui); } .ctrl-auditrij__body > div span { font-size: .62rem; color: var(--c-ink-3); } .ctrl-auditwie { font: 500 .66rem var(--font-ui); color: var(--c-ink-2); } .ctrl-auditchange { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 4px; padding: 5px 10px; border-radius: 8px; background: var(--c-paneel); font-size: .64rem; } .ctrl-auditchange s { color: var(--c-ink-3); } .ctrl-auditreden { font: 500 .68rem var(--font-ui); color: var(--c-ink-2); margin-top: 3px; } @media (max-width: 1100px) { .ctrl-margegrid, .ctrl-flowgrid { grid-template-columns: 1fr; } .ctrl-checks { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: no-preference) { .ctrl-knop, .ctrl-actie, .ctrl-margetab, .ctrl-afwrij { transition: background .16s ease, box-shadow .16s ease; } } /* ---- FT-4.6a · auditlog op echte events: zoek/soort-filter/paginering ---- */ .ctrl-auditbalk { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; } .ctrl-zoekveld { flex: 1 1 260px; min-width: 200px; padding: 8px 12px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 10px; background: var(--c-creme); color: var(--c-ink); font: 500 .74rem var(--font-ui); } .ctrl-zoekveld:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; border-color: var(--c-groen-d); } .ctrl-auditstand { margin-left: auto; font-size: .64rem; color: var(--c-ink-3); } .ctrl-auditsoorten { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; } .ctrl-flt { padding: 5px 11px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius-klein); background: var(--c-creme); color: var(--c-ink-2); font: 600 .64rem var(--font-ui); cursor: pointer; } .ctrl-flt strong { font: 700 .64rem var(--font-mono); } .ctrl-flt:hover { border-color: var(--c-groen-d); } .ctrl-flt.is-actief { background: var(--c-groen-t); border-color: var(--c-groen-d); color: var(--c-groen-d); } .ctrl-flt:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; } .ctrl-auditdetail { font: 500 .68rem var(--font-ui); color: var(--c-ink-2); display: block; } .ctrl-auditpag { display: flex; gap: 8px; justify-content: center; margin: 12px 0 2px; } .ctrl-auditpag .ctrl-knop[disabled] { opacity: .4; cursor: not-allowed; } .ctrl-illustratief { margin: 0 0 14px; padding: 9px 14px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 10px; background: var(--c-paneel); color: var(--c-ink-2); font: 500 .68rem var(--font-ui); } /* V3 fase 6 · motor 3: poortenregister */ .prt-wortel { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 14px; } .prt-h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; } .prt-uitleg { color: var(--c-ink-2); font-size: 13.5px; max-width: 80ch; margin: -4px 0 0; } .prt-lijst { display: flex; flex-direction: column; gap: 10px; } .prt-kaart { text-align: left; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 13px 16px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; font-family: var(--font-ui); box-shadow: var(--schaduw-tegel); transition: border-color var(--overgang); } .prt-kaart:hover { border-color: var(--c-lijn-2); } .prt-kaart.heeft-overrides { border-left: 3px solid var(--c-amber); } .prt-kaart__kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .prt-naam { font-size: .74rem; font-weight: 700; color: var(--c-ink); letter-spacing: .04em; } .prt-bewaakt { font-size: .82rem; color: var(--c-ink); } .prt-meta { font-size: .62rem; color: var(--c-ink-3); } .prt-events { display: flex; flex-direction: column; gap: 6px; border-top: var(--lijndikte) solid var(--c-lijn); padding-top: 9px; margin-top: 3px; } .prt-event { display: grid; grid-template-columns: 84px 1fr auto; gap: 10px; font-size: .74rem; align-items: baseline; } .prt-event.is-override { color: var(--c-ink); background: var(--c-amber-t); border-radius: 8px; padding: 5px 8px; } .prt-event em { font-style: normal; color: var(--c-ink-2); } .prt-event__tijd, .prt-event__door { font-size: .62rem; color: var(--c-ink-3); } .prt-leeg { font-size: .74rem; color: var(--c-ink-3); } @media (prefers-reduced-motion: reduce) { .prt-kaart { transition: none; } } /* Schermronde stap 4 (29-09) · techniek en aanmeldingen staan standaard uit in het auditlog */ .ctrl-audittech { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--c-ink-2); cursor: pointer; } .ctrl-audittech input { width: 15px; height: 15px; accent-color: var(--accent); } /* ── personeel.css ── */ /* ===================================================================== personeel.css — module 5.1 · Mensen (personeelsdossier, verlof & verzuim, declaraties, hr-signalen, nmbrs-wachtrij). Uitsluitend tokens uit casa360-tokens.css; diepte via de vaste laag. ===================================================================== */ .pd { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; } .pd-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .pd-kop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; } .pd-kop p { margin: 0; max-width: 68ch; color: var(--c-ink-2); font-size: .82rem; line-height: 1.5; } /* ---- knoppen ---- */ .pd-knop { padding: 9px 14px; border-radius: 10px; cursor: pointer; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); color: var(--c-ink); font: 700 .78rem var(--font-ui); transition: background 160ms, border-color 160ms; } .pd-knop:hover { border-color: var(--c-ink-3); } .pd-knop--primair { background: var(--c-groen); border-color: var(--c-groen); color: var(--knop-ink); } .pd-knop--primair:hover { background: var(--c-groen-d); border-color: var(--c-groen-d); } .pd-knop--rood { border-color: var(--c-rood-t); color: var(--c-rood); } .pd-knop--klein { padding: 6px 11px; font-size: .72rem; border-radius: 8px; } .pd-knop.is-dicht { opacity: .55; cursor: not-allowed; } .pd-link { border: 0; background: none; padding: 0; cursor: pointer; font: 700 inherit var(--font-ui); color: var(--c-groen-d); text-decoration: underline; } .pd-hint { font-size: .72rem; color: var(--c-ink-3); align-self: center; } .pd-voetnoot { font-size: .74rem; color: var(--c-ink-2); line-height: 1.55; } /* Reconciliatie-banner (FT-5.3a): sluit scherm-roster aan op het HR-register */ .pd-reconcil { display: flex; align-items: center; gap: 10px; padding: 9px 14px; margin-bottom: 10px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 12px; background: var(--c-creme); font-size: .8rem; color: var(--c-ink-2); } .pd-reconcil i { font-style: normal; font-weight: 800; } .pd-reconcil strong { color: var(--c-ink); } .pd-reconcil .mono { margin-left: auto; color: var(--c-ink-3); white-space: nowrap; } .pd-reconcil.is-ok { border-color: var(--c-groen-t); } .pd-reconcil.is-ok i { color: var(--c-groen); } .pd-reconcil.is-let { border-color: var(--c-amber-t); } .pd-reconcil.is-let i { color: var(--c-amber); } .pd-leeg { padding: 18px; text-align: center; font: 600 .8rem var(--font-ui); color: var(--c-ink-3); margin: 0; } .pd-leeg--rij { padding: 22px; } .pd-balk { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } /* ---- dossier-layout ---- */ .pd-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; } .pd-lijst { padding: 12px; display: flex; flex-direction: column; gap: 4px; } .pd-lijst .kicker { padding: 8px 6px 6px; } .pd-lijst__kop { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; } .pd-zoek { width: 100%; padding: 9px 11px; border-radius: 10px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-creme); font: 600 .76rem var(--font-ui); color: var(--c-ink); } .pd-medrij { display: flex; align-items: center; gap: 10px; text-align: left; padding: 9px 10px; border-radius: 11px; border: 0; background: none; cursor: pointer; transition: background 160ms; } .pd-medrij:hover { background: var(--c-creme); } .pd-medrij.is-actief { background: var(--c-groen-t); } .pd-medrij i { width: 34px; height: 34px; flex: none; border-radius: 9px; font-style: normal; background: var(--c-terra-t); color: var(--c-terra-d); display: flex; align-items: center; justify-content: center; font: 700 .74rem var(--font-ui); } .pd-medrij__wie { flex: 1; min-width: 0; display: flex; flex-direction: column; } .pd-medrij__wie strong { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pd-medrij__wie em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-rood); flex: none; } .pd-dossier { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .pd-doskop { display: flex; align-items: center; gap: 14px; padding: 16px 18px; flex-wrap: wrap; } .pd-avatar { width: 54px; height: 54px; flex: none; border-radius: 13px; font-style: normal; background: var(--c-terra-t); color: var(--c-terra-d); display: flex; align-items: center; justify-content: center; font: 700 1.15rem var(--font-ui); } .pd-doskop__wie { flex: 1; min-width: 200px; } .pd-doskop__wie h2 { margin: 0; font-size: 1.15rem; } .pd-doskop__wie span { font-size: .76rem; color: var(--c-ink-2); } .pd-nmbrstag { font-size: .64rem; color: var(--c-ink-3); background: var(--c-creme); padding: 4px 10px; border-radius: 6px; } .pd-onboarding { padding: 14px 16px; border-color: var(--c-groen); background: var(--c-groen-t); display: flex; flex-direction: column; gap: 7px; } .pd-onboarding__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .pd-onboarding p { margin: 0 0 4px; font-size: .74rem; color: var(--c-ink-2); } .pd-onbtaak { display: flex; align-items: center; gap: 11px; text-align: left; cursor: pointer; padding: 10px 12px; border-radius: 10px; border: 0; background: var(--kaart); font: 600 .78rem var(--font-ui); color: var(--c-ink); } .pd-onbtaak i { width: 20px; height: 20px; flex: none; border-radius: 6px; font-style: normal; border: 1.5px solid var(--c-lijn-2); background: var(--kaart); color: var(--knop-ink); display: flex; align-items: center; justify-content: center; } .pd-onbtaak.is-klaar { color: var(--c-ink-3); text-decoration: line-through; } .pd-onbtaak.is-klaar i { background: var(--c-groen); border-color: var(--c-groen); } .pd-tabs { display: flex; gap: 5px; overflow-x: auto; padding: 5px; background: var(--c-paneel); border-radius: 12px; } .pd-tab { white-space: nowrap; padding: 8px 14px; border-radius: 9px; cursor: pointer; border: var(--lijndikte) solid transparent; background: none; font: 600 .76rem var(--font-ui); color: var(--c-ink-2); } .pd-tab.is-actief { background: var(--kaart); border-color: var(--c-lijn); color: var(--c-ink); font-weight: 700; } .pd-tabkaart { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; } .pd-gegevens { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; } /* een gegeven: het label in een vaste kolom, de waarde ernaast; zo beginnen alle waarden onder elkaar (Michiel 14-10: «de uitlijning klopt niet tussen naam en functie en wat er is ingevuld»). Smal: het label boven de waarde. */ .pd-veld { display: grid; grid-template-columns: clamp(7rem, 34%, 11rem) minmax(0, 1fr); column-gap: 14px; align-items: baseline; min-width: 0; } .pd-veld > .kicker { overflow-wrap: anywhere; } .pd-veld strong { font-size: .84rem; overflow-wrap: anywhere; } @media (max-width: 640px) { .pd-gegevens { grid-template-columns: 1fr; } .pd-veld { grid-template-columns: 1fr; row-gap: 2px; } } /* een toelichting onder een blok staat links, niet midden in de kaart */ .pd-tabkaart > .pd-hint { align-self: flex-start; } .pd-tabvoet { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; flex-wrap: wrap; } .pd-contractkop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .pd-contractkop strong { font-size: .95rem; display: block; } .pd-contractkop span { font-size: .76rem; color: var(--c-ink-2); } .pd-proeftijd { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 11px; background: var(--c-amber-t); font-size: .78rem; } .pd-contractacties { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; } .pd-hist { display: flex; flex-direction: column; gap: 6px; } .pd-histrij { display: flex; justify-content: space-between; gap: 12px; padding: 10px 13px; border-radius: 9px; background: var(--c-creme); font: 600 .76rem var(--font-ui); color: var(--c-ink-2); } .pd-docs { display: flex; flex-direction: column; gap: 6px; } .pd-docrij { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 10px; background: var(--c-creme); font-size: .78rem; } .pd-docrij span:first-child { flex: 1; min-width: 0; font-weight: 600; } .pd-docrij em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); } .pd-docrij.is-ingenomen span:first-child { color: var(--c-ink-3); text-decoration: line-through; } .pd-verlofgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .pd-saldo { padding: 16px 18px; display: flex; flex-direction: column; gap: 3px; } .pd-saldo strong { font-size: 1.5rem; } .pd-saldo span { font-size: .72rem; color: var(--c-ink-2); line-height: 1.4; } .pd-verzuimnote { padding: 13px 16px; font-size: .78rem; border-color: var(--c-terra); } .pd-avg { padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; background: var(--c-paneel); } .pd-avg i { font-style: normal; font: 800 1rem var(--font-mono); color: var(--c-ink-2); } .pd-avg strong { display: block; font-size: .8rem; margin-bottom: 2px; } .pd-avg span { font-size: .74rem; color: var(--c-ink-2); line-height: 1.5; } .pd-certrij { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 11px; border: var(--lijndikte) solid var(--c-lijn); font-size: .8rem; } .pd-certrij strong { flex: 1; } .pd-certrij.is-warn { border-color: var(--c-amber); background: var(--c-amber-t); } .pd-tijdlijn { display: flex; flex-direction: column; } .pd-tlrij { display: flex; gap: 13px; } .pd-tlrij i { width: 11px; flex: none; position: relative; } .pd-tlrij i::before { content: ""; position: absolute; top: 4px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--c-terra); } .pd-tlrij:not(:last-child) i::after { content: ""; position: absolute; top: 17px; bottom: -4px; left: 5px; width: 2px; background: var(--c-terra-t); } .pd-tlrij div { padding-bottom: 16px; } .pd-tlrij strong { display: block; font-size: .8rem; } .pd-tlrij em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); } /* ---- verlof & verzuim ---- */ .pd-blok { padding: 16px 18px; display: flex; flex-direction: column; gap: 9px; } .pd-blok__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .pd-blok__kop strong { font-size: .92rem; } .pd-tweekolom { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; } .pd-vrij { display: flex; align-items: center; gap: 13px; padding: 12px 14px; border-radius: 12px; border: var(--lijndikte) solid var(--c-lijn); flex-wrap: wrap; } .pd-vrij__wie { flex: 1; min-width: 180px; } .pd-vrij__wie strong { display: block; font-size: .82rem; } .pd-vrij__wie span { font-size: .74rem; color: var(--c-ink-2); } .pd-kal { display: grid; grid-template-columns: 130px repeat(5, 1fr); gap: 6px; align-items: center; } .pd-kal--kop { font-size: .6rem; color: var(--c-ink-3); text-align: center; } .pd-kal--kop span:first-child { text-align: left; } .pd-kal__naam { font: 600 .76rem var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pd-cel { height: 30px; border-radius: 6px; font: 700 .64rem var(--font-ui); font-style: normal; display: flex; align-items: center; justify-content: center; background: var(--c-creme); color: var(--c-lijn-2); } .pd-cel.is-v { background: var(--c-groen-t); color: var(--c-groen-d); } .pd-cel.is-z { background: var(--c-rood-t); color: var(--c-rood); } .pd-cel.is-l { background: var(--c-paneel); color: var(--c-ink-2); } .pd-legenda { display: flex; gap: 14px; font: 600 .66rem var(--font-ui); color: var(--c-ink-2); margin-top: 4px; } .pd-legenda .is-v { color: var(--c-groen-d); } .pd-legenda .is-z { color: var(--c-rood); } .pd-legenda .is-l { color: var(--c-ink-3); } .pd-verzuim { padding: 13px 15px; border-radius: 12px; border: var(--lijndikte) solid var(--c-amber); background: var(--c-amber-t); display: flex; flex-direction: column; gap: 5px; font-size: .76rem; } .pd-verzuim__kop { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .pd-verzuim__kop strong { font-size: .84rem; } .pd-verzuim__kop em { font-style: normal; font-size: .68rem; color: var(--c-ink-2); } .pd-verzuim__fase { font-weight: 700; color: var(--c-amber); } .pd-verzuim .is-amber { font-style: normal; color: var(--c-amber); font-weight: 700; } .pd-verzuim__acties { display: flex; gap: 8px; margin-top: 5px; } .pd-pwlijst { display: flex; flex-direction: column; gap: 7px; } .pd-pwrij { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; background: var(--c-creme); font-size: .78rem; } .pd-pwrij i { width: 20px; height: 20px; flex: none; border-radius: 50%; font-style: normal; border: 1.5px solid var(--c-lijn-2); background: var(--kaart); color: var(--knop-ink); display: flex; align-items: center; justify-content: center; } .pd-pwrij.is-gedaan i { background: var(--c-groen); border-color: var(--c-groen); } .pd-pwrij.is-volgende { background: var(--c-amber-t); } .pd-pwrij.is-volgende i { border-color: var(--c-amber); } .pd-pwrij .mono { font-size: .66rem; color: var(--c-ink-3); width: 44px; flex: none; } .pd-pwrij strong { display: block; font-size: .78rem; } .pd-pwrij em.is-amber { font-style: normal; font-size: .68rem; color: var(--c-amber); font-weight: 700; } .pd-regelset { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; } .pd-regelcellen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .pd-regelcellen > div { padding: 11px 13px; border-radius: 10px; background: var(--c-creme); display: flex; flex-direction: column; gap: 2px; } .pd-regelcellen span { font-size: .68rem; color: var(--c-ink-3); } .pd-regelcellen strong { font-size: .88rem; } /* ---- declaraties ---- */ .pd-declrij { display: grid; grid-template-columns: 52px 150px 150px minmax(0, 1fr) 90px 100px 190px; gap: 12px; align-items: center; padding: 11px 16px; font-size: .78rem; border-bottom: var(--lijndikte) solid var(--c-lijn); } .pd-declrij:last-child { border-bottom: 0; } .pd-declrij--kop { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); } .pd-declrij__oms { color: var(--c-ink-2); min-width: 0; } .pd-declrij__acties { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; } .pd-declrij__bon { cursor: pointer; border: 1px solid var(--c-lijn); background: var(--c-paneel); font: inherit; font-size: .68rem; } .pd-declrij__bon:hover { border-color: var(--c-groen-d); } .pd-declrij__btw { display: block; font-style: normal; font-size: .62rem; font-weight: 400; color: var(--c-ink-3); } .pd-declrij em.mono { font-style: normal; font-size: .68rem; color: var(--c-ink-3); } /* ---- signalen ---- */ .pd-sigkop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .pd-sigtellers { display: flex; gap: 8px; } .pd-sigtellers .chip { font-size: .72rem; padding: 5px 13px; } .pd-sorteer { display: flex; gap: 4px; padding: 4px; background: var(--c-paneel); border-radius: 10px; } .pd-flt { padding: 7px 13px; border-radius: 8px; cursor: pointer; border: 0; background: none; font: 600 .74rem var(--font-ui); color: var(--c-ink-2); } .pd-flt.is-actief { background: var(--kaart); color: var(--c-ink); font-weight: 700; } .pd-signaal { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-left: 4px solid var(--c-lijn-2); } .pd-signaal.is-err { border-left-color: var(--c-rood); } .pd-signaal.is-warn { border-left-color: var(--c-amber); } .pd-signaal.is-ok { border-left-color: var(--c-groen); } .pd-signaal i { width: 38px; height: 38px; flex: none; border-radius: 10px; font-style: normal; display: flex; align-items: center; justify-content: center; font-size: .9rem; background: var(--c-creme); color: var(--c-ink-2); } .pd-signaal.is-err i { background: var(--c-rood-t); color: var(--c-rood); } .pd-signaal.is-warn i { background: var(--c-amber-t); color: var(--c-amber); } .pd-signaal.is-ok i { background: var(--c-groen-t); color: var(--c-groen-d); } .pd-signaal__wat { flex: 1; min-width: 0; } .pd-signaal__wat strong { display: block; font-size: .82rem; } .pd-signaal__wat span { font-size: .74rem; color: var(--c-ink-2); } /* ---- nmbrs ---- */ .pd-koppeling { padding: 14px 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .pd-kopdot { color: var(--c-groen); font-size: .9rem; } .pd-kopdot.is-uit { color: var(--grijs2); } .pd-koppeling div { flex: 1; min-width: 220px; } .pd-koppeling strong { display: block; font-size: .86rem; } .pd-koppeling span { font-size: .74rem; color: var(--c-ink-2); } .pd-koppeling .mono { font-size: .64rem; color: var(--c-ink-3); } .pd-poortbalk { padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .pd-poorttekst { font-size: .78rem; color: var(--c-ink-2); } .pd-poorttekst.is-ok { color: var(--c-groen-d); font-weight: 700; } .pd-nmrij { display: grid; grid-template-columns: 32px 74px 52px 150px 130px minmax(0, 1fr) 96px; gap: 12px; align-items: center; padding: 10px 16px; font-size: .78rem; border-bottom: var(--lijndikte) solid var(--c-lijn); } .pd-nmrij:last-child { border-bottom: 0; } .pd-nmrij--kop { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); } .pd-nmrij__detail { color: var(--c-ink-2); min-width: 0; } .pd-nmrij.is-verzonden { color: var(--c-ink-3); } .pd-vink { width: 22px; height: 22px; border-radius: 6px; cursor: pointer; border: 1.5px solid var(--c-lijn-2); background: var(--kaart); color: var(--knop-ink); display: flex; align-items: center; justify-content: center; } .pd-vink.is-aan { background: var(--c-groen); border-color: var(--c-groen); } .pd-vinkvast { color: var(--c-groen); } /* blok H · een vinkje met tekst (formulier, boven de lijst); .pd-vink is het losse vakje van een checklist */ .pd-vinkrij { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--c-ink-2); cursor: pointer; } .pd-certrij.is-err { border-color: var(--c-rood); background: var(--c-rood-t); } .pd-preview { margin: 12px 22px 0; padding: 14px 16px; border-radius: 10px; background: var(--c-creme); font-size: .68rem; line-height: 1.6; white-space: pre-wrap; max-height: 220px; overflow: auto; } .pd-preview:empty { display: none; } /* ---- responsief ---- */ @media (max-width: 1080px) { .pd-grid, .pd-tweekolom { grid-template-columns: 1fr; } .pd-regelcellen { grid-template-columns: 1fr 1fr; } .pd-verlofgrid { grid-template-columns: 1fr; } .pd-declrij, .pd-nmrij { grid-template-columns: 1fr; gap: 4px; } .pd-declrij--kop, .pd-nmrij--kop { display: none; } } .pd-lijstacties { display: flex; gap: 8px; align-items: center; margin: 8px 0; flex-wrap: wrap; } .pd-knop--klein { font-size: 12px; padding: 6px 12px; } /* Poortwachter-kalender (E1a) */ .pd-pwrij { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--c-lijn); } .pd-pwrij:last-child { border-bottom: 0; } .pd-pwrij__wie { display: flex; gap: 10px; align-items: baseline; font-size: 13px; } .pd-pwrij__wie em { font-style: normal; font-size: 11.5px; color: var(--c-ink-2); } .pd-pwlijn { position: relative; height: 30px; background: color-mix(in srgb, var(--c-ink) 5%, var(--c-paneel)); border-radius: 99px; } .pd-pwmijl { position: absolute; top: 4px; display: flex; flex-direction: column; align-items: center; gap: 1px; transform: translateX(-50%); } .pd-pwmijl i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-ink-3); display: block; } .pd-pwmijl.is-gehad i { background: var(--c-groen-d); } .pd-pwmijl.is-nu i { background: var(--c-amber); outline: 3px solid color-mix(in srgb, var(--c-amber) 30%, transparent); } .pd-pwmijl em { font-size: 9px; color: var(--c-ink-2); } .pd-pwnu { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--c-terra); transform: translateX(-50%); border-radius: 2px; } .pd-pwvolgende { font-size: 12px; color: var(--c-ink-2); } .pd-pwvolgende.is-urgent { color: var(--c-terra); font-weight: 700; } .pd-pwvolgende em { font-style: normal; } /* ESS-mutaties (E1b) */ .pd-essrij { display: grid; grid-template-columns: 1.1fr auto 1.6fr auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--c-lijn); font-size: 13px; } .pd-essrij:last-child { border-bottom: 0; } .pd-essrij__wie { display: flex; flex-direction: column; } .pd-essrij__wie em { font-style: normal; font-size: 11px; color: var(--c-ink-2); } .pd-essrij__delta { font-size: 12px; } .pd-essrij__delta s { color: var(--c-ink-3); } .pd-essrij__acties { display: flex; gap: 6px; } /* Contract-kalender (E1c) */ .pd-ckmaand { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--c-lijn); } .pd-ckmaand:last-child { border-bottom: 0; } .pd-ckrij { display: grid; grid-template-columns: 1.4fr auto auto; gap: 12px; align-items: center; font-size: 13px; } .pd-ckrij.is-telaat { background: color-mix(in srgb, var(--c-rood) 5%, transparent); border-radius: 8px; padding: 4px 8px; } .pd-ckrij__wie { display: flex; flex-direction: column; } .pd-ckrij__wie em { font-style: normal; font-size: 11.5px; color: var(--c-ink-2); } .pd-contractkal { margin-top: 14px; } /* F3 · systeemtoegang-blok in het dossier (HR leidend) */ .pd-toegang { margin-top: 12px; } .pd-toegang__kop { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; } /* B6 · HR-zone (server-side afgeschermd) */ .pd-hrrij { display: grid; grid-template-columns: 160px 1fr auto auto auto auto; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: var(--lijndikte) solid var(--c-lijn); font: 500 .68rem var(--font-ui); } .pd-hrrij:last-child { border-bottom: 0; } /* B17 · verzuimdossiers (Poortwachter) */ .pd-vzrij { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 12px; align-items: center; border-top: 1px solid var(--c-lijn); padding: 10px 2px; } .pd-vzrij > div { display: flex; flex-direction: column; gap: 2px; } .pd-vzrij strong { font-size: .8rem; } .pd-vzrij > div span { font-size: .68rem; color: var(--c-ink-2); } .pd-vzrij .mono { font-size: .64rem; color: var(--c-ink-2); } .pd-vzrij.is-telaat { background: var(--c-rood-t); border-radius: 10px; padding: 10px; border-top: none; } /* B18 · loonwachtrij backend */ .pd-lnrij { display: grid; grid-template-columns: auto 160px auto 1fr auto; gap: 12px; align-items: center; border-top: 1px solid var(--c-lijn); padding: 9px 2px; } .pd-lnrij strong { font-size: .78rem; } .pd-lnrij span { font-size: .68rem; color: var(--c-ink-2); } .pd-poortbalk--strak { margin-top: 10px; border-top: 1px solid var(--c-lijn); padding-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 14px; } /* punt 9 · ESS-ziek-voormelding in de HR-wachtrij */ .pd-vzrij--voormelding { background: color-mix(in srgb, var(--c-amber-t) 45%, transparent); border-radius: 10px; padding: 10px; } /* punt 11 · urenstaten-kaart (nmbrsloon) */ .pd-urenrij { display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px; align-items: center; border-top: 1px solid var(--c-lijn); padding: 9px 2px; } .pd-urenrij__wie { display: flex; flex-direction: column; gap: 2px; } .pd-urenrij__wie em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); } .pd-urenrij.is-af { opacity: .7; } /* TG2 · uit dienst «nu sluiten», lijst inlezen */ .pd-vink { display: flex; gap: 8px; align-items: center; font-size: .9rem; padding: 4px 0; } .pd-tekst { width: 100%; font: inherit; font-size: .88rem; border: 1px solid var(--c-lijn-2); border-radius: var(--radius-klein, 8px); padding: 8px 10px; background: var(--kaart); color: var(--c-ink); } /* TA (Michiel 06-10) · toegang in het dossier: feiten, inrichtingstaken */ .pd-toegang .pd-gegevens { margin: 8px 0 10px; } .pd-toegang__taken { list-style: none; margin: 4px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 3px; } .pd-toegang__taken li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; font-size: .76rem; } .pd-toegang__taken li i { font-style: normal; color: var(--c-ink-3); text-align: center; } .pd-toegang__taken li.is-klaar span { color: var(--c-ink-3); text-decoration: line-through; } .pd-toegang__taken li.is-klaar i { color: var(--c-groen); } .pd-toegang__taken li em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); white-space: nowrap; } /* LN2 (besluit 344) · aanleveren aan Exact Online Loon */ #pd-aanlevering .kicker { display: block; margin: 12px 0 4px; } .pd-latabel { width: 100%; margin-top: 8px; } .pd-latabel .num { text-align: right; white-space: nowrap; } .pd-lalijst { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: .86rem; } .pd-lalijst .chip { margin-right: 4px; } /* ── klantreis.css ── */ /* klantreis.css — de reis in één beeld (KR3). De stippenbalk is de kern: tien stappen, één blik. Kleur is betekenis — groen is gedaan, amber wacht op de klant, terra staat stil bij ons, en een grijze stip betekent «nog niet» en níét «in orde». */ .kr-kop { margin-bottom: 18px; } .kr-kop h1 { margin: 2px 0 6px; } .kr-kop p { max-width: 82ch; color: var(--ink2); font-size: .84rem; line-height: 1.55; } .kr-balkje { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 12px; } .kr-chip { appearance: none; background: var(--kaart); color: var(--ink2); cursor: pointer; border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius-klein); padding: 6px 13px; font: 600 .78rem var(--font-ui); } .kr-chip:hover { color: var(--ink); } .kr-chip.is-actief { background: var(--accent); border-color: var(--accent); color: var(--kaart); } .kr-rij { appearance: none; background: none; border: 0; text-align: left; width: 100%; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 16px; align-items: center; padding: 14px 16px; border-bottom: var(--lijndikte) solid var(--lijn); font: inherit; } .kr-rij:last-child { border-bottom: 0; } .kr-rij:hover { background: var(--accent-t2); } .kr-rij__wie b { display: block; font: 700 .88rem var(--font-ui); color: var(--ink); } .kr-rij__wie em { display: block; font-size: .78rem; color: var(--ink2); font-style: normal; margin-top: 3px; } .kr-rij__blok { color: var(--let) !important; } .kr-balk { display: inline-flex; gap: 3px; } .kr-stip { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .62rem; font-style: normal; background: var(--vlak); color: var(--ink3); border: var(--lijndikte) solid var(--lijn); } .kr-stip.is-gedaan { background: var(--goed); border-color: var(--goed); color: var(--knop-ink); } .kr-stip.is-loopt { background: var(--kaart); border-color: var(--ink); color: var(--ink); } .kr-stip.is-wacht { background: var(--let); border-color: var(--let); color: var(--knop-ink); } .kr-dossierkop { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin: 18px 0 20px; } .kr-dossierkop h2 { margin: 2px 0 4px; } .kr-dossierkop p { margin: 0; color: var(--ink2); font-size: .86rem; } .kr-dossierkop__meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: .78rem; color: var(--ink2); } .kr-reis { display: grid; gap: 0; } .kr-stap { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: var(--lijndikte) solid var(--lijn); } .kr-stap:last-child { border-bottom: 0; } .kr-stap__stip { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--vlak); color: var(--ink3); border: var(--lijndikte) solid var(--lijn); font-size: .8rem; } .kr-stap.is-gedaan .kr-stap__stip { background: var(--goed); border-color: var(--goed); color: var(--knop-ink); } .kr-stap.is-loopt .kr-stap__stip { background: var(--kaart); border-color: var(--ink); color: var(--ink); } .kr-stap.is-wacht .kr-stap__stip { background: var(--let); border-color: var(--let); color: var(--knop-ink); } .kr-stap__lijf b { display: block; font: 700 .9rem var(--font-ui); } .kr-stap__lijf b em { font: 400 .74rem var(--font-ui); color: var(--ink3); font-style: normal; margin-left: 6px; } .kr-stap__lijf > span { display: block; font-size: .8rem; color: var(--ink2); margin-top: 3px; line-height: 1.5; } .kr-stap__blok { color: var(--stop) !important; } .kr-stap__vraag { color: var(--let) !important; } .kr-voet { margin-top: 16px; font-size: .76rem; color: var(--ink2); max-width: 88ch; line-height: 1.5; } @media (max-width: 860px) { .kr-rij { grid-template-columns: minmax(0, 1fr); } } /* De kopregel boven de stippen (02-09). Zonder deze regel is de strip tien anonieme bolletjes: het title-attribuut bereikt alleen wie een muis heeft, en op een aanraakscherm niemand. */ .kr-rij--kop { cursor: default; padding-top: 10px; padding-bottom: 8px; } .kr-rij--kop:hover { background: none; } .kr-kolomkop { width: 18px; font-style: normal; font-size: .52rem; letter-spacing: .02em; color: var(--ink3); text-align: center; text-transform: uppercase; } .kr-legenda { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 12px; font-size: .74rem; color: var(--ink2); line-height: 1.9; } .kr-legenda b { font-weight: 700; color: var(--ink); } .kr-legenda .kr-stip { vertical-align: -4px; margin-right: 2px; } /* KR4 · ingebed als tabblad Trajecten van Relaties: eigen binnenmarge, geen module-wortel */ .kr--ingebed { padding: 18px 22px 48px; } .kr--ingebed .kr-kop p { margin-bottom: 0; } /* ── klanttaken.css ── */ /* klanttaken.css — Wacht op de klant (KR1). Eén rij leest als een zin: wat we vragen, aan wie, hoe lang al. */ .kt-kop { margin-bottom: 18px; } .kt-kop h1 { margin: 2px 0 6px; } .kt-kop p { max-width: 78ch; color: var(--ink2); font-size: .84rem; line-height: 1.55; } .kt-balk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 18px 0 12px; } .kt-vulling { flex: 1 1 auto; } .kt-chip { appearance: none; background: var(--kaart); color: var(--ink2); cursor: pointer; border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius-klein); padding: 6px 13px; font: 600 .78rem var(--font-ui); transition: color 160ms, border-color 160ms, background 160ms; } .kt-chip:hover { color: var(--ink); } .kt-chip.is-actief { background: var(--accent); border-color: var(--accent); color: var(--kaart); } .kt-dossierkop { margin: 18px 0 6px; } .kt-dossierkop h2 { margin: 2px 0 0; } .kt-blokkop { display: block; padding: 12px 16px 4px; } .kt-rij { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto; gap: 6px 14px; align-items: center; padding: 13px 16px; border-bottom: var(--lijndikte) solid var(--lijn); } .kt-rij:last-child { border-bottom: 0; } .kt-rij:hover { background: var(--accent-t2); } .kt-rij.is-af { opacity: .6; } .kt-rij.is-laat .kt-rij__wacht { color: var(--stop); font-weight: 700; } .kt-rij__wat { min-width: 0; } .kt-rij__wat b { display: block; font: 700 .88rem var(--font-ui); } .kt-rij__wat span { display: block; font-size: .78rem; color: var(--ink2); margin-top: 3px; line-height: 1.45; } .kt-rij__bron { color: var(--ink3); font-style: italic; } .kt-rij__wacht { font-size: .78rem; color: var(--ink2); white-space: nowrap; } .kt-rij__acties { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } @media (max-width: 900px) { .kt-rij { grid-template-columns: minmax(0, 1fr); } .kt-rij__acties { justify-content: flex-start; } } /* ── webbestellingen.css ── */ /* webbestellingen.css — KR2. Eén rij zegt wat er gekocht is en of het al mag: de poortregel staat in de rij zelf, niet in een tooltip. Alle regels staan onder .mo.wb: het voorvoegsel «wb-» is ook van Werkbonnen en het wallboard, en zonder deze afbakening verloor de werkbonlijst zijn kolommen (schermronde stap 1). */ .mo.wb .wb-kop { margin-bottom: 18px; } .mo.wb .wb-kop h1 { margin: 2px 0 6px; } .mo.wb .wb-kop p { max-width: 82ch; color: var(--ink2); font-size: .84rem; line-height: 1.55; } .mo.wb .wb-balk { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 12px; } .mo.wb .wb-chip { appearance: none; background: var(--kaart); color: var(--ink2); cursor: pointer; border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius-klein); padding: 6px 13px; font: 600 .78rem var(--font-ui); } .mo.wb .wb-chip:hover { color: var(--ink); } .mo.wb .wb-chip.is-actief { background: var(--accent); border-color: var(--accent); color: var(--kaart); } .mo.wb .wb-rij { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto; gap: 6px 14px; align-items: center; padding: 14px 16px; border-bottom: var(--lijndikte) solid var(--lijn); } .mo.wb .wb-rij:last-child { border-bottom: 0; } .mo.wb .wb-rij:hover { background: var(--accent-t2); } .mo.wb .wb-rij__wat { min-width: 0; } .mo.wb .wb-rij__wat b { display: block; font: 700 .88rem var(--font-ui); } .mo.wb .wb-rij__wat > span { display: block; font-size: .78rem; color: var(--ink2); margin-top: 3px; line-height: 1.45; } .mo.wb .wb-rij__regels { color: var(--ink3); } .mo.wb .wb-rij__poort { font-style: italic; } .mo.wb .wb-rij__poort.is-dicht { color: var(--let); font-style: normal; } .mo.wb .wb-rij__poort.is-open { color: var(--ink3); } .mo.wb .wb-rij__bedrag { font-size: .88rem; white-space: nowrap; } .mo.wb .wb-rij__termijn { font-size: .78rem; color: var(--ink2); white-space: nowrap; } .mo.wb .wb-rij__opd { font-size: .76rem; color: var(--ink2); } .mo.wb .wb-rij__acties { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .mo.wb .wb-voet { margin-top: 12px; font-size: .76rem; color: var(--ink2); max-width: 88ch; line-height: 1.5; } @media (max-width: 980px) { .mo.wb .wb-rij { grid-template-columns: minmax(0, 1fr); } .mo.wb .wb-rij__acties { justify-content: flex-start; } } /* ── werkregels.css ── */ /* werkregels.css — Beheer › Werkregels (A1). Kleur en vorm komen uit casa360-stijl.css; hier alleen de indeling die dit scherm eigen is: een regel leest als één zin — «als … dan …» — dus staat die zin onder elkaar in één blok, met de tellers ernaast. */ .wr-kop { margin-bottom: 18px; } .wr-kop h1 { margin: 2px 0 6px; } .wr-kop p { max-width: 74ch; color: var(--ink2); font-size: .84rem; line-height: 1.5; } .wr-balk { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 16px 0 12px; } .wr-hint { font-size: .76rem; color: var(--ink2); max-width: 68ch; } .wr-hint.is-amber { color: var(--let); } .wr-voetnoot { margin-top: 12px; font-size: .76rem; color: var(--ink2); max-width: 88ch; line-height: 1.5; } .wr-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 18px 0 14px; border-bottom: var(--lijndikte) solid var(--lijn); } .wr-tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; font: 600 .82rem var(--font-ui); color: var(--ink2); cursor: pointer; transition: color 160ms, border-color 160ms; } .wr-tab:hover { color: var(--ink); } .wr-tab.is-actief { color: var(--ink); border-bottom-color: var(--accent); } /* de regel als zin */ .wr-rij, .wr-taak { display: grid; gap: 6px 16px; align-items: center; padding: 14px 16px; border-bottom: var(--lijndikte) solid var(--lijn); } .wr-rij { grid-template-columns: minmax(0, 1fr) auto auto auto; } .wr-taak { grid-template-columns: minmax(0, 1fr) auto auto auto; } .wr-rij:last-child, .wr-taak:last-child { border-bottom: 0; } .wr-rij:hover, .wr-taak:hover { background: var(--accent-t2); } .wr-rij--kop { font-size: .7rem; color: var(--ink3); text-transform: uppercase; letter-spacing: .04em; } .wr-rij__wat { min-width: 0; } .wr-rij__wat b { display: block; font: 700 .88rem var(--font-ui); } .wr-rij__wat > span { display: block; font-size: .78rem; color: var(--ink2); margin-top: 3px; line-height: 1.45; } .wr-rij__v { color: var(--ink3); font-size: .72rem; font-weight: 400; } .wr-rij__als b { display: inline; font-weight: 700; } .wr-rij__dan { color: var(--ink); } .wr-rij__uitleg { color: var(--ink3); font-style: italic; } .wr-rij__uitleg.is-stop { color: var(--stop); font-style: normal; } .wr-rij__cijfers { display: flex; gap: 10px; font-size: .74rem; color: var(--ink2); white-space: nowrap; } .wr-rij__cijfers .is-stop { color: var(--stop); } .wr-rij__cijfers .is-let { color: var(--let); } .wr-rij__acties { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } /* de proef in het formulier */ .wr-proef:empty { display: none; } .wr-proefkaart { margin: 0 var(--ruimte, 20px) 4px; padding: 12px 14px; border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius-klein); background: var(--vlak); } .wr-proefkaart > b { display: block; font-size: .84rem; margin-bottom: 6px; } .wr-proeflijst { display: grid; gap: 4px; max-height: 168px; overflow-y: auto; } .wr-proeflijst div { font-size: .74rem; color: var(--ink2); } .wr-proeflijst b { color: var(--ink); } .wr-run { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: 4px 14px; align-items: baseline; padding: 10px 16px; border-bottom: var(--lijndikte) solid var(--lijn); font-size: .78rem; } .wr-run:last-child { border-bottom: 0; } .wr-run .wr-rij__uitleg { grid-column: 1 / -1; } .wr-verzendlijst { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; } .wr-verzendlijst li { font-size: .8rem; } @media (max-width: 860px) { .wr-rij, .wr-taak, .wr-run { grid-template-columns: minmax(0, 1fr); } .wr-rij__acties { justify-content: flex-start; } } /* ── maatwerkvelden.css ── */ /* maatwerkvelden.css — MW · eigen velden per entiteit. Geen kleurliteral: alles komt uit casa360-stijl.css. */ .mw-kop { margin-bottom: 18px; } .mw-kop h1 { margin: 2px 0 6px; } .mw-kop p { max-width: 72ch; color: var(--ink2); margin: 0; } .mw-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--lijn); margin: 20px 0 14px; } .mw-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; font: inherit; color: var(--ink2); cursor: pointer; transition: color 160ms, border-color 160ms; } .mw-tab.is-actief { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; } .mw-balk { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; } .mw-hint { color: var(--ink2); font-size: 13px; } .mw-rij { display: grid; grid-template-columns: 1fr 92px minmax(180px, 260px) 60px auto; gap: 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--lijn); } .mw-rij:last-child { border-bottom: 0; } .mw-rij.is-uit { opacity: .55; } .mw-rij__wat { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .mw-rij__sleutel { color: var(--ink2); font-size: 12px; font-weight: 400; } .mw-rij__uitleg { color: var(--ink2); font-size: 13px; } .mw-rij__poort { display: flex; gap: 4px; flex-wrap: wrap; } .mw-rij__aantal { color: var(--ink2); text-align: right; font-size: 13px; } .mw-rij__acties { display: flex; gap: 6px; justify-content: flex-end; } .mw-voetnoot { margin-top: 14px; color: var(--ink2); font-size: 13px; max-width: 78ch; } /* het blok op een recordscherm */ .mw-blok { padding: 16px 18px; } /* Het blok hangt vaak in een smalle aside (opdrachtdossier), dus kop en subregel stapelen — naast elkaar breken ze daar in losse woorden. */ .mw-blok__kop { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; } .mw-blok__sub { color: var(--ink2); font-size: 13px; } .mw-blok__voet { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--lijn); } @media (max-width: 900px) { .mw-rij { grid-template-columns: 1fr; gap: 8px; } .mw-rij__aantal { text-align: left; } .mw-rij__acties { justify-content: flex-start; } } /* ── werving.css ── */ /* ===================================================================== werving.css — module 5.2 · Werving (ATS, Recruitee-vervanger). Uitsluitend tokens uit casa360-tokens.css; diepte via de vaste laag. ===================================================================== */ .wv { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; } .wv-kop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; } .wv-kop p { margin: 0; max-width: 74ch; color: var(--c-ink-2); font-size: .82rem; line-height: 1.5; } /* ---- knoppen (zelfde grammatica als 5.1) ---- */ .wv-knop { padding: 9px 14px; border-radius: 10px; cursor: pointer; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); color: var(--c-ink); font: 700 .78rem var(--font-ui); transition: background 160ms, border-color 160ms; } .wv-knop:hover { border-color: var(--c-ink-3); } .wv-knop--primair { background: var(--c-groen); border-color: var(--c-groen); color: var(--knop-ink); } .wv-knop--primair:hover { background: var(--c-groen-d); border-color: var(--c-groen-d); } .wv-knop--rood { border-color: var(--c-rood-t); color: var(--c-rood); } .wv-knop--klein { padding: 6px 11px; font-size: .72rem; border-radius: 8px; } .wv-hint { font-size: .72rem; color: var(--c-ink-3); align-self: center; } .wv-voetnoot { font-size: .74rem; color: var(--c-ink-2); line-height: 1.55; } .wv-leeg { padding: 18px; text-align: center; font: 600 .8rem var(--font-ui); color: var(--c-ink-3); margin: 0; } .wv-balk { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .wv-tweekolom { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .is-groen { color: var(--c-groen-d); } .is-rood { color: var(--c-rood); } .is-goud { color: var(--c-terra-d); } /* ---- tabs ---- */ .wv-tabs { display: flex; gap: 5px; overflow-x: auto; padding: 5px; background: var(--c-paneel); border-radius: 12px; } .wv-tab { white-space: nowrap; padding: 8px 14px; border-radius: 9px; cursor: pointer; border: var(--lijndikte) solid transparent; background: none; font: 600 .76rem var(--font-ui); color: var(--c-ink-2); } .wv-tab.is-actief { background: var(--kaart); border-color: var(--c-lijn); color: var(--c-ink); font-weight: 700; } /* ---- vacature-tegels (prototype) ---- */ .wv-vacs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; } .wv-vac { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; cursor: pointer; text-align: left; } .wv-vac.is-actief { border-color: var(--c-groen); background: var(--c-groen-t); } .wv-vac__wat { min-width: 0; display: flex; flex-direction: column; } .wv-vac__wat strong { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wv-vac__wat em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); } /* ---- kanban (prototype: 5 kolommen, slepen) ---- */ .wv-board { display: grid; grid-template-columns: repeat(5, minmax(180px, 1fr)); gap: 11px; overflow-x: auto; } .wv-kolom { background: var(--c-paneel); border-radius: 14px; padding: 10px; min-height: 300px; display: flex; flex-direction: column; gap: 8px; } .wv-kolom__kop { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 6px; font-size: .78rem; } .wv-kolom__kop .mono { font-size: .66rem; color: var(--c-ink-3); background: var(--kaart); padding: 2px 8px; border-radius: 99px; } .wv-kaart { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 11px 12px; border-radius: 11px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); font: 500 .74rem var(--font-ui); color: var(--c-ink); box-shadow: var(--schaduw-tegel); } .wv-kaart.is-anoniem { opacity: .55; font-style: italic; box-shadow: none; } .wv-kaart__kop { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .wv-kaart__kop strong { font-size: .8rem; } .wv-kaart__kop em { font-style: normal; font-size: .66rem; color: var(--c-terra-d); font-weight: 700; } .wv-kaart__notitie { color: var(--c-ink-2); line-height: 1.4; } .wv-kaart__voet { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .wv-kaart__acties { display: flex; gap: 5px; margin-left: auto; } .wv-kolomleeg { text-align: center; color: var(--c-ink-3); padding: 10px 0; margin: 0; } /* FT-5.4a · kandidaat-balk boven het backend-board */ .wv-kdbalk { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 12px; } .wv-kdbalk__acties { display: flex; gap: 8px; } .wv-bron, .wv-actie { font: 600 .62rem var(--font-ui); font-style: normal; padding: 3px 8px; border-radius: 6px; background: var(--c-creme); color: var(--c-ink-3); } .wv-actie { background: var(--c-amber-t); color: var(--c-amber); } .wv-actie.is-groen { background: var(--c-groen-t); color: var(--c-groen-d); } /* ---- vacatures & kanalen ---- */ .wv-vackaart { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; } .wv-vackaart__kop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .wv-vackaart__kop > div { flex: 1; min-width: 240px; } .wv-vackaart__kop strong { display: block; font-size: .92rem; } .wv-vackaart__kop span { font-size: .72rem; color: var(--c-ink-2); } .wv-kanalen { display: flex; flex-direction: column; } .wv-kanaal { display: grid; grid-template-columns: minmax(0, 1.4fr) 110px 90px 90px 110px; gap: 12px; align-items: center; padding: 8px 4px; font-size: .76rem; border-bottom: var(--lijndikte) solid var(--c-lijn); } .wv-kanaal:last-child { border-bottom: 0; } .wv-kanaal--kop { font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); } .wv-kanaal__naam { font-weight: 600; } .wv-vackaart__voet { font-size: .66rem; color: var(--c-ink-3); } /* ---- gesprekken & scorecards ---- */ .wv-blok { padding: 16px 18px; display: flex; flex-direction: column; gap: 9px; } .wv-blok__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .wv-blok__kop strong { font-size: .92rem; } .wv-gesprek { display: flex; align-items: center; gap: 13px; padding: 11px 14px; flex-wrap: wrap; border-radius: 12px; border: var(--lijndikte) solid var(--c-lijn); } .wv-gesprek__wie { flex: 1; min-width: 170px; } .wv-gesprek__wie strong { display: block; font-size: .8rem; } .wv-gesprek__wie span { font-size: .7rem; color: var(--c-ink-2); } .wv-gesprek .mono { font-size: .72rem; } .wv-gesprek__met { font-size: .72rem; color: var(--c-ink-2); } .wv-scorerij { display: flex; align-items: center; gap: 12px; padding: 9px 4px; font-size: .78rem; border-bottom: var(--lijndikte) solid var(--c-lijn); flex-wrap: wrap; } .wv-scorerij:last-child { border-bottom: 0; } .wv-scorerij strong { min-width: 130px; } .wv-scorerij .is-goud { font-weight: 800; } .wv-scorerij__wie { flex: 1; font-size: .7rem; color: var(--c-ink-3); } /* ---- talentpool ---- */ .wv-tprij { display: grid; grid-template-columns: 160px minmax(0, 1fr) 170px 200px 280px; gap: 12px; align-items: center; padding: 11px 16px; font-size: .78rem; border-bottom: var(--lijndikte) solid var(--c-lijn); } .wv-tprij:last-child { border-bottom: 0; } .wv-tprij--kop { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); } .wv-tprij.is-anoniem { color: var(--c-ink-3); font-style: italic; } .wv-tprij__acties { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; } /* ---- rapportage ---- */ .wv-funnel, .wv-tth { display: grid; grid-template-columns: 130px minmax(0, 1fr) 44px 44px; gap: 10px; align-items: center; font-size: .76rem; } .wv-tth { grid-template-columns: 170px minmax(0, 1fr) 60px; } .wv-funnel__balk { height: 14px; border-radius: 7px; background: var(--c-creme); overflow: hidden; } .wv-funnel__balk i { display: block; height: 100%; background: var(--c-groen); border-radius: 7px; } .wv-tth.is-over .wv-funnel__balk i { background: var(--c-amber); } .wv-funnel em { font-style: normal; color: var(--c-ink-3); font-size: .66rem; } .wv-bronrij { display: grid; grid-template-columns: minmax(0, 1.4fr) 110px 110px 110px 130px; gap: 12px; align-items: center; padding: 10px 16px; font-size: .78rem; border-bottom: var(--lijndikte) solid var(--c-lijn); } .wv-bronrij:last-child { border-bottom: 0; } .wv-bronrij--kop { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); } /* ---- instellingen ---- */ .wv-regelcellen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .wv-regelcellen > div { padding: 11px 13px; border-radius: 10px; background: var(--c-creme); display: flex; flex-direction: column; gap: 2px; } .wv-regelcellen span { font-size: .68rem; color: var(--c-ink-3); } .wv-regelcellen strong { font-size: .84rem; } .wv-auto { display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; padding: 10px 12px; border-radius: 10px; border: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); font: 500 .76rem var(--font-ui); color: var(--c-ink); } .wv-auto i { width: 34px; height: 20px; flex: none; border-radius: 99px; position: relative; background: var(--c-lijn-2); transition: background 160ms; } .wv-auto i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--kaart); transition: left 160ms; } .wv-auto.is-aan i { background: var(--c-groen); } .wv-auto.is-aan i::after { left: 17px; } .wv-auto span { flex: 1; } .wv-auto em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); } .wv-criteria { display: flex; gap: 8px; flex-wrap: wrap; } .wv-criteria .chip { font-size: .72rem; padding: 5px 12px; } /* ---- kandidaat-drawer ---- */ .wv-drawerdeel { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; } .wv-fasen { display: flex; gap: 5px; flex-wrap: wrap; } .wv-fase { padding: 7px 12px; border-radius: 8px; cursor: pointer; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); font: 600 .72rem var(--font-ui); color: var(--c-ink-2); } .wv-fase.is-actief { background: var(--c-groen); border-color: var(--c-groen); color: var(--knop-ink); } .wv-fase[aria-disabled="true"]:not(.is-actief) { opacity: .5; cursor: not-allowed; } .wv-scoreblok { padding: 9px 12px; border-radius: 9px; background: var(--c-creme); font-size: .74rem; } .wv-scoreblok strong { display: block; font-size: .74rem; } .wv-scoreblok span { color: var(--c-ink-2); } .wv-tlrij { display: flex; gap: 10px; font-size: .74rem; padding: 4px 0; } .wv-tlrij em { font-style: normal; color: var(--c-ink-3); font-size: .66rem; flex: none; width: 44px; } .wv-notitie { padding: 10px 12px; border-radius: 9px; background: var(--c-memo, var(--c-creme)); font-size: .76rem; } /* ---- responsief ---- */ @media (max-width: 1080px) { .wv-tweekolom { grid-template-columns: 1fr; } .wv-regelcellen { grid-template-columns: 1fr 1fr; } .wv-kanaal, .wv-tprij, .wv-bronrij { grid-template-columns: 1fr; gap: 4px; } .wv-kanaal--kop, .wv-tprij--kop, .wv-bronrij--kop { display: none; } } /* Talentpool-match op vacature (E2a) */ .wv-tpmatch { border-top: 1px solid var(--c-lijn); margin-top: 10px; padding-top: 10px; display: flex; flex-direction: column; gap: 6px; } .wv-tpmatchrij { display: grid; grid-template-columns: 1fr 1.6fr auto; gap: 10px; align-items: center; font-size: 13px; } .wv-tpmatchrij span { color: var(--c-ink-2); font-size: 12px; } /* B19 · kandidaat-domein backend */ .wv-kdkaart { padding: 16px 18px; margin-bottom: 14px; } .wv-kdrij { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; border-top: 1px solid var(--c-lijn); padding: 9px 2px; } .wv-kdrij > div { display: flex; flex-direction: column; gap: 2px; } .wv-kdrij strong { font-size: .8rem; } .wv-kdrij > div span { font-size: .68rem; color: var(--c-ink-2); } .wv-kdrij.is-anoniem { opacity: .55; } .wv-knop--klein { padding: 5px 10px; font-size: .68rem; } /* Reviewronde Tim 23-07 · kanban slepen + kandidaat-dossier-drawer */ .wv-kaart[draggable="true"] { cursor: grab; } .wv-kaart.is-sleep { opacity: .45; } .wv-kolom.is-dropdoel { outline: 2px dashed var(--c-groen-d); outline-offset: -4px; background: color-mix(in srgb, var(--c-groen-d) 6%, var(--c-paneel)); } .wv-kaart:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } .wv-cvchip { margin-left: 6px; font-size: .58rem; letter-spacing: .06em; border: 1px solid var(--c-lijn); border-radius: 99px; padding: 1px 6px; color: var(--c-ink-2); font-style: normal; } .wv-docrij { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; border-top: 1px solid var(--c-lijn); padding: 7px 0; font-size: .74rem; } .wv-docrij__naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wv-cvupload { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; font-size: .72rem; color: var(--c-ink-2); } .wv-cvupload input { font-size: .72rem; } .wv-notitie--meer { white-space: pre-line; } .wv-matching { margin-top: 14px; } .wv-matchbalk { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 8px 0 12px; } .wv-matchlabel { display: flex; flex-direction: column; gap: 4px; font-size: .72rem; color: var(--c-ink-2); } .wv-matchlabel select { border: 1px solid var(--c-lijn); border-radius: 12px; padding: 8px 10px; font: inherit; font-size: 13.5px; background: var(--c-paneel); color: var(--c-ink); } .wv-matchprofiel { font-size: .76rem; color: var(--c-ink-2); margin: 0 0 8px; } .wv-matchreden { display: inline-block; font-style: normal; font-size: .68rem; color: var(--c-ink-2); margin-right: 10px; } /* ═══ W2 · de echte vacatureketen ═══════════════════════════════════ Een vacature is sinds 23-08 een ding met een aanvraag, een goedkeuring, fasen en een bevroren versie. Deze rijen tonen die stand: wat het is, waar het staat, en wat je ermee kunt. */ .wv-vacrij { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 15px; border-bottom: var(--lijndikte) solid var(--lijn); } .wv-vacrij:last-child { border-bottom: 0; } .wv-vacrij:hover { background: var(--accent-t2); } .wv-vacrij__wat b { display: block; font: 700 .86rem var(--font-ui); } .wv-vacrij__wat span { display: block; font-size: .76rem; color: var(--ink2); } .wv-vacrij__wat .wv-vacrij__reden { color: var(--ink3); font-style: italic; margin-top: 2px; } .wv-vacrij__v { color: var(--ink3); font-size: .72rem; } .wv-vacrij__acties { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } /* de pipeline in de rij: fase met teller, pijltje ertussen. De selectors dragen `.wv-vacrij__wat` mee omdat de regel hierboven (`.wv-vacrij__wat span`) anders wint: die is specifieker dan een kale klasse, en zette elke fase-chip op display:block — vijf balken onder elkaar in plaats van een keten. */ .wv-vacrij__wat .wv-vacpijp { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 4px; } .wv-vacrij__wat .wv-vacpijp i { color: var(--ink3); font-style: normal; font-size: .7rem; } .wv-vacrij__wat .wv-vacfase { display: inline-flex; align-items: baseline; gap: 5px; border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius-pill); padding: 1px 8px; font-size: .7rem; color: var(--ink2); background: var(--kaart); } .wv-vacrij__wat .wv-vacfase.is-vol { border-color: var(--ink); color: var(--ink); font-weight: 700; } .wv-vacrij__wat .wv-vacfase b { font-family: var(--font-mono); } /* de pipeline-lade */ .wv-pipe { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; } .wv-pipekolom { flex: 0 0 168px; } .wv-pipekop { display: flex; justify-content: space-between; align-items: baseline; font: 700 .74rem var(--font-ui); color: var(--ink2); padding: 6px 8px; background: var(--grijs); border-radius: var(--radius-klein); margin-bottom: 6px; } .wv-pipekaart { background: var(--kaart); border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius-klein); padding: 8px 10px; margin-bottom: 6px; } .wv-pipekaart b { display: block; font-size: .8rem; } .wv-pipekaart span { display: block; font-size: .72rem; color: var(--ink2); } .wv-pipebeoord { color: var(--goed-d) !important; font-weight: 700; } .wv-pipeleeg { color: var(--ink3); font-size: .74rem; padding: 6px 8px; } .wv-pipeversies { margin-top: 16px; border-top: var(--lijndikte) solid var(--lijn); padding-top: 10px; } .wv-pipeversie { display: flex; justify-content: space-between; gap: 10px; font-size: .76rem; color: var(--ink2); padding: 4px 0; } /* W2b · rij in de smalle drawer (kanalen, talentpool-leden). Bewust géén hergebruik van `.wv-tprij`: dat is een vijfkolomsraster voor een tabel over de volle breedte, en in een drawer van 420px perst dat elk woord op een eigen regel. */ .wv-kanrij { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 11px 0; border-bottom: var(--lijndikte) solid var(--lijn); } .wv-kanrij:last-child { border-bottom: 0; } .wv-kanrij__wat { min-width: 0; } .wv-kanrij__wat b { display: block; font: 700 .84rem var(--font-ui); } .wv-kanrij__wat b .chip { margin-left: 6px; vertical-align: 1px; } .wv-kanrij__wat span { display: block; font-size: .74rem; color: var(--ink2); margin-top: 2px; } .wv-kanrij__wat .wv-kanrij__afw { color: var(--let); font-style: italic; } .wv-kanrij__rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; white-space: nowrap; } .wv-kanrij__rechts b { font-size: .84rem; } .wv-kanrij.is-anoniem { opacity: .62; } /* ── doelen.css ── */ /* ===================================================================== doelen.css — module 5.3 · Doelen & evaluaties + ESS-app. Uitsluitend tokens; module-wortel-marge volgens de vaste UI-norm. ===================================================================== */ .hd { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; } .hd-kop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; } .hd-kop p { margin: 0; max-width: 74ch; color: var(--c-ink-2); font-size: .82rem; line-height: 1.5; } .hd-voetnoot { font-size: .74rem; color: var(--c-ink-2); line-height: 1.55; } .is-groen { color: var(--c-groen-d); } .is-rood { color: var(--c-rood); } .is-terra { color: var(--c-terra-d); } .visueel-verborgen { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* ---- knoppen (module-grammatica) ---- */ .hd-knop { padding: 9px 14px; border-radius: 10px; cursor: pointer; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); color: var(--c-ink); font: 700 .78rem var(--font-ui); transition: background 160ms, border-color 160ms; } .hd-knop:hover { border-color: var(--c-ink-3); } .hd-knop--primair { background: var(--c-groen); border-color: var(--c-groen); color: var(--knop-ink); } .hd-knop--primair:hover { background: var(--c-groen-d); border-color: var(--c-groen-d); } .hd-knop--klein { padding: 6px 11px; font-size: .72rem; border-radius: 8px; } .hd-hint { font-size: .72rem; color: var(--c-ink-3); } .hd-check { display: flex; gap: 8px; align-items: flex-start; font-size: .82rem; color: var(--c-ink-2); cursor: pointer; line-height: 1.4; } /* FT-5.4c · beoordelingscyclus (backend) */ .hd-bokaart { display: flex; flex-direction: column; gap: 2px; margin-bottom: 18px; } .hd-bokop { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; } .hd-bokop strong { display: block; font-size: .92rem; } .hd-borij { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; border-top: var(--lijndikte) solid var(--c-lijn); padding: 10px 2px; } .hd-borij__wie { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .hd-borij__wie strong { font-size: .84rem; } .hd-borij__wie em { font-style: normal; font-size: .7rem; color: var(--c-ink-2); } .hd-bodoelen { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; } .hd-borij__acties { display: flex; gap: 6px; align-items: center; } .hd-bovoet { font-size: .72rem; color: var(--c-ink-3); line-height: 1.5; margin: 8px 0 0; } /* ---- views-toggle ---- */ .hd-views { display: flex; gap: 8px; flex-wrap: wrap; } .hd-view { padding: 9px 15px; border-radius: 10px; cursor: pointer; white-space: nowrap; border: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); font: 600 .78rem var(--font-ui); color: var(--c-ink-2); } .hd-view.is-actief { border-color: var(--c-terra); background: var(--c-terra-t); color: var(--c-terra-d); font-weight: 700; } /* ---- dashboard ---- */ .hd-dashkop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .hd-dashkop p { margin: 0; font-size: .78rem; color: var(--c-ink-2); max-width: 64ch; } .hd-dashkop .mono { font-size: .68rem; color: var(--c-ink-3); } .hd-rij { display: grid; grid-template-columns: 40px 1.5fr 1fr .8fr .8fr .9fr 1.2fr; gap: 12px; align-items: center; padding: 13px 18px; width: 100%; border: 0; border-bottom: var(--lijndikte) solid var(--c-lijn); background: none; text-align: left; cursor: pointer; font: 500 .78rem var(--font-ui); color: var(--c-ink); } .hd-rij:hover:not(.hd-rij--kop) { background: var(--c-creme); } .hd-rij:last-child { border-bottom: 0; } .hd-rij--kop { font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); cursor: default; background: var(--c-creme); } .hd-rank { color: var(--c-ink-3); font-weight: 700; } .hd-wie { min-width: 0; } .hd-wie strong { display: block; font-size: .8rem; } .hd-wie em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); } .hd-balkcel { display: flex; align-items: center; gap: 9px; } .hd-balk { flex: 1; height: 9px; border-radius: 6px; background: var(--c-creme); overflow: hidden; font-style: normal; } .hd-balk b { display: block; height: 100%; border-radius: 6px; } .hd-balk b.is-groen { background: var(--c-groen); } .hd-balk b.is-amber { background: var(--c-oker); } .hd-balk b.is-rood { background: var(--c-rood); } .hd-balkcel em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); width: 36px; text-align: right; } /* ---- evaluatie & instellen ---- */ .hd-grid { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 16px; align-items: start; } .hd-meds { display: flex; flex-direction: column; gap: 7px; } .hd-med { display: flex; align-items: center; gap: 11px; text-align: left; cursor: pointer; padding: 10px 13px; border-radius: 11px; border: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); } .hd-med.is-actief { border-color: var(--c-terra); background: var(--c-terra-t); } .hd-med i { width: 34px; height: 34px; flex: none; border-radius: 9px; font-style: normal; display: flex; align-items: center; justify-content: center; font: 700 .74rem var(--font-ui); color: var(--knop-ink); background: var(--c-lijn-2); } .hd-med.is-actief i { background: var(--c-terra); } .hd-med span { min-width: 0; display: flex; flex-direction: column; } .hd-med strong { font-size: .8rem; } .hd-med em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); } .hd-evalkolom { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .hd-evalkop { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .hd-evalkop strong { display: block; font-size: 1.05rem; } .hd-evalkop span { font-size: .74rem; color: var(--c-ink-2); } .hd-blok { padding: 18px 20px; display: flex; flex-direction: column; gap: 13px; } .hd-blok > strong { font-size: .86rem; } .hd-tweekolom { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; } .hd-metric__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; font-size: .78rem; } .hd-metric__kop strong { font-size: .78rem; } .hd-metric__badges { display: flex; align-items: center; gap: 10px; } .hd-dubbelbalk { position: relative; height: 12px; border-radius: 6px; background: var(--c-creme); } .hd-dubbelbalk b { display: block; height: 100%; border-radius: 6px; } .hd-dubbelbalk b.is-groen { background: var(--c-groen); } .hd-dubbelbalk b.is-rood { background: var(--c-rood); } .hd-dubbelbalk i { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--c-ink-2); } .hd-metric__voet { display: flex; justify-content: space-between; margin-top: 4px; font-size: .64rem; color: var(--c-ink-3); } .hd-sterren { display: flex; gap: 5px; } .hd-ster { border: 0; background: none; cursor: pointer; padding: 0; font-size: 1.5rem; line-height: 1; color: var(--c-lijn); } .hd-ster.is-aan { color: var(--c-oker); } .hd-notitieveld textarea { width: 100%; box-sizing: border-box; padding: 11px 13px; resize: vertical; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 10px; font: 400 .8rem/1.5 var(--font-ui); color: var(--c-ink); background: var(--kaart); } .hd-nieuwdoel { display: flex; align-items: center; gap: 10px; font-size: .78rem; } .hd-nieuwdoel > span:first-child { flex: 1; font-weight: 600; } .hd-nieuwdoel em { font-style: normal; font-size: .7rem; color: var(--c-ink-3); } .hd-pijl { color: var(--c-ink-3); flex: none; } .hd-nieuwdoel input { width: 82px; padding: 7px 10px; text-align: center; border: var(--lijndikte) solid var(--c-terra); border-radius: 8px; font: 700 .76rem var(--font-mono); color: var(--c-ink); background: var(--kaart); } .hd-akkoord { padding: 18px 22px; border-color: var(--c-terra); background: var(--c-terra-t); display: flex; flex-direction: column; gap: 6px; } .hd-akkoord strong { font-size: .84rem; color: var(--c-terra-d); } .hd-akkoord p { margin: 0 0 8px; font-size: .76rem; color: var(--c-ink-2); } .hd-akkoord__knoppen { display: flex; gap: 10px; flex-wrap: wrap; } .hd-instellen__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .hd-instellen__kop strong { display: block; font-size: .92rem; } .hd-instellen__kop span:not(.chip) { font-size: .72rem; color: var(--c-ink-3); } .hd-insmetric > strong { font-size: .8rem; display: block; margin-bottom: 9px; } .hd-insmetric em { font-style: normal; font-weight: 500; color: var(--c-ink-3); } .hd-perioden { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; } .hd-periode { border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; } .hd-periode.is-actueel { border-color: var(--c-terra); } .hd-periode > .mono:first-child { font-size: .64rem; color: var(--c-ink-3); } .hd-periode strong { font-size: .84rem; } .hd-periode em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); } .hd-instellen__voet { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; padding-top: 14px; border-top: var(--lijndikte) solid var(--c-lijn); } .hd-instellen__voet span { flex: 1; font-size: .72rem; color: var(--c-ink-3); min-width: 220px; } /* ============ ESS-app ============ */ .ess-vlak { display: flex; gap: 30px; flex-wrap: wrap; align-items: flex-start; } .ess-phone { width: 390px; max-width: 100%; flex: none; border-radius: 44px; background: var(--donker, var(--c-ink)); padding: 12px; box-shadow: var(--schaduw-tegel-hover); } .ess-phone__scherm { border-radius: 34px; overflow: hidden; background: var(--c-creme); height: 760px; display: flex; flex-direction: column; } .ess-statusbalk { display: flex; align-items: center; justify-content: space-between; padding: 14px 26px 8px; font: 700 .78rem var(--font-ui); color: var(--c-ink); } .ess-statusbalk span:last-child { font-size: .66rem; } .ess-scroll { flex: 1; overflow-y: auto; padding: 8px 20px 26px; } .ess-datum { font: 500 .76rem var(--font-ui); color: var(--c-ink-3); margin-top: 6px; } .ess-groet { font: 800 1.35rem var(--font-ui); color: var(--c-ink); letter-spacing: -.01em; margin-bottom: 16px; } .ess-sectiekop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; font-size: .8rem; } .ess-taken { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; } .ess-taak { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 15px; background: var(--kaart); box-shadow: var(--schaduw-tegel); } .ess-vink { width: 22px; height: 22px; flex: none; border-radius: 7px; cursor: pointer; border: 1.5px solid var(--c-lijn-2); background: var(--kaart); color: var(--knop-ink); display: flex; align-items: center; justify-content: center; } .ess-vink.is-aan { background: var(--c-groen); border-color: var(--c-groen); } .ess-taak__wat { min-width: 0; } .ess-taak__wat strong { display: block; font-size: .78rem; } .ess-taak__wat.is-klaar strong { color: var(--c-ink-3); text-decoration: line-through; } .ess-taak__wat em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); } .ess-akkoordkaart { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; cursor: pointer; padding: 15px 17px; border-radius: 16px; margin-bottom: 14px; border: var(--lijndikte) solid var(--c-terra); background: var(--c-terra-t); font: 500 .74rem var(--font-ui); color: var(--c-ink-2); } .ess-akkoordkaart strong { font-size: .8rem; color: var(--c-terra-d); } .ess-akkoordkaart em { font-style: normal; font-weight: 700; color: var(--c-groen-d); margin-top: 4px; } /* verlofkaart — gradient uit token-kleuren (aanvulling 14-07-2026) */ .ess-verlofkaart { border-radius: 18px; padding: 17px 19px; margin-bottom: 14px; background: linear-gradient(135deg, var(--c-groen-t), var(--c-sage-t)); border: var(--lijndikte) solid var(--c-groen); display: flex; flex-direction: column; gap: 2px; } .ess-verlofkaart > span { font: 600 .7rem var(--font-ui); color: var(--c-groen-d); } .ess-verlofkaart strong { font: 800 1.7rem var(--font-ui); color: var(--c-groen-d); margin-bottom: 10px; } .ess-verlofkaart strong em { font-style: normal; font-size: .84rem; font-weight: 700; } .ess-cta { width: 100%; padding: 13px; border-radius: 13px; border: 0; cursor: pointer; background: var(--donker, var(--c-ink)); color: var(--knop-ink); font: 700 .82rem var(--font-ui); } .ess-cta--breed { margin: 4px 0 18px; } .ess-cta.is-dicht { opacity: .5; cursor: not-allowed; } .ess-tegels { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 14px; } .ess-tegel { padding: 14px 15px; border-radius: 14px; border: 0; cursor: pointer; text-align: left; background: var(--kaart); box-shadow: var(--schaduw-tegel); font: 700 .78rem var(--font-ui); color: var(--c-ink); } .ess-tegel em { display: block; font-style: normal; font: 500 .64rem var(--font-ui); color: var(--c-ink-3); margin-top: 3px; } .ess-signaal { display: flex; gap: 11px; align-items: flex-start; padding: 13px 15px; border-radius: 15px; background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-oker); font: 600 .74rem/1.5 var(--font-ui); color: var(--c-amber); } .ess-signaal i { font-style: normal; font-size: .9rem; } .ess-terug { display: inline-flex; border: 0; background: none; cursor: pointer; font: 600 .78rem var(--font-ui); color: var(--c-groen-d); margin: 4px 0 12px; padding: 0; } .ess-kop2 { font: 800 1.2rem var(--font-ui); color: var(--c-ink); margin-bottom: 14px; } .ess-kaartje { border-radius: 16px; background: var(--kaart); box-shadow: var(--schaduw-tegel); padding: 15px 16px; margin-bottom: 12px; } .ess-kaartje > strong { font-size: .78rem; display: block; margin-bottom: 10px; } .ess-kal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; } .ess-kal i { height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-style: normal; font-size: .7rem; color: var(--c-ink-2); } .ess-kal__kop { font-size: .58rem !important; color: var(--c-lijn-2) !important; } .ess-kal i.is-sel { background: var(--c-groen); color: var(--knop-ink); font-weight: 700; } .ess-label { display: block; font: 700 .74rem var(--font-ui); color: var(--c-ink); margin-bottom: 8px; } .ess-soorten { display: flex; gap: 7px; margin-bottom: 14px; } .ess-soort { flex: 1; text-align: center; padding: 10px; border-radius: 12px; cursor: pointer; border: 1.5px solid var(--c-lijn-2); background: var(--kaart); font: 600 .74rem var(--font-ui); color: var(--c-ink-2); } .ess-soort.is-actief { border-color: var(--c-groen); background: var(--c-groen-t); color: var(--c-groen-d); font-weight: 700; } .ess-stepper { display: flex; align-items: center; justify-content: space-between; } .ess-stepper > strong { margin: 0; } .ess-stepper span { display: flex; align-items: center; gap: 14px; } .ess-stepper b { font: 800 1.05rem var(--font-ui); min-width: 24px; text-align: center; } .ess-stap { width: 32px; height: 32px; border-radius: 9px; border: 0; cursor: pointer; background: var(--c-creme); color: var(--c-ink); font: 700 1rem var(--font-ui); } .ess-saldona { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-radius: 14px; background: var(--c-groen-t); margin-bottom: 12px; font: 600 .76rem var(--font-ui); color: var(--c-groen-d); } .ess-saldona strong { font: 800 1rem var(--font-ui); } .ess-saldona.is-rood { background: var(--c-rood-t); color: var(--c-rood); } .ess-eerder { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ess-eerder strong { display: block; font-size: .78rem; } .ess-eerder em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); } .ess-bevestiging { text-align: center; padding: 20px 4px; } .ess-bevestiging i { width: 66px; height: 66px; border-radius: 50%; margin: 22px auto 16px; background: var(--c-groen-t); color: var(--c-groen-d); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 1.6rem; } .ess-bevestiging strong { display: block; font: 800 1.15rem var(--font-ui); margin-bottom: 8px; } .ess-bevestiging p { font: 500 .78rem/1.6 var(--font-ui); color: var(--c-ink-2); max-width: 260px; margin: 0 auto 20px; } .ess-intrekken { display: block; width: 100%; margin-top: 18px; padding: 12px; border-radius: 13px; cursor: pointer; border: var(--lijndikte) solid var(--c-rood-t); background: var(--kaart); color: var(--c-rood); font: 700 .76rem var(--font-ui); } .ess-declform { display: flex; flex-direction: column; gap: 12px; } .ess-declform label { display: flex; flex-direction: column; gap: 5px; font: 600 .72rem var(--font-ui); color: var(--c-ink-2); } .ess-declform input { padding: 11px 13px; border-radius: 11px; border: 1.5px solid var(--c-lijn-2); font: 600 .8rem var(--font-ui); color: var(--c-ink); background: var(--kaart); } .ess-context { flex: 1; min-width: 280px; max-width: 440px; } .ess-context h2 { font-size: 1.25rem; margin: 6px 0 10px; } .ess-context > p { font-size: .8rem; line-height: 1.65; color: var(--c-ink-2); margin: 0 0 16px; } .ess-punt { display: flex; gap: 11px; align-items: flex-start; padding: 12px 15px; margin-bottom: 9px; font: 500 .76rem/1.5 var(--font-ui); color: var(--c-ink-2); } .ess-punt i { font-style: normal; font-weight: 700; color: var(--c-terra-d); } .ess-punt strong { color: var(--c-ink); } /* ---- responsief ---- */ @media (max-width: 1080px) { .hd-grid, .hd-tweekolom { grid-template-columns: 1fr; } .hd-perioden { grid-template-columns: repeat(2, 1fr); } .hd-rij { grid-template-columns: 1fr; gap: 4px; } .hd-rij--kop { display: none; } } /* ESS · Mijn voertuig (15-07) */ .ess-tegel--voertuig em { color: var(--c-groen-d); } .ess-vtkaart { background: var(--c-paneel); border: 1px solid var(--c-lijn); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; } .ess-vtstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; } .ess-vtstats div { display: flex; flex-direction: column; gap: 1px; font-size: 11px; } .ess-vtstats span { color: var(--c-ink-2); } .ess-vtmelding { background: color-mix(in srgb, var(--c-groen) 12%, var(--c-paneel)); border-radius: 10px; padding: 8px 12px; font-size: 12px; color: var(--c-groen-d); margin-bottom: 8px; } .ess-veld { display: flex; flex-direction: column; gap: 4px; font-size: 12px; margin-bottom: 8px; } .ess-veld textarea, .ess-veld input { border: 1px solid var(--c-lijn); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13px; background: var(--c-paneel); color: var(--c-ink); } .ess-vtfoto { border: 1px dashed var(--c-lijn); border-radius: 99px; background: none; font: inherit; font-size: 12px; padding: 7px 14px; cursor: pointer; color: var(--c-ink-2); margin-bottom: 8px; width: 100%; } .ess-cta--stil { background: var(--c-paneel); color: var(--c-ink); border: 1px solid var(--c-lijn); } /* ---- ESS-berichten (chat + broadcast + meldingen) ---- */ .ess-berkaart { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; cursor: pointer; border: var(--lijndikte) solid var(--c-lijn); border-radius: 14px; background: var(--c-creme); padding: 12px 14px; margin: 4px 0 14px; box-shadow: var(--schaduw-tegel); } .ess-berkaart__i { font-size: 1.15rem; color: var(--c-groen-d); } .ess-berkaart__wat { flex: 1; display: flex; flex-direction: column; } .ess-berkaart__wat strong { font: 800 .92rem var(--font-ui); color: var(--c-ink); } .ess-berkaart__wat em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); } .ess-bertabs { display: flex; gap: 6px; margin-bottom: 12px; } .ess-bertab { flex: 1; border: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); border-radius: var(--radius-klein); padding: 7px 6px; cursor: pointer; font: 700 .72rem var(--font-ui); color: var(--c-ink-2); } .ess-bertab.is-actief { background: var(--c-groen); border-color: var(--c-groen); color: var(--knop-ink); } .ess-bertab b { font-weight: 800; } .ess-gesprekken { display: flex; flex-direction: column; gap: 8px; } .ess-gesprek { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; cursor: pointer; border: var(--lijndikte) solid var(--c-lijn); border-radius: 12px; background: var(--kaart); padding: 10px 12px; } .ess-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-paneel); font: 800 .74rem var(--font-mono); color: var(--c-ink-2); flex: none; } .ess-gesprek__wie { flex: 1; display: flex; flex-direction: column; min-width: 0; } .ess-gesprek__wie strong { font-size: .82rem; } .ess-gesprek__wie em { font-style: normal; font-size: .7rem; color: var(--c-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ess-berterug { border: 0; background: none; cursor: pointer; font: 600 .74rem var(--font-ui); color: var(--c-groen-d); padding: 0; margin-bottom: 8px; } .ess-bertitel { font: 800 .9rem var(--font-ui); color: var(--c-ink); margin-bottom: 10px; } .ess-chat { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; } .ess-chatbubbel { max-width: 82%; align-self: flex-start; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: 12px; padding: 7px 11px; font-size: .8rem; color: var(--c-ink); line-height: 1.4; } .ess-chatbubbel.is-ik { align-self: flex-end; background: var(--c-groen-t); border-color: var(--c-groen-t); } .ess-chatvan { display: block; font: 700 .6rem var(--font-ui); color: var(--c-ink-3); margin-bottom: 2px; } .ess-chatform { display: flex; gap: 7px; align-items: center; } .ess-chatform input { flex: 1; border: 1px solid var(--c-lijn); border-radius: 99px; padding: 9px 13px; font: inherit; font-size: 13px; background: var(--kaart); color: var(--c-ink); } .ess-chatform .ess-cta { margin: 0; white-space: nowrap; } .ess-meds, .ess-melds { display: flex; flex-direction: column; gap: 9px; } .ess-med { border: var(--lijndikte) solid var(--c-lijn); border-radius: 12px; background: var(--kaart); padding: 11px 13px; } .ess-med.is-plicht { border-color: var(--c-amber-t); } .ess-med__kop { display: flex; gap: 6px; margin-bottom: 6px; } .ess-med strong { display: block; font-size: .84rem; margin-bottom: 3px; } .ess-med p { margin: 0 0 6px; font-size: .76rem; color: var(--c-ink-2); line-height: 1.45; } .ess-med__voet { font-size: .64rem; color: var(--c-ink-3); } .ess-meldrij { display: flex; gap: 11px; align-items: flex-start; border: var(--lijndikte) solid var(--c-lijn); border-radius: 12px; background: var(--kaart); padding: 10px 12px; } .ess-meldrij.is-nieuw { border-color: var(--c-terra-t); } .ess-meldrij i { font-style: normal; font-size: 1rem; color: var(--c-terra-d); } .ess-meldrij > div { display: flex; flex-direction: column; } .ess-meldrij strong { font-size: .8rem; } .ess-meldrij em { font-style: normal; font-size: .7rem; color: var(--c-ink-2); } .ess-berlink { border: 0; background: none; cursor: pointer; font: 600 .72rem var(--font-ui); color: var(--c-groen-d); padding: 0; margin-bottom: 4px; align-self: flex-start; } /* Reviewronde Tim 23-07 · punt 9: ziek melden in de ESS-app */ .ess-tegel--ziek { border-color: var(--c-amber); } .ess-ziekstap p { margin: 4px 0 0; font-size: .78rem; color: var(--c-ink-2); } .ess-ziekvink { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .82rem; font-weight: 600; cursor: pointer; } .ess-ziekvink input { accent-color: var(--c-groen-d); width: 18px; height: 18px; } .ess-ziektel { text-decoration: none; border-bottom: 1px solid var(--c-lijn); color: inherit; } /* M1 · medewerker-app: saldo per bakje, periode, verval */ .ess-saldo strong { display: block; font-size: 1.4rem; } .ess-saldo strong em { font-style: normal; font-size: .78rem; color: var(--ink2); margin-left: 6px; } .ess-bakje { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 6px 0; border-top: 1px solid var(--lijn); font-size: .84rem; } .ess-bakje b { font-family: var(--font-mono); } .ess-bakje small { grid-column: 1 / -1; color: var(--ink3); font-size: .72rem; } .ess-verval { margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-klein); background: var(--let-t); font-size: .82rem; } .ess-periode { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ess-periode label { display: grid; gap: 4px; font-size: .74rem; color: var(--ink3); text-transform: uppercase; letter-spacing: .04em; } .ess-periode input, .ess-periode select { font: inherit; padding: 8px 10px; border: 1px solid var(--lijn2); border-radius: var(--radius-klein); background: var(--kaart); color: var(--ink); min-width: 0; width: 100%; box-sizing: border-box; } .ess-periode select:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } .ess-periode__breed { grid-column: 1 / -1; } .ess-periode input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } .ess-saldona small { display: block; grid-column: 1 / -1; color: var(--ink2); font-size: .76rem; margin-top: 4px; } /* M5 · mijn gesprek, onderzoek, papieren */ .ess-vraag strong { display: block; margin-bottom: 6px; font-size: .9rem; } .ess-schaal { display: flex; gap: 6px; flex-wrap: wrap; } .ess-schaal__k { min-width: 40px; height: 36px; border: 1px solid var(--lijn2); border-radius: var(--radius-klein); background: var(--kaart); font: inherit; font-family: var(--font-mono); cursor: pointer; color: var(--ink); } .ess-schaal--breed .ess-schaal__k { min-width: 32px; } .ess-schaal__k.is-aan { background: var(--accent); color: var(--knop-ink); border-color: var(--accent); } .ess-schaal__k:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .ess-uitleg { font-size: .84rem; color: var(--ink2); margin: 0 0 10px; } .ess-tekst { width: 100%; box-sizing: border-box; font: inherit; padding: 8px 10px; border: 1px solid var(--lijn2); border-radius: var(--radius-klein); background: var(--kaart); color: var(--ink); } .ess-tekst:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } /* ── lms.css ── */ /* ===================================================================== lms.css — module 5.5 · LMS · assessments · intranet · arbo. Uitsluitend tokens; module-wortel-marge volgens de vaste UI-norm. ===================================================================== */ .lm { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; } .lm-kop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; } .lm-kop p { margin: 0; max-width: 74ch; color: var(--c-ink-2); font-size: .82rem; line-height: 1.5; } .lm-voetnoot { font-size: .74rem; color: var(--c-ink-2); line-height: 1.55; } .lm-hint { font-size: .72rem; color: var(--c-ink-3); align-self: center; } .lm-intro { margin: 0; font-size: .78rem; color: var(--c-ink-2); max-width: 80ch; line-height: 1.55; } .lm-balk { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; } .lm-rek { flex: 1; } .lm-knop { padding: 9px 14px; border-radius: 10px; cursor: pointer; white-space: nowrap; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); color: var(--c-ink); font: 700 .78rem var(--font-ui); transition: background 160ms, border-color 160ms; } .lm-knop:hover { border-color: var(--c-ink-3); } .lm-knop--primair { background: var(--c-groen); border-color: var(--c-groen); color: var(--knop-ink); } .lm-knop--primair:hover { background: var(--c-groen-d); border-color: var(--c-groen-d); } .lm-knop--rood { border-color: var(--c-rood-t); color: var(--c-rood); } .lm-knop--terra { background: var(--c-terra); border-color: var(--c-terra); color: var(--knop-ink); } .lm-knop--donker { background: var(--donker, var(--c-ink)); border-color: var(--c-ink); color: var(--knop-ink); } .lm-knop--klein { padding: 6px 11px; font-size: .72rem; border-radius: 8px; } .lm-tabs { display: flex; gap: 8px; flex-wrap: wrap; } .lm-tab { padding: 9px 15px; border-radius: 10px; cursor: pointer; white-space: nowrap; border: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); font: 600 .78rem var(--font-ui); color: var(--c-ink-2); } .lm-tab.is-actief { background: var(--donker, var(--c-ink)); border-color: var(--c-ink); color: var(--knop-ink); font-weight: 700; } .lm-flt { padding: 8px 14px; border-radius: 9px; cursor: pointer; white-space: nowrap; border: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); font: 600 .74rem var(--font-ui); color: var(--c-ink-2); } .lm-flt.is-actief { background: var(--donker, var(--c-ink)); border-color: var(--c-ink); color: var(--knop-ink); font-weight: 700; } .lm-sorteer { display: flex; gap: 4px; } /* ---- lms: matrix ---- */ .lm-mrij { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr) 1.1fr; gap: 10px; align-items: center; padding: 12px 16px; font-size: .78rem; border-bottom: var(--lijndikte) solid var(--c-lijn); } .lm-mrij--kop { font-size: .58rem; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); background: var(--c-creme); } .lm-mrij strong { display: block; font-size: .8rem; } .lm-mrij em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); } .lm-r { text-align: right; } .lm-leeg { font-style: normal; color: var(--c-lijn-2); } .lm-reden { padding: 8px 16px 12px; font: 600 .72rem var(--font-ui); color: var(--c-rood); border-bottom: var(--lijndikte) solid var(--c-lijn); background: var(--c-rood-t); } .lm-reden:last-child, .lm-mrij:last-child { border-bottom: 0; } .lm-cursussen { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .lm-cursus { padding: 16px 18px; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; } .lm-cursus strong { font-size: .88rem; } .lm-cursus span { font-size: .7rem; color: var(--c-ink-3); } .lm-cursus em { font-style: normal; } .lm-certrij { display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-size: .78rem; border-bottom: var(--lijndikte) solid var(--c-lijn); } .lm-certrij:last-child { border-bottom: 0; } .lm-certrij > div { flex: 1; min-width: 0; } .lm-certrij strong { display: block; font-size: .8rem; } .lm-certrij em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); } .lm-certrij .mono { font-size: .7rem; color: var(--c-ink-2); } /* ---- assessments ---- */ .lm-asgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; } .lm-askaart { padding: 17px 19px; display: flex; flex-direction: column; gap: 8px; } .lm-askaart__kop { display: flex; align-items: center; gap: 9px; } .lm-askaart__kop strong { font-size: .92rem; } .lm-askaart__sub { font-size: .68rem; color: var(--c-ink-3); } .lm-comps { display: flex; flex-direction: column; gap: 7px; } .lm-comp__kop { display: flex; justify-content: space-between; font: 600 .7rem var(--font-ui); color: var(--c-ink-2); margin-bottom: 3px; } .lm-comp__balk { height: 5px; border-radius: 3px; background: var(--c-creme); } .lm-comp__balk b { display: block; height: 100%; border-radius: 3px; background: var(--c-groen); } .lm-eind { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 10px; background: var(--c-groen-t); font: 600 .74rem var(--font-ui); color: var(--c-groen-d); } .lm-eind strong { font-size: .95rem; } .lm-verborgen { font: 500 .74rem var(--font-ui); color: var(--c-ink-3); padding: 6px 0; } .lm-doelchips { display: flex; flex-wrap: wrap; gap: 6px; } .lm-askaart__acties { display: flex; gap: 8px; margin-top: 4px; } .lm-locknote { font: 500 .64rem/1.4 var(--font-ui); color: var(--c-ink-3); padding-top: 8px; border-top: var(--lijndikte) solid var(--c-lijn); } /* ---- intranet ---- */ .lm-intragrid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; } .lm-intragrid > div:first-child { display: flex; flex-direction: column; gap: 12px; } .lm-post { padding: 16px 19px; display: flex; flex-direction: column; gap: 6px; } .lm-post__kop { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .lm-post__kop em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); } .lm-pin { font: 700 .64rem var(--font-ui); color: var(--c-amber); } .lm-post > strong { font-size: .92rem; } .lm-post p { margin: 0; font-size: .78rem; line-height: 1.5; color: var(--c-ink-2); } .lm-post__voet { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; } .lm-post__voet em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); } .lm-gelezen { font: 700 .72rem var(--font-ui); color: var(--c-groen-d); } .lm-intrazij { display: flex; flex-direction: column; gap: 14px; } .lm-pinblok { padding: 16px 18px; background: var(--donker, var(--c-ink)); border-color: var(--c-ink); color: var(--c-creme); display: flex; flex-direction: column; gap: 8px; } .lm-pinblok .kicker { color: var(--c-lijn); } .lm-pinrij { font: 600 .76rem var(--font-ui); } .lm-pinrij em { font-style: normal; font-weight: 500; opacity: .6; } .lm-unconf { padding: 14px 16px; border-color: var(--c-terra); background: var(--c-terra-t); display: flex; flex-direction: column; gap: 4px; } .lm-unconf strong { font-size: .8rem; color: var(--c-terra-d); } .lm-unconf span { font-size: .7rem; color: var(--c-ink-2); line-height: 1.5; } /* ---- arbo ---- */ .lm-melding { padding: 16px 19px; display: flex; align-items: flex-start; gap: 14px; } .lm-melding__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .lm-melding__kop { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .lm-melding__kop strong { font-size: .86rem; } .lm-onhold { font: 700 .62rem var(--font-ui); padding: 3px 9px; border-radius: 6px; background: var(--c-rood); color: var(--knop-ink); } .lm-melding__sub { font-size: .72rem; color: var(--c-ink-3); } .lm-melding__st { font: 600 .74rem var(--font-ui); color: var(--c-ink-2); } .lm-maatregel { font: 500 .76rem/1.45 var(--font-ui); color: var(--c-ink); padding: 9px 12px; border-radius: 10px; background: var(--c-groen-t); } .lm-tbgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .lm-toolbox { padding: 16px 19px; display: flex; flex-direction: column; gap: 7px; align-items: flex-start; } .lm-toolbox__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; } .lm-toolbox__kop strong { font-size: .88rem; } .lm-toolbox span:not(.chip) { font-size: .7rem; color: var(--c-ink-3); } .lm-compleet { font-style: normal; font: 700 .72rem var(--font-ui); color: var(--c-groen-d); } /* ---- responsief ---- */ @media (max-width: 1080px) { .lm-intragrid { grid-template-columns: 1fr; } .lm-mrij { grid-template-columns: 1fr 1fr; } .lm-mrij--kop { display: none; } } /* ---------- Catalogusbeheer (cursus bewerken / uit catalogus) ---------- */ .lm-cursusacties { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px dashed var(--c-lijn); margin-top: 9px; padding-top: 9px; } .lm-cursusacties > span:first-child { font-size: .62rem; color: var(--c-ink-3); } .lm-cursusacties > span:last-child { display: flex; gap: 4px; } .lm-mini { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; padding: 4px 8px; font: 600 .68rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; transition: background 160ms ease, border-color 160ms ease; } .lm-mini:hover { background: var(--c-creme); border-color: var(--c-groen); color: var(--c-groen-d); } /* Reviewronde Tim 23-07 · punt 8: BHV-dekkings-kaart */ .lm-bhv { margin-top: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; } .lm-bhv--tekort { border-color: var(--c-amber); } .lm-bhv__kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .lm-bhv__kop > div { display: flex; flex-direction: column; gap: 3px; } .lm-bhv__cellen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .lm-bhv__cellen > div { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 10px 12px; } .lm-bhv__cellen span:first-child { font-size: .66rem; color: var(--c-ink-3); text-transform: uppercase; letter-spacing: .05em; } .lm-bhv__houders { font-size: .74rem; color: var(--c-ink-2); margin: 0; } .lm-bhv__actie { font-size: .76rem; border-top: 1px solid var(--c-lijn); padding-top: 9px; } @media (max-width: 900px) { .lm-bhv__cellen { grid-template-columns: 1fr 1fr; } } /* ── directie.css ── */ /* ===================================================================== directie.css — module 5.6 · Directiecockpit + OKR's. Uitsluitend tokens; het prototype-blauw is gemapt op ink/oker (blauw verboden). Module-wortel-marge volgens de vaste UI-norm. ===================================================================== */ .dc { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; } .dc-kop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; } .dc-kop p { margin: 0; max-width: 72ch; color: var(--c-ink-2); font-size: .82rem; line-height: 1.5; } .dc-voetnoot { font-size: .74rem; color: var(--c-ink-2); line-height: 1.55; } .dc-balk { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; } .dc-sep { width: 1px; height: 22px; background: var(--c-lijn-2); } .dc-rek { flex: 1; } .is-groen { color: var(--c-groen-d); } .is-amber { color: var(--c-amber); } .is-rood { color: var(--c-rood); } .dc-knop { padding: 8px 14px; border-radius: 9px; cursor: pointer; white-space: nowrap; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); color: var(--c-ink); font: 700 .76rem var(--font-ui); } .dc-knop:hover { border-color: var(--c-ink-3); } .dc-knop--primair { background: var(--c-groen); border-color: var(--c-groen); color: var(--knop-ink); } .dc-knop--goud { background: var(--c-oker); border-color: var(--c-oker); color: var(--c-ink); } .dc-knop--rood { border-color: var(--c-rood-t); background: var(--c-rood-t); color: var(--c-rood); } .dc-knop--klein { padding: 6px 11px; font-size: .7rem; border-radius: 8px; } .dc-terug { align-self: flex-start; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); border-radius: 8px; padding: 7px 14px; cursor: pointer; font: 600 .76rem var(--font-ui); color: var(--c-ink-2); } .dc-chip { padding: 7px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap; border: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); font: 500 .74rem var(--font-ui); color: var(--c-ink-2); } .dc-chip.is-actief { background: var(--donker, var(--c-ink)); border-color: var(--c-ink); color: var(--knop-ink); font-weight: 700; } /* ---- status-dot ---- */ .dc-st { display: inline-flex; align-items: center; gap: 5px; font: 600 .66rem var(--font-ui); } .dc-st b { width: 7px; height: 7px; border-radius: 99px; } .dc-st.is-groen { color: var(--c-groen-d); } .dc-st.is-groen b { background: var(--c-groen); } .dc-st.is-amber { color: var(--c-amber); } .dc-st.is-amber b { background: var(--c-oker); } .dc-st.is-rood { color: var(--c-rood); } .dc-st.is-rood b { background: var(--c-rood); } /* ---- marge-hero (ink-donker; prototype-blauw gemapt) ---- */ .dc-hero { border-radius: 18px; background: var(--donker, var(--c-ink)); color: var(--c-creme); padding: 22px 26px; display: flex; gap: 24px; flex-wrap: wrap; } .dc-hero .kicker { color: var(--c-lijn); } .dc-hero__links { min-width: 240px; } .dc-hero__kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .dc-hero__kicker em { font: 700 .58rem var(--font-ui); font-style: normal; color: var(--c-oker); background: color-mix(in srgb, var(--c-oker) 20%, transparent); padding: 2px 8px; border-radius: 5px; } .dc-hero__waarde { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .dc-hero__waarde strong { font: 700 2.6rem/1 var(--font-ui); letter-spacing: -.02em; } .dc-hero__waarde span { font: 700 .84rem var(--font-mono); opacity: .75; } .dc-hero__waarde .is-op { color: var(--c-sage); opacity: 1; } .dc-hero__waarde .is-neer { color: var(--c-blush); opacity: 1; } .dc-hero__euro { font-size: 1.05rem; opacity: .9; margin-top: 6px; } .dc-hero__sub { font: 500 .72rem var(--font-ui); opacity: .6; margin-top: 4px; } .dc-hero__doel { margin-top: 14px; max-width: 280px; } .dc-hero__doelkop { display: flex; justify-content: space-between; font: 600 .66rem var(--font-ui); opacity: .8; margin-bottom: 5px; } .dc-hero__doelbalk { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--kaart) 15%, transparent); overflow: hidden; } .dc-hero__doelbalk b { display: block; height: 100%; border-radius: 99px; background: var(--c-oker); } .dc-hero__doelbalk b.is-ok { background: var(--c-sage); } .dc-hero__doelnote { display: block; font: 600 .66rem var(--font-ui); color: var(--c-oker); margin-top: 6px; } .dc-hero__doelnote.is-ok { color: var(--c-sage); } .dc-hero__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; } .dc-hero .dc-chip { background: transparent; border-color: color-mix(in srgb, var(--kaart) 22%, transparent); color: color-mix(in srgb, var(--knop-ink) 75%, transparent); } .dc-hero .dc-chip.is-actief { background: var(--c-creme); border-color: var(--c-creme); color: var(--c-ink); } .dc-hero__rechts { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 11px; } .dc-hero__dimbalk { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .dc-hero__dims { background: color-mix(in srgb, var(--kaart) 6%, transparent); border: 1px solid color-mix(in srgb, var(--kaart) 12%, transparent); border-radius: 13px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .dc-hero__dims em { font: 500 .62rem var(--font-ui); font-style: normal; opacity: .5; } .dc-dimrij { display: flex; align-items: center; gap: 12px; font: 600 .76rem var(--font-ui); } .dc-dimrij > span { min-width: 120px; } .dc-dimbalk { flex: 1; height: 8px; border-radius: 99px; background: color-mix(in srgb, currentColor 10%, transparent); overflow: hidden; font-style: normal; } .dc-dimbalk b { display: block; height: 100%; border-radius: 99px; } .dc-dimbalk b.is-groen { background: var(--c-sage); } .dc-dimbalk b.is-amber { background: var(--c-oker); } .dc-dimbalk b.is-rood { background: var(--c-rood); } .dc-dimbalk b.is-ink { background: var(--c-ink-2); } .dc-dimrij strong { min-width: 52px; text-align: right; } .dc-dimrij .is-groen { color: var(--c-sage); } .dc-hero__dims .dc-dimrij .is-amber { color: var(--c-oker); } /* ---- ondergrens-signaal ---- */ .dc-signaal { display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; padding: 12px 16px; border-radius: 12px; width: 100%; border: var(--lijndikte) solid var(--c-rood); background: var(--c-rood-t); } .dc-signaal i { width: 30px; height: 30px; border-radius: 8px; flex: none; font-style: normal; display: flex; align-items: center; justify-content: center; font: 700 .82rem var(--font-ui); color: var(--knop-ink); background: var(--c-rood); } .dc-signaal span { flex: 1; min-width: 0; } .dc-signaal strong { display: block; font-size: .8rem; color: var(--c-rood); } .dc-signaal em { font-style: normal; font-size: .72rem; color: var(--c-ink-2); } .dc-signaal b { font: 600 .72rem var(--font-ui); color: var(--c-rood); white-space: nowrap; } .dc-geenrecht { padding: 14px 18px; font-size: .78rem; color: var(--c-ink-2); border-color: var(--c-terra); } .dc-bron { display: flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 11px; background: var(--c-sage-t); border: var(--lijndikte) solid var(--c-sage); font: 500 .76rem var(--font-ui); color: var(--c-ink-2); } .dc-bron i { font-style: normal; color: var(--c-groen-d); } /* ---- KPI-blokken ---- */ .dc-blok__kop { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; } .dc-accent { width: 8px; height: 8px; border-radius: 99px; } .dc-accent.is-groen { background: var(--c-groen); } .dc-accent.is-terra { background: var(--c-terra); } .dc-accent.is-oker { background: var(--c-oker); } .dc-accent.is-blush { background: var(--c-blush); } .dc-accent.is-sage { background: var(--c-sage); } .dc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .dc-kpi { padding: 15px 17px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 3px; } .dc-kpi:hover { border-color: var(--c-ink-3); } .dc-kpi__kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; } .dc-kpi__kop em { font-style: normal; font-size: .7rem; font-weight: 700; } .dc-kpi > strong { font-size: 1.35rem; letter-spacing: -.01em; } .dc-kpi__label { font: 500 .74rem var(--font-ui); color: var(--c-ink-2); } .dc-kpi__balk { height: 3px; border-radius: 99px; margin-top: 8px; font-style: normal; background: var(--c-creme); overflow: hidden; } .dc-kpi__balk b { display: block; height: 100%; border-radius: 99px; } .dc-kpi__balk.is-groen b { background: var(--c-groen); } .dc-kpi__balk.is-amber b { background: var(--c-oker); } .dc-kpi__balk.is-rood b { background: var(--c-rood); } .dc-kpi__bron { font-style: normal; font-size: .58rem; color: var(--c-ink-3); margin-top: 6px; } /* ---- OKR ---- */ .dc-okr { overflow: hidden; } .dc-okr__kop { display: flex; align-items: center; gap: 15px; padding: 15px 20px; width: 100%; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; } .dc-ring { width: 46px; height: 46px; border-radius: 99px; flex: none; display: flex; align-items: center; justify-content: center; } .dc-ring.is-groen { --ring: var(--c-groen); color: var(--c-groen-d); } .dc-ring.is-amber { --ring: var(--c-oker); color: var(--c-amber); } .dc-ring.is-rood { --ring: var(--c-rood); color: var(--c-rood); } .dc-ring i { width: 36px; height: 36px; border-radius: 99px; background: var(--kaart); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: .64rem; font-weight: 700; } .dc-okr__wat { flex: 1; min-width: 0; } .dc-okr__titel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .dc-okr__titel strong { font-size: .92rem; } .dc-okr__wat > em { font-style: normal; font-size: .72rem; color: var(--c-ink-3); } .dc-gesignaleerd { font: 700 .7rem var(--font-ui); color: var(--c-groen-d); white-space: nowrap; } .dc-caret { font-size: .9rem; color: var(--c-ink-3); } .dc-okr__krs { padding: 0 20px 16px; border-top: var(--lijndikte) solid var(--c-lijn); display: flex; flex-direction: column; gap: 11px; padding-top: 12px; } .dc-kr { display: grid; grid-template-columns: 1.7fr 1fr .6fr auto; gap: 14px; align-items: center; } .dc-kr__wat strong { display: block; font-size: .8rem; } .dc-kr__wat em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); } .dc-cascade { display: block; font: 600 .64rem var(--font-ui); color: var(--c-groen-d); margin-top: 3px; } .dc-kr__balkcel { display: flex; align-items: center; gap: 9px; } .dc-kr__balkcel span { font-size: .7rem; font-weight: 700; } .dc-kr__balk { flex: 1; height: 5px; border-radius: 99px; background: var(--c-creme); overflow: hidden; font-style: normal; } .dc-kr__balk b { display: block; height: 100%; border-radius: 99px; } .dc-kr__balk.is-groen b { background: var(--c-groen); } .dc-kr__balk.is-amber b { background: var(--c-oker); } .dc-kr__balk.is-rood b { background: var(--c-rood); } .dc-kr__waarde { text-align: right; font-size: .78rem; } /* ---- KPI-detail ---- */ .dc-detkop { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; } .dc-detkop h2 { margin: 4px 0 6px; font-size: 1.3rem; } .dc-detwaarde { margin-left: auto; font-size: 2rem; letter-spacing: -.02em; } .dc-detgrid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; } .dc-detzij { display: flex; flex-direction: column; gap: 14px; } .dc-blokkaart { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; } .dc-blokkaart > strong { font-size: .86rem; } .dc-trend { width: 100%; height: 150px; } .dc-trend polyline.is-groen, .dc-trend circle.is-groen { stroke: var(--c-groen); } .dc-trend circle.is-groen { fill: var(--c-groen); stroke: none; } .dc-trend polyline.is-amber { stroke: var(--c-oker); } .dc-trend circle.is-amber { fill: var(--c-oker); } .dc-trend polyline.is-rood { stroke: var(--c-rood); } .dc-trend circle.is-rood { fill: var(--c-rood); } .dc-trendlabels { display: flex; justify-content: space-between; font-size: .6rem; color: var(--c-ink-3); } .dc-doelnaam { font: 600 .8rem var(--font-ui); } .dc-blokkaart em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); } /* ---- responsief ---- */ @media (max-width: 1080px) { .dc-detgrid { grid-template-columns: 1fr; } .dc-kr { grid-template-columns: 1fr; gap: 6px; } .dc-kr__waarde { text-align: left; } } /* Alerts + digest (E4a/b) */ .dc-alertbalk { border: 1px solid var(--c-lijn); border-radius: 12px; padding: 12px 16px; margin: 14px 0; display: flex; flex-direction: column; gap: 8px; } .dc-alertbalk__kop { display: flex; justify-content: space-between; align-items: center; } .dc-alert { display: flex; align-items: center; gap: 10px; font-size: 13px; } .dc-alert i { font-weight: 800; color: var(--c-amber); } .dc-alert.is-ok i { color: var(--c-groen-d); } .dc-alert span { flex: 1; } .dc-alert button { margin-left: auto; } /* blok H · een signaal uit Inzicht is een regel waar je op klikt (opent het scherm dat het signaal draagt) */ .dc-alert--knop { width: 100%; border: 0; background: none; padding: 4px 0; text-align: left; font: inherit; color: inherit; cursor: pointer; border-radius: var(--radius-klein); } .dc-alert--knop:hover span strong { text-decoration: underline; } .dc-st.is-stil { color: var(--c-ink-3); } .dc-st.is-stil b { background: var(--c-ink-3); } .dc-digestbalk { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; } .dc-digestbalk__sub { display: block; font-size: 12px; color: var(--c-ink-2); } .dc-digest { background: color-mix(in srgb, var(--c-ink) 4%, var(--c-paneel)); border-radius: 10px; padding: 14px; font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; font-family: var(--font-ui); margin: 10px 0 0; } .dc-digestconfig { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .dc-digestchip { font-size: 12.5px; display: inline-flex; gap: 5px; align-items: center; } .dc-alertconfig { display: flex; flex-direction: column; gap: 6px; } .dc-alertcrij { display: grid; grid-template-columns: 1.6fr .9fr .9fr auto; gap: 10px; align-items: center; font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--c-lijn); } .dc-alertcrij--kop { font-size: 10.5px; text-transform: uppercase; color: var(--c-ink-2); border-bottom: 0; } .dc-alertcrij select, .dc-alertcrij input[type=number] { border: 1px solid var(--c-lijn); border-radius: 8px; padding: 5px 8px; font: inherit; font-size: 12.5px; background: var(--c-paneel); color: var(--c-ink); } .dc-knop--klein { font-size: 12px; padding: 5px 12px; } /* B20 · kerncijfers live */ .dc-kckaart { padding: 16px 18px; margin-bottom: 14px; } .dc-kcgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 12px; } .dc-kccel { border: 1px solid var(--c-lijn); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; background: var(--c-creme); } .dc-kccel strong { font-size: .88rem; } .dc-kccel span { font-size: .62rem; color: var(--c-ink-2); } @media (max-width: 1200px) { .dc-kcgrid { grid-template-columns: repeat(3, 1fr); } } .dc-kcketen { margin-top: 14px; } /* OKR-K (02-09) · de check-in onder de key results. Kleur alleen op het vertrouwen — daar zit de betekenis; de rest blijft inkt op paneel. */ .dc-checkin { border-top: var(--lijndikte) solid var(--c-lijn); padding: 14px 18px 4px; } .dc-checkin__kop { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .dc-checkin__rij { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 9px 0; border-top: var(--lijndikte) solid var(--c-lijn); } .dc-checkin__rij strong { display: block; font-weight: 600; font-size: .84rem; } .dc-checkin__rij em { display: block; font-style: normal; font-size: .8rem; color: var(--c-ink-2); margin-top: 2px; } .dc-checkin__meta { display: block; font-size: .68rem; color: var(--c-ink-3); margin-top: 4px; } .dc-checkin__leeg { font-size: .82rem; color: var(--c-ink-2); padding: 4px 0 12px; } .dc-kr__bron { font-size: .66rem; color: var(--c-ink-3); white-space: nowrap; } /* ── analyse.css ── */ /* ===================================================================== analyse.css — module 5.7 · Analyse-suite (BI, AI, conversie, rapportages, CO₂). Uitsluitend tokens; AI/BI-paars uit het prototype gemapt op terra. Module-wortel-marge volgens de norm. ===================================================================== */ .an { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; } .an-kop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; } .an-kop p { margin: 0; max-width: 74ch; color: var(--c-ink-2); font-size: .82rem; line-height: 1.5; } .an-voetnoot { font-size: .74rem; color: var(--c-ink-2); line-height: 1.55; } .an-hint { font-size: .72rem; color: var(--c-ink-3); } .an-balk { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .an-rek { flex: 1; } .is-groen { color: var(--c-groen-d); } .is-rood { color: var(--c-rood); } .is-goud { color: var(--c-terra-d); } .an-knop { padding: 9px 14px; border-radius: 10px; cursor: pointer; white-space: nowrap; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); color: var(--c-ink); font: 700 .78rem var(--font-ui); } .an-knop:hover { border-color: var(--c-ink-3); } .an-knop--primair { background: var(--c-groen); border-color: var(--c-groen); color: var(--knop-ink); } .an-knop--klein { padding: 6px 11px; font-size: .72rem; border-radius: 8px; } .an-knop.is-klaar { border-color: var(--c-groen); background: var(--c-groen-t); color: var(--c-groen-d); cursor: default; } .an-knop[aria-disabled="true"] { opacity: .55; cursor: not-allowed; } .an-link { border: 0; background: none; padding: 0; cursor: pointer; font: 700 .74rem var(--font-ui); color: var(--c-terra-d); } .an-tabs { display: flex; gap: 8px; flex-wrap: wrap; } .an-tab { padding: 9px 15px; border-radius: 10px; cursor: pointer; white-space: nowrap; border: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); font: 600 .78rem var(--font-ui); color: var(--c-ink-2); } .an-tab.is-actief { background: var(--donker, var(--c-ink)); border-color: var(--c-ink); color: var(--knop-ink); font-weight: 700; } .an-flt { padding: 8px 14px; border-radius: 9px; cursor: pointer; border: 0; background: none; font: 600 .74rem var(--font-ui); color: var(--c-ink-2); } .an-flt.is-actief { background: var(--kaart); color: var(--c-ink); font-weight: 700; } .an-perwissel { display: flex; gap: 4px; padding: 4px; background: var(--c-paneel); border-radius: 11px; } .an-chips { display: flex; gap: 6px; flex-wrap: wrap; } .an-chip { padding: 6px 12px; border-radius: 8px; cursor: pointer; border: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); font: 600 .7rem var(--font-ui); color: var(--c-ink-2); } .an-chip.is-actief { background: var(--c-terra); border-color: var(--c-terra); color: var(--knop-ink); font-weight: 700; } .an-chip.is-lock { opacity: .55; } .an-zoek { padding: 9px 13px; border-radius: 10px; min-width: 220px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); font: 500 .78rem var(--font-ui); color: var(--c-ink); } /* ---- BI ---- */ .an-personas { display: flex; gap: 10px; flex-wrap: wrap; } .an-persona { flex: 1; min-width: 220px; text-align: left; cursor: pointer; padding: 13px 16px; border-radius: 13px; border: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); display: flex; flex-direction: column; gap: 3px; } .an-persona.is-actief { border-color: var(--c-terra); background: var(--c-terra-t); } .an-persona strong { font-size: .84rem; } .an-persona em { font-style: normal; font-size: .62rem; color: var(--c-terra-d); } .an-persona span { font-size: .68rem; color: var(--c-ink-3); line-height: 1.4; } .an-bigrid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; } .an-bizij { display: flex; flex-direction: column; gap: 14px; } .an-biblok { padding: 15px 16px; display: flex; flex-direction: column; gap: 10px; } .an-legendanote { font-style: normal; font-size: .64rem; color: var(--c-ink-3); } .an-metricgroep { display: flex; flex-direction: column; gap: 7px; } .an-bicanvas { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .an-governance { display: flex; gap: 11px; align-items: flex-start; padding: 13px 16px; border-radius: 13px; background: var(--c-terra-t); border: var(--lijndikte) solid var(--c-terra); } .an-governance i { font-style: normal; font-weight: 700; color: var(--c-terra-d); } .an-governance strong { display: block; font-size: .78rem; color: var(--c-terra-d); margin-bottom: 2px; } .an-governance span { font-size: .74rem; color: var(--c-ink-2); line-height: 1.5; } .an-governance em { display: block; font-style: normal; font-size: .62rem; color: var(--c-ink-3); margin-top: 4px; } .an-chart { padding: 20px 22px; min-height: 320px; display: flex; flex-direction: column; gap: 12px; } .an-chart__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .an-chart__kop strong { font-size: 1rem; } .an-chart__totaal { font-size: .72rem; color: var(--c-ink-3); } .an-lock { padding: 40px 30px; text-align: center; border: 1px dashed var(--c-rood); border-radius: 13px; background: var(--c-rood-t); } .an-lock strong { display: block; font-size: .9rem; color: var(--c-rood); margin-bottom: 6px; } .an-lock p { margin: 0 auto; font-size: .78rem; color: var(--c-ink-2); max-width: 420px; line-height: 1.5; } .an-rowlevel { padding: 9px 13px; border-radius: 9px; font: 600 .72rem var(--font-ui); color: var(--c-groen-d); background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); } .an-birijen { display: flex; flex-direction: column; gap: 9px; } .an-birij { display: flex; align-items: center; gap: 12px; padding: 9px 12px; cursor: pointer; border: var(--lijndikte) solid var(--c-lijn); border-radius: 10px; background: var(--kaart); font: 600 .78rem var(--font-ui); color: var(--c-ink); text-align: left; } .an-birij.is-actief { border-color: var(--c-terra); background: var(--c-terra-t); } .an-birij > span { min-width: 130px; } .an-bibalk { flex: 1; height: 12px; border-radius: 99px; background: var(--c-creme); overflow: hidden; font-style: normal; } .an-bibalk b { display: block; height: 100%; border-radius: 99px; background: var(--c-terra); } .an-birij strong { min-width: 80px; text-align: right; } .an-drill { padding: 14px 16px; border-radius: 12px; background: var(--c-creme); } .an-drill__kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: .78rem; } .an-drillrij { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 8px; background: var(--kaart); margin-bottom: 6px; font: 600 .76rem var(--font-ui); } .an-cattitel { font-size: .95rem; display: block; } .an-catgroep { display: flex; flex-direction: column; gap: 10px; } .an-catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 11px; } .an-catkaart { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .an-catkaart__kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; } .an-catkaart strong { font-size: .82rem; } .an-catkaart p { margin: 0; font-size: .72rem; color: var(--c-ink-2); line-height: 1.5; } .an-catkaart em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); } .an-levgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } .an-levgrid > div { display: flex; flex-direction: column; gap: 10px; } .an-schedule { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } .an-schedule__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; } .an-schedule strong { font-size: .8rem; } .an-schedule span:not(.chip) { font-size: .72rem; color: var(--c-ink-2); } .an-schedule em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); } .an-schedule .mono { font-size: .62rem; } /* ---- AI ---- */ .an-aibanner { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 10px; background: var(--c-terra-t); border: var(--lijndikte) solid var(--c-terra); font: 600 .76rem var(--font-ui); color: var(--c-ink-2); } .an-aibanner i { font-style: normal; color: var(--c-terra-d); } .an-aigrid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 18px; align-items: start; } .an-aileads { display: flex; flex-direction: column; gap: 8px; } .an-ailead { display: flex; align-items: center; gap: 11px; padding: 11px 13px; cursor: pointer; text-align: left; border: var(--lijndikte) solid var(--c-lijn); border-radius: 12px; background: var(--kaart); } .an-ailead.is-actief { border-color: var(--c-terra); background: var(--c-terra-t); } .an-aiscore { width: 38px; height: 38px; flex: none; border-radius: 10px; font-style: normal; display: flex; align-items: center; justify-content: center; font: 800 .8rem var(--font-mono); } .an-aiscore.is-groen { background: var(--c-groen-t); color: var(--c-groen-d); } .an-aiscore.is-amber { background: var(--c-amber-t); color: var(--c-amber); } .an-aiscore.is-stil { background: var(--c-paneel); color: var(--c-ink-2); } .an-ailead span { min-width: 0; } .an-ailead strong { display: block; font-size: .8rem; } .an-ailead em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); } .an-aidetail { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .an-aikop { padding: 18px 20px; display: flex; align-items: center; gap: 20px; } .an-aikop__score strong { font-size: 2.2rem; letter-spacing: -.02em; display: block; text-align: center; } .an-aikop__wie { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } .an-aikop__wie strong { font-size: .95rem; } .an-aikop__wie em { font-style: normal; font-size: .74rem; color: var(--c-ink-3); } .an-waarom { align-self: flex-start; } .an-drivers { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--c-creme); } .an-driver__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; font: 600 .74rem var(--font-ui); color: var(--c-ink-2); } .an-driver__balk { height: 5px; border-radius: 99px; background: var(--kaart); overflow: hidden; font-style: normal; display: block; } .an-driver__balk b { display: block; height: 100%; border-radius: 99px; } .an-driver__balk b.is-groen { background: var(--c-groen); } .an-driver__balk b.is-rood { background: var(--c-rood); } .an-nbagrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .an-nba { padding: 16px 17px; display: flex; flex-direction: column; gap: 7px; align-items: flex-start; border-color: var(--c-terra); } .an-nba--groen { border-color: var(--c-groen); } .an-nba strong { font-size: .88rem; } .an-nba p { margin: 0; font-size: .74rem; color: var(--c-ink-2); line-height: 1.5; } .an-forecast { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; } .an-forecast__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .an-forecast__kop strong { font-size: .88rem; } .an-fcbalken { display: flex; align-items: flex-end; gap: 18px; padding: 0 6px; } .an-fcbalk { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; } .an-fcbalk__staaf { width: 100%; max-width: 56px; display: flex; flex-direction: column; justify-content: flex-end; } .an-fcbalk__staaf i { display: block; background: var(--c-terra-t); border-radius: 6px 6px 0 0; } .an-fcbalk__staaf b { display: block; background: var(--c-terra); border-radius: 0 0 4px 4px; } .an-fcbalk strong { font-size: .72rem; } .an-fcbalk em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); } .an-fclegenda { display: flex; align-items: center; gap: 14px; padding-top: 10px; border-top: var(--lijndikte) solid var(--c-lijn); font: 600 .66rem var(--font-ui); color: var(--c-ink-2); flex-wrap: wrap; } .an-fclegenda b { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; } .an-fclegenda .is-vol { background: var(--c-terra); } .an-fclegenda .is-band { background: var(--c-terra-t); } .an-fclegenda em { font-style: normal; color: var(--c-ink-3); } /* ---- advconv ---- */ .an-convrij { display: grid; grid-template-columns: 1.5fr .6fr .6fr 1.5fr 1.1fr .8fr .6fr; gap: 12px; align-items: center; padding: 12px 18px; font-size: .78rem; border-bottom: var(--lijndikte) solid var(--c-lijn); } .an-convrij:last-child { border-bottom: 0; } .an-uitvrij--kort { grid-template-columns: 1.4fr .6fr 2fr !important; } .an-convrij--kop { font-size: .6rem; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); background: var(--c-creme); } .an-convwie { display: flex; align-items: center; gap: 10px; } .an-convwie i { width: 32px; height: 32px; flex: none; border-radius: 9px; font-style: normal; background: var(--c-terra-t); color: var(--c-terra-d); display: flex; align-items: center; justify-content: center; font: 700 .7rem var(--font-ui); } .an-convwie strong { display: block; font-size: .8rem; } .an-convwie em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); } .an-convbalk strong { display: block; margin-bottom: 4px; } .an-convbalk i { display: block; height: 6px; border-radius: 99px; background: var(--c-creme); overflow: hidden; font-style: normal; } .an-convbalk b { display: block; height: 100%; border-radius: 99px; background: var(--c-groen); } /* ---- rapportages ---- */ .an-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .an-tegel { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; } .an-tegel span { font-size: .7rem; color: var(--c-ink-3); } .an-tegel strong { font-size: 1.25rem; } .an-tegel.is-groen { border-color: var(--c-groen); background: var(--c-groen-t); } .an-tegel.is-groen strong, .an-tegel.is-groen span { color: var(--c-groen-d); } .an-tegel.is-amber { border-color: var(--c-oker); background: var(--c-amber-t); } .an-tegel.is-amber strong, .an-tegel.is-amber span { color: var(--c-amber); } .an-repgrid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; } .an-repblok { padding: 18px 20px; display: flex; flex-direction: column; gap: 11px; } .an-repblok > strong { font-size: .9rem; } .an-blokkop { padding: 14px 18px; font: 700 .9rem var(--font-ui); border-bottom: var(--lijndikte) solid var(--c-lijn); } .an-staafjes { display: flex; align-items: flex-end; gap: 12px; height: 130px; padding-top: 8px; } .an-staafjes--klein { height: 92px; } .an-staafje { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; } .an-staafje i { display: block; width: 100%; max-width: 42px; border-radius: 7px 7px 3px 3px; background: var(--c-groen); font-style: normal; } .an-staafje em { font-style: normal; font-size: .6rem; color: var(--c-ink-3); } .an-staafje--duo span { display: flex; align-items: flex-end; gap: 3px; height: 100%; } .an-staafje--duo i { width: 14px; } .an-staafje--duo i.is-cap { background: var(--c-sage-t); } .an-bronrij { display: grid; grid-template-columns: auto minmax(0, 1fr) 44px 90px; gap: 8px; align-items: center; font: 500 .76rem var(--font-ui); } .an-bronrij > span { color: var(--c-ink-2); } .an-bronrij strong { text-align: right; } .an-dot { width: 9px; height: 9px; border-radius: 3px; } .an-dot.is-groen { background: var(--c-groen); } .an-dot.is-sage { background: var(--c-sage); } .an-dot.is-terra { background: var(--c-terra); } .an-dot.is-oker { background: var(--c-oker); } .an-bronbalk { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: var(--c-creme); overflow: hidden; font-style: normal; display: block; } .an-bronbalk b { display: block; height: 100%; border-radius: 99px; } .an-bronbalk b.is-groen { background: var(--c-groen); } .an-bronbalk b.is-sage { background: var(--c-sage); } .an-bronbalk b.is-terra { background: var(--c-terra); } .an-bronbalk b.is-oker { background: var(--c-oker); } .an-funnelrij { display: grid; grid-template-columns: 96px minmax(0, 1fr) 44px; gap: 10px; align-items: center; font: 500 .76rem var(--font-ui); } .an-funnelbalk { height: 22px; border-radius: 6px; background: var(--c-creme); overflow: hidden; font-style: normal; display: block; } .an-funnelbalk b { display: flex; align-items: center; padding-left: 8px; height: 100%; border-radius: 6px; background: var(--c-groen); color: var(--knop-ink); font: 700 .68rem var(--font-mono); } .an-funnelrij em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); } .an-dlrij { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; } .an-dlrij i { width: 36px; height: 36px; flex: none; border-radius: 9px; font-style: normal; background: var(--c-groen-t); color: var(--c-groen-d); display: flex; align-items: center; justify-content: center; font-size: .58rem; font-weight: 700; } .an-dlrij > div { flex: 1; min-width: 0; } .an-dlrij strong { display: block; font-size: .8rem; } .an-dlrij em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); } .an-uitvrij { display: grid; grid-template-columns: 1.6fr .7fr .8fr 1fr .7fr .9fr; gap: 10px; align-items: center; padding: 12px 18px; font-size: .78rem; border-top: var(--lijndikte) solid var(--c-lijn); } .an-uitvrij--kop { font-size: .6rem; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); border-top: 0; } /* ---- co2 ---- */ .an-co2heros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .an-co2hero { padding: 18px 22px; border-color: var(--c-groen); display: flex; flex-direction: column; gap: 5px; } .an-co2hero strong { font-size: 1.6rem; color: var(--c-groen-d); } .an-co2hero em { font-style: normal; font-size: .7rem; color: var(--c-ink-3); } .an-co2rij { display: flex; flex-direction: column; gap: 4px; } .an-co2rij__kop { display: flex; align-items: center; justify-content: space-between; font: 600 .78rem var(--font-ui); } .an-co2rij em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); } .an-detzij { display: flex; flex-direction: column; gap: 14px; } .an-methodiek { display: flex; align-items: center; gap: 9px; padding: 12px 16px; border-radius: 11px; background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); font: 500 .76rem var(--font-ui); color: var(--c-ink-2); } .an-methodiek i { font-style: normal; color: var(--c-groen-d); font-weight: 700; } .an-partnerblok { max-width: 720px; } .an-klantvenster { max-width: 460px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; } .an-klantkaart { border-radius: 16px; padding: 18px 20px; background: linear-gradient(135deg, var(--c-groen-t), var(--c-sage-t)); border: var(--lijndikte) solid var(--c-groen); display: flex; flex-direction: column; gap: 6px; } .an-klantkaart > span { font: 600 .7rem var(--font-ui); color: var(--c-groen-d); } .an-klantkaart strong { font: 800 1.5rem var(--font-ui); color: var(--c-groen-d); } .an-klantkaart strong em { font-style: normal; font-size: .84rem; } .an-klantkaart p { margin: 0; font-size: .76rem; color: var(--c-ink-2); line-height: 1.55; } /* ---- responsief ---- */ @media (max-width: 1080px) { .an-bigrid, .an-aigrid, .an-repgrid, .an-levgrid, .an-nbagrid { grid-template-columns: 1fr; } .an-co2heros { grid-template-columns: 1fr; } .an-convrij, .an-uitvrij { grid-template-columns: 1fr; gap: 4px; } .an-convrij--kop, .an-uitvrij--kop { display: none; } } /* Scenario-vergelijk (E4c) */ .an-scenario { display: flex; flex-direction: column; gap: 4px; } .an-scrij { display: grid; grid-template-columns: 70px 1.3fr 1.3fr 1.3fr 1fr; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--c-lijn); font-size: 12.5px; } .an-scrij--kop { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-2); border-bottom: 0; } .an-scbar { position: relative; display: flex; align-items: center; gap: 6px; height: 16px; } .an-scbar b { display: block; height: 9px; border-radius: 99px; } .an-scbar em { font-size: 10.5px; color: var(--c-ink-2); white-space: nowrap; } .an-scbar b.is-budget, .an-sclegenda b.is-budget { background: var(--c-ink-3); } .an-scbar b.is-forecast, .an-sclegenda b.is-forecast { background: var(--c-amber); } .an-scbar b.is-real, .an-sclegenda b.is-real { background: var(--c-groen-d); } .an-scleeg { color: var(--c-ink-3); font-size: 11px; } .an-sclegenda { display: flex; gap: 16px; margin-top: 8px; font-size: 11.5px; color: var(--c-ink-2); } .an-sclegenda b { display: inline-block; width: 20px; height: 8px; border-radius: 99px; margin-right: 5px; vertical-align: middle; } /* Reviewronde Tim 23-07 · punt 12a: kruistabel + filterlat in de BI-bouwer */ .an-chart__acties { margin-left: auto; } .an-kruiswrap { overflow-x: auto; } .an-kruis { width: 100%; border-collapse: collapse; font-size: .76rem; } .an-kruis th, .an-kruis td { padding: 7px 10px; border-bottom: 1px solid var(--c-lijn); text-align: right; white-space: nowrap; } .an-kruis thead th { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-3); } .an-kruis tbody th, .an-kruis thead th:first-child { text-align: left; font-weight: 700; } .an-kruis td { background: linear-gradient(to left, var(--c-groen-t) var(--vul, 0%), transparent var(--vul, 0%)); } .an-kruis__tot { font-weight: 800; border-left: 1px solid var(--c-lijn); background: none !important; } /* ── inzicht.css ── */ /* inzicht.css — I2 · Inzicht (LEESLAAG-BOUWSPEC toegepast). Alleen tokens uit casa360-stijl.css; kleur is betekenis: --goed (op koers), --let (aandacht, kan dicht), --stop (achter, geen bron, correctie ná het sluiten), --accent = nadruk. */ .iz { max-width: var(--werkbreedte-breed, 1360px); margin: 0 auto; padding: 26px 32px 72px; } .iz-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; } .iz-kop h1 { margin: 2px 0 4px; font-size: 1.5rem; letter-spacing: -.01em; } .iz-kop p { margin: 0; color: var(--ink2); max-width: 78ch; font-size: .92rem; } .iz-rechts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .iz-rek { flex: 1; } .iz-perkies { display: flex; gap: 3px; flex-wrap: wrap; } .iz-perkies button, .iz-kiez button { border: 1px solid var(--lijn); background: var(--kaart); color: var(--ink); border-radius: var(--radius-klein); padding: 4px 10px; font: inherit; font-size: .78rem; cursor: pointer; transition: border-color var(--overgang, .15s); } .iz-perkies button:hover, .iz-kiez button:hover { border-color: var(--ink3); } .iz-perkies button.is-aan { background: var(--knop); border-color: var(--knop); color: var(--knop-ink); } .iz-perkies button:focus-visible, .iz-kiez button:focus-visible, .iz-vk:focus-visible, .bs-tl-p:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .iz-kiez { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; } .iz-kiez button.is-aan { background: var(--accent); border-color: var(--accent); color: var(--knop-ink); } .iz-kiez--klein button { font-size: .72rem; padding: 3px 9px; } .iz-tegelset { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 10px; margin-bottom: 16px; } .iz-tegelset--klein { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-bottom: 0; } /* bij 165 px viel het getal over de grafiek */ .iz-blok { margin: 0 0 18px; } .iz-blokkop { margin: 12px 0 8px; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink2); } .iz-blokkop span { font-weight: 600; color: var(--ink3); text-transform: none; letter-spacing: 0; margin-left: 6px; } .iz-kaart { padding: 12px 14px; margin-top: 14px; } .iz-kaart--nadruk { border-color: var(--accent); border-top: 3px solid var(--accent); } .iz-bakkop { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .iz-bakkop b { font-size: .92rem; } .iz-bakkop span { font-size: .76rem; color: var(--ink3); } .iz-adres { color: var(--ink3); font-size: .78rem; margin: 4px 0; } .iz-op { color: var(--goed); font-weight: 700; } .iz-af { color: var(--stop); font-weight: 700; } .iz-pil { display: inline-block; font-size: .68rem; font-weight: 800; padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap; } .iz-pil--goed { background: var(--goed-t); color: var(--goed-d); } .iz-pil--let { background: var(--let-t); color: var(--let-d); } .iz-pil--stop { background: var(--stop-t); color: var(--stop-d); } .iz-pil--acc { background: var(--accent-t); color: var(--ink); } .iz-pil--stil { background: var(--vlak); color: var(--ink2); border: 1px solid var(--lijn); } /* de twintig vragen: kaartjes, één groot getal (LEESLAAG §3.3) */ .iz-vkset { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 9px; } .iz-vk { position: relative; background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 11px 13px 9px; box-shadow: var(--schaduw-kaart); } .iz-vk--leeg { background: var(--vlak); } .iz-vk--eigen { border-style: dashed; } .iz-vk__nr { position: absolute; top: 9px; right: 11px; font-size: .68rem; font-weight: 800; color: var(--ink3); } .iz-vk__v { font-size: .84rem; font-weight: 700; line-height: 1.3; padding-right: 20px; min-height: 32px; } .iz-vk__rij { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 6px; } .iz-vk__getal { font-size: 1.6rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-family: var(--font-mono); } .iz-vk__getal--leeg { color: var(--ink3); } .iz-vk__b { font-size: .72rem; color: var(--ink3); margin-top: 5px; line-height: 1.4; } .iz-vk__extra { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--lijn); font-size: .74rem; color: var(--ink2); } .iz-vk__voet { margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--lijn); font-size: .7rem; color: var(--ink3); } .iz-vk__voet a { color: var(--ink2); } /* vergelijkbalken (definitieconflict, dimensies) */ .iz-verg { display: flex; flex-direction: column; gap: 7px; } .iz-verg__rij { display: grid; grid-template-columns: minmax(180px, 1.3fr) 2fr 96px 110px; gap: 12px; align-items: center; cursor: default; } .iz-verg__baan { background: var(--vlak); border-radius: 3px; height: 20px; overflow: hidden; } .iz-verg__baan i { display: block; height: 100%; background: var(--accent); border-radius: 0 3px 3px 0; } .iz-verg__w { font-weight: 800; text-align: right; } .iz-uitspraak { margin: 10px 0 0; font-size: .88rem; color: var(--ink2); } .iz-tabel td, .iz-tabel th { vertical-align: top; } .iz-tabel tr[data-iz-metric] { cursor: pointer; } .iz-tabel tr.is-leeg td { background: var(--vlak); } .iz-tabel td.num, .iz-tabel th.num { text-align: right; } /* herkomst */ .iz-held { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 12px; } .iz-held__lab { font-size: .8rem; color: var(--ink2); font-weight: 600; } .iz-held__n { font-size: 2.6rem; font-weight: 800; letter-spacing: -.05em; line-height: 1.02; margin-top: 1px; } .iz-held__b { font-size: .8rem; color: var(--ink3); margin-top: 3px; } .iz-legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: .78rem; } .iz-legenda span { display: flex; align-items: center; gap: 6px; } .iz-legenda i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; } .iz-twee { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; align-items: start; } .iz-drie { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 4px; } .iz-zin { background: var(--accent-t); border: 1px solid var(--lijn2); border-radius: var(--radius); padding: 10px 12px; font-size: .9rem; line-height: 1.5; margin: 6px 0 10px; } .iz-defrij { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; border-bottom: 1px solid var(--lijn); font-size: .82rem; } .iz-defrij:last-of-type { border-bottom: 0; } .iz-defrij span:first-child { color: var(--ink2); } .iz-defrij code { font-family: var(--font-mono); font-size: .78rem; text-align: right; } .iz-trap { margin: 0; padding-left: 20px; font-size: .86rem; line-height: 1.7; } .iz-trap li::marker { font-weight: 800; color: var(--accent); } .iz-corr { display: grid; grid-template-columns: 62px 1fr auto; gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--lijn); border-radius: var(--radius-klein); margin-bottom: 6px; } .iz-corr--laat { border-color: var(--stop); background: var(--stop-t); } .iz-corr__p { font-size: .78rem; font-weight: 800; color: var(--ink2); } .iz-corr__w { font-size: .84rem; white-space: nowrap; } .iz-poort { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid var(--lijn); font-size: .86rem; } .iz-poort:last-child { border-bottom: 0; } .iz-tk { font-weight: 800; width: 16px; flex: none; text-align: center; } .iz-tk--vink { color: var(--goed); } .iz-tk--golf { color: var(--let-d); } .iz-tk--kruis { color: var(--stop); } /* stuurgetallen */ .iz-sg { display: grid; grid-template-columns: minmax(180px, 1.1fr) minmax(150px, 1.5fr) 92px 130px 140px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--lijn); cursor: pointer; } .iz-sg:last-of-type { border-bottom: 0; } .iz-sg__w { text-align: right; white-space: nowrap; } .iz-sg__s { text-align: right; white-space: nowrap; } .iz-achterset { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 9px; } .iz-ac { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--lijn); border-left: 4px solid var(--let); border-radius: var(--radius-klein); } .iz-ac--grens { border-left-color: var(--stop); background: var(--stop-t); } .iz-ac__n { font-size: 1.4rem; font-weight: 800; letter-spacing: -.04em; } /* signalen */ .iz-nu { background: var(--kaart); border: 1px solid var(--lijn); border-top: 3px solid var(--accent); border-radius: var(--radius); padding: 10px 12px; box-shadow: var(--schaduw-kaart); } .iz-nu--stop { border-top-color: var(--stop); } .iz-nu--let { border-top-color: var(--let); } .iz-nu__n { font-size: 1.4rem; font-weight: 800; line-height: 1.1; } .iz-nu__l { font-size: .8rem; color: var(--ink2); margin-top: 2px; } .iz-nu__b { font-size: .72rem; color: var(--ink3); margin-top: 3px; } .iz-taak { display: flex; gap: 11px; align-items: flex-start; padding: 9px 4px; border-bottom: 1px solid var(--lijn); } .iz-taak:last-of-type { border-bottom: 0; } .iz-taak__lijf { flex: 1; font-size: .88rem; } .iz-taak__rechts { display: flex; gap: 8px; align-items: center; white-space: nowrap; } .iz-niv { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; border-radius: 50%; color: var(--knop-ink); font-size: .68rem; font-weight: 800; background: var(--accent); } .iz-niv--1 { background: var(--stop); } .iz-niv--2 { background: var(--let); } /* rechten */ .iz-scroll { overflow-x: auto; } .iz-rmat { width: 100%; border-collapse: collapse; font-size: .8rem; } .iz-rmat th { padding: 6px 8px; border-bottom: 1px solid var(--lijn); vertical-align: bottom; text-align: left; } .iz-rmat th.iz-rmat__draai { width: 64px; text-align: center; font-size: .7rem; color: var(--ink2); } .iz-rmat td { padding: 6px 8px; border-bottom: 1px solid var(--lijn); } .iz-rc { text-align: center; background: var(--vlak); color: transparent; font-weight: 800; } .iz-rc.is-aan { background: var(--accent); color: var(--knop-ink); } .iz-rc.is-kol { outline: 2px solid var(--ink); outline-offset: -2px; } /* formulieren */ .iz-form .bs-form__rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .iz-vinklijst { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 4px 12px; max-height: 260px; overflow: auto; padding: 4px 0; } .iz-vink { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--ink2); } .iz-vink input:focus-visible, .iz-regels input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } .iz-regels input { width: 100%; box-sizing: border-box; font: inherit; padding: 5px 8px; border: 1px solid var(--lijn2); border-radius: var(--radius-klein); background: var(--kaart); color: var(--ink); } .iz-regels input[type="checkbox"] { width: auto; } .iz-lijst { margin: 4px 0 0; padding-left: 18px; font-size: .86rem; } @media (max-width: 900px) { .iz-sg { grid-template-columns: 1fr 1fr; } .iz-verg__rij { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .iz { padding: 16px 16px 48px; } } /* ── organisaties.css ── */ /* ===================================================================== organisaties.css — module 6.1 · Organisaties & tenant. Uitsluitend tokens; Thermo-slate-blauw uit het prototype gemapt op ink (blauw verboden). Module-wortel-marge volgens de vaste norm. ===================================================================== */ .org { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; } .org-kop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; } .org-kop p { margin: 0; max-width: 74ch; color: var(--c-ink-2); font-size: .82rem; line-height: 1.5; } .org-intro { margin: 0; font-size: .78rem; color: var(--c-ink-2); max-width: 80ch; line-height: 1.55; } .org-voetnoot { font-size: .74rem; color: var(--c-ink-2); line-height: 1.55; } .org-balk { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; } .org-rek { flex: 1; } .org-totaal { font-size: .8rem; color: var(--c-ink-2); } .org-bloktitel { font-size: .92rem; display: block; margin-bottom: 4px; } .org-knop { padding: 9px 14px; border-radius: 10px; cursor: pointer; white-space: nowrap; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); color: var(--c-ink); font: 700 .78rem var(--font-ui); } .org-knop:hover { border-color: var(--c-ink-3); } .org-knop--primair { background: var(--c-groen); border-color: var(--c-groen); color: var(--knop-ink); } .org-knop--licht { background: color-mix(in srgb, var(--kaart) 12%, transparent); border-color: color-mix(in srgb, var(--kaart) 25%, transparent); color: var(--knop-ink); } .org-tabs { display: flex; gap: 8px; flex-wrap: wrap; } .org-tab { padding: 9px 15px; border-radius: 10px; cursor: pointer; white-space: nowrap; border: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); font: 600 .78rem var(--font-ui); color: var(--c-ink-2); } .org-tab.is-actief { border-color: var(--c-groen); background: var(--c-groen-t); color: var(--c-groen-d); font-weight: 700; } .org-flt { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 9px; cursor: pointer; border: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); font: 600 .74rem var(--font-ui); color: var(--c-ink-2); } .org-flt.is-actief { background: var(--donker, var(--c-ink)); border-color: var(--c-ink); color: var(--knop-ink); font-weight: 700; } .org-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; } .is-groen.org-dot, .org-dot.is-groen { background: var(--c-groen); } .org-dot.is-terra { background: var(--c-terra); } .org-dot.is-ink { background: var(--donker, var(--c-ink)); } /* ---- rechtspersonen ---- */ .org-kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; } .org-kaart { overflow: hidden; } .org-kaart__balk { display: block; height: 4px; } .org-kaart__balk.is-groen { background: var(--c-groen); } .org-kaart__balk.is-terra { background: var(--c-terra); } .org-kaart__balk.is-ink { background: var(--donker, var(--c-ink)); } .org-kaart__body { padding: 17px 20px; display: flex; flex-direction: column; gap: 13px; } .org-kaart__kop { display: flex; align-items: center; gap: 13px; } .org-logo { width: 44px; height: 44px; flex: none; border-radius: 11px; display: flex; align-items: center; justify-content: center; font: 800 1.1rem var(--font-ui); color: var(--knop-ink); } .org-logo.is-groen { background: var(--c-groen); } .org-logo.is-terra { background: var(--c-terra); } .org-logo.is-ink { background: var(--donker, var(--c-ink)); } .org-kaart__naam { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .org-kaart__naam strong { font-size: 1rem; } .org-kaart__kop em { font-style: normal; font-size: .7rem; color: var(--c-ink-3); } .org-velden { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .74rem; } .org-velden span { color: var(--c-ink-3); } .org-velden b { font-weight: 600; color: var(--c-ink); } .org-velden .mono { font-size: .7rem; } .org-reeksen { border-top: var(--lijndikte) solid var(--c-lijn); padding-top: 11px; display: flex; flex-direction: column; gap: 7px; } .org-reeksen > div:not(.org-adminrij) { display: flex; flex-wrap: wrap; gap: 6px; } .org-reeksen i { font-style: normal; font-size: .62rem; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--c-creme); color: var(--c-ink-2); } .org-adminrij { display: flex; gap: 8px; font-size: .72rem; } .org-adminrij span { color: var(--c-ink-3); } .org-adminrij b { font-weight: 600; } /* ---- tenant & huur ---- */ .org-huurgrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; } .org-huurgrid > div:first-child { display: flex; flex-direction: column; gap: 8px; } .org-modrij { display: flex; align-items: center; gap: 12px; padding: 12px 15px; } .org-modrij > div { flex: 1; min-width: 0; } .org-modrij strong { font-size: .8rem; display: block; } .org-modrij em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); } .org-toggle { width: 40px; height: 22px; flex: none; border-radius: 99px; border: 0; cursor: pointer; background: var(--c-lijn-2); position: relative; transition: background 160ms; } .org-toggle i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--kaart); transition: left 160ms; font-style: normal; } .org-toggle.is-aan { background: var(--c-groen); } .org-toggle.is-aan i { left: 21px; } .org-toggle.is-vast { opacity: .45; cursor: not-allowed; } .org-huurzij { display: flex; flex-direction: column; gap: 14px; } .org-huurhero { border-radius: 16px; background: var(--donker, var(--c-ink)); color: var(--c-creme); padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .org-huurhero .kicker { color: var(--c-lijn); } .org-huurhero strong { font-size: 2rem; line-height: 1; } .org-huurhero em { font-style: normal; font-size: .74rem; opacity: .8; line-height: 1.5; } .org-huurformule { font-size: .62rem; opacity: .6; } .org-notitie { padding: 15px 18px; display: flex; flex-direction: column; gap: 5px; } .org-notitie strong { font-size: .8rem; } .org-notitie span { font-size: .72rem; color: var(--c-ink-2); line-height: 1.55; } /* ---- commissie ---- */ .org-commrij { padding: 13px 16px; display: flex; flex-direction: column; gap: 7px; } .org-commrij__kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .org-commrij__kop b { color: var(--c-groen-d); } .org-commrij__kop > strong { font-size: .95rem; } .org-ent { font: 700 .76rem var(--font-ui); padding: 3px 10px; border-radius: 6px; color: var(--knop-ink); } .org-ent.is-groen { background: var(--c-groen); } .org-ent.is-terra { background: var(--c-terra); } .org-ent.is-ink { background: var(--donker, var(--c-ink)); } .org-commrij__voet { font-size: .66rem; color: var(--c-ink-3); } /* ---- gedeeld vs gescheiden ---- */ .org-tweekolom { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } .org-lijstblok { padding: 18px 20px; display: flex; flex-direction: column; gap: 9px; } .org-lijstblok.is-groen { border-color: var(--c-groen); } .org-lijstblok.is-ink { border-color: var(--c-ink-3); } .org-lijstblok__kop { display: flex; align-items: center; gap: 9px; } .org-lijstblok__kop strong { font-size: .92rem; } .org-lijstblok > em { font-style: normal; font-size: .7rem; color: var(--c-ink-3); margin-bottom: 4px; } .org-lijstrij { display: flex; gap: 9px; align-items: flex-start; font: 500 .78rem/1.5 var(--font-ui); color: var(--c-ink); } .org-lijstrij i { font-style: normal; font-weight: 800; flex: none; } .org-lijstrij i.is-groen { color: var(--c-groen-d); } .org-lijstrij i.is-ink { color: var(--c-ink-2); } /* ---- klantreis ---- */ .org-krblok { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; } .org-krblok.is-groen { background: var(--c-groen-t); border-color: var(--c-groen); } .org-krblok.is-ink { background: var(--c-paneel); border-color: var(--c-ink-3); } .org-krstappen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .org-krstap { display: inline-flex; align-items: center; gap: 9px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; padding: 9px 13px; } .org-krstap i { width: 20px; height: 20px; border-radius: 50%; font-style: normal; font-size: .62rem; font-weight: 800; display: flex; align-items: center; justify-content: center; color: var(--knop-ink); } .org-krstap i.is-groen { background: var(--c-groen); } .org-krstap i.is-ink { background: var(--donker, var(--c-ink)); } .org-krstap strong { font-size: .76rem; } .org-krpijl { color: var(--c-ink-3); font-weight: 700; } .org-krblok > em { font-style: normal; font-size: .72rem; color: var(--c-ink-2); line-height: 1.55; } /* ---- responsief ---- */ @media (max-width: 1080px) { .org-huurgrid, .org-tweekolom { grid-template-columns: 1fr; } } /* F2-lat (16-07-2026) */ .org-knop--klein { font-size: 11px; padding: 5px 10px; align-self: flex-start; margin-top: 8px; } /* F2c · white-label preview (klantweergave) */ .org-prev { border: 1px solid var(--c-lijn); border-radius: 12px; overflow: hidden; margin: 10px 0; background: var(--c-paneel); } .org-prev__browser { font-size: 10.5px; color: var(--c-ink-2); background: var(--c-creme); padding: 7px 12px; border-bottom: 1px solid var(--c-lijn); } .org-prev__kop { display: flex; gap: 12px; align-items: center; padding: 14px 16px 8px; } .org-prev__kop strong { font-size: 15px; display: block; } .org-prev__kop em { font-size: 11.5px; color: var(--c-ink-2); font-style: normal; } .org-prev__stappen { display: flex; flex-direction: column; gap: 6px; padding: 8px 16px; } .org-prevstap { display: flex; gap: 10px; align-items: center; border: 1px solid var(--c-lijn); border-radius: 10px; padding: 8px 12px; font-size: 12.5px; } .org-prevstap.is-actief { border-color: var(--c-groen-d); background: color-mix(in srgb, var(--c-groen) 8%, transparent); font-weight: 700; } .org-prevstap i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; border: 1px solid var(--c-lijn); } .org-prevstap i.is-groen { color: var(--c-groen-d); border-color: var(--c-groen-d); } .org-prevstap i.is-ink { color: var(--c-ink); border-color: var(--c-ink); } .org-prevstap i.is-terra { color: var(--c-terra); border-color: var(--c-terra); } .org-prevstap em.chip { margin-left: auto; } .org-prev__voet { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11px; color: var(--c-ink-2); padding: 10px 16px 14px; border-top: 1px solid var(--c-lijn); margin-top: 6px; } /* Documenten & opmaak (19-07-2026): links de organisatie, rechts wat vast staat en wat vrij is. Het onderscheid is de kern van deze aanpak. */ .org-docgrid { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; } @media (max-width: 900px) { .org-docgrid { grid-template-columns: 1fr; } } .org-orglijst { padding: 14px; display: grid; gap: 6px; } .org-orgkies { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border-radius: var(--radius); border: var(--lijndikte) solid var(--c-lijn); background: var(--c-creme); cursor: pointer; transition: border-color var(--overgang); } .org-orgkies:hover { border-color: var(--c-lijn-2); } .org-orgkies.is-actief { border-color: var(--c-groen); background: var(--c-groen-t); } .org-orgkies__dot { width: 12px; height: 12px; border-radius: 50%; flex: none; } .org-orgkies strong { display: block; font-size: .82rem; } .org-orgkies span { font-size: .66rem; color: var(--c-ink-3); } .org-dockaart { padding: 18px 20px; } .org-dockop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .org-dockop strong { display: block; font-size: 1rem; } .org-docsub { font-size: .76rem; line-height: 1.6; color: var(--c-ink-3); margin: 8px 0 14px; max-width: 74ch; } .org-dockern { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2px 22px; margin-bottom: 12px; } .org-docrij { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; } .org-docrij span { color: var(--c-ink-3); min-width: 140px; } .org-docrij strong { flex: 1; font-weight: 600; } .org-docrij em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); } .org-docsectie { margin-top: 20px; padding-top: 16px; border-top: var(--lijndikte) solid var(--c-lijn-2); } .org-docsectie .kicker { display: block; margin-bottom: 8px; } .org-docsectie .kicker + .kicker, .org-docvinken + .btn { margin-top: 12px; } .org-docvinken { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 12px; } .org-docvink { display: flex; align-items: center; gap: 8px; font-size: .78rem; cursor: pointer; } .org-kleurdot { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: middle; margin-right: 5px; } .org-logovb { display: block; max-width: 180px; } .org-linkknop { background: transparent; border: 0; padding: 0; cursor: pointer; font: 600 .66rem var(--font-ui); color: var(--c-groen-d); text-decoration: underline; } .org-linkknop:hover { color: var(--c-ink); } .org-docrij--brief { align-items: flex-start; } .org-docrij--brief strong { font-weight: 400; font-size: .74rem; line-height: 1.5; color: var(--c-ink-2); } /* ---- Huisstijl & merk (SaaS fase 2) ---- */ .org-hsgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; } .org-hskaart { padding: 18px; } .org-hsvelden { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-top: 12px; } .org-hsvelden--onder { margin-top: 14px; padding-top: 14px; border-top: var(--lijndikte) solid var(--c-lijn); } .org-hsveld label { display: block; font: 700 .68rem var(--font-ui); color: var(--c-ink-2); margin-bottom: 5px; } .org-hsveld__rij { display: flex; gap: 7px; align-items: center; } .org-hsveld__rij input[type="color"] { width: 40px; height: 34px; padding: 2px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; background: var(--kaart); cursor: pointer; } .org-hsveld__rij input[type="text"] { flex: 1; min-width: 0; font-size: .74rem; padding: 8px 10px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; background: var(--kaart); color: var(--c-ink); } .org-hsveld input[type="number"], .org-hsveld input[type="text"]:not(.mono) { width: 100%; font: 500 .78rem var(--font-ui); padding: 8px 10px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; background: var(--kaart); color: var(--c-ink); } .org-hsveld em { display: block; font-style: normal; font-size: .64rem; color: var(--c-ink-3); margin-top: 4px; } .org-hsveld--breed { grid-column: 1 / -1; } .org-hsfout { margin-top: 12px; padding: 10px 13px; border-radius: var(--radius); background: var(--c-rood-t); color: var(--c-rood); font: 600 .74rem var(--font-ui); } .org-hsok { margin-top: 12px; padding: 10px 13px; border-radius: var(--radius); background: var(--c-groen-t); color: var(--c-groen-d); font: 600 .74rem var(--font-ui); } .org-hsacties { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; } .org-hsnoot { font-size: .66rem; color: var(--c-ink-3); line-height: 1.5; margin-top: 8px; display: block; } .org-hsvoorbeeld { padding: 16px; display: grid; gap: 10px; } .org-hsvb-kaart { padding: 14px 16px; display: grid; gap: 6px; font-size: .8rem; } .org-hsvb-rij { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; } .org-hsvb-zone { padding: 11px 14px; font-size: .72rem; } .org-hslogo { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); } .org-hslogo:last-of-type { border-bottom: 0; } .org-hslogo > div { flex: 1; } .org-hslogo strong { display: block; font-size: .76rem; } .org-hslogo span { font-size: .64rem; color: var(--c-ink-3); } .org-hslogo__beeld { max-height: 34px; max-width: 120px; object-fit: contain; } .org-hslogo__leeg { font: 600 .66rem var(--font-ui); color: var(--c-ink-3); } @media (max-width: 1100px) { .org-hsgrid { grid-template-columns: 1fr; } } /* ---- Go-live & koppelingen (SaaS fase 3-5) ---- */ .org-glbalk { height: 7px; border-radius: 99px; background: var(--c-paneel); overflow: hidden; margin: 10px 0 12px; } .org-glbalk i { display: block; height: 100%; background: var(--c-groen); border-radius: 99px; } .org-glitem { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); } .org-glitem:last-of-type { border-bottom: 0; } .org-glitem > span { font-weight: 800; color: var(--c-rood); width: 16px; } .org-glitem.is-ok > span { color: var(--c-groen-d); } .org-glitem strong { display: block; font-size: .74rem; } .org-glitem em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); } .org-glnoot { font-size: .68rem; color: var(--c-ink-2); line-height: 1.55; margin: 8px 0; } .org-glrij { display: flex; gap: 8px; align-items: center; margin-top: 8px; } .org-glrij input { flex: 1; font: 500 .74rem var(--font-ui); padding: 8px 10px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; background: var(--kaart); color: var(--c-ink); } .org-glok { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--c-groen-t); color: var(--c-groen-d); font-size: .72rem; line-height: 1.5; } .org-gllink { width: 100%; margin-top: 6px; font-size: .68rem; padding: 8px 10px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; background: var(--kaart); color: var(--c-ink); } .org-glstatus { display: flex; gap: 8px; align-items: center; font-size: .7rem; margin: 8px 0; flex-wrap: wrap; } .org-glstatus em { font-style: normal; color: var(--c-ink-3); font-size: .62rem; } .org-glfoutje { font-size: .62rem; color: var(--c-rood); background: var(--c-rood-t); border-radius: 8px; padding: 6px 9px; margin-bottom: 6px; word-break: break-all; } .org-glpostbus { display: grid; grid-template-columns: 1.4fr .8fr auto; gap: 7px; align-items: center; padding: 5px 0; } .org-glpostbus--hook { grid-template-columns: 1.3fr 1fr auto auto; } .org-glpostbus input, .org-glpostbus select { font: 500 .72rem var(--font-ui); padding: 8px 9px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; background: var(--kaart); color: var(--c-ink); min-width: 0; } .org-glvink { display: flex; gap: 5px; align-items: center; font-size: .66rem; color: var(--c-ink-2); white-space: nowrap; } .org-glsegment { display: flex; gap: 0; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 99px; overflow: hidden; width: fit-content; } .org-glseg { border: 0; background: var(--kaart); font: 700 .68rem var(--font-ui); color: var(--c-ink-3); padding: 7px 14px; cursor: pointer; } .org-glseg.is-actief { background: var(--c-groen); color: var(--knop-ink); } .org-glsleutel { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: .72rem; } .org-glsleutel:last-of-type { border-bottom: 0; } .org-glsleutel.is-weg { opacity: .55; } .org-glsleutel > div { flex: 1; } .org-glsleutel strong { display: block; font-size: .72rem; } .org-glsleutel em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); } .org-hsgrid > div > .org-hskaart { margin-bottom: 14px; } /* BEHEER-RONDE2 (06-10-2026) · vier tabs: twee secties onder elkaar binnen één tab, en de toelichting onder Rechtspersonen */ .org-sectie { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } .org-sectie > .kicker { margin-bottom: -2px; } .org-toelichting { margin-top: 14px; } .org-toelichting summary { cursor: pointer; font-size: .82rem; font-weight: 700; padding: 8px 0; } .org-toelichting .org-tweekolom { margin-top: 8px; } /* ── platformconfig.css ── */ /* ===================================================================== platformconfig.css — module 6.2 · Beheer & configuratie. Uitsluitend tokens; het config-paars uit het prototype gemapt op terra (buiten token-set). Module-wortel-marge volgens de norm. ===================================================================== */ .cfg { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; } .cfg-kop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; } .cfg-kop p { margin: 0; max-width: 74ch; color: var(--c-ink-2); font-size: .82rem; line-height: 1.5; } .cfg-voetnoot { font-size: .74rem; color: var(--c-ink-2); line-height: 1.55; } .cfg-hint { font-size: .72rem; color: var(--c-ink-3); display: block; } .cfg-intro { margin: 0; font-size: .76rem; color: var(--c-ink-2); line-height: 1.55; } .cfg-titel { font-size: .95rem; display: block; } .cfg-balk { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .cfg-rek { flex: 1; } .cfg-smal { max-width: 820px; display: flex; flex-direction: column; gap: 12px; } .cfg-centreer { text-align: center; } .cfg-knop { padding: 9px 14px; border-radius: 10px; cursor: pointer; white-space: nowrap; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); color: var(--c-ink); font: 700 .78rem var(--font-ui); } .cfg-knop:hover { border-color: var(--c-ink-3); } .cfg-knop--terra { background: var(--c-terra); border-color: var(--c-terra); color: var(--knop-ink); } .cfg-knop--donker { background: var(--donker, var(--c-ink)); border-color: var(--c-ink); color: var(--c-creme); } .cfg-knop--klein { padding: 6px 11px; font-size: .7rem; border-radius: 8px; } .cfg-knop--breed { width: 100%; margin-top: 4px; } .cfg-knop.is-staged { border-color: var(--c-terra); background: var(--c-terra-t); color: var(--c-terra-d); } .cfg-knop.is-dicht { opacity: .5; cursor: not-allowed; } .cfg-link { border: 0; background: none; padding: 0; cursor: pointer; font: 700 .74rem var(--font-ui); color: var(--c-ink-3); } .cfg-zoek { padding: 9px 13px; border-radius: 10px; min-width: 220px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); font: 500 .78rem var(--font-ui); color: var(--c-ink); } /* ---- rollen ---- */ .cfg-rollen { display: flex; gap: 9px; flex-wrap: wrap; } .cfg-rol { flex: 1; min-width: 150px; text-align: left; cursor: pointer; padding: 11px 14px; border-radius: 12px; border: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); display: flex; flex-direction: column; gap: 2px; } .cfg-rol.is-actief { border-color: var(--c-terra); background: var(--c-terra-t); } .cfg-rol strong { font-size: .8rem; } .cfg-rol.is-actief strong { color: var(--c-terra-d); } .cfg-rol em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); } /* ---- tabs & chips ---- */ .cfg-tabs { display: flex; gap: 8px; flex-wrap: wrap; } .cfg-tab { padding: 9px 15px; border-radius: 10px; cursor: pointer; white-space: nowrap; border: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); font: 600 .78rem var(--font-ui); color: var(--c-ink-2); } .cfg-tab.is-actief { border-color: var(--c-terra); background: var(--c-terra-t); color: var(--c-terra-d); font-weight: 700; } .cfg-chips { display: flex; gap: 7px; flex-wrap: wrap; } /* FT-6.4a · live regelsets uit de backend */ .cfg-rsblok { border: var(--lijndikte) solid var(--c-lijn); border-radius: 12px; background: var(--c-creme); padding: 13px 15px; margin: 12px 0; } .cfg-rskop { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; } .cfg-rsgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 7px; } .cfg-rsrij { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 11px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 9px; background: var(--kaart); } .cfg-rsrij strong { font-size: .74rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cfg-rsrij span { font-size: .64rem; color: var(--c-ink-3); white-space: nowrap; } .cfg-chip { padding: 6px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; border: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); font: 600 .7rem var(--font-ui); color: var(--c-ink-2); } .cfg-chip.is-actief { border-color: var(--c-terra); background: var(--c-terra-t); color: var(--c-terra-d); font-weight: 700; } /* ---- register ---- */ .cfg-entrij { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 15px; } .cfg-entrij.is-staged { border-color: var(--c-terra); background: var(--c-terra-t); } .cfg-entrij strong { display: block; font-size: .8rem; } .cfg-entrij > div > em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); } .cfg-entrij__sleutel .mono { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .74rem; font-weight: 600; color: var(--c-terra-d); } .cfg-entrij__sleutel em { font-style: normal; font-size: .7rem; color: var(--c-ink-3); } .cfg-gevoelig { font: 700 .56rem var(--font-ui); padding: 2px 7px; border-radius: 5px; color: var(--c-rood); background: var(--c-rood-t); } .cfg-ver { font-size: .66rem; color: var(--c-ink-3); font-weight: 700; } /* ---- changeset ---- */ .cfg-changekaart { padding: 14px 16px; border-left: 4px solid var(--c-terra); display: flex; flex-direction: column; gap: 6px; } .cfg-changekaart.is-gevoelig { border-left-color: var(--c-oker); } .cfg-changekaart.is-blok { border-left-color: var(--c-rood); } .cfg-changekaart__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .cfg-changekaart__kop strong { font-size: .82rem; } .cfg-changekaart__kop .mono { color: var(--c-terra-d); font-size: .76rem; } .cfg-blokregel { font: 700 .7rem var(--font-ui); color: var(--c-rood); } .cfg-gevoeligregel { font: 700 .7rem var(--font-ui); color: var(--c-amber); } .cfg-impactchips { display: flex; flex-wrap: wrap; gap: 6px; } .cfg-publiceer { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; } .cfg-fiatblok { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: 10px; background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-oker); } .cfg-fiatblok strong { display: block; font-size: .78rem; color: var(--c-amber); } .cfg-fiatblok span { font-size: .68rem; color: var(--c-ink-3); } .cfg-impactnote { padding: 12px 14px; border-radius: 10px; font: 600 .76rem var(--font-ui); background: var(--c-terra-t); border: var(--lijndikte) solid var(--c-terra); color: var(--c-terra-d); } .cfg-oknote { padding: 12px 14px; border-radius: 10px; background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); } .cfg-oknote strong { display: block; font-size: .8rem; color: var(--c-groen-d); } .cfg-oknote span { font-size: .7rem; color: var(--c-ink-2); line-height: 1.5; } .cfg-leeg { padding: 40px; text-align: center; border: 1px dashed var(--c-lijn-2); border-radius: 13px; display: flex; flex-direction: column; gap: 5px; } .cfg-leeg strong { font-size: .88rem; color: var(--c-ink-2); } .cfg-leeg span { font-size: .74rem; color: var(--c-ink-3); } /* ---- toggles ---- */ .cfg-togrij { display: flex; align-items: center; gap: 12px; padding: 13px 16px; } .cfg-togrij > div { flex: 1; min-width: 0; } .cfg-togrij strong { display: block; font-size: .8rem; } .cfg-togrij em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); } .cfg-toggle { width: 40px; height: 22px; flex: none; border-radius: 99px; border: 0; cursor: pointer; background: var(--c-lijn-2); position: relative; transition: background 160ms; } .cfg-toggle i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--kaart); transition: left 160ms; font-style: normal; } .cfg-toggle.is-aan { background: var(--c-groen); } .cfg-toggle.is-aan i { left: 21px; } /* ---- omgevingen & rollback ---- */ .cfg-tweekolom { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } .cfg-tweekolom > div { display: flex; flex-direction: column; gap: 10px; } .cfg-envs { display: flex; align-items: center; gap: 12px; } .cfg-envs b { font-size: 1.1rem; color: var(--c-ink-3); } .cfg-env { flex: 1; text-align: center; padding: 16px; border-radius: 13px; border: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); } .cfg-env.is-sandbox { border-color: var(--c-terra); background: var(--c-terra-t); } .cfg-env.is-live { border-color: var(--c-groen); background: var(--c-groen-t); } .cfg-env strong { display: block; font-size: .82rem; } .cfg-env em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); } .cfg-histrij { display: grid; grid-template-columns: 40px 70px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 14px; } .cfg-histrij.is-actief { border-color: var(--c-groen); } .cfg-histrij > strong { font-size: .8rem; } .cfg-histrij span { display: block; font: 600 .72rem var(--font-ui); color: var(--c-ink-2); } .cfg-histrij em { font-style: normal; font-size: .6rem; color: var(--c-ink-3); } .cfg-histacties { display: flex !important; align-items: center; gap: 8px; } /* ---- audit & lockout ---- */ .cfg-lockout { padding: 14px 16px; border-radius: 11px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; background: var(--c-rood-t); border: var(--lijndikte) solid var(--c-rood); } .cfg-lockout strong { font-size: .8rem; color: var(--c-rood); } .cfg-lockout span { font-size: .72rem; color: var(--c-ink-2); line-height: 1.5; } /* ---- responsief ---- */ @media (max-width: 1080px) { .cfg-tweekolom { grid-template-columns: 1fr; } .cfg-entrij { grid-template-columns: 1fr; gap: 6px; } } /* F2-lat (16-07-2026): wijziging oud → nieuw in de changeset */ .cfg-wijziging { font-size: 11.5px; padding: 6px 10px; border: 1px solid var(--c-lijn); border-radius: 9px; background: var(--c-creme); margin: 6px 0; } .cfg-wijziging b { color: var(--c-terra); } /* F2a · changeset als code-review (oud/nieuw) */ .cfg-review { padding: 14px 16px; margin-bottom: 12px; } .cfg-review__kop { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; } .cfg-reviewrij { display: grid; grid-template-columns: 1.4fr 1fr 1fr 28px; gap: 10px; align-items: center; padding: 9px 0 4px; border-top: 1px solid var(--c-lijn); } .cfg-reviewrij--kop { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-2); border-top: 0; padding-bottom: 0; } .cfg-reviewrij em.mono { display: block; font-size: 10.5px; color: var(--c-ink-2); font-style: normal; } .cfg-oud { font-size: 12px; padding: 5px 9px; border-radius: 8px; background: color-mix(in srgb, var(--c-terra) 12%, transparent); color: var(--c-ink); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--c-terra) 55%, transparent); } .cfg-nieuw { font-size: 12px; padding: 5px 9px; border-radius: 8px; background: color-mix(in srgb, var(--c-groen) 16%, transparent); font-weight: 700; } .cfg-reviewimpact { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 2px 0 8px; } /* F2b · sandbox ↔ productie vergelijk */ .cfg-vergelijk { padding: 12px 14px; margin: 12px 0; } .cfg-vglrij { display: grid; grid-template-columns: 1.3fr 1fr 1fr auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--c-lijn); font-size: 12px; } .cfg-vglrij--kop { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-2); border-top: 0; } /* ---------- Rol- en togglebeheer ---------- */ /* flex-grow 0 + basis: een losse rol rekt niet over de volle breedte uit. */ .cfg-rolwrap { flex: 0 1 210px; min-width: 170px; display: flex; flex-direction: column; gap: 5px; } .cfg-rolwrap .cfg-rol { width: 100%; } .cfg-rolwrap.is-actief .cfg-rol { border-color: var(--c-terra); background: var(--c-terra-t); } .cfg-rolwrap.is-actief .cfg-rol strong { color: var(--c-terra-d); } .cfg-rolacties { display: flex; gap: 4px; } .cfg-mini { background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; padding: 4px 8px; font: 600 .68rem var(--font-ui); color: var(--c-ink-2); cursor: pointer; transition: background 160ms ease, border-color 160ms ease; } .cfg-mini:hover { background: var(--c-creme); border-color: var(--c-terra); color: var(--c-terra-d); } .cfg-rolnieuw { align-self: flex-start; background: transparent; border: 1px dashed var(--c-lijn-2); border-radius: 12px; padding: 11px 16px; font: 700 .74rem var(--font-ui); color: var(--c-ink-3); cursor: pointer; transition: border-color 160ms ease, color 160ms ease; } .cfg-rolnieuw:hover { border-color: var(--c-terra); color: var(--c-terra-d); } .cfg-kopregel { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .cfg-togacties { display: flex; align-items: center; gap: 6px; } .cfg-knop--klein { padding: 6px 11px; font-size: .7rem; } .cfg-toguitleg { display: block; font: 400 .66rem/1.5 var(--font-ui); font-style: normal; color: var(--c-ink-3); margin-top: 3px; max-width: 62ch; } /* ---- leadbronnen-regelset (21-07): centrale keuzelijst relatie-instroom ---- */ .cfg-lbchips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 12px; } .cfg-lbchip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 99px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); font: 600 .7rem var(--font-ui); color: var(--c-ink); } .cfg-lbchip--stil { color: var(--c-ink-2); } .cfg-lbchip button { border: none; background: transparent; cursor: pointer; color: var(--c-ink-3); font: inherit; padding: 0 2px; border-radius: 6px; } .cfg-lbchip button:hover { color: var(--c-rood); } .cfg-lbnieuw { display: inline-flex; align-items: center; gap: 6px; } .cfg-lbnieuw input { padding: 6px 12px; border-radius: 99px; border: var(--lijndikte) solid var(--c-lijn-2); font: 500 .7rem var(--font-ui); color: var(--c-ink); background: var(--kaart); width: 150px; } .cfg-lbacties { display: flex; gap: 8px; justify-content: flex-end; } .cfg-knop--primair { background: var(--gradient-primair, var(--c-groen-d)); color: var(--knop-ink); border-color: var(--c-groen-d); } /* UP1 · m²-capaciteit per ploeg (Planregels-blok) */ .cfg-capgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px; margin-top: 8px; } .cfg-caprij { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 9px 12px; } .cfg-caprij strong { font-size: .8rem; display: block; } .cfg-caprij em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); } .cfg-caplabel { display: flex; align-items: center; gap: 7px; font-size: .66rem; color: var(--c-ink-2); } .cfg-capinput { width: 96px; padding: 6px 8px; font-size: .76rem; font-family: var(--font-mono); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); } .cfg-caplabel--schakel { font-size: .7rem; font-weight: 600; } /* UP3: het specialisme per ploeg staat naast de capaciteit — één plek voor alles wat het planbord nodig heeft */ .cfg-caprij { flex-wrap: wrap; } .cfg-capdisc { display: flex; flex-wrap: wrap; gap: 6px; } .cfg-capvink { display: flex; align-items: center; gap: 3px; font-size: .64rem; color: var(--c-ink-2); } .cfg-capvink input { accent-color: var(--c-groen); } .cfg-rsvoet { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; } /* NR1 · nummerreeksen (05-09-2026) — zelfde ritme als de capaciteitsrijen */ .cfg-nrgrid { display: grid; gap: 0; } .cfg-nrkop, .cfg-nrrij { display: grid; grid-template-columns: 1.5fr 1.1fr 120px 130px 84px 100px; gap: 10px; align-items: center; } .cfg-nrkop { font-size: .64rem; color: var(--c-ink-3); text-transform: uppercase; letter-spacing: .06em; padding: 0 0 4px; border-bottom: 1px solid var(--c-lijn); } .cfg-nrrij { padding: 7px 0; border-bottom: 1px solid var(--c-lijn); } .cfg-nrrij strong { font-size: .8rem; display: block; } .cfg-nrrij em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); } .cfg-nrvolgende { font-size: .78rem; } .cfg-nrlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .cfg-capinput--smal { width: 64px; } .cfg-capinput--breed { width: 300px; max-width: 100%; } .cfg-rsvoet--rij { flex-direction: row; align-items: flex-end; gap: 12px; flex-wrap: wrap; } @media (max-width: 960px) { .cfg-nrkop { display: none; } .cfg-nrrij { grid-template-columns: 1fr 1fr; } .cfg-nrlabel { position: static; width: auto; height: auto; clip: auto; font-size: .64rem; color: var(--c-ink-3); display: block; } } /* VERZENDSLOT · open = alarm (kleur is betekenis) */ .cfg-rsblok--alarm { border-color: var(--stop); } .cfg-rsblok--alarm .cfg-titel { color: var(--stop); } /* Schermronde stap 4 (29-09) · de regelsets als tabel met zoek, in plaats van 254 tegels */ .cfg-rstabel { border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-klein); overflow: hidden; background: var(--kaart); } .cfg-rstabel__kop, .cfg-rstabel__rij { display: grid; grid-template-columns: minmax(0, 1fr) 80px 110px; gap: 12px; align-items: center; padding: 8px 14px; } .cfg-rstabel__kop { background: var(--c-paneel); font: 700 .62rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-3); } .cfg-rstabel__rij { border-top: var(--lijndikte) solid var(--c-lijn); font-size: .8rem; } .cfg-rstabel__rij strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cfg-rstabel__rij .mono { font-size: .74rem; color: var(--c-ink-2); } /* BEHEER-RONDE2 (06-10-2026) · het zoekveld over de blokken, de productiecheck-rijen op Proef */ .cfg-zoekbalk { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; } .cfg-zoeklabel { font-size: .72rem; color: var(--ink3); } .cfg-pcrij.is-open strong { color: var(--let-d, var(--let)); } .cfg-pcrij.is-ok strong { color: var(--goed-d, var(--goed)); } .cfg-pcrij em { display: block; font-style: normal; font-size: .72rem; color: var(--ink2); line-height: 1.45; } /* twee kolommen voor blokken met label + waarde (demodata, schakelaars) — het zeskoloms raster is van de nummerreeksen */ .cfg-nrgrid--twee .cfg-nrrij { grid-template-columns: 240px minmax(0, 1fr); align-items: start; } .cfg-nrgrid--twee .cfg-nrrij > span, .cfg-nrgrid--twee .cfg-nrrij > label { justify-self: start; } @media (max-width: 760px) { .cfg-nrgrid--twee .cfg-nrrij { grid-template-columns: minmax(0, 1fr); } } /* DOORLOOP blok D (P16) · het verzendslot per berichtsoort: één rij per soort, met de stand, wat er ligt en de handeling */ .cfg-vsgrid { display: grid; gap: 0; margin: 10px 0 6px; border-top: 1px solid var(--c-lijn); } .cfg-vsrij { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--c-lijn); } .cfg-vsrij strong { font-size: .8rem; display: block; } .cfg-vsrij em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); display: block; } .cfg-vsknoppen { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .cfg-nrrij--twee { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } .cfg-vsindeling { margin: 10px 0 0; } .cfg-vsindeling summary { cursor: pointer; font-size: .76rem; font-weight: 700; } @media (max-width: 900px) { .cfg-vsrij, .cfg-nrrij--twee { grid-template-columns: 1fr; } .cfg-vsknoppen { justify-content: flex-start; } } /* ── regelsets.css ── */ /* regelsets.css — Beheer › Instellingen en regelsets › Regelsets (REGELSET-EDITOR, 01-10-2026). Alleen tokens. */ .rs { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; } .rs-paginakop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; } .rs-paginakop p { margin: 0; max-width: 78ch; color: var(--ink2); font-size: .84rem; line-height: 1.5; } .rs-terug { border: var(--lijndikte) solid var(--lijn); background: var(--kaart); color: var(--ink2); font: 600 .8rem var(--font-ui); padding: 5px 10px; border-radius: var(--radius-klein); cursor: pointer; } .rs-terug:hover { color: var(--ink); border-color: var(--ink3); } .rs-hint { font-size: .74rem; color: var(--ink3); line-height: 1.5; } .rs-leeg { padding: 18px; color: var(--ink2); } .rs-balk { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .rs-zoek { flex: 1; min-width: 240px; padding: 9px 13px; border-radius: var(--radius); border: var(--lijndikte) solid var(--lijn2); background: var(--kaart); font: 500 .8rem var(--font-ui); color: var(--ink); } .rs-chips { display: flex; gap: 6px; flex-wrap: wrap; } .rs-chip { border: var(--lijndikte) solid var(--lijn); background: var(--kaart); color: var(--ink2); cursor: pointer; font: 600 .72rem var(--font-ui); padding: 6px 11px; border-radius: var(--radius-klein); } .rs-chip.is-actief { background: var(--accent-t); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); } .rs-chip:focus-visible, .rs-rij:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .rs-gevoelig { font-style: normal; color: var(--let-d); font-size: .7rem; font-weight: 700; } .rs-lijst { padding: 0; overflow: hidden; } .rs-rij { display: grid; grid-template-columns: minmax(0, 2.4fr) 1fr .9fr 1fr .9fr; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 10px 16px; border: 0; border-top: var(--lijndikte) solid var(--lijn); background: none; color: var(--ink); cursor: pointer; font: 500 .78rem var(--font-ui); } .rs-rij:hover { background: var(--accent-t2); } .rs-rij--kop { font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink3); background: var(--vlak); border-top: 0; cursor: default; } .rs-rij--kop:hover { background: var(--vlak); } .rs-rij b { display: block; font: 700 .84rem var(--font-ui); } .rs-rij em { font-style: normal; font-size: .68rem; color: var(--ink3); } .rs-rij small { display: block; font-size: .7rem; color: var(--ink2); } .rs-rij__merk { display: flex; gap: 6px; align-items: center; justify-content: flex-end; } .rs-tabelvoet { padding: 11px 16px; border-top: var(--lijndikte) solid var(--lijn); background: var(--vlak); font: 500 .74rem var(--font-ui); color: var(--ink3); } .rs-blokkop { padding: 13px 16px; border-bottom: var(--lijndikte) solid var(--lijn); display: flex; flex-direction: column; gap: 2px; } .rs-blokkop strong { font-size: .88rem; } .rs-voorstellen { padding: 0; overflow: hidden; border-color: var(--let); } .rs-voorstel { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 11px 16px; border-top: var(--lijndikte) solid var(--lijn); font-size: .8rem; } .rs-voorstel > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .rs-voorstel > div > span { font-size: .72rem; color: var(--ink2); } .rs-voorstel em { font-style: normal; font-size: .7rem; color: var(--ink3); } .rs-knoppen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .rs-kop { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; } .rs-kop h2 { margin: 4px 0 2px; font-size: 1.15rem; } .rs-kop p { margin: 0; font-size: .82rem; color: var(--ink2); line-height: 1.5; max-width: 90ch; } .rs-toelichtingen { font-size: .76rem; color: var(--ink2); margin-top: 6px; } .rs-toelichtingen summary { cursor: pointer; color: var(--ink3); } .rs-toelichtingen p { margin: 6px 0 0; font-size: .74rem; } .rs-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: .74rem; color: var(--ink2); } .rs-meta a { color: var(--accent); font-weight: 600; } .rs-afw { color: var(--let-d); font-weight: 600; } .rs-groep { padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; } .rs-velden { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px 22px; } .rs-veld { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 12px; align-items: center; padding: 6px 8px; border-radius: var(--radius-klein); } .rs-veld:hover { background: var(--accent-t2); } .rs-veld--breed { grid-column: 1 / -1; grid-template-columns: 1fr; } .rs-label { display: flex; flex-direction: column; min-width: 0; } .rs-label b { font: 700 .8rem var(--font-ui); } .rs-label em { font-style: normal; font-size: .72rem; color: var(--ink2); line-height: 1.4; } .rs-label small { font-size: .62rem; color: var(--ink3); } .rs-veld input[type="text"], .rs-veld input[type="number"], .rs-veld input[type="time"], .rs-veld input[type="date"], .rs-veld select, .rs-veld textarea, .rs-tabel input, .rs-tabel select { width: 100%; padding: 7px 10px; border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein); font: 500 .8rem var(--font-ui); color: var(--ink); background: var(--kaart); } .rs-veld textarea.mono, .rs-veld textarea.is-fout { font-family: var(--font-mono); font-size: .74rem; } .rs-veld textarea.is-fout { border-color: var(--stop); } .rs-fout { font-style: normal; font-size: .72rem; color: var(--stop-d); } .rs-schakel { display: inline-flex; gap: 8px; align-items: center; font-size: .8rem; } .rs-vast { color: var(--ink2); } .rs-tabel { display: flex; flex-direction: column; gap: 4px; } .rs-tabel__kop, .rs-tabel__rij { display: grid; grid-template-columns: var(--kol); gap: 8px; align-items: center; } .rs-tabel__kop { font: 600 .66rem var(--font-ui); color: var(--ink3); text-transform: uppercase; letter-spacing: .04em; padding: 0 2px; } .rs-x { border: 0; background: none; color: var(--ink3); cursor: pointer; font-size: .9rem; padding: 4px; border-radius: var(--radius-klein); } .rs-x:hover { color: var(--stop); background: var(--stop-t); } .rs-opslaan { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; position: sticky; bottom: 12px; } .rs-opslaan.is-dirty { border-color: var(--accent); box-shadow: var(--schaduw-zwevend); } .rs-diff { display: flex; flex-direction: column; gap: 3px; font-size: .78rem; } .rs-diff strong { color: var(--goed-d); } .rs-redenrij { display: grid; grid-template-columns: 1fr 180px; gap: 10px; align-items: end; } .rs-historie { padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; } .rs-versies { display: flex; gap: 6px; flex-wrap: wrap; } .rs-audit { display: grid; grid-template-columns: 90px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-top: var(--lijndikte) solid var(--lijn); font-size: .78rem; } .rs-audit .mono { color: var(--ink3); font-size: .7rem; } .rs-audit em { display: block; font-style: normal; font-size: .72rem; color: var(--ink2); line-height: 1.45; } @media (max-width: 1080px) { .rs-rij { grid-template-columns: 1fr; gap: 4px; } .rs-rij--kop { display: none; } .rs-velden { grid-template-columns: 1fr; } .rs-redenrij { grid-template-columns: 1fr; } } /* ── gebruikers.css ── */ /* ===================================================================== gebruikers.css — Beheer › Gebruikers en toegang, vier tabs (BEHEER-TOEGANG, 01-10-2026). Uitsluitend tokens uit casa360-stijl.css; module-wortel-marge volgens de norm. Kleur is betekenis: --stop blokkeert, --let vraagt aandacht, --goed is klaar. ===================================================================== */ .pm { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; } .pm-kop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; } .pm-kop p { margin: 0; max-width: 78ch; color: var(--ink2); font-size: .84rem; line-height: 1.5; } .pm-hint { font-size: .74rem; color: var(--ink3); display: block; line-height: 1.5; } .pm-leeg { padding: 18px; color: var(--ink2); font-size: .84rem; } .pm-balk { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; } .pm-rek { flex: 1; } .pm-titel { font-size: .95rem; } .pm-tabelvoet { padding: 11px 16px; border-top: var(--lijndikte) solid var(--lijn); background: var(--vlak); font: 500 .74rem var(--font-ui); color: var(--ink3); } .pm-link { border: 0; background: none; padding: 0; color: var(--accent); font: 700 .74rem var(--font-ui); cursor: pointer; text-decoration: underline; } .pm-knoppen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .pm-knoppen .btn.is-actief { background: var(--knop); border-color: var(--knop); color: var(--knop-ink); } .pm-flt { padding: 8px 14px; border-radius: var(--radius-klein); cursor: pointer; white-space: nowrap; border: var(--lijndikte) solid var(--lijn); background: var(--kaart); font: 600 .76rem var(--font-ui); color: var(--ink2); } .pm-flt.is-actief { background: var(--accent-t); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); font-weight: 700; } .pm-flt:focus-visible, .pm-code:focus-visible, .pm-rij:focus-visible, .pm-profitem:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .pm-zoek { flex: 1; min-width: 220px; padding: 9px 13px; border-radius: var(--radius); border: var(--lijndikte) solid var(--lijn2); background: var(--kaart); font: 500 .8rem var(--font-ui); color: var(--ink); } .pm-teller { font: 700 .66rem var(--font-mono); background: var(--let-t); color: var(--let-d); padding: 1px 6px; border-radius: var(--radius-pill); margin-left: 4px; } .pm-flt.is-actief .pm-teller { background: var(--kaart); color: var(--ink); } /* ---- afwijkingen: chips, regels, punten ---- */ .pm-codes { display: flex; gap: 6px; flex-wrap: wrap; } .pm-code { border: var(--lijndikte) solid var(--lijn); background: var(--kaart); color: var(--ink2); cursor: pointer; font: 600 .72rem var(--font-ui); padding: 5px 10px; border-radius: var(--radius-klein); } .pm-code b { color: var(--ink); margin-left: 3px; } .pm-code.is-actief { background: var(--knop); border-color: var(--knop); color: var(--knop-ink); } .pm-code.is-actief b { color: var(--knop-ink); } .pm-afw { display: inline-block; font: 600 .7rem var(--font-ui); padding: 2px 8px; border-radius: var(--radius-pill); margin: 2px 4px 0 0; } .pm-afw.is-stop { background: var(--stop-t); color: var(--stop-d); } .pm-afw.is-let { background: var(--let-t); color: var(--let-d); } .pm-afw.is-stil { background: var(--grijs); color: var(--ink2); font-weight: 500; } .pm-afwlijst { display: block; margin-top: 3px; } .pm-afwregel { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--radius); font-size: .8rem; line-height: 1.5; border: var(--lijndikte) solid var(--lijn); background: var(--kaart); } .pm-afwregel b { width: 9px; height: 9px; border-radius: 50%; flex: none; margin-top: 6px; background: var(--ink3); } .pm-afwregel.is-stop { border-color: var(--stop); } .pm-afwregel.is-stop b { background: var(--stop); } .pm-afwregel.is-let { border-color: var(--let); } .pm-afwregel.is-let b { background: var(--let); } .pm-afwregel.is-goed { border-color: var(--goed); color: var(--goed-d); } .pm-afwregel.is-goed b { background: var(--goed); } .pm-punt { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; } .pm-punt.is-stop { background: var(--stop); } .pm-punt.is-let { background: var(--let); } /* ---- Mensen: één rij per persoon ---- */ .pm-lijst { padding: 0; overflow: hidden; } .pm-rij { display: grid; grid-template-columns: 5px minmax(0, 2fr) minmax(0, 1.5fr) minmax(140px, .9fr) auto; gap: 12px; align-items: center; padding-right: 14px; border-bottom: var(--lijndikte) solid var(--lijn); cursor: pointer; } .pm-rij:last-of-type { border-bottom: 0; } .pm-rij:hover { background: var(--accent-t2); } .pm-rij__streep { align-self: stretch; } .pm-rij__streep.is-stop { background: var(--stop); } .pm-rij__streep.is-let { background: var(--let); } .pm-rij__wie { display: flex; gap: 10px; align-items: flex-start; padding: 11px 0 11px 10px; min-width: 0; } .pm-rij__wie > span { min-width: 0; } .pm-rij__wie b { display: block; font: 700 .86rem var(--font-ui); } .pm-rij__wie > span > span { display: block; font-size: .74rem; color: var(--ink2); } .pm-rij__profs { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; } .pm-rij__profs em { font-style: normal; font-size: .66rem; color: var(--ink3); margin-left: 4px; } .pm-rij__stand { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; } .pm-rij__stand em { font-style: normal; font-size: .7rem; color: var(--ink3); } .pm-rij__acties { display: flex; gap: 6px; } /* ---- drawer: de persoon ---- */ .pm-sectie { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-bottom: var(--lijndikte) solid var(--lijn); } .pm-sectie:first-child { padding-top: 0; } .pm-sectie[hidden] { display: none; } .pm-kicker2 { margin-top: 8px; } .pm-feit { display: flex; justify-content: space-between; gap: 12px; font-size: .8rem; color: var(--ink3); } .pm-feit b { font-weight: 600; color: var(--ink); text-align: right; } .pm-feit--top { margin-top: 12px; padding-top: 12px; border-top: var(--lijndikte) solid var(--lijn); } .pm-profkeuze { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; } .pm-profvink { display: flex; gap: 8px; align-items: center; font-size: .8rem; cursor: pointer; } .pm-sodmeld { display: flex; gap: 4px; flex-wrap: wrap; } .pm-effdom { display: flex; flex-direction: column; gap: 6px; } .pm-effdom > div { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; } .pm-effdom > div > b { font-size: .72rem; width: 80px; color: var(--ink3); font-weight: 700; } .pm-effrecht { font: 500 .72rem var(--font-ui); background: var(--grijs); color: var(--ink); padding: 2px 8px; border-radius: var(--radius-pill); } .pm-effrecht.is-gevoelig { background: var(--let-t); color: var(--let-d); } .pm-sessies { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .pm-sessierij { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius); padding: 9px 12px; } .pm-sessierij > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pm-sessierij strong { font-size: .8rem; } .pm-sessierij span { font-size: .7rem; color: var(--ink2); } .pm-sessierij em { font-style: normal; color: var(--ink3); } .pm-soort { display: flex; gap: 6px; margin-bottom: 8px; } .pm-voorbeeld { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--vlak); font-size: .78rem; line-height: 1.7; color: var(--ink2); } /* ---- Profielen ---- */ .pm-voorstellen { padding: 0; overflow: hidden; border-color: var(--let); } .pm-voorstel { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 11px 16px; border-top: var(--lijndikte) solid var(--lijn); font-size: .8rem; } .pm-voorstel > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pm-voorstel > div > span:last-child { font-size: .72rem; color: var(--ink3); } .pm-voorstel .mono { font-size: .72rem; color: var(--let-d); } .pm-blokkop { padding: 13px 16px; border-bottom: var(--lijndikte) solid var(--lijn); display: flex; align-items: center; justify-content: space-between; gap: 10px; } .pm-blokkop strong { font-size: .88rem; } .pm-blok { padding: 16px 18px; display: flex; flex-direction: column; gap: 9px; } .pm-blok > strong { font-size: .88rem; } .pm-tweekolom { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: start; } .pm-effzij { display: flex; flex-direction: column; gap: 14px; } .pm-profgrid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; } .pm-proflijst { padding: 0; overflow: hidden; position: sticky; top: 16px; } .pm-profitem { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; cursor: pointer; padding: 9px 14px; border: 0; border-top: var(--lijndikte) solid var(--lijn); background: none; font: 500 .78rem var(--font-ui); color: var(--ink); } .pm-profitem > span { display: flex; flex-direction: column; min-width: 0; } .pm-profitem b { font-weight: 700; } .pm-profitem > span > span { font-size: .7rem; color: var(--ink3); } .pm-profitem:hover { background: var(--accent-t2); } .pm-profitem.is-actief { background: var(--knop); color: var(--knop-ink); } .pm-profitem.is-actief > span > span { color: var(--knop-ink); opacity: .75; } .pm-profeditor { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .pm-editkop { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; } .pm-editvelden { display: grid; grid-template-columns: 1fr 2fr; gap: 10px 14px; align-items: end; } .pm-externvink { grid-column: 1 / -1; } .pm-editmeta { display: flex; gap: 14px; flex-wrap: wrap; font-size: .76rem; color: var(--ink2); } .pm-editmeta .mono { color: var(--ink3); } .pm-rechten { padding: 6px 18px 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px 22px; } .pm-domein { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; } .pm-domein .kicker { margin-bottom: 4px; } .pm-recht { display: flex; gap: 10px; align-items: flex-start; padding: 6px 8px; border-radius: var(--radius-klein); cursor: pointer; } .pm-recht:hover { background: var(--accent-t2); } .pm-recht input { margin-top: 3px; } .pm-recht > span { display: flex; flex-direction: column; min-width: 0; } .pm-recht b { font: 700 .8rem var(--font-ui); } .pm-recht b i { font-style: normal; color: var(--let-d); font-size: .66rem; margin-left: 2px; } .pm-recht > span > span { font-size: .72rem; color: var(--ink2); line-height: 1.4; } .pm-recht em { font-style: normal; font-size: .62rem; color: var(--ink3); } .pm-recht.is-aan b { color: var(--ink); } .pm-opslaan { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; position: sticky; bottom: 12px; } .pm-opslaan.is-dirty { border-color: var(--accent); box-shadow: var(--schaduw-zwevend); } .pm-diff { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; } .pm-diff b { font-size: .72rem; font-weight: 600; background: var(--goed-t); color: var(--goed-d); padding: 1px 6px; border-radius: var(--radius-klein); } .pm-diff b.is-gevoelig { background: var(--let-t); color: var(--let-d); } .pm-diff span:nth-child(2) b:not(.is-gevoelig) { background: var(--grijs); color: var(--ink2); } .pm-sodrij { display: flex; align-items: center; gap: 13px; padding: 12px 16px; border-top: var(--lijndikte) solid var(--lijn); } .pm-sodrij i { width: 32px; height: 32px; flex: none; border-radius: var(--radius-klein); font-style: normal; background: var(--vlak); color: var(--ink2); display: flex; align-items: center; justify-content: center; } .pm-sodrij > div { flex: 1; min-width: 0; } .pm-sodrij strong { display: block; font-size: .8rem; } .pm-sodrij span:not(.chip) { font-size: .74rem; color: var(--ink2); line-height: 1.5; } .fp-rij { display: grid; grid-template-columns: minmax(180px, 1.2fr) minmax(160px, 1.6fr) minmax(100px, .8fr) auto; gap: 10px; align-items: center; padding: 9px 16px; border-top: var(--lijndikte) solid var(--lijn); font-size: .8rem; } .fp-rij--kop { color: var(--ink3); font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; background: var(--vlak); border-top: 0; } .fp-rij strong { display: block; } .fp-patroon { display: block; font-size: .7rem; color: var(--ink3); } .fp-vinken { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; } .fp-vink { font-size: .82rem; display: flex; gap: 6px; align-items: center; } /* ---- Controle ---- */ .pm-ctrltabs { display: flex; gap: 6px; flex-wrap: wrap; } .pm-attestrij { display: grid; grid-template-columns: 1.5fr 1.8fr .9fr 1.2fr; gap: 10px; align-items: center; padding: 10px 16px; border-top: var(--lijndikte) solid var(--lijn); font-size: .8rem; } .pm-attestrij--kop { font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink3); background: var(--vlak); border-top: 0; } .pm-attestrij.is-beoordeeld { opacity: .7; } .pm-attestrij em { display: block; font-size: .7rem; color: var(--ink3); font-style: normal; } .pm-attestvoortgang { display: flex; gap: 10px; align-items: center; min-width: 160px; } .pm-tijdbalk { display: block; flex: 1; height: 6px; border-radius: 4px; background: var(--grijs); overflow: hidden; font-style: normal; } .pm-tijdbalk b { display: block; height: 100%; background: var(--goed); border-radius: 4px; } .pm-verzoek { padding: 12px 16px; border-top: var(--lijndikte) solid var(--lijn); display: flex; flex-direction: column; gap: 4px; } .pm-verzoek__kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pm-verzoek__kop em { font-style: normal; font-size: .68rem; color: var(--ink3); } .pm-verzoek strong { font-size: .82rem; } .pm-verzoek__recht { font: 600 .78rem var(--font-ui); color: var(--ink); } .pm-verzoek p { margin: 0 0 4px; font-size: .76rem; color: var(--ink2); line-height: 1.5; } .pm-afgehandeld { font: 600 .74rem var(--font-ui); color: var(--ink2); } .pm-tot { font-style: normal; font: 600 .72rem var(--font-ui); color: var(--let-d); } .pm-bg { font: 600 .6rem var(--font-mono); font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: var(--stop-d); background: var(--stop-t); padding: 2px 6px; border-radius: var(--radius-klein); } .pm-auditrij { display: grid; grid-template-columns: 90px 1.1fr 2.6fr 90px; gap: 12px; align-items: center; padding: 10px 16px; font-size: .78rem; border-top: var(--lijndikte) solid var(--lijn); } .pm-auditrij .mono { font-size: .7rem; color: var(--ink3); } .pm-auditrij em { font-style: normal; font-size: .72rem; color: var(--ink2); display: block; line-height: 1.45; } @media (max-width: 1080px) { .pm-profgrid, .pm-tweekolom { grid-template-columns: 1fr; } .pm-proflijst { position: static; } .pm-rij { grid-template-columns: 5px minmax(0, 1fr); gap: 6px; padding: 0 14px 10px 0; } .pm-rij__acties { padding-left: 10px; } .pm-attestrij, .pm-auditrij { grid-template-columns: 1fr; gap: 4px; } .pm-attestrij--kop { display: none; } .pm-editvelden { grid-template-columns: 1fr; } } /* TA (Michiel 06-10) · de inrichtingstaken in de persoon-drawer */ .pm-ta-taken { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .pm-ta-taken li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; font-size: .76rem; } .pm-ta-taken li i { font-style: normal; color: var(--ink3); text-align: center; } .pm-ta-taken li.is-klaar span { color: var(--ink3); text-decoration: line-through; } .pm-ta-taken li.is-klaar i { color: var(--goed); } .pm-ta-taken li em { font-style: normal; font-size: .66rem; color: var(--ink3); white-space: nowrap; } /* DOORLOOP blok C · voorstellen uit de besluiten: de rechten die erbij komen of afgaan, als niet-klikbare chips */ .pm-voorstel[data-pm-bv] { align-items: flex-start; } .pm-voorstel[data-pm-bv] > div:first-child { flex: 1 1 auto; } .pm-voorstel[data-pm-bv] p { margin: 4px 0; max-width: 78ch; } .pm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } /* ── datamodel.css ── */ /* ===================================================================== datamodel.css — module 6.4 · Gouden records (Woning-360, Persoon-360, import-monitor, ontdubbelen). Uitsluitend tokens; verrijking-blauw uit het prototype gemapt op sage. Module-wortel-marge volgens norm. ===================================================================== */ .dm { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; } .dm-kop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; } .dm-kop p { margin: 0; max-width: 76ch; color: var(--c-ink-2); font-size: .82rem; line-height: 1.5; } .dm-voetnoot { font-size: .74rem; color: var(--c-ink-2); line-height: 1.55; } .dm-balk { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .dm-rek { flex: 1; } .dm-leeg { font-size: .74rem; color: var(--c-ink-3); } .dm-note { font-style: normal; font-size: .68rem; color: var(--c-ink-3); line-height: 1.5; } .is-terra { color: var(--c-terra-d); } .is-groen { color: var(--c-groen-d); } .dm-knop { padding: 9px 14px; border-radius: 10px; cursor: pointer; white-space: nowrap; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); color: var(--c-ink); font: 700 .78rem var(--font-ui); } .dm-knop:hover { border-color: var(--c-ink-3); } .dm-knop--primair { background: var(--c-groen); border-color: var(--c-groen); color: var(--knop-ink); } .dm-knop--klein { padding: 6px 11px; font-size: .7rem; border-radius: 8px; } .chip--sage { background: var(--c-sage-t); color: var(--c-groen-d); } /* ---- layout: picker + detail ---- */ .dm-grid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 20px; align-items: start; } .dm-picker { background: var(--c-creme); border-radius: 14px; padding: 14px; position: sticky; top: 16px; display: flex; flex-direction: column; gap: 6px; } .dm-picker > em { font-style: normal; font-size: .74rem; color: var(--c-ink-3); margin-bottom: 6px; } .dm-pickrij { text-align: left; cursor: pointer; padding: 11px 13px; border-radius: 11px; border: var(--lijndikte) solid transparent; background: var(--kaart); display: flex; flex-direction: column; gap: 3px; } .dm-pickrij.is-actief { border-color: var(--c-groen); background: var(--c-groen-t); } .dm-pickrij > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .dm-pickrij strong { font-size: .8rem; } .dm-pickrij em { font-style: normal; font-size: .7rem; color: var(--c-ink-3); } .dm-detail { min-width: 0; display: flex; flex-direction: column; gap: 12px; } .dm-detkop { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .dm-detkop h2 { margin: 4px 0 5px; font-size: 1.3rem; letter-spacing: -.01em; } .dm-detkop__sub { font-size: .78rem; color: var(--c-ink-2); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .dm-detkop__sub .mono { font-size: .66rem; color: var(--c-terra-d); } .dm-score { padding: 11px 18px; text-align: center; } .dm-score strong { display: block; font-size: 1.5rem; color: var(--c-groen-d); line-height: 1; } .dm-resolutie { padding: 12px 15px; border-radius: 12px; font: 500 .76rem/1.55 var(--font-ui); color: var(--c-ink-2); background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); } /* FT-6.4b · live claims uit het BAG-register */ .dm-live { margin: 14px 0; padding: 14px 16px; } .dm-live__kop { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; } .dm-live__kop strong { font-size: .9rem; } .dm-live__meta { font-size: .64rem; color: var(--c-ink-3); } .dm-livegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 7px; } .dm-liverij { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; padding: 7px 11px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 9px; background: var(--kaart); } .dm-liverij em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); } .dm-liverij strong { font-size: .76rem; } .dm-liverij .mono { font-size: .6rem; color: var(--c-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 90px; } .dm-live__voet { font-size: .68rem; color: var(--c-ink-3); line-height: 1.5; margin: 10px 0 0; } .dm-tweekolom { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; } .dm-blok { padding: 16px 18px; display: flex; flex-direction: column; gap: 9px; } /* ---- gouden velden ---- */ .dm-veld { padding: 12px 15px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 0; } .dm-veld:hover { border-color: var(--c-ink-3); } .dm-veld.is-open { border-color: var(--c-groen); } .dm-veld__kop { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .dm-veld__kop > em { font-style: normal; font-size: .64rem; letter-spacing: .04em; text-transform: uppercase; color: var(--c-terra-d); min-width: 104px; } .dm-veld__kop strong { font-size: .95rem; } .dm-veld__kop i { font-style: normal; font-size: .62rem; color: var(--c-ink-3); } .dm-veld__hist { display: flex; flex-direction: column; gap: 6px; margin-top: 11px; padding-top: 10px; border-top: var(--lijndikte) solid var(--c-lijn); } .dm-histrij { display: flex; align-items: center; gap: 10px; font-size: .76rem; flex-wrap: wrap; } .dm-histrij strong { min-width: 66px; } .dm-histrij > em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); min-width: 150px; } .dm-histrij > span { font-size: .7rem; color: var(--c-ink-3); flex: 1; } .dm-histrij.is-actueel strong { color: var(--c-groen-d); } .dm-histnote { font-size: .68rem; color: var(--c-ink-3); line-height: 1.5; margin-top: 4px; } .dm-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .dm-dot.is-groen { background: var(--c-groen); } .dm-dot.is-sage { background: var(--c-sage); } .dm-dot.is-stil { background: var(--c-lijn-2); } .dm-persrij { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 13px; border-radius: 10px; background: var(--c-creme); border: 0; cursor: pointer; text-align: left; width: 100%; } .dm-persrij:hover { background: var(--c-paneel); } .dm-persrij.is-oud { opacity: .65; } .dm-persrij strong { display: block; font-size: .8rem; } .dm-persrij em { font-style: normal; font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; color: var(--c-terra-d); } .dm-persrij i { display: block; font-style: normal; font-size: .68rem; color: var(--c-ink-3); } .dm-persrij b { font: 600 .72rem var(--font-ui); color: var(--c-groen-d); white-space: nowrap; } .dm-tags { display: flex; flex-wrap: wrap; gap: 7px; } /* ---- persoon ---- */ .dm-persveld { display: flex; flex-direction: column; gap: 3px; padding: 8px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); } .dm-persveld:last-child { border-bottom: 0; } .dm-persveld em { font-style: normal; font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; color: var(--c-terra-d); display: flex; align-items: center; gap: 8px; } .dm-persveld strong { font-size: .84rem; } /* ---- import ---- */ .dm-imprij { display: grid; grid-template-columns: .8fr 2fr .9fr .9fr .9fr .8fr 1.3fr; gap: 12px; align-items: center; padding: 12px 16px; font-size: .76rem; border-bottom: var(--lijndikte) solid var(--c-lijn); } .dm-imprij:last-child { border-bottom: 0; } .dm-imprij--kop { font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); background: var(--c-creme); } .dm-imprij.is-fout { background: var(--c-rood-t); } .dm-imprij > div { min-width: 0; } .dm-imprij strong { display: block; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dm-imprij em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); } .dm-impacties { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* ---- merge ---- */ .dm-merge { padding: 15px 18px; display: flex; flex-direction: column; gap: 12px; } .dm-merge__kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .dm-merge__reden { font-size: .74rem; color: var(--c-ink-3); } .dm-merge__kop strong { font-size: 1rem; } .dm-merge__kop em { font-style: normal; font-size: .56rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); } .dm-merge__paar { display: grid; grid-template-columns: 1fr 32px 1fr; gap: 10px; align-items: center; } .dm-merge__paar > b { text-align: center; color: var(--c-ink-3); font-size: 1rem; } .dm-kandidaat { background: var(--c-creme); border-radius: 11px; padding: 12px 14px; } .dm-kandidaat strong { display: block; font-size: .8rem; } .dm-kandidaat em { font-style: normal; font-size: .66rem; color: var(--c-terra-d); } .dm-merge__acties { display: flex; gap: 9px; } .dm-merge__klaar { font: 700 .76rem var(--font-ui); color: var(--c-groen-d); } /* ---- responsief ---- */ @media (max-width: 1080px) { .dm-grid, .dm-tweekolom { grid-template-columns: 1fr; } .dm-picker { position: static; } .dm-imprij { grid-template-columns: 1fr; gap: 4px; } .dm-imprij--kop { display: none; } .dm-merge__paar { grid-template-columns: 1fr; } } /* F4-lat: steward-correctie + merge-drempels */ .dm-corrigeer { align-self: flex-start; margin-top: 6px; font-style: normal; cursor: pointer; } /* F4a/c · bulk-merge + BAG-monitor */ .dm-bulkkop, .dm-bulkrij { display: grid; grid-template-columns: 64px 1.3fr 1.3fr; gap: 12px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--c-lijn); font-size: 12.5px; } .dm-bulkkop { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-2); } .dm-bulkrij em.mono { display: block; font-size: 10.5px; color: var(--c-ink-2); font-style: normal; } .dm-bulkalias { opacity: .65; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--c-terra) 45%, transparent); } .dm-bagblok { margin-top: 14px; } .dm-bagkop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 16px 10px; } .dm-bagrij { display: grid; grid-template-columns: 120px 1.4fr 1.3fr auto; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--c-lijn); font-size: 12.5px; } .dm-bagrij.is-af { opacity: .6; } .dm-bagrij em.mono { display: block; font-size: 10.5px; color: var(--c-ink-2); font-style: normal; } .dm-bagrij i { display: block; font-style: normal; font-size: 11.5px; color: var(--c-ink-2); } .dm-bagraakt { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; font-size: 11px; } .dm-bagraakt em { font-style: normal; color: var(--c-ink-2); } /* blok H · Woning-360 is de ingang naar het woningrecord: één zoekveld */ .dm-zoek { padding: 18px 20px; margin-bottom: 14px; } /* ── integraties.css ── */ /* ===================================================================== integraties.css — module 6.5 · API & integraties + Datakwaliteit. Uitsluitend tokens; module-wortel-marge volgens de vaste norm. ===================================================================== */ .ig { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; } .ig-kop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; } .ig-kop p { margin: 0; max-width: 76ch; color: var(--c-ink-2); font-size: .82rem; line-height: 1.5; } .ig-voetnoot { font-size: .74rem; color: var(--c-ink-2); line-height: 1.55; } .ig-hint { font-size: .72rem; color: var(--c-ink-3); display: block; } .ig-intro { margin: 0; font-size: .78rem; color: var(--c-ink-2); max-width: 80ch; line-height: 1.55; } .ig-note { font-style: normal; font-size: .66rem; color: var(--c-ink-3); display: block; line-height: 1.5; } .ig-titel { font-size: .95rem; display: block; } .ig-balk { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .ig-rek { flex: 1; } .ig-chips { display: flex; gap: 6px; flex-wrap: wrap; } .ig-klaar { font: 700 .76rem var(--font-ui); color: var(--c-groen-d); } .is-groen { color: var(--c-groen-d); } .is-amber { color: var(--c-amber); } .is-rood { color: var(--c-rood); } .ig-knop { padding: 9px 14px; border-radius: 10px; cursor: pointer; white-space: nowrap; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); color: var(--c-ink); font: 700 .78rem var(--font-ui); } .ig-knop:hover { border-color: var(--c-ink-3); } .ig-knop--donker { background: var(--donker, var(--c-ink)); border-color: var(--c-ink); color: var(--c-creme); } .ig-knop--primair { background: var(--c-groen); border-color: var(--c-groen); color: var(--knop-ink); } .ig-knop--amber { background: var(--c-oker); border-color: var(--c-oker); color: var(--c-ink); } .ig-knop--klein { padding: 6px 11px; font-size: .7rem; border-radius: 8px; } .ig-knop--breed { width: 100%; } .ig-terug { align-self: flex-start; border: 0; background: none; padding: 0; cursor: pointer; font: 600 .78rem var(--font-ui); color: var(--c-groen-d); } .ig-tabs { display: flex; gap: 8px; flex-wrap: wrap; } .ig-tab { padding: 9px 15px; border-radius: 10px; cursor: pointer; white-space: nowrap; border: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); font: 600 .78rem var(--font-ui); color: var(--c-ink-2); } .ig-tab.is-actief { background: var(--donker, var(--c-ink)); border-color: var(--c-ink); color: var(--knop-ink); font-weight: 700; } .ig-tweekolom { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .ig-blok { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; } .ig-blok > strong { font-size: .86rem; } .ig-blokkop { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ig-dot { width: 10px; height: 10px; border-radius: 50%; } .ig-dot.is-groen { background: var(--c-groen); } .ig-dot.is-amber { background: var(--c-oker); } .ig-dot.is-terra { background: var(--c-terra); } /* ---- connectoren ---- */ .ig-catgroep { display: flex; flex-direction: column; gap: 10px; } .ig-conngrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .ig-conngrid--breed { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .ig-conn { padding: 15px 17px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 10px; } .ig-conn:hover { border-color: var(--c-ink-3); } .ig-conn__kop { display: flex; align-items: flex-start; gap: 11px; } .ig-conn__kop i { width: 40px; height: 40px; flex: none; border-radius: 10px; font-style: normal; display: flex; align-items: center; justify-content: center; font: 700 .74rem var(--font-mono); } .ig-conn__kop i.is-groen, .ig-detlogo.is-groen { background: var(--c-groen-t); color: var(--c-groen-d); } .ig-conn__kop i.is-amber, .ig-detlogo.is-amber { background: var(--c-amber-t); color: var(--c-amber); } .ig-conn__kop i.is-terra, .ig-detlogo.is-terra { background: var(--c-terra-t); color: var(--c-terra-d); } .ig-conn__kop > span { flex: 1; min-width: 0; } .ig-conn__kop strong { display: block; font-size: .88rem; } .ig-conn__kop em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); } .ig-conn__voet { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ig-conn__voet em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); } .ig-herstel { display: block; text-align: center; padding: 8px; border-radius: 8px; border: var(--lijndikte) solid var(--c-oker); background: var(--c-amber-t); font: 700 .74rem var(--font-ui); color: var(--c-amber); } .ig-detkop { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .ig-detlogo { width: 52px; height: 52px; flex: none; border-radius: 13px; font-style: normal; display: flex; align-items: center; justify-content: center; font: 700 .9rem var(--font-mono); } .ig-detkop h2 { margin: 0 0 5px; font-size: 1.25rem; } .ig-detkop span { font-size: .78rem; color: var(--c-ink-2); } .ig-doel { padding: 14px 17px; font: 400 .8rem/1.6 var(--font-ui); color: var(--c-ink-2); } .ig-issue { display: flex; gap: 11px; align-items: flex-start; padding: 14px 16px; border: var(--lijndikte) solid var(--c-oker); border-radius: 13px; background: var(--c-amber-t); } .ig-issue i { font-style: normal; color: var(--c-amber); font-weight: 700; } .ig-issue > div { flex: 1; } .ig-issue strong { display: block; font-size: .78rem; color: var(--c-amber); } .ig-issue span { font-size: .74rem; color: var(--c-ink-2); } .ig-sleutel { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 9px; background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); font-size: .7rem; color: var(--c-ink-2); overflow: hidden; } .ig-sleutel b { color: var(--c-ink-3); } .ig-callstrip { display: flex; gap: 2px; align-items: flex-end; } .ig-callstrip i { width: 14px; height: 22px; border-radius: 3px; font-style: normal; } .ig-callstrip i.is-ok { background: var(--c-groen-t); } .ig-callstrip i.is-fout { background: var(--c-rood); height: 26px; } .ig-foutrij { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 13px; border-radius: 9px; background: var(--c-rood-t); } .ig-foutrij strong { display: block; font-size: .74rem; } .ig-foutrij em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); } .ig-quota { display: flex; flex-direction: column; gap: 5px; } .ig-quota em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); } .ig-quota i { display: block; height: 6px; border-radius: 3px; background: var(--c-creme); overflow: hidden; font-style: normal; } .ig-quota b { display: block; height: 100%; background: var(--c-terra); border-radius: 3px; } .ig-scoperij { display: flex; align-items: flex-start; gap: 12px; } .ig-scoperij strong { display: block; font-size: .74rem; color: var(--c-terra-d); } .ig-scoperij span { font-size: .7rem; color: var(--c-ink-3); } .ig-toggle { width: 40px; height: 22px; flex: none; border-radius: 99px; border: 0; cursor: pointer; background: var(--c-lijn-2); position: relative; transition: background 160ms; } .ig-toggle i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--kaart); transition: left 160ms; font-style: normal; } .ig-toggle.is-aan { background: var(--c-groen); } .ig-toggle.is-aan i { left: 21px; } /* ---- webhooks & breakers ---- */ .ig-eventrij { padding: 11px 13px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; } .ig-eventrij__kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ig-eventrij strong { font-size: .76rem; color: var(--c-terra-d); } .ig-eventrij em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); display: block; margin-top: 5px; } /* WH (02-09) · de rij draagt nu een echt bericht met een reden en twee knoppen. In de smalle rechterkolom van de tweekolom-tab botsten die op elkaar; vandaar: stand en tekst naast elkaar, acties op hun eigen regel. */ .ig-whinrij { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; align-items: start; padding: 9px 12px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 10px; } .ig-whinrij strong { display: block; font-size: .74rem; color: var(--c-terra-d); } .ig-whinrij em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); } .ig-whinrij .st { justify-self: start; margin-top: 2px; } .ig-whinrij .ig-whacties { grid-column: 2; flex-wrap: wrap; } .ig-whlogrij { display: flex; align-items: flex-start; gap: 11px; padding: 11px 13px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; } .ig-whlogrij > div { flex: 1; min-width: 0; } .ig-whlogrij strong { display: block; font-size: .76rem; color: var(--c-terra-d); } .ig-whlogrij em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); } .ig-breaker { padding: 14px 17px; display: flex; align-items: center; gap: 14px; justify-content: space-between; } .ig-breaker.is-open { border-color: var(--c-rood); background: var(--c-rood-t); } .ig-breaker strong { display: block; font-size: .84rem; } .ig-breaker em { font-style: normal; font-size: .7rem; color: var(--c-ink-2); display: block; } .ig-breakeracties { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex: none; } /* ---- datakwaliteit ---- */ .ig-domeinen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .ig-domein { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; } .ig-domein__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .ig-domein__kop strong { display: block; font-size: .9rem; } .ig-domein__kop em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); } .ig-domein__kop b { font: 800 1.4rem var(--font-ui); } .ig-dim { display: grid; grid-template-columns: 70px 44px minmax(0, 1fr); gap: 8px; align-items: center; font: 600 .68rem var(--font-ui); color: var(--c-ink-2); } .ig-dim em { font-style: normal; text-align: right; } .ig-dim i { display: block; height: 6px; border-radius: 99px; background: var(--c-creme); overflow: hidden; font-style: normal; } .ig-dim b { display: block; height: 100%; border-radius: 99px; } .ig-dim b.is-groen { background: var(--c-groen); } .ig-dim b.is-amber { background: var(--c-oker); } .ig-steward { font: 500 .64rem var(--font-ui); color: var(--c-ink-3); border-top: var(--lijndikte) solid var(--c-lijn); padding-top: 8px; } .ig-issuerij { padding: 13px 15px; display: flex; align-items: flex-start; gap: 14px; justify-content: space-between; border-left: 4px solid var(--c-lijn-2); } .ig-issuerij.is-kritiek { border-left-color: var(--c-rood); } .ig-issuerij.is-hoog { border-left-color: var(--c-oker); } .ig-issuerij.is-middel { border-left-color: var(--c-terra); } .ig-issuerij > div { flex: 1; min-width: 0; } .ig-issuerij__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .ig-issuerij__meta em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); } .ig-issuerij strong { display: block; font-size: .8rem; } .ig-issuerij > div > span { font-size: .72rem; color: var(--c-ink-2); } .ig-issuerij__st { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; } .ig-issuerij__st em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); } .ig-dupe { padding: 15px 18px; display: flex; flex-direction: column; gap: 12px; } .ig-dupe__kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ig-dupe__kop strong { font-size: 1rem; } .ig-dupe__paar { display: grid; grid-template-columns: 1fr 32px 1fr; gap: 10px; align-items: center; } .ig-dupe__paar > b { text-align: center; color: var(--c-ink-3); } .ig-kand { background: var(--c-creme); border-radius: 11px; padding: 12px 14px; } .ig-kand strong { display: block; font-size: .8rem; } .ig-kand em { font-style: normal; font-size: .66rem; color: var(--c-terra-d); display: block; } .ig-kand span { font-size: .64rem; color: var(--c-ink-3); } .ig-dupenote { padding: 10px 13px; border-radius: 10px; font: 600 .72rem var(--font-ui); background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-oker); color: var(--c-amber); } .ig-poortrij { display: grid; grid-template-columns: 170px 110px 200px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 16px; font-size: .76rem; } .ig-poortrij.is-blok { border-color: var(--c-rood); background: var(--c-rood-t); } .ig-poortrij strong { display: block; font-size: .78rem; } .ig-poortrij em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); } .ig-poortcijfers { display: flex; gap: 10px; flex-wrap: wrap; font-weight: 700; font-size: .72rem; } .ig-poortreden { font-size: .7rem; color: var(--c-ink-2); } .ig-syncrij { padding: 13px 16px; display: flex; align-items: center; gap: 14px; justify-content: space-between; } .ig-syncrij > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; } .ig-syncrij strong { font-size: .8rem; } .ig-syncrij span:not(.chip) { font-size: .72rem; color: var(--c-ink-2); } /* ---- responsief ---- */ @media (max-width: 1080px) { .ig-tweekolom { grid-template-columns: 1fr; } .ig-domeinen { grid-template-columns: 1fr; } .ig-poortrij { grid-template-columns: 1fr; gap: 5px; } } /* Exact Online-connector (besluit 15-07) */ .ig-exrij { display: grid; grid-template-columns: 1.6fr .9fr .9fr .9fr .8fr auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--c-lijn); font-size: 12.5px; } .ig-exrij:last-child { border-bottom: 0; } .ig-exrij--kop { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-2); } .ig-maprij { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 0; font-size: 12.5px; } .ig-mapinput { width: 72px; border: 1px solid var(--c-lijn); border-radius: 8px; padding: 4px 8px; font-size: 12px; text-align: right; background: var(--c-paneel); color: var(--c-ink); } .ig-exgezond { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; } .ig-exgezond div { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: var(--c-ink-2); } .ig-exgezond strong { font-size: 15px; color: var(--c-ink); } /* F4-lat: DQ-norm regelset-knop in de tabbalk */ .ig-dqregels { margin-left: auto; } /* F4b · DQ-trend per domein */ .ig-trend { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; } .ig-spark { width: 100%; height: 36px; } .ig-spark polyline { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .ig-spark.is-groen polyline { stroke: var(--c-groen-d); } .ig-spark.is-amber polyline { stroke: var(--c-amber); } .ig-trend__meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .ig-knik { font-size: 10.5px; color: var(--c-terra); font-style: normal; font-weight: 700; } /* F5-lat: quota bewerken */ .ig-quotaform { display: flex; gap: 8px; align-items: end; margin-top: 8px; } .ig-quotaveld { display: flex; flex-direction: column; gap: 4px; } .ig-quotaveld input { border: 1px solid var(--c-lijn); border-radius: 10px; padding: 6px 10px; font: inherit; width: 110px; background: var(--c-paneel); color: var(--c-ink); } /* F5 a/c · playground + verbruik */ .ig-pgbalk { display: flex; gap: 10px; align-items: end; margin: 8px 0; flex-wrap: wrap; } .ig-pgbalk select { border: 1px solid var(--c-lijn); border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 12px; background: var(--c-paneel); color: var(--c-ink); max-width: 380px; } .ig-pgresp { border: 1px solid var(--c-lijn); border-radius: 12px; overflow: hidden; margin-top: 6px; } .ig-pgresp.is-ok { border-color: var(--c-groen-d); } .ig-pgresp.is-fout { border-color: var(--c-rood); } .ig-pgcode { display: block; padding: 6px 12px; font-size: 11px; font-weight: 800; border-bottom: 1px solid var(--c-lijn); } .ig-pgresp.is-ok .ig-pgcode { color: var(--c-groen-d); background: color-mix(in srgb, var(--c-groen) 10%, transparent); } .ig-pgresp.is-fout .ig-pgcode { color: var(--c-rood); background: color-mix(in srgb, var(--c-rood) 7%, transparent); } .ig-pgresp pre, .ig-pgpre { margin: 0; padding: 10px 12px; font-size: 11px; line-height: 1.5; overflow: auto; max-height: 220px; white-space: pre-wrap; } .ig-pgpre { border: 1px solid var(--c-lijn); border-radius: 10px; background: var(--c-creme); margin: 6px 0 10px; } .ig-uurstrip { display: flex; gap: 2px; align-items: flex-end; height: 56px; margin: 8px 0 4px; } .ig-uurstrip i { flex: 1; background: var(--c-groen); border-radius: 3px 3px 0 0; min-height: 3px; } .ig-uurstrip i.is-piek { background: var(--c-terra); } .ig-whacties { display: flex; gap: 6px; align-items: center; } /* ---- KVK Handelsregister — sleutelbeheer (22-07) ---- */ .ig-kvk { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; margin-bottom: 16px; } .ig-kvk__kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; } .ig-kvk__kop > div { display: flex; flex-direction: column; gap: 3px; } .ig-kvk__sub { font: 500 .7rem var(--font-ui); color: var(--c-ink-2); max-width: 56ch; } .ig-kvk__rij { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .ig-kvk__rij input { flex: 1; min-width: 260px; padding: 9px 14px; border-radius: 10px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--kaart); font: 500 .74rem var(--font-ui); color: var(--c-ink); } .ig-kvk__noot { font: 500 .64rem var(--font-ui); color: var(--c-ink-3); } /* BEHEER-RONDE2 (06-10-2026) · de standen van een koppeling: rood = de controle faalde, stil = niet gecontroleerd of geen sleutel */ .ig .chip--rood { color: var(--stop-d, var(--stop)); background: var(--stop-t); } .ig .chip--stil { color: var(--ink3); background: var(--grijs); } .ig .ig-dot.is-rood, .ig .ig-detlogo.is-rood, .ig .ig-conn__kop i.is-rood { background: var(--stop-t); color: var(--stop-d, var(--stop)); } .ig .ig-dot.is-stil, .ig .ig-detlogo.is-stil, .ig .ig-conn__kop i.is-stil { background: var(--grijs); color: var(--ink3); } /* DATAKWALITEIT (06-10-2026) · teller/noemer onder elke dimensie; de regelset-knop als link */ .ig .ig-dimnoot { display: block; font-size: .64rem; color: var(--ink3); margin: -2px 0 8px; line-height: 1.4; } .ig a.ig-knop { text-decoration: none; display: inline-flex; align-items: center; } /* ── werkstromen.css ── */ /* ===================================================================== werkstromen.css — module 6.6 · Werkstromen & goedkeuringen + Privacy/AVG (workflow · privacy). Alles op tokens; diepte alleen via de vaste tokens. ===================================================================== */ .wf { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; } .wf .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-3); display: block; margin-bottom: 6px; } .wf-kop { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 18px; } .wf-kop h1 { font-size: 26px; font-weight: 800; color: var(--c-ink); margin: 0 0 6px; } .wf-kop p { max-width: 760px; font-size: 13.5px; line-height: 1.55; color: var(--c-ink-2); margin: 0; } .wf .mono { font-family: var(--font-mono); } .wf-rek { flex: 1; } /* tabs */ .wf-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 16px; } .wf-tab { font: 600 13px var(--font-ui); color: var(--c-ink-2); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-klein); padding: 8px 16px; cursor: pointer; transition: background .16s, color .16s, border-color .16s; } .wf-tab:hover { border-color: var(--c-lijn-2); color: var(--c-ink); } .wf-tab.is-actief { background: var(--c-groen-d); border-color: var(--c-groen-d); color: var(--c-creme); } /* kaarten & lagen */ .wf .kaart { background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--schaduw-tegel); margin-bottom: 12px; } .wf .kaart--strak { padding: 6px 0; } .wf-blok { display: flex; flex-direction: column; gap: 10px; } .wf-titel { font-size: 15px; font-weight: 800; color: var(--c-ink); display: block; } .wf-hint { font-size: 12.5px; color: var(--c-ink-3); line-height: 1.5; display: block; margin-top: 3px; max-width: 640px; } .wf-note { font-size: 12px; color: var(--c-ink-3); font-style: normal; } .wf-balk { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; } .wf-voetnoot { font-size: 12.5px; color: var(--c-ink-3); line-height: 1.5; padding: 10px 2px 0; border-top: var(--lijndikte) solid var(--c-lijn); margin-top: 4px; } /* grid-layouts */ .wf-grid { display: grid; grid-template-columns: 340px 1fr; gap: 14px; align-items: start; } .wf-tweekolom { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; } .wf-zij { display: flex; flex-direction: column; gap: 0; } .wf-hoofd { display: flex; flex-direction: column; gap: 0; } /* chips-lijstjes / statusketen */ .wf-chips { display: flex; flex-wrap: wrap; gap: 7px; } .wf-chip { font: 600 12.5px var(--font-ui); color: var(--c-ink-2); background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-klein); padding: 6px 13px; cursor: pointer; transition: border-color .16s, background .16s, color .16s; } .wf-chip:hover { border-color: var(--c-lijn-2); } .wf-chip.is-actief { background: var(--c-groen-t); border-color: var(--c-groen); color: var(--c-groen-d); } .wf-status { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--c-ink); padding: 5px 0; } .wf-status .chip { margin-left: auto; } .wf-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-lijn-2); flex: none; } .wf-dot.is-sage { background: var(--c-sage); } .wf-dot.is-groen { background: var(--c-groen); } .wf-dot.is-rood { background: var(--c-rood); } /* simulator */ .wf-simulator { background: var(--grijs); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; } .wf-guardrij { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--c-ink); } .wf-toggle { width: 38px; height: 22px; flex: none; border-radius: var(--radius-pill); border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-paneel-2); cursor: pointer; position: relative; transition: background .16s, border-color .16s; } .wf-toggle i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn-2); transition: left .16s; } .wf-toggle.is-aan { background: var(--c-groen); border-color: var(--c-groen-d); } .wf-toggle.is-aan i { left: 18px; border-color: var(--c-groen-d); } /* bewaakte overgangen */ .wf-trans { display: flex; flex-direction: column; gap: 8px; } .wf-trans.is-blok { border-color: var(--c-rood); } .wf-trans__kop { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--c-ink); } .wf-trans__kop b { color: var(--c-ink-3); font-weight: 600; } .wf-trans__kop .chip { margin-left: auto; } .wf-trans__naam { font-size: 12.5px; color: var(--c-ink-3); } .wf-guard { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; border-radius: var(--radius-pill); padding: 4px 12px 4px 8px; border: var(--lijndikte) solid var(--c-lijn); width: fit-content; } .wf-guard i { font-style: normal; font-weight: 800; } .wf-guard.is-ok { color: var(--c-groen-d); background: var(--c-groen-t); border-color: var(--c-groen); } .wf-guard.is-faal { color: var(--c-rood); background: var(--c-rood-t); border-color: var(--c-rood); } .wf-resultaat { display: flex; gap: 10px; align-items: flex-start; border-radius: var(--radius); padding: 10px 13px; font-size: 12.5px; line-height: 1.45; } .wf-resultaat i { font-style: normal; font-weight: 800; font-size: 14px; } .wf-resultaat strong { display: block; font-size: 13px; } .wf-resultaat.is-ok { background: var(--c-groen-t); color: var(--c-groen-d); } .wf-resultaat.is-blok { background: var(--c-rood-t); color: var(--c-rood); } /* knoppen */ .wf-knop { font: 700 13px var(--font-ui); color: var(--c-ink); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 9px 16px; cursor: pointer; box-shadow: var(--schaduw-knop); transition: border-color .16s, background .16s; width: fit-content; } .wf-knop:hover { border-color: var(--c-ink-3); } .wf-knop--klein { padding: 6px 13px; font-size: 12.5px; } .wf-knop--primair { background: var(--gradient-primair); border-color: var(--c-groen-d); color: var(--c-creme); } .wf-knop--primair:hover { background: var(--gradient-primair-hover); } .wf-knop--rood { border-color: var(--c-rood); color: var(--c-rood); } .wf-knop.is-dicht { opacity: .5; cursor: not-allowed; } /* bouwer */ .wf-stap { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-3); margin-top: 4px; } .wf-preview { background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 12px 14px; font-size: 13px; color: var(--c-ink); line-height: 1.5; } .wf-regelrij { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); } .wf-regelrij:last-child { border-bottom: 0; } .wf-regelrij strong { display: block; font-size: 13.5px; color: var(--c-ink); } .wf-regelrij em { font-size: 11.5px; color: var(--c-ink-3); font-style: normal; } /* goedkeuringen */ .wf-approval { display: flex; flex-direction: column; gap: 7px; } .wf-approval.is-sod { border-color: var(--c-rood); } .wf-approval__kop { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--c-ink); flex-wrap: wrap; } .wf-approval__wie { font-size: 13px; color: var(--c-ink-2); } .wf-sodregel { font-size: 12.5px; color: var(--c-rood); background: var(--c-rood-t); border-radius: var(--radius); padding: 8px 12px; line-height: 1.45; } .wf-klaar { font-size: 12.5px; color: var(--c-groen-d); font-weight: 600; } /* taken & DSAR & datalekken */ .wf-taak { display: flex; align-items: center; gap: 16px; } .wf-taak.is-esc { border-color: var(--c-rood); } .wf-taak__body { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--c-ink-2); } .wf-taak__kop { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 14px; color: var(--c-ink); } .wf-slabalk { display: block; height: 6px; border-radius: var(--radius-pill); background: var(--c-paneel-2); overflow: hidden; max-width: 420px; } .wf-slabalk b { display: block; height: 100%; border-radius: var(--radius-pill); } .wf-slabalk .is-groen { background: var(--c-groen); } .wf-slabalk .is-amber { background: var(--c-oker); } .wf-slabalk .is-rood { background: var(--c-rood); } .wf-escnote { font-size: 12.5px; color: var(--c-rood); font-style: normal; font-weight: 600; } /* transitielog */ .wf-logrij { display: grid; grid-template-columns: 110px 150px 200px 90px 1fr; gap: 12px; align-items: center; padding: 11px 18px; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: 12.5px; color: var(--c-ink-2); } .wf-logrij:last-child { border-bottom: 0; } .wf-logrij.is-blok { background: var(--c-rood-t); } .wf-logrij strong { color: var(--c-ink); } .wf-logovergang b { color: var(--c-ink-3); font-weight: 600; } .wf-logreden { line-height: 1.4; } /* privacy: personen + consent */ .wf-persrij { display: flex; flex-direction: column; gap: 3px; text-align: left; background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 10px 13px; cursor: pointer; font-family: var(--font-ui); transition: border-color .16s, background .16s; } .wf-persrij:hover { border-color: var(--c-lijn-2); } .wf-persrij.is-actief { background: var(--c-groen-t); border-color: var(--c-groen); } .wf-persrij span { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--c-ink); } .wf-persrij em { font-size: 11.5px; color: var(--c-ink-3); font-style: normal; } .wf-consrij { display: flex; align-items: center; gap: 14px; } .wf-consrij > div { flex: 1; display: flex; flex-direction: column; gap: 4px; } .wf-consrij__kop { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--c-ink); } .wf-consrij em { font-size: 11.5px; color: var(--c-ink-3); font-style: normal; } /* privacy: register / verwerkers / suppressie */ .pv-regrij { display: grid; grid-template-columns: 1.3fr .8fr 1.2fr 1fr .9fr; gap: 12px; align-items: center; padding: 11px 18px; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: 12.5px; color: var(--c-ink-2); } .pv-regrij:last-child { border-bottom: 0; } .pv-regrij--kop { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3); } .pv-regrij strong { display: block; color: var(--c-ink); font-size: 13px; } .pv-regrij em { font-size: 11.5px; color: var(--c-ink-3); font-style: normal; } .pv-vwrij { display: grid; grid-template-columns: 1fr 1.2fr .9fr 1fr .8fr; gap: 12px; align-items: center; padding: 11px 18px; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: 12.5px; color: var(--c-ink-2); } .pv-vwrij:last-child { border-bottom: 0; } .pv-vwrij--kop { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3); } .pv-vwrij.is-blok { background: var(--c-rood-t); } .pv-vwrij strong { color: var(--c-ink); } .pv-suprij { display: grid; grid-template-columns: 1.4fr .6fr 1fr .7fr; gap: 12px; align-items: center; padding: 10px 18px; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: 12.5px; color: var(--c-ink-2); } .pv-suprij:last-child { border-bottom: 0; } .pv-suprij strong { color: var(--c-ink); } .pv-suprij em { color: var(--c-ink-3); font-style: normal; } @media (max-width: 1080px) { .wf-grid, .wf-tweekolom { grid-template-columns: 1fr; } } /* F6 a/b/c (16-07-2026) */ .wf-regelacties { display: flex; gap: 6px; align-items: center; } .wf-testrij { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--c-lijn); font-size: 13px; } .wf-testrij i { font-style: normal; font-weight: 800; color: var(--c-groen-d); } .wf-testrij em { display: block; font-size: 11.5px; color: var(--c-ink-2); font-style: normal; } .wf-testrij .wf-note { display: block; font-size: 11px; color: var(--c-terra); } .wf-persel select { border: 1px solid var(--c-lijn); border-radius: 10px; padding: 6px 10px; font: inherit; font-size: 12px; background: var(--c-paneel); color: var(--c-ink); } /* Mock→echt · live fiat-werklijst uit /api/goedkeuringen */ .wf-livegk { display: flex; flex-direction: column; gap: 0; margin-bottom: 16px; } .wf-gkrij { display: grid; grid-template-columns: 90px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: var(--lijndikte) solid var(--c-lijn); font-size: 12.5px; } .wf-gkrij:first-of-type { border-top: 0; } .wf-gkrij.is-sod { background: var(--c-rood-t); border-radius: 10px; padding-left: 8px; padding-right: 8px; } .wf-gkrij > em.mono { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; } .wf-gkrij strong { display: block; font-size: 13px; color: var(--c-ink); } .wf-gkrij span { display: block; font-size: 11.5px; color: var(--c-ink-2); } /* ── compliance.css ── */ /* ===================================================================== compliance.css — module 6.7 · Compliance & audit + Kennisbank + CLM (compliance · kennisbank · clmregister · clmsignalen). Alles op tokens; diepte alleen via de vaste tokens. ===================================================================== */ .cpl { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; } .cpl .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-3); display: block; margin-bottom: 6px; } .cpl-kop { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 18px; } .cpl-kop h1 { font-size: 26px; font-weight: 800; color: var(--c-ink); margin: 0 0 6px; } .cpl-kop p { max-width: 760px; font-size: 13.5px; line-height: 1.55; color: var(--c-ink-2); margin: 0; } .cpl .mono { font-family: var(--font-mono); } .cpl-rek { flex: 1; } .cpl .kaart { background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 15px 17px; box-shadow: var(--schaduw-tegel); margin-bottom: 11px; } .cpl .kaart--strak { padding: 6px 0; } .cpl-titel { font-size: 15px; font-weight: 800; color: var(--c-ink); display: block; margin-bottom: 3px; } .cpl-hint { font-size: 12.5px; color: var(--c-ink-3); line-height: 1.5; display: block; margin-bottom: 12px; max-width: 640px; } .cpl-voetnoot { font-size: 12px; color: var(--c-ink-3); line-height: 1.55; display: block; margin-top: 8px; } .cpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } .cpl-smal { max-width: 900px; } /* tabs & chips & knoppen */ .cpl-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 16px; } .cpl-tab { font: 600 13px var(--font-ui); color: var(--c-ink-2); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-klein); padding: 8px 16px; cursor: pointer; transition: background .16s, color .16s, border-color .16s; } .cpl-tab:hover { border-color: var(--c-lijn-2); color: var(--c-ink); } .cpl-tab.is-actief { background: var(--c-groen-d); border-color: var(--c-groen-d); color: var(--c-creme); } .cpl-chips { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 14px; } .cpl-chipknop { font: 600 12px var(--font-ui); color: var(--c-ink-2); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-klein); padding: 5px 13px; cursor: pointer; transition: border-color .16s, background .16s, color .16s; } .cpl-chipknop:hover { border-color: var(--c-lijn-2); } .cpl-chipknop.is-actief { background: var(--donker, var(--c-ink)); border-color: var(--c-ink); color: var(--c-creme); } .cpl-chipknop.is-amber { background: var(--c-amber-t); border-color: var(--c-oker); color: var(--c-ink); } .cpl-teller { margin-left: auto; font-size: 11px; color: var(--c-ink-3); } .cpl-knop { font: 700 13px var(--font-ui); color: var(--c-ink); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 9px 16px; cursor: pointer; box-shadow: var(--schaduw-knop); transition: border-color .16s, background .16s; width: fit-content; } .cpl-knop:hover { border-color: var(--c-ink-3); } .cpl-knop--klein { padding: 6px 13px; font-size: 12.5px; } .cpl-knop--primair { background: var(--gradient-primair); border-color: var(--c-groen-d); color: var(--c-creme); } .cpl-knop--primair:hover { background: var(--gradient-primair-hover); } .cpl-knop--donker { background: var(--donker, var(--c-ink)); border-color: var(--c-ink); color: var(--c-creme); } .cpl-knop--rood { border-color: var(--c-rood); color: var(--c-rood); } .cpl-knop--terra { background: var(--c-terra); border-color: var(--c-terra-d); color: var(--c-creme); } .cpl-knop--sage { background: var(--c-sage-t); border-color: var(--c-sage); color: var(--c-groen-d); } .cpl-balk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 13px; } .cpl-zoek { flex: 1; min-width: 220px; max-width: 420px; padding: 9px 14px; border-radius: var(--radius); border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-paneel); font: 500 13px var(--font-ui); color: var(--c-ink); } .cpl-melding { display: block; padding: 11px 15px; border-radius: var(--radius); font-size: 12.5px; line-height: 1.5; margin-bottom: 13px; } .cpl-melding.is-ok { background: var(--c-groen-t); color: var(--c-groen-d); } .cpl-melding.is-blok { background: var(--c-rood-t); color: var(--c-rood); } .cpl-melding.is-signaal { background: var(--c-amber-t); color: var(--c-ink); border: var(--lijndikte) solid var(--c-oker); } .cpl-melding a { color: inherit; font-weight: 700; } .cpl-balkje { width: 4px; border-radius: var(--radius-pill); flex: none; align-self: stretch; background: var(--c-lijn-2); } .cpl-balkje.is-rood { background: var(--c-rood); } .cpl-balkje.is-terra { background: var(--c-terra); } .cpl-balkje.is-amber { background: var(--c-oker); } .cpl-balkje.is-stil { background: var(--c-lijn-2); } .cpl-balkje.is-ink { background: var(--c-ink-2); } .cpl-balkje.is-oker { background: var(--c-oker); } .cpl-balkje.is-groen { background: var(--c-groen); } /* compliance: signalen / SoD / audit */ .cpl-signaal { display: flex; gap: 13px; align-items: stretch; } .cpl-signaal > div { flex: 1; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--c-ink-2); } .cpl-signaal strong { font-size: 13.5px; color: var(--c-ink); } .cpl-signaal__kop { display: flex; align-items: center; gap: 8px; } .cpl-signaal__kop em { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; } .cpl-st { font-size: 10.5px; color: var(--c-ink-3); align-self: flex-start; } .cpl-sod { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--c-ink-2); } .cpl-sod__kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .cpl-sod__kop strong { font-size: 13px; color: var(--c-ink); } .cpl-sod__regel { font-weight: 600; color: var(--c-ink-2); } .cpl-sod em { font-size: 11.5px; color: var(--c-ink-3); font-style: normal; } .cpl-append { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: var(--radius); background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); font: 700 12px var(--font-ui); color: var(--c-groen-d); } .cpl-append em { font-weight: 500; font-size: 10.5px; font-style: normal; } .cpl-auditrij { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--c-ink-2); } .cpl-auditrij__kop { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .cpl-auditrij__kop strong { font-size: 13px; color: var(--c-ink); } .cpl-auditrij__kop em { font-size: 11px; color: var(--c-ink-3); font-style: normal; } .cpl-bg { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 4px; color: var(--c-rood); background: var(--c-rood-t); } .cpl-auditrij__wie { font-size: 11.5px; } .cpl-auditrij__wie b { color: var(--c-ink); } .cpl-auditrij__wie i { font-style: normal; color: var(--c-ink-3); } .cpl-auditrij__wie em { font-size: 10px; color: var(--c-ink-3); font-style: normal; } .cpl-auditrij__delta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .cpl-auditrij__delta b { color: var(--c-groen-d); font-weight: 700; } .cpl-auditrij__delta em { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; } .cpl-oud { font: 600 11px var(--font-ui); padding: 3px 10px; border-radius: 7px; background: var(--c-rood-t); color: var(--c-rood); text-decoration: line-through; } .cpl-nieuw { font: 600 11px var(--font-ui); padding: 3px 10px; border-radius: 7px; background: var(--c-groen-t); color: var(--c-groen-d); } .cpl-wisproef { border: var(--lijndikte) dashed var(--c-rood); border-radius: var(--radius); background: var(--c-rood-t); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .cpl-wisproef strong { font-size: 13px; color: var(--c-ink); } .cpl-wisproef span { font-size: 12px; line-height: 1.55; color: var(--c-ink-2); } .cpl-geweigerd { font: 700 12px var(--font-ui); color: var(--c-rood); font-style: normal; } .cpl-bgrij { display: flex; gap: 13px; align-items: flex-start; } .cpl-bgrij > i { width: 34px; height: 34px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; font: 700 15px var(--font-ui); color: var(--c-rood); background: var(--c-rood-t); font-style: normal; } .cpl-bgrij > div { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--c-ink-2); } .cpl-bgrij__kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cpl-bgrij__kop strong { font-size: 13px; color: var(--c-ink); } .cpl-bgrij__kop em { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; } .cpl-bgrij > div > em { font-size: 11px; color: var(--c-ink-3); font-style: normal; line-height: 1.5; } .cpl-lek { border-color: var(--c-rood); display: flex; flex-direction: column; gap: 10px; font-size: 12px; line-height: 1.55; color: var(--c-ink-2); } .cpl-lek__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .cpl-lek__kop strong { font-size: 13px; color: var(--c-ink); } .cpl-lek a { color: var(--c-groen-d); font-weight: 700; } .cpl-lekstappen { display: flex; gap: 6px; } .cpl-lekstappen span { flex: 1; text-align: center; padding: 8px 6px; border-radius: 8px; font: 700 10px var(--font-ui); background: var(--c-paneel-2); color: var(--c-ink-3); } .cpl-lekstappen .is-ok { background: var(--c-groen-t); color: var(--c-groen-d); } .cpl-lekstappen .is-bezig { background: var(--c-amber-t); color: var(--c-ink); } .cpl-memo { margin-top: 3px; padding: 14px 16px; border-radius: var(--radius); background: var(--c-memo); border: var(--lijndikte) solid var(--c-lijn); display: flex; flex-direction: column; gap: 4px; } .cpl-memo strong { font-size: 12.5px; color: var(--c-ink); } .cpl-memo span { font-size: 11.5px; line-height: 1.55; color: var(--c-ink-2); } .cpl-dekking { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .cpl-dekking.is-let { border-color: var(--c-oker); } .cpl-dekking div { display: flex; flex-direction: column; gap: 2px; } .cpl-dekking strong { font-size: 12.5px; color: var(--c-ink); } .cpl-dekking span { font-size: 10.5px; color: var(--c-ink-3); } .cpl-dekking b { font-size: 18px; font-weight: 800; } .cpl-dekking b.is-groen { color: var(--c-groen-d); } .cpl-dekking b.is-amber { color: var(--c-oker); } /* kennisbank */ .kb-grid { display: grid; grid-template-columns: 340px 1fr; gap: 18px; align-items: start; } .kb-lijst { display: flex; flex-direction: column; gap: 9px; max-height: 640px; overflow-y: auto; } .kb-rij { display: flex; flex-direction: column; gap: 5px; text-align: left; background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 11px 13px; cursor: pointer; font-family: var(--font-ui); transition: border-color .16s, background .16s; } .kb-rij:hover { border-color: var(--c-lijn-2); } .kb-rij.is-actief { background: var(--c-paneel); border-color: var(--c-groen); box-shadow: var(--schaduw-tegel); } .kb-rij strong { font-size: 13px; line-height: 1.3; color: var(--c-ink); } .kb-rij__chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .kb-rij em { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; } .kb-rij__cat { letter-spacing: .08em; text-transform: uppercase; font-size: 9px; color: var(--c-groen-d); } .kb-artikel { padding: 22px 24px; } .kb-artikel__meta { font-size: 10px; letter-spacing: .08em; color: var(--c-ink-3); display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .kb-artikel h2 { font-size: 21px; font-weight: 800; line-height: 1.3; color: var(--c-ink); margin: 0 0 14px; } .kb-artikel__balk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 13px 0; border-top: var(--lijndikte) solid var(--c-lijn); border-bottom: var(--lijndikte) solid var(--c-lijn); margin-bottom: 16px; } .kb-artikel__eig { font-size: 11px; color: var(--c-ink-3); text-align: right; font-style: normal; line-height: 1.5; } .kb-artikel__body { font-size: 14px; line-height: 1.7; color: var(--c-ink-2); } .kb-pub { display: inline-flex; align-items: center; gap: 9px; background: none; border: none; cursor: pointer; font: 700 11.5px var(--font-ui); color: var(--c-ink); padding: 4px; border-radius: var(--radius-pill); } .kb-pub i { width: 38px; height: 22px; border-radius: var(--radius-pill); border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-paneel-2); position: relative; transition: background .16s; } .kb-pub i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn-2); transition: left .16s; } .kb-pub.is-aan i { background: var(--c-groen); border-color: var(--c-groen-d); } .kb-pub.is-aan i::after { left: 18px; } .kb-verlopen { display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-radius: var(--radius); background: var(--c-terra-t); border: var(--lijndikte) solid var(--c-terra); margin-bottom: 16px; font-size: 12px; line-height: 1.45; color: var(--c-terra-d); } .kb-verlopen i { font-style: normal; font-size: 15px; } .kb-verlopen span { flex: 1; font-weight: 600; } .kb-ctx { margin-top: 18px; padding-top: 14px; border-top: var(--lijndikte) solid var(--c-lijn); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .kb-ctx .kicker { width: 100%; margin-bottom: 4px; } .kb-ctx__chip { font: 600 10.5px var(--font-ui); padding: 4px 10px; border-radius: 7px; background: var(--c-groen-t); color: var(--c-groen-d); } .kb-padgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; } .kb-pad { display: flex; flex-direction: column; gap: 9px; padding: 18px 19px; } .kb-pad__kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .kb-pad__kop em { font-size: 9px; letter-spacing: .06em; color: var(--c-ink-3); font-style: normal; } .kb-pad > strong { font-size: 15px; font-weight: 800; color: var(--c-ink); } .kb-pad > em { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; } .kb-mod { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--c-ink-2); } .kb-mod i { width: 20px; height: 20px; border-radius: 6px; flex: none; display: flex; align-items: center; justify-content: center; font: 700 11px var(--font-ui); color: var(--c-ink-3); background: var(--c-paneel-2); font-style: normal; } .kb-mod i.is-klaar { color: var(--c-creme); background: var(--c-groen); } .kb-mod span { flex: 1; font-weight: 600; } .kb-balk { display: block; height: 7px; border-radius: var(--radius-pill); background: var(--c-paneel-2); overflow: hidden; } .kb-balk b { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--c-groen); transition: width .3s; } .kb-gap { display: flex; align-items: center; gap: 12px; font-size: 12px; } .kb-gap.is-gap { border-color: var(--c-oker); } .kb-gap strong { flex: 1; font-size: 12.5px; color: var(--c-ink); } .kb-gap em { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; } .kb-top { margin-bottom: 12px; } .kb-top > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; } .kb-top span { font: 600 12px var(--font-ui); color: var(--c-ink); } .kb-top em { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; } .kb-client__kop { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .kb-client__kop i { width: 30px; height: 30px; border-radius: 9px; background: var(--c-groen); display: flex; align-items: center; justify-content: center; font: 800 13px var(--font-ui); color: var(--c-creme); font-style: normal; } .kb-client__kop strong { font-size: 17px; font-weight: 800; color: var(--c-ink); } /* CLM */ .clm-rij { display: grid; grid-template-columns: 1.7fr 1fr .8fr .9fr 1.1fr; gap: 12px; align-items: center; padding: 13px 18px; border-bottom: var(--lijndikte) solid var(--c-lijn); font: 500 12.5px var(--font-ui); color: var(--c-ink-2); text-align: left; background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; cursor: pointer; } div.clm-rij--kop { cursor: default; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); } .clm-rij:last-child { border-bottom: 0; } .clm-rij:hover:not(.clm-rij--kop) { background: var(--c-creme); } .clm-rij.is-rood { background: var(--c-rood-t); } .clm-rij.is-amber { background: var(--c-amber-t); } .clm-naam { display: flex; align-items: center; gap: 9px; } .clm-naam i { font-style: normal; font-size: 14px; flex: none; } .clm-naam i.is-groen { color: var(--c-groen-d); } .clm-naam i.is-terra { color: var(--c-terra); } .clm-naam i.is-ink { color: var(--c-ink-2); } .clm-naam i.is-oker { color: var(--c-oker); } .clm-naam strong { font-size: 13.5px; color: var(--c-ink); } .clm-naam em.mono { display: block; font-size: 10.5px; color: var(--c-ink-3); font-style: normal; } .clm-waarde { color: var(--c-oker); font-weight: 600; } .clm-rij b.mono { display: block; font-size: 12px; color: var(--c-ink); margin-bottom: 3px; } .clm-detgrid { display: grid; grid-template-columns: 1.5fr .9fr; gap: 18px; align-items: start; margin-top: 14px; } .clm-det { padding: 22px 24px; } .clm-det__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; } .clm-det__meta i { font-style: normal; font-size: 17px; } .clm-det__meta i.is-groen { color: var(--c-groen-d); } .clm-det__meta i.is-terra { color: var(--c-terra); } .clm-det__meta i.is-ink { color: var(--c-ink-2); } .clm-det__meta i.is-oker { color: var(--c-oker); } .clm-det__meta em { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-3); font-style: normal; } .clm-det h1 { font-size: 23px; font-weight: 800; line-height: 1.15; color: var(--c-ink); margin: 0 0 4px; } .clm-det__partij { font-size: 13.5px; color: var(--c-ink-2); } .clm-feiten { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .clm-feiten strong { font-size: 13px; color: var(--c-ink); } .clm-claus { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 10px; background: var(--c-paneel); margin-bottom: 8px; font-size: 12.5px; } .clm-claus i { width: 22px; height: 22px; border-radius: 6px; flex: none; display: flex; align-items: center; justify-content: center; font: 700 12px var(--font-ui); color: var(--c-creme); background: var(--c-groen); font-style: normal; } .clm-claus span { flex: 1; font-weight: 600; color: var(--c-ink); } .clm-claus em { font: 700 11px var(--font-ui); color: var(--c-groen-d); font-style: normal; } .clm-claus.is-mist { border-color: var(--c-rood); background: var(--c-rood-t); } .clm-claus.is-mist i { background: var(--c-rood); } .clm-claus.is-mist em { color: var(--c-rood); } .clm-verpl { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 10px; margin-bottom: 8px; } .clm-verpl i { width: 30px; height: 30px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; font: 600 14px var(--font-ui); color: var(--c-ink-2); background: var(--c-paneel-2); font-style: normal; } .clm-verpl div { flex: 1; } .clm-verpl strong { display: block; font-size: 12.5px; color: var(--c-ink); } .clm-verpl em { font-size: 11px; color: var(--c-ink-3); font-style: normal; } .clm-versie { display: flex; gap: 11px; align-items: flex-start; border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; padding: 12px 15px; margin-bottom: 8px; } .clm-versie.is-cur { border-color: var(--c-groen); background: var(--c-groen-t); } .clm-versie b { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 4px; background: var(--c-lijn-2); } .clm-versie.is-cur b { background: var(--c-groen); } .clm-versie div { flex: 1; } .clm-versie__kop { display: flex; align-items: center; justify-content: space-between; } .clm-versie strong { font-size: 13px; color: var(--c-ink); } .clm-versie em { font-size: 11px; color: var(--c-ink-3); font-style: normal; } .clm-versie span { display: block; font-size: 12px; color: var(--c-ink-2); margin-top: 3px; } .clm-bijlage { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 10px; margin-bottom: 8px; font-size: 12.5px; } .clm-bijlage i { font-style: normal; color: var(--c-ink-3); } .clm-bijlage span { flex: 1; font-weight: 600; color: var(--c-ink); } .clm-bijlage em { font-size: 11px; color: var(--c-ink-3); font-style: normal; } .clm-zij { display: flex; flex-direction: column; gap: 0; } .clm-hero { border-radius: var(--radius); padding: 20px 22px; background: var(--donker, var(--c-ink)); color: var(--c-creme); margin-bottom: 12px; box-shadow: var(--schaduw-tegel); } .clm-hero .kicker { color: var(--c-creme); opacity: .55; } .clm-hero strong { display: block; font-size: 25px; font-weight: 800; letter-spacing: -.01em; } .clm-hero strong.is-rood { color: var(--c-blush); } .clm-hero strong.is-amber { color: var(--c-oker); } .clm-hero span { display: block; font-size: 12.5px; opacity: .7; margin-top: 3px; } .clm-hero em { display: block; font-size: 11.5px; font-style: normal; opacity: .75; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--c-ink-2); } .clm-blok { display: flex; flex-direction: column; gap: 9px; } .clm-blok__kop { display: flex; align-items: center; justify-content: space-between; } .clm-blok strong { font-size: 12.5px; color: var(--c-ink); } .clm-blok .cpl-knop { width: 100%; text-align: center; } .clm-tekenaar { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 10px; background: var(--c-creme); } .clm-tekenaar > div { flex: 1; display: flex; flex-direction: column; gap: 1px; font-size: 11px; color: var(--c-ink-3); } .clm-tekenaar__kop { display: flex; align-items: center; gap: 7px; } .clm-tekenaar__kop strong { font-size: 12.5px; color: var(--c-ink); } .clm-tekenaar em { font-style: normal; } .clm-tekenaar > div > em.is-ok { color: var(--c-groen-d); font-weight: 700; } .clm-bewijs { display: block; padding: 10px 12px; border-radius: 9px; background: var(--c-amber-t); font-size: 11px; line-height: 1.5; color: var(--c-ink-2); } .clm-bewijs.is-ok { background: var(--c-groen-t); color: var(--c-groen-d); } .clm-signaal { display: flex; align-items: center; gap: 14px; } .clm-signaal__ic { width: 34px; height: 34px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; font: 600 15px var(--font-ui); font-style: normal; background: var(--c-paneel-2); color: var(--c-ink-2); } .clm-signaal__ic.is-rood { color: var(--c-rood); background: var(--c-rood-t); } .clm-signaal__ic.is-amber { color: var(--c-oker); background: var(--c-amber-t); } .clm-signaal__ic.is-ink { color: var(--c-ink); background: var(--c-paneel-2); } .clm-signaal__ic.is-oker { color: var(--c-oker); background: var(--c-amber-t); } .clm-signaal__body { flex: 1; display: flex; flex-direction: column; gap: 2px; background: none; border: none; cursor: pointer; text-align: left; font: 500 12px var(--font-ui); color: var(--c-ink-2); padding: 0; } .clm-signaal__kop { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .clm-signaal__kop strong { font-size: 13.5px; color: var(--c-ink); } .clm-signaal__kop em { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; } .clm-signaal__actie { text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .clm-signaal__actie em { font-size: 11px; color: var(--c-ink-3); font-style: normal; } .clm-signaal__actie em.is-rood { color: var(--c-rood); font-weight: 700; } @media (max-width: 1080px) { .cpl-grid, .kb-grid, .clm-detgrid { grid-template-columns: 1fr; } } /* F7 a/b/c (16-07-2026) */ .kb-nuttig { display: flex; gap: 8px; align-items: center; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--c-lijn); font-size: 12.5px; } .kb-nuttig__stand { font-size: 10.5px; color: var(--c-ink-2); margin-left: auto; } .clm-maillog { padding: 12px 16px; margin-top: 12px; } .clm-maillogrij { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--c-lijn); font-size: 12.5px; } .clm-maillogrij em { display: block; font-size: 11px; color: var(--c-ink-2); font-style: normal; } /* ---------- Redactie & contractbeheer (bewerken/intrekken) ---------- */ .cpl-knop--klein { padding: 5px 10px; font-size: .68rem; } .clm-detacties { display: flex; gap: 6px; margin: 10px 0 2px; } /* ═══ WB3-3 · Kennisbank als Werkbank (besluiten 233, 235–236) ═══════════════ De rijen komen uit app.css (.wbpaneel/.wbrij); hier de balk en de kleine extra's. */ .kb-balk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; } .kb-balk h1 { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; } .kb-balk__rol { margin-left: auto; font-size: .7rem; color: var(--ink3); } .kb-rest { color: var(--ink3); font-size: .78rem; margin: 2px 0 0; } .kb-leeg { padding: 12px 15px; color: var(--ink2); font-size: .84rem; } .cpl .wbpaneel { margin: 12px 0; } .cpl .wbrij, .cpl .bs-drawer .wbrij { grid-template-columns: 5px minmax(0, 1fr) auto auto; align-items: center; padding: 0 15px 0 0; } .cpl .wbrij > * { min-width: 0; } .cpl .wbrij.kb-wrij { cursor: pointer; } .cpl .wbrij.kb-wrij:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; } .cpl .wbrij__knop--p { background: var(--knop); border-color: var(--knop); color: var(--knop-ink); } .cpl .wbrij__geld.is-stil { color: var(--ink3); font-weight: 500; font-size: .76rem; } .kb-staaf { display: grid; grid-template-columns: minmax(0, 1fr) 140px auto; gap: 12px; align-items: center; padding: 8px 15px; border-bottom: var(--lijndikte) solid var(--lijn); font-size: .84rem; cursor: pointer; } .kb-staaf:last-child { border-bottom: 0; } .kb-staaf i { display: block; height: 8px; border-radius: 99px; background: var(--grijs2); overflow: hidden; } .kb-staaf i b { display: block; height: 100%; background: var(--ink); } .kb-staaf .mono { font-size: .74rem; color: var(--ink2); white-space: nowrap; } /* ── portfolio.css ── */ /* ===================================================================== portfolio.css — Portfolio (B2B), zes schermen. Op tokens; diepte alleen via de vaste tokens. Beheerpatroon-look (geen prototype — drietal niet compleet, gemeld in portfolio.js). ===================================================================== */ .pf { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; } .pf .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-3); display: block; margin-bottom: 6px; } .pf-kop { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 18px; } .pf-kop h1 { font-size: 26px; font-weight: 800; color: var(--c-ink); margin: 0 0 6px; } .pf-kop p { max-width: 780px; font-size: 13.5px; line-height: 1.55; color: var(--c-ink-2); margin: 0; } .pf .mono { font-family: var(--font-mono); } .pf .kaart { background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--schaduw-tegel); margin-bottom: 12px; } .pf .kaart--strak { padding: 6px 0; } .pf-blok { display: flex; flex-direction: column; gap: 10px; } .pf-tweekolom { display: grid; grid-template-columns: 380px 1fr; gap: 14px; align-items: start; } .pf-voetnoot { display: block; font-size: 12.5px; color: var(--c-ink-3); line-height: 1.55; margin: 4px 0 10px; } .pf-melding { padding: 11px 15px; border-radius: var(--radius); font-size: 12.5px; line-height: 1.5; } .pf-melding.is-blok { background: var(--c-rood-t); color: var(--c-rood); } .pf-melding.is-ok { background: var(--c-groen-t); color: var(--c-groen-d); } /* knoppen */ .pf-knop { font: 700 13px var(--font-ui); color: var(--c-ink); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 9px 16px; cursor: pointer; box-shadow: var(--schaduw-knop); width: fit-content; } .pf-knop:hover { border-color: var(--c-ink-3); } .pf-knop--klein { padding: 6px 13px; font-size: 12.5px; } .pf-knop--primair { background: var(--gradient-primair); border-color: var(--c-groen-d); color: var(--c-creme); } .pf-knop--primair:hover { background: var(--gradient-primair-hover); } .pf-knop.is-dicht { opacity: .55; cursor: not-allowed; } /* cockpit: portefeuilles + complexen */ .pf-pfkop { display: flex; align-items: center; gap: 14px; width: 100%; background: none; border: none; cursor: pointer; text-align: left; font-family: var(--font-ui); padding: 2px 0; } .pf-pfkop strong { font-size: 15px; font-weight: 800; color: var(--c-ink); } .pf-pfkop em { font-size: 11px; color: var(--c-ink-3); font-style: normal; } .pf-draagvlak { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; min-width: 210px; } .pf-draagvlak i { flex: 1; display: block; height: 7px; border-radius: var(--radius-pill); background: var(--c-groen); max-width: 120px; } .pf-draagvlak.is-onder i { background: var(--c-oker); } .pf-draagvlak b { font-size: 11px; color: var(--c-ink-2); } .pf-draagvlak.is-onder b { color: var(--c-amber); } .pf-cxrij { display: grid; grid-template-columns: 1.6fr .9fr .9fr .5fr .6fr .8fr; gap: 12px; align-items: center; padding: 10px 4px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: 12.5px; color: var(--c-ink-2); } .pf-cxrij--kop { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-3); border-top: 0; } .pf-cxrij strong { display: block; font-size: 13px; color: var(--c-ink); } .pf-cxrij em.mono { font-size: 10px; color: var(--c-ink-3); font-style: normal; } .pf-fnglyph { font-style: normal; color: var(--c-groen-d); margin-right: 4px; } .pf-label { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; border-radius: 6px; background: var(--c-oker); color: var(--c-ink); font: 800 13px var(--font-mono); padding: 0 6px; } .pf-label.is-doel { background: var(--c-groen); color: var(--c-creme); } .pf-conf { display: inline-flex; width: 24px; height: 24px; border-radius: 6px; align-items: center; justify-content: center; font: 800 12px var(--font-mono); } .pf-conf.is-A { background: var(--c-groen-t); color: var(--c-groen-d); } .pf-conf.is-B { background: var(--c-sage-t); color: var(--c-groen-d); } .pf-conf.is-C { background: var(--c-amber-t); color: var(--c-amber); } .pf-conf.is-D { background: var(--c-rood-t); color: var(--c-rood); } /* scenario lab */ .pf-scrij { display: flex; flex-direction: column; gap: 3px; text-align: left; background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 11px 13px; cursor: pointer; font-family: var(--font-ui); } .pf-scrij.is-actief { border-color: var(--c-groen); background: var(--c-groen-t); } .pf-scrij strong { font-size: 13.5px; color: var(--c-ink); } .pf-scrij em { font-size: 11px; color: var(--c-ink-3); font-style: normal; } .pf-scrij .chip { align-self: flex-start; margin-top: 3px; } .pf-parameters { border-top: var(--lijndikte) solid var(--c-lijn); padding-top: 12px; display: flex; flex-direction: column; gap: 9px; } .pf-param { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--c-ink-2); } .pf-param span { width: 74px; flex: none; font-weight: 700; color: var(--c-ink); } .pf-param select { flex: 1; padding: 9px 11px; border-radius: 10px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-creme); font: 600 13px var(--font-ui); color: var(--c-ink); } .pf-cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 6px; } .pf-cijfers > div { background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); border-radius: 12px; padding: 13px 15px; } .pf-cijfers b { display: block; font-size: 19px; font-weight: 800; color: var(--c-ink); margin: 2px 0; } .pf-cijfers em { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; } .pf-sprongrij { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 2px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: 13px; color: var(--c-ink); } .pf-sprongrij em { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; } .pf-labels { display: inline-flex; align-items: center; gap: 8px; } .pf-labels i { font-style: normal; color: var(--c-ink-3); } .pf-actiebalk { margin-top: 6px; } /* expert review */ .pf-valrij { display: flex; align-items: center; gap: 14px; background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 13px 15px; } .pf-valrij.is-klaar { border-color: var(--c-groen); } .pf-valrij > div { flex: 1; } .pf-valrij strong { display: block; font-size: 13px; color: var(--c-ink); } .pf-valrij em { font-size: 11px; color: var(--c-ink-3); font-style: normal; } .pf-expert { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-top: var(--lijndikte) solid var(--c-lijn); } .pf-expert:first-of-type { border-top: 0; } .pf-expert > div { flex: 1; } .pf-expert strong { display: block; font-size: 13.5px; color: var(--c-ink); } .pf-expert em { display: block; font-size: 11px; color: var(--c-ink-3); font-style: normal; } .pf-trigger { color: var(--c-terra-d) !important; } /* programma's + poorten */ .pf-prkop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .pf-prkop strong { font-size: 15px; font-weight: 800; color: var(--c-ink); } .pf-prkop em { font-size: 11px; color: var(--c-ink-3); font-style: normal; } .pf-prkop .chip { margin-left: auto; } .pf-poorten { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 9px; } .pf-poort { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--c-rood-t); border: var(--lijndikte) solid var(--c-rood); border-radius: 11px; padding: 10px 13px; cursor: pointer; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--c-rood); } .pf-poort i { font-style: normal; font-weight: 800; } .pf-poort.is-groen { background: var(--c-groen-t); border-color: var(--c-groen); color: var(--c-groen-d); } .pf-poort:disabled { cursor: default; opacity: .8; } /* FT-7.3a · auto-poorten (read-only, gevoed door de bron) + bron-label */ .pf-poort { flex-wrap: wrap; } .pf-poort--auto { cursor: default; } .pf-poort__bron { width: 100%; font-size: 9.5px; font-weight: 600; font-style: normal; letter-spacing: .02em; opacity: .75; margin-top: 1px; } .pf-certkies { margin: 4px 0 10px; } .pf-certkies span { width: 200px; } /* certificering */ .pf-matrix { display: grid; grid-template-columns: 1.8fr repeat(4, 1fr); gap: 10px; align-items: center; padding: 11px 18px; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: 12.5px; color: var(--c-ink-2); } .pf-matrix:last-child { border-bottom: 0; } .pf-matrix--kop { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-3); } .pf-matrix strong { display: block; font-size: 13px; color: var(--c-ink); } .pf-matrix em.mono { font-size: 10px; color: var(--c-ink-3); font-style: normal; } .pf-cel { text-align: center; } .pf-batch { display: flex; flex-direction: column; gap: 0; margin-top: 8px; } .pf-batchrij { display: flex; align-items: center; gap: 14px; } .pf-batchrij > div { flex: 1; } .pf-batchrij strong { display: block; font-size: 13.5px; color: var(--c-ink); } .pf-batchrij em { font-size: 11px; color: var(--c-ink-3); font-style: normal; } /* regelgeving */ .pf-regelrij { display: grid; grid-template-columns: 1.5fr .9fr 1.4fr .7fr .6fr; gap: 12px; align-items: center; padding: 12px 18px; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: 12.5px; color: var(--c-ink-2); } .pf-regelrij:last-child { border-bottom: 0; } .pf-regelrij--kop { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-3); } .pf-regelrij strong { display: block; font-size: 13px; color: var(--c-ink); } .pf-regelrij em.mono { display: block; font-size: 10px; color: var(--c-ink-3); font-style: normal; } .pf-regelrij b.mono { font-size: 12px; color: var(--c-ink); } @media (max-width: 1080px) { .pf-tweekolom { grid-template-columns: 1fr; } .pf-matrix { grid-template-columns: 1.4fr repeat(4, 1fr); } } /* F1-uitbreiding (Fuchs&Eule-model NL, 16-07-2026) */ .pf-actiebalk--boven { margin: 0 0 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* 1a · screening */ .pf-scrrij { display: grid; grid-template-columns: 1.5fr 52px 1.9fr 1fr 70px auto; gap: 12px; align-items: center; padding: 11px 18px; border-top: 1px solid var(--c-lijn); } .pf-scrrij--kop { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-2); border-top: 0; } .pf-scrrij em.mono { display: block; font-size: 10.5px; color: var(--c-ink-2); font-style: normal; } .pf-scrrisicos { display: flex; flex-wrap: wrap; gap: 4px; } /* 1c · esg */ .pf-esgkop { display: flex; align-items: baseline; gap: 12px; padding-bottom: 8px; } .pf-esgkop em { font-size: 11px; color: var(--c-ink-2); font-style: normal; flex: 1; } .pf-esgrij { display: grid; grid-template-columns: 1fr 1.4fr 1.4fr; gap: 16px; align-items: center; } .pf-esgrij .kicker { display: block; margin-bottom: 4px; } /* 2a · due diligence */ .pf-ddchecks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; margin: 10px 0; } .pf-ddcheck { display: flex; gap: 8px; align-items: center; border: 1px solid var(--c-lijn); border-radius: 10px; background: var(--c-paneel); font: inherit; font-size: 12px; text-align: left; padding: 8px 10px; cursor: pointer; color: var(--c-ink); } .pf-ddcheck i { font-style: normal; font-weight: 800; color: var(--c-ink-2); } .pf-ddcheck.is-ok { border-color: var(--c-groen-d); } .pf-ddcheck.is-ok i { color: var(--c-groen-d); } .pf-ddcheck[disabled] { opacity: .6; cursor: default; } /* 2b · plannen */ .pf-faserij { display: flex; gap: 14px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--c-lijn); } .pf-faserij b { font-size: 13px; color: var(--c-groen-d); } .pf-faserij em { display: block; font-size: 11px; color: var(--c-ink-2); font-style: normal; } /* 3a · subsidiestraat */ .pf-budgetrij { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; align-items: center; padding: 9px 0; border-top: 1px solid var(--c-lijn); } .pf-budgetrij em.mono { display: block; font-size: 10.5px; color: var(--c-ink-2); font-style: normal; } .pf-stepper { display: flex; align-items: center; gap: 6px; margin: 12px 0; flex-wrap: wrap; } .pf-stap { display: flex; gap: 6px; align-items: center; font-size: 11.5px; color: var(--c-ink-2); } .pf-stap i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--c-lijn); display: grid; place-items: center; font-style: normal; font-size: 11px; background: var(--c-paneel); } .pf-stap.is-af { color: var(--c-ink); font-weight: 700; } .pf-stap.is-af i { background: var(--c-groen-t); border-color: var(--c-groen-d); color: var(--c-groen-d); } .pf-staplijn { flex: 1 0 18px; height: 1px; background: var(--c-lijn); } /* 4b · draagvlak */ .pf-dvrij { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--c-lijn); font-size: 12.5px; } .pf-expnieuw { align-self: flex-start; margin-bottom: 6px; } /* FT-7.1b · live BAG-claimlaag (dwarslaag 0.8, bron /api/gebouwen) */ .pf-baglaag { margin: 0 0 16px; padding: 14px 18px; } .pf-baglaag__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .pf-baglaag__kop strong { font-size: 13px; color: var(--c-ink); } .pf-baglaag__kop .mono { font-size: 10.5px; color: var(--c-ink-3); } .pf-bagrij { display: grid; grid-template-columns: 1fr 1.9fr; gap: 14px; align-items: center; padding: 9px 0; border-top: var(--lijndikte) solid var(--c-lijn); font-size: 12.5px; } .pf-bagrij strong { display: block; font-size: 12.5px; color: var(--c-ink); } .pf-bagrij em.mono { font-size: 10px; color: var(--c-ink-3); font-style: normal; } .pf-bagclaims { display: flex; flex-wrap: wrap; gap: 6px; } .pf-bagclaim { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: 11px; color: var(--c-ink-2); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: 8px; padding: 3px 7px; } .pf-bagclaim .mono { font-size: 10px; color: var(--c-ink-3); } .pf-bagclaim .pf-conf { width: 18px; height: 18px; border-radius: 5px; font-size: 10px; } .pf-bagok { font-style: normal; font-weight: 800; font-size: 9.5px; letter-spacing: .04em; color: var(--c-groen-d); background: var(--c-groen-t); border-radius: 99px; padding: 1px 6px; margin-left: 4px; } /* FT-7.2a · geleverde adviesproducten uit de documentkluis */ .pf-docs { margin-top: 12px; padding-top: 10px; border-top: var(--lijndikte) solid var(--c-lijn); } .pf-docs .kicker { display: block; margin-bottom: 6px; } .pf-doc { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--c-ink); border: var(--lijndikte) solid var(--c-lijn); border-radius: 10px; padding: 7px 11px; margin: 0 6px 6px 0; background: var(--c-paneel); transition: border-color 150ms, box-shadow 150ms; } .pf-doc:hover { border-color: var(--c-groen-d); box-shadow: var(--schaduw-tegel-hover); } .pf-doc i { font-style: normal; color: var(--c-groen-d); font-size: 15px; } .pf-doc strong { display: block; font-size: 12.5px; } .pf-doc em.mono { font-size: 10px; color: var(--c-ink-3); font-style: normal; } /* ═══ WB3-4 · Portfolio als Werkbank (besluiten 233–234, 238) ═══════════════ De rijen komen uit app.css (.wbpaneel/.wbrij); hier de balk, de lade-tabs en de kern-kaart. */ .pf-balk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; } .pf-balk h1 { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; } .pf-balk__rol { margin-left: auto; font-size: .7rem; color: var(--c-ink-3); } .pf-rest { color: var(--c-ink-3); font-size: .78rem; margin: 2px 0 0; } .pf-leeg { padding: 12px 15px; color: var(--c-ink-2); font-size: .84rem; } .pf-let { color: var(--let); } .pf .wbpaneel { margin: 12px 0; } .pf .wbrij, .pf .bs-drawer .wbrij { grid-template-columns: 5px minmax(0, 1fr) auto auto; align-items: center; padding: 0 15px 0 0; } .pf .wbrij > * { min-width: 0; } .pf .wbrij.pf-wrij { cursor: pointer; } .pf .wbrij.pf-wrij:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; } .pf .wbrij__knop--p { background: var(--knop); border-color: var(--knop); color: var(--knop-ink); } .pf .wbrij__geld.is-stil { color: var(--c-ink-3); font-weight: 500; font-size: .76rem; } .pf .wbrij__wat .chip { vertical-align: middle; margin-left: 4px; } .pf-ladetabs { display: flex; gap: 2px; margin: -4px 0 12px; border-bottom: var(--lijndikte) solid var(--lijn); overflow-x: auto; } .pf-ladetabs button { border: 0; background: none; padding: 8px 10px; font: 700 .8rem var(--font-ui); color: var(--c-ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; } .pf-ladetabs button.is-actief { color: var(--ink); border-bottom-color: var(--ink); } .pf-ladetabs button:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; } .pf-kern { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-bottom: 14px; } .pf-kern > div { display: grid; gap: 2px; } .pf-kern strong { font-size: .9rem; } .pf-kern em { font-style: normal; font-size: .76rem; color: var(--c-ink-2); } @media (max-width: 720px) { .pf-kern { grid-template-columns: 1fr; } } /* ── beveiliging.css ── */ /* beveiliging.js — Mijn beveiliging-drawer (FT-8.1a) · alleen tokens */ .bv-sectie { padding: 16px 0; border-top: var(--lijndikte) solid var(--c-lijn); } .bv-sectie:first-child { border-top: 0; padding-top: 4px; } .bv-sectie .kicker { display: block; margin-bottom: 8px; } .bv-sub { font-size: 12.5px; color: var(--c-ink-2); line-height: 1.55; margin: 0 0 10px; } .bv-velden { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; } .bv-veld { display: flex; flex-direction: column; gap: 5px; } .bv-veld span { font-size: 12px; font-weight: 700; color: var(--c-ink); } .bv-veld input { padding: 10px 12px; border-radius: 10px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-creme); font: 500 13.5px var(--font-ui); color: var(--c-ink); } .bv-veld input:focus-visible { outline: var(--focus-ring); outline-offset: 1px; border-color: var(--c-groen); } .bv-totp { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); } .bv-secret { margin: 8px 0; } .bv-secret .kicker { display: block; margin-bottom: 3px; } .bv-secret code { display: block; padding: 8px 10px; border-radius: 8px; background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); font-size: 12.5px; color: var(--c-ink); word-break: break-all; } .bv-uri { font-size: 11px !important; color: var(--c-ink-2) !important; } .bv-sessies { display: flex; flex-direction: column; } .bv-sesrij { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: var(--lijndikte) solid var(--c-lijn); } .bv-sesrij:first-child { border-top: 0; } .bv-sesrij > div { flex: 1; min-width: 0; } .bv-sesrij strong { display: block; font-size: 13px; color: var(--c-ink); } .bv-sesrij .mono { display: block; font-size: 10.5px; color: var(--c-ink-3); } .bv-dit { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; color: var(--c-groen-d); background: var(--c-groen-t); border-radius: 99px; padding: 1px 6px; } .bv-afmeld { color: var(--c-rood); } /* QR voor de authenticator (04-09): vast formaat, wit vlak zodat elke scanner hem leest */ .bv-qr { width: 196px; height: 196px; padding: 8px; background: var(--kaart); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-klein); margin: 10px 0 12px; } .bv-qr svg { width: 100%; height: 100%; display: block; } .bv-handmatig { margin-top: 6px; } .bv-handmatig summary { cursor: pointer; font-size: .85rem; color: var(--c-ink-2); } /* ── mijnzone.css ── */ /* mijnzone.js — «Mijn zone» (VERWIJZING V2) · alleen tokens. Sober met opzet: dit scherm hoort niet te verleiden tot openslaan met de klant ernaast. Eén accentregel bovenaan die zegt waarom. */ .mz-sectie { padding: 16px 0; border-top: var(--lijndikte) solid var(--c-lijn); } .mz-sectie:first-of-type { border-top: 0; padding-top: 4px; } .mz-sectie h3 { margin: 0 0 6px; font: 700 14px/1.3 var(--font-ui); color: var(--c-ink); } .mz-sub { font-size: 12.5px; color: var(--c-ink-2); line-height: 1.55; margin: 0 0 10px; } .mz-nb { margin-top: 8px; font-style: italic; } /* de reden dat dit achter een eigen ingang staat, in één regel */ .mz-waarschuwing { margin: 0 0 4px; padding: 10px 12px; border-radius: var(--radius, 8px); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); font-size: 12.5px; color: var(--c-ink-2); line-height: 1.5; } .mz-saldo { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; } .mz-saldo__bedrag { font: 700 26px/1.1 var(--font-mono); color: var(--c-ink); } .mz-saldo__sub { font-size: 12px; color: var(--c-ink-2); } .mz-rijen { display: flex; flex-direction: column; } .mz-rij--link { text-decoration: none; color: inherit; } .mz-rij--link:hover strong { text-decoration: underline; } .mz-rij { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: var(--lijndikte) solid var(--c-lijn); } .mz-rij:first-child { border-top: 0; } .mz-rij__wat { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .mz-rij__wat strong { font: 600 13px/1.35 var(--font-ui); color: var(--c-ink); } .mz-rij__wat .mz-sub { margin: 0; font-size: 11.5px; } .mz-rij__bedrag { font: 600 13.5px var(--font-mono); color: var(--c-ink); white-space: nowrap; } /* een teruggedraaide boeking leest anders dan een opbouw — dat verschil hoort zichtbaar te zijn zonder dat je de reden hoeft te lezen */ .mz-rij--retour .mz-rij__bedrag { color: var(--c-rood, var(--c-ink-2)); } .mz-afmeld { margin-left: auto; } /* Terugkijken per maand. Alleen maanden waarin voor deze persoon iets staat — door lege maanden bladeren helpt niemand. */ .mz-maanden { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; } .mz-maand { padding: 5px 11px; border-radius: var(--radius-klein); cursor: pointer; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-creme); font: 600 12px var(--font-ui); color: var(--c-ink-2); transition: background 160ms ease, color 160ms ease, border-color 160ms ease; } .mz-maand:hover { border-color: var(--c-lijn); color: var(--c-ink); } .mz-maand:focus-visible { outline: var(--focus-ring); outline-offset: 1px; } .mz-maand--nu { background: var(--donker, var(--c-ink)); border-color: var(--c-ink); color: var(--c-creme); } @media (prefers-reduced-motion: reduce) { .mz-maand { transition: none; } } /* Backoffice in Mijn zone (N1). Compact: dit is geen werkplek maar een inhoudsopgave — je komt hier om ergens heen te gaan, niet om te blijven. */ .mz-back { display: flex; flex-direction: column; gap: 12px; } .mz-backwr strong { display: block; font: 700 12.5px var(--font-ui); color: var(--c-ink); margin-bottom: 5px; } .mz-backmods { display: flex; flex-wrap: wrap; gap: 5px; } .mz-backmod { border: var(--lijndikte) solid var(--c-lijn); background: var(--kaart); cursor: pointer; padding: 4px 10px; border-radius: var(--radius-klein); font: 600 11.5px var(--font-ui); color: var(--c-ink-2); } .mz-backmod:hover { border-color: var(--accent, var(--c-groen)); color: var(--accent, var(--c-groen)); } .mz-backmod:focus-visible { outline: 3px solid var(--accent, var(--c-groen)); outline-offset: 1px; } /* PR-B · bezwaar tegen een provisieboeking. Provisie is loon; als iemand denkt dat het niet klopt hoort hij dat te kunnen zeggen op de plek waar hij het ziet — niet in een mail die niemand kan volgen. */ .mz-rij__bezwaar { grid-column: 1 / -1; display: flex; justify-content: flex-end; margin-top: 2px; } .mz-bezwaarknop { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; font: 600 .72rem var(--font-ui); color: var(--ink3); text-decoration: underline; } .mz-bezwaarknop:hover { color: var(--ink); } .mz-bezwaar { font: 600 .72rem var(--font-ui); font-style: normal; color: var(--let); } .mz-bezwaar--toegekend { color: var(--goed); } .mz-bezwaar--afgewezen, .mz-bezwaar--ingetrokken { color: var(--ink3); } .mz-veld { display: grid; gap: 4px; font: 600 .78rem var(--font-ui); color: var(--ink2); } .mz-veld textarea, .mz-veld input { font: inherit; font-size: .86rem; font-weight: 400; padding: 8px 10px; border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius-klein); background: var(--kaart); color: var(--ink); } /* TA (Michiel 06-10) · mijn gegevens: zelf aanvullen */ .mz-gegevens { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 0 0 10px; } .mz-gegevens .mz-veld input { font: inherit; font-size: .8rem; padding: 7px 9px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-klein, 8px); background: var(--kaart); color: var(--c-ink); min-width: 0; } /* PROVISIE-MOTOR V2 (10-10) · de stand per regel, wat nog niet meetelt, en de uitleg van de eigen regeling */ .mz-rij .chip { flex: none; } .mz-rij--stil .mz-rij__bedrag, .mz-rij--stil .mz-rij__wat strong { color: var(--ink3); font-weight: 500; } .mz-tussenkop { margin: 16px 0 4px; font: 600 .62rem var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ink3); } .mz-uitleg { margin-top: 12px; border-top: var(--lijndikte) solid var(--lijn); padding-top: 10px; } .mz-uitleg summary { cursor: pointer; font: 600 .78rem var(--font-ui); color: var(--ink); } .mz-uitleg summary:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } .mz-uitleg p { margin: 8px 0 0; } /* ── pwa.css ── */ /* pwa.js — FT-8.3b/c · PWA-schil-affordances (install/update/offline) · tokens */ .pwa-balk { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 900; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: min(92vw, 720px); pointer-events: none; } .pwa-chip { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; font: 700 12px var(--font-ui); border-radius: 99px; padding: 8px 14px; border: var(--lijndikte) solid var(--c-lijn); background: var(--c-paneel); color: var(--c-ink); cursor: default; box-shadow: var(--schaduw-knop); } button.pwa-chip { cursor: pointer; } button.pwa-chip:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } .pwa-chip--offline { background: var(--c-amber-t); border-color: var(--c-amber); color: var(--c-amber); } .pwa-chip--update { background: var(--gradient-primair); border-color: transparent; color: var(--c-creme); } .pwa-chip--update:hover { background: var(--gradient-primair-hover); } .pwa-chip--install { background: var(--kaart); } .pwa-chip--install:hover { border-color: var(--c-groen-d); color: var(--c-groen-d); } @media (prefers-reduced-motion: reduce) { .pwa-chip { box-shadow: none; } } /* schermronde stap 1: de uitnodiging is weg te klikken */ .pwa-groep { display: inline-flex; gap: 4px; align-items: center; } .pwa-chip--sluit { background: var(--kaart); padding-inline: 10px; } .pwa-chip--sluit:hover { border-color: var(--ink); } /* ── werkdag.css ── */ /* ===================================================================== werkdag.css — schouw · wvb · signalen · dagboog · meldingen. Op tokens; diepte alleen via de vaste tokens. ===================================================================== */ .wd { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; } .wd .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-3); display: block; margin: 10px 0 8px; } .wd-kop { margin-bottom: 18px; } .wd-kop h1 { font-size: 26px; font-weight: 800; color: var(--c-ink); margin: 0 0 6px; } .wd-kop p { max-width: 780px; font-size: 13.5px; line-height: 1.55; color: var(--c-ink-2); margin: 0; } .wd .mono { font-family: var(--font-mono); } .wd .kaart { background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 15px 17px; box-shadow: var(--schaduw-tegel); margin-bottom: 12px; } .wd .kaart--strak { padding: 6px 0; } .wd-blok { display: flex; flex-direction: column; gap: 9px; } .wd-blok.is-actief { border-color: var(--c-groen); } .wd-rek { flex: 1; } .wd-tweekolom { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; } .wd-sub { font-size: 12px; color: var(--c-ink-3); } .wd-voetnoot { font-size: 12px; color: var(--c-ink-3); font-style: normal; line-height: 1.5; } .wd-melding { padding: 10px 14px; border-radius: var(--radius); font-size: 12.5px; line-height: 1.5; } .wd-melding.is-blok { background: var(--c-rood-t); color: var(--c-rood); } .wd-melding.is-ok { background: var(--c-groen-t); color: var(--c-groen-d); } .wd-knop { font: 700 13px var(--font-ui); color: var(--c-ink); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 9px 16px; cursor: pointer; box-shadow: var(--schaduw-knop); width: fit-content; } .wd-knop:hover { border-color: var(--c-ink-3); } .wd-knop--klein { padding: 6px 12px; font-size: 12px; } .wd-knop--primair { background: var(--gradient-primair); border-color: var(--c-groen-d); color: var(--c-creme); } .wd-knop--primair:hover { background: var(--gradient-primair-hover); } .wd-knop.is-dicht { opacity: .55; cursor: not-allowed; } /* rijkoppen + checklists */ .wd-rijkop { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: none; cursor: pointer; text-align: left; font-family: var(--font-ui); padding: 0; flex-wrap: wrap; } div.wd-rijkop { cursor: default; } .wd-rijkop strong { font-size: 14.5px; font-weight: 800; color: var(--c-ink); } .wd-rijkop em { font-size: 11px; color: var(--c-ink-3); font-style: normal; } .wd-checkrij { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 2px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: 13px; color: var(--c-ink); } .wd-checkrij--knop { background: none; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; cursor: pointer; font-family: var(--font-ui); text-align: left; justify-content: flex-start; } .wd-checkrij--knop i { width: 22px; height: 22px; border-radius: 6px; flex: none; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; background: var(--c-paneel-2); color: var(--c-ink-3); } .wd-checkrij--knop.is-ok i { background: var(--c-groen); color: var(--c-creme); } .wd-checkrij--knop:disabled { cursor: default; } .wd-janee { display: flex; gap: 6px; } .wd-check { width: 32px; height: 28px; border-radius: 8px; border: 1.5px solid var(--c-lijn-2); background: var(--c-creme); cursor: pointer; font: 800 13px var(--font-ui); color: var(--c-ink-3); } .wd-check.is-ok { background: var(--c-groen); border-color: var(--c-groen-d); color: var(--c-creme); } .wd-check.is-nee { background: var(--c-rood); border-color: var(--c-rood); color: var(--c-creme); } /* blok H · «let op» op een check van de werkvoorbereiding, het vinkje met tekst boven de lijst en de staat van een rij */ .wd-check.is-let { background: var(--c-amber-t); border-color: var(--c-amber); color: var(--c-amber); } .wd-checkrij > span:first-child i { font-style: normal; font-weight: 800; display: inline-block; width: 16px; } .wd-checkrij.is-ok > span:first-child i { color: var(--c-groen-d); } .wd-checkrij.is-let > span:first-child i { color: var(--c-amber); } .wd-checkrij.is-nee > span:first-child i { color: var(--c-rood); } .wd-janee { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .wd-vinkrij { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--c-ink-2); cursor: pointer; } /* signalen + meldingen */ .wd-signaal, .wd-melding-rij { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: none; border-bottom: var(--lijndikte) solid var(--c-lijn); cursor: pointer; font-family: var(--font-ui); padding: 12px 18px; font-size: 13px; color: var(--c-ink); } .wd-signaal:last-child, .wd-melding-rij:last-child { border-bottom: 0; } .wd-signaal:hover, .wd-melding-rij:hover { background: var(--c-creme); } .wd-signaal i, .wd-melding-rij i { width: 28px; height: 28px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; background: var(--c-paneel-2); color: var(--c-ink-2); } .wd-signaal i.is-rood { background: var(--c-rood-t); color: var(--c-rood); } .wd-signaal i.is-amber { background: var(--c-amber-t); color: var(--c-amber); } .wd-signaal i.is-groen, .wd-melding-rij i.is-groen { background: var(--c-groen-t); color: var(--c-groen-d); } .wd-melding-rij i.is-terra { background: var(--c-terra-t); color: var(--c-terra-d); } .wd-signaal span, .wd-melding-rij span { flex: 1; } .wd-signaal em, .wd-melding-rij em { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; } .wd-melding-rij.is-ongelezen { background: var(--c-creme); } .wd-melding-rij.is-ongelezen span { font-weight: 700; } .wd-balkje { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; flex-wrap: wrap; } .wd-chipknop { font: 600 12px var(--font-ui); color: var(--c-ink-2); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-klein); padding: 5px 13px; cursor: pointer; } .wd-chipknop.is-actief { background: var(--donker, var(--c-ink)); border-color: var(--c-ink); color: var(--c-creme); } /* dagboog */ .wd-doelrij { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-top: var(--lijndikte) solid var(--c-lijn); } .wd-doelrij:first-of-type { border-top: 0; } .wd-doelrij > div { flex: 1; } .wd-doelrij strong { display: block; font-size: 13px; color: var(--c-ink); margin-bottom: 5px; } .wd-balk { display: block; height: 6px; border-radius: var(--radius-pill); background: var(--c-paneel-2); overflow: hidden; max-width: 320px; } .wd-balk b { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--c-groen); } .wd-doelrij > span.mono { font-size: 12px; color: var(--c-ink-2); } .wd-lognoot { display: flex; gap: 12px; padding: 8px 2px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: 13px; color: var(--c-ink); } .wd-lognoot:first-of-type { border-top: 0; } .wd-lognoot em { font-size: 11px; color: var(--c-ink-3); font-style: normal; flex: none; padding-top: 2px; } .wd-logform { display: flex; gap: 9px; margin-top: 6px; } .wd-logform input { flex: 1; padding: 10px 13px; border-radius: 10px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-creme); font: 500 13px var(--font-ui); color: var(--c-ink); } .wd-visueel-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } @media (max-width: 1080px) { .wd-tweekolom { grid-template-columns: 1fr; } } /* Foto-plicht (C2a) + templates (C2b) */ .wd-foto { border: 1px dashed var(--c-lijn); border-radius: var(--radius-klein); text-decoration: none; display: inline-block; background: none; font: inherit; font-size: 11px; padding: 4px 10px; cursor: pointer; color: var(--c-ink-2); white-space: nowrap; } .wd-foto.is-vast { border-style: solid; border-color: var(--c-groen-d); color: var(--c-groen-d); font-weight: 700; } .wd-tpl { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--c-lijn); border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; } .wd-tpl__punt { font-size: 12.5px; color: var(--c-ink-2); } /* ---------- Toegezegde uitvoerdata (Planning 2.0) ---------- */ .wd-reserveringen { border-color: var(--c-amber); } .wd-resrij { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: var(--lijndikte) solid var(--c-lijn); padding: 11px 0; } .wd-resrij strong { display: block; font: 700 .84rem var(--font-ui); } .wd-resrij span { font: 500 .72rem var(--font-ui); color: var(--c-ink-3); } .wd-resacties { display: flex; gap: 6px; } .wd-resleeg { padding: 12px 0; font-size: .78rem; color: var(--c-ink-3); } .wd-resafgehandeld { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px dashed var(--c-lijn); padding-top: 9px; margin-top: 4px; font-size: .66rem; color: var(--c-ink-3); } .wd-resuitleg { margin: 8px 0 0; font: 400 .7rem/1.55 var(--font-ui); color: var(--c-ink-3); } /* Akkoordknop: bij een blokkade écht uit, met de reden ernaast in plaats van erna — anders leer je pas na de klik dat het niet mag. */ .wd-akkoordrij { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .wd-knop--primair:disabled { background: var(--c-paneel); color: var(--c-ink-3); border-color: var(--c-lijn); cursor: not-allowed; } .wd-blokkade { font: 700 .74rem var(--font-ui); color: var(--c-rood); } .wd-vrij { font: 700 .74rem var(--font-ui); color: var(--c-groen-d); } /* ── voorzieningen.css ── */ /* ===================================================================== voorzieningen.css — wallboards + facilitair. Op tokens; diepte alleen via de vaste tokens. ===================================================================== */ .vz { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; } .vz .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-3); display: block; margin: 10px 0 8px; } .vz-kop { margin-bottom: 18px; } .vz-kop h1 { font-size: 26px; font-weight: 800; color: var(--c-ink); margin: 0 0 6px; } .vz-kop p { max-width: 780px; font-size: 13.5px; line-height: 1.55; color: var(--c-ink-2); margin: 0; } .vz .mono { font-family: var(--font-mono); } .vz .kaart { background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 15px 17px; box-shadow: var(--schaduw-tegel); margin-bottom: 12px; } .vz .kaart--strak { padding: 6px 0; } .vz-blok { display: flex; flex-direction: column; gap: 9px; } .vz-voetnoot { display: block; font-size: 12.5px; color: var(--c-ink-3); line-height: 1.55; margin: 4px 0 10px; } .vz-knop { font: 700 13px var(--font-ui); color: var(--c-ink); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); padding: 9px 15px; cursor: pointer; box-shadow: var(--schaduw-knop); width: fit-content; } .vz-knop:hover { border-color: var(--c-ink-3); } .vz-knop--klein { padding: 5px 11px; font-size: 12px; } /* wallboards */ .vz-tvrij { display: grid; grid-template-columns: 1.3fr 1.1fr 1.4fr .6fr 1fr; gap: 12px; align-items: center; padding: 11px 18px; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: 12.5px; color: var(--c-ink-2); } .vz-tvrij:last-child { border-bottom: 0; } .vz-tvrij.is-actief { background: var(--c-creme); } .vz-tvrij--kop { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-3); } .vz-tvrij strong { display: block; font-size: 13px; color: var(--c-ink); } .vz-tvrij em.mono { display: block; font-size: 10px; color: var(--c-ink-3); font-style: normal; } .vz-tvrij select { width: 100%; padding: 7px 9px; border-radius: 9px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-creme); font: 600 12px var(--font-ui); color: var(--c-ink); margin-bottom: 4px; } .vz-acties { display: flex; gap: 6px; flex-wrap: wrap; } .vz-preview { border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); background: var(--c-paneel); box-shadow: var(--schaduw-tegel); padding: 15px 17px; margin-bottom: 12px; } .vz-preview__kop { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .vz-preview__kop strong { font-size: 14px; color: var(--c-ink); } .vz-preview__kop em { font-size: 11px; color: var(--c-ink-3); font-style: normal; flex: 1; } .vz-unifi { display: flex; align-items: center; gap: 14px; } .vz-unifi > i { width: 38px; height: 38px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; font-size: 16px; background: var(--c-groen-t); color: var(--c-groen-d); } .vz-unifi > div { flex: 1; } .vz-unifi strong { display: block; font-size: 14px; color: var(--c-ink); } .vz-unifi em { font-size: 11px; color: var(--c-ink-3); font-style: normal; } .vz-kader169 { aspect-ratio: 16 / 9; width: 100%; border-radius: var(--radius); overflow: hidden; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--donker, var(--c-ink)); } .vz-kader169 iframe { width: 100%; height: 100%; border: 0; display: block; } /* facilitair */ .vz-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; } .vz-tab { font: 600 13px var(--font-ui); color: var(--c-ink-2); background: var(--c-paneel); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-klein); padding: 8px 16px; cursor: pointer; } .vz-tab.is-actief { background: var(--c-groen-d); border-color: var(--c-groen-d); color: var(--c-creme); } .vz-pand { display: flex; align-items: center; gap: 14px; } .vz-pand > div { flex: 1; } .vz-pand strong { display: block; font-size: 14px; color: var(--c-ink); } .vz-pand em.mono { font-size: 11px; color: var(--c-ink-3); font-style: normal; } .vz-middelrij { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: 13px; color: var(--c-ink-2); flex-wrap: wrap; } .vz-middelrij:last-child { border-bottom: 0; } .vz-middelrij strong { flex: 1; font-size: 13px; color: var(--c-ink); min-width: 200px; } .vz-doc { font-style: normal; color: var(--c-ink-3); } .vz-meldform { display: flex; gap: 9px; margin-top: 6px; flex-wrap: wrap; } .vz-meldform input { flex: 1; min-width: 220px; padding: 10px 13px; border-radius: 10px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-creme); font: 500 13px var(--font-ui); color: var(--c-ink); } .vz-meldform select { padding: 10px 11px; border-radius: 10px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-creme); font: 600 13px var(--font-ui); color: var(--c-ink); } .vz-koppel { display: flex; flex-direction: column; gap: 3px; text-align: left; background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; font-family: var(--font-ui); } .vz-koppel:hover { border-color: var(--c-lijn-2); } .vz-koppel strong { font-size: 13.5px; color: var(--c-ink); } .vz-koppel span { font-size: 12px; color: var(--c-ink-2); } .vz-koppel em { font-size: 10.5px; color: var(--c-ink-3); font-style: normal; } .vz-visueel-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } @media (max-width: 1080px) { .vz-tvrij { grid-template-columns: 1fr 1fr; } } /* wallboard-editor */ .vz-eigenbalk { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 10px; } .vz-eigenbalk .kicker { margin: 0; } .vz-editor { display: flex; flex-direction: column; gap: 12px; border-color: var(--c-lijn-2); } .vz-editor__kop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .vz-editor__kop strong { font-size: 15px; font-weight: 800; color: var(--c-ink); } .vz-editor__naam { display: flex; align-items: center; gap: 10px; max-width: 460px; } .vz-editor__naam span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3); flex: none; } .vz-editor__naam input { flex: 1; padding: 10px 13px; border-radius: 10px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-creme); font: 600 13px var(--font-ui); color: var(--c-ink); } .vz-editor__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; align-items: start; } .vz-editor__gebied { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3); font-style: normal; margin: 10px 0 6px; } .vz-editor__chips { display: flex; flex-wrap: wrap; gap: 6px; } .vz-kpichip { font: 600 12px var(--font-ui); color: var(--c-ink-2); background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius-klein); padding: 6px 12px; cursor: pointer; } .vz-kpichip:hover { border-color: var(--c-lijn-2); } .vz-kpichip.is-aan { background: var(--c-groen-t); border-color: var(--c-groen); color: var(--c-groen-d); } .vz-hoog { color: var(--c-rood); font-size: 9px; } .vz-pub { color: var(--c-groen-d); font-size: 9px; } .vz-gekozen { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 10px; background: var(--c-creme); margin-bottom: 6px; font-size: 12.5px; color: var(--c-ink); } .vz-gekozen > b { width: 18px; flex: none; font-size: 10px; color: var(--c-ink-3); } .vz-gekozen > span { flex: 1; font-weight: 600; } .vz-mini { width: 26px; height: 26px; border-radius: 7px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-paneel); cursor: pointer; font: 700 12px var(--font-ui); color: var(--c-ink-2); } .vz-mini[aria-disabled="true"] { opacity: .35; cursor: default; } .vz-kader169--klein { margin-top: 4px; } .vz-editor__voet { display: flex; align-items: center; gap: 10px; border-top: var(--lijndikte) solid var(--c-lijn); padding-top: 12px; } .vz-editor__voet .vz-voetnoot { flex: 1; margin: 0; } @media (max-width: 1080px) { .vz-editor__grid { grid-template-columns: 1fr; } } /* drempels in de editor + rotatie-paneel */ .vz-gekozen--drempel { flex-direction: column; align-items: stretch; gap: 6px; } .vz-gekozen__rij { display: flex; align-items: center; gap: 9px; } .vz-gekozen__rij > b { width: 18px; flex: none; font-size: 10px; color: var(--c-ink-3); } .vz-gekozen__rij > span { flex: 1; font-weight: 600; } .vz-drempels { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 8px; border-top: var(--lijndikte) dashed var(--c-lijn); } .vz-drempels > em { font-size: 10px; color: var(--c-ink-3); font-style: normal; } .vz-drempels label { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--c-ink-2); } .vz-drempels input { width: 84px; padding: 5px 7px; border-radius: 7px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-paneel); font: 600 11.5px var(--font-mono); color: var(--c-ink); } .vz-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .vz-dot.is-amber { background: var(--c-oker); } .vz-dot.is-rood { background: var(--c-rood); } .vz-eigen { font-size: 9px; color: var(--c-terra-d); } .vz-standaard { font-size: 9px; color: var(--c-ink-3); } .vz-rek { flex: 1; } .vz-rotpaneel { display: flex; flex-direction: column; gap: 10px; border-color: var(--c-lijn-2); } .vz-rotvoet { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-top: var(--lijndikte) solid var(--c-lijn); padding-top: 10px; } .vz-rotvoet label { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--c-ink-2); } .vz-rotvoet select { padding: 7px 9px; border-radius: 9px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-creme); font: 600 12px var(--font-ui); color: var(--c-ink); } .vz-rotvoet .vz-voetnoot { flex: 1; min-width: 240px; margin: 0; } .vz-mini--inchip { width: 18px; height: 18px; font-size: 10px; border-radius: 5px; margin-left: 3px; } .vz-knop.is-rotatie { border-color: var(--c-groen); color: var(--c-groen-d); } /* eigen mededeling in de editor */ .vz-msg { display: flex; gap: 10px; flex-wrap: wrap; } .vz-msg label { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--c-ink-2); } .vz-msg label span { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3); } .vz-msg input { padding: 8px 11px; border-radius: 9px; border: var(--lijndikte) solid var(--c-lijn-2); background: var(--c-creme); font: 600 12.5px var(--font-ui); color: var(--c-ink); width: 130px; } .vz-msg__tekst { flex: 1; min-width: 260px; } .vz-msg__tekst input { width: 100%; } /* Kantoorinkoop (facilitair · 15-07) */ .vz-inkoopchips { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; } .vz-chip { border: 1px solid var(--c-lijn); border-radius: var(--radius-klein); background: var(--c-paneel); font: inherit; font-size: 12.5px; padding: 6px 14px; cursor: pointer; color: var(--c-ink); } .vz-chip.is-actief { border-color: var(--c-groen-d); background: color-mix(in srgb, var(--c-groen) 8%, var(--c-paneel)); font-weight: 600; } .vz-krij { display: grid; grid-template-columns: 1.8fr .9fr 1.1fr .7fr auto; gap: 12px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--c-lijn); font-size: 13px; } .vz-krij:last-child { border-bottom: 0; } .vz-krij--kop { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-2); } .vz-krij.is-laag { background: color-mix(in srgb, var(--c-amber) 6%, transparent); } .vz-krij__art { display: flex; flex-direction: column; } .vz-krij__art em { font-style: normal; font-size: 11px; color: var(--c-ink-2); } .vz-krij__vrd { display: flex; flex-direction: column; } .vz-krij__vrd strong.is-laag { color: var(--c-amber); } .vz-krij__vrd em { font-size: 10.5px; color: var(--c-ink-2); } .vz-krij__lev { display: flex; flex-direction: column; font-size: 12px; } .vz-krij__lev em { font-size: 10.5px; color: var(--c-ink-2); } .vz-mandtel { display: inline-flex; align-items: center; gap: 8px; } .vz-mand { margin-top: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; } .vz-mand__kop { display: flex; justify-content: space-between; align-items: center; } /* Sleutel- & toegangsbeheer (E3c) */ .vz-slsignaal { border: 1px solid var(--c-amber); border-radius: 12px; padding: 9px 14px; font-size: 12.5px; color: var(--c-amber); font-weight: 600; margin: 10px 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; } .vz-slrij { display: grid; grid-template-columns: 1.8fr 1.1fr .9fr auto auto; gap: 12px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--c-lijn); font-size: 13px; } .vz-slrij:last-child { border-bottom: 0; } .vz-slrij--kop { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-2); } .vz-slrij__wat { display: flex; flex-direction: column; } .vz-slrij__wat em { font-style: normal; font-size: 11px; color: var(--c-ink-2); } /* Inkoop toevoegen/bewerken (lat ①②⑤) */ .vz-inkoopbalk { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .vz-inlinebtn { border: 0; background: none; color: var(--c-groen-d); font: inherit; font-size: 11px; cursor: pointer; padding: 0; text-decoration: underline; } /* F8 a/b · spoed-balk + instellingen-subregel */ .vz-spoed { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-color: var(--c-rood); margin-bottom: 12px; } .vz-spoed i { font-style: normal; color: var(--c-rood); font-size: 18px; } .vz-spoed em { display: block; font-size: 11.5px; color: var(--c-ink-2); font-style: normal; } .vz-spoed .vz-knop { margin-left: auto; } .vz-balk { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; } .vz-hint { font-size: 11.5px; color: var(--c-ink-2); } .vz-rek { flex: 1; } .vz-subregel { display: block; font-size: 10px; color: var(--c-ink-2); font-style: normal; } .vz-urlveld { width: 100%; box-sizing: border-box; font-size: 11.5px; } /* Reviewronde Tim 23-07 · punt 14: accounts & abonnementen */ .vz-acrij { display: grid; grid-template-columns: 1.4fr .8fr auto 1.6fr auto; gap: 12px; align-items: center; border-top: 1px solid var(--c-lijn); padding: 10px 2px; } .vz-acrij--kop { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); border-top: 0; } .vz-acrij__wat { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .vz-acrij__wat em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); } .vz-acrij__toegang { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } .vz-acrij.is-uit { opacity: .55; } .vz-actoegang { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: .68rem; border: 1px solid var(--c-lijn); border-radius: 99px; padding: 3px 8px; background: var(--c-paneel); } .vz-actoegang button { border: 0; background: none; cursor: pointer; color: var(--c-ink-3); font: inherit; padding: 0; } .vz-actoegang button:hover { color: var(--c-rood); } .vz-offboard { padding: 14px 16px; border-color: var(--c-terra, var(--c-amber)); display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .vz-offboardrij { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; border-top: 1px solid var(--c-lijn); padding-top: 8px; font-size: .78rem; } @media (max-width: 980px) { .vz-acrij { grid-template-columns: 1fr; gap: 5px; } .vz-acrij--kop { display: none; } } /* ═══ WB3-2 · Facilitair als Werkbank (besluiten 233, 237–239) ═══════════════ De rijen komen uit app.css (.wbpaneel/.wbrij, het blokkadepaneel van Vandaag); hier alleen wat de module er aan toevoegt: de balk, de tabs, de lade-stappen. */ .vz-balk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; } .vz-balk h1 { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; } .vz-balk__rol { margin-left: auto; font-size: .7rem; color: var(--ink3); } .vz-rest { color: var(--ink3); font-size: .78rem; margin: 2px 0 0; } .vz-leeg { padding: 12px 15px; color: var(--ink2); font-size: .84rem; } .vz-paneelvoet { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 15px; border-top: var(--lijndikte) solid var(--lijn); } .vz-paneelvoet .vz-voetnoot { margin: 0; } .vz .wbpaneel { margin: 12px 0; } .vz .wbrij.fac-rij { cursor: pointer; } .vz .wbrij.fac-rij:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; } .vz .wbrij__knop--p { background: var(--knop); border-color: var(--knop); color: var(--knop-ink); } .vz .wbrij__knop--p:hover { opacity: .9; } .vz .wbrij__geld.is-stil { color: var(--ink3); font-weight: 500; font-size: .76rem; } .vz .bs-drawer .wbrij { grid-template-columns: 5px minmax(0, 1fr) auto auto; } .vz-stappen { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 10px; } .vz-stap { font: 600 .72rem var(--font-mono); padding: 3px 9px; border-radius: 99px; border: var(--lijndikte) solid var(--lijn); color: var(--ink3); } .vz-stap.is-af { background: var(--goed-t); border-color: transparent; color: var(--goed); } /* de rij-vorm van Vandaag wint van de oude rij-rasters van deze module */ .vz .wbrij, .vz .bs-drawer .wbrij { grid-template-columns: 5px minmax(0, 1fr) auto auto; align-items: center; padding: 0 15px 0 0; } .vz .wbrij > * { min-width: 0; } /* ── wallboard-bord.css ── */ /* ===================================================================== wallboard-bord.css — hét bord (DISPLAYCAST, besluit 340). Eén opbouw voor kaart, editor, schermkaart en tv: getekend op 1280 × 720 en door wallboard-bord.js geschaald in zijn .wbd-kader. Donker vlak met de tv-tokens (--tv … --tv-ink3, in elke wereld donker — ook waar de rail licht is); de betekeniskleuren in hun lichte stand (--goed-licht, --let-licht, --stop-licht). Geen literals, geen schaduw op tekst. ===================================================================== */ .wbd-kader { position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; background: var(--tv); } .wbd { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0; box-sizing: border-box; background: var(--tv); color: var(--tv-ink); font-family: var(--font-ui); display: grid; grid-template-rows: auto 1fr auto; padding: 28px 36px 20px; gap: 18px; } .wbd *, .wbd *::before, .wbd *::after { box-sizing: border-box; } .wbd .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .wbd.met-band { padding-bottom: 92px; } /* kop */ .wbd-kop { display: flex; align-items: center; gap: 22px; min-width: 0; } .wbd-merk { font-weight: 800; font-size: 26px; letter-spacing: -.02em; white-space: nowrap; display: flex; align-items: center; gap: 10px; } .wbd-merk span { color: var(--tv-ink3); font-weight: 700; } .wbd-merk img { height: 36px; width: auto; max-width: 260px; object-fit: contain; } .wbd-titel { font-weight: 800; font-size: 30px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wbd-meta { color: var(--tv-ink3); font-size: 15px; margin-left: 4px; font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } .wbd-klok { margin-left: auto; text-align: right; font-family: var(--font-mono); font-weight: 700; font-size: 30px; line-height: 1; } .wbd-klok small { display: block; font: 600 14px var(--font-ui); color: var(--tv-ink3); margin-top: 4px; } /* lijf: tegels, paneel, mededeling */ .wbd-lijf { display: grid; gap: 18px; min-height: 0; min-width: 0; } .wbd-lijf.met-paneel { grid-template-columns: minmax(0, 1fr) 380px; } .wbd-kolom { display: grid; grid-template-rows: 1fr auto; gap: 16px; min-height: 0; min-width: 0; } .wbd-tegels { display: grid; gap: 16px; align-content: stretch; min-width: 0; min-height: 0; } .wbd-tegels.k2 { grid-template-columns: repeat(2, 1fr); } .wbd-tegels.k3 { grid-template-columns: repeat(3, 1fr); } .wbd-tegels.k4 { grid-template-columns: repeat(4, 1fr); } .wbd-tegel { background: var(--tv2); border: 1px solid var(--tv-lijn); border-radius: 14px; padding: 18px 22px 14px; display: grid; grid-template-rows: auto 1fr auto; gap: 6px; min-height: 0; min-width: 0; position: relative; overflow: hidden; } .wbd-tegel.is-stop { border-color: var(--stop-licht); outline: 2px solid var(--stop-licht); outline-offset: -2px; } .wbd-t-lab { font-weight: 700; font-size: 19px; line-height: 1.15; color: var(--tv-ink2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .wbd-t-val { font-family: var(--font-mono); font-weight: 700; font-size: 64px; line-height: 1; letter-spacing: -.03em; align-self: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wbd-tegels.k4 .wbd-t-val { font-size: 50px; } .wbd-tegel.is-trend .wbd-t-val { font-size: 44px; align-self: start; } .wbd-t-val.is-goed { color: var(--goed-licht); } .wbd-t-val.is-let { color: var(--let-licht); } .wbd-t-val.is-stop { color: var(--stop-licht); } .wbd-t-def { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--tv-ink3); } .wbd-t-def span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wbd-t-trend { display: flex; align-items: flex-end; gap: 14px; align-self: center; color: var(--tv-ink2); } .wbd-t-trend svg { width: 200px; height: 52px; } .wbd-t-trend b { font-family: var(--font-mono); font-size: 22px; color: var(--tv-ink2); white-space: nowrap; } .wbd-t-doel { height: 12px; border-radius: 99px; background: var(--tv-lijn); overflow: hidden; align-self: center; } .wbd-t-doel i { display: block; height: 100%; background: var(--goed-licht); } .wbd-t-doel i.is-let { background: var(--let-licht); } .wbd-slot { border: 2px dashed var(--tv-lijn); border-radius: 14px; display: grid; place-items: center; color: var(--tv-ink3); font: 700 20px var(--font-ui); background: none; cursor: pointer; min-height: 0; } .wbd.is-bewerk .wbd-tegel, .wbd.is-bewerk .wbd-tellers > div { cursor: pointer; } .wbd.is-bewerk .wbd-tegel:hover, .wbd.is-bewerk .wbd-slot:hover, .wbd.is-bewerk .wbd-tellers > div:hover { outline: 3px solid var(--tv-ink2); outline-offset: -3px; } .wbd.is-bewerk .wbd-tegel.is-gekozen, .wbd.is-bewerk .wbd-tellers > div.is-gekozen { outline: 3px solid var(--let-licht); outline-offset: -3px; } .wbd-tegel:focus-visible, .wbd-slot:focus-visible, .wbd-tellers > div:focus-visible { outline: 3px solid var(--tv-ink); outline-offset: -3px; } .wbd-paneel { background: var(--tv2); border: 1px solid var(--tv-lijn); border-radius: 14px; padding: 18px 22px; display: grid; grid-template-rows: auto 1fr; gap: 12px; min-height: 0; overflow: hidden; } .wbd-p-kop { font-weight: 700; font-size: 19px; color: var(--tv-ink2); } .wbd-p-rij { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; font-size: 17px; padding: 8px 0; border-top: 1px solid var(--tv-lijn); } .wbd-p-rij b { display: block; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wbd-p-rij span { display: block; color: var(--tv-ink3); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wbd-p-rij em { font-style: normal; color: var(--tv-ink3); font-size: 14px; align-self: center; white-space: nowrap; } .wbd-p-rij em.is-goed { color: var(--goed-licht); } .wbd-p-rij em.is-let { color: var(--let-licht); } .wbd-p-balk { display: grid; grid-template-columns: 150px 1fr 70px; gap: 12px; align-items: center; font-size: 16px; padding: 7px 0; } .wbd-p-balk i { height: 14px; border-radius: 99px; background: var(--tv-lijn); overflow: hidden; display: block; } .wbd-p-balk i b { display: block; height: 100%; background: var(--tv-ink2); } .wbd-p-balk em { font-style: normal; font-family: var(--font-mono); text-align: right; color: var(--tv-ink2); } .wbd-med { background: var(--tv2); border: 1px solid var(--tv-lijn); border-radius: 14px; padding: 14px 22px; display: flex; gap: 18px; align-items: baseline; font-size: 22px; min-width: 0; } .wbd-med .mono { font-size: 14px; color: var(--tv-ink3); letter-spacing: .1em; text-transform: uppercase; flex: none; } .wbd-med strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* voet, band, overname */ .wbd-voet { display: flex; justify-content: space-between; gap: 16px; color: var(--tv-ink3); font-size: 13px; font-family: var(--font-mono); } .wbd-voet span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wbd-band { position: absolute; left: 0; right: 0; bottom: 0; background: var(--let-licht); color: var(--ink); padding: 14px 36px; font-size: 24px; font-weight: 700; display: flex; gap: 30px; align-items: center; white-space: nowrap; overflow: hidden; } .wbd-band small { font: 700 13px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; opacity: .8; } .wbd-overname { position: absolute; inset: 0; background: var(--tv); color: var(--tv-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 24px; padding: 0 8%; } .wbd-overname b { font-size: 92px; line-height: 1.05; color: var(--let-licht); letter-spacing: -.02em; } .wbd-overname span { font-size: 36px; color: var(--tv-ink2); } /* publiek bord en rustscherm */ .wbd-pub { display: grid; grid-template-rows: auto 1fr; gap: 26px; align-content: center; text-align: center; padding: 10px 40px; min-height: 0; } .wbd-pub h3 { font-size: 46px; font-weight: 800; letter-spacing: -.02em; margin: 0; text-wrap: balance; } .wbd-tellers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; } .wbd-tellers > div { background: var(--tv2); border: 1px solid var(--tv-lijn); border-radius: 16px; padding: 30px 20px; } .wbd-tellers b { display: block; font-family: var(--font-mono); font-size: 72px; font-weight: 700; letter-spacing: -.03em; color: var(--goed-licht); } .wbd-tellers span { font-size: 20px; color: var(--tv-ink2); font-weight: 600; } .wbd-tellers .wbd-slot { min-height: 160px; } .wbd--rust { grid-template-rows: 1fr; place-items: center; align-content: center; text-align: center; gap: 20px; } .wbd--rust .wbd-merk { font-size: 54px; justify-content: center; } .wbd--rust .wbd-merk img { height: 72px; max-width: 520px; } .wbd--rust p { margin: 0; font-size: 22px; color: var(--tv-ink2); max-width: 46ch; line-height: 1.5; } @media (prefers-reduced-motion: no-preference) { .wbd-t-val { transition: color .4s; } } /* ── wallboards.css ── */ /* ===================================================================== wallboards.css — Beheer › Wallboards (DISPLAYCAST, besluit 340). Eén scherm: kopband, tabbalk, kanaalkaarten die het bord zelf tonen, de editor met het bord links (het bord ís de editor) en de inspector rechts, schermkaarten per DisplayCast Pro, de omroep, de uitleg. Het bord zelf komt uit wallboard-bord.css. Tokens uit casa360-stijl, knoppen uit de familie; geen literals, geen pil op iets klikbaars. ===================================================================== */ .wbb.es-scherm { max-width: none; margin: 0; padding: 0; } .wbb-lijf { padding: 12px 16px 48px; display: grid; gap: 12px; min-width: 0; align-content: start; } .wbb-koppel { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; color: var(--ink2); margin-right: 10px; white-space: nowrap; } .wbb-koppel b { color: var(--ink); font-weight: 700; } .wbb-koppel i { width: 7px; height: 7px; border-radius: 50%; background: var(--grijs2); display: inline-block; } .wbb-koppel i.is-aan { background: var(--goed); } .wbb-koppel i.is-let { background: var(--let); } .wbb-koppel i.is-stop { background: var(--stop); } .wbb-tel { font-family: var(--font-mono); font-size: .62rem; background: var(--grijs); border-radius: var(--radius-pill); padding: 1px 6px; margin-left: 4px; color: var(--ink3); } .wbb-hint-kort { font-size: .74rem; color: var(--ink2); white-space: nowrap; } .wbb-hint { font-size: .78rem; color: var(--ink2); margin: 6px 0 0; } .wbb-sub { font-size: .74rem; color: var(--ink3); } .wbb-lab { width: 70px; flex: none; font-size: .76rem; color: var(--ink2); font-weight: 600; } .wbb-pad { font-size: .68rem; color: var(--ink3); } /* panelen en velden */ .wbb-paneel { background: var(--kaart); border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius); min-width: 0; padding: 0 0 8px; } .wbb-paneel--uitleg { padding: 0; } .wbb-paneel h2 { font-size: .95rem; margin: 10px 12px 4px; } .wbb-paneel__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px 4px; flex-wrap: wrap; } .wbb-uitleg { padding: 6px 12px 8px; margin: 0; font-size: .8rem; color: var(--ink2); line-height: 1.5; max-width: 92ch; } .wbb-uitleg b { color: var(--ink); } .wbb-uitleg--strak { padding-top: 0; } .wbb-veld { display: grid; gap: 4px; padding: 6px 12px; font-size: .74rem; color: var(--ink2); font-weight: 600; min-width: 0; } .wbb-veld input, .wbb-veld select { height: 30px; border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein); padding: 0 8px; background: var(--kaart); color: var(--ink); width: 100%; font: inherit; font-weight: 500; min-width: 0; } .wbb-veld--half { flex: 1 1 120px; padding-left: 0; padding-right: 0; } .wbb-veld--kop { flex: 0 0 120px; padding-left: 0; padding-right: 0; } .wbb-veld--rek { flex: 1 1 160px; padding-left: 0; padding-right: 0; } .wbb-rij { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 4px 12px 6px; min-width: 0; } .wbb-rij--strak { padding: 0; } .wbb-rij--tussen { justify-content: space-between; } .wbb-vink { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--ink); border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein); padding: 3px 8px; cursor: pointer; } .wbb-bron b { font-size: .9rem; color: var(--ink); } .wbb-kort { width: 64px !important; height: 26px !important; display: inline-block; } .wbb-zoek { padding: 0 12px 8px; } .wbb-zoek input { width: 100%; height: 30px; border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein); padding: 0 9px; background: var(--kaart); color: var(--ink); font: inherit; } .wbb-bronlijst { max-height: 320px; overflow: auto; border-top: var(--lijndikte) solid var(--lijn); } .wbb-groep { padding: 7px 12px 3px; font: .66rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); background: var(--grijs); } .wbb-bronrij { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; border: 0; border-top: var(--lijndikte) solid var(--lijn); background: none; text-align: left; padding: 7px 12px; cursor: pointer; font: inherit; color: inherit; min-height: 0; border-radius: 0; } .wbb-bronrij:hover { background: var(--accent-t2); } .wbb-bronrij.is-aan { background: var(--accent-t); } .wbb-bronrij b { display: block; font-size: .82rem; } .wbb-bronrij span { display: block; font-size: .72rem; color: var(--ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wbb-bronrij .k { font: .62rem var(--font-mono); letter-spacing: .08em; color: var(--ink3); } .wbb-bronrij .k.is-hoog { color: var(--stop); } .wbb-bronrij .k.is-pub { color: var(--goed); } .wbb-drempel { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 12px 6px; } .wbb-drempel label { display: grid; gap: 3px; font-size: .72rem; color: var(--ink2); font-weight: 600; } .wbb-drempel label i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; } .wbb-drempel i.is-let { background: var(--let); } .wbb-drempel i.is-stop { background: var(--stop); } .wbb-drempel input { height: 28px; border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein); padding: 0 7px; background: var(--kaart); color: var(--ink); width: 100%; font: inherit; } /* kanaalkaarten */ .wbb-kanalen { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; } .wbb-kaart { background: var(--kaart); border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius); overflow: hidden; text-align: left; padding: 0; display: flex; flex-direction: column; cursor: pointer; font: inherit; color: inherit; min-width: 0; min-height: 0; } .wbb-kaart:hover { border-color: var(--lijn2); background: var(--accent-t2); } .wbb-kaart:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .wbb-mini { border-bottom: var(--lijndikte) solid var(--lijn); } .wbb-mini--los { margin: 8px 12px 4px; border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius-klein); width: auto; } .wbb-kaart__voet { padding: 9px 12px 10px; display: grid; gap: 3px; min-width: 0; } .wbb-kaart__voet b { font-size: .88rem; } .wbb-kaart__voet > span { font-size: .74rem; color: var(--ink2); } .wbb-kaart__voet .r { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; } .wbb-kaart--nieuw { border-style: dashed; align-items: center; justify-content: center; min-height: 200px; color: var(--ink2); font-weight: 700; gap: 4px; } .wbb-kaart--nieuw span { font-weight: 500; font-size: .76rem; } /* editor */ .wbb-editor { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 12px; align-items: start; position: relative; } @media (max-width: 1100px) { .wbb-editor { grid-template-columns: 1fr; } } .wbb-stage { background: var(--kaart); border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius); padding: 10px; position: sticky; top: 8px; min-width: 0; } .wbb-stage .wbd-kader { border-radius: var(--radius-klein); } .wbb-stage__kop { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; font-size: .76rem; color: var(--ink2); } .wbb-inspector { display: grid; gap: 10px; min-width: 0; } /* programma: dagindeling als tijdlijn */ .wbb-dag { padding: 8px 2px 6px; margin-bottom: 10px; } .wbb-dag__uren { display: grid; grid-template-columns: repeat(16, 1fr); font: .64rem var(--font-mono); color: var(--ink3); margin-bottom: 4px; } .wbb-dag__balk { position: relative; height: 48px; border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius-klein); background: repeating-linear-gradient(90deg, transparent 0 calc(6.25% - 1px), var(--lijn) calc(6.25% - 1px) 6.25%); } .wbb-blok { position: absolute; top: 4px; bottom: 4px; border-radius: 6px; background: var(--accent-t); border: var(--lijndikte) solid var(--lijn2); padding: 3px 8px; font-size: .74rem; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; color: var(--ink); cursor: pointer; font-family: inherit; min-height: 0; } .wbb-blok small { display: block; font: 500 .62rem var(--font-mono); color: var(--ink3); } .wbb-blok.is-aan { outline: 3px solid var(--knop); outline-offset: -1px; } .wbb-blok--leeg { background: var(--grijs); color: var(--ink3); border-style: dashed; cursor: default; font-weight: 500; display: flex; align-items: center; } .wbb-dag__legenda { display: flex; gap: 14px; font-size: .72rem; color: var(--ink2); margin-top: 8px; flex-wrap: wrap; } .wbb-dag__legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--accent-t); border: var(--lijndikte) solid var(--lijn2); margin-right: 5px; vertical-align: -1px; } .wbb-dag__legenda i.is-standaard { background: var(--grijs); border-style: dashed; } .wbb-dag__legenda i.is-cec { height: 0; border: 0; border-top: 3px solid var(--goed); width: 14px; vertical-align: 2px; } /* schermen */ .wbb-schermen { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; } .wbb-schermkaart { background: var(--kaart); border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 8px; min-width: 0; align-content: start; } .wbb-schermkaart .k1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .wbb-schermkaart .k1 b { font-size: .9rem; } .wbb-schermkaart .k1 .mono { font-size: .7rem; color: var(--ink3); } .wbb-schermkaart .wbd-kader { border-radius: var(--radius-klein); } .wbb-stand { display: flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--ink2); flex-wrap: wrap; } .wbb-stand i { width: 9px; height: 9px; border-radius: 50%; background: var(--goed); flex: none; } .wbb-stand i.is-let { background: var(--let); } .wbb-stand i.is-stop { background: var(--stop); } .wbb-stand .chip { margin-left: auto; } .wbb-stand .chip + .chip { margin-left: 4px; } .wbb-regel { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; font-size: .76rem; align-items: center; min-width: 0; } .wbb-regel > span:first-child { color: var(--ink3); } .wbb-regel__veld { display: flex; gap: 6px; align-items: center; min-width: 0; flex-wrap: wrap; } .wbb-regel__veld select, .wbb-regel__veld input { height: 28px; border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein); background: var(--kaart); color: var(--ink); padding: 0 6px; flex: 1 1 140px; min-width: 0; font: inherit; font-size: .76rem; } .wbb-regel__veld--twee select { flex: 1 1 100px; } .wbb-regel__veld .bs-stempel { flex: 0 0 auto; } .wbb-url { display: flex; gap: 6px; align-items: center; min-width: 0; } .wbb-url code { flex: 1; min-width: 0; font: .7rem var(--font-mono); background: var(--grijs); border: var(--lijndikte) solid var(--lijn); border-radius: 6px; padding: 5px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink2); } .wbb-stappen { border-top: var(--lijndikte) solid var(--lijn); padding-top: 8px; display: grid; gap: 6px; } .wbb-stappen summary { cursor: pointer; font-weight: 700; font-size: .76rem; color: var(--ink2); list-style: none; } .wbb-stappen summary::before { content: "▸ "; color: var(--ink3); } .wbb-stappen[open] summary::before { content: "▾ "; } .wbb-stappen ol { margin: 0; padding-left: 18px; font-size: .76rem; color: var(--ink2); display: grid; gap: 4px; } .wbb-stappen ol b { color: var(--ink); } .wbb-schermkaart--nieuw { border-style: dashed; place-items: center; min-height: 220px; color: var(--ink2); font-weight: 700; text-align: center; cursor: pointer; font: inherit; font-weight: 700; } .wbb-schermkaart--nieuw span { display: block; font-weight: 500; font-size: .76rem; margin-top: 4px; } /* omroep */ .wbb-omroep { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; } @media (max-width: 900px) { .wbb-omroep { grid-template-columns: 1fr; } } .wbb-omroeprij { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 9px 12px; border-top: var(--lijndikte) solid var(--lijn); font-size: .8rem; align-items: center; } .wbb-omroeprij span { display: block; color: var(--ink3); font-size: .72rem; } /* zo werkt het */ .wbb-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; padding: 12px; align-items: stretch; } @media (max-width: 900px) { .wbb-flow { grid-template-columns: 1fr; gap: 12px; } } .wbb-flow > div { border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius); padding: 12px; position: relative; background: var(--kaart); min-width: 0; } .wbb-flow > div + div::before { content: "→"; position: absolute; left: -19px; top: 14px; color: var(--ink3); font-size: 18px; } @media (max-width: 900px) { .wbb-flow > div + div::before { content: "↓"; left: 14px; top: -18px; } } .wbb-flow h3 { margin: 0 0 6px; font-size: .88rem; } .wbb-flow .kicker { display: block; margin-bottom: 4px; } .wbb-flow ul { margin: 0; padding-left: 16px; font-size: .76rem; color: var(--ink2); display: grid; gap: 3px; } .wbb-flow .is-unifi { border-color: var(--let); } .wbb-tabel-wrap { overflow-x: auto; padding: 0 0 4px; } .wbb-tabel { width: 100%; border-collapse: collapse; font-size: .8rem; } .wbb-tabel th { text-align: left; font: .66rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); padding: 8px 12px; border-bottom: var(--lijndikte) solid var(--lijn); } .wbb-tabel td { padding: 8px 12px; border-bottom: var(--lijndikte) solid var(--lijn); vertical-align: top; color: var(--ink2); } .wbb-tabel td:first-child { color: var(--ink); font-weight: 700; } .wbb-tabel .ja { color: var(--goed); font-weight: 700; } .wbb-tabel .nee { color: var(--ink3); } /* tv-weergave */ .wbb-tvover { position: fixed; inset: 0; background: var(--tv); z-index: 60; display: grid; place-items: center; } .wbb-tvover__kader { width: min(100vw, calc(100vh * 16 / 9)); } .wbb-tvover__sluit { position: fixed; top: 14px; right: 14px; z-index: 61; } @media (prefers-reduced-motion: no-preference) { .wbb-kaart, .wbb-bronrij { transition: background var(--overgang), border-color var(--overgang); } } /* ── blauwdruk.css ── */ /* ===================================================================== blauwdruk.css — Bedrijf › Blauwdruk (BLAUWDRUK-BOUWSPEC, 06-10-2026). Werkbank-tokens; kleur alleen als betekenis: groen = afgeleid/vast, amber = te documenteren/open, rood = nakijken verlopen, paars = soortregister (eigenaar, stuurgetal). Geen literal in dit bestand. ===================================================================== */ .bd { max-width: var(--werkbreedte, 1240px); margin: 0 auto; width: 100%; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 14px; } .bd-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .bd-kop h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; } .bd-lead { margin: 6px 0 0; max-width: 78ch; font-size: .78rem; line-height: 1.6; color: var(--ink2); } .bd-regelset { font-size: .62rem; color: var(--ink3); align-self: center; } .bd-raster { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 14px; align-items: start; } @media (max-width: 1000px) { .bd-raster { grid-template-columns: minmax(0, 1fr); } } .bd-paneel { padding: 14px 16px; min-width: 0; } .bd-paneel + .bd-paneel { margin-top: 12px; } .bd-paneel h2 { font-size: .92rem; font-weight: 800; margin: 0 0 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; } .bd-paneel h3 { font-size: .78rem; font-weight: 800; margin: 12px 0 6px; display: flex; gap: 8px; align-items: center; } .bd-rij { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .bd-hint { margin: 0; font-size: .72rem; line-height: 1.6; color: var(--ink3); } .bd-zacht { color: var(--ink3); font-style: normal; font-size: .72rem; } .bd-def { margin: 0; font-size: .86rem; line-height: 1.6; } .bd-pil { display: inline-block; border-radius: 99px; padding: 2px 8px; font-size: .62rem; font-weight: 700; white-space: nowrap; line-height: 1.5; } .bd-pil.is-goed { background: var(--goed-t); color: var(--goed-d, var(--goed)); } .bd-pil.is-let { background: var(--let-t); color: var(--let-d, var(--let)); } .bd-pil.is-stop { background: var(--stop-t); color: var(--stop-d, var(--stop)); } .bd-pil.is-stil { background: var(--grijs); color: var(--ink2); } .bd-pil.is-paars { background: var(--paars-t); color: var(--paars); } .bd-chip { display: inline-flex; align-items: center; gap: 4px; border: var(--lijndikte) solid var(--lijn2); border-radius: 99px; padding: 2px 9px; font-size: .68rem; font-weight: 600; background: var(--kaart); text-decoration: none; color: var(--ink); cursor: default; } .bd-chip[data-bd-impact] { cursor: pointer; } .bd-chip[data-bd-impact]:hover { border-color: var(--accent); } .bd-chip.is-paars { background: var(--paars-t); color: var(--paars); border-color: transparent; } .bd-chip em { font-style: normal; font-size: .6rem; color: var(--ink3); } .bd-lijst { display: grid; gap: 6px; } .bd-lijst--lang { max-height: 60vh; overflow-y: auto; padding-right: 2px; } .bd-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: start; text-align: left; border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius-klein, 8px); padding: 9px 11px; background: var(--kaart); font: inherit; color: inherit; cursor: pointer; } .bd-item.is-aan { background: var(--accent-t); border-color: var(--accent); } .bd-item b { font-size: .8rem; } .bd-item em { display: block; font-style: normal; font-size: .66rem; color: var(--ink3); margin-top: 2px; } .bd-zoek { width: 100%; border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein, 8px); padding: 8px 10px; background: var(--kaart); color: var(--ink); margin-bottom: 8px; font: inherit; font-size: .78rem; } .bd-machine { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .74rem; } .bd-st { border: var(--lijndikte) solid var(--lijn2); border-radius: var(--radius-klein, 8px); padding: 4px 9px; font-weight: 600; background: var(--kaart); } .bd-pijl { color: var(--ink3); } .bd-poorten { display: grid; gap: 6px; } .bd-poort { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: .74rem; padding: 6px 10px; border: var(--lijndikte) solid var(--lijn); border-left: 3px solid var(--stop); border-radius: var(--radius-klein, 8px); background: var(--kaart); } .bd-poort code { font-size: .66rem; color: var(--stop-d, var(--stop)); } .bd-poort span { color: var(--ink2); } .bd-poort em { font-style: normal; font-size: .68rem; color: var(--ink2); } .bd-memo { background: var(--grijs); color: var(--ink); border-radius: var(--radius-klein, 8px); padding: 10px 12px; font-size: .8rem; line-height: 1.6; white-space: pre-wrap; } .bd-feiten { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 12px; font-size: .78rem; } .bd-feiten span { color: var(--ink3); } .bd-feiten b { font-weight: 500; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .bd-form { display: flex; flex-direction: column; gap: 10px; } .bd-velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; } .bd-vink { display: flex; align-items: center; gap: 8px; font-size: .78rem; } .bd-knop { border: var(--lijndikte) solid var(--lijn2); background: var(--kaart); border-radius: var(--radius-klein, 8px); padding: 7px 12px; font: inherit; font-size: .76rem; font-weight: 700; color: var(--ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; } .bd-knop--primair { background: var(--accent); color: var(--knop-ink); border-color: var(--accent); } .bd-knop--klein { padding: 3px 8px; font-size: .66rem; } .bd-knop:hover { border-color: var(--accent); } .bd-scroll { overflow-x: auto; } .bd-tabel { width: 100%; border-collapse: collapse; font-size: .76rem; } .bd-tabel th { text-align: left; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); padding: 6px 8px; border-bottom: var(--lijndikte) solid var(--lijn); white-space: nowrap; } .bd-tabel td { padding: 7px 8px; border-bottom: var(--lijndikte) solid var(--lijn); vertical-align: top; } .bd-tabel td.num { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; } .bd-tabel td.bd-uitw { max-width: 46ch; font-size: .72rem; color: var(--ink2); line-height: 1.5; } .bd-impact { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; } .bd-blok { border: var(--lijndikte) solid var(--lijn); border-radius: var(--radius-klein, 8px); padding: 10px 12px; background: var(--grijs); min-width: 0; } .bd-blok h4 { margin: 0 0 6px; font-size: .58rem; font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); font-weight: 600; } .bd-blok ul { margin: 0; padding-left: 16px; font-size: .72rem; line-height: 1.5; } .bd-begrip { text-decoration: underline dotted; cursor: help; } .bd-ctx { padding: 12px 0; border-bottom: var(--lijndikte) solid var(--lijn); display: flex; flex-direction: column; gap: 6px; } .bd-ctx h3 { margin: 0; font-size: .9rem; font-weight: 800; } .bd-begripregel { margin: 0; font-size: .76rem; line-height: 1.55; } .bd-begripregel b { font-weight: 700; } .bd-begripregel em { font-style: normal; color: var(--ink2); } .cluster-hoe { margin-left: auto; border: var(--lijndikte) solid var(--lijn2); background: var(--kaart); border-radius: var(--radius-klein); padding: 4px 12px; font: inherit; font-size: .7rem; font-weight: 700; color: var(--ink2); cursor: pointer; } .cluster-hoe:hover { color: var(--ink); border-color: var(--accent); } @media print { body.bd-print .nav, body.bd-print .rail, body.bd-print .cluster-tabs, body.bd-print .bd-lijst, body.bd-print .bd-knop, body.bd-print .bd-kpi { display: none !important; } body.bd-print .bd-raster { grid-template-columns: minmax(0, 1fr); } } /* ── beheerstart.css ── */ /* beheerstart.css — Beheer › Wat vraagt aandacht (BEHEER-RONDE2, 06-10-2026). Tokens uit casa360-stijl.css; kleur is betekenis: --stop blokkeert, --let vraagt werk, grijs is weten. De wortel volgt de module-norm. */ .bst { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 14px; } .bst .pm-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; } .bst .pm-kop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; } .bst .pm-kop p { margin: 0; max-width: 78ch; color: var(--ink2); font-size: .84rem; line-height: 1.5; } .bst-kopacties { display: flex; align-items: center; gap: 10px; } .bst-tijd { font-size: .64rem; color: var(--ink3); } .bst-gebied { padding: 12px 16px; } .bst-gebied h2, .bst-recent h2, .bst-snel h2 { margin: 0 0 8px; font-size: .9rem; font-weight: 800; display: flex; gap: 8px; align-items: baseline; } .bst-telling { font-size: .66rem; color: var(--ink3); font-weight: 600; } .bst-punt { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 0; border-top: var(--lijndikte) solid var(--lijn); } .bst-punt:first-of-type { border-top: 0; } .bst-dot { width: 10px; height: 10px; border-radius: 99px; background: var(--lijn2); } .bst-punt.is-stop .bst-dot { background: var(--stop); } .bst-punt.is-let .bst-dot { background: var(--let); } .bst-punt__tekst { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .bst-punt__tekst strong { font-size: .84rem; } .bst-punt__tekst em { font-style: normal; font-size: .74rem; color: var(--ink2); line-height: 1.45; } .bst-n { font-size: .8rem; font-weight: 700; min-width: 28px; text-align: right; } .bst-leeg { padding: 16px; display: flex; flex-direction: column; gap: 4px; font-size: .86rem; color: var(--ink2); } .bst-leeg strong { color: var(--ink); } .bst-inorde { margin: 0; font-size: .76rem; color: var(--ink3); } .bst-onder { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; align-items: start; } @media (max-width: 900px) { .bst-onder { grid-template-columns: minmax(0, 1fr); } .bst-punt { grid-template-columns: 12px minmax(0, 1fr); } .bst-n, .bst-punt .btn { grid-column: 2; justify-self: start; } } .bst-recent, .bst-snel { padding: 12px 16px; } .bst-recentlijst { display: flex; flex-direction: column; margin-bottom: 10px; } .bst-recentrij { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 10px; padding: 6px 0; border-top: var(--lijndikte) solid var(--lijn); font-size: .76rem; align-items: start; } .bst-recentrij:first-child { border-top: 0; } .bst-recentrij .mono { font-size: .66rem; color: var(--ink3); } .bst-recentrij em { display: block; font-style: normal; color: var(--ink2); font-size: .72rem; line-height: 1.45; } .bst-door { font-size: .68rem; color: var(--ink3); white-space: nowrap; } .bst-snelknoppen { display: flex; flex-wrap: wrap; gap: 8px; } /* blok F (12-10) · het tabblad Inrichting: klaar is groen, wat een poort dichthoudt rood, de rest amber */ .bst .bs-tabs { margin-bottom: 0; } .bst .bs-tab .mono { margin-left: 6px; } .bst-punt.is-klaar .bst-dot { background: var(--goed); } .bst-punt.is-klaar .bst-punt__tekst strong { font-weight: 600; color: var(--ink2); } .bst-inr { grid-template-columns: 12px minmax(0, 1fr) auto; align-items: start; } .bst-inr .bst-dot { margin-top: 5px; } .bst-acties { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .bst-punt__tekst em.bst-blok { color: var(--stop-d); font-weight: 700; } .bst-punt__tekst em.bst-bev { color: var(--goed-d); } .bst-uitleg { margin: 0; max-width: 84ch; color: var(--ink2); font-size: .82rem; line-height: 1.5; } @media (max-width: 900px) { .bst-inr { grid-template-columns: 12px minmax(0, 1fr); } .bst-acties { grid-column: 2; justify-content: flex-start; } } /* ── veldappsbeheer.css ── */ /* veldappsbeheer.css — module «Veldapps» (VELDAPPS-V8, besluit 257). Alleen tokens uit casa360-stijl.css; de werkbank-panelen (.wbpaneel/.wbrij) komen uit app.css, de regelset-editors staan hier. */ /* de ene kolom mag krimpen: zonder minmax(0, …) rekte een brede tabel de hele pagina op. De klasse .vb is ook de wortel van Veiligheid en bevoegdheden (veiligheid.css); daar duwde de matrix het scherm 700 px buiten beeld. */ .vb { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } .vb .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); display: block; margin: 0 0 6px; } .vb .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .vb-kop h1 { margin: 0 0 4px; font-size: 1.5rem; letter-spacing: -.02em; } .vb-kop p { margin: 0; color: var(--ink2); max-width: 76ch; } .vb-intro { margin: 0; color: var(--ink2); max-width: 86ch; } .vb-intro a { color: var(--ink); } .vb-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .vb-rest, .vb-voetnoot { margin: 0; font-size: .82rem; color: var(--ink3); } .vb-voetnoot { padding: 10px 0 2px; } .vb-leeg { margin: 0; padding: 14px 0; color: var(--ink3); } .vb-fout { color: var(--stop); } .vb .wbrij { grid-template-columns: 5px minmax(0, 1fr) auto auto; } .vb-rs[data-vb-tab] { cursor: pointer; } .vb-rs[data-vb-tab]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .vb-staaf { display: block; height: 6px; border-radius: 99px; background: var(--grijs); margin-top: 6px; overflow: hidden; } .vb-staaf i { display: block; height: 100%; background: var(--ink); border-radius: 99px; } /* de editor */ .vb-editor { display: grid; gap: 14px; padding: 18px 20px; border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--kaart); box-shadow: var(--schaduw-kaart); } .vb-editor.is-gewijzigd { border-color: var(--let); } .vb-editor__kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .vb-editor__kop h3 { margin: 0 0 4px; font-size: 1.1rem; } .vb-editor__kop p { margin: 0; color: var(--ink2); font-size: .9rem; max-width: 86ch; } .vb-velden { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px 18px; } .vb-veld { display: grid; gap: 4px; min-width: 0; } .vb-veld--breed { grid-column: 1 / -1; } .vb-veld--groei { flex: 1 1 260px; } .vb-label { font-size: .8rem; font-weight: 700; color: var(--ink2); } .vb-veld input:not([type=checkbox]), .vb-veld select, .vb-veld textarea, .vb-tabel input:not([type=checkbox]), .vb-tabel select { font: inherit; font-size: .9rem; padding: 8px 10px; border: 1px solid var(--lijn2); border-radius: var(--radius-klein); background: var(--kaart); color: var(--ink); min-width: 0; width: 100%; box-sizing: border-box; } .vb-veld input:focus-visible, .vb-veld select:focus-visible, .vb-veld textarea:focus-visible, .vb-tabel input:focus-visible, .vb-tabel select:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } .vb-vast { display: inline-block; padding: 8px 0; color: var(--ink2); font-size: .88rem; } .vb-schakel { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; font-size: .9rem; } .vb-schakel input { width: 18px; height: 18px; accent-color: var(--ink); } .vb-tabel { display: grid; gap: 6px; } .vb-tabel__kop, .vb-tabel__rij { display: grid; grid-template-columns: var(--kol); gap: 6px; align-items: center; } .vb-tabel__kop span { font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); } .vb-tabel__rij { padding: 4px 0; border-top: 1px solid var(--lijn); } .vb-x { border: 0; background: transparent; color: var(--ink3); cursor: pointer; font: inherit; padding: 6px; } .vb-x:hover { color: var(--stop); } .vb-x:focus-visible { outline: 3px solid var(--accent); } .vb-publiceer { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; padding-top: 12px; border-top: 1px solid var(--lijn); } .vb-publiceer [hidden] { display: none; } /* «Wijzigingen weggooien» staat er altijd en is verborgen zolang er niets gewijzigd is */ .vb-knop { font: inherit; font-weight: 700; font-size: .88rem; padding: 9px 14px; border-radius: var(--radius-klein); border: 1px solid var(--accent); background: var(--accent); color: var(--knop-ink); cursor: pointer; text-decoration: none; white-space: nowrap; } .vb-knop--licht { background: var(--kaart); color: var(--ink); border-color: var(--lijn2); } .vb-knop[aria-disabled="true"] { opacity: .45; cursor: not-allowed; } .vb-knop:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } @media (max-width: 900px) { .vb { padding: 18px 16px 56px; } .vb-twee { grid-template-columns: 1fr; } .vb-tabel__kop { display: none; } .vb-tabel__rij { grid-template-columns: 1fr 1fr; } } @media (prefers-reduced-motion: no-preference) { .vb-knop, .vb-editor { transition: border-color 160ms, background-color 160ms; } } /* APPS (besluiten 267–268) · de app-kaarten op het overzicht en de adressen */ .vb-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .vb-app { display: grid; gap: 10px; padding: 16px 18px; border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--kaart); box-shadow: var(--schaduw-kaart); } .vb-app__kop { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; } .vb-app__kop h3 { margin: 0 0 4px; font-size: 1.05rem; } .vb-app__kop p { margin: 0; font-size: .86rem; color: var(--ink2); } .vb-app__qr { flex: 0 0 84px; width: 84px; height: 84px; } .vb-app__qr svg { width: 84px; height: 84px; display: block; } .vb-app__adres { display: grid; gap: 2px; font-size: .82rem; word-break: break-all; } .vb-app__adres small { color: var(--ink3); } .vb-app__voet { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .82rem; color: var(--ink2); border-top: 1px solid var(--lijn); padding-top: 10px; } .vb-app__acties { display: flex; gap: 6px; } /* AP5 (07-10) · het koppelblok onder de adressen van een wereld: wat er nog te doen is en de opdracht die het doet */ .vb-koppel { display: grid; gap: 8px; margin: 6px 14px 12px; padding: 12px 14px; border: 1px dashed var(--lijn); border-radius: var(--radius-klein, 8px); background: var(--vlak, transparent); font-size: .88rem; color: var(--ink2); } .vb-koppel b { color: var(--ink); } .vb-koppel code { display: block; padding: 8px 10px; border-radius: var(--radius-klein, 8px); background: var(--grijs); color: var(--ink); font-size: .8rem; overflow-x: auto; white-space: pre; } .vb-koppel details { display: grid; gap: 6px; } .vb-koppel summary { cursor: pointer; color: var(--ink2); } .vb-koppel summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } /* ── dashboard.css ── */ /* dashboard.css — domein-dashboards (02-08, akkoord Michiel). Eén stramien voor Relaties · Verkoop · Uitvoering: KPI-strip, werkvoorraad-kaart met doorklik, één diagram (staafgroei-norm via de balk-klassen), signalen. Alleen tokens — geen losse literals. */ .dash-wortel { max-width: var(--werkbreedte, 1240px); margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; } .dash-h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; } .dash-raster { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; } .dash-zij { display: flex; flex-direction: column; gap: 14px; } .dash-lijst, .dash-diagram, .dash-signalen { padding: 14px 18px; display: flex; flex-direction: column; } .dash-kaartkop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 4px; } .dash-open { border: 0; background: none; padding: 0; font: inherit; font-size: .7rem; font-weight: 700; color: var(--c-groen-d); cursor: pointer; white-space: nowrap; } .dash-open:hover { text-decoration: underline; } .dash-rij { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 2px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; color: var(--c-ink); border-left: 0; border-right: 0; border-bottom: 0; background: none; width: 100%; text-align: left; font-family: inherit; cursor: pointer; text-decoration: none; } .dash-rij:hover { background: var(--c-paneel); } .dash-rij .chip { flex-shrink: 0; } .dash-ref { color: var(--c-groen-d); font-weight: 700; font-size: .7rem; } .dash-leeg { font-size: .78rem; color: var(--c-ink-3); margin: 8px 0 0; } .dash-balken { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .dash-balkrij { display: grid; grid-template-columns: 118px 1fr 44px; gap: 10px; align-items: center; font-size: .72rem; } .dash-balklbl { color: var(--c-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-baan { display: block; height: 10px; border-radius: var(--radius-pill); background: var(--c-paneel); overflow: hidden; } .dash-balk { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--c-sage); } .dash-balkrij b { text-align: right; font-size: .7rem; } .dash-signalen { gap: 2px; } .dash-signaal { font-size: .74rem; color: var(--c-ink-2); padding: 6px 2px; border: 0; background: none; text-align: left; font-family: inherit; width: 100%; } .dash-signaal.is-warm { color: var(--c-amber); font-weight: 600; } button.dash-signaal { cursor: pointer; color: var(--c-groen-d); } button.dash-signaal:hover { text-decoration: underline; } @media (max-width: 1000px) { .dash-raster { grid-template-columns: 1fr; } }