/* =====================================================================
Swift UI-laag (oktober 2026): shadcn/ui-achtige tokens, componenten en beweging
bovenop admin.css. De tokens hieronder voeden de bestaande --admin-*-variabelen,
zodat de oude CSS en de inline stijlen in de admin-JS mee veranderen.
Terugdraaien: de naar dit bestand in templates/admin.php weghalen.
Gekozen variant: Moon (15-10-2026). Zinc en Ink zijn weggehaald.
===================================================================== */
/* ---------- 1. Vaste tokens ---------- */
:root {
--ui-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--ui-brand: #247AD6; /* Swift-blauw */
--ui-moon: #F0F7FC; /* White moon */
--ui-radius-sm: 6px;
--ui-radius-md: 8px;
--ui-radius-lg: 10px;
--ui-radius-xl: 14px;
--ui-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ui-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
--ui-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ui-dur-fast: 120ms;
--ui-dur: 180ms;
--ui-dur-slow: 280ms;
/* Beweging (bewegingsspec v2): uiMotion leest deze één keer uit, zo houden JS en CSS dezelfde maat aan */
--ui-dur-exit: 140ms; /* weggaan is altijd sneller dan komen */
--ui-dur-moment: 600ms; /* meter bij eerste weergave, checklist 100% */
--ui-delay-busy: 300ms; /* spinner pas na 300ms: snelle acties tonen er nooit een */
--ui-delay-skel: 150ms; /* skeleton pas na 150ms: snelle schermen flitsen niet */
--ui-ease-pop: cubic-bezier(0.34, 1.36, 0.64, 1); /* kleine overshoot: alleen badges en vinkjes */
--ui-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* gsm-menu, voelt als een lade */
/* Vulkleuren voor witte tekst (minstens 4,5:1 in beide thema's) */
--ui-success-solid: #0B8159;
--ui-warning-solid: #B45309;
}
/* ---------- 2. Kleur: variant Moon (standaard), Swift-getinte neutralen ---------- */
:root, [data-theme="light"] {
--ui-bg: #F0F7FC;
--ui-surface: #FFFFFF;
--ui-surface-2: #F6FAFE;
--ui-muted: #E9F1FA;
--ui-fg: #14213A;
--ui-fg-muted: #5C687C;
--ui-border: #DCE6F2;
--ui-input: #CFDBEA;
--ui-ring: rgba(36, 122, 214, 0.42);
--ui-primary: #1F6FC5;
--ui-primary-hover: #1A60AD;
--ui-primary-fg: #FFFFFF;
--ui-link: #1F6FC5;
--ui-accent-soft: rgba(36, 122, 214, 0.09);
--ui-success: #0B8159; --ui-success-soft: rgba(16, 185, 129, 0.12);
--ui-warning: #B45309; --ui-warning-soft: rgba(245, 158, 11, 0.14);
--ui-danger: #D92D20; --ui-danger-soft: rgba(239, 68, 68, 0.10);
--ui-danger-solid: #D92D20;
--ui-input-bg: #FFFFFF;
--ui-skeleton: #E2E9F2;
--ui-shimmer: rgba(255, 255, 255, 0.85);
--ui-sidebar: #FFFFFF;
--ui-sidebar-fg: #3A475C;
--ui-sidebar-muted: #5E6B82; /* 4,5:1 of meer op wit, hover en zoekknop (was #7A8699: 3,7:1) */
--ui-sidebar-border: #DCE6F2;
--ui-sidebar-hover: #F0F6FC;
--ui-sidebar-active: #E6F0FB;
--ui-sidebar-active-fg: #14213A;
--ui-shadow-xs: 0 1px 2px rgba(20, 33, 58, 0.05);
--ui-shadow-sm: 0 1px 3px rgba(20, 33, 58, 0.08), 0 1px 2px -1px rgba(20, 33, 58, 0.08);
--ui-shadow-md: 0 4px 10px -2px rgba(20, 33, 58, 0.10), 0 2px 4px -2px rgba(20, 33, 58, 0.06);
--ui-shadow-lg: 0 16px 36px -8px rgba(20, 33, 58, 0.20), 0 6px 12px -6px rgba(20, 33, 58, 0.10);
--ui-overlay: rgba(10, 18, 32, 0.42);
--ui-metal-1: #F4F7FB; --ui-metal-2: #B9C4D3; --ui-metal-3: #FFFFFF; --ui-metal-4: #8E9BAE;
color-scheme: light;
}
[data-theme="dark"] {
--ui-bg: #0A101C;
--ui-surface: #0F1726;
--ui-surface-2: #142034;
--ui-muted: #18243A;
--ui-fg: #E6EDF7;
--ui-fg-muted: #93A1B8;
--ui-border: #1E2A40;
--ui-input: #2A3852;
--ui-ring: rgba(90, 162, 240, 0.50);
--ui-primary: #2477D0;
--ui-primary-hover: #2C86E2;
--ui-primary-fg: #FFFFFF;
--ui-link: #4A93E4; /* tekst op donker 5.6:1, wit erop 3.2:1 (alleen vet/groot) */
--ui-accent-soft: rgba(90, 162, 240, 0.13);
--ui-success: #34D399; --ui-success-soft: rgba(52, 211, 153, 0.13);
--ui-warning: #FBBF24; --ui-warning-soft: rgba(251, 191, 36, 0.13);
--ui-danger: #F06461; --ui-danger-soft: rgba(240, 100, 97, 0.13);
--ui-danger-solid: #C2362D;
--ui-input-bg: rgba(255, 255, 255, 0.025);
--ui-skeleton: #18233A;
--ui-shimmer: rgba(255, 255, 255, 0.06);
--ui-sidebar: #0C1321;
--ui-sidebar-fg: #B4C0D3;
--ui-sidebar-muted: #8391A8; /* 5,1:1 of meer op de zijbalk en de zoekknop (was #6F7D94: 4,45:1) */
--ui-sidebar-border: #1A2538;
--ui-sidebar-hover: #131D2F;
--ui-sidebar-active: #172338;
--ui-sidebar-active-fg: #F1F5FB;
--ui-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
--ui-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px -1px rgba(0, 0, 0, 0.40);
--ui-shadow-md: 0 6px 14px -4px rgba(0, 0, 0, 0.50);
--ui-shadow-lg: 0 20px 44px -10px rgba(0, 0, 0, 0.65), 0 8px 16px -8px rgba(0, 0, 0, 0.50);
--ui-overlay: rgba(2, 6, 14, 0.62);
--ui-metal-1: #5D6B80; --ui-metal-2: #C5D0DE; --ui-metal-3: #2C384A; --ui-metal-4: #E9EEF5;
color-scheme: dark;
}
/* ---------- 3. Brug naar de bestaande --admin-*-variabelen ---------- */
:root, [data-theme="light"], [data-theme="dark"] {
--admin-bg: var(--ui-bg);
--admin-bg-soft: var(--ui-surface-2);
--admin-card: var(--ui-surface);
--admin-card-bg: var(--ui-surface);
--admin-card-hover: var(--ui-surface-2);
--admin-border: var(--ui-border);
--admin-border-strong: var(--ui-input);
--admin-text: var(--ui-fg);
--admin-text-muted: var(--ui-fg-muted);
--admin-accent: var(--ui-link);
--admin-accent-hover: var(--ui-primary-hover);
--admin-accent-soft: var(--ui-accent-soft);
--admin-accent-ring: var(--ui-ring);
--admin-blue: var(--ui-link);
--admin-blue-soft: var(--ui-accent-soft);
--admin-green: var(--ui-success);
--admin-green-soft: var(--ui-success-soft);
--admin-orange: var(--ui-warning);
--admin-orange-soft: var(--ui-warning-soft);
--admin-red: var(--ui-danger);
--admin-red-soft: var(--ui-danger-soft);
--admin-radius: 12px;
--admin-radius-sm: 8px;
--admin-input-bg: var(--ui-input-bg);
--admin-header-bg: color-mix(in srgb, var(--ui-bg) 85%, transparent);
--admin-shadow-sm: var(--ui-shadow-xs);
--admin-shadow: var(--ui-shadow-sm);
--admin-shadow-lg: var(--ui-shadow-lg);
--admin-shadow-accent: 0 1px 2px rgba(20, 33, 58, 0.12);
}
/* ---------- 4. Basis ---------- */
body.admin-body {
font-family: var(--ui-font);
font-optical-sizing: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
background: var(--ui-bg);
color: var(--ui-fg);
}
::selection { background: color-mix(in srgb, var(--ui-brand) 22%, transparent); }
:focus-visible { outline: 2px solid var(--ui-ring); outline-offset: 2px; }
.admin-content h1 { font-weight: 700; letter-spacing: -0.025em; }
.admin-content h2, .admin-content h3 { letter-spacing: -0.015em; }
/* Dunne, rustige scrollbalken (alleen kleur, geen eigen vorm) */
* { scrollbar-color: color-mix(in srgb, var(--ui-fg-muted) 35%, transparent) transparent; }
/* Kleurwissels bij een themawissel zonder View Transitions: kort en gelijktijdig */
body.admin-body, .admin-sidebar, .admin-main { transition: background-color var(--ui-dur-slow) var(--ui-ease-out), color var(--ui-dur-slow) var(--ui-ease-out), border-color var(--ui-dur-slow) var(--ui-ease-out); }
/* ---------- 5. Themawissel als cirkel vanuit de schakelaar (View Transitions) ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.ui-theme-vt *, html.ui-theme-vt *::before, html.ui-theme-vt *::after { transition: none !important; }
/* ---------- 6. Zon/maan-schakelaar (naar toggles.dev "classic") ---------- */
.ui-tt { width: 18px; height: 18px; display: block; overflow: visible; color: var(--ui-sidebar-fg); }
.ui-tt__core { transform-origin: 16px 16px; transform: scale(0.72); transition: transform 420ms var(--ui-ease-out); }
.ui-tt__rays { transform-origin: 16px 16px; transition: transform 420ms var(--ui-ease-out), opacity 260ms var(--ui-ease-out); }
.ui-tt__bite { transform: translate(15px, -15px); transition: transform 420ms var(--ui-ease-out); }
[data-theme="dark"] .ui-tt__core { transform: scale(1); }
[data-theme="dark"] .ui-tt__rays { transform: rotate(-90deg) scale(0.4); opacity: 0; }
[data-theme="dark"] .ui-tt__bite { transform: translate(6px, -5px); }
.admin-sidebar__theme-row:hover .ui-tt__rays { transform: rotate(22deg); }
[data-theme="dark"] .admin-sidebar__theme-row:hover .ui-tt__rays { transform: rotate(-90deg) scale(0.4); }
/* Schakelaar: shadcn-switch met een geborsteld-metalen knop */
.admin-sidebar__theme-sw {
width: 32px; height: 18px; border-radius: 999px; position: relative; flex-shrink: 0;
background: var(--ui-input);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
transition: background-color var(--ui-dur) var(--ui-ease-out);
}
.admin-sidebar__theme-sw.on { background: var(--ui-primary); }
.admin-sidebar__theme-knob {
position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
background: linear-gradient(160deg, #FFFFFF 0%, #E3E9F1 45%, #C3CDDA 100%);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 1px rgba(80, 96, 120, 0.25);
transition: transform 260ms var(--ui-ease-out), width 160ms var(--ui-ease-out);
}
.admin-sidebar__theme-sw.on .admin-sidebar__theme-knob { left: 2px; transform: translateX(14px); }
.admin-sidebar__theme-row:active .admin-sidebar__theme-knob { width: 17px; }
.admin-sidebar__theme-row:active .admin-sidebar__theme-sw.on .admin-sidebar__theme-knob { transform: translateX(11px); }
/* ---------- 7. Metal-accent (naar libraries.dev/metal): een vloeibare metalen rand ---------- */
@property --ui-metal-a { syntax: ''; inherits: false; initial-value: 0deg; }
.ui-metal { position: relative; isolation: isolate; }
.ui-metal::after {
content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
background: conic-gradient(from var(--ui-metal-a), var(--ui-metal-1), var(--ui-metal-2), var(--ui-metal-3), var(--ui-metal-4), var(--ui-metal-1), var(--ui-metal-2), var(--ui-metal-3), var(--ui-metal-1));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
animation: uiMetalLaad 1400ms var(--ui-ease-in-out) 200ms both;
}
/* Niet meer eindeloos: één omwenteling bij het laden en één bij hover (uiMotion zet dan .is-draai).
De laadbeurt wacht tot de zijbalk zijn skeleton kwijt is, anders draait hij onzichtbaar.
Eigen keyframe-namen, zodat het focusmoment (uiMetalEen) en het logo elkaar niet storen. */
.admin-sidebar.sb-load .ui-metal::after { animation: none; }
.ui-metal.is-draai::after { animation: uiMetalLaad 1400ms var(--ui-ease-in-out) 200ms both, uiMetalHover 1200ms var(--ui-ease-in-out); }
@keyframes uiMetalLaad { from { --ui-metal-a: 0deg; } to { --ui-metal-a: 360deg; } }
@keyframes uiMetalHover { from { --ui-metal-a: 0deg; } to { --ui-metal-a: 360deg; } }
/* Merkteken in de zijbalk */
.ui-brandmark {
width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0; display: grid; place-items: center;
background: linear-gradient(150deg, #3B8FE6 0%, #247AD6 45%, #1A5FAE 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 2px rgba(20, 33, 58, 0.25);
}
.ui-brandmark svg { width: 13px; height: 13px; display: block; }
.admin-sidebar__logo {
display: flex; align-items: center; gap: 9px;
font-size: 14px; font-weight: 650; letter-spacing: -0.015em;
color: var(--ui-sidebar-active-fg) !important;
background: none !important; -webkit-text-fill-color: currentColor !important;
}
.admin-sidebar__logo small { display: block; font-size: 11px; font-weight: 500; color: var(--ui-sidebar-muted); letter-spacing: 0; margin-top: 1px; }
/* ---------- 8. Zijbalk (shadcn sidebar) ---------- */
.admin-sidebar { background: var(--ui-sidebar); border-right: 1px solid var(--ui-sidebar-border); color: var(--ui-sidebar-fg); }
.admin-sidebar__head { border-bottom: none; padding: 14px 12px 10px; }
.admin-sidebar__foot { border-top: 1px solid var(--ui-sidebar-border); }
.admin-nav-grouplabel { color: var(--ui-sidebar-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; }
.admin-nav-item {
color: var(--ui-sidebar-fg); border-radius: var(--ui-radius-md); font-weight: 500; box-shadow: none;
transition: background-color var(--ui-dur-fast) var(--ui-ease-out), color var(--ui-dur-fast) var(--ui-ease-out);
}
.admin-nav-item:hover { background: var(--ui-sidebar-hover); color: var(--ui-sidebar-active-fg); }
.admin-nav-item--active, .admin-nav-item--active:hover {
background: var(--ui-sidebar-active); color: var(--ui-sidebar-active-fg); font-weight: 600; box-shadow: none;
}
.admin-nav-item--section { color: var(--ui-sidebar-active-fg); }
.admin-nav-sep { background: var(--ui-sidebar-border); }
.admin-nav-ic { display: inline-grid; place-items: center; width: 16px; height: 16px; color: var(--ui-sidebar-muted); opacity: 1; transition: color var(--ui-dur-fast) var(--ui-ease-out); }
.admin-nav-ic svg { width: 16px; height: 16px; display: block; }
.admin-nav-item:hover .admin-nav-ic, .admin-nav-item--active .admin-nav-ic { color: var(--ui-sidebar-active-fg); }
.admin-nav-item--active .admin-nav-ic { color: var(--ui-link); }
.admin-sidebar__theme-row, .admin-sidebar__userrow2 { color: var(--ui-sidebar-fg); border-radius: var(--ui-radius-md); }
.admin-sidebar__theme-row:hover, .admin-sidebar__userrow2:hover, .admin-sidebar__icon:hover { background: var(--ui-sidebar-hover); }
.admin-sidebar__username { color: var(--ui-sidebar-active-fg); }
.admin-sidebar__useremail { color: var(--ui-sidebar-muted); }
.admin-sidebar__icon { color: var(--ui-sidebar-fg); border-color: var(--ui-sidebar-border); background: transparent; }
.admin-sidebar__bug-ic, .admin-sidebar__logout-ic { color: var(--ui-sidebar-muted); }
/* ---------- 11. Knoppen (shadcn Button) ---------- */
/* admin-btn--approve is in de praktijk de hoofdknop (Opslaan, Aanmaken, Nieuwe post): primair Swift-blauw.
admin-btn--note = outline, --reject/--danger = destructive, --ghost = ghost. */
.admin-btn, .hm-btn {
border-radius: var(--ui-radius-md); font-weight: 500; letter-spacing: -0.006em; line-height: 1.25;
transition: background-color var(--ui-dur-fast) var(--ui-ease-out), border-color var(--ui-dur-fast) var(--ui-ease-out),
color var(--ui-dur-fast) var(--ui-ease-out), box-shadow var(--ui-dur-fast) var(--ui-ease-out), transform 100ms var(--ui-ease-out), opacity var(--ui-dur-fast);
}
.admin-btn:active, .hm-btn:active, .swc-btn-icon:active, .swc-btn-sm:active, .client-card__action-btn:active { transform: scale(0.97); }
.admin-btn:focus-visible, .hm-btn:focus-visible, .swc-btn-icon:focus-visible, .swc-btn-sm:focus-visible, .swc-filter-btn:focus-visible, .hm-tab:focus-visible {
outline: none; box-shadow: 0 0 0 3px var(--ui-ring);
}
.admin-btn:disabled, .hm-btn:disabled, .swc-btn-icon:disabled, .swc-btn-sm:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.admin-btn--approve, .admin-btn--accent, .admin-btn--primary, .hm-btn--primary {
background: var(--ui-primary); color: var(--ui-primary-fg); border: 1px solid transparent;
box-shadow: var(--ui-shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.admin-btn--approve:hover, .admin-btn--accent:hover, .admin-btn--primary:hover, .hm-btn--primary:hover { background: var(--ui-primary-hover); opacity: 1; }
.admin-btn--note {
background: var(--ui-surface); color: var(--ui-fg); border: 1px solid var(--ui-input); box-shadow: var(--ui-shadow-xs);
}
.admin-btn--note:hover { background: var(--ui-muted); border-color: var(--ui-input); }
[data-theme="dark"] .admin-btn--note { background: var(--ui-input-bg); }
[data-theme="dark"] .admin-btn--note:hover { background: var(--ui-muted); }
.admin-btn--reject, .admin-btn--danger { background: var(--ui-danger-solid); color: #fff; border: 1px solid transparent; box-shadow: var(--ui-shadow-xs); }
.admin-btn--reject:hover, .admin-btn--danger:hover { background: color-mix(in srgb, var(--ui-danger-solid) 88%, #000); }
/* Post-lade: Post verwijderen is de laatste, onomkeerbare stap. Rode omlijning rechts, niet even luid als de beslisknoppen. */
.drawer__actions .admin-btn--danger { flex: 0 1 auto; margin-left: auto; background: transparent; color: var(--ui-danger); border-color: color-mix(in srgb, var(--ui-danger) 40%, transparent); box-shadow: none; }
.drawer__actions .admin-btn--danger:hover { background: var(--ui-danger-soft); border-color: var(--ui-danger); }
.admin-btn--ghost, .hm-btn--ghost { background: transparent; color: var(--ui-fg); border: 1px solid transparent; box-shadow: none; }
.admin-btn--ghost:hover, .hm-btn--ghost:hover { background: var(--ui-muted); }
/* Knoppen in een paginakop: compact en op één regel (admin.css gaf admin-btn flex:1). */
.admin-header .admin-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; white-space: nowrap; }
/* Kleine en icoonknoppen in tabellen */
.swc-btn-icon {
border-radius: var(--ui-radius-md); border: 1px solid var(--ui-border); color: var(--ui-fg-muted); background: transparent;
transition: background-color var(--ui-dur-fast) var(--ui-ease-out), color var(--ui-dur-fast) var(--ui-ease-out), border-color var(--ui-dur-fast) var(--ui-ease-out), transform 100ms var(--ui-ease-out);
}
.swc-btn-icon:hover { background: var(--ui-muted); color: var(--ui-fg); border-color: var(--ui-input); }
.swc-btn-icon--primary { color: var(--ui-link); border-color: color-mix(in srgb, var(--ui-brand) 35%, var(--ui-border)); }
.swc-btn-icon--primary:hover { background: var(--ui-accent-soft); color: var(--ui-link); border-color: color-mix(in srgb, var(--ui-brand) 55%, var(--ui-border)); }
.swc-btn-sm, .client-card__action-btn {
border-radius: var(--ui-radius-md); font-weight: 500; border: 1px solid var(--ui-input); background: var(--ui-surface); color: var(--ui-fg);
box-shadow: var(--ui-shadow-xs); transition: background-color var(--ui-dur-fast) var(--ui-ease-out), border-color var(--ui-dur-fast) var(--ui-ease-out), transform 100ms var(--ui-ease-out);
}
.swc-btn-sm:hover, .client-card__action-btn:hover { background: var(--ui-muted); border-color: var(--ui-input); color: var(--ui-fg); }
[data-theme="dark"] .swc-btn-sm, [data-theme="dark"] .client-card__action-btn { background: var(--ui-input-bg); }
.swc-btn-sm--red { color: var(--ui-danger); border-color: color-mix(in srgb, var(--ui-danger) 30%, transparent); background: var(--ui-danger-soft); }
.swc-btn-sm--red:hover { background: var(--ui-danger-solid); border-color: var(--ui-danger-solid); color: #fff; }
/* ---------- 12. Invoervelden (shadcn Input/Select/Textarea) ---------- */
.admin-input, .admin-textarea, .swc-bulk-select, .clients-header__search, .admin-gs-input {
background: var(--ui-input-bg); border: 1px solid var(--ui-input); border-radius: var(--ui-radius-md); color: var(--ui-fg);
box-shadow: var(--ui-shadow-xs);
transition: border-color var(--ui-dur-fast) var(--ui-ease-out), box-shadow var(--ui-dur-fast) var(--ui-ease-out), background-color var(--ui-dur-fast);
}
.admin-input::placeholder, .admin-textarea::placeholder, .clients-header__search::placeholder, .admin-gs-input::placeholder { color: var(--ui-fg-muted); opacity: 1; }
.admin-input:focus, .admin-textarea:focus, .swc-bulk-select:focus, .clients-header__search:focus, .admin-gs-input:focus {
outline: none; border-color: var(--ui-brand); box-shadow: 0 0 0 3px var(--ui-ring);
}
.admin-input:disabled, .admin-textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.admin-input[aria-invalid="true"] { border-color: var(--ui-danger); box-shadow: 0 0 0 3px var(--ui-danger-soft); }
/* ---------- 13. Badges (shadcn Badge) ---------- */
.swc-badge, .hm-badge {
border-radius: var(--ui-radius-sm); font-size: 11.5px; font-weight: 500; letter-spacing: 0; padding: 2px 8px; line-height: 1.45;
border: 1px solid transparent;
}
.swc-badge::before { width: 6px; height: 6px; opacity: 1; }
.swc-badge--red, .hm-badge--red { background: var(--ui-danger-soft); color: var(--ui-danger); border-color: color-mix(in srgb, var(--ui-danger) 22%, transparent); }
.swc-badge--orange, .hm-badge--orange { background: var(--ui-warning-soft); color: var(--ui-warning); border-color: color-mix(in srgb, var(--ui-warning) 22%, transparent); }
.swc-badge--green, .hm-badge--green { background: var(--ui-success-soft); color: var(--ui-success); border-color: color-mix(in srgb, var(--ui-success) 22%, transparent); }
.swc-badge--accent, .swc-badge--blue, .hm-badge--accent { background: var(--ui-accent-soft); color: var(--ui-link); border-color: color-mix(in srgb, var(--ui-brand) 22%, transparent); }
.swc-badge--purple { background: color-mix(in srgb, #7C3AED 9%, transparent); color: #6D28D9; border-color: color-mix(in srgb, #7C3AED 22%, transparent); }
[data-theme="dark"] .swc-badge--purple { color: #B79CFA; }
.swc-badge--muted, .hm-badge--gray { background: var(--ui-muted); color: var(--ui-fg-muted); border-color: var(--ui-border); }
.swc-pakket { border-radius: var(--ui-radius-sm); font-weight: 500; font-size: 11.5px; background: var(--ui-surface); color: var(--ui-fg); border-color: var(--ui-input); }
[data-theme="dark"] .swc-pakket { background: var(--ui-input-bg); }
.hm-chip { border-radius: var(--ui-radius-sm); font-weight: 600; }
[data-theme="dark"] .hm-chip--ig { color: #F472B6; }
[data-theme="dark"] .hm-chip--li, [data-theme="dark"] .hm-chip--fb { color: #6AAEF5; }
/* ---------- 14. Tabs en filters (shadcn Tabs) ---------- */
.hm-tabs {
display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 20px; border: 0; border-radius: var(--ui-radius-lg);
background: var(--ui-muted); max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.hm-tab {
margin: 0; padding: 6px 14px; border: 0; border-radius: 7px; color: var(--ui-fg-muted); font-weight: 500; white-space: nowrap;
transition: color var(--ui-dur-fast) var(--ui-ease-out), background-color var(--ui-dur) var(--ui-ease-out), box-shadow var(--ui-dur) var(--ui-ease-out);
}
.hm-tab:hover { color: var(--ui-fg); }
.hm-tab--active, .hm-tab--active:hover { color: var(--ui-fg); background: var(--ui-surface); box-shadow: var(--ui-shadow-sm); border: 0; }
[data-theme="dark"] .hm-tab--active { background: var(--ui-surface-2); box-shadow: inset 0 0 0 1px var(--ui-input); }
.swc-filter-btn {
border-radius: var(--ui-radius-md); font-weight: 500; color: var(--ui-fg-muted); border: 1px solid transparent;
transition: color var(--ui-dur-fast) var(--ui-ease-out), background-color var(--ui-dur-fast) var(--ui-ease-out), border-color var(--ui-dur-fast);
}
.swc-filter-btn:hover:not(.swc-filter-btn--active) { background: var(--ui-muted); border-color: transparent; color: var(--ui-fg); }
.swc-filter-btn--active { background: var(--ui-surface); color: var(--ui-fg); border-color: var(--ui-input); box-shadow: var(--ui-shadow-xs); }
[data-theme="dark"] .swc-filter-btn--active { background: var(--ui-surface-2); }
.drawer__tabbtn { font-weight: 500; transition: color var(--ui-dur-fast) var(--ui-ease-out), border-color var(--ui-dur) var(--ui-ease-out); }
.drawer__tabbtn--active { color: var(--ui-fg); font-weight: 600; border-bottom-color: var(--ui-brand); }
.drawer__tabbar { background: var(--ui-surface); }
/* ---------- 15. Kaarten, secties en kerncijfers (shadcn Card) ---------- */
.swc-section, .hm-section, .hm-stat, .hm-quick-card, .clients-stat-card, .skl-card {
background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 12px; box-shadow: var(--ui-shadow-xs);
}
.hm-section__head { padding: 14px 18px; border-bottom-color: var(--ui-border); }
.hm-section__head h2 { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.hm-section__head a { color: var(--ui-link); font-weight: 500; font-size: 12.5px; }
.hm-section__head a, .hm-urgency__action { display: inline-flex; align-items: center; gap: 4px; }
.hm-section__head a svg, .hm-urgency__action svg { width: 14px; height: 14px; flex: none; transition: transform var(--ui-dur) var(--ui-ease-out); }
.hm-section__head a:hover svg, .hm-urgency__action:hover svg { transform: translateX(3px); }
.hm-stat { text-align: left; padding: 16px 18px; }
.hm-stat__num { font-size: 26px; font-weight: 650; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.hm-stat__label { order: -1; font-size: 12.5px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ui-fg-muted); margin-bottom: 6px; }
.hm-stat { display: flex; flex-direction: column; }
.swc-stat { padding: 16px 18px; }
.swc-stat__label { font-size: 12.5px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ui-fg-muted); margin-bottom: 6px; }
.swc-stat__val { font-size: 26px; font-weight: 650; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.swc-stat__val--red { font-weight: 650; }
.swc-stat__sub { font-size: 12px; color: var(--ui-fg-muted); }
.swc-mono { font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace; font-size: 12px; font-weight: 500; letter-spacing: -0.01em; }
.hm-quick-card { transition: border-color var(--ui-dur-fast) var(--ui-ease-out), background-color var(--ui-dur-fast) var(--ui-ease-out), box-shadow var(--ui-dur) var(--ui-ease-out); }
.hm-quick-card:hover { transform: none; border-color: var(--ui-input); background: var(--ui-surface-2); box-shadow: var(--ui-shadow-sm); }
.hm-quick-card__title { font-weight: 600; font-size: 13.5px; }
.clients-stat-card__value { font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.clients-stat-card__label { text-transform: none; letter-spacing: 0; font-weight: 500; }
/* ---------- 16. Tabellen (shadcn Table) ---------- */
.swc-table th, .hm-table th {
font-size: 12.5px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ui-fg-muted);
background: transparent; border-bottom: 1px solid var(--ui-border); height: 40px; padding-top: 8px; padding-bottom: 8px; box-sizing: border-box;
}
.swc-table td, .hm-table td { border-bottom-color: var(--ui-border); font-variant-numeric: tabular-nums; }
.swc-table tbody tr, .hm-table tbody tr { transition: background-color var(--ui-dur-fast) var(--ui-ease-out); }
.swc-table tbody tr:hover td, .hm-table tr:hover td { background: color-mix(in srgb, var(--ui-muted) 55%, transparent); }
.swc-client-name { font-weight: 600; letter-spacing: -0.01em; }
.swc-avatar, .swc-person-avatar { border-radius: var(--ui-radius-md); }
.swc-progress__bar { background: var(--ui-muted); border-radius: 999px; overflow: hidden; }
.swc-progress__fill { background: var(--ui-brand); border-radius: 999px; }
.swc-progress__pct { color: var(--ui-fg-muted); font-variant-numeric: tabular-nums; }
input.swc-row-cb, th.swc-cb-col input { accent-color: var(--ui-brand); }
/* ---------- 17. Dialogen en de post-popup (shadcn Dialog) ---------- */
.admin-modal-overlay { background: var(--ui-overlay); backdrop-filter: none; -webkit-backdrop-filter: none; transition: opacity 160ms var(--ui-ease-out); }
.admin-modal { border-radius: 14px; border: 1px solid var(--ui-border); box-shadow: var(--ui-shadow-lg); background: var(--ui-surface); }
.admin-modal-overlay--active .admin-modal { animation: uiDialogIn 240ms var(--ui-ease-out) both; }
.admin-modal__title { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.admin-modal__actions { gap: 8px; }
@keyframes uiDialogIn { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }
.drawer { border-radius: 16px; border-color: var(--ui-border); box-shadow: var(--ui-shadow-lg); background: var(--ui-surface);
transition: transform 280ms var(--ui-ease-out), opacity 180ms var(--ui-ease-out); }
.drawer-overlay { background: var(--ui-overlay); }
.drawer__header { border-radius: 16px 16px 0 0; }
/* ---------- 18. Laadblokken in het thema (waren hardcoded lichtgrijs, ook in donker) ---------- */
.skl, .sk-mono .skl { background: var(--ui-skeleton) !important; }
.skl::after { background: linear-gradient(90deg, transparent, var(--ui-shimmer), transparent); }
.admin-sidebar.sb-load .admin-sidebar__logo, .admin-sidebar.sb-load .admin-sidebar__icon,
.admin-sidebar.sb-load .admin-sidebar__theme-row, .admin-sidebar.sb-load .admin-sidebar__userrow2 { background: var(--ui-skeleton) !important; }
.admin-sidebar.sb-load .admin-sidebar__logo::after, .admin-sidebar.sb-load .admin-sidebar__icon::after,
.admin-sidebar.sb-load .admin-sidebar__theme-row::after, .admin-sidebar.sb-load .admin-sidebar__userrow2::after { background: linear-gradient(90deg, transparent, var(--ui-shimmer), transparent); }
.admin-sidebar.sb-load #global-search { background-color: var(--ui-skeleton) !important; background-image: linear-gradient(90deg, transparent 0%, var(--ui-shimmer) 50%, transparent 100%) !important; }
/* ---------- 19. Viewwissel: inhoud komt zacht binnen (kort, geen choreografie) ---------- */
/* admin.css liet elke herteken binnen een scherm opnieuw invagen (skFadeIn); nu alleen bij een schermwissel. */
#admin-content > * { animation: none; }
#admin-content.ui-entering > * { animation: uiViewIn 220ms var(--ui-ease-out) both; }
@keyframes uiViewIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* ---------- 20. Meldingen (toasts, naar shadcn Sonner) ---------- */
.ui-toaster { position: fixed; right: 16px; bottom: 16px; z-index: 9500; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.ui-toast {
pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; width: min(360px, calc(100vw - 32px)); padding: 12px 14px;
background: var(--ui-surface); color: var(--ui-fg); border: 1px solid var(--ui-border); border-radius: 12px; box-shadow: var(--ui-shadow-lg);
font: 500 13.5px/1.45 var(--ui-font);
animation: uiToastIn 320ms var(--ui-ease-out) both;
}
.ui-toast__ic { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--ui-success); }
.ui-toast--fout .ui-toast__ic { color: var(--ui-danger); }
.ui-toast--weg { animation: uiToastOut 180ms var(--ui-ease-in) both; }
@keyframes uiToastIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes uiToastOut { to { opacity: 0; transform: translateY(6px) scale(0.98); } }
@media (max-width: 640px) { .ui-toaster { left: 16px; right: 16px; align-items: stretch; } .ui-toast { width: auto; } }
/* ---------- 20. Ontbrekende of halve componenten uit de inventaris (P3, P4, P8, P12, P15) ---------- */
/* Een admin-btn zonder variant kreeg de grijze browserknop (P3): standaard outline. */
.admin-btn:not([class*="admin-btn--"]) { background: var(--ui-surface); color: var(--ui-fg); border: 1px solid var(--ui-input); box-shadow: var(--ui-shadow-xs); }
.admin-btn:not([class*="admin-btn--"]):hover { background: var(--ui-muted); }
[data-theme="dark"] .admin-btn:not([class*="admin-btn--"]) { background: var(--ui-input-bg); }
/* admin-card werd gebruikt maar bestond niet (P4). */
.admin-card { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-xs); }
.admin-empty__desc { font-size: 13px; color: var(--ui-fg-muted); margin-top: 6px; max-width: 46ch; margin-inline: auto; }
.form-hint { font-size: 12px; color: var(--ui-fg-muted); margin-top: 4px; line-height: 1.45; }
/* Schakelaars: aan-kleur volgt het thema (P12), metalen knop, zichtbare focus (P8). */
.admin-switch__slider, .acc-toggle-slider { background: var(--ui-input); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); transition: background-color var(--ui-dur) var(--ui-ease-out), box-shadow var(--ui-dur-fast); }
.admin-switch input:checked + .admin-switch__slider, .acc-toggle input:checked + .acc-toggle-slider { background: var(--ui-primary); }
.admin-switch__slider::before, .acc-toggle-slider::before {
background: linear-gradient(160deg, #FFFFFF 0%, #E3E9F1 45%, #C3CDDA 100%);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 1px rgba(80, 96, 120, 0.25);
transition: transform 260ms var(--ui-ease-out);
}
.admin-switch input:focus-visible + .admin-switch__slider, .acc-toggle input:focus-visible + .acc-toggle-slider { box-shadow: 0 0 0 3px var(--ui-ring); }
.admin-switch input:disabled + .admin-switch__slider, .acc-toggle input:disabled + .acc-toggle-slider { opacity: 0.5; cursor: not-allowed; }
/* Algemene focusring voor klikbare elementen zonder eigen stijl (P8). Muisklik toont niets, toetsenbord wel. */
:is(#admin-content :is(a, button, [role="button"], [tabindex]:not([tabindex="-1"]), summary), .admin-sidebar :is(a, button), .admin-modal :is(a, button)):focus-visible:not(.admin-btn, .hm-btn, .ui-btn, .ui-seg__btn, .ui-tab, .ui-chip, .swc-btn-icon, .swc-btn-sm, .swc-filter-btn, .hm-tab, .ui-subtab, .ui-gs__rij, .admin-cal__day) {
outline: 2px solid var(--ui-brand); outline-offset: 2px; border-radius: 6px;
}
#admin-content :is(input, select, textarea):focus-visible { outline: none; border-color: var(--ui-brand); box-shadow: 0 0 0 3px var(--ui-ring); }
/* Witte tekst op een statusvulling: altijd de solid-tint (P6). */
.admin-mc__qbtn--ok { background: var(--ui-success-solid); }
.admin-mc__qbtn--no, .hm-urgency__action, .acc-btn-danger, .swc-btn-sm--red:hover { background: var(--ui-danger-solid); border-color: var(--ui-danger-solid); }
/* Iconen in kleine knoppen (Lucide via uiIc) en icoonknoppen in tabelrijen */
.client-card__action-btn, .swc-btn-sm { display: inline-flex; align-items: center; gap: 5px; }
.client-card__action-btn svg, .swc-btn-sm svg { width: 14px; height: 14px; flex: none; }
.ui-ic-btn { width: 30px; height: 30px; padding: 0 !important; justify-content: center; color: var(--ui-fg-muted); }
.ui-ic-btn:hover { color: var(--ui-fg); }
.ui-ic-btn svg { width: 15px; height: 15px; }
.ui-ic-btn--danger { color: var(--ui-danger); }
.ui-ic-btn--danger:hover { color: var(--ui-danger); background: var(--ui-danger-soft); border-color: color-mix(in srgb, var(--ui-danger) 30%, transparent); }
#client-list-table td:last-child > div, #client-list-table td:last-child { white-space: nowrap; }
/* Start: icoonvlakjes met een zachte tint i.p.v. emoji */
.ui-tint--blue { background: var(--ui-accent-soft); color: var(--ui-link); }
.ui-tint--violet { background: color-mix(in srgb, #7C3AED 10%, transparent); color: #6D28D9; }
[data-theme="dark"] .ui-tint--violet { background: color-mix(in srgb, #8B5CF6 18%, transparent); color: #B79CFA; }
.ui-tint--orange { background: var(--ui-warning-soft); color: var(--ui-warning); }
.ui-tint--red { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-tint--green { background: var(--ui-success-soft); color: var(--ui-success); }
.hm-quick-card__ic svg { width: 19px; height: 19px; }
.hm-section__icon svg { width: 15px; height: 15px; }
.hm-quick-card__ic, .hm-section__icon { transition: transform var(--ui-dur) var(--ui-ease-out); }
.hm-quick-card:hover .hm-quick-card__ic { transform: scale(1.06) rotate(-3deg); }
.hm-urgency__icon { display: grid; place-items: center; color: var(--ui-danger); }
.hm-urgency__icon svg { width: 20px; height: 20px; }
.hm-note > svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--ui-link); }
.hm-hero h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; }
/* ---------- 21. Eigen componenten voor omgezette schermen (ui-*) ---------- */
/* Gebruik deze klassen i.p.v. inline stijlen wanneer een scherm herwerkt wordt. */
/* Gutter: in de basis hadden Start, Support, Financieel, Activiteiten en Klanten alleen binnenmarge in de kop,
de blokken eronder kleefden tegen de zijbalk (onder ~1850px schermbreedte). De container krijgt de gutter,
de koppen die al 24px hadden schuiven terug. Inline marges in de blokken blijven zo gewoon werken. */
#admin-content:is(:has(> .admin-header:first-child), :has(> .clients-header:first-child), :has(> .hm-hero:first-child)) { --ui-gutter: 24px; padding-inline: var(--ui-gutter); }
#admin-content:has(> .hm-hero:first-child) { padding-block: 24px 40px; }
#admin-content > :is(.admin-header:first-child, .clients-header:first-child, .clients-stats) { margin-inline: calc(-1 * var(--ui-gutter, 0px)); }
#admin-content > .admin-card { margin-inline: 24px; }
#admin-content > .client-grid { padding-inline: 0; }
@media (max-width: 760px) {
#admin-content:is(:has(> .admin-header:first-child), :has(> .clients-header:first-child), :has(> .hm-hero:first-child)) { --ui-gutter: 16px; }
#admin-content > .admin-card { margin-inline: 16px; }
}
@media (max-width: 600px) {
/* De kop wordt een kolom (admin.css); een inline align-items:flex-end duwde korte titels dan naar rechts. */
.admin-header[style*="align-items:flex-end"] { align-items: stretch !important; }
.admin-header > .ui-btn, .admin-header > .admin-btn { align-self: flex-start; }
}
/* Vaste gutter voor schermen zonder eigen kop-padding (Site Pro-schermen). */
.ui-page { padding: 24px; }
@media (max-width: 760px) { .ui-page { padding: 16px; } }
.ui-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.ui-pagehead__title { font-size: 22px; font-weight: 650; letter-spacing: -0.025em; line-height: 1.2; margin: 0 0 4px; color: var(--ui-fg); }
.ui-pagehead__sub { font-size: 13.5px; color: var(--ui-fg-muted); margin: 0; }
.ui-pagehead__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ui-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px;
border-radius: var(--ui-radius-md); border: 1px solid transparent; font: 500 13.5px/1 var(--ui-font); letter-spacing: -0.006em;
white-space: nowrap; cursor: pointer; user-select: none; text-decoration: none;
transition: background-color var(--ui-dur-fast) var(--ui-ease-out), border-color var(--ui-dur-fast) var(--ui-ease-out), color var(--ui-dur-fast) var(--ui-ease-out), box-shadow var(--ui-dur-fast) var(--ui-ease-out), transform 100ms var(--ui-ease-out);
}
.ui-btn svg { width: 16px; height: 16px; flex: none; }
.ui-btn:active { transform: scale(0.97); }
.ui-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ui-ring); }
.ui-btn:disabled, .ui-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.ui-btn--primary { background: var(--ui-primary); color: var(--ui-primary-fg); box-shadow: var(--ui-shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.ui-btn--primary:hover { background: var(--ui-primary-hover); }
.ui-btn--outline { background: var(--ui-surface); color: var(--ui-fg); border-color: var(--ui-input); box-shadow: var(--ui-shadow-xs); }
[data-theme="dark"] .ui-btn--outline { background: var(--ui-input-bg); }
.ui-btn--outline:hover { background: var(--ui-muted); }
.ui-btn--ghost { background: transparent; color: var(--ui-fg); }
.ui-btn--ghost:hover { background: var(--ui-muted); }
.ui-btn--danger { background: var(--ui-danger-solid); color: #fff; }
.ui-btn--danger:hover { background: color-mix(in srgb, var(--ui-danger-solid) 88%, #000); }
.ui-btn--sm { height: 32px; padding: 0 11px; font-size: 13px; gap: 6px; }
.ui-btn--xs { height: 28px; padding: 0 9px; font-size: 12.5px; gap: 5px; border-radius: 7px; }
.ui-btn--icon { width: 36px; padding: 0; }
.ui-btn--sm.ui-btn--icon { width: 32px; }
/* Segmented control (bv. Lijst / Pipeline) */
.ui-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--ui-radius-lg); background: var(--ui-muted); }
.ui-seg__btn {
display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent;
color: var(--ui-fg-muted); font: 500 13px/1 var(--ui-font); cursor: pointer;
transition: color var(--ui-dur-fast) var(--ui-ease-out), background-color var(--ui-dur) var(--ui-ease-out), box-shadow var(--ui-dur) var(--ui-ease-out);
}
.ui-seg__btn svg { width: 15px; height: 15px; }
.ui-seg__btn:hover { color: var(--ui-fg); }
.ui-seg__btn[aria-pressed="true"] { background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow-sm); }
[data-theme="dark"] .ui-seg__btn[aria-pressed="true"] { background: var(--ui-surface-2); box-shadow: inset 0 0 0 1px var(--ui-input); }
.ui-seg__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ui-ring); }
/* Lijntabs met tellers (statusfilters) */
.ui-tabbar { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--ui-border); }
.ui-tabs { flex: 1; min-width: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.ui-tabs::-webkit-scrollbar { display: none; }
.ui-tab {
position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 9px 10px 11px; border: 0; background: none; white-space: nowrap;
color: var(--ui-fg-muted); font: 500 13px/1 var(--ui-font); cursor: pointer; border-radius: 6px 6px 0 0;
transition: color var(--ui-dur-fast) var(--ui-ease-out), background-color var(--ui-dur-fast) var(--ui-ease-out);
}
.ui-tab:hover { color: var(--ui-fg); background: color-mix(in srgb, var(--ui-muted) 60%, transparent); }
.ui-tab::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ui-brand); transform: scaleX(0); transition: transform var(--ui-dur) var(--ui-ease-out); }
.ui-tab[aria-selected="true"] { color: var(--ui-fg); font-weight: 600; }
.ui-tab[aria-selected="true"]::after { transform: scaleX(1); }
.ui-tab:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ui-ring); }
.ui-count {
display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px;
background: var(--ui-muted); color: var(--ui-fg-muted); font: 600 11px/1 var(--ui-font); font-variant-numeric: tabular-nums;
}
.ui-tab[aria-selected="true"] .ui-count { background: var(--ui-accent-soft); color: var(--ui-link); }
.ui-tab__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
/* Zoekveld met icoon */
.ui-search { position: relative; flex: none; margin-bottom: 6px; }
.ui-search svg { position: absolute; left: 10px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--ui-fg-muted); pointer-events: none; }
.ui-input {
width: 100%; height: 34px; padding: 0 12px; box-sizing: border-box; border-radius: var(--ui-radius-md); border: 1px solid var(--ui-input);
background: var(--ui-input-bg); color: var(--ui-fg); font: 400 13.5px/1 var(--ui-font); box-shadow: var(--ui-shadow-xs);
transition: border-color var(--ui-dur-fast) var(--ui-ease-out), box-shadow var(--ui-dur-fast) var(--ui-ease-out);
}
.ui-search .ui-input { padding-left: 32px; width: 240px; }
.ui-input::placeholder { color: var(--ui-fg-muted); }
.ui-input:focus { outline: none; border-color: var(--ui-brand); box-shadow: 0 0 0 3px var(--ui-ring); }
.ui-search .ui-input.clients-header__search { padding: 0 12px 0 32px; height: 34px; width: 220px; border-radius: var(--ui-radius-md); }
.clients-header { align-items: flex-end; flex-wrap: wrap; }
.clients-header__title { font-size: 22px; font-weight: 650; letter-spacing: -0.025em; line-height: 1.2; }
.ui-pagehead__actions .ui-search { margin-bottom: 0; }
/* Selectievakje met label (shadcn Checkbox) */
.ui-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ui-fg-muted); cursor: pointer; user-select: none; white-space: nowrap; }
.ui-check:hover { color: var(--ui-fg); }
.ui-check input {
appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0; flex: none; border-radius: 4px; cursor: pointer;
border: 1px solid var(--ui-input); background: var(--ui-input-bg); box-shadow: var(--ui-shadow-xs); display: grid; place-items: center;
transition: background-color var(--ui-dur-fast) var(--ui-ease-out), border-color var(--ui-dur-fast) var(--ui-ease-out);
}
.ui-check input::after { content: ''; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform var(--ui-dur) var(--ui-ease-out); }
.ui-check input:checked { background: var(--ui-primary); border-color: var(--ui-primary); }
.ui-check input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.ui-check input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ui-ring); }
/* Lege staat */
.ui-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 56px 24px; text-align: center; border: 1px dashed var(--ui-input); border-radius: 12px; }
.ui-empty__ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--ui-muted); color: var(--ui-fg-muted); margin-bottom: 6px; }
.ui-empty__ic svg { width: 20px; height: 20px; }
.ui-empty__title { font-size: 14.5px; font-weight: 600; color: var(--ui-fg); }
.ui-empty__desc { font-size: 13px; color: var(--ui-fg-muted); max-width: 42ch; }
@media (max-width: 760px) {
.ui-tabbar { flex-direction: column; align-items: stretch; gap: 8px; border-bottom: 0; }
.ui-tabs { border-bottom: 1px solid var(--ui-border); }
.ui-search .ui-input { width: 100%; }
.ui-pagehead { align-items: flex-start; }
}
/* ---------- 22. Planner en postkaarten (admin-mc, ook in de kalender) ---------- */
.pipe-toolbar .ui-search { margin: 0; }
.pipe-toolbar .ui-search .ui-input { width: 230px; }
/* Select in dezelfde vorm als ui-input, met een Lucide-chevron in een middengrijs dat op licht en donker leesbaar is. */
.ui-select {
appearance: none; -webkit-appearance: none; width: auto; padding-right: 32px; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8799' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-position: right 10px center; background-size: 15px 15px; background-repeat: no-repeat;
}
.pipeline-clientswitch__btn {
height: 34px; padding: 0 10px 0 6px; border-radius: var(--ui-radius-md); border-color: var(--ui-input); background: var(--ui-input-bg);
box-shadow: var(--ui-shadow-xs); font-weight: 500;
transition: background-color var(--ui-dur-fast) var(--ui-ease-out), border-color var(--ui-dur-fast) var(--ui-ease-out);
}
.pipeline-clientswitch__btn:hover { background: var(--ui-muted); border-color: var(--ui-input); }
.pipeline-clientswitch__btn, .ui-seg__btn { white-space: nowrap; }
/* Kalenderwerkbalk: filters mogen naar een tweede regel (admin.css dwong nowrap af, dan brak de tekst in de knoppen). */
.admin-cal-toolbar > div.admin-cal-toolbar__filters:last-child { display: flex; align-items: center; gap: 8px; flex-wrap: wrap !important; }
.admin-cal-toolbar__filters .ui-search { margin: 0; }
.admin-cal-toolbar__filters .ui-search .ui-input { width: 200px; }
.admin-cal-toolbar__label { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; }
.pipeline-clientswitch__menu { border-radius: var(--ui-radius-lg); border-color: var(--ui-border); box-shadow: var(--ui-shadow-lg); }
/* Kaart: neutrale rand, status als bolletje in de voet (was een gekleurde linkerrand plus oranje ring). */
.admin-mc {
border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); background: var(--ui-surface); box-shadow: var(--ui-shadow-xs);
transition: transform var(--ui-dur-fast) var(--ui-ease-out), box-shadow var(--ui-dur) var(--ui-ease-out), border-color var(--ui-dur-fast) var(--ui-ease-out);
}
.admin-mc:hover { transform: translateY(-2px); box-shadow: var(--ui-shadow-md); border-color: var(--ui-input); }
.admin-mc--action { box-shadow: var(--ui-shadow-xs); }
.admin-mc--action:hover { box-shadow: var(--ui-shadow-md); }
.admin-mc--sel { outline: 2px solid var(--ui-brand); outline-offset: -1px; }
.admin-mc__thumb { background: var(--ui-muted); }
.admin-mc__ph { display: flex; color: var(--ui-fg-muted); opacity: 0.55; }
.admin-mc__ph svg { width: 26px; height: 26px; }
.admin-mc__play {
display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
background: rgba(9, 14, 26, 0.58); text-shadow: none;
}
.admin-mc__play svg { width: 13px; height: 13px; margin-left: 2px; }
.admin-mc__stackcount {
display: inline-flex; align-items: center; gap: 4px; top: 6px; left: 6px; padding: 3px 7px; border-radius: 999px;
font-size: 10.5px; font-weight: 600; letter-spacing: 0; background: rgba(9, 14, 26, 0.74);
}
.admin-mc__stackcount svg { width: 11px; height: 11px; }
.admin-mc__acct { font-size: 12px; font-weight: 600; color: var(--ui-fg); }
.admin-mc__time { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ui-fg-muted); }
.admin-mc__caption { color: var(--ui-fg-muted); }
.admin-mc__date, .admin-mc__action { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; border-radius: var(--ui-radius-sm); }
.admin-mc__date svg, .admin-mc__action svg { width: 11px; height: 11px; flex: none; }
.admin-mc__action { background: var(--ui-warning-soft); color: var(--ui-warning); }
.admin-mc__reschedule {
display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; margin-top: 6px; padding: 5px 8px;
border: 1px solid color-mix(in srgb, var(--ui-danger) 30%, transparent); border-radius: var(--ui-radius-md);
background: var(--ui-danger-soft); color: var(--ui-danger); font: 600 11.5px/1.25 var(--ui-font); cursor: pointer;
transition: background-color var(--ui-dur-fast) var(--ui-ease-out), border-color var(--ui-dur-fast) var(--ui-ease-out);
}
.admin-mc__reschedule:hover { border-color: var(--ui-danger); }
.admin-mc__reschedule svg { width: 12px; height: 12px; flex: none; }
.admin-mc__status {
display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-top-color: var(--ui-border);
font-size: 11.5px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ui-fg-muted);
}
.admin-mc__status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--st, var(--ui-fg-muted)); }
.admin-mc__status--danger { color: var(--ui-danger); font-weight: 600; }
.pipeline-col__empty { border-color: var(--ui-border); border-radius: var(--ui-radius-lg); color: var(--ui-fg-muted); }
/* Concept grijs, zoals in de post-lade en op de kaarten: in het blauw van Klant review waren de twee kolommen gelijk (ronde 3). */
.pipeline-col__dot--concept { background: var(--ui-fg-muted); }
/* Kalender (ronde 3). Gutter als klasse, dagnummer als knop naar de dagweergave, klantnaam op een eigen regel,
kaarten naast elkaar in een brede dag. Tablet en gsm: dag, 3 dagen en week als agenda (dag onder dag).
Gsm: de maand toont per dag bolletjes in de statuskleur; tik op de dag voor de dagweergave. */
.admin-cal-page { padding: 16px 24px; }
.admin-cal__skcel { height: 96px; border-radius: 6px; }
.admin-cal-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--ui-fg-muted); }
.admin-cal-legend li { display: inline-flex; align-items: center; gap: 6px; }
.admin-cal-legend li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--st); }
.admin-cal__header { background: var(--ui-surface); color: var(--ui-fg-muted); font-weight: 600; }
.admin-cal__day {
display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 7px; margin: 0 0 4px;
border: 0; border-radius: 999px; background: transparent; color: var(--ui-fg-muted); cursor: pointer;
font: 600 12px/1 var(--ui-font); font-variant-numeric: tabular-nums;
transition: background-color var(--ui-dur-fast) var(--ui-ease-out), color var(--ui-dur-fast) var(--ui-ease-out);
}
.admin-cal__day:hover { background: var(--ui-muted); color: var(--ui-fg); }
.admin-cal__day:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ui-ring); }
/* Vandaag: primair blauw met witte tekst (4,5:1 in licht en donker; het linkblauw haalde in donker maar 3,2:1). */
.admin-cal__cell--today .admin-cal__day { width: auto; height: 26px; background: var(--ui-primary); color: var(--ui-primary-fg); }
.admin-cal__cell--today .admin-cal__day:hover { background: var(--ui-primary-hover); }
:is(.admin-week, .admin-cal__grid) .admin-mc__head { flex-wrap: wrap; column-gap: 6px; row-gap: 3px; }
:is(.admin-week, .admin-cal__grid) .admin-mc__acct { flex: 1 0 100%; }
:is(.admin-week, .admin-cal__grid) .admin-mc__time { order: 1; }
:is(.admin-week, .admin-cal__grid) .admin-mc__dots { order: 2; margin-left: 0; }
.admin-week { grid-template-columns: repeat(var(--cal-n, 7), minmax(0, 1fr)); }
.admin-week__col { background: var(--ui-surface); border-color: var(--ui-border); }
.admin-week__head { background: var(--ui-surface-2); border-bottom-color: var(--ui-border); color: var(--ui-fg-muted); font-weight: 600; }
.admin-week__date { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ui-fg); }
.admin-week__col--today { border-color: var(--ui-link); box-shadow: inset 0 0 0 1px var(--ui-link); }
.admin-week__col--today .admin-week__date { color: var(--ui-link); }
.admin-week__body { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); align-content: start; }
.admin-week__empty { grid-column: 1 / -1; padding: 10px 0; font-size: 12px; color: var(--ui-fg-muted); opacity: 1; }
/* Maand op tablet en desktop: compacte regels (mini-beeld met statusbolletje, klant, uur) en hoogstens drie per dag, de
rest via "+N meer" naar de dagweergave. Met volle kaarten werd een dag met elf posts 2700 px hoog en zag je de maand niet
meer. Kanalen en tekst staan in de week- en dagweergave en in de lade. */
@media (min-width: 641px) {
.admin-cal__cell { min-height: 128px; }
.admin-cal__cellposts { gap: 3px; }
.admin-cal__cellposts .admin-mc {
position: relative; flex-direction: row; align-items: center; gap: 6px; padding: 3px 5px 3px 3px;
border-radius: var(--ui-radius-md); box-shadow: none; overflow: visible;
}
.admin-cal__cellposts .admin-mc:hover { transform: none; box-shadow: none; background: var(--ui-muted); border-color: var(--ui-input); }
.admin-cal__cellposts .admin-mc--stack::before, .admin-cal__cellposts .admin-mc--stack::after { display: none; }
.admin-cal__cellposts .admin-mc__thumb { flex: none; width: 26px; height: 26px; aspect-ratio: auto; border-radius: 5px; }
.admin-cal__cellposts .admin-mc__thumb > :is(.admin-mc__play, .admin-mc__chan, .admin-mc__stackcount, .admin-mc__cb) { display: none; }
.admin-cal__cellposts .admin-mc__ph svg { width: 14px; height: 14px; }
.admin-cal__cellposts .admin-mc__foot {
flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 4px; padding: 0;
}
.admin-cal__cellposts .admin-mc__head { display: contents; }
.admin-cal__cellposts .admin-mc__acct { grid-column: 1 / -1; font-size: 12px; line-height: 15px; }
.admin-cal__cellposts .admin-mc__time { grid-column: 1; grid-row: 2; font-size: 11px; line-height: 14px; }
.admin-cal__cellposts :is(.admin-mc__dots, .admin-mc__caption, .admin-mc__fb, .admin-mc__meta) { display: none; }
.admin-cal__cellposts .admin-mc__reschedule { position: relative; grid-column: 2; grid-row: 2; width: 24px; height: 20px; margin: 0; padding: 0; }
.admin-cal__cellposts .admin-mc__reschedule span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.admin-cal__cellposts .admin-mc__reschedule svg { width: 12px; height: 12px; }
.admin-cal__cellposts .admin-mc__status { position: absolute; top: -1px; left: 22px; padding: 0; border: 0; font-size: 0; gap: 0; }
.admin-cal__cellposts .admin-mc__status::before { width: 9px; height: 9px; box-shadow: 0 0 0 2px var(--ui-surface); }
.admin-cal__grid:not(.is-zoek) .admin-cal__cellposts .admin-mc:nth-child(n+4) { display: none; }
.admin-cal__meer {
display: block; width: 100%; margin-top: 3px; padding: 3px 6px; border: 0; border-radius: var(--ui-radius-sm);
background: transparent; color: var(--ui-fg-muted); font: 600 11.5px/1.3 var(--ui-font); text-align: left; cursor: pointer;
transition: background-color var(--ui-dur-fast) var(--ui-ease-out), color var(--ui-dur-fast) var(--ui-ease-out);
}
.admin-cal__meer:hover { background: var(--ui-muted); color: var(--ui-fg); }
.admin-cal__grid.is-zoek .admin-cal__meer { display: none; }
}
@media (max-width: 640px) { .admin-cal__meer { display: none; } }
@media (max-width: 900px) {
/* admin.css gaf hier vaste kolommen van 150px met horizontaal scrollen, maar de inline kolomregel won altijd. */
.admin-week { display: flex; flex-direction: column; gap: 8px; overflow: visible; }
.admin-week__col { min-height: 0; }
.admin-week__head { justify-content: flex-start; gap: 8px; padding: 10px 12px; }
.admin-week__col--leeg { flex-direction: row; align-items: center; justify-content: space-between; }
.admin-week__col--leeg .admin-week__head { border-bottom: 0; background: transparent; }
.admin-week__col--leeg .admin-week__body { display: block; padding: 0 12px; }
.admin-week__col--leeg .admin-week__empty { padding: 0; }
}
@media (max-width: 640px) {
.admin-cal-page { padding: 16px; }
.admin-cal__header { padding: 8px 0; font-size: 10.5px; letter-spacing: 0; }
.admin-cal__cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; min-height: 60px; padding: 4px 2px 8px; }
.admin-cal__day { min-width: 30px; height: 30px; margin: 0; }
.admin-cal__cell--today .admin-cal__day { height: 30px; }
/* De hele cel is het tikdoel. */
.admin-cal__day::after { content: ""; position: absolute; inset: 0; }
.admin-cal__cellposts { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 3px; pointer-events: none; }
.admin-cal__cellposts .admin-mc { display: block; width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: var(--st, var(--ui-fg-muted)); box-shadow: none; transform: none; }
.admin-cal__cellposts .admin-mc > *, .admin-cal__cellposts .admin-mc::before, .admin-cal__cellposts .admin-mc::after { display: none; }
.admin-cal__skcel { height: 56px; }
/* Werkbalk: periode bovenaan over de volle breedte, klant en status naast elkaar, zoeken eronder. */
.admin-cal-toolbar { gap: 10px; }
.admin-cal-toolbar__nav { width: 100%; gap: 6px; }
.admin-cal-toolbar__label { flex: 1; min-width: 0; font-size: 16px; }
.admin-cal-toolbar > div.admin-cal-toolbar__filters:last-child { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; }
.admin-cal-toolbar__filters .ui-seg { grid-column: 1 / -1; order: -1; display: flex; }
.admin-cal-toolbar__filters .ui-seg__btn { flex: 1; justify-content: center; }
.admin-cal-toolbar__filters .ui-search { grid-column: 1 / -1; order: 1; }
.admin-cal-toolbar__filters .ui-search .ui-input { width: 100%; }
.admin-cal-toolbar__filters .pipeline-clientswitch, .admin-cal-toolbar__filters .pipeline-clientswitch__btn { width: 100%; min-width: 0; }
.admin-cal-toolbar__filters .admin-cal-statusfilter { width: 100%; min-width: 0; }
}
/* ---------- 23. Noodstopbalk en gsm-topbalk ---------- */
.ui-pausebar {
position: sticky; top: 0; z-index: 80; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
min-height: 40px; padding: 7px 16px; box-sizing: border-box;
background: var(--ui-danger-solid); color: #fff; font: 400 13px/1.35 var(--ui-font);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08); animation: uiPauseIn var(--ui-dur-slow) var(--ui-ease-out) both;
}
.has-devbar .ui-pausebar { top: 24px; }
.ui-pausebar svg { width: 15px; height: 15px; flex: none; fill: currentColor; stroke: none; }
.ui-pausebar strong { font-weight: 600; }
.ui-pausebar__btn {
height: 26px; padding: 0 10px; border-radius: var(--ui-radius-sm); border: 1px solid rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.12);
color: #fff; font: 500 12.5px/1 var(--ui-font); cursor: pointer; transition: background-color var(--ui-dur-fast) var(--ui-ease-out);
}
.ui-pausebar__btn:hover { background: rgba(255, 255, 255, 0.24); }
.ui-pausebar__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@keyframes uiPauseIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* Gsm: de topbalk is sticky, de noodstopbalk schuift er gewoon onder mee in de flow. */
@media (max-width: 900px) {
.admin-topbar { box-sizing: border-box; }
.ui-pausebar { position: static; }
}
/* ---------- 24. Support-overzicht en filterchips ---------- */
.hm-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .hm-stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Toggle-chip (shadcn Toggle, outline, sm). --chip kleurt het bolletje en de actieve staat. */
.ui-chip {
--chip: var(--ui-brand); display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 7px 0 10px; border-radius: 999px;
border: 1px solid var(--ui-input); background: var(--ui-surface); color: var(--ui-fg-muted); font: 500 12.5px/1 var(--ui-font); cursor: pointer; white-space: nowrap;
transition: color var(--ui-dur-fast) var(--ui-ease-out), background-color var(--ui-dur-fast) var(--ui-ease-out), border-color var(--ui-dur-fast) var(--ui-ease-out), transform 100ms var(--ui-ease-out);
}
[data-theme="dark"] .ui-chip { background: var(--ui-input-bg); }
.ui-chip:hover { color: var(--ui-fg); background: var(--ui-muted); }
.ui-chip:active { transform: scale(0.97); }
.ui-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ui-ring); }
.ui-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--chip); flex: none; transition: transform var(--ui-dur) var(--ui-ease-out); }
.ui-chip .ui-count { height: 17px; min-width: 18px; padding: 0 5px; font-size: 10.5px; }
.ui-chip[aria-pressed="true"] { color: var(--ui-fg); border-color: color-mix(in srgb, var(--chip) 50%, var(--ui-input)); background: color-mix(in srgb, var(--chip) 10%, var(--ui-surface)); }
.ui-chip[aria-pressed="true"] .ui-chip__dot { transform: scale(1.25); }
.ui-chip[aria-pressed="true"] .ui-count { background: color-mix(in srgb, var(--chip) 18%, transparent); color: var(--ui-fg); }
.sup-page .hm-section { margin-bottom: 20px; }
.sup-tabbar { padding: 4px 18px 0; margin: 0; }
.sup-tabbar .ui-search { margin-bottom: 6px; }
.sup-tabbar .ui-search .ui-input { width: 240px; height: 32px; }
.sup-subbar { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 10px 18px; border-bottom: 1px solid var(--ui-border); background: color-mix(in srgb, var(--ui-muted) 45%, transparent); }
.sup-subbar__group { display: flex; gap: 6px; flex-wrap: wrap; }
.sup-subbar__sort { margin-left: auto; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.sup-subbar__label { font-size: 12.5px; color: var(--ui-fg-muted); margin-right: 4px; }
.sup-sort { color: var(--ui-fg-muted); }
.sup-sort.is-actief { color: var(--ui-fg); background: var(--ui-muted); }
.sup-sort svg { width: 14px; height: 14px; }
/* Badge (shadcn Badge): klein label met tint. --cap zet de eerste letter in hoofdletter (pakketnamen staan klein in de database). */
.ui-badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 6px; font: 500 11.5px/1 var(--ui-font); white-space: nowrap; }
.ui-badge--cap { text-transform: capitalize; }
.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; }
.ui-badge svg { width: 12px; height: 12px; flex: none; }
/* Badge met eigen kleur via --b: --tint is alleen een zachte achtergrond, --st heeft er een bolletje bij (status, prioriteit). */
.ui-badge--tint, .ui-badge--st { background: color-mix(in srgb, var(--b) 12%, transparent); color: var(--b); text-transform: none; }
.ui-badge--st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.ui-select--sm { height: 28px; font-size: 12.5px; padding-left: 9px; padding-right: 28px; background-position: right 8px center; background-size: 14px 14px; border-radius: 7px; }
.sup-prio { margin-left: 6px; height: 18px; font-size: 11px; vertical-align: 1px; }
.sup-tijd { background: var(--ui-muted); color: var(--ui-fg-muted); text-transform: none; font-variant-numeric: tabular-nums; }
.sup-group { display: flex; align-items: center; gap: 8px; padding: 8px 18px; font-size: 12px; font-weight: 600; color: var(--ui-fg-muted); background: color-mix(in srgb, var(--ui-muted) 45%, transparent); border-bottom: 1px solid var(--ui-border); }
.sup-empty { margin: 16px 18px; padding: 40px 24px; }
.sup-ticket {
display: grid; grid-template-columns: minmax(0, 1fr) 120px 130px 80px auto; align-items: center; gap: 12px; padding: 12px 18px;
border-bottom: 1px solid var(--ui-border); cursor: pointer; position: relative; transition: background-color var(--ui-dur-fast) var(--ui-ease-out);
}
.sup-ticket:last-child { border-bottom: 0; }
.sup-ticket:hover { background: color-mix(in srgb, var(--ui-muted) 55%, transparent); }
.sup-ticket:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ui-ring); }
.sup-ticket--urgent::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ui-danger); }
.sup-ticket--dicht .sup-ticket__main, .sup-ticket--dicht .sup-ticket__datum { opacity: 0.6; }
.sup-ticket__klant { font-size: 12.5px; font-weight: 600; color: var(--ui-link); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sup-ticket__klant span { color: var(--ui-fg-muted); font-weight: 500; margin-left: 4px; }
.sup-ticket__onderwerp { font-size: 13.5px; font-weight: 600; color: var(--ui-fg); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; }
.sup-ticket__meta { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--ui-fg-muted); flex-wrap: wrap; }
.sup-ticket__meta span { display: inline-flex; align-items: center; gap: 4px; }
.sup-ticket__meta svg { width: 13px; height: 13px; }
.sup-ticket__arch { font-weight: 600; }
.sup-ticket__datum { font-size: 12px; color: var(--ui-fg-muted); white-space: nowrap; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; font-variant-numeric: tabular-nums; }
.sup-ticket__tijd { text-align: center; }
.sup-ticket__acties { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.sup-ticket__acties .ui-btn--icon.ui-btn--xs { width: 28px; }
.sup-ticket__acties .ui-btn svg { width: 14px; height: 14px; }
.sup-weinig { padding: 14px 18px; }
.sup-weinig__titel { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ui-fg); margin-bottom: 12px; }
.sup-weinig__titel svg { width: 16px; height: 16px; color: var(--ui-warning); }
.sup-koppel { border: 1px solid color-mix(in srgb, var(--ui-warning) 40%, var(--ui-border)); background: var(--ui-warning-soft); border-radius: var(--ui-radius-xl, 12px); padding: 14px 18px; margin-bottom: 20px; }
.sup-koppel__titel { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; color: var(--ui-warning); margin-bottom: 8px; }
.sup-koppel__titel svg { width: 16px; height: 16px; }
.sup-koppel__rij { display: flex; align-items: center; gap: 10px 12px; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--ui-warning) 22%, transparent); flex-wrap: wrap; }
@media (max-width: 1100px) {
.sup-ticket { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main status" "datum tijd" "acties acties"; row-gap: 8px; }
.sup-ticket__main { grid-area: main; } .sup-ticket > :nth-child(3) { grid-area: status; justify-self: end; }
.sup-ticket__datum { grid-area: datum; flex-direction: row; align-items: center; } .sup-ticket__tijd { grid-area: tijd; text-align: right; }
.sup-ticket__acties { grid-area: acties; justify-content: flex-start; flex-wrap: wrap; }
}
.sup-tablewrap { overflow-x: auto; position: relative; } /* relative: anders ontsnapt het sr-only-label uit de scrollcontainer en wordt de pagina breder */
.sup-leeg { padding: 36px; text-align: center; color: var(--ui-fg-muted); font-size: 13px; }
.sup-table th, .sup-table td { padding-left: 18px; }
.sup-row { cursor: pointer; }
.sup-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ui-ring); }
.sup-site { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ui-fg); letter-spacing: -0.01em; }
.sup-site__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ui-success); flex: none; box-shadow: 0 0 0 3px var(--ui-success-soft); }
.sup-muted { color: var(--ui-fg-muted); font-size: 12.5px; }
.sup-meter { --m: var(--ui-success); display: flex; align-items: center; gap: 8px; min-width: 150px; }
.sup-meter--oranje { --m: var(--ui-warning); }
.sup-meter--rood { --m: var(--ui-danger); }
.sup-meter__bar { flex: 1; height: 6px; border-radius: 999px; background: var(--ui-muted); overflow: hidden; }
.sup-meter__bar > div { height: 100%; border-radius: inherit; background: var(--m); }
.sup-meter__num { font-size: 12px; font-weight: 600; color: var(--ui-fg-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sup-meter--oranje .sup-meter__num, .sup-meter--rood .sup-meter__num { color: var(--m); }
.sup-rest { font-weight: 600; color: var(--ui-fg); white-space: nowrap; }
.sup-rest--oranje { color: var(--ui-warning); }
.sup-rest--rood { color: var(--ui-danger); }
.sup-acties { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: nowrap; }
.sup-acties .ui-btn svg { width: 14px; height: 14px; margin-right: -3px; }
@media (max-width: 760px) {
.sup-tabbar { padding: 4px 12px 0; }
.sup-tabbar .ui-search .ui-input { width: 100%; }
.sup-subbar { padding: 10px 12px; }
.sup-subbar__sort { margin-left: 0; }
}
/* ---------- 21. Keuzedialoog (shadcn AlertDialog) ---------- */
.admin-modal.ui-keuze { max-width: 420px; padding: 22px; }
.ui-keuze__ic { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; flex: none; }
.ui-keuze__ic svg { width: 18px; height: 18px; }
.ui-keuze__titel { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; margin: 0 0 6px; color: var(--ui-fg); }
.ui-keuze__tekst { font-size: 13.5px; line-height: 1.55; color: var(--ui-fg-muted); overflow-wrap: anywhere; }
.ui-keuze__tekst strong { color: var(--ui-fg); font-weight: 600; }
.ui-keuze__knoppen { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; flex-wrap: wrap; }
@media (max-width: 480px) {
.ui-keuze__knoppen { flex-direction: column-reverse; }
.ui-keuze__knoppen .ui-btn { width: 100%; justify-content: center; }
}
/* ---------- 22. Minuten loggen ---------- */
.admin-modal.sup-logmodal { max-width: 440px; padding: 22px; }
.sup-logmodal__kop { display: flex; align-items: center; gap: 12px; }
.sup-logmodal__kop .ui-keuze__ic { margin-bottom: 0; }
.sup-logmodal__kop .ui-keuze__titel { margin: 0; }
.sup-logmodal__sub { font-size: 12.5px; color: var(--ui-fg-muted); margin-top: 2px; }
.sup-logmodal__onderwerp { margin-top: 14px; padding: 10px 12px; border-radius: 8px; background: var(--ui-muted); font-size: 13px; line-height: 1.45; color: var(--ui-fg); }
.sup-logmodal__rest { margin-top: 12px; font-size: 12.5px; color: var(--ui-fg-muted); }
.sup-logmodal__rest strong { color: var(--ui-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.sup-logmodal__rest strong.is-op { color: var(--ui-danger); }
.sup-logmodal__label { margin: 18px 0 8px; font-size: 12.5px; font-weight: 500; color: var(--ui-fg-muted); }
.sup-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sup-min-chip {
height: 30px; padding: 0 12px; border: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-fg); border-radius: 999px;
font: 500 12.5px/1 var(--ui-font); font-variant-numeric: tabular-nums; cursor: pointer;
transition: border-color var(--ui-dur-fast) var(--ui-ease-out), background-color var(--ui-dur-fast) var(--ui-ease-out), color var(--ui-dur-fast) var(--ui-ease-out), transform var(--ui-dur-fast) var(--ui-ease-out);
}
.sup-min-chip:hover { border-color: var(--ui-input); background: var(--ui-muted); color: var(--ui-fg); }
.sup-min-chip:active { transform: scale(0.96); }
.sup-min-chip[aria-pressed="true"] { background: var(--ui-brand); border-color: var(--ui-brand); color: #fff; }
.sup-min-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ui-ring); }
.sup-veld { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; font-size: 12.5px; font-weight: 500; color: var(--ui-fg); }
.sup-veld em { font-style: normal; font-weight: 400; color: var(--ui-fg-muted); margin-left: 4px; }
.sup-veld textarea.ui-input, .sup-reageer textarea.ui-input { height: auto; padding: 9px 12px; resize: vertical; line-height: 1.55; }
/* ---------- 23. Supportdetail: klant en aanvraag ---------- */
.sup-detail__kop { min-width: 0; }
.sup-terug { margin: 0 0 6px -9px; color: var(--ui-fg-muted); }
.sup-terug:hover { color: var(--ui-fg); }
.sup-terug svg { width: 15px; height: 15px; transition: transform var(--ui-dur) var(--ui-ease-out); }
.sup-terug:hover svg { transform: translateX(-2px); }
.sup-detail .ui-pagehead__title { overflow-wrap: anywhere; }
.sup-detail__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 20px; align-items: start; }
.sup-detail__main, .sup-detail__side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.sup-detail__main > .hm-section, .sup-detail__side > .hm-section { margin-bottom: 0; }
.sup-detail__side { position: sticky; top: 20px; }
.sup-detail__noot { font-size: 12.5px; color: var(--ui-fg-muted); font-variant-numeric: tabular-nums; }
.sup-detail .hm-section__head .ui-badge { flex: none; }
@media (max-width: 1100px) {
.sup-detail__grid { grid-template-columns: minmax(0, 1fr); }
.sup-detail__side { position: static; }
}
.sup-pauze { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 20px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--ui-warning) 35%, var(--ui-border)); background: var(--ui-warning-soft); color: var(--ui-fg); font-size: 13px; line-height: 1.45; }
.sup-pauze > svg { width: 16px; height: 16px; color: var(--ui-warning); flex: none; }
.sup-pauze > span { flex: 1; min-width: 0; }
.sup-pauze strong { font-weight: 600; }
.sup-pauze .ui-btn svg { width: 13px; height: 13px; }
.sup-pauze--info { border-color: var(--ui-border); background: var(--ui-muted); }
.sup-pauze--info > svg { color: var(--ui-fg-muted); }
/* Incasso (22/10/2026): geen werk voor deze klant, rood in plaats van oranje. */
.sup-pauze--rood { border-color: color-mix(in srgb, var(--ui-danger) 40%, var(--ui-border)); background: var(--ui-danger-soft); }
.sup-pauze--rood > svg { color: var(--ui-danger); }
.sup-minuten { padding: 18px; }
.sup-minuten__top { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.sup-ring { width: 60px; height: 60px; flex: none; transform: rotate(-90deg); }
.sup-ring circle { fill: none; stroke-width: 3.6; }
.sup-ring__bg { stroke: var(--ui-muted); }
.sup-ring__fg { stroke: var(--ui-success); stroke-linecap: round; stroke-dasharray: var(--p) 100; }
.sup-ring--oranje .sup-ring__fg { stroke: var(--ui-warning); }
.sup-ring--rood .sup-ring__fg { stroke: var(--ui-danger); }
.sup-minuten__tekst { flex: 1; min-width: 0; }
.sup-minuten__num { font-size: 28px; font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; color: var(--ui-fg); font-variant-numeric: tabular-nums; }
.sup-minuten__num small { font-size: 13.5px; font-weight: 500; letter-spacing: 0; color: var(--ui-fg-muted); margin-left: 6px; }
.sup-minuten__sub { font-size: 12.5px; color: var(--ui-fg-muted); margin-top: 4px; }
.sup-minuten__pct { align-self: flex-start; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sup-rest--ok { color: var(--ui-success); }
.sup-meter--groot { min-width: 0; }
.sup-meter--groot .sup-meter__bar { height: 8px; }
.sup-historiek { width: 100%; margin-top: 18px; border-collapse: collapse; }
.sup-historiek th, .sup-historiek td { padding: 8px 12px 8px 0; text-align: left; font-size: 13px; }
.sup-historiek__maand { text-transform: capitalize; }
.sup-historiek .sup-meter { min-width: 0; max-width: 220px; }
.sup-persoon { display: flex; align-items: center; gap: 12px; padding: 16px 18px 6px; min-width: 0; }
.sup-persoon > div:last-child { min-width: 0; }
.sup-avatar { width: 32px; height: 32px; border-radius: 999px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--ui-accent-soft); color: var(--ui-link); font: 600 12px/1 var(--ui-font); letter-spacing: 0.02em; }
.sup-avatar--groot { width: 40px; height: 40px; font-size: 13.5px; }
.sup-persoon__naam { font-size: 13.5px; font-weight: 600; color: var(--ui-fg); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-persoon__sub { font-size: 12.5px; color: var(--ui-fg-muted); margin-top: 1px; }
.sup-dl { margin: 0; padding: 4px 18px 10px; }
.sup-dl__rij { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 6px 0; border-bottom: 1px solid var(--ui-border); }
.sup-dl__rij:last-child { border-bottom: 0; }
.sup-dl dt { flex: none; font-size: 12.5px; color: var(--ui-fg-muted); }
.sup-dl dd { margin: 0; min-width: 0; text-align: right; font-size: 13px; font-weight: 500; color: var(--ui-fg); font-variant-numeric: tabular-nums; }
.sup-dl dd a { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; color: var(--ui-link); text-decoration: none; }
.sup-dl dd a:hover { text-decoration: underline; text-underline-offset: 2px; }
.sup-dl dd a svg { width: 12px; height: 12px; margin-left: 4px; vertical-align: -1px; }
.sup-dl dd .ui-select--sm { width: 170px; max-width: 100%; }
.sup-kiezer { position: relative; display: inline-flex; max-width: 100%; }
.sup-kiezer::before { content: ''; position: absolute; z-index: 1; left: 10px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--b); pointer-events: none; transition: background-color var(--ui-dur) var(--ui-ease-out); }
.sup-kiezer .ui-select { padding-left: 24px; }
.ui-pagehead__actions .sup-kiezer .ui-select--sm { height: 32px; width: auto; min-width: 150px; }
.sup-minveld { display: inline-flex; align-items: center; gap: 6px; }
.sup-minveld .ui-input { width: 76px; height: 28px; padding: 0 8px; font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }
.sup-minveld > span { font-size: 12.5px; color: var(--ui-fg-muted); }
.sup-snellog { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--ui-border); background: color-mix(in srgb, var(--ui-muted) 40%, transparent); }
.sup-snellog .sup-minveld .ui-input { height: 32px; }
.sup-kaartvoet { padding: 6px 8px; border-top: 1px solid var(--ui-border); }
.sup-kaartvoet .ui-btn { width: 100%; justify-content: space-between; color: var(--ui-link); }
.sup-kaartvoet .ui-btn svg { width: 15px; height: 15px; transition: transform var(--ui-dur) var(--ui-ease-out); }
.sup-kaartvoet .ui-btn:hover svg { transform: translateX(2px); }
.sup-acties-lijst { display: flex; flex-direction: column; gap: 2px; padding: 8px; }
.sup-acties-lijst .ui-btn { width: 100%; justify-content: flex-start; font-weight: 500; }
.sup-acties-lijst .ui-btn svg { width: 15px; height: 15px; color: var(--ui-fg-muted); transition: color var(--ui-dur-fast) var(--ui-ease-out); }
.sup-acties-lijst .ui-btn:hover:not(:disabled) svg { color: var(--ui-fg); }
.sup-acties-lijst__sep { height: 1px; margin: 4px 6px; background: var(--ui-border); }
.sup-acties-lijst .sup-gevaar, .sup-acties-lijst .sup-gevaar svg { color: var(--ui-danger); }
.sup-acties-lijst .sup-gevaar:hover { background: var(--ui-danger-soft); }
.sup-acties-lijst .sup-gevaar:hover svg { color: var(--ui-danger); }
/* Aanvragen per klant: geen klantkolom en de tijd in de metaregel, zodat het onderwerp ruimte krijgt. */
.sup-ticket.sup-ticket--klant { grid-template-columns: minmax(0, 1fr) 110px 110px auto; }
.sup-ticket__meta .sup-tijd { height: 18px; font-size: 11px; }
@media (max-width: 1100px) { .sup-ticket.sup-ticket--klant { grid-template-columns: minmax(0, 1fr) auto; } }
.sup-aanvraag { padding: 16px 18px 18px; }
.sup-aanvraag .sup-persoon { padding: 0 0 12px; }
.sup-bericht { padding: 14px 16px; border-radius: 10px; border: 1px solid var(--ui-border); background: color-mix(in srgb, var(--ui-muted) 50%, transparent); font-size: 13.5px; line-height: 1.65; color: var(--ui-fg); white-space: pre-wrap; overflow-wrap: anywhere; }
.sup-tl { padding: 16px 18px 4px; }
.sup-tl .sup-leeg { padding: 16px 0 20px; }
.sup-tl__item { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; }
.sup-tl__item:not(:last-child)::before { content: ''; position: absolute; left: 13.5px; top: 34px; bottom: 6px; width: 1px; background: var(--ui-border); }
.sup-tl__ic { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.sup-tl__ic svg { width: 14px; height: 14px; }
.sup-tl__kop { display: flex; align-items: center; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap; min-height: 28px; }
.sup-tl__label { font-size: 13px; font-weight: 600; color: var(--ui-fg); }
.sup-tl__tijd { font-size: 12px; color: var(--ui-fg-muted); font-variant-numeric: tabular-nums; }
.sup-tl__quote { margin-top: 4px; padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, var(--ui-muted) 55%, transparent); font-size: 13px; line-height: 1.55; color: var(--ui-fg); white-space: pre-wrap; overflow-wrap: anywhere; }
.sup-tl__tekst { font-size: 13px; line-height: 1.5; color: var(--ui-fg-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.sup-reageer { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px; }
.sup-reageer .ui-seg { align-self: flex-start; max-width: 100%; }
.sup-reageer textarea.ui-input { min-height: 96px; font-size: 13.5px; }
.sup-reageer__voet { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sup-reageer__hint { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ui-fg-muted); }
.sup-reageer__hint svg { width: 14px; height: 14px; flex: none; }
.sup-reageer__hint.is-mail { color: var(--ui-link); }
.sup-reageer__voet .ui-btn { margin-left: auto; }
.sup-log { max-height: 440px; overflow-y: auto; }
.sup-log__rij { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--ui-border); transition: background-color var(--ui-dur-fast) var(--ui-ease-out); }
.sup-log__rij:last-child { border-bottom: 0; }
.sup-log__rij:hover { background: color-mix(in srgb, var(--ui-muted) 45%, transparent); }
.sup-log__min { text-align: right; font-size: 16px; font-weight: 650; line-height: 1.1; letter-spacing: -0.02em; color: var(--ui-fg); font-variant-numeric: tabular-nums; }
.sup-log__min small { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--ui-fg-muted); }
.sup-log__tekst { font-size: 13px; line-height: 1.5; color: var(--ui-fg); overflow-wrap: anywhere; }
.sup-log__meta { margin-top: 3px; font-size: 12px; color: var(--ui-fg-muted); }
.sup-log__meta a { color: var(--ui-link); font-weight: 500; text-decoration: none; }
.sup-log__meta a:hover { text-decoration: underline; text-underline-offset: 2px; }
.sup-log .sup-leeg { padding: 28px 18px; }
/* Kerncijfers op gsm: twee kolommen in plaats van vier naast elkaar (Financieel en Activiteiten liepen tot 600px breed, Klanten tot 413px; audit #61). */
@media (max-width: 760px) {
.swc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.clients-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px; }
.swc-stat, .clients-stat-card { min-width: 0; }
}
/* ---------- 24. Meldingen en zoekresultaten (shadcn Popover / Command) ---------- */
/* Meldingenpaneel naast de bel. De plaatsing stond inline in admin.php; nu hier, zodat de devbalk en de gsm het kunnen bijsturen. */
#notif-panel { position: fixed; left: 218px; top: 12px; z-index: 400; width: 330px; max-width: calc(100vw - 230px); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 12px; box-shadow: var(--ui-shadow-lg); overflow: hidden; }
#notif-panel:focus { outline: none; }
/* Dev: de gele balk (24px, z 9999) lag over de bovenrand van het paneel (ronde 3). */
body.has-devbar #notif-panel { top: 36px; }
/* Gsm: volle breedte in plaats van 162px naast de (verborgen) zijbalk (audit #41). */
@media (max-width: 768px) {
#notif-panel { left: 8px; right: 8px; top: 56px; width: auto; max-width: none; max-height: calc(100dvh - 72px); overflow-y: auto; }
body.has-devbar #notif-panel { top: 80px; max-height: calc(100dvh - 96px); }
}
#notif-panel[style*="display: block"], #notif-panel[style*="display:block"] { animation: uiPopIn 180ms var(--ui-ease-out) both; transform-origin: top left; }
@keyframes uiPopIn { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.ui-notif__kop { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--ui-border); }
.ui-notif__kop strong { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--ui-fg); }
.ui-notif__kop .ui-btn { margin-left: auto; color: var(--ui-fg-muted); }
.ui-notif__kop .ui-btn:hover { color: var(--ui-fg); }
.ui-notif__kop .ui-btn svg { width: 14px; height: 14px; }
.ui-notif__tel { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--ui-brand); color: #fff; font: 600 11px/1 var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-notif__lijst { max-height: 380px; overflow-y: auto; overscroll-behavior: contain; padding: 4px; }
.ui-notif__groep { padding: 10px 10px 4px; font-size: 12px; font-weight: 500; color: var(--ui-fg-muted); }
.ui-notif__rij { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: 8px; cursor: pointer; transition: background-color var(--ui-dur-fast) var(--ui-ease-out); }
.ui-notif__rij:hover { background: var(--ui-muted); }
.ui-notif__rij:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ui-ring); }
.ui-notif__ic { width: 32px; height: 32px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; }
.ui-notif__ic svg { width: 15px; height: 15px; }
.ui-notif__tekst { flex: 1; min-width: 0; }
.ui-notif__titel { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--ui-fg); overflow-wrap: anywhere; }
.ui-notif__rij.is-nieuw .ui-notif__titel { font-weight: 600; }
.ui-notif__meta { margin-top: 3px; font-size: 12px; color: var(--ui-fg-muted); font-variant-numeric: tabular-nums; }
.ui-notif__punt { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; flex: none; background: var(--ui-brand); box-shadow: 0 0 0 3px var(--ui-accent-soft); }
.ui-notif__leeg { padding: 32px 16px; }
.ui-notif__voet { display: flex; width: 100%; align-items: center; justify-content: center; gap: 4px; height: 40px; border: 0; border-top: 1px solid var(--ui-border); background: transparent; color: var(--ui-link); font: 500 13px/1 var(--ui-font); cursor: pointer; transition: background-color var(--ui-dur-fast) var(--ui-ease-out); }
.ui-notif__voet:hover { background: var(--ui-muted); }
.ui-notif__voet:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ui-ring); }
.ui-notif__voet svg { width: 15px; height: 15px; transition: transform var(--ui-dur) var(--ui-ease-out); }
.ui-notif__voet:hover svg { transform: translateX(2px); }
/* Zoekresultaten onder de zoekbalk op Start. #hm-search-wrap is de ankerplek (admin-start.css). */
#gs-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 300; margin-top: 6px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 10px; box-shadow: var(--ui-shadow-lg); padding: 4px; max-height: min(420px, 60vh); overflow-y: auto; overscroll-behavior: contain; }
#gs-results[style*="display: block"], #gs-results[style*="display:block"] { animation: uiPopIn 160ms var(--ui-ease-out) both; transform-origin: top center; }
/* Resultaat = knop (ronde 3): Tab, Enter en Spatie werken vanzelf, de pijltjes via _gsToets. */
.ui-gs__rij { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color var(--ui-dur-fast) var(--ui-ease-out); }
.ui-gs__rij:hover { background: var(--ui-muted); }
.ui-gs__rij:focus { background: var(--ui-muted); outline: none; }
.ui-gs__rij:focus-visible { box-shadow: inset 0 0 0 2px var(--ui-ring); }
.ui-gs__rij:active { background: color-mix(in srgb, var(--ui-primary) 8%, var(--ui-surface)); transition-duration: 60ms; }
.ui-gs__rij:hover .ui-gs__ic, .ui-gs__rij:focus .ui-gs__ic { color: var(--ui-primary); border-color: color-mix(in srgb, var(--ui-primary) 30%, var(--ui-border)); }
.ui-gs__ic { transition: color var(--ui-dur-fast) var(--ui-ease-out), border-color var(--ui-dur-fast) var(--ui-ease-out); }
.ui-gs__titel mark { background: var(--ui-accent-soft); color: inherit; font-weight: 600; border-radius: 3px; padding: 0 1px; }
.ui-gs__groep { padding: 8px 10px 4px; font-size: 12px; font-weight: 500; color: var(--ui-fg-muted); }
.ui-gs__ic { width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 7px; border: 1px solid var(--ui-border); color: var(--ui-fg-muted); background: var(--ui-surface); }
.ui-gs__ic svg { width: 14px; height: 14px; }
.ui-gs__tekst { min-width: 0; display: flex; flex-direction: column; }
.ui-gs__titel { font-size: 13px; font-weight: 500; color: var(--ui-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-gs__sub { font-size: 12px; color: var(--ui-fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-gs__leeg { padding: 14px 12px; font-size: 13px; color: var(--ui-fg-muted); text-align: center; }
/* Zoekvenster (Cmd+K of Ctrl+K) op elk scherm buiten Start (ronde 3): smal, bovenaan, één veld, dezelfde resultaten. */
.ui-gsp { position: fixed; inset: 0; z-index: 450; display: flex; justify-content: center; align-items: flex-start; padding: max(12vh, 64px) 16px 16px; }
.ui-gsp[hidden] { display: none; }
.ui-gsp__scrim { position: absolute; inset: 0; background: var(--ui-overlay); animation: uiIn 160ms var(--ui-ease-out); }
.ui-gsp__paneel { position: relative; width: min(560px, 100%); max-height: min(520px, calc(100dvh - 96px)); display: flex; flex-direction: column; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 14px; box-shadow: var(--ui-shadow-lg); overflow: hidden; animation: uiPopIn 180ms var(--ui-ease-out) both; transform-origin: top center; }
.ui-gsp__veld { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border-bottom: 1px solid var(--ui-border); color: var(--ui-fg-muted); cursor: text; }
.ui-gsp__veld > svg { width: 17px; height: 17px; flex: none; }
.ui-gsp__veld input { flex: 1; min-width: 0; height: 50px; padding: 0; border: 0; background: transparent; color: var(--ui-fg); font: 400 15px/1.2 var(--ui-font); outline: none; }
.ui-gsp__veld input::placeholder { color: var(--ui-fg-muted); }
.ui-gsp__veld input::-webkit-search-cancel-button { display: none; }
.ui-gsp kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--ui-border); border-bottom-width: 2px; border-radius: 5px; background: var(--ui-muted); color: var(--ui-fg-muted); font: 500 11px/1 var(--ui-font); }
.ui-gsp__lijst { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
.ui-gsp__voet { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--ui-border); font-size: 12px; color: var(--ui-fg-muted); }
.ui-gsp__voet span { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 600px) { .ui-gsp { padding: 8px; } }
body.has-devbar .ui-gsp { padding-top: max(12vh, 64px); }
@media (max-width: 600px) { body.has-devbar .ui-gsp { padding-top: 32px; } }
@media (hover: none) { .ui-gsp__voet, .ui-gsp__esc { display: none; } }
/* ---------- 25. Activiteiten (feed en filters) ---------- */
.act-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.act-filters .ui-select { width: auto; }
.act-filters .ui-search { margin-bottom: 0; }
.swc-feed-day { padding: 8px 20px; font: 500 12px/1.4 var(--ui-font); text-transform: none; letter-spacing: 0; color: var(--ui-fg-muted); background: var(--ui-surface-2); border-color: var(--ui-border); }
.swc-feed-icon { width: 32px; height: 32px; border-radius: 8px; }
.swc-feed-icon svg { width: 16px; height: 16px; }
.swc-feed-tag { height: 20px; padding: 0 7px; border-radius: 6px; border: 0; font: 500 11.5px/1 var(--ui-font); }
.swc-feed-tag:not([class*="ui-tint--"]):not(.swc-feed-tag--klant) { background: var(--ui-muted); color: var(--ui-fg-muted); font-variant-numeric: tabular-nums; }
.swc-feed-tag--klant { border: 0; }
.swc-feed-avatar--auto svg { width: 11px; height: 11px; }
.swc-feed-item { transition: background-color var(--ui-dur-fast) var(--ui-ease-out); }
.swc-load-more { background: var(--ui-surface); border-color: var(--ui-border); }
.swc-load-more button { height: 32px; padding: 0 16px; border-radius: var(--ui-radius-md); border-color: var(--ui-input); background: var(--ui-surface); color: var(--ui-fg); font: 500 13px/1 var(--ui-font); box-shadow: var(--ui-shadow-xs); transition: background-color var(--ui-dur-fast) var(--ui-ease-out); }
.swc-load-more button:hover { border-color: var(--ui-input); background: var(--ui-surface-2); color: var(--ui-fg); }
/* ===== 26. Beweging ===== */
/* Bewegingsspec v2 (ontwerp/beweging-spec.md): beweging bevestigt wat je net deed, op de plek waar je het deed,
en zwijgt bij een hertekening. Alleen transform en opacity, behalve de breedte van meters en glijbalk.
Het blok "Minder beweging" hieronder zet alles stil, ook bij html[data-motion="uit"]. */
@keyframes uiDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes uiPop { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes uiShake { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes uiIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes uiRise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes uiSpin { to { transform: rotate(360deg); } }
@keyframes uiLand { 0% { box-shadow: 0 0 0 0 var(--ui-ring); } 35% { box-shadow: 0 0 0 4px var(--ui-ring); } 100% { box-shadow: 0 0 0 4px transparent; } }
/* Basisklassen. Tekenbaar icoon: alleen vormen met pathLength="1" tekenen (uiMotion.drawIc zet dat). */
.ui-draw [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; animation: uiDraw 260ms var(--ui-ease-out) forwards; }
.ui-pop { animation: uiPop 360ms var(--ui-ease-pop); }
.ui-shake { animation: uiShake 280ms var(--ui-ease-in-out); }
.ui-land { animation: uiLand 700ms var(--ui-ease-out); }
.ui-spin { animation: uiSpin 700ms linear infinite; }
/* Wat uiMotion zelf maakt of zet, gedeeld door alle patronen. Regels voor één scherm of groep horen in de subsecties. */
/* Bezige knop (P1): busy() wisselt het icoon vooraan, het label blijft staan. */
.ui-busy { cursor: progress; }
.ui-busy > svg { flex: none; }
.ui-busy__lbl { display: inline-flex; align-items: center; gap: inherit; }
.ui-busy.is-ok > svg { color: var(--ui-success); }
.ui-busy:focus-visible { outline: 2px solid var(--ui-ring); outline-offset: 2px; }
/* Getal dat rolt (P20) of tikt (P9). num() zet data-richting en maakt een inline element inline-block. */
.ui-num--rol { animation: uiNumOp 320ms var(--ui-ease-out); }
.ui-num--rol[data-richting="neer"] { animation-name: uiNumNeer; }
.ui-num--rol[data-ui-stijl="tik"] { animation-duration: 140ms; }
@keyframes uiNumOp { from { transform: translateY(2px); } }
@keyframes uiNumNeer { from { transform: translateY(-2px); } }
/* Glijdende indicator (P6, P26): één echte balk per groep met data-ui-glide. :where houdt een bestaande position (sticky) intact. */
:where([data-ui-glide]) { position: relative; }
:where([data-ui-glide] > :not(.ui-glide__bar)) { position: relative; z-index: 1; }
.ui-glide__bar { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 0; }
.ui-glide__bar.is-lijn { height: 2px; background: var(--ui-brand); border-radius: 2px; }
.ui-glide__bar.is-pil { border-radius: 8px; background: var(--ui-surface-2); box-shadow: var(--ui-shadow-xs); }
.ui-glide__bar.is-glij { transition: transform 220ms var(--ui-ease-out), width 220ms var(--ui-ease-out), height 220ms var(--ui-ease-out); }
/* De statische actieve stijl valt pas weg als de balk er staat (.is-klaar). Zonder JS blijft alles zoals nu. */
.ui-glide.is-klaar :is(.hm-tab--active, .swc-filter-btn--active, .ui-seg__btn[aria-pressed="true"]) { background: transparent; box-shadow: none; }
.ui-glide.is-klaar :is(.drawer__tabbtn--active, .obd-tab--active) { border-bottom-color: transparent; }
.ui-glide.is-klaar .ui-tab::after { display: none; }
/* Laadlijn bij verversen ter plaatse (P16). 210px is de zijbalk; op gsm ligt de lijn over de topbalk. */
.ui-laadlijn { position: fixed; top: 0; left: 210px; right: 0; height: 2px; z-index: 9000; opacity: 0; pointer-events: none; overflow: hidden; transition: opacity 160ms var(--ui-ease-out); }
.ui-laadlijn.is-aan { opacity: 1; }
.ui-laadlijn::after { content: ''; position: absolute; inset: 0; width: 40%; background: var(--ui-brand); }
.ui-laadlijn.is-aan::after { animation: uiLaad 1s var(--ui-ease-in-out) infinite; }
@keyframes uiLaad { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
body.has-devbar .ui-laadlijn { top: 24px; }
@media (max-width: 900px) { .ui-laadlijn { left: 0; } }
/* --- 26.a Kern --- */
/* --- 26.b Pipeline en zijbalk --- */
/* P26: de markering in de zijbalk glijdt verticaal mee. Zelfde kleur als de statische actieve stijl (--ui-sidebar-active),
zodat de markering er hetzelfde uitziet als zonder balk. */
#admin-nav .ui-glide__bar.is-pil { left: 8px; right: 8px; width: auto; border-radius: var(--ui-radius-md); background: var(--ui-sidebar-active); box-shadow: none; }
#admin-nav.ui-glide.is-klaar .admin-nav-item--active { background: transparent; }
/* P6: de pil in startpagina-tabs en segmenten krijgt de look van de actieve knop (licht: wit met schaduw, donker: rand) */
:is(.hm-tabs, .ui-seg) > .ui-glide__bar.is-pil { border-radius: 7px; background: var(--ui-surface); box-shadow: var(--ui-shadow-sm); }
[data-theme="dark"] :is(.hm-tabs, .ui-seg) > .ui-glide__bar.is-pil { background: var(--ui-surface-2); box-shadow: inset 0 0 0 1px var(--ui-input); }
.ui-glide.is-klaar .obs-tab--active { border-bottom-color: transparent; }
/* De kernregel zet box-shadow op none bij de actieve knop; zo blijft de focusring voor het toetsenbord zichtbaar */
.ui-glide.is-klaar :is(.hm-tab--active, .swc-filter-btn--active, .ui-seg__btn[aria-pressed="true"]):focus-visible { box-shadow: 0 0 0 3px var(--ui-ring); }
/* P9: bulkbalk schuift één keer in; de toaster schuift mee omhoog zodat de eindtoast niet onder de balk valt */
#admin-content > .pipe-bulkbar.ui-bulk-in { animation: uiBulkIn 220ms var(--ui-ease-out); }
@keyframes uiBulkIn { from { opacity: 0; transform: translateY(12px); } }
body:has(.pipe-bulkbar) .ui-toaster { bottom: 72px; }
/* P13: kolom tijdens slepen, rustiger dan de gestippelde rand */
.pipeline-col__body--over { outline: 1px solid var(--ui-brand); outline-offset: -1px; background: color-mix(in srgb, var(--ui-brand) 7%, transparent); transition: background-color 120ms var(--ui-ease-out); }
/* --- 26.c Knoppen en formulieren --- */
/* P1: admin-btn en hm-btn geven een svg geen maat; zonder deze regel werd de spinner zo hoog als de knop. */
:where(.ui-busy) > svg { width: 1.15em; height: 1.15em; }
.ui-busy:active { transform: none; }
/* Knop met alleen tekst: busy zet er een icoon vóór. De negatieve marges vangen icoon plus tussenruimte op,
zodat de knop even breed blijft en icoon en label samen gecentreerd staan. */
.ui-busy:has(> .ui-busy__lbl) { gap: 0; justify-content: center; }
.ui-busy:has(> .ui-busy__lbl) > svg { margin-inline: calc(-0.575em - 3px) 6px; }
.ui-busy > .ui-busy__lbl { margin-inline-end: calc(-0.575em - 3px); }
/* Groen vinkje op een blauwe of rode knop leest slecht: daar volgt het de tekstkleur. */
:is(.admin-btn--approve, .admin-btn--accent, .admin-btn--primary, .hm-btn--primary, .ui-btn--primary, .admin-btn--reject, .admin-btn--danger, .ui-btn--danger).ui-busy.is-ok > svg { color: inherit; }
/* P7: oog en doorstreept oog uit UI_IC, korte crossfade bij de wissel */
.ui-oog > svg { width: 15px; height: 15px; flex: none; }
.ui-ic-wissel { animation: uiIn 160ms var(--ui-ease-out); }
.ui-btn--xs.ui-btn--icon { width: 28px; }
/* P4: stille autosave. Een puntje zegt gewijzigd (grijs), bezig (knippert) of opgeslagen (groen); alleen een fout krijgt woorden. */
.ui-autosave { font-size: 12px; color: var(--ui-fg-muted); }
[data-save]::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ui-fg-muted); margin-right: 6px; vertical-align: middle; }
[data-save="bezig"]::before { animation: uiIn 600ms var(--ui-ease-in-out) infinite alternate; }
[data-save="ok"]::before { background: var(--ui-success); }
[data-save="fout"] { color: var(--ui-danger); }
[data-save="fout"]::before { background: var(--ui-danger); }
/* P5: fout op het veld zelf. Wint ook bij focus van de blauwe focusring (ook van de #admin-content-regel in sectie 20). */
:is(.admin-input, .ui-input)[aria-invalid="true"],
:is(.admin-input, .ui-input)[aria-invalid="true"]:is(:focus, :focus-visible),
#admin-content :is(.admin-input, .ui-input)[aria-invalid="true"]:focus-visible { border-color: var(--ui-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-danger) 18%, transparent); }
.ui-veldfout { flex-basis: 100%; color: var(--ui-danger); font-size: 12px; line-height: 1.4; margin-top: 4px; }
/* In een flexrij met velden (.ui-veldrij) komt de melding op een eigen regel onder de rij: de velden blijven op één lijn. */
.ui-veldrij > .ui-veldfout { order: 99; margin-top: -2px; }
/* Op gsm staan de velden toch onder elkaar: dan hoort de melding direct onder haar eigen veld. */
@media (max-width: 640px) { .ui-veldrij > .ui-veldfout { order: 0; } }
/* P14: sluitknop in de toast, bereikbaar met het toetsenbord */
.ui-toast__tekst { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ui-toast__x {
flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: -1px -6px -1px 0; padding: 0;
border: 0; border-radius: 6px; background: transparent; color: var(--ui-fg-muted); cursor: pointer;
transition: background-color var(--ui-dur-fast) var(--ui-ease-out), color var(--ui-dur-fast) var(--ui-ease-out);
}
.ui-toast__x:hover { background: var(--ui-muted); color: var(--ui-fg); }
.ui-toast__x:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ui-ring); }
.ui-toast__x svg { width: 14px; height: 14px; }
/* --- 26.d Overlays en navigatie --- */
/* P10: popovers groeien 4px uit hun knop en faden in (alleen bij openen; sluiten gebeurt meteen). */
#drawer-status-menu:not(.is-open) { display: none; }
#pcs-menu:not(.hidden), #drawer-status-menu.is-open, .sm2-card__menu.active {
transition: opacity 140ms var(--ui-ease-out), transform 140ms var(--ui-ease-out); transform-origin: top left;
}
.sm2-card__menu.active { transform-origin: top right; } /* rechts uitgelijnd onder de ⋮-knop */
@starting-style {
#pcs-menu:not(.hidden), #drawer-status-menu.is-open, .sm2-card__menu.active { opacity: 0; transform: translateY(-4px) scale(.98); }
}
/* P11: venster. Vanaf de tweede vulling van een open venster (#modal.is-stabiel) blijft het kader staan, alleen de inhoud faadt. */
#modal.is-stabiel .admin-modal { animation: none; }
#modal.is-stabiel .admin-modal > * { animation: uiIn 140ms var(--ui-ease-out); }
/* P11: gsm-menu. Sectie 4 zette op .admin-sidebar alleen kleurtransities; zo glijdt de lade weer (transform uit admin.css). */
.admin-sidebar { transition: background-color var(--ui-dur-slow) var(--ui-ease-out), color var(--ui-dur-slow) var(--ui-ease-out), border-color var(--ui-dur-slow) var(--ui-ease-out), transform 260ms var(--ui-ease-drawer); }
.admin-sidebar__scrim.show { transition: opacity 200ms var(--ui-ease-out); }
@starting-style { .admin-sidebar__scrim.show { opacity: 0; } }
/* Open gsm-menu boven de topbalk (z 90) en de zoekbalk van Start (inline z 100): logo en Start bleven eronder verborgen.
Drawer (100/101) en venster (200) blijven zo goed liggen. */
@media (max-width: 900px) {
.admin-sidebar { z-index: 160; }
.admin-sidebar__scrim { z-index: 150; }
body.has-devbar .admin-sidebar { top: 24px; height: auto; } /* dev: de gele balk ligt erboven */
}
/* P11: post-popup ververst op zijn plek na een statuswijziging. Geen invalanimatie tijdens het verversen (is-ververs),
en daarna ook niet als is-ververs wegvalt (is-stil op het actieve paneel; een echte tabwissel haalt het weg). */
#drawer.is-ververs .drawer-panel--active, #drawer .drawer-panel.is-stil { animation: none; }
#drawer.is-ververs .drawer { animation: none; transition: none; }
/* P12: schermwissel met richting. Naar een detail 8px van rechts, terug 8px van links; de skeleton alleen in opacity. */
#admin-content.ui-entering[data-nav="in"] > * { animation-name: uiViewInR; }
#admin-content.ui-entering[data-nav="uit"] > * { animation-name: uiViewInL; }
#admin-content.ui-entering > .sk-mono { animation: uiIn 160ms var(--ui-ease-out); }
@keyframes uiViewInR { from { opacity: 0; transform: translateX(8px); } }
@keyframes uiViewInL { from { opacity: 0; transform: translateX(-8px); } }
/* P15: wat er al stond, blijft tot de skeleton (na 150ms) of de nieuwe inhoud komt. Dat oude scherm valt niet opnieuw in.
Staat als laatste: zelfde specificiteit als de regels hierboven. */
#admin-content.ui-entering > .ui-oud { animation: none; }
/* P15: de skeleton van Start en Klanten staat in een sk-mono-wrapper. De gutterregel in sectie 21 kijkt naar het eerste kind,
dus hier dezelfde paginamarges, anders verspringt de pagina als de echte inhoud komt. */
#admin-content:is(:has(> .sk-mono:first-child > .hm-hero:first-child), :has(> .sk-mono:first-child > .clients-header:first-child)) { --ui-gutter: 24px; padding-inline: var(--ui-gutter); }
#admin-content:has(> .sk-mono:first-child > .hm-hero:first-child) { padding-block: 24px 40px; }
#admin-content > .sk-mono > :is(.clients-header:first-child, .clients-stats) { margin-inline: calc(-1 * var(--ui-gutter, 0px)); }
@media (max-width: 760px) {
#admin-content:is(:has(> .sk-mono:first-child > .hm-hero:first-child), :has(> .sk-mono:first-child > .clients-header:first-child)) { --ui-gutter: 16px; }
}
/* --- 26.e Onboarding --- */
/* P6: de tablijn krijgt de kleur van de actieve tab (--admin-accent = --ui-link), niet het merkblauw. */
.obd-tabs > .ui-glide__bar.is-lijn { background: var(--ui-link); }
/* Knoppen met een UI_IC-icoon vooraan (kopiëren, uptimecheck): icoon en label op één lijn, vaste icoonmaat. */
.ob-knop-ic { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ob-knop-ic > svg { width: 14px; height: 14px; flex: none; }
/* P22: focusmoment "Website live". is-wacht (alleen net na Live zetten) houdt cirkel, titel en uptimekaart onzichtbaar
tot uiMotion.moment() is-speel zet; zonder vlag staat meteen de eindtoestand. */
.ob-live__ic { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--ui-success-solid); color: var(--ui-primary-fg); }
.ob-live__ic svg { width: 18px; height: 18px; }
.ob-live__titel { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--ui-success); }
.ob-live.is-wacht :is(.ob-live__ic, .ob-live__titel, .ob-live__uptime) { opacity: 0; }
.ob-live.is-speel .ob-live__ic { animation: uiPop 360ms var(--ui-ease-pop); }
.ob-live.is-speel .ob-live__ic [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; animation: uiDraw 300ms 120ms var(--ui-ease-out) forwards; }
.ob-live.is-speel .ob-live__titel .w { display: inline-block; clip-path: inset(0); }
.ob-live.is-speel .ob-live__titel .w > span { display: inline-block; animation: uiCut 380ms var(--ui-ease-out) both; animation-delay: calc(260ms + var(--i) * 60ms); }
.ob-live.is-speel .ob-live__uptime { animation: uiRise 280ms 600ms var(--ui-ease-out) both; }
@keyframes uiCut { from { transform: translateY(100%); } }
/* Eén metalen glans rond de livekaart. moment() zet ui-metal-conic op de hele sectie; de glans hoort alleen rond de
Livegang-kaart. inset 0 i.p.v. -1px: .obd-card heeft overflow:hidden, een rand erbuiten zou wegvallen. */
.ob-live.ui-metal-conic .ob-live__kaart { position: relative; }
.ob-live.ui-metal-conic .ob-live__kaart::after {
content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2;
background: conic-gradient(from var(--ui-metal-a), transparent 0 70%, var(--ui-metal-2) 80%, var(--ui-metal-4) 85%, transparent 95%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
animation: uiMetalEen 1200ms 200ms var(--ui-ease-in-out) both;
}
@keyframes uiMetalEen { from { --ui-metal-a: 0deg; opacity: 1; } 90% { opacity: 1; } to { --ui-metal-a: 360deg; opacity: 0; } }
/* Livebadge op de tab veert op 500ms in het moment op (vlag live-tab:id, nooit bij een hertekening). */
.ui-pop.ui-pop--laat { animation-delay: 500ms; animation-fill-mode: backwards; }
/* P23: livechecklist. Eigen vinkje dat zichzelf tekent, doorhaling van links naar rechts; bij het laden staat alles
meteen goed (de transities spelen alleen bij een klassewissel). */
.ob-checklist { list-style: none; margin: 0; padding: 0; }
.ob-check { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--ui-border); }
.ob-check__lbl { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; position: relative; cursor: pointer; font-size: 13px; }
.ob-check__in { position: absolute; left: 0; top: 50%; translate: 0 -50%; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; }
.ob-check__box { width: 20px; height: 20px; flex: none; }
.ob-check__box rect { fill: none; stroke: color-mix(in srgb, var(--ui-fg-muted) 55%, var(--ui-surface)); stroke-width: 1.5; transition: fill 140ms, stroke 140ms; }
.ob-check__ring { fill: none; stroke: var(--ui-primary-fg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 220ms var(--ui-ease-out); }
.ob-check.is-aan .ob-check__box rect { fill: var(--ui-success-solid); stroke: var(--ui-success-solid); }
.ob-check.is-aan .ob-check__ring { stroke-dashoffset: 0; }
.ob-check__txt { min-width: 0; overflow-wrap: anywhere; color: var(--ui-fg); transition: color 160ms; }
/* streep op de inline span: loopt over elke regel, ook bij lange labels */
.ob-check__txt > span { background: linear-gradient(currentColor, currentColor) 0 55% / 0 1px no-repeat; transition: background-size 240ms var(--ui-ease-out); }
.ob-check.is-aan .ob-check__txt { color: var(--ui-fg-muted); }
.ob-check.is-aan .ob-check__txt > span { background-size: 100% 1px; }
.ob-check__in:focus-visible + .ob-check__box { outline: 2px solid var(--ui-ring); outline-offset: 2px; border-radius: 6px; }
.ob-check__wie { font-size: 10px; color: var(--ui-fg-muted); white-space: nowrap; }
.ob-check__wie:empty { display: none; }
.is-vol .ob-check__box { animation: uiPop 360ms var(--ui-ease-pop); }
/* P3: verwijderen met twee tikken. Eerste tik: "Zeker?" in rood, de knop wordt zo breed als zijn inhoud. */
.ob-check__del { flex: none; color: var(--ui-fg-muted); }
.ob-check__del svg { width: 14px; height: 14px; }
.ob-check__del:hover { color: var(--ui-danger); }
.ob-check__del.is-armed { color: var(--ui-danger); background: var(--ui-danger-soft); width: auto; padding-inline: 10px; }
@media (prefers-reduced-motion: reduce) { .ob-check__del, .ob-check__txt > span { transition: none; } }
/* --- 26.f Support --- */
/* P6: de glijlijn onder de statustabs volgt de oude ::after-lijn: 8px ingesprongen, afgeronde uiteinden. */
.sup-tabbar .ui-tabs > .ui-glide__bar.is-lijn { clip-path: inset(0 8px round 2px); }
/* P19: de ring staat er ook bij 0%; zonder dit tekent de ronde lijnkop dan een puntje. */
.sup-ring__fg.is-leeg { stroke-linecap: butt; }
/* P13: een aanvraagrij staat in een kaart met overflow: hidden. Het spoor komt daarom binnen haar rand, anders valt het weg aan de zijkanten. */
.sup-ticket.ui-land { animation-name: supLandIn; }
@keyframes supLandIn { 0% { box-shadow: inset 0 0 0 0 var(--ui-ring); } 35% { box-shadow: inset 0 0 0 2px var(--ui-ring); } 100% { box-shadow: inset 0 0 0 2px transparent; } }
/* P13: na een status- of priowissel in de aanvraag veert het gekleurde bolletje van de keuzelijst even op. */
.sup-kiezer.is-wissel::before { animation: uiPop 360ms var(--ui-ease-pop); }
/* P15: stat-kaarten in de skeleton van het overzicht, zoals .hm-stats--4 (een klasse met "--" kleurt .sk-mono helemaal grijs). */
.sup-skstats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .sup-skstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* P5: de snellog is een flexrij; de melding krijgt een eigen regel eronder. Onder het antwoordveld komt ze dichter bij het veld. */
.sup-snellog.ui-veldrij { flex-wrap: wrap; }
.sup-reageer > .ui-veldfout { margin-top: -8px; }
@media (prefers-reduced-motion: reduce) { .sup-kiezer.is-wissel::before { animation: none; } }
/* --- 26.g Overig --- */
/* P6: de filterknoppen van Financieel. De pil neemt de actieve stijl van de knop over (rand, vlak, schaduw)
en glijdt; de knop zelf wordt doorzichtig zodra de balk staat. */
.swc-filterbar > .ui-glide__bar.is-pil { border-radius: var(--ui-radius-md); background: var(--ui-surface); box-shadow: inset 0 0 0 1px var(--ui-input), var(--ui-shadow-xs); }
[data-theme="dark"] .swc-filterbar > .ui-glide__bar.is-pil { background: var(--ui-surface-2); }
.swc-filterbar.ui-glide.is-klaar .swc-filter-btn--active { border-color: transparent; }
/* P1 en P2 in de designkiezer: icoon en spinner netjes naast het label (de knoppen hebben inline stijlen) */
.dk-kopieer, .dk-knop { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.dk-kopieer { white-space: nowrap; }
/* gsm: met het icoon past de rij niet meer naast de titel; knoppen eronder i.p.v. een kopieerknop van twee regels */
@media (max-width: 640px) { #dk-bundles-grid [data-bundle-id] { flex-wrap: wrap; gap: 10px; } }
.dk-kopieer > svg, #fin-reminder-overlay .admin-btn > svg { width: 14px; height: 14px; flex: none; }
/* P18: "Alles gelezen" in het meldingenpaneel, alleen meteen na je eigen klik */
.ui-notif__klaar { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 8px; }
.ui-notif__klaar:focus { outline: none; }
.ui-notif__klaar:focus-visible { box-shadow: 0 0 0 2px var(--ui-ring); }
.ui-notif__klaar .ui-leeg__ic { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.ui-notif__klaar .ui-leeg__ic svg { width: 16px; height: 16px; }
.ui-notif__klaar strong { display: block; font-size: 13px; font-weight: 600; color: var(--ui-fg); }
.ui-notif__klaar span { display: block; font-size: 12px; color: var(--ui-fg-muted); margin-top: 2px; }
.ui-notif__klaar.ui-leeg-in .ui-leeg__ic { animation: uiPop 420ms var(--ui-ease-pop); }
.ui-notif__klaar.ui-leeg-in .ui-leeg__txt { animation: uiRise 300ms 120ms var(--ui-ease-out) both; }
/* ===== 27. Fixronde 15-10 (controle beweging en UX-top 10). Elke agent schrijft alleen in zijn eigen subsectie. ===== */
/* --- 27.0 Gedeeld: brede tabellen scrollen binnen hun kaart (UX #3). De kaart houdt overflow:hidden voor de ronde hoeken. --- */
.ui-table-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.ui-table-scroll > table { min-width: 100%; }
/* --- 27.a Kern: fixes beweging --- */
/* Pipeline: een kolom is een eigen layout- en paint-eiland. Een drop of FLIP in de ene kolom laat de andere kolommen ongemoeid.
De badges .admin-mc__play en .admin-mc__stackcount hebben geen backdrop-filter meer: dat gaf per kaart een eigen laag en maakte elke drop traag. */
.pipeline-col__body { contain: layout paint; overflow-clip-margin: 8px; }
/* Na het sluiten van een venster of de lade landt de focus op de inhoud zelf als de opener weg is: geen ring rond het hele scherm. */
#admin-content[tabindex="-1"]:focus, #drawer .drawer[tabindex="-1"]:focus { outline: none; }
/* Hoog contrast (Windows): box-shadow valt weg, dus elke focusring die alleen een schaduw is, krijgt hier een echte outline. */
@media (forced-colors: active) {
:is(.admin-btn, .hm-btn, .swc-btn-icon, .swc-btn-sm, .swc-filter-btn, .hm-tab, .ui-btn, .ui-seg__btn, .ui-chip, .sup-min-chip, .ui-toast__x, .ui-notif__klaar, .ui-check input):focus-visible,
.admin-switch input:focus-visible + .admin-switch__slider, .acc-toggle input:focus-visible + .acc-toggle-slider { outline: 2px solid Highlight !important; outline-offset: 2px; }
:is(.ui-tab, .ui-sectie__tab, .ui-subtab, .sup-ticket, .sup-row, .ui-notif__rij, .ui-notif__voet, .ui-gs__rij, .sup-logs__maandkop, .sup-logs__rij):focus-visible { outline: 2px solid Highlight !important; outline-offset: -2px; }
#admin-content :is(input, select, textarea):focus-visible { outline: 2px solid Highlight !important; outline-offset: 0; }
}
/* Glijbalk: verborgen tot de groep gemeten is met het echte lettertype (is-klaar). Tot dan toont het actieve item zijn eigen stijl. */
[data-ui-glide]:not(.is-klaar) > .ui-glide__bar { visibility: hidden; }
/* Iconen die emoji vervangen (lade, wachtrij, bugs, lege staat). */
.drawer__tabbtn svg, .mb-nieuw svg, .drawer-datum svg { width: 14px; height: 14px; flex: none; }
.drawer-datum { display: inline-flex; align-items: center; gap: 5px; }
.drawer-media-ph span svg { width: 30px; height: 30px; }
/* ---------- Ronde 3: post-lade ---------- */
.drawer__close { flex: none; color: var(--ui-fg-muted); transition: background-color var(--ui-dur-fast) var(--ui-ease-out), color var(--ui-dur-fast) var(--ui-ease-out); }
.drawer__close:hover { background: var(--ui-muted); color: var(--ui-fg); }
.drawer__close svg { width: 18px; height: 18px; }
/* Statuspil met Lucide-chevron (was een ▾-teken) die meedraait als het menu open is. */
.drawer-stagepil {
position: relative; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px 0 11px; border: 0; border-radius: 999px;
font: 600 12px/1 var(--ui-font); cursor: pointer; transition: box-shadow var(--ui-dur-fast) var(--ui-ease-out);
}
.drawer-stagepil:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent); }
.drawer-stagepil:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ui-ring); }
.drawer-stagepil svg { width: 13px; height: 13px; flex: none; transition: transform var(--ui-dur) var(--ui-ease-out); }
.drawer-stagepil[aria-expanded="true"] svg { transform: rotate(180deg); }
.drawer-stagemenu__item {
display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 10px; border: 0;
border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-fg); font: 500 13px/1.2 var(--ui-font); text-align: left; cursor: pointer;
transition: background-color var(--ui-dur-fast) var(--ui-ease-out);
}
.drawer-stagemenu__item:hover, .drawer-stagemenu__item[aria-current="true"] { background: var(--ui-muted); }
.drawer-stagemenu__item[aria-current="true"] { font-weight: 600; }
.drawer-stagemenu__item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ui-ring); }
.drawer-stagemenu__item svg { width: 14px; height: 14px; flex: none; color: var(--ui-link); }
/* Voorvertoning: neutraal vlak in licht en donker (was een vaste lichtblauwe gradient, ook in donker). */
.drawer-prev { margin-bottom: 16px; padding: 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); background: var(--ui-surface-2); }
.drawer-prev .drawer__label { margin-bottom: 12px; text-align: center; }
.drawer-prev__kanalen { display: flex; justify-content: center; margin-bottom: 12px; }
.drawer-prev__kanalen .ui-seg { flex-wrap: wrap; justify-content: center; }
.drawer__labelhint { font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ui-fg-muted); }
/* Media per kanaal */
.drawer-kanaal__leeg { font-size: 12px; font-weight: 600; color: var(--ui-warning); }
.drawer-kanaal__hint {
padding: 18px 16px; border: 1px dashed var(--ui-input); border-radius: var(--ui-radius-md); background: var(--ui-surface-2);
text-align: center; font-size: 12.5px; line-height: 1.45; color: var(--ui-fg-muted);
}
.drawer-kanaal__weg { color: var(--ui-danger); }
.drawer-kanaal__weg:hover { background: var(--ui-danger-soft); color: var(--ui-danger); }
/* Uploadknop: label met een verborgen bestandsveld dat wel met Tab bereikbaar is; de ring komt op de knop. */
.ui-btn--bestand { position: relative; cursor: pointer; }
.ui-btn--bestand:has(input:focus-visible) { outline: none; box-shadow: 0 0 0 3px var(--ui-ring); }
.drawer-cover__weg {
position: absolute; top: 6px; right: 6px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
border: 0; border-radius: 50%; background: rgba(9, 14, 26, 0.66); color: #fff; cursor: pointer;
transition: background-color var(--ui-dur-fast) var(--ui-ease-out);
}
.drawer-cover__weg:hover { background: var(--ui-danger-solid); }
.drawer-cover__weg:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ui-ring); }
.drawer-cover__weg svg { width: 15px; height: 15px; }
.drawer-geluid {
position: absolute; top: 10px; right: 10px; z-index: 3; padding: 6px 10px; border: 0; border-radius: var(--ui-radius-md);
background: rgba(9, 14, 26, 0.66); color: #fff; font: 500 12px/1.2 var(--ui-font); cursor: pointer; backdrop-filter: blur(4px);
transition: background-color var(--ui-dur-fast) var(--ui-ease-out);
}
.drawer-geluid:hover { background: rgba(9, 14, 26, 0.84); }
.drawer-geluid:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ui-ring); }
@media (max-width: 640px) { .drawer-geluid::after { content: ""; position: absolute; inset: -9px -4px; } }
/* Kanaalkiezer: groepskop neutraal met een merkbolletje (de merkkleur als tekst was #111 voor TikTok en Threads, onleesbaar in donker). */
.ch-group__kop {
display: flex; align-items: center; gap: 6px; margin: 8px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
text-transform: uppercase; color: var(--ui-fg-muted);
}
.ch-group__kop::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--pc); box-shadow: 0 0 0 1px var(--ui-border); }
.wq-stat__ic svg { width: 22px; height: 22px; }
.wq-section__head > svg { width: 16px; height: 16px; flex: none; color: var(--admin-text-muted); }
.admin-empty__icon svg { width: 44px; height: 44px; color: var(--admin-text-muted); }
/* Mijn bugs en changelog: lange woorden en paden breken af in plaats van de pagina breder te maken. */
.mb-pagina { padding: 20px 24px; max-width: 800px; overflow-wrap: anywhere; }
.mb-kaart__acties { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.cl-pagina { padding: 20px 24px; max-width: 900px; overflow-wrap: anywhere; }
.cl-form__rij { display: flex; gap: 8px; margin-bottom: 8px; }
.cl-form__rij > select { flex: none; width: 150px; }
.cl-rij { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--admin-border); }
.cl-rij__datum { flex-shrink: 0; width: 150px; font-size: 11px; color: var(--admin-text-muted); }
.cl-rij__body { flex: 1; min-width: 0; }
.cl-rij__titel { font-size: 14px; font-weight: 700; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
/* Verwijderknop (ronde 3): stil grijs, rood bij hover. Ligt bovenaan naast de titel. */
.cl-rij__weg { flex: none; align-self: flex-start; margin: -6px -6px 0 0; color: var(--ui-fg-muted); }
.cl-rij__weg:hover { color: var(--ui-danger); background: var(--ui-danger-soft); }
.cl-rij__weg svg { width: 15px; height: 15px; }
/* Toevoegen staat rechts onder het formulier (admin.css gaf admin-btn flex:1, dan liep hij over de hele breedte); op de gsm wel breed. */
.cl-form__actie { display: flex; justify-content: flex-end; margin-top: 8px; }
.cl-form__actie .admin-btn { flex: none; padding: 9px 16px; }
@media (max-width: 640px) { .cl-form__actie .admin-btn { flex: 1; } }
@media (max-width: 640px) {
.mb-pagina, .cl-pagina { padding: 16px; }
.mb-kop, .mb-kaart__rij { flex-wrap: wrap; }
.mb-kaart__acties { flex-direction: row; flex-wrap: wrap; }
.cl-form__rij { flex-wrap: wrap; }
.cl-form__rij > select { flex: 1 1 100%; width: auto; }
.cl-rij { flex-wrap: wrap; row-gap: 6px; }
.cl-rij__datum { width: auto; flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 0 8px; }
.cl-rij__datum > div { margin-top: 0 !important; }
.cl-rij__body { flex-basis: 100%; order: 3; }
}
/* Lade op gsm: de vijf tabs passen zonder iconen en met smallere padding op één rij, ook met "Geschiedenis" op 360 breed. */
@media (max-width: 480px) {
.drawer__tabbar { padding-left: 8px; padding-right: 8px; }
.drawer__tabbtn { padding-left: 8px; padding-right: 8px; }
.drawer__tabbtn svg { display: none; }
}
@media (max-width: 380px) {
.drawer__tabbtn { padding-left: 6px; padding-right: 6px; font-size: 12.5px; }
}
/* --- 27.b Kern: UX (Start, Planner, Instellingen, Team) --- */
/* Start (UX #9, #10): vaste dagkop met één zin, kerncijfers als één rij knoppen. */
.hm-hero.hm-dagkop { margin-bottom: 14px; }
.hm-hero.hm-dagkop h1 { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.25; margin: 0 0 4px; }
.hm-hero.hm-dagkop p { font-size: 13.5px; color: var(--ui-fg-muted); margin: 0; }
.hm-dagkop__fout { display: inline-flex; align-items: center; gap: 6px; color: var(--ui-warning); font-weight: 500; }
.hm-dagkop__fout svg { width: 14px; height: 14px; flex: none; }
.hm-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.hm-kpi {
appearance: none; font: inherit; text-align: left; display: flex; flex-direction: column; gap: 2px; min-width: 0;
padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: 10px; background: var(--ui-surface); color: var(--ui-fg);
box-shadow: var(--ui-shadow-xs); cursor: pointer;
transition: border-color var(--ui-dur-fast) var(--ui-ease-out), background-color var(--ui-dur-fast) var(--ui-ease-out);
}
.hm-kpi:hover { background: var(--ui-surface-2); border-color: var(--ui-input); }
.hm-kpi:focus-visible { outline: 2px solid var(--ui-ring); outline-offset: 2px; }
.hm-kpi__lbl { font-size: 12px; font-weight: 500; color: var(--ui-fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-kpi__num { font-size: 20px; font-weight: 650; line-height: 1.2; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hm-kpi__num--orange { color: var(--ui-warning); }
.hm-kpi__num--red { color: var(--ui-danger); }
.hm-kpi__num--green { color: var(--ui-success); }
.hm-kpi__num--leeg { color: var(--ui-fg-muted); }
.sk-mono .hm-kpis .hm-kpi { box-shadow: none; }
/* Tablet en gsm: zie admin-start.css, sectie 2 (rijen van drie op tablet, twee kolommen op gsm, geen scrollstrook meer). */
/* Uitleg bij een sectie: info-icoon met tooltip in de kop in plaats van een blok onder de lijst. */
.hm-section__head:has(.hm-uitleg) { position: relative; }
.hm-uitleg { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 2px; vertical-align: -4px; border-radius: 50%; color: var(--ui-fg-muted); cursor: help; }
.hm-uitleg svg { width: 14px; height: 14px; }
.hm-uitleg:hover, .hm-uitleg:focus-visible { color: var(--ui-link); }
.hm-uitleg:focus-visible { outline: 2px solid var(--ui-ring); outline-offset: 1px; }
.hm-uitleg::after {
content: attr(data-uitleg); position: absolute; left: 18px; right: 18px; top: calc(100% - 4px); z-index: 20;
padding: 8px 10px; border-radius: var(--ui-radius-sm); border: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-fg);
box-shadow: var(--ui-shadow-md); font-size: 12.5px; font-weight: 400; line-height: 1.45; letter-spacing: 0; white-space: normal;
opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--ui-dur-fast) var(--ui-ease-out), visibility 0s linear var(--ui-dur-fast);
}
.hm-uitleg:hover::after, .hm-uitleg:focus::after { opacity: 1; visibility: visible; transition-delay: 0s; }
/* Foutblok per sectie (U6.1): zonder stippelrand binnen een kaart, rood icoon. */
.hm-section .hm-fout { border: 0; border-radius: 0; padding: 28px 20px; }
.hm-fout .ui-empty__ic { background: var(--ui-danger-soft); color: var(--ui-danger); }
.hm-fout > .ui-btn { margin-top: 8px; }
.hm-fout > .ui-btn svg { width: 14px; height: 14px; }
/* Noodstopbalk als de status niet geladen kon worden: waarschuwing, geen rode alarmbalk. Lijnicoon (geen fill). */
.ui-pausebar--onbekend {
background: color-mix(in srgb, var(--ui-warning) 14%, var(--ui-surface)); color: var(--ui-fg);
border-bottom: 1px solid color-mix(in srgb, var(--ui-warning) 35%, transparent); box-shadow: none;
}
.ui-pausebar--onbekend svg { fill: none; stroke: currentColor; color: var(--ui-warning); }
.ui-pausebar--onbekend .ui-pausebar__btn { border-color: var(--ui-input); background: var(--ui-surface); color: var(--ui-fg); }
.ui-pausebar--onbekend .ui-pausebar__btn:hover { background: var(--ui-muted); }
.ui-pausebar--onbekend .ui-pausebar__btn:focus-visible { outline-color: var(--ui-ring); }
/* Planner (U6.1): balk als een deel van de klanten niet laadde, foutblok als er niets binnenkwam. */
.pipe-fout {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 12px;
border-radius: var(--ui-radius-sm); border: 1px solid color-mix(in srgb, var(--ui-warning) 35%, transparent);
background: color-mix(in srgb, var(--ui-warning) 12%, var(--ui-surface)); color: var(--ui-fg); font-size: 13px; line-height: 1.45;
}
.pipe-fout > svg { width: 16px; height: 16px; flex: none; color: var(--ui-warning); }
.pipe-fout > span { flex: 1 1 260px; min-width: 0; }
.pipe-fout strong { font-weight: 600; }
.pipe-fout .ui-btn svg { width: 14px; height: 14px; }
.pipe-fout-leeg { margin: 24px auto; max-width: 520px; }
/* Team (U2.4): eigen rij vergrendeld. De inline cursor:pointer van de keuzelijst moet wijken. */
.tm-jij { font-weight: 500; font-size: 12px; color: var(--ui-fg-muted); }
select.tm-rol:disabled { opacity: 0.6; cursor: not-allowed !important; }
/* Planner (U2.2): klantfeedback op de kaart. Ruim: quote van 2 regels; compact: alleen de chip. */
.admin-mc__fb { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 4px; min-width: 0; }
.admin-mc__fb-chip { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: var(--ui-radius-sm); font-size: 10.5px; font-weight: 600; background: var(--ui-warning-soft); color: var(--ui-warning); }
.admin-mc__fb--afgekeurd .admin-mc__fb-chip { display: none; background: var(--ui-danger-soft); color: var(--ui-danger); }
.admin-mc__fb-tekst {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
padding: 3px 7px; border-radius: var(--ui-radius-sm); background: var(--ui-warning-soft); font-size: 11px; line-height: 1.35; color: var(--ui-fg);
}
.admin-mc__fb--afgekeurd .admin-mc__fb-tekst { background: var(--ui-danger-soft); }
.admin-mc__fb-lbl { font-weight: 600; color: var(--ui-fg-muted); }
.pipeline--compact .admin-mc__fb-tekst { display: none; }
.pipeline--compact .admin-mc__fb--afgekeurd .admin-mc__fb-chip { display: inline-flex; }
/* Post-lade (U2.2): laatste klantreactie bovenaan de tab Inhoud. */
.drawer-fb { padding: 12px 14px; border-radius: 10px; background: var(--ui-warning-soft); border: 1px solid color-mix(in srgb, var(--ui-warning) 30%, transparent); }
.drawer-fb--afgekeurd { background: var(--ui-danger-soft); border-color: color-mix(in srgb, var(--ui-danger) 30%, transparent); }
.drawer-fb__kop { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 6px; }
.drawer-fb__chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ui-warning); }
.drawer-fb--afgekeurd .drawer-fb__chip { color: var(--ui-danger); }
.drawer-fb__chip svg { width: 14px; height: 14px; flex: none; }
.drawer-fb__wie { font-size: 12px; color: var(--ui-fg-muted); }
.drawer-fb__tekst { font-size: 13px; line-height: 1.5; color: var(--ui-fg); white-space: pre-line; overflow-wrap: anywhere; }
/* --- 27.c Onboarding --- */
/* P22: het vinkje in de groene cirkel tekent zichzelf. Chromium herberekent [pathLength] (26.e) niet na de klassewissel
op .ob-live; een klasse op het pad wel. */
.ob-live.is-speel .ob-live__vink { stroke-dasharray: 1; stroke-dashoffset: 1; animation: uiDraw 300ms 120ms var(--ui-ease-out) forwards; }
/* P23 in hoog contrast: de streep is een achtergrondverloop en valt weg. Een echte doorhaling en GrayText geven
afgevinkte items een eigen signaal naast het gevulde vakje. */
@media (forced-colors: active) {
.ob-check.is-aan .ob-check__txt { color: GrayText; }
.ob-check.is-aan .ob-check__txt > span { text-decoration: line-through; }
}
/* UX #8: openstaand bedrag als kleine chip onder de klantnaam; rood alleen als de factuur vervallen is en het traject loopt. */
.ob-open-chip { display: inline-block; margin-top: 4px; padding: 0 6px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-muted); color: var(--ui-fg-muted); font-size: 11px; font-weight: 500; line-height: 18px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ob-open-chip--laat { background: var(--ui-danger-soft); color: var(--ui-danger); border-color: color-mix(in srgb, var(--ui-danger) 22%, transparent); }
/* UX #3: op 1280 past de lijst in haar kaart (smallere cellen en voortgangsbalk). Smaller scrolt ze binnen
.ui-table-scroll en blijft de kolom Acties rechts staan, met een schaduw zolang er iets onder zit. */
#ob-list-table :is(th, td) { padding-inline: 10px; }
#ob-list-table .swc-progress { min-width: 110px; }
#ob-list-table :is(th, td):last-child { position: sticky; right: 0; z-index: 1; background: var(--ui-surface); }
#ob-list-table tbody tr:hover td:last-child { background: color-mix(in srgb, var(--ui-muted) 55%, var(--ui-surface)); }
@supports (animation-timeline: scroll(x)) {
.ob-lijst-scroll { scroll-timeline: --ob-lijst x; }
#ob-list-table :is(th, td):last-child { animation: obActiesRand linear both; animation-timeline: --ob-lijst; }
}
@keyframes obActiesRand { from { box-shadow: inset 1px 0 0 var(--ui-border), -12px 0 12px -12px rgb(0 0 0 / .35); } to { box-shadow: inset 1px 0 0 transparent, 0 0 0 0 transparent; } }
/* --- 27.d Support, Financieel en beheer --- */
/* P15: de skeletons van Logs, Financieel en Activiteiten beginnen met een admin-header in de sk-mono-wrapper. Dezelfde
gutter als sectie 21, anders schuift de pagina 24px op zodra de echte inhoud komt. */
#admin-content:has(> .sk-mono:first-child > .admin-header:first-child) { --ui-gutter: 24px; padding-inline: var(--ui-gutter); }
#admin-content > .sk-mono > .admin-header:first-child { margin-inline: calc(-1 * var(--ui-gutter, 0px)); }
@media (max-width: 760px) { #admin-content:has(> .sk-mono:first-child > .admin-header:first-child) { --ui-gutter: 16px; } }
/* Logs (support_maand): tegels, maanden en registraties als klassen i.p.v. inline stijlen, zodat skeleton en pagina
dezelfde maten delen. Op de gsm twee tegels per rij: vier naast elkaar maakte de pagina 421px breed. */
.sup-logs__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.sup-logs__stat { background: var(--admin-card); border: 1px solid var(--admin-border); border-radius: var(--admin-radius); padding: 16px; text-align: center; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .sup-logs__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .sup-logs__stat { padding: 14px 10px; } }
.sup-logs__maand { background: var(--admin-card); border: 1px solid var(--admin-border); border-radius: var(--admin-radius); overflow: hidden; margin-bottom: 14px; }
.sup-logs__maandkop { width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.sup-logs__maandkop:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ui-ring); }
.sup-logs__pijl { display: inline-flex; flex: none; color: var(--admin-text-muted); transition: transform var(--ui-dur-fast, 150ms) var(--ui-ease-out); }
.sup-logs__pijl svg { width: 14px; height: 14px; }
.sup-logs__maandkop[aria-expanded="true"] .sup-logs__pijl { transform: rotate(90deg); }
.sup-logs__rij { display: flex; align-items: flex-start; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--admin-border); transition: background-color var(--ui-dur-fast, 150ms) var(--ui-ease-out); }
.sup-logs__rij:last-child { border-bottom: 0; }
.sup-logs__rij[onclick] { cursor: pointer; }
.sup-logs__rij[onclick]:hover { background: color-mix(in srgb, var(--ui-muted) 55%, transparent); }
.sup-logs__rij:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ui-ring); }
@media (max-width: 640px) { .sup-logs__maandkop { flex-wrap: wrap; gap: 4px 10px; padding: 12px 14px; } .sup-logs__rij { padding: 12px 14px; } }
@media (prefers-reduced-motion: reduce) { .sup-logs__pijl, .sup-logs__rij { transition: none; } }
/* UX #6: de prioriteit staat in een eigen smalle kolom vóór het onderwerp, zodat urgent in één oogopslag opvalt. Binnen
.sup-ticket__main, zodat de rasterregels van de rij (en de gsm-indeling met :nth-child) blijven kloppen. */
.sup-ticket__main.is-prio { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.sup-ticket__tekst { min-width: 0; }
/* Onderwerp op twee regels in plaats van na 176px afgekapt (1280 breed); de volledige tekst staat in de title. */
.sup-ticket__onderwerp { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
.sup-ticket__prio .sup-prio { margin-left: 0; }
/* De prio-kolom kost het onderwerp ruimte: datum, status en tijd krijgen daarom de breedte van hun inhoud
(6d open, In behandeling, ~30 min) i.p.v. de ruimere standaard. De rij stapelt nu op de breedte van de lijst,
niet van het venster: tussen 1100 en ~1200px (zijbalk open) bleef er anders 16px over voor het onderwerp. */
#sup-ticket-rows { container-type: inline-size; }
@container (min-width: 960px) { .sup-ticket:has(> .sup-ticket__main.is-prio) { grid-template-columns: minmax(0, 1fr) 108px 116px 72px auto; } }
@container (max-width: 959.98px) {
.sup-ticket:has(> .sup-ticket__main.is-prio) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main status" "datum tijd" "acties acties"; row-gap: 8px; }
.sup-ticket:has(> .sup-ticket__main.is-prio) > .sup-ticket__main { grid-area: main; }
.sup-ticket:has(> .sup-ticket__main.is-prio) > :nth-child(3) { grid-area: status; justify-self: end; }
.sup-ticket:has(> .sup-ticket__main.is-prio) > .sup-ticket__datum { grid-area: datum; flex-direction: row; align-items: center; }
.sup-ticket:has(> .sup-ticket__main.is-prio) > .sup-ticket__tijd { grid-area: tijd; text-align: right; }
.sup-ticket:has(> .sup-ticket__main.is-prio) > .sup-ticket__acties { grid-area: acties; justify-content: flex-start; flex-wrap: wrap; }
}
@media (max-width: 640px) {
.sup-ticket__main.is-prio { grid-template-columns: minmax(0, 1fr); row-gap: 6px; justify-items: start; }
.sup-ticket__prio:empty { display: none; }
.sup-ticket__tekst { justify-self: stretch; }
}
/* UX #3: de websitestabel past op 1280 in haar kaart (smallere celmarges); smaller scrolt ze binnen .ui-table-scroll. */
#sup-websites .sup-table :is(th, td) { padding-left: 14px; padding-right: 10px; }
#sup-websites .sup-table :is(th, td):first-child { padding-left: 18px; }
/* Herinnering (Financieel): het kruisje is een icoon i.p.v. het teken. */
#fin-reminder-overlay .swc-modal-close { display: inline-flex; align-items: center; justify-content: center; padding: 4px; }
#fin-reminder-overlay .swc-modal-close > svg { width: 16px; height: 16px; }
/* Design kiezer: titel en categorie naast elkaar, op de gsm onder elkaar. 1fr 1fr liet de keuzelijst niet krimpen
(min-content), de pagina werd daardoor 406px breed. */
.dk-rij2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.dk-rij2 > * { min-width: 0; width: 100%; box-sizing: border-box; }
@media (max-width: 640px) { .dk-rij2 { grid-template-columns: minmax(0, 1fr); } }
/* Iconen die de emoji vervangen (Download ZIP, Vervangen, Verwijderen, ZIP toevoegen, thumbnail en ZIP kiezen, bundel). */
.dk-ic > svg, .dk-ic.dk-knop > svg { width: 13px; height: 13px; flex: none; }
.dk-ic { display: inline-flex; align-items: center; }
.dk-tegel-ic > svg { width: 22px; height: 22px; color: #fff; }
/* ---------- 10. Minder beweging ---------- */
/* Vuistregel: alles wat getekend wordt, staat meteen volledig getekend (elk vinkje zichtbaar). Ook de klassen
van patronen die later gebouwd worden staan hier al, zodat dit blok compleet blijft. */
@media (prefers-reduced-motion: reduce) {
.ui-metal::after, .ui-metal.is-draai::after { animation: none !important; }
.ui-tt__core, .ui-tt__rays, .ui-tt__bite, .admin-sidebar__theme-knob { transition: none; }
#admin-content > *, .admin-modal-overlay--active .admin-modal, .ui-toast, .ui-toast--weg, .ui-pausebar, #notif-panel, #gs-results, .ui-gsp__scrim, .ui-gsp__paneel { animation: none !important; }
.sup-min-chip:active { transform: none; }
.admin-mc:hover { transform: none; }
.hm-section__head a:hover svg, .hm-urgency__action:hover svg { transform: none; }
/* 26. Beweging */
.ui-draw [pathLength], .ob-live__ic [pathLength] { stroke-dashoffset: 0 !important; animation: none !important; }
.ob-check__ring, .ob-check__txt, .ob-check__box rect { transition: none !important; }
.ui-pop, .ui-shake, .ui-land, .ui-num--rol, .ui-bulk-in, .ui-ic-wissel, .ui-leeg-in *, .is-vol .ob-check__box,
.ob-live *, .ui-metal-conic::after, .ui-glide__bar,
#modal.is-stabiel .admin-modal > *, [data-save]::before { animation: none !important; transition: none !important; }
#pcs-menu, #drawer-status-menu, .sm2-card__menu, .admin-sidebar, .admin-sidebar__scrim, .ui-btn.is-armed, .pipeline-col__body--over, .ui-laadlijn { transition: none !important; }
.ui-spin { animation: none !important; opacity: .6; }
.ui-ai__lbl { background: none !important; -webkit-text-fill-color: currentColor !important; animation: none !important; }
.ui-laadlijn::after { animation: none !important; opacity: .5; }
}
/* Schakelaar html[data-motion="uit"] (localStorage 'sp-motion' = 'uit'): zoals reduced motion, ook zonder systeeminstelling.
1ms i.p.v. none: animaties met forwards (het vinkje) komen zo toch in hun eindtoestand en animationend vuurt nog. */
html[data-motion="uit"] *, html[data-motion="uit"] *::before, html[data-motion="uit"] *::after {
animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important;
transition-duration: 1ms !important; transition-delay: 0ms !important;
}
html[data-motion="uit"] .ui-spin { opacity: .6; }
html[data-motion="uit"] .ui-ai__lbl { background: none !important; -webkit-text-fill-color: currentColor !important; }
html[data-motion="uit"] .ui-laadlijn::after { animation: none !important; opacity: .5; }
/* Hoog contrast (Windows): wat alleen met kleur of schaduw spreekt, krijgt een systeemkleur. */
@media (forced-colors: active) {
.ui-glide__bar.is-lijn { background: Highlight !important; }
.ui-glide__bar.is-pil { background: none !important; outline: 2px solid Highlight; outline-offset: -2px; } /* tekst blijft leesbaar */
/* In de tweede rij krijgt de subtab met focus zelf een ring van 2px in Highlight: de keuze dan dun en in tekstkleur,
anders zie je twee gelijke kaders en weet je niet waar de focus staat (eindcontrole r7). */
.ui-subtabs > .ui-glide__bar.is-pil { outline: 1px solid CanvasText; outline-offset: -1px; }
.ui-land { outline: 2px solid Highlight; }
.ui-ai__lbl { -webkit-text-fill-color: CanvasText !important; background: none !important; }
.ui-laadlijn::after { background: Highlight; }
}
/* ---------- Ronde 3: opslaanbalk zonder chatknop ---------- */
/* admin-ob.css laat rechts 92 px (gsm 84 px) vrij voor de AI-chatknop van een onboardingdossier. Die knop staat alleen
daar; op Socials instellingen en Mijn account bleef de ruimte leeg en schoof Annuleer naar binnen. Zonder zichtbare
chatknop de gewone padding. */
body:not(:has(#ai-chat-btn[style*="flex"])) .obs-save-bar { padding-right: 18px; }
@media (max-width: 640px) {
body:not(:has(#ai-chat-btn[style*="flex"])) .obs-save-bar { padding-right: 16px; }
}
/* ---------- Ronde 3: tikdoelen op de gsm ---------- */
/* Minstens 44 px hoog voor knoppen, keuzelijsten en velden op de gsm (de meeste waren 30 tot 36 px). Niet op Start (eigen
regels in admin-start.css) en niet op de onboardingschermen (eigen pakket). data-view zet switchView op #admin-content.
Velden krijgen 16 px tekst: kleiner en iOS zoomt in zodra je erop tikt. */
@media (max-width: 640px) {
#admin-content:not([data-view^="onboarding"], [data-view="home"]) :is(.ui-btn, .admin-btn, .team-btn-sm, .acc-btn-danger, .ui-seg__btn, .pipeline-clientswitch__btn, .obs-tab) { min-height: 44px; }
#admin-content:not([data-view^="onboarding"], [data-view="home"]) .ui-btn--icon { min-width: 44px; }
#admin-content:not([data-view^="onboarding"], [data-view="home"]) :is(.ui-input, .admin-input, .admin-textarea, select, textarea, input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"])) { min-height: 44px; font-size: 16px; }
#admin-content:not([data-view^="onboarding"], [data-view="home"]) input:is([type="checkbox"], [type="radio"]) { width: 20px; height: 20px; }
/* De klantkeuze staat naast een keuzelijst van 16 px; zelfde tekstgrootte, anders lijkt het een ander soort knop. */
#admin-content:not([data-view^="onboarding"], [data-view="home"]) .pipeline-clientswitch__btn { font-size: 16px; }
/* Post-lade (staat buiten #admin-content) */
#drawer :is(.ui-btn, .admin-btn) { min-height: 44px; }
#drawer .drawer__close { width: 44px; height: 44px; }
#drawer :is(.admin-input, .ui-input, select, textarea, input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"])) { min-height: 44px; font-size: 16px; }
#drawer input:is([type="checkbox"], [type="radio"]) { width: 20px; height: 20px; }
/* Kleine knoppen die klein moeten ogen: grotere tikzone via een onzichtbare rand rond de knop. */
#drawer :is(.drawer-stagepil, .st-ic-knop) { position: relative; }
#drawer .drawer-stagepil::after { content: ""; position: absolute; inset: -9px -4px; }
#drawer .st-ic-knop::after { content: ""; position: absolute; inset: -8px; }
/* Restjes uit de tikcontrole: oogknop bij de sleutels (40 px breed), vinkje met label (20 px), rechtenvinkjes
in Team (26 px), "Meer laden" in Activiteiten (32 px) en de schakelaars in Account (36 x 20). */
#admin-content:not([data-view^="onboarding"], [data-view="home"]) .ui-oog { min-width: 44px; }
#admin-content:not([data-view^="onboarding"], [data-view="home"]) :is(.ui-check, .team-perm) { min-height: 44px; }
#admin-content:not([data-view^="onboarding"], [data-view="home"]) .swc-load-more button { height: 44px; }
/* De schakelaar blijft 36 x 20 (zo herkent iedereen hem), het label vangt de tik op in een zone van 44 x 44. */
#admin-content:not([data-view^="onboarding"], [data-view="home"]) .acc-toggle::after { content: ""; position: absolute; inset: -12px -4px; }
/* Socials instellingen: de schakelaars per klant (41 px) en "Bekijk voorbeeld" (de .ui-btn-regel hierboven). */
#admin-content .some-sw { min-height: 44px; justify-content: center; }
}
/* "Bekijk voorbeeld" in Socials instellingen: was een losse 11 px-knop met eigen stijl, nu een gewone kleine knop. */
.some-voorbeeld { margin-top: 10px; }
/* ---------- Ronde 3: tekens vervangen door Lucide-iconen ---------- */
/* Externe link met icoon (was een ↗-teken). */
.ui-linkext { display: inline-flex; align-items: center; gap: 4px; color: var(--ui-link); font-weight: 500; text-decoration: none; }
.ui-linkext:hover { text-decoration: underline; text-underline-offset: 2px; }
.ui-linkext svg { width: 13px; height: 13px; flex: none; }
.wq-empty { display: flex; align-items: center; justify-content: center; gap: 6px; }
.wq-empty svg { width: 16px; height: 16px; flex: none; color: var(--ui-success); }
.acc-bevestigd { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--ui-success); }
.acc-bevestigd svg { width: 14px; height: 14px; flex: none; }
/* ---------- Ronde 3: klantvensters (kanalen, templates, contactpersonen, team, dropbox) ---------- */
/* Rij weghalen: rustig grijs icoon, rood pas bij hover of als hij gewapend is ("Zeker?"). Was een rood ✕-teken zonder label. */
.ui-rij-weg { flex: none; color: var(--ui-fg-muted); }
.ui-rij-weg:hover, .ui-rij-weg.is-armed { color: var(--ui-danger); background: var(--ui-danger-soft); }
.ui-rij-weg svg { width: 15px; height: 15px; }
.ui-rij-weg.is-armed { width: auto; padding-inline: 10px; }
.tpl-kaart__acties { display: flex; align-items: center; gap: 6px; margin-top: 6px; min-height: 32px; }
.tpl-code { font-size: 12px; }
.tpl-weg { margin-left: auto; }
.tpl-form__rij { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 8px; margin-bottom: 8px; }
.tpl-form__bestanden { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-bottom: 10px; }
.tpl-form__lbl { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--ui-fg-muted); }
@media (max-width: 640px) { .tpl-form__rij, .tpl-form__bestanden { grid-template-columns: minmax(0, 1fr); } }
.cc-del, .cc-close { display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; padding: 0; border-radius: var(--ui-radius-md); }
.cc-close:hover { background: var(--ui-muted); }
.cc-del svg, .cc-close svg { width: 17px; height: 17px; }
.cc-add { display: flex; align-items: center; justify-content: center; gap: 6px; }
.cc-add svg { width: 15px; height: 15px; flex: none; }
.dbx-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.dbx-kop__zip { display: flex; gap: 6px; margin-left: auto; }
.dbx-badge {
position: absolute; top: 6px; left: 6px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px;
font-size: 11px; font-weight: 600; color: #fff;
}
.dbx-badge svg { width: 11px; height: 11px; }
.dbx-badge--ok { background: #0B8159; }
.dbx-badge--nieuw { background: #1F6FC5; }
.dbx-bestand__dl { width: 100%; margin-top: 8px; justify-content: center; }
@media (max-width: 640px) {
.dbx-kop__zip { width: 100%; margin-left: 0; }
.dbx-kop__zip .ui-btn { flex: 1; justify-content: center; }
/* Vensters staan buiten #admin-content: zelfde tikdoelen als op de schermen. */
#modal :is(.ui-btn, .admin-btn, .cc-add, .cc-flag, .cc-welkom__btn, .tpl-code) { min-height: 44px; }
#modal :is(.ui-btn--icon, .cc-del, .cc-close) { min-width: 44px; min-height: 44px; }
#modal :is(.admin-input, .ui-input, select, textarea, input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"])) { min-height: 44px; font-size: 16px; }
#modal input:is([type="checkbox"], [type="radio"]) { width: 20px; height: 20px; }
}
/* ---------- Ronde 3: API-log in de wachtrij ---------- */
/* Was één flexrij met inline stijlen: op de gsm bleef er voor de tekst een kolom van 40 px over en viel de rest rechts
buiten de kaart. Nu klassen, en op de gsm loopt de tekst onder tijd, label en actie door. */
.wq-log { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); overflow: hidden; }
.wq-log__rij { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--ui-border); font-size: 12px; line-height: 1.45; }
.wq-log__rij:last-child { border-bottom: 0; }
.wq-log__rij.is-fout { background: var(--ui-danger-soft); }
.wq-log__tijd { flex: none; width: 96px; font-size: 11.5px; color: var(--ui-fg-muted); font-variant-numeric: tabular-nums; }
.ui-prov { flex: none; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; background: var(--ui-muted); color: var(--ui-fg-muted); }
.ui-prov--rr { background: var(--ui-accent-soft); color: var(--ui-link); }
.ui-prov--sys { background: var(--ui-success-soft); color: var(--ui-success); }
.wq-log__actie { flex: none; font-weight: 700; color: var(--ui-fg); }
.wq-log__rij.is-fout .wq-log__actie, .wq-log__detail { color: var(--ui-danger); }
.wq-log__tekst { flex: 1; min-width: 0; color: var(--ui-fg-muted); overflow-wrap: anywhere; }
.wq-log__tekst strong { color: var(--ui-fg); }
.wq-log__detail { display: block; margin-top: 2px; }
.wq-log__open { white-space: nowrap; color: var(--ui-link); font-weight: 600; text-decoration: none; }
.wq-log__open:hover { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px) {
.wq-log__rij { flex-wrap: wrap; row-gap: 2px; padding: 10px 12px; }
.wq-log__tijd { width: auto; }
.wq-log__tekst { flex-basis: 100%; }
/* "Open post" op een eigen regel met een tikzone van 44 px. */
.wq-log__open { display: flex; align-items: center; width: fit-content; min-height: 44px; margin-bottom: -8px; }
}
/* Rechtenvinkje in Team: het vakje kromp mee als het label over twee regels liep. */
.team-perm input { flex: none; }
/* ---------- Ronde 3: klantenlijst op gsm en staande tablet ---------- */
/* De tabel is 910 px breed. Op 820 px vielen vier van de zes acties rechts weg, op de gsm ook de status (schuiven
binnen de kaart). Tot 900 px wordt elke klant een blok: naam en status bovenaan, daaronder pakket en cijfers met
hun label, en de acties rechts ernaast (op de gsm op een eigen regel, met knoppen van 44 px). */
@media (max-width: 900px) {
#client-list-table thead { display: none; }
#client-list-table, #client-list-table tbody { display: block; width: 100%; }
#client-list-table tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 12px 16px; border-bottom: 1px solid var(--ui-border); }
#client-list-table tbody tr:last-child { border-bottom: 0; }
#client-list-table tbody td { display: block; padding: 0; border: 0; background: none; font-size: 12.5px; }
#client-list-table tbody td:nth-child(1) { flex: 1 1 calc(100% - 120px); min-width: 0; font-size: 13px; }
/* Volgorde: naam, status, dan pakket en cijfers, dan de acties. */
#client-list-table tbody td:nth-child(n+2) { order: 2; }
#client-list-table tbody td:nth-child(3) { order: 1; margin-left: auto; }
#client-list-table tbody td:nth-child(2):not(:has(.swc-pakket)) { display: none; }
#client-list-table tbody td:is(:nth-child(4), :nth-child(5), :nth-child(6))::before { margin-right: 5px; color: var(--ui-fg-muted); }
#client-list-table tbody td:nth-child(4)::before { content: "Posts"; }
#client-list-table tbody td:nth-child(5)::before { content: "Goedkeuring"; }
#client-list-table tbody td:nth-child(6)::before { content: "Review"; }
#client-list-table tbody td:nth-child(7) { order: 3; display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
}
@media (max-width: 900px) and (hover: hover) {
#client-list-table tbody tr:hover { background: color-mix(in srgb, var(--ui-muted) 55%, transparent); }
}
@media (max-width: 640px) {
#client-list-table tbody td:nth-child(7) { flex: 1 1 100%; justify-content: space-between; margin: 2px 0 0; }
#client-list-table tbody td:nth-child(7) .ui-ic-btn { width: 44px; height: 44px; }
#client-list-table tbody td:nth-child(7) .ui-ic-btn svg { width: 17px; height: 17px; }
/* Kaartweergave: de actieknoppen waren 28 px hoog, "Bekijk pipeline" 18 px. */
#admin-content:not([data-view^="onboarding"], [data-view="home"]) :is(.client-card__action-btn, .client-card__pipeline-link) { min-height: 44px; }
/* "Naar volgende maand" op een kaartje in de pijplijn (26 px). */
#admin-content:not([data-view^="onboarding"], [data-view="home"]) .admin-mc__reschedule { min-height: 44px; }
}
.client-card__pipeline-link svg { width: 15px; height: 15px; flex: none; }
/* ---------- Ronde 3: selectievakje op de postkaartjes ---------- */
/* Het vakje verscheen alleen bij hover. Op een aanraakscherm bestaat geen hover: het was onzichtbaar maar wel
aanklikbaar, zodat een tik rechtsboven op een kaart de post selecteerde in plaats van hem te openen.
Nu altijd zichtbaar op aanraakschermen, met een tikzone van 44 x 44, en in Moon-tinten (was wit, ook in donker). */
.admin-mc__cb { background: color-mix(in srgb, var(--ui-surface) 92%, transparent); box-shadow: var(--ui-shadow-sm); border-radius: var(--ui-radius-sm); }
.admin-mc__cb input { accent-color: var(--ui-primary); }
@media (hover: none) {
.admin-mc__cb { opacity: 1; top: 8px; right: 8px; width: 28px; height: 28px; }
.admin-mc__cb::after { content: ""; position: absolute; inset: -8px; }
.admin-mc__cb input { width: 18px; height: 18px; }
}
/* ---------- Ronde 3: pijplijn op de staande tablet ---------- */
/* Onder 900 px staan de fasen onder elkaar. Elk kaartje werd dan 750 px breed met een vierkant beeld: één post per
scherm. Nu een raster van kaartjes per fase (op 820 px drie naast elkaar). Op de gsm blijft het één kolom. */
@media (min-width: 641px) and (max-width: 900px) {
.pipeline-col__body { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); align-items: start; }
.pipeline-col__body > :is(.pipe-dropzone, .pipeline-col__empty) { grid-column: 1 / -1; }
}
/* ---------- Ronde 3: melding verlopen connecties (boven elk scherm) ---------- */
/* Was een rood verloop met gloed en witte tekst; het waarschuwingsicoon stond rood op rood. */
.conn-alert { margin-bottom: 16px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--ui-danger) 35%, transparent); border-radius: var(--ui-radius-lg); background: var(--ui-danger-soft); color: var(--ui-fg); }
.conn-alert__kop { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ui-danger); }
.conn-alert__kop svg { width: 18px; height: 18px; flex: none; }
.conn-alert__uitleg { margin: 4px 0 4px 26px; font-size: 12.5px; color: var(--ui-fg-muted); }
.conn-alert__rij { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 0 0 26px; margin-top: 10px; border-top: 1px solid color-mix(in srgb, var(--ui-danger) 20%, transparent); font-size: 12.5px; }
.conn-alert__klant { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--ui-fg); cursor: pointer; }
.conn-alert__klant:hover { text-decoration: underline; text-underline-offset: 2px; }
.conn-alert__klant:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ui-ring); border-radius: 4px; }
.conn-alert__kanaal { padding: 1px 8px; border-radius: 999px; background: var(--ui-surface); border: 1px solid var(--ui-border); font-size: 11.5px; font-weight: 600; }
.conn-alert__info { color: var(--ui-fg-muted); }
.conn-alert__res { font-weight: 600; }
.conn-alert__acties { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
@media (max-width: 640px) {
.conn-alert__uitleg, .conn-alert__rij { margin-left: 0; padding-left: 0; }
.conn-alert__acties { width: 100%; margin-left: 0; }
.conn-alert__acties .ui-btn { flex: 1; justify-content: center; min-height: 44px; }
.conn-alert__klant { min-height: 44px; }
}
.conn-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--ui-danger-soft); color: var(--ui-danger); font-size: 11px; font-weight: 700; vertical-align: middle; }
.conn-badge svg { width: 12px; height: 12px; flex: none; }
/* ---------- Ronde 3: venster Bug of feedback melden ---------- */
.bug-form__rij { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-bottom: 14px; }
@media (max-width: 640px) { .bug-form__rij { grid-template-columns: minmax(0, 1fr); } }
/* Het bestandsveld was display:none en dus niet bereikbaar met Tab; nu verborgen voor het oog, met een ring op het label. */
.bug-bestand:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--ui-ring); }
/* ---------- Ronde 3: laatste tekens als Lucide-icoon ---------- */
/* Klantkeuze in de pijplijn en kalender (was ▾), stippen in Geschiedenis van de post-lade (✎ ✗ ✓),
sluitknop van de mediawaarschuwing (✕). */
.pipeline-clientswitch__caret { display: inline-flex; color: var(--ui-fg-muted); }
.pipeline-clientswitch__caret svg { width: 14px; height: 14px; transition: transform var(--ui-dur-fast) var(--ui-ease-out); }
.pipeline-clientswitch__btn[aria-expanded="true"] .pipeline-clientswitch__caret svg { transform: rotate(180deg); }
.timeline-dot svg { width: 13px; height: 13px; }
.timeline-dot--approved { background: var(--ui-success-soft); color: var(--ui-success); }
.timeline-dot--rejected { background: var(--ui-danger-soft); color: var(--ui-danger); }
.timeline-dot--note { background: var(--ui-warning-soft); color: var(--ui-warning); }
.timeline-dot--revised { background: var(--ui-accent-soft); color: var(--ui-link); }
#media-warning-banner button { display: inline-flex; }
#media-warning-banner button svg { width: 16px; height: 16px; }
.pipeline-clientswitch__avatar svg { width: 13px; height: 13px; }
#media-warning-banner button { align-items: center; justify-content: center; min-width: 32px; min-height: 32px; margin: -6px -8px 0 0; border-radius: var(--ui-radius-sm); }
#media-warning-banner button:hover { background: rgba(255, 255, 255, 0.14) !important; }
@media (max-width: 640px) { #media-warning-banner button { min-width: 44px; min-height: 44px; margin: -12px -12px 0 0; } }
.timeline-dot--planning { background: var(--ui-muted); color: var(--ui-fg-muted); }
/* ===== 28. Zijbalk (ronde 5) ===== */
/* Indeling op dagelijks gebruik: Start, Social media en Site Pro staan los in beeld (één klik). Onderaan een rustig blok
Platform (Activiteiten, Changelog, Bugs, Instellingen). Instellingen is één item; de schermen eronder zijn tabs in de
kop van de pagina (sectie 29). Kop en voet staan vast, alleen
de nav scrolt. Op gsm en tablet staand (tot 900px) is de zijbalk een lade van 300px of 85vw. */
:root { --sb-w: 232px; --sb-top: 0px; }
body.has-devbar { --sb-top: 24px; } /* de gele DEV-balk (24px, fixed) ligt boven alles */
/* Desktop: precies zo hoog als het zichtbare deel onder de DEV-balk. Vroeger 100vh vanaf de DEV-balk: de voet met
account en uitloggen viel dan 24px onder het scherm. */
.admin-sidebar { box-sizing: border-box; width: var(--sb-w); top: var(--sb-top); height: calc(100vh - var(--sb-top)); height: calc(100dvh - var(--sb-top)); }
body.has-devbar .admin { min-height: calc(100vh - var(--sb-top)); }
/* Kop: merk, meldingen en zoeken */
.admin-sidebar__head { gap: 10px; padding: 12px 10px 10px; }
.admin-sidebar__brandrow { min-height: 30px; padding-left: 4px; }
.admin-sidebar__icon--sq { width: 30px; height: 30px; border-radius: var(--ui-radius-md); }
.admin-sidebar__sluit { display: none; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--ui-radius-md); background: none; color: var(--ui-sidebar-fg); cursor: pointer; }
.admin-sidebar__sluit:hover { background: var(--ui-sidebar-hover); color: var(--ui-sidebar-active-fg); }
.admin-sidebar__zoek {
display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 5px 0 9px; box-sizing: border-box;
border: 1px solid var(--ui-sidebar-border); border-radius: var(--ui-radius-md); background: var(--ui-surface-2);
color: var(--ui-sidebar-muted); font: 500 13px/1 var(--ui-font); cursor: pointer;
transition: border-color var(--ui-dur-fast) var(--ui-ease-out), color var(--ui-dur-fast) var(--ui-ease-out);
}
.admin-sidebar__zoek:hover { border-color: var(--ui-input); color: var(--ui-sidebar-active-fg); }
.admin-sidebar__zoek svg { width: 15px; height: 15px; flex: none; }
.admin-sidebar__zoek > span { flex: 1; text-align: left; }
.admin-sidebar__zoek kbd {
display: inline-flex; align-items: center; height: 20px; padding: 0 6px; box-sizing: border-box; border: 1px solid var(--ui-sidebar-border);
border-radius: 5px; background: var(--ui-sidebar); color: var(--ui-sidebar-muted); font: 500 11px/1 var(--ui-font); letter-spacing: 0.02em;
}
.admin-sidebar.sb-load .admin-sidebar__zoek { pointer-events: none; }
/* Nav: scrolt zelf als het scherm laag is */
.admin-sidebar__nav { padding: 2px 8px 12px; gap: 2px; overscroll-behavior: contain; scrollbar-width: thin; }
/* Scrolt de nav, dan verschijnt boven of onder een zachte schaduw als er nog items buiten beeld staan. De twee lagen in
de kleur van de zijbalk schuiven mee met de inhoud en dekken de schaduw af zodra je bovenaan of onderaan bent. */
.admin-sidebar__nav {
background:
linear-gradient(var(--ui-sidebar) 40%, transparent) top / 100% 20px no-repeat local,
linear-gradient(transparent, var(--ui-sidebar) 60%) bottom / 100% 20px no-repeat local,
linear-gradient(var(--ui-sidebar-border), transparent) top / 100% 8px no-repeat scroll,
linear-gradient(transparent, var(--ui-sidebar-border)) bottom / 100% 8px no-repeat scroll;
}
/* Ronde 7: items 36px met 2px ertussen (stap 38, was 33), zodat het menu rustiger oogt. Past op 1512x982, ook met de
DEV-balk; op 1440x900 met de DEV-balk scrolt de nav enkele pixels. */
#admin-nav .admin-nav-item { box-sizing: border-box; text-decoration: none; min-height: 36px; margin: 0; padding: 9px 8px 9px 10px; gap: 10px; font-size: 13px; line-height: 18px; }
/* Focusring binnen het item: de nav scrolt (overflow), een ring erbuiten werd boven en onder afgeknipt. Twee id's om de
algemene focusring (offset 2px) te overtreffen. */
#admin-sidebar #admin-nav :is(a, button):focus-visible { outline-offset: -2px; border-radius: var(--ui-radius-md); }
/* Laadstaat van de nav in dezelfde maten als de echte items, zodat er niets verspringt als het menu verschijnt */
#admin-nav .skl-nav { gap: 2px; padding: 0; }
#admin-nav .skl-nav__row { box-sizing: border-box; height: 36px; padding: 0 8px 0 10px; gap: 10px; }
#admin-nav .skl-nav__ic { width: 16px; height: 16px; border-radius: 4px; }
#admin-nav .skl-nav__bar { height: 10px; }
#admin-nav .skl-nav .admin-nav-grouplabel { padding: 23px 10px 10px; } /* 42 = blokpadding 20 + label 22, de balk op de tekstlijn */
.admin-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-nav-blok { display: flex; flex-direction: column; gap: 2px; padding-top: 20px; }
.admin-nav-blok--rustig { padding-top: 28px; } /* vaste afstand: met margin-top:auto dreef het blok op 1920x1080 280px los van de rest */
#admin-nav .admin-nav-grouplabel { padding: 0 10px 8px; opacity: 1; font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; color: var(--ui-sidebar-muted); }
/* Rustig blok: kleiner en gedempt, de markering en hover blijven gelijk */
#admin-nav .admin-nav-blok--rustig .admin-nav-item { min-height: 32px; padding-top: 7px; padding-bottom: 7px; font-size: 12.5px; }
.admin-nav-blok--rustig .admin-nav-item:not(.admin-nav-item--active):not(:hover) { color: var(--ui-sidebar-muted); }
/* Badges: rood alleen voor wat mislukte (Wachtrij), de rest neutraal. Getallen in vaste breedte. */
#admin-nav .admin-nav-badge {
flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; margin-left: auto; padding: 0 6px;
box-sizing: border-box; border-radius: 999px; background: var(--ui-muted); color: var(--ui-fg); box-shadow: inset 0 0 0 1px var(--ui-border);
font: 600 11px/1 var(--ui-font); font-variant-numeric: tabular-nums;
}
#admin-nav #publisher-failed-badge { background: var(--ui-danger-solid); color: #fff; box-shadow: none; }
/* Voet: thema en account */
.admin-sidebar__foot { gap: 2px; padding: 8px; }
.admin-sidebar__theme-row { min-height: 32px; padding: 0 10px 0 9px; gap: 10px; font-size: 13px; }
.admin-sidebar__userrow2 { padding: 4px 4px 4px 8px; gap: 2px; }
.admin-sidebar__userrow2:has(.admin-sidebar__userlink[aria-current="page"]) { background: var(--ui-sidebar-active); }
.admin-sidebar__bug-ic, .admin-sidebar__logout-ic { width: 28px; height: 28px; border-radius: var(--ui-radius-sm); }
/* Avatar: effen primair blauw. Wit op het oude verloop haalde in donker maar 2,5 tot 3:1; zo 5,1:1 (licht) en 4,5:1 (donker). */
.admin-sidebar__avatar { background: var(--ui-primary); color: var(--ui-primary-fg); }
/* Meldingen en laadlijn naast de (bredere) zijbalk */
@media (min-width: 901px) {
#notif-panel { left: calc(var(--sb-w) + 8px); max-width: calc(100vw - var(--sb-w) - 20px); }
.ui-laadlijn { left: var(--sb-w); }
}
.admin-topbar__zoek { display: none; }
/* Gsm en tablet staand: lade. Openen 260ms met de ladecurve (bewegingsspec P11), sluiten sneller (200ms).
Dicht is ze ook onzichtbaar voor Tab en schermlezers (visibility pas na de schuif). */
@media (max-width: 900px) {
.admin-sidebar {
top: 0; bottom: 0; height: auto; width: min(300px, 85vw); visibility: hidden; transform: translateX(-100%); box-shadow: none;
transition: transform 200ms var(--ui-ease-drawer), visibility 0s linear 200ms, background-color var(--ui-dur-slow) var(--ui-ease-out);
}
body.has-devbar .admin-sidebar { top: var(--sb-top); }
.admin-sidebar.open {
visibility: visible; transform: none; box-shadow: var(--ui-shadow-lg);
transition: transform 260ms var(--ui-ease-drawer), visibility 0s, background-color var(--ui-dur-slow) var(--ui-ease-out);
}
.admin-sidebar__head { padding: 10px 10px 10px 12px; }
.admin-sidebar__sluit { display: grid; }
.admin-sidebar__zoek kbd { display: none; } /* geen toetsenbord op een gsm */
.admin-sidebar__scrim { background: var(--ui-overlay); }
body.has-devbar .admin-topbar { top: var(--sb-top); } /* de topbalk bleef bij scrollen half onder de DEV-balk */
.admin-topbar__zoek {
display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -10px -11px -10px auto; padding: 0;
border: 0; border-radius: 10px; background: none; color: var(--ui-fg); cursor: pointer;
}
.admin-topbar__zoek:hover { background: var(--ui-muted); }
}
@media (min-width: 769px) and (max-width: 900px) {
#notif-panel { left: 8px; right: 8px; top: 56px; width: auto; max-width: none; max-height: calc(100dvh - 72px); overflow-y: auto; }
body.has-devbar #notif-panel { top: 80px; max-height: calc(100dvh - 96px); }
}
/* Aanraakschermen: elk tikdoel minstens 44px hoog */
@media (pointer: coarse) {
#admin-nav .admin-nav-item, #admin-nav .admin-nav-blok--rustig .admin-nav-item, .admin-sidebar__zoek, .admin-sidebar__theme-row, .admin-sidebar__userlink { min-height: 44px; }
#admin-nav .skl-nav__row { height: 44px; }
.admin-sidebar__sluit, .admin-sidebar__icon--sq, .admin-sidebar__bug-ic, .admin-sidebar__logout-ic { width: 44px; height: 44px; }
}
/* Laag scherm (gsm liggend, 844x390): de vaste kop en voet lieten maar 133px over voor het menu. Daar scrolt de hele
zijbalk als één lijst en schuift de voet mee; alleen de kop met de sluitknop blijft staan. In de lade valt de zoekknop
weg: de topbalk heeft er al een. */
@media (max-height: 450px) {
.admin-sidebar { overflow-y: auto; overscroll-behavior: contain; }
.admin-sidebar__head { position: sticky; top: 0; z-index: 2; background: var(--ui-sidebar); }
.admin-sidebar__nav { flex: none; overflow: visible; background: none; }
}
@media (max-width: 900px) and (max-height: 450px) {
.admin-sidebar__zoek { display: none; }
}
/* ===== 29. Instellingen: gedeelde kop, één kolom en de tweede rij tabs (ronde 7) ===== */
/* Algemeen, Team, Onboarding en Socials zijn vier schermen achter één menu-item. Bovenaan staat een gedeelde kop
(#admin-sectie, buiten #admin-content) met de titel en de tabs; die blijft staan bij een tabwissel. Kop en schermen delen
één kolom: links op de gutter, hoogstens 1080px inhoud, zodat niets opzij springt als je van tab wisselt. */
.ui-sectie, .ui-sectie-pagina { --sectie-max: 1080px; --sectie-gutter: 24px; }
@media (max-width: 760px) { .ui-sectie, .ui-sectie-pagina { --sectie-gutter: 16px; } }
.admin-main > #admin-sectie { max-width: 1400px; margin: 0 auto; } /* zelfde vlak als #admin-content */
#admin-sectie[hidden] { display: none; }
.ui-sectie__in { box-sizing: border-box; max-width: calc(var(--sectie-max) + 2 * var(--sectie-gutter)); padding: 24px var(--sectie-gutter) 0; }
/* Titel in de stijl van de andere paginatitels (.ui-pagehead__title: Onboardingen, Support) */
.ui-sectie__titel { margin: 0 0 12px; font-size: 22px; font-weight: 650; line-height: 1.2; letter-spacing: -0.025em; color: var(--ui-fg); }
.ui-sectie__balk { box-shadow: inset 0 -1px 0 var(--ui-border); } /* de lijn staat vast, de tabs scrollen erover */
.ui-sectie__tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.ui-sectie__tab {
flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px 2px; box-sizing: border-box; white-space: nowrap;
border-radius: var(--ui-radius-sm) var(--ui-radius-sm) 0 0; color: var(--ui-fg-muted); font: 500 13.5px/18px var(--ui-font); text-decoration: none;
transition: color var(--ui-dur-fast) var(--ui-ease-out), background-color var(--ui-dur-fast) var(--ui-ease-out);
}
.ui-sectie__tab:not(.ui-sectie__tab--active):hover { color: var(--ui-fg); background: color-mix(in srgb, var(--ui-muted) 60%, transparent); }
/* Zelfde gewicht actief en niet-actief: de breedte springt niet, het verschil zit in kleur en lijn */
.ui-sectie__tab--active { color: var(--ui-fg); box-shadow: inset 0 -2px 0 var(--ui-brand); }
.ui-glide.is-klaar .ui-sectie__tab--active { box-shadow: none; }
.ui-sectie__tab:focus-visible, .ui-glide.is-klaar .ui-sectie__tab--active:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ui-ring); }
/* Kolom van de vier schermen, en een balk met links de uitleg en rechts de knoppen (op de plek van de oude koppen) */
.ui-sectie-pagina { box-sizing: border-box; max-width: calc(var(--sectie-max) + 2 * var(--sectie-gutter)); padding: 20px var(--sectie-gutter) 40px; }
.ui-sectie-balk { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; min-height: 38px; margin: 0 0 16px; } /* 38: zo hoog als de knop Uitnodigen, op alle vier gelijk */
.ui-sectie-balk__uitleg { margin: 0; max-width: 72ch; font-size: 13.5px; line-height: 20px; color: var(--ui-fg-muted); }
.ui-sectie-balk__acties { display: flex; gap: 8px; flex: none; }
/* Eén tab (alleen de titel, geen tabrij): de uitleg hoort bij de titel, als ondertitel zoals .ui-pagehead */
.ui-sectie__in:not(:has(.ui-sectie__balk)) > .ui-sectie__titel { margin-bottom: 0; }
#admin-sectie:not([hidden]):not(:has(.ui-sectie__balk)) + #admin-content > .ui-sectie-pagina { padding-top: 4px; }
#admin-sectie:not([hidden]):not(:has(.ui-sectie__balk)) + #admin-content > .ui-sectie-pagina > .ui-sectie-balk { align-items: flex-start; }
/* Tweede rij (Algemeen, Onboarding, Socials): kleiner dan de hoofdtabs, zonder lijn, met een pil voor de actieve.
Dezelfde taal als de filters in de planner (.swc-filter-btn) en de tabs op Start (.hm-tab). */
.ui-subtabs { display: flex; gap: 2px; margin: 0 0 16px; overflow-x: auto; scrollbar-width: none; }
.ui-subtabs::-webkit-scrollbar, .ui-sectie__tabs::-webkit-scrollbar { display: none; }
.ui-subtab {
flex: none; display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border: 0; border-radius: var(--ui-radius-md);
background: transparent; color: var(--ui-fg-muted); font: 500 12.5px/1 var(--ui-font); white-space: nowrap; cursor: pointer;
transition: color var(--ui-dur-fast) var(--ui-ease-out), background-color var(--ui-dur-fast) var(--ui-ease-out);
}
.ui-subtab:hover { color: var(--ui-fg); background: color-mix(in srgb, var(--ui-surface) 70%, transparent); }
.ui-subtab[aria-selected="true"], .ui-subtabs > .ui-glide__bar.is-pil { color: var(--ui-fg); background: var(--ui-surface); box-shadow: inset 0 0 0 1px var(--ui-border), var(--ui-shadow-xs); }
[data-theme="dark"] :is(.ui-subtab[aria-selected="true"], .ui-subtabs > .ui-glide__bar.is-pil) { background: var(--ui-surface-2); box-shadow: inset 0 0 0 1px var(--ui-input); }
.ui-subtabs > .ui-glide__bar.is-pil { border-radius: var(--ui-radius-md); }
.ui-glide.is-klaar .ui-subtab[aria-selected="true"] { background: transparent; box-shadow: none; }
.ui-subtab:focus-visible, .ui-glide.is-klaar .ui-subtab[aria-selected="true"]:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ui-ring); }
/* Rij die horizontaal scrolt: een zachte rand aan de kant waar nog tabs staan (_tabrijInBeeld) */
.ui-tabrij.is-meer-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.ui-tabrij.is-meer-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); }
.ui-tabrij.is-meer-l.is-meer-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
/* Aanraakschermen: elk tikdoel minstens 44px */
@media (pointer: coarse) {
.ui-sectie__tab { min-height: 44px; }
.ui-subtab { height: auto; min-height: 44px; }
/* Tikvlak 44px, maar de pil blijft 32px hoog (max-height wint van de inline hoogte van de glijbalk): de tweede rij
blijft ondergeschikt aan de hoofdtabs */
.ui-subtabs > .ui-glide__bar.is-pil { top: calc(50% - 16px); max-height: 32px; }
}
/* Algemeen: de kaarten per tab. Verborgen panelen blijven in de DOM (opslaan per kaart met hun eigen ids). */
.st-paneel { display: flex; flex-direction: column; gap: 16px; }
.st-paneel[hidden] { display: none; }
.st-paneel > * { margin-block: 0; }