/* ============================================================ theme-modern.css — Modern · Indigo · 2026-05-02 Overlay laag bovenop theme-2026.css. Overschrijft tokens en component-styling naar v4 redesign-stijl (NUMB3RS.be). Twee varianten: [data-theme="dark"] — default, modern dark [data-theme="light"] — light variant, zelfde indigo accent Toggle via + theme-toggle.js Rollback = verwijderen uit index.html. ============================================================ */ :root, [data-theme="dark"] { /* === BASIS === */ --bg: #0A0A0B; --bg-elevated: #15151A; --bg-sunken: #111114; --bg-overlay: rgba(0,0,0,0.65); /* === BRAND/ACCENT === */ --brand: #6366F1; /* indigo */ --brand-on: #FAFAFA; --accent: #A78BFA; /* paars */ --gradient: linear-gradient(135deg, #6366F1 0%, #A78BFA 100%); --indigo-glow: rgba(99,102,241,0.20); /* === TEKST === */ --text: #FAFAFA; --text-2: #A1A1AA; --text-3: #71717A; --text-muted: #71717A; /* === BORDERS === */ --border: #26262E; --border-soft: #1A1A20; /* === SIDEBAR === */ --sb-bg: #0D0D11; --sb-bg-hover: #15151A; --sb-bg-active: rgba(99,102,241,0.14); --sb-text: #A1A1AA; --sb-text-muted: #71717A; --sb-rail: #6366F1; /* === RADIUS === */ --radius-sm: 6px; --radius: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-pill:999px; /* === SHADOWS === */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 4px 12px rgba(0,0,0,0.45); --shadow-lg: 0 12px 32px rgba(0,0,0,0.55); --ring: 0 0 0 3px rgba(99,102,241,0.30); --ring-accent: 0 0 0 3px rgba(167,139,250,0.30); /* === FONTS — sans overal, geen Fraunces === */ --font-display: var(--font-sans); --font-body: var(--font-sans); --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; } /* ============================================================ INK-SCALE FLIP — alleen in dark mode Originele app.css definieert --ink-* als donkere slate-scale, bedoeld voor tekst op licht. In dark mode keren we de scale om zodat .btn / borders / muted-tekst leesbaar blijven zonder per-component dark-overrides. ============================================================ */ [data-theme="dark"] { --ink-900: #FAFAFA; --ink-800: #E4E4E7; --ink-700: #D4D4D8; --ink-600: #A1A1AA; --ink-500: #71717A; --ink-400: #52525B; --ink-300: #3F3F46; --ink-200: #27272A; --ink-100: #1F1F23; --ink-50: #15151A; } /* ============================================================ LIGHT VARIANT — [data-theme="light"] Zelfde indigo accent, lichte achtergronden, hoge leesbaarheid ============================================================ */ [data-theme="light"] { --bg: #FAFAFA; --bg-elevated: #FFFFFF; --bg-sunken: #F4F4F5; --bg-overlay: rgba(15,23,42,0.45); --brand: #6366F1; --brand-on: #FFFFFF; --accent: #7C3AED; /* iets dieper paars voor contrast op licht */ --gradient: linear-gradient(135deg, #6366F1 0%, #7C3AED 100%); --indigo-glow: rgba(99,102,241,0.18); --text: #18181B; --text-2: #52525B; --text-3: #A1A1AA; --text-muted: #A1A1AA; --border: #E4E4E7; --border-soft: #F1F1F4; --sb-bg: #FFFFFF; --sb-bg-hover: #F4F4F5; --sb-bg-active: rgba(99,102,241,0.10); --sb-text: #52525B; --sb-text-muted: #A1A1AA; --sb-rail: #6366F1; --shadow-sm: 0 1px 2px rgba(15,23,42,0.04); --shadow-md: 0 4px 12px rgba(15,23,42,0.06); --shadow-lg: 0 12px 32px rgba(15,23,42,0.10); --ring: 0 0 0 3px rgba(99,102,241,0.22); --ring-accent: 0 0 0 3px rgba(124,58,237,0.22); } [data-theme="light"] ::selection { background: var(--brand); color: #FFFFFF; } [data-theme="light"] table tbody tr:hover td { background: rgba(99,102,241,0.05); color: var(--text); } [data-theme="light"] body::before { display: none; } [data-theme="light"] #topbar { background: rgba(255,255,255,0.78) !important; } [data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg-sunken); } [data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--border); border-color: var(--bg-sunken); } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--text-3); } /* ============================================================ BASE OVERRIDES ============================================================ */ html, body { background: var(--bg) !important; color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; max-width: 100%; overflow-x: hidden; } #app, #main { max-width: 100%; overflow-x: hidden; } ::selection { background: var(--brand); color: #0A0A0B; } /* Globale heading-typografie — sans, geen serif */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-body) !important; font-weight: 700; letter-spacing: -0.02em; color: var(--text); } a { color: var(--text); } a:hover { color: var(--accent); } /* ============================================================ APP SHELL — sidebar / topbar / content ============================================================ */ #app { background: var(--bg); } #sidebar, aside#sidebar { background: var(--sb-bg) !important; border-right: 1px solid var(--border-soft); color: var(--sb-text); } #sidebar a, #sidebar .nav-item, #sidebar button { color: var(--sb-text) !important; border-radius: var(--radius-md); transition: background 160ms ease, color 160ms ease; } #sidebar a:hover, #sidebar .nav-item:hover, #sidebar button:hover { background: var(--sb-bg-hover) !important; color: var(--text) !important; } #sidebar a.active, #sidebar .nav-item.active, #sidebar a[aria-current="page"] { background: var(--sb-bg-active) !important; color: var(--text) !important; position: relative; } #sidebar a.active::before, #sidebar .nav-item.active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--gradient); box-shadow: 0 0 12px var(--indigo-glow); } /* Topbar */ #topbar { background: rgba(10,10,11,0.72) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-soft) !important; color: var(--text); max-width: 100%; overflow-x: clip; } #topbar-search { background: var(--bg-elevated) !important; border: 1px solid var(--border) !important; color: var(--text) !important; border-radius: var(--radius-md) !important; font-family: var(--font-body); transition: border-color 160ms, box-shadow 160ms; } #topbar-search::placeholder { color: var(--text-3); } #topbar-search:focus { outline: none; border-color: var(--brand) !important; box-shadow: var(--ring); } #topbar-meta { color: var(--text-2); } #topbar > * { min-width: 0; } #sys-banner, #cost-pill, #mail-urgent-banner, #ai-bar-toggle { flex: 0 1 auto; max-width: min(100%, 260px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #main, #content { background: var(--bg); color: var(--text); } /* ============================================================ CARDS / PANELS / TABLES ============================================================ */ .card, .panel, .box, [class*="card-"], section[class*="card"] { background: var(--bg-elevated) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; color: var(--text); } table { color: var(--text); border-collapse: collapse; } table thead th { background: var(--bg-sunken) !important; color: var(--text-3) !important; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid var(--border-soft) !important; padding: 14px 16px; } table tbody td { border-bottom: 1px solid var(--border-soft) !important; color: var(--text-2); padding: 14px 16px; } table tbody tr:hover td { background: rgba(99,102,241,0.04); color: var(--text); } /* Statuspillen / badges */ .badge, .pill, .chip, [class*="badge-"], [class*="status-"] { border-radius: var(--radius-pill) !important; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; } /* ============================================================ BUTTONS ============================================================ */ button, .btn, input[type="submit"], input[type="button"] { font-family: var(--font-body); border-radius: var(--radius-md) !important; transition: transform 150ms, box-shadow 200ms, background 150ms; cursor: pointer; } .btn-primary, button.primary, button[type="submit"]:not(.btn-ghost):not(.btn-secondary) { background: var(--gradient) !important; color: var(--text) !important; border: 0 !important; font-weight: 600; box-shadow: 0 4px 16px var(--indigo-glow); } .btn-primary:hover, button.primary:hover { box-shadow: 0 8px 24px var(--brand); } .btn-secondary, .btn-ghost, button.secondary { background: transparent !important; border: 1px solid var(--border) !important; color: var(--text) !important; } .btn-secondary:hover, .btn-ghost:hover { background: var(--bg-elevated) !important; border-color: var(--text-3) !important; } .btn-danger, button.danger { background: #DC2626 !important; color: var(--text) !important; border: 0 !important; } /* ============================================================ FORMS ============================================================ */ input, select, textarea { background: var(--bg-elevated) !important; border: 1px solid var(--border) !important; color: var(--text) !important; border-radius: var(--radius-md) !important; font-family: var(--font-body); transition: border-color 160ms, box-shadow 160ms; } input::placeholder, textarea::placeholder { color: var(--text-3); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand) !important; box-shadow: var(--ring); } label { color: var(--text-2); font-family: var(--font-body); font-size: 13px; font-weight: 500; } /* ============================================================ LINKS / DRAWER / MOBILE MENU ============================================================ */ #drawer-root, .drawer, .drawer-panel { background: var(--bg-elevated) !important; color: var(--text); border-left: 1px solid var(--border) !important; } #mobile-menu-toggle { background: var(--bg-elevated) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; } #mobile-menu-backdrop { background: var(--bg-overlay) !important; } /* ============================================================ SCROLLBARS (webkit) ============================================================ */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-sunken); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-pill); border: 2px solid var(--bg-sunken); } ::-webkit-scrollbar-thumb:hover { background: var(--text-3); } /* ============================================================ AMBIENT GLOW (subtiel, fixed achter content) ============================================================ */ body::before { content: ''; position: fixed; top: -300px; right: -200px; width: 800px; height: 600px; background: radial-gradient(ellipse at center, var(--indigo-glow) 0%, transparent 60%); pointer-events: none; z-index: 0; filter: blur(80px); } #app { position: relative; z-index: 1; } /* ============================================================ UTILITIES / overrides voor specifieke views indien nodig ============================================================ */ .muted, .text-muted { color: var(--text-3) !important; } .subtle { color: var(--text-2); } hr, .divider { border: 0; border-top: 1px solid var(--border-soft); } /* Code-blokken / mono-tekst */ code, pre, .mono { font-family: var(--font-mono); background: var(--bg-sunken); color: var(--text); border-radius: var(--radius-sm); } /* Logo-kleur in sidebar / topbar — gradient als achtergrond op .logo-mark */ .logo-mark, .brand-mark, [data-logo-mark] { background: var(--gradient) !important; box-shadow: 0 0 24px var(--indigo-glow); } /* ============================================================ THEME TOGGLE — floating button rechtsonder ============================================================ */ #theme-toggle { position: fixed; right: 20px; bottom: 20px; z-index: 200; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-md); transition: transform 160ms ease, box-shadow 200ms ease, background 160ms ease; font-size: 18px; line-height: 1; } #theme-toggle:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--indigo-glow); border-color: var(--brand); } #theme-toggle .icon-sun { display: none; } #theme-toggle .icon-moon { display: inline-block; } [data-theme="light"] #theme-toggle .icon-sun { display: inline-block; } [data-theme="light"] #theme-toggle .icon-moon { display: none; } @media (max-width: 600px) { #theme-toggle { right: 12px; bottom: 12px; width: 40px; height: 40px; } } /* ============================================================ PA REGIE — dossiergericht, compact en scanbaar ============================================================ */ .pa-page { max-width: 1600px; margin: 0 auto; padding-bottom: 28px; overflow-x: clip; } .pa-page.pa-page-mail .pa-head { margin-bottom: 10px; } .pa-page.pa-page-mail .page-title { font-size: clamp(28px, 3vw, 40px); } .pa-page.pa-page-mail .page-sub { font-size: 14px; } .pa-page.pa-page-mail .vd-kpi-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; } .pa-page.pa-page-mail .vd-kpi { padding: 10px 12px; min-height: 0; } .pa-page.pa-page-mail .vd-kpi-value { font-size: 24px; } .pa-page.pa-page-mail .vd-kpi-label { margin-top: 5px; } .pa-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .pa-head-actions, .pa-table-actions, .pa-row-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pa-kpis { grid-template-columns: repeat(5, minmax(140px, 1fr)); } .pa-surface, .pa-queue, .pa-detail, .pa-agent-panel, .pa-worklist { min-width: 0; max-width: 100%; } .pa-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); gap: 14px; align-items: start; } .pa-detail { position: sticky; top: 86px; } .pa-flow-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; scrollbar-width: thin; } .pa-flow { flex: 0 0 auto; min-width: 132px; min-height: 44px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--text-2); display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; cursor: pointer; } .pa-flow:hover, .pa-flow.active { border-color: var(--brand); color: var(--text); background: var(--bg); } .pa-flow strong { font-variant-numeric: tabular-nums; color: var(--text); } .pa-decision-panel { margin-bottom: 14px; } .pa-decision-list { display: flex; flex-direction: column; gap: 8px; } .pa-decision-row { width: 100%; display: grid; grid-template-columns: minmax(170px, 1.25fr) minmax(220px, 1.6fr) auto minmax(120px, auto); gap: 12px; align-items: center; text-align: left; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--text); padding: 10px 12px; cursor: pointer; } .pa-decision-row:hover, .pa-decision-row.active { border-color: var(--brand); box-shadow: var(--ring); } .pa-decision-row small { display: block; margin-top: 3px; color: var(--text-3); font-size: 12px; line-height: 1.35; } .pa-decision-row .pill { justify-self: start; } .pa-worklist { margin-top: 14px; } .pa-worklist .card-body { overflow: visible; } .pa-list-head, .pa-dossier-card { display: grid; grid-template-columns: minmax(180px, 1.05fr) minmax(155px, 0.85fr) minmax(175px, 1fr) minmax(210px, 1.2fr) minmax(145px, 0.75fr); gap: 12px; align-items: start; } .pa-list-head { padding: 0 14px 8px 18px; color: var(--text-3); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .pa-dossier-list { display: flex; flex-direction: column; gap: 8px; } .pa-dossier-card { position: relative; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); padding: 14px 14px 14px 18px; overflow: hidden; } .pa-dossier-card::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; } .pa-dossier-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); } .pa-dossier-card.active { border-color: var(--brand); box-shadow: var(--ring); } .pa-card-client, .pa-card-flow, .pa-card-status, .pa-card-agent, .pa-card-actions { min-width: 0; } .pa-card-client a, .pa-card-agent strong { overflow-wrap: anywhere; } .pa-card-actions { display: flex; justify-content: flex-end; } .pa-pill-wrap { display: flex; flex-wrap: wrap; gap: 4px; } .pa-mail-agent-mini { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; color: var(--text-3); font-size: 11px; } .pa-mail-agent-mini span { border: 1px solid var(--border-soft); border-radius: var(--radius-pill); background: var(--bg); padding: 3px 8px; } .pa-mail-agent-mini strong { color: var(--text); } .pa-mail-filterbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; border-top: 1px solid var(--border-soft); padding: 10px 12px 0; } .pa-mail-filter { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 34px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg); color: var(--text-2); padding: 6px 9px; font-size: 12px; cursor: pointer; } .pa-mail-filter strong { color: var(--text); font-variant-numeric: tabular-nums; } .pa-mail-filter span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pa-mail-filter.active { border-color: var(--brand); color: var(--text); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 20%, transparent); } .pa-mail-filter.green.active { border-color: var(--green); box-shadow: 0 0 0 1px color-mix(in srgb, var(--green) 22%, transparent); } .pa-mail-filter.red.active { border-color: var(--red); box-shadow: 0 0 0 1px color-mix(in srgb, var(--red) 22%, transparent); } .pa-mail-filter.gray.active { border-color: var(--text-3); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-3) 22%, transparent); } .pa-next-line { display: grid; grid-template-columns: minmax(110px, 150px) minmax(0, 1fr); gap: 8px; margin-bottom: 4px; } .pa-next-line strong { min-width: 0; color: var(--text); } .pa-next-line span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); } .pa-row-red::before { background: var(--red); } .pa-row-amber::before { background: var(--amber); } .pa-row-orange::before { background: var(--orange); } .pa-row-green::before { background: transparent; } .pa-detail-card { overflow: hidden; } .pa-detail-alert { display: grid; gap: 4px; border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--bg); } .pa-detail-alert.red { border-left-color: var(--red); } .pa-detail-alert.amber { border-left-color: var(--amber); } .pa-detail-alert.orange { border-left-color: var(--orange); } .pa-detail-alert.green { border-left-color: var(--green); } .pa-detail-alert span { color: var(--text-2); line-height: 1.45; } .pa-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } .pa-kv { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 8px 10px; min-width: 0; background: var(--bg-elevated); } .pa-kv span { display: block; color: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; } .pa-kv strong { display: block; overflow-wrap: anywhere; } .pa-tone-red { color: var(--red-700); } .pa-tone-amber { color: var(--amber-700); } .pa-tone-orange { color: var(--orange-700); } .pa-tone-green { color: var(--green-700); } .pa-tone-brand { color: var(--brand-700); } .pa-detail-section { margin-top: 14px; border-top: 1px solid var(--border-soft); padding-top: 12px; } .pa-detail-section p { margin: 6px 0 0; color: var(--text-2); line-height: 1.5; } .pa-audit-lines { display: grid; gap: 7px; margin-top: 8px; } .pa-audit-lines div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; border-bottom: 1px solid var(--border-soft); padding-bottom: 7px; } .pa-audit-lines div:last-child { border-bottom: 0; } .pa-audit-lines strong { color: var(--text); font-size: 12px; } .pa-audit-lines span { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pa-mail-section-head, .pa-mail-meta, .pa-mail-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; } .pa-mail-thread-list { display: grid; gap: 10px; margin-top: 10px; } .pa-mail-card { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-elevated); padding: 10px; min-width: 0; } .pa-mail-meta strong { display: block; overflow-wrap: anywhere; } .pa-mail-actions { flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; } .pa-mail-body { margin-top: 9px; min-width: 0; } .pa-mail-pre { max-height: 360px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); padding: 10px; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; } .pa-recent-mail-list { display: grid; gap: 6px; } .pa-recent-mail-card { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-elevated); padding: 9px 10px; cursor: pointer; min-width: 0; } .pa-recent-mail-card:hover, .pa-recent-mail-card.active { border-color: var(--brand); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent); } .pa-recent-mail-time { display: grid; gap: 2px; color: var(--text-2); font-size: 12px; } .pa-recent-mail-time span { color: var(--text-3); } .pa-recent-mail-main { min-width: 0; } .pa-recent-mail-subject { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; } .pa-recent-mail-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .pa-recent-mail-detail .pa-mail-pre { max-height: 54vh; } .pa-agent-proof { border: 1px solid var(--border-soft); border-left: 3px solid var(--brand); border-radius: var(--radius-sm); background: var(--bg); padding: 10px 12px; } .pa-agent-proof.green { border-left-color: var(--green); } .pa-agent-proof.amber { border-left-color: var(--amber); } .pa-agent-proof.red { border-left-color: var(--red); } .pa-agent-proof.gray { border-left-color: var(--text-3); } .pa-agent-proof.empty { background: var(--bg-elevated); } .pa-agent-result-flow { display: grid; gap: 10px; margin-top: 10px; } .pa-agent-flow-row { min-width: 0; } .pa-agent-flow-label { color: var(--text-2); font-size: 11px; font-weight: 800; letter-spacing: .06em; line-height: 1.2; margin-bottom: 4px; text-transform: uppercase; } .pa-draft-panel { border: 1px solid var(--border-soft); border-left: 3px solid var(--brand); border-radius: var(--radius-sm); background: var(--bg); padding: 10px 12px; } .pa-draft-panel.empty { border-left-color: var(--text-3); background: var(--bg-elevated); } .pa-draft-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .pa-draft-panel pre { margin: 9px 0 0; max-height: 260px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--text); padding: 10px; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; } .pa-agent-draft-inline { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-elevated); padding: 10px; } .pa-agent-draft-inline.empty { background: color-mix(in srgb, var(--amber) 6%, var(--bg-elevated)); } .pa-agent-draft-inline pre { margin: 9px 0 0; max-height: 280px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); padding: 10px; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; } .pa-agent-proof-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; } .pa-agent-advice { color: var(--text); font-weight: 650; line-height: 1.45; } .pa-agent-guardrails { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .pa-agent-guardrails span { border: 1px solid var(--border-soft); border-radius: var(--radius-pill); background: var(--bg-elevated); color: var(--text-2); font-size: 11px; padding: 2px 7px; } .pa-agent-output { margin-top: 9px; } .pa-agent-output summary { cursor: pointer; color: var(--text-2); font-size: 12px; font-weight: 650; } .pa-agent-output pre { margin: 7px 0 0; max-height: 210px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--text); padding: 10px; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; } .pa-review-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .pa-review-actions-top { position: sticky; top: 86px; z-index: 2; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 8px; margin-top: 10px; } .pa-mail-section > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; } .pa-mail-section > summary::-webkit-details-marker { display: none; } .pa-mail-section > summary span { display: grid; gap: 2px; min-width: 0; } .pa-mail-section > summary strong { color: var(--text); } .pa-mail-section > summary small { color: var(--text-3); } .pa-agent-secondary summary { cursor: pointer; color: var(--text-2); font-weight: 600; } .pa-agent-panel.compact { margin: 10px 0 0; border: 0; background: transparent; } .pa-agent-panel.compact .card-body { padding: 0; } .pa-agent-panel.compact .pa-agent-grid { grid-template-columns: 1fr 1fr; } .pa-agent-panel.compact .pa-agent-question, .pa-agent-panel.compact .pa-agent-submit { grid-column: 1 / -1; } .pa-full { width: 100%; } .pa-agent-panel { margin-bottom: 14px; } .pa-agent-body { padding-top: 12px; } .pa-agent-grid { display: grid; grid-template-columns: 150px 220px minmax(280px, 1fr) 190px; gap: 12px; align-items: end; } .pa-agent-grid label { display: grid; gap: 5px; min-width: 0; } .pa-agent-grid > * { min-width: 0; } .pa-agent-question { align-self: stretch; } .pa-agent-text { box-sizing: border-box; max-width: 100%; min-height: 74px; max-height: 150px; resize: vertical; font-family: var(--font-mono); font-size: 12px; line-height: 1.45; overflow-x: hidden; } .pa-agent-submit { min-width: 0; align-self: end; } .pa-agent-submit .btn { white-space: normal; } .pa-agent-screening-line { margin-top: 8px; } .pa-insights { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; } .pa-agenda-line { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); } .pa-agenda-line:last-child { border-bottom: 0; } .pa-agenda-line span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pa-client-tabs { display: flex; flex-wrap: wrap; gap: 6px; } .pa-agent-screening summary { cursor: pointer; font-size: 12px; color: var(--text-3); } .pa-agent-coverage { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 6px; margin-top: 8px; } .pa-agent-coverage-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 5px 7px; font-size: 11px; color: var(--text-3); } .pa-agent-coverage-row strong { color: var(--text); } .pa-sources { margin-top: 14px; color: var(--text-3); } .pa-sources summary { cursor: pointer; font-size: 12px; } .pa-source-line { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } /* ============================================================ PA OPS LEDGER — werktafel, geen kaartendashboard ============================================================ */ .pa-ops-page { max-width: 1720px; } .pa-ops-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; } .pa-ops-eyebrow { color: var(--text-3); font-family: var(--font-mono); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .pa-ops-sourcebar { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); margin-bottom: 14px; padding: 10px 12px; } .pa-ops-source-main { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 8px; } .pa-ops-source-main > div { min-width: 0; border-right: 1px solid var(--border-soft); padding-right: 10px; } .pa-ops-source-main > div:last-child { border-right: 0; } .pa-ops-source-main strong { display: block; color: var(--text); font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; } .pa-ops-source-main span, .pa-ops-source-meta span { color: var(--text-3); font-size: 12px; } .pa-ops-source-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--border-soft); margin-top: 10px; padding-top: 8px; } .pa-ops-source-meta span { border: 1px solid var(--border-soft); border-radius: var(--radius-pill); padding: 3px 8px; } .pa-ops-source-details { border-top: 1px solid var(--border-soft); margin-top: 8px; padding-top: 8px; } .pa-ops-source-details summary, .pa-ops-agent-details summary, .pa-ops-technical summary { cursor: pointer; color: var(--text-2); font-weight: 650; } .pa-ops-source-grid, .pa-ops-contradictions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; } .pa-ops-source-grid > div, .pa-ops-contradictions > div { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg); padding: 8px 10px; min-width: 0; } .pa-ops-source-grid strong, .pa-ops-contradictions strong, .pa-ops-source-grid span, .pa-ops-contradictions span, .pa-ops-source-grid small, .pa-ops-contradictions small { display: block; } .pa-ops-source-grid span, .pa-ops-contradictions span { color: var(--text-2); margin-top: 3px; } .pa-ops-source-grid small, .pa-ops-contradictions small { color: var(--text-3); line-height: 1.35; margin-top: 4px; } .pa-ops-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 470px); gap: 14px; align-items: start; } .pa-ops-worklist, .pa-ops-detailpane { min-width: 0; } .pa-ops-detailpane { position: sticky; top: 86px; max-height: calc(100vh - 102px); overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); padding: 12px; } .pa-ops-lanes { display: grid; grid-template-columns: repeat(8, minmax(92px, 1fr)); gap: 6px; margin-bottom: 10px; } .pa-ops-lane { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; border: 1px solid var(--border); border-radius: var(--radius-sm) !important; background: var(--bg-elevated); color: var(--text-2); padding: 6px 9px; text-align: left; } .pa-ops-lane strong { color: var(--text); font-variant-numeric: tabular-nums; } .pa-ops-lane.active, .pa-ops-lane:hover { border-color: var(--brand); color: var(--text); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent); } .pa-ops-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); margin-bottom: 8px; padding: 9px 10px; } .pa-ops-toolbar strong, .pa-ops-toolbar span { display: block; } .pa-ops-toolbar span { color: var(--text-3); font-size: 12px; } .pa-ops-search { max-width: 360px; min-height: 34px; } .pa-ops-table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); } .pa-ops-table { width: 100%; min-width: 940px; border-collapse: collapse; table-layout: fixed; } .pa-ops-table th { position: sticky; top: 0; z-index: 1; background: var(--bg); color: var(--text-3); font-family: var(--font-mono); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-align: left; text-transform: uppercase; padding: 9px 10px; } .pa-ops-table td { border-top: 1px solid var(--border-soft); color: var(--text-2); padding: 10px; vertical-align: top; } .pa-ops-table tbody tr { cursor: pointer; } .pa-ops-table tbody tr:hover, .pa-ops-table tbody tr.is-selected { background: color-mix(in srgb, var(--brand) 7%, var(--bg-elevated)); } .pa-ops-table tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--brand); } .pa-ops-row-title { color: var(--text); font-weight: 750; line-height: 1.25; overflow-wrap: anywhere; } .pa-ops-row-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 5px; color: var(--text-3); font-size: 12px; } .pa-ops-client, .pa-ops-deadline, .pa-ops-next { display: grid; gap: 4px; min-width: 0; } .pa-ops-client a, .pa-ops-client strong, .pa-ops-deadline strong, .pa-ops-next strong { color: var(--text); overflow-wrap: anywhere; } .pa-ops-client span, .pa-ops-deadline span { color: var(--text-3); font-size: 12px; } .pa-ops-deadline.red strong { color: var(--red-700); } .pa-ops-deadline.amber strong { color: var(--amber-700); } .pa-ops-deadline.orange strong { color: var(--orange-700); } .pa-ops-deadline.green strong { color: var(--green-700); } .pa-ops-next .btn { justify-self: start; } .pa-ops-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--border-soft); padding-bottom: 10px; } .pa-ops-detail-head h2 { margin: 3px 0 4px; color: var(--text); font-size: 20px; line-height: 1.22; overflow-wrap: anywhere; } .pa-ops-detail-head p { margin: 0; color: var(--text-3); } .pa-ops-actionbox { border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: var(--radius-sm); background: var(--bg); margin-top: 12px; padding: 10px 12px; } .pa-ops-actionbox.red { border-left-color: var(--red); } .pa-ops-actionbox.amber { border-left-color: var(--amber); } .pa-ops-actionbox.orange { border-left-color: var(--orange); } .pa-ops-actionbox.green { border-left-color: var(--green); } .pa-ops-actionbox > span, .pa-ops-section-title, .pa-ops-followup span, .pa-ops-anchor span { color: var(--text-3); font-family: var(--font-mono); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .pa-ops-actionbox strong { display: block; margin-top: 4px; color: var(--text); font-size: 17px; line-height: 1.3; } .pa-ops-actionbox p { margin: 7px 0 0; color: var(--text-2); line-height: 1.45; } .pa-ops-meta-grid, .pa-ops-anchor, .pa-ops-followup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } .pa-ops-section { border-top: 1px solid var(--border-soft); margin-top: 14px; padding-top: 12px; } .pa-ops-anchor > div, .pa-ops-followup > div { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg); padding: 8px 10px; min-width: 0; } .pa-ops-anchor strong, .pa-ops-followup strong { display: block; color: var(--text); margin-top: 3px; overflow-wrap: anywhere; } .pa-ops-anchor-missing { display: grid; gap: 4px; border: 1px solid color-mix(in srgb, var(--orange) 40%, var(--border)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--orange) 8%, var(--bg)); color: var(--text-2); margin-top: 8px; padding: 10px; } .pa-ops-anchor-missing strong { color: var(--text); } .pa-ops-agent-details, .pa-ops-technical { border-top: 1px solid var(--border-soft); margin-top: 14px; padding-top: 12px; } .pa-ops-technical pre { max-height: 260px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); margin: 8px 0 0; padding: 10px; font-family: var(--font-mono); font-size: 12px; line-height: 1.45; } .pa-ops-empty, .pa-ops-detail-empty { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); padding: 14px; } .pa-ops-page .pill.red, .pa-ops-page .pill.amber, .pa-ops-page .pill.orange, .pa-ops-page .pill.green, .pa-ops-page .pill.brand, .pa-ops-page .pill.gray { border: 1px solid var(--border-soft); padding: 3px 8px; } .pa-ops-page .pill.red { background: color-mix(in srgb, var(--red) 12%, var(--bg)); color: var(--red-700); } .pa-ops-page .pill.amber { background: color-mix(in srgb, var(--amber) 12%, var(--bg)); color: var(--amber-700); } .pa-ops-page .pill.orange { background: color-mix(in srgb, var(--orange) 12%, var(--bg)); color: var(--orange-700); } .pa-ops-page .pill.green { background: color-mix(in srgb, var(--green) 12%, var(--bg)); color: var(--green-700); } .pa-ops-page .pill.brand { background: color-mix(in srgb, var(--brand) 12%, var(--bg)); color: var(--brand-700); } .pa-ops-page .pill.gray { background: var(--bg); color: var(--text-3); } /* ============================================================ TAAKOPVOLGING — praktijkbeheer / fiduciaire werkbank ============================================================ */ .tm-page { max-width: 1680px; margin: 0 auto; padding-bottom: 28px; } .tm-head, .tm-head-actions, .tm-toolbar, .tm-filters, .tm-actions { display: flex; align-items: flex-start; gap: 10px; } .tm-head { justify-content: space-between; margin-bottom: 16px; } .tm-head-actions, .tm-actions { flex-wrap: wrap; } .tm-eyebrow, .tm-section-title, .tm-mail-grid span, .tm-anchor span { color: var(--text-3); font-family: var(--font-mono); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .tm-summary { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; } .tm-summary button { min-height: 70px; border: 1px solid var(--border); border-radius: var(--radius-sm) !important; background: var(--bg-elevated); color: var(--text-2); padding: 10px 12px; text-align: left; } .tm-summary button.active, .tm-summary button:hover { border-color: var(--brand); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent); } .tm-summary strong { display: block; color: var(--text); font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; } .tm-summary span { display: block; color: var(--text-3); margin-top: 6px; } .tm-ledger-line { display: flex; flex-wrap: wrap; gap: 7px; color: var(--text-3); margin-bottom: 12px; } .tm-ledger-line span { border: 1px solid var(--border-soft); border-radius: var(--radius-pill); background: var(--bg-elevated); padding: 3px 8px; font-size: 12px; } .tm-toolbar { justify-content: space-between; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); margin-bottom: 10px; padding: 8px; } .tm-filters { flex-wrap: wrap; } .tm-filters button { min-height: 34px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm) !important; background: var(--bg); color: var(--text-2); padding: 6px 11px; } .tm-filters button.active, .tm-filters button:hover { border-color: var(--brand); color: var(--text); } .tm-search { max-width: 340px; min-height: 34px; } .tm-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 470px); gap: 14px; align-items: start; } .tm-list, .tm-detail { min-width: 0; } .tm-detail { position: sticky; top: 86px; max-height: calc(100vh - 104px); overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); padding: 12px; } .tm-list-head { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); margin-bottom: 8px; padding: 9px 10px; } .tm-list-head span { color: var(--text-3); } .tm-table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); } .tm-table { width: 100%; min-width: 980px; border-collapse: collapse; table-layout: fixed; } .tm-table th { position: sticky; top: 0; z-index: 1; background: var(--bg); color: var(--text-3); font-family: var(--font-mono); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-align: left; text-transform: uppercase; padding: 9px 10px; } .tm-table td { border-top: 1px solid var(--border-soft); color: var(--text-2); padding: 10px; vertical-align: top; } .tm-table tbody tr { cursor: pointer; } .tm-table tbody tr:hover, .tm-table tbody tr.is-selected { background: color-mix(in srgb, var(--brand) 7%, var(--bg-elevated)); } .tm-table tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--brand); } .tm-table td strong, .tm-table td span { display: block; min-width: 0; overflow-wrap: anywhere; } .tm-table td strong { color: var(--text); line-height: 1.25; } .tm-table td span { color: var(--text-3); margin-top: 4px; } .tm-deadline.red { color: var(--red-700); } .tm-deadline.amber { color: var(--amber-700); } .tm-deadline.orange { color: var(--orange-700); } .tm-deadline.brand { color: var(--brand-700); } .tm-deadline.green { color: var(--green-700); } .tm-detail-head { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--border-soft); padding-bottom: 10px; } .tm-detail-head h2 { margin: 4px 0; color: var(--text); font-size: 21px; line-height: 1.24; overflow-wrap: anywhere; } .tm-detail-head p, .tm-detail-head span { margin: 0; color: var(--text-3); } .tm-action { border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: var(--radius-sm); background: var(--bg); margin-top: 12px; padding: 10px 12px; } .tm-action.red { border-left-color: var(--red); } .tm-action.amber { border-left-color: var(--amber); } .tm-action.orange { border-left-color: var(--orange); } .tm-action.green { border-left-color: var(--green); } .tm-action > span { color: var(--text-3); font-family: var(--font-mono); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .tm-action strong { display: block; color: var(--text); font-size: 18px; margin-top: 4px; } .tm-action p { color: var(--text-2); line-height: 1.45; margin: 7px 0 0; } .tm-meta-grid, .tm-mail-grid, .tm-anchor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } .tm-section { border-top: 1px solid var(--border-soft); margin-top: 14px; padding-top: 12px; } .tm-mail-grid > div, .tm-anchor > div { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg); min-width: 0; padding: 8px 10px; } .tm-mail-grid strong, .tm-anchor strong { display: block; color: var(--text); margin-top: 3px; overflow-wrap: anywhere; } .tm-mail-scan p { color: var(--text-2); line-height: 1.45; margin: 10px 0 0; } .tm-mail-scan details { margin-top: 10px; } .tm-mail-scan summary, .tm-technical summary { cursor: pointer; color: var(--text-2); font-weight: 650; } .tm-mail-scan pre, .tm-technical pre { max-height: 260px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); margin: 8px 0 0; padding: 10px; font-family: var(--font-mono); font-size: 12px; line-height: 1.45; } .tm-warning { display: grid; gap: 4px; border: 1px solid color-mix(in srgb, var(--orange) 40%, var(--border)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--orange) 8%, var(--bg)); color: var(--text-2); margin-top: 8px; padding: 10px; } .tm-warning strong { color: var(--text); } .tm-technical { border-top: 1px solid var(--border-soft); margin-top: 14px; padding-top: 12px; } .tm-empty { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); padding: 14px; } .tm-page .pill.red, .tm-page .pill.amber, .tm-page .pill.orange, .tm-page .pill.green, .tm-page .pill.brand, .tm-page .pill.gray { border: 1px solid var(--border-soft); padding: 3px 8px; } .tm-page .pill.red { background: color-mix(in srgb, var(--red) 12%, var(--bg)); color: var(--red-700); } .tm-page .pill.amber { background: color-mix(in srgb, var(--amber) 12%, var(--bg)); color: var(--amber-700); } .tm-page .pill.orange { background: color-mix(in srgb, var(--orange) 12%, var(--bg)); color: var(--orange-700); } .tm-page .pill.green { background: color-mix(in srgb, var(--green) 12%, var(--bg)); color: var(--green-700); } .tm-page .pill.brand { background: color-mix(in srgb, var(--brand) 12%, var(--bg)); color: var(--brand-700); } .tm-page .pill.gray { background: var(--bg); color: var(--text-3); } .mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-14 { margin-top: 14px; } @media (max-width: 1180px) { .pa-kpis { grid-template-columns: repeat(3, minmax(140px, 1fr)); } .pa-workspace { grid-template-columns: 1fr; } .pa-detail { position: static; } .pa-decision-row { grid-template-columns: minmax(170px, 1fr) minmax(220px, 1.4fr) auto; } .pa-decision-row > strong { grid-column: 1 / -1; } .pa-list-head { display: none; } .pa-dossier-card { grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.2fr) minmax(190px, 1fr); } .pa-recent-mail-card { grid-template-columns: 96px minmax(0, 1fr); } .pa-recent-mail-actions { grid-column: 2; justify-content: flex-start; } .pa-card-agent { grid-column: auto; } .pa-card-actions { justify-content: flex-start; } .pa-agent-grid { grid-template-columns: minmax(140px, 1fr) minmax(180px, 1fr); } .pa-agent-question, .pa-agent-submit { grid-column: 1 / -1; } .pa-agent-coverage { grid-template-columns: repeat(2, minmax(120px, 1fr)); } .pa-ops-shell { grid-template-columns: 1fr; } .pa-ops-detailpane { position: static; max-height: none; } .pa-ops-lanes { grid-template-columns: repeat(4, minmax(110px, 1fr)); } .pa-ops-source-grid, .pa-ops-contradictions { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tm-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tm-shell { grid-template-columns: 1fr; } .tm-detail { position: static; max-height: none; } } @media (max-width: 640px) { #sys-banner { max-width: 260px; } #cost-pill { max-width: 130px; } #mail-urgent-banner { max-width: 160px; } #ai-bar-toggle { max-width: 92px; } .pa-head { flex-direction: column; } .pa-head-actions .btn { flex: 1 1 auto; } .pa-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pa-flow { min-width: 118px; } .pa-decision-row, .pa-detail-grid, .pa-audit-lines div, .pa-mail-section-head, .pa-mail-meta, .pa-recent-mail-card, .pa-dossier-card, .pa-agent-grid, .pa-insights { grid-template-columns: 1fr; } .pa-mail-section-head, .pa-mail-meta { display: grid; } .pa-mail-actions { justify-content: flex-start; } .pa-recent-mail-actions { grid-column: auto; justify-content: flex-start; } .pa-recent-mail-subject { white-space: normal; } .pa-row-actions .btn { flex: 1 1 auto; } .pa-next-line { grid-template-columns: 1fr; gap: 2px; } .pa-next-line span { white-space: normal; } .pa-agent-coverage { grid-template-columns: 1fr; } .pa-ops-head, .pa-ops-toolbar { flex-direction: column; align-items: stretch; } .pa-ops-source-grid, .pa-ops-contradictions, .pa-ops-lanes, .pa-ops-meta-grid, .pa-ops-anchor, .pa-ops-followup { grid-template-columns: 1fr; } .pa-ops-source-main { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pa-ops-source-main > div { border-right: 0; border-bottom: 1px solid var(--border-soft); padding: 0 0 8px; } .pa-ops-source-main > div:last-child { border-bottom: 0; padding-bottom: 0; } .pa-ops-search { max-width: none; } .tm-head, .tm-toolbar { flex-direction: column; align-items: stretch; } .tm-summary, .tm-meta-grid, .tm-mail-grid, .tm-anchor { grid-template-columns: 1fr; } .tm-search { max-width: none; } } /* ============================================================ NUM-95 · P5 stap A — NIEUW additief globaal thema html[data-theme="numb3rs2026"] ------------------------------------------------------------ Append-only. GEEN default-wijziging: niets verandert tot iemand expliciet zet. Remapt het BESTAANDE thema-variabelen-systeem (zoals gedefinieerd in de :root/[data-theme="dark"]/[data-theme="light"] blokken hierboven) naar het 2026 wit-canvas + emerald palet. Palet: Canvas #FFFFFF · Surface #F9FAFB · Ink #111318 · Slate #4B5563 · Muted #9CA3AF · Emerald var(--brand) · Emerald-700 #0E9E72 · Hairline #E5E7EB. ============================================================ */ html[data-theme="numb3rs2026"] { /* === BASIS === */ --bg: #FFFFFF; /* Canvas */ --bg-elevated: #FFFFFF; /* kaarten/panelen op canvas */ --bg-sunken: #F9FAFB; /* Surface (verzonken) */ --bg-overlay: rgba(17,19,24,0.45); /* === BRAND/ACCENT === */ --brand: var(--brand); /* Emerald */ --brand-on: #FFFFFF; /* tekst op emerald-vlak */ --accent: #0E9E72; /* Emerald-700 */ --gradient: linear-gradient(135deg, var(--brand) 0%, #0E9E72 100%); --indigo-glow: rgba(var(--brand-rgb),0.18); /* glow-token → emerald-getint */ /* === TEKST === */ --text: #111318; /* Ink */ --text-2: #4B5563; /* Slate */ --text-3: #9CA3AF; /* Muted */ --text-muted: #9CA3AF; /* Muted */ /* === BORDERS === */ --border: #E5E7EB; /* Hairline */ --border-soft: #F1F1F4; /* === SIDEBAR === */ --sb-bg: #F9FAFB; --sb-bg-hover: var(--brand-bg); --sb-bg-active: rgba(var(--brand-rgb),0.12); --sb-text: #4B5563; --sb-text-muted: #9CA3AF; --sb-rail: var(--brand); /* === RADIUS (structureel — geen kleur, gelijk aan basis) === */ --radius-sm: 6px; --radius: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-pill:999px; /* === SHADOWS — lichte tinten op wit canvas === */ --shadow-sm: 0 1px 2px rgba(17,19,24,0.04), 0 1px 3px rgba(17,19,24,0.06); --shadow-md: 0 4px 12px rgba(17,19,24,0.06), 0 2px 4px rgba(17,19,24,0.04); --shadow-lg: 0 12px 32px rgba(17,19,24,0.10); --ring: 0 0 0 3px rgba(var(--brand-rgb),0.35); --ring-accent: 0 0 0 3px rgba(14,158,114,0.30); /* === FONTS (structureel — geen kleur, gelijk aan basis) === */ --font-display: var(--font-sans); --font-body: var(--font-sans); --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* === INK-SCALE — lichte schaal passend bij wit canvas (900 = donker Ink … 50 = bijna wit) === */ --ink-900: #111318; --ink-800: #1F2937; --ink-700: #374151; --ink-600: #4B5563; --ink-500: #6B7280; --ink-400: #9CA3AF; --ink-300: #D1D5DB; --ink-200: #E5E7EB; --ink-100: #F3F4F6; --ink-50: #F9FAFB; /* === NUM-95 . P5c1 — SEMANTISCHE STATE-TOKENS === Append-only binnen het numb3rs2026-blok. Remapt de semantische kleuren die NIET in theme-modern.css' dark/light staan maar in onderliggende lagen (app.css regels 15-33 + theme-2026.css regels 15-39), naar wit/emerald-palet. Bron-waarden staan als commentaar achter elke regel. */ /* Rood — error/danger (app.css + theme-2026.css schaal) */ --red: #DC2626; /* was #dc2626 (app.css) — behoud */ --red-bg: #FEF2F2; /* was #fef2f2 (app.css) */ --red-border: #FECACA; /* was #fecaca (app.css) */ --red-50: #FEF2F2; /* was #FAE8E8 (theme-2026.css) */ --red-100: #FECACA; /* was #F5D2D2 (theme-2026.css) */ --red-700: #B91C1C; /* was #8B1414 (theme-2026.css) */ /* Groen/success — emerald (app.css + theme-2026.css schaal) */ --green: var(--brand); /* was #059669 (app.css) -> emerald */ --green-bg: var(--brand-bg); /* was var(--brand-bg) (app.css) */ --green-border: #A7F3D0; /* was #a7f3d0 (app.css) */ --green-50: var(--brand-bg); /* was var(--brand-bg) (theme-2026.css) */ --green-100: #A7F3D0; /* was #D2E2D8 (theme-2026.css) */ --green-700: #059669; /* was #1F3A2E (theme-2026.css) -> emerald-700 */ /* Amber — warning (app.css + theme-2026.css schaal) */ --amber: #D97706; /* was #d97706 (app.css) — behoud */ --amber-bg: #FFFBEB; /* was #fffbeb (app.css) */ --amber-border: #FDE68A; /* was #fde68a (app.css) */ --amber-50: #FFFBEB; /* was #FBF4DE (theme-2026.css) */ --amber-100: #FDE68A; /* was #F1E4AC (theme-2026.css) */ --amber-700: #B45309; /* was #7A5E12 (theme-2026.css) */ /* Orange — secundaire waarschuwing (app.css + theme-2026.css schaal) */ --orange: #EA580C; /* was #ea580c (app.css) — behoud hue, clean op wit */ --orange-bg: #FFF7ED; /* was #fff7ed (app.css) */ --orange-border: #FED7AA; /* was #fed7aa (app.css) */ --orange-50: #FFF7ED; /* was #FBEEDE (theme-2026.css) */ --orange-100: #FED7AA; /* was #F4D8B0 (theme-2026.css) */ --orange-700: #C2410C; /* was #7A4612 (theme-2026.css) */ /* Brand-tints (app.css bg/border + theme-2026.css 50/100/700) -> emerald */ --brand-bg: var(--brand-bg); /* was #eff6ff (app.css, blauw) -> emerald-tint */ --brand-border: #A7F3D0; /* was #bfdbfe (app.css, blauw) -> emerald-tint */ --brand-50: var(--brand-bg); /* was var(--brand-bg) (theme-2026.css) */ --brand-100: #A7F3D0; /* was #D2E2D8 (theme-2026.css) */ --brand-700: #0E9E72; /* was #1F3A2E (theme-2026.css) -> emerald-700 */ /* Accent-tints (theme-2026.css 50/100/700) — accent = emerald-700 hier */ --accent-50: var(--brand-bg); /* was #FAEEE5 (theme-2026.css, terracotta) -> emerald-tint */ --accent-100: #A7F3D0; /* was #F2D9C8 (theme-2026.css) -> emerald-tint */ --accent-700: #0E9E72; /* was #A85E3E (theme-2026.css) -> emerald-700 */ /* Blauw — informatief, neutraal-clean op wit (theme-2026.css 50/100/700) */ --blue-50: #EFF6FF; /* was #E5EDF5 (theme-2026.css) */ --blue-100: #BFDBFE; /* was #C9D8E9 (theme-2026.css) */ --blue-700: #1D4ED8; /* was #1A3B6B (theme-2026.css) */ /* Sterke rand (gebruikt op regel 662, upstream gedefinieerd) */ --border-strong: #D1D5DB; /* hairline-strong, neutraal grijs */ } /* === NUM-95 . P5c2 — WOORDMERK-FIX (lichte numb3rs2026-sidebar) === In het lichte thema is de sidebar #F9FAFB. Het woordmerk .sb-brand-name kreeg via app.css/brand.css/theme-2026.css een wit/crème kleur (#FAF7F2) → flets/ onleesbaar op licht. Hier scoped op het thema gecorrigeerd naar Ink-tekst met emerald "3". Hogere specificiteit dan de bare `.sb-brand-name`-regels én later in de cascade dan al die lagen → wint zonder !important. Enkel actief wanneer ; andere thema's blijven ongewijzigd. */ html[data-theme="numb3rs2026"] .sb-brand-name { color: var(--text); } /* Ink #111318 */ html[data-theme="numb3rs2026"] .sb-brand-name .wm3 { color: var(--brand); } /* Emerald var(--brand) */