@import url("./liquid-surfaces.css");

/* IBM Plex Sans voor de interface en Geist Mono voor code, allebei zelf
   gehost: niets gaat naar Google. */
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/ibm-plex-sans/ibm-plex-sans-latin-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/ibm-plex-sans/ibm-plex-sans-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/ibm-plex-sans/ibm-plex-sans-latin-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/ibm-plex-sans/ibm-plex-sans-latin-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/ibm-plex-sans/ibm-plex-sans-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('../fonts/geist/geist-mono-latin.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; }

/* Console only. The portfolio keeps the shared stylesheet and original assets. */
body.console-brand {
  --color-void: #0A0D12;
  --color-base: #10151c;
  --color-surface: #171e27;
  --color-steel: #252e39;
  --color-border: #2b3541;
  --color-border-light: #45515e;
  --color-muted: #8B949E;
  --color-secondary: #aab3bd;
  --color-text: #e9edf2;
  --color-white: #FFFFFF;
  --color-accent: #0066FF;
  --color-accent-text: #9AB8E2;
  --color-accent-dim: #0052cc;
  --border: 1px solid #2b3541;
  --border-light: 1px solid #45515e;
  --border-accent: 1px solid #0066FF;
  --font-display: 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
  /* Labels, tellers en klokken gebruiken --font-mono; in de console zijn dat
     gewone woorden, dus sans met cijfers van gelijke breedte. Echte code
     krijgt Geist Mono via code/pre/kbd hieronder. */
  --font-mono: 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
  /* Vaste stappen: 12 · 13 · 14, daarboven de rem-maten uit main.css
     (16 · 18 · 20 · 24) nu rem hieronder op 16px vastligt. */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --radius: 4px;
  --radius-sm: 4px;
  --console-control-height: 44px;
  background: var(--color-void);
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.console-brand .sidebar__brand { padding: 22px 18px; }
body.console-brand .sidebar__brand-logo { width: 204px; max-width: 100%; height: auto; }
body.console-brand .topbar__brand-logo { width: 204px; height: auto; max-width: 64vw; }
body.console-brand .login-brand__logo { width: 230px; max-width: 100%; height: auto; }
body.console-brand .page-header__title { font-weight: 700; letter-spacing: -.025em; text-transform: none; }
body.console-brand .panel__title { font-weight: 700; letter-spacing: .01em; text-transform: none; }
body.console-brand :is(.btn, .nav-link, .input, .login-heading) { letter-spacing: .01em; }
body.console-brand :is(.btn--primary, .quick-add-fab, .timer-start-btn) { color: #fff; }
body.console-brand .btn--primary:hover { background: #0052cc; color: #fff; }
body.console-brand :is(a.text-accent, .page-header__meta a, .sidebar__nav-link--active, .nav-link--active) { color: var(--color-accent-text); }
body.console-brand .login-page::after { background: radial-gradient(ellipse at center, transparent, #0A0D12); }
body.console-brand :is(input, select, textarea, button):focus-visible { outline: 2px solid #70a9ff; outline-offset: 3px; }
body.console-brand small { line-height: 1.5; }

/* Shared interface surfaces, including dialogs mounted outside the app shell. */
body.console-brand { accent-color: #0066FF; color-scheme: dark; }
body.console-brand :is(h1, h2, h3, h4, button, input, select, textarea) { font-family: var(--font-body); }
body.console-brand :is(h1, h2, h3, h4) { font-weight: 700; }
body.console-brand :is(code, pre, kbd) { font-family: 'Geist Mono', Consolas, monospace; }

/* Zinsletters in de hele console. Ruim negentig regels (en inline stijlen)
   zetten labels in kapitalen met brede letterafstand; dat leest als een muur
   van schreeuwende tekst. De afstand hoort bij de kapitalen, dus die gaat mee
   terug. Alleen de grote koppen houden hun eigen, strakkere afstand. */
body.console-brand *:not(kbd) { text-transform: none !important; }
body.console-brand :not(.page-header__title, .panel__title) { letter-spacing: normal !important; }
body.console-brand :is(.sidebar, .topbar) { background: #0A0D12; }
body.console-brand :is(.panel, .stat-card, .login-card, .kanban-card) { border-color: #2b3541; border-radius: 6px; }
body.console-brand :is(.panel__header, .table thead, .data-table thead) { background: #10151c; }
body.console-brand :is(.input, .feedback-dialog input):focus { background: #10151c; border-color: var(--color-accent-text); }
body.console-brand .btn { font-weight: 600; text-transform: none; }
body.console-brand .nav-link { text-transform: none; font-size: 13px; letter-spacing: 0; }
body.console-brand .nav-link.is-active { color: var(--color-accent-text); border-left-color: #0066FF; }
body.console-brand :is(.sidebar__nav-label, .nav-group__summary) { letter-spacing: .06em; }
body.console-brand :is(.badge--active, .text-accent, .panel__action, .page-header__title em) { color: var(--color-accent-text); }
body.console-brand :is(.stat-card__value, .timer-display, .td-mono) { font-variant-numeric: tabular-nums; }
body.console-brand :is(.feedback-dialog, .feedback-toast, .nav-palette__dialog, .timer-modal) { background: #171e27; border: 1px solid #45515e; border-radius: 8px; }
body.console-brand .feedback-dialog__icon { background: #0066FF12; border-color: #0066FF40; color: var(--color-accent-text); }
body.console-brand .feedback-dialog__eyebrow { color: #8B949E; }
body.console-brand .feedback-button--accept { background: #0066FF; border-color: #0066FF; color: #fff; }
body.console-brand .feedback-button--accept:hover { background: #0052cc; }
body.console-brand :is(.feedback-dialog, .feedback-toast) :focus-visible { outline-color: #70a9ff; }
body.console-brand .error-brand { width: 220px; height: auto; margin-bottom: 32px; }
body.console-brand .invoice-pay { background: #f3f6fa; border-color: #d8e0eb; border-left-color: #0066FF; font-family: Arial, sans-serif; }
body.console-brand .invoice-pay__eyebrow { color: #0066FF; }
body.console-brand .invoice-pay__button { background: #0066FF; color: #fff; }
body.console-brand .invoice-pay__button:hover { background: #0052cc; }
@media (max-width: 640px) {
  body.console-brand .page-header__title { font-size: clamp(24px, 7vw, 30px); }
  body.console-brand .topbar { min-height: 64px; }
}

/* Existing main components, scoped to the console. */
body.console-brand .btn--primary { color: #fff; }
body.console-brand .badge--active { background: rgba(0, 102, 255, 0.08); }
/* Existing dashboard components, scoped to the console. */
body.console-brand .admin-page-loader { background: radial-gradient(circle at 50% 46%, rgba(0, 102, 255, 0.08), transparent 25%),
    var(--color-void); }
body.console-brand .nav-group__items .nav-link.is-active::before { color: #fff; }
body.console-brand .nav-link.is-active { background: rgba(0, 102, 255, 0.06); }
body.console-brand .nav-link__badge { background: rgba(0, 102, 255, 0.12); border: 1px solid rgba(0, 102, 255, 0.2); }
body.console-brand .sidebar__user-info:hover,
body.console-brand .sidebar__user-info:focus-visible,
body.console-brand .sidebar__user-info.is-active { background: rgba(0, 102, 255,.06); }
body.console-brand .page-header__meta::before { color: #fff; }
body.console-brand .stat-card--accent::before { color: #fff; }
body.console-brand .panel__title-marker { color: #fff; }
body.console-brand .activity-item__indicator--active { background: rgba(0, 102, 255, 0.3); }
body.console-brand .alert--success { background: rgba(0, 102, 255, 0.08); }
body.console-brand .timer-banner__dot { box-shadow: 0 0 0 3px rgba(0, 102, 255,.2); color: #fff; }
body.console-brand .timer-dot { box-shadow: 0 0 0 3px rgba(0, 102, 255,.2); color: #fff; }
body.console-brand .panel--accent { border-color: rgba(0, 102, 255,.3); background: rgba(0, 102, 255,.03); }
body.console-brand .btn-start-timer { color: #fff; }
body.console-brand .btn-start-timer:hover { box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.2); }
body.console-brand .alert--success { background: rgba(0, 102, 255,.07); }
body.console-brand .quick-add-fab { box-shadow: 0 4px 16px rgba(0, 102, 255,.35); color: #fff; }
body.console-brand .quick-add-fab:hover { box-shadow: 0 6px 24px rgba(0, 102, 255,.5); }
body.console-brand .dashboard-command--primary { border-color: rgba(0, 102, 255, .45); background: rgba(0, 102, 255, .065); }
body.console-brand .dashboard-timer { background: linear-gradient(90deg, rgba(0, 102, 255, .075), transparent 55%),
    var(--color-base); }
body.console-brand .dashboard-signal--accent .dashboard-signal__icon { border-color: rgba(0, 102, 255, .4); background: rgba(0, 102, 255, .06); }
body.console-brand .dashboard-project-row__progress i { color: #fff; }
body.console-brand .dashboard-activity-item i { color: #fff; }
body.console-brand .dashboard-monitor-row__state--warning { color: #fff; }
body.console-brand .subnav__badge { background: rgba(0, 102, 255, 0.12); border: 1px solid rgba(0, 102, 255, 0.2); }
body.console-brand .nav-palette__item.is-selected { background: rgba(0, 102, 255, 0.08); }
body.console-brand .dashboard-critical__item--high .dashboard-critical__badge { background: rgba(0, 102, 255, .16); color: var(--color-accent-text); }
body.console-brand .dashboard-mail-item.is-unread .dashboard-mail-item__from::before { color: #fff; }
/* Existing kanban components, scoped to the console. */
body.console-brand .kanban-col.drag-over { background: rgba(0, 102, 255, 0.03); }
body.console-brand .kanban-col[data-status="in_progress"] .kanban-col__indicator { box-shadow: 0 0 0 2px rgba(0, 102, 255,0.2); color: #fff; }
body.console-brand .kanban-drop-target { background: rgba(0, 102, 255,0.04); }
body.console-brand .kanban-card__shared { border: 1px solid rgba(0, 102, 255, .35); background: rgba(0, 102, 255, .06); }
body.console-brand .task-share-toggle { background: rgba(0, 102, 255, .035); }
body.console-brand .task-share-toggle input:checked + .task-share-toggle__control { background: rgba(0, 102, 255,.08); }
body.console-brand .task-share-toggle input:checked + .task-share-toggle__control::after { color: #fff; }
body.console-brand .kanban-card__deadline--soon { background: rgba(0, 102, 255,0.12); }
body.console-brand .subtasks-bar__fill { color: #fff; }
body.console-brand .subtask-item__check.is-done { color: #fff; }
body.console-brand .view-tabs__item.is-active { background: rgba(0, 102, 255, .1); }
body.console-brand .kanban-card__priority--high { background: rgba(0, 102, 255, .16); }
/* Existing mail components, scoped to the console. */
body.console-brand .mailbox__thread.is-unread .mailbox__thread-from::before { color: #fff; }
body.console-brand .mail-notice { background: rgba(0, 102, 255, .08); }
/* Existing notifications components, scoped to the console. */
body.console-brand .notif-row.is-unread { background: rgba(0, 102, 255, .03); }
/* Existing monitoring components, scoped to the console. */
body.console-brand .monitor-stat--warn strong { color: var(--color-accent-text); }
body.console-brand .status-dot--warning { background: #0066FF; color: #fff; }
body.console-brand .status-pill--warning { border-color: rgba(0, 102, 255, .45); color: var(--color-accent-text); }
body.console-brand .monitor-btn--primary { color: #fff; }
body.console-brand .monitor-alert { background: rgba(0, 102, 255, .06); }
body.console-brand .log-level--warning { color: var(--color-accent-text); }
body.console-brand .incident-card { border-left: 3px solid #0066FF; }
body.console-brand .uptime-strip__tick--warning { background: #0066FF; color: #fff; }
body.console-brand .uptime-bar__fill--warn { background: #0066FF; color: #fff; }
body.console-brand .report-range a.is-active { background: rgba(0, 102, 255, .1); }
/* Existing documents components, scoped to the console. */
body.console-brand .document-notice { border: 1px solid rgba(0, 102, 255,.45); background: rgba(0, 102, 255,.07); }
body.console-brand .document-pane-title > strong { border: 1px solid rgba(0, 102, 255,.35); }
body.console-brand .document-list-item.is-active { background: rgba(0, 102, 255,.055); }
body.console-brand .document-list-item.is-active::before { color: #fff; }
body.console-brand .document-list-progress i { color: #fff; }
body.console-brand .documents-empty { background: linear-gradient(135deg,rgba(0, 102, 255,.035),transparent); }
/* Existing monteurflow components, scoped to the console. */
body.console-brand .mf-health-pill { border: 1px solid rgba(0, 102, 255, .28); background: rgba(0, 102, 255, .07); }
body.console-brand .mf-health-pill > span { box-shadow: 0 0 0 4px rgba(0, 102, 255, .11); color: #fff; }
body.console-brand .mf-stat { background: radial-gradient(circle at 100% 0, rgba(0, 102, 255, .07), transparent 45%),
    var(--color-base); }
body.console-brand .mf-stat__icon { background: rgba(0, 102, 255, .09); border: 1px solid rgba(0, 102, 255, .16); }
body.console-brand .mf-operation-card--recommended { background: linear-gradient(135deg, rgba(0, 102, 255, .075), transparent 56%),
    rgba(255, 255, 255, .018); border-color: rgba(0, 102, 255, .24); }
body.console-brand .mf-operation-card__step { background: rgba(0, 102, 255, .1); border: 1px solid rgba(0, 102, 255, .2); }
body.console-brand .mf-form-panel__intro { background: linear-gradient(115deg, rgba(0, 102, 255, .08), transparent 48%),
    var(--color-surface); }
body.console-brand .mf-form-panel__icon { background: rgba(0, 102, 255, .1); border: 1px solid rgba(0, 102, 255, .2); }
body.console-brand .mf-avatar { background: rgba(0, 102, 255, .09); border: 1px solid rgba(0, 102, 255, .18); }
body.console-brand .mf-status--active > span { box-shadow: 0 0 0 3px rgba(0, 102, 255, .09); color: #fff; }
body.console-brand .mf-empty__icon,
body.console-brand .mf-unavailable__icon { background: rgba(0, 102, 255, .08); border: 1px solid rgba(0, 102, 255, .16); }
/* Existing leef components, scoped to the console. */
body.console-brand .leef-alert { background: rgba(0, 102, 255, 0.08); }
body.console-brand .leef-token { border: 1px solid rgba(0, 102, 255, 0.35); background: rgba(0, 102, 255, 0.06); }
body.console-brand .leef-published__row.is-active { border-color: rgba(0, 102, 255, 0.45); }

/* Soft blue for text on dark surfaces; saturated blue stays on actions and marks. */
body.console-brand .text-accent,
body.console-brand .badge--active,
body.console-brand .sidebar__brand-name em,
body.console-brand .nav-link.is-active,
body.console-brand .nav-link__badge,
body.console-brand .sidebar__user-info:hover .sidebar__user-chevron,
body.console-brand .sidebar__user-info.is-active .sidebar__user-chevron,
body.console-brand .sidebar__user-avatar,
body.console-brand .page-header__meta,
body.console-brand .page-header__title em,
body.console-brand .system-clock,
body.console-brand .stat-card__delta--up,
body.console-brand .mcp-guide__step,
body.console-brand .alert--success,
body.console-brand .table-link,
body.console-brand .task-status-btn:hover,
body.console-brand .cred-reveal-btn:hover,
body.console-brand .timer-modal__icon,
body.console-brand .activity-feed__icon,
body.console-brand .qa-modal__title,
body.console-brand .qa-tab--active,
body.console-brand .dashboard-hero__quote cite,
body.console-brand .dashboard-command svg,
body.console-brand .dashboard-kpi--accent > strong,
body.console-brand .dashboard-chart-empty__icon,
body.console-brand .dashboard-signal--accent .dashboard-signal__icon,
body.console-brand .dashboard-signal:hover > i,
body.console-brand .dashboard-project-row:hover .dashboard-project-row__arrow,
body.console-brand .dashboard-time-row__hours,
body.console-brand .dashboard-monitor-chip.is-warning strong,
body.console-brand .dashboard-monitor-row:hover .dashboard-monitor-row__arrow,
body.console-brand .subnav__link.is-active,
body.console-brand .subnav__badge,
body.console-brand .nav-palette__item mark,
body.console-brand .card-edit__url code,
body.console-brand .card-edit__group legend,
body.console-brand .card-edit__inbox a,
body.console-brand .card-edit__inbox strong,
body.console-brand .card-edit__subtitle,
body.console-brand .card-edit__message footer a,
body.console-brand .msg--unread .msg__title,
body.console-brand .msg__meta a:hover,
body.console-brand .msg__source--kaart,
body.console-brand .invoice-task-link,
body.console-brand .manual-line__total,
body.console-brand .dashboard-board-more:hover,
body.console-brand .login-brand__wordmark span,
body.console-brand .kanban-col__add-btn:hover,
body.console-brand .kanban-col__collapse:hover,
body.console-brand .kanban-card__shared,
body.console-brand .kanban-card__move-btn:not(:disabled):active,
body.console-brand .kanban-card__deadline--soon,
body.console-brand .board-switcher__add:hover,
body.console-brand .view-tabs__item.is-active,
body.console-brand .kanban-card__priority--high,
body.console-brand .kanban-card__title a:hover,
body.console-brand .kanban-table .kanban-card__deadline--soon,
body.console-brand .timeline__label a:hover,
body.console-brand .md-task__box,
body.console-brand .md-link,
body.console-brand .mail-link-list__subject:hover,
body.console-brand .mailbox__tag--client,
body.console-brand .mail-message__body a,
body.console-brand .mail-attachment:hover,
body.console-brand .notif__bell:hover,
body.console-brand .notif__bell[aria-expanded="true"],
body.console-brand .notif__panel-title,
body.console-brand .notif__panel-action:hover,
body.console-brand .notif__panel-footer a,
body.console-brand .notif-status--warn,
body.console-brand .notif-matrix__group td,
body.console-brand .monitor-btn:hover,
body.console-brand .detail-tabs .is-active,
body.console-brand code,
body.console-brand .report-range a:hover,
body.console-brand .report-range a.is-active,
body.console-brand .documents-header .page-header__meta a,
body.console-brand .document-pane-title > strong,
body.console-brand .document-list-item__type,
body.console-brand .extraction-status--complete,
body.console-brand .feedback-page,
body.console-brand .feedback-task-link,
body.console-brand .feedback-card__controls button,
body.console-brand .feedback-create-task button,
body.console-brand .documents-empty__icon,
body.console-brand .document-eyebrow,
body.console-brand .document-input-tabs button.is-active,
body.console-brand .gmail-unsubscribe__result--success,
body.console-brand .gmail-unsubscribe__result--dry_run,
body.console-brand .gmail-unsubscribe__steps code,
body.console-brand .mf-stat__icon,
body.console-brand .mf-operation-card__step,
body.console-brand .mf-operation-card__label,
body.console-brand .mf-form-panel__icon,
body.console-brand .mf-eyebrow,
body.console-brand .mf-avatar,
body.console-brand .mf-status--active,
body.console-brand .mf-action-link:hover,
body.console-brand .mf-empty__icon,
body.console-brand .mf-unavailable__icon,
body.console-brand .leef-alert,
body.console-brand .leef-device-stat__value.is-live,
body.console-brand .leef-token__label,
body.console-brand .leef-item__meta,
body.console-brand .leef-icon-btn:hover,
body.console-brand .leef-published__row.is-active { color: var(--color-accent-text); }

/* Readable form controls across full forms, compact toolbars and dialogs. */
body.console-brand :is(
  input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="reset"], [type="button"], [type="image"]),
  select,
  textarea,
  div.input
) {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  min-height: var(--console-control-height);
  padding: 8px 12px;
  background-color: #10151c;
  border: 1px solid #60748a;
  border-radius: 6px;
  color: var(--color-text);
  /* Even groot als tabeltekst en knoppen; touch krijgt 16px (zie onderaan). */
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
}
body.console-brand :is(input, textarea)::placeholder {
  color: #9ba8b9;
  opacity: 1;
}
body.console-brand :is(input, select, textarea):not(:disabled):hover { border-color: #8b9db2; }
body.console-brand :is(input, select, textarea):focus-visible {
  border-color: var(--color-accent-text);
  outline: 2px solid var(--color-accent-text);
  outline-offset: 2px;
}
body.console-brand :is(input, select, textarea):disabled {
  color: #9ba8b9;
  background-color: #171e27;
  border-color: #45515e;
  cursor: not-allowed;
  opacity: 1;
}
body.console-brand :is(input, textarea)[readonly] {
  background-color: #171e27;
  color: var(--color-secondary);
}
body.console-brand :is(input, select, textarea):is(.input--error, [aria-invalid="true"]) {
  border-color: #ff9c8f;
  outline-color: #ff9c8f;
}
/* One quiet chevron instead of the platform arrow, which differs per browser. */
body.console-brand select:not([multiple]):not([size]) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%239ba8b9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.console-brand select:enabled { cursor: pointer; }
/* Dense surfaces (toolbars, filter bars, settings rows) get a 36px control; full
   forms keep 44px so a select lines up with the text field beside it. */
body.console-brand :is(
  .kanban-toolbar, .board-columns__row, .board-properties__row, .board-properties__new,
  .mail-thread__actions, .mail-task-picker, .dashboard-workspace-actions,
  .monitor-toolbar, .monitor-actions, .notif-filters, form.filters, .feedback-card__controls,
  .feedback-create-task, .invoice-task-picker, .card-edit__row
) :is(select, input[type="search"], input[type="text"], input[type="number"], input[type="date"], input[type="url"]) {
  min-height: 36px;
  height: 36px;
  padding-top: 6px;
  padding-bottom: 6px;
  border-color: #45515e;
  font-family: var(--font-body);
  font-size: var(--text-sm);
}
body.console-brand :is(
  .kanban-toolbar, .board-columns__row, .board-properties__row, .board-properties__new,
  .mail-thread__actions, .mail-task-picker, .dashboard-workspace-actions,
  .monitor-toolbar, .monitor-actions, .notif-filters, form.filters, .feedback-card__controls,
  .feedback-create-task, .invoice-task-picker, .card-edit__row
) select:not([multiple]):not([size]) {
  padding-left: 10px;
  padding-right: 30px;
  background-position: right 8px center;
  background-size: 12px;
}
body.console-brand select option { background: #10151c; color: var(--color-text); }
body.console-brand :is(textarea, textarea.input) { min-height: 112px; resize: vertical; }
body.console-brand :is(input[type="checkbox"], input[type="radio"]) {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
body.console-brand input[type="color"] { min-width: 44px; height: 44px; padding: 4px; }
body.console-brand input[type="file"] { max-width: 100%; font-size: var(--text-sm); }
body.console-brand input[type="file"]::file-selector-button {
  margin-right: 12px;
  min-height: 40px;
  padding: 8px 12px;
  background: #252e39;
  border: 1px solid #60748a;
  border-radius: 6px;
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}
body.console-brand :is(.field-group, .form-row, .dashboard-board-picker) { min-width: 0; }
body.console-brand .label {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--color-secondary);
}
body.console-brand small { font-size: var(--text-sm); line-height: 1.5; }
body.console-brand .field-group small { margin-top: 6px; overflow-wrap: anywhere; }
body.console-brand :is(.btn, .login-submit .btn--primary, .login-passkey .btn) {
  font-size: var(--text-sm);
  line-height: 1.4;
  letter-spacing: .01em;
}
body.console-brand .panel__title { font-size: var(--text-lg); line-height: 1.35; }
body.console-brand .panel__header { flex-wrap: wrap; gap: 12px; }
body.console-brand .panel__header > * { min-width: 0; }
body.console-brand .data-table { font-size: var(--text-base); }
body.console-brand .data-table th { font-size: var(--text-xs); line-height: 1.5; letter-spacing: .04em; }
body.console-brand :is(
  .sidebar__user-role, .project-card__stat-label, .task-group__count,
  .system-clock-zone, .system-clock-zone__label, .dashboard-system-state,
  .dashboard-kpi__eyebrow, .dashboard-kpi > span:last-child,
  .dashboard-panel-total span, .dashboard-chart-summary span,
  .dashboard-activity-item time, .subnav__badge, .msg__source, .detail-tabs__count
) { font-size: var(--text-xs); line-height: 1.5; letter-spacing: .04em; }
body.console-brand :is(
  .dashboard-panel-subtitle, .dashboard-empty-state p,
  .dashboard-activity-item span, .dashboard-monitor-chip span,
  .dashboard-monitor-row time
) { font-size: var(--text-sm); line-height: 1.5; }
body.console-brand .dashboard-command small { white-space: normal; }
body.console-brand .dashboard-workspace-actions { flex-wrap: wrap; min-width: 0; }

/* Action links and buttons share the same dimensions, including compact
   variants used beside full-size inputs and inside table rows. */
body.console-brand :is(
  .btn, .panel__action, .monitor-btn, .plug-btn, .feedback-button,
  .btn-start-timer, .leef-icon-btn, .cred-reveal-btn, .task-status-btn,
  .board-switcher__add, .notif__panel-action, .mf-action-link,
  .feedback-card__controls button, .feedback-create-task button
) {
  box-sizing: border-box;
  min-height: var(--console-control-height);
  height: auto;
  max-width: 100%;
  padding: 8px 14px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  vertical-align: middle;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .01em;
  text-transform: none;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
}
body.console-brand :is(
  .btn, .panel__action, .monitor-btn, .plug-btn, .feedback-button,
  .btn-start-timer, .leef-icon-btn, .cred-reveal-btn, .task-status-btn,
  .board-switcher__add, .notif__panel-action, .mf-action-link,
  .feedback-card__controls button, .feedback-create-task button
):not([hidden]) { display: inline-flex; }
body.console-brand :is(.btn, .panel__action, .monitor-btn, .plug-btn, .btn-start-timer) > svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
body.console-brand .plug-btn:not(.plug-btn--ghost) { color: #fff; }
body.console-brand .leef-icon-btn { flex-basis: auto; }
body.console-brand .kanban-card__move-btn { min-height: var(--console-control-height); }
/* Action bars with many small buttons: compact, matching the 36px dense selects. */
body.console-brand .kanban-toolbar .kanban-toolbar__search { max-width: 380px; }
/* Deleting a conversation is frequent: a full-size, clearly red target. */
body.console-brand .mail-thread__actions .mail-thread__delete {
  min-height: var(--console-control-height);
  padding: 10px 18px;
  font-size: max(14px, .875rem);
}
body.console-brand :is(
  .kanban-toolbar, .board-columns__row, .board-properties__row, .board-properties__new,
  .mail-thread__actions, .mail-task-picker, .dashboard-workspace-actions,
  .monitor-toolbar, .monitor-actions, .notif-filters, form.filters, .feedback-card__controls,
  .feedback-create-task, .invoice-task-picker, .card-edit__row
) .btn {
  min-height: 36px;
  padding: 6px 12px;
}

/* Wrapped actions keep a common baseline, also when a button sits in a form. */
body.console-brand :is(
  .page-header__actions, .form-actions, .table-actions, .monitor-actions,
  .dashboard-workspace-actions, .dashboard-board-picker, .mail-thread__actions,
  .mail-reply__actions, .document-viewer__actions, .timer-modal__actions,
  .qa-form-actions, .task-modal__footer-actions, .feedback-dialog__actions,
  .leef-page-actions, .leef-form-actions, .gmail-unsubscribe__actions
) {
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
body.console-brand :is(
  .page-header__actions, .form-actions, .table-actions, .monitor-actions,
  .mail-thread__actions, .document-viewer__actions
) > form {
  margin: 0;
  min-width: 0;
  max-width: 100%;
}
body.console-brand :is(.task-modal__footer, .kanban-toolbar, .monitor-toolbar) { flex-wrap: wrap; gap: 12px; }
body.console-brand :is(.monitor-toolbar, .notif-filters) { align-items: flex-end; }
body.console-brand .dashboard-board-picker { flex: 1 1 auto; }
body.console-brand .dashboard-board-picker .input { flex: 1 1 120px; }
body.console-brand :is(.subtask-add-row, .passkey__rename) { align-items: center; gap: 8px; }
body.console-brand .feedback-card__controls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: center; }
body.console-brand .feedback-card__controls label { min-height: 36px; font-size: var(--text-sm); }
body.console-brand .feedback-create-task { gap: 8px; align-items: center; }

/* Tabs remain a distinct control, with the same text alignment and hit area. */
body.console-brand :is(.view-tabs, .document-input-tabs) { flex-wrap: wrap; }
body.console-brand :is(.view-tabs__item, .board-switcher__item, .qa-tab, .detail-tabs button, .detail-tabs a, .document-input-tabs button, .report-range a) {
  min-height: var(--console-control-height);
  padding: 8px 14px;
  font-size: var(--text-sm);
  line-height: 1.4;
  text-transform: none;
  letter-spacing: .01em;
  text-align: center;
}
body.console-brand :is(.view-tabs__item, .board-switcher__item, .qa-tab, .detail-tabs button, .detail-tabs a, .document-input-tabs button, .report-range a):not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Icon controls stay square; header and form controls use the full 44px size. */
body.console-brand :is(.notif__bell, .mobile-menu-btn, .task-modal__close, .timer-modal__close, .qa-modal__close, .document-dialog__close button, .card-edit__row-clear) {
  width: var(--console-control-height);
  height: var(--console-control-height);
  min-width: var(--console-control-height);
  padding: 0;
  flex-shrink: 0;
  line-height: 1;
}
body.console-brand :is(.task-modal__close, .timer-modal__close, .qa-modal__close, .document-dialog__close button, .card-edit__row-clear):not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.console-brand :is(.kanban-col__add-btn, .kanban-col__collapse, .task-delete-btn, .subtask-item__delete, .comment__delete, .feedback-delete button) {
  min-width: 32px;
  min-height: 32px;
  padding: 4px;
  line-height: 1;
  flex-shrink: 0;
}
body.console-brand .feedback-card__top { padding-right: 32px; }
body.console-brand .document-dialog__head { padding-right: 68px; }
body.console-brand :is(.manual-line__remove, .manual-line__total) { height: var(--console-control-height); min-height: var(--console-control-height); }
body.console-brand :is(button, .btn, .panel__action, .monitor-btn, .plug-btn)[hidden] { display: none; }

/* Schermvergrendeling: dezelfde screensaver, met de blauwe gloed van Aethium. */
body.console-brand .screen-lock { --lock-glow: 0, 102, 255; }
body.console-brand .screen-lock__hint { letter-spacing: .12em; }

@media (max-width: 560px) {
  body.console-brand :is(.page-header__actions, .form-actions) > form { flex: 1 1 auto; }
  body.console-brand :is(.page-header__actions, .form-actions) > form > .btn { width: 100%; }
  body.console-brand .document-viewer__actions { width: 100%; }
  body.console-brand .feedback-create-task { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px), (hover: none) and (pointer: coarse) {
  /* Inline/compact field sizes must not bring back tiny mobile input text. */
  body.console-brand :is(input:not([type="hidden"]), select, textarea) { font-size: max(16px, 1rem) !important; }
  body.console-brand :is(.subtask-add-row, .comment-form, .passkey__rename) { flex-wrap: wrap; }
}
@media (hover: none) and (pointer: coarse) {
  /* Fingers need the full 44px, also in the dense bars. */
  body.console-brand :is(
    .kanban-toolbar, .board-columns__row, .board-properties__row, .board-properties__new,
    .mail-thread__actions, .mail-task-picker, .dashboard-workspace-actions,
    .monitor-toolbar, .monitor-actions, .notif-filters, form.filters, .feedback-card__controls,
    .feedback-create-task, .invoice-task-picker, .card-edit__row
  ) :is(select, input[type="search"], input[type="text"], input[type="number"], input[type="date"], input[type="url"], .btn) {
    min-height: var(--console-control-height);
    height: auto;
  }
}

/* ------------------------------------------------------------
   Typografische schaal
   De basis schaalde mee met de schermbreedte (15-17px) terwijl veel
   onderdelen vaste px hadden: maten als 13,8 / 15 / 15,9 / 17px liepen door
   elkaar, invoervelden waren groter dan hun label en kengetallen groter dan
   de paginatitel. Nu ligt rem op 16px en volgt alles de vaste stappen.
   ------------------------------------------------------------ */
html:has(> body.console-brand) { font-size: 16px; }

/* Hulptekst hoort onder het label, niet erboven in grootte. */
body.console-brand :is(.field-hint, .monitor-field label) { font-size: var(--text-sm); }
body.console-brand .field-hint { color: var(--color-muted); }

/* Een venstertitel is een kop, geen label van 12px. */
body.console-brand :is(.qa-modal__title, .timer-modal__title, .task-modal__heading) { font-size: var(--text-lg); font-weight: 600; color: var(--color-text); }
body.console-brand .notif__panel-title { font-size: var(--text-base); font-weight: 600; }

/* Kaartknoppen op het dashboard: titel boven de ondertitel. */
body.console-brand .dashboard-command strong { font-size: var(--text-base); font-weight: 600; }
body.console-brand .dashboard-command small { font-size: var(--text-sm); }

/* Kengetallen blijven onder de paginatitel (30px). */
body.console-brand :is(.dashboard-kpi > strong, .stat-card__value, .gmail-unsubscribe__stat strong) {
  font-size: 28px;
  line-height: 1.15;
}
body.console-brand :is(.dashboard-monitor-chip strong, .monitor-stat strong) { font-size: var(--text-2xl); }
body.console-brand :is(.system-clock, .card-edit__stat-value) { font-size: var(--text-xl); }
@media (max-width: 640px) {
  body.console-brand :is(.dashboard-kpi > strong, .stat-card__value, .gmail-unsubscribe__stat strong) { font-size: var(--text-2xl); }
}

/* Postvak: de mails zelf zijn de inhoud, niet de mappen ernaast. */
body.console-brand .mailbox__folder > span:not(.mailbox__folder-count) { font-size: var(--text-base); }
body.console-brand .mailbox__thread-subject { font-size: var(--text-base); }

/* Niets kleiner dan 11px. */
body.console-brand :is(.kanban-card__shared, .monitor-badge) { font-size: 11px; }
body.console-brand .monitor-stat span { font-size: var(--text-xs); }

/* ============================================================
   Glas door de hele console
   ============================================================
   Dezelfde matglasstijl als de tegels op het dashboard, voor elke pagina:
   panelen, kanban, postvak, financiën, berichten, monitoring, enz.

   Drie niveaus:
   1. Containers — doorschijnend met backdrop-blur (panelen, kolommen, lijsten)
   2. Kaarten óp glas — alleen doorschijnend, geen eigen blur: dat zijn er
      soms honderden (kanbankaarten, taken) en blur per kaart is duur
   3. Overlays — dikker glas, zodat tekst boven drukke inhoud leesbaar blijft

   Achter alles ligt een zachte gloed; zonder iets om doorheen te kijken ziet
   glas eruit als een grijs vlak. Met prefers-reduced-transparency valt alles
   terug op de gewone, dichte vlakken.

   Bewust GEEN backdrop-filter: QuickLiquid (liquid-surfaces.js) legt achter
   elke knop een laag die zelf backdrop-filter gebruikt. Binnen een ouder met
   backdrop-filter ziet die laag alleen de binnenkant van die ouder, en dan
   staat er een donker vlak achter de tekst van elke knop — de mailregels in
   het postvak voorop. Op een zachte gloed voegt vervagen toch weinig toe. */
body.console-brand {
  --glass-fill:
    linear-gradient(150deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012) 55%),
    rgba(20, 26, 34, .55);
  --glass-fill-strong:
    linear-gradient(150deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015) 55%),
    rgba(18, 24, 32, .86);
  --glass-card: rgba(255, 255, 255, .035);
  --glass-card-hover: rgba(255, 255, 255, .065);
  --glass-line: rgba(255, 255, 255, .085);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 10px 30px rgba(0, 0, 0, .28);
  --glass-radius: 12px;
}

body.console-brand .main {
  background:
    radial-gradient(1100px 650px at 88% -8%, rgba(0, 102, 255, .16), transparent 62%),
    radial-gradient(900px 600px at 8% 108%, rgba(0, 102, 255, .08), transparent 60%),
    radial-gradient(700px 500px at 45% 45%, rgba(154, 184, 226, .035), transparent 70%),
    var(--color-void);
  background-attachment: fixed;
}

/* 1. Containers */
body.console-brand :is(
  .panel, .stat-card, .fin-stat, .monitor-stat, .project-card, .mcp-client-card,
  .passkey, .quick-action-item, .timer-banner, .kanban-col, .kanban-filters,
  .mailbox__list, .mailbox__reader, .notif-device, .document-workspace,
  .gmail-unsubscribe__stat, .gmail-unsubscribe__last-run, .leef-device-card,
  .dashboard-kpi
) {
  border-color: var(--glass-line);
  border-radius: var(--glass-radius);
  background: var(--glass-fill);
  box-shadow: var(--glass-shadow);
}

/* Koppen, voeten en tabelkoppen binnen het glas: geen eigen dicht vlak. */
body.console-brand :is(
  .panel__header, .panel__footer, .kanban-col__header, .table thead,
  .data-table thead, .data-table th, .document-pane-title, .feedback-panel,
  .document-extraction, .notif__panel-header, .notif__panel-footer
) {
  border-color: var(--glass-line);
  background: rgba(255, 255, 255, .025);
}

body.console-brand :is(.data-table td, .data-table tr) {
  border-color: var(--glass-line);
}

/* 2. Kaarten op glas */
body.console-brand :is(
  .kanban-card, .task-item, .cred-item, .leef-item, .comment, .calendar-day,
  .calendar-entry, .feedback-card, .document-drop, .notif-status,
  .kanban-quick-add, .board-switcher__item
) {
  border-color: var(--glass-line);
  background: var(--glass-card);
}

body.console-brand :is(.kanban-card, .task-item, .cred-item, .leef-item, .calendar-entry):hover,
body.console-brand .board-switcher__item.is-active,
body.console-brand .mailbox__folder.is-active {
  background: var(--glass-card-hover);
}

body.console-brand .kanban-card {
  border-radius: 8px;
}

/* 3. Overlays */
body.console-brand :is(
  .notif__panel, .nav-palette__panel, .qa-modal, .timer-modal, .task-modal__card,
  .document-dialog, .feedback-dialog, .feedback-toast
) {
  border-color: rgba(255, 255, 255, .12);
  border-radius: var(--glass-radius);
  background: var(--glass-fill-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 70px rgba(0, 0, 0, .55);
}

@media (prefers-reduced-transparency: reduce) {
  body.console-brand .main { background: var(--color-void); }

  body.console-brand :is(
    .panel, .stat-card, .fin-stat, .monitor-stat, .project-card, .mcp-client-card,
    .passkey, .quick-action-item, .timer-banner, .kanban-col, .kanban-filters,
    .mailbox__list, .mailbox__reader, .notif-device, .document-workspace,
    .gmail-unsubscribe__stat, .gmail-unsubscribe__last-run, .leef-device-card,
    .dashboard-kpi,
    .notif__panel, .nav-palette__panel, .qa-modal, .timer-modal, .task-modal__card,
    .document-dialog, .feedback-dialog, .feedback-toast
  ) {
    background: var(--color-surface);
  }
}

/* Inlogscherm: glazen kaart boven het raster. Iets dichter dan de panelen,
   want zonder vervaging mag het raster niet door de tekst heen lopen. De
   blauwe accentlijn bovenaan blijft staan. */
body.console-brand .login-page {
  background:
    radial-gradient(900px 600px at 50% 18%, rgba(0, 102, 255, .16), transparent 65%),
    radial-gradient(700px 500px at 85% 95%, rgba(0, 102, 255, .07), transparent 60%),
    var(--color-void);
}

body.console-brand .login-card {
  border-color: var(--glass-line);
  border-top-color: var(--color-accent);
  border-radius: 16px;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .012) 55%),
    rgba(18, 24, 32, .8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 70px rgba(0, 0, 0, .45);
}

@media (prefers-reduced-transparency: reduce) {
  body.console-brand .login-card {
    background: var(--color-base);
  }
}

/* ============================================================
   Kleur per soort actie bij hover en toetsenbordfocus
   ============================================================
   Blauw is de hoofdactie, rood verwijdert. Geel (action-change) is voor
   lichte, omkeerbare wijzigingen: bewerken, markeren, archiveren, koppelen.
   Zo zie je voor je klikt wat voor soort klik het is. */
body.console-brand {
  --action-change: #f0b429;
}

body.console-brand .action-change {
  transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

body.console-brand .action-change:is(:hover, :focus-visible) {
  border-color: rgba(240, 180, 41, .55);
  background: rgba(240, 180, 41, .1);
  color: var(--action-change);
}

/* Een hoofdknop (Mark as …) blijft gevuld, maar wordt geel in plaats van
   donkerder blauw. */
body.console-brand .btn--primary.action-change:is(:hover, :focus-visible) {
  border-color: var(--action-change);
  background: var(--action-change);
  color: #1a1400;
}

body.console-brand .action-change:focus-visible {
  outline-color: var(--action-change);
}