/* Extracted from home/templates/base.html — the app-shell theme/layout stylesheet (CSS variables, themes, sidebar, topbar).
   Loaded as a classic (non-defer) script/stylesheet at the same document
   position the inline block occupied, so ordering is unchanged. */
        /* ===============================================================
           THEME SYSTEM - CSS VARIABLES
           =============================================================== */

        :root {
            /* Base variables that all themes use */
            --app-rail-width: 74px;
            --app-panel-width: 248px;
            --sidebar-width: calc(var(--app-rail-width) + var(--app-panel-width));
            --sidebar-collapsed-width: var(--app-rail-width);
            --transition-speed: 0.3s;
            /* Ink for labels on a solid primary/state fill. Several templates
               already read these names; they follow the theme's primary ink
               (white on Light, near black on Dark's bright teal). */
            --on-primary: var(--btn-primary-text, #ffffff);
            --on-accent: var(--btn-primary-text, #ffffff);
            /* Initials on a user's avatar colour. White in both themes: the
               avatar palette is picked for white text (4.5:1 or better). */
            --avatar-ink: #ffffff;
        }

        /* Project colour palette (source: project_management/colors.py). Solid for bars and dots,
           text shade for labels on a tint; tints come from color-mix so each theme gets its own. */
        :root {
            /* light themes want a deeper tint than dark ones to not look washed out */
            --pc-tint: 26%;
            --pc-tint-hover: 34%;
            --pc-red: #e5484d;
            --pc-red-text: #ce2c31;
            --pc-orange: #f76b15;
            --pc-orange-text: #cc4e00;
            --pc-amber: #ffc53d;
            --pc-amber-text: #ab6400;
            --pc-grass: #46a758;
            --pc-grass-text: #2a7e3b;
            --pc-teal: #12a594;
            --pc-teal-text: #008573;
            --pc-cyan: #00a2c7;
            --pc-cyan-text: #107d98;
            --pc-blue: #0090ff;
            --pc-blue-text: #0d74ce;
            --pc-violet: #6e56cf;
            --pc-violet-text: #6550b9;
            --pc-purple: #8e4ec6;
            --pc-purple-text: #8145b5;
            --pc-pink: #d6409f;
            --pc-pink-text: #c2298a;
            --pc-brown: #ad7f58;
            --pc-brown-text: #914e15;
            --pc-slate: #8b8d98;
            --pc-slate-text: #60646c;
        }
        [data-theme="carbon"] {
            --pc-tint: 14%;
            --pc-tint-hover: 22%;
            --pc-red-text: color-mix(in srgb, var(--pc-red) 72%, white);
            --pc-orange-text: color-mix(in srgb, var(--pc-orange) 72%, white);
            --pc-amber-text: color-mix(in srgb, var(--pc-amber) 72%, white);
            --pc-grass-text: color-mix(in srgb, var(--pc-grass) 72%, white);
            --pc-teal-text: color-mix(in srgb, var(--pc-teal) 72%, white);
            --pc-cyan-text: color-mix(in srgb, var(--pc-cyan) 72%, white);
            --pc-blue-text: color-mix(in srgb, var(--pc-blue) 72%, white);
            --pc-violet-text: color-mix(in srgb, var(--pc-violet) 72%, white);
            --pc-purple-text: color-mix(in srgb, var(--pc-purple) 72%, white);
            --pc-pink-text: color-mix(in srgb, var(--pc-pink) 72%, white);
            --pc-brown-text: color-mix(in srgb, var(--pc-brown) 72%, white);
            --pc-slate-text: color-mix(in srgb, var(--pc-slate) 72%, white);
        }

        /* -- THEME: Graphite Gray (Default) -- */
        [data-theme="graphite"] {
            --primary-color: #4f46e5;
            --primary-hover: #4338ca;
            --primary-light: #eef2ff;
            --secondary-color: #6366f1;
            --accent-color: #818cf8;
            --accent-hover: #a5b4fc;

            /* Rail (sidebar) tokens — UI overhaul v1.1. Light theme gets a
               light rail; dark themes keep a near-black one. Every sidebar rule
               reads the --sidebar-* aliases underneath, so restyling the rail
               later means moving these values, not hunting selectors. */
            --rail: #ffffff;
            --rail-hair: rgba(11, 31, 51, 0.10);
            --rail-ink: #0b1f33;
            --rail-ink-2: #33475b;
            --rail-muted: #5e7082;
            --rail-hover: rgba(11, 31, 51, 0.05);
            /* 30px icon buttons need a firmer hover than a full-width nav row:
               5% on a white rail reads as nothing happened. */
            --rail-hover-strong: rgba(11, 31, 51, 0.09);
            --ground-alpha: 0.04;
            /* Neutral active fill, for nav items with no entity colour of their
               own - the theme's accent at low saturation, never a second hue. */
            --rail-active: color-mix(in srgb, var(--primary-color, #4f46e5) 12%, var(--rail, #ffffff));

            --sidebar-bg: var(--rail);
            --sidebar-bg-hover: var(--rail-hover);
            --sidebar-bg-hover-strong: var(--rail-hover-strong);
            --sidebar-bg-active: var(--rail-active);
            --sidebar-text: var(--rail-ink-2);
            --sidebar-text-strong: var(--rail-ink);
            --sidebar-text-muted: var(--rail-muted);
            --sidebar-border: var(--rail-hair);
            --sidebar-accent-bar: var(--primary-color, #4f46e5);
            /* The modal scrim used to borrow the rail colour; it stays dark now
               that the rail is white. */
            --backdrop-bg: #2c2c2c;
            /* Ink every floating panel mixes its drop shadow from. Shadows used
               to mix --text-primary, which is near white in a dark theme and
               painted a glow under the panel instead of a shadow. */
            --shadow-ink: #0f172a;
            
            --bg-primary: #ffffff;
            --bg-secondary: #f8fafc;
            --bg-tertiary: #f1f5f9;
            --text-primary: #0f172a;
            --text-secondary: #475569;
            --text-muted: #94a3b8;
            --border-color: #e2e8f0;
            
            --success-color: #10b981;
            --notice-color: #3b82f6;
            --warning-color: #f59e0b;
            --danger-color: #ef4444;
            --info-color: #06b6d4;
            /* The red in the logo. For marks that stand for the product
               itself rather than for a state, such as a favourite. */
            --brand-red: #df1e2f;
            
            --btn-primary-bg: #4f46e5;
            --btn-primary-hover: #4338ca;
            --btn-primary-text: #ffffff;
            --btn-secondary-bg: #f1f5f9;
            --btn-secondary-hover: #e2e8f0;
            --btn-secondary-text: #475569;
        }

        /* ===============================================================
           GLOBAL STYLES USING THEME VARIABLES
           =============================================================== */
        
        body {
            background-color: var(--bg-secondary);
            color: var(--text-primary);
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
        }

        /* ===============================================================
           GLOBAL MODAL THEMING
           Every Bootstrap modal follows the active theme. Light themes are
           visually unchanged (--bg-primary is #fff and --text-primary is
           dark, i.e. Bootstrap's own defaults); the dark theme
           (carbon) get fixed instead of rendering a white box. Modals that
           style their own .modal-content win via later cascade.
           =============================================================== */
        .modal {
            --bs-modal-bg: var(--bg-primary, #ffffff);
            --bs-modal-color: var(--text-primary, #0f172a);
            --bs-modal-border-color: var(--border-color, #e2e8f0);
            --bs-modal-header-border-color: var(--border-color, #e2e8f0);
            --bs-modal-footer-border-color: var(--border-color, #e2e8f0);
        }
        .modal-backdrop:not([id]) {
            --bs-backdrop-bg: var(--backdrop-bg, #2c2c2c);
            --bs-backdrop-opacity: 0.68;
            /* Keep the page sharp behind dialogs; no frosted backdrop. */
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        .modal-content {
            background-color: var(--bg-primary, #ffffff);
            color: var(--text-primary, #0f172a);
            border-color: var(--border-color, #e2e8f0);
        }
        .modal-header,
        .modal-footer { border-color: var(--border-color, #e2e8f0); }
        .modal-title { color: var(--text-primary, #0f172a); }
        /* -- THEME: Carbon Dark (neutral graphite + teal) -- */
        [data-theme="carbon"] {
            color-scheme: dark;  /* native inputs/date pickers/scrollbars render dark */
            --primary-color: #14b8a6;
            --primary-hover: #0d9488;
            --primary-light: #0a2e2a;
            --secondary-color: #2dd4bf;
            --accent-color: #5eead4;
            --accent-hover: #99f6e4;

            --rail: #0a0a0c;
            --rail-hair: rgba(255, 255, 255, 0.08);
            --rail-ink: rgba(255, 255, 255, 0.96);
            --rail-ink-2: rgba(255, 255, 255, 0.82);
            --rail-muted: rgba(255, 255, 255, 0.45);
            --rail-hover: rgba(20, 184, 166, 0.10);
            --rail-active: rgba(20, 184, 166, 0.18);
            --rail-hover-strong: rgba(255, 255, 255, 0.10);
            --ground-alpha: 0.06;

            --sidebar-bg: var(--rail);
            --sidebar-bg-hover: var(--rail-hover);
            --sidebar-bg-hover-strong: var(--rail-hover-strong);
            --sidebar-bg-active: var(--rail-active);
            --sidebar-text: var(--rail-ink-2);
            --sidebar-text-strong: var(--rail-ink);
            --sidebar-text-muted: var(--rail-muted);
            --sidebar-border: var(--rail-hair);
            --sidebar-accent-bar: #14b8a6;
            --backdrop-bg: #0a0a0c;
            --shadow-ink: #000000;

            --bg-primary: #0e0e10;
            --bg-secondary: #18181b;
            --bg-tertiary: #232327;
            --text-primary: #f4f4f5;
            --text-secondary: #b6b6bd;
            --text-muted: #74747c;
            --border-color: #2c2c31;

            --success-color: #34d399;
            --notice-color: #60a5fa;
            --warning-color: #fbbf24;
            --danger-color: #f87171;
            --info-color: #38bdf8;
            --brand-red: #f2334a;

            --btn-primary-bg: #14b8a6;
            --btn-primary-hover: #0d9488;
            /* Near-black ink on the teal: white on #14b8a6 is 2.5:1, this is
               about 8:1. The teal stays bright; only the label changes. */
            --btn-primary-text: #04201c;
            --btn-secondary-bg: #18181b;
            --btn-secondary-hover: #232327;
            --btn-secondary-text: #d4d4d8;
        }

        /* Dark themes: Bootstrap 5.3 reads data-bs-theme="dark" (set on <html>
           by base.html / base-shell.js) for its own components. Alias its
           tokens to ours so .form-control, .dropdown-menu, .card, .table,
           .list-group, .offcanvas etc. wear the theme palette instead of
           Bootstrap's stock #212529 grays. Same specificity as Bootstrap's
           [data-bs-theme=dark] rule; this file loads later, so it wins. */
        [data-theme="carbon"] {
            color-scheme: dark;
            --bs-body-bg: var(--bg-primary);
            --bs-body-color: var(--text-primary);
            --bs-emphasis-color: var(--text-primary);
            --bs-secondary-color: var(--text-secondary);
            --bs-secondary-bg: var(--bg-secondary);
            --bs-tertiary-color: var(--text-muted);
            --bs-tertiary-bg: var(--bg-tertiary);
            --bs-border-color: var(--border-color);
            --bs-border-color-translucent: var(--border-color);
            --bs-heading-color: var(--text-primary);
            --bs-link-color: var(--primary-color);
            --bs-link-hover-color: var(--primary-hover);
            --bs-primary: var(--primary-color);
        }

        /* Every Bootstrap button other than .btn-primary and .btn-secondary
           wears the secondary button: the theme's neutral box, with the state
           colour as text where the class names one, so Delete reads red and is
           never a solid red block. Outline, light and state buttons used to be
           stock Bootstrap in graphite and only patched in carbon. */
        .btn-light, .btn-dark,
        .btn-success, .btn-danger, .btn-info,
        [class*="btn-outline-"] {
            --btn-ink: var(--btn-secondary-text, #475569);
            --bs-btn-bg: var(--btn-secondary-bg, #f1f5f9);
            --bs-btn-color: var(--btn-ink);
            --bs-btn-border-color: var(--border-color, #e2e8f0);
            --bs-btn-hover-bg: var(--btn-secondary-hover, #e2e8f0);
            --bs-btn-hover-color: var(--btn-ink);
            --bs-btn-hover-border-color: color-mix(in srgb, var(--btn-ink) 40%, var(--border-color, #e2e8f0));
            --bs-btn-active-bg: var(--btn-secondary-hover, #e2e8f0);
            --bs-btn-active-color: var(--btn-ink);
            --bs-btn-active-border-color: color-mix(in srgb, var(--btn-ink) 40%, var(--border-color, #e2e8f0));
            --bs-btn-disabled-bg: var(--btn-secondary-bg, #f1f5f9);
            --bs-btn-disabled-color: var(--btn-ink);
            --bs-btn-disabled-border-color: var(--border-color, #e2e8f0);
        }
        .btn-success, .btn-outline-success { --btn-ink: var(--success-color, #10b981); }
        .btn-danger,  .btn-outline-danger  { --btn-ink: var(--danger-color, #ef4444); }
        .btn-info,    .btn-outline-info    { --btn-ink: var(--info-color, #06b6d4); }
        .btn-outline-primary               { --btn-ink: var(--primary-color, #4f46e5); }
        /* A pressed toggle (btn-check, .active) carries the primary tint. */
        .btn-check:checked + [class*="btn-outline-"],
        [class*="btn-outline-"].active {
            --bs-btn-active-bg: color-mix(in srgb, var(--primary-color, #4f46e5) 14%, var(--btn-secondary-bg, #f1f5f9));
            --bs-btn-active-color: var(--primary-color, #4f46e5);
            --bs-btn-active-border-color: color-mix(in srgb, var(--primary-color, #4f46e5) 45%, var(--border-color, #e2e8f0));
        }

        /* Dark themes only: lighten the close button, tint form controls, and
           recolor the native <select> arrow (all otherwise dark-on-dark). */
        [data-theme="carbon"] .btn-close { filter: invert(1) grayscale(100%) brightness(1.8); }
        [data-theme="carbon"] .modal .form-control,
        [data-theme="carbon"] .modal .form-select,
        [data-theme="carbon"] .modal .form-control:focus,
        [data-theme="carbon"] .modal .form-select:focus {
            background-color: var(--bg-secondary);
            color: var(--text-primary);
            border-color: var(--border-color);
        }
        [data-theme="carbon"] .modal .form-control::placeholder { color: var(--text-muted); }
        [data-theme="carbon"] .modal .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='%23b6b6bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
        }

        .brand-gradient {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            font-weight: 600;
            letter-spacing: 0.5px;
        }

        /* ===============================================================
           SIDEBAR STYLES
           =============================================================== */
        
        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            width: var(--sidebar-width);
            background-color: var(--sidebar-bg);
            z-index: 1000;
            overflow: hidden;
            transition: width var(--transition-speed) ease;
            display: flex;
            flex-direction: column;
        }

        .sidebar.collapsed {
            width: var(--sidebar-collapsed-width);
        }

        .sidebar-header {
            flex-shrink: 0;
            padding: 1.25rem 1rem;
            border-bottom: 1px solid var(--sidebar-border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 70px;
        }

        .sidebar-brand {
            color: var(--sidebar-text);
            font-weight: 600;
            font-size: 1.1rem;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.6rem;
            overflow: hidden;
        }

        .sidebar-brand:hover {
            color: var(--sidebar-text-strong, var(--sidebar-text));
        }

        .brand-logo {
            width: 32px;
            height: 32px;
            object-fit: contain;
            border-radius: 6px;
            flex-shrink: 0;
            transition: transform 0.2s ease;
        }

        .sidebar-brand:hover .brand-logo {
            transform: scale(1.05);
        }

        .sidebar-nav {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 1rem 0;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE/Edge */
        }

        .sidebar-nav::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera */
        }

        .logo-text {
            color: var(--sidebar-text-strong, var(--sidebar-text));
            font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
            font-weight: 700;
            font-size: 24px;
            letter-spacing: 0.03em;
            margin: 0;
            white-space: nowrap;
            opacity: 1;
            transition: opacity 0.2s ease, width 0.3s ease;
        }

        .sidebar.collapsed .logo-text {
            opacity: 0;
            width: 0;
        }

        /* Nav Group Styles */
        .nav-group {
            margin-bottom: 0.25rem;
        }

        .nav-group-label {
            padding: 0.3rem 1rem;
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--sidebar-text-muted);
            margin-top: 0.15rem;
            white-space: nowrap;
            overflow: hidden;
            transition: opacity 0.2s ease, color 0.2s ease;
            display: flex;
            align-items: center;
            gap: 0.4rem;
            cursor: pointer;
            user-select: none;
        }

        .nav-group-label:hover {
            color: var(--sidebar-text-strong, var(--sidebar-text));
        }

        .nav-group-label--split {
            justify-content: space-between;
            padding-right: 0.5rem;
        }

        .nav-group-label-title {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            min-width: 0;
        }

        .nav-group-action {
            appearance: none;
            border: 0;
            background: transparent;
            color: var(--sidebar-text);
            cursor: pointer;
            font: inherit;
            font-size: 0.85rem;
            font-weight: 500;
            margin: 0 10px;
            padding: 0;
            white-space: nowrap;
        }

        .nav-group-label > .group-toggle-arrow {
            font-size: 1rem;
            line-height: 1;
            transition: transform 0.2s ease;
            flex-shrink: 0;
            opacity: 0.75;
        }

        .nav-group.collapsed > .nav-group-label .group-toggle-arrow {
            transform: rotate(-90deg);
        }

        .nav-group.collapsed > *:not(.nav-group-label) {
            display: none !important;
        }

        .sidebar.collapsed .nav-group-label {
            opacity: 0;
            pointer-events: none;
        }

        /* Nav Item Styles */
        .sidebar .nav-link {
            color: var(--sidebar-text);
            font-weight: 500;
            padding: 0.6rem 1rem;
            border-radius: 4px;
            transition: all 0.2s ease;
            margin: 2px 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            text-decoration: none;
            white-space: nowrap;
            overflow: hidden;
        }

        .sidebar .nav-link:hover {
            color: var(--sidebar-text-strong, var(--sidebar-text));
            background-color: var(--sidebar-bg-hover);
        }

        .sidebar .nav-link-deprecated { opacity: 0.55; }
        .sidebar .nav-link-deprecated span { text-decoration: line-through; }

        .sidebar .nav-link.active {
            color: var(--sidebar-text-strong, var(--sidebar-text));
            background-color: var(--sidebar-bg-active);
            position: relative;
        }

        .sidebar .nav-link.active::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 60%;
            background-color: var(--sidebar-accent-bar);
            border-radius: 0 2px 2px 0;
        }

        .sidebar .nav-link i,
        .sidebar .nav-link svg {
            font-size: 1.1rem;
            width: 20px;
            flex-shrink: 0;
        }

        /* Per-section sidebar accent when item colors are on — sourced from the
           --ent-* system (home/brand_colors.py). Each nav item publishes its own
           hue as --nav-accent; the icon and the hover surface both read from it,
           so hovering Companies tints rose, Deals indigo, and so on. */
        .sidebar.item-colors-on .nav-link[data-model="companies"] { --nav-accent: var(--ent-company); }
        .sidebar.item-colors-on .nav-link[data-model="candidates"] { --nav-accent: var(--ent-candidate); }
        .sidebar.item-colors-on .nav-link[data-model="contacts"] { --nav-accent: var(--ent-contact); }
        .sidebar.item-colors-on .nav-link[data-model="users"] { --nav-accent: var(--ent-user); }
        .sidebar.item-colors-on .nav-link[data-model="suppliers"] { --nav-accent: var(--ent-supplier); }
        .sidebar.item-colors-on .nav-link[data-model="jobs"] { --nav-accent: var(--ent-job); }
        .sidebar.item-colors-on .nav-link[data-model="deals"] { --nav-accent: var(--ent-deal); }
        .sidebar.item-colors-on .nav-link[data-model="projects"] { --nav-accent: var(--ent-project); }
        .sidebar.item-colors-on .nav-link[data-model="hr"] { --nav-accent: var(--ent-employee); }
        .sidebar.item-colors-on .nav-link[data-model="assets"] { --nav-accent: var(--ent-asset); }
        .sidebar.item-colors-on .nav-link[data-model="sales"] { --nav-accent: var(--ent-sales); }
        .sidebar.item-colors-on .nav-link[data-model="prospects"] { --nav-accent: var(--ent-prospect); }
        .sidebar.item-colors-on .nav-link[data-model="mailbox"] { --nav-accent: var(--ent-mailbox); }
        .sidebar.item-colors-on .nav-link[data-model="cvbuilder"] { --nav-accent: var(--ent-cvbuilder); }
        .sidebar.item-colors-on .nav-link[data-model="myspace"] { --nav-accent: var(--ent-myspace); }
        .sidebar.item-colors-on .nav-link[data-model="orgchart"] { --nav-accent: var(--ent-orgchart); }
        .sidebar.item-colors-on .nav-link[data-model="pto"] { --nav-accent: var(--ent-pto); }
        .sidebar.item-colors-on .nav-link[data-model="costcenters"] { --nav-accent: var(--ent-costcenters); }
        .sidebar.item-colors-on .nav-link[data-model="racunoid"] { --nav-accent: var(--ent-racunoid); }
        .sidebar.item-colors-on .nav-link[data-model="invoices"] { --nav-accent: var(--ent-invoice); }
        .sidebar.item-colors-on .nav-link[data-model="expenses"] { --nav-accent: var(--ent-expense); }
        .sidebar.item-colors-on .nav-link[data-model="reporting"],
        .sidebar.item-colors-on .nav-link[data-model="dashboards"],
        .sidebar.item-colors-on .nav-link[data-model="dashboard"] { --nav-accent: var(--ent-reporting); }
        .sidebar.item-colors-on .nav-link[data-model="rsr"] { --nav-accent: var(--ent-rsr); }
        .sidebar.item-colors-on .nav-link[data-model="timetracker"] { --nav-accent: var(--ent-timetracker); }
        .sidebar.item-colors-on .nav-link[data-model="docshub"] { --nav-accent: var(--ent-docshub); }
        .sidebar.item-colors-on .nav-link[data-model="changelog"] { --nav-accent: var(--ent-changelog); }
        .sidebar.item-colors-on .nav-link[data-model="fx"] { --nav-accent: var(--ent-fx); }
        .sidebar.item-colors-on .nav-link[data-model="settings"] { --nav-accent: var(--ent-settings); }
        .sidebar.item-colors-on .nav-link[data-model="pipelines"] { --nav-accent: var(--ent-pipelines); }

        .sidebar.item-colors-on .nav-link[data-model] i { color: var(--nav-accent); }

        /* Hover picks up the item's own hue instead of the neutral grey wash. The
           tint is transparent, so it composites over whatever the theme's sidebar
           background is and stays legible on light and dark alike. */
        .sidebar.item-colors-on .nav-link[data-model]:hover {
            background-color: color-mix(in srgb, var(--nav-accent) 16%, transparent);
        }
        /* Active beats hover on purpose: the item you are on holds one steady
           fill instead of dropping to the lighter hover tint under the cursor. */
        .sidebar.item-colors-on .nav-link[data-model].active {
            background-color: color-mix(in srgb, var(--nav-accent) 20%, transparent);
        }
        .sidebar.item-colors-on .nav-link[data-model].active::before {
            background-color: var(--nav-accent);
        }
        /* SVG icon for Time Tracker (if rendered as svg) - colored when toggled on */
        .sidebar .nav-link[data-model="timetracker"] svg { stroke: var(--sidebar-text); transition: stroke 0.2s; }
        .sidebar.item-colors-on .nav-link[data-model="timetracker"] svg { stroke: var(--ent-timetracker); }

        /* Toggle switch for preferences */
        .pref-toggle-group {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 0;
        }
        .pref-toggle-label {
            font-size: 12px;
            font-weight: 500;
            color: var(--sidebar-text);
        }
        .pref-toggle-desc {
            font-size: 10px;
            color: var(--sidebar-text-muted);
            margin-top: 2px;
        }
        .pref-toggle {
            position: relative;
            width: 36px;
            height: 20px;
            flex-shrink: 0;
        }
        .pref-toggle input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .pref-toggle .toggle-slider {
            position: absolute;
            cursor: pointer;
            inset: 0;
            background: color-mix(in srgb, var(--sidebar-text) 22%, transparent);
            border-radius: 20px;
            transition: 0.2s;
        }
        .pref-toggle .toggle-slider::before {
            content: '';
            position: absolute;
            height: 14px;
            width: 14px;
            left: 3px;
            bottom: 3px;
            background: var(--btn-primary-text, #ffffff);
            border-radius: 50%;
            transition: 0.2s;
        }
        .pref-toggle input:checked + .toggle-slider {
            background: var(--primary-color, #0ea5e9);
        }
        .pref-toggle input:checked + .toggle-slider::before {
            transform: translateX(16px);
        }

        .sidebar .nav-link span {
            opacity: 1;
            transition: opacity 0.2s ease;
        }

        .sidebar.collapsed .nav-link span {
            opacity: 0;
        }

        /* Kanban quick-link */
        .kanban-pill {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            margin-left: 6px;
            font-size: 0.58rem;
            font-weight: 500;
            letter-spacing: 0.03em;
            color: var(--sidebar-text-muted);
            text-decoration: underline;
            text-underline-offset: 2px;
            text-decoration-color: color-mix(in srgb, var(--sidebar-text) 20%, transparent);
            white-space: nowrap;
            flex-shrink: 0;
            transition: color 0.15s ease, text-decoration-color 0.15s ease, opacity 0.2s ease;
            opacity: 1;
        }

        .kanban-pill:hover {
            color: var(--accent-color);
            text-decoration-color: var(--accent-color);
        }

        .kanban-pill i {
            font-size: 0.65rem;
            width: auto !important;
            flex-shrink: 0;
        }

        /* Hide when sidebar is collapsed */
        .sidebar.collapsed .kanban-pill {
            opacity: 0;
            pointer-events: none;
        }

        .soon-pill {
            display: inline-flex;
            align-items: center;
            margin-left: auto;
            padding: 1px 6px;
            font-size: 0.55rem;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--sidebar-text-muted, rgba(255,255,255,0.5));
            background: var(--sidebar-bg-hover, rgba(255,255,255,0.08));
            border-radius: 8px;
            white-space: nowrap;
            flex-shrink: 0;
            opacity: 1;
            transition: opacity 0.2s ease;
        }
        .sidebar.collapsed .soon-pill { opacity: 0; pointer-events: none; }
        .sidebar .nav-link.is-soon { opacity: 0.55; cursor: not-allowed; }
        .sidebar .nav-link.is-soon:hover { background: transparent; }

        /* Submenu Styles */
        .nav-item-with-submenu > .nav-link {
            justify-content: space-between;
        }

        .nav-item-with-submenu > .nav-link .submenu-arrow {
            transition: transform 0.2s ease, opacity 0.2s ease;
            margin-left: auto;
            flex-shrink: 0;
        }

        .nav-item-with-submenu.open > .nav-link .submenu-arrow {
            transform: rotate(180deg);
        }

        .sidebar.collapsed .submenu-arrow {
            opacity: 0;
        }

        .submenu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            background-color: color-mix(in srgb, var(--sidebar-text) 8%, transparent);
            border-radius: 4px;
            margin: 0 0.5rem;
        }

        /* Child selector on purpose: a nested submenu (a dropdown inside a
           dropdown) opens only when its own item is open, not with the parent. */
        .nav-item-with-submenu.open > .submenu {
            max-height: 1000px;
        }

        .sidebar.collapsed .submenu {
            max-height: 0 !important;
        }

        .submenu .nav-link {
            padding: 0.5rem 1rem 0.5rem 2.5rem;
            font-size: 0.9rem;
            margin: 0;
            border-radius: 0;
        }

        .submenu .nav-link:first-child {
            border-radius: 4px 4px 0 0;
        }

        .submenu .nav-link:last-child {
            border-radius: 0 0 4px 4px;
        }

        /* Nested submenus: one more indent level, no double margin */
        .submenu .submenu {
            margin: 0;
        }

        .submenu .submenu .nav-link {
            padding-left: 52px;
            font-size: 12px;
        }

        /* Pin the indent on hover: the theme layer's `.submenu .nav-link:hover`
           sets 2.1rem, which would yank nested links left on mouseover. */
        .submenu .submenu .nav-link:hover {
            padding-left: 52px;
        }

        /* Heading row of a tree that changes with context (the RSR tree is the
           active app's): muted, not a link, same indent as the links below. */
        .submenu .submenu-app {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 7px 16px 5px 38px;
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: .05em;
            text-transform: uppercase;
            color: var(--sidebar-text-muted, var(--text-muted));
            cursor: default;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .submenu .submenu-app i { font-size: 13px; flex-shrink: 0; color: var(--ent-rsr, #5B21B6); }
        .submenu .submenu-app span { overflow: hidden; text-overflow: ellipsis; }
        .sidebar.collapsed .submenu-app { display: none; }

        /* Colored icons inside submenu links — same palette as the hub cards,
           so each entry is recognizable without reading its label. Selector
           depth beats the generic `.sidebar .nav-link i { color: currentColor }`. */
        .submenu .nav-link i:first-child {
            font-size: 15px;
            flex-shrink: 0;
        }
        .sidebar .nav-link i.sn-purple { color: var(--ent-rsr, #5B21B6); }
        .sidebar .nav-link i.sn-blue   { color: var(--info-color, #3b82f6); }
        .sidebar .nav-link i.sn-green  { color: var(--success-color, #10b981); }
        .sidebar .nav-link i.sn-indigo { color: var(--accent-color, #6366f1); }
        .sidebar .nav-link i.sn-amber  { color: var(--warning-color, #f59e0b); }
        .sidebar .nav-link i.sn-gray   { color: var(--text-muted, #6b7280); }

        /* Sidebar Footer - compact */
        .sidebar-footer {
            flex-shrink: 0;
            padding: 0.4rem 0.5rem;
            border-top: 1px solid var(--sidebar-border);
            background-color: var(--sidebar-bg);
            display: flex;
            flex-direction: column;
            gap: 1px;
        }

        .footer-link {
            color: var(--sidebar-text);
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.38rem 0.65rem;
            border-radius: 4px;
            transition: all 0.2s ease;
            text-decoration: none;
            white-space: nowrap;
            overflow: hidden;
            position: relative;
            cursor: pointer;
            font-size: 0.85rem;
        }

        .footer-link:hover {
            color: var(--sidebar-text-strong, var(--sidebar-text));
            background-color: var(--sidebar-bg-hover);
        }

        .footer-link.active {
            color: var(--primary-color);
            background-color: var(--sidebar-bg-active);
        }

        .footer-link i {
            flex-shrink: 0;
            font-size: 1rem;
            width: 18px;
        }

        .footer-link span {
            opacity: 1;
            transition: opacity 0.2s ease;
            font-size: 0.85rem;
        }

        .sidebar-activities-label {
            padding: 0.42rem 0.65rem 0.2rem;
            color: var(--sidebar-text-muted);
            font-size: 0.65rem;
            font-weight: 600;
            letter-spacing: 0.08em;
            line-height: 1;
            text-transform: uppercase;
            white-space: nowrap;
            overflow: hidden;
        }

        .sidebar-footer-divider {
            height: 1px;
            margin: 0.3rem 0.65rem;
            background: var(--sidebar-border);
        }

        .footer-link .sidebar-action-badge {
            min-width: 18px;
            height: 18px;
            margin-left: auto;
            padding: 0 5px;
            border-radius: 999px;
            /* Counters sit on a red deepened toward the shadow ink: white on
               the plain danger red was under 3:1 on Dark (and 3.8 on Light). */
            background: color-mix(in srgb, var(--danger-color, #ef4444) 78%, var(--shadow-ink, #0f172a));
            color: var(--btn-primary-text, #ffffff);
            font-size: 0.65rem;
            font-weight: 700;
            line-height: 1;
            display: none;
            align-items: center;
            justify-content: center;
            font-variant-numeric: tabular-nums;
        }

        .footer-link .sidebar-action-badge.visible { display: inline-flex; }
        .footer-link .sidebar-action-badge[hidden] { display: none; }

        .footer-link.sidebar-action-pulse i {
            animation: sidebarActionPulse 280ms ease-out;
        }

        @keyframes sidebarActionPulse {
            50% { transform: scale(1.18); }
        }

        @media (prefers-reduced-motion: reduce) {
            .footer-link.sidebar-action-pulse i { animation: none; }
        }

        .sidebar.collapsed .footer-link span {
            opacity: 0;
        }

        .sidebar.collapsed .sidebar-activities-label { display: none; }

        .sidebar.collapsed .footer-link .sidebar-action-badge {
            position: absolute;
            top: 2px;
            right: 4px;
            margin: 0;
            opacity: 1;
        }

        .sidebar.collapsed .footer-link {
            position: relative;
        }

        .sidebar.collapsed .footer-link:hover::after {
            content: attr(data-title);
            position: absolute;
            left: calc(var(--sidebar-collapsed-width) - 8px);
            top: 50%;
            transform: translateY(-50%);
            background-color: var(--sidebar-bg);
            color: var(--sidebar-text);
            border: 1px solid var(--sidebar-border);
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 0.85rem;
            white-space: nowrap;
            z-index: 1060;
            box-shadow: 0 2px 8px color-mix(in srgb, var(--shadow-ink, #0f172a) 18%, transparent);
        }

        /* ── App ground ──────────────────────────────────────────────
           The tiled field from the UI overhaul, painted once behind the
           whole shell. It is a CSS mask rather than a coloured image, so
           one file serves every theme and the field takes the theme's own
           accent.

           Every page inside the shell carries it. This used to name screens
           one at a time, which meant a page only got the field once somebody
           remembered to add it, and 34 of the 53 in the menu never were. The
           shell is the right unit: if a page has .main-content it is an app
           page, and it gets the same ground as its neighbours.

           The flags stay classes rather than :has() selectors. A :has()
           anchored on the root costs a whole-document re-check on any state
           change, which measured 175ms on one input focus; the page answers
           the question once and the styles read the answer.

           The colour lives on html because the field is a negative z-index
           child of body, and a background on body would paint straight over
           it. Anything between body and the content that paints its own
           surface has to step aside for the same reason: those are listed
           below, and a new one shows up as a page with no field on it. */
        html.app-ground-html {
            background-color: var(--bg-secondary, #f8fafc);
        }

        html.app-ground body,
        html.app-ground .main-content,
        /* Wrappers that paint the page colour themselves rather than letting
           the shell do it. Each one hid the field until it stepped aside. */
        html.app-ground .project-page,
        html.app-ground .projects-page,
        html.app-ground .main-wrapper,
        html.app-ground .content-wrapper,
        html.app-ground .pf-shell,
        html.app-ground .pf-canvas-wrap {
            background-color: transparent;
        }

        html.app-ground body::before {
            content: '';
            position: fixed;
            inset: 0;
            z-index: -1;
            pointer-events: none;
            /* Monochrome by default: the field is texture, not a second
               accent. --text-primary flips with the theme, so it is dark on
               a light ground and light on a dark one. Set --ground-color to
               tint it if that is ever wanted. */
            --ground-ink: var(--ground-color, var(--text-primary, #0f172a));
            /* All four corners carry the field and the middle keeps a faint
               wash of it, so the pattern frames the page instead of sitting
               in one corner; the centre, where the content is read, stays
               the quietest part. */
            background-image:
                radial-gradient(75% 75% at 100% 0%, var(--ground-ink) 0%, transparent 70%),
                radial-gradient(75% 75% at 0% 100%, var(--ground-ink) 0%, transparent 70%),
                radial-gradient(60% 60% at 0% 0%, color-mix(in srgb, var(--ground-ink) 80%, transparent) 0%, transparent 70%),
                radial-gradient(60% 60% at 100% 100%, color-mix(in srgb, var(--ground-ink) 80%, transparent) 0%, transparent 70%),
                linear-gradient(color-mix(in srgb, var(--ground-ink) var(--ground-floor, 35%), transparent),
                                color-mix(in srgb, var(--ground-ink) var(--ground-floor, 35%), transparent));
            -webkit-mask-image: url('../shared/img/ground-tile.svg');
            mask-image: url('../shared/img/ground-tile.svg');
            -webkit-mask-size: var(--ground-tile-size, 100px);
            mask-size: var(--ground-tile-size, 100px);
            -webkit-mask-repeat: repeat;
            mask-repeat: repeat;
            -webkit-mask-position: 100% 0;
            mask-position: 100% 0;
            opacity: var(--ground-alpha, 0.14);
        }

        /* ===============================================================
           SIDEBAR v2 - app rail + contextual panel
           The rail names the eight apps; the panel shows only the items
           tagged with the app that is open. Items keep their own markup and
           their own permission guards: the rail decides what is on screen,
           never what a person is allowed to reach.
           =============================================================== */
        .sidebar-v2 {
            flex-direction: row;
        }

        .app-rail {
            flex-shrink: 0;
            width: var(--app-rail-width);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            padding: 10px 6px 12px;
            border-right: 1px solid var(--sidebar-border);
            overflow-y: auto;
            scrollbar-width: none;
        }

        .app-rail::-webkit-scrollbar { display: none; }

        .app-rail-brand {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
            flex-shrink: 0;
        }

        .app-tile,
        .app-rail-search {
            position: relative;
            width: 100%;
            padding: 7px 2px 6px;
            border: 0;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3px;
            flex-shrink: 0;
            background: transparent;
            color: var(--sidebar-text-muted);
            font: inherit;
            font-size: 10px;
            font-weight: 600;
            line-height: 1.2;
            cursor: pointer;
            transition: color 0.14s ease, background-color 0.14s ease;
        }

        .app-tile i,
        .app-rail-search i {
            font-size: 20px;
            line-height: 1;
        }

        /* Every app wears its own hue on its icon, the one its records use
           everywhere else, so the rail reads by colour at a glance. The app you
           are in is still the one with the tinted tile and the bar under it. */
        .app-tile i {
            color: var(--app-color, currentColor);
        }

        .app-tile:hover,
        .app-rail-search:hover,
        .app-rail-search[aria-expanded="true"] {
            color: var(--sidebar-text-strong, var(--sidebar-text));
            background: var(--sidebar-bg-hover);
        }

        .app-rail-search:focus-visible {
            outline: 2px solid var(--primary-color);
            outline-offset: -2px;
        }

        /* Search reaches every app, so it is kept off the run of eight by a
           rule rather than left to read as a ninth one. The line is drawn in
           the margin below the button so the hover fill keeps its own shape. */
        .app-rail-search {
            margin-bottom: 11px;
        }

        .app-rail-search::after {
            content: '';
            position: absolute;
            left: 10px;
            right: 10px;
            bottom: -6px;
            height: 1px;
            background: var(--sidebar-border);
        }

        /* The app the panel is showing. Marked, because you need to know which
           list you are reading, but not coloured: pointing at an app is not
           being in it, and the colour is what says where you are. */
        .app-tile.active {
            color: var(--sidebar-text-strong, var(--sidebar-text));
            background: var(--sidebar-bg-active);
        }

        /* The app the page in front of you belongs to. It carries the hue those
           records use everywhere else in the product and it does not move while
           you browse the rail, so the rail cannot claim you are somewhere you
           are not. Drawn after .active on purpose: on the usual screen the two
           are the same tile and this is the one that should win.

           The bar is laid over the tile rather than stacked under the label: in
           the flow it added its own height and the gap above it, which made the
           tile five pixels taller and nudged every tile below it down. */
        .app-tile.current {
            color: var(--sidebar-text-strong, var(--sidebar-text));
            background: color-mix(in srgb, var(--app-color) 14%, transparent);
        }

        .app-tile.current i {
            color: var(--app-color);
        }

        .app-tile.current::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 2px;
            transform: translateX(-50%);
            width: 14px;
            height: 2px;
            border-radius: 2px;
            background: var(--app-color);
        }

        /* Folded with nothing peeked there is no panel, so there is nothing for
           a showing mark to point at, and a second lit tile beside the one you
           are on would just read as a second selection. It comes back the
           moment the panel does. */
        .sidebar-v2.collapsed:not(.is-peek) .app-tile.active:not(.current) {
            color: var(--sidebar-text-muted);
            background: transparent;
        }

        .app-panel {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        /* Swapping apps moves the list in from the rail side, so the change
           reads as the panel following the tile rather than a flicker. */
        .app-panel.app-swap .app-panel-title,
        .app-panel.app-swap .sidebar-nav {
            animation: appSwapIn 0.19s cubic-bezier(0.2, 0.7, 0.3, 1);
        }

        @keyframes appSwapIn {
            from { opacity: 0; transform: translateX(-7px); }
            to { opacity: 1; transform: none; }
        }

        @media (prefers-reduced-motion: reduce) {
            .app-panel.app-swap .app-panel-title,
            .app-panel.app-swap .sidebar-nav {
                animation: none;
            }
        }

        /* The mark moved to the rail, so the panel head is free to say which
           app is open. */
        .sidebar-v2 .sidebar-brand {
            display: none;
        }

        .app-panel-title {
            flex: 1;
            min-width: 0;
            /* Lines up with the icons in the rows underneath rather than with
               the panel's own edge, so the app name heads its own list. */
            padding-left: 8px;
            overflow: hidden;
            color: var(--sidebar-text-strong, var(--sidebar-text));
            font-size: 17px;
            font-weight: 700;
            letter-spacing: -0.01em;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* Only the open app's items. The owner attribute is put on whichever
           element wraps a tagged link, so an item with a submenu hides as one
           piece instead of leaving its children behind. */
        .sidebar-v2 [data-app-owner] {
            display: none;
        }

        /* Each owner says how it wants to be shown, so revealing a link does not
           flatten the icon/label row that .nav-link relies on. */
        .sidebar-v2 a.nav-link[data-app-owner] {
            --app-owner-display: flex;
        }

        .sidebar-v2[data-app="home"] [data-app-owner="home"],
        .sidebar-v2[data-app="sales"] [data-app-owner="sales"],
        .sidebar-v2[data-app="rsr"] [data-app-owner="rsr"],
        .sidebar-v2[data-app="recruiting"] [data-app-owner="recruiting"],
        .sidebar-v2[data-app="contacts"] [data-app-owner="contacts"],
        .sidebar-v2[data-app="projects"] [data-app-owner="projects"],
        .sidebar-v2[data-app="team"] [data-app-owner="team"],
        .sidebar-v2[data-app="finance"] [data-app-owner="finance"],
        .sidebar-v2[data-app="settings"] [data-app-owner="settings"] {
            display: var(--app-owner-display, block);
        }

        /* A panel with two real clusters (Sales: Leads / Pipeline) names them.
           Tagged like a row, so the label comes and goes with its app. */
        .sidebar-v2 .panel-section {
            margin: 10px 0 2px;
            padding: 0 12px;
            color: var(--sidebar-text-muted);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .sidebar-v2 .panel-section:first-child {
            margin-top: 2px;
        }

        /* The rail is the grouping now, so the old group headings would just
           repeat the tile that is already lit. */
        .sidebar-v2 .nav-group-label {
            display: none;
        }

        .sidebar-v2 .nav-group {
            margin-bottom: 0;
        }

        /* Collapse hides the panel and keeps the rail, rather than shrinking
           every row to an icon the way v1 did. */
        .sidebar-v2.collapsed .app-panel {
            display: none;
        }

        /* Peek: folded, the panel is waiting rather than gone. Pointing at the
           rail brings it back (base-shell.js adds .is-peek) and leaving puts it
           away. It lies over the page instead of pushing it, so nothing
           reflows on a hover. */
        /* The width snaps rather than animating, and the panel slides in over
           the page instead. Animating the rail's width made every peek wait out
           the 300ms fold transition before the menu was readable; a transform
           costs no layout and reads as instant. Pinning and unpinning keep the
           slower fold, because those move the page and should look deliberate. */
        /* The rail keeps its width: the peek is a card that opens beside the
           hovered tile (Snowflake-style), not a full-height column. */
        .sidebar-v2.collapsed.is-peek {
            transition: none;
        }

        /* Closing snaps the same way opening does. base-shell.js hangs this on
           the sidebar for the frame the peek is taken off it, because the fold
           transition would otherwise animate the width back down long after the
           panel itself had gone, leaving an empty box shrinking on its own. */
        .sidebar-v2.peek-closing {
            transition: none;
        }

        .sidebar-v2.collapsed.is-peek .app-panel {
            animation: peekSlide 130ms cubic-bezier(0.2, 0.75, 0.3, 1);
        }

        @keyframes peekSlide {
            from { transform: translateX(-12px); opacity: 0.35; }
            to { transform: none; opacity: 1; }
        }

        @media (prefers-reduced-motion: reduce) {
            .sidebar-v2.collapsed.is-peek .app-panel { animation: none; }
        }

        /* base-shell.js sets --peek-top to line the card up with the tile it
           opened for, clamped so the card stays on screen. */
        .sidebar-v2.collapsed.is-peek .app-panel {
            display: flex;
            position: fixed;
            top: var(--peek-top, 8px);
            left: calc(var(--app-rail-width) + 6px);
            z-index: 1001;
            flex: none;
            width: 236px;
            max-height: calc(100vh - 16px);
            border: 1px solid var(--sidebar-border);
            border-radius: 12px;
            background: var(--sidebar-bg);
            box-shadow: 0 12px 36px color-mix(in srgb, var(--shadow-ink, #0f172a) 32%, transparent);
        }

        /* The rail and the gap to the card stay one hover target, so crossing
           from a tile into its card never reads as leaving the sidebar. */
        .sidebar-v2.collapsed.is-peek .app-panel::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: -8px;
            width: 8px;
        }

        .sidebar-v2.collapsed.is-peek .sidebar-header {
            min-height: 0;
            padding: 10px 12px 4px;
            border-bottom: 0;
        }

        .sidebar-v2.collapsed.is-peek .app-panel-title {
            padding-left: 0;
            color: var(--sidebar-text-muted);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.02em;
        }

        .sidebar-v2.collapsed.is-peek .sidebar-nav {
            flex: 0 1 auto;
            padding: 2px 0 8px;
        }

        /* RSR is one root over a tree; a card that shows only the root is a
           click away from being useful, so its first level is always open. */
        .sidebar-v2.collapsed.is-peek [data-app-owner="rsr"] > .submenu {
            max-height: 1000px !important;
        }

        /* Folded squeezes every row down to its icon. A peeked panel is a full
           panel, so those rules are handed back their labels, their indent and
           their favorites, and the tooltip that stands in for a label while
           folded steps aside. */
        /* The row's own padding and gap, not an approximation of them: folding
           zeroes both to centre the icon, and a peek has to hand back exactly
           what the open panel uses or the labels sit against the edge. */
        .sidebar-v2.collapsed.is-peek .nav-link {
            padding: 7px 9px 7px 12px;
            justify-content: flex-start;
            gap: 9px;
        }

        /* Folding both hides the label and fades it; a peek has to undo both. */
        .sidebar-v2.collapsed.is-peek .nav-link > span,
        .sidebar-v2.collapsed.is-peek .nav-link > .submenu-arrow {
            display: inline-flex;
            opacity: 1;
        }

        .sidebar-v2.collapsed.is-peek .submenu .nav-link {
            padding-left: 21px;
        }

        /* Folding forces every submenu shut with !important; a peeked panel is
           a full panel, so an open submenu shows its links again. */
        .sidebar-v2.collapsed.is-peek .nav-item-with-submenu.open > .submenu {
            max-height: 1000px !important;
        }

        .sidebar-v2.collapsed.is-peek .nav-link:hover::after {
            content: none;
        }

        @media (prefers-reduced-motion: reduce) {
            .sidebar { transition: none; }
        }

        /* Collapsed hides the panel, so the footer is moved into the rail
           (base-shell.js) instead of leaving the account menu, notifications,
           chat and to-dos unreachable. The fold toggle stays behind in the
           panel header: at the foot of the rail it was a page-wide reflow one
           slip away from the quick actions. */
        .app-rail > .sidebar-footer {
            width: 100%;
            margin-top: auto;
            padding: 0.4rem 0 0;
            border-top: 1px solid var(--sidebar-border);
            background: transparent;
        }

        .app-rail > .sidebar-footer .sidebar-quick-actions {
            grid-template-columns: 1fr;
        }

        .app-rail > .sidebar-footer .sidebar-account-button {
            justify-content: center;
        }

        .app-rail > .sidebar-footer .sidebar-account-copy,
        .app-rail > .sidebar-footer .sidebar-account-more {
            display: none;
        }

        /* Main Content Area */
        .main-content {
            margin-left: var(--sidebar-width);
            min-height: 100vh;
            transition: margin-left var(--transition-speed) ease;
            background-color: var(--bg-secondary);
        }

        .main-content.expanded {
            margin-left: var(--sidebar-collapsed-width);
        }

        /* Tooltip for collapsed state */
        .sidebar.collapsed .nav-link {
            position: relative;
        }

        .sidebar.collapsed .nav-link:hover::after {
            content: attr(data-title);
            position: absolute;
            left: calc(var(--sidebar-collapsed-width) - 8px);
            top: 50%;
            transform: translateY(-50%);
            background-color: var(--sidebar-bg);
            color: var(--sidebar-text);
            border: 1px solid var(--sidebar-border);
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 0.85rem;
            white-space: nowrap;
            z-index: 1001;
            box-shadow: 0 2px 8px color-mix(in srgb, var(--shadow-ink, #0f172a) 18%, transparent);
        }

        /* Activity Badge */
        .activity-badge {
            position: absolute;
            top: 4px;
            left: 28px;
            background: color-mix(in srgb, var(--danger-color, #ef4444) 78%, var(--shadow-ink, #0f172a));
            color: var(--btn-primary-text, #ffffff);
            font-size: 0.6rem;
            font-weight: 600;
            min-width: 16px;
            height: 16px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid var(--sidebar-bg);
        }
        
        .sidebar.collapsed .activity-badge {
            left: 24px;
            top: 2px;
        }
        
        .activity-badge.hidden {
            display: none;
        }

        .pto-sidebar-badge {
            margin-left: auto;
            background: var(--danger-color, #dc2626);
            color: var(--btn-primary-text, #ffffff);
            font-size: 0.65rem;
            font-weight: 700;
            min-width: 18px;
            height: 18px;
            border-radius: 999px;
            padding: 0 6px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }
        .sidebar.collapsed .pto-sidebar-badge {
            position: absolute;
            top: 2px;
            right: 6px;
            margin: 0;
        }
        .pto-sidebar-badge.hidden {
            display: none;
        }

        /* ===============================================================
           PREFERENCES POPUP STYLES
           =============================================================== */
        
        .preferences-popup {
            position: fixed;
            bottom: 12px;
            left: var(--sidebar-width);
            width: 320px;
            max-height: 70vh;
            background: var(--sidebar-bg);
            border-radius: 12px;
            box-shadow: 0 8px 32px color-mix(in srgb, var(--shadow-ink, #0f172a) 26%, transparent);
            z-index: 1050;
            display: none;
            flex-direction: column;
            overflow: hidden;
            margin-left: 12px;
            border: 1px solid var(--sidebar-border);
        }
        
        .sidebar.collapsed ~ .preferences-popup {
            left: var(--sidebar-collapsed-width);
        }
        
        .preferences-popup.show {
            display: flex;
            animation: popupSlideIn 0.2s ease;
        }
        
        @keyframes popupSlideIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .preferences-popup-header {
            padding: 14px 16px;
            border-bottom: 1px solid var(--sidebar-border);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
        }
        
        .preferences-popup-header h6 {
            margin: 0;
            font-weight: 600;
            color: var(--sidebar-text);
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .preferences-popup-header .close-btn {
            background: none;
            border: none;
            color: var(--sidebar-text-muted);
            cursor: pointer;
            padding: 4px;
            line-height: 1;
            border-radius: 4px;
            transition: all 0.2s;
        }
        
        .preferences-popup-header .close-btn:hover {
            color: var(--sidebar-text);
            background: var(--sidebar-bg-hover);
        }
        
        .preferences-popup-content {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
        }
        
        .pref-section {
            margin-bottom: 20px;
        }
        
        .pref-section-title {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--sidebar-text-muted);
            margin-bottom: 10px;
        }
        /* Theme Selector Grid */
        .theme-grid {
            /* Each option below carries data-theme, which re-scopes every theme
               variable inside it. Panel chrome reads these aliases instead, so
               an unpicked dark theme cannot paint its own ink on this panel. */
            --pref-ink: var(--sidebar-text);
            --pref-accent: var(--primary-color);
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
        }
        
        .theme-option {
            padding: 10px 12px;
            border: 2px solid transparent;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.15s ease;
            background: color-mix(in srgb, var(--pref-ink, var(--sidebar-text)) 6%, transparent);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .theme-option:hover {
            background: color-mix(in srgb, var(--pref-ink, var(--sidebar-text)) 11%, transparent);
        }
        
        .theme-option.active {
            border-color: var(--pref-accent, var(--primary-color));
            background: color-mix(in srgb, var(--pref-ink, var(--sidebar-text)) 11%, transparent);
        }
        
        .theme-swatch {
            width: 24px;
            height: 24px;
            border-radius: 6px;
            flex-shrink: 0;
            /* Reads the previewed theme's own accent and rail, so a retuned
               theme cannot leave a stale hand copied swatch behind. */
            background: linear-gradient(135deg, var(--primary-color), var(--rail));
            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pref-ink, var(--sidebar-text)) 16%, transparent);
        }
        
        
        .theme-name {
            font-size: 12px;
            font-weight: 500;
            color: var(--pref-ink, var(--sidebar-text));
        }
        
        .theme-option.active .theme-name {
            color: var(--pref-accent, var(--primary-color));
        }
        
        /* Preference Select */
        .pref-select-group {
            margin-bottom: 12px;
        }
        
        .pref-select-label {
            font-size: 12px;
            font-weight: 500;
            color: var(--sidebar-text);
            margin-bottom: 6px;
            display: block;
        }
        
        .pref-select {
            width: 100%;
            padding: 8px 12px;
            border-radius: 6px;
            border: 1px solid var(--sidebar-border);
            background: color-mix(in srgb, var(--sidebar-text) 6%, transparent);
            color: var(--sidebar-text);
            font-size: 13px;
            cursor: pointer;
            transition: all 0.15s ease;
        }
        
        .pref-select:hover {
            background: color-mix(in srgb, var(--sidebar-text) 9%, transparent);
        }
        
        .pref-select:focus {
            outline: none;
            border-color: var(--primary-color);
        }
        
        .pref-select option {
            background: var(--sidebar-bg);
            color: var(--sidebar-text);
        }
        
        /* Disabled Options */
        .pref-disabled-option {
            padding: 10px 12px;
            border-radius: 6px;
            background: color-mix(in srgb, var(--sidebar-text) 4%, transparent);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .pref-disabled-option .option-text {
            font-size: 12px;
            color: var(--sidebar-text-muted);
        }
        
        .pref-disabled-option .coming-soon-badge {
            font-size: 9px;
            padding: 2px 6px;
            border-radius: 4px;
            background: color-mix(in srgb, var(--sidebar-text) 11%, transparent);
            color: var(--sidebar-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        
        .preferences-popup::before {
            content: '';
            position: absolute;
            bottom: 60px;
            left: -8px;
            width: 0;
            height: 0;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-right: 8px solid var(--sidebar-bg);
        }

        /* ===============================================================
           ACTIVITY POPUP STYLES (Using Theme Variables)
           =============================================================== */
        
        .activity-popup {
            position: fixed;
            bottom: 12px;
            left: var(--sidebar-width);
            width: 400px;
            max-height: 65vh;
            background: var(--sidebar-bg);
            border-radius: 12px;
            box-shadow: 0 8px 32px color-mix(in srgb, var(--shadow-ink, #0f172a) 26%, transparent);
            z-index: 1050;
            display: none;
            flex-direction: column;
            overflow: hidden;
            margin-left: 12px;
            border: 1px solid var(--sidebar-border);
        }
        
        .sidebar.collapsed ~ .activity-popup {
            left: var(--sidebar-collapsed-width);
        }
        
        .activity-popup.show {
            display: flex;
            animation: popupSlideIn 0.2s ease;
        }
        
        .activity-date-header {
            padding: 5px 16px 4px;
            font-size: 9.5px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--sidebar-text-muted);
            background: color-mix(in srgb, var(--sidebar-text) 7%, var(--sidebar-bg, #0f172a));
            border-bottom: 1px solid var(--sidebar-border);
            position: sticky;
            top: 0;
            z-index: 2;
        }

        /* ── Undo-delete ── */
        .activity-item.deleting {
            pointer-events: none;
        }
        .activity-item.deleting .activity-undo-bar {
            pointer-events: auto;
        }
        .activity-undo-bar {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 14px 0 16px;
            background: color-mix(in srgb, var(--sidebar-bg) 92%, transparent);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            gap: 10px;
            animation: undoSlideIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
            border-radius: inherit;
        }
        @keyframes undoSlideIn {
            from { opacity: 0; transform: scale(0.98); }
            to   { opacity: 1; transform: scale(1); }
        }
        .activity-undo-bar span {
            display: flex;
            align-items: center;
            gap: 7px;
            color: var(--sidebar-text-muted);
            font-weight: 400;
            font-size: 11.5px;
            letter-spacing: 0.01em;
        }
        .activity-undo-bar span i {
            font-size: 13px;
            color: color-mix(in srgb, var(--sidebar-text) 35%, transparent);
        }
        .activity-undo-bar button {
            flex-shrink: 0;
            background: color-mix(in srgb, var(--sidebar-text) 8%, transparent);
            border: 1px solid var(--sidebar-border);
            color: var(--sidebar-text);
            font-size: 10px;
            font-weight: 600;
            padding: 5px 14px;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }
        .activity-undo-bar button:hover {
            background: color-mix(in srgb, var(--sidebar-text) 15%, transparent);
            border-color: color-mix(in srgb, var(--sidebar-text) 34%, transparent);
            color: var(--sidebar-text-strong, var(--sidebar-text));
            box-shadow: 0 0 0 1px color-mix(in srgb, var(--sidebar-text) 9%, transparent);
        }
        
        .activity-popup-actions {
            padding: 8px 12px;
            border-bottom: 1px solid var(--sidebar-border);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
            gap: 6px;
        }
        
        /* One filter chip that opens a menu; six labelled chips did not fit one row. */
        .activity-filter-btn {
            height: 28px;
            padding: 0 6px 0 9px;
            font-size: 11.5px;
            font-weight: 500;
            border-radius: 14px;
            border: none;
            background: color-mix(in srgb, var(--sidebar-text) 8%, transparent);
            color: var(--sidebar-text);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            white-space: nowrap;
            transition: background 0.15s;
        }
        .activity-filter-btn:hover,
        .activity-filter-btn[aria-expanded="true"] {
            background: color-mix(in srgb, var(--sidebar-text) 14%, transparent);
        }
        .activity-filter-btn i {
            font-size: 15px;
            line-height: 1;
        }
        .activity-filter-btn .activity-filter-caret {
            font-size: 14px;
            color: var(--sidebar-text-muted);
        }
        .activity-filter-btn:focus-visible {
            outline: 2px solid var(--primary-color);
            outline-offset: 1px;
        }
        .activity-popup .activity-menu {
            min-width: 180px;
            margin: 4px 0 0 !important;
        }
        .activity-popup .activity-menu .dropdown-item.active i {
            color: var(--primary-color);
        }
        .activity-popup .activity-menu .tab-badge {
            background: var(--primary-color);
        }

        /* Right side tools: push bell (on/off) + more menu */
        .activity-tools {
            display: flex;
            align-items: center;
            gap: 2px;
            flex-shrink: 0;
            margin-left: auto;
        }
        .activity-tool-btn,
        .activity-push-btn {
            width: 28px;
            height: 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: none;
            border-radius: 7px;
            background: transparent;
            color: var(--sidebar-text-muted);
            cursor: pointer;
            font-size: 16px;
            line-height: 1;
            margin: 0;
            transition: background 0.15s, color 0.15s;
        }
        .activity-tool-btn:hover,
        .activity-push-btn:hover {
            background: color-mix(in srgb, var(--sidebar-text) 11%, transparent);
            color: var(--sidebar-text);
        }
        .activity-push-btn input {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
            margin: 0;
        }
        /* The glyph is the state: bell = push on, slashed bell = push off. */
        .activity-push-btn .activity-push-on { display: none; }
        .activity-push-btn:has(input:checked) .activity-push-on { display: inline; }
        .activity-push-btn:has(input:checked) .activity-push-off { display: none; }
        .activity-push-btn:has(input:checked) {
            color: var(--primary-color);
        }
        .activity-push-btn:has(input:checked):hover {
            background: color-mix(in srgb, var(--primary-color) 14%, transparent);
        }
        .activity-push-btn:has(input:disabled) {
            opacity: 0.45;
            cursor: not-allowed;
        }
        .activity-push-btn:has(input:focus-visible),
        .activity-tool-btn:focus-visible {
            outline: 2px solid var(--primary-color);
            outline-offset: 1px;
        }
        .push-denied-msg {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 16px 8px;
            font-size: 11px;
            color: var(--info-color, #06b6d4);
            flex-shrink: 0;
        }
        .push-denied-msg a {
            color: var(--primary-color);
            text-decoration: none;
        }
        .push-denied-msg a:hover {
            text-decoration: underline;
        }

        .activity-list {
            flex: 1;
            overflow-y: auto;
            min-height: 0;
        }
        
        .activity-item {
            padding: 9px 12px 9px 14px;
            border-bottom: 1px solid var(--sidebar-border);
            cursor: pointer;
            transition: background-color 0.15s ease;
            display: flex;
            align-items: flex-start;
            gap: 10px;
            position: relative;
        }
        
        .activity-item:hover {
            background-color: var(--sidebar-bg-hover);
        }
        
        .activity-item.unread {
            background-color: rgba(var(--primary-color), 0.1);
        }
        
        .activity-icon {
            width: 26px;
            height: 26px;
            font-size: 13px;
            border-radius: 50%;
            background: var(--primary-color);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        
        .activity-icon i {
            color: var(--btn-primary-text, #ffffff);
            font-size: 12px;
        }
        
        .activity-icon.reminder {
            background: var(--notice-color);
        }
        
        .activity-icon.overdue {
            background: var(--danger-color);
        }
        
        .activity-content {
            flex-grow: 1;
            min-width: 0;
        }
        
        .activity-message {
            font-size: 12px;
            color: var(--sidebar-text);
            line-height: 1.4;
            margin-bottom: 4px;
        }
        
        .activity-message strong {
            color: var(--primary-color);
        }
        
        .activity-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        
        .activity-time {
            font-size: 11px;
            color: var(--sidebar-text-muted);
            font-weight: 500;
        }
        
        .activity-unread-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--primary-color);
            flex-shrink: 0;
            margin-top: 4px;
        }
        
        .activity-delete-btn {
            background: none;
            border: none;
            color: var(--sidebar-text-muted);
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            transition: all 0.2s;
            flex-shrink: 0;
            opacity: 0;
        }
        
        .activity-item:hover .activity-delete-btn,
        .activity-delete-btn:focus-visible {
            opacity: 1;
        }
        @media (hover: none) {
            .activity-delete-btn { opacity: 0.5; }
        }
        
        .activity-delete-btn:hover {
            color: var(--danger-color);
            background: rgba(239, 68, 68, 0.15);
        }
        
        .activity-icon.collab-request {
            background: #8b5cf6;
        }
        
        .activity-icon.following {
            background: #0ea5e9;
        }
        
        .activity-icon.ownership {
            background: #3b82f6;
        }

        .activity-icon.my-records {
            background: #10b981;
        }

        /* ── Model tag styles ── */
        .activity-model-tag {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            font-size: 10px;
            font-weight: 600;
            padding: 1px 7px;
            border-radius: 20px;
            letter-spacing: 0.03em;
        }
        /* These are entity tags, so the hue comes from the --ent-* source of
           truth rather than a second hand copy, then leans toward the panel ink
           so it stays legible whichever way the rail is painted. */
        .activity-model-tag.tag-candidate  { --tag-hue: var(--ent-candidate, #0284C7); }
        .activity-model-tag.tag-company    { --tag-hue: var(--ent-company, #E11D48); }
        .activity-model-tag.tag-job        { --tag-hue: var(--ent-job, #1D4ED8); }
        .activity-model-tag.tag-deal       { --tag-hue: var(--ent-deal, #4F46E5); }
        .activity-model-tag.tag-contact    { --tag-hue: var(--ent-contact, #059669); }
        .activity-model-tag.tag-supplier   { --tag-hue: var(--ent-supplier, #7C3AED); }
        .activity-model-tag.tag-candidate,
        .activity-model-tag.tag-company,
        .activity-model-tag.tag-job,
        .activity-model-tag.tag-deal,
        .activity-model-tag.tag-contact,
        .activity-model-tag.tag-supplier {
            background: color-mix(in srgb, var(--tag-hue) 18%, transparent);
            color: color-mix(in srgb, var(--tag-hue) 78%, var(--sidebar-text));
        }
        .activity-model-tag.tag-default    { background: color-mix(in srgb, var(--sidebar-text) 9%, transparent); color: var(--sidebar-text-muted); }

        /* ── Time display ── */
        .activity-time-row {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }
        .activity-time-relative {
            font-size: 11px;
            color: var(--sidebar-text-muted);
            font-weight: 500;
        }
        .activity-join-btn {
            display: inline-block;
            margin-top: 6px;
            padding: 3px 12px;
            font-size: 11px;
            font-weight: 600;
            border: none;
            border-radius: 5px;
            background: var(--primary-color, #3b82f6);
            color: var(--btn-primary-text, #ffffff);
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .activity-join-btn:hover:not(:disabled) {
            filter: brightness(1.15);
        }
        
        .activity-join-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        
        .activity-join-btn.joined {
            background: var(--success-color, #10b981);
            opacity: 1;
        }

        .activity-content.no-click {
            cursor: default;
        }

        .activity-assigned-list {
            margin: 6px 0 8px;
            padding: 0;
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .activity-assigned-list li {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 11.5px;
            color: var(--sidebar-text-secondary, var(--text-secondary));
            padding: 3px 6px;
            border-radius: 4px;
            background: var(--sidebar-item-hover, rgba(0,0,0,0.04));
        }

        .activity-assigned-id {
            font-size: 10px;
            font-weight: 600;
            color: var(--sidebar-text-muted);
            min-width: 28px;
        }

        .activity-open-records-btn {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            margin-top: 4px;
            padding: 5px 10px;
            font-size: 11.5px;
            font-weight: 500;
            color: var(--primary-color, #4f46e5);
            background: transparent;
            border: 1px solid var(--primary-color, #4f46e5);
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
        }

        .activity-open-records-btn:hover {
            background: var(--primary-color, #4f46e5);
            color: var(--btn-primary-text, #ffffff);
        }

        .activity-open-records-btn i {
            font-size: 13px;
        }

        .activity-empty {
            padding: 40px 20px;
            text-align: center;
            color: var(--sidebar-text-muted);
        }
        
        .activity-empty i {
            font-size: 40px;
            margin-bottom: 10px;
            opacity: 0.5;
        }
        
        .activity-loading {
            padding: 30px;
            text-align: center;
        }
        
        .activity-loading .spinner-border {
            width: 24px;
            height: 24px;
            color: var(--primary-color);
        }

        .activity-popup::before {
            content: '';
            position: absolute;
            bottom: 20px;
            left: -8px;
            width: 0;
            height: 0;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-right: 8px solid var(--sidebar-bg);
        }

        /* ===============================================================
           GLOBAL BUTTON STYLES (Using Theme Variables)
           =============================================================== */
        
        .btn-primary, .btn-theme-primary {
            background-color: var(--btn-primary-bg) !important;
            border-color: var(--btn-primary-bg) !important;
            color: var(--btn-primary-text) !important;
        }
        
        .btn-primary:hover, .btn-theme-primary:hover {
            background-color: var(--btn-primary-hover) !important;
            border-color: var(--btn-primary-hover) !important;
        }
        
        .btn-secondary, .btn-theme-secondary {
            background-color: var(--btn-secondary-bg) !important;
            border-color: var(--border-color) !important;
            color: var(--btn-secondary-text) !important;
        }
        
        .btn-secondary:hover, .btn-theme-secondary:hover {
            background-color: var(--btn-secondary-hover) !important;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .activity-popup,
            .preferences-popup {
                left: 10px;
                right: 10px;
                width: auto;
                bottom: 80px;
                margin-left: 0;
            }

            .activity-popup::before,
            .preferences-popup::before {
                display: none;
            }
        }

        /* ===============================================================
           RESPONSIVE - Small laptops / tablets (769px - 1199px)
           Auto-collapse sidebar to save space on smaller screens
           =============================================================== */

        @media (max-width: 1199px) and (min-width: 769px) {
            :root {
                --sidebar-width: 220px;
            }
        }

        @media (max-width: 1024px) and (min-width: 769px) {
            :root {
                --sidebar-width: 200px;
            }

            .sidebar .nav-link {
                padding: 0.5rem 0.75rem;
                font-size: 0.9rem;
            }

            .nav-group-label {
                font-size: 0.65rem;
                padding: 0.4rem 0.75rem;
            }

            .logo-text {
                font-size: 16px;
            }

            .sidebar-header {
                padding: 1rem 0.75rem;
                min-height: 60px;
            }

            .footer-link {
                padding: 0.5rem 0.75rem;
                font-size: 0.9rem;
            }
        }

        /* ===============================================================
           MOBILE RESPONSIVE - everything below only fires on mobile
           Desktop is completely untouched.
           =============================================================== */

        /* Hamburger button - hidden on desktop */
        .mobile-hamburger {
            display: none;
        }

        /* Mobile overlay backdrop - hidden on desktop */
        .sidebar-overlay {
            display: none;
        }

        @media (max-width: 768px) {
            /* Hamburger menu button */
            .mobile-hamburger {
                display: flex;
                align-items: center;
                justify-content: center;
                position: fixed;
                top: 12px;
                left: 12px;
                z-index: 1100;
                width: 40px;
                height: 40px;
                border-radius: 8px;
                border: 1px solid var(--border-color);
                background: var(--bg-primary);
                color: var(--text-primary);
                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
                cursor: pointer;
                font-size: 20px;
                padding: 0;
            }

            .mobile-hamburger:active {
                transform: scale(0.95);
            }

            /* Hide hamburger when sidebar is open */
            .mobile-hamburger.hidden {
                display: none;
            }

            /* Sidebar: off-screen by default on mobile */
            .sidebar {
                transform: translateX(-100%);
                width: var(--sidebar-width) !important;
                z-index: 1200;
            }

            /* When sidebar is open on mobile */
            .sidebar.mobile-open {
                transform: translateX(0);
            }

            /* Ignore desktop collapsed state on mobile - always full-width sidebar */
            .sidebar.collapsed {
                width: var(--sidebar-width) !important;
            }

            /* The drawer opens at full width, so the panel has to be in it.
               There is no hover on a phone to peek one out with, and folded it
               left the drawer as a rail beside 248px of nothing. */
            .sidebar-v2.collapsed .app-panel {
                display: flex;
            }

            .sidebar.collapsed .logo-text,
            .sidebar.collapsed .nav-group-label,
            .sidebar.collapsed .nav-link span,
            .sidebar.collapsed .submenu-arrow,
            .sidebar.collapsed .footer-link span {
                opacity: 1;
            }

            .sidebar.collapsed .sidebar-activities-label { display: block; }

            .sidebar.collapsed .nav-link {
                justify-content: flex-start;
            }

            .sidebar.collapsed .submenu {
                max-height: none !important;
            }

            .sidebar.collapsed .nav-item-with-submenu.open > .submenu {
                max-height: 1000px !important;
            }

            .sidebar.collapsed .nav-item-with-submenu:not(.open) > .submenu {
                max-height: 0 !important;
            }

            /* Disable collapsed hover tooltips on mobile */
            .sidebar.collapsed .nav-link:hover::after {
                display: none;
            }

            .sidebar.collapsed .footer-link:hover::after {
                display: none;
            }

            /* Overlay backdrop */
            .sidebar-overlay {
                display: none;
                position: fixed;
                inset: 0;
                background: rgba(0, 0, 0, 0.5);
                z-index: 1150;
                opacity: 0;
                transition: opacity 0.3s ease;
            }

            .sidebar-overlay.active {
                display: block;
                opacity: 1;
            }

            /* Main content: full width, no margin */
            .main-content {
                margin-left: 0 !important;
                padding-top: 56px;
            }

            .main-content.expanded {
                margin-left: 0 !important;
            }

            /* Activity/preferences popups: full-width on mobile */
            .activity-popup,
            .preferences-popup {
                position: fixed;
                left: 10px !important;
                right: 10px !important;
                bottom: auto !important;
                top: 60px !important;
                width: auto !important;
                max-height: calc(100vh - 80px);
                margin-left: 0 !important;
                z-index: 1300;
            }

            /* Sidebar footer: add close button area */
            .sidebar-header {
                min-height: 60px;
            }

            /* Global modal fixes for mobile */
            .modal-dialog {
                margin: 8px !important;
                max-width: calc(100vw - 16px) !important;
            }

            .modal-dialog.modal-lg,
            .modal-dialog.modal-xl {
                max-width: calc(100vw - 16px) !important;
            }

            .modal-content {
                max-height: 92vh;
                overflow-y: auto;
            }

            .modal-body {
                padding: 12px;
            }

            /* Prevent body scroll when modal is open */
            body.modal-open {
                overflow: hidden !important;
                position: fixed;
                width: 100%;
            }

            /* Container fluid - tighter padding on mobile */
            .container-fluid {
                padding-left: 8px !important;
                padding-right: 8px !important;
                margin-top: 8px !important;
            }
        }

        /* ===============================================================
           GLOBAL SEARCH SPOTLIGHT
           =============================================================== */

        .gs-spotlight {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 1060;
            align-items: flex-start;
            justify-content: center;
            padding: 24px 16px;
            pointer-events: none;
        }

        .gs-spotlight.show {
            display: flex;
        }
        .gs-spotlight.show .gs-bar {
            animation: gsPanelIn 0.15s cubic-bezier(0.2, 0.7, 0.3, 1);
        }
        @keyframes gsPanelIn {
            from { opacity: 0; transform: translateY(-8px) scale(0.985); }
        }
        @keyframes gsFadeIn {
            from { opacity: 0; }
        }

        .gs-bar {
            position: relative;
            width: min(640px, 100%);
            margin: 0;
            pointer-events: auto;
        }

        .gs-input-wrap {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 7px 14px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background: var(--bg-primary);
            box-shadow: 0 10px 34px color-mix(in srgb, var(--shadow-ink, #0f172a) 18%, transparent);
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        .gs-input-wrap:focus-within {
            border-color: var(--primary-color);
            box-shadow: 0 10px 34px color-mix(in srgb, var(--shadow-ink, #0f172a) 18%, transparent),
                        0 0 0 3px color-mix(in srgb, var(--primary-color, #0ea5e9) 18%, transparent);
        }
        .gs-input-wrap i {
            font-size: 18px;
            color: var(--text-muted);
            flex-shrink: 0;
        }
        .gs-input-wrap input {
            flex: 1;
            border: none;
            outline: none;
            font-size: 14px;
            background: transparent;
            color: var(--text-primary);
            min-width: 0;
        }
        .gs-input-wrap input::placeholder { color: var(--text-muted); }
        .gs-dropdown {
            display: none;
            position: absolute;
            top: calc(100% + 4px);
            left: 0;
            right: 0;
            max-height: min(560px, calc(100vh - 110px));
            overflow: hidden;              /* inner .gs-scroll handles scrolling */
            background: var(--bg-primary);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            box-shadow: 0 14px 40px color-mix(in srgb, var(--shadow-ink, #0f172a) 20%, transparent);
            z-index: 1060;
        }
        .gs-dropdown.show { display: flex; flex-direction: column; }
        .gs-scroll {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 4px 0;
        }
        .gs-scroll::-webkit-scrollbar { width: 5px; }
        .gs-scroll::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }

        .gs-category {
            position: sticky;
            top: 0;
            z-index: 2;
            padding: 8px 16px 4px;
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            /* The row icons carry the per-model colour now; a second colour on
               the header just made five shouting lines in a 500px panel. */
            color: var(--text-muted, #6b7280);
            background: var(--bg-primary);
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .gs-category i { font-size: 13px; }
        .gs-category-skel { color: var(--text-muted, #6b7280); opacity: 0.75; }

        .gs-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 16px;
            cursor: pointer;
            text-decoration: none;
            color: var(--text-primary);
            transition: background 0.1s;
        }
        .gs-item:hover, .gs-item.gs-active {
            background: var(--bg-tertiary);
            color: var(--text-primary);
            text-decoration: none;
        }
        .gs-item-text { flex: 1; min-width: 0; }
        .gs-item-name {
            font-size: 13px;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .gs-item-sub {
            font-size: 11px;
            color: var(--text-muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .gs-item-arrow {
            font-size: 16px;
            color: var(--text-muted);
            opacity: 0;
            transform: translateX(-3px);
            transition: opacity 0.12s, transform 0.12s cubic-bezier(0.2, 0.7, 0.3, 1);
            flex-shrink: 0;
        }
        .gs-item:hover .gs-item-arrow,
        .gs-item.gs-active .gs-item-arrow { transform: translateX(0); }
        .gs-item:hover .gs-item-arrow,
        .gs-item.gs-active .gs-item-arrow { opacity: 1; }

        /* Inline preview button on file rows in global search */
        .gs-item-preview {
            width: 28px;
            height: 28px;
            border-radius: 6px;
            border: 1px solid var(--border-color);
            background: transparent;
            color: var(--text-muted);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            cursor: pointer;
            transition: background 0.1s, color 0.1s, border-color 0.1s;
        }
        .gs-item-preview:hover {
            background: var(--bg-tertiary);
            color: var(--primary-color);
            border-color: var(--primary-color);
        }
        .gs-item-preview i { font-size: 16px; line-height: 1; }

        /* Compact "Jump to" rows (pages/settings/actions) — single line, no badge */
        .gs-item.gs-nav { padding: 5px 16px; gap: 9px; }
        .gs-item-ico {
            width: 24px;
            height: 24px;
            border-radius: 6px;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            background: var(--bg-tertiary, #f1f5f9);
            color: var(--text-secondary, #475569);
            transition: background 0.1s, color 0.1s;
        }
        .gs-item:hover .gs-item-ico,
        .gs-item.gs-active .gs-item-ico { color: var(--primary-color, #0ea5e9); }
        .gs-nav-label {
            flex: 1;
            min-width: 0;
            font-size: 13px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .gs-nav-ctx {
            font-size: 11px;
            color: var(--text-muted);
            flex-shrink: 0;
            white-space: nowrap;
        }

        /* Record-row tile: --row-c is the model's colour, sent as data by
           /api/search/ (home/views.py::SEARCH_MODELS), not authored here. */
        .gs-item-ico-rec {
            background: color-mix(in srgb, var(--row-c, var(--primary-color, #0ea5e9)) 13%, transparent);
            color: var(--row-c, var(--primary-color, #0ea5e9));
        }
        .gs-item:hover .gs-item-ico-rec,
        .gs-item.gs-active .gs-item-ico-rec {
            background: var(--row-c, var(--primary-color, #0ea5e9));
            color: var(--btn-primary-text, #fff);
        }

        /* Why this row matched. */
        .gs-hl {
            background: transparent;
            padding: 0;
            color: inherit;
            font-weight: 700;
            box-shadow: inset 0 -0.42em 0 color-mix(in srgb, var(--primary-color, #0ea5e9) 18%, transparent);
            border-radius: 2px;
        }
        .gs-item-sub .gs-hl { font-weight: 600; }

        /* Placeholder rows sized like the record rows that replace them. */
        .gs-skel-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 16px;
        }
        .gs-skel-ico {
            width: 24px;
            height: 24px;
            border-radius: 6px;
            flex: 0 0 auto;
        }
        .gs-skel-lines {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .gs-skel-lines .skel-line:first-child { height: 10px; }
        .gs-skel-lines .skel-line:last-child { height: 8px; opacity: 0.7; }

        .gs-empty {
            padding: 20px 16px;
            text-align: center;
            color: var(--text-muted);
            font-size: 13px;
        }
        .gs-empty i { font-size: 22px; display: block; margin-bottom: 6px; }

        /* Click-outside overlay: dims the page so the panel reads as modal. */
        .gs-backdrop {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 1059;
            background: color-mix(in srgb, var(--backdrop-bg, #2c2c2c) 38%, transparent);
        }
        .gs-backdrop.show { display: block; animation: gsFadeIn 0.15s ease-out; }

        /* =============================================================
           GLOBAL DOPAMINE — subtle polish across all pages
           ============================================================= */

        /* ── Sidebar nav links — hover indent + glow ── */
        .sidebar .nav-link:hover {
            padding-left: 1.15rem;
            box-shadow: inset 3px 0 0 0 var(--sidebar-accent-bar);
        }
        .sidebar .nav-link:active {
            transform: scale(0.98);
            transition-duration: 0.06s;
        }

        /* ── Active nav link accent bar — animate in ── */
        @keyframes accentBarIn {
            from { height: 0; opacity: 0; }
            to   { height: 60%; opacity: 1; }
        }
        .sidebar .nav-link.active::before {
            animation: accentBarIn 0.25s ease-out;
        }

        /* ── Smooth page content transitions ── */
        .main-content {
            animation: pageIn 0.25s ease-out;
        }
        @keyframes pageIn {
            from { opacity: 0; }
            to   { opacity: 1; }
        }

        /* ── All buttons — subtle press feedback ── */
        .btn {
            transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .btn:active:not(:disabled) {
            transform: scale(0.97);
            transition-duration: 0.06s;
        }

        /* ── Focus rings — consistent glow ── */
        input:focus, select:focus, textarea:focus {
            transition: box-shadow 0.2s ease, border-color 0.2s ease;
        }

        /* ── Sidebar brand logo — hover warmth ── */
        .sidebar-brand {
            transition: all 0.2s ease;
        }
        .sidebar-brand:hover .brand-logo {
            filter: brightness(1.15);
        }

        /* .alert lives in base-alert.css. */

        /* ── Scrollbar — sleek everywhere ── */
        ::-webkit-scrollbar { width: 7px; height: 7px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.25); border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: rgba(128,128,128,0.45); }

        /* ===============================================================
           SIDEBAR — quiet workspace rail
           =============================================================== */
        .sidebar {
            box-shadow: inset -1px 0 0 var(--sidebar-border);
        }

        .sidebar-header {
            min-height: 58px;
            padding: 14px 12px;
            border-bottom: 0;
        }

        .brand-logo {
            width: 28px;
            height: 28px;
            border-radius: 5px;
        }

        .logo-text {
            font-size: 17px;
            font-weight: 700;
            letter-spacing: -0.01em;
        }

        .sidebar-nav {
            padding: 0 8px 12px;
        }

        .nav-group {
            margin-bottom: 10px;
        }

        .nav-group-label {
            min-height: 24px;
            margin-top: 0;
            padding: 6px 6px 4px;
            gap: 4px;
            color: var(--sidebar-text-muted);
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }

        .nav-group-label--split {
            padding-right: 4px;
        }

        .nav-group-label > .group-toggle-arrow,
        .nav-group-label-title > .group-toggle-arrow {
            width: 14px;
            margin-left: -2px;
            font-size: 13px;
            opacity: 0.58;
        }

        .nav-group-action {
            width: 24px;
            height: 22px;
            margin: 0;
            padding: 0;
            border-radius: 4px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--sidebar-text-muted);
            font-size: 16px;
        }

        .nav-group-action:hover {
            color: var(--sidebar-text-strong, var(--sidebar-text));
            background: var(--sidebar-bg-hover-strong, var(--sidebar-bg-hover));
        }

        .sidebar .nav-link {
            min-height: 34px;
            margin: 1px 0;
            padding: 7px 9px 7px 12px;
            gap: 9px;
            border-radius: 8px;
            color: var(--sidebar-text);
            font-size: 13.5px;
            font-weight: 500;
            transition: color 0.14s ease, background-color 0.14s ease;
        }

        .sidebar .nav-link:hover {
            padding-left: 12px;
            color: var(--sidebar-text-strong, var(--sidebar-text));
            background: var(--sidebar-bg-hover);
            box-shadow: none;
        }

        .sidebar .nav-link.active {
            color: var(--sidebar-text-strong, var(--sidebar-text));
            background: var(--sidebar-bg-active);
            font-weight: 600;
        }

        /* The 3px bar is back and it carries the entity colour, not the app
           accent - the active row has to stay readable as "Companies", not as
           "something is selected". */
        .sidebar .nav-link.active::before {
            display: block;
            border-radius: 0 3px 3px 0;
        }

        .sidebar .nav-link i,
        .sidebar .nav-link svg {
            width: 17px;
            font-size: 16px;
            color: currentColor;
        }

        .kanban-pill {
            margin-left: auto;
            opacity: 0 !important;
            pointer-events: none;
            text-decoration: none;
        }

        .sidebar .nav-link:hover .kanban-pill,
        .sidebar .nav-link:focus-visible .kanban-pill {
            opacity: 1 !important;
            pointer-events: auto;
        }

        .nav-link-with-badge {
            position: relative;
        }

        .submenu {
            margin: 1px 0 0;
            border-radius: 0;
            background: transparent;
        }

        .submenu .nav-link {
            min-height: 30px;
            padding: 5px 9px 5px 21px;
            border-radius: 8px;
            font-size: 12.5px;
        }

        /* The child icon sits under the parent label, which is what makes the
           indent read as nesting rather than as a ragged left edge. */
        .submenu .nav-link i:first-child {
            width: 15px;
            color: var(--sidebar-text-muted);
        }

        .submenu .nav-link:hover {
            padding-left: 21px;
        }

        .submenu .nav-link:first-child,
        .submenu .nav-link:last-child {
            border-radius: 8px;
        }

        .sidebar-subsection-label {
            padding: 4px 6px 4px 38px;
            color: var(--sidebar-text-muted);
            font-size: 10.5px;
            font-weight: 600;
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }

        .sidebar.collapsed .sidebar-header {
            padding-inline: 0;
            justify-content: center;
        }

        .sidebar.collapsed .sidebar-brand,
        .sidebar.collapsed .nav-group-label {
            display: none;
        }

        .sidebar.collapsed .nav-group {
            margin-bottom: 0.15rem;
        }

        .sidebar.collapsed .nav-link {
            padding-inline: 0;
            justify-content: center;
            gap: 0;
        }

        .sidebar.collapsed .nav-link > span,
        .sidebar.collapsed .nav-link > .submenu-arrow {
            display: none;
        }

        .sidebar-footer {
            padding: 8px;
            gap: 6px;
            border-top: 1px solid var(--sidebar-border);
            background: var(--sidebar-bg);
        }

        .sidebar-quick-actions {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(32px, 1fr));
            gap: 4px;
        }

        .sidebar-quick-action {
            position: relative;
            min-width: 0;
            height: 34px;
            border: 0;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--sidebar-text-muted);
            /* The design rests these on a faint tile rather than bare rail, so
               the footer reads as a block instead of four loose glyphs. */
            background: color-mix(in srgb, var(--sidebar-text) 4%, transparent);
            text-decoration: none;
            cursor: pointer;
        }

        .sidebar-quick-action:hover {
            color: var(--sidebar-text-strong, var(--sidebar-text));
            background: var(--sidebar-bg-active);
        }

        .sidebar-quick-action > i {
            font-size: 17px;
        }

        .sidebar-quick-action .sidebar-action-badge,
        .sidebar-quick-action .activity-badge {
            position: absolute;
            top: 1px;
            right: 1px;
            min-width: 15px;
            height: 15px;
            padding: 0 4px;
            border: 2px solid var(--sidebar-bg);
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--btn-primary-text, #ffffff);
            background: color-mix(in srgb, var(--danger-color, #ef4444) 78%, var(--shadow-ink, #0f172a));
            font-size: 9px;
            font-weight: 700;
            line-height: 1;
        }

        .sidebar-quick-action .sidebar-action-badge[hidden],
        .sidebar-quick-action .activity-badge.hidden {
            display: none;
        }

        .sidebar-account-button {
            width: 100%;
            min-height: 42px;
            padding: 6px 7px;
            border: 0;
            border-radius: 9px;
            display: flex;
            align-items: center;
            gap: 9px;
            color: var(--sidebar-text-strong, var(--sidebar-text));
            background: color-mix(in srgb, var(--sidebar-text) 4%, transparent);
            text-align: left;
        }

        .sidebar-account-button:hover,
        .sidebar-account-button[aria-expanded="true"] {
            background: var(--sidebar-bg-active);
        }

        /* The account avatar is the user's own avatar (.u-avatar): their picture,
           or their initials on their colour. */
        .sidebar-account-avatar { border: 0; }

        .sidebar-account-copy {
            min-width: 0;
            display: flex;
            flex: 1;
            flex-direction: column;
            line-height: 1.15;
        }

        .sidebar-account-copy strong {
            overflow: hidden;
            color: var(--sidebar-text-strong, var(--sidebar-text));
            font-size: 12.5px;
            font-weight: 600;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .sidebar-account-copy small {
            margin-top: 2px;
            color: var(--sidebar-text-muted);
            font-size: 10.5px;
        }

        .sidebar-account-more {
            flex-shrink: 0;
            color: var(--sidebar-text-muted);
            font-size: 17px;
        }

        .sidebar-account-menu {
            min-width: 220px;
            margin-left: 8px !important;
            padding: 0.35rem;
            border: 1px solid var(--sidebar-border);
            border-radius: 8px;
            background: var(--sidebar-bg);
            box-shadow: 0 16px 40px color-mix(in srgb, var(--shadow-ink, #0f172a) 22%, transparent);
            /* Above the rail it opens out of, and above the page beside it. */
            z-index: 1101;
        }

        .sidebar-account-menu .dropdown-item {
            min-height: 34px;
            padding: 0.42rem 0.55rem;
            border: 0;
            border-radius: 5px;
            display: flex;
            align-items: center;
            gap: 0.55rem;
            color: var(--sidebar-text);
            background: transparent;
            font-size: 12.5px;
        }

        .sidebar-account-menu .dropdown-item:hover,
        .sidebar-account-menu .dropdown-item.active {
            color: var(--sidebar-text);
            background: var(--sidebar-bg-hover);
        }

        .sidebar-account-menu .dropdown-item i {
            width: 17px;
            color: var(--sidebar-text-muted);
            font-size: 16px;
        }

        .sidebar-account-menu .dropdown-divider {
            border-color: var(--sidebar-border);
        }

        .sidebar-menu-badge {
            min-width: 18px;
            margin-left: auto;
            padding: 1px 5px;
            border-radius: 999px;
            color: var(--btn-primary-text, #ffffff);
            background: var(--danger-color);
            font-size: 10px;
            font-weight: 700;
            text-align: center;
        }

        .sidebar.collapsed .sidebar-quick-actions {
            grid-template-columns: 1fr;
        }

        .sidebar.collapsed .sidebar-account-button {
            justify-content: center;
        }

        .sidebar.collapsed .sidebar-account-copy,
        .sidebar.collapsed .sidebar-account-more {
            display: none;
        }

        .sidebar.collapsed .sidebar-quick-action:hover::after {
            content: attr(data-title);
            position: fixed;
            left: calc(var(--sidebar-collapsed-width) + 8px);
            z-index: 1001;
            padding: 6px 9px;
            border: 1px solid var(--sidebar-border);
            border-radius: 5px;
            color: var(--sidebar-text);
            background: var(--sidebar-bg);
            box-shadow: 0 8px 24px color-mix(in srgb, var(--shadow-ink, #0f172a) 18%, transparent);
            font-size: 12px;
            white-space: nowrap;
        }

        @media (max-width: 768px) {
            .kanban-pill {
                opacity: 1 !important;
                pointer-events: auto;
            }

            .sidebar.collapsed .sidebar-header {
                padding: 0.75rem 0.7rem;
                justify-content: space-between;
            }

            .sidebar.collapsed .sidebar-brand,
            .sidebar.collapsed .nav-group-label {
                display: flex;
            }

            .sidebar.collapsed .nav-group {
                margin-bottom: 0.5rem;
            }

            .sidebar.collapsed .nav-link {
                padding-inline: 0.5rem;
                gap: 0.55rem;
            }

            .sidebar.collapsed .nav-link > span,
            .sidebar.collapsed .nav-link > .submenu-arrow {
                display: inline-flex;
            }

            .sidebar.collapsed .sidebar-quick-actions {
                grid-template-columns: repeat(auto-fit, minmax(32px, 1fr));
            }

            .sidebar.collapsed .sidebar-account-button {
                justify-content: flex-start;
            }

            .sidebar.collapsed .sidebar-account-copy {
                display: flex;
            }

            .sidebar.collapsed .sidebar-account-more {
                display: block;
            }

            .sidebar.collapsed .sidebar-quick-action:hover::after {
                display: none;
            }
        }

/* ═══════════════════════════════════════════════════════════════════════
   LOADING SYSTEM — app-wide skeleton + entrance-stagger utilities.
   Skeletons: <div class="skel skel-line w60"></div> etc. while data is in
   flight. Entrance: call window.crmAnimateIn(container) (base-shell.js)
   right after painting fetched data — children fade-up staggered once.
   ═══════════════════════════════════════════════════════════════════════ */
.skel {
    position: relative;
    overflow: hidden;
    background: var(--bg-secondary, #f4f5f7);
    border-radius: 8px;
}
.skel::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--text-muted, #94a3b8) 14%, transparent),
        transparent
    );
    animation: crm-skel-sweep 1.1s ease-in-out infinite;
}
@keyframes crm-skel-sweep {
    100% { transform: translateX(100%); }
}
.skel-line   { height: 12px; border-radius: 6px; }
.skel-line.w30 { width: 30%; } .skel-line.w40 { width: 40%; }
.skel-line.w60 { width: 60%; } .skel-line.w80 { width: 80%; }
.skel-circle { border-radius: 50%; width: 34px; height: 34px; flex: 0 0 auto; }

/* Skeleton list row: avatar circle + two text lines (chat, feeds, drawers) */
.skel-list-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}
.skel-list-row .skel-lines { flex: 1; display: flex; flex-direction: column; gap: 7px; }

/* Skeleton kanban column: header line + stacked cards (boards) */
.skel-board {
    display: flex;
    gap: 16px;
    padding: 16px;
    align-items: flex-start;
}
.skel-board-col {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.skel-board-col .skel-card { height: 84px; border-radius: 10px; }

/* Entrance stagger — added briefly by crmAnimateIn() after a data paint */
.load-in > * {
    animation: crm-load-in 0.28s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}
.load-in > *:nth-child(1)  { animation-delay: 0.02s; }
.load-in > *:nth-child(2)  { animation-delay: 0.05s; }
.load-in > *:nth-child(3)  { animation-delay: 0.08s; }
.load-in > *:nth-child(4)  { animation-delay: 0.11s; }
.load-in > *:nth-child(5)  { animation-delay: 0.14s; }
.load-in > *:nth-child(6)  { animation-delay: 0.17s; }
.load-in > *:nth-child(7)  { animation-delay: 0.20s; }
.load-in > *:nth-child(8)  { animation-delay: 0.23s; }
.load-in > *:nth-child(9)  { animation-delay: 0.26s; }
.load-in > *:nth-child(10) { animation-delay: 0.29s; }
.load-in > *:nth-child(n+11) { animation-delay: 0.32s; }
@keyframes crm-load-in {
    from { opacity: 0; transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
    .skel::after { animation: none; }
    .load-in > * { animation: none; }
    .gs-spotlight.show .gs-bar,
    .gs-backdrop.show { animation: none; }
    .gs-item-arrow { transform: none; transition: opacity 0.12s; }
}

/* ── Native number steppers ──────────────────────────────────────
      The browser draws the up/down chip inside the input's own shadow tree,
      so no rule here can colour it: it comes from the browser's control
      palette and on carbon is the brightest thing in the field, pulling the
      eye off the value. Every number field in the CRM is typed, not stepped
      one unit at a time, so the chip goes for good. Arrow keys and the
      scroll wheel still step the value, which is the part anyone used. */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

/* ── Mini calendar (base-mini-cal.js): the themed date picker every
      input[type="date"] opens instead of the browser's native one ── */
input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
.mini-cal { position: absolute; z-index: 2100; width: 252px; padding: 10px;
    background: var(--bg-primary); border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--shadow-ink, #0f172a) 14%, transparent); }
.mini-cal-head { display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 6px; }
.mini-cal-title { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.mini-cal-nav { display: flex; gap: 2px; }
.mini-cal-btn { border: 0; background: transparent; cursor: pointer;
    color: var(--text-muted); width: 22px; height: 22px; border-radius: 5px;
    font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.mini-cal-btn:hover { background: var(--bg-secondary); color: var(--text-primary); }
.mini-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mini-cal-dow { text-align: center; font-size: 9px; font-weight: 700;
    text-transform: uppercase; color: var(--text-muted); padding: 2px 0; }
.mini-cal-day { border: 0; background: transparent; cursor: pointer; font-size: 11px;
    padding: 5px 0; border-radius: 5px; color: var(--text-primary); text-align: center;
    font-variant-numeric: tabular-nums; }
.mini-cal-day:hover { background: var(--bg-secondary); }
.mini-cal-day.out { color: var(--text-muted); opacity: 0.5; }
.mini-cal-day.today { box-shadow: inset 0 0 0 1px var(--primary-color, #2563eb); }
.mini-cal-day.sel { background: var(--primary-color, #2563eb);
    color: var(--btn-primary-text, #ffffff); }
.mini-cal-day:disabled { opacity: 0.25; cursor: default; }
.mini-cal-foot { display: flex; justify-content: space-between; margin-top: 6px; }
.mini-cal-link { border: 0; background: none; cursor: pointer; font-size: 11px;
    color: var(--primary-color, #2563eb); padding: 2px 4px; }

/* Themed searchable picker for native <select> (static/js/base-select.js) —
   same surface as the list-view Columns dropdown. */
.base-select-pop { position: fixed; z-index: 2100; display: flex; flex-direction: column;
    min-width: 220px; max-height: 340px; overflow: hidden;
    background: var(--bg-primary, #ffffff); border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 12px 32px color-mix(in srgb, var(--shadow-ink, #0f172a) 14%, transparent),
                0 2px 6px color-mix(in srgb, var(--shadow-ink, #0f172a) 8%, transparent);
    animation: baseSelectSlide 0.15s ease-out; transform-origin: top left; }
.base-select-pop.above { transform-origin: bottom left; animation-name: baseSelectSlideUp; }
@keyframes baseSelectSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes baseSelectSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .base-select-pop { animation: none; } }
.base-select-search { position: relative; padding: 8px 10px; flex-shrink: 0;
    border-bottom: 1px solid var(--border-color, #e2e8f0); }
.base-select-search i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
    font-size: 14px; color: var(--text-muted, #94a3b8); pointer-events: none; }
.base-select-search input { width: 100%; padding: 6px 8px 6px 30px; font-size: 12px;
    border: 1px solid var(--border-color, #e2e8f0); border-radius: 6px;
    background: var(--bg-secondary, #f8fafc); color: var(--text-primary, #0f172a);
    outline: none; caret-color: var(--primary-color, #4f46e5); cursor: text; }
.base-select-pop:not([hidden]) .base-select-search input {
    border-color: var(--rec-color, var(--primary-color, #4f46e5));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rec-color, var(--primary-color, #4f46e5)) 15%, transparent); }
.base-select-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; }
.base-select-group { padding: 8px 8px 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--text-muted, #94a3b8); }
.base-select-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px;
    border-radius: 6px; cursor: pointer; user-select: none; font-size: 12.5px; line-height: 1.35;
    color: var(--text-primary, #0f172a); }
.base-select-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.base-select-item i { font-size: 15px; flex-shrink: 0; visibility: hidden;
    color: var(--rec-color, var(--primary-color, #4f46e5)); }
.base-select-item.active { background: var(--bg-secondary, #f8fafc); }
.base-select-item.selected { font-weight: 600; color: var(--rec-color, var(--primary-color, #4f46e5)); }
.base-select-item.selected i { visibility: visible; }
.base-select-item.blank .base-select-item-label { color: var(--text-muted, #94a3b8); font-style: italic; }
.base-select-item.disabled { opacity: 0.45; cursor: default; }
.base-select-empty { padding: 14px 10px; text-align: center; font-size: 12px; color: var(--text-muted, #94a3b8); }

        /* ===============================================================
           SELECT2 — THEME DEFAULTS
           The vendor stylesheet paints these controls white and their text
           near black, whatever theme is on, and nothing here ever said
           otherwise. Every place that used Select2 had to remember to
           re-theme it in its own block, and the ones that forgot rendered
           white fields in a dark form. These are the defaults, colours only:
           no size, spacing or radius, so no layout can move. A page that
           wants a different look still wins, because its rules are scoped to
           an id and come later in the cascade.
           =============================================================== */
        .select2-container--default .select2-selection--single,
        .select2-container--default .select2-selection--multiple {
            border-color: var(--border-color, #e2e8f0);
            background-color: var(--bg-primary, #ffffff);
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: var(--text-primary, #0f172a);
        }

        .select2-container--default .select2-selection--single .select2-selection__placeholder,
        .select2-container--default .select2-selection__clear {
            color: var(--text-muted, #64748b);
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow b {
            border-top-color: var(--text-muted, #64748b);
        }

        .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
            border-bottom-color: var(--text-muted, #64748b);
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            border-color: var(--border-color, #e2e8f0);
            background-color: var(--bg-tertiary, #f1f5f9);
            color: var(--text-primary, #0f172a);
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
            color: var(--text-muted, #64748b);
        }

        .select2-container--default .select2-search--inline .select2-search__field,
        .select2-container--default .select2-selection--multiple .select2-search__field {
            color: var(--text-primary, #0f172a);
        }

        .select2-container--default .select2-dropdown,
        .select2-dropdown {
            border-color: var(--border-color, #e2e8f0);
            background-color: var(--bg-primary, #ffffff);
            color: var(--text-primary, #0f172a);
        }

        .select2-container--default .select2-search--dropdown .select2-search__field {
            border-color: var(--border-color, #e2e8f0);
            background-color: var(--bg-secondary, #f8fafc);
            color: var(--text-primary, #0f172a);
        }

        .select2-container--default .select2-results__option {
            color: var(--text-primary, #0f172a);
        }

        .select2-container--default .select2-results__option--highlighted[aria-selected],
        .select2-container--default .select2-results__option--highlighted {
            background-color: color-mix(in srgb, var(--primary-color, #4f46e5) 16%, transparent);
            color: var(--text-primary, #0f172a);
        }

        .select2-container--default .select2-results__option[aria-selected="true"] {
            background-color: var(--bg-tertiary, #f1f5f9);
            color: var(--text-primary, #0f172a);
        }

        .select2-container--default .select2-results__message {
            color: var(--text-muted, #64748b);
        }
        /* Favourited projects, listed straight under All projects. Tighter
           than a nav row, because these are shortcuts into the app you are
           already in rather than destinations of their own. */
        .fav-proj-item.nav-link {
            padding-top: 5px;
            padding-bottom: 5px;
            font-size: 0.82rem;
        }

        /* The star is its own control: it takes the favourite off rather than
           opening the project, so it gets a hit area and says so on hover. */
        .fav-proj-item .fav-star {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            border-radius: 5px;
            flex-shrink: 0;
            cursor: pointer;
            transition: background-color 0.12s ease;
        }

        /* Beats `.submenu .nav-link i:first-child`, which paints every icon in
           a submenu muted, and the Projects hue item colours give the row. */
        .sidebar .submenu .fav-proj-item .fav-star i {
            color: var(--brand-red, #df1e2f);
        }

        .fav-proj-item .fav-star:hover,
        .fav-proj-item .fav-star:focus-visible {
            background: var(--sidebar-bg-hover-strong, var(--sidebar-bg-hover));
            outline: none;
        }

/* Embedded page (a list view inside another record's modal): no app chrome. */
body.is-embed #sidebar { display: none !important; }
body.is-embed .main-content { margin-left: 0 !important; padding-top: 0 !important; animation: none; }

/* ===============================================================
   USER AVATAR - one look for a person everywhere in the app: a circle
   with their profile picture, or their two initials on their colour.
   The colour arrives per user as --avatar-color (from
   project_management.utils.get_user_color). Pages that keep their own
   avatar class (card-avatar, cp-avatar...) keep its size and position;
   the size modifiers are for everything else.
   =============================================================== */
.u-avatar {
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    user-select: none;
}
/* Doubled on purpose: the paint must win over the old per-page avatar
   rules (many of them load after base.css) whatever the order. */
.u-avatar.u-avatar {
    border-radius: 50%;
    background: var(--avatar-color, var(--text-muted, #74747c));
    color: var(--avatar-ink, #ffffff);
}
.u-avatar > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.u-avatar--xs, .u-avatar--sm, .u-avatar--md, .u-avatar--lg, .u-avatar--xl {
    width: var(--avatar-size);
    height: var(--avatar-size);
    font-size: calc(var(--avatar-size) * 0.38);
}
.u-avatar--xs { --avatar-size: 16px; }
.u-avatar--sm { --avatar-size: 22px; }
.u-avatar--md { --avatar-size: 28px; }
.u-avatar--lg { --avatar-size: 40px; }
.u-avatar--xl { --avatar-size: 56px; }