/* Auto-split from styles.css lines 8666-10625 */ /* Dark mode — applied via [data-theme="dark"] on ═══════════════════════════════════════════════════════════ */ [data-theme="dark"] { --bg: #001117; /* deepest dark — page bg */ --surface: rgba(42, 47, 54, 0.96); /* #2A2F36 — card surface */ --surface-2: rgba(20, 27, 34, 0.99); /* #141B22 — deeper surface */ --border: rgba(167, 176, 183, 0.58); /* AA non-text ~3.1:1 min vs. --surface (was 0.12, ~1.2:1 — invisible) */ --border-2: rgba(217, 225, 230, 0.45); /* AA non-text ~3.4:1+ vs. --surface (was 0.24, ~1.4:1 — invisible) */ --navy: #000B0F; /* darker than #001117 */ --navy-2: #001117; --blue: #C98A4C; --blue-2: #D9A070; --blue-bg: rgba(201, 138, 76, 0.12); --vf-orange: #C98A4C; /* pinned: dark mode keeps original copper (light :root darkened for AA) */ --vf-orange-2: #D9A070; --text: #D5DADD; /* softened from pure #FFFFFF — still 9.7:1+ on --surface, well above AA */ --text-2: rgba(255, 255, 255, 0.72); --text-3: #909BA3; /* was #88929A: 4.33:1 on --surface, fails AA (needs 4.5) */ --menu-active-bg: rgba(255, 255, 255, 0.20); --ok: #40BF85; --ok-bg: rgba(64, 191, 133, 0.10); --ok-bdr: rgba(64, 191, 133, 0.26); --warn: #D4A050; /* light amber, distinct from brand */ --warn-bg: rgba(212, 160, 80, 0.12); --warn-bdr: rgba(212, 160, 80, 0.28); --err: #E87070; --err-bg: rgba(232, 112, 112, 0.10); --err-bdr: rgba(232, 112, 112, 0.26); --shadow-sm: 0 1px 6px rgba(0, 0, 0, 0.52); --shadow-md: 0 4px 22px rgba(0, 0, 0, 0.68); --menu-surface: rgba(20, 27, 34, 0.99); --menu-border-2: rgba(217, 225, 230, 0.45); /* was 0.34 of #88929A, ~1.7:1 — invisible menu borders */ --menu-text: #FFFFFF; --menu-text-2: rgba(255, 255, 255, 0.78); --menu-text-3: #A7B0B7; --menu-hover-bg: rgba(201, 138, 76, 0.18); --menu-active-bg: rgba(201, 138, 76, 0.26); --menu-active-bdr: rgba(217, 160, 112, 0.48); color-scheme: dark; } [data-theme="dark"] { --ask-input-fill: rgba(20, 27, 34, 0.98); /* #141B22 for input bg */ } [data-theme="dark"] .ask-bar-fixed { background: linear-gradient(to bottom, rgba(0, 17, 23, 0) 0%, var(--bg) 65%); } [data-theme="dark"] .ask-bar-inner { box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.50); } [data-theme="dark"] body { background: radial-gradient(ellipse at 8% 0%, rgba(201, 138, 76, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 92% 100%, rgba(201, 138, 76, 0.05) 0%, transparent 50%), linear-gradient(160deg, #001117 0%, #121A20 55%, #0D1520 100%); background-attachment: fixed; } [data-theme="dark"] header { background: linear-gradient(135deg, #000B0F 0%, #001117 60%, #141B22 100%); border-bottom-color: rgba(136, 146, 154, 0.14); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); } /* Form inputs */ [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="url"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] textarea, [data-theme="dark"] select { background: rgba(20, 27, 34, 0.96); color-scheme: dark; } [data-theme="dark"] .ask-input-row textarea { /* Override the generic [data-theme="dark"] textarea fill below — this textarea has no fill of its own, it shows the card's background. */ background: transparent; } /* Misc surfaces */ [data-theme="dark"] .dropzone { background: rgba(20, 27, 34, 0.45); } [data-theme="dark"] .doc-item:hover { background: rgba(255, 255, 255, 0.05); } /* ── Passage funnel ──────────────────────────────────────────────────────── */ .passage-funnel { font-size: 0.74rem; padding: 0.45rem 0.75rem 0.5rem; border-radius: var(--r-sm); background: var(--surface-2); margin-bottom: 0.5rem; } .funnel-row { display: grid; grid-template-columns: 6.5rem 1fr 2.2rem; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; } .funnel-label { color: var(--text-3); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } .funnel-track { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; } .funnel-fill { height: 100%; width: 0%; background: var(--blue-2); border-radius: 3px; transition: width 0.55s cubic-bezier(.4,0,.2,1); } .funnel-fill--pending { background: var(--text-3); width: 28%; animation: funnel-pulse 1.3s ease-in-out infinite; } @keyframes funnel-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.85; } } .funnel-num { color: var(--text); font-weight: 600; font-size: 0.72rem; text-align: right; font-variant-numeric: tabular-nums; } #passage-funnel-compact { font-size: 0.71rem; color: var(--text-3); letter-spacing: 0.01em; padding-top: 0.15rem; } [data-theme="dark"] .nav-dropdown-menu { background: var(--surface-2); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.70); border-color: var(--border-2); } [data-theme="dark"] .answer-card { --answer-card-bg: var(--surface-2); background: var(--answer-card-bg); } [data-theme="dark"] .nav-dropdown-item:hover { background: var(--blue-bg); color: var(--text); } [data-theme="dark"] .nav-dropdown-item:hover svg, [data-theme="dark"] .nav-dropdown a.nav-dropdown-item:hover svg { color: var(--text); stroke: currentColor; fill: none; opacity: 1; } [data-theme="dark"] .nav-dropdown .nav-dropdown-item.nav-active, [data-theme="dark"] .nav-dropdown a.nav-dropdown-item.nav-active, [data-theme="dark"] .nav-dropdown .nav-dropdown-item[aria-current="page"], [data-theme="dark"] .nav-dropdown a.nav-dropdown-item[aria-current="page"] { background: rgba(201, 138, 76, 0.24) !important; color: var(--text) !important; box-shadow: inset 0 0 0 1px rgba(201, 138, 76, 0.38); } [data-theme="dark"] .nav-dropdown .nav-dropdown-item.nav-active svg, [data-theme="dark"] .nav-dropdown a.nav-dropdown-item.nav-active svg, [data-theme="dark"] .nav-dropdown .nav-dropdown-item[aria-current="page"] svg, [data-theme="dark"] .nav-dropdown a.nav-dropdown-item[aria-current="page"] svg { color: var(--text) !important; stroke: currentColor !important; fill: none !important; opacity: 1 !important; } [data-theme="dark"] .ref-item { background: var(--bg); } @keyframes ref-flash-dark { 0% { background: rgba(201, 138, 76, 0.22); border-left-color: var(--blue-2); } 60% { background: rgba(201, 138, 76, 0.10); } 100% { background: var(--bg); border-left-color: transparent; } } [data-theme="dark"] .ref-item--flash { animation: ref-flash-dark 1.1s ease forwards; } [data-theme="dark"] .mode-btn { background: rgba(20, 27, 34, 0.80) !important; } [data-theme="dark"] .mode-btn:hover:not(:disabled) { background: rgba(28, 44, 74, 0.95) !important; } [data-theme="dark"] .work-memory-fields textarea, [data-theme="dark"] .work-memory-fields input[type="text"] { background: rgba(20, 27, 34, 0.96); border-color: rgba(217, 225, 230, 0.38); color: var(--text); } [data-theme="dark"] .work-memory-status { background: rgba(20, 27, 34, 0.8); border-color: rgba(167, 176, 183, 0.58); color: var(--text-2); } [data-theme="dark"] .work-memory-advanced { border-top-color: rgba(167, 176, 183, 0.42); } [data-theme="dark"] .work-memory-advanced summary { color: rgba(214, 222, 232, 0.78); } /* ── Slaagkans gauge ──────────────────────────────────────────────────────── */ .slaagkans-widget { display: flex; align-items: flex-start; justify-content: center; gap: 0.75rem; } .slaagkans-ring-wrap { position: relative; width: 56px; height: 56px; flex-shrink: 0; } .slaagkans-svg { width: 56px; height: 56px; transform: rotate(-90deg); } .slaagkans-fill { transition: stroke-dashoffset 0.85s cubic-bezier(.4,0,.2,1), stroke 0.4s ease; } .slaagkans-fill--warn { stroke: #f90 !important; } .slaagkans-fill--err { stroke: #e05 !important; } .slaagkans-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .slaagkans-pct { font-size: 0.62rem; font-weight: 700; color: var(--text-1, #e8e8e8); font-variant-numeric: tabular-nums; line-height: 1; } .slaagkans-label-wrap { display: flex; flex-direction: column; gap: 0.1rem; padding-top: 0.1rem; } .slaagkans-title { font-size: 0.67rem; font-weight: 600; color: var(--text-2, #aaa); text-transform: uppercase; letter-spacing: 0.05em; } .slaagkans-quality { font-size: 0.73rem; color: var(--text-1, #e8e8e8); line-height: 1.2; } .slaagkans-toelichting { font-size: 0.67rem; color: var(--text-3, #888); font-style: italic; line-height: 1.35; max-width: 20rem; } /* ── Slaagkans score breakdown ──────────────────────────────────────────── */ .slaagkans-breakdown { display: inline; } .slaagkans-breakdown > summary { cursor: pointer; list-style: none; display: inline; } .slaagkans-breakdown > summary::-webkit-details-marker { display: none; } .slaagkans-breakdown-list { margin: 0.3rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--border); padding-top: 0.3rem; } .slaagkans-breakdown-row { display: flex; justify-content: space-between; gap: 0.6rem; font-size: 0.73rem; color: var(--text-3, #888); line-height: 1.7; } .slaagkans-breakdown-delta { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 3.2rem; text-align: right; white-space: nowrap; } .slaagkans-breakdown-delta--pos { color: var(--ok, #4caf7d); } .slaagkans-breakdown-delta--neg { color: var(--err, #e05); } .slaagkans-breakdown-total { display: flex; justify-content: flex-end; font-size: 0.73rem; font-weight: 700; color: var(--text-1, #e8e8e8); border-top: 1px solid var(--border); margin-top: 0.15rem; padding-top: 0.2rem; } [data-theme="dark"] .conv-item:hover { background: rgba(201, 138, 76, 0.10); border-color: rgba(201, 138, 76, 0.28); } [data-theme="dark"] .conv-item--active { background: rgba(201, 138, 76, 0.16); border-color: rgba(201, 138, 76, 0.36); } [data-theme="dark"] .conv-item--active .conv-item-name { color: var(--text); } [data-theme="dark"] .conv-new-btn, [data-theme="dark"] .menu-icon-btn, [data-theme="dark"] .clear-history-btn, [data-theme="dark"] .citation-first-toggle { color: var(--text-2); } [data-theme="dark"] .conv-new-btn:hover, [data-theme="dark"] .menu-icon-btn:hover, [data-theme="dark"] .clear-history-btn:hover, [data-theme="dark"] .citation-first-toggle:hover { color: var(--text); } [data-theme="dark"] .conv-new-btn--cta { border-color: color-mix(in srgb, var(--surface) 82%, var(--text-2) 18%); background: color-mix(in srgb, var(--surface) 82%, var(--text-2) 18%); color: var(--text-2); box-shadow: none; } [data-theme="dark"] .conv-new-btn--cta:hover { border-color: color-mix(in srgb, var(--surface) 74%, var(--text-2) 26%); background: color-mix(in srgb, var(--surface) 74%, var(--text-2) 26%); color: var(--text); } [data-theme="dark"] .conv-new-btn--cta .conv-new-plus { background: none; border-color: transparent; color: currentColor; } [data-theme="dark"] .welcome-card-inner { background: var(--bg); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(217, 160, 112, 0.08) inset; } [data-theme="dark"] .ask-bar-inner { border-color: rgba(217, 160, 112, 0.22); } [data-theme="dark"] .welcome-card-title { color: var(--text); } [data-theme="dark"] .welcome-card-subtitle { color: var(--text-2); } [data-theme="dark"] .welcome-resume-context { color: rgba(206, 214, 226, 0.72); } [data-theme="dark"] .welcome-resume-btn { border-color: rgba(217, 160, 112, 0.34); background: rgba(201, 138, 76, 0.12); color: #ffdcb8; } [data-theme="dark"] .welcome-resume-btn:hover { border-color: rgba(217, 160, 112, 0.5); background: rgba(201, 138, 76, 0.2); } [data-theme="dark"] .followup-chip--continuity { border-color: rgba(217, 160, 112, 0.24); background: rgba(32, 40, 52, 0.56); } [data-theme="dark"] .followup-chip--correction { border-color: rgba(217, 225, 230, 0.28); background: rgba(20, 27, 34, 0.62); } [data-theme="dark"] .followup-chip--correction:hover { border-color: rgba(217, 160, 112, 0.4); background: rgba(201, 138, 76, 0.18); } [data-theme="dark"] .conv-item-context { color: rgba(206, 214, 226, 0.72); } /* Dossier card in the main (left) menu: explicit dark tokens so link text and metadata never inherit light-mode navy on dark backgrounds. */ [data-theme="dark"] .dossier-sidebar-card { background: rgba(201, 138, 76, 0.12); border-color: rgba(217, 160, 112, 0.34); box-shadow: inset 0 0 0 1px rgba(217, 160, 112, 0.08); } [data-theme="dark"] .dossier-sidebar-card:hover { background: rgba(201, 138, 76, 0.16); border-color: rgba(217, 160, 112, 0.44); } [data-theme="dark"] .dossier-sidebar-icon { color: var(--blue-2); opacity: 1; } [data-theme="dark"] .dossier-sidebar-name { color: var(--text) !important; } [data-theme="dark"] .dossier-sidebar-name:hover { color: var(--blue-2) !important; } [data-theme="dark"] .dossier-sidebar-meta-row dt, [data-theme="dark"] .dossier-sidebar-empty-text, [data-theme="dark"] .dossier-sidebar-hint-text { color: var(--text-3); } [data-theme="dark"] .dossier-sidebar-meta-row dd { color: var(--text-2); } [data-theme="dark"] .dossier-sidebar-status { background: rgba(255, 255, 255, 0.12); color: var(--text-2); } [data-theme="dark"] .dossier-sidebar-status--gesloten { background: rgba(255, 255, 255, 0.11); color: var(--text-2); } [data-theme="dark"] .dossier-sidebar-status--wacht { background: rgba(201, 138, 76, 0.24); color: var(--blue-2); } [data-theme="dark"] .dossier-sidebar-card--empty { border-color: rgba(217, 160, 112, 0.34); background: rgba(20, 27, 34, 0.42); } [data-theme="dark"] .dossier-sidebar-empty-text svg { color: var(--text-3); opacity: 0.9; } [data-theme="dark"] .dossier-sidebar-hint { border-top-color: rgba(136, 146, 154, 0.28); } [data-theme="dark"] .dossier-sidebar-add-wrap .persona-menu { background: var(--menu-surface) !important; border-color: var(--menu-border-2) !important; } [data-theme="dark"] .conv-day-separator-label { background: var(--surface-2); color: var(--text-3); border-color: var(--border-2); } [data-theme="dark"] .conv-rename-input { background: rgba(20, 27, 34, 0.96); } [data-theme="dark"] .conv-drawer-toggle, [data-theme="dark"] .ref-drawer-toggle { background: var(--surface-2) !important; color: var(--text-2) !important; border-color: var(--border-2) !important; box-shadow: 3px 2px 14px rgba(0, 0, 0, 0.50) !important; } [data-theme="dark"] .conv-drawer-toggle:hover, [data-theme="dark"] .ref-drawer-toggle:hover { background: var(--blue-bg) !important; color: var(--text) !important; border-color: rgba(201, 138, 76, 0.40) !important; } [data-theme="dark"] .pinned-drawer-toggle, [data-theme="dark"] .wm-drawer-toggle { background: var(--surface-2) !important; color: var(--text) !important; border-color: var(--border-2) !important; box-shadow: -3px 2px 14px rgba(0, 0, 0, 0.50) !important; } [data-theme="dark"] .pinned-drawer-toggle:hover, [data-theme="dark"] .wm-drawer-toggle:hover { background: var(--blue-bg) !important; color: var(--text) !important; border-color: rgba(201, 138, 76, 0.40) !important; } [data-theme="dark"] .nav-mode-btn { background: var(--surface-2); color: var(--text-2); border-color: var(--border-2); } [data-theme="dark"] .nav-mode-btn:hover:not(:disabled) { background: var(--blue-bg); color: var(--text); border-color: rgba(201, 138, 76, 0.40); } [data-theme="dark"] .persona-menu, [data-theme="dark"] .conv-search-menu, [data-theme="dark"] .lib-export-menu { background: var(--surface-2); border-color: var(--border-2); box-shadow: var(--shadow-md); } [data-theme="dark"] .persona-option, [data-theme="dark"] .conv-search-menu-option, [data-theme="dark"] .lib-export-menu button { color: var(--text-2); } [data-theme="dark"] .persona-option:hover, [data-theme="dark"] .conv-search-menu-option:hover, [data-theme="dark"] .lib-export-menu button:hover { background: var(--blue-bg) !important; color: var(--text) !important; } [data-theme="dark"] .persona-option--active, [data-theme="dark"] .persona-option[aria-checked="true"], [data-theme="dark"] .conv-search-menu-option--active, [data-theme="dark"] .conv-search-menu-option[aria-checked="true"] { background: rgba(201, 138, 76, 0.24) !important; color: var(--text) !important; box-shadow: inset 0 0 0 1px rgba(201, 138, 76, 0.38) !important; } [data-theme="dark"] .about-modal-card { background: var(--surface-2); border-color: var(--border-2); } [data-theme="dark"] .about-modal-line, [data-theme="dark"] .about-modal-subtitle { color: var(--text-2); } [data-theme="dark"] .about-modal-line a, [data-theme="dark"] .about-modal-links a { color: var(--blue-2); border-bottom-color: rgba(201, 138, 76, 0.36); } /* Rustweergave staat verderop in dit bestand (bij de menu-contrastregels) en wint; hier alleen de tekstkleur, zodat de twee niet uiteen gaan lopen. */ [data-theme="dark"] .about-modal-close { color: var(--text-2); } [data-theme="dark"] button.nav-dropdown-item--logout:hover { background: var(--err-bg); color: var(--err); } [data-theme="dark"] .flag-input, [data-theme="dark"] .flag-textarea { background: rgba(20, 27, 34, 0.96); } /* ── Theme toggle switch (settings page) ─────────────────── */ .theme-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 0; } .theme-toggle-label { font-size: 0.88rem; font-weight: 600; color: var(--text); margin-bottom: 3px; } .theme-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; cursor: pointer; } .theme-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .theme-switch-slider { position: absolute; inset: 0; background: var(--border-2); border-radius: var(--r); transition: background 0.22s; } .theme-switch-slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.22s, background 0.22s; box-shadow: 0 1px 4px rgba(0,0,0,0.20); } .theme-switch input:checked + .theme-switch-slider { background: var(--blue-2); } .theme-switch input:checked + .theme-switch-slider::before { transform: translateX(20px); background: #fff; } .theme-switch input:focus-visible + .theme-switch-slider { outline: 2px solid var(--blue-2); outline-offset: 2px; } /* ── Letter modal ────────────────────────────────────────── */ .app-modal-box--wide { max-width: 700px !important; padding: 24px 24px 18px !important; } .letter-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-size: 0.85rem; font-weight: 700; color: var(--text-2); letter-spacing: 0.04em; text-transform: uppercase; } .letter-modal-close-x { background: transparent !important; border: none !important; color: var(--text-3) !important; font-size: 1rem !important; padding: 2px 6px !important; cursor: pointer; box-shadow: none !important; line-height: 1; } .letter-modal-close-x:hover { color: var(--text) !important; } .letter-modal-warn { margin-bottom: 12px; padding: 8px 12px; background: var(--warn-bg); border: 1px solid var(--warn-bdr); border-radius: var(--r-sm); font-size: 0.80rem; color: var(--warn); line-height: 1.45; } .letter-modal-content { max-height: 62vh; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-sm); background: #fff; margin-bottom: 16px; padding: 0; } /* ── Professional law firm letter ────────────────────────── */ .law-letter { font-family: 'Georgia', 'Times New Roman', serif; font-size: 0.88rem; color: #001117; padding: 32px 38px; line-height: 1.65; min-height: 100%; } .letter-loading { padding: 1rem; color: var(--text-muted); } .letter-error { color: var(--err); } .ll-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 2px solid #2A2F36; } .ll-head-right { text-align: right; } .ll-firm { font-size: 0.80rem; font-weight: 700; letter-spacing: 0.05em; color: #001117; text-transform: uppercase; line-height: 1.4; } .ll-firm-sub { font-size: 0.70rem; font-weight: 400; color: #88929A; font-family: 'Inter', 'Segoe UI', Arial, sans-serif; letter-spacing: 0.02em; text-transform: none; } .ll-badge { display: inline-block; font-family: 'Inter', 'Segoe UI', Arial, sans-serif; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; color: #92580a; border: 1px solid rgba(146,88,10,0.35); background: rgba(146,88,10,0.07); border-radius: var(--r-sm); padding: 2px 7px; text-transform: uppercase; margin-top: 4px; } .ll-meta { margin-bottom: 18px; font-size: 0.84rem; color: #2A2F36; } .ll-subject { margin-bottom: 16px; font-size: 0.86rem; } .ll-subject-label { font-weight: 700; } .ll-greeting { margin-bottom: 18px; font-size: 0.88rem; } /* ── Letter paragraphs — three levels ───────────────────── */ .ll-para-l1 { margin-bottom: 18px; } .ll-para-l2 { margin: 10px 0 10px 18px; } .ll-para-l3 { margin: 6px 0 6px 36px; } .ll-para-heading-l1 { font-size: 0.86rem; font-weight: 700; color: #001117; margin-bottom: 6px; letter-spacing: 0.01em; text-transform: uppercase; } .ll-para-heading-l2 { font-size: 0.84rem; font-weight: 700; color: #2A2F36; margin-bottom: 4px; } .ll-para-heading-l3 { font-size: 0.83rem; font-weight: 600; color: #001117; margin-bottom: 3px; font-style: italic; } .ll-body { white-space: pre-wrap; font-size: 0.86rem; color: #001117; line-height: 1.7; margin: 0; } .ll-body-sources { white-space: pre-wrap; font-size: 0.83rem; color: #2A2F36; line-height: 1.6; margin: 0; } .ll-rule { border: none; border-top: 1px solid rgba(42, 47, 54, 0.30); margin: 20px 0; } .ll-sign { margin-top: 24px; font-size: 0.86rem; } .ll-sign-name { font-weight: 700; color: #001117; margin-top: 18px; } .ll-disclaimer { margin-top: 16px; font-family: 'Inter', 'Segoe UI', Arial, sans-serif; font-size: 0.70rem; color: #88929A; line-height: 1.5; border-top: 1px solid #e8edf5; padding-top: 10px; } [data-theme="dark"] .letter-modal-content { background: #0f1e34; } [data-theme="dark"] .law-letter { color: #FFFFFF; } [data-theme="dark"] .ll-firm { color: #D9A070; } [data-theme="dark"] .ll-header { border-bottom-color: #2A2F36; } [data-theme="dark"] .ll-meta { color: #88929A; } [data-theme="dark"] .ll-subject { color: #FFFFFF; } [data-theme="dark"] .ll-para-heading-l1 { color: #C98A4C; } [data-theme="dark"] .ll-para-heading-l2 { color: #D9A070; } [data-theme="dark"] .ll-para-heading-l3 { color: #C98A4C; } [data-theme="dark"] .ll-body { color: #FFFFFF; } [data-theme="dark"] .ll-body-sources { color: #88929A; } [data-theme="dark"] .ll-sign-name { color: #D9A070; } [data-theme="dark"] .answer-source-badge--wet { background: rgba(31, 122, 82, 0.26); color: #9ce8c5; border-color: rgba(134, 239, 172, 0.36); } [data-theme="dark"] .answer-source-badge--jur { background: rgba(59, 130, 246, 0.26); color: #bfdbfe; border-color: rgba(147, 197, 253, 0.36); } [data-theme="dark"] .answer-source-badge--bkm { background: rgba(201, 138, 76, 0.26); color: #f9d8b0; border-color: rgba(217, 160, 112, 0.4); } [data-theme="dark"] .answer-source-badge--doc, [data-theme="dark"] .answer-source-badge--other { background: rgba(255, 255, 255, 0.1); color: #d7dde6; border-color: rgba(255, 255, 255, 0.24); } /* ── Password change modal ───────────────────────────────────────── */ .password-modal-overlay { position: fixed; inset: 0; background: rgba(0, 17, 23, 0.52); display: flex; align-items: center; justify-content: center; z-index: 900; } /* Ensure the hidden attribute is respected even with display:flex above */ .password-modal-overlay[hidden] { display: none !important; } .password-modal { width: 100%; max-width: 360px; border-radius: var(--r); box-shadow: 0 4px 24px rgba(0, 17, 23, 0.10), 0 1px 4px rgba(0, 17, 23, 0.06); overflow: hidden; background: #fff; position: relative; } .password-modal-close { position: absolute; top: 10px; right: 12px; background: none; border: none; font-size: 1rem; color: rgba(255, 255, 255, 0.8); cursor: pointer; padding: 6px 8px; line-height: 1; border-radius: var(--r); transition: color 0.12s, background 0.12s; z-index: 2; } .password-modal-close:hover { color: #fff; background: rgba(255, 255, 255, 0.14); } [data-theme="dark"] .password-modal { background: var(--surface); } .password-modal-card-header { background: linear-gradient(135deg, #001117 0%, #2A2F36 100%); padding: 26px 28px 22px; display: flex; flex-direction: column; align-items: center; gap: 8px; } .password-modal-mark { width: 62px; height: 62px; object-fit: contain; } .password-modal-brand-name { color: #fff; font-size: 18px; font-weight: 700; letter-spacing: 0.12em; text-align: center; } .password-modal-brand-name span { font-variant: small-caps; font-size: 0.72em; font-weight: 400; opacity: 0.70; letter-spacing: 0.08em; } .password-modal-brand-tagline { color: rgba(255, 255, 255, 0.55); font-size: 11px; letter-spacing: 0.06em; text-align: center; } .password-modal-card-body { padding: 26px 28px 28px; } .password-modal-card-body h2 { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: #001117; } .password-modal-intro { margin: 0 0 14px; font-size: 13px; color: #88929A; line-height: 1.5; } .password-modal-field { margin-bottom: 12px; } .password-modal-field label { display: block; font-size: 12px; font-weight: 600; color: #2A2F36; margin-bottom: 6px; letter-spacing: 0.02em; } .password-modal-field input[type="password"] { width: 100%; padding: 10px 12px; border: 1.5px solid #d1d5db; border-radius: var(--r); font-size: 14px; color: #111827; outline: none; transition: border-color 0.15s; font-family: inherit; } .password-modal-field input[type="password"]:focus { border-color: #2A2F36; } .password-modal-field input[type="password"]:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--vf-orange-soft); } .password-modal-save { margin-top: 8px; width: 100%; padding: 11px; background: #001117; color: #fff; border: none; border-radius: var(--r); font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s; } .password-modal-save:hover { background: #2A2F36; } .modal-status { border-radius: var(--r); padding: 10px 14px; font-size: 13px; margin-bottom: 14px; } .modal-status--ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; } .modal-status--err { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; } /* Dark mode — the modal shell switches to var(--surface) above, but these children kept their light literal colors (near-black text on a dark surface, effectively invisible). */ [data-theme="dark"] .password-modal-card-body h2 { color: var(--text); } [data-theme="dark"] .password-modal-intro { color: var(--text-3); } [data-theme="dark"] .password-modal-field label { color: var(--text-2); } [data-theme="dark"] .password-modal-field input[type="password"] { color: var(--text); border-color: var(--border-2); } [data-theme="dark"] .password-modal-field input[type="password"]:focus { border-color: var(--border-2); } [data-theme="dark"] .password-modal-save { background: var(--vf-orange); color: #001117; } [data-theme="dark"] .password-modal-save:hover { background: var(--vf-orange-2); } [data-theme="dark"] .modal-status--ok { background: var(--ok-bg); border-color: var(--ok-bdr); color: var(--ok); } [data-theme="dark"] .modal-status--err { background: var(--err-bg); border-color: var(--err-bdr); color: var(--err); } [data-theme="dark"] .ll-disclaimer { color: #88929A; border-top-color: #2A2F36; } /* ── Library redesign (v35) ──────────────────────────────────────────────── */ /* Cascade selector section */ .lib-source-heading { font-size: 1rem; font-weight: 700; color: var(--text); margin: 0 0 14px; } .lib-cascade { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .lib-cascade-row { display: flex; align-items: center; gap: 10px; } .lib-cascade-row label { font-size: 0.82rem; font-weight: 600; color: var(--text-2); min-width: 72px; flex-shrink: 0; } .lib-cascade-row[hidden] { display: none !important; } .lib-cascade select { flex: 1; padding: 7px 10px; border: 1.5px solid var(--border-2); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); font-size: 0.86rem; cursor: pointer; outline: none; transition: border-color 0.14s; } .lib-cascade select:focus { border-color: var(--blue); } .lib-cascade select:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--vf-orange-soft); } .lib-cascade select:disabled { opacity: 0.5; cursor: default; } .lib-cascade-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-left: 98px; } .lib-bulk-load-btn { background: transparent !important; color: var(--text-2) !important; border: 1.5px dashed var(--border-2) !important; font-size: 0.82rem !important; padding: 6px 14px !important; border-radius: var(--r-sm); cursor: pointer; } .lib-bulk-load-btn:hover { background: var(--surface-2) !important; } /* Corpus management collapsed panel */ .lib-corpus-manage { border: 1px solid var(--border); border-radius: var(--r-sm); margin-top: 14px; background: var(--surface-2); } .lib-corpus-manage > summary { padding: 8px 12px; font-size: 0.82rem; color: var(--text-2); font-weight: 600; cursor: pointer; user-select: none; list-style: none; } .lib-corpus-manage > summary::-webkit-details-marker { display: none; } .lib-corpus-manage > summary::before { content: '▶ '; font-size: 0.7rem; } .lib-corpus-manage[open] > summary::before { content: '▼ '; } .lib-cm-list { padding: 4px 8px 8px; } .lib-cm-row { display: flex; align-items: center; gap: 8px; padding: 4px 2px; border-bottom: 1px solid var(--border); } .lib-cm-row:last-child { border-bottom: none; } .lib-cm-name { flex: 1; font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); min-width: 0; } .lib-cm-fetched { flex: none; font-size: 0.68rem; color: var(--text-3); white-space: nowrap; } /* Index status badge — clickable when red (retry) */ .lib-idx-btn { background: none; border: none; padding: 0 2px; font-size: 0.82rem; line-height: 1; cursor: default; flex-shrink: 0; } .lib-idx-btn.lib-idx-retry { cursor: pointer; border-radius: var(--btn-r); } .lib-idx-btn.lib-idx-retry:hover { background: rgba(200, 60, 60, 0.08); } /* Trash button — hidden until row hover */ .lib-cm-del { background: none; border: none; padding: 3px 4px; border-radius: 4px; color: var(--text-3); cursor: pointer; opacity: 0; transition: opacity 0.15s, color 0.15s; flex-shrink: 0; display: flex; align-items: center; } .lib-cm-row:hover .lib-cm-del, .lib-cm-row:focus-within .lib-cm-del, .lib-cm-del:focus-visible { opacity: 1; } .lib-cm-del:hover { color: var(--red, #c0392b); } .lib-stub-msg { margin-left: 98px; font-size: 0.83rem; color: var(--text-3); padding: 6px 10px; background: var(--surface-2); border-radius: var(--r-sm); border: 1px solid var(--border); } /* Direct input */ .lib-direct-input { margin: 4px 0 14px; } .lib-or-divider { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 0.78rem; margin: 0 0 8px; } .lib-or-divider::before, .lib-or-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* Popular chips */ .lib-popular { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; } .lib-popular-label { font-size: 0.78rem; color: var(--text-3); font-weight: 600; } .lib-chip { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; border: 1.5px solid var(--border-2); background: var(--surface-2); color: var(--navy); font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; } .lib-chip:hover { background: var(--navy); color: #fff; border-color: var(--navy); } /* Custom link details */ .lib-add-link { border: 1.5px solid var(--border); border-radius: var(--r-sm); padding: 0; margin-bottom: 10px; background: var(--surface-2); } .lib-add-link summary { padding: 7px 12px; font-size: 0.82rem; color: var(--blue); cursor: pointer; font-weight: 600; user-select: none; } .lib-add-link-form { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px; } .lib-add-link-form input { flex: 1; min-width: 140px; padding: 6px 9px; border: 1.5px solid var(--border-2); border-radius: var(--r-sm); font-size: 0.84rem; background: var(--surface); color: var(--text); } .lib-status-msg { font-size: 0.81rem; color: var(--text-2); padding: 4px 0; } .lib-runtime-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); } .lib-runtime-toggle-help { font-size: 0.78rem; color: var(--text-3); line-height: 1.35; } /* Jurisdiction filter pills */ .lib-jur-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; } .lib-jur-pill { padding: 3px 11px; border-radius: 999px; border: 1.5px solid var(--border-2); background: var(--surface-2); color: var(--text-2); font-size: 0.76rem; font-weight: 600; cursor: pointer; transition: background 0.12s, color 0.12s; } .lib-jur-pill.active, .lib-jur-pill:hover { background: var(--navy); color: #fff; border-color: var(--navy); } /* Multi-jurisdiction notice banner */ .lib-multi-jur-banner { display: flex; align-items: flex-start; gap: 8px; background: var(--blue-bg); border: 1px solid rgba(201, 138, 76,0.18); border-radius: var(--r-sm); padding: 8px 12px; font-size: 0.80rem; color: var(--blue); margin-bottom: 8px; } .lib-multi-jur-banner[hidden] { display: none !important; } .lib-banner-close { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--text-3); font-size: 1rem; padding: 0 2px; line-height: 1; flex-shrink: 0; } /* List header (count + export) */ .lib-list-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .lib-list-header[hidden] { display: none !important; } .lib-loaded-count { font-size: 0.82rem; font-weight: 700; color: var(--text-2); } .lib-export-wrap { position: relative; } .lib-export-btn { background: none; border: 1.5px solid var(--border-2); border-radius: var(--r-sm); padding: 3px 10px; font-size: 0.78rem; color: var(--text-2); cursor: pointer; font-weight: 600; transition: background 0.12s, color 0.12s; } .lib-export-btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); } .lib-export-menu { position: absolute; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1.5px solid var(--border-2); border-radius: var(--r-sm); box-shadow: var(--shadow); z-index: 50; min-width: 80px; overflow: hidden; } .lib-export-menu[hidden] { display: none !important; } .lib-export-menu button { display: block; width: 100%; text-align: left; padding: 7px 12px; font-size: 0.82rem; background: none; border: none; cursor: pointer; color: var(--text); } .lib-export-menu button:hover { background: var(--blue-bg); color: var(--blue); } /* Enhanced document row */ .lib-doc-row { display: flex; flex-direction: column; border-bottom: 1px solid var(--border); padding: 6px 0; transition: background 0.1s; } .lib-doc-row:last-child { border-bottom: none; } .lib-doc-row[hidden] { display: none !important; } .lib-doc-main { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 2px 4px; border-radius: var(--r-sm); transition: background 0.1s; } .lib-doc-main:hover { background: var(--surface-2); } .lib-doc-flag { font-size: 1rem; flex-shrink: 0; width: 20px; text-align: center; } .lib-doc-freshness { font-size: 0.74rem; color: var(--text-3); display: block; } .lib-doc-outdated { color: var(--warn); font-size: 0.72rem; font-weight: 600; margin-left: 4px; } .lib-doc-index-badge { font-size: 0.72rem; margin-left: auto; flex-shrink: 0; cursor: default; } .lib-doc-actions { display: flex; align-items: center; gap: 2px; justify-content: flex-end; padding: 2px 0 0; } .lib-doc-star-btn { background: none; border: none; cursor: pointer; font-size: 0.95rem; padding: 2px 5px; color: var(--text-3); border-radius: var(--r-sm); transition: color 0.12s; line-height: 1; } .lib-doc-star-btn:hover, .lib-doc-star-btn.lib-starred { color: #f59e0b; } .lib-doc-refresh-btn { background: none; border: none; cursor: pointer; font-size: 0.88rem; padding: 2px 5px; color: var(--text-3); border-radius: var(--r-sm); transition: color 0.12s, transform 0.2s; line-height: 1; } .lib-doc-refresh-btn:hover { color: var(--blue); transform: rotate(180deg); } /* Indexing progress waitbar */ .lib-index-progress { height: 3px; border-radius: var(--r); background: linear-gradient(90deg, transparent 0%, var(--blue) 40%, var(--blue-2) 60%, transparent 100%); background-size: 200% 100%; animation: lib-progress-slide 1.4s linear infinite; margin: 2px 4px 0; } .lib-index-progress[hidden] { display: none !important; } @keyframes lib-progress-slide { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* Document detail expand */ .lib-doc-expand { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; margin: 4px 4px 2px; font-size: 0.80rem; } .lib-doc-expand[hidden] { display: none !important; } .lib-detail-dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; } .lib-detail-dl dt { color: var(--text-3); font-weight: 600; white-space: nowrap; } .lib-detail-dl dd { color: var(--text); margin: 0; word-break: break-all; } /* Loader card — gecentreerd en breed genoeg dat volledige wetboeknamen in de keuzelijsten passen zonder af te kappen. */ .lib-loader-card { max-width: 680px; margin-inline: auto; padding: 14px 18px; } /* Flag badge in jurisdiction row */ .lib-jur-flag { font-size: 1.15rem; line-height: 1; flex-shrink: 0; width: 1.5em; text-align: center; user-select: none; } /* Dark mode overrides */ [data-theme="dark"] .lib-cascade select { background: var(--surface); color: var(--text); } [data-theme="dark"] .lib-chip { background: var(--surface); } [data-theme="dark"] .lib-add-link { background: var(--surface); } [data-theme="dark"] .lib-doc-expand { background: var(--surface); } [data-theme="dark"] .lib-export-menu { background: var(--surface); } /* ── Global index top-bar ────────────────────────────────────────────────── */ #index-top-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity 0.25s; background: var(--border); } #index-top-bar.index-top-bar--active { opacity: 1; } #index-top-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--blue) 0%, var(--blue-2) 70%, #D9A070 100%); border-radius: 0 2px 2px 0; } #index-top-eta { position: fixed; top: 6px; right: 12px; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity 0.25s; font-size: 0.66rem; font-weight: 600; color: var(--blue-2); background: var(--surface); border: 1px solid var(--border-2); border-radius: 4px; padding: 1px 6px; letter-spacing: 0.02em; box-shadow: var(--shadow-sm); } /* ── Corpus-manage profile tabs ─────────────────────────────────────────── */ .lib-cm-tabs { display: flex; gap: 4px; padding: 6px 8px 5px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .lib-cm-tab { font-size: 0.73rem !important; font-weight: 600 !important; padding: 3px 9px !important; border-radius: var(--r-sm) !important; border: 1px solid var(--border-2) !important; background: transparent !important; color: var(--text-2) !important; cursor: pointer !important; transition: background 0.12s, color 0.12s, border-color 0.12s !important; white-space: nowrap; box-shadow: none !important; line-height: 1.6 !important; } .lib-cm-tab:hover { background: var(--blue-bg) !important; color: var(--blue) !important; border-color: rgba(201, 138, 76, 0.28) !important; } .lib-cm-tab--active { background: var(--blue-bg) !important; color: var(--blue) !important; border-color: var(--blue) !important; } /* Profile view rows */ .lib-cm-profile-row { display: flex; align-items: center; gap: 8px; padding: 5px 2px; border-bottom: 1px solid var(--border); font-size: 0.82rem; } .lib-cm-profile-row:last-child { border-bottom: none; } .lib-cm-profile-row--missing { opacity: 0.55; } .lib-cm-profile-status { font-size: 0.82rem; flex-shrink: 0; width: 1.5em; text-align: center; line-height: 1; } .lib-cm-profile-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } .lib-cm-load-btn { font-size: 0.74rem !important; padding: 2px 9px !important; flex-shrink: 0; white-space: nowrap; margin-left: auto; box-shadow: none !important; line-height: 1.6 !important; } /* ── Button dark-mode fix ────────────────────────────────────────────────── */ /* Default button uses color:var(--navy) which is #000B0F in dark mode — near-black on a dark surface. Override with readable token colors. */ /* Dark-mode button override — must include ALL :not() exclusions that the base light-mode rule has (plus the [data-theme] attribute selector) so this rule wins the specificity battle against the base rule. Missing any :not() clause reduces specificity and lets the navy-colored base rule win. */ [data-theme="dark"] button[type="submit"], [data-theme="dark"] button[type="button"]:not(.remove-cross):not(.lib-source-tab):not(.corpus-filter-toggle):not(.nav-mode-btn):not(.btn-danger-sm):not(.add-doc-btn):not(.conv-drawer-toggle):not(.ref-drawer-toggle):not(.pinned-drawer-toggle):not(.wm-drawer-toggle):not(.app-modal-btn):not(.home-sidebar-close):not(.approve-trigger-btn):not(.nav-icon-btn):not(.nav-avatar-btn):not(.ask-send-btn):not(.password-modal-close):not(.lib-chip):not(.lib-jur-pill):not(.lib-doc-star-btn):not(.lib-doc-refresh-btn):not(.lib-export-btn):not(.lib-banner-close):not(.lib-bulk-load-btn):not(.lib-cm-del):not(.lib-idx-btn):not(.conv-search-menu-btn):not(.doc-expand-btn):not(.conv-turn-toggle):not(.dossier-tab-btn):not(.dossier-btn):not(.filter-trigger):not(.filter-menu-item):not(.dossier-card-trash):not(.tab-add-trigger):not(.tab-del-btn):not(.doc-del-btn):not(.dossier-sidebar-add-btn):not(.dossier-sidebar-trash-btn):not(.dossier-sidebar-switch-btn):not(.followup-chip) { color: var(--text); border-color: var(--border-2); background: transparent; } [data-theme="dark"] button[type="submit"]:hover, [data-theme="dark"] button[type="button"]:not(.remove-cross):not(.lib-source-tab):not(.corpus-filter-toggle):not(.nav-mode-btn):not(.btn-danger-sm):not(.add-doc-btn):not(.conv-drawer-toggle):not(.ref-drawer-toggle):not(.pinned-drawer-toggle):not(.wm-drawer-toggle):not(.app-modal-btn):not(.home-sidebar-close):not(.approve-trigger-btn):not(.nav-icon-btn):not(.nav-avatar-btn):not(.ask-send-btn):not(.password-modal-close):not(.lib-chip):not(.lib-jur-pill):not(.lib-doc-star-btn):not(.lib-doc-refresh-btn):not(.lib-export-btn):not(.lib-banner-close):not(.lib-bulk-load-btn):not(.lib-cm-del):not(.lib-idx-btn):not(.conv-search-menu-btn):not(.doc-expand-btn):not(.conv-turn-toggle):not(.dossier-tab-btn):not(.dossier-btn):not(.filter-trigger):not(.filter-menu-item):not(.dossier-card-trash):not(.tab-add-trigger):not(.tab-del-btn):not(.doc-del-btn):not(.dossier-sidebar-add-btn):not(.dossier-sidebar-trash-btn):not(.dossier-sidebar-switch-btn):not(.followup-chip):hover { background: rgba(201, 138, 76, 0.14); color: var(--blue-2); border-color: rgba(201, 138, 76, 0.40); box-shadow: none; } /* Dark mode — pricing / subscription cards */ [data-theme="dark"] .pricing-card { border-color: var(--border-2); background: var(--surface); } [data-theme="dark"] .pricing-card:hover { border-color: var(--vf-orange); } [data-theme="dark"] .pricing-card--featured { border-color: var(--vf-orange); background: rgba(42, 47, 54, 0.80); } [data-theme="dark"] .pricing-card__name, [data-theme="dark"] .pricing-card__amount, [data-theme="dark"] .pricing-card__desc strong { color: var(--text); } [data-theme="dark"] .pricing-card__desc, [data-theme="dark"] .pricing-card__period, [data-theme="dark"] .pricing-card__billing-note { color: var(--text-3); } [data-theme="dark"] .pricing-team-label { color: var(--text-2); } [data-theme="dark"] .pricing-card__features li { color: var(--text-2); } [data-theme="dark"] .pricing-card__features li::before { color: var(--vf-orange); } [data-theme="dark"] .pricing-stepper { border-color: var(--border-2); } [data-theme="dark"] .pricing-stepper-btn { background: rgba(42, 47, 54, 0.60); color: var(--text); } [data-theme="dark"] .pricing-stepper-btn:hover { background: rgba(42, 47, 54, 0.90); } [data-theme="dark"] .pricing-stepper-input { background: transparent; border-color: var(--border-2); color: var(--text); } [data-theme="dark"] .pricing-card__btn { background: var(--vf-orange); color: #001117; border: none; } [data-theme="dark"] .pricing-card__btn:hover { background: var(--vf-orange-2); } [data-theme="dark"] .pricing-card__btn--featured { background: var(--vf-orange); } [data-theme="dark"] .pricing-card__btn--featured:hover { background: var(--vf-orange-2); } /* Final dark-menu contrast guard: tokenized, WCAG-aware menu styling for all dropdown/modal menu surfaces and menu-adjacent controls. Keep this near EOF so it consistently wins against older module rules. */ [data-theme="dark"] .nav-dropdown-menu, [data-theme="dark"] .persona-menu, [data-theme="dark"] .conv-search-menu, [data-theme="dark"] .lib-export-menu, [data-theme="dark"] .about-modal-card { background: var(--menu-surface) !important; border-color: var(--menu-border-2) !important; } [data-theme="dark"] .nav-dropdown-about, [data-theme="dark"] .nav-dropdown-mode-label, [data-theme="dark"] .about-modal-links span, [data-theme="dark"] .about-modal-subtitle, [data-theme="dark"] .about-modal-line { color: var(--menu-text-3) !important; } [data-theme="dark"] .nav-dropdown-about-line strong, [data-theme="dark"] .about-modal-card h2 { color: var(--menu-text) !important; } [data-theme="dark"] .nav-dropdown-item, [data-theme="dark"] .nav-dropdown a.nav-dropdown-item, [data-theme="dark"] .persona-option, [data-theme="dark"] .conv-search-menu-option, [data-theme="dark"] .lib-export-menu button { color: var(--menu-text-2) !important; } [data-theme="dark"] .nav-dropdown-item svg, [data-theme="dark"] .nav-dropdown a.nav-dropdown-item svg, [data-theme="dark"] .persona-option svg, [data-theme="dark"] .conv-search-menu-option::before { color: var(--menu-text-3) !important; } [data-theme="dark"] .nav-dropdown-item:hover, [data-theme="dark"] .nav-dropdown a.nav-dropdown-item:hover, [data-theme="dark"] .persona-option:hover, [data-theme="dark"] .conv-search-menu-option:hover, [data-theme="dark"] .lib-export-menu button:hover { background: var(--menu-hover-bg) !important; color: var(--menu-text) !important; } [data-theme="dark"] .nav-dropdown-item:hover svg, [data-theme="dark"] .nav-dropdown a.nav-dropdown-item:hover svg, [data-theme="dark"] .persona-option:hover svg, [data-theme="dark"] .conv-search-menu-option:hover::before { color: var(--menu-text) !important; } [data-theme="dark"] .nav-dropdown .nav-dropdown-item.nav-active, [data-theme="dark"] .nav-dropdown a.nav-dropdown-item.nav-active, [data-theme="dark"] .nav-dropdown .nav-dropdown-item[aria-current="page"], [data-theme="dark"] .nav-dropdown a.nav-dropdown-item[aria-current="page"], [data-theme="dark"] .persona-option--active, [data-theme="dark"] .persona-option[aria-checked="true"], [data-theme="dark"] .conv-search-menu-option--active, [data-theme="dark"] .conv-search-menu-option[aria-checked="true"] { background: var(--menu-active-bg) !important; color: var(--menu-text) !important; box-shadow: inset 0 0 0 1px var(--menu-active-bdr) !important; } [data-theme="dark"] .nav-dropdown .nav-dropdown-item.nav-active svg, [data-theme="dark"] .nav-dropdown a.nav-dropdown-item.nav-active svg, [data-theme="dark"] .nav-dropdown .nav-dropdown-item[aria-current="page"] svg, [data-theme="dark"] .nav-dropdown a.nav-dropdown-item[aria-current="page"] svg, [data-theme="dark"] .persona-option--active svg, [data-theme="dark"] .conv-search-menu-option--active::before, [data-theme="dark"] .conv-search-menu-option[aria-checked="true"]::before { color: var(--menu-text) !important; } [data-theme="dark"] .nav-dropdown-about-line a, [data-theme="dark"] .about-modal-line a, [data-theme="dark"] .about-modal-links a { color: var(--blue-2) !important; border-bottom-color: rgba(201, 138, 76, 0.34) !important; } [data-theme="dark"] .nav-dropdown-about-line a:hover, [data-theme="dark"] .about-modal-line a:hover, [data-theme="dark"] .about-modal-links a:hover { color: var(--menu-text) !important; border-bottom-color: rgba(217, 160, 112, 0.56) !important; } /* Randloos en in rust transparant, gelijk aan het lichte thema; de vulling verschijnt pas bij hover als aanwijsdoel. */ [data-theme="dark"] .about-modal-close { background: transparent !important; color: var(--menu-text-2) !important; border: none !important; } [data-theme="dark"] .about-modal-close:hover { background: var(--menu-hover-bg) !important; color: var(--menu-text) !important; } [data-theme="dark"] .nav-mode-btn { background: rgba(42, 47, 54, 0.78) !important; color: var(--menu-text-2) !important; border-color: var(--menu-border-2) !important; } [data-theme="dark"] .nav-mode-btn:hover:not(:disabled) { background: var(--menu-hover-bg) !important; color: var(--menu-text) !important; border-color: var(--menu-active-bdr) !important; } [data-theme="dark"] button.nav-dropdown-item--logout { color: var(--err) !important; } [data-theme="dark"] button.nav-dropdown-item--logout:hover { background: var(--err-bg) !important; color: var(--err) !important; } [data-theme="dark"] .conv-search-menu-btn, [data-theme="dark"] .dossier-sidebar-switch-btn, [data-theme="dark"] .dossier-sidebar-add-btn, [data-theme="dark"] .dossier-sidebar-trash-btn, [data-theme="dark"] .conv-drawer-toggle, [data-theme="dark"] .ref-drawer-toggle, [data-theme="dark"] .pinned-drawer-toggle { color: var(--menu-text-2) !important; border-color: var(--menu-border-2) !important; } [data-theme="dark"] .conv-drawer-toggle, [data-theme="dark"] .ref-drawer-toggle, [data-theme="dark"] .pinned-drawer-toggle { background: var(--menu-surface) !important; } [data-theme="dark"] .conv-search-menu-btn:hover, [data-theme="dark"] .dossier-sidebar-switch-btn:hover, [data-theme="dark"] .dossier-sidebar-add-btn:hover, [data-theme="dark"] .conv-drawer-toggle:hover, [data-theme="dark"] .ref-drawer-toggle:hover, [data-theme="dark"] .pinned-drawer-toggle:hover { background: var(--menu-hover-bg) !important; color: var(--menu-text) !important; } [data-theme="dark"] .dossier-sidebar-trash-btn:hover { background: var(--err-bg) !important; color: var(--err) !important; } /* ── Trial banner ────────────────────────────────────────────────────────── */ .trial-banner { display: flex; align-items: center; gap: 8px; padding: 10px 18px; font-size: 13px; font-weight: 500; border-radius: 0; border-bottom: 1px solid transparent; } .trial-banner a { font-weight: 600; text-decoration: underline; } .trial-banner--info { background: rgba(201, 138, 76, 0.06); border-color: rgba(201, 138, 76, 0.28); color: #C98A4C; } .trial-banner--info a { color: #C98A4C; } .trial-banner--warning { background: #fffbeb; border-color: #fde68a; color: #92400e; } .trial-banner--warning a { color: #b45309; } .trial-banner--urgent { background: #fef2f2; border-color: #fecaca; color: #991b1b; } .trial-banner--urgent a { color: #b91c1c; } [data-theme="dark"] .trial-banner--info { background: rgba(201, 138, 76,0.18); border-color: rgba(217, 160, 112,0.3); color: #D9A070; } [data-theme="dark"] .trial-banner--warning { background: rgba(146,64,14,0.18); border-color: rgba(253,230,138,0.3); color: #fde68a; } [data-theme="dark"] .trial-banner--urgent { background: rgba(153,27,27,0.18); border-color: rgba(252,165,165,0.3); color: #fca5a5; } /* ── Role badges ─────────────────────────────────────────────────────────── */ .role-badge { display: inline-block; padding: 2px 10px; border-radius: var(--r-sm); font-size: 12px; font-weight: 600; letter-spacing: 0.03em; } .role-badge--admin { background: rgba(201, 138, 76, 0.10); color: #C98A4C; border: 1px solid rgba(201, 138, 76, 0.28); } .role-badge--user { background: #f3f4f6; color: #2A2F36; border: 1px solid #e5e7eb; } [data-theme="dark"] .role-badge--admin { background: rgba(201, 138, 76,0.25); color: #D9A070; border-color: rgba(217, 160, 112,0.3); } [data-theme="dark"] .role-badge--user { background: rgba(75,85,99,0.25); color: #d1d5db; border-color: rgba(209,213,219,0.2); } /* ── Contract info block (settings account card) ────────────────────────── */ .contract-info-block { display: flex; flex-direction: column; gap: 6px; } .contract-info-badges { display: flex; flex-wrap: wrap; gap: 6px; } .contract-info-price { font-size: 13px; color: #2A2F36; font-weight: 500; } .contract-info-expires { font-size: 12px; color: #88929A; } [data-theme="dark"] .contract-info-price { color: #d1d5db; } [data-theme="dark"] .contract-info-expires { color: #9ca3af; } /* ── Status badges (active/suspended) ───────────────────────────────────── */ .status-badge { display: inline-block; padding: 2px 9px; border-radius: var(--r-sm); font-size: 11px; font-weight: 600; } .status-badge--active { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; } .status-badge--suspended { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; } [data-theme="dark"] .status-badge--active { background: rgba(21,128,61,0.2); color: #86efac; border-color: rgba(134,239,172,0.3); } [data-theme="dark"] .status-badge--suspended { background: rgba(185,28,28,0.2); color: #fca5a5; border-color: rgba(252,165,165,0.3); } /* ── Contract badges ─────────────────────────────────────────────────────── */ .contract-badge { display: inline-block; padding: 2px 9px; border-radius: var(--r-sm); font-size: 11px; font-weight: 600; background: #f3f4f6; color: #88929A; border: 1px solid #e5e7eb; } .contract-badge--paid { background: #ede9fe; color: #6d28d9; border-color: #ddd6fe; } [data-theme="dark"] .contract-badge { background: rgba(75,85,99,0.25); color: #9ca3af; border-color: rgba(156,163,175,0.2); } [data-theme="dark"] .contract-badge--paid { background: rgba(109,40,217,0.2); color: #c4b5fd; border-color: rgba(196,181,253,0.3); } /* ── User management table ───────────────────────────────────────────────── */ .settings-section--wide { grid-column: 1 / -1; } .settings-section-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; } .settings-section-header h2 { margin-bottom: 0; } .user-table-wrap { overflow-x: auto; margin-top: 12px; border: 1px solid var(--border-1, #e5e7eb); border-radius: var(--r); } .user-table { width: 100%; border-collapse: collapse; font-size: 13px; } .user-table th { text-align: left; padding: 8px 12px; font-size: 11px; font-weight: 600; color: var(--text-muted, #88929A); background: var(--surface-2, #f9fafb); border-bottom: 1px solid var(--border-1, #e5e7eb); white-space: nowrap; } .user-table td { padding: 8px 12px; border-bottom: 1px solid var(--border-1, #e5e7eb); vertical-align: middle; color: var(--text, #111827); } .user-table tr:last-child td { border-bottom: none; } .user-table tr:hover td { background: var(--surface-2, #f9fafb); } .user-table-loading { text-align: center; color: var(--text-muted, #9ca3af); padding: 20px !important; } .tokens-cell { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 12px; } .actions-cell { white-space: nowrap; } /* ── Action buttons (table) ──────────────────────────────────────────────── */ .btn-action { padding: 3px 10px; border: 1.5px solid var(--border-1, #e5e7eb); border-radius: var(--btn-r); font-size: 12px; font-weight: 600; background: transparent; color: var(--text, #2A2F36); cursor: pointer; transition: background 0.12s, color 0.12s; } .btn-action:hover { background: var(--surface-2, #f3f4f6); } .btn-action--warn { color: #b45309; border-color: #fde68a; } .btn-action--warn:hover { background: #fffbeb; } .btn-action--danger { color: #b91c1c; border-color: #fecaca; } .btn-action--danger:hover { background: #fef2f2; } /* ── Secondary button (small) ────────────────────────────────────────────── */ .btn-secondary--sm { font-size: 12px !important; padding: 5px 12px !important; } /* ── Audit log ───────────────────────────────────────────────────────────── */ .audit-summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; padding: 4px 0 12px; } .audit-summary::-webkit-details-marker { display: none; } .audit-summary::before { content: '▶'; font-size: 10px; color: var(--text-muted, #9ca3af); transition: transform 0.15s; } details[open] .audit-summary::before { transform: rotate(90deg); } .audit-summary-hint { font-size: 12px; color: var(--text-muted, #9ca3af); margin-left: 4px; } .audit-table-wrap { margin-top: 8px; overflow-x: auto; border: 1px solid var(--border-1, #e5e7eb); border-radius: var(--r); } @media (max-width: 760px) { .settings-section-header { align-items: flex-start; } .settings-section-header .btn-secondary--sm { width: 100%; text-align: center; justify-content: center; } .user-table-wrap, .audit-table-wrap { overflow: visible; border: none; background: transparent; margin-top: 10px; } .user-table, .user-table thead, .user-table tbody, .user-table tr, .user-table th, .user-table td { display: block; width: 100%; } .user-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .user-table tbody { display: flex; flex-direction: column; gap: 10px; } .user-table tr { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-sm); padding: 10px 12px; } .user-table td { border: none; border-bottom: 1px dashed var(--border); padding: 7px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; font-size: 12px; white-space: normal; } .user-table td:last-child { border-bottom: none; padding-bottom: 0; } .user-table td::before { content: attr(data-label); flex: 0 0 42%; max-width: 42%; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); line-height: 1.45; padding-top: 1px; } .user-table-loading { justify-content: center !important; text-align: center; padding: 12px 4px !important; border-bottom: none !important; } .user-table-loading::before { content: none !important; } .tokens-cell { white-space: normal; text-align: right; } .actions-cell { display: flex; flex-direction: column; align-items: stretch; gap: 6px; } .actions-cell::before { max-width: 100%; flex-basis: auto; margin-bottom: 2px; } .actions-cell .btn-action { width: 100%; text-align: center; } } @media (min-width: 761px) and (max-width: 980px) { .settings-section-header { gap: 6px; } .settings-section-header h2 { font-size: 0.96rem; } .settings-section-header .btn-secondary--sm { font-size: 11px !important; padding: 4px 10px !important; } .user-table { font-size: 12px; } .user-table th { font-size: 10px; padding: 7px 8px; } .user-table td { padding: 7px 8px; } .tokens-cell { font-size: 11px; } .actions-cell { white-space: normal; } .actions-cell .btn-action { font-size: 11px; padding: 3px 8px; margin: 2px 2px 0 0; } } /* ── Admin documentation page ─────────────────────────────────────────────── */ .admin-docs-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .admin-docs-tab { display: inline-block; padding: 6px 14px; border: 1px solid var(--border, #d5d0c8); border-radius: var(--r-sm); font-size: 0.85rem; font-weight: 600; text-decoration: none; color: var(--text, #2b2b2b); background: transparent; } .admin-docs-tab--active { background: var(--accent, #20608c); border-color: var(--accent, #20608c); color: #fff; } .admin-docs-content { line-height: 1.65; font-size: 0.93rem; overflow-wrap: break-word; } .admin-docs-content h1 { font-size: 1.5rem; margin: 0 0 14px; } .admin-docs-content h2 { font-size: 1.2rem; margin: 28px 0 10px; padding-top: 14px; border-top: 1px solid var(--border, #e2ddd4); } .admin-docs-content h3 { font-size: 1.02rem; margin: 20px 0 8px; } .admin-docs-content h4 { font-size: 0.95rem; margin: 16px 0 6px; } .admin-docs-content p, .admin-docs-content ul, .admin-docs-content ol { margin: 0 0 10px; } .admin-docs-content li { margin: 3px 0; } .admin-docs-content code { background: rgba(120, 110, 90, 0.10); border-radius: var(--r-sm); padding: 1px 5px; font-size: 0.85em; } .admin-docs-content pre { background: rgba(120, 110, 90, 0.08); border: 1px solid var(--border, #e2ddd4); border-radius: var(--r-sm); padding: 12px 14px; overflow-x: auto; font-size: 0.82rem; line-height: 1.5; } .admin-docs-content pre code { background: none; padding: 0; } .admin-docs-content table { border-collapse: collapse; width: 100%; margin: 10px 0 16px; font-size: 0.86rem; display: block; overflow-x: auto; } .admin-docs-content th, .admin-docs-content td { border: 1px solid var(--border, #d5d0c8); padding: 6px 10px; text-align: left; vertical-align: top; } .admin-docs-content th { background: rgba(120, 110, 90, 0.08); font-weight: 700; } .admin-docs-content blockquote { border-left: 3px solid var(--accent, #20608c); margin: 10px 0; padding: 4px 14px; opacity: 0.9; } .admin-docs-content hr { border: none; border-top: 1px solid var(--border, #e2ddd4); margin: 22px 0; } [data-theme="dark"] .admin-docs-content code, [data-theme="dark"] .admin-docs-content pre, [data-theme="dark"] .admin-docs-content th { background: rgba(255, 255, 255, 0.07); }