/* ============================================================
           Day 19 / S3.x — Reduced-motion accessibility guard
           ------------------------------------------------------------
           Honour the OS-level "Reduce motion" preference (macOS System
           Settings → Accessibility → Display → Reduce motion; Windows
           Settings → Accessibility → Visual effects → Animation effects;
           iOS Settings → Accessibility → Motion → Reduce Motion).

           Users with vestibular disorders, migraine triggers, or simple
           preference get a near-instant UI instead of the glassmorphism's
           ambient transitions, kanban drag eases, modal fades, etc.

           IMPORTANT: we collapse to 0.01ms rather than `none`/`0s` so
           that JS code listening for `transitionend` / `animationend`
           events still fires (toast auto-dismissal, modal-after-close
           focus restore, etc) — setting them to `none` would break
           those handlers silently. The 0.01ms is below the user-percep-
           tible threshold but still emits a completion event.

           Loaded from base-theme.css (every page). Pinned by
           tests/test_smoke.py::test_reduced_motion_guard_present.
           ============================================================ */
        @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;
            }
        }

        /* ============================================================
           Day 20 / S3.5 — Mobile responsiveness baseline
           ------------------------------------------------------------
           AXIS CRM was built desktop-first and the templates are
           14 huge files (cockpit.html, candidates.html, dashboard.html,
           …) with hardcoded pixel widths in inline styles and naked
           <table> elements that horizontally overflow on phones.

           This block is the FOUNDATION that every page now inherits:
           it doesn't fix per-page layouts (that's per-template work),
           but it kills the worst global mobile bugs:

           1. body { overflow-x: hidden } — no rogue inline-styled
              wide element can cause a horizontal scrollbar that
              "rocks" the page sideways when the user tries to scroll.
              -webkit-text-size-adjust: 100% prevents iOS Safari from
              auto-inflating text after device rotation.

           2. Tables wrapped naked (without .table-responsive) get a
              horizontal scroll instead of bursting their parent. The
              .table-responsive Bootstrap class is preferred for new
              code, but this catches the legacy ones we missed.

           3. Form inputs at 16px font-size on phones — iOS Safari
              auto-zooms when focusing an input with font-size <16px,
              and the zoom-out gesture is fiddly. 16px floor across
              all inputs eliminates the zoom-on-focus jump entirely.

           4. .container/.container-fluid get tighter horizontal
              padding on phones to claw back ~30px of usable width.

           Pinned by tests/test_smoke.py::test_mobile_baseline_present.
           Per-page mobile fixes still TODO — tracked in
           IMPROVEMENT_BACKLOG.md S3.5.
           ============================================================ */
        html {
            -webkit-text-size-adjust: 100%;
        }
        @media (max-width: 576px) {
            body {
                overflow-x: hidden;
            }
            /* Naked legacy tables → horizontal scroll instead of
               bursting parent. .table-responsive (Bootstrap) is still
               preferred for new code; this is a safety net. */
            table:not(.table-responsive table) {
                display: block;
                max-width: 100%;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
            /* Stop iOS Safari zoom-on-focus by raising input font to
               16px floor (Apple's documented threshold). Note this
               targets only inputs that don't already have an explicit
               font-size set inline. */
            input[type="text"],
            input[type="email"],
            input[type="password"],
            input[type="search"],
            input[type="tel"],
            input[type="url"],
            input[type="number"],
            input[type="date"],
            input[type="time"],
            input[type="datetime-local"],
            select,
            textarea {
                font-size: 16px;
            }
            /* Claw back ~30px of usable width on phones. */
            .container,
            .container-fluid {
                padding-left: 12px;
                padding-right: 12px;
            }
        }

        /* ============================================================
           Day 21 / S3.5 — Kanban mobile parity
           ------------------------------------------------------------
           Real kanban surfaces (verified via `rg -l "kanban-col" templates/`):
             - templates/pipeline.html (main candidate pipeline)
             - templates/cockpit/_kanban_board.html (cockpit kanban partial)
             - templates/cockpit/_off_pipeline.html (off-pipeline column)
             - templates/mandate_detail.html (mandate-level kanban)
             - templates/_pipeline_sync_poller.html (sync poller card markup)
           NOTE: templates/mandate_candidates.html does NOT contain a
           kanban — it's a stats + candidate-list page, not a kanban
           surface. It's named in the project's pipeline-parity rule
           because filters/search/quick-actions should match across
           candidate-listing pages, but the kanban-mobile fix here
           does not apply to it.

           These surfaces use 4-column horizontal flex layouts. On
           phones (and even tablet portrait) the columns get squished
           to ~80px wide and become unusable — cards wrap, names
           truncate, drag-drop hit targets shrink.

           Stack them vertically below 768px and remove the inline
           `max-height: 680px` cap on `.kanban-cards` so each column's
           cards flow naturally and the page itself scrolls (instead
           of nested scroll containers, which iOS Safari handles
           poorly with momentum scroll).

           This single CSS edit applies to ALL kanban surfaces above
           because they share the same `.kanban-col` / `.kanban-cards`
           class names (the cockpit partial uses dual class
           `kanban-col kc-col` — `.kanban-col` selector still matches).
           No per-template edits required.

           !important is necessary to beat the inline `max-height` set
           on `.kanban-cards` (line 389/511 of pipeline.html and the
           cockpit partial). Inline styles otherwise win the cascade.

           Pinned by tests/test_smoke.py::test_kanban_mobile_parity_present.
           ============================================================ */
        @media (max-width: 768px) {
            .kanban-col {
                flex: 1 0 100% !important;
                min-width: 100% !important;
                max-width: 100% !important;
                margin-bottom: 12px;
            }
            .kanban-cards {
                max-height: none !important;
                min-height: 80px !important;
            }
            /* Don't let collapsed columns hide content on phone — */
            /* the collapse pattern only makes sense on desktop. */
            .kanban-col.kanban-collapsed {
                flex: 1 0 100% !important;
                min-width: 100% !important;
                max-width: 100% !important;
            }
            .kanban-col.kanban-collapsed .kanban-cards,
            .kanban-col.kanban-collapsed .col-header-label,
            .kanban-col.kanban-collapsed .col-toggle {
                display: revert !important;
            }
        }

        :root {
            /* Apple Glassmorphism UI */
            --bs-body-bg: #f2f2f7 !important;
            --bs-card-bg: rgba(255, 255, 255, 0.72) !important;
            --bs-tertiary-bg: rgba(245, 245, 247, 0.6) !important;
            --bs-secondary-bg: rgba(250, 250, 250, 0.6) !important;
            --bs-body-color: #1d1d1f !important;
            
            /* Apple Semantic Color Palette */
            --primary-blue: #48484a;
            --primary-blue-dark: #3a3a3c;
            --primary-blue-light: rgba(0, 0, 0, 0.06);
            --accent-teal: #34C759;
            --accent-amber: #FF9500;
            --accent-purple: #AF52DE;
            --text-primary: #1d1d1f;
            --text-secondary: #48484a;
            --text-muted: #86868b;
            --background-base: #f2f2f7;
            --background-elevated: rgba(255, 255, 255, 0.72);
            --background-surface: rgba(245, 245, 247, 0.6);
            --background-card: rgba(255, 255, 255, 0.72);
            --border-color: rgba(0, 0, 0, 0.06);
            --border-light: rgba(0, 0, 0, 0.03);
            --border-focus: rgba(0, 0, 0, 0.12);
            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
            --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
            --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
            --shadow-glow-blue: 0 0 24px rgba(0, 0, 0, 0.08);
            --shadow-glow-teal: 0 0 24px rgba(52, 199, 89, 0.15);
            --content-max-width: 1320px;
            --content-padding: 36px;
            --space-xs: 4px;
            --space-sm: 8px;
            --space-md: 16px;
            --space-lg: 28px;
            --space-xl: 36px;
            --space-2xl: 52px;
            --success-color: #34C759;
            --warning-color: #FF9500;
            --danger-color: #FF3B30;
            --glass-bg: rgba(255, 255, 255, 0.72);
            --glass-border: rgba(255, 255, 255, 0.3);
            --glass-blur: blur(20px);
            --icon-blue: #86868b;
            --icon-red: #86868b;
            --icon-orange: #86868b;
            --icon-green: #86868b;
            --icon-default: #86868b;
            --icon-hover: #48484a;
        }
        
        /* Apple Glassmorphism UI - Body */
        body {
            font-family: -apple-system, 'SF Pro Display', 'SF Pro Text', system-ui, 'Inter', sans-serif;
            font-size: 15px;
            line-height: 1.6;
            color: #1d1d1f;
            background: #f2f2f7;
            margin: 0;
            padding: 0;
            min-height: 100vh;
        }
        
        h1, .h1 {
            font-family: -apple-system, 'SF Pro Display', system-ui, sans-serif;
            font-size: 2rem;
            font-weight: 700;
            color: #1d1d1f;
            margin-bottom: 1.5rem;
            letter-spacing: -0.025em;
        }
        
        h2, .h2 {
            font-family: -apple-system, 'SF Pro Display', system-ui, sans-serif;
            font-size: 1.5rem;
            font-weight: 600;
            color: #1d1d1f;
            margin-bottom: 1rem;
            letter-spacing: -0.025em;
        }
        
        h3, .h3 {
            font-size: 1.25rem;
            font-weight: 600;
            color: #1d1d1f;
            margin-bottom: 0.75rem;
        }
        
        h4, .h4, h5, .h5, h6, .h6 {
            font-size: 1rem;
            font-weight: 500;
            color: #48484a;
            margin-bottom: 0.5rem;
        }
        
        p, label, span, td, th, li {
            color: #1d1d1f;
        }
        
        .text-muted {
            color: #86868b !important;
        }
        
        /* Apple Glassmorphism Navigation */
        .navbar {
            background: #0D2241 !important;
            border-bottom: 1px solid rgba(0, 0, 0, 0.2);
            padding: 1rem 0;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
            position: sticky;
            top: 0;
            z-index: 1100;
            min-height: 64px;
        }
        
        .navbar-brand {
            font-family: -apple-system, 'SF Pro Display', system-ui, sans-serif;
            font-size: 1.35rem;
            font-weight: 700;
            color: #ffffff !important;
            text-decoration: none;
            letter-spacing: -0.025em;
        }
        
        .navbar .sidebar-toggle {
            background: transparent;
            border: none;
            color: #ffffff;
        }
        
        .navbar .sidebar-toggle:hover {
            background: rgba(255,255,255,0.1);
            color: #ffffff;
        }
        
        .navbar #navClock {
            color: #ffffff !important;
        }
        
        .navbar .navbar-icon-btn {
            color: #ffffff;
        }
        .navbar .navbar-icon-btn:hover {
            color: #ffffff;
            background: rgba(255,255,255,0.1);
        }
        
        .navbar-nav {
            gap: 0.25rem;
        }
        
        .nav-link {
            font-weight: 500;
            color: #48484a !important;
            padding: 0.5rem 1rem !important;
            border-radius: 14px;
            transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
            text-decoration: none;
        }
        
        .nav-link:hover {
            color: #1d1d1f !important;
            background-color: rgba(0, 0, 0, 0.04);
        }
        
        .nav-link.active {
            color: #1d1d1f !important;
            background: rgba(0, 0, 0, 0.06);
            font-weight: 600;
            box-shadow: none;
        }
        
        /* Buttons - Glassmorphism with micro-animations */
        .btn {
            font-weight: 500;
            border-radius: 14px;
            padding: 0.7rem 1.5rem;
            font-size: 0.9375rem;
            transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
            border-width: 1px;
            position: relative;
            overflow: hidden;
        }
        
        .btn:active {
            transform: scale(0.95);
        }
        
        .btn-primary {
            background: rgba(0, 0, 0, 0.8);
            border-color: transparent;
            color: white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
        }
        
        .btn-primary:hover {
            background: rgba(0, 0, 0, 0.9);
            border-color: transparent;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
        }
        
        .btn-success {
            background: #34C759;
            border-color: transparent;
            color: white;
            box-shadow: 0 2px 8px rgba(52, 199, 89, 0.2);
        }
        
        .btn-success:hover {
            background: #28A745;
            border-color: transparent;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(52, 199, 89, 0.3);
        }
        
        .btn-outline-primary {
            color: #48484a;
            border-color: rgba(0, 0, 0, 0.1);
            background: transparent;
        }
        
        .btn-outline-primary:hover {
            background: rgba(0, 0, 0, 0.04);
            border-color: rgba(0, 0, 0, 0.15);
            color: #1d1d1f;
            transform: translateY(-2px);
        }
        
        .btn-outline-secondary {
            color: #48484a;
            border-color: rgba(0, 0, 0, 0.06);
            background: transparent;
        }
        
        .btn-outline-secondary:hover {
            background: rgba(0, 0, 0, 0.03);
            border-color: rgba(0, 0, 0, 0.1);
            color: #1d1d1f;
            transform: translateY(-1px);
        }
        
        /* Cards - Glassmorphism */
        .card {
            --bs-card-bg: rgba(255, 255, 255, 0.72) !important;
            --bs-card-border-color: rgba(255, 255, 255, 0.3) !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
            border-radius: 20px !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
            background: rgba(255, 255, 255, 0.72) !important;
            background-color: rgba(255, 255, 255, 0.72) !important;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            overflow: visible;
            transition: box-shadow 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        .card:hover {
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
        }
        
        .card-header {
            background: rgba(245, 245, 247, 0.5);
            border-bottom: 1px solid rgba(0, 0, 0, 0.04);
            padding: 1.375rem 1.75rem;
            font-weight: 600;
            color: #1d1d1f;
            font-size: 0.9375rem;
        }
        
        .card-header i {
            color: #86868b;
            margin-right: 0.5rem;
        }
        
        .card-body {
            padding: 1.75rem;
            background: transparent !important;
            background-color: transparent !important;
            --bs-card-bg: transparent !important;
        }
        
        .card,
        .card .card-body,
        .card .card-header,
        .card .card-footer {
            --bs-body-bg: transparent !important;
            --bs-tertiary-bg: rgba(245, 245, 247, 0.5) !important;
        }
        
        .card-footer {
            background: rgba(245, 245, 247, 0.5);
            border-top: 1px solid rgba(0, 0, 0, 0.04);
            padding: 1.125rem 1.75rem;
        }
        
        /* Module Cards (Dashboard) - Glassmorphism */
        .module-card {
            border-radius: 20px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
            transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
            border: 1px solid rgba(255, 255, 255, 0.3);
            background: rgba(255, 255, 255, 0.72);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }
        
        .module-card:hover {
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
            transform: translateY(-2px);
        }
        
        .module-header {
            background: rgba(245, 245, 247, 0.5);
            border-bottom: 1px solid rgba(0, 0, 0, 0.04);
        }
        
        /* Tables - Glassmorphism */
        .table {
            margin-bottom: 0;
            border-collapse: separate;
            border-spacing: 0;
            color: #1d1d1f;
        }
        
        .table th {
            background: rgba(245, 245, 247, 0.6);
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            font-weight: 600;
            color: #86868b;
            padding: 1.125rem 1.375rem;
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        
        .table td {
            padding: 1.125rem 1.375rem;
            border-bottom: 1px solid rgba(0, 0, 0, 0.03);
            vertical-align: middle;
            font-size: 0.9375rem;
            color: #1d1d1f;
        }
        
        .table tbody tr {
            transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        .table tbody tr:hover {
            background: rgba(0, 0, 0, 0.03);
        }
        
        .table tbody tr:nth-child(even) {
            background: rgba(0, 0, 0, 0.015);
        }
        
        .table tbody tr:nth-child(even):hover {
            background: rgba(0, 0, 0, 0.03);
        }
        
        .table-dark, .table-dark th, .table-dark td {
            background-color: transparent !important;
            color: #1d1d1f;
        }
        
        /* Forms - Glassmorphism */
        .form-control, .form-select {
            border: 1px solid rgba(0, 0, 0, 0.06);
            border-radius: 14px;
            padding: 0.875rem 1.125rem;
            font-size: 0.9375rem;
            background: rgba(255, 255, 255, 0.72);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            color: #1d1d1f;
            transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
            min-height: 48px;
        }
        
        .form-control:focus, .form-select:focus {
            border-color: rgba(0, 0, 0, 0.2);
            box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.06);
            outline: none;
            background: rgba(255, 255, 255, 0.92);
            color: #1d1d1f;
        }
        
        .form-control::placeholder {
            color: #aeaeb2;
        }
        
        .form-label {
            font-weight: 600;
            color: #1d1d1f;
            margin-bottom: 0.625rem;
            font-size: 0.875rem;
        }
        
        .form-text {
            color: #86868b;
            font-size: 0.8125rem;
            margin-top: 0.375rem;
        }
        
        select.form-select {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2386868b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
        }
        
        /* Badges */
        .badge {
            font-weight: 600;
            border-radius: 20px;
            font-size: 0.75rem;
            padding: 0.375rem 0.75rem;
        }
        
        .bg-primary {
            background: rgba(0, 0, 0, 0.8) !important;
        }
        
        .bg-success {
            background: #34c759 !important;
        }
        
        .bg-warning {
            background: #ff9500 !important;
        }
        
        .bg-danger {
            background: #ff3b30 !important;
        }
        
        .bg-info {
            background: #5ac8fa !important;
        }
        
        .bg-secondary {
            background: rgba(0, 0, 0, 0.05) !important;
            color: #48484a !important;
        }
        
        .badge-soft-primary {
            background: rgba(0, 0, 0, 0.05);
            color: #48484a;
        }
        
        .badge-soft-success {
            background: rgba(52, 199, 89, 0.1);
            color: #34c759;
        }
        
        .badge-soft-warning {
            background: rgba(255, 149, 0, 0.1);
            color: #ff9500;
        }
        
        .badge-soft-danger {
            background: rgba(255, 59, 48, 0.1);
            color: #ff3b30;
        }
        
        /* Bootstrap text-primary override for frosty icons */
        .text-primary {
            color: #86868b !important;
        }
        
        /* Alerts */
        .alert {
            border-radius: 12px;
            border: 1px solid;
            padding: 1rem 1.25rem;
            margin-bottom: 1rem;
        }
        
        .alert-info {
            background: rgba(0, 0, 0, 0.03);
            border-color: rgba(0, 0, 0, 0.08);
            color: #48484a;
        }
        
        .alert-success {
            background: rgba(52, 199, 89, 0.06);
            border-color: rgba(52, 199, 89, 0.15);
            color: #28a745;
        }
        
        .alert-warning {
            background: rgba(255, 149, 0, 0.06);
            border-color: rgba(255, 149, 0, 0.15);
            color: #e68900;
        }
        
        .alert-danger {
            background: rgba(255, 59, 48, 0.06);
            border-color: rgba(255, 59, 48, 0.15);
            color: #ff3b30;
        }
        
        /* Layout */
        .main-content {
            min-height: calc(100vh - 80px);
            padding: var(--space-xl) var(--content-padding);
        }
        
        .main-content > .container,
        .main-content > .container-fluid {
            max-width: var(--content-max-width);
            margin: 0 auto;
            padding: 0;
        }
        
        .container {
            max-width: var(--content-max-width);
            padding-left: var(--content-padding);
            padding-right: var(--content-padding);
        }
        
        .container-fluid {
            max-width: var(--content-max-width);
            margin: 0 auto;
        }
        
        .page-header {
            margin-bottom: var(--space-xl);
            padding-bottom: var(--space-lg);
            border-bottom: 1px solid #e5e5ea;
        }
        
        .page-header h1 {
            margin-bottom: var(--space-sm);
        }
        
        .page-header .text-muted {
            font-size: 0.9375rem;
        }
        
        /* Navigation Tabs */
        .nav-tabs {
            border-bottom: 1px solid #e5e5ea;
            margin-bottom: 2rem;
        }
        
        .nav-tabs .nav-link {
            border: none;
            color: #86868b;
            padding: 0.75rem 1rem;
            margin-bottom: -1px;
            background: none;
            border-radius: 0;
        }
        
        .nav-tabs .nav-link.active {
            color: #1d1d1f;
            border-bottom: 2px solid #48484a;
            background: none;
        }
        
        .nav-tabs .nav-link:hover {
            color: #1d1d1f;
            background-color: rgba(0, 0, 0, 0.03);
        }
        
        /* Modal */
        .modal {
            padding-top: 60px !important;
        }
        
        .modal-dialog {
            margin-top: 1rem;
            max-height: calc(100vh - 80px);
        }
        
        .modal-dialog-centered {
            min-height: calc(100% - 1rem);
        }
        
        .modal-content {
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 24px;
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.04);
            overflow: hidden;
            background: rgba(255, 255, 255, 0.82);
            backdrop-filter: blur(40px) saturate(180%);
            -webkit-backdrop-filter: blur(40px) saturate(180%);
            max-height: calc(100vh - 100px);
            overflow-y: auto;
        }
        
        .modal-header {
            background: rgba(245, 245, 247, 0.5);
            border-bottom: 1px solid rgba(0, 0, 0, 0.04);
            padding: 1.5rem 1.75rem;
        }
        
        .modal-title {
            font-weight: 600;
            font-size: 1.125rem;
            color: #1d1d1f;
        }
        
        .modal-body {
            padding: 1.75rem;
        }
        
        .modal-footer {
            background: rgba(245, 245, 247, 0.5);
            border-top: 1px solid rgba(0, 0, 0, 0.04);
            padding: 1.25rem 1.75rem;
        }
        
        .modal-backdrop.show {
            opacity: 0.25;
            background: #000000;
        }
        
        .btn-close {
            filter: none;
        }
        
        /* Empty States */
        .empty-state {
            text-align: center;
            padding: 4rem 2rem;
        }
        
        .empty-state i {
            font-size: 3rem;
            color: #86868b;
            margin-bottom: 1rem;
            opacity: 0.5;
        }

        /* Day 15 (S3.3) — keyboard-focus ring for kanban cards.
           kanban-keyboard.js sets tabindex="0" + role="button" on every
           .kanban-card so Tab navigates between them. :focus-visible
           shows the ring only for keyboard focus (not mouse clicks),
           matching desktop convention and avoiding a noisy ring around
           every card the user clicks with a mouse. The 2px offset
           keeps the ring outside the existing card border so it never
           clips against priority-card's orange gradient. */
        .kanban-card:focus { outline: none; }
        .kanban-card:focus-visible {
            outline: 2px solid #0a84ff;
            outline-offset: 2px;
            box-shadow: 0 4px 14px rgba(10,132,255,0.22) !important;
        }

        /* Day 14 (S3.9) — touch drag-drop visual classes.
           SortableJS sets these classes on the card during a touch drag.
           Mirrors the existing `.kanban-card.kanban-dragging { opacity: 0.4 }`
           rule from cockpit.html / pipeline.html so touch and mouse drags
           feel identical. `kanban-touch-ghost` is the placeholder slot that
           appears in the destination column — kept dashed and translucent,
           same idiom as the desktop ghost-slot from pipeline-ghost.js. */
        .kanban-touch-dragging { opacity: 0.55 !important; transform: rotate(1deg); }
        .kanban-touch-chosen   { box-shadow: 0 6px 20px rgba(10,132,255,0.25) !important; }
        .kanban-touch-ghost {
            opacity: 0.35;
            background: rgba(10,132,255,0.06) !important;
            border: 1.5px dashed rgba(10,132,255,0.45) !important;
        }

        /* Day 13 (S3.10) — SVG illustration variant.
           Uses currentColor so the line-art inherits the muted .empty-state tone.
           120px viewBox renders at ~120px, slightly larger than the FA glyph. */
        .empty-state-illustration {
            display: block;
            margin: 0 auto 1rem auto;
            width: 120px;
            height: 120px;
            color: #86868b;
            opacity: 0.55;
        }
        .empty-state-illustration svg {
            width: 100%;
            height: 100%;
            display: block;
        }
        
        .empty-state h3 {
            color: #1d1d1f;
            margin-bottom: 0.5rem;
        }
        
        .empty-state p {
            color: #86868b;
        }
        
        /* Dropdowns */
        .dropdown-menu {
            background: rgba(255, 255, 255, 0.82);
            backdrop-filter: blur(40px) saturate(180%);
            -webkit-backdrop-filter: blur(40px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 16px;
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.04);
            padding: 0.5rem;
        }
        
        .dropdown-item {
            color: #48484a;
            border-radius: 10px;
            padding: 0.65rem 1rem;
            transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        .dropdown-item:hover, .dropdown-item:focus {
            background: rgba(0, 0, 0, 0.04);
            color: #1d1d1f;
        }
        
        .dropdown-divider {
            border-color: rgba(0, 0, 0, 0.06);
        }
        
        .dropdown-header {
            color: #86868b;
        }
        
        /* Links */
        a {
            color: #48484a;
        }
        
        a:hover {
            color: #1d1d1f;
        }
        
        /* Pagination */
        .pagination .page-link {
            background: #ffffff;
            border: 1px solid #e5e5ea;
            color: #48484a;
            border-radius: 8px;
            margin: 0 2px;
        }
        
        .pagination .page-link:hover {
            background: #f5f5f7;
            color: #1d1d1f;
        }
        
        .pagination .page-item.active .page-link {
            background: rgba(0, 0, 0, 0.8);
            border-color: rgba(0, 0, 0, 0.8);
        }
        
        /* List Group */
        .list-group-item {
            background: #ffffff !important;
            border-color: #e5e5ea !important;
            color: #1d1d1f !important;
        }
        
        .list-group-item:hover {
            background: #f5f5f7 !important;
        }
        
        /* Global Light Theme Overrides */
        .card,
        .card-header,
        .card-body,
        .card-footer,
        .module-card,
        .filter-card,
        .panel,
        .well,
        .box {
            background-color: #ffffff !important;
            background: #ffffff !important;
            border-color: #e5e5ea !important;
            color: #1d1d1f !important;
        }
        
        .card-header {
            background: #fafafa !important;
        }
        
        .table,
        .table th,
        .table td,
        .table thead,
        .table tbody,
        .table tr {
            background-color: transparent !important;
            color: #1d1d1f !important;
            border-color: #f0f0f0 !important;
        }
        
        .table thead th {
            background: #fafafa !important;
            color: #86868b !important;
        }
        
        .table-striped > tbody > tr:nth-of-type(odd) > * {
            background-color: #fafafa !important;
            color: #1d1d1f !important;
        }
        
        .table-hover > tbody > tr:hover > * {
            background-color: #f5f5f7 !important;
            color: #1d1d1f !important;
        }
        
        input, 
        select, 
        textarea,
        .form-control,
        .form-select {
            background-color: #ffffff !important;
            border-color: #e5e5ea !important;
            color: #1d1d1f !important;
        }
        
        input:focus,
        select:focus,
        textarea:focus,
        .form-control:focus,
        .form-select:focus {
            background-color: #ffffff !important;
            border-color: rgba(0, 0, 0, 0.2) !important;
            box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06) !important;
            color: #1d1d1f !important;
        }
        
        input::placeholder,
        textarea::placeholder {
            color: #aeaeb2 !important;
        }
        
        .bg-white,
        .bg-light {
            background-color: #f5f5f7 !important;
        }
        
        .text-dark {
            color: #1d1d1f !important;
        }
        
        .text-body {
            color: #1d1d1f !important;
        }
        
        .border,
        .border-top,
        .border-bottom,
        .border-start,
        .border-end {
            border-color: #e5e5ea !important;
        }
        
        .table-responsive {
            background: transparent !important;
        }
        
        .accordion-item {
            background-color: #ffffff !important;
            border-color: #e5e5ea !important;
        }
        
        .accordion-button {
            background-color: #fafafa !important;
            color: #1d1d1f !important;
        }
        
        .accordion-button:not(.collapsed) {
            background-color: #f5f5f7 !important;
            color: #1d1d1f !important;
        }
        
        .breadcrumb {
            background-color: transparent !important;
        }
        
        .breadcrumb-item,
        .breadcrumb-item a {
            color: #86868b !important;
        }
        
        .breadcrumb-item.active {
            color: #1d1d1f !important;
        }
        
        .progress {
            background-color: #e5e5ea !important;
        }
        
        .tooltip-inner {
            background-color: #1d1d1f !important;
            color: #ffffff !important;
        }
        
        .popover {
            background-color: #ffffff !important;
            border-color: #e5e5ea !important;
        }
        
        .popover-body {
            color: #1d1d1f !important;
        }
        
        .offcanvas {
            background-color: #ffffff !important;
            color: #1d1d1f !important;
        }
        
        .toast {
            background-color: #ffffff !important;
            color: #1d1d1f !important;
        }
        
        .fa-envelope, .fa-phone, .fa-linkedin, .fa-user, .fa-building, .fa-location-dot {
            color: #86868b;
        }
        
        /* Search Bar */
        .premium-search-container {
            position: relative;
            display: flex;
            align-items: center;
            width: 340px;
            height: 42px;
            background: #f5f5f7;
            border: 1px solid #e5e5ea;
            border-radius: 10px;
            padding: 0 14px;
            transition: all 0.2s ease;
        }
        
        .premium-search-container:hover {
            background: #f0f0f0;
            border-color: #d2d2d7;
        }
        
        .premium-search-container:focus-within {
            background: #ffffff;
            border-color: rgba(0, 0, 0, 0.2);
            box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
        }
        
        .premium-search-icon {
            color: #86868b;
            font-size: 0.875rem;
            margin-right: 10px;
            transition: color 0.2s ease;
        }
        
        .premium-search-container:focus-within .premium-search-icon {
            color: #48484a;
        }
        
        .premium-search-input {
            flex: 1;
            background: transparent !important;
            border: none !important;
            outline: none !important;
            color: #1d1d1f !important;
            font-size: 0.875rem;
            font-weight: 400;
            padding: 0 !important;
            height: 100%;
        }
        
        .premium-search-input::placeholder {
            color: #aeaeb2;
            font-weight: 400;
        }
        
        .premium-search-input:focus {
            box-shadow: none !important;
        }
        
        .premium-search-kbd {
            display: flex;
            align-items: center;
            justify-content: center;
            background: #e5e5ea;
            border: 1px solid #d2d2d7;
            border-radius: 6px;
            padding: 4px 8px;
            font-size: 0.7rem;
            font-family: inherit;
            font-weight: 500;
            color: #86868b;
            margin-left: 8px;
            transition: all 0.2s ease;
        }
        
        .premium-search-container:hover .premium-search-kbd {
            background: #d2d2d7;
            border-color: #c7c7cc;
            color: #48484a;
        }
        
        /* Compact search bar */
        .premium-search-container.compact {
            width: 180px;
            height: 36px;
            padding: 0 10px;
        }
        
        .premium-search-container.compact .premium-search-input {
            font-size: 0.8rem;
        }
        
        @media (min-width: 992px) {
            .premium-search-container.compact {
                width: 220px;
            }
        }
        
        /* Navbar Layout */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 0;
        }
        
        .navbar-actions {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        /* Phone-only: hide live search + inline clock so .navbar-actions fits.
         * Live search remains reachable via the floating nav-search button.
         * Clock remains reachable via the .nav-menu-clock row in the hamburger dropdown. */
        @media (max-width: 767px) {
            .navbar .nav-live-search,
            .navbar #navClock {
                display: none !important;
            }
            .navbar-actions {
                gap: 0.35rem;
            }
        }
        @media (max-width: 380px) {
            .navbar-actions {
                gap: 0.25rem;
            }
        }
        .nav-menu-clock {
            font-size: 0.85rem;
            color: var(--text-muted, #6c757d);
            padding: 0.35rem 1rem 0.4rem;
            white-space: nowrap;
        }
        .nav-menu-clock i {
            margin-right: 6px;
            opacity: 0.75;
        }

        /* Nav Live Search - Apple Spotlight Style */
        .nav-live-search {
            position: relative;
            margin-right: 6px;
        }
        .nav-live-search-box {
            display: flex;
            align-items: center;
            gap: 10px;
            background: #0D2241;
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 999px;
            padding: 0 16px;
            height: 38px;
            width: 240px;
            transition: width 320ms cubic-bezier(0.16, 1, 0.3, 1),
                        border-color 220ms ease,
                        box-shadow 220ms ease;
            cursor: text;
            position: relative;
        }
        .nav-live-search-box:hover {
            border-color: rgba(255, 255, 255, 0.32);
        }
        .nav-live-search-box.focused {
            width: 360px;
            border-color: rgba(255, 255, 255, 0.55);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28),
                        0 0 0 4px rgba(255, 255, 255, 0.10);
        }
        .nav-live-search-icon {
            color: rgba(255, 255, 255, 0.7);
            font-size: 13px;
            flex-shrink: 0;
            transition: color 200ms ease, transform 200ms ease;
        }
        .nav-live-search-box:hover .nav-live-search-icon,
        .nav-live-search-box.focused .nav-live-search-icon {
            color: #ffffff;
        }
        .nav-live-search-box.focused .nav-live-search-icon {
            transform: scale(1.05);
        }
        .nav-live-search-box, .nav-live-search-box.focused {
            background: #0D2241 !important;
        }
        input.nav-live-search-input,
        input.nav-live-search-input:focus,
        input.nav-live-search-input:hover,
        input.nav-live-search-input:active {
            flex: 1;
            background: transparent !important;
            background-color: transparent !important;
            border: none !important;
            outline: none !important;
            color: #ffffff !important;
            -webkit-text-fill-color: #ffffff !important;
            caret-color: #ffffff !important;
            font-size: 13.5px;
            font-weight: 500;
            width: 100%;
            letter-spacing: -0.01em;
            padding: 0;
            box-shadow: none !important;
        }
        input.nav-live-search-input::placeholder {
            color: #ffffff !important;
            opacity: 0.85 !important;
            font-weight: 400;
        }
        input.nav-live-search-input::-webkit-input-placeholder { color: #ffffff !important; opacity: 0.85 !important; }
        input.nav-live-search-input::-moz-placeholder { color: #ffffff !important; opacity: 0.85 !important; }
        /* Kill browser autofill yellow/white background */
        input.nav-live-search-input:-webkit-autofill,
        input.nav-live-search-input:-webkit-autofill:hover,
        input.nav-live-search-input:-webkit-autofill:focus,
        input.nav-live-search-input:-webkit-autofill:active {
            -webkit-box-shadow: 0 0 0 1000px #0D2241 inset !important;
            box-shadow: 0 0 0 1000px #0D2241 inset !important;
            -webkit-text-fill-color: #ffffff !important;
            caret-color: #ffffff !important;
            transition: background-color 9999s ease-in-out 0s;
        }
        /* Dropdown Results */
        .nav-live-search-dropdown {
            display: none;
            position: absolute;
            top: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%);
            min-width: 380px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(40px);
            -webkit-backdrop-filter: blur(40px);
            border-radius: 14px;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.06);
            border: 1px solid rgba(0, 0, 0, 0.06);
            z-index: 9999;
            max-height: 440px;
            overflow-y: auto;
            padding: 6px;
            animation: navSearchDropIn 200ms cubic-bezier(0.16, 1, 0.3, 1);
        }
        @keyframes navSearchDropIn {
            from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(0.97); }
            to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
        }
        .nav-live-search-dropdown::-webkit-scrollbar { width: 4px; }
        .nav-live-search-dropdown::-webkit-scrollbar-track { background: transparent; }
        .nav-live-search-dropdown::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 4px; }
        .nav-search-category {
            padding: 8px 10px 4px;
            font-size: 11px;
            font-weight: 600;
            color: #86868b;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .nav-search-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 8px 10px;
            border-radius: 8px;
            text-decoration: none;
            color: #1d1d1f;
            transition: background 120ms ease;
            cursor: pointer;
        }
        .nav-search-item:hover {
            background: rgba(0, 0, 0, 0.04);
            color: #1d1d1f;
            text-decoration: none;
        }
        .nav-search-item-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 13px;
        }
        .nav-search-item-icon.tool { background: rgba(255,149,0,0.08); color: #FF9500; }
        .nav-search-item-icon.candidate { background: rgba(0,122,255,0.08); color: #007AFF; }
        .nav-search-item-icon.company { background: rgba(88,86,214,0.08); color: #5856D6; }
        .nav-search-item-icon.prospect { background: rgba(52,199,89,0.08); color: #34C759; }
        .nav-search-item-icon.mandate { background: rgba(255,59,48,0.08); color: #FF3B30; }
        .nav-search-item-info { flex: 1; min-width: 0; }
        .nav-search-item-name {
            font-size: 13px;
            font-weight: 500;
            color: #1d1d1f;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .nav-search-item-detail {
            font-size: 11px;
            color: #86868b;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .nav-search-empty {
            padding: 20px 16px;
            text-align: center;
            color: #86868b;
            font-size: 13px;
        }
        .nav-search-empty i { font-size: 24px; margin-bottom: 6px; display: block; opacity: 0.4; }
        
        /* Navbar Icon Buttons - Glassmorphism */
        .navbar-icon-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            border-radius: 10px;
            background: #0D2241;
            border: 1px solid rgba(13, 34, 65, 0.15);
            color: #ffffff;
            text-decoration: none;
            transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
            cursor: pointer;
        }
        
        .navbar-icon-btn:hover {
            background: #0a1b33;
            border-color: rgba(13, 34, 65, 0.25);
            color: #ffffff;
            transform: translateY(-1px);
        }
        
        /* Navbar Add Button - Glassmorphism */
        .navbar-add-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            background: #0D2241;
            border: none;
            border-radius: 14px;
            color: #ffffff !important;
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
            box-shadow: 0 2px 8px rgba(13, 34, 65, 0.25);
        }
        
        .navbar-add-btn:hover {
            background: #0a1b33;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(13, 34, 65, 0.35);
        }
        
        .navbar-add-btn:active {
            transform: scale(0.95);
        }
        
        .navbar-add-btn::after {
            display: none;
        }

        .qa-menu {
            min-width: 280px !important;
            padding: 0 !important;
            border-radius: 18px !important;
            background: rgba(255, 255, 255, 0.88) !important;
            backdrop-filter: blur(60px) saturate(200%) !important;
            -webkit-backdrop-filter: blur(60px) saturate(200%) !important;
            border: 1px solid rgba(255, 255, 255, 0.4) !important;
            box-shadow: 0 24px 80px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.06), 0 0 0 0.5px rgba(0,0,0,0.04) !important;
            overflow: hidden;
        }
        .qa-menu-inner {
            padding: 10px;
        }
        .qa-section {
            padding: 4px 0;
        }
        .qa-section-label {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #86868b;
            padding: 4px 8px 8px;
        }
        .qa-divider {
            height: 1px;
            background: rgba(0, 0, 0, 0.06);
            margin: 4px 8px;
        }
        .qa-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 4px;
        }
        .qa-grid-2 {
            grid-template-columns: repeat(2, 1fr);
        }
        .qa-tile {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            padding: 14px 6px 10px;
            border-radius: 14px;
            text-decoration: none !important;
            transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
            cursor: pointer;
            background: transparent;
        }
        .qa-tile:hover {
            background: rgba(0, 0, 0, 0.04);
            transform: translateY(-1px);
        }
        .qa-tile:active {
            transform: scale(0.95);
            background: rgba(0, 0, 0, 0.06);
        }
        .qa-tile-icon {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            background: rgba(0, 0, 0, 0.04);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 200ms ease;
        }
        .qa-tile-icon i {
            font-size: 15px;
            color: #86868b !important;
            transition: color 200ms ease;
        }
        .qa-tile:hover .qa-tile-icon {
            background: rgba(0, 0, 0, 0.07);
        }
        .qa-tile:hover .qa-tile-icon i {
            color: #48484a !important;
        }
        .qa-tile-label {
            font-size: 11.5px;
            font-weight: 500;
            color: #48484a;
            text-align: center;
            line-height: 1.2;
        }
        .qa-tile:hover .qa-tile-label {
            color: #1d1d1f;
        }
        @media (max-width: 768px) {
            .qa-menu {
                min-width: 240px !important;
            }
            .qa-tile {
                padding: 10px 4px 8px;
            }
            .qa-tile-icon {
                width: 36px;
                height: 36px;
            }
        }
        
        /* Quick Access Scroll Container */
        .quick-access-scroll {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            flex-wrap: wrap;
            padding: 0.25rem 0;
        }
        
        @media (max-width: 768px) {
            .navbar-search {
                width: 120px;
            }
        }
        
        /* Responsive search bar */
        @media (max-width: 992px) {
            .premium-search-container {
                width: 280px;
            }
        }
        
        @media (max-width: 768px) {
            .premium-search-container {
                width: 200px;
            }
            .premium-search-input::placeholder {
                font-size: 0.8rem;
            }
        }
        
        @media (max-width: 576px) {
            .premium-search-container {
                width: 160px;
            }
            .premium-search-kbd {
                display: none;
            }
        }
        
        /* Legacy search inputs */
        .search-input,
        input[type="search"] {
            background-color: #ffffff !important;
            border-color: #e5e5ea !important;
            color: #1d1d1f !important;
        }
        
        .empty-state p {
            color: var(--text-muted);
            margin-bottom: 1.5rem;
        }
        
        /* Responsive Design - Professional Breakpoints */
        @media (max-width: 1400px) {
            :root {
                --content-max-width: 100%;
                --content-padding: 24px;
            }
        }
        
        @media (max-width: 992px) {
            :root {
                --content-padding: 20px;
            }
            
            .main-content {
                padding: var(--space-lg) var(--content-padding);
            }
        }
        
        @media (max-width: 768px) {
            :root {
                --content-padding: 16px;
            }
            
            .navbar-brand {
                font-size: 1.25rem;
            }
            
            .card-body {
                padding: 1rem;
            }
            
            .card-header {
                padding: 1rem;
            }
            
            .main-content {
                padding: var(--space-md) var(--content-padding);
            }
            
            .btn {
                font-size: 0.875rem;
                padding: 0.5rem 1rem;
            }
            
            .table th, .table td {
                padding: 0.75rem;
            }
        }
        
        @media (max-width: 576px) {
            .card {
                border-radius: 16px;
            }
            
            .modal-content {
                border-radius: 20px;
            }
        }
        
        /* Animation */
        .btn, .form-control, .nav-link {
            transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        /* Focus States */
        .btn:focus, .form-control:focus, .form-select:focus {
            box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.06);
        }
        
        /* Loading States */
        .loading {
            opacity: 0.6;
            pointer-events: none;
        }
        
        .spinner-border-sm {
            width: 1rem;
            height: 1rem;
        }
        
        /* Quick Access Bar */
        .quick-access-bar {
            background: #ffffff;
            border-bottom: 1px solid #e5e5ea;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
            position: sticky;
            top: 0;
            z-index: 99;
            padding: 0.25rem 0;
        }
        
        @media (max-width: 768px) {
            .quick-access-bar {
                display: none;
            }
        }
        
        /* Ensure dropdowns appear above quick access bar */
        .quick-access-bar .dropdown {
            position: static !important;
            overflow: visible !important;
        }
        
        .dropdown-menu {
            z-index: 1200 !important;
            position: absolute !important;
        }
        
        .quick-access-btn {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 0.375rem 0.75rem;
            background: #ffffff;
            border: 1px solid rgba(13, 34, 65, 0.12);
            border-radius: 8px;
            color: #0D2241;
            text-decoration: none;
            font-weight: 500;
            font-size: 0.8rem;
            transition: all 0.2s ease;
            white-space: nowrap;
            cursor: pointer;
        }
        .quick-access-btn i {
            font-size: 0.7rem;
            opacity: 0.85;
            color: #0D2241;
        }
        
        .quick-access-btn:hover {
            background: #f5f5f7;
            border-color: rgba(13, 34, 65, 0.2);
            color: #0D2241;
        }
        
        .quick-access-btn.active {
            background: #eef1f5;
            border-color: rgba(13, 34, 65, 0.25);
            color: #0D2241;
            font-weight: 600;
            box-shadow: 0 2px 8px rgba(13, 34, 65, 0.12);
        }
        
        
        @media (max-width: 768px) {
        }
        
        /* Nav Menu Dropdown */
        .nav-menu-dropdown {
            width: 320px;
            max-height: 80vh;
            overflow-y: auto;
            padding: 8px !important;
            border-radius: 14px !important;
            border: 1px solid rgba(0,0,0,0.06) !important;
            box-shadow: 0 12px 40px rgba(0,0,0,0.12) !important;
            background: rgba(255,255,255,0.95) !important;
            backdrop-filter: blur(20px) !important;
        }
        .nav-menu-dropdown::-webkit-scrollbar { width: 4px; }
        .nav-menu-dropdown::-webkit-scrollbar-track { background: transparent; }
        .nav-menu-dropdown::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 4px; }
        .nav-menu-section-title {
            font-size: 0.65rem;
            font-weight: 700;
            color: #86868b;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            padding: 10px 12px 4px;
            margin: 0;
        }
        .nav-menu-dropdown .dropdown-item {
            display: flex;
            align-items: center;
            padding: 7px 12px;
            border-radius: 8px;
            font-size: 0.8125rem;
            font-weight: 500;
            color: #48484a;
            transition: background 0.15s;
        }
        .nav-menu-dropdown .dropdown-item:hover {
            background: rgba(0,0,0,0.04);
            color: #1d1d1f;
        }
        .nav-menu-dropdown .dropdown-item.active {
            background: rgba(0,0,0,0.06);
            color: #1d1d1f;
            font-weight: 600;
        }
        .nav-menu-dropdown .dropdown-item i {
            width: 20px;
            margin-right: 8px;
            font-size: 0.8rem;
            color: #1d1d1f;
            text-align: center;
        }
        .nav-menu-dropdown .dropdown-item.disabled-tool {
            opacity: 0.3;
            pointer-events: none;
        }
        .nav-menu-dropdown .dropdown-divider {
            margin: 4px 12px;
            border-color: rgba(0,0,0,0.04);
        }
        .quick-icon-btn.disabled-tool {
            opacity: 0.3;
            pointer-events: none;
            cursor: not-allowed;
        }
        
        .sidebar-toggle {
            background: transparent;
            border: none;
            font-size: 1.25rem;
            color: #86868b;
            cursor: pointer;
            padding: 0.5rem;
            margin-right: 1rem;
            border-radius: 10px;
            transition: all 0.2s ease;
        }
        
        .sidebar-toggle:hover {
            background: transparent;
            border: none;
            color: #1d1d1f;
        }
        
        /* Quick Access Icon Buttons - Glassmorphism */
        .quick-icon-btn {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.6);
            color: #86868b;
            text-decoration: none;
            transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
            border: 1px solid rgba(0, 0, 0, 0.06);
        }
        
        .quick-icon-btn:hover {
            background: rgba(255, 255, 255, 0.82);
            color: #48484a;
            border-color: rgba(0, 0, 0, 0.1);
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
        }
        
        .quick-icon-btn.active {
            background: rgba(0, 0, 0, 0.08);
            color: #1d1d1f;
            border-color: rgba(0, 0, 0, 0.12);
            box-shadow: none;
        }
        
        .quick-icon-btn i {
            font-size: 1rem;
        }
        
        @media (max-width: 768px) {
            .sidebar {
                width: 280px;
                left: -280px;
            }
            
            .quick-icon-btn {
                width: 44px;
                height: 44px;
            }
            
            .sidebar-link {
                padding: 0.625rem 0.875rem;
                min-height: 40px;
            }
            
            .navbar .input-group {
                width: 100% !important;
                max-width: 200px;
            }
        }
        
        @media (max-width: 576px) {
            .navbar .input-group-text:last-child {
                display: none;
            }
            
            .navbar .input-group {
                max-width: 150px;
            }
            
            .navbar .btn-outline-secondary {
                display: none;
            }
        }

/* ============================================================
   Utility classes (Day 11 / S2.6 — extracted from inline styles)
   Top inline-style patterns from view_candidate.html (581),
   mandate_detail.html (408), and cockpit.html (379).
   ~179 instances → utility classes for HTML byte savings + cache reuse.
   ============================================================ */
.u-meta-label  { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.u-rounded-14  { border-radius: 10px; font-size: 14px; }
.u-rounded-13  { border-radius: 10px; font-size: 13px; }
.u-rounded-12  { border-radius: 10px; font-size: 12px; }
.u-mini-label  { font-size: 11px; color: #86868b; font-weight: 600; display: block; margin-bottom: 3px; }
.u-caps-label  { font-size: 10px; color: #86868b; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; }

/* Day 12 / S2.6 long-tail extension — utility classes for global high-frequency patterns */
.u-text-muted    { color: #86868b; }
.u-text-success  { color: #34c759; }
.u-meta-muted    { font-size: 12px; color: #86868b; }
.u-r8            { border-radius: 8px; }
.u-r8-12         { border-radius: 8px; font-size: 12px; }
.u-fs-9          { font-size: 9px; }
.u-fs-10         { font-size: 10px; }
.u-fs-11         { font-size: 11px; }
.u-mb-16         { margin-bottom: 16px; }
.u-section-title { font-size: 13px; font-weight: 700; color: #1d1d1f; margin-bottom: 8px; }
.u-pill-sm       { font-size: 0.7rem; padding: 1px 6px; border-radius: 6px; }
.u-accent-blue   { accent-color: #0a84ff; }
.u-th-uppercase  { padding: 10px 16px; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.u-filter-pill   { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #1d1d1f; cursor: pointer; background: rgba(255,255,255,0.8); border: 1px solid rgba(0,0,0,0.06); border-radius: 8px; padding: 6px 12px; }

/* ============================================================
   Skeleton loading classes — mirrored from static/css/ui-dialogs.css
   so the canonical `base-theme.css` location also provides them. The
   ui-dialogs stylesheet remains the source of truth (it defines the
   keyframes); these are aliases for tooling and contract tests that
   assume base-theme.css.
   ============================================================ */
.skeleton-row,
.skeleton-card,
.skeleton-kpi {
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.04) 0%,
        rgba(0, 0, 0, 0.08) 50%,
        rgba(0, 0, 0, 0.04) 100%
    );
    background-size: 200% 100%;
    animation: ui-skeleton-pulse 1.4s ease-in-out infinite;
    border-radius: 10px;
    color: transparent !important;
    pointer-events: none;
    user-select: none;
}
.skeleton-row { height: 14px; margin-bottom: 8px; width: 100%; }
.skeleton-card { height: 72px; margin-bottom: 10px; border-radius: 12px; }
.skeleton-kpi { height: 56px; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) {
    .skeleton-row,
    .skeleton-card,
    .skeleton-kpi {
        animation: none;
        background: rgba(0, 0, 0, 0.06);
    }
}