, zie de blok-isolatie in tests/test_capaciteitsvraag_samenvoegen.py). */ .beheer-form .radio-row { flex-wrap:wrap; gap:.6rem; } .beheer-form .radio-row > label { flex:1 1 240px; align-items:flex-start; gap:.55rem; border:1px solid var(--line); border-radius:var(--radius-s); padding:.6rem .8rem; font-size:.9rem; font-weight:600; cursor:pointer; } .beheer-form .radio-row > label:hover { border-color:var(--blue); } .beheer-form .radio-row > label:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-050); } .beheer-form .radio-row > label.uit { cursor:not-allowed; } .beheer-form .radio-row > label > input { margin-top:.1rem; flex:none; } .beheer-form .radio-kolom > label { flex:1 1 100%; } /* Met de rail aan verhuist de uitleg ernaartoe; het blok met focus krijgt een streepje zodat zichtbaar is waar de uitleg bij hoort. */ .js-uitleg .blok-uitleg { display:none; } .js-uitleg .instelblok { padding-left:.8rem; border-left:3px solid transparent; transition:border-color .12s ease; } .js-uitleg .instelblok:focus-within { border-left-color:var(--blue); } .opslaan-rij { display:flex; flex-wrap:wrap; align-items:center; gap:.9rem; margin-top:1.1rem; } .opslaan-rij .btn { margin-top:0; } .opslag-status { font-size:.85rem; font-weight:800; color:var(--groen); } .beheer-uitleg { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.1rem 1.2rem; position:sticky; top:1rem; display:flex; flex-direction:column; gap:.5rem; } .beheer-uitleg .uitleg-kop { font-size:1rem; } .beheer-uitleg .uitleg-blokkop { font-family:"Fredoka",system-ui,sans-serif; font-size:.9rem; color:var(--blue-d); margin:0 0 .3rem; } .beheer-uitleg .uitleg-tekst, .beheer-uitleg .uitleg-leeg { font-size:.85rem; margin:0; color:var(--ink); line-height:1.6; } .beheer-uitleg .uitleg-leeg { color:var(--ink-soft); } .beheer-uitleg .uitleg-voet { margin:.4rem 0 0; padding-top:.6rem; font-size:.78rem; color:var(--ink-soft); border-top:1px solid var(--line-2); } /* Stapelen op smallere schermen: de rail onder het formulier, niet ernaast. */ @media (max-width:1000px) { .beheer-werkblad.js-uitleg { grid-template-columns:minmax(0,1fr); } .beheer-uitleg { position:static; } } /* fase 5: popovers (B5.4) */ .uitleg-info { display:inline-block; position:relative; vertical-align:middle; margin-left:6px; } .uitleg-info summary { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:999px; border:1px solid var(--line); color:var(--ink-soft); background:var(--paper); cursor:pointer; list-style:none; } .uitleg-info summary::-webkit-details-marker { display:none; } .uitleg-info summary:hover, .uitleg-info summary:focus-visible { color:var(--blue-d); border-color:var(--blue); outline:none; } .uitleg-info-kaart { position:absolute; z-index:20; top:calc(100% + 6px); right:0; width:max-content; max-width:min(280px, 80vw); background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-s); box-shadow:0 8px 24px rgba(0,0,0,.12); padding:10px 12px; font-size:.82rem; color:var(--ink); line-height:1.4; } .uitleg-info-kaart p { margin:0 0 6px; } .uitleg-info-kaart a { font-size:.8rem; } .uitleg-info-kaart a:last-child { margin-bottom:0; } /* Op een smal scherm: rechts uitgelijnd voorkomt overloop over de linkerrand niet altijd bij een icoon dat zelf al dicht tegen de rechterkant staat -- klem daarom ook de breedte. */ @media (max-width:480px) { .uitleg-info-kaart { max-width:min(240px, 90vw); } } /* fase 5: setup (B5.2) — vinkjes-rail, knopkaarten en gangbaar-label verfijnen */ .setup-vragenlijst { list-style:none; margin:.4rem 0 0; padding-left:0; } .setup-vragenlijst li { display:flex; align-items:baseline; gap:.55rem; padding:.32rem 0; border-bottom:1px solid var(--line-2); } .setup-vragenlijst li:last-child { border-bottom:none; } .setup-vraagnr { flex:0 0 auto; width:1.35rem; height:1.35rem; border-radius:999px; background:var(--blue-050); color:var(--blue-d); font-size:.7rem; font-weight:800; display:inline-flex; align-items:center; justify-content:center; } .setup-badge-gangbaar { display:inline-block; font-size:.66rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-soft); background:var(--vlak); border:1px solid var(--line); border-radius:999px; padding:.08rem .5rem; margin-left:.4rem; } .setup-klaar-vink { color:var(--groen); font-weight:800; margin-right:.3rem; } /* fase 5: feedback (B5.5) */ /* Kaartweergave voor templates/feedback_mijn.html (artboard HulpF2.dc.html): elk feedbackitem als eigen kaart i.p.v. tabelrij. Hergebruikt .card en .statuschip* (fase 0/2). */ .feedback-lijst { display:flex; flex-direction:column; gap:.75rem; } .feedback-kaart { padding:1rem 1.25rem; } .feedback-kaart-kop { display:flex; align-items:center; flex-wrap:wrap; gap:.6rem; } .feedback-kaart-soort { font-weight:700; text-transform:capitalize; } .feedback-kaart-meta { margin-left:auto; font-size:.85rem; white-space:nowrap; } .feedback-kaart-bericht { margin:.5rem 0 0; line-height:1.5; } .feedback-mijn-voettekst { margin-top:1.5rem; } /* fase 5: hulpcentrum (B5.3) ---------------------------------------------------------- */ /* De handleiding opent als hulpcentrum: warme kop met zoekveld (crème mag hier -- geen datavlak), daaronder drie categoriekaarten als inhoudsopgave-laag boven de bestaande secties. Alles hieronder is puur presentatie; de h2-ankers zelf blijven ongemoeid, want support/handleiding.py leest die als kennisbron voor de supportbot. */ .hulp-hero { background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); padding:2rem 1.5rem 1.6rem; text-align:center; margin-bottom:1.25rem; } .hulp-hero h1 { font-size:1.6rem; margin:0; } .hulp-hero-kruimel { margin:0 0 .35rem; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); } .hulp-hero-sub { margin:.5rem auto 0; max-width:34rem; color:var(--ink-soft); font-size:.95rem; } .hulp-zoek { max-width:34rem; margin:1.1rem auto 0; } .hulp-zoek input { width:100%; font-family:inherit; font-size:.95rem; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:.75rem 1rem; box-shadow:var(--shadow); } .hulp-zoek input::placeholder { color:var(--grijs); } .hulp-zoek input:focus-visible { outline:2px solid var(--blue); outline-offset:2px; } .hulp-veelgezocht { margin:.75rem 0 0; font-size:.82rem; color:var(--ink-soft); } .hulp-veelgezocht a { font-weight:800; margin:0 .15rem; } .hulp-veelgezocht a + a::before { content:"·"; color:var(--grijs); margin-right:.45rem; } .hulp-categorieen { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.9rem; margin-bottom:.5rem; } .hulp-cat { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.1rem 1.2rem; } .hulp-cat-tegel { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--radius-s); margin-bottom:.6rem; font-family:"Fredoka",system-ui,sans-serif; font-weight:600; font-size:1rem; } .hulp-cat-tegel-blauw { background:var(--blue-050); color:var(--blue); } .hulp-cat-tegel-groen { background:var(--groen-bg); color:var(--groen); } .hulp-cat-tegel-oranje { background:var(--oranje-bg); color:var(--oranje); } .hulp-cat-titel { font-size:1rem; margin:0; } .hulp-cat-sub { margin:.3rem 0 .6rem; font-size:.82rem; color:var(--ink-soft); line-height:1.5; } .hulp-cat ul { margin:0; padding-left:1.05rem; font-size:.88rem; line-height:1.85; } /* Zoekstatus: zonder JS blijft dit blok verborgen (hidden-attribuut in het template). */ .hulp-zoekstatus { margin:0 0 .5rem; padding:.7rem .9rem; font-size:.88rem; color:var(--ink-soft); background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-s); } /* FAQ als accordion in artboard-stijl: rustige scheidingslijnen i.p.v. losse blokjes. */ .hulp-faq .hulp-faq-item { border-bottom:1px solid var(--line-2); padding:.7rem 0; } .hulp-faq .hulp-faq-item:last-child { border-bottom:0; padding-bottom:0; } .hulp-faq .hulp-faq-item:first-of-type { padding-top:0; } .hulp-faq .hulp-faq-item > summary { cursor:pointer; list-style:none; display:flex; align-items:baseline; gap:.6rem; font-size:.92rem; } .hulp-faq .hulp-faq-item > summary::-webkit-details-marker { display:none; } .hulp-faq .hulp-faq-item > summary::after { content:"+"; margin-left:auto; color:var(--blue); font-weight:800; flex-shrink:0; } .hulp-faq .hulp-faq-item[open] > summary::after { content:"\00d7"; } .hulp-faq .hulp-faq-item > summary:hover { color:var(--blue-d); } .hulp-faq .hulp-faq-item > summary:focus-visible { outline:2px solid var(--blue); outline-offset:3px; } .hulp-faq .hulp-faq-antwoord { margin-top:.5rem; } @media (max-width:900px) { .hulp-categorieen { grid-template-columns:minmax(0,1fr); } .hulp-hero { padding:1.5rem 1.1rem 1.2rem; } } /* fase 5: auth (B5.6) ----------------------------------------------------------------- */ /* Tweeluik voor alle schermen vóór het inloggen (templates/_auth.html): links een merkpaneel met de payoff en twee vertrouwenschips, rechts een crème vlak met de formulierkaart. De kaart houdt bewust de klasse .login-card, zodat de bestaande kaart-, label- en veldregels hierboven blijven gelden. Geen JS: de CSP laat geen inline script toe en deze schermen hebben het niet nodig. */ body.auth-page { display:block; background:var(--cream); } .auth-tweeluik { display:grid; grid-template-columns:1fr 1fr; min-height:100vh; } /* --- Merkpaneel --- */ .auth-merk { position:relative; overflow:hidden; background:var(--blue-d); color:#fff; display:flex; flex-direction:column; padding:44px 46px; } .auth-merk-blob, .auth-merk-ring { position:absolute; pointer-events:none; } .auth-merk-blob { width:300px; height:300px; top:-70px; right:-80px; background:var(--blue); border-radius:42% 58% 56% 44% / 56% 44% 56% 44%; } .auth-merk-ring { width:180px; height:180px; bottom:-40px; left:-40px; border-radius:999px; border:22px solid rgba(244,193,82,.25); } .auth-merk-logo { position:relative; margin:0; font-family:"Fredoka",system-ui,sans-serif; font-size:21px; font-weight:700; letter-spacing:.01em; } .auth-merk-logo span { opacity:.65; font-weight:600; } .auth-merk-onder { position:relative; margin-top:auto; } .auth-payoff { font-family:"Fredoka",system-ui,sans-serif; font-size:30px; font-weight:600; line-height:1.2; margin:0; color:#fff; } .auth-merk-regel { font-size:.87rem; opacity:.85; line-height:1.6; margin:12px 0 0; max-width:22rem; } .auth-chips { display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 0; padding:0; list-style:none; } .auth-chips li { background:rgba(255,255,255,.12); border-radius:999px; padding:5px 12px; font-size:.72rem; font-weight:700; letter-spacing:.01em; } /* --- Formulierzijde --- */ .auth-vorm { background:var(--cream); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 24px; } .auth-vorm .login-card { max-width:400px; padding:28px 32px; border-radius:20px; } .auth-stap { margin:0; font-size:.68rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--peach-d); } .auth-kop { font-size:1.3rem; margin:6px 0 10px; } .auth-inleiding { margin:0 0 1rem; font-size:.85rem; line-height:1.55; } .auth-vorm .login-uitleg { margin:1rem 0 0; } .auth-onderkaart { max-width:400px; margin:14px 0 0; text-align:center; color:var(--ink-soft); font-size:.8rem; line-height:1.55; } /* Een die er als hoofdknop uitziet (uitnodiging_ongeldig): .btn is inline-block, dus zonder deze regel staat de link links en onderstreept. */ .auth-knoplink { display:block; text-align:center; text-decoration:none; } .auth-qr { text-align:center; margin:0 0 1rem; } .auth-qr .qr { display:inline-block; background:#fff; padding:10px; border:1px solid var(--line); border-radius:var(--radius-s); max-width:100%; height:auto; } /* --- 2FA-code: één veld, visueel gesegmenteerd --- */ /* Zes losse vakjes zouden JS vragen (focus doorschuiven, plakken opsplitsen) en breken het plakken van een code. Daarom één veld met tekenafstand; text-indent compenseert de afstand ná het laatste teken, zodat de code optisch gecentreerd blijft. */ .auth-vorm .login-card input.auth-code { font-family:ui-monospace,"Cascadia Mono",Consolas,"Liberation Mono",monospace; font-size:1.5rem; font-weight:700; text-align:center; letter-spacing:.5em; text-indent:.5em; /* Witte achtergrond zoals elk ander invoerveld in het auth-tweeluik: de blauwe vulling was de enige gevulde input en oogde als een al ingevuld veld (ronde 1-bevinding). */ color:var(--blue-d); background:var(--paper); border:1.5px solid var(--blue); border-radius:var(--radius-s); padding:.65rem .4rem; } .auth-vorm .login-card input.auth-code::placeholder { color:var(--grijs); font-weight:600; } /* --- Smal scherm: merkpaneel wordt een compacte kopstrook, niets valt weg --- */ @media (max-width:820px) { .auth-tweeluik { grid-template-columns:1fr; min-height:100vh; } .auth-merk { padding:20px 22px 22px; } .auth-merk-blob { width:190px; height:190px; top:-70px; right:-60px; } .auth-merk-ring { width:120px; height:120px; bottom:-60px; left:-40px; border-width:16px; } .auth-merk-onder { margin-top:12px; } .auth-payoff { font-size:22px; } .auth-merk-regel { font-size:.8rem; margin-top:8px; max-width:none; } .auth-chips { margin-top:12px; gap:8px; } .auth-vorm { padding:24px 16px 40px; justify-content:flex-start; } .auth-vorm .login-card { padding:24px 20px; } } /* fase 5: popovers (B5.4) — vervolg: tekstglyph i.p.v. svg-icoon (kruisbevinding andere bouwer: een svg hier verstoorde test_ui_structuur's svg-telling en de eerste--regex in test_benchmark_pagina.py). Puur CSS, geen wijziging aan .uitleg-info/.uitleg-info-kaart. */ .uitleg-info-glyph { font-family:Georgia,'Times New Roman',serif; font-style:italic; font-weight:700; font-size:11px; line-height:1; } /* fase 5 herstelronde: [hidden]-vangnet. Author-display-regels (zoals .beheer-uitleg met display:flex en .hulp-categorieen met display:grid) verslaan anders de UA-regel [hidden]{display:none}, waardoor "verborgen" elementen gewoon zichtbaar bleven -- zonder JS stond de lege uitleg-rail op de beheerpagina, en tijdens het zoeken in het hulpcentrum bleven de categoriekaarten staan. */ [hidden] { display: none !important; } /* fase 5 herstelronde: de auth-schil heet nu body.auth-page (_auth.html); de oude regel .login-page .flash mikt daardoor nergens meer op. Zelfde marge als voorheen. */ .auth-page .flash { margin-bottom: 1rem; } /* B6.4: beheerder_planning.html als werklijst — kop per klant met kansen-teller. */ .pl-klant-kop { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; margin-bottom:.3rem; } .pl-klant-kop h3 { margin:0; } .pl-chip-telling { background:var(--groen-bg); color:#1c6b45; white-space:nowrap; } /* B6.6: beheerder-feedbacktriage -- kaartrij + inline statusactie voor de beheerder, in dezelfde kaarttaal als feedback_mijn.html (.feedback-lijst/.feedback-kaart, B5.5). Hergebruikt .card, .chip, .statuschip*, .filterbalk, .btn-ghost; geen nieuwe mechaniek. */ .triage-filterbalk { padding:.85rem 1rem; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); align-items:flex-end; } .triage-filterveld { display:flex; flex-direction:column; gap:.2rem; } .triage-filterveld label { font-weight:700; color:var(--ink-soft); font-size:.78rem; } .triage-kaart { display:flex; flex-direction:column; gap:.5rem; } .triage-scherm { font-size:.78rem; margin:0; } .triage-actierij { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:.25rem; padding-top:.6rem; border-top:1px solid var(--line); } .triage-actierij select { width:auto; } .triage-actierij input[type="text"] { flex:1 1 220px; min-width:160px; } /* --- UI-overhaul B6.1+B6.2: werklijst-tabel klanten (templates/beheerder.html) ----------- Twee kleine aanvullingen; alles verder hergebruikt table.beheer, .chip, .chip.uit, .dot, .sl-*, .intrek-bevestig(-inhoud), .module-bevestig en .tabel-scroll (fase 0-5). */ .dot-sm { width:10px; height:10px; box-shadow:none; display:inline-block; } /* De module-chip is nu een klikbare knop i.p.v. een losse badge: reset de browserstijl van