/* ═══════ Praxis Theme System ═══════ */
/* Dark Gold - Deep navy with gold accents */
:root,
[data-theme="dark"] {
    --praxis-cookie-height: 0px;
    --bg-primary: #0c1322;
    --bg-secondary: #111b2e;
    --bg-card: #131d30;
    --bg-sidebar: #0a0f1c;
    --bg-hover: rgba(201, 169, 98, 0.08);
    --text-primary: #f1f5f9;
    --text-secondary: #b0bec5;
    /* #78909c measured 3.8:1 against the muted surfaces it lands on (a task's "4d"
       relative date). AA for body text is 4.5. */
    --text-muted: #94a3b8;
    --accent: #c9a962;
    --accent-hover: #d4b56d;
    --accent-gold: #c9a962;
    --accent-subtle: rgba(201, 169, 98, 0.12);
    --accent-4: rgba(201, 169, 98, 0.04);
    --accent-5: rgba(201, 169, 98, 0.05);
    --accent-6: rgba(201, 169, 98, 0.06);
    --accent-8: rgba(201, 169, 98, 0.08);
    --accent-10: rgba(201, 169, 98, 0.1);
    --accent-12: rgba(201, 169, 98, 0.12);
    --accent-15: rgba(201, 169, 98, 0.15);
    --accent-20: rgba(201, 169, 98, 0.2);
    --accent-25: rgba(201, 169, 98, 0.25);
    --accent-30: rgba(201, 169, 98, 0.3);
    --accent-35: rgba(201, 169, 98, 0.35);
    --accent-40: rgba(201, 169, 98, 0.4);
    --accent-50: rgba(201, 169, 98, 0.5);
    --accent-55: rgba(201, 169, 98, 0.55);
    --accent-60: rgba(201, 169, 98, 0.6);
    --accent-65: rgba(201, 169, 98, 0.65);
    --accent-70: rgba(201, 169, 98, 0.7);
    --accent-glow: rgba(201, 169, 98, 0.4);
    --accent-gradient: linear-gradient(135deg, #c9a962, #b8962e);
    --accent-gradient-bright: linear-gradient(135deg, #d4b76b, #c9a962);
    --accent-gradient-warm: linear-gradient(135deg, #c9a962, #e8d5a0);
    --success: #10b981;
    --success-text: #6ee7b7;
    --success-hover: #059669;
    --warning: #f59e0b;
    --warning-text: #fbbf24;
    --warning-hover: #d97706;
    --danger: #ef4444;
    --danger-text: #fca5a5;
    --danger-hover: #dc2626;
    --info: #3b82f6;
    --info-text: #93c5fd;
    --info-hover: #2563eb;
    --secondary-muted: #94a3b8;
    --secondary-muted-text: #94a3b8;
    --accent-active: #b8962e;
    --purple: #8b5cf6;
    --btn-contrast: #0c1322;
    --text-on-accent: #fff;
    --text-on-accent-muted: rgba(255, 255, 255, 0.75);
    --text-on-accent-soft: rgba(255, 255, 255, 0.9);
    --modal-backdrop: rgba(0, 0, 0, 0.6);
    --cyan: #06b6d4;
    --cyan-hover: #0891b2;
    --indigo: #6366f1;
    --indigo-hover: #4f46e5;
    --success-dark: #022c22;
    --success-gradient: linear-gradient(135deg, var(--success), #059669);
    --danger-gradient: linear-gradient(135deg, var(--danger), #dc2626);
    --warning-gradient: linear-gradient(135deg, var(--warning), #d97706);
    --stat-purple: linear-gradient(135deg, #667eea, #764ba2);
    --stat-teal: linear-gradient(135deg, #0d7377, #059669);
    --stat-pink: linear-gradient(135deg, #c850c0, #d4375b);
    --border: rgba(201, 169, 98, 0.15);
    --border-strong: rgba(201, 169, 98, 0.3);
    --border-radius: 12px;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(201, 169, 98, 0.08);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.45);
    --input-bg: rgba(201, 169, 98, 0.05);
    --input-border: #776842;
    --badge-bg: rgba(201, 169, 98, 0.14);
    --badge-text: #c9a962;
    --section-label: rgba(201, 169, 98, 0.55);
    --heading-color: #e8dcc8;
}

/* Light Gold - Warm cream with rich gold accents */
[data-theme="light"] {
    --bg-primary: #f8f5ef;
    --bg-secondary: #f0ebe0;
    --bg-card: #ffffff;
    --bg-sidebar: #1a1510;
    --bg-hover: rgba(161, 120, 40, 0.06);
    --text-primary: #1c1710;
    --text-secondary: #4a4030;
    --text-muted: #706555;
    --accent: #6b5414;
    --accent-hover: #5a470f;
    --accent-gold: #6b5414;
    --accent-subtle: rgba(154, 123, 46, 0.08);
    --accent-4: rgba(154, 123, 46, 0.04);
    --accent-5: rgba(154, 123, 46, 0.05);
    --accent-6: rgba(154, 123, 46, 0.06);
    --accent-8: rgba(154, 123, 46, 0.08);
    --accent-10: rgba(154, 123, 46, 0.1);
    --accent-12: rgba(154, 123, 46, 0.12);
    --accent-15: rgba(154, 123, 46, 0.15);
    --accent-20: rgba(154, 123, 46, 0.2);
    --accent-25: rgba(154, 123, 46, 0.25);
    --accent-30: rgba(154, 123, 46, 0.3);
    --accent-35: rgba(154, 123, 46, 0.35);
    --accent-40: rgba(154, 123, 46, 0.4);
    --accent-50: rgba(154, 123, 46, 0.5);
    --accent-55: rgba(154, 123, 46, 0.55);
    --accent-60: rgba(154, 123, 46, 0.6);
    --accent-65: rgba(154, 123, 46, 0.65);
    --accent-70: rgba(154, 123, 46, 0.7);
    --accent-glow: rgba(154, 123, 46, 0.25);
    --accent-gradient: linear-gradient(135deg, #9a7b2e, #7a6218);
    --accent-gradient-bright: linear-gradient(135deg, #aa8b3e, #9a7b2e);
    --accent-gradient-warm: linear-gradient(135deg, #9a7b2e, #c0a050);
    --success: #047857;
    --success-text: #065f46;
    --success-hover: #065f46;
    --warning: #b45309;
    --warning-text: #92400e;
    --warning-hover: #78350f;
    --danger: #b91c1c;
    --danger-text: #991b1b;
    --danger-hover: #7f1d1d;
    --info: #1d4ed8;
    --info-text: #1e40af;
    --info-hover: #1e3a8a;
    --secondary-muted: #64748b;
    --secondary-muted-text: #475569;
    --accent-active: #6b5514;
    --purple: #7c3aed;
    --btn-contrast: #ffffff;
    --text-on-accent: #fff;
    --text-on-accent-muted: rgba(255, 255, 255, 0.85);
    --text-on-accent-soft: rgba(255, 255, 255, 0.95);
    --modal-backdrop: rgba(0, 0, 0, 0.4);
    --cyan: #0891b2;
    --cyan-hover: #0e7490;
    --indigo: #4f46e5;
    --indigo-hover: #4338ca;
    --success-dark: #022c22;
    --success-gradient: linear-gradient(135deg, var(--success), #065f46);
    --danger-gradient: linear-gradient(135deg, var(--danger), #7f1d1d);
    --warning-gradient: linear-gradient(135deg, var(--warning), #78350f);
    --stat-purple: linear-gradient(135deg, #4f46e5, #6d28d9);
    --stat-teal: linear-gradient(135deg, #047857, #065f46);
    --stat-pink: linear-gradient(135deg, #be185d, #9f1239);
    --border: rgba(154, 123, 46, 0.18);
    --border-strong: rgba(154, 123, 46, 0.3);
    --border-radius: 12px;
    --shadow: 0 2px 8px rgba(26, 21, 16, 0.08), 0 0 0 1px rgba(154, 123, 46, 0.08);
    --shadow-lg: 0 8px 24px rgba(26, 21, 16, 0.12);
    --input-bg: #fffdf8;
    --input-border: #9b8657;
    --badge-bg: rgba(154, 123, 46, 0.1);
    --badge-text: #7a6218;
    --section-label: #8a7040;
    --heading-color: #2c2418;
}

/* AMOLED Gold - True black with gold accents (battery-saving for OLED screens) */
[data-theme="amoled"] {
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --bg-card: #0f0f0f;
    --bg-sidebar: #000000;
    --bg-hover: rgba(201, 169, 98, 0.08);
    --text-primary: #f1f5f9;
    --text-secondary: #a0aab4;
    --text-muted: #8a91a0;
    --accent: #c9a962;
    --accent-hover: #d4b56d;
    --accent-gold: #c9a962;
    --accent-subtle: rgba(201, 169, 98, 0.10);
    --accent-4: rgba(201, 169, 98, 0.04);
    --accent-5: rgba(201, 169, 98, 0.05);
    --accent-6: rgba(201, 169, 98, 0.06);
    --accent-8: rgba(201, 169, 98, 0.08);
    --accent-10: rgba(201, 169, 98, 0.1);
    --accent-12: rgba(201, 169, 98, 0.12);
    --accent-15: rgba(201, 169, 98, 0.15);
    --accent-20: rgba(201, 169, 98, 0.2);
    --accent-25: rgba(201, 169, 98, 0.25);
    --accent-30: rgba(201, 169, 98, 0.3);
    --accent-35: rgba(201, 169, 98, 0.35);
    --accent-40: rgba(201, 169, 98, 0.4);
    --accent-50: rgba(201, 169, 98, 0.5);
    --accent-55: rgba(201, 169, 98, 0.55);
    --accent-60: rgba(201, 169, 98, 0.6);
    --accent-65: rgba(201, 169, 98, 0.65);
    --accent-70: rgba(201, 169, 98, 0.7);
    --accent-glow: rgba(201, 169, 98, 0.4);
    --accent-gradient: linear-gradient(135deg, #c9a962, #b8962e);
    --accent-gradient-bright: linear-gradient(135deg, #d4b76b, #c9a962);
    --accent-gradient-warm: linear-gradient(135deg, #c9a962, #e8d5a0);
    --success: #10b981;
    --success-text: #6ee7b7;
    --success-hover: #059669;
    --warning: #f59e0b;
    --warning-text: #fbbf24;
    --warning-hover: #d97706;
    --danger: #ef4444;
    --danger-text: #fca5a5;
    --danger-hover: #dc2626;
    --info: #3b82f6;
    --info-text: #93c5fd;
    --info-hover: #2563eb;
    --secondary-muted: #94a3b8;
    --secondary-muted-text: #94a3b8;
    --accent-active: #b8962e;
    --purple: #8b5cf6;
    --btn-contrast: #000000;
    --text-on-accent: #fff;
    --text-on-accent-muted: rgba(255, 255, 255, 0.75);
    --text-on-accent-soft: rgba(255, 255, 255, 0.9);
    --modal-backdrop: rgba(0, 0, 0, 0.7);
    --cyan: #06b6d4;
    --cyan-hover: #0891b2;
    --indigo: #6366f1;
    --indigo-hover: #4f46e5;
    --success-dark: #022c22;
    --success-gradient: linear-gradient(135deg, var(--success), #059669);
    --danger-gradient: linear-gradient(135deg, var(--danger), #dc2626);
    --warning-gradient: linear-gradient(135deg, var(--warning), #d97706);
    --stat-purple: linear-gradient(135deg, #667eea, #764ba2);
    --stat-teal: linear-gradient(135deg, #0d7377, #059669);
    --stat-pink: linear-gradient(135deg, #c850c0, #d4375b);
    --border: rgba(201, 169, 98, 0.10);
    --border-strong: rgba(201, 169, 98, 0.20);
    --border-radius: 12px;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(201, 169, 98, 0.06);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.7);
    --input-bg: rgba(201, 169, 98, 0.04);
    --input-border: #776842;
    --badge-bg: rgba(201, 169, 98, 0.12);
    --badge-text: #c9a962;
    --section-label: rgba(201, 169, 98, 0.55);
    --heading-color: #e8dcc8;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Semantic design tokens (UI-100, docs/praxis-design-system-spec-2026-08-17.md §1)

   Layer B aliases over the three palette blocks above. Declared ONCE on :root and
   theme-agnostic on purpose: every alias resolves through var() to the palette
   value of whichever [data-theme] is active, so dark / light / amoled stay in
   lockstep with zero per-theme duplication. New components consume THESE names;
   the palette (--bg-*, --accent-NN, gradients) stays private implementation.

   Promotion rule (review errata E-5): --text-primary/-secondary/-muted and
   --border-strong were already semantic in meaning and already declared per theme
   above with 200+ consumers, so they are KEPT as the semantic tokens they are - no
   rename, no self-referential alias. Only the missing Layer-B names are added here.
   Every alias maps to an existing value; the intended visual diff is zero.
   ══════════════════════════════════════════════════════════════════════════════ */
:root {
    /* Surfaces */
    --surface-app: var(--bg-primary);
    --surface-nav: var(--bg-sidebar);
    --surface-panel: var(--bg-card);
    --surface-raised: var(--bg-secondary);
    --surface-inset: var(--input-bg);
    --surface-overlay: var(--bg-card);
    --surface-hover: var(--bg-hover);
    --surface-selected: var(--accent-subtle);

    /* Text (primary / secondary / muted are the palette declarations above) */
    --text-inverse: var(--btn-contrast);
    --text-link: var(--accent);
    --text-disabled: var(--text-muted);

    /* Borders (strong is the palette declaration above) */
    --border-subtle: var(--border);
    --border-default: var(--input-border);
    --border-selected: var(--accent);
    --border-focus: var(--accent);

    /* Actions */
    --action-primary: var(--accent);
    --action-primary-hover: var(--accent-hover);
    --action-primary-text: var(--btn-contrast);
    --action-secondary: var(--bg-secondary);
    --action-danger: var(--danger);

    /* Status: text/icon colour + a low-emphasis surface each */
    --status-info: var(--info);
    --status-info-surface: color-mix(in srgb, var(--info) 14%, transparent);
    --status-success: var(--success);
    --status-success-surface: color-mix(in srgb, var(--success) 14%, transparent);
    --status-warning: var(--warning);
    --status-warning-surface: color-mix(in srgb, var(--warning) 14%, transparent);
    --status-danger: var(--danger);
    --status-danger-surface: color-mix(in srgb, var(--danger) 14%, transparent);
    --status-neutral: var(--secondary-muted);
    --status-neutral-surface: color-mix(in srgb, var(--secondary-muted) 14%, transparent);

    /* Focus, selection, backdrop */
    --focus-ring: var(--accent);
    --selection-fill: var(--accent-subtle);
    --backdrop: var(--modal-backdrop);

    /* Spacing scale (spec §4) */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;

    /* Radius scale (spec §4). --border-radius (12px) above is the legacy card radius
       and maps to --radius-xl; migrate consumers per component, never as a sweep. */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-round: 999px;

    /* Type roles (spec §3): size/line-height pairs for the desktop column. The
       rendered face is the OS system font (no webfont is shipped; CSP font-src
       'self'), so metrics are specified against system-ui, not Inter. */
    /* The family the --type-* pairs are meant to be used WITH.
       Those tokens are size/line-height pairs for the `font` shorthand, and a shorthand needs
       a family. Six declarations wrote `inherit` there, which is a CSS-wide keyword and is only
       legal as an entire property value - so the whole declaration was dropped and the weight,
       size and line-height never applied. Measured in headless Chromium on 2026-08-23:
       `font: 600 var(--type-subsection) inherit` computed to weight 400 / 14px / normal. */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --type-display: 32px/40px;
    --type-page-title: 24px/32px;
    --type-section-title: 18px/26px;
    --type-subsection: 15px/22px;
    --type-body: 14px/21px;
    --type-body-compact: 13px/18px;
    --type-label: 12px/16px;
    --type-metadata: 12px/16px;
    --type-numeric: 14px/20px;
    --font-numeric-features: "tnum" 1, "lnum" 1;

    /* Motion (spec §6). Consumers must still honour prefers-reduced-motion. */
    --duration-instant: 100ms;
    --duration-panel: 200ms;
    --duration-progress: 220ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);

    /* Layering contract (spec §5) */
    --z-content: 0;
    --z-sticky: 10;
    --z-shell: 20;
    --z-popover: 40;
    --z-drawer: 50;
    --z-modal: 60;
    --z-toast: 70;
    --z-critical: 80;
}

/* Global Typography */
html, body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    background: var(--bg-primary);
    color: var(--text-primary);
    margin: 0;
}

/* ── Skip Link (WCAG 2.4.1) ── */
.skip-link {
    position: absolute; left: -9999px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
    z-index: 1000; padding: 12px 24px;
    background: var(--accent); color: var(--btn-contrast);
    font-size: 14px; font-weight: 700;
    text-decoration: none; border-radius: 0 0 8px 0;
}
.skip-link:focus {
    position: fixed; left: 0; top: 0;
    width: auto; height: auto;
    z-index: 10000;
}

/* ── Focus Indicators (WCAG 2.4.7) ── */
:focus-visible {
    outline: 2px solid var(--accent, #c9a962);
    outline-offset: 2px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent, #c9a962);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ═══════ Global Dark Mode - Bootstrap Overrides ═══════ */
/* Form controls */
.form-control,
.form-select {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--input-border, var(--border-strong));
}
.form-control:focus,
.form-select:focus {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-15);
}
.form-control::placeholder {
    color: var(--text-muted);
}
.form-control:disabled,
.form-select:disabled {
    background-color: var(--bg-primary);
    color: var(--text-muted);
}

/* Select dropdown options (native) */
.form-select option {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

/* Labels */
.form-label,
label {
    color: var(--text-secondary);
}

/* Cards */
.card {
    background-color: var(--bg-card);
    border-color: var(--border);
    color: var(--text-primary);
}
.card-header {
    background-color: var(--bg-secondary);
    border-bottom-color: var(--border);
    color: var(--text-primary);
}
.card-body {
    color: var(--text-primary);
}

/* Modals */
.modal-content {
    background-color: var(--bg-card);
    border-color: var(--border);
    color: var(--text-primary);
}
.modal-header {
    border-bottom-color: var(--border);
    color: var(--text-primary);
}
.modal-footer {
    border-top-color: var(--border);
}
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Tables */
.table {
    color: var(--text-primary);
    --bs-table-bg: transparent;
    --bs-table-striped-bg: var(--accent-4);
    --bs-table-hover-bg: var(--accent-8);
    --bs-table-border-color: var(--border);
}
.table th {
    color: var(--text-secondary);
    border-bottom-color: var(--border);
}
.table td {
    border-bottom-color: var(--border);
}

/* Dropdowns */
.dropdown-menu {
    background-color: var(--bg-card);
    border-color: var(--border);
    box-shadow: var(--shadow-lg);
}
.dropdown-item {
    color: var(--text-primary);
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--bg-hover);
    color: var(--accent);
}
.dropdown-divider {
    border-top-color: var(--border);
}

/* Alerts */
.alert {
    border-color: var(--border);
}

/* List groups */
.list-group-item {
    background-color: var(--bg-card);
    border-color: var(--border);
    color: var(--text-primary);
}

/* Nav tabs / pills */
.nav-tabs {
    border-bottom-color: var(--border);
}
.nav-tabs .nav-link {
    color: var(--text-secondary);
}
.nav-tabs .nav-link.active {
    background-color: var(--bg-card);
    border-color: var(--border);
    color: var(--accent);
}

/* Buttons secondary/outline */
.btn-outline-secondary {
    color: var(--text-secondary);
    border-color: var(--border);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible {
    background-color: var(--bg-hover);
    color: var(--accent);
    border-color: var(--accent);
}

/* ═══════ Theme Transition - prevent layout jump on dark↔light switch ═══════ */
body,
.page,
main,
.sidebar,
.content,
.top-bar,
.card,
.card-header,
.table,
.table th,
.table td,
.form-control,
h1, h2, h3, h4, h5, h6,
p, li, a {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}


*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-y: scroll; /* Prevent scrollbar-induced CLS */
}

/* ═══════════════════════════════════════════════════
   CUSTOM SCROLLBAR - Slim, dark, modern
   ═══════════════════════════════════════════════════ */

/* WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.25);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:focus-visible {
    background: rgba(148, 163, 184, 0.45);
}

/* Sidebar scrollbar - darker to match navy bg */
.sidebar::-webkit-scrollbar-thumb {
    background: rgba(100, 140, 180, 0.2);
}

.sidebar::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:focus-visible {
    background: rgba(100, 140, 180, 0.4);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.25) transparent;
}

.sidebar {
    scrollbar-color: rgba(100, 140, 180, 0.2) transparent;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 1rem;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.25rem;
}

p,
li {
    color: var(--text-secondary);
    line-height: 1.6;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover,
a:focus-visible {
    color: var(--accent-hover);
}

/* Layout */
.page {
    padding: 0;
    background: var(--bg-primary);
}

.content {
    padding: 1.5rem 2rem;
}

/* Cards */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: border-color 0.2s ease;
}

/* Only apply hover lift effect to small stat cards, not large content panels */
.card.stat-card:hover,
.card.card-hover:hover,
.card.card-hover:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* A card header is a title on the left and actions on the right. With no wrap, the
   actions simply left the card at 200% text on a phone (/time lost two buttons 126px off
   the edge, /settings one). Wrapping costs nothing when everything fits. */
.card-header.d-flex {
    flex-wrap: wrap;
    gap: 0.5rem;
}

.card-header {
    background: var(--accent-subtle);
    border-bottom: 1px solid var(--border-strong);
    padding: 0.875rem 1.25rem;
}

.card-header h5 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--heading-color);
    letter-spacing: 0.01em;
}

/* WCAG 1.4.4 in Dutch and German (ITR-WEB-02 loop 4). One compound word - "Recente
   beveiligingsgebeurtenissen", or "Synchroniseren" at page-title size - is wider than a 390px phone
   at 200% text, and a heading cannot wrap a word it has no break in: it pushed the content area
   sideways on /security and /sync the first time the audit ran in Dutch (it had been running in
   English because a stale preference read kept reverting the fixture's language). Break inside a
   word only when the word does not fit, hyphenated where the browser knows the language (utils.js
   keeps document.documentElement.lang on the reader's locale). `anywhere`, not `break-word`: only
   `anywhere` lowers the min-content size a flex row uses to decide what fits. */
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: anywhere;
    hyphens: auto;
}

.card-body {
    padding: 1.25rem;
}

.card-title {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

/* Stat Cards */
.card.bg-primary,
.card.bg-success,
.card.bg-info,
.card.bg-secondary,
.card.bg-danger,
.card.bg-warning {
    border: none;
    background: var(--accent-gradient) !important;
}

.card.bg-success {
    background: var(--success-gradient) !important;
}

.card.bg-danger {
    background: var(--danger-gradient) !important;
}

.card.bg-warning {
    background: var(--warning-gradient) !important;
}

.card.bg-info {
    background: linear-gradient(135deg, var(--cyan) 0%, var(--cyan-hover) 100%) !important;
}

.card.bg-secondary {
    background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-hover) 100%) !important;
}

/* Tables */
.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
}

.table th,
.table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.table th {
    background: var(--accent-subtle);
    color: var(--heading-color);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.table td {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.table tbody tr:hover,
.table tbody tr:focus-visible {
    background: var(--accent-5);
}

.table-danger {
    background: rgba(239, 68, 68, 0.15) !important;
}

.table-sm th,
.table-sm td {
    padding: 0.5rem 0.75rem;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    /* An inline-flex button sizes to its label, so at 200% text a two-word label ran
       past the card that held it (WCAG 1.4.4, /emails at 390px). Constrain it to the
       space it has and let the label wrap rather than leave the page. */
    max-width: 100%;
    flex-wrap: wrap;
    white-space: normal;
    transition: all 0.2s;
    text-decoration: none;
}

.btn-primary {
    background: var(--accent);
    color: var(--btn-contrast);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

/* Bootstrap's own disabled rule is more specific than the theme's .btn-primary, so a
   disabled primary button fell back to BOOTSTRAP BLUE - bright, unbranded, and more
   prominent than the enabled buttons beside it (seen on /emails once Compose became
   inert without a mailbox, 2026-08-20). Disabled means quieter, not louder. */
.btn-primary:disabled,
.btn-primary.disabled {
    background: var(--accent) !important;
    color: var(--btn-contrast) !important;
    border-color: transparent !important;
    opacity: 0.5;
    transform: none;
}

.btn-light {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-light:hover,
.btn-light:focus-visible {
    background: rgba(255, 255, 255, 0.2);
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

.btn-link {
    background: transparent;
    color: var(--accent);
    padding: 0;
}

/* Forms */
.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--input-bg);
    border: 1px solid var(--input-border, var(--border-strong));
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* WEB-003 (GUI pilot): a single-line select is as tall as the input beside it. The rule above gives inputs their own
   padding and text size, which Bootstrap's select never got, so a dialog row of both stood uneven. The end padding
   keeps the room the arrow needs; the small and large variants, list boxes and the phone text floor keep theirs, and
   :where keeps the weight of a plain .form-select, so a component that sizes its own select still wins. */
.form-select:where(:not(.form-select-sm, .form-select-lg, [multiple], [size])) {
    padding: 0.75rem 2.25rem 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
}

.form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-25);
}

.form-control::placeholder {
    color: var(--text-muted);
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 9999px;
    /* An inline-flex pill takes its content's max-content width, so a badge carrying a
       SENTENCE ("Max 1 automatic deletions per cycle") grew to 420px on a 390px phone at
       200% text and hung off the page with nothing to scroll. Short badges are unchanged;
       long ones now wrap inside the card that holds them. */
    max-width: 100%;
    flex-wrap: wrap;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* CASING-01 (2026-10-06): capitalising every word is an English habit. For every language it made a Dutch access
   badge read "Alle Zaken" and a retention badge "Afgedwongen Door Het Platform"; Dutch, French and German badges show
   their words as the catalogue writes them. The page language follows the reader (praxisLanguage.apply). */
html:lang(en) .badge {
    text-transform: capitalize;
}

/* In a table above phone width a status pill holds one or two short words: it breaks only at a
   space, never inside a word. With `anywhere` the table squeezed the status column until the
   matters table showed "Actie" over "f" (2026-10-04: on wide screens once the content column kept
   a gutter for the corner buttons, and on a tablet at 834px, where a table fits the width with no
   minimum). The column now keeps the pill's width and the free-text columns absorb the rest.
   At 768px and below a table keeps a 600px minimum inside its scroll wrapper, and phones keep the
   rule above, where a pill may still need to break to stay on screen. */
@media (min-width: 769px) {
    .table .badge {
        overflow-wrap: normal;
    }
}

.bg-success {
    background: var(--success) !important;
    color: var(--success-dark) !important;
}

.bg-warning {
    background: var(--warning) !important;
    color: var(--text-primary) !important;
}

.bg-danger {
    background: var(--danger) !important;
    color: var(--text-on-accent) !important;
}

.bg-info {
    background: var(--cyan) !important;
    color: var(--text-on-accent) !important;
}

/* Navigation sidebar. Dark and AMOLED keep the deep navy treatment; light mode
   gets a restrained warm surface so the shell reads as one coherent theme. */
.sidebar {
    /* ── Sidebar sub-theme tokens ── */
    --sidebar-background: var(--bg-sidebar);
    --sidebar-text: #b0bec5;
    --sidebar-text-bright: #f1f5f9;
    --sidebar-text-muted: rgba(148, 163, 184, 0.8);
    --sidebar-accent: #c9a962;
    /* Section labels in the sidebar ("MORE") measured 3.3:1 at 55%. */
    --sidebar-accent-muted: rgba(201, 169, 98, 0.8);
    --sidebar-accent-subtle: rgba(201, 169, 98, 0.85);
    --sidebar-hover-bg: rgba(201, 169, 98, 0.08);
    --sidebar-active-bg: linear-gradient(135deg, rgba(201, 169, 98, 0.2), rgba(201, 169, 98, 0.1));
    --sidebar-accent-gradient: linear-gradient(135deg, #c9a962, #b8962e);
    --sidebar-contrast: #0a0f1c;
    --sidebar-danger: #f87171;
    --sidebar-border: rgba(255, 255, 255, 0.06);

    width: 250px;
    background: var(--sidebar-background);
    border-right: 1px solid var(--border);
    padding: 1.25rem 1rem 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

[data-theme="light"] .sidebar {
    --sidebar-background: linear-gradient(180deg, #f4efe6 0%, #eee6da 100%);
    --sidebar-text: #61584c;
    --sidebar-text-bright: #241f18;
    --sidebar-text-muted: #716451;
    --sidebar-accent: #7d6318;
    --sidebar-accent-muted: #786025;
    --sidebar-accent-subtle: #7b5d17;
    --sidebar-hover-bg: rgba(154, 119, 32, 0.09);
    --sidebar-active-bg: linear-gradient(135deg, rgba(190, 150, 53, 0.2), rgba(190, 150, 53, 0.09));
    --sidebar-contrast: #fffdf8;
    --sidebar-border: rgba(69, 52, 24, 0.13);
    background: var(--sidebar-background);
    border-right-color: rgba(69, 52, 24, 0.16);
    box-shadow: 10px 0 30px rgba(58, 43, 19, 0.045);
    scrollbar-color: rgba(122, 98, 55, 0.28) transparent;
}

[data-theme="light"] .sidebar .user-card,
[data-theme="light"] .sidebar .nav-utility-btn,
[data-theme="light"] .sidebar .logout-btn,
[data-theme="light"] .sidebar .login-link {
    background: rgba(255, 253, 248, 0.58);
    border-color: rgba(122, 98, 55, 0.2);
}

[data-theme="light"] .sidebar .nav-utility-btn:hover,
[data-theme="light"] .sidebar .nav-utility-btn:focus-visible,
[data-theme="light"] .sidebar .logout-btn:hover,
[data-theme="light"] .sidebar .logout-btn:focus-visible {
    background: rgba(154, 119, 32, 0.12);
    border-color: rgba(122, 98, 55, 0.38);
    color: var(--sidebar-accent);
}

.sidebar .logo {
    margin-bottom: 0.5rem;
    text-align: center;
}

.sidebar .logo-link {
    text-decoration: none;
    display: block;
}

.sidebar .logo-link:hover,
.sidebar .logo-link:focus-visible {
    text-decoration: none;
}

.sidebar .logo-img {
    max-width: 180px;
    height: auto;
}

.sidebar .tagline {
    font-size: 0.72rem;
    color: var(--sidebar-accent-subtle);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Sidebar section labels (CASES, DOCUMENTS, etc.) */
.sidebar .nav-section-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--sidebar-accent-muted);
    letter-spacing: 0.12em;
    padding: 0.75rem 12px 0.35rem;
    margin-top: 0.25rem;
    text-transform: uppercase;
}

.sidebar .nav-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar .nav-items li {
    margin-bottom: 1px;
}

.sidebar .nav-items a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    color: var(--sidebar-text) !important;
    border-radius: 8px;
    transition: all 0.2s;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 450;
}

/* Sidebar active - gold accent */
.sidebar .nav-items a:hover,
.sidebar .nav-items a:focus-visible {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-text-bright) !important;
}

.sidebar .nav-items a.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-text-bright) !important;
    font-weight: 550;
    box-shadow: inset 3px 0 0 var(--sidebar-accent);
}


/* Shell chrome shared by the flat NavMenu and the grouped GroupedNavMenu (UI-201):
user card, nav glyphs, Praxis Bot button, footer utilities. Lived in NavMenu.razor's
style block until 2026-08-18; moved here so the grouped shell renders identically and
deleting NavMenu.razor after the flag flip orphans nothing. Values verbatim. */
/* User Card - Premium gold accent */
.sidebar .user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin: 0 0 8px 0;
    background: linear-gradient(135deg, rgba(201,169,98,0.12), rgba(201,169,98,0.04));
    border: 1px solid rgba(201,169,98,0.2);
    border-radius: 10px;
}
.sidebar .user-avatar {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 10px;
    background: var(--sidebar-accent-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(201,169,98,0.3);
}
.sidebar .user-details {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sidebar .user-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--sidebar-text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar .user-role {
    font-size: 11px;
    color: var(--sidebar-accent);
    font-weight: 500;
    letter-spacing: 0.3px;
}


/* Nav Items with Icons */
.sidebar .nav-items svg {
    width: 18px;
    height: 18px;
    min-width: 18px;
    opacity: 0.65;
    transition: opacity 0.2s;
}
.sidebar .nav-items a.active svg,
.sidebar .nav-items a:hover svg {
    opacity: 1;
}
.sidebar .nav-agent-workspace {
    width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 12px;
    color: var(--sidebar-text) !important; background: transparent; border: 0;
    border-radius: 8px; cursor: pointer; font: inherit; font-size: 13.5px;
    font-weight: 450; text-align: left; transition: all .2s;
}
.sidebar .nav-agent-workspace:hover,
.sidebar .nav-agent-workspace:focus-visible {
    background: var(--sidebar-hover-bg); color: var(--sidebar-text-bright) !important;
}
.nav-agent-workspace svg { opacity: .65; }
.nav-agent-workspace:hover svg, .nav-agent-workspace:focus-visible svg { opacity: 1; }

.sidebar .nav-footer {
    margin-top: auto;
    padding: 12px 0 8px 0;
    border-top: 1px solid var(--sidebar-border);
    flex-shrink: 0;
}
.sidebar .nav-utility-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-bottom: 8px;
}
.sidebar .nav-utility-btn {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 10px;
    background: rgba(201, 169, 98, 0.06);
    border: 1px solid rgba(201, 169, 98, 0.15);
    border-radius: 8px;
    color: var(--sidebar-text-muted, #94a3b8);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}
.sidebar .nav-utility-btn:hover {
    border-color: rgba(201, 169, 98, 0.4);
    color: var(--sidebar-accent, #c9a962);
}
.sidebar .logout-btn {
    width: 100%;
    padding: 10px 14px;
    background: rgba(201, 169, 98, 0.08);
    border: 1px solid rgba(201, 169, 98, 0.2);
    border-radius: 8px;
    color: var(--sidebar-accent, #c9a962);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    transition: all 0.2s;
}
.sidebar .logout-btn:hover {
    background: rgba(201, 169, 98, 0.16);
    border-color: rgba(201, 169, 98, 0.4);
    color: #e8d5a3;
}
.sidebar .logout-icon {
    width: 16px;
    height: 16px;
}
.sidebar .login-link {
    display: block;
    text-align: center;
    padding: 10px;
    background: rgba(201, 169, 98, 0.15);
    border-radius: 8px;
    color: var(--sidebar-text-bright);
    text-decoration: none;
    font-weight: 500;
}

/* Main Content Area */
main {
    min-height: 100vh;
    background: var(--bg-primary);
    overflow-x: hidden;
}

.content {
    background: var(--bg-primary);
    min-height: 0;
}

/* Top bar - seamless with content, no visible border */
.top-bar {
    background: var(--bg-primary) !important;
    color: var(--text-secondary);
    border-bottom: none;
    padding: 10px 24px;
}

/* WEBFIRST-01: the sticky top bar and its safe-area inset live in
   MainLayout.razor's style block, NOT here. That block renders into the
   body, so it comes after this stylesheet in document order and its
   shorthand `padding` silently beat a `padding-top` declared here. */

/* 16px-input-floor: iOS zooms the page on focus of any input under 16px.
   One shared floor instead of per-page fixes.

   These are type selectors, (0,0,1). Every page that styles its controls
   through a class -- .document-maker-guided-input, .cal-search-input,
   .notes-search -- beats them on specificity no matter the source order,
   so the floor was losing wherever it was most needed. A floor that loses
   is not a floor: it is !important on purpose. Do not remove without
   giving each page a 16px rule that outranks its own control classes.

   The -lg variants are exempt because they are already ABOVE the floor
   (Bootstrap sets 1.25rem); without the exemption this rule would shrink
   the MFA code field, the Notes title and the ClientPortal field to 16px. */
@media (max-width: 768px) {
    input:not(.form-control-lg):not(.form-select-lg),
    select:not(.form-select-lg):not(.form-control-lg),
    textarea:not(.form-control-lg),
    .form-control:not(.form-control-lg),
    .form-select:not(.form-select-lg) {
        font-size: 16px !important;
    }
}

/* per-component 44px touch targets: the blanket button rule misses
   anchors; drawer nav rows are the densest tap surface in the app. */
@media (pointer: coarse) {
    .sidebar .nav-items a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* ML-6u: what the rendered target walk measured under 44px on a phone (390x844, 2026-10-16). The language
       selector and the cookie bar are on every route, and their own rules are component styles of the same
       weight, so these name the parent. */
    .lang-dropdown .lang-trigger {
        min-height: 44px;
    }

    .cookie-buttons .cookie-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Bootstrap draws a select 38px tall at the phone text size and a small select or input 34px. */
    .form-select,
    .form-control {
        min-height: 44px;
    }

    /* A checkbox or a switch is also tapped through its label: the label is a full-height block on the line, and
       the box moves down by the label padding to stay level with its first line. */
    .form-check {
        min-height: 44px;
    }

    .form-check-label {
        display: inline-block;
        min-height: 44px;
        padding-block: 10px;
    }

    .form-check .form-check-input {
        margin-top: calc(10px + 0.25em);
    }

    .form-range {
        height: 44px;
    }

    /* A disclosure no rule of its own pads: a summary styled by its context keeps its own padding. */
    details > summary {
        padding-block: 10px;
    }

    /* ML-6w: the lists and the toolbar the target walk still measured under 44px after ML-6u. The dashboard: a
       matter heading's link, the task titles and the activity links (one line each, cut with an ellipsis, so the
       line itself is the target), the continue list, the legal fact's link (its own rule sets a smaller minimum
       later in this file, so this one is weightier). */
    .today-task-group__matter a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .today-task__title,
    .activity-item a[data-today-activity-case] {
        line-height: 44px;
    }

    .today-continue-list a {
        align-items: center;
        min-height: 44px;
    }

    a.legal-fact-link {
        min-height: 44px;
    }

    /* A day of the mini calendar is a button. */
    .mini-cal .mini-cal-grid td {
        height: 44px;
    }

    /* A link in a data view cell, the contact cards' e-mail among them. */
    .data-view tbody td a:not(.btn) {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* The mail editor's toolbar sets 32px boxes; a minimum outranks a fixed size whatever comes later. */
    .toolbar-select,
    .toolbar-input-size {
        min-height: 44px;
    }

    .toolbar-color-wrap {
        min-width: 44px;
        min-height: 44px;
    }

    /* GUIBATCH4: what the walk still measured after ML-6w. A bare checkbox in a list (a task's done box, the mail
       list's select all) is tapped through the label that wraps it, and a link alone on its line (the Harvest token
       page) takes the height of a target. */
    .touch-check {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        margin: 0;
        cursor: pointer;
    }

    a.touch-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* Content text inherits from theme */
main h1 {
    color: var(--heading-color);
    font-weight: 700;
    font-size: 1.75rem;
    letter-spacing: -0.01em;
}

main h2, main h3, main h4 {
    color: var(--heading-color);
    font-weight: 600;
}

main p, main li, main td {
    color: var(--text-secondary);
}

/* Cards */
main .card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

/* Stat cards: force children to inherit inline color from parent */
main .stat-card h1, main .stat-card h2, main .stat-card h3,
main .stat-card h4, main .stat-card h5, main .stat-card h6,
main .stat-card p {
    color: inherit;
}

main .card-header {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

main .card-header h5 {
    color: var(--text-primary);
}

/* Tables */
main .table {
    background: var(--bg-card);
}

main .table th {
    background: var(--accent-subtle);
    color: var(--heading-color);
    border-bottom: 2px solid var(--border-strong);
    font-weight: 700;
}

main .table td {
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}

main .table tbody tr:hover,
main .table tbody tr:focus-visible {
    background: var(--bg-hover);
}

/* Forms */
main .form-control,
main .form-select {
    background: var(--input-bg);
    border: 1px solid var(--input-border, var(--border-strong));
    color: var(--text-primary);
}

main .form-control:focus,
main .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

main .form-control::placeholder {
    color: var(--text-muted);
}

main .form-label {
    color: var(--text-secondary);
}

/* Modals follow theme */
.modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
}

.modal-header {
    border-bottom: 1px solid var(--border);
    padding: 1.25rem 1.5rem;
}

.modal-title {
    color: var(--text-primary);
    font-weight: 600;
}

.modal-body {
    padding: 1.5rem;
}

.modal-body .form-label {
    color: var(--text-secondary);
}

.modal-body .form-control,
.modal-body .form-select {
    background: var(--input-bg);
    border: 1px solid var(--input-border, var(--border-strong));
    color: var(--text-primary);
}

.modal-body .form-control:focus,
.modal-body .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

.modal-footer {
    border-top: 1px solid var(--border);
    padding: 1rem 1.5rem;
}

/* Text links */
main a:not(.btn):not(.btn-banner-action):not(.nav-items a) {
    color: var(--accent);
}

main a:not(.btn):not(.btn-banner-action):not(.nav-items a):hover,
main a:not(.btn):not(.btn-banner-action):not(.nav-items a):focus-visible {
    color: var(--accent-hover);
}

/* Empty state & muted text - ensure visible on dark bg */
main .text-muted,
.text-muted {
    color: var(--text-muted) !important;
}

/* Action links - gold accent */
main .btn-outline-primary {
    color: var(--accent);
    border-color: var(--accent);
    background: transparent;
}

main .btn-outline-primary:hover,
main .btn-outline-primary:focus-visible {
    background: var(--accent-subtle);
    color: var(--accent-hover);
}

main .btn-outline-secondary {
    color: var(--text-secondary);
    border-color: var(--border-strong);
    background: transparent;
}

main .btn-outline-secondary:hover,
main .btn-outline-secondary:focus-visible {
    background: var(--bg-hover);
    color: var(--text-primary);
}

main .btn-outline-danger {
    /* The label is TEXT, so it takes the text token; the border keeps the fill colour.
       --danger measured 4.21:1 on a table row and 3.4:1 on a muted surface in the dark
       theme - every Delete button on /contacts and /time. */
    color: var(--danger-text);
    border-color: var(--danger);
}

main .btn-outline-danger:hover,
main .btn-outline-danger:focus-visible {
    background: rgba(239, 68, 68, 0.1);
}

main .btn-outline-info {
    color: var(--accent);
    border-color: var(--accent);
}

/* ML-6f: the shipped Bootstrap is 5.1.0. Its .btn-outline-*:disabled sets color at (0,2,0) and outranked the rules
   above at (0,1,1), so every disabled outline button took Bootstrap's own blue or grey, 3.6 to 4.5:1 on the app's
   surfaces. A disabled button keeps the colours of its enabled state; Bootstrap's 0.65 opacity still marks it
   inactive. Outline success had no direct rule and was Bootstrap's green. Theme a button with direct rules: the
   --bs-btn-* variables are Bootstrap 5.2 and 5.1 reads none of them (BUTTON-THEME-BS51-01 removed 54). */
main .btn-outline-primary:disabled,
main .btn-outline-primary.disabled,
main .btn-outline-info:disabled,
main .btn-outline-info.disabled {
    color: var(--accent);
    border-color: var(--accent);
}

main .btn-outline-secondary:disabled,
main .btn-outline-secondary.disabled {
    color: var(--text-secondary);
    border-color: var(--border-strong);
}

main .btn-outline-danger:disabled,
main .btn-outline-danger.disabled {
    color: var(--danger-text);
    border-color: var(--danger);
}

main .btn-outline-success,
main .btn-outline-success:disabled,
main .btn-outline-success.disabled {
    color: var(--success-text);
    border-color: var(--success);
}

main .btn-outline-success:hover,
main .btn-outline-success:focus-visible {
    background: color-mix(in srgb, var(--success) 12%, transparent);
    color: var(--success-text);
}

/* ─── Search & Filter Inputs (G3) ─── */
main .form-control,
main .form-select,
main input[type="text"],
main input[type="search"],
main input[type="email"],
main input[type="date"],
main input[type="number"],
main select {
    background: var(--input-bg);
    border: 1px solid var(--input-border, var(--border-strong));
    color: var(--text-primary);
    border-radius: 8px;
}

main .form-control:focus,
main .form-select:focus,
main input:focus,
main select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
    outline: none;
}

/* Disabled inputs */
main .form-control:disabled,
main input:disabled {
    background: var(--bg-secondary);
    border-color: var(--border);
    color: var(--text-muted);
    opacity: 0.7;
}

/* ─── Action Icons / Small Buttons (G4) ─── */
main .btn-sm:not(.btn-primary):not([class*='btn-outline-']):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info) {
    color: var(--text-secondary);
    font-weight: 500;
}

main .btn-sm:not(.btn-primary):not([class*='btn-outline-']):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):hover,
main .btn-sm:not(.btn-primary):not([class*='btn-outline-']):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):focus-visible {
    color: var(--accent);
}

/* ─── Stat Card Footer Text (D2) ─── */
.card.stat-card small,
.card.bg-primary small,
.card.bg-success small,
.card.bg-info small,
.card.bg-danger small,
.card.bg-warning small,
.card.bg-secondary small {
    opacity: 0.9;
}

.card.stat-card .card-title,
.card.bg-primary .card-title,
.card.bg-success .card-title,
.card.bg-info .card-title,
.card.bg-danger .card-title,
.card.bg-warning .card-title {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ─── Info / Alert Boxes ─── */
.alert-info,
.bg-dark,
.card.bg-dark {
    background: var(--bg-secondary) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-primary) !important;
}

.text-info {
    color: var(--accent) !important;
}

.text-light {
    color: var(--text-primary) !important;
}

/* ─── Settings Page Specifics (S1-S3) ─── */
main .card .form-check-label {
    color: var(--text-secondary);
    /* A11Y-REMINDERS-LABEL-01: a long single word (de: Nachverfolgungen) at 200% text on a phone ran 9 px past the
       content area, which the text-resize audit reports as cut-off text; the label breaks inside the word rather
       than overflowing, hyphenated where the language allows. */
    overflow-wrap: anywhere;
    hyphens: auto;
}

main .card .form-switch .form-check-input {
    background-color: var(--bg-secondary);
    border-color: var(--border-strong);
}

main .card .form-switch .form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

/* ─── Calendar Grid (CAL1-CAL2) ─── */
main .calendar-grid td,
main .calendar-grid th {
    border-color: var(--border-strong);
    color: var(--text-secondary);
}

main .calendar-grid .today {
    background: var(--accent-subtle);
    color: var(--accent);
    font-weight: 700;
}

/* ─── Invoice Total Row (INV1) ─── */
main .table tfoot td,
main .table .total-row td {
    background: var(--accent-subtle);
    color: var(--heading-color);
    font-weight: 700;
    border-top: 2px solid var(--border-strong);
}
/* ─── Dashboard Layout ─── */
.sync-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.sync-indicator.connected {
    border-color: var(--success);
    color: var(--success);
}

.sync-indicator::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
}

.sync-indicator.connected::before {
    background: var(--success);
}

.stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    display: block;
    border-radius: var(--radius-xl);
    padding: 1.25rem;
    text-decoration: none !important;
    transition: transform 0.15s, box-shadow 0.15s;
    color: var(--text-on-accent) !important;
}

.stat-card:hover,
.stat-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.stat-primary { background: var(--accent-gradient); }
.stat-success { background: var(--success-gradient); }
.stat-danger  { background: var(--danger-gradient); }
.stat-info    { background: linear-gradient(135deg, var(--cyan), var(--cyan-hover)); }
.stat-purple  { background: var(--stat-purple); }
.stat-teal    { background: var(--stat-teal); }
.stat-pink    { background: var(--stat-pink); }
.stat-neutral { background: var(--bg-card); color: var(--text-primary) !important; border: 1px solid var(--border); }

.stat-title { font-size: 0.8rem; opacity: 0.85; margin-bottom: 0.5rem; font-weight: 500; }
.stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.stat-sub   { font-size: 0.75rem; opacity: 0.75; margin-top: 0.25rem; }
.stat-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }

.btn-outline-accent {
    border-color: var(--accent);
    color: var(--accent);
}
.btn-outline-accent:hover,
.btn-outline-accent:focus-visible {
    background: var(--accent);
    color: var(--text-on-accent);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* ─── Financial Summary Row ─── */
/* UI-301 Today board: four quadrants (attention, agenda, work, continue) in two
   columns from the desktop breakpoint, one column below. Sections keep their own
   dashboard-grid internally; inside a half-width cell that grid stacks. */
.today-board {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4, 16px);
    margin-bottom: var(--space-4, 16px);
}
@media (min-width: 1024px) {
    .today-board { grid-template-columns: 1fr 1fr; }
}
.today-board .dashboard-grid { grid-template-columns: 1fr; margin-bottom: 0; }
.today-board__cell { min-width: 0; }
.today-header-action { margin-left: var(--space-2, 8px); }
.today-section-title {
    font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-secondary); margin: var(--space-6, 24px) 0 var(--space-3, 12px);
}
.today-task-group { margin-bottom: var(--space-3, 12px); }
.today-task-group__matter { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 4px; }
.today-task-list { list-style: none; margin: 0; padding: 0; }
.today-task { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3, 12px); padding: 4px 0; border-bottom: 1px solid var(--border-subtle); }
.today-task:last-child { border-bottom: 0; }
.today-task__title { color: var(--text-primary); text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-task__title:hover { text-decoration: underline; }
.today-task__due { flex: 0 0 auto; }
.today-continue-timer {
    display: flex; align-items: center; gap: var(--space-2, 8px); flex-wrap: wrap;
    padding: var(--space-2, 8px) var(--space-3, 12px); margin-bottom: var(--space-3, 12px);
    border-radius: var(--radius-md, 6px); text-decoration: none; color: var(--text-primary);
    background: var(--status-success-surface); border: 1px solid var(--border-subtle);
}
.today-continue-timer--paused { background: var(--status-warning-surface); }
.today-continue-timer:hover { border-color: var(--border-default); }
.today-continue-timer__label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.today-continue-timer__case { font-weight: 600; }
.today-continue-timer__elapsed { margin-left: auto; font-variant-numeric: tabular-nums; }
.today-continue-heading { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); margin: var(--space-3, 12px) 0 4px; }
.today-continue-list { list-style: none; margin: 0; padding: 0; }
.today-continue-list li { padding: 4px 0; border-bottom: 1px solid var(--border-subtle); }
.today-continue-list li:last-child { border-bottom: 0; }
.today-continue-list a { color: var(--text-primary); text-decoration: none; display: flex; gap: var(--space-2, 8px); align-items: baseline; min-width: 0; }
.today-continue-list a:hover .today-continue-list__title { text-decoration: underline; }
.today-continue-list__number { font-family: 'Fira Code', Consolas, monospace; font-size: 12px; color: var(--text-secondary); flex: 0 0 auto; }
.today-continue-list__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* minmax(0, 1fr), not 1fr: a 1fr track never shrinks below its longest word, and at 200% text the
   Dutch "TOTAAL FACTUREERBAAR" pushed the dashboard 4px sideways at desktop width (ITR-WEB-02 loop 4). */
.financial-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.fin-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1rem 1.25rem;
    text-align: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.fin-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.fin-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
    margin-bottom: 0.35rem;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.fin-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.fin-value.text-gold {
    color: var(--accent);
}

.fin-value.text-warning {
    color: var(--warning);
}

.fin-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

@media (max-width: 1024px) {
    .financial-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .financial-row { grid-template-columns: minmax(0, 1fr); }
}

/* ─── Attention Panel ─── */
.attention-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.attention-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}

.attention-icon {
    font-size: 1rem;
}

.attention-items {
    display: flex;
    flex-direction: column;
}

.attention-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    text-decoration: none !important;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}

.attention-item:last-child {
    border-bottom: none;
}

.attention-item:hover,
.attention-item:focus-visible {
    background: var(--bg-hover);
}

.attention-item .alert-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.attention-item .alert-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.attention-item .alert-title {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
}

.attention-item .alert-detail {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.attention-item .alert-arrow {
    color: var(--text-muted);
    font-size: 1.1rem;
}

.attention-item.critical .alert-title { color: var(--danger-text); }
.attention-item.warning .alert-title { color: var(--warning-text); }

/* ─── Legal Fact Footer ─── */
.legal-fact-footer {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--border-radius);
    background:
        linear-gradient(135deg, var(--accent-6), transparent 55%),
        var(--bg-card);
    box-shadow: var(--shadow);
}

.legal-fact-content {
    min-width: 0;
}

.legal-fact-heading-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.legal-fact-icon {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    place-items: center;
    border-radius: 0.6rem;
    background: var(--accent-subtle);
    color: var(--accent);
}

.legal-fact-icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

.legal-fact-label {
    display: block;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.015em;
}

.legal-fact-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.12rem;
    color: var(--text-muted);
    font-size: 0.73rem;
    line-height: 1.3;
}

.legal-fact-meta-separator {
    color: var(--accent);
}

.legal-fact-text {
    margin: 0.65rem 0 0;
    max-width: 86ch;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.65;

    /* Justified to match the house convention this product applies to documents, where body
       text is justified by default. Hyphenation is not optional company here: Dutch and German
       compounds are long enough that justifying without it opens rivers of whitespace in a
       narrow column. It is safe to rely on because utils.js keeps document.documentElement.lang
       on the reader's actual locale, so the browser hyphenates in the language being read
       rather than in the one index.html happens to ship with. */
    text-align: justify;
    hyphens: auto;
}

.legal-fact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.35rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border-strong);
    border-radius: 0.65rem;
    background: var(--accent-6);
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.78rem;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.legal-fact-link svg {
    width: 0.9rem;
    height: 0.9rem;
}

.legal-fact-link:hover,
.legal-fact-link:focus-visible {
    border-color: var(--accent);
    background: var(--accent-12);
    color: var(--accent-hover);
    transform: translateY(-1px);
}

@media (max-width: 600px) {
    .legal-fact-footer {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 0.8rem;
    }

    .legal-fact-link {
        justify-self: start;
    }
}

@media (max-width: 1024px) {
    .stat-row { grid-template-columns: repeat(2, 1fr); }
    .dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .stat-row { grid-template-columns: 1fr; }
}

/* ─── Dashboard Skeleton Loading ─── */
.skeleton-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border);
    min-height: 100px;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}

/* ─── Dashboard Schedule Event Item ─── */
.schedule-event-item {
    background: color-mix(in srgb, var(--accent) 4%, transparent);
}

/* ─── Dashboard Activity Item ─── */
.activity-item {
    border-bottom: 1px solid var(--border);
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-item svg {
    color: var(--text-muted);
    flex-shrink: 0;
}

/* ─── Notes / Empty State Cards (N1) ─── */
main .card .empty-state,
main .card .text-center.text-muted {
    color: var(--text-muted) !important;
}

main .card p.text-muted {
    color: var(--text-muted) !important;
}

/* ─── Navigation Tab Filters ─── */
main .nav-tabs {
    border-bottom: 2px solid var(--border);
}

main .nav-tabs .nav-link {
    color: var(--text-muted);
    border: none;
    padding: 0.6rem 1rem;
    font-weight: 500;
    font-size: 0.85rem;
    transition: color 0.2s;
}

main .nav-tabs .nav-link:hover,
main .nav-tabs .nav-link:focus-visible {
    color: var(--text-primary);
}

main .nav-tabs .nav-link.active {
    color: var(--accent);
    border-bottom: 2px solid var(--accent);
    background: transparent;
}

/* ─── Filter/Toggle Buttons ─── */
main .btn-group .btn:not(.btn-primary):not([class*='btn-outline-']):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info) {
    background: var(--bg-secondary);
    border-color: var(--border-strong);
    color: var(--text-secondary);
}

main .btn-group .btn.active:not(.btn-primary),
main .btn-group .btn:checked:not(.btn-primary) {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg-primary, #0c1322);
}

/* Breadcrumbs */
.breadcrumb-item {
    color: var(--text-muted);
}

.breadcrumb-item.active {
    color: var(--text-primary);
}

/* ─── Calendar Grid (theme-aware) ─── */
.calendar-grid {
    border-color: var(--border-strong) !important;
}

.calendar-grid th {
    background: var(--accent-subtle) !important;
    color: var(--heading-color) !important;
    border-color: var(--border-strong) !important;
}

.calendar-grid td {
    background: var(--bg-card);
    border-color: var(--border) !important;
    color: var(--text-primary);
}

.calendar-grid td.cal-other-month {
    background: var(--bg-secondary);
    color: var(--text-muted);
}

.calendar-grid td.cal-today {
    background: var(--accent-subtle);
}

/* ─── Bootstrap Overrides: table-bordered, list-group, etc. ─── */
.table-bordered,
.table-bordered th,
.table-bordered td {
    border-color: var(--border) !important;
}

.list-group-item {
    background: var(--bg-card);
    border-color: var(--border);
    color: var(--text-secondary);
}

.list-group-item strong {
    color: var(--text-primary);
}

/* ─── Connection Status Indicators ─── */
.connection-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 500;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.connection-status.healthy {
    border-color: var(--success);
    color: var(--success-text);
}

.connection-status.healthy::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
}

.connection-status.unknown::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
}

/* Grid */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

.col-md-3,
.col-md-6,
.col-md-12 {
    padding: 0.75rem;
}

.col-md-3 {
    width: 25%;
}

.col-md-6 {
    width: 50%;
}

.col-md-12 {
    width: 100%;
}

/* Hide mobile elements by default (desktop) */
.hamburger {
    display: none;
}

.sidebar-overlay {
    display: none;
}

@media (max-width: 1024px) {

    .col-md-3,
    .col-md-6 {
        width: 100%;
    }

    .sidebar {
        position: fixed;
        left: -250px;
        transition: left 0.3s ease;
        z-index: 1000;
        /* Without a viewport-bound height the fixed sidebar grows to content
           height and its lower half (incl. logout, theme, language) is
           unreachable on phones - it must scroll internally. (100vh only:
           some webviews miscompute 100dvh as full document height.) */
        height: 100vh;
        max-height: 100vh;
        overflow-y: auto;
        /* 100vh spans under the home indicator, so the last nav row (logout,
           theme, language) sits beneath it. Pad the scroll floor instead. */
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    }

    .sidebar.open {
        left: 0;
    }

    main {
        padding: 0;
    }

    .top-bar {
        padding: 12px 12px;
    }

    .hamburger {
        display: flex;
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 8px;
        cursor: pointer;
    }

    .hamburger span {
        width: 20px;
        height: 2px;
        background: var(--text-primary);
        transition: all 0.3s;
    }

    .hamburger.open span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .hamburger.open span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.open span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }

    .sidebar-overlay.open {
        display: block;
    }
}

.mb-4 {
    margin-bottom: 1.5rem;
}

/* Text utilities */
.text-white {
    color: white !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

/* Loading state */
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: var(--border);
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--accent);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    color: var(--text-primary);
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

/* Error handling */
#blazor-error-ui {
    background: var(--danger);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: white;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: var(--danger);
    padding: 1rem;
    border-radius: var(--border-radius);
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* Validation */
.valid.modified:not([type=checkbox]) {
    outline: 2px solid var(--success);
}

.invalid {
    outline: 2px solid var(--danger);
}

.validation-message {
    color: var(--danger);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

code {
    background: var(--bg-secondary);
    color: var(--accent);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.875em;
}

/* Skeleton Loading Animation */
.skeleton {
    background: linear-gradient(90deg,
            var(--bg-secondary) 25%,
            var(--bg-card) 50%,
            var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
}

.skeleton-title {
    height: 1.5rem;
    width: 60%;
    margin-bottom: 1rem;
}

.skeleton-card {
    height: 120px;
    border-radius: var(--border-radius);
}

/* Button Micro-animations */
.btn {
    transition: all 0.2s ease;
}

.btn:hover:not(:disabled),
.btn:focus-visible:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn:active:not(:disabled) {
    transform: translateY(0);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
    background: var(--accent);
    color: white;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus-visible {
    background: var(--danger);
    color: white;
}

/* Card Hover Transitions */
.card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover,
.card:focus-visible {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Modal Animation */
.modal.fade.show {
    animation: modalFadeIn 0.2s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-dialog {
    animation: modalSlideIn 0.25s ease-out;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-20px);
    }

    to {
        transform: translateY(0);
    }
}

/* Toast Notification Styles */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    animation: toastSlideIn 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

@keyframes toastSlideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast-success {
    background: var(--success);
    color: var(--success-dark);
}
[data-theme="light"] .toast-success { color: var(--text-on-accent); }

.toast-error {
    background: var(--danger);
}

.toast-warning {
    background: var(--warning);
    color: var(--bg-primary);
}

.toast-info {
    background: var(--accent);
}

/* Smooth Table Row Hover */
.table tbody tr {
    transition: background-color 0.15s ease;
}

/* Focus States for Accessibility (WCAG 2.4.7 - Focus Visible) */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
a:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.list-group-item:focus-visible,
.badge:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
.modal .btn-close:focus-visible,
.offcanvas .btn-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--accent-15);
}

/* High contrast focus for dark backgrounds */
.sidebar a:focus-visible,
.sidebar button:focus-visible,
.top-bar button:focus-visible {
    outline-color: var(--accent);
    outline-offset: 3px;
}

/* Remove default outline only when focus-visible provides it */
:focus:not(:focus-visible) {
    outline: none;
}

/* Skip Navigation Link (WCAG 2.4.1) */
.skip-nav {
    position: absolute;
    top: -100%;
    left: 1rem;
    padding: 0.75rem 1.5rem;
    background: var(--accent);
    /* The first thing a keyboard user reaches, and in the light theme it was near-black
       on dark gold: 2.51:1. --btn-contrast flips with the theme. */
    color: var(--btn-contrast);
    font-weight: 600;
    border-radius: 0 0 8px 8px;
    z-index: 10000;
    text-decoration: none;
    transition: top 0.2s;
}

.skip-nav:focus {
    top: 0;
    color: var(--btn-contrast);
}

/* Reduced Motion (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High Contrast Mode (WCAG 1.4.11) */
@media (forced-colors: active) {
    .btn-primary {
        border: 2px solid ButtonText;
    }
    .card {
        border: 1px solid CanvasText;
    }
    .badge {
        border: 1px solid CanvasText;
    }
    .toast-item {
        border: 2px solid CanvasText;
    }

    /* ML-6n: a selected, pressed or current control is drawn as a themed fill, and forced colours keep a fill's
       alpha but not its colour: the case and work views, the Bundler's sources, the authoring tabs and the Compare
       modes looked like their neighbours, the sidebar's current page and the Bundler's stages differed by a 100-step
       weight. The state is read from ARIA and drawn in the system's selection colours; !important because the
       themed fills sit on selectors up to (0,3,1), and the cascade, not the forcing, picks the declaration - the
       sidebar's current link sets its colour !important at (0,3,1), so it is named here, later in the file. The
       content takes the selection text colour and no fill of its own, so nothing inside sits Canvas on Highlight. */
    .sidebar .nav-items a.active,
    [aria-current="page"],
    [aria-pressed="true"]:not(.cp-swatch),
    [aria-selected="true"] {
        background-color: Highlight !important;
        color: HighlightText !important;
    }

    :is([aria-current="page"], [aria-pressed="true"]:not(.cp-swatch), [aria-selected="true"]) * {
        background-color: transparent !important;
        color: inherit !important;
    }

    /* A swatch's colour is its content: it keeps it, and the chosen one keeps its ring. */
    .cp-swatch {
        forced-color-adjust: none;
    }
}

/* Screen reader only utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Responsive Improvements */
@media (max-width: 576px) {
    .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.7rem;
    }

    h1 {
        font-size: 1.5rem;
    }

    .card-body {
        padding: 1rem;
    }
}

/* ========================================
   Mobile Responsiveness Enhancements
   ======================================== */

/* 768px and below - tablets and large phones */
@media (max-width: 768px) {

    /* Tables: Horizontal scroll wrapper */
    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ML-4aa: a table keeps a width floor on a phone only when it is wide (four header columns or more) and
       sits in a sideways scroll region, where the floor keeps its columns readable and a finger scrolls to
       them. A narrower table fits its container, and a table outside a scroll region never runs past it:
       the floor on every table ran the reference tables of the interest and fee calculators past the edge
       of a phone and made a key and value table of three rows scroll sideways. */
    .table-responsive > .table:has(> thead > tr > :nth-child(4)) {
        min-width: 600px;
    }

    /* Smaller table cells on mobile */
    .table th,
    .table td {
        padding: 0.5rem;
        font-size: 0.8125rem;
    }

    /* Admin tabs: wrap on mobile */
    .admin-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        padding-bottom: 0.5rem;
    }

    /* Table responsive wrapper for horizontal scroll */
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive .admin-table {
        min-width: 600px;
    }

    .admin-tabs .tab {
        flex: 1 1 auto;
        min-width: 70px;
        text-align: center;
        padding: 0.5rem 0.5rem;
        font-size: 0.75rem;
    }

    /* Admin page padding */
    .admin-page {
        padding: 1rem !important;
    }

    /* Admin section responsive */
    .admin-section {
        padding: 1rem;
        border-radius: 0.75rem;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    /* Admin table: minimum width for horizontal scroll */
    .admin-table {
        min-width: 700px;
    }

    .admin-table th,
    .admin-table td {
        padding: 0.5rem;
        font-size: 0.8rem;
    }

    /* Touch-friendly button sizes (min 44px tap target per WCAG) */
    .btn,
    button {
        min-height: 44px;
        min-width: 44px;
    }

    /* Stack action buttons vertically */
    .action-buttons,
    .actions {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    /* Modal improvements */
    .modal-dialog {
        margin: 0.5rem;
        max-height: calc(100vh - 1rem);
    }

    .modal-content {
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }

    .modal-header,
    .modal-footer {
        padding: 0.75rem 1rem;
    }

    .modal-body {
        padding: 1rem;
    }

    /* WEBFIRST-01 shell-owns-padding: the shell root .page must NOT frame
       the app (it left ~280px of usable width at 360px). The width was
       reclaimed by dropping .page from this mobile padding group and by
       removing Bootstrap's px-4 from the article; the top-level
       `.page { padding: 0 }` rule already zeroes it at every width, so no
       override belongs here. The content region carries the single
       responsive padding instead. */
    .content {
        padding: 1rem var(--praxis-page-padding, 16px);
    }

    /* Same principle one level in: ten pages wrap themselves in
       .container-fluid, whose Bootstrap gutter stacks a further 0.75rem
       on each side of the padding .content already owns. Zero the
       horizontal gutter and leave the vertical rhythm (py-*) alone. */
    .content > .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }

    /* Cards stack full width */
    .card {
        margin-bottom: 0.75rem;
    }

    /* Form controls: full width */
    .form-control,
    .form-select {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .content {
        padding: 0.75rem var(--praxis-page-padding, 16px);
    }
}
/* ML-1b: the compact shell's layout tokens, outside the theme palettes (which stay parallel): the page padding
   (12px at 320px, 16px from 360px, 20px on a large phone and a tablet) and the tablet rail's reserved width
   (0 outside 600 to 1024px). The defaults come first; the media queries below override them by width. Each
   padding is max(px, 0.75rem): the pixels at normal text, and never less than the half-gutter of a Bootstrap
   row, whose negative margins are rem - a fixed 16px let rows cross the content edge by 8px at 200% text (the
   first ring run of the mobile layout, 2026-10-14). */
:root {
    --praxis-page-padding: max(16px, 0.75rem);
    --praxis-compact-rail-width: 0px;
}
@media (max-width: 359px) {
    :root {
        --praxis-page-padding: max(12px, 0.75rem);
    }
}
@media (min-width: 480px) and (max-width: 1024px) {
    :root {
        --praxis-page-padding: max(20px, 0.75rem);
    }
}
@media (min-width: 600px) and (max-width: 1024px) {
    :root {
        --praxis-compact-rail-width: calc(72px + env(safe-area-inset-left, 0px));
    }
    main {
        padding-left: var(--praxis-compact-rail-width, 0px);
    }
    /* ML-6p: a document open in the Document Maker (a route below an immersive segment) and the phone app draw
       no rail, and main kept its 72px anyway - an empty dark strip down the left of the editor on an iPad (the
       WebKit engine journey on the ring, 2026-10-16). The reservation follows the rail. */
    .page:not(:has(> .compact-rail)) > main {
        padding-left: 0;
    }
    .hamburger,
    .sidebar,
    .sidebar-overlay {
        display: none;
    }
}

/* 480px and below - phones */
@media (max-width: 480px) {
    h1 {
        font-size: 1.25rem;
    }

    h2 {
        font-size: 1.125rem;
    }

    /* Reduce table minimum width for very small screens (ML-4aa: a wide table in a scroll region only) */
    .table-responsive > .table:has(> thead > tr > :nth-child(4)) {
        min-width: 400px;
    }

    /* Hide less important columns on very small screens */
    .table .hide-mobile {
        display: none;
    }

    /* Compact badges */
    .badge {
        font-size: 0.625rem;
        padding: 0.15rem 0.4rem;
    }

    /* Stack modal buttons */
    .modal-footer {
        flex-direction: column;
        gap: 0.5rem;
    }

    .modal-footer .btn {
        width: 100%;
    }
}

/* Connection Health Status Indicators */
.connection-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.connection-status.healthy {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success-text);
}

.connection-status.degraded {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning-text);
}

.connection-status.error {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger-text);
}

.connection-status.unknown {
    background: rgba(100, 116, 139, 0.15);
    color: var(--text-secondary);
}

.connection-status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

/* Toast Notification Position Fix for Mobile */
/* WEBFIRST-01: this reposition targeted the dead .toast-container class;
   the live component renders .toast-container-global. Bottom placement
   respects the stacked bottom bars and the home-indicator safe area. */
@media (max-width: 576px) {
    .toast-container-global {
        left: 10px;
        right: 10px;
        top: auto;
        bottom: calc(20px + var(--praxis-cookie-height, 0px) + var(--praxis-compact-nav-height, 0px) + env(safe-area-inset-bottom));
        max-width: none;
    }
}

/* ═══════════════════════════════════════════════════
   Client Intake
   ═══════════════════════════════════════════════════ */

.intake-page {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-primary) 100%);
}

.intake-container {
    width: 100%;
    max-width: 720px;
}

.intake-header,
.intake-section,
.intake-actions,
.intake-success {
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2rem;
    color: var(--text-primary);
}

.intake-header {
    margin-bottom: 1.5rem;
    text-align: center;
}

.intake-section {
    margin-bottom: 1.5rem;
}

.intake-section h5 {
    color: var(--accent);
    margin-bottom: 1rem;
}

.intake-actions {
    text-align: center;
}

.intake-success {
    text-align: center;
    padding: 3rem 2rem;
}

.intake-success .success-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.intake-section .form-control,
.intake-section .form-select {
    background: var(--input-bg);
    border-color: var(--border);
    color: var(--text-primary);
}

.intake-section .form-control:focus,
.intake-section .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.2rem var(--accent-subtle);
}

.intake-section .form-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
}

@media (max-width: 768px) {
    .intake-section {
        padding: 1.25rem;
    }
}

/* ═══════════════════════════════════════════════════
   Engagement acceptance (/engage) - the page a client reads their lawyer's terms on,
   accepts them on, and may withdraw from. No shell, so it carries its own frame; the
   intake form's cards set the look, and every colour comes from the theme tokens.
   ═══════════════════════════════════════════════════ */

.engage-page {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-primary) 100%);
}

.engage-container {
    width: 100%;
    max-width: 760px;
}

.engage-card {
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2rem;
    color: var(--text-primary);
}

.engage-card h1 {
    font-size: 1.6rem;
    color: var(--heading-color);
    margin-bottom: 0.75rem;
}

.engage-card h2 {
    font-size: 1.05rem;
    color: var(--accent);
    margin: 1.75rem 0 0.75rem;
}

.engage-muted {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.engage-facts {
    display: grid;
    grid-template-columns: minmax(9rem, 14rem) 1fr;
    gap: 0.4rem 1rem;
    margin: 0;
}

.engage-fact {
    display: contents;
}

.engage-fact dt {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.9rem;
    /* Dutch compounds - "Beroepsaansprakelijkheidsverzekering" - are longer than the column. */
    overflow-wrap: anywhere;
    hyphens: auto;
}

.engage-fact dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.engage-terms {
    white-space: pre-wrap;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    max-height: 22rem;
    overflow-y: auto;
    line-height: 1.6;
    font-size: 0.95rem;
}

.engage-check {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    margin: 0.9rem 0;
    cursor: pointer;
}

.engage-check input {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.2rem;
    accent-color: var(--accent);
}

.engage-accept {
    display: block;
    width: 100%;
    margin-top: 1.5rem;
    padding: 0.85rem 1.25rem;
    border: none;
    border-radius: 10px;
    background: var(--accent);
    color: var(--btn-contrast);
    font-weight: 600;
    font-size: 1rem;
}

.engage-accept:hover:not(:disabled) {
    background: var(--accent-hover);
}

.engage-accept:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.engage-accept:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.engage-error {
    color: var(--danger-text);
    margin-top: 1rem;
}

.engage-withdraw {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.engage-model-form {
    margin: 0.5rem 0 1rem;
}

.engage-model-form summary {
    cursor: pointer;
    color: var(--accent);
}

.engage-model-form pre {
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 0.9rem;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem;
    margin-top: 0.5rem;
}

@media (max-width: 640px) {
    .engage-card {
        padding: 1.25rem;
    }

    .engage-facts {
        grid-template-columns: 1fr;
    }

    .engage-fact dt {
        margin-top: 0.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════ */
/*  NOTIFICATION CENTER - Premium Glassmorphic Design             */
/* ═══════════════════════════════════════════════════════════════ */

/* Bell Button */
.notif-bell-btn {
    background: none;
    border: none;
    padding: 6px;
    color: var(--accent-65);
    cursor: pointer;
    position: relative;
    border-radius: 8px;
    transition: all 0.2s ease;
}
[data-theme="light"] .notif-bell-btn {
    color: var(--text-secondary);
}
.notif-bell-btn:hover,
.notif-bell-btn:focus-visible {
    color: var(--accent);
    background: var(--accent-10);
    transform: scale(1.05);
}
.notif-bell-btn.active {
    color: var(--accent);
    background: var(--accent-12);
}

/* Badge */
.notif-badge {
    position: absolute;
    top: -2px;
    right: -4px;
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--danger-gradient);
    color: var(--text-on-accent);
    border-radius: 9px;
    padding: 0 4px;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
    animation: notif-badge-pop 0.3s ease-out;
}
@keyframes notif-badge-pop {
    0% { transform: scale(0.5); opacity: 0; }
    70% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

/* Panel */
.notif-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: min(380px, calc(100vw - 24px));
    max-height: 480px;
    max-height: min(480px, calc(100dvh - 80px));
    z-index: 1050;
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: notif-slide-in 0.25s ease-out;
}
@media (max-width: 480px) {
    .notif-panel {
        position: fixed;
        right: 12px;
        top: auto;
        bottom: 12px;
        max-height: calc(100dvh - 24px);
    }
}
@keyframes notif-slide-in {
    0% { opacity: 0; transform: translateY(-8px) scale(0.97); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header */
.notif-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--border);
}
.notif-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 6px;
}
.notif-live-dot {
    color: var(--success);
    font-size: 0.45rem;
    animation: notif-pulse 2s infinite;
}
@keyframes notif-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.notif-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.notif-panel-close {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: -8px -8px -8px 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.notif-panel-close:hover,
.notif-panel-close:focus-visible {
    color: var(--accent);
    background: var(--accent-10);
}
.notif-action-btn {
    background: none;
    border: none;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--accent-60);
    cursor: pointer;
    padding: 2px 0;
    transition: color 0.15s;
}
.notif-action-btn:hover,
.notif-action-btn:focus-visible {
    color: var(--accent);
}
.notif-action-clear {
    color: rgba(239, 68, 68, 0.6);
}
.notif-action-clear:hover,
.notif-action-clear:focus-visible {
    color: var(--danger);
}

/* List */
.notif-list {
    flex: 1;
    min-height: 0;
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-15) transparent;
}
.notif-list::-webkit-scrollbar { width: 4px; }
.notif-list::-webkit-scrollbar-track { background: transparent; }
.notif-list::-webkit-scrollbar-thumb { background: var(--accent-20); border-radius: 4px; }

/* Item */
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 20px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    position: relative;
    transition: background 0.15s ease, transform 0.1s ease;
}
.notif-item:hover,
.notif-item:focus-within,
.notif-item:focus-visible {
    background: var(--accent-6);
}
.notif-item:active {
    transform: scale(0.995);
}
.notif-item.notif-unread {
    background: var(--accent-4);
    border-left: 3px solid var(--accent-gold);
    padding-left: 17px;
}
.notif-item.notif-unread:hover,
.notif-item.notif-unread:focus-visible {
    background: var(--accent-8);
}

/* Icon wrap */
.notif-icon-wrap {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-top: 2px;
}
.notif-icon-warning { background: rgba(245, 158, 11, 0.12); }
.notif-icon-danger  { background: rgba(239, 68, 68, 0.12); }
.notif-icon-success { background: rgba(16, 185, 129, 0.12); }
.notif-icon-info    { background: rgba(56, 189, 248, 0.12); }

/* Content */
.notif-content {
    flex-grow: 1;
    overflow: hidden;
    min-width: 0;
}
.notif-content-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
.notif-item-title {
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.notif-item-title.unread {
    color: var(--accent);
    font-weight: 600;
}
.notif-message {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.notif-time {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 4px;
    display: block;
}

/* Transparent activation layer: gives the whole notification row keyboard
   operability without wrapping the dismiss button in another control. */
.notif-open {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.notif-open:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -3px;
}

/* Dismiss button */
.notif-dismiss {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 4px;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s;
    display: flex;
    opacity: 0;
    position: relative;
    z-index: 2;
}
.notif-item:hover .notif-dismiss,
.notif-item:focus-within .notif-dismiss,
.notif-item:focus-visible .notif-dismiss {
    opacity: 1;
}
/* Hover-to-reveal hides the control outright on touch, where there is no
   hover state to enter. Same pattern document-maker.css already uses. */
@media (hover: none) {
    .notif-dismiss {
        opacity: 1;
    }
}
.notif-dismiss:hover,
.notif-dismiss:focus-visible {
    color: var(--danger);
    background: rgba(239, 68, 68, 0.1);
}

/* Unread dot */
.notif-unread-dot {
    position: absolute;
    top: 18px;
    right: 14px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent-40);
}

/* Empty state */
.notif-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}
.notif-empty-icon {
    opacity: 0.3;
    margin-bottom: 12px;
}
.notif-empty p {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 500;
}
.notif-empty small {
    display: block;
    margin-top: 4px;
    font-size: 0.78rem;
    opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════════ */
/*  EXHAUSTIVE DARK MODE HARDENING - Catch-all for Bootstrap      */
/* ═══════════════════════════════════════════════════════════════ */

/* Alerts - force dark backgrounds */
.alert-warning {
    background-color: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.25) !important;
    color: var(--warning-text) !important;
}
.alert-info {
    background-color: rgba(56, 189, 248, 0.1) !important;
    border-color: rgba(56, 189, 248, 0.2) !important;
    color: var(--accent) !important;
}
.alert-success {
    background-color: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.2) !important;
    color: var(--success-text) !important;
}
.alert-danger {
    background-color: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
    color: var(--danger-text) !important;
}
.alert-primary {
    background-color: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
    color: var(--accent) !important;
}
.alert-secondary {
    background-color: rgba(100, 116, 139, 0.1) !important;
    border-color: rgba(100, 116, 139, 0.2) !important;
    color: var(--text-secondary) !important;
}

/* ─── Text color utilities - theme-aware ─── */
.text-success {
    color: var(--success) !important;
}
.text-danger {
    /* --danger is the FILL colour (buttons, badges). As text on a dark surface it
       measured 3.38:1 - the overdue dates on /cases and /deadlines were the failures.
       --danger-text is the token that already exists for text and passes AA on every
       surface in both themes. */
    color: var(--danger-text) !important;
}
.text-warning {
    color: var(--warning-text) !important;
}

/* ─── Button variants - Gold theme parity ─── */
.btn-secondary {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text-primary) !important;
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
    background: var(--bg-hover) !important;
    border-color: var(--accent) !important;
}
.btn-secondary:disabled {
    opacity: 0.5;
}

.btn-success {
    background: var(--success) !important;
    border-color: var(--success) !important;
    color: var(--btn-contrast) !important;
}
.btn-success:hover,
.btn-success:focus-visible {
    filter: brightness(1.1);
}

.btn-warning {
    background: var(--warning) !important;
    border-color: var(--warning) !important;
    color: var(--btn-contrast) !important;
}
.btn-warning:hover,
.btn-warning:focus-visible {
    filter: brightness(1.1);
}

.btn-danger {
    background: var(--danger) !important;
    border-color: var(--danger) !important;
    color: var(--btn-contrast) !important;
}
.btn-danger:hover,
.btn-danger:focus-visible {
    filter: brightness(1.1);
}

/* BUTTON-THEME-BS51-01: .btn-info had only Bootstrap 5.2 variables, which 5.1 ignores, so it kept Bootstrap's cyan
   under the --btn-contrast text: white in the light theme, 1.96:1. It takes the direct rule of its siblings. */
.btn-info {
    background: var(--info) !important;
    border-color: var(--info) !important;
    color: var(--btn-contrast) !important;
}
.btn-info:hover,
.btn-info:focus-visible {
    filter: brightness(1.1);
}

/* ─── Badge variants - theme-aware ─── */
.badge.bg-secondary {
    background: var(--accent-15) !important;
    color: var(--accent) !important;
}
.badge.bg-dark {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border);
}
.badge.bg-info {
    background: var(--accent-20) !important;
    color: var(--accent) !important;
}

/* The dark theme's primary badge put the accent on a 20% accent tint: 3.93:1 for
   "In Progress" on /tasks. A lighter gold on the same tint clears AA without losing the
   badge's colour identity; the light theme has its own rule below. */
.badge.bg-primary {
    background: var(--accent) !important;
    color: var(--bg-primary) !important;
}

/* Light-mode badge contrast fixes */
[data-theme="light"] .badge.bg-secondary {
    background: var(--accent-25) !important;
    color: var(--accent-active) !important;
}
[data-theme="light"] .badge.bg-info {
    background: var(--accent-30) !important;
    /* accent-active on a 30% accent tint measured 4.38:1 - a shade darker clears AA. */
    color: #4d3c0e !important;
}
[data-theme="light"] .badge.bg-primary {
    background: var(--accent) !important;
    color: var(--btn-contrast) !important;
}

/* ─── Table row highlights - theme-aware ─── */
.table-primary,
.table-primary > td,
.table-primary > th {
    background: var(--accent-8) !important;
    color: var(--text-primary) !important;
}
.table-danger,
.table-danger > td,
.table-danger > th {
    background: color-mix(in srgb, var(--danger) 8%, transparent) !important;
    color: var(--danger-text) !important;
}

/* ─── Developer mode header - theme-aware ─── */
.card-header.bg-warning {
    background: color-mix(in srgb, var(--warning) 15%, transparent) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--warning) 25%, transparent) !important;
    color: var(--warning-text) !important;
}
.card-header.bg-warning .text-dark {
    color: var(--warning-text) !important;
}
.card-header.bg-warning .badge.bg-dark {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* ─── Progress bar - Gold accent ─── */
.progress-bar.bg-primary {
    background: var(--accent) !important;
}

/* ─── Form text - theme-aware ─── */
.form-text {
    color: var(--text-muted) !important;
}

/* Pagination */
.page-link {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}
.page-link:hover,
.page-link:focus-visible {
    background-color: var(--bg-hover) !important;
    color: var(--accent) !important;
}
.page-item.active .page-link {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--bg-primary) !important;
}
.page-item.disabled .page-link {
    background-color: var(--bg-primary) !important;
    color: var(--text-muted) !important;
}

/* Breadcrumbs */
.breadcrumb {
    background-color: transparent;
}
.breadcrumb-item a {
    color: var(--accent);
}
.breadcrumb-item.active {
    color: var(--text-muted);
}
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-muted);
}

/* Accordion */
.accordion-item {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
}
.accordion-button {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
    background-color: var(--bg-secondary) !important;
    color: var(--accent) !important;
}
.accordion-button::after {
    filter: invert(0.7) sepia(1) saturate(3) hue-rotate(10deg);
}
.accordion-body {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* Tooltips & Popovers */
.tooltip-inner {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
}
.popover {
    background-color: var(--bg-card);
    border-color: var(--border);
}
.popover-header {
    background-color: var(--bg-secondary);
    border-bottom-color: var(--border);
    color: var(--text-primary);
}
.popover-body {
    color: var(--text-primary);
}

/* Close button - theme-aware */
:root .btn-close,
[data-theme="dark"] .btn-close,
[data-theme="amoled"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}
[data-theme="light"] .btn-close {
    filter: none;
}

/* Progress bars */
.progress {
    background-color: var(--accent-8) !important;
}

/* Input groups */
.input-group-text {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
}

/* Form checks / switches */
.form-check-input {
    background-color: var(--bg-secondary);
    border-color: var(--border-strong);
}
.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}
.form-check-label {
    color: var(--text-primary);
}

/* Toast containers */
.toast {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}
.toast-header {
    background-color: var(--bg-secondary) !important;
    border-bottom-color: var(--border) !important;
    color: var(--text-primary) !important;
}

/* Badge - ensure readable text on colored badges */
.badge.bg-warning { color: var(--warning-text) !important; }
/* The light-theme override used to force WHITE here, over a background that is the
   warning colour at 18% - "Due Soon" measured 1.17:1 and was effectively blank. */
[data-theme="light"] .badge.bg-warning { color: var(--warning-text) !important; }
[data-theme="light"] .bg-success { background: var(--success) !important; color: var(--text-on-accent) !important; }
[data-theme="light"] .btn-success { background: var(--success) !important; border-color: var(--success) !important; color: var(--text-on-accent) !important; }
.badge.bg-light { background-color: var(--accent-12) !important; color: var(--text-primary) !important; }

/* ─── bg-light / text-dark - dark mode hardening ─── */
.bg-light {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}
.text-dark {
    color: var(--text-primary) !important;
}
/* Inside bg-warning context, text-dark must be dark on amber */
.bg-warning .text-dark,
.bg-warning.text-dark {
    color: var(--bg-primary) !important;
}

/* Navbar - theme-aware */
.navbar-light,
.navbar-light.bg-light {
    background-color: var(--bg-card) !important;
    border-bottom-color: var(--border) !important;
}
.navbar-light .navbar-brand,
.navbar-light .navbar-nav .nav-link {
    color: var(--text-primary) !important;
}

/* List group - theme-aware */
.list-group-item {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border);
}
.list-group-item-action:hover,
.list-group-item-action:focus-visible {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

/* Code blocks - theme-aware */
code {
    color: var(--accent);
}
code.bg-light,
.bg-light code {
    background-color: var(--bg-secondary) !important;
    color: var(--accent) !important;
}

/* ─── Remaining outline button variants ─── */
.btn-outline-warning {
    /* "Batch bill" measured 4.22:1 in the light theme with --warning as its label. */
    color: var(--warning-text) !important;
    border-color: var(--warning) !important;
    background: transparent !important;
}
.btn-outline-warning:hover,
.btn-outline-warning:focus-visible {
    background: rgba(245, 158, 11, 0.1) !important;
    color: var(--warning-text) !important;
}
.btn-outline-success {
    color: var(--success) !important;
    border-color: var(--success) !important;
    background: transparent !important;
}
.btn-outline-success:hover,
.btn-outline-success:focus-visible {
    background: rgba(16, 185, 129, 0.1) !important;
    color: var(--success-text) !important;
}

/* Table active row */
.table-active,
.table-active > td,
.table-active > th {
    background: var(--accent-8) !important;
    color: var(--text-primary) !important;
}

/* ─── Text utilities - map to theme variables ─── */
.text-primary {
    color: var(--accent) !important;
}
.text-secondary {
    color: var(--text-secondary) !important;
}

/* btn-dark */
.btn-dark {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text-primary) !important;
}
.btn-dark:hover,
.btn-dark:focus-visible {
    background: var(--bg-hover) !important;
}

/* Offcanvas */
.offcanvas {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}
.offcanvas-header {
    border-bottom: 1px solid var(--border);
}

/* Ensure native inputs match theme */
:root input, :root textarea, :root select,
[data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select,
[data-theme="amoled"] input, [data-theme="amoled"] textarea, [data-theme="amoled"] select {
    color-scheme: dark;
}
[data-theme="light"] input, [data-theme="light"] textarea, [data-theme="light"] select {
    color-scheme: light;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--input-border, var(--border-strong)) !important;
}
input:focus, textarea:focus, select:focus {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px var(--accent-15) !important;
}

/* ═══════════════════════════════════════════════════════════════ */
/*  SYNC HEALTH BAR - Dashboard Diagnostics                       */
/* ═══════════════════════════════════════════════════════════════ */
.sync-health-bar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 1.25rem;
}
.health-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 0.84rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.health-item:hover,
.health-item:focus-visible {
    transform: translateX(2px);
}
.health-ok {
    background: rgba(16, 185, 129, 0.06);
    border: 1px solid rgba(16, 185, 129, 0.15);
    color: var(--success-text);
    cursor: default;
}
.health-ok:hover { transform: none; }
.health-ok:focus-visible { transform: none; }
.health-warn {
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: var(--warning-text);
}
.health-warn:hover,
.health-warn:focus-visible {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.35);
}
.health-error {
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: var(--danger-text);
}
.health-error:hover,
.health-error:focus-visible {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.35);
}
.health-icon {
    font-size: 1rem;
    flex-shrink: 0;
}
.health-msg {
    flex: 1;
    font-weight: 500;
}
.health-action {
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0.8;
    /* PLAY-01 capstone finding (WCAG 1.4.4): nowrap made this label overflow
       main by 16px at 200% text on a 390px phone - the sync-health bar only
       renders once a firm has storage configured, so the first seeded fixture
       with a real storage box surfaced it. Let it wrap and shrink instead. */
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ═══════════════════════════════════════════════════════════════ */
/*  MIGRATION WIZARD - First-Login Onboarding Overlay             */
/* ═══════════════════════════════════════════════════════════════ */
.wizard-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: wizard-fade-in 0.3s ease;
}
@keyframes wizard-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.wizard-card {
    background: var(--bg-card);
    border: 1px solid var(--accent-20);
    border-radius: 20px;
    width: 560px;
    max-width: 92vw;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6),
                0 0 0 1px var(--accent-8);
    animation: wizard-slide-up 0.35s ease;
}
@keyframes wizard-slide-up {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.wizard-header {
    padding: 28px 32px 0;
    text-align: center;
}
.wizard-header h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 8px;
    background: var(--accent-gradient-warm);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.wizard-header p {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin: 0;
}
.wizard-body {
    padding: 24px 32px;
}
.wizard-footer {
    padding: 16px 32px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.wizard-steps {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 20px 0 8px;
}
.wizard-step-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent-20);
    transition: all 0.25s;
}
.wizard-step-dot.active {
    background: var(--accent-gold);
    width: 24px;
    border-radius: 4px;
}
.wizard-step-dot.done {
    background: var(--success);
}
.wizard-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid var(--accent-12);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: 8px;
    color: var(--text-primary);
}
.wizard-option:hover,
.wizard-option:focus-visible {
    border-color: var(--accent-35);
    background: var(--accent-6);
}
.wizard-option.selected {
    border-color: var(--accent-gold);
    background: var(--accent-10);
    box-shadow: 0 0 12px var(--accent-12);
}
.wizard-option-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    width: 40px;
    text-align: center;
}
.wizard-option-text {
    flex: 1;
}
.wizard-option-text strong {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 2px;
}
.wizard-option-text small {
    color: var(--text-muted);
    font-size: 0.78rem;
}
.wizard-btn {
    padding: 10px 24px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
}
.wizard-btn-primary {
    background: var(--accent-gradient);
    color: var(--bg-primary, #0c1322);
}
.wizard-btn-primary:hover,
.wizard-btn-primary:focus-visible {
    background: var(--accent-gradient-bright);
    transform: translateY(-1px);
}
.wizard-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}
.wizard-btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--accent-15);
}
.wizard-btn-ghost:hover,
.wizard-btn-ghost:focus-visible {
    color: var(--text-primary);
    border-color: var(--accent-30);
}
.wizard-skip {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 4px 0;
}
.wizard-skip:hover,
.wizard-skip:focus-visible {
    color: var(--text-primary);
}
.wizard-summary-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 8px;
    font-size: 0.85rem;
}
.wizard-summary-ok {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: var(--success-text);
}
.wizard-summary-skip {
    background: rgba(100, 116, 139, 0.08);
    border: 1px solid rgba(100, 116, 139, 0.15);
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════ */
/*  PASSWORD VISIBILITY TOGGLE - Global reusable component        */
/* ═══════════════════════════════════════════════════════════════ */
.pwd-wrapper {
    position: relative;
}
.pwd-wrapper input {
    padding-right: 2.75rem !important;
}
.pwd-toggle {
    position: absolute;
    right: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    z-index: 2;
}
.pwd-toggle:hover,
.pwd-toggle:focus-visible {
    color: var(--accent);
}
.pwd-toggle svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── ISO 27001 A.8.11: MaskedField - click-to-reveal sensitive data ── */
.masked-field {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.masked-field .masked-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted, #94a3b8);
    margin-right: 4px;
}

.masked-field .masked-value {
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border: 0;
    color: inherit;
    background: transparent;
    text-align: left;
    border-radius: 4px;
    transition: all 0.2s;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
}

.masked-field.masked .masked-value {
    background: rgba(148, 163, 184, 0.08);
    color: var(--text-muted, #94a3b8);
}

.masked-field.masked .masked-value:hover,
.masked-field.masked .masked-value:focus-visible {
    background: rgba(201, 169, 98, 0.12);
    color: var(--accent, #c9a962);
}

.masked-field.revealed .masked-value {
    background: rgba(16, 185, 129, 0.08);
    color: var(--text-primary, #e2e8f0);
}

.masked-field .field-icon {
    font-size: 10px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.masked-field .masked-value:hover .field-icon,
.masked-field .masked-value:focus-visible .field-icon {
    opacity: 1;
}

/* ═══ Keyboard Shortcut Keys ═══ */
kbd {
    display: inline-block;
    padding: 2px 8px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--text-secondary, #b0bec5);
    background: var(--bg-secondary, rgba(255,255,255,0.06));
    border: 1px solid var(--border-color, rgba(201,169,98,0.2));
    border-radius: 4px;
    box-shadow: 0 1px 0 var(--border-color, rgba(201,169,98,0.15));
    white-space: nowrap;
    min-width: 22px;
    text-align: center;
}

/* ═══════ Themed Tables ═══════ */
/* Override Bootstrap table colors for dark/light/amoled themes */
main .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border);
    color: var(--text-primary);
    border-color: var(--border);
}

main .table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--text-primary);
    border-bottom-color: var(--border);
}

main .table > thead {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

main .table > thead > tr > th {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid var(--border);
    padding: 0.65rem 0.75rem;
}

/* Themed striped rows (replaces table-striped) */
main .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: var(--accent-4);
    background-color: var(--accent-4);
}

/* Themed hover rows (replaces table-hover) */
main .table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: var(--accent-8);
    background-color: var(--accent-8);
    color: var(--text-primary);
}

/* Override table-dark to use our theme */
main .table-dark,
main .table > thead.table-dark {
    --bs-table-bg: var(--bg-secondary);
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border);
    background-color: var(--bg-secondary) !important;
}

main .table-dark > tr > th,
main .table-dark > tr > td,
main .table > thead.table-dark > tr > th {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

/* Themed table footer totals */
main .table > tfoot > tr {
    background: var(--bg-secondary);
    border-top: 2px solid var(--border);
}

main .table > tfoot > tr > td {
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
}

/* Themed table status rows */
main .table .table-success > * {
    --bs-table-bg-type: color-mix(in srgb, var(--success) 8%, transparent);
    color: var(--success-text, var(--success));
}

main .table .table-danger > * {
    --bs-table-bg-type: color-mix(in srgb, var(--danger) 8%, transparent);
    color: var(--danger-text, var(--danger));
}

main .table .table-warning > * {
    --bs-table-bg-type: color-mix(in srgb, var(--warning) 8%, transparent);
    color: var(--warning-text, var(--warning));
}

/* ML-4j3: Bootstrap 5.1, the version shipped, paints a hovered, striped or active row with an inset shadow of
   the colour the row carries for that state, and its state classes carry light-theme colours: in the dark theme
   a hovered approved row turned #c1d6cc, a pending one #ece1be and a rejected one #e5c7ca, each under light
   text, nearly unreadable. A state row takes those three colours from its table, so it hovers like any other
   row. (The --bs-table-bg-type and --bs-table-bg-state names above are Bootstrap 5.3 names this version never
   reads.) */
main .table .table-success,
main .table .table-warning,
main .table .table-danger,
main .table .table-primary {
    --bs-table-hover-bg: inherit;
    --bs-table-striped-bg: inherit;
    --bs-table-active-bg: inherit;
}

/* ═══════ Themed Modals ═══════ */
/* Modal backdrop (replaces inline rgba(0,0,0,0.5)) */
.modal-backdrop-themed {
    background: var(--modal-backdrop);
    backdrop-filter: blur(2px);
}

/* Override Bootstrap modal-content for theme */
main ~ .modal .modal-content,
.modal .modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
}

.modal .modal-header {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}

.modal .modal-header .modal-title {
    color: var(--heading-color);
}

.modal .modal-header .btn-close {
    filter: invert(0.8);
}

[data-theme="light"] .modal .modal-header .btn-close {
    filter: none;
}

.modal .modal-body {
    color: var(--text-primary);
}

.modal .modal-footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
}

/* ═══════ Case Detail Header ═══════ */
.case-header-card {
    background: var(--accent-gradient);
    border: none;
    color: var(--text-on-accent);
}

.case-header-card .card-title {
    color: var(--text-on-accent) !important;
}

.case-header-card .text-muted {
    color: var(--text-on-accent-muted) !important;
}

.case-header-card p {
    color: var(--text-on-accent-soft);
}

.case-header-card strong {
    color: var(--text-on-accent);
}

/* ═══════ Case Overview Stat Cards ═══════ */
.case-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    transition: transform 0.15s, box-shadow 0.15s;
}

.case-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.case-stat-card .card-body h3 {
    color: var(--accent);
    font-weight: 700;
}

.case-stat-card .card-body p {
    color: var(--text-secondary);
}

/* Colored accent borders for case stat cards */
.case-stat-card.accent-blue {
    border-top: 3px solid var(--info);
}

.case-stat-card.accent-green {
    border-top: 3px solid var(--success);
}

.case-stat-card.accent-purple {
    border-top: 3px solid var(--purple);
}

.case-stat-card.accent-gold {
    border-top: 3px solid var(--accent);
}

/* ═══════ Themed Badges ═══════ */
/* Override Bootstrap badge bg-* classes for dark theme contrast */
main .badge.bg-warning {
    background-color: color-mix(in srgb, var(--warning) 18%, transparent) !important;
    color: var(--warning-text) !important;
    border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
}

main .badge.bg-success {
    background-color: color-mix(in srgb, var(--success) 18%, transparent) !important;
    color: var(--success-text) !important;
    border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
}

main .badge.bg-danger {
    background-color: color-mix(in srgb, var(--danger) 18%, transparent) !important;
    color: var(--danger-text) !important;
    border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
}

main .badge.bg-info {
    background-color: color-mix(in srgb, var(--info) 18%, transparent) !important;
    color: var(--info-text) !important;
    border: 1px solid color-mix(in srgb, var(--info) 30%, transparent);
}

main .badge.bg-primary {
    background-color: var(--accent-20) !important;
    /* The accent on a 20% accent tint measured 3.93:1 ("In Progress" on /tasks). A
       lighter gold on the same tint clears AA and keeps the badge's colour identity;
       the light theme has its own rule, where the surface is pale. */
    color: #e3cd9a !important;
    border: 1px solid var(--accent-30);
}

main .badge.bg-secondary {
    background-color: color-mix(in srgb, var(--secondary-muted) 15%, transparent) !important;
    color: var(--text-secondary) !important;
    border: 1px solid color-mix(in srgb, var(--secondary-muted) 25%, transparent);
}

/* Remove text-dark override on themed badges */
main .badge.bg-warning.text-dark {
    color: var(--warning-text) !important;
}

/* ═══════ Themed Progress Bars ═══════ */
main .progress {
    background-color: var(--accent-8);
    border: 1px solid var(--border);
}

main .progress-bar.bg-success {
    background-color: var(--success) !important;
}

main .progress-bar.bg-warning {
    background-color: var(--warning) !important;
}

main .progress-bar.bg-danger {
    background-color: var(--danger) !important;
}

main .progress-bar.bg-primary {
    background-color: var(--accent) !important;
}

/* ═══════ Themed Form Controls ═══════ */
main .form-control,
main .form-select {
    background-color: var(--input-bg);
    border-color: var(--input-border, var(--border-strong));
    color: var(--text-primary);
}

main .form-control:focus,
main .form-select:focus {
    background-color: var(--input-bg);
    border-color: var(--accent);
    color: var(--text-primary);
    box-shadow: 0 0 0 0.2rem var(--accent-20);
}

main .form-control::placeholder {
    color: var(--text-muted);
}

main .form-label {
    color: var(--text-secondary);
}

main .form-text {
    color: var(--text-muted);
}

/* ═══════ Themed Dropdown Menus ═══════ */
main .dropdown-menu {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}

main .dropdown-item {
    color: var(--text-primary);
}

main .dropdown-item:hover,
main .dropdown-item:focus {
    background-color: var(--accent-8);
    color: var(--text-primary);
}

main .dropdown-item.active,
main .dropdown-item:active {
    background-color: var(--accent-15);
    color: var(--accent);
}

main .dropdown-divider {
    border-color: var(--border);
}

/* ═══════ Themed Alerts ═══════ */
main .alert-warning {
    background-color: color-mix(in srgb, var(--warning) 10%, transparent);
    border-color: color-mix(in srgb, var(--warning) 25%, transparent);
    color: var(--warning-text);
}

main .alert-success {
    background-color: color-mix(in srgb, var(--success) 10%, transparent);
    border-color: color-mix(in srgb, var(--success) 25%, transparent);
    color: var(--success-text);
}

main .alert-danger {
    background-color: color-mix(in srgb, var(--danger) 10%, transparent);
    border-color: color-mix(in srgb, var(--danger) 25%, transparent);
    color: var(--danger-text);
}

main .alert-info {
    background-color: color-mix(in srgb, var(--info) 10%, transparent);
    border-color: color-mix(in srgb, var(--info) 25%, transparent);
    color: var(--info-text);
}

/* ═══════ Themed Pagination ═══════ */
main .page-link {
    background-color: var(--bg-card);
    border-color: var(--border);
    color: var(--text-primary);
}

main .page-link:hover {
    background-color: var(--accent-8);
    border-color: var(--accent-20);
    color: var(--accent);
}

main .page-item.active .page-link {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--text-on-accent);
}

main .page-item.disabled .page-link {
    background-color: var(--bg-secondary);
    border-color: var(--border);
    color: var(--text-muted);
}

/* ═══════ Themed List Groups ═══════ */
main .list-group-item {
    background-color: var(--bg-card);
    border-color: var(--border);
    color: var(--text-primary);
}

main .list-group-item:hover {
    background-color: var(--accent-4);
}

main .list-group-item.active {
    background-color: var(--accent-15);
    border-color: var(--accent-30);
    color: var(--accent);
}


/* ═══════ Themed Buttons ═══════ */
/* Primary button: gold accent */
main .btn-primary {
    color: var(--btn-contrast);
    font-weight: 600;
}

main .btn-primary:hover,
main .btn-primary:focus-visible {
    color: var(--btn-contrast);
}

/* Success button */
main .btn-success {
    color: var(--btn-contrast);
}

/* Danger button */
main .btn-danger {
    color: var(--btn-contrast);
}

/* Warning button */
main .btn-warning {
    color: var(--btn-contrast);
}

/* Info button */
main .btn-info {
    color: var(--btn-contrast);
}

/* ── Reduced Motion (WCAG 2.3.3) ── */
/* WEBFIRST-01: duplicate prefers-reduced-motion block removed - the
   identical rule lives earlier in this file (search: WCAG 1.4.11). */

.document-authoring-nav {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 gap: 0.75rem;
 margin: 0 0 1.5rem;
 padding: 0.25rem;
}

.document-authoring-nav-link {
 display: flex;
 flex-direction: column;
 gap: 0.25rem;
 min-width: 0;
 padding: 0.9rem 1rem;
 color: var(--text-secondary);
 text-decoration: none;
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: 12px;
 transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.document-authoring-nav-link:hover {
 color: var(--text-primary);
 border-color: var(--border-strong);
 background: var(--bg-secondary);
}

.document-authoring-nav-link.active {
 color: var(--text-primary);
 border-color: var(--accent);
 box-shadow: inset 3px 0 0 var(--accent);
}

.document-authoring-nav-title {
 font-size: 0.9rem;
 font-weight: 650;
}

.document-authoring-nav-description {
 color: var(--text-muted);
 font-size: 0.75rem;
 line-height: 1.35;
}

@media (max-width: 820px) {
 .document-authoring-nav {
  grid-template-columns: 1fr;
 }
}

/* ML-4d (the mobile layout design of 2026-10-13): on a phone a dialog is a full-height sheet - the form fills the
   screen, its body scrolls, its footer with the actions stays in reach at the bottom, above the soft keyboard
   through the keyboard inset. Wider than a phone the dialogs keep their centred cards. */
@media (max-width: 599px) {
    .modal-dialog {
        margin: 0;
        width: 100%;
        max-width: none;
        min-height: 100dvh;
        max-height: none;
        animation: none;
    }

    .modal-content {
        min-height: 100dvh;
        max-height: none;
        border: 0;
        border-radius: 0;
        overflow: visible;
    }

    .modal-body {
        overflow-y: auto;
    }

    .modal-footer {
        position: sticky;
        bottom: var(--praxis-keyboard-inset, 0px);
        z-index: 1;
        background: var(--bg-card);
    }
}

/* ML-4d2: while a dialog is open on a phone the floating controls (the timer and the assistant launcher) step
   aside, so nothing floats over the form; they return when the dialog closes. The rendered review of ML-4d
   saw the launcher (z-index 1450) over the New Case sheet (the dialog stacks at 1055). */
@media (max-width: 599px) {
    html:has(.modal.d-block, .compose-overlay) .quick-agent-chat:not(.active),
    html:has(.modal.d-block, .compose-overlay) .timer-fab,
    html:has(.modal.d-block, .compose-overlay) .timer-widget:not(.timer-widget-start) {
        visibility: hidden;
    }
}