/* ═══════════════════════════════════════════════════════════════════════ HMP UI: gedeelde stylesheet van de template Eén bestand voor alle views. Klassenamen zijn gelijk aan die van de Omroep App manager (appbar, btn, panel, shell, landing-*, dash-*, …), zodat markup één-op-één over te nemen is. Inhoud 1. Tokens & basis 7. Tabellen & paginering 2. Appbar + profielmenu 8. Meldingen 3. Knoppen 9. Modals 4. Pills, badges, avatars 10. Dashboard (landing-*, dash-*) 5. Layout (shell, panel) 11. Account / detail 6. Formulieren 12. Sidebar-layout + chat 13. Auth- en foutpagina's 14. Footer, utilities, template-hulpjes 15. Focus & beweging 18. Tabel: sorteren, selectie, bulkbalk 16. Toasts & laden 19. Zijnavigatie (app-layout) 17. Actiemenu's (⋯) 20. Inhoudspagina, kaarten, utilities 21. Wizard 24. Slide-over 22. Tooltips 25. Lightbox en galerij 23. Accordion 26. Multi-select, datumbereik, wachtwoordsterkte, 2FA ═══════════════════════════════════════════════════════════════════════ */ /* ── 1. Tokens & basis ─────────────────────────────────────────────────── */ /* Donker is de standaard. De appbar en .theme-dark blijven altijd donker (het logo is daarop gemaakt); zet data-theme="light" op voor het lichte thema. Alle paren hieronder zijn op contrast gecontroleerd met _build/contrast.py (WCAG AA); de uitkomst staat op elements.html. */ :root,.appbar,.theme-dark{ --bg:#1e1e1f; --bg-deep:#0e0e0e; --panel:#2a2b2e; --panel-hi:#34363a; --surface-2:#232529; --inset:#1a1b1e; --field:#1f2022; --field-ro:#232427; --btn:#3b3d42; --tile:#3a3c41; --tile-hi:#4a4d54; --track:#777b84; --text:#e8e8ea; --text-strong:#f5f5f5; --text-soft:#c6c9d1; --text-dim:#b8bbc2; --muted:#9a9ea6; --accent:#ff9f1a; --accent-hi:#ffb347; --on-accent:#1f1400; --accent-text:#ff9f1a; --brand:#7a216d; --brand-lo:#4d0f45; /* paarse titelbalken, altijd met witte tekst */ --danger:#d04040; --danger-text:#ff8f8f; --danger-soft:#6a2b2b; --danger-soft-hi:#8b3a3a; --danger-soft-fg:#ffd4d4; --ok:#25813a; --ok-text:#8ef0b4; --info:#5a8dee; --focus:#ff9f1a; --ok-bg:#223428; --ok-fg:#c6f0d0; --err-bg:#392323; --err-fg:#ffc8c8; --warn-bg:#3a2f1f; --warn-fg:#f7d7b0; --info-bg:#222c3d; --info-fg:#cfdcf7; --line:#0006; --line-strong:#0007; --line-soft:#0004; --hero-bg:linear-gradient(135deg,#34363a 0%,#2a2b2f 44%,#2a2130 100%); --veil:rgba(30,30,31,.72); --skel-a:#2f3135; --skel-b:#3d4045; color-scheme:dark; } :root[data-theme=light]{ --bg:#f3f4f7; --bg-deep:#e6e8ee; --panel:#ffffff; --panel-hi:#eceef2; --surface-2:#f6f7f9; --inset:#e9ebef; --field:#ffffff; --field-ro:#f0f1f4; --btn:#e2e4e9; --tile:#e2e4e9; --tile-hi:#d3d6dd; --track:#8a8f99; --text:#1d1e22; --text-strong:#0f1012; --text-soft:#3b3e46; --text-dim:#4f535c; --muted:#5f646e; --accent-text:#9a5200; --focus:#9a5200; --danger-text:#b42323; --danger-soft:#f9dada; --danger-soft-hi:#f3c2c2; --danger-soft-fg:#8a1c1c; --ok-text:#1a6e2e; --ok-bg:#e3f5e7; --ok-fg:#14532d; --err-bg:#fde8e8; --err-fg:#8a1c1c; --warn-bg:#fff1dc; --warn-fg:#7a4300; --info-bg:#e5eefc; --info-fg:#1d3f8a; --line:rgba(0,0,0,.16); --line-strong:rgba(0,0,0,.2); --line-soft:rgba(0,0,0,.1); --hero-bg:linear-gradient(135deg,#ffffff 0%,#f7f5f9 60%,#f1eaf3 100%); --veil:rgba(255,255,255,.72); --skel-a:#e6e8ec; --skel-b:#f3f4f6; color-scheme:light; } :root{--radius:16px; --radius-sm:10px; --appbar-h:68px; --infobar-h:76px} *{box-sizing:border-box} [hidden]{display:none!important} html,body{height:100%} body{margin:0;background:var(--bg);color:var(--text);font:16px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; height:auto;min-height:100vh;display:flex;flex-direction:column} body.has-canvas{background:var(--bg-deep)} #bg-canvas{position:fixed;inset:0;z-index:0;pointer-events:none} a{color:var(--accent-text)} code,kbd{background:var(--inset);border:1px solid var(--line);border-radius:6px;padding:2px 6px;color:var(--text);font:13px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} hr{border:none;border-top:1px solid var(--line);margin:8px 0} /* ── 2. Appbar + profielmenu ───────────────────────────────────────────── */ .appbar{display:flex;align-items:center;gap:10px;padding:10px 14px;min-height:var(--appbar-h);background:linear-gradient(#1d1d1e,#151516);border-bottom:1px solid #0007;position:sticky;top:0;z-index:100} .appbar,.theme-dark{color:var(--text)} /* tokens zijn hier donker; de tekstkleur moet opnieuw gezet worden, anders erft hij die van de body */ .appbar.env-test{background:linear-gradient(#2d1845,#1a0e2e)} .appbar>a.appbar-logo{display:flex;align-items:center;height:48px;flex-shrink:0} .appbar .logo{height:48px;width:auto;display:block} .appbar>b{font-size:16px;font-weight:700;white-space:nowrap} .appbar .spacer{flex:1} .appbar select{width:auto;padding:7px 10px;border-radius:8px;border:1px solid #3a3c41;background:var(--bg);color:var(--text);font:inherit;font-size:14px} .appbar .btn{white-space:nowrap;position:relative} .appbar-nav{display:contents} .appbar-hamburger{display:none;background:none;border:none;color:var(--text);font-size:22px;cursor:pointer;padding:6px 8px;border-radius:8px;line-height:1} .appbar-hamburger:hover{background:var(--panel-hi)} .appbar-badge{position:absolute;top:-6px;right:-6px;background:#f44;color:#fff;font-size:10px;font-weight:700;min-width:18px;height:18px;line-height:18px;text-align:center;border-radius:9px;padding:0 4px;pointer-events:none} .appbar-profile{position:relative;flex-shrink:0;margin-left:4px} .appbar-avatar{width:42px;height:42px;border-radius:50%;border:2px solid var(--line);background:var(--accent) center/cover;color:var(--on-accent);font-family:inherit;font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:box-shadow .15s} .appbar-avatar:hover,.appbar-profile.open .appbar-avatar{box-shadow:0 0 0 3px #fff3} .appbar-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:260px;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:0 18px 40px rgba(0,0,0,.45);padding:10px 0;display:none;z-index:300} .appbar-profile.open .appbar-menu{display:block} .appbar-menu-name{padding:8px 22px 2px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .appbar-menu-role{padding:0 22px 8px;font-size:12px;color:var(--muted)} .appbar-menu a{display:block;padding:11px 22px;color:var(--text);text-decoration:none;font-size:16px;white-space:nowrap} .appbar-menu a:hover{background:var(--panel-hi)} .appbar-menu a small{display:block;font-size:11px;color:var(--muted);margin-top:1px} .appbar-menu .sep{height:1px;background:var(--line);margin:8px 0} .appbar-menu a.danger{color:var(--danger-soft-fg)} .appbar-menu a.impersonate{color:var(--accent-hi);font-weight:600} .appbar-menu a.current{color:var(--accent-text);font-weight:700} /* ── 3. Knoppen ────────────────────────────────────────────────────────── */ .btn{background:var(--btn);border:0;color:var(--text);padding:8px 12px;border-radius:var(--radius-sm);cursor:pointer;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:14px;line-height:1.2;margin:0;text-decoration:none} .btn:hover{background:var(--tile-hi)} .btn.accent{background:var(--accent);color:var(--on-accent);font-weight:700} .btn.accent:hover{background:var(--accent-hi)} .btn.danger{background:var(--danger-soft);color:var(--danger-soft-fg)} .btn.danger:hover{background:var(--danger-soft-hi)} .btn.small{padding:6px 8px;border-radius:8px;font-size:13px} .btn.large{padding:11px 16px} .btn.block{display:flex;width:100%} .btn svg{width:16px;height:16px} .btn:disabled,.btn.disabled{background:var(--btn)!important;color:var(--muted)!important;cursor:not-allowed;opacity:.8;filter:grayscale(.2)} .btn.loading{position:relative;color:transparent!important} .btn.loading::after{content:"";position:absolute;width:12px;height:12px;border:2px solid var(--accent);border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite} .btn.accent.loading::after{border-color:var(--on-accent);border-top-color:transparent} @keyframes spin{to{transform:rotate(360deg)}} .btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .btn-group{display:inline-flex} .btn-group .btn{border-radius:0} .btn-group .btn:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm)} .btn-group .btn:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0} .btn-group .btn+.btn{border-left:1px solid var(--line-soft)} /* ── 4. Pills, badges, avatars ─────────────────────────────────────────── */ .pill{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid var(--line);background:#0003;color:var(--text-dim);font-size:12px} .pill.accent{background:rgba(255,159,26,.2);color:var(--accent-text);border-color:rgba(255,159,26,.3)} .pill.solid{background:var(--accent);color:var(--on-accent)} .pill.ok{background:var(--ok);color:#fff} .pill.brand{background:var(--brand);color:#fff;border-color:var(--brand-lo)} .pill.danger{background:var(--danger-soft);color:var(--danger-soft-fg)} .unread-badge{background:var(--accent);color:var(--on-accent);border-radius:999px;min-width:20px;height:20px;padding:0 6px;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0} .status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--muted);margin-right:5px} .status-dot.ok{background:var(--ok-text)} .status-dot.accent{background:var(--accent)} .status-dot.danger{background:var(--danger)} .avatar{width:48px;height:48px;border-radius:50%;background:var(--accent) center/cover;color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;flex-shrink:0} .avatar.small{width:32px;height:32px;font-size:14px} .avatar.large{width:64px;height:64px;font-size:28px} .avatar.user{color:#fff} .avatar.open{border-radius:8px;background-size:contain;background-repeat:no-repeat} /* ── 5. Layout: shell, panels ──────────────────────────────────────────── */ .shell{display:grid;grid-template-columns:1fr 340px;gap:14px;padding:14px;align-items:start;position:relative;z-index:1} .shell.single{grid-template-columns:1fr} .shell.narrow{grid-template-columns:1fr;max-width:788px;width:100%;margin:0 auto} .shell.sidebar-left{grid-template-columns:260px 1fr} .stack{display:flex;flex-direction:column;gap:14px;min-width:0} .panel{background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;min-width:0} .panel>h3,.panel-head{margin:0;padding:12px 14px;background:var(--panel-hi);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);display:flex;justify-content:space-between;align-items:center;gap:10px} .panel-head .btn{text-transform:none;letter-spacing:0;font-weight:400} .panel-body{padding:14px} .panel-body>p{margin:0 0 10px} .panel-body>:last-child{margin-bottom:0} .panel-toolbar{padding:10px;display:flex;gap:8px;align-items:center} .panel-toolbar input{flex:1} .panel .board{overflow:auto} .side-actions{display:flex;flex-direction:column;gap:8px;padding:14px} .side-actions .btn{width:100%} .side-list{display:grid;gap:8px;padding:14px} .side-list>div{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:14px} .side-list>div>span:first-child{color:var(--text-dim)} .section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:16px 0 8px} .empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);text-align:center;padding:32px 24px;gap:6px} .empty-state svg{width:48px;height:48px;margin-bottom:6px;opacity:.6} .empty-state h2{color:var(--text-dim);font-size:18px;margin:0} .empty-state p{margin:0 0 8px;font-size:14px} /* Tabs */ .tabs{display:flex;gap:4px;padding:8px 10px 0;background:var(--panel-hi);border-bottom:1px solid var(--line);overflow-x:auto} .tab{background:none;border:0;color:var(--text-dim);font:inherit;font-size:14px;padding:9px 14px;border-radius:10px 10px 0 0;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent} .tab:hover{color:var(--text);background:#0002} .tab.active{color:var(--accent-text);font-weight:700;background:var(--panel);border-bottom-color:var(--accent)} /* ── 6. Formulieren ────────────────────────────────────────────────────── */ label{display:block;margin:4px 0;color:var(--text-dim);font-size:14px} input[type=text],input[type=password],input[type=email],input[type=url],input[type=tel],input[type=number],input[type=search], input[type=date],input[type=time],input[type=datetime-local],select,textarea{width:100%;padding:10px;border-radius:8px;border:1px solid var(--line);background:var(--field);color:var(--text);font:inherit;font-size:15px;transition:border-color .2s} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 1px var(--focus) inset} input[readonly],input:disabled,select:disabled,textarea:disabled{color:var(--text-dim);background:var(--field-ro);cursor:not-allowed} input::placeholder,textarea::placeholder{color:var(--muted)} textarea{resize:vertical;min-height:90px} textarea.tall{min-height:420px} input[type=checkbox],input[type=radio]{cursor:pointer;accent-color:var(--accent);width:18px;height:18px;margin:0} input[type=range]{width:100%;accent-color:var(--accent)} input[type=color]{width:48px;height:40px;padding:2px;border-radius:8px;border:1px solid var(--line);background:var(--field);cursor:pointer} input[type=file]{color:var(--text-dim);font-size:13px;max-width:100%} input[type=file]::file-selector-button{background:var(--btn);color:var(--text);border:0;border-radius:8px;padding:7px 10px;margin-right:10px;font:inherit;cursor:pointer} input[type=file]::file-selector-button:hover{background:var(--tile-hi)} input.is-invalid,select.is-invalid,textarea.is-invalid{border-color:var(--danger)} input.code-input{letter-spacing:4px;font:20px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-align:center} .form-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;padding:14px} .col-12{grid-column:span 12}.col-8{grid-column:span 8}.col-6{grid-column:span 6}.col-4{grid-column:span 4}.col-3{grid-column:span 3} .field-error{color:var(--danger-text);font-size:12px;margin-top:4px} .hint{font-size:12px;color:var(--text-dim);margin-top:4px} .check{display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--text);margin:0;font-size:14px} .input-group{display:flex;gap:8px} .input-group input{flex:1;min-width:0} .search-row{position:relative;flex:1} .search-row svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--muted);pointer-events:none} .search-row input{padding-left:32px} .toggle-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;margin:0} .toggle-switch input{display:none} .toggle-switch .track{position:relative;width:38px;height:22px;background:var(--track);border-radius:11px;transition:background .2s;flex-shrink:0} .toggle-switch .track::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s} .toggle-switch input:checked+.track{background:var(--accent)} .toggle-switch input:checked+.track::after{transform:translateX(16px)} .toggle-switch .label{font-size:14px;color:var(--text)} .dropzone{border:1px dashed var(--track);border-radius:var(--radius-sm);padding:22px 12px;text-align:center;color:var(--text-dim);cursor:pointer;background:var(--field);font-size:13px;transition:.2s} .dropzone strong{display:block;color:var(--text);margin-bottom:4px;font-size:14px} .dropzone:hover,.dropzone.highlight{background:var(--panel-hi);border-color:var(--accent);outline:2px dashed var(--accent);outline-offset:1px} .preview{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-sm);background:var(--inset);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px} .upload-item{background:var(--tile);border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 10px;font-size:13px;display:flex;flex-direction:column;gap:6px} .upload-item .upload-name{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .progress-bar{background:var(--line);border-radius:6px;height:8px;overflow:hidden} .progress-fill{background:var(--accent);height:100%;width:0;transition:width .2s} .upload-item.done .progress-fill{background:var(--ok)} .upload-item.error .progress-fill{background:var(--danger)} /* Editor-werkbalk (plek van de rich-text editor) */ .editor-toolbar{display:flex;gap:4px;flex-wrap:wrap;padding:6px;border:1px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0;background:var(--panel-hi)} .editor-toolbar .btn{background:none;padding:6px 9px;min-width:32px} .editor-toolbar .btn:hover{background:#0003} .editor-toolbar .sep{width:1px;background:var(--line);margin:4px 4px} .editor-toolbar+textarea{border-radius:0 0 8px 8px} /* ── 7. Tabellen & paginering ──────────────────────────────────────────── */ .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .data-table{width:100%;border-collapse:collapse} .data-table thead th{position:sticky;top:0;background:var(--panel);text-align:left;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap} .data-table tbody td{padding:8px 10px;border-bottom:1px solid var(--line-soft);vertical-align:middle;font-size:14px} .data-table tbody tr:hover td{background:#0002} .data-table tbody tr:last-child td{border-bottom:none} .data-table tr.marked td:first-child{box-shadow:inset 4px 0 0 var(--accent)} .data-table .center{text-align:center} .data-table .num{text-align:right;font-variant-numeric:tabular-nums} .data-table .title-link{color:var(--text);font-weight:600;text-decoration:none} .data-table .title-link:hover{color:var(--accent-text)} .thumb{width:64px;height:40px;object-fit:cover;border-radius:6px;background:var(--inset);display:block} .row-actions{display:flex;gap:8px;flex-wrap:wrap} .pagination{display:flex;gap:6px;flex-wrap:wrap;padding:12px;align-items:center} .pagination .muted{margin-left:auto;font-size:12px} /* ── 8. Meldingen ──────────────────────────────────────────────────────── */ .flash{padding:12px 14px;border-radius:var(--radius-sm);font-size:14px;border-left:4px solid var(--track);background:var(--panel-hi)} .flash.page{margin:14px 14px 0;position:relative;z-index:1} .flash.ok{border-color:var(--ok);background:var(--ok-bg);color:var(--ok-fg)} .flash.err{border-color:var(--danger);background:var(--err-bg);color:var(--err-fg)} .flash.warn{border-color:var(--accent);background:var(--warn-bg);color:var(--warn-fg)} .flash.info{border-color:var(--info);background:var(--info-bg);color:var(--info-fg)} .errbox{background:var(--field);border:1px solid var(--line);border-left:4px solid var(--danger);border-radius:var(--radius-sm);padding:10px 12px} .errbox-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--danger-text);font-weight:700;margin-bottom:6px} .errbox pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} /* ── 9. Modals ─────────────────────────────────────────────────────────── */ .modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.62);backdrop-filter:blur(4px);z-index:400} .modal.open{display:flex} .dialog{width:min(520px,92vw);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;max-height:92vh;overflow-y:auto} .dialog.wide{width:min(780px,95vw)} .dialog p{margin:0 0 10px} .dialog .form-grid{padding:0} .dialog .section-title{margin:16px 0 8px} .modal-titlebar{margin:-18px -18px 14px;min-height:52px;padding:12px 18px;border-radius:var(--radius) var(--radius) 0 0;background:linear-gradient(180deg,var(--brand) 0%,#66155b 55%,var(--brand-lo) 100%);border-bottom:1px solid rgba(0,0,0,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center} .modal-titlebar.danger{background:linear-gradient(180deg,#8b3a3a,#5c1f1f)} .modal-titlebar h4{margin:0;color:#fff;font-size:15px;font-weight:800;letter-spacing:.03em;text-shadow:0 1px 1px rgba(0,0,0,.28);text-align:center} .dialog .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px} /* ── 10. Dashboard ─────────────────────────────────────────────────────── */ .landing-wrap{position:relative;z-index:1;padding:24px} .landing-grid{width:min(1400px,100%);margin:0 auto;display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-areas:"hero hero hero hero" "cards cards sidebar sidebar" "info info info info"} .landing-grid.no-sidebar{grid-template-areas:"hero hero hero hero" "cards cards cards cards" "info info info info"} .landing-main{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr));grid-area:cards;align-content:start} .landing-grid.no-sidebar .landing-main{grid-template-columns:repeat(4,minmax(0,1fr))} .landing-hero,.landing-card,.landing-info,.dash-stats{background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:0 12px 24px rgba(0,0,0,.2)} .landing-hero{grid-area:hero;padding:20px;background:var(--hero-bg)} .landing-hero h1{margin:0 0 8px;font-size:clamp(24px,3vw,34px);line-height:1.1;letter-spacing:.01em} .landing-hero p{margin:0;color:var(--text-soft);max-width:75ch} .landing-card{padding:16px;display:grid;gap:10px;align-content:start} .landing-card h2{margin:0;font-size:18px} .landing-card p{margin:0;color:var(--text-dim);font-size:14px} .landing-card>.btn{justify-self:start;margin-top:4px} .landing-card .card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px} .card-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-text);font-weight:700} .landing-sidebar{grid-area:sidebar;display:grid;gap:16px;align-content:start} .landing-info{grid-area:info;padding:14px 16px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center} .landing-pill{padding:6px 10px;border-radius:999px;background:var(--btn);color:var(--text);font-size:13px;border:1px solid var(--line)} .landing-warning{grid-column:1/-1;padding:12px 14px;border-radius:12px;border-left:4px solid var(--accent);background:var(--warn-bg);color:var(--warn-fg);font-size:14px} .dash-stats{padding:16px} .dash-stats-title{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-text);font-weight:700;margin:0 0 12px} .dash-stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} .dash-stat{background:var(--surface-2);border-radius:var(--radius-sm);padding:10px 12px;border:1px solid var(--line);min-width:0} .dash-stat.wide{grid-column:1/-1} .dash-stat.split{display:flex;gap:12px} .dash-stat.split>div{flex:1;min-width:0} .dash-stat.split>div+div{border-left:1px solid var(--line);padding-left:12px} .dash-stat-value{font-size:22px;font-weight:800;line-height:1.1;color:var(--text-strong);letter-spacing:-.5px} .dash-stat-value.accent{color:var(--accent-text)}.dash-stat-value.danger{color:var(--danger-text)}.dash-stat-value.ok{color:var(--ok-text)} .dash-stat-label{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.3} .dash-stat-head{font-size:11px;font-weight:600;color:var(--muted);margin:0 0 6px} .dash-bar-row{display:flex;align-items:flex-end;gap:3px;height:28px;margin-top:6px} .dash-bar{flex:1;border-radius:3px 3px 0 0;min-height:2px;background:var(--accent)} .dash-progress{height:6px;border-radius:3px;background:var(--inset);margin-top:8px;overflow:hidden;display:flex} .dash-progress-fill{height:100%;background:var(--accent)} .dash-funnel{display:grid;gap:5px} .dash-funnel-step{display:flex;align-items:center;gap:10px} .dash-funnel-bar-wrap{flex:1;min-width:0;height:18px;background:var(--inset);border-radius:4px;overflow:hidden} .dash-funnel-bar{height:100%;border-radius:4px;min-width:6%;background:var(--accent)} .dash-funnel-info{display:flex;align-items:baseline;gap:6px;min-width:130px} .dash-funnel-count{font-size:15px;font-weight:800;color:var(--text-strong);min-width:22px;text-align:right} .dash-funnel-label{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dash-list{display:grid;gap:4px} .dash-list>div{display:flex;align-items:center;gap:6px;font-size:11px;padding:4px 6px;background:var(--inset);border-radius:6px} .dash-list .what{color:var(--text-soft);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dash-list .when{color:var(--muted);flex-shrink:0} .dash-list .status-dot{width:6px;height:6px;margin:0;flex-shrink:0} /* ── 11. Account / detail ──────────────────────────────────────────────── */ .acc-head{display:flex;align-items:center;gap:16px;padding:18px 14px;border-bottom:1px solid var(--line)} .acc-head .name{font-size:18px;font-weight:700} .acc-head .sub{color:var(--text-dim);font-size:13px;margin-top:2px} .acc-section{padding:14px 14px 4px} .acc-section-title{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:14px} .acc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .acc-section label{color:var(--text);font-size:15px;margin:0 0 6px} .acc-hint{color:var(--text-dim);font-size:13px;margin:8px 0 14px} .acc-actions{padding:6px 14px 18px;display:flex;gap:10px;align-items:center} /* ── 12. Sidebar-layout + chat (volledige hoogte) ──────────────────────── */ body.fullscreen{overflow:hidden;height:100%} .layout-sidebar{display:flex;height:calc(100vh - var(--appbar-h));height:calc(100dvh - var(--appbar-h));overflow:hidden} .layout-sidebar .sidebar{width:340px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden} .layout-sidebar .sidebar-header{padding:14px;border-bottom:1px solid var(--line);display:grid;gap:8px} .layout-sidebar .sidebar-list{flex:1;overflow-y:auto;padding:8px} .layout-sidebar .content{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0} .sidebar-item{padding:10px 12px;border-radius:var(--radius-sm);cursor:pointer;transition:background .15s;margin-bottom:4px;border-left:3px solid transparent;display:flex;gap:10px;align-items:center} .sidebar-item:hover,.sidebar-item.active{background:var(--panel-hi)} .sidebar-item.active{border-left-color:var(--accent)} .sidebar-item-main{flex:1;min-width:0} .sidebar-item-line{display:flex;align-items:baseline;gap:8px} .sidebar-item-title{font-weight:600;font-size:14px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sidebar-item-meta{font-size:12px;color:var(--text-dim);margin-top:2px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sidebar-item-time{font-size:11px;color:var(--muted);flex-shrink:0} .sidebar-item.unread .sidebar-item-title{color:var(--text-strong)} .sidebar-item.unread .sidebar-item-meta{color:var(--text)} .sidebar-empty{color:var(--muted);font-size:13px;text-align:center;padding:24px 12px} .conv-header{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--panel)} .conv-header-info{flex:1;min-width:0} .conv-header-name{font-weight:700;font-size:16px} .conv-header-meta{font-size:12px;color:var(--text-dim);display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:2px} .back-btn{display:none} .chat-messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px} .msg-row{display:flex;gap:8px;align-items:flex-end} .msg-row.from-admin{justify-content:flex-end} .msg-stack{display:flex;flex-direction:column;max-width:65%} .msg-row.from-admin .msg-stack{align-items:flex-end} .msg-bubble{padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.4;background:var(--panel-hi);white-space:pre-wrap;overflow-wrap:anywhere;border-bottom-left-radius:4px} .msg-row.from-admin .msg-bubble{background:var(--accent);color:var(--on-accent);border-radius:16px;border-bottom-right-radius:4px} .msg-row .avatar.small{width:28px;height:28px;font-size:12px} .msg-spacer{width:28px;flex-shrink:0} .msg-time{font-size:10px;color:var(--muted);margin-top:4px} .date-separator{text-align:center;font-size:11px;color:var(--muted);padding:8px 0;position:relative} .date-separator::before,.date-separator::after{content:"";position:absolute;top:50%;width:35%;height:1px;background:var(--line)} .date-separator::before{left:0}.date-separator::after{right:0} .composer-wrap{border-top:1px solid var(--line);background:var(--panel)} .send-as{display:flex;align-items:center;gap:8px;padding:10px 14px 0;font-size:12px;color:var(--text-dim)} .send-as select{width:auto;padding:5px 8px;font-size:13px} .chat-input-area{padding:12px 14px;display:flex;gap:8px;align-items:flex-end} .chat-input-area textarea{flex:1;min-height:40px;max-height:120px;resize:none} .avatar-pick{display:flex;align-items:center;gap:14px;margin-bottom:6px} /* ── 13. Auth- en foutpagina's (gecentreerde kaart) ────────────────────── */ body.auth-page{justify-content:center;align-items:center;padding:20px;background:#0e0e0e; /* inlogscherm: altijd donkere achtergrond, de kaart volgt het thema */ font-size:15px;line-height:1.5} .page-logo{position:relative;z-index:1;display:flex;justify-content:center;margin-bottom:16px} .page-logo img{width:400px;max-width:70vw;height:auto;display:block} .auth-card{position:relative;z-index:1;width:min(560px,100%);background:var(--panel);border-radius:var(--radius);border:1px solid var(--line-strong);box-shadow:0 16px 36px rgba(0,0,0,.25);overflow:hidden} .auth-head{padding:18px 20px;background:linear-gradient(180deg,var(--brand) 0%,#5c174f 100%);color:#fff;font-weight:700;font-size:18px;display:flex;align-items:center;gap:12px} .auth-head .code{margin-left:auto;font-size:12px;font-weight:800;letter-spacing:.08em;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.18)} .auth-body{padding:20px;display:grid;gap:12px} .auth-body p{margin:0} .auth-body form{display:grid;gap:10px} .auth-body label{font-weight:600;font-size:13px;margin:0} .auth-body input{border-radius:var(--radius-sm);padding:10px 12px} .auth-body .btn{padding:11px 16px;width:100%} .auth-body .btn:not(.accent){background:var(--panel-hi)} .auth-body .btn:not(.accent):hover{filter:brightness(1.08)} .auth-actions{display:grid;gap:10px;grid-template-columns:1fr 1fr} .auth-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line);color:var(--muted);font:12px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} .auth-foot{position:relative;z-index:1;margin-top:18px;color:#9a9ea6;font-size:12px;text-align:center} /* ── 14. Footer, utilities, template-hulpjes ───────────────────────────── */ .app-infobar{margin:auto 14px 14px;padding:14px 16px;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:0 12px 24px rgba(0,0,0,.2);display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;position:relative;z-index:1} .app-infobar-name{color:var(--text-dim);font-size:13px;font-weight:600;flex:1} .app-infobar-pill{padding:6px 10px;border-radius:999px;background:var(--btn);font-size:13px;border:1px solid var(--line)} .app-infobar-ver{color:var(--muted);border-color:var(--line-soft)} .app-infobar-test{background:var(--brand);color:#fff;border-color:var(--brand-lo);font-weight:700;letter-spacing:.04em} .muted{color:var(--text-dim)} .small{font-size:12px} .status-ok{color:var(--ok-text);font-weight:600}.status-warning{color:var(--accent-text);font-weight:600}.status-bad{color:var(--danger-text);font-weight:600} .nowrap{white-space:nowrap} /* Alleen voor de template zelf: staalkaart, voorbeeldrijen, paginakiezer */ .tpl-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px} .tpl-swatch{border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--line);font-size:11px;background:var(--field)} .tpl-swatch i{display:block;height:44px} .tpl-swatch span{display:block;padding:6px 8px;color:var(--text-dim)} .tpl-swatch b{display:block;color:var(--text);font-family:ui-monospace,Menlo,Consolas,monospace} .tpl-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px} .tpl-row:last-child{margin-bottom:0} .tpl-toc{position:sticky;top:calc(var(--appbar-h) + 14px)} .tpl-toc a{display:block;padding:7px 14px;color:var(--text);text-decoration:none;font-size:14px;border-left:3px solid transparent} .tpl-toc a:hover{background:var(--panel-hi);border-left-color:var(--accent)} .tpl-section{scroll-margin-top:calc(var(--appbar-h) + 14px)} .tpl-nav{position:fixed;left:50%;top:0;transform:translateX(-50%);z-index:500;font-size:12px} .tpl-nav>button{background:var(--brand);color:#fff;border:1px solid var(--brand-lo);border-top:0;border-radius:0 0 10px 10px;padding:4px 14px 5px;font:inherit;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.4);opacity:.85} .tpl-nav>button:hover,.tpl-nav.open>button{opacity:1} .tpl-nav-list{display:none;position:absolute;left:50%;transform:translateX(-50%);top:calc(100% + 8px);min-width:260px;font-size:14px;background:var(--panel);border:1px solid #0007;border-radius:var(--radius);padding:8px 0;box-shadow:0 18px 40px rgba(0,0,0,.45);max-height:75vh;overflow:auto} .tpl-nav.open .tpl-nav-list{display:block} .tpl-nav-list a{display:block;padding:8px 16px;color:var(--text);text-decoration:none} .tpl-nav-list a:hover{background:var(--panel-hi)} .tpl-nav-list a.current{color:var(--accent);font-weight:700} .tpl-nav-list .grp{padding:8px 16px 2px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} /* ── Responsive ────────────────────────────────────────────────────────── */ @media (max-width:1100px){ .landing-grid,.landing-grid.no-sidebar{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"hero hero" "cards cards" "sidebar sidebar" "info info"} .landing-main,.landing-grid.no-sidebar .landing-main{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:960px){ .shell,.shell.sidebar-left{grid-template-columns:1fr} .acc-grid{grid-template-columns:1fr} .tpl-toc{position:static} .layout-sidebar .sidebar{width:100%;border-right:0} .layout-sidebar .content{display:none} .layout-sidebar.show-thread .sidebar{display:none} .layout-sidebar.show-thread .content{display:flex} .back-btn{display:inline-flex} .msg-stack{max-width:82%} } @media (max-width:768px){ :root{--appbar-h:60px} .appbar{flex-wrap:wrap;gap:8px;padding:8px 12px} .appbar .logo,.appbar>a.appbar-logo{height:40px} .appbar-hamburger{display:block} .appbar-nav{display:none;flex-direction:column;gap:6px;width:100%;order:10;padding-top:8px;border-top:1px solid var(--line-soft)} .appbar-nav.open{display:flex} .appbar-nav .btn{width:100%} .appbar-avatar{width:36px;height:36px;font-size:15px} .appbar-menu{min-width:220px} .shell{padding:10px;gap:10px} .form-grid{gap:8px;padding:10px} .col-8,.col-6,.col-4,.col-3{grid-column:span 12} .data-table{min-width:860px} .data-table .title-link{white-space:nowrap} .btn{min-height:42px;padding:10px 14px} .btn.small{min-height:36px} .dialog{width:96vw;max-height:90vh} .dialog .actions{flex-wrap:wrap} .dialog .actions .btn{flex:1 1 auto} .flash.page{margin:10px 10px 0;font-size:13px} } @media (max-width:680px){ .landing-wrap{padding:14px} .landing-grid,.landing-grid.no-sidebar{grid-template-columns:1fr;grid-template-areas:"hero" "cards" "sidebar" "info"} .landing-main,.landing-grid.no-sidebar .landing-main,.dash-stats-grid{grid-template-columns:1fr} .landing-hero h1{font-size:20px} } @media (max-width:480px){ .appbar>b{font-size:14px} .auth-actions{grid-template-columns:1fr} .auth-head{font-size:16px} } /* ── 15. Focus & beweging ──────────────────────────────────────────────── */ :focus-visible{outline:2px solid var(--focus);outline-offset:2px} input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none} /* velden tonen focus via hun rand */ input[type=checkbox]:focus-visible,input[type=radio]:focus-visible,input[type=range]:focus-visible,input[type=file]:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .btn.accent:focus-visible,.appbar-avatar:focus-visible{outline-color:var(--text-strong)} .toggle-switch input:focus-visible+.track{outline:2px solid #fff;outline-offset:2px} .skip-link{position:fixed;left:14px;top:-60px;z-index:700;background:var(--accent);color:var(--on-accent);font-weight:700;padding:10px 14px;border-radius:var(--radius-sm);text-decoration:none;transition:top .15s} .skip-link:focus{top:14px} .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} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} } /* ── 16. Toasts & laden ────────────────────────────────────────────────── */ .toast-stack{position:fixed;right:14px;bottom:14px;z-index:600;display:flex;flex-direction:column;gap:8px;width:min(380px,calc(100vw - 28px));pointer-events:none} .toast{pointer-events:auto;display:flex;gap:10px;align-items:flex-start;padding:12px 12px 12px 14px;border-radius:var(--radius-sm);border-left:4px solid var(--track);background:var(--panel-hi);color:var(--text);font-size:14px;box-shadow:0 12px 28px rgba(0,0,0,.45);animation:toast-in .2s ease-out} .toast.ok{border-color:var(--ok);background:var(--ok-bg);color:var(--ok-fg)} .toast.err{border-color:var(--danger);background:var(--err-bg);color:var(--err-fg)} .toast.warn{border-color:var(--accent);background:var(--warn-bg);color:var(--warn-fg)} .toast.info{border-color:var(--info);background:var(--info-bg);color:var(--info-fg)} .toast.leaving{opacity:0;transform:translateX(20px);transition:.2s} .toast-text{flex:1;min-width:0} .toast-close{background:none;border:0;color:inherit;opacity:.7;cursor:pointer;font-size:16px;line-height:1;padding:2px 4px;border-radius:6px} .toast-close:hover{opacity:1} @keyframes toast-in{from{opacity:0;transform:translateY(10px)}} .spinner{display:inline-block;width:18px;height:18px;border:2px solid var(--accent);border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite;vertical-align:middle} .spinner.large{width:36px;height:36px;border-width:3px} .skeleton{display:block;height:14px;border-radius:6px;background:linear-gradient(90deg,var(--skel-a) 25%,var(--skel-b) 50%,var(--skel-a) 75%);background-size:200% 100%;animation:shimmer 1.4s linear infinite} .skeleton+.skeleton{margin-top:10px} .skeleton.title{height:22px;width:40%} .skeleton.short{width:60%} .skeleton.block{height:90px} .skeleton.circle{width:48px;height:48px;border-radius:50%} @keyframes shimmer{to{background-position:-200% 0}} /* .is-loading op een paneel (of elk blok): dimt de inhoud en toont een spinner */ .is-loading{position:relative;pointer-events:none;min-height:80px} .is-loading::before{content:"";position:absolute;inset:0;background:var(--veil);z-index:5;border-radius:inherit} .is-loading::after{content:"";position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border:3px solid var(--accent);border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite;z-index:6} .page-loader{position:fixed;inset:0;z-index:800;display:none;flex-direction:column;gap:14px;align-items:center;justify-content:center;background:rgba(14,14,14,.8);backdrop-filter:blur(3px);color:var(--text-dim);font-size:14px} .page-loader.open{display:flex} .saved-note{color:var(--ok-text);font-size:13px;font-weight:600} /* ── 17. Actiemenu's (⋯) ───────────────────────────────────────────────── */ .menu-wrap{position:relative;display:inline-block} .menu{position:fixed;min-width:200px;background:var(--panel);border:1px solid var(--line-strong);border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.45);padding:6px 0;display:none;z-index:450} .menu-wrap.open .menu{display:block} .menu a,.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 14px;background:none;border:0;border-radius:0;color:var(--text);font:inherit;font-size:14px;text-align:left;text-decoration:none;cursor:pointer;white-space:nowrap} .menu a:hover,.menu button:hover,.menu a:focus-visible,.menu button:focus-visible{background:var(--panel-hi);outline:none} .menu .danger{color:var(--danger-soft-fg)} .menu .sep{height:1px;background:var(--line);margin:6px 0} .menu-label{padding:6px 14px 2px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .appbar-menu a:focus-visible{background:var(--panel-hi);outline:none} /* ── 18. Tabel: sorteren, selectie, bulkbalk ───────────────────────────── */ .data-table th[data-sort]{cursor:pointer;user-select:none} .data-table th[data-sort]:hover{color:var(--text)} .data-table th[data-sort]::after{content:"↕";margin-left:6px;opacity:.35;font-size:11px} .data-table th[aria-sort=ascending]::after{content:"▲";opacity:1;color:var(--accent-text)} .data-table th[aria-sort=descending]::after{content:"▼";opacity:1;color:var(--accent-text)} .data-table th[aria-sort]{color:var(--text)} .data-table .check-col{width:40px;text-align:center} .data-table tr.selected td{background:rgba(255,159,26,.08)} .bulk-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;background:var(--warn-bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--warn-fg);font-size:14px} .bulk-bar .count{font-weight:700;margin-right:auto} /* ── 19. Zijnavigatie (app-layout) ─────────────────────────────────────── */ .app-layout{display:grid;grid-template-columns:250px minmax(0,1fr);align-items:start;flex:1;position:relative;z-index:2} /* boven de footer, zodat de uitgeschoven navigatie eroverheen valt */ .app-main{min-width:0} .sidenav{position:sticky;top:var(--appbar-h);height:calc(100vh - var(--appbar-h));height:calc(100dvh - var(--appbar-h));overflow-y:auto;background:var(--panel);border-right:1px solid var(--line);padding:10px 8px 20px} .sidenav-title{padding:14px 12px 6px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .sidenav a,.sidenav summary{display:flex;align-items:center;gap:10px;padding:9px 12px;margin-bottom:2px;border-radius:var(--radius-sm);border-left:3px solid transparent;color:var(--text);text-decoration:none;font-size:14px;cursor:pointer} .sidenav a:hover,.sidenav summary:hover{background:var(--panel-hi)} .sidenav a.active{background:var(--panel-hi);border-left-color:var(--accent);color:var(--accent-text);font-weight:700} .sidenav .ico{width:20px;text-align:center;flex-shrink:0} .sidenav .count{margin-left:auto} .sidenav summary{list-style:none} .sidenav summary::-webkit-details-marker{display:none} .sidenav summary::after{content:"›";margin-left:auto;color:var(--muted);transition:transform .15s} .sidenav details[open]>summary::after{transform:rotate(90deg)} .sidenav details a{padding-left:42px;font-size:13px} .sidenav-toggle{display:none} .sidenav-backdrop{display:none} /* ── 20. Inhoudspagina, kaarten, utilities ─────────────────────────────── */ .page-wrap{width:100%;max-width:1100px;margin:0 auto;padding:20px 14px 40px;position:relative;z-index:1} .page-wrap.medium{max-width:860px} .page-wrap.narrow{max-width:620px} .page-title{font-size:22px;font-weight:700;margin:0 0 4px} .page-subtitle{color:var(--text-dim);font-size:14px;margin:0 0 20px} .page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap} .card{background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius);padding:16px;box-shadow:0 12px 24px rgba(0,0,0,.2)} .card+.card{margin-top:16px} .card h2{margin:0 0 8px;font-size:18px} .card-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))} .card-grid>*{margin-top:0!important} .prose{font-size:15px;line-height:1.6;color:var(--text-soft)} .prose h2{font-size:18px;margin:22px 0 8px;color:var(--text)} .prose h3{font-size:15px;margin:18px 0 6px;color:var(--text)} .prose p,.prose ul,.prose ol{margin:0 0 12px} .prose ul,.prose ol{padding-left:20px} .prose li{margin-bottom:4px} .prose blockquote{margin:0 0 12px;padding:8px 14px;border-left:4px solid var(--accent);background:#0002;border-radius:0 8px 8px 0;color:var(--text-dim)} .prose img{max-width:100%;border-radius:var(--radius-sm)} .prose>:first-child{margin-top:0} .prose>:last-child{margin-bottom:0} .code-block{background:var(--inset);border:1px solid var(--line);border-radius:8px;padding:10px 14px;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--accent-text);overflow-x:auto;white-space:pre;margin:0 0 12px} .news-card{background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius);padding:16px;box-shadow:0 12px 24px rgba(0,0,0,.2);display:flex;flex-direction:column;gap:10px} .news-card-header{display:flex;justify-content:space-between;align-items:baseline;gap:8px} .news-card-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-text);font-weight:700} .news-card-date{font-size:11px;color:var(--muted);flex-shrink:0} .news-card-title{margin:0;font-size:16px;line-height:1.3;font-weight:700} .news-card-body{font-size:13px;line-height:1.6;color:var(--text-soft)} .news-card-body p{margin:0 0 8px} .news-card-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-top:6px;border-top:1px solid var(--line);font-size:12px;margin-top:auto} .storage-bar-wrap{display:flex;background:var(--inset);border-radius:6px;height:10px;overflow:hidden;margin-top:6px} .storage-bar{height:100%;background:var(--accent)} .storage-bar.b{background:var(--info)}.storage-bar.c{background:var(--ok)} .legend{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:12px;color:var(--text-dim);margin-top:8px} .legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;background:var(--accent)} /* Utilities */ .flex{display:flex}.wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.flex-1{flex:1;min-width:0} .gap-8{gap:8px}.gap-16{gap:16px} .m-0{margin:0}.mt-0{margin-top:0}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mb-0{margin-bottom:0}.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px} .py-10{padding-top:10px;padding-bottom:10px}.w-full{width:100%}.text-center{text-align:center} .text-accent{color:var(--accent-text)}.text-ok{color:var(--ok-text)}.text-danger{color:var(--danger-text)} /* ── 21. Wizard ────────────────────────────────────────────────────────── */ .wizard-steps{display:flex;list-style:none;margin:0;padding:16px 14px;counter-reset:step;border-bottom:1px solid var(--line)} .wizard-steps li{flex:1;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);counter-increment:step;min-width:0} .wizard-steps li:last-child{flex:0 0 auto} .wizard-steps li::before{content:counter(step);width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--btn);color:var(--text-dim);font-weight:700;flex-shrink:0} .wizard-steps li::after{content:"";flex:1;height:2px;min-width:12px;background:var(--line);margin-right:10px} .wizard-steps li:last-child::after{display:none} .wizard-steps li.active{color:var(--text);font-weight:700} .wizard-steps li.active::before{background:var(--accent);color:var(--on-accent)} .wizard-steps li.done{color:var(--text-dim)} .wizard-steps li.done::before{content:"✓";background:var(--ok);color:#fff} .wizard-steps li.done::after{background:var(--ok)} .wizard-steps span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .wizard-actions{display:flex;justify-content:space-between;gap:8px;padding:14px;border-top:1px solid var(--line)} .summary-list{display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:8px 14px;margin:0;font-size:14px} .summary-list dt{color:var(--text-dim)} .summary-list dd{margin:0;font-weight:600} /* ── 22. Tooltips ──────────────────────────────────────────────────────── */ /* data-tip="tekst" op een knop, link of .tip-icon (niet op : die heeft geen ::after). Geef de knop zelf ook een aria-label. */ [data-tip]{position:relative} [data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);background:#111214;color:#f5f5f5;border:1px solid #fff2;font-size:12px;font-weight:400;line-height:1.3;letter-spacing:0;text-transform:none;padding:6px 9px;border-radius:8px;white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:460} [data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;transform:translate(-50%,0)} [data-tip][data-tip-pos=bottom]::after{bottom:auto;top:calc(100% + 8px)} [data-tip][data-tip-pos=left]::after{left:auto;right:0;transform:translate(0,4px)} [data-tip][data-tip-pos=left]:hover::after,[data-tip][data-tip-pos=left]:focus-visible::after{transform:none} .tip-icon{display:inline-flex;width:18px;height:18px;border-radius:50%;background:var(--btn);color:var(--text-dim);font-size:11px;font-weight:700;align-items:center;justify-content:center;cursor:help;border:0;padding:0;vertical-align:middle} /* ── 23. Accordion ─────────────────────────────────────────────────────── */ .accordion{border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;background:var(--panel)} .accordion details+details{border-top:1px solid var(--line)} .accordion summary{list-style:none;display:flex;align-items:center;gap:10px;padding:13px 14px;cursor:pointer;font-weight:600;font-size:15px} .accordion summary::-webkit-details-marker{display:none} .accordion summary::after{content:"›";margin-left:auto;color:var(--muted);font-size:18px;transition:transform .15s} .accordion details[open]>summary::after{transform:rotate(90deg)} .accordion summary:hover{background:var(--panel-hi)} .accordion summary:focus-visible{outline-offset:-2px} .accordion-body{padding:0 14px 14px;color:var(--text-dim);font-size:14px;line-height:1.55} .accordion-body>:first-child{margin-top:0} .accordion-body>:last-child{margin-bottom:0} /* ── 24. Slide-over: een modal die van rechts inschuift (zelfde data-attributen en focusgedrag) ── */ .modal.slideover{justify-content:flex-end;align-items:stretch} .modal.slideover .dialog{width:min(460px,94vw);height:100%;max-height:none;border-radius:var(--radius) 0 0 var(--radius);border-right:0;display:flex;flex-direction:column;animation:slide-in .2s ease-out} .modal.slideover .modal-titlebar{border-radius:var(--radius) 0 0 0;justify-content:space-between;flex-shrink:0} .modal.slideover .slideover-body{flex:1;overflow-y:auto;margin:0 -18px;padding:0 18px} .modal.slideover .actions{margin-top:0;padding-top:14px;border-top:1px solid var(--line)} .titlebar-close{background:rgba(0,0,0,.25);color:#fff;border:0;border-radius:50%;width:30px;height:30px;font-size:14px;cursor:pointer;flex-shrink:0} .titlebar-close:hover{background:rgba(0,0,0,.4)} .titlebar-close:focus-visible{outline-color:#fff} @keyframes slide-in{from{transform:translateX(40px);opacity:0}} /* ── 25. Lightbox en galerij ───────────────────────────────────────────── */ .gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px} .gallery a{display:block;border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:4/3;background:var(--inset)} .gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s} .gallery a:hover img{transform:scale(1.05)} .lightbox{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.9);display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:56px 64px 24px} .lightbox.open{display:flex} .lightbox img{max-width:100%;max-height:100%;min-height:0;object-fit:contain;border-radius:8px} .lightbox-caption{color:#e8e8ea;font-size:14px;text-align:center} .lightbox button{position:absolute;background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:50%;width:44px;height:44px;font-size:20px;line-height:1;cursor:pointer} .lightbox button:hover{background:rgba(255,255,255,.26)} .lightbox button:focus-visible{outline-color:#fff} .lightbox-close{top:12px;right:12px} .lightbox-prev{left:10px;top:50%;margin-top:-22px} .lightbox-next{right:10px;top:50%;margin-top:-22px} /* ── 26. Multi-select, datumbereik, wachtwoordsterkte, 2FA ─────────────── */ .tag-input{position:relative;display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:5px 8px;min-height:42px;border-radius:8px;border:1px solid var(--line);background:var(--field);cursor:text} .tag-input:focus-within{border-color:var(--focus);box-shadow:0 0 0 1px var(--focus) inset} .tag-input input[type=text]{flex:1;min-width:110px;width:auto;border:0;background:none;padding:4px;box-shadow:none} .tag{display:inline-flex;align-items:center;gap:2px;padding:3px 4px 3px 10px;border-radius:999px;background:var(--btn);font-size:13px} .tag button{background:none;border:0;color:var(--text-dim);cursor:pointer;border-radius:50%;width:20px;height:20px;line-height:1;font-size:12px;padding:0} .tag button:hover{background:var(--line);color:var(--text)} .tag-options{position:absolute;left:0;right:0;top:calc(100% + 4px);margin:0;padding:4px 0;list-style:none;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius-sm);box-shadow:0 14px 30px rgba(0,0,0,.35);max-height:220px;overflow:auto;z-index:60;display:none} .tag-input.open .tag-options{display:block} .tag-options li{padding:8px 12px;font-size:14px;cursor:pointer} .tag-options li:hover,.tag-options li.active{background:var(--panel-hi)} .tag-options li.empty{color:var(--muted);cursor:default;background:none} .date-range{display:flex;gap:8px;align-items:center} .date-range input{flex:1;min-width:0} .date-range span{color:var(--text-dim);font-size:13px;flex-shrink:0} .strength{display:flex;gap:4px;margin-top:6px} .strength i{flex:1;height:5px;border-radius:3px;background:var(--inset);transition:background .2s} .strength[data-score="1"] i:nth-child(-n+1){background:var(--danger)} .strength[data-score="2"] i:nth-child(-n+2){background:var(--accent)} .strength[data-score="3"] i:nth-child(-n+3){background:var(--info)} .strength[data-score="4"] i{background:var(--ok)} .code-boxes{display:flex;gap:8px;justify-content:center} .code-boxes input{width:46px;height:54px;padding:0;text-align:center;font:24px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} .qr-placeholder{width:150px;height:150px;border-radius:var(--radius-sm);background:#fff;color:#1d1e22;display:flex;align-items:center;justify-content:center;font-size:12px;text-align:center;margin:0 auto;border:1px solid var(--line)} .recovery-codes{display:grid;grid-template-columns:1fr 1fr;gap:6px;font:14px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--inset);border-radius:var(--radius-sm);padding:12px;text-align:center} .contrast-chip{display:inline-block;padding:2px 8px;border-radius:6px;font-size:12px;font-weight:600;border:1px solid var(--line)} @media (max-width:960px){ .app-layout{grid-template-columns:minmax(0,1fr)} .sidenav{position:fixed;left:0;top:var(--appbar-h);bottom:0;width:270px;height:auto;z-index:95;transform:translateX(-100%);transition:transform .2s;box-shadow:12px 0 30px rgba(0,0,0,.4)} .sidenav.open{transform:none} .sidenav-toggle{display:inline-flex} .sidenav-backdrop.open{display:block;position:fixed;inset:var(--appbar-h) 0 0 0;background:rgba(0,0,0,.5);z-index:94} } @media (max-width:768px){ .tpl-nav{top:auto;bottom:0} .tpl-nav>button{border-top:1px solid var(--brand-lo);border-bottom:0;border-radius:10px 10px 0 0} .tpl-nav-list{top:auto;bottom:calc(100% + 8px)} .page-wrap{padding:14px 10px 30px} .toast-stack{right:10px;bottom:10px} } @media (max-width:768px){ .wizard-steps li:not(.active) span{display:none} .lightbox{padding:56px 10px 70px} .lightbox-prev,.lightbox-next{top:auto;bottom:14px;margin:0} .date-range{flex-wrap:wrap} .code-boxes input{width:40px;height:48px;font-size:20px} } .app-infobar-prod{background:#1f7a4d;color:#fff;border-color:#17603c;font-weight:700;letter-spacing:.04em}