/*
* Dilot v7 — the whole design system in one file (u221). docs/UI_V7_PLAN.md is the state carrier.
*
* Order: fonts · tokens · base · layout · components (handoff) · shell additions · auth · mobile.
* Rules (STYLEGUIDE §9): only DM Sans 400/500/600 (Lora italic 500 only in the dashboard greeting) · max radius
* 14px, never 999px · buttons 38/14 and 30/12.5 only · text never below 11.5px · labels never uppercase except
* sidebar group labels · side-by-side cards are content height · no new hex values outside the tokens.
*
* Loaded ONLY by layouts/v7.blade.php and layouts/auth.blade.php. The legacy app.css is never loaded next to
* it (same class names, e.g. .btn / .panel / .sidebar, would fight).
*/
/* ── Fonts — self-hosted. Google's CDN would send every visitor's IP to a US service. ───────────────────── */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-display: swap;
font-weight: 100 1000; /* variable: wght + opsz axes (the design uses opsz 9..40) */
src: url(fonts/dm-sans-latin-opsz-normal.woff2) format('woff2-variations'), url(fonts/dm-sans-latin-opsz-normal.woff2) format('woff2');
}
@font-face {
font-family: 'Lora';
font-style: italic;
font-display: swap;
font-weight: 500;
src: url(fonts/lora-latin-500-italic.woff2) format('woff2');
}
/* ── Tokens — copied 1:1 from the v7 handoff css/tokens.css. Source of truth: STYLEGUIDE.md + #p0.
Every value here is copied from the design; nothing is invented. Light mode only (dark mode is NOT designed). */
:root {
/* ---------- Font ---------- */
--font-family-base: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* SELF-HOSTED (never Google's CDN) */
--font-family-accent: 'Lora', Georgia, serif; /* italic 500 — ONLY the first name in the dashboard greeting */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600; /* no 550/650/700 anywhere */
/* ---------- Type scale (px) ---------- */
--font-size-greeting: 41px; /* letter-spacing -.035em, line-height 1.1 */
--font-size-number-xl: 45px; /* main card number, -.04em */
--font-size-number-lg: 31px; /* stat tile, -.035em */
--font-size-page-title: 31px; /* -.032em, line-height 1.1 (24px/-.02em variant on Gesprekken, Trainen, Doorgestuurd) */
--font-size-page-title-sm: 25px;
--font-size-login-title: 27px; /* -.03em */
--font-size-empty-title: 25px; /* -.028em */
--font-size-number-md: 25px; /* insights value */
--font-size-number-sm: 23px;
--font-size-section-title: 20px; /* assistant heading, design-file section headers, -.02em */
--font-size-modal-title: 21px; /* -.025em (18px on transcript modal) */
--font-size-card-title: 16px;
--font-size-button: 15px;
--font-size-body: 15px; /* Denis u230 (desktop); phones keep 14.5 (see the mobile block) */
--font-size-label: 14px;
--font-size-small: 13.5px; /* meta, small button, text link */
--font-size-xs: 13px;
--font-size-min: 12.5px; /* tags, column headers — never smaller */
--line-height-body: 1.65;
--line-height-tight: 1.1;
--letter-spacing-caps: .1em; /* uppercase section mini-heading (styleguide only) */
--letter-spacing-sidebar-caps: .13em;
/* ---------- Text colors ---------- */
--color-text-primary: #1F2734;
--color-text-row: #3E4553;
--color-text-secondary: #5B6573;
--color-text-label: #6E7787;
--color-text-meta: #8A93A1;
--color-text-faint: #A6ACB8; /* rank numbers, placeholders */
--color-text-on-dark: #FFFFFF;
/* ---------- Brand ---------- */
--color-primary: #2455D6;
--color-primary-hover-link: #17399B;
--color-primary-active-text: #17389B; /* active sidebar item */
--color-primary-soft: rgba(36,85,214,.1); /* icon chip */
--color-primary-soft-2: rgba(36,85,214,.06); /* info notice, active start card */
--color-primary-tag-bg: #EEF2FD;
--color-primary-glow: rgba(36,85,214,.15);
--color-deep-blue: #1B2E63;
--color-sidebar-base: #0D1120;
--color-icon-on-dark: #9FBBFF;
--gradient-bar-1: linear-gradient(90deg,#1B3FA8 0%,#2E63E6 100%);
--gradient-bar-2: linear-gradient(90deg,#2A55C9 0%,#5B84EC 100%);
--gradient-bar-3: linear-gradient(90deg,#6486DF 0%,#96AEEF 100%);
--gradient-bar-4: linear-gradient(90deg,#92A9EC 0%,#BACBF5 100%);
--gradient-bar-5: linear-gradient(90deg,#B4C4EA 0%,#D8E1F5 100%);
--gradient-bar-vertical-active: linear-gradient(180deg,#2E63E6 0%,#1B3FA8 100%);
--color-bar-muted: rgba(36,85,214,.2);
--color-legend-1: #1B3FA8; --color-legend-2: #5B82E3; --color-legend-3: #8FA8EC; --color-legend-4: #C8D3EE;
--color-bar-text-light: #FFFFFF; --color-bar-text-dark: #13224A;
/* ---------- Status (text on background) ---------- */
--color-positive: #127A52; --color-positive-bg: #E8F4EE;
--color-warning: #8A6A12; --color-warning-bg: #FBF3E2;
--color-danger: #B23A2E; --color-danger-bg: #FBEDEB; --color-danger-soft: rgba(178,58,46,.1);
--color-neutral: #5B6573; --color-neutral-bg: #F1F3F7;
--color-concept: #7A5E08; --color-concept-bg: rgba(245,198,62,.24);
--color-badge-yellow: #F5C63E; --color-badge-yellow-text: #2A2306;
--color-accent-green-on-dark: #5FD8A4; --color-live-on-dark: #7FE3C1; --color-live-dot: #3FD39E;
/* ---------- Knowledge-type tags ---------- */
--tag-kennis-fg: #2455D6; --tag-kennis-bg: rgba(36,85,214,.1);
--tag-website-fg: #3E4553; --tag-website-bg: rgba(31,48,90,.07);
--tag-instructie-fg: #127A52;--tag-instructie-bg: rgba(18,122,82,.1); /* green (Denis, u226 — as on 07/10/12; the handoff token was purple) */
--tag-video-fg: #127A52; --tag-video-bg: rgba(18,122,82,.11);
/* ---------- Channel colors ---------- */
--channel-email-fg: #2455D6; --channel-email-bg: rgba(36,85,214,.1);
--channel-whatsapp-fg: #128C4E; --channel-whatsapp-bg: rgba(18,140,78,.1);
--channel-instagram-fg: #C13584; --channel-instagram-bg: rgba(193,53,132,.1);
--channel-facebook-fg: #1877F2; --channel-facebook-bg: rgba(24,119,242,.1);
/* ---------- Borders & lines ---------- */
--color-border: #DFE3EA; /* white panel, input (login), buttons on grey band */
--color-border-button: #CFD6E2; /* secondary button */
--color-border-tile: #E3E6EC;
--color-border-band-inner: #E7EAF1;
--color-row-line: #F1F3F7; /* row separator in white panel */
--color-line-glass: rgba(31,48,90,.1);
--color-line-light: rgba(31,48,90,.08);
--color-line-faint: rgba(31,48,90,.06);
--color-border-input: rgba(31,48,90,.12);
--color-border-checkbox: #C8CFDB;
--color-border-glass: rgba(255,255,255,.85);
/* ---------- Surfaces ---------- */
--color-page-bg: #EDEFF3;
--color-artboard-fallback: #E8EEF6;
--color-surface: #FFFFFF;
--color-band: #F7F8FB; /* grey head/foot band of white panels, modal head */
--color-row-selected: #F7F9FE;
--color-fill-soft: rgba(31,48,90,.045);
--color-fill-button-soft: rgba(31,48,90,.06);
--color-fill-segmented: rgba(31,48,90,.05);
--color-toggle-off: rgba(31,48,90,.14);
--color-glass: rgba(255,255,255,.72);
--color-glass-button: rgba(255,255,255,.78);
--color-overlay: rgba(20,26,44,.34);
--gradient-dark-card: linear-gradient(135deg,#131A2C 0%,#1B2E63 100%);
--gradient-sidebar: linear-gradient(168deg,#0D1120 0%,#111830 46%,#16224A 78%,#1B2E63 100%);
--gradient-sky: radial-gradient(64% 44% at 10% 0%,#BFD4F4 0%,rgba(191,212,244,0) 60%),radial-gradient(56% 40% at 92% 2%,#DCD0F0 0%,rgba(220,208,240,0) 58%),radial-gradient(86% 52% at 52% 110%,#F0E5D4 0%,rgba(240,229,212,0) 62%),linear-gradient(180deg,#E3ECF8 0%,#EFF0EE 50%,#F2EBE0 100%);
--noise-image: url("data:image/svg+xml;utf8,");
--noise-opacity: .05;
--glass-blur: blur(26px);
--glow-glass: radial-gradient(closest-side,rgba(36,85,214,.15),rgba(36,85,214,0)); /* inset:-46% 58% 74% -14% */
--glow-dark: radial-gradient(closest-side,rgba(90,130,255,.4),rgba(90,130,255,0));
/* ---------- Radii ---------- */
--radius-card: 14px; /* glass card, artboard, modal, sidebar island — maximum radius anywhere */
--radius-panel: 10px; /* white panel, tile, input (settings), start card, assistant icon 40/46 */
--radius-control: 8px; /* button, chip, dropdown, icon chip, segmented item, login input */
--radius-nav: 7px; /* sidebar item */
--radius-toggle: 6px; /* toggle track, format-bar button, sidebar sub item */
--radius-tag: 5px; /* tag, badge, checkbox */
--radius-toggle-knob: 4px;
--radius-bar: 4px; /* 24–26px horizontal bar, vertical chart bar top */
--radius-bar-thin: 2px;
--radius-round: 50%; /* dots, radio, avatar only */
/* ---------- Shadows ---------- */
--shadow-glass: 0 10px 34px rgba(38,52,86,.1);
--shadow-glass-button: 0 8px 24px rgba(38,52,86,.1);
--shadow-button-white: 0 1px 2px rgba(31,48,90,.06);
--shadow-dark-card: 0 14px 38px rgba(20,26,44,.26);
--shadow-assistant-icon: 0 12px 30px rgba(20,26,44,.26);
--shadow-segmented-active: 0 2px 8px rgba(38,52,86,.12);
--shadow-sidebar: 0 16px 40px rgba(10,16,34,.34);
--shadow-sidebar-active: 0 3px 12px rgba(18,36,92,.24);
--shadow-modal: 0 40px 90px rgba(13,18,28,.4);
--shadow-focus: 0 0 0 3px rgba(36,85,214,.14);
--shadow-artboard: 0 30px 70px rgba(38,52,86,.2); /* design-file frame only */
/* ---------- Spacing (values used in the design) ---------- */
--space-2: 2px; --space-3: 3px; --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-9: 9px;
--space-10: 10px; --space-12: 12px; --space-13: 13px; --space-14: 14px; --space-16: 16px; --space-18: 18px;
--space-20: 20px; --space-22: 22px; --space-24: 24px; --space-26: 26px; --space-28: 28px; --space-32: 32px;
--space-40: 40px; --space-44: 44px;
/* ---------- Layout ---------- */
--viewport-desktop: 1440px; /* designed width; responsive behavior between desktop widths is NOT designed */
--sidebar-width: 284px; /* design 258; wider on Denis's request (u223, with the +1.5px type). Includes 16px outer margin */
--sidebar-outer-padding: 16px;
--sidebar-inner-padding: 18px 12px 14px;
--sidebar-item-height: 37px;
--sidebar-sub-item-height: 30px;
--content-padding: 26px 44px 40px 26px;
--page-min-height: 800px;
--dashboard-column-max: 900px;
--stats-insights-width: 320px;
--knowledge-sources-width: 330px;
--product-side-width: 392px;
--settings-side-width: 360px;
--settings-label-width: 190px;
--stats-row-label-width: 210px;
--modal-width: 760px; --modal-width-lg: 820px; /* u514: ONE dialog width (--modal-width). -lg is the width of two PAGES (.sheet--page, .detail-stack), not of a dialog */
--login-card-width: 440px;
--mobile-width: 390px; /* phone frames on 14, 23 */
/* ---------- Components ---------- */
--button-height: 38px; --button-font-size: 14.5px; /* u229 (Denis): 38 high (the design height), type 14.5 */
--button-height-sm: 32px; --button-font-size-sm: 13px;
--input-height: 36px; --input-height-login: 42px;
--toggle-width: 40px; --toggle-height: 23px; --toggle-knob: 17px;
--checkbox-size: 18px; --radio-size: 16px;
--icon-chip-size: 30px; --icon-chip-size-sm: 26px;
--assistant-icon-size: 40px; --assistant-icon-size-empty: 46px;
--tag-height: 21px;
--format-button-width: 28px; --format-button-height: 26px; --format-bar-min-height: 38px;
--icon-size-sidebar: 17px; --icon-size-card: 15px; --icon-size-button: 13px; --icon-size-chevron: 12px;
--icon-stroke-width: 1.9;
}
/* ── Base ─────────────────────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.app { font-family: var(--font-family-base); font-size: var(--font-size-body); line-height: 1.5; color: var(--color-text-primary); font-optical-sizing: auto; }
/* :where() keeps these resets at zero specificity, so every component class below still wins. */
:where(.app) a { color: inherit; text-decoration: none; }
:where(.app) :where(button, input, select, textarea) { font-family: inherit; font-size: inherit; color: inherit; }
:where(.app) button { background: none; border: 0; padding: 0; margin: 0; }
:where(.app) :where(h1, h2, h3, p) { margin: 0; }
:where(.app) :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.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; }
[hidden] { display: none !important; }
/* ── Layout — from the v7 handoff css/layout.css; u221 makes the sidebar sticky and scrollable. ───────── */
.app { min-height:100vh; position:relative; background:var(--color-artboard-fallback); font-family:var(--font-family-base); color:var(--color-text-primary); -webkit-font-smoothing:antialiased; }
.app::before { content:""; position:fixed; inset:0; background:var(--gradient-sky); pointer-events:none; }
.app::after { content:""; position:fixed; inset:0; opacity:var(--noise-opacity); mix-blend-mode:multiply; background-image:var(--noise-image); pointer-events:none; }
.app-shell { position:relative; z-index:1; display:flex; min-height:max(100vh, var(--page-min-height)); box-sizing:border-box; }
.app-shell__sidebar { width:var(--sidebar-width); flex:none; position:sticky; top:0; height:100vh; align-self:flex-start; transition:width .18s ease; }
.app-shell__main { flex:1; min-width:0; display:flex; flex-direction:column; padding:var(--content-padding); box-sizing:border-box; }
/* Page header: title left, utility actions right */
.page-header { flex:none; display:flex; align-items:flex-end; gap:14px; padding:2px 6px 20px; }
.page-header__text { min-width:0; flex:1; }
.page-header__breadcrumb { font-size:var(--font-size-label); color:var(--color-text-meta); margin-bottom:4px; }
.page-header__title { font-size:var(--font-size-page-title); font-weight:600; letter-spacing:-.032em; line-height:var(--line-height-tight); color:var(--color-text-primary); margin:0; }
/* u267 (Denis): ONE page title for every page — the compact variant is gone (the class stays harmless for old markup). */
.page-header__title--compact { font-size:var(--font-size-page-title); letter-spacing:-.032em; }
.page-header__subtitle { font-size:var(--font-size-body); font-weight:500; color:var(--color-text-secondary); margin-top:6px; }
.page-header__actions { display:flex; align-items:center; gap:8px; flex:none; }
/* Body regions */
.page-body { flex:1; min-height:0; display:flex; flex-direction:column; gap:18px; padding:0 6px; }
.page-row { display:flex; gap:18px; align-items:flex-start; } /* rule: side-by-side cards are content height */
.page-row--stretch { align-items:stretch; }
.page-col { flex:1; min-width:0; display:flex; flex-direction:column; gap:16px; }
.page-col--fixed-330 { width:var(--knowledge-sources-width); flex:none; }
.page-col--fixed-320 { width:var(--stats-insights-width); flex:none; }
.page-col--fixed-360 { width:var(--settings-side-width); flex:none; }
.page-col--fixed-392 { width:var(--product-side-width); flex:none; }
/* Dashboard: centered column */
.page-body--centered { align-items:center; }
.page-body--centered > * { width:100%; max-width:var(--dashboard-column-max); }
/* Login: two cards centered, no sidebar */
.auth { position:relative; z-index:1; min-height:100vh; display:flex; align-items:center; justify-content:center; gap:28px; padding:40px; box-sizing:border-box; }
/* ── Components — from the v7 handoff css/components.css (BEM). Values mirror the inline styles in the design
source. Local additions are marked "u221:" and exist only to make the design work with real elements. */
/* ===== Sidebar (DilotSidebarV7 / DilotSidebarAdminV7) ===== */
.sidebar { width:var(--sidebar-width); height:100%; padding:var(--sidebar-outer-padding) 0 var(--sidebar-outer-padding) var(--sidebar-outer-padding); box-sizing:border-box; display:flex; }
.sidebar__island { flex:1; min-width:0; position:relative; overflow:hidden; display:flex; flex-direction:column; padding:var(--sidebar-inner-padding); box-sizing:border-box; border-radius:var(--radius-card); background:var(--gradient-sidebar); border:1px solid rgba(255,255,255,.1); box-shadow:var(--shadow-sidebar); }
.sidebar__island::before { content:""; position:absolute; inset:58% -50% -34% -10%; background:radial-gradient(closest-side,rgba(48,96,235,.55),rgba(48,96,235,0)); pointer-events:none; }
.sidebar__island::after { content:""; position:absolute; left:0; right:0; top:0; height:34%; background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.04) 45%,rgba(255,255,255,0) 100%); pointer-events:none; }
/* second glow in source: inset:-30% -30% 66% 20%; radial rgba(120,150,255,.16) */
.sidebar__brand { position:relative; display:flex; align-items:center; gap:10px; height:34px; padding:0 6px; margin-bottom:8px; }
.sidebar__collapse { width:26px; height:26px; border-radius:var(--radius-toggle); display:flex; align-items:center; justify-content:center; cursor:pointer; color:rgba(255,255,255,.7); }
.sidebar__role { position:relative; display:flex; align-items:center; gap:8px; margin:0 2px 4px; padding:8px 11px; border-radius:var(--radius-control); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14); } /* superadmin only */
.sidebar__role-dot { width:6px; height:6px; border-radius:50%; background:#7C9BFF; }
.sidebar__role-label { flex:1; font:600 13.5px var(--font-family-base); color:#fff; }
.sidebar__role--brand { display:inline-flex; margin:0; padding:5px 10px; gap:7px; } /* u246: in the brand slot, left of the collapse button */
.sidebar__role--brand .sidebar__role-label { flex:none; font-size:12.5px; }
.sidebar__role-meta { font:500 12.5px var(--font-family-base); color:rgba(255,255,255,.7); }
.sidebar__group { position:relative; display:flex; flex-direction:column; gap:2px; }
.sidebar__group-label { display:flex; align-items:center; gap:10px; padding:16px 11px 8px; font:600 11px var(--font-family-base); letter-spacing:var(--letter-spacing-sidebar-caps); text-transform:uppercase; color:rgba(255,255,255,.72); white-space:nowrap; }
.sidebar__group-label::after { content:""; flex:1; height:1px; background:rgba(255,255,255,.14); }
.sidebar__item { display:flex; align-items:center; gap:11px; height:var(--sidebar-item-height); padding:0 11px; border-radius:var(--radius-nav); cursor:pointer; font:500 14.5px var(--font-family-base); color:#fff; } /* 14.5: Denis u227 */
.sidebar__item-icon { width:var(--icon-size-sidebar); height:var(--icon-size-sidebar); color:rgba(255,255,255,.72); stroke-width:1.8; flex:none; } /* u349: color, not stroke — V7Icon paints currentColor through a mask */
.sidebar__item-label { flex:1; min-width:0; }
.sidebar__item--active { background:#fff; box-shadow:var(--shadow-sidebar-active); font-weight:600; color:var(--color-primary-active-text); }
.sidebar__item--active .sidebar__item-icon { color:var(--color-primary-active-text); }
.sidebar__badge { font:600 12px var(--font-family-base); border-radius:var(--radius-control); padding:2px 8px; background:rgba(255,255,255,.18); color:#fff; }
.sidebar__badge--warn { background:var(--color-badge-yellow); color:var(--color-badge-yellow-text); }
.sidebar__dot { width:6px; height:6px; border-radius:50%; background:var(--color-danger); }
.sidebar__subnav { display:flex; flex-direction:column; gap:2px; margin:2px 0 2px 29px; padding-left:10px; border-left:1px solid rgba(255,255,255,.2); }
.sidebar__subitem { display:flex; align-items:center; justify-content:space-between; gap:8px; height:var(--sidebar-sub-item-height); padding:0 11px; border-radius:var(--radius-toggle); cursor:pointer; font:500 13.5px var(--font-family-base); color:#fff; }
.sidebar__subitem-count { font:600 12px var(--font-family-base); color:rgba(255,255,255,.7); }
.sidebar__subitem--active { background:#fff; box-shadow:var(--shadow-sidebar-active); font-weight:600; color:var(--color-primary-active-text); }
.sidebar__footer { position:relative; margin-top:auto; display:flex; flex-direction:column; gap:2px; }
.sidebar__divider { height:1px; background:rgba(255,255,255,.16); margin:14px 8px 10px; }
.sidebar__user { display:flex; align-items:center; gap:10px; padding:12px 8px 2px; margin-top:10px; border-top:1px solid rgba(255,255,255,.16); }
.sidebar__avatar { width:30px; height:30px; flex:none; border-radius:50%; background:rgba(255,255,255,.16); color:#fff; display:flex; align-items:center; justify-content:center; font:600 12px var(--font-family-base); }
.sidebar__avatar--admin { background:var(--color-primary); }
.sidebar__user-name { font-size:14px; font-weight:600; color:#fff; }
.sidebar__user-role { font-size:12.5px; color:rgba(255,255,255,.75); }
/* ===== Surfaces ===== */
.glass-card { background:var(--color-glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--color-border-glass);box-shadow:var(--shadow-glass);border-radius:var(--radius-card);box-sizing:border-box; padding:18px 22px; }
.glass-card--glow { position:relative; overflow:hidden; }
.glass-card--glow::before { content:""; position:absolute; inset:-46% 58% 74% -14%; background:var(--glow-glass); pointer-events:none; }
.panel { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-panel); overflow:hidden; }
.panel__head { display:flex; align-items:center; gap:10px; padding:13px 22px; background:var(--color-band); border-bottom:1px solid var(--color-line-glass); font:600 14px var(--font-family-base); color:var(--color-text-primary); }
.panel__foot { display:flex; align-items:center; gap:12px; padding:13px 22px; background:var(--color-band); border-top:1px solid var(--color-line-glass); }
.tile { background:var(--color-surface); border:1px solid var(--color-border-tile); border-radius:var(--radius-panel); padding:15px 18px 16px; box-sizing:border-box; }
.dark-card { position:relative; overflow:hidden; background:var(--gradient-dark-card); border-radius:var(--radius-card); padding:18px 20px; box-shadow:var(--shadow-dark-card); color:#fff; }
.dark-card::before { content:""; position:absolute; inset:-60% -20% 45% 40%; background:var(--glow-dark); pointer-events:none; }
.dark-card > * { position:relative; }
/* Allowed dark cards: Staat van je kennis, Website-bron (Kennisbank), Berichten deze maand (SA1), assistant icon. */
/* ===== Buttons (two sizes only: 38/14 and 30/12.5) ===== */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:var(--button-height); padding:0 19px; box-sizing:border-box; border-radius:var(--radius-control); font:600 var(--button-font-size) var(--font-family-base); white-space:nowrap; cursor:pointer; border:0; }
.btn__icon { width:var(--icon-size-button); height:var(--icon-size-button); stroke-width:1.9; flex:none; }
.btn--primary { background:var(--color-primary); color:#fff; padding:0 21px; }
.btn--secondary { background:#fff; border:1px solid var(--color-border-button); color:var(--color-text-primary); }
.btn--utility { background:var(--color-glass-button); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:1px solid rgba(255,255,255,.9); box-shadow:var(--shadow-glass-button); color:var(--color-text-primary); padding:0 16px; }
.btn--soft { background:var(--color-fill-button-soft); color:var(--color-primary); padding:0 16px; }
.btn--danger { background:var(--color-danger-soft); color:var(--color-danger); }
.btn--positive { background:var(--color-positive); color:#fff; }
.btn--block { width:100%; }
.btn--sm { height:var(--button-height-sm); padding:0 13px; font-size:var(--button-font-size-sm); gap:7px; }
.btn--sm.btn--secondary { box-shadow:var(--shadow-button-white); } /* "knop op grijze band" */
.btn--icon { width:var(--button-height); padding:0; }
.btn--icon.btn--sm { width:var(--button-height-sm); }
.btn--close { width:36px; height:36px; padding:0; background:var(--color-text-primary); color:#fff; } /* modal close, white X 16px stroke 2.4 */
.text-link { font:600 var(--button-font-size) var(--font-family-base); color:var(--color-primary); cursor:pointer; }
.text-link:hover { color:var(--color-primary-hover-link); }
/* Hover/active/disabled states of buttons are NOT designed — keep existing app behavior. */
/* ===== Segmented control / tabs ===== */
.segmented { display:flex; align-items:center; gap:3px; width:fit-content; padding:3px; border-radius:var(--radius-control); background:var(--color-fill-segmented); }
.segmented__item { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 14px; box-sizing:border-box; border-radius:var(--radius-control); font:600 13.5px var(--font-family-base); color:var(--color-text-secondary); cursor:pointer; white-space:nowrap; }
.segmented__item--active { background:#fff; box-shadow:var(--shadow-segmented-active); color:var(--color-text-primary); }
.segmented__count { font:600 12.5px var(--font-family-base); color:var(--color-text-meta); }
/* ===== Dropdown, chip, search ===== */
.dropdown { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px; box-sizing:border-box; border-radius:var(--radius-control); background:rgba(255,255,255,.85); border:1px solid var(--color-border-input); font:500 13.5px var(--font-family-base); color:var(--color-text-row); cursor:pointer; white-space:nowrap; }
.dropdown--on-panel { height:32px; padding:0 12px; background:#fff; border-color:var(--color-border); }
.dropdown__chevron { width:12px; height:12px; color:#9AA1AE; stroke-width:2.2; }
.chip { display:inline-flex; align-items:center; height:32px; padding:0 13px; box-sizing:border-box; border-radius:var(--radius-control); background:rgba(255,255,255,.85); border:1px solid rgba(31,48,90,.1); font:500 13.5px var(--font-family-base); color:var(--color-text-row); white-space:nowrap; }
.chip--add { border:1px dashed rgba(31,48,90,.2); background:transparent; color:var(--color-text-secondary); font-weight:600; cursor:pointer; }
.search { display:inline-flex; align-items:center; gap:9px; height:30px; width:220px; padding:0 14px; box-sizing:border-box; border-radius:var(--radius-control); background:rgba(255,255,255,.85); border:1px solid rgba(31,48,90,.1); font-size:13.5px; color:var(--color-text-meta); }
/* ===== Tag / badge ===== */
.tag { display:inline-flex; align-items:center; height:var(--tag-height); padding:0 8px; border-radius:var(--radius-tag); font:600 12.5px var(--font-family-base); white-space:nowrap; }
.tag--blue { background:var(--color-primary-tag-bg); color:var(--color-primary); }
.tag--positive { background:var(--color-positive-bg); color:var(--color-positive); }
.tag--warning { background:var(--color-warning-bg); color:var(--color-warning); }
.tag--danger { background:var(--color-danger-bg); color:var(--color-danger); }
.tag--neutral { background:var(--color-neutral-bg); color:var(--color-neutral); }
.tag--concept { background:var(--color-concept-bg); color:var(--color-concept); }
.tag--kennis { background:var(--tag-kennis-bg); color:var(--tag-kennis-fg); }
.tag--website { background:var(--tag-website-bg); color:var(--tag-website-fg); }
.tag--instructie { background:var(--tag-instructie-bg); color:var(--tag-instructie-fg); }
.tag--video { background:var(--tag-video-bg); color:var(--tag-video-fg); }
.tag--muted { opacity:.75; } /* prullenbak */
.status-dot { display:inline-flex; align-items:center; gap:6px; font:600 13px var(--font-family-base); }
.status-dot::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
/* ===== Icon chip ===== */
.icon-chip { width:var(--icon-chip-size); height:var(--icon-chip-size); flex:none; border-radius:var(--radius-control); background:var(--color-primary-soft); display:flex; align-items:center; justify-content:center; color:var(--color-primary); }
.icon-chip svg { width:var(--icon-size-card); height:var(--icon-size-card); stroke:currentColor; stroke-width:1.9; }
.icon-chip--sm { width:var(--icon-chip-size-sm); height:var(--icon-chip-size-sm); border-radius:7px; }
.icon-chip--sm svg { width:13px; height:13px; }
.icon-chip--email { background:var(--channel-email-bg); color:var(--channel-email-fg); }
.icon-chip--whatsapp { background:var(--channel-whatsapp-bg); color:var(--channel-whatsapp-fg); }
.icon-chip--instagram { background:var(--channel-instagram-bg); color:var(--channel-instagram-fg); }
.icon-chip--facebook { background:var(--channel-facebook-bg); color:var(--channel-facebook-fg); }
/* ===== Form controls ===== */
.field { display:flex; align-items:center; gap:16px; padding:13px 0; }
.field + .field { border-top:1px solid var(--color-line-faint); }
.field__label { width:var(--settings-label-width); flex:none; font-size:13.5px; font-weight:600; color:var(--color-text-secondary); }
.field__label--stacked { display:block; width:auto; font:600 13.5px var(--font-family-base); color:var(--color-text-row); margin-bottom:7px; }
.field__input { flex:1; min-width:0; display:flex; align-items:center; gap:10px; height:var(--input-height); padding:0 14px; box-sizing:border-box; border-radius:var(--radius-panel); background:#fff; border:1px solid var(--color-border-input); font-size:14.5px; font-weight:500; color:var(--color-text-primary); }
.field__input--login { height:var(--input-height-login); border-radius:var(--radius-control); border-color:var(--color-border); font-size:15px; }
.field__input:focus, .field__input--focus { border-color:var(--color-primary); box-shadow:var(--shadow-focus); outline:0; }
.field__input::placeholder { color:var(--color-text-faint); }
.field__help { font-size:12.5px; color:var(--color-text-meta); line-height:1.5; margin:6px 0 0 206px; }
.toggle { width:var(--toggle-width); height:var(--toggle-height); flex:none; position:relative; box-sizing:border-box; border-radius:var(--radius-toggle); background:var(--color-toggle-off); cursor:pointer; }
.toggle::after { content:""; position:absolute; top:3px; left:3px; width:var(--toggle-knob); height:var(--toggle-knob); border-radius:var(--radius-toggle-knob); background:#fff; }
.toggle--on { background:var(--color-primary); }
.toggle--on::after { left:auto; right:3px; }
.checkbox { width:var(--checkbox-size); height:var(--checkbox-size); flex:none; box-sizing:border-box; border-radius:var(--radius-tag); border:1.5px solid var(--color-border-checkbox); background:#fff; display:inline-flex; align-items:center; justify-content:center; }
.checkbox--checked { border:0; background:var(--color-primary); } /* white check: viewBox 24, 12px, stroke-width 3, polyline "5 12.5 10 17 19 7" */
.radio { width:var(--radio-size); height:var(--radio-size); flex:none; box-sizing:border-box; border-radius:50%; border:1.5px solid rgba(31,48,90,.22); }
.radio--checked { border:5px solid var(--color-primary); }
.option-row { display:flex; align-items:center; gap:9px; font-size:14.5px; font-weight:500; color:var(--color-text-primary); cursor:pointer; }
.setting-row { display:flex; align-items:center; gap:16px; padding:13px 0; }
.setting-row + .setting-row { border-top:1px solid var(--color-line-faint); }
.setting-row__title { font-size:14.5px; font-weight:600; color:var(--color-text-primary); }
.setting-row__desc { font-size:13px; font-weight:500; color:var(--color-text-secondary); margin-top:3px; line-height:1.5; }
/* ===== Rich-text format bar ===== */
.format-editor { background:#fff; border:1px solid var(--color-border-input); border-radius:var(--radius-control); overflow:hidden; }
.format-bar { display:flex; align-items:center; flex-wrap:wrap; gap:2px; min-height:var(--format-bar-min-height); padding:4px 10px; box-sizing:border-box; border-bottom:1px solid var(--color-line-light); background:var(--color-band); }
.format-bar__btn { width:var(--format-button-width); height:var(--format-button-height); border-radius:var(--radius-toggle); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--color-text-row); }
.format-bar__btn svg { width:15px; height:15px; stroke:currentColor; stroke-width:1.9; }
.format-bar__btn--glyph { font:600 14px Georgia, serif; } /* B, I (italic), U (underline), S (line-through) */
.format-bar__btn--size-1 { font:600 12.5px var(--font-family-base); } /* "A" Groot */
.format-bar__btn--size-2 { font:600 14.5px var(--font-family-base); } /* "A" Groter */
.format-bar__btn--size-3 { font:600 17px var(--font-family-base); } /* "A" Grootst */
.format-bar__swatch { width:14px; height:3px; border-radius:1px; background:var(--color-primary); }
.format-bar__sep { width:1px; height:16px; background:var(--color-border-input); margin:0 5px; }
.format-bar__html { margin-left:auto; display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 9px; border-radius:var(--radius-toggle); font:600 13px var(--font-family-base); color:var(--color-text-row); cursor:pointer; }
.format-editor__body { padding:13px 15px; font-size:14.5px; line-height:1.65; color:var(--color-text-primary); }
/* ===== Tables / list rows ===== */
.table { display:flex; flex-direction:column; }
.table__head { display:grid; column-gap:16px; align-items:center; height:30px; padding:0 22px; font:600 12.5px var(--font-family-base); color:var(--color-text-meta); } /* never uppercase */
.table__row { display:grid; column-gap:16px; align-items:center; min-height:56px; padding:0 22px; border-top:1px solid var(--color-line-faint); cursor:pointer; }
.table__row--selected { background:var(--color-row-selected); }
.table__row--variant { min-height:36px; background:rgba(31,48,90,.022); } /* product variants */
.table__group { display:flex; align-items:center; gap:9px; height:30px; padding:0 22px; background:rgba(31,48,90,.035); border-top:1px solid var(--color-line-faint); font:600 12.5px var(--font-family-base); color:var(--color-text-row); }
.list-row { display:flex; align-items:center; gap:14px; padding:12px 20px; border-bottom:1px solid var(--color-row-line); cursor:pointer; }
.list-row:last-child { border-bottom:0; } /* first item never has a line above */
.list-row__title { font-size:14.5px; font-weight:500; color:var(--color-text-primary); }
.list-row__meta { font-size:13.5px; color:var(--color-text-meta); }
.pagination__btn { width:32px; height:32px; box-sizing:border-box; border-radius:var(--radius-control); background:#fff; border:1px solid var(--color-border); display:flex; align-items:center; justify-content:center; font:500 13.5px var(--font-family-base); cursor:pointer; }
.pagination__btn--active { background:var(--color-primary); border-color:var(--color-primary); color:#fff; font-weight:600; }
/* ===== Notice ===== */
.notice { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:var(--radius-panel); font-size:13.5px; line-height:1.55; font-weight:500; color:var(--color-text-row); }
.notice--info { background:var(--color-primary-soft-2); }
.notice--danger { background:var(--color-danger-bg); }
/* ===== Modal ===== */
.modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:36px; box-sizing:border-box; }
/* u593 (Denis, 28 Oct: a dark gradient line straight across the screen behind an open modal, gone after a click, back
for a moment when the mouse moved): the overlay blurred whatever was behind it LIVE (backdrop-filter) and the dialog
did it again — the browser re-reads the screen behind it on every repaint, and that leaves a seam. Denis wants the
blur ("not just dimming"), so the page itself is blurred instead: while a modal is open, everything NEXT TO the modal
(the sidebar, the header, the panels — never the modal or the parts that hold it) gets an ordinary blur. Nothing reads
the screen behind the overlay any more; the overlay only dims. A modal that is in the page but hidden ([hidden],
display:none) blurs nothing. */
.modal__overlay { position:absolute; inset:0; background:var(--color-overlay); }
:has(.modal:not([hidden]):not([style*="none"]):not(.is-closing)) > :not(.modal):not(:has(.modal:not([hidden]):not([style*="none"]):not(.is-closing))):not(script):not(style) { filter:blur(3px); }
/* u593b (Denis: "the opening of a modal is not smooth … can we make it all more smooth, add a transition"): the blur
comes and goes softly; the backdrop fades in, the dialog fades and rises in; closing fades both out (dilot.js keeps a
closing modal for that moment — .is-closing — and the blur already starts to go). A modal that was already on screen
(the loading one → its content, or the same modal with other content) is not faded in a second time.
u604 (Denis: "a TINY bit faster"): 0.16 s backdrop and blur, 0.2 s dialog, 0.14 s closing. */
body > *, .app-shell > *, .app-shell__main > *, [data-live] > * { transition:filter .16s ease; }
.modal__overlay { animation:modal-fade-in .16s ease both; }
.modal__dialog { animation:modal-rise-in .2s cubic-bezier(.2,.8,.2,1) both; }
.modal--continued .modal__overlay, .modal--same .modal__overlay, .modal--same .modal__dialog { animation:none; }
.modal.is-closing { pointer-events:none; }
.modal.is-closing .modal__overlay { animation:modal-fade-out .14s ease both; }
.modal.is-closing .modal__dialog { animation:modal-sink-out .14s ease both; }
@keyframes modal-fade-in { from { opacity:0; } }
@keyframes modal-fade-out { to { opacity:0; } }
@keyframes modal-rise-in { from { opacity:0; transform:translateY(10px) scale(.985); } }
@keyframes modal-sink-out { to { opacity:0; transform:translateY(6px) scale(.99); } }
@media (prefers-reduced-motion: reduce) {
.modal__overlay, .modal__dialog, .modal.is-closing .modal__overlay, .modal.is-closing .modal__dialog { animation:none; }
body > *, .app-shell > *, .app-shell__main > *, [data-live] > * { transition:none; }
}
/* u514 (Denis: "width etc of modals should be ONE across entire Dilot"): EVERY dialog has this one size — the same
width on a desktop, the same width and height on a phone (the block "ONE dialog size on a phone" further down). A new
dialog gets it by using .modal + .modal__dialog; it never sets a width, max-width or max-height of its own
(tests/Feature/Ui/OneDialogSizeTest fails when one does). */
.modal__dialog { position:relative; width:var(--modal-width); max-width:100%; max-height:calc(100vh - 72px); display:flex; flex-direction:column; background:#fff; border:1px solid rgba(255,255,255,.9); box-shadow:var(--shadow-modal); border-radius:var(--radius-card); overflow:hidden; }
.modal__dialog--lg { background:#fff; }
.modal__dialog > .modal__head, .modal__dialog > .modal__foot { flex:none; }
.modal__dialog > .modal__body { flex:1 1 auto; min-height:0; overflow-y:auto; }
.modal__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:20px 24px 18px; background:var(--color-band); border-bottom:1px solid rgba(31,48,90,.07); }
.modal__title { font-size:var(--font-size-modal-title); font-weight:600; letter-spacing:-.025em; }
.modal__body { padding:18px 24px; }
.modal__foot { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:14px 24px; border-top:1px solid rgba(31,48,90,.07); }
/* ===== Assistant (training bot + statistics bot) ===== */
.assistant { flex:1; min-width:0; display:flex; flex-direction:column; } /* NO overflow:hidden here (would clip the icon shadow) */
.assistant__head { flex:none; display:flex; align-items:center; gap:13px; padding-bottom:18px; margin-bottom:20px; border-bottom:1px solid var(--color-line-glass); }
.assistant__icon { width:var(--assistant-icon-size); height:var(--assistant-icon-size); flex:none; border-radius:var(--radius-panel); background:var(--gradient-dark-card); box-shadow:var(--shadow-assistant-icon); display:flex; align-items:center; justify-content:center; }
.assistant__icon svg { width:19px; height:19px; color:var(--color-icon-on-dark); stroke-width:1.9; }
.assistant__title { font-size:var(--font-size-section-title); font-weight:600; letter-spacing:-.02em; }
.assistant__subtitle { font-size:14.5px; color:var(--color-text-secondary); margin-top:3px; }
.assistant__messages { flex:1; min-height:0; display:flex; flex-direction:column; gap:18px; overflow:hidden; }
.chat-message--user { align-self:flex-end; max-width:70%; background:var(--color-primary); color:#fff; border-radius:10px 10px 2px 10px; padding:11px 15px; font-size:14.5px; line-height:1.6; font-weight:500; }
.chat-message--bot { display:flex; gap:12px; align-items:flex-start; }
.chat-message__marker { width:14px; height:14px; flex:none; border-radius:4px; background:var(--color-primary); margin-top:4px; }
.chat-message__text { font-size:15px; line-height:1.65; color:var(--color-text-primary); max-width:720px; }
.assistant-empty { display:flex; flex-direction:column; align-items:center; text-align:center; }
.assistant-empty__icon { width:var(--assistant-icon-size-empty); height:var(--assistant-icon-size-empty); border-radius:var(--radius-panel); background:var(--gradient-dark-card); box-shadow:var(--shadow-assistant-icon); }
.assistant-empty__title { font-size:var(--font-size-empty-title); font-weight:600; letter-spacing:-.028em; margin-top:16px; line-height:1.2; }
.assistant-empty__text { font-size:14.5px; line-height:1.65; color:var(--color-text-secondary); margin-top:9px; max-width:520px; }
.start-card { flex:1; min-width:0; background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-panel); padding:13px 16px; text-align:left; cursor:pointer; box-sizing:border-box; }
.start-card--active { background:var(--color-primary-soft-2); border-color:rgba(36,85,214,.42); }
.start-card__title { font:600 15px var(--font-family-base); line-height:1.3; } .start-card__sub { font-size:13.5px; color:var(--color-text-meta); margin-top:3px; }
.assistant-input { background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-panel); box-shadow:var(--shadow-button-white); }
.assistant-input--inline { display:flex; align-items:center; gap:12px; padding:12px 12px 12px 16px; } /* statistics bot */
.assistant-input--stacked { display:flex; flex-direction:column; gap:11px; padding:14px 16px 12px; } /* training bot */
.assistant-input__placeholder { font-size:15px; color:var(--color-text-faint); }
/* Chart inside an answer */
.answer-chart { margin-top:14px; } /* .panel + head with .tag */
.answer-chart__plot { display:flex; align-items:flex-end; gap:10px; height:128px; border-bottom:1px solid rgba(31,48,90,.12); padding:16px 18px 0; }
.answer-chart__col { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:8px; height:100%; }
.answer-chart__value { font:600 14px var(--font-family-base); font-variant-numeric:tabular-nums; }
.answer-chart__value--current { color:var(--color-primary); }
.answer-chart__bar { width:56%; border-radius:4px 4px 0 0; background:var(--color-bar-muted); }
.answer-chart__bar--current { background:var(--gradient-bar-vertical-active); }
.answer-chart__label { flex:1; text-align:center; font-size:13.5px; color:var(--color-text-meta); }
.answer-chart__label--current { font-weight:600; color:var(--color-text-primary); }
/* ===== Statistics ===== */
.insights { width:var(--stats-insights-width); flex:none; background:var(--color-glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--color-border-glass);box-shadow:var(--shadow-glass);border-radius:var(--radius-card);box-sizing:border-box; padding:20px 22px 6px; display:flex; flex-direction:column; }
.insights__head { padding-bottom:16px; border-bottom:1px solid var(--color-line-glass); }
.insights__title { font:600 16px var(--font-family-base); } .insights__sub { font-size:13.5px; color:var(--color-text-meta); margin-top:4px; }
.insights__item { display:flex; flex-direction:column; gap:6px; padding:16px 0; cursor:pointer; }
.insights__item + .insights__item { border-top:1px solid var(--color-line-glass); }
.insights__value { font-size:var(--font-size-number-md); font-weight:600; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
.insights__value--warning { color:var(--color-warning); } .insights__value--positive { color:var(--color-positive); }
.insights__item-title { font:600 15px var(--font-family-base); margin-top:4px; } .insights__item-sub { font-size:13.5px; color:var(--color-text-meta); }
.stats-panel { background:var(--color-glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--color-border-glass);box-shadow:var(--shadow-glass);border-radius:var(--radius-card);box-sizing:border-box; padding:0 24px; }
.stats-panel__row { display:flex; align-items:flex-start; gap:28px; padding:22px 0; border-bottom:1px solid var(--color-line-glass); }
.stats-panel__row:last-child { border-bottom:0; }
.stats-panel__label { width:var(--stats-row-label-width); flex:none; display:flex; align-items:flex-start; gap:11px; }
.stats-panel__grid { flex:1; min-width:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.stat-tile { display:flex; flex-direction:column; gap:12px; } /* + .tile */
.stat-tile__label { font:500 14px var(--font-family-base); color:var(--color-text-secondary); white-space:nowrap; }
.stat-tile__value { font-size:var(--font-size-number-lg); font-weight:600; letter-spacing:-.035em; line-height:1; font-variant-numeric:tabular-nums; }
.channel-bar { display:flex; gap:3px; } .channel-bar__seg { height:8px; border-radius:2px; }
.channel-legend { display:flex; gap:22px; margin-top:10px; font-size:13.5px; color:var(--color-text-secondary); }
.topic-bar { display:flex; align-items:center; gap:16px; padding:7px 0; }
.topic-bar__label { width:210px; flex:none; font-size:14.5px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topic-bar__fill { height:26px; border-radius:var(--radius-bar); display:flex; align-items:center; justify-content:flex-end; padding-right:9px; box-sizing:border-box; font:600 13px var(--font-family-base); font-variant-numeric:tabular-nums; }
.topic-bar__fill--1 { background:var(--gradient-bar-1); color:#fff; } .topic-bar__fill--2 { background:var(--gradient-bar-2); color:#fff; }
.topic-bar__fill--3 { background:var(--gradient-bar-3); color:var(--color-bar-text-dark); } .topic-bar__fill--4 { background:var(--gradient-bar-4); color:var(--color-bar-text-dark); } .topic-bar__fill--5 { background:var(--gradient-bar-5); color:var(--color-bar-text-dark); }
/* ===== Knowledge ===== */
.source-block { padding:13px 0; border-top:1px solid rgba(31,48,90,.07); }
.source-block__name { font-size:18.5px; font-weight:600; letter-spacing:-.02em; } .source-block__count { font-size:20px; font-weight:600; }
.video-card { background:var(--color-glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--color-border-glass);box-shadow:var(--shadow-glass);border-radius:var(--radius-card);box-sizing:border-box; overflow:hidden; display:flex; flex-direction:column; }
.video-card__thumb { position:relative; height:150px; background:#20252E; } /* placeholder for real thumbnail */
.video-card__duration { position:absolute; right:10px; bottom:10px; background:rgba(0,0,0,.6); color:#fff; font:600 12.5px var(--font-family-base); padding:3px 7px; border-radius:var(--radius-control); }
/* ===== Login ===== */
.login-card { width:var(--login-card-width); flex:none; background:var(--color-glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--color-border-glass);box-shadow:var(--shadow-glass);border-radius:var(--radius-card);box-sizing:border-box; padding:34px 36px 30px; }
.login-card__title { font-size:var(--font-size-login-title); font-weight:600; letter-spacing:-.03em; line-height:1.15; }
.login-card__sub { font-size:14.5px; color:var(--color-text-secondary); margin-top:6px; }
/* u221: the sidebar items are real links/buttons */
a.sidebar__item, a.sidebar__subitem { text-decoration:none; }
.sidebar__item:not(.sidebar__item--active):not(.sidebar__item--soon):hover { background:rgba(255,255,255,.08); }
.sidebar__subitem:not(.sidebar__subitem--active):hover { background:rgba(255,255,255,.08); }
.sidebar__item--active .sidebar__item-label { color:var(--color-primary-active-text); }
.sidebar__subitem--active .sidebar__subitem-count { color:var(--color-primary-active-text); }
.btn { text-decoration:none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity:.55; cursor:default; }
.btn--primary:not(:disabled):hover { background:#1E4AC2; }
.btn--secondary:not(:disabled):hover { border-color:#B8C1D1; }
input.field__input, textarea.field__input, select.field__input { font-family:inherit; outline:0; width:100%; }
/* ── Shell additions (u221) — behaviour the static design implies but does not draw ──────────────────────── */
/* The island scrolls its nav on short screens; brand and user row stay put. */
.sidebar__nav { position:relative; flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.28) transparent; margin-right:-6px; padding-right:6px; }
.sidebar__nav .sidebar__footer { margin-top:auto; }
.sidebar__brand-mark { min-width:0; flex:1; display:flex; align-items:center; }
.sidebar__brand-logo { display:block; max-height:24px; width:auto; max-width:100px; object-fit:contain; } /* u243 (Denis): 24 × 100 max */ /* the CLIENT's uploaded logo, as uploaded */
.sidebar__collapse { background:none; border:0; padding:0; }
.sidebar__collapse:hover { background:rgba(255,255,255,.1); }
.sidebar__collapse svg { width:15px; height:15px; }
/* A page that is not built yet: visible and disabled, never a link to nowhere. */
.sidebar__item--soon { cursor:default; opacity:.5; }
.sidebar__soon { font:600 12px var(--font-family-base); color:rgba(255,255,255,.7); }
/* User row → small menu (sign out) */
.sidebar__user-text { min-width:0; flex:1; }
.sidebar__user-name, .sidebar__user-role { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* u223: the design's chevron is the sign-out button (Denis). */
.sidebar__logout { flex:none; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-toggle); color:rgba(255,255,255,.7); background:none; border:0; cursor:pointer; transition:background .15s, color .15s; }
.sidebar__logout:hover { background:rgba(255,255,255,.12); color:#fff; }
.sidebar__logout-form { margin:0; display:flex; }
.sidebar__brand-mark:empty { pointer-events:none; }
.sidebar__foot { position:relative; flex:none; }
/* Collapsed sidebar (the design's "Zijbalk inklappen" button): html.v7-collapsed. Icons only; remembered per browser. */
.v7-collapsed .app-shell__sidebar { width:94px; }
.v7-collapsed .sidebar { width:94px; }
.v7-collapsed .sidebar__brand { justify-content:center; padding:0; }
.v7-collapsed .sidebar__brand-mark { display:none; }
.v7-collapsed .sidebar__item { justify-content:center; padding:0; }
.v7-collapsed .sidebar__item-label,
.v7-collapsed .sidebar__badge,
.v7-collapsed .sidebar__soon,
.v7-collapsed .sidebar__subnav,
.v7-collapsed .sidebar__user-text { display:none; }
.v7-collapsed .sidebar__group-label { padding:14px 6px 6px; font-size:0; letter-spacing:0; }
.v7-collapsed .sidebar__item .sidebar__dot { position:absolute; margin:-14px 0 0 16px; }
.v7-collapsed .sidebar__item { position:relative; }
.v7-collapsed .sidebar__user { flex-direction:column; justify-content:center; gap:8px; padding:12px 0 2px; }
/* Notices the shell itself shows (impersonation, flash). Same anatomy as .notice. */
.shell-notice { display:flex; align-items:center; gap:12px; margin:0 6px 16px; }
.shell-notice__text { flex:1; min-width:0; }
.notice--positive { background:var(--color-positive-bg); }
/* Empty region used by pages that have nothing yet. */
.page-empty { padding:22px; font-size:var(--font-size-body); color:var(--color-text-secondary); }
/* ── Shared page parts (u222). Sizes = design + 1.5px (Denis, u222). ─────────────────────────────────────── */
:root {
/* Values the design uses on 04–06 that were not in the handoff token list. */
--color-chevron: #C4CAD4;
--color-bubble-bot: #F4F6FB;
--color-gap-bg: #FFF8E6;
--color-gap-border: rgba(224,163,58,.4);
--color-gap-icon-bg: rgba(224,163,58,.2);
--color-delta-on-dark-bg: rgba(95,180,141,.22);
--color-delta-on-dark: #8FE3BC;
--color-delta-down-on-dark-bg: rgba(236,120,104,.22);
--color-delta-down-on-dark: #FFB3A7;
}
/* A live region (dilot.js) dims its lists while it fetches — never the region itself (stacking context). */
[data-live].is-loading .panel, [data-live].is-loading .kpi-strip, [data-live].is-loading .stat-cards { opacity:.55; transition:opacity .15s; }
/* KPI strip (04): white panel, dark main number on the left, plain stats, range dropdown right. */
.kpi-strip { display:flex; align-items:stretch; gap:18px; padding:12px 16px; background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-panel); }
.kpi-strip__main { position:relative; overflow:hidden; flex:none; min-width:220px; border-radius:var(--radius-control); padding:13px 16px; background:var(--gradient-dark-card); box-shadow:var(--shadow-dark-card); }
.kpi-strip__main::before { content:""; position:absolute; inset:-110% 10% 44% 52%; background:radial-gradient(closest-side,rgba(90,130,255,.4),rgba(90,130,255,0)); pointer-events:none; }
.kpi-strip__main > * { position:relative; }
.kpi-strip__label { font-size:13.5px; color:rgba(255,255,255,.66); }
.kpi-strip__row { display:flex; align-items:baseline; gap:9px; margin-top:8px; }
.kpi-strip__value { font-size:35px; font-weight:600; letter-spacing:-.04em; color:#fff; line-height:1; font-variant-numeric:tabular-nums; }
.kpi-strip__delta { display:inline-flex; align-items:center; height:var(--tag-height); padding:0 8px; border-radius:var(--radius-tag); background:var(--color-delta-on-dark-bg); color:var(--color-delta-on-dark); font:600 12.5px var(--font-family-base); white-space:nowrap; }
.kpi-strip__delta--down { background:var(--color-delta-down-on-dark-bg); color:var(--color-delta-down-on-dark); }
.kpi-strip__stats { flex:1; min-width:0; display:flex; align-items:center; gap:22px; padding-left:4px; }
.kpi-strip__stats > form { flex:none; margin-left:auto; }
.kpi-strip__stat { display:flex; flex-direction:column; gap:7px; min-width:0; }
.kpi-strip__stat-label { font:500 14px var(--font-family-base); color:var(--color-text-secondary); white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
.kpi-strip__stat-label svg { color:var(--color-text-faint); }
.kpi-strip__stat--inline { flex-direction:row; align-items:baseline; gap:10px; }
.kpi-strip--plain { padding:14px 22px; }
.kpi-strip--plain .kpi-strip__stats { padding-left:0; }
.kpi-strip__stat-value { font-size:27px; font-weight:600; letter-spacing:-.03em; color:var(--color-text-primary); line-height:1; font-variant-numeric:tabular-nums; }
.kpi-strip__sep { width:1px; height:34px; flex:none; background:var(--color-line-glass); }
.kpi-strip__spacer { flex:1; }
/* Stat cards (06): glass cards side by side, content height. */
.stat-cards { display:flex; gap:18px; align-items:flex-start; }
.stat-card { flex:1; min-width:0; padding:16px 20px; }
.stat-card__label { font:500 14px var(--font-family-base); color:var(--color-text-secondary); }
.stat-card__row { display:flex; align-items:baseline; gap:9px; margin-top:9px; }
.stat-card__value { font-size:29px; font-weight:600; letter-spacing:-.035em; color:var(--color-text-primary); line-height:1; font-variant-numeric:tabular-nums; }
.stat-card__meta { font-size:13.5px; line-height:1.3; color:var(--color-text-meta); }
/* Filter band on a panel head (04, 06). */
.panel__head--filters { padding:13px 20px; flex-wrap:wrap; font-weight:500; }
.panel__title { flex:none; font:600 14px var(--font-family-base); color:var(--color-text-primary); }
.panel__spacer { flex:1; }
.panel__count { font-size:13.5px; color:var(--color-text-meta); white-space:nowrap; }
.panel__foot--split { justify-content:space-between; flex-wrap:wrap; padding:13px 20px; }
.panel__foot-text { font-size:13.5px; color:var(--color-text-meta); }
.panel__foot-text b { color:var(--color-text-primary); font-weight:600; }
.panel__foot-text .text-link { font-size:13.5px; }
.panel .search { background:#fff; border-color:var(--color-border); height:32px; }
.search input { flex:1; min-width:0; border:0; outline:0; background:transparent; font:500 13.5px var(--font-family-base); color:var(--color-text-primary); padding:0; }
.search input::placeholder { color:var(--color-text-faint); font-weight:400; }
.search svg { flex:none; color:var(--color-text-meta); }
/* Segmented tabs on a grey band (06): white active with a tile border. */
.segmented--band .segmented__item { height:28px; padding:0 12px; border-radius:var(--radius-toggle); font-weight:500; text-decoration:none; }
.segmented--band .segmented__item--active { background:#fff; border:1px solid var(--color-border-tile); box-shadow:none; font-weight:600; }
/* Dropdown: the replacement dilot.js builds for