/* ============================================
   Service Directory — Modern SaaS Design System
   ============================================ */

/* Typography — system font stack (no external font requests; GDPR-safe) */

/* Editorial display serif (Newsreader, self-hosted). @import must precede
   style rules per the CSS spec, so it lives here at the top of the file.
   See docs/plans/phase-ux-editorial-typography.md. */
@import url("newsreader-font-face.d28cca5cc8f3.css");

/* Monospace (JetBrains Mono, self-hosted). @import must precede style rules per
   the CSS spec. Used by the marketing landing page's mono accents.
   See docs/plans/phase-ux-homepage-control-plane.md. */
@import url("jetbrains-mono-font-face.01f83155988b.css");

/* ---------- Design Tokens ---------- */
:root {
    /* Typography — Untitled UI scale */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --font-size-xs: 0.75rem;       /* 12px */
    --font-size-sm: 0.875rem;      /* 14px */
    --font-size-base: 1rem;        /* 16px */
    --font-size-lg: 1.125rem;      /* 18px */
    --font-size-xl: 1.25rem;       /* 20px */
    --font-size-2xl: 1.5rem;       /* 24px */
    --font-size-3xl: 1.875rem;     /* 30px */

    /* Colors */
    --color-primary: #1d4ed8;      /* light link/text: 5.66:1 on --color-bg (was #2563eb, 4.36 — WCAG AA fix; fills use --color-primary-strong) */
    --color-primary-hover: #1d4ed8;
    --color-primary-light: #3b82f6;
    --color-primary-alpha: rgba(37, 99, 235, 0.12);
    /* Filled surfaces that carry #fff text. Split from --color-primary because one
       value cannot serve both roles: as TEXT on a dark surface primary must be light,
       as a FILL under white it must be dark. See phase-rx-color-contrast-tokens.md. */
    --color-primary-strong: #2563eb;        /* #fff on this: 5.17:1 */
    --color-primary-strong-hover: #1d4ed8;  /* #fff on this: 6.70:1 */

    --color-bg: #E8ECF3;           /* slate-blue page canvas — noticeably off-white */
    --color-surface: #ffffff;
    --color-surface-hover: #F7F8FA;

    --color-text: #101828;         /* UUI Gray-900 */
    --color-text-secondary: #344054; /* UUI Gray-700 */
    --color-text-muted: #5D6B82;   /* darkened from #667085: 4.20 -> 4.56 on --color-bg */
    --color-text-faint: #98A2B3;   /* UUI Gray-400 */

    --color-border: #D5DAE4;       /* slightly deeper — cards pop against bg */
    --color-border-hover: #B8C2D1; /* UUI Gray-300 equivalent */

    --color-success: #079455;      /* UUI Success-600 */
    --color-success-light: #DCFAE6; /* UUI Success-100 */
    --color-warning: #DC6803;      /* UUI Warning-600 */
    --color-warning-light: #FEF0C7; /* UUI Warning-100 */
    --color-danger: #D92D20;       /* UUI Error-600 */
    --color-danger-light: #FEE4E2; /* UUI Error-100 */
    --color-info: #2563eb;

    /* Subtle/alt surface tokens */
    --color-bg-subtle: #DDE3ED;    /* hover/inset areas — clearly darker than canvas */
    --color-bg-alt: #E8ECF3;       /* same as bg — for sections that should match canvas */

    /* Focus */
    --color-focus-ring: rgba(37, 99, 235, 0.4);

    /* Radius — Untitled UI scale */
    --radius-sm: 6px;
    --radius: 8px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 999px;

    /* Shadows — Untitled UI neutral-gray elevation */
    --shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-sm: 0px 1px 3px rgba(16, 24, 40, 0.10), 0px 1px 2px rgba(16, 24, 40, 0.06);
    --shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
    --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);

    /* Navbar tokens (light-mode: deep indigo) */
    --color-navbar-bg: #1e1b4b;
    --color-navbar-gradient: #312e81;
    --color-navbar-text: #e0e7ff;
    --color-navbar-text-muted: #a5b4fc;
    --color-navbar-hover: rgba(255, 255, 255, 0.09);
    --color-navbar-active: rgba(255, 255, 255, 0.14);
    --color-navbar-border: rgba(255, 255, 255, 0.10);

    /* Footer tokens (light-mode: very dark indigo) */
    --color-footer-bg: #0f0c29;
    --color-footer-text: #c7d2fe;
    --color-footer-text-muted: #6366f1;

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Spacing scale — 4-px base grid */
    --space-1: 0.25rem;   /*  4px */
    --space-2: 0.5rem;    /*  8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-7: 2rem;      /* 32px */
    --space-8: 4rem;      /* 64px */

    /* Badge color palette (light mode defaults) — 9 semantic groups — UUI aligned */
    --badge-success-bg: #DCFAE6;   --badge-success-text: #074D31;  /* UUI Success 100/900 */
    --badge-warning-bg: #FEF0C7;   --badge-warning-text: #B54708;  /* UUI Warning 100/700 */
    --badge-danger-bg:  #FEE4E2;   --badge-danger-text:  #B42318;  /* UUI Error 100/700 */
    --badge-info-bg:    #EFF4FF;   --badge-info-text:    #3538CD;  /* UUI Indigo 50/700 */
    --badge-orange-bg:  #ffedd5;   --badge-orange-text:  #B54708;  /* 4.37 -> 4.58 on --color-bg */
    --badge-partner-bg: #CFF9FE;   --badge-partner-text: #0E7090;  /* UUI Cyan 100/700 */
    --badge-vendor-bg:  #F4F3FF;   --badge-vendor-text:  #5925DC;  /* UUI Purple 50/700 */
    --badge-neutral-bg: #F2F4F7;   --badge-neutral-text: #344054;  /* UUI Gray 100/700 */
    --badge-pink-bg:    #FDF2FA;   --badge-pink-text:    #C11574;  /* UUI Pink 50/700 */
    /* Status dot colors */
    --status-operational:   #079455;   /* UUI Success-600 */
    --status-degraded:      #DC6803;   /* UUI Warning-600 */
    --status-partial-outage:#ea580c;
    --status-major-outage:  #D92D20;   /* UUI Error-600 */
    --status-maintenance:   #2563eb;
}

/* ---------- Dark Mode ---------- */
[data-theme="dark"] {
    --color-primary: #60a5fa;               /* text on dark surface: 5.75:1 (was #3b82f6, 3.98) */
    --color-primary-hover: #93c5fd;         /* text on dark surface: 8.11:1 */
    --color-primary-light: #2563eb;
    --color-primary-alpha: rgba(96, 165, 250, 0.15);
    --color-primary-strong: #2563eb;        /* #fff on this: 5.17:1 (was 3.68 via --color-primary) */
    --color-primary-strong-hover: #1d4ed8;  /* #fff on this: 6.70:1 (was 2.54 via --color-primary-hover) */

    --color-bg: #0f172a;
    --color-surface: #1e293b;
    --color-surface-hover: #334155;

    --color-text: #f1f5f9;
    --color-text-secondary: #cbd5e1;
    --color-text-muted: #94a3b8;
    --color-text-faint: #64748b;

    --color-border: #334155;
    --color-border-hover: #475569;

    --color-info: #3b82f6;

    /* Subtle/alt surface tokens (dark mode) — UUI gray-dark */
    --color-bg-subtle: #1C2433;
    --color-bg-alt: #1C2433;

    --color-focus-ring: rgba(59, 130, 246, 0.5);

    /* Dark mode navbar/footer tokens */
    --color-navbar-bg: rgba(30, 41, 59, 0.92);
    --color-navbar-gradient: rgba(30, 41, 59, 0.92);
    --color-navbar-text: #e2e8f0;
    --color-navbar-text-muted: #94a3b8;
    --color-navbar-hover: rgba(255, 255, 255, 0.06);
    --color-navbar-active: rgba(255, 255, 255, 0.10);
    --color-navbar-border: rgba(255, 255, 255, 0.06);
    --color-footer-bg: #030712;
    --color-footer-text: #818cf8;
    --color-footer-text-muted: #4b5563;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
    /* Badge color palette (dark mode overrides) — UUI dark aligned */
    --badge-success-bg: #074D31;   --badge-success-text: #ABEFC6;
    --badge-warning-bg: #7A2E0E;   --badge-warning-text: #FEC84B;
    --badge-danger-bg:  #7A271A;   --badge-danger-text:  #FDA29B;
    --badge-info-bg:    #2D31A6;   --badge-info-text:    #C7D7FE;
    --badge-orange-bg:  #7c2d12;   --badge-orange-text:  #fed7aa;
    --badge-partner-bg: #155B75;   --badge-partner-text: #67E3F9;
    --badge-vendor-bg:  #4A1FB8;   --badge-vendor-text:  #D9D6FE;
    --badge-neutral-bg: #1D2939;   --badge-neutral-text: #98A2B3;
    --badge-pink-bg:    #851651;   --badge-pink-text:    #FCCEEE;
}
@media (prefers-color-scheme: dark) {
    [data-theme="system"] {
        --color-primary: #60a5fa;               /* text on dark surface: 5.75:1 (was #3b82f6, 3.98) */
        --color-primary-hover: #93c5fd;         /* text on dark surface: 8.11:1 */
        --color-primary-light: #2563eb;
        --color-primary-alpha: rgba(96, 165, 250, 0.15);
        --color-primary-strong: #2563eb;        /* #fff on this: 5.17:1 */
        --color-primary-strong-hover: #1d4ed8;  /* #fff on this: 6.70:1 */

        --color-bg: #0f172a;
        --color-surface: #1e293b;
        --color-surface-hover: #334155;

        --color-text: #f1f5f9;
        --color-text-secondary: #cbd5e1;
        --color-text-muted: #94a3b8;
        --color-text-faint: #64748b;

        --color-border: #334155;
        --color-border-hover: #475569;

        --color-info: #3b82f6;

        /* Subtle/alt surface tokens (system dark mode) — UUI gray-dark */
        --color-bg-subtle: #1C2433;
        --color-bg-alt: #1C2433;

        --color-focus-ring: rgba(59, 130, 246, 0.5);

        /* System dark navbar/footer tokens */
        --color-navbar-bg: rgba(30, 41, 59, 0.92);
        --color-navbar-gradient: rgba(30, 41, 59, 0.92);
        --color-navbar-text: #e2e8f0;
        --color-navbar-text-muted: #94a3b8;
        --color-navbar-hover: rgba(255, 255, 255, 0.06);
        --color-navbar-active: rgba(255, 255, 255, 0.10);
        --color-navbar-border: rgba(255, 255, 255, 0.06);
        --color-footer-bg: #030712;
        --color-footer-text: #818cf8;
        --color-footer-text-muted: #4b5563;

        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
        --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
        /* Badge color palette (system dark mode) — UUI dark aligned */
        --badge-success-bg: #074D31;   --badge-success-text: #ABEFC6;
        --badge-warning-bg: #7A2E0E;   --badge-warning-text: #FEC84B;
        --badge-danger-bg:  #7A271A;   --badge-danger-text:  #FDA29B;
        --badge-info-bg:    #2D31A6;   --badge-info-text:    #C7D7FE;
        --badge-orange-bg:  #7c2d12;   --badge-orange-text:  #fed7aa;
        --badge-partner-bg: #155B75;   --badge-partner-text: #67E3F9;
        --badge-vendor-bg:  #4A1FB8;   --badge-vendor-text:  #D9D6FE;
        --badge-neutral-bg: #1D2939;   --badge-neutral-text: #98A2B3;
        --badge-pink-bg:    #851651;   --badge-pink-text:    #FCCEEE;
    }
}
/* Dark/system-dark navbar: slate glass */
[data-theme="dark"] .navbar,
[data-theme="system"] .navbar {
    background: var(--color-navbar-bg);
    border-bottom-color: var(--color-navbar-border);
}
/* System-light: same indigo gradient as explicit light */
@media (prefers-color-scheme: light) {
    [data-theme="system"] .navbar {
        background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
        border-bottom-color: rgba(255, 255, 255, 0.10);
    }
}
/* Badge + alert dark-mode colors handled via CSS variables declared above */
[data-theme="dark"] .alert-success { background: var(--badge-success-bg); color: var(--badge-success-text); border-color: var(--badge-success-bg); }
[data-theme="dark"] .alert-error { background: var(--badge-danger-bg); color: var(--badge-danger-text); border-color: var(--badge-danger-bg); }
[data-theme="dark"] .alert-warning { background: var(--badge-warning-bg); color: var(--badge-warning-text); border-color: var(--badge-warning-bg); }
[data-theme="dark"] .alert-info { background: var(--badge-info-bg); color: var(--badge-info-text); border-color: var(--badge-info-bg); }
[data-theme="dark"] .notification-unread { background: rgba(59, 130, 246, 0.1); }
[data-theme="dark"] .notification-unread:hover { background: rgba(59, 130, 246, 0.15); }
[data-theme="dark"] .form-errors { background: var(--badge-danger-bg); color: var(--badge-danger-text); border-color: var(--badge-danger-bg); }
[data-theme="dark"] .form-group input:disabled { background: var(--color-bg); color: var(--color-text-faint); }
[data-theme="dark"] .service-card-actions .btn-secondary {
    background: var(--color-surface-hover);
    border-color: var(--color-border-hover);
}
/* Dark-mode custom checkboxes — replaces harsh native white outline */
[data-theme="dark"] input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--color-border-hover);
    border-radius: 4px;
    background: var(--color-surface);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}
[data-theme="dark"] input[type="checkbox"]:checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
}
[data-theme="dark"] input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 46%;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}
[data-theme="dark"] input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 1px;
}
[data-theme="dark"] input[type="checkbox"]:hover {
    border-color: var(--color-primary);
}

/* System dark mode */
@media (prefers-color-scheme: dark) {
    [data-theme="system"] .alert-success { background: var(--badge-success-bg); color: var(--badge-success-text); border-color: var(--badge-success-bg); }
    [data-theme="system"] .alert-error { background: var(--badge-danger-bg); color: var(--badge-danger-text); border-color: var(--badge-danger-bg); }
    [data-theme="system"] .alert-warning { background: var(--badge-warning-bg); color: var(--badge-warning-text); border-color: var(--badge-warning-bg); }
    [data-theme="system"] .alert-info { background: var(--badge-info-bg); color: var(--badge-info-text); border-color: var(--badge-info-bg); }
    [data-theme="system"] .notification-unread { background: rgba(59, 130, 246, 0.1); }
    [data-theme="system"] .notification-unread:hover { background: rgba(59, 130, 246, 0.15); }
    [data-theme="system"] .form-errors { background: var(--badge-danger-bg); color: var(--badge-danger-text); border-color: var(--badge-danger-bg); }
    [data-theme="system"] .form-group input:disabled { background: var(--color-bg); color: var(--color-text-faint); }
    [data-theme="system"] .badge-service-chip { background: var(--color-bg-subtle); color: var(--color-text-secondary); border-color: var(--color-border); }
    [data-theme="system"] .service-card-actions .btn-secondary { background: var(--color-surface-hover); border-color: var(--color-border-hover); }
    [data-theme="system"] input[type="checkbox"] {
        appearance: none; -webkit-appearance: none;
        width: 16px; height: 16px;
        border: 1.5px solid var(--color-border-hover);
        border-radius: 4px; background: var(--color-surface);
        cursor: pointer; position: relative; flex-shrink: 0;
        transition: background 0.15s, border-color 0.15s;
    }
    [data-theme="system"] input[type="checkbox"]:checked {
        background: var(--color-primary); border-color: var(--color-primary);
    }
    [data-theme="system"] input[type="checkbox"]:checked::after {
        content: ''; position: absolute;
        left: 50%; top: 46%; width: 5px; height: 9px;
        border: solid #fff; border-width: 0 2px 2px 0;
        transform: translate(-50%, -50%) rotate(45deg);
    }
    [data-theme="system"] input[type="checkbox"]:focus-visible {
        outline: 2px solid var(--color-focus-ring); outline-offset: 1px;
    }
    [data-theme="system"] input[type="checkbox"]:hover {
        border-color: var(--color-primary);
    }
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--font-size-base);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Shared hub-layout tokens — single source of truth for the container width and
   the settings/ops hub rail + gutter. The content-width save-bar offset
   (settings-hub.css) derives its left/right edges from these, so the bar can
   never drift out of sync with the container or the hub grid. */
:root {
    --container-max: 1600px;   /* .container max-width */
    --hub-rail: 240px;         /* settings/ops hub sidebar column width */
    --hub-gap: 1.5rem;         /* hub grid gap AND .container side padding (kept equal) */
}
.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--hub-gap); }

a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-primary-hover); text-decoration: none; }

/* Focus ring for accessibility */
:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* ---------- Navbar ---------- */
.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: linear-gradient(135deg, var(--color-navbar-bg) 0%, var(--color-navbar-gradient) 100%);
    border-bottom: 1px solid var(--color-navbar-border);
    padding: 0;
}
.navbar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
}
.navbar-brand {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-navbar-text);
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.navbar-brand:hover { color: #fff; }

/* Hamburger menu button (mobile only) */
.navbar-toggle {
    display: none;
    background: none;
    border: none;
    padding: 0.375rem;
    cursor: pointer;
    color: var(--color-navbar-text-muted);
    transition: color var(--transition-fast);
}
.navbar-toggle:hover { color: var(--color-navbar-text); }
.navbar-toggle svg { display: block; }

.navbar-links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.navbar-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--color-navbar-text-muted);
    font-size: var(--font-size-sm);
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    white-space: nowrap;
}
.navbar-links a:hover {
    color: #fff;
    background: var(--color-navbar-hover);
}

/* Active nav indicator — applied by active_nav_section template tag */
.navbar-links a.nav-active,
.nav-dropdown-toggle.nav-active {
    color: #fff !important;
    background: var(--color-navbar-active) !important;
}

/* Admin dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--color-navbar-text-muted);
    font-size: var(--font-size-sm);
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
    background: none;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}
.nav-dropdown-toggle:hover,
.nav-dropdown-toggle[aria-expanded="true"] {
    color: #fff;
    background: var(--color-navbar-hover);
}
.nav-dropdown-chevron {
    width: 13px;
    height: 13px;
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}
.nav-dropdown-toggle[aria-expanded="true"] .nav-dropdown-chevron {
    transform: rotate(180deg);
}
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 190px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 0.25rem;
    z-index: 200;
    flex-direction: column;
}
.nav-dropdown-menu.open { display: flex; }
.nav-dropdown-menu a {
    justify-content: flex-start;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--color-text);
}
.navbar-links .nav-dropdown-menu a:hover {
    color: var(--color-text);
    background: var(--color-bg-subtle);
}

/* Right-aligned dropdown (avatar menu at the far right) */
.nav-dropdown-menu-right { left: auto; right: 0; transform: none; }

/* Accordion sub-menu nested inside a dropdown (e.g. Integrations inside Settings) */
.nav-sub-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: 400;
    background: none;
    border: none;
    cursor: pointer;
    gap: 6px;
    white-space: nowrap;
}
.nav-sub-toggle:hover { background: var(--color-bg-subtle); }
.nav-sub-toggle .nav-sub-chevron {
    width: 13px; height: 13px; flex-shrink: 0; margin-left: auto;
    transition: transform var(--transition-fast);
}
.nav-sub-toggle[aria-expanded="true"] .nav-sub-chevron { transform: rotate(90deg); }
.nav-sub-menu {
    display: none;
    flex-direction: column;
    margin: 0.125rem 0.25rem 0.25rem 0.75rem;
    padding: 0.125rem 0 0.125rem 0.625rem;
    border-left: 2px solid var(--color-border);
}
.nav-sub-menu.open { display: flex; }
.nav-sub-menu a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.375rem 0.5rem;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}
.nav-sub-menu a:hover { background: var(--color-bg-subtle); color: var(--color-text); }
.nav-sub-group-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    padding: 0.625rem 0.5rem 0.125rem 0.5rem;
    pointer-events: none;
    user-select: none;
}
.nav-sub-group-label:first-child { padding-top: 0.125rem; }

/* User avatar in navbar */
.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--color-primary-strong);
    color: #fff;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

/* RX-PENTEST T6: customer logout is a CSRF-protected POST form styled to look
   like the plain nav link it replaced (no inline styles — CSP-compliant). */
.logout-inline-form {
    display: inline;
    margin: 0;
}
.logout-link-btn {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
}
.logout-link-btn:hover {
    text-decoration: underline;
}

/* Customer portal badge */
.navbar-portal-badge {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-navbar-text-muted);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
    margin-left: 0.5rem;
    vertical-align: middle;
    white-space: nowrap;
}

/* ---------- Platform Context Banner ---------- */
.platform-context-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.4rem 1rem;
    background: var(--color-warning);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.platform-context-banner form {
    margin: 0;
}
.platform-context-banner .btn-sm {
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    background: rgba(0,0,0,.15);
    color: inherit;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    font-weight: 600;
}
.platform-context-banner .btn-sm:hover {
    background: rgba(0,0,0,.25);
}
/* Push body content down when banner is visible */
body:has(.platform-context-banner) .navbar {
    top: 2rem;
}
body:has(.platform-context-banner) .skip-nav:focus {
    top: 2.5rem;
}
body:has(.platform-context-banner) {
    padding-top: 2rem;
}

/* ---------- Skip Navigation (accessibility) ---------- */
.skip-nav {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 9999;
    padding: 0.5rem 1rem;
    background: var(--color-primary-strong);
    color: #fff;
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
    transition: top 0.1s;
}
.skip-nav:focus {
    top: 0.5rem;
}

/* ---------- Footer ---------- */
.footer {
    margin-top: auto;
    padding: 2.5rem 0;
    font-size: var(--font-size-xs);
    background: var(--color-footer-bg);
    border-top: none;
}
.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.footer-copy { margin: 0; color: var(--color-footer-text-muted); }
.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
}
.footer-links a {
    color: var(--color-footer-text-muted);
    text-decoration: none;
}
.footer-links a:hover { color: var(--color-footer-text); }
/* Desktop content/footer buffer — keep page content and any hub sidebar from
   butting directly against the footer (the footer has no top border/margin and
   .container has no vertical padding). Mobile layouts reserve their own larger
   bottom space (bottom-nav / tab-bar) at their breakpoints, which overrides this. */
main.container { padding-bottom: 2rem; }
/* Legal page content */
.legal-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 0 4rem;
}
.legal-content h1 { font-size: var(--font-size-2xl); font-weight: 700; margin-bottom: 0.5rem; }
.legal-content .legal-meta { color: var(--color-text-muted); font-size: var(--font-size-sm); margin-bottom: 2rem; }
.legal-content h2 { font-size: var(--font-size-lg); font-weight: 600; margin-top: 2rem; margin-bottom: 0.5rem; }
.legal-content p, .legal-content li { line-height: 1.7; color: var(--color-text-secondary); }
.legal-content ul { padding-left: 1.5rem; }
.legal-content a { color: var(--color-primary); }

/* ---------- Page Header ---------- */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0 0 2rem;
    padding: 2rem 0 1.75rem;
    background: none;
    border-bottom: none;
}
.page-header h1 {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
}
.page-header p {
    color: var(--color-text-muted);
    margin-top: 0.375rem;
    font-size: var(--font-size-base);
}
[data-theme="dark"] .page-header,
[data-theme="system"] .page-header {
    background: none;
    border-bottom: none;
    margin: 2.5rem 0 2rem;
    padding: 0;
}

/* ---------- Tab Bar (status filter tabs) ---------- */
.tab-bar {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1.5rem;
}
.tab {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
    border-radius: 9999px;
    color: var(--color-text-muted);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tab:hover {
    background: var(--color-bg-subtle);
    color: var(--color-text);
}
.tab.active {
    background: var(--color-primary-strong);
    color: #fff;
    border-color: var(--color-primary);
}

/* ---------- Buttons — Untitled UI ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.125rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    text-decoration: none;
    line-height: 1.5;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.btn:disabled, .btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-sm {
    padding: 0.375rem 0.875rem;
    font-size: var(--font-size-xs);
    border-radius: var(--radius-sm);
}
.btn-sm svg { width: 14px; height: 14px; flex-shrink: 0; }
.btn-lg {
    padding: 0.75rem 1.25rem;
    font-size: var(--font-size-base);
}

.btn-primary {
    background: var(--color-primary-strong);
    color: #fff;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-xs);
}
.btn-primary:hover {
    background: var(--color-primary-strong-hover);
    border-color: var(--color-primary-hover);
    color: #fff;
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); box-shadow: var(--shadow-xs); }

.btn-secondary {
    background: var(--color-surface);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
    box-shadow: var(--shadow-xs);
}
.btn-secondary:hover {
    background: var(--color-bg-subtle);
    border-color: var(--color-border-hover);
    color: var(--color-text);
}

.btn-ghost {
    background: transparent;
    color: var(--color-text-muted);
    border-color: transparent;
}
.btn-ghost:hover {
    background: var(--color-bg-subtle);
    color: var(--color-text);
}
.btn-ghost-danger {
    background: transparent;
    color: var(--color-text-muted);
    border-color: transparent;
}
.btn-ghost-danger:hover {
    background: #D92D2014;
    color: var(--color-danger);
}

/* Previously-phantom button variants — used ~30x across templates with 0 CSS
   definitions, so they rendered as bare unstyled buttons (FBL#32). Defined here
   as token-driven variants of the base .btn so every usage renders styled. */
.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-outline:hover {
    background: var(--color-primary-strong);
    color: #fff;
    border-color: var(--color-primary);
}
.btn-neutral {
    background: var(--color-surface);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
    box-shadow: var(--shadow-xs);
}
.btn-neutral:hover {
    background: var(--color-bg-subtle);
    border-color: var(--color-border-hover);
    color: var(--color-text);
}
.btn-org {
    background: var(--color-primary-strong);
    color: #fff;
    border-color: var(--color-primary);
}
.btn-org:hover {
    background: var(--color-primary-strong-hover);
    border-color: var(--color-primary-hover);
    color: #fff;
}
.btn-org-secondary {
    background: transparent;
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}
.btn-org-secondary:hover {
    background: var(--color-bg-subtle);
    border-color: var(--color-border-hover);
    color: var(--color-text);
}
.btn-tool {
    background: var(--color-surface);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.375rem 0.75rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
    cursor: pointer;
}
.btn-tool:hover { background: var(--color-bg-subtle); color: var(--color-text); }
.btn-tool.active { background: var(--color-primary-strong); color: #fff; border-color: var(--color-primary); }

.btn-danger {
    background: var(--color-danger);
    color: #fff;
    border-color: var(--color-danger);
    box-shadow: var(--shadow-xs);
}
.btn-danger:hover {
    background: var(--badge-danger-text);
    border-color: var(--badge-danger-text);
    color: #fff;
    transform: translateY(-1px);
}
.btn-warning {
    background: var(--color-warning);
    color: #fff;
    border-color: var(--color-warning);
    box-shadow: var(--shadow-xs);
}
.btn-warning:hover {
    background: var(--badge-warning-text);
    border-color: var(--badge-warning-text);
    color: #fff;
    transform: translateY(-1px);
}
.btn-success {
    background: var(--color-success);
    color: #fff;
    border-color: var(--color-success);
    box-shadow: var(--shadow-xs);
}
.btn-success:hover {
    background: var(--badge-success-text);
    border-color: var(--badge-success-text);
    color: #fff;
    transform: translateY(-1px);
}

/* ---------- Filters Bar ---------- */
.filters-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}
.filters-bar input[type="text"],
.filters-bar select {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background: var(--color-surface);
    transition: all var(--transition-fast);
}
.filters-bar input[type="text"]:hover,
.filters-bar select:hover {
    border-color: var(--color-border-hover);
}
.filters-bar input[type="text"]:focus,
.filters-bar select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-alpha);
}
.filters-bar input[type="text"] { flex: 1; min-width: 200px; }
.filters-bar select { min-width: 140px; }

/* ---------- Service Cards ---------- */
/* View-mode anti-flicker: <html> class set by blocking script in <head>,
   so the wrong view is hidden in the same paint as main.css loads. */
.svc-view-card #table-view, .sol-view-card #table-view, .comp-view-card #table-view { display: none !important; }
.svc-view-table #card-view, .sol-view-table #card-view, .comp-view-table #card-view { display: none !important; }

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow-xs);
    transition: all var(--transition-base);
    overflow: hidden;
}
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-primary);
    opacity: 0.18;
    transition: opacity var(--transition-fast);
}
.service-card:hover {
    border-color: var(--color-border-hover);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}
.service-card:hover::before { opacity: 1; }
.service-card h3 { margin: 0 0 0.125rem; font-size: var(--font-size-base); }
.service-card h3 a { color: var(--color-text); font-weight: 600; }
.service-card h3 a:hover { color: var(--color-primary); }
/* Dark-mode service-title link contrast (FBL#34): the inherited indigo (#6366F1)
   is 3.27:1 on the slate-800 card — a WCAG AA fail on the most important text on
   the storefront. Bump to indigo-400 (#818cf8, ~5.5:1). Covers both the customer
   card markup (<a><h3>) and any <h3><a> variant. */
[data-theme="dark"] .service-card-header a,
[data-theme="dark"] .service-card h3 a { color: #818cf8; }
@media (prefers-color-scheme: dark) {
    [data-theme="system"] .service-card-header a,
    [data-theme="system"] .service-card h3 a { color: #818cf8; }
}
.service-card .description {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin: 0.5rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}
.service-card .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
    margin-top: 1rem;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.service-card-badges { display: flex; gap: 0.375rem; flex-wrap: wrap; margin-bottom: 0.25rem; padding-right: 2.5rem; }
.service-card-description {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin: 0.5rem 0;
    line-height: 1.5;
}
.service-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 1rem;
    font-size: var(--font-size-xs);
}
.service-card-tags { display: flex; gap: 0.25rem; flex-wrap: wrap; }

/* ---------- Badges — Untitled UI ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem 0.3rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}
/* Constrain Lucide SVG icons inside badges — prevents 24px default from inflating badge height */
.badge svg {
    display: block;        /* removes inline baseline behaviour; vertical-align is ignored on flex items */
    width: 0.875em;
    height: 0.875em;
    flex-shrink: 0;
}
.badge-active { background: var(--badge-success-bg); color: var(--badge-success-text); font-weight: 700; }
.badge-draft { background: var(--badge-neutral-bg); color: var(--badge-neutral-text); }
.badge-deprecated { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.badge-retired { background: var(--badge-danger-bg); color: var(--badge-danger-text); }
.badge-expiring { background: var(--badge-orange-bg); color: var(--badge-orange-text); }
.badge-expired { background: var(--badge-danger-bg); color: var(--badge-danger-text); }
.badge-primary-contact { background: var(--badge-info-bg); color: var(--badge-info-text); }
.badge-service-chip { background: var(--color-surface-hover); color: var(--color-text-secondary); border: 1px solid var(--color-border); font-size: 0.8rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
.badge-service-chip .badge-via { opacity: 0.65; font-size: 0.75em; }
.badge-pending { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.badge-implementing { background: var(--badge-info-bg); color: var(--badge-info-text); }
.badge-suspended { background: var(--badge-orange-bg); color: var(--badge-orange-text); }
.badge-rejected { background: var(--badge-danger-bg); color: var(--badge-danger-text); }
.badge-cancelled { background: var(--badge-neutral-bg); color: var(--badge-neutral-text); }
.badge-cancellation_pending { background: var(--badge-pink-bg); color: var(--badge-pink-text); }
.badge-notice_pending { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.badge-danger  { background: var(--badge-danger-bg);  color: var(--badge-danger-text);  }
.badge-muted   { background: var(--badge-neutral-bg); color: var(--badge-neutral-text); }

/* Semantic group classes (used by badge color editor group headers) */
.badge-success { background: var(--badge-success-bg); color: var(--badge-success-text); }
.badge-warning { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.badge-orange  { background: var(--badge-orange-bg);  color: var(--badge-orange-text);  }
.badge-neutral { background: var(--badge-neutral-bg); color: var(--badge-neutral-text); }
.badge-pink      { background: var(--badge-pink-bg);    color: var(--badge-pink-text);    }
.badge-secondary { background: var(--badge-neutral-bg); color: var(--badge-neutral-text); }
/* Neutral/inactive badges get a border so the pill is visible in dark mode */
.badge-draft, .badge-cancelled, .badge-neutral, .badge-muted, .badge-secondary,
.badge-role, .badge-data-restricted, .badge-cert-never_certified,
.badge-lifecycle-planning, .lifecycle-planning {
    border: 1px solid var(--color-border);
}

/* Data classification badges */
.badge-data-public       { background: var(--badge-success-bg); color: var(--badge-success-text); }
.badge-data-internal     { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.badge-data-confidential { background: var(--badge-danger-bg);  color: var(--badge-danger-text);  }
.badge-data-restricted   { background: var(--badge-neutral-bg); color: var(--badge-neutral-text); }

/* Service criticality badges (1=Low, 2=Medium, 3=High, 4=Critical) */
.badge-criticality-1 { background: var(--badge-success-bg);  color: var(--badge-success-text);  }
.badge-criticality-2 { background: var(--badge-warning-bg);  color: var(--badge-warning-text);  }
.badge-criticality-3 { background: var(--badge-orange-bg);   color: var(--badge-orange-text);   }
.badge-criticality-4 { background: var(--badge-danger-bg);   color: var(--badge-danger-text);   }

/* Organization type badges */
.badge-company { background: var(--badge-info-bg); color: var(--badge-info-text); }
.badge-customer { background: var(--badge-success-bg); color: var(--badge-success-text); }
.badge-partner { background: var(--badge-partner-bg); color: var(--badge-partner-text); }
.badge-vendor { background: var(--badge-vendor-bg); color: var(--badge-vendor-text); }

/* Supply chain role badges */
.badge-role-contract { background: var(--badge-info-bg); color: var(--badge-info-text); }
.badge-role-partner { background: var(--badge-partner-bg); color: var(--badge-partner-text); }
.badge-role-subcontractor { background: var(--badge-orange-bg); color: var(--badge-orange-text); }
.badge-role-component-vendor { background: var(--badge-vendor-bg); color: var(--badge-vendor-text); }

/* Role & certification badges */
.badge-role { background: var(--badge-neutral-bg); color: var(--badge-neutral-text); }
.badge-cert-certified { background: var(--badge-success-bg); color: var(--badge-success-text); }
.badge-cert-expiring_soon { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.badge-cert-expired { background: var(--badge-danger-bg); color: var(--badge-danger-text); }
.badge-cert-never_certified { background: var(--badge-neutral-bg); color: var(--badge-neutral-text); }

/* Assessment recommendation badges */
.badge-continue  { background: var(--badge-success-bg); color: var(--badge-success-text); }
.badge-review    { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.badge-terminate { background: var(--badge-danger-bg); color: var(--badge-danger-text); }

/* ---------- Tags ---------- */
.tag {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem 0.3rem;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
    line-height: 1;
}
/* Fallback for tags without a color class */
.tag:not([class*="tag-"]) {
    background-color: var(--badge-neutral-bg);
    color: var(--badge-neutral-text);
}
/* Overflow "+N more" chip */
.tag-overflow {
    background-color: var(--badge-neutral-bg);
    color: var(--badge-neutral-text);
}
/* Tag pill container — use instead of inline style="display:flex;gap:..." */
.tag-group { display: flex; gap: 0.25rem; flex-wrap: wrap; align-items: center; }

/* ---------- Breadcrumb ---------- */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}
.breadcrumb a {
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb .sep {
    margin: 0 0.5rem;
    color: var(--color-text-faint);
    font-size: var(--font-size-xs);
}

/* ---------- Detail Pages ---------- */
.detail-header { margin: 1rem 0 1.5rem; }
.detail-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.detail-header h1 {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}
.detail-header .meta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.detail-header .meta a {
    display: inline-flex;
    align-items: center;
}

.detail-body,
.detail-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}
.detail-body--full {
    grid-template-columns: 1fr;
}
.detail-body--full .detail-sidebar {
    display: none;
}
@media (max-width: 768px) {
    .detail-body,
    .detail-layout { grid-template-columns: 1fr; }
}

.detail-main {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    box-shadow: var(--shadow-xs);
}
.detail-sidebar {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-xs);
    height: fit-content;
}

.detail-main h2 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}
.detail-main h2:not(:first-of-type) {
    margin-top: 2rem;
}

.detail-sidebar h3 {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: 0.625rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--color-border);
}
.detail-sidebar h3:not(:first-of-type) {
    margin-top: 1.5rem;
}

/* Card grid inside detail-main (replaces sidebar on overview tab) */
.detail-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}
.detail-card-grid-full { grid-column: 1 / -1; }
.activity-hidden { display: none; }
.activity-hidden.activity-visible { display: block; }
@media (max-width: 768px) {
    .detail-card-grid { grid-template-columns: 1fr; }
}

/* Sidebar card stack (Option A — service detail) */
.detail-sidebar-stack {
    background: none;
    border: none;
    padding: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.sidebar-card {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.sidebar-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-primary);
    opacity: 0.18;
    z-index: 1;
}
.sidebar-card-operational::before { background: var(--color-success); opacity: 1; }
.sidebar-card-operational.status-degraded::before { background: var(--color-warning); }
.sidebar-card-operational.status-maintenance::before { background: var(--status-maintenance); }
.sidebar-card-operational.status-down::before { background: var(--color-danger); }
.sidebar-card-header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}
[data-theme="dark"] .sidebar-card-header,
[data-theme="system"] .sidebar-card-header { background: rgba(255,255,255,0.03); }
.sidebar-card-header svg { width: 13px; height: 13px; flex-shrink: 0; }
.sidebar-card-body { padding: 0.875rem; }

/* ── License card action row ───────────────────────────────── */
.license-action-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0 0.25rem;
}
.license-action-row input[type="number"] {
    width: 48px;
    flex-shrink: 0;
    padding: 0.375rem 0.5rem;
    font-size: var(--font-size-xs);
    font-family: inherit;
    line-height: 1.5;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    box-sizing: border-box;
    -moz-appearance: textfield;
}
.license-action-row input[type="number"]::-webkit-inner-spin-button,
.license-action-row input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.extend-group {
    display: inline-flex;
    align-items: center;
}
/* Left half of the input-group: input + "days" share one bordered box */
.extend-group .days-group {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid var(--color-border);
    border-right: none;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    background: var(--color-surface);
    padding-right: 0.4rem;
}
/* Remove the input's own border — the days-group container provides it */
.extend-group input[type="number"] {
    border: none;
    background: transparent;
    border-radius: 0;
}
/* Right half: button squares its left edge to connect flush */
.extend-group .btn-sm {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.license-action-row .days-label {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}
.license-action-row .btn-sm { flex-shrink: 0; white-space: nowrap; }

.sidebar-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 0.75rem 0;
}
.sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.sidebar-pending-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
    padding: 0.5rem 0.625rem;
    border-radius: var(--radius);
    background: var(--color-primary-alpha);
    border: 1px solid rgba(37,99,235,0.2);
    color: var(--color-text);
    text-decoration: none;
    margin-bottom: 0.75rem;
}
.sidebar-pending-link:hover { background: rgba(37,99,235,0.1); }

/* Manage icon grid (Option D) */
.manage-group-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin: 0.75rem 0 0.375rem;
    opacity: 0.8;
}
.manage-group-label:first-child { margin-top: 0; }
.manage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem;
    margin-bottom: 0.25rem;
}
.manage-grid-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.25rem;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-bg-subtle, rgba(0,0,0,0.02));
    color: var(--color-text);
    font-size: 0.68rem;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    line-height: 1.3;
    transition: all var(--transition-fast);
}
.manage-grid-btn:hover {
    background: rgba(99,102,241,0.08);
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.manage-grid-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
[data-theme="dark"] .manage-grid-btn,
[data-theme="system"] .manage-grid-btn { background: rgba(255,255,255,0.04); }

/* Info list (sidebar key-value pairs) */
.info-list { list-style: none; }
.info-list li {
    padding: 0.375rem 0;
    font-size: var(--font-size-sm);
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}
.info-list li .label { color: var(--color-text-muted); flex-shrink: 0; }
/* Media rows (icon + title/description, e.g. Documents / KB lists). The base
   .info-list li uses justify-content: space-between for label/value pairs, which
   here would fling the icon and title to opposite edges — keep them together and
   top-aligned instead. */
.info-list.info-list-media li {
    justify-content: flex-start;
    align-items: flex-start;
}
.info-list a { overflow-wrap: anywhere; }
.info-list li.info-list-block {
    display: block;
}
.info-list li.info-list-block .badge { margin-left: 0.25rem; }

/* Dependency list */
.dep-list { list-style: none; }
.dep-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
}
.dep-list li:last-child { border-bottom: none; }
.dep-type {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

/* Sidebar sections (customer service detail) */
.sidebar-section { margin-bottom: 1.5rem; }
.sidebar-section:last-child { margin-bottom: 0; }
.sidebar-section h3 {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: 0.625rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--color-border);
}

/* ---------- Unsubscribe Section ---------- */
.unsubscribe-section summary {
    cursor: pointer;
    list-style: none;
}
.unsubscribe-section summary::-webkit-details-marker { display: none; }
.unsubscribe-section[open] summary { margin-bottom: 0.5rem; }

/* ---------- Dependency Tree ---------- */
.tree-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}
@media (max-width: 768px) { .tree-container { grid-template-columns: 1fr; } }

.tree-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-xs);
}
.tree-section h2 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}
.tree-empty { color: var(--color-text-muted); font-size: var(--font-size-sm); }

ul.tree {
    list-style: none;
    padding-left: 1.25rem;
    border-left: 2px solid var(--color-border);
}
ul.tree > li {
    padding: 0.375rem 0;
    font-size: var(--font-size-sm);
}
ul.tree > li::before {
    content: "\2014\00a0";
    color: var(--color-text-faint);
}
/* Collapsible tree */
ul.tree.collapsed { display: none; }
.tree-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 0.7rem;
    cursor: pointer;
    margin-right: 0.375rem;
    transition: all var(--transition-fast);
    vertical-align: middle;
    line-height: 1;
    flex-shrink: 0;
}
.tree-toggle:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-border-hover);
    color: var(--color-text);
}

/* Rich tree nodes */
.tree-node {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    box-shadow: var(--shadow-xs);
    transition: all var(--transition-fast);
}
.tree-node:hover {
    border-color: var(--color-border-hover);
    box-shadow: var(--shadow-sm);
}
.tree-node-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.tree-node-header a {
    font-weight: 600;
    font-size: var(--font-size-sm);
}
.tree-node-details {
    margin-top: 0.5rem;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.tree-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    align-items: center;
}
.tree-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.tree-node-subscribed {
    border-left: 3px solid var(--color-success);
}
.tree-node-pending {
    border-left: 3px solid var(--color-warning);
}
.tree-node-not-subscribed {
    border-left: 3px solid var(--color-border);
}

/* Prerequisite label */
.badge-prerequisite {
    background: var(--badge-danger-bg);
    color: var(--badge-danger-text);
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.0625rem 0.375rem;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Related services section (customer detail) */
.related-services-section {
    margin-top: 2rem;
    border-top: 1px solid var(--color-border);
    padding-top: 1.5rem;
}
.related-group {
    margin-bottom: 1.5rem;
}
.related-group h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--color-text);
}
.related-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
}
.related-card {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    background: var(--color-surface);
    transition: border-color 0.15s;
    overflow: hidden;
}
.related-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-primary);
    opacity: 0.18;
    transition: opacity var(--transition-fast);
}
.related-card:hover { border-color: var(--color-primary-light); }
.related-card:hover::before { opacity: 1; }
.related-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    margin-bottom: 0.25rem;
}
.related-card-header a {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    text-decoration: none;
}
.related-card-header a:hover { text-decoration: underline; }
.related-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}
.related-card-desc {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin: 0.25rem 0 0;
    line-height: 1.4;
}
.related-card-cost {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin: 0.25rem 0 0;
    font-weight: 500;
}

/* Cost estimate table (customer detail) */
.cost-estimate-section {
    margin-top: 1.5rem;
    border-top: 1px solid var(--color-border);
    padding-top: 1.25rem;
}
.cost-estimate-section h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0 0 0.75rem;
    color: var(--color-text);
}
.cost-table {
    width: 100%;
    max-width: 400px;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}
.cost-table td {
    padding: 0.375rem 0;
    color: var(--color-text);
}
.cost-table .cost-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.cost-table tfoot {
    border-top: 2px solid var(--color-border);
}
.cost-table tfoot td {
    padding-top: 0.5rem;
}

[data-theme="dark"] .related-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .cost-estimate-section { border-top-color: var(--color-border); }
[data-theme="dark"] .related-services-section { border-top-color: var(--color-border); }

/* Prerequisite missing list on pending subscriptions */
.prereq-missing-list {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0;
}
.prereq-missing-list li::before {
    content: "\2022\00a0";
    color: var(--color-danger);
}

/* Cost rollup summary */
.cost-rollup {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.cost-rollup strong {
    color: var(--color-primary);
}

/* Customer filter for dependency tree */
.tree-customer-filter {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.tree-customer-filter label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-muted);
}
.tree-customer-filter select {
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background: var(--color-surface);
}

/* Impact analysis */
.impact-summary {
    background: var(--color-warning-light);
    color: var(--color-warning);
    border: 1px solid var(--badge-warning-bg);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1.5rem;
    font-size: var(--font-size-sm);
}
[data-theme="dark"] .impact-summary {
    background: var(--badge-warning-bg);
    color: var(--badge-warning-text);
    border-color: var(--badge-warning-bg);
}

/* ---------- Subcontractors ---------- */
.subcontractor-list { list-style: none; }
.subcontractor-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
}
.subcontractor-list li:last-child { border-bottom: none; }
.subcontractor-meta { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.subcontractor-link { font-size: var(--font-size-xs); margin-right: 0.75rem; }

/* ---------- CRM Setup Steps ---------- */
.crm-steps { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.75rem; }
.crm-step  { display: flex; gap: 1rem; align-items: flex-start; }
.crm-step-num {
    flex-shrink: 0;
    width: 1.75rem; height: 1.75rem;
    border-radius: 50%;
    background: var(--color-primary-strong);
    color: #fff;
    font-size: var(--font-size-xs);
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin-top: 0.1rem;
}
.crm-step-body { flex: 1; }
.crm-step-body > strong { display: block; font-size: var(--font-size-sm); color: var(--color-text); margin-bottom: 0.2rem; }
.crm-step-body p { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.6; }
.crm-step-code {
    display: inline-block;
    font-size: var(--font-size-xs);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    padding: 0.15rem 0.45rem;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    margin-top: 0.35rem;
    word-break: break-all;
}

/* ---------- Split Button ---------- */
.btn-split-group {
    display: inline-flex;
    align-items: stretch;
    position: relative;
}
.btn-split-dropdown-wrap {
    display: flex;
    align-items: stretch;
}
.btn-split-main {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 1px solid rgba(255,255,255,0.25);
}
.btn-split-toggle {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 0 0.5rem;
}
.btn-split-toggle i { width: 16px; height: 16px; }
.btn-split-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 220px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(16,24,40,.1);
    z-index: 100;
    overflow: hidden;
}
.btn-split-menu.open { display: block; }
.btn-split-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
    text-align: left;
}
.btn-split-item:hover { background: var(--color-bg-subtle); }
.btn-split-item-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.btn-split-item-row i { width: 14px; height: 14px; color: var(--color-text-muted); flex-shrink: 0; }
.btn-split-item-hint {
    font-size: var(--font-size-xs);
    font-weight: 400;
    color: var(--color-text-muted);
    padding-left: 1.375rem;
}

/* ---------- Tables ---------- */
.table-scroll-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.subscription-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}
.subscription-table th,
.subscription-table td {
    padding: 0.875rem 1rem;
    text-align: left;
    font-size: var(--font-size-sm);
    border-bottom: 1px solid var(--color-border);
}
.subscription-table th {
    background: var(--color-bg-subtle);
    font-weight: 600;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}
.subscription-table tbody tr {
    transition: background var(--transition-fast);
}
.subscription-table tbody tr:nth-child(even) {
    background: var(--color-surface-hover);
}
.subscription-table tbody tr:hover {
    background: var(--color-surface-hover);
}
[data-theme="dark"] .subscription-table th,
[data-theme="system"] .subscription-table th { background: var(--color-surface); color: var(--color-text-muted); }
[data-theme="dark"] .subscription-table tbody tr:nth-child(even),
[data-theme="system"] .subscription-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
.subscription-table tr:last-child td { border-bottom: none; }
.subscription-table th:last-child,
.subscription-table td:last-child {
    text-align: right;
    width: 1%;
    white-space: nowrap;
}
.service-table-wrapper .subscription-table {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* ---------- Pagination ---------- */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;
    margin: 2.5rem 0;
}
.pagination a, .pagination span {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
}
.pagination a:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-border-hover);
    color: var(--color-text);
}
.pagination .current {
    background: var(--color-primary-strong);
    color: #fff;
    border-color: var(--color-primary);
}
.pagination-info {
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    padding: 0 0.5rem;
}
/* The querystring-preserving paginator (core/_pagination.html) wraps its links
   in <ul class="pagination-list"><li>…; reset the default list chrome so it lays
   out as a centered horizontal row matching the services/components paginator.
   The links themselves are already styled by `.pagination a` above. */
.pagination-list {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.pagination-list > li { margin: 0; }
/* Give the "Page X of Y" indicator the same bordered-pill look as the prev/next
   links so it matches the services/components paginator. */
.pagination-list .pagination-info {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.375rem 0.75rem;
}

/* ---------- Empty States ---------- */
.empty-state {
    text-align: center;
    padding: 4rem 1.5rem;
    color: var(--color-text-muted);
}
.empty-state h2 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-text);
}
.empty-state p { font-size: var(--font-size-sm); }

.empty-hint {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    padding: 1rem 0;
}

/* ---------- Toast Notifications ---------- */
.toast-container {
    position: fixed;
    top: 4.5rem;
    right: 1.5rem;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
    max-width: 420px;
}
.toast {
    pointer-events: auto;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    animation: toast-in 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
    transform: translateX(100%);
    opacity: 0;
}
.toast.toast-out {
    animation: toast-out 200ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.toast-close {
    background: none;
    border: none;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    font-size: 1.125rem;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
}
.toast-close:hover { opacity: 1; }
@keyframes toast-in {
    to { transform: translateX(0); opacity: 1; }
}
@keyframes toast-out {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Legacy static alerts (fallback when JS disabled) */
.messages { margin-top: 1.5rem; }
.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    margin-bottom: 0.75rem;
    font-weight: 500;
}
.alert-success {
    background: var(--color-success-light);
    color: var(--color-success);
    border: 1px solid var(--badge-success-bg);
}
.alert-error {
    background: var(--color-danger-light);
    color: var(--color-danger);
    border: 1px solid var(--badge-danger-bg);
}
.alert-warning {
    background: var(--color-warning-light);
    color: var(--color-warning);
    border: 1px solid var(--badge-warning-bg);
}
.alert-info {
    background: var(--badge-info-bg);
    color: var(--badge-info-text);
    border: 1px solid var(--badge-info-bg);
}

/* ---------- Login & Auth Pages ---------- */
.login-container {
    max-width: 400px;
    margin: 4rem auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    box-shadow: var(--shadow-xl);
}
.login-container h1 {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 0.375rem;
    text-align: center;
}
.login-subtitle {
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin-bottom: 1.5rem;
}
.login-container .login-subtitle:first-of-type {
    margin-top: 0;
}

.staff-login-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}
.staff-login-link a {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 500;
}
.staff-login-link a:hover { color: var(--color-primary); }

/* SSO Provider Buttons */
.sso-provider-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-bottom: 0.25rem;
}
.sso-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.625rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    text-decoration: none;
}
.sso-btn:hover {
    background: var(--color-bg-subtle);
    border-color: var(--color-border-hover);
    box-shadow: var(--shadow-sm);
}
.sso-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.sso-btn i[data-lucide] { width: 18px; height: 18px; flex-shrink: 0; }
.sso-btn-microsoft:hover { border-color: #00a4ef; }
.sso-btn-google:hover { border-color: #4285f4; }
.sso-btn-cognito:hover { border-color: #ff9900; }
.sso-btn-okta:hover { border-color: #007DC1; }
.sso-btn-saml:hover { border-color: var(--color-primary); }

/* Login divider */
.login-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
}
.login-divider hr {
    flex: 1;
    border: none;
    border-top: 1px solid var(--color-border);
}
.login-divider span {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

/* .login-security-note: the earlier duplicate here was removed; the single canonical rule
   (flex, centred, muted) lives further down in the utilities region. */

/* ---------- Forms ---------- */
/* Standalone input/select/label utilities (usable outside .form-group) */
.form-control,
.form-select {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background: var(--color-surface);
    transition: all var(--transition-fast);
    line-height: 1.5;
}
.form-control:hover,
.form-select:hover { border-color: var(--color-border-hover); }
.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-alpha);
}
.form-control::placeholder { color: var(--color-text-faint); }
.form-control:disabled,
.form-select:disabled { background: var(--color-bg); color: var(--color-text-muted); cursor: not-allowed; }
.form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: 0.375rem;
    color: var(--color-text-secondary);
}

.form-group {
    margin-bottom: 1rem;
}
.form-group label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: 0.375rem;
    color: var(--color-text-secondary);
}
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background: var(--color-surface);
    transition: all var(--transition-fast);
    line-height: 1.5;
}
.form-group input:not([type="checkbox"]):not([type="radio"]):hover,
.form-group textarea:hover,
.form-group select:hover {
    border-color: var(--color-border-hover);
}
.form-group input:not([type="checkbox"]):not([type="radio"]):focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-alpha);
}
.form-group input:not([type="checkbox"]):not([type="radio"])::placeholder,
.form-group textarea::placeholder {
    color: var(--color-text-faint);
}
.form-group input:not([type="checkbox"]):not([type="radio"]):disabled {
    background: var(--color-bg);
    color: var(--color-text-muted);
    cursor: not-allowed;
}
.form-group textarea {
    resize: vertical;
    min-height: 72px;
}
.form-errors {
    background: var(--color-danger-light);
    color: var(--color-danger);
    border: 1px solid var(--badge-danger-bg);
    border-radius: var(--radius);
    padding: 0.75rem;
    margin-bottom: 1rem;
    font-size: var(--font-size-xs);
}

/* Customer service filters */
.service-filters { margin-bottom: 2rem; }
.filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    padding: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}
.search-input,
.filter-select {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background: var(--color-surface);
    transition: all var(--transition-fast);
}
.search-input { flex: 1; min-width: 200px; }
.filter-select { min-width: 140px; }
.search-input:hover,
.filter-select:hover { border-color: var(--color-border-hover); }
.search-input:focus,
.filter-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-alpha);
}

/* ---------- View Toggle ---------- */
.view-toggle {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
}
.view-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-muted);
    transition: all var(--transition-fast);
    cursor: pointer;
}
.view-toggle-btn:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-border-hover);
    color: var(--color-text);
}
.view-toggle-btn.active {
    background: var(--color-primary-strong);
    border-color: var(--color-primary);
    color: #fff;
}
.view-toggle-btn.active:hover {
    background: var(--color-primary-strong-hover);
}

/* ---------- Stats Grid ---------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.stat-card {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-xs);
    transition: all var(--transition-base);
    overflow: hidden;
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-primary);
    opacity: var(--card-accent-opacity);
}
.stat-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}
a.stat-card-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
a.stat-card-link:hover {
    border-color: var(--color-primary);
}
.stat-value {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    letter-spacing: -0.02em;
}
.stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: 0.375rem;
    font-weight: 500;
}

/* Stat card colour modifiers */
.stat-card-success::before { background: var(--color-success); opacity: 1; }
.stat-card-success .stat-value { color: var(--color-success); }
.stat-card-success a.stat-card-link:hover { border-color: var(--color-success); }

.stat-card-warning::before { background: var(--color-warning); opacity: 1; }
.stat-card-warning .stat-value { color: var(--color-warning); }
.stat-card-warning a.stat-card-link:hover { border-color: var(--color-warning); }

.stat-card-danger::before { background: var(--color-danger); opacity: 1; }
.stat-card-danger .stat-value { color: var(--color-danger); }
.stat-card-danger a.stat-card-link:hover { border-color: var(--color-danger); }

.stat-card-purple::before { background: var(--badge-vendor-text); opacity: 1; }
.stat-card-purple .stat-value { color: var(--badge-vendor-text); }
.stat-card-purple a.stat-card-link:hover { border-color: var(--badge-vendor-text); }

/* ---------- Customer Detail ---------- */
.service-short-desc {
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
    margin-bottom: 1rem;
    line-height: 1.5;
}
.service-description {
    margin-bottom: 1rem;
    line-height: 1.7;
}
.service-tags {
    margin-top: 1rem;
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

/* ---------- Certification ---------- */
.certification-block { margin-top: 0.625rem; }
.certification-block .info-list { margin-top: 0.75rem; }
.certification-block .form-group textarea {
    font-size: var(--font-size-xs);
}
.cert-form { margin-top: 0.75rem; }
.cert-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: 0.5rem;
}

/* Pending subscriptions count badge */
.pending-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    border-radius: var(--radius-full);
    background: var(--color-warning);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    margin-left: 0.25rem;
}

/* ---------- Org link in header ---------- */
.org-link {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* ---------- Settings Page ---------- */
.settings-section {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.settings-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-primary);
    opacity: var(--card-accent-opacity);
    z-index: 2;
    pointer-events: none;
}
.settings-section-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
    background: linear-gradient(to bottom, #f8f9ff, #ffffff);
}
[data-theme="dark"] .settings-section-header,
[data-theme="system"] .settings-section-header { background: none; }
.settings-section-header h2 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 0.125rem;
}
.settings-section-body {
    padding: 1.5rem;
}
.settings-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.settings-actions {
    display: flex;
    justify-content: flex-start;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

/* Radio group for preferences */
.radio-group {
    display: flex;
    gap: 1rem;
    margin-top: 0.25rem;
}
.radio-option {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--color-text);
    cursor: pointer;
}
.radio-option input[type="radio"] {
    width: auto;
    accent-color: var(--color-primary);
}

/* ---------- Notifications ---------- */
.notifications-section {
    margin-bottom: 2rem;
}
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.section-header h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}
.notification-list {
    list-style: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.notification-item {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition-fast);
}
.notification-item:last-child { border-bottom: none; }
.notification-item:hover { background: var(--color-surface-hover); }
.notification-unread {
    position: relative;
    background: rgba(37, 99, 235, 0.07);
    overflow: hidden;
}
.notification-unread::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-primary);
    opacity: 0.5;
}
.notification-unread:hover {
    background: rgba(37, 99, 235, 0.11);
}
.notification-title {
    font-size: var(--font-size-sm);
    font-weight: 500;
}
.notification-title a { color: var(--color-text); }
.notification-title a:hover { color: var(--color-primary); }
.notification-message {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-top: 0.375rem;
    line-height: 1.5;
}
/* Diff highlighting inside notifications */
.notification-message .diff-item {
    margin-top: 0.25rem;
}
.notification-message .diff-content {
    margin-top: 0.125rem;
    padding: 0.375rem 0.5rem;
    background: rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    line-height: 1.6;
}
.notification-message del {
    background: rgba(217, 45, 32, 0.15);
    color: var(--badge-danger-text);
    text-decoration: line-through;
    border-radius: 2px;
    padding: 0 2px;
}
.notification-message ins {
    background: rgba(7, 148, 85, 0.15);
    color: var(--badge-success-text);
    text-decoration: none;
    border-radius: 2px;
    padding: 0 2px;
}
.notification-message .diff-ellipsis {
    color: var(--color-text-faint);
    padding: 0 0.25rem;
}
.notification-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}
.section-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Navbar notification badge */
.navbar-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.3125rem;
    border-radius: var(--radius-full);
    background: var(--color-danger);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    margin-left: 0.25rem;
    line-height: 1;
}

/* Info badge (used for unread count on dashboard) */
.badge-info {
    background: var(--badge-info-bg);
    color: var(--badge-info-text);
}

/* ---------- Utility Classes ---------- */
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 2rem; }
.ml-1 { margin-left: 0.25rem; }

.w-full { width: 100%; }

.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-center { text-align: center; }

.text-muted { color: var(--color-text-muted); }
.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }

.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.inline-form { display: inline; }
.inline-form + .inline-form { margin-left: 0.25rem; }

/* ---------- Modal ---------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 24, 40, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 1rem;
}
.modal-overlay[hidden] { display: none; }
.modal {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 540px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    animation: modal-in 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes modal-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
}
.modal-header h2 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0;
}
.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    border-radius: var(--radius-sm);
    transition: all 0.15s;
}
.modal-close:hover {
    color: var(--color-text);
    background: var(--color-surface-hover);
}
.modal-body {
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    flex: 1;
}
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-border);
}

/* ── Generic data-confirm modal ─────────────────────────────────────── */
.cd-confirm-modal { max-width: 400px; }
.cd-confirm-text { margin: 0; font-size: var(--font-size-md); }

/* ── Delete confirmation modal service list ─────────────────────────── */
.delete-modal-heading { margin: 0 0 0.5rem; font-weight: 600; }
.delete-modal-list { margin: 0 0 0.75rem 0.75rem; border-left: 3px solid var(--color-danger, #D92D20); }
.delete-modal-list-item { padding: 0.35rem 0.75rem; }
.delete-modal-blocked-list { margin: 0 0 0 0.75rem; border-left: 3px solid var(--color-warning, #DC6803); }
.delete-modal-blocked-item { padding: 0.35rem 0.75rem; display: flex; justify-content: space-between; gap: 1rem; }
.delete-modal-blocked-item-name { font-weight: 500; }
.delete-modal-blocked-item-reason { color: var(--color-text-muted); white-space: nowrap; }
.delete-modal-note { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.delete-modal-empty { color: var(--color-text-muted); }

/* Disabled-looking confirm button (blocked single-row delete modal): cannot be
   clicked (pointer-events:none) and reads as disabled to AT (aria-disabled). */
.btn.is-disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* Subscribe service list inside modal */
.subscribe-services-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.subscribe-service-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    gap: 1rem;
}
.subscribe-service-target {
    border-color: var(--color-primary);
    background: var(--color-primary-alpha);
}
.subscribe-service-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}
.subscribe-service-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
}
.subscribe-service-quantity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.subscribe-service-quantity label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}
.quantity-input {
    width: 72px;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 4px);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    text-align: center;
}
.quantity-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-alpha, rgba(59, 130, 246, 0.15));
}
.subscribe-cost-summary {
    padding: 0.75rem 1rem;
    background: var(--color-surface-hover);
    border-radius: var(--radius);
}
@media (max-width: 640px) {
    .modal { max-width: 100%; border-radius: var(--radius-lg, 8px); }
    .subscribe-service-item { flex-direction: column; align-items: stretch; }
    .subscribe-service-quantity { justify-content: flex-end; }
}

/* ---------- Responsive ---------- */

/* Reduce nav link padding at medium widths so items don't overflow */
@media (max-width: 1100px) and (min-width: 961px) {
    .navbar-portal-badge { display: none; }
    .navbar-links { gap: 0; }
    .navbar-links a { padding: 0.375rem 0.4rem; font-size: 0.78rem; }
    .nav-dropdown-toggle { padding: 0.375rem 0.4rem; font-size: 0.78rem; }
    .nav-icon { display: none; }
}

@media (max-width: 960px) {
    .navbar-toggle { display: block; }
    .navbar-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--color-navbar-bg);
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
        box-shadow: var(--shadow-lg);
        padding: 0.5rem 0;
        max-height: calc(100vh - 56px);
        overflow-y: auto;
    }
    .navbar-links.open { display: flex; }
    .navbar-links a {
        padding: 0.625rem 1.5rem;
        border-radius: 0;
        color: var(--color-navbar-text-muted);
    }
    .navbar-links a:hover {
        color: var(--color-navbar-text);
        background: var(--color-navbar-hover);
    }
    .navbar-links .user-avatar {
        margin: 0.25rem 1.5rem;
        width: 32px;
    }
    .navbar-content { position: relative; }
    /* Inline dropdown on mobile */
    .nav-dropdown { position: static; }
    .nav-dropdown-toggle {
        width: 100%;
        justify-content: flex-start;
        padding: 0.625rem 1.5rem;
        border-radius: 0;
        color: var(--color-navbar-text-muted);
    }
    .nav-dropdown-toggle:hover,
    .nav-dropdown-toggle[aria-expanded="true"] {
        color: var(--color-navbar-text);
        background: var(--color-navbar-hover);
    }
    .nav-dropdown-menu {
        position: static;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0;
        background: transparent;
    }
    .nav-dropdown-menu a { padding-left: 2.75rem; color: var(--color-navbar-text-muted); }
    .nav-dropdown-menu a:hover { color: var(--color-navbar-text); background: var(--color-navbar-hover); }
    /* Sub-menu on mobile — same accordion, just recoloured for the dark hamburger panel */
    .nav-sub-toggle { padding: 0.625rem 1.5rem; border-radius: 0; color: var(--color-navbar-text-muted); }
    .nav-sub-toggle:hover, .nav-sub-toggle[aria-expanded="true"] { color: var(--color-navbar-text); background: var(--color-navbar-hover); }
    .nav-sub-menu { margin: 0 0 0 2.75rem; border-left-color: rgba(255, 255, 255, 0.15); }
    .nav-sub-menu a { color: var(--color-navbar-text-muted); }
    .nav-sub-menu a:hover { color: var(--color-navbar-text); background: var(--color-navbar-hover); }
    .nav-sub-group-label { color: var(--color-navbar-text-muted); }
}
/* Dark-mode mobile nav: slate glass instead of indigo */
@media (max-width: 960px) {
    [data-theme="dark"] .navbar-links,
    [data-theme="system"] .navbar-links {
        background: var(--color-navbar-bg);
        border-bottom-color: rgba(255, 255, 255, 0.06);
    }
}
@media (max-width: 640px) {
    .container { padding: 0 1rem; }
    .navbar-content { height: 48px; }
    .page-header h1 { font-size: var(--font-size-2xl); }
    .detail-header h1 { font-size: var(--font-size-2xl); }
    .service-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr; }
    .login-container { margin: 2rem 1rem; padding: 1.5rem; }
    .filters-bar { flex-direction: column; align-items: stretch; }
    .filters-bar input[type="text"] { min-width: auto; }
    .filter-form { flex-direction: column; align-items: stretch; }
    .search-input { min-width: auto; }
    .settings-row { grid-template-columns: 1fr; }
    .toast-container { right: 1rem; left: 1rem; max-width: none; }
}

/* ---------- Announcements ---------- */
.announcement-list { display: flex; flex-direction: column; gap: 1rem; }
.announcement-item {
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--color-primary, #3b82f6);
    background: var(--color-surface-hover, #f1f5f9);
    border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
}
.announcement-item h4 { margin: 0 0 0.25rem; font-size: 0.95rem; }
.announcement-item p { margin: 0.25rem 0 0; }

/* ---------- Getting Started ---------- */
.getting-started-section { margin: 1.5rem 0; }
.getting-started-section .btn { margin-bottom: 0.75rem; }

/* ---------- Responsive Table (Card Pattern) ---------- */
/* At mobile breakpoint, each <tr> becomes a card with data-label pseudo-content */
@media (max-width: 640px) {
    .responsive-table thead { display: none; }
    .responsive-table tbody tr {
        display: block;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        padding: 0.75rem 1rem;
        margin-bottom: 0.75rem;
        box-shadow: var(--shadow-xs);
    }
    .responsive-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.375rem 0;
        border-bottom: 1px solid var(--color-border);
        font-size: var(--font-size-sm);
    }
    .responsive-table tbody td:last-child { border-bottom: none; }
    .responsive-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: var(--font-size-xs);
        color: var(--color-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        flex-shrink: 0;
        margin-right: 0.5rem;
    }
    .responsive-table tbody td[data-label=""]::before { display: none; }
    .responsive-table tfoot { display: block; }
    .responsive-table tfoot tr {
        display: flex;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        background: var(--color-bg);
        border-radius: var(--radius);
    }
    .responsive-table tfoot td {
        display: inline;
        padding: 0;
        border: none;
    }

    /* In card mode, wide-table min-widths must not force horizontal card scroll */
    .responsive-table.min-w-800,
    .responsive-table.min-w-1000,
    .responsive-table.min-w-1200 { min-width: 0; }

    /* Collapsible filter bar */
    .filter-toggle-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.625rem 1rem;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        font-family: var(--font-sans);
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: var(--color-text-muted);
        cursor: pointer;
        margin-bottom: 0.5rem;
        box-shadow: var(--shadow-xs);
    }
    .filter-toggle-btn:hover {
        background: var(--color-surface-hover);
        color: var(--color-text);
    }
    .filter-form.collapsed-mobile { display: none; }

    /* Info list stack on mobile */
    .info-list li {
        flex-direction: column;
        gap: 0.125rem;
    }

    /* Related cards single column */
    .related-cards { grid-template-columns: 1fr; }

    /* Cost table full width */
    .cost-table { max-width: 100%; }

    /* Modal bottom-sheet style */
    .modal-overlay { align-items: flex-end; padding: 0; }
    .modal {
        max-width: 100%;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        max-height: 90vh;
    }
    .modal-header { padding: 1rem; }
    .modal-body { padding: 1rem; }
    .modal-footer { padding: 0.75rem 1rem; }

    /* Responsive utility classes */
    .hidden-mobile { display: none !important; }
}

/* ---------- Bookmark Button ---------- */
.bookmark-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0.25rem;
    color: var(--color-text-faint);
    transition: all var(--transition-fast);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.bookmark-btn:hover {
    color: var(--color-warning);
    transform: scale(1.15);
}
/* Filled star (bookmarked) */
.bookmark-btn.bookmarked { color: var(--color-warning); }
.service-card .bookmark-btn {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 1;
}
.bookmark-btn-lg {
    font-size: 1.5rem;
    padding: 0.25rem 0.375rem;
}
/* Detail header actions row */
.detail-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ---------- Star Rating ---------- */
.star-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.0625rem;
}
.star-rating .star {
    font-size: 1.125rem;
    color: var(--color-text-faint);
    line-height: 1;
}
.star-rating .star.filled { color: var(--color-warning); }
.star-rating-sm .star { font-size: 0.8125rem; }
.star-rating-input {
    display: inline-flex;
    gap: 0.125rem;
    cursor: pointer;
}
.star-rating-input .star {
    font-size: 1.5rem;
    color: var(--color-text-faint);
    cursor: pointer;
    transition: color var(--transition-fast);
    line-height: 1;
}
.star-rating-input .star:hover,
.star-rating-input .star.filled { color: var(--color-warning); }
.rating-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.rating-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}
.rating-count {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-left: 0.25rem;
}
.review-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.review-item {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}
.review-item:last-child { border-bottom: none; }
.review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.review-comment {
    margin: 0.25rem 0;
}
.review-form .form-group { margin-bottom: 0.5rem; }
[data-theme="dark"] .star-rating .star { color: var(--color-text-faint); }
[data-theme="dark"] .star-rating .star.filled { color: var(--color-warning); }
[data-theme="dark"] .star-rating-input .star { color: var(--color-text-faint); }
[data-theme="dark"] .star-rating-input .star:hover,
[data-theme="dark"] .star-rating-input .star.filled { color: var(--color-warning); }

/* ---------- Service Comparison ---------- */
.comparison-table-wrap { overflow-x: auto; margin-top: 1rem; }
.comparison-table { width: 100%; border-collapse: collapse; }
.comparison-table th,
.comparison-table td { padding: 0.625rem 1rem; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.comparison-table thead th { position: sticky; top: 0; background: var(--color-surface); z-index: 2; }
.comparison-label-col { width: 180px; min-width: 140px; }
.comparison-service-col { min-width: 200px; }
.comparison-label { font-weight: 600; font-size: 0.85rem; color: var(--color-text-muted); white-space: nowrap; }
.comparison-service-sub { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 0.25rem; font-weight: normal; }
.comparison-table tbody tr:nth-child(even) { background: var(--color-bg-subtle, rgba(0,0,0,0.02)); }
[data-theme="dark"] .comparison-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.03); }

/* Compare checkbox on cards */
.compare-checkbox-wrap {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    cursor: pointer;
    user-select: none;
    line-height: 1;
    margin-top: auto;
}
.compare-checkbox-wrap input {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

/* Floating compare button */
.compare-float {
    display: none;
    position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 1000;
    align-items: center; gap: 0.5rem;
    background: var(--color-primary-strong, #2563eb); color: #fff;
    padding: 0.75rem 1.25rem; border-radius: var(--radius-lg, 12px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25); font-size: 0.9rem; font-weight: 600;
}
.compare-float a { color: #fff; text-decoration: none; }
.compare-float-link:hover { text-decoration: underline; }
.compare-float-clear { background: none; border: none; color: rgba(255,255,255,0.8); cursor: pointer; font-size: 1rem; padding: 0 0.25rem; }
.compare-float-clear:hover { color: #fff; }

/* ---------- Shopping Cart ---------- */
.service-card-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border, #e5e7eb);
}
.service-card-actions > a,
.service-card-actions > form { flex: 1; min-width: 0; }
.service-card-actions > form > button { width: 100%; }
.cart-summary {
    margin-top: 1rem; padding: 0.75rem 1rem;
    background: var(--color-surface-alt, #f9fafb);
    border-radius: var(--radius-md, 8px);
    font-size: var(--font-size-sm);
}
.cart-total { font-size: var(--font-size-base); }
.btn-in-cart {
    background: var(--color-success-bg, #dcfce7) !important;
    color: var(--color-success, #16a34a) !important;
    border-color: var(--color-success, #16a34a) !important;
    cursor: default;
}
.btn-loading { opacity: 0.6; cursor: wait; }

/* ---------- Bundle Suggestions ---------- */
.suggestion-list { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.suggestion-item {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    padding: 0.4rem 0; border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.suggestion-item:last-child { border-bottom: none; }
.suggestion-name { font-size: var(--font-size-sm); font-weight: 500; flex: 1; min-width: 100px; }
.suggestion-add { flex-shrink: 0; }

/* ---------- Compliance Badge ---------- */
.compliance-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.375rem;
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
}
.compliance-badge-lg {
    min-width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
    border-radius: var(--radius);
}
.compliance-grade-A { background: var(--badge-success-bg); color: var(--badge-success-text); }
.compliance-grade-B { background: var(--badge-info-bg);    color: var(--badge-info-text);    }
.compliance-grade-C { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.compliance-grade-D { background: var(--badge-orange-bg);  color: var(--badge-orange-text);  }
.compliance-grade-F { background: var(--badge-danger-bg);  color: var(--badge-danger-text);  }

/* ---------- Compliance Check List (detail sidebar) ---------- */
.compliance-detail-block {
    margin-top: 0.625rem;
}
.compliance-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.compliance-score-text {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
}
.compliance-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.compliance-check-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    font-size: var(--font-size-sm);
    border-bottom: 1px solid var(--color-border);
}
.compliance-check-item:last-child {
    border-bottom: none;
}
.compliance-check-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}
.compliance-check-na {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.75rem;
}
.compliance-check-pass .compliance-check-icon,
.compliance-check-pass.compliance-check-icon {
    background: var(--badge-success-bg);
    color: var(--badge-success-text);
}
.compliance-check-fail .compliance-check-icon,
.compliance-check-fail.compliance-check-icon {
    background: var(--badge-danger-bg);
    color: var(--badge-danger-text);
}
[data-theme="dark"] .compliance-check-pass .compliance-check-icon,
[data-theme="dark"] .compliance-check-pass.compliance-check-icon {
    background: var(--badge-success-bg);
    color: var(--badge-success-text);
}
[data-theme="dark"] .compliance-check-fail .compliance-check-icon,
[data-theme="dark"] .compliance-check-fail.compliance-check-icon {
    background: var(--badge-danger-bg);
    color: var(--badge-danger-text);
}

/* ---------- Compliance Dashboard ---------- */
.compliance-dashboard {
    margin-bottom: 2rem;
}
.compliance-dashboard .subscription-table th,
.compliance-dashboard .subscription-table td {
    text-align: center;
}
.compliance-dashboard .subscription-table th:first-child,
.compliance-dashboard .subscription-table td:first-child {
    text-align: left;
}
.compliance-filter-active {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 0.625rem 1rem;
    background: var(--color-primary-alpha);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius);
}
.compliance-stat-A::before { background: var(--color-success); opacity: 1; }
.compliance-stat-B::before { background: var(--color-primary); opacity: 1; }
.compliance-stat-C::before { background: var(--color-warning); opacity: 1; }
.compliance-stat-D::before { background: var(--badge-orange-text); opacity: 1; }
.compliance-stat-F::before { background: var(--color-danger); opacity: 1; }

/* ============================================
   Status Page, Incidents, Maintenance Calendar
   ============================================ */

/* ---------- Severity Badges ---------- */
.badge-severity-minor {
    background: var(--badge-warning-bg);
    color: var(--badge-warning-text);
}
.badge-severity-major {
    background: var(--badge-orange-bg);
    color: var(--badge-orange-text);
}
.badge-severity-critical {
    background: var(--badge-danger-bg);
    color: var(--badge-danger-text);
}

/* ---------- Incident Status Badges ---------- */
.badge-incident-investigating { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.badge-incident-identified    { background: var(--badge-orange-bg);  color: var(--badge-orange-text);  }
.badge-incident-monitoring    { background: var(--badge-info-bg);    color: var(--badge-info-text);    }
.badge-incident-resolved      { background: var(--badge-success-bg); color: var(--badge-success-text); }
.badge-incident-scheduled     { background: var(--badge-info-bg);    color: var(--badge-info-text);    }
.badge-incident-in_progress   { background: var(--badge-orange-bg);  color: var(--badge-orange-text);  }
.badge-incident-completed     { background: var(--badge-success-bg); color: var(--badge-success-text); }

/* ---------- Status Indicators ---------- */
.status-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-operational { background: var(--status-operational); }
.status-degraded { background: var(--status-degraded); }
.status-partial_outage { background: var(--status-partial-outage); }
.status-major_outage { background: var(--status-major-outage); }
.status-maintenance { background: var(--status-maintenance); }

/* ---------- Status Banner ---------- */
.status-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 2rem;
    font-weight: 600;
    font-size: var(--font-size-lg);
}
.status-banner-operational {
    background: var(--badge-success-bg);
    border: 1px solid var(--badge-success-bg);
    color: var(--badge-success-text);
}
.status-banner-degraded {
    background: var(--badge-warning-bg);
    border: 1px solid var(--badge-warning-bg);
    color: var(--badge-warning-text);
}
.status-banner-partial_outage {
    background: var(--badge-orange-bg);
    border: 1px solid var(--badge-orange-bg);
    color: var(--badge-orange-text);
}
.status-banner-major_outage {
    background: var(--badge-danger-bg);
    border: 1px solid var(--badge-danger-bg);
    color: var(--badge-danger-text);
}
.status-banner-maintenance {
    background: var(--badge-info-bg);
    border: 1px solid var(--badge-info-bg);
    color: var(--badge-info-text);
}

/* ---------- Status Section ---------- */
.status-section {
    margin-bottom: 2rem;
}
.status-section h2 {
    margin-bottom: 0.75rem;
}

/* ---------- Status Grid (service list on status page) ---------- */
.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.5rem;
}
.status-grid-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0.875rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.status-grid-item a {
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--font-size-sm);
}
.status-grid-item a:hover {
    color: var(--color-primary);
}

/* ---------- Incident Card ---------- */
.incident-card {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    overflow: hidden;
}
.incident-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-primary);
    opacity: 0.18;
    transition: opacity var(--transition-fast);
}
.incident-card-resolved {
    opacity: 0.7;
}
.incident-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.incident-card-title {
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
}
.incident-card-title:hover {
    color: var(--color-primary);
}
.incident-card-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}
.incident-card-meta a {
    color: var(--color-text-secondary);
}
.incident-card-desc {
    margin-top: 0.5rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* ---------- Maintenance Card ---------- */
.maintenance-card {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    overflow: hidden;
}
.maintenance-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-primary);
    opacity: 0.18;
    transition: opacity var(--transition-fast);
}
.maintenance-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.maintenance-card-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}
.maintenance-card-meta a {
    color: var(--color-text-secondary);
}

/* ---------- Incident Timeline ---------- */
.incident-timeline {
    border-left: 2px solid var(--color-border);
    margin-left: 0.5rem;
    padding-left: 1.25rem;
}
.timeline-entry {
    position: relative;
    padding-bottom: 1.25rem;
}
.timeline-entry::before {
    content: "";
    position: absolute;
    left: -1.55rem;
    top: 0.35rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-border);
    border: 2px solid var(--color-surface);
}
.timeline-entry-start::before {
    background: var(--color-primary);
}
.timeline-entry-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}
.timeline-entry-body {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}
.timeline-entry-body p {
    margin: 0.25rem 0;
}

/* ---------- Incident Update Form ---------- */
.incident-update-form {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem;
}

/* ---------- Operational Status Block (sidebar) ---------- */
.operational-status-block {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
}

/* ---------- Calendar ---------- */
.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.calendar-nav h2 {
    min-width: 200px;
    text-align: center;
    margin: 0;
}

.calendar-grid {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}
.calendar-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.calendar-header-cell {
    padding: 0.5rem;
    text-align: center;
    font-weight: 600;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
}
.calendar-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--color-border);
}
.calendar-week:last-child {
    border-bottom: none;
}
.calendar-day {
    min-height: 80px;
    max-height: 110px;
    padding: 0.375rem;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    overflow: hidden;
}
.calendar-day:last-child {
    border-right: none;
}
.calendar-day-empty {
    background: var(--color-bg);
}
.calendar-day-number {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
}
.calendar-event {
    font-size: 0.6875rem;
    padding: 0.125rem 0.25rem;
    border-radius: 3px;
    margin-bottom: 0.125rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: var(--badge-info-bg);
    color: var(--badge-info-text);
}
.calendar-event-in_progress {
    background: var(--badge-orange-bg);
    color: var(--badge-orange-text);
}
.calendar-event-completed {
    background: var(--badge-success-bg);
    color: var(--badge-success-text);
}
.calendar-event-time {
    font-weight: 600;
}
.calendar-event-title {
    margin-left: 0.125rem;
}

/* ---------- Page Header Row ---------- */
.page-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ---------- Form Card ---------- */
.form-card {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    width: 100%;
    max-width: 900px;
    overflow: hidden;
}
/* Card top-accent opacity — single theme-aware source shared by .form-card and
   .settings-section so the two accent systems can never drift again. Sticks with
   the theme-aware values (brighter in dark). The system-theme override is gated
   on prefers-color-scheme (fixes the old bug where data-theme="system" used the
   dark value in a light OS). */
:root { --card-accent-opacity: 0.35; }
[data-theme="dark"] { --card-accent-opacity: 0.55; }
@media (prefers-color-scheme: dark) {
    [data-theme="system"] { --card-accent-opacity: 0.55; }
}

.form-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-primary);
    opacity: var(--card-accent-opacity);
}
.form-card--full {
    max-width: none;
}
.form-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
}
/* ── Chat connector form: platform picker cards ── */
.chat-platform-cards {
    display: flex;
    gap: 1rem;
}
.chat-platform-card {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1.25rem 1rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    text-align: center;
    background: var(--color-bg);
    overflow: hidden;
}
.chat-platform-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.chat-platform-card:hover {
    border-color: var(--color-border-hover);
    box-shadow: var(--shadow-sm);
}
.chat-platform-card.selected,
.chat-platform-card:has(input:checked) {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 37, 99, 235), 0.15);
    background: var(--color-bg-subtle);
}
.chat-platform-card svg { color: var(--color-text-secondary); }
.chat-platform-card.selected svg,
.chat-platform-card:has(input:checked) svg { color: var(--color-primary); }
.chat-platform-card-name {
    font-weight: 600;
    font-size: var(--font-size-base);
    color: var(--color-text);
}
.chat-platform-card-desc {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
@media (max-width: 900px) {
    .chat-platform-cards { flex-direction: column; }
}
/* ── Integration cards: shared component for all provider/connector UIs ── */
.ig-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    max-width: 900px;
}
.ig-select-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 1.5rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    text-decoration: none;
    color: inherit;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ig-select-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 12px rgba(59, 130, 246, .12);
}
.ig-select-card.selected,
.ig-select-card:has(input:checked) {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 37, 99, 235), 0.15);
    background: var(--color-bg-subtle);
}
.ig-select-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.ig-select-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    background: var(--color-bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
    color: var(--color-text-secondary);
}
.ig-select-card:hover .ig-select-icon,
.ig-select-card.selected .ig-select-icon,
.ig-select-card:has(input:checked) .ig-select-icon {
    color: var(--color-primary);
}
.ig-select-name {
    font-weight: 600;
    font-size: var(--font-size-base);
}
.ig-select-desc {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: 1.5;
}
/* Connector / provider gallery: ig-select-cards inside a form-card */
.ig-gallery {
    max-width: none;
}
.ig-gallery-title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}
/* Gallery cards are smaller than full select-cards: compact padding, left-aligned */
.ig-gallery .ig-select-card {
    padding: 1.25rem 1rem;
    cursor: default;
}
.ig-gallery .ig-select-card:hover {
    border-color: var(--color-border);
    box-shadow: none;
}
/* Clickable gallery cards (link to detail) */
a.ig-select-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 12px rgba(59, 130, 246, .12);
}
@media (max-width: 640px) {
    .ig-card-grid { grid-template-columns: 1fr; }
}
/* Card title used in multi-card edit forms */
.edit-card-title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}
/* Form section divider title (used in single-column forms like IdP) */
.form-section-title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin: 1.5rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}
.form-section-title:first-child { margin-top: 0; }
/* Inline help / error text */
.help-text {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: 0.25rem;
    line-height: 1.4;
}
.error-text {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-danger, #ef4444);
    margin-top: 0.25rem;
}
/* Signup/agreement checkbox rows */
.form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin-bottom: 0.75rem;
}
.form-check input[type="checkbox"] {
    margin-top: 0.2em;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
}
.form-check label {
    margin: 0;
    cursor: pointer;
    line-height: 1.5;
}

/* Inline checkbox form group */
.form-group-check > label {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 0.25rem !important;
}
.form-group-check > label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--color-primary);
}

/* Styled checkbox list for multi-select service linking */
.services-checklist {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
}
.services-checklist ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.services-checklist ul li {
    border-bottom: 1px solid var(--color-border);
}
.services-checklist ul li:last-child {
    border-bottom: none;
}
.services-checklist ul li label {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.6rem 0.875rem;
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    transition: background 0.15s;
    margin: 0;
}
.services-checklist ul li label:hover {
    background: var(--color-surface-hover);
}
.services-checklist ul li input[type="checkbox"] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
}

/* Status banner dark mode inherits from badge CSS vars (dark overrides in :root) */
[data-theme="dark"] .status-grid-item {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .incident-card,
[data-theme="dark"] .maintenance-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .incident-update-form {
    background: var(--color-surface);
    border-color: var(--color-border);
}
/* Calendar event dark mode inherits from badge CSS vars */
[data-theme="dark"] .calendar-day-empty {
    background: var(--color-bg);
}
[data-theme="dark"] .timeline-entry::before {
    border-color: var(--color-surface);
}

/* Desktop-only: hide mobile-only elements */
@media (min-width: 641px) {
    .filter-toggle-btn { display: none; }
    .visible-mobile { display: none !important; }
}

/* ============================================
   UI Enrichment — Icons, Dashboard, Tabs, etc.
   ============================================ */

/* ---------- Nav Icons ---------- */
.nav-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke-width: 1.75;
}

.nav-badge-link { position: relative; }
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    /* Asymmetric 1px bottom pad optically centres the count: digits have no
       descenders, so flex-centring the line box leaves the glyph ~1px low.
       Keep the extra pixel on the bottom — do not "tidy" this to 0 5px. */
    padding: 0 5px 1px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--color-danger, #ef4444);
    border-radius: 9px;
    margin-left: 4px;
    vertical-align: 1px;
}
.nav-badge-warning {
    background: var(--color-warning, #f59e0b);
    color: #000;
}

/* ---------- Stats Strip (service list) ---------- */
.stats-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.stats-strip-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow-xs);
    text-decoration: none;
    color: inherit;
    transition: all var(--transition-fast);
    overflow: hidden;
}
.stats-strip-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-primary);
    opacity: var(--card-accent-opacity);
    transition: opacity var(--transition-fast);
}
/* These cards are always <a> links — brighten the accent on hover as click
   affordance (rest state still uses the shared token). */
.stats-strip-card:hover::before { opacity: 1; }
.stats-strip-card:hover {
    border-color: var(--color-border-hover);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
    color: inherit;
}
.stats-strip-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    flex-shrink: 0;
    isolation: isolate;
}
.stats-strip-icon svg {
    width: 20px;
    height: 20px;
}
.stats-strip-icon-blue { background: var(--badge-info-bg); color: var(--badge-info-text); }
.stats-strip-icon-green { background: var(--badge-success-bg); color: var(--badge-success-text); }
.stats-strip-icon-amber { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.stats-strip-icon-red { background: var(--badge-danger-bg); color: var(--badge-danger-text); }
.stats-strip-icon-purple { background: var(--badge-vendor-bg); color: var(--badge-vendor-text); }
.stats-strip-icon-teal { background: var(--badge-partner-bg); color: var(--badge-partner-text); }
.stats-strip-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text);
}
.stats-strip-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: 500;
    line-height: 1.3;
}
.stats-strip-delta {
    font-size: 0.7rem;
    color: var(--color-text-faint);
    margin-top: 3px;
    line-height: 1;
}
.stats-strip-delta.delta-up {
    color: var(--color-success);
    font-weight: 500;
}
.stats-strip-delta.delta-clear {
    color: var(--color-success);
    font-style: italic;
}

/* Age urgency badges — for pending approval rows */
.age-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
}
.age-badge-ok     { background: var(--badge-success-bg); color: var(--badge-success-text); }
.age-badge-warn   { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.age-badge-urgent { background: var(--badge-danger-bg);  color: var(--badge-danger-text);  }

/* ---------- Usage Strip ---------- */
.usage-strip {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    align-items: center;
    font-size: var(--font-size-sm);
}
.usage-strip-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.usage-strip-label {
    color: var(--color-text-muted);
    font-weight: 500;
}
.usage-strip-value {
    font-weight: 600;
    color: var(--color-text);
}
.usage-strip-value.usage-exceeded {
    color: var(--color-danger, #dc2626);
}

/* ---------- Category Tiles ---------- */
.category-tiles {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 0.25rem;
}
.category-tile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    white-space: nowrap;
    text-decoration: none;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}
.category-tile:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-alpha);
    box-shadow: var(--shadow-sm);
}
.category-tile.active {
    background: var(--color-primary-strong);
    border-color: var(--color-primary);
    color: #fff;
}
.category-tile-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.category-tile.active .category-tile-count { color: rgba(255, 255, 255, 0.7); }

/* ---------- Sidebar Filter Layout ---------- */
.catalog-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 960px) {
    .catalog-layout { grid-template-columns: 1fr; }
    .filter-sidebar { display: none; }
    .filter-sidebar.sidebar-open { display: block; }
}
/* Keep the grid layout in table view — sidebar stays as sticky panel on the left */
.filter-favorites-wrap { margin-top: 1rem; }
/* Table scrolls horizontally if columns exceed available space */
.catalog-layout.view-table .service-table-wrapper,
.catalog-content.view-table .service-table-wrapper {
    overflow-x: auto;
}

/* ── Horizontal filter bar (service list) ──────────────────────── */
.filter-bar {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    position: relative;
    transition: padding var(--transition-fast);
}
.filter-bar-left {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    flex-shrink: 0;
    min-width: 160px;
}
.filter-bar-label-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.filter-bar-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.filter-bar-search,
.filter-bar-select {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast);
}
.filter-bar-search:focus,
.filter-bar-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-alpha);
}
.filter-bar-search { width: 100%; }
.filter-bar-select { width: auto; min-width: 200px; max-width: 320px; font-size: var(--font-size-xs); padding: 0.3rem 0.5rem; }
.filter-bar-fav { padding: 0.2rem 0.6rem; gap: 0.3rem; justify-content: center; }

/* Presets dropdown inside filter-bar-left — stretch to match siblings */
.filter-bar-left > .dropdown { display: flex; flex-direction: column; }
.filter-bar-left > .dropdown > .filter-bar-fav { width: 100%; }
.filter-bar-divider {
    width: 1px;
    background: var(--color-border);
    flex-shrink: 0;
    align-self: stretch;
    min-height: 40px;
}
.filter-bar-groups {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
}
.filter-bar-group {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}
.filter-bar-group-label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    margin-right: 0.125rem;
}
.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: var(--font-size-xs);
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    background: var(--color-bg);
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    user-select: none;
}
.filter-pill input { display: none; }
.filter-bar-input {
    height: 28px;
    padding: 0 0.5rem;
    font-size: var(--font-size-xs);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    min-width: 200px;
    color-scheme: light dark;
}
.filter-bar-input::placeholder { color: var(--color-text-muted); }
.filter-bar-date {
    height: 28px;
    padding: 0 0.4rem;
    font-size: var(--font-size-xs);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    color-scheme: light dark;
}
.filter-bar-date-sep { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.filter-pill:has(input:checked) {
    background: var(--color-primary-strong);
    border-color: var(--color-primary);
    color: #fff;
}
.filter-pill:hover:not(:has(input:checked)) {
    border-color: var(--color-primary);
}
.filter-pill-dot-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.filter-pill-dot-wrap > span:first-child {
    margin-top: 1px;
}
@media (max-width: 960px) {
    .filter-bar { flex-direction: column; align-items: flex-start; }
    /* Stack the collapsible inner vertically; otherwise the divider (now full
       width) eats the flex row and squeezes .filter-bar-groups to width 0,
       leaving an empty grey block where the filters should be. */
    .filter-bar-collapsible-inner { flex-direction: column; align-items: stretch; }
    .filter-bar-divider { width: 100%; height: 1px; min-height: 0; }
    .filter-bar-groups { width: 100%; }
}

/* ── Collapsible filter bar ──────────────────────────────────────── */
.filter-bar.filter-bar-collapsed {
    padding-bottom: 0;
}
.filter-bar-toggle {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 1.125rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0;
    transition: color var(--transition-fast), background var(--transition-fast);
    z-index: 1;
}
.filter-bar-toggle:hover {
    color: var(--color-primary);
    background: var(--color-bg);
}
.filter-bar-toggle svg {
    transition: transform var(--transition-fast);
}

/* Collapsible wrapper — CSS grid row transition for smooth height */
.filter-bar-collapsible {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.3s ease;
    flex: 1;
    min-width: 0;
}
.filter-bar-collapsible-inner {
    overflow: hidden;
    min-height: 0;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    opacity: 1;
    transition: opacity 0.35s ease 0.05s;
}

/* Collapsed state */
.filter-bar.filter-bar-collapsed .filter-bar-collapsible {
    grid-template-rows: 0fr;
}
.filter-bar.filter-bar-collapsed .filter-bar-collapsible-inner {
    opacity: 0;
    transition: opacity 0s;
}
.filter-bar.filter-bar-collapsed .filter-bar-left {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}
.filter-bar.filter-bar-collapsed .filter-bar-label-row {
    margin-right: 0;
    padding: 0.5rem 0;
}
.filter-bar.filter-bar-collapsed .filter-bar-search {
    width: 100%;
    margin: 0;
    align-self: center;
}
.filter-bar.filter-bar-collapsed .filter-bar-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.filter-bar.filter-bar-collapsed .filter-bar-toggle svg {
    transform: rotate(180deg);
}
@media (max-width: 960px) {
    .filter-bar.filter-bar-collapsed .filter-bar-left {
        grid-template-columns: 1fr;
    }
    .filter-bar.filter-bar-collapsed .filter-bar-search {
        width: 100%;
    }
}

/* ── Semantic filter pill colours ─────────────────────────────────── */
/* Status pill colours */
.filter-pill-status-draft       { border-color: var(--color-text-muted); }
.filter-pill-status-active      { border-color: var(--badge-success-text); }
.filter-pill-status-deprecated  { border-color: var(--badge-warning-text); }
.filter-pill-status-retired     { border-color: var(--color-text-faint); }
.filter-pill-status-draft:has(input:checked)      { background: var(--color-text-muted);    border-color: var(--color-text-muted);    color: #fff; }
.filter-pill-status-active:has(input:checked)      { background: var(--badge-success-text);  border-color: var(--badge-success-text);  color: #fff; }
.filter-pill-status-deprecated:has(input:checked)  { background: var(--badge-warning-text);  border-color: var(--badge-warning-text);  color: #fff; }
.filter-pill-status-retired:has(input:checked)     { background: var(--color-text-faint);    border-color: var(--color-text-faint);    color: #fff; }

/* Classification pill colours */
.filter-pill-class-public       { border-color: var(--badge-success-text); }
.filter-pill-class-internal     { border-color: var(--badge-warning-text); }
.filter-pill-class-confidential { border-color: var(--badge-danger-text); }
.filter-pill-class-restricted   { border-color: var(--color-text-muted); }
.filter-pill-class-public:has(input:checked)       { background: var(--badge-success-text);  border-color: var(--badge-success-text);  color: #fff; }
.filter-pill-class-internal:has(input:checked)     { background: var(--badge-warning-text);  border-color: var(--badge-warning-text);  color: #fff; }
.filter-pill-class-confidential:has(input:checked) { background: var(--badge-danger-text);   border-color: var(--badge-danger-text);   color: #fff; }
.filter-pill-class-restricted:has(input:checked)   { background: var(--color-text-muted);    border-color: var(--color-text-muted);    color: #fff; }

/* Criticality pill colours */
.filter-pill-crit-1 { border-color: var(--badge-success-text); }
.filter-pill-crit-2 { border-color: var(--badge-warning-text); }
.filter-pill-crit-3 { border-color: var(--badge-orange-text); }
.filter-pill-crit-4 { border-color: var(--badge-danger-text); }
.filter-pill-crit-1:has(input:checked) { background: var(--badge-success-text); border-color: var(--badge-success-text); color: #fff; }
.filter-pill-crit-2:has(input:checked) { background: var(--badge-warning-text); border-color: var(--badge-warning-text); color: #fff; }
.filter-pill-crit-3:has(input:checked) { background: var(--badge-orange-text);  border-color: var(--badge-orange-text);  color: #fff; }
.filter-pill-crit-4:has(input:checked) { background: var(--badge-danger-text);  border-color: var(--badge-danger-text);  color: #fff; }

/* STATUS, CLASSIF., and CATEGORY pill colours are all injected via the
   tag_color_styles context processor into a nonce'd <style> block in base.html.
   This guarantees CSP compliance — inline style="" attributes cannot carry nonces,
   and the context processor approach is the same pattern used for tag colours. */

/* Category — neutral fallback (per-pk colours from context processor override this) */
.filter-pill-cat { border-color: var(--color-border-hover); }

.filter-sidebar {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-xs);
    position: sticky;
    top: 72px;
}
[data-theme="dark"] .filter-sidebar,
[data-theme="system"] .filter-sidebar { background: var(--color-bg-subtle); }
.filter-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.filter-sidebar-header h3 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin: 0;
}
.filter-group {
    margin-bottom: 1.25rem;
}
.filter-group:last-child { margin-bottom: 0; }

/* Tags: flow as wrapping inline chips instead of a tall vertical list */
.filter-tag-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.125rem;
    min-width: 0;     /* prevent overflow out of sidebar */
    overflow: hidden; /* hard stop — chips never bleed past the panel edge */
}
.filter-tag-chip-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    position: relative;
}
.filter-tag-chip-label input[type="checkbox"],
.filter-tag-chip-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.filter-tag-chip-label .tag {
    padding-top: 0.25rem;
    padding-bottom: 0.35rem;
    transition: outline 0.1s;
}
.filter-tag-chip-label.is-active .tag,
.filter-tag-chip-label input[type="checkbox"]:checked + .tag,
.filter-tag-chip-label input[type="radio"]:checked + .tag {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

/* Status: 2-column grid (short labels fit); Classification: single column (labels too long) */
.filter-group--2col .filter-checkbox-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.filter-group-title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.filter-group-title svg { width: 14px; height: 14px; }
.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
}
.filter-checkbox input[type="checkbox"] {
    accent-color: var(--color-primary);
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.filter-checkbox-count {
    margin-left: auto;
    font-size: var(--font-size-xs);
    color: var(--color-text-faint);
    font-variant-numeric: tabular-nums;
}
.filter-search {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background: var(--color-surface);
    margin-bottom: 1rem;
}
.filter-search:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-alpha);
}

/* Active filter chips */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 1rem;
}
.active-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: var(--color-primary-alpha);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-primary);
}
.active-filter-chip a {
    color: var(--color-primary);
    font-weight: 700;
    line-height: 1;
}

/* ---------- Service Card Enrichment ---------- */
.service-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    position: relative;
    padding-right: 2rem;
    margin-bottom: 0.5rem;
}
.service-card-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.service-card-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
}
.service-card-meta-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--font-size-xs);
    color: var(--color-text-faint);
    margin-top: 0.5rem;
}
.service-card-meta-row svg {
    width: 12px;
    height: 12px;
    vertical-align: -1px;
    margin-right: 2px;
}
.service-card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* ---------- At-a-Glance Strip ---------- */
.at-a-glance {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding: 0.875rem 1.25rem;
    background: linear-gradient(135deg, var(--color-bg-subtle) 0%, var(--color-surface) 60%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-xs);
}
[data-theme="dark"] .at-a-glance,
[data-theme="system"] .at-a-glance { background: var(--color-surface); border-color: var(--color-border); }
.at-a-glance-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
}
.at-a-glance-item svg {
    width: 15px;
    height: 15px;
    color: var(--color-text-faint);
    flex-shrink: 0;
}
.at-a-glance-item strong {
    font-weight: 600;
    color: var(--color-text);
}
.at-a-glance-separator {
    color: var(--color-border);
    user-select: none;
}

/* ---------- Detail Tabs ---------- */
.detail-tabs {
    display: flex;
    gap: 0;
    /* Baseline is an inset shadow, not a border, so tabs can draw their active
       underline flush on it without the old margin-bottom:-2px overlap. That
       overlap made this a 2px-overflowing box, and overflow-x:auto forces
       overflow-y to auto — which surfaced as a phantom vertical scrollbar. */
    box-shadow: inset 0 -2px 0 0 var(--color-border);
    margin-bottom: 1.5rem;
    overflow-x: auto;   /* horizontal tab scroll on narrow screens */
}
.detail-tab {
    padding: 0.75rem 1.25rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    background: none;
    border: none;
    font-family: var(--font-sans);
}
.detail-tab:hover {
    color: var(--color-text);
}
.detail-tab.active {
    color: var(--color-primary);
    box-shadow: inset 0 -2px 0 0 var(--color-primary);
    font-weight: 600;
}
.detail-tab svg {
    width: 16px;
    height: 16px;
}
.detail-tab-panel {
    display: none;
}
.detail-tab-panel.active {
    display: block;
}

/* ---- Dashboard Hero ------------------------------------------------ */
.dash-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: color-mix(in srgb, var(--color-navbar-bg) 10%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-navbar-bg) 20%, var(--color-border));
    border-radius: var(--radius-lg);
    padding: 1.5rem 2.25rem;
    margin: 2rem 0 1.5rem;
}
.dash-hero-content { min-width: 0; }
.dash-hero-greeting {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}
.dash-hero-subline {
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
    margin: 0;
}
.dash-hero-subline a {
    color: var(--color-primary);
    font-weight: 500;
}
[data-theme="dark"] .dash-hero {
    background: color-mix(in srgb, var(--color-navbar-bg) 20%, var(--color-bg-subtle));
    border-color: color-mix(in srgb, var(--color-navbar-bg) 30%, var(--color-border));
}
@media (prefers-color-scheme: dark) {
    [data-theme="system"] .dash-hero {
        background: color-mix(in srgb, var(--color-navbar-bg) 20%, var(--color-bg-subtle));
        border-color: color-mix(in srgb, var(--color-navbar-bg) 30%, var(--color-border));
    }
}
@media (max-width: 640px) {
    .dash-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.25rem;
    }
    .dash-hero-stats { gap: 1.25rem; }
}
/* ---- End Dashboard Hero -------------------------------------------- */

/* ---------- Staff Dashboard ---------- */
.dashboard-greeting {
    margin: 2rem 0 0.25rem;
}
.dashboard-greeting h1 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.dashboard-greeting p {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 1.5rem;
    margin-bottom: 2.5rem;
}
@media (min-width: 1400px) {
    .dashboard-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 768px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    /* On the 1-col mobile grid, a `1 / 3` span (.grid-col-span-2) forces a
       phantom 2nd implicit column and drops alternating widgets into a 2px
       track. Span the full single column instead. (FBL#21) */
    .dashboard-grid > .grid-col-span-2 { grid-column: 1 / -1; }
}
.dashboard-card {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.dashboard-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-primary);
    opacity: 0.18;
    z-index: 1;
}
.dashboard-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    background: linear-gradient(to bottom, #f8f9ff, #ffffff);
}
[data-theme="dark"] .dashboard-card-header,
[data-theme="system"] .dashboard-card-header { background: none; }
.dashboard-card-header h2 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.dashboard-card-header h2 svg {
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
}
.dashboard-card-body {
    padding: 1rem 1.25rem;
}
.dashboard-list {
    list-style: none;
}
.dashboard-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
}
.dashboard-list-item:last-child { border-bottom: none; }
.dashboard-list-item a { color: var(--color-text); font-weight: 500; }
.dashboard-list-item a:hover { color: var(--color-primary); }
.dashboard-list-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-faint);
    white-space: nowrap;
}
.dashboard-empty {
    padding: 1.5rem 0;
    text-align: center;
    color: var(--color-text-faint);
    font-size: var(--font-size-sm);
}
.dashboard-empty-positive {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.25rem 0;
    color: var(--color-success);
    font-size: var(--font-size-sm);
    font-weight: 500;
}
.activity-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.activity-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
}
.activity-item:last-child { border-bottom: none; }
.activity-badge {
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.45rem;
    border-radius: 3px;
    width: 4.5rem;
    text-align: center;
}
.activity-badge--created { background: var(--badge-success-bg); color: var(--badge-success-text); }
.activity-badge--updated { background: var(--badge-info-bg);    color: var(--badge-info-text);    }
.activity-badge--deleted { background: var(--badge-danger-bg);  color: var(--badge-danger-text);  }
.activity-body {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    flex-wrap: wrap;
}
.activity-object {
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
}
.activity-repr {
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 12rem;
}
.activity-actor {
    font-size: var(--font-size-xs);
    color: var(--color-text-faint);
    white-space: nowrap;
}
.activity-actor::before { content: "· "; }
.activity-time {
    font-size: var(--font-size-xs);
    color: var(--color-text-faint);
    white-space: nowrap;
    flex-shrink: 0;
}
.dashboard-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
    margin-bottom: 2.5rem;
}
.dashboard-quick-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: all var(--transition-fast);
}
.dashboard-quick-link:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-alpha);
}
.dashboard-quick-link svg {
    width: 16px;
    height: 16px;
}

/* ── Lifecycle Timeline ─────────────────────────────────────────── */

.lifecycle-timeline {
    position: relative;
    padding-left: 2rem;
    margin: 1rem 0;
}
.lifecycle-timeline::before {
    content: "";
    position: absolute;
    left: 0.6rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-border);
}
.lifecycle-entry {
    position: relative;
    padding: 0.75rem 0;
}
.lifecycle-dot {
    position: absolute;
    left: -1.75rem;
    top: 1rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--color-surface);
    z-index: 1;
}
.lifecycle-dot-planning    { background: var(--badge-neutral-bg);  }
.lifecycle-dot-development { background: var(--badge-info-bg);     }
.lifecycle-dot-beta        { background: var(--badge-warning-bg);  }
.lifecycle-dot-ga          { background: var(--badge-success-bg);  }
.lifecycle-dot-sunset      { background: var(--badge-orange-bg);   }
.lifecycle-dot-migration   { background: var(--badge-vendor-bg);   }
.lifecycle-dot-retired     { background: var(--badge-neutral-bg);  }

.lifecycle-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
}
.lifecycle-planning    { background: var(--badge-neutral-bg);  color: var(--badge-neutral-text);  }
.lifecycle-development { background: var(--badge-info-bg);     color: var(--badge-info-text);     }
.lifecycle-beta        { background: var(--badge-warning-bg);  color: var(--badge-warning-text);  }
.lifecycle-ga          { background: var(--badge-success-bg);  color: var(--badge-success-text);  }
.lifecycle-sunset      { background: var(--badge-orange-bg);   color: var(--badge-orange-text);   }
.lifecycle-migration   { background: var(--badge-vendor-bg);   color: var(--badge-vendor-text);   }
.lifecycle-retired     { background: var(--badge-neutral-bg);  color: var(--badge-neutral-text);  }
/* Component lifecycle phases (ComponentLifecyclePhase.Phase): adopted / deprecated /
   retired. retired reuses the service badge above. */
.lifecycle-adopted     { background: var(--badge-success-bg);  color: var(--badge-success-text);  }
.lifecycle-deprecated  { background: var(--badge-warning-bg);  color: var(--badge-warning-text);  }

/* ── Shared lifecycle timeline (services/_lifecycle_timeline_partial.html) ──
   Rendered standalone (services/lifecycle_timeline.html) and inside the
   service- and component-detail "Lifecycle" tabs. Moved here from the standalone
   template's inline <style> so all three call sites share one source. */
/* ── Ownership tab — role-slot cards (Owner / Maintainer / Support) ─────────
   Rendered by templates/services/_ownership_partial.html; shared across the
   service + component ownership surfaces. CSP-clean (no inline styles). */
.ownership-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.ownership-team {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius, 6px);
}
.ownership-team-label {
    font-weight: 600;
    color: var(--color-text-muted);
}
.ownership-team-name {
    font-weight: 600;
}
.ownership-slots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    align-items: start;
}
@media (max-width: 1024px) {
    .ownership-slots { grid-template-columns: 1fr; }
}
.ownership-slot {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.ownership-slot-head {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.ownership-role-label {
    font-weight: 600;
    font-size: 1.05rem;
}
.ownership-assignee {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.ownership-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--color-primary-strong);
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
}
.ownership-assignee-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ownership-name {
    font-weight: 600;
}
.ownership-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ownership-audit {
    margin: 0;
}
.ownership-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
}
.ownership-disclosure > summary {
    list-style: none;
    display: inline-flex;
}
.ownership-disclosure > summary::-webkit-details-marker {
    display: none;
}
.ownership-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.6rem;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius, 6px);
}
.ownership-form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.ownership-form select {
    width: 100%;
}

.lifecycle-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
    align-items: stretch;
}
/* Timeline column + its card fill the row height so "Phase History" spans the
   full height of the stacked sidebar (Record Phase Transition + Current Phase). */
.lifecycle-main {
    display: flex;
    flex-direction: column;
}
.lifecycle-main > .form-card {
    flex: 1 1 auto;
}
.lifecycle-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 1rem;
    align-self: start; /* keep natural height + sticky; only the timeline stretches */
}
@media (max-width: 1024px) {
    .lifecycle-layout { grid-template-columns: 1fr; }
    .lifecycle-sidebar { position: static; }
}
.lc-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.lc-entry {
    display: flex;
    gap: 1rem;
    position: relative;
    padding-bottom: 1.5rem;
}
.lc-entry:last-child { padding-bottom: 0; }
.lc-entry:last-child .lc-line { display: none; }
.lc-dot-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 24px;
}
.lc-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    background: var(--color-surface);
    flex-shrink: 0;
    margin-top: 3px;
}
/* Service phases */
.lc-dot-planning  { border-color: var(--badge-neutral-bg, #6b7280); background: var(--badge-neutral-bg, #6b7280); }
.lc-dot-beta      { border-color: var(--badge-warning-bg, #d97706); background: var(--badge-warning-bg, #d97706); }
.lc-dot-ga        { border-color: var(--badge-success-bg, #16a34a); background: var(--badge-success-bg, #16a34a); }
.lc-dot-sunset    { border-color: var(--badge-warning-bg, #d97706); background: var(--badge-warning-bg, #d97706); }
.lc-dot-retired   { border-color: var(--badge-danger-bg, #dc2626); background: var(--badge-danger-bg, #dc2626); }
/* Component phases (retired reuses the rule above) */
.lc-dot-adopted    { border-color: var(--badge-success-bg, #16a34a); background: var(--badge-success-bg, #16a34a); }
.lc-dot-deprecated { border-color: var(--badge-warning-bg, #d97706); background: var(--badge-warning-bg, #d97706); }
.lc-line {
    width: 2px;
    flex: 1;
    background: var(--color-border);
    margin-top: 4px;
    min-height: 16px;
}
.lc-content { flex: 1; min-width: 0; }
.lc-header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.lc-date { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.lc-notes { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: 0.2rem 0 0; line-height: 1.5; }
.lc-by { font-size: var(--font-size-xs); color: var(--color-text-muted); margin: 0.2rem 0 0; }
.lc-empty-card { padding: 3rem 2rem; }
.lc-empty-icon { opacity: 0.2; margin-bottom: 0.75rem; display: block; margin-left: auto; margin-right: auto; }
.lc-empty-title { color: var(--color-text); margin-bottom: 0.375rem; }
.lc-since-label { margin-top: 0.375rem; }

/* ── Service Table View ──────────────────────────────────────── */
.service-table-wrapper {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow-x: auto;
    margin-bottom: 2rem;
    min-width: 100%;
}

.service-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    table-layout: auto;
}

.service-table thead {
    background: var(--color-bg-subtle);
    border-bottom: 2px solid var(--color-border);
}
[data-theme="dark"] .service-table thead,
[data-theme="system"] .service-table thead { background: var(--color-surface); }
[data-theme="dark"] .service-table tbody tr:nth-child(even),
[data-theme="system"] .service-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }

.service-table th {
    padding: 0.75rem 0.75rem;
    text-align: left;
    font-weight: 600;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    white-space: nowrap;
    position: relative;
    user-select: none;
    vertical-align: middle;
}


.col-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 5px;
    cursor: col-resize;
    z-index: 2;
}

.col-resize-handle:hover,
.col-resize-handle.is-resizing {
    background: var(--color-primary);
    opacity: 0.4;
}

/* Specific column constraints — auto layout sizes to content, min/max guide distribution */
.service-table th:first-child,
.service-table td:first-child {
    width: 40px;
    min-width: 40px;
}

/* Actions — just an icon, fixed */
.service-table th:last-child,
.service-table td:last-child {
    width: 60px;
    min-width: 60px;
    text-align: center;
}

/* Service name — allow to grow freely with available space */
.service-table th[data-column="service"],
.service-table td[data-column="service"] {
    min-width: 200px;
}

/* Team — grows slightly but caps so it doesn't steal from service */
.service-table th[data-column="team"],
.service-table td[data-column="team"] {
    min-width: 130px;
    max-width: 210px;
}

/* Owner / Maintainer — first name only typically, cap narrow */
.service-table th[data-column="owner"],
.service-table th[data-column="maintainer"],
.service-table td[data-column="owner"],
.service-table td[data-column="maintainer"] {
    min-width: 80px;
    max-width: 140px;
}

/* Subscribers — just a number */
.service-table th[data-column="subscribers"],
.service-table td[data-column="subscribers"] {
    width: 95px;
    min-width: 80px;
    text-align: center;
}

/* Cost — currency string */
.service-table th[data-column="cost"],
.service-table td[data-column="cost"] {
    min-width: 100px;
    max-width: 140px;
}

/* Support — icon only */
.service-table th[data-column="support"],
.service-table td[data-column="support"] {
    width: 80px;
    min-width: 80px;
    text-align: center;
}

/* Compliance — single letter badge */
.service-table th[data-column="compliance"],
.service-table td[data-column="compliance"] {
    width: 90px;
    min-width: 80px;
    text-align: center;
}

/* Modified date */
.service-table th[data-column="modified"],
.service-table td[data-column="modified"] {
    min-width: 110px;
    max-width: 160px;
}

.service-table td[data-column="team"],
.service-table td[data-column="owner"],
.service-table td[data-column="maintainer"],
.service-table td[data-column="cost"],
.service-table td[data-column="modified"] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.service-table td[data-column="subscribers"],
.service-table td[data-column="support"],
.service-table td[data-column="compliance"] {
    text-align: center;
}

.service-table th[data-sort] {
    user-select: none;
}

.service-table th[data-sort]:hover {
    background: var(--color-surface);
}

.service-table tbody tr {
    border-bottom: 1px solid var(--color-border);
    transition: background-color 0.15s;
}

.service-table tbody tr:nth-child(even) { background: var(--color-surface-hover); }
.service-table tbody tr:hover {
    background: var(--color-bg-subtle);
}

.service-table td {
    padding: 0.75rem 0.75rem;
    vertical-align: middle;
}

.service-table td a {
    color: var(--color-primary);
    text-decoration: none;
}

.service-table td a:hover {
    text-decoration: underline;
}

.service-table .tag-sm {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    white-space: nowrap;
}

/* ── Button Group ──────────────────────────────────────────── */
.btn-group {
    display: inline-flex;
    border-radius: var(--radius);
    overflow: hidden;
}

.btn-group .btn {
    border-radius: 0;
    border-right: 1px solid var(--color-border);
}

.btn-group .btn:first-child {
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
}

.btn-group .btn:last-child {
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    border-right: none;
}

.view-mode-btn {
    padding: 0.5rem 0.75rem;
}

.view-mode-btn.active {
    background: var(--color-primary-strong);
    color: white;
    border-color: var(--color-primary);
}

/* ── Dropdown ──────────────────────────────────────────── */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
}

.dropdown-menu label {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s;
    user-select: none;
}

.dropdown-menu label:hover {
    background: var(--color-bg);
}

.dropdown-menu input[type="checkbox"] {
    margin: 0;
    margin-right: 0.5rem;
}

/* ── Filter Presets Dropdown ─────────────────────────────── */
.filter-presets-menu {
    display: none;
    min-width: 240px;
    width: max-content;
    padding: 0.5rem;
    overflow: hidden;
    box-sizing: border-box;
    left: 0;
}
.filter-presets-menu.open {
    display: block;
}

.filter-presets-save-row {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0.25rem;
}

.filter-presets-save-row input[type="text"] {
    flex: 1;
    min-width: 0;
    font-size: var(--font-size-xs);
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
}

/* Preset rows — clean list style */
.filter-preset-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.4rem;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text);
    text-decoration: none;
    transition: background 0.15s;
    cursor: pointer;
}

.filter-preset-row:hover {
    background: var(--color-bg);
}

.filter-preset-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.filter-preset-row:hover .filter-preset-icon {
    color: var(--color-primary);
}

.filter-preset-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-preset-delete {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    color: var(--color-text-faint);
    cursor: pointer;
    padding: 0 0.15rem;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}

.filter-preset-row:hover .filter-preset-delete {
    opacity: 1;
}

.filter-preset-delete:hover {
    color: var(--color-danger);
}

.filter-preset-update {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    color: var(--color-text-faint);
    cursor: pointer;
    padding: 0 0.15rem;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}
.filter-preset-row:hover .filter-preset-update { opacity: 1; }
.filter-preset-update:hover { color: var(--color-primary); }

.filter-preset-rename {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    color: var(--color-text-faint);
    cursor: pointer;
    padding: 0 0.15rem;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}
.filter-preset-row:hover .filter-preset-rename { opacity: 1; }
.filter-preset-rename:hover { color: var(--color-primary); }

.filter-preset-rename-input {
    flex: 1;
    min-width: 0;
    font-size: var(--font-size-xs);
    padding: 0.15rem 0.3rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
}
.filter-preset-rename-ok,
.filter-preset-rename-cancel {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 0.15rem;
    flex-shrink: 0;
    line-height: 1;
}
.filter-preset-rename-ok { color: var(--badge-success-text, #16a34a); }
.filter-preset-rename-ok:hover { color: var(--color-primary); }
.filter-preset-rename-cancel { color: var(--color-text-faint); }
.filter-preset-rename-cancel:hover { color: var(--color-danger); }

.filter-presets-loading {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-align: center;
    padding: 0.75rem 0.5rem;
}

.filter-presets-empty {
    display: none;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-align: center;
    padding: 0.75rem 0.5rem;
    line-height: 1.4;
}
.filter-presets-empty.show {
    display: block;
}

/* ── Responsive Table ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .service-table-wrapper {
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
    }

    .service-table {
        min-width: 900px;
    }
}

@media (min-width: 769px) {
    .service-table {
        min-width: 960px;
    }
}

/* ---------- Category Quick-Browse Tiles (customer dashboard) ---------- */
.category-tiles--dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
    overflow-x: unset;
    padding-bottom: 0;
}
.category-tiles--dashboard .category-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 1rem 0.75rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    text-align: center;
    white-space: normal;
}
.category-tiles--dashboard .category-tile:hover {
    border-color: var(--cat-color, var(--color-primary));
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}
.category-tile-icon {
    font-size: 1.5rem;
    line-height: 1;
}
.category-tile-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
}
.category-tile-count {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: 500;
}

/* ---------- Service Card Badges: New, Popular ---------- */
.badge-new {
    background: var(--badge-info-bg);
    color: var(--badge-info-text);
}

/* ---------- Status Dot (compact inline) ---------- */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: 4px;
}
.status-dot.status-operational { background: var(--status-operational); }
.status-dot.status-degraded { background: var(--status-degraded); }
.status-dot.status-partial_outage { background: var(--status-partial-outage); }
.status-dot.status-major_outage { background: var(--status-major-outage); }
.status-dot.status-maintenance { background: var(--status-maintenance); }

/* ---------- Subscriber count on cards ---------- */
.service-card-subscribers {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.service-card-subscribers svg {
    width: 12px;
    height: 12px;
}

/* ═══════════════════════════════════════════════════════════
   Bundle Builder
   ═══════════════════════════════════════════════════════════ */

/* Details card: full-width (no max-width cap) */
.builder-details-card {
    max-width: none;
    margin-bottom: 1.5rem;
}

/* Three-column grid: Name / Slug / Icon */
.builder-fields-grid {
    display: grid;
    grid-template-columns: 2fr 1.5fr 140px;
    gap: 1rem;
    margin-bottom: 0.75rem;
    align-items: start;
}
@media (max-width: 700px) {
    .builder-fields-grid { grid-template-columns: 1fr; }
}

/* Inline row: is_active checkbox + display_order */
.builder-fields-row {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

/* ── Two-panel layout ─────────────────────────────────────── */
.builder-layout {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    align-items: start;
}
@media (max-width: 1000px) {
    .builder-layout { grid-template-columns: 1fr; }
}

/* Panel wrapper */
.builder-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-xs);
}

/* ── Pool panel (left) ────────────────────────────────────── */
.builder-pool-controls {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.builder-search {
    flex: 1;
    min-width: 0;
    padding: 0.4rem 0.625rem;
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.builder-search:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-alpha);
}
.builder-filter-select {
    padding: 0.4rem 0.5rem;
    font-size: var(--font-size-xs);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    cursor: pointer;
}

/* Scrollable pool list */
.builder-pool-grid {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    overflow-y: auto;
    max-height: 500px;
}

/* Individual draggable pool card */
.builder-pool-card {
    position: relative;
    background: var(--color-bg);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.625rem 0.75rem 0.625rem 2.25rem;
    cursor: grab;
    user-select: none;
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast),
                opacity var(--transition-fast),
                background var(--transition-fast);
    min-height: 62px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}
.builder-pool-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-border);
    opacity: 0.4;
    transition: opacity var(--transition-fast);
}
.builder-pool-card:hover::before { opacity: 1; }

/* Drag-handle dots via pseudo-element */
.builder-pool-card::after {
    content: '⠿';
    position: absolute;
    left: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-faint);
    font-size: 1.1rem;
    line-height: 1;
}

.builder-pool-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    background: var(--color-surface-hover);
}
.builder-pool-card:hover::before { background: var(--color-primary); opacity: 1; }
.builder-pool-card:active { cursor: grabbing; }

/* Dragging state */
.builder-pool-card.is-dragging {
    opacity: 0.35;
    border-style: dashed;
}

/* Added state: green top accent + tint */
.builder-pool-card.is-added {
    opacity: 0.6;
    cursor: default;
}
.builder-pool-card.is-added::before { background: var(--color-success); opacity: 1; }
.builder-pool-card.is-added:hover {
    border-color: var(--color-success);
    cursor: pointer;  /* clicking removes it */
}

/* Filtered-out state */
.builder-pool-card.is-hidden { display: none; }

.builder-pool-card-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.25rem;
}
.builder-pool-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

/* "✓ Added" absolute badge */
.builder-pool-added-badge {
    display: none;
    position: absolute;
    top: 0.4rem;
    right: 0.5rem;
    background: var(--color-success);
    color: #fff;
    border-radius: var(--radius-full);
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    align-items: center;
    gap: 0.2rem;
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.builder-pool-card.is-added .builder-pool-added-badge {
    display: inline-flex;
}

/* Pool empty / no-filter message */
.builder-pool-empty-msg {
    color: var(--color-text-faint);
    font-size: var(--font-size-sm);
    padding: 0.5rem 0;
    margin-top: 0.25rem;
}

/* ── Drop panel (right) ───────────────────────────────────── */
.builder-preview-card {
    position: relative;
    background: var(--color-bg);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    overflow: hidden;
}
.builder-preview-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-primary);
    opacity: 0.18;
}
.builder-preview-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}
.builder-preview-icon {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}
.builder-preview-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text);
    word-break: break-word;
}
.builder-preview-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
}

/* The drag-and-drop target zone */
.builder-drop-zone {
    border: 2.5px dashed var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: border-color var(--transition-fast), background var(--transition-fast);
    background: var(--color-bg);
}
.builder-drop-zone.drag-over {
    border-color: var(--color-primary);
    background: var(--color-primary-alpha);
}

/* Placeholder: shown when zone is empty */
.builder-drop-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    flex: 1;
    min-height: 200px;
    color: var(--color-text-faint);
    text-align: center;
    pointer-events: none;
}
.builder-drop-placeholder-icon {
    font-size: 2.5rem;
    opacity: 0.4;
}
.builder-drop-placeholder-text {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-muted);
}
.builder-drop-placeholder-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-faint);
}

/* Mini cards stacked in drop zone */
.builder-mini-grid {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.builder-mini-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.5rem 0.625rem;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--transition-fast);
    overflow: hidden;
}
.builder-mini-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-primary);
    opacity: 0.18;
    transition: opacity var(--transition-fast);
}
.builder-mini-card:hover {
    border-color: var(--color-danger);
}
.builder-mini-card:hover::before { background: var(--color-danger); opacity: 1; }
.builder-mini-card-body {
    flex: 1;
    min-width: 0;
}
.builder-mini-card-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.builder-mini-card-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.builder-mini-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-faint);
    padding: 0.25rem;
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background var(--transition-fast);
}
.builder-mini-remove:hover {
    color: var(--color-danger);
    background: var(--color-danger-light);
}

/* Preview footer */
.builder-preview-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    padding-top: 0.625rem;
    border-top: 1px solid var(--color-border);
}
.builder-preview-footer-count {
    font-weight: 600;
}

/* Dark mode adjustments */
[data-theme="dark"] .builder-pool-card,
[data-theme="dark"] .builder-drop-zone {
    background: color-mix(in srgb, var(--color-surface) 60%, transparent);
}
[data-theme="dark"] .builder-mini-card {
    background: var(--color-surface);
}


/* bundle builder — prerequisite warning panel */
.builder-prereq-warning {
    margin-top: 0.75rem;
    border: 1px solid var(--color-warning, #f59e0b);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-warning, #f59e0b) 8%, var(--color-surface));
    padding: 0.65rem 0.85rem 0.75rem;
    font-size: var(--font-size-sm);
}
.builder-prereq-warning-header {
    font-weight: 600;
    color: var(--color-warning, #f59e0b);
    margin-bottom: 0.3rem;
    display: flex;
    align-items: center;
}
.builder-prereq-warning-desc {
    color: var(--color-text-secondary);
    margin: 0 0 0.5rem;
    line-height: 1.4;
}
.builder-prereq-warning-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.builder-prereq-warning-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.builder-prereq-warning-name {
    font-weight: 500;
    color: var(--color-text);
}
.builder-prereq-warning-by {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}
.builder-prereq-add-btn {
    margin-left: auto;
    padding: 0.15rem 0.55rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
    border: 1px solid var(--color-warning, #f59e0b);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-warning, #f59e0b);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.1s;
}
.builder-prereq-add-btn:hover {
    background: color-mix(in srgb, var(--color-warning, #f59e0b) 15%, transparent);
}
.builder-prereq-chain-item {
    opacity: 0.85;
    font-size: var(--font-size-xs);
}
.builder-prereq-chain-arrow {
    color: var(--color-warning, #f59e0b);
    margin-right: 0.3rem;
    flex-shrink: 0;
    font-style: normal;
}

/* bundle builder — cost breakdown panel */
.builder-cost-breakdown {
    border-top: 1px solid var(--color-border);
    margin-top: 0.5rem;
    padding-top: 0.625rem;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
.builder-cost-breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.2rem 0;
}
.builder-cost-breakdown-label {
    font-weight: 500;
    color: var(--color-text-muted);
}
.builder-cost-breakdown-value {
    font-weight: 600;
    color: var(--color-text);
}
.builder-cost-breakdown-sim {
    border-top: 1px dashed var(--color-border);
    margin-top: 0.3rem;
    padding-top: 0.4rem;
}
.builder-cost-breakdown-sim-right {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.builder-cost-breakdown-equals {
    color: var(--color-text-faint);
}
.builder-cost-breakdown-total {
    border-top: 1px solid var(--color-border);
    margin-top: 0.3rem;
    padding-top: 0.4rem;
    font-size: var(--font-size-sm);
}
.builder-cost-breakdown-total .builder-cost-breakdown-value {
    color: var(--color-primary);
    font-size: var(--font-size-sm);
}

/* ── Icon picker popover ─────────────────────────────────── */
.icon-picker {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 300;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    padding: 0.5rem;
    display: none;
    grid-template-columns: repeat(8, 2rem);
    gap: 0.2rem;
    width: max-content;
    max-width: 22rem;
}
.icon-picker.open {
    display: grid;
}
.icon-picker-btn {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
    line-height: 1;
}
.icon-picker-btn:hover {
    background: var(--color-surface-raised);
    border-color: var(--color-border);
}

/* ── User-count stepper (cost simulator) ─────────────────── */
.user-count-stepper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.user-count-stepper-group {
    display: flex;
    gap: 0.2rem;
}
.user-count-btn {
    padding: 0.15rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 600;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    color: var(--color-text-muted);
    cursor: pointer;
    line-height: 1.4;
    white-space: nowrap;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.user-count-btn:hover {
    background: var(--color-primary-strong);
    color: #fff;
    border-color: var(--color-primary);
}
.user-count-stepper input[type="number"] {
    width: 72px;
    text-align: center;
}

/* mini card cost label */
.builder-mini-card-cost {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: 0.15rem;
}
.builder-mini-card-cost--per-user {
    color: var(--color-primary);
}

/* ── Customer Dashboard — Wide Layout ─────────────────────────────────────── */

.cust-dash-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Stats strip — 4 wide cards across the top */
.cust-stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.cust-stat-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 10px);
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
    overflow: hidden;
}
.cust-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-primary);
    opacity: 0.18;
    transition: opacity var(--transition-fast);
}
.cust-stat-card:hover {
    border-color: var(--color-border-hover);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    color: inherit;
}
.cust-stat-card:hover::before { opacity: 1; }
.cust-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    flex-shrink: 0;
}
.cust-stat-icon svg { width: 22px; height: 22px; }
.cust-stat-green  { background: var(--badge-success-bg); color: var(--badge-success-text); }
.cust-stat-amber  { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.cust-stat-blue   { background: var(--badge-info-bg);    color: var(--badge-info-text);    }
.cust-stat-purple { background: var(--badge-vendor-bg);  color: var(--badge-vendor-text);  }
.cust-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text);
}
.cust-stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: 500;
    margin-top: 0.2rem;
}

/* Two-column dashboard grid */
.cust-dash-grid {
    display: grid;
    grid-template-columns: 200px 1fr 300px;
    gap: 1.75rem;
    align-items: start;
}

/* ── Sidebar (left) ── */
.cust-dash-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: sticky;
    top: 1rem;
}

/* ── Right panel ── */
.cust-dash-right {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: sticky;
    top: 1rem;
}
.cust-sidebar-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 10px);
    overflow: hidden;
}
.cust-sidebar-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--color-border);
}
.cust-sidebar-viewall {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
}
.cust-sidebar-viewall:hover { text-decoration: underline; }

/* Category list */
.cust-cat-list {
    display: flex;
    flex-direction: column;
}
.cust-cat-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    font-size: var(--font-size-sm);
    text-decoration: none;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition-fast);
}
.cust-cat-item:last-child { border-bottom: none; }
.cust-cat-item:hover { background: var(--color-surface-hover, var(--color-bg)); }
.cust-cat-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cust-cat-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cust-cat-count { margin-left: auto; flex-shrink: 0; }

/* Notification list in sidebar */
.cust-sidebar-notif-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.cust-sidebar-link-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    padding: 0;
    font-family: inherit;
}
.cust-sidebar-link-btn:hover { text-decoration: underline; }
.cust-sidebar-link-danger { color: var(--color-danger, #dc2626); }
.cust-notif-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cust-notif-item {
    padding: 0.55rem 1rem;
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition-fast);
}
.cust-notif-item:last-child { border-bottom: none; }
.cust-notif-item:hover { background: var(--color-surface-hover, var(--color-bg)); }
.cust-notif-unread { position: relative; overflow: hidden; }
.cust-notif-unread::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-primary);
    opacity: 0.5;
}
.cust-notif-title {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.3;
}
.cust-notif-title a { color: var(--color-primary); text-decoration: none; }
.cust-notif-title a:hover { text-decoration: underline; }
.cust-notif-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: 0.15rem;
}
.cust-notif-body {
    margin-top: 0.3rem;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Subscription list (right panel) */
.cust-sub-list {
    display: flex;
    flex-direction: column;
}
.cust-sub-item {
    padding: 0.55rem 1rem;
    border-bottom: 1px solid var(--color-border);
}
.cust-sub-item:last-child { border-bottom: none; }
.cust-sub-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    margin-bottom: 0.2rem;
}
.cust-sub-name a { color: var(--color-primary); text-decoration: none; }
.cust-sub-name a:hover { text-decoration: underline; }
.cust-sub-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.cust-sub-empty {
    padding: 0.75rem 1rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
}

/* Maintenance items */
.cust-maintenance-item {
    padding: 0.55rem 1rem;
    border-bottom: 1px solid var(--color-border);
}
.cust-maintenance-item:last-child { border-bottom: none; }
.cust-maintenance-title {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
}
.cust-maintenance-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: 0.1rem;
}

/* ── Service Cards ── */
.svc-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}
.svc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.85rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
    overflow: hidden;
}
.svc-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--svc-accent, var(--color-primary));
    opacity: 0.18;
    transition: opacity var(--transition-fast);
}
.svc-card:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
    border-color: var(--svc-accent, var(--color-primary-light));
    color: inherit;
}
.svc-card:hover::before { opacity: 1; }
.svc-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
.svc-card-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}
.svc-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.svc-card-desc {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: 1.4;
    margin: 0;
}

/* New badge — green pill */
.svc-badge-new {
    background: var(--badge-success-bg);
    color: var(--badge-success-text);
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 99px;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Subscriber count badge — blue pill */
.svc-badge-subs {
    background: var(--badge-info-bg);
    color: var(--badge-info-text);
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 99px;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* ── Responsive breakpoints ── */
@media (max-width: 1200px) {
    .cust-dash-grid {
        grid-template-columns: 180px 1fr 260px;
        gap: 1.25rem;
    }
}
@media (max-width: 900px) {
    /* Collapse right panel into main, keep narrow left */
    .cust-dash-grid {
        grid-template-columns: 180px 1fr;
        gap: 1.25rem;
    }
    .cust-dash-right {
        grid-column: 2;
        position: static;
    }
}
@media (max-width: 768px) {
    .cust-dash-grid {
        grid-template-columns: 1fr;
    }
    .cust-dash-sidebar,
    .cust-dash-right {
        position: static;
    }
    .cust-dash-right {
        grid-column: auto;
    }
    .cust-stat-strip {
        grid-template-columns: repeat(2, 1fr);
    }
    .svc-cards-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 480px) {
    .cust-stat-strip { grid-template-columns: 1fr; }
    .svc-cards-grid  { grid-template-columns: 1fr; }
}


/* ── Cookie Consent Banner (P1.3) ─────────────────────────────────────────── */
.cookie-banner {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--color-surface-raised, #fff);
    border-top: 2px solid var(--color-primary, #4f6ef7);
    box-shadow: 0 -2px 16px rgba(0,0,0,.12);
    padding: .875rem 1.25rem;
}
.cookie-banner__content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.cookie-banner__text {
    flex: 1;
    margin: 0;
    font-size: var(--font-size-sm, .875rem);
    color: var(--color-text-muted);
}
.cookie-banner__actions {
    display: flex;
    gap: .5rem;
    flex-shrink: 0;
}
@media (prefers-color-scheme: dark) {
    .cookie-banner { background: var(--color-surface-raised, #1e2533); }
}

/* ── Customer Portal Phase 4: Hero + Category Tiles + Mobile Tab Bar ───── */

/* Hero search bar */
.portal-hero {
    text-align: center;
    padding: 2.5rem 1rem 2rem;
    background: linear-gradient(135deg, var(--color-primary-bg, rgba(59,130,246,0.06)), var(--color-surface));
    border-radius: var(--radius-lg, 0.75rem);
    margin-bottom: 1.5rem;
}
.portal-hero h1 {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    margin: 0 0 1.25rem;
    color: var(--color-text);
}
.portal-hero-search {
    display: flex;
    align-items: center;
    max-width: 600px;
    margin: 0 auto;
    background: var(--color-surface);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-lg, 0.75rem);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.12);
}
.portal-hero-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--color-text-muted);
    margin-left: 1rem;
}
.portal-hero-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 0.75rem 0.75rem;
    font-size: var(--font-size-base, 0.9375rem);
    color: var(--color-text);
}
.portal-hero-search input::placeholder { color: var(--color-text-muted); }
.portal-hero-search .btn { border-radius: 0; padding: 0.75rem 1.25rem; flex-shrink: 0; }
.portal-hero-active-filter {
    margin: 0.75rem 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Category tile grid */
.portal-category-tiles { margin-bottom: 1.5rem; }
.portal-section-heading {
    font-size: var(--font-size-base);
    font-weight: 600;
    margin: 0 0 0.875rem;
    color: var(--color-text);
}
.portal-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.875rem;
}
.portal-category-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.125rem 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius, 0.375rem);
    text-align: center;
    text-decoration: none;
    color: var(--color-text);
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
    gap: 0.375rem;
}
.portal-category-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    text-decoration: none;
    border-color: var(--color-primary);
}
.portal-category-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius, 0.375rem);
    background: var(--color-primary-bg, rgba(59,130,246,0.1));
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
}
.portal-category-icon svg { width: 20px; height: 20px; }
.portal-category-name { font-size: var(--font-size-sm); font-weight: 600; }
.portal-category-count { font-size: var(--font-size-xs, 0.75rem); color: var(--color-text-muted); }

/* Mobile bottom tab bar (customer portal — hidden on desktop) */
.mobile-tab-bar { display: none; }

@media (max-width: 768px) {
    .mobile-tab-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 200;
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
        padding: 0.25rem 0 env(safe-area-inset-bottom, 0.25rem);
    }
    .mobile-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        font-size: 0.625rem;
        font-weight: 500;
        padding: 0.375rem 0;
        color: var(--color-text-muted);
        text-decoration: none;
        position: relative;
    }
    .mobile-tab svg { width: 20px; height: 20px; }
    .mobile-tab.active { color: var(--color-primary); }
    .mobile-tab-badge {
        position: absolute;
        top: 2px;
        right: calc(50% - 18px);
        min-width: 16px;
        height: 16px;
        background: var(--color-danger, #ef4444);
        color: #fff;
        font-size: 0.55rem;
        font-weight: 700;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 3px;
    }
    main.container { padding-bottom: 5rem; }
}

/* ── Service Table Group-by (Phase 7) ───────────────────────────────────── */
.table-groupby-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}
.table-groupby-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-weight: 500;
    white-space: nowrap;
}
.group-header td {
    background: var(--color-surface-hover, rgba(0,0,0,0.03));
    font-size: var(--font-size-sm);
    font-weight: 600;
    padding: 0.375rem 0.75rem;
    border-top: 2px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
}
.group-count {
    font-weight: 400;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}
[data-theme="dark"] .group-header td { background: rgba(255,255,255,0.04); }

/* ── Subscription Progress Stepper (Phase 5) ───────────────────────────── */
.sub-stepper {
    display: flex;
    align-items: flex-start;
    margin: 0.75rem 0 1rem;
    overflow-x: auto;
}
.sub-stepper-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    gap: 0.25rem;
    min-width: 56px;
}
.sub-stepper-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    color: var(--color-text-muted);
}
.sub-stepper-dot svg { width: 13px; height: 13px; }
.sub-stepper-step.sub-stepper-done .sub-stepper-dot {
    background: var(--color-success, #22c55e);
    border-color: var(--color-success, #22c55e);
    color: #fff;
}
.sub-stepper-step.sub-stepper-active .sub-stepper-dot {
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-bg, rgba(59,130,246,0.15));
}
.sub-stepper-label {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-align: center;
    white-space: nowrap;
}
.sub-stepper-step.sub-stepper-done .sub-stepper-label { color: var(--color-success, #22c55e); }
.sub-stepper-step.sub-stepper-active .sub-stepper-label { color: var(--color-primary); }
.sub-stepper-line {
    position: absolute;
    top: 14px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--color-border);
    z-index: 0;
}
.sub-stepper-step.sub-stepper-done .sub-stepper-line { background: var(--color-success, #22c55e); }

/* ── Service Completeness Chips (Phase 3) ──────────────────────────────── */
.service-card-footer-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.completeness-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.completeness-bar {
    display: inline-block;
    width: 42px;
    height: 5px;
    background: var(--color-border);
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}
.completeness-fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--color-text-muted);
    transition: width 300ms ease;
}
/* Grade-based colours for the fill bar */
.completeness-grade-a .completeness-fill { background: var(--color-success, #22c55e); }
.completeness-grade-a .completeness-label { color: var(--color-success, #22c55e); }
.completeness-grade-b .completeness-fill { background: var(--color-primary, #3b82f6); }
.completeness-grade-b .completeness-label { color: var(--color-primary, #3b82f6); }
.completeness-grade-c .completeness-fill { background: var(--color-warning, #f59e0b); }
.completeness-grade-c .completeness-label { color: var(--color-warning, #f59e0b); }
.completeness-grade-d .completeness-fill,
.completeness-grade-f .completeness-fill { background: var(--color-danger, #ef4444); }
.completeness-grade-d .completeness-label,
.completeness-grade-f .completeness-label { color: var(--color-danger, #ef4444); }

/* ── Command Palette (Phase 2) ─────────────────────────────────────────── */
.cp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
    backdrop-filter: blur(3px);
}
.cp-overlay[hidden] { display: none; }

.cp-modal {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 0.75rem);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 620px;
    overflow: hidden;
}

.cp-search-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}
.cp-search-icon {
    width: 18px;
    height: 18px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.cp-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--font-size-base, 0.9375rem);
    color: var(--color-text);
    line-height: 1.5;
    -webkit-appearance: none;
}
.cp-input::placeholder { color: var(--color-text-faint, var(--color-text-muted)); }
.cp-input::-webkit-search-cancel-button { display: none; }

.cp-results {
    max-height: 400px;
    overflow-y: auto;
    padding: 0.5rem;
}
.cp-section { margin-bottom: 0.25rem; }
.cp-section-header {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    padding: 0.5rem 0.75rem 0.25rem;
}
.cp-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius, 0.375rem);
    cursor: pointer;
    text-decoration: none;
    color: var(--color-text);
    transition: background 100ms;
}
.cp-item:hover,
.cp-item.active {
    background: var(--color-primary-bg, rgba(59, 130, 246, 0.08));
    text-decoration: none;
}
.cp-item-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-bg, rgba(59, 130, 246, 0.1));
    border-radius: var(--radius, 0.375rem);
    color: var(--color-primary);
    flex-shrink: 0;
}
.cp-item-icon svg { width: 14px; height: 14px; }
.cp-item-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.cp-item-name {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cp-item-meta {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
}
.cp-empty {
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm, 0.875rem);
}
/* UX-CMDK-DISCOVERY: visible in-palette discovery hint (tokens only) */
.cp-hint {
    padding: 0.5rem 1rem 0.35rem;
    font-size: 0.7rem;
    color: var(--color-text-muted);
}
.cp-hint kbd {
    display: inline-block;
    padding: 1px 5px;
    font-size: 0.65rem;
    font-family: inherit;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    margin: 0 1px;
}
.cp-footer {
    display: flex;
    gap: 1rem;
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.7rem;
    color: var(--color-text-muted);
}
.cp-footer kbd {
    display: inline-block;
    padding: 1px 5px;
    font-size: 0.65rem;
    font-family: inherit;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    margin-right: 2px;
}

/* Navbar search trigger button */
.navbar-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3rem 0.6rem;
    min-height: 1.75rem;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius, 0.375rem);
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: var(--font-size-xs, 0.75rem);
    transition: var(--transition-base);
    line-height: 1;
    vertical-align: middle;
}
.navbar-search-btn:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
    border-color: var(--color-border-strong, var(--color-border));
}
.navbar-search-btn svg { width: 14px; height: 14px; }

/* "+" create button — override nav-dropdown-toggle conflicts */
.nav-dropdown-toggle.navbar-search-btn {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
}
.nav-dropdown-toggle.navbar-search-btn:hover,
.nav-dropdown-toggle.navbar-search-btn[aria-expanded="true"] {
    background: var(--color-surface-hover);
    color: var(--color-text);
    border-color: var(--color-border-strong, var(--color-border));
}

.navbar-kbd {
    display: inline-block;
    padding: 1px 4px;
    font-size: 0.65rem;
    font-family: inherit;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .navbar-kbd { display: none; }
    .cp-modal { max-width: calc(100vw - 2rem); }
    .cp-results { max-height: 300px; }
    .cp-overlay { padding-top: 5vh; }
}

/* ============================================
   Phase 8: Service Slide-in Detail Panel
   ============================================ */
.service-side-panel {
    position: fixed;
    top: 0;
    right: -500px;
    width: 480px;
    max-width: 100vw;
    height: 100vh;
    background: var(--color-surface);
    border-left: 1px solid var(--color-border);
    box-shadow: var(--shadow-xl, -4px 0 24px rgba(0,0,0,0.15));
    z-index: 400;
    overflow-y: auto;
    transition: right 300ms cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}
.service-side-panel.open {
    right: 0;
}
.service-side-panel-content {
    padding: 1.5rem;
    flex: 1;
}
.service-side-panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.25);
    z-index: 399;
    backdrop-filter: blur(1px);
}

/* Panel interior components */
.panel-header {
    margin-bottom: 1rem;
}
.panel-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.panel-service-name {
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}
.panel-close-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius, 0.375rem);
    line-height: 1;
}
.panel-close-btn:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
}
.panel-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
}
.panel-description {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-muted);
    margin: 0.75rem 0 1rem;
    line-height: 1.5;
}
.panel-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding: 1rem;
    background: var(--color-surface-alt, var(--color-bg));
    border-radius: var(--radius, 0.375rem);
    border: 1px solid var(--color-border);
}
.panel-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.panel-meta-label {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}
.panel-meta-value {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 500;
    color: var(--color-text);
}
.panel-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.panel-loading,
.panel-error {
    padding: 2rem;
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm, 0.875rem);
}
.panel-error { color: var(--color-danger); }

@media (max-width: 600px) {
    .service-side-panel { width: 100vw; right: -100vw; }
}

/* ============================================
   Customer Portal Desktop Layout Improvements
   ============================================ */

/* --- Service Catalog: Two-column layout (sidebar + main) --- */
.cust-catalog-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.5rem;
    align-items: start;
    margin-top: 1rem;
}
.cust-catalog-sidebar {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.cust-catalog-sidebar-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius, 0.375rem);
    padding: 0.875rem 1rem;
}
.cust-catalog-sidebar-section h3 {
    font-size: var(--font-size-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin: 0 0 0.5rem 0;
    font-weight: 600;
}
/* Category links */
.cust-catalog-cat-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius-sm, 0.25rem);
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text);
    text-decoration: none;
    transition: background 150ms, color 150ms;
}
.cust-catalog-cat-link:hover {
    background: var(--color-surface-hover);
    color: var(--color-primary);
}
.cust-catalog-cat-link.active {
    background: var(--color-primary)18;
    color: var(--color-primary);
    font-weight: 500;
}
.cust-catalog-cat-count {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-muted);
    background: var(--color-bg);
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    min-width: 20px;
    text-align: center;
}
/* Sidebar filters */
.cust-catalog-filter-label {
    display: block;
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-muted);
    font-weight: 500;
    margin-bottom: 0.2rem;
    margin-top: 0.6rem;
}
.cust-catalog-filter-label:first-of-type {
    margin-top: 0;
}
.cust-catalog-filter-select {
    width: 100%;
    margin-bottom: 0;
}
/* Sidebar search */
.cust-catalog-search-form { margin: 0; }
.cust-catalog-search-row {
    display: flex;
    gap: 0.375rem;
    align-items: center;
}
.cust-catalog-search-input {
    flex: 1;
    min-width: 0;
    font-size: var(--font-size-sm, 0.875rem);
}
.cust-catalog-search-btn {
    flex-shrink: 0;
    background: var(--color-primary-strong);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm, 0.25rem);
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.cust-catalog-search-btn:hover { opacity: 0.9; }

/* Toolbar (count + view toggle) */
.cust-catalog-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.cust-catalog-count { line-height: 1; }

/* Active filter breadcrumb (desktop, shown above toolbar) */
.cust-catalog-active-filters {
    padding: 0.4rem 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius, 0.375rem);
    margin-bottom: 0.75rem;
}

/* Mobile-only section: hide on desktop */
.cust-catalog-mobile-only { display: none; }

/* On desktop (≥1024px): show sidebar layout, hide mobile-only block */
@media (min-width: 1024px) {
    .cust-catalog-mobile-only { display: none; }
    .cust-catalog-sidebar { display: flex; }
}

/* On mobile (<1024px): stack layout, hide sidebar, show mobile block */
@media (max-width: 1023px) {
    .cust-catalog-layout {
        display: block;
    }
    .cust-catalog-sidebar { display: none; }
    .cust-catalog-mobile-only { display: block; }
    .cust-catalog-toolbar { display: none; }
    .cust-catalog-active-filters { display: none; }
    /* view toggle already shown inside mobile block via .view-toggle */
}

/* At 1400px+ widen the sidebar slightly */
@media (min-width: 1400px) {
    .cust-catalog-layout {
        grid-template-columns: 260px 1fr;
        gap: 2rem;
    }
}

/* --- Dashboard: wider sidebars at 1400px+ --- */
@media (min-width: 1400px) {
    .cust-dash-grid {
        grid-template-columns: 240px 1fr 320px;
        gap: 2rem;
    }
}

/* --- Settings: widen + two-column --- */
.settings-form { max-width: 960px; margin-left: auto; margin-right: auto; margin-bottom: 2.5rem; }  /* was 640px, centered; margin-bottom folded from the earlier .settings-form (P3) */

.settings-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 700px) {
    .settings-two-col { grid-template-columns: 1fr; }
}

/* ==========================================================================
   V3 PWA — Mobile approval flow improvements
   ========================================================================== */

@media (max-width: 768px) {
  /* Approval modals slide up from bottom as a bottom sheet */
  .approval-modal {
    bottom: 0;
    top: auto;
    border-radius: 16px 16px 0 0;
    position: fixed;
    left: 0;
    right: 0;
    margin: 0;
  }

  /* Larger touch targets for subscription rows */
  .subscription-row {
    min-height: 56px;
  }
}

/* =============================================================================
   Governance Tree
   ============================================================================= */

.gov-tree {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Team-level accordion */
details.gov-team {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
details.gov-team > summary.gov-team-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    list-style: none;
    background: var(--color-bg-subtle);
    border-bottom: 1px solid transparent;
    user-select: none;
}
details.gov-team[open] > summary.gov-team-header {
    border-bottom-color: var(--color-border);
}
details.gov-team > summary.gov-team-header::-webkit-details-marker { display: none; }
.gov-team-chevron {
    font-size: 0.6rem;
    color: var(--color-text-muted);
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}
.gov-team-name {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-text);
}
.gov-team-org {
    font-weight: 400;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    margin-left: 0.35rem;
}
.gov-team-body {
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Service-level accordion */
details.gov-service {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow var(--transition-fast);
}
details.gov-service:hover { box-shadow: var(--shadow-sm); }
details.gov-service[open] { box-shadow: var(--shadow); }

/* Grade left-border colours */
details.gov-grade-A,
details.gov-grade-B,
details.gov-grade-C,
details.gov-grade-D,
details.gov-grade-F {
    position: relative;
    overflow: hidden;
}
details.gov-grade-A::before,
details.gov-grade-B::before,
details.gov-grade-C::before,
details.gov-grade-D::before,
details.gov-grade-F::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 1;
}
details.gov-grade-A::before { background: var(--color-success); }
details.gov-grade-B::before { background: var(--badge-partner-text); }
details.gov-grade-C::before { background: var(--color-warning); }
details.gov-grade-D::before { background: var(--badge-orange-text); }
details.gov-grade-F::before { background: var(--color-danger); }

details.gov-service > summary.gov-service-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.6rem 0.875rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: var(--color-surface);
}
details.gov-service[open] > summary.gov-service-summary {
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
}
details.gov-service > summary.gov-service-summary::-webkit-details-marker { display: none; }

.gov-service-chevron {
    font-size: 0.55rem;
    color: var(--color-text-muted);
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}
.gov-service-name {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    text-decoration: none;
}
.gov-service-name:hover { text-decoration: underline; }
.gov-owner {
    font-size: var(--font-size-xs);
    margin-left: 0.25rem;
}
.gov-meta-chip {
    font-size: var(--font-size-xs);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: 0.1rem 0.5rem;
}

/* Service body — expanded content */
.gov-service-body {
    padding: 0.875rem 1rem;
    background: var(--color-surface);
}
.gov-service-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
@media (max-width: 900px) { .gov-service-cols { grid-template-columns: 1fr; } }

.gov-col {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gov-section {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.gov-section-title {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.2rem;
}

.gov-contract-row,
.gov-sub-row,
.gov-dep-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: var(--font-size-xs);
    padding: 0.3rem 0.5rem;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}
.gov-link {
    color: var(--color-primary);
    text-decoration: none;
}
.gov-link:hover { text-decoration: underline; }

/* Compliance progress bar */
.gov-compliance-bar {
    height: 5px;
    background: var(--color-border);
    border-radius: var(--radius-full);
    margin: 0.35rem 0 0.5rem;
    overflow: hidden;
}
.gov-compliance-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}
.gov-compliance-grade-A { background: var(--color-success); }
.gov-compliance-grade-B { background: var(--badge-partner-text); }
.gov-compliance-grade-C { background: var(--color-warning); }
.gov-compliance-grade-D { background: var(--badge-orange-text); }
.gov-compliance-grade-F { background: var(--color-danger); }

/* Service info + SLA meta rows */
.gov-service-desc {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0 0 0.4rem;
}
.gov-meta-rows {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.gov-meta-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: var(--color-text);
}
.gov-meta-label {
    min-width: 3.5rem;
    color: var(--color-text-muted);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Compliance checklist */
.gov-checklist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.2rem 0.5rem;
}
.gov-checklist-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    line-height: 1.4;
}
.gov-checklist-icon {
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.75rem;
}
.gov-checklist-pass .gov-checklist-icon { color: var(--color-success); }
.gov-checklist-pass .gov-checklist-name { color: var(--color-text-muted); }
.gov-checklist-fail .gov-checklist-icon { color: var(--color-danger); }
.gov-checklist-fail .gov-checklist-name { color: var(--color-text); font-weight: 500; }

/* Quick actions row */
.gov-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--color-border);
}
.btn-xs {
    padding: 0.2rem 0.6rem;
    font-size: var(--font-size-xs);
    border-radius: var(--radius-sm);
}

/* Dark mode adjustments */
[data-theme="dark"] details.gov-service > summary.gov-service-summary,
[data-theme="dark"] details.gov-team > summary.gov-team-header {
    background: var(--color-bg-subtle);
}
[data-theme="dark"] .gov-contract-row,
[data-theme="dark"] .gov-sub-row,
[data-theme="dark"] .gov-dep-row {
    background: rgba(255,255,255,0.04);
    border-color: var(--color-border);
}

/* --- Governance view-mode tabs --- */
.gov-view-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.gov-view-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
}
.gov-view-tab:hover { color: var(--color-text); border-bottom-color: var(--color-border-hover); }
.gov-view-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 600;
}

/* --- Governance toolbar (dep direction + filters) --- */
.gov-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.625rem 0.875rem;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.gov-dep-direction-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.gov-dep-dir-btn {
    padding: 0.2rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: all var(--transition-fast);
    white-space: nowrap;
}
.gov-dep-dir-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-alpha);
}
.gov-dep-dir-btn.active {
    background: var(--color-primary-strong);
    color: #fff;
    border-color: var(--color-primary);
}

/* --- Tag dot --- */
.gov-tag-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

/* --- Inline dep tree inside service cards --- */
.gov-dep-tree {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.gov-dep-node {
    display: flex;
    flex-direction: column;
}
.gov-dep-row-inner {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.35rem;
    font-size: var(--font-size-xs);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    border-left: 2px solid transparent;
    transition: background var(--transition-fast);
    min-width: 0;
}
.gov-dep-row-inner:hover { background: var(--color-bg-subtle); }
.gov-dep-link {
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}
.gov-dep-link:hover { text-decoration: underline; color: var(--color-primary); }
.gov-dep-type {
    font-size: 0.65rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.gov-dep-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    font-size: 0.55rem;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}
.gov-dep-flag-critical { background: var(--badge-danger-bg); color: var(--badge-danger-text); }
.gov-dep-flag-prereq   { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.gov-dep-more {
    font-size: 0.65rem;
    color: var(--color-primary);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.gov-dep-children {
    padding-left: 1.1rem;
    margin-left: 0.7rem;
    margin-top: 0.1rem;
    border-left: 2px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.gov-dep-components {
    padding-left: 1.1rem;
    margin-left: 0.7rem;
    margin-top: 0.15rem;
    margin-bottom: 0.1rem;
    border-left: 2px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.gov-dep-comp-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    font-size: var(--font-size-xs);
    padding: 0.15rem 0.4rem;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}
[data-theme="dark"] .gov-dep-comp-row {
    background: rgba(255,255,255,0.03);
    border-color: var(--color-border);
}
/* Critical/prereq: left border accent only — no background (dark-mode safe) */
.gov-dep-critical > .gov-dep-row-inner {
    border-left-color: var(--badge-danger-text, #dc2626);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.gov-dep-prereq > .gov-dep-row-inner {
    border-left-color: var(--badge-warning-text, #d97706);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.gov-dep-critical.gov-dep-prereq > .gov-dep-row-inner {
    border-left-color: var(--badge-danger-text, #dc2626);
}

/* Partner / Agreement group-specific header accents */
details.gov-group-partner > summary.gov-team-header {
    border-left: 3px solid var(--badge-vendor-bg, #f3e8ff);
}
details.gov-group-agreement > summary.gov-team-header {
    border-left: 3px solid var(--badge-info-bg, #dbeafe);
}
details.gov-group-tag > summary.gov-team-header {
    border-left: 3px solid var(--color-border);
}

/* === Governance tree: section title colour utilities === */
/* Moved from inline style block in _gov_tree_partial.html in Task 4. */
.gov-section-title-upstream { color: var(--badge-info-text, #3538CD); }
.gov-section-title-downstream { color: var(--badge-partner-text, #0E7090); }

/* === Governance tree: combined info card === */
/* .gov-info-card is a marker class for selector specificity */
.gov-info-card .gov-service-desc { margin-top: 0.25rem; margin-bottom: 0.5rem; }
.gov-info-card-divider {
    height: 1px;
    background: var(--color-border);
    margin: 0.6rem 0;
}
.gov-info-card-sla {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
}
.gov-info-card-sla-cell {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.8rem;
}
.gov-info-card-sla-cell .gov-meta-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

/* === Governance tree: HLD preview === */
.gov-hld-preview-section .gov-section-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.gov-hld-preview {
    position: relative;
    width: 100%;
    height: 540px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-alt, #E8ECF3);
    background-image: radial-gradient(var(--color-border) 1px, transparent 0);
    background-size: 20px 20px;
    overflow: hidden;
    cursor: zoom-in;
}
[data-theme="dark"] .gov-hld-preview {
    background-color: var(--color-bg);
    background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 0);
}
.gov-hld-preview:hover { border-color: var(--color-primary); }
.gov-hld-preview-expand-glyph {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.gov-hld-preview:hover .gov-hld-preview-expand-glyph { opacity: 1; }
.gov-hld-preview-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 0.5rem;
    color: var(--color-text-faint);
    font-size: 0.85rem;
    text-align: center;
    cursor: default;
}

/* === Governance tree: HLD lightbox === */
.gov-hld-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
}
.gov-hld-lightbox.is-open { display: block; }
.gov-hld-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}
.gov-hld-lightbox-dialog {
    position: absolute;
    inset: 4vh 20vw;
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.gov-hld-lightbox-header {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.85rem;
    font-weight: 600;
}
.gov-hld-lightbox-title { flex: 1; }
.gov-hld-lightbox-close {
    background: none;
    border: none;
    cursor: pointer;
    width: 28px; height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: var(--color-text-muted);
}
.gov-hld-lightbox-close:hover {
    background: var(--color-bg-alt);
    color: var(--color-text);
}
.gov-hld-lightbox-canvas {
    flex: 1;
    min-height: 0;
    background-color: var(--color-bg-alt, #E8ECF3);
    background-image: radial-gradient(var(--color-border) 1px, transparent 0);
    background-size: 20px 20px;
}
[data-theme="dark"] .gov-hld-lightbox-canvas {
    background-color: var(--color-bg);
    background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 0);
}
body.gov-hld-lightbox-open { overflow: hidden; }



/* ==========================================================================
   Customer Portal Facelift — Feb 2026
   New component classes for filter chips, category pills, cart layout,
   notification bell, analytics charts, and status tabs.
   ========================================================================== */

/* ---------- Active filter chips (service list) ---------- */
.cust-filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
    min-height: 28px;
}
.cust-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem 0.2rem 0.625rem;
    background: var(--color-primary-alpha, rgba(37,99,235,0.1));
    color: var(--color-primary);
    border: 1px solid var(--color-primary-light, #bfdbfe);
    border-radius: var(--radius-full, 999px);
    font-size: var(--font-size-xs);
    font-weight: 500;
    white-space: nowrap;
}
.cust-filter-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    color: currentColor;
    opacity: 0.6;
    padding: 0;
    line-height: 1;
    font-size: 14px;
    flex-shrink: 0;
}
.cust-filter-chip-remove:hover { opacity: 1; background: var(--color-primary-light, #bfdbfe); }
.cust-filter-chips-clearall {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-decoration: none;
    margin-left: 0.25rem;
}
.cust-filter-chips-clearall:hover { color: var(--color-danger); text-decoration: underline; }

/* ---------- Desktop category pill row (service list) ---------- */
/* Catalog tab bar (Services / Bundles switcher) */
.catalog-tabs {
    display: flex;
    gap: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 0.25rem;
    margin-bottom: 1.5rem;
    width: fit-content;
}
.catalog-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.125rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    border-radius: calc(var(--radius-lg) - 3px);
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
}
.catalog-tab:hover { color: var(--color-text); background: var(--color-bg-subtle); }
.catalog-tab.active { color: var(--color-primary); background: var(--color-primary-alpha); font-weight: 600; }
.catalog-tab-count {
    background: var(--color-bg-alt, var(--color-bg-subtle));
    color: var(--color-text-muted);
    border-radius: var(--radius-full, 999px);
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    min-width: 1.25rem;
    text-align: center;
}
.catalog-tab.active .catalog-tab-count { background: var(--color-primary-alpha); color: var(--color-primary); }

.category-pill-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0.25rem 0 0.75rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.category-pill-row::-webkit-scrollbar { display: none; }
.category-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full, 999px);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}
.category-pill:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-alpha, rgba(37,99,235,0.08));
}
.category-pill.active {
    background: var(--color-primary-strong);
    border-color: var(--color-primary);
    color: #fff;
    font-weight: 600;
}
.category-pill-count {
    font-size: var(--font-size-xs);
    opacity: 0.75;
}
.category-pill svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ---------- Cart layout: table + summary card ---------- */
.cart-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 900px) {
    .cart-layout { grid-template-columns: 1fr; }
}
.cart-summary-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: sticky;
    top: 1rem;
}
.cart-summary-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-primary);
    opacity: 0.18;
    z-index: 1;
}
.cart-summary-card-header {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.cart-summary-card-body { padding: 1.25rem; }
.cart-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}
.cart-summary-total-label { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.cart-summary-total-value { font-size: 1.25rem; font-weight: 700; color: var(--color-text); }

/* ---------- Notification bell in navbar (customer portal) ---------- */
.navbar-notif-wrap {
    position: relative;
}
.navbar-notif-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    background: rgba(255,255,255,0.1);
    border: none;
    cursor: pointer;
    color: var(--color-navbar-text);
    position: relative;
    transition: background var(--transition-fast);
}
.navbar-notif-btn:hover { background: rgba(255,255,255,0.18); }
.navbar-notif-btn svg { width: 17px; height: 17px; }
.navbar-notif-badge-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    background: var(--color-danger, #ef4444);
    color: #fff;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    border: 2px solid var(--color-navbar-bg, #1e1b4b);
}
.navbar-notif-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: -8px;
    width: 320px;
    max-height: 420px;
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: 200;
    display: none;
}
.navbar-notif-dropdown.open { display: block; }
.navbar-notif-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
    position: sticky;
    top: 0;
    background: var(--color-surface);
}
.navbar-notif-item {
    display: block;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-text);
    transition: background var(--transition-fast);
    font-size: var(--font-size-sm);
}
.navbar-notif-item:last-child { border-bottom: none; }
.navbar-notif-item:hover { background: var(--color-bg-subtle); }
.navbar-notif-item.unread { background: var(--color-primary-alpha, rgba(37,99,235,0.06)); }
.navbar-notif-item-title { font-weight: 500; margin-bottom: 0.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navbar-notif-item-meta { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.navbar-notif-empty { padding: 1.5rem 1rem; text-align: center; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.navbar-notif-footer { padding: 0.625rem 1rem; text-align: center; border-top: 1px solid var(--color-border); background: var(--color-bg-subtle); }
.navbar-notif-footer a { font-size: var(--font-size-xs); color: var(--color-primary); text-decoration: none; }
.navbar-notif-footer a:hover { text-decoration: underline; }

/* ---------- Analytics page charts ---------- */
.analytics-charts-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 900px) {
    .analytics-charts-grid { grid-template-columns: 1fr; }
}
.analytics-chart-card {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.analytics-chart-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-primary);
    opacity: 0.18;
    z-index: 1;
}
.analytics-chart-header {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.analytics-chart-body {
    padding: 1rem;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Date range selector */
.date-range-tabs {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}
.date-range-tab {
    padding: 0.3rem 0.875rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    border-right: 1px solid var(--color-border);
    transition: all var(--transition-fast);
    background: var(--color-surface);
}
.date-range-tab:last-child { border-right: none; }
.date-range-tab:hover { color: var(--color-primary); background: var(--color-bg-subtle); }
.date-range-tab.active { background: var(--color-primary-strong); color: #fff; font-weight: 600; }

/* ---------- Subscription status tabs ---------- */
.sub-status-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    overflow-x: auto;
}
.sub-status-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.125rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
}
.sub-status-tab:hover { color: var(--color-text); border-bottom-color: var(--color-border-hover); }
.sub-status-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 600;
}

/* ---------- Settings privacy card (full-width below two-col) ---------- */
.settings-privacy-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.settings-privacy-card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.settings-privacy-card-header h2 { font-size: 1rem; font-weight: 600; margin: 0; }
.settings-privacy-card-body {
    padding: 0.5rem 0;
}
.settings-privacy-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1.5rem;
}
.settings-privacy-row + .settings-privacy-row {
    border-top: 1px solid var(--color-border);
}
.settings-privacy-row p { margin: 0.125rem 0 0; }


/* ---------- Empty state icon (standardise) ---------- */
.empty-state-icon {
    display: block;
    margin: 0 auto 1.25rem;
    width: 52px;
    height: 52px;
    opacity: 0.25;
    color: var(--color-text-muted);
}
.empty-state-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

/* ---------- Sidebar card upgrade (service detail) ---------- */
.sidebar-card {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 0.875rem;
}
.sidebar-card-header {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}
.sidebar-card-header svg { width: 12px; height: 12px; opacity: 0.7; }
.sidebar-card-body { padding: 0.875rem 1rem; }
.sidebar-card:last-child { margin-bottom: 0; }
.sync-flag-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    font-size: var(--font-size-sm);
    border-bottom: 1px solid var(--color-border);
}
.sync-flag-row:last-child { border-bottom: none; }
.sync-flag-on  { color: var(--color-success); font-weight: 600; }
.sync-flag-off { color: var(--color-text-muted); }

/* ---------- Login security note ---------- */
.login-security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    margin-top: 1.25rem;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
.login-security-note svg { width: 13px; height: 13px; color: var(--color-success); }

/* ---------- Sidebar section label upgrade ---------- */
.sidebar-section > h3 {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* ---------- Dark mode for new components ---------- */
[data-theme="dark"] .cust-filter-chip {
    background: rgba(99,102,241,0.15);
    border-color: rgba(99,102,241,0.35);
}
[data-theme="dark"] .category-pill {
    background: var(--color-surface);
}
[data-theme="dark"] .cart-summary-card-header,
[data-theme="dark"] .analytics-chart-header,
[data-theme="dark"] .sidebar-card-header,
[data-theme="dark"] .settings-privacy-card-header,
[data-theme="dark"] .navbar-notif-dropdown-header,
[data-theme="dark"] .navbar-notif-footer { background: var(--color-bg-subtle); }
@media (prefers-color-scheme: dark) {
    [data-theme="system"] .cust-filter-chip {
        background: rgba(99,102,241,0.15);
        border-color: rgba(99,102,241,0.35);
    }
    [data-theme="system"] .cart-summary-card-header,
    [data-theme="system"] .analytics-chart-header,
    [data-theme="system"] .sidebar-card-header,
    [data-theme="system"] .settings-privacy-card-header,
    [data-theme="system"] .navbar-notif-dropdown-header,
    [data-theme="system"] .navbar-notif-footer { background: var(--color-bg-subtle); }
}

/* Desktop-only category pill row on service list */
@media (max-width: 900px) {
    .cust-catalog-desktop-only { display: none; }
}

/* ============================================================
   UX IMPROVEMENTS — Sticky Form Bar, Table Headers, Disclosure
   ============================================================ */

/* ---------- Sticky Form Action Bar ---------- */
.sticky-form-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 150;
    background: var(--color-surface);
    border-top: 2px solid var(--color-border);
    box-shadow: 0 -4px 20px rgba(16, 24, 40, 0.08);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 2rem;
    transform: translateY(105%);
    transition: transform var(--transition-base);
    pointer-events: none;
}
.sticky-form-bar.sfb-visible {
    transform: translateY(0);
    pointer-events: auto;
}
.sfb-dirty-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-warning);
    flex-shrink: 0;
    display: none;
}
.sfb-dirty-dot.show { display: block; }
.sfb-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    display: none;
}
.sfb-label.show { display: block; }
.sfb-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-left: auto;
}
@media (max-width: 640px) {
    .sticky-form-bar { padding: 0.625rem 1rem; }
    .sfb-label { display: none !important; }
}
[data-theme="dark"] .sticky-form-bar {
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35);
}
@media (prefers-color-scheme: dark) {
    [data-theme="system"] .sticky-form-bar {
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35);
    }
}

/* ---------- Sticky Table Headers ---------- */
.table-sticky-head thead tr th,
.table-sticky-head thead tr td {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--color-bg-subtle);
    /* Hairline border replaces the border-bottom that disappears when sticky */
    box-shadow: 0 1px 0 var(--color-border);
}
[data-theme="dark"] .table-sticky-head thead tr th,
[data-theme="dark"] .table-sticky-head thead tr td,
[data-theme="system"] .table-sticky-head thead tr th,
[data-theme="system"] .table-sticky-head thead tr td { background: var(--color-surface); }

/* ── UX-LIST-STANDARD P3 — wide-table min-widths (force horizontal overflow so sticky cols are meaningful) ── */
.min-w-1000 { min-width: 1000px; }   /* org / contracts (8 cols) */
.min-w-1200 { min-width: 1200px; }   /* people (10 cols) */

/* (Frozen sticky first/last columns were removed — no template applies .dt-sticky-cols anymore;
   .dt-col-name/.dt-col-actions now only carry the actions-column sizing + row-type accents.) */

/* ── UX-LIST-STANDARD P3 — organizations list (ported from the deleted .org-table
   scoped block). IA-8: the org-type accent is ADDITIVE to the kept type badge —
   a left colour bar on the (sticky) first cell, plus the pill badge in the Type column. */
.data-table tbody tr.row-type-company  td:first-child { border-left: 3px solid var(--badge-info-text); }
.data-table tbody tr.row-type-customer td:first-child { border-left: 3px solid var(--badge-success-text); }
.data-table tbody tr.row-type-partner  td:first-child { border-left: 3px solid var(--badge-partner-text); }
.data-table tbody tr.row-type-vendor   td:first-child { border-left: 3px solid var(--badge-vendor-text); }

/* ── UX-LIST-STANDARD P3 — vendor contracts list (ported from the deleted
   .service-table-scoped .row-{status} block, renamed row-status-*). Additive
   to the kept Status badge, like the org-type accent above. */
.data-table tbody tr.row-status-active     td:first-child { border-left: 3px solid var(--badge-success-text); }
.data-table tbody tr.row-status-expiring   td:first-child { border-left: 3px solid var(--badge-warning-text); }
.data-table tbody tr.row-status-expired    td:first-child { border-left: 3px solid var(--color-danger); }
.data-table tbody tr.row-status-draft      td:first-child { border-left: 3px solid var(--color-border); }
.data-table tbody tr.row-status-terminated td:first-child { border-left: 3px solid var(--color-text-muted); }

/* Metric chips — the Teams/Members + Services count pills (identical to the old org block) */
.metric-chips { display: flex; gap: 0.375rem; flex-wrap: nowrap; align-items: center; }
.metric-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
    white-space: nowrap;
}
.metric-chip svg { width: 11px; height: 11px; opacity: 0.7; }
.metric-chips a { display: inline-flex; align-items: center; }

/* ---------- Advanced Options Toggle ---------- */
.advanced-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.35rem 0.75rem;
    cursor: pointer;
    margin-bottom: 0.75rem;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.advanced-toggle:hover {
    background: var(--color-bg-subtle);
    border-color: var(--color-border-hover);
}
.advanced-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}
.advanced-toggle[aria-expanded="true"] svg {
    transform: rotate(90deg);
}

/* ---------- Sortable Table Headers ---------- */
.sort-header {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.sort-header:hover { color: var(--color-primary); }
.sort-header.sort-active { color: var(--color-primary); }
.sort-header svg { opacity: 0.5; flex-shrink: 0; }
.sort-header.sort-active svg { opacity: 1; }

/* ---------- Slug Status Indicator ---------- */
.slug-status {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 500;
    margin-top: 0.2rem;
    min-height: 1.1em;  /* reserve space so form doesn't jump */
}
.slug-status.available { color: var(--color-success); }
.slug-status.taken { color: var(--color-danger); }
.slug-status.checking { color: var(--color-text-muted); }

/* ---------- Quick-ask chips (dashboard + catalog chat) ---------- */
.quick-ask-strip { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.quick-ask-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.35rem 0.75rem; border-radius: var(--radius);
    background: var(--color-bg-subtle); border: 1px solid var(--color-border);
    color: var(--color-text-secondary); font-size: var(--font-size-sm);
    text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s;
}
.quick-ask-chip:hover { background: var(--color-bg-alt); border-color: var(--color-primary); color: var(--color-primary); }
.quick-ask-chip [data-lucide] { width: 14px; height: 14px; }

/* ---------- AI Chat Floating Button + Panel ---------- */
.ai-chat-fab {
    position: fixed; bottom: calc(1.5rem + var(--fab-footer-gap, 0px)); right: 1.5rem; z-index: 200;
    width: 3.25rem; height: 3.25rem; border-radius: 50%;
    background: var(--color-primary-strong); color: #fff; border: none;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(16,24,40,.20); cursor: pointer;
    /* No `bottom` transition on the base rule: --fab-footer-gap tracks the footer
       continuously on scroll (set in main.js), and an eased bottom would lag the
       scroll. The discrete sticky-form-bar lift keeps its eased transition below. */
    transition: background .15s, transform .15s;
}
.ai-chat-fab:hover { background: var(--color-primary-strong-hover); transform: scale(1.06); }
.ai-chat-fab [data-lucide] { width: 22px; height: 22px; }
body:has(.sticky-form-bar.sfb-visible) .ai-chat-fab { bottom: calc(1.5rem + 3.75rem + var(--fab-footer-gap, 0px)); transition: bottom 400ms cubic-bezier(0.4, 0, 0.2, 1), background .15s, transform .15s; }

/* Guided-tour offer pill — UX-ONB2.4 Task 1.
   Fixed bottom-left, lifts above the footer (--fab-footer-gap, set in main.js),
   self-removes on dismiss. Global; appears only when guided_tour_offer is set. */
.tour-offer-pill {
    position: fixed; bottom: calc(1.5rem + var(--fab-footer-gap, 0px)); left: 1.5rem; z-index: 200;
    display: flex; align-items: center; gap: 0.25rem;
    max-width: min(22rem, calc(100vw - 3rem));
    padding: 0.375rem 0.5rem 0.375rem 0.75rem;
    background: var(--color-bg); color: var(--color-text);
    border: 1px solid var(--color-border); border-radius: 999px;
    box-shadow: var(--shadow-lg);
    animation: tour-offer-pill-in .25s ease;
}
.tour-offer-pill-link {
    display: flex; align-items: center; gap: 0.5rem;
    color: var(--color-text); text-decoration: none; font-size: 0.875rem; font-weight: 500;
}
.tour-offer-pill-link:hover { color: var(--color-primary); }
.tour-offer-pill-link [data-lucide] { color: var(--color-primary); flex-shrink: 0; }
.tour-offer-pill-link span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour-offer-pill-dismiss {
    display: flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; flex-shrink: 0;
    padding: 0; border: none; border-radius: 50%;
    background: transparent; color: var(--color-text-muted); cursor: pointer;
    transition: background .15s, color .15s;
}
.tour-offer-pill-dismiss:hover { background: var(--color-surface-hover, var(--color-border)); color: var(--color-text); }
@keyframes tour-offer-pill-in {
    from { opacity: 0; transform: translateY(0.5rem); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .tour-offer-pill { animation: none; }
}

.ai-chat-panel {
    position: fixed; top: 64px; right: 0; bottom: 0; width: 400px; z-index: 300;
    background: var(--color-bg);
    border-left: 1px solid var(--color-border);
    border-top: 1px solid var(--color-border);
    display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform .25s ease;
    box-shadow: -4px 0 24px rgba(16,24,40,.12);
}
.ai-chat-panel:not([hidden]) { transform: translateX(0); }
.ai-chat-panel[hidden] { display: flex !important; visibility: hidden; pointer-events: none; }
/* Pinned auto-open on load opens instantly (no slide-in) — class removed after first paint. */
.ai-chat-panel.ai-chat-no-anim { transition: none !important; }

.ai-chat-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.875rem 1rem; border-bottom: 1px solid var(--color-border);
    font-weight: 600; color: var(--color-text); gap: 0.5rem;
}
.ai-chat-panel-header [data-lucide] { width: 16px; height: 16px; color: var(--color-primary); }
.ai-chat-panel-close {
    background: none; border: none; cursor: pointer; color: var(--color-text-muted);
    padding: 0.25rem; display: flex; border-radius: var(--radius-sm);
}
.ai-chat-panel-close:hover { background: var(--color-bg-subtle); color: var(--color-text); }

/* Pin toggle in the catalog-assistant header — keeps the panel open across pages.
   Header icons are force-coloured --color-primary, so pinned vs unpinned is shown by opacity. */
.ai-chat-panel-pin {
    background: none; border: none; cursor: pointer; color: var(--color-text-muted);
    padding: 0.25rem; display: flex; border-radius: var(--radius-sm); opacity: 0.55;
}
.ai-chat-panel-pin:hover { background: var(--color-bg-subtle); opacity: 1; }
.ai-chat-panel-pin.is-pinned {
    color: var(--color-primary); opacity: 1;
    background: color-mix(in srgb, var(--color-primary) 18%, transparent);
}
/* Pin click feedback: a quick pop so toggling is obviously registered (click only, not on load). */
.ai-chat-panel-pin.ai-pin-animate { animation: ai-pin-pop .28s ease; }
@keyframes ai-pin-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.28); }
    100% { transform: scale(1); }
}

.ai-chat-panel-messages {
    flex: 1; overflow-y: auto; padding: 1rem 1.25rem;
    display: flex; flex-direction: column; gap: 0.75rem;
}
.ai-chat-panel-hint { color: var(--color-text-muted); font-size: var(--font-size-sm); text-align: center; margin-top: 1rem; }

.ai-chat-bubble { padding: 0.625rem 0.875rem; border-radius: var(--radius-lg); max-width: 92%; font-size: var(--font-size-sm); line-height: 1.5; }
.ai-chat-bubble.user { background: var(--color-primary-strong); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.ai-chat-bubble.assistant { background: var(--color-bg-subtle); color: var(--color-text); align-self: flex-start; border-bottom-left-radius: 4px; }
.ai-chat-bubble.loading { color: var(--color-text-muted); font-style: italic; }
.ai-chat-bubble ul, .ai-chat-bubble ol, .catalog-chat-bubble ul, .catalog-chat-bubble ol { margin: .25rem 0 .25rem .75rem; padding-left: 1rem; }
/* Shared AI chat reference chips — citations + structured service results.
   Used by ai-chat-render.js refChips() across all three assistant surfaces. */
.ai-refs { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; }
.ai-ref {
  display: inline-flex; align-items: center; gap: 0.25rem; max-width: 100%;
  padding: 0.15rem 0.55rem; border: 1px solid var(--color-border);
  border-radius: var(--radius-full); background: var(--color-surface);
  color: var(--color-primary); font-size: var(--font-size-sm);
  line-height: 1.5; text-decoration: none;
}
.ai-ref:hover { background: var(--color-surface-hover); text-decoration: none; }
.ai-ref-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-ref-meta { color: var(--color-text-muted); font-size: 0.85em; }
.ai-ref-more { align-self: center; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.ai-chat-bubble li, .catalog-chat-bubble li { margin-bottom: .2rem; }

.ai-chat-panel-input {
    display: flex; gap: 0.5rem; padding: 0.75rem;
    border-top: 1px solid var(--color-border); align-items: center;
}
.ai-chat-panel-input input {
    flex: 1;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    outline: none;
    font-family: inherit;
    color-scheme: light dark;
    transition: border-color .15s;
}
.ai-chat-panel-input input::placeholder { color: var(--color-text-muted); opacity: 1; }
.ai-chat-panel-input input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); background: var(--color-surface); }
[data-theme="dark"] .ai-chat-panel-input input { background: var(--color-bg-subtle); color: var(--color-text); }
@media (prefers-color-scheme: dark) { .ai-chat-panel-input input { background: var(--color-bg-subtle); color: var(--color-text); } }

.ai-chat-backdrop {
    position: fixed; inset: 0; z-index: 299;
    /* Transparent: the assistant is a side panel, so it must NOT dim/tint the page or
       the navbar (z-index 100, which sits below this). It still catches outside clicks
       to close the unpinned panel. */
    background: transparent;
}
.ai-chat-backdrop[hidden] { display: none; }

@media (max-width: 640px) {
    .ai-chat-panel { width: 100%; }
}

/* ---------- Command palette AI mode ---------- */
.cp-ai-hint { padding: 0.75rem 1rem; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.cp-ai-answer { padding: 0.75rem 1rem 0.25rem; color: var(--color-text); font-size: var(--font-size-sm); line-height: 1.6; }
kbd { display: inline-block; padding: 0 0.35rem; border: 1px solid var(--color-border); border-radius: 4px; font-size: 0.75rem; background: var(--color-bg-subtle); }

/* ==========================================================================
   Catalog Assistant — dedicated /services/ask/ split-view page
   ========================================================================== */

.catalog-chat-layout {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: calc(100vh - 64px);
    padding: 2rem 1.5rem;
    background: var(--color-bg);
}

/* Left: service cards — hidden in chat-only layout */
.catalog-chat-catalog {
    display: none;
}
.catalog-chat-catalog .page-header { margin-bottom: 1.25rem; }

/* AI chat panel — centered card */
.catalog-chat-panel {
    position: static;
    width: 100%;
    max-width: 760px;
    height: calc(100vh - 64px - 4rem);
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(16,24,40,.08);
}

.catalog-chat-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.15);
    background: linear-gradient(135deg, var(--color-primary-strong, #2563eb) 0%, #6366f1 100%);
    color: #fff;
    position: relative;
    flex-shrink: 0;
}
.catalog-chat-panel-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: var(--font-size-sm);
    letter-spacing: .01em;
}
.catalog-chat-panel-title [data-lucide] { width: 16px; height: 16px; }

.catalog-chat-hist-btn {
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    border-radius: var(--radius);
    padding: 0.25rem 0.6rem;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}
.catalog-chat-hist-btn:hover { background: rgba(255,255,255,.25); }
.catalog-chat-hist-btn [data-lucide] { width: 12px; height: 12px; }

/* Session history popover */
.catalog-chat-history-popover {
    position: absolute;
    top: calc(100% + 4px);
    right: 0.75rem;
    width: 240px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(16,24,40,.12);
    z-index: 60;
    overflow: hidden;
    display: none;
    flex-direction: column;
    max-height: 300px;
    overflow-y: auto;
}
.catalog-chat-history-popover.open { display: flex; }
.catalog-chat-history-item {
    display: block;
    flex-shrink: 0;
    padding: 0.5rem 0.875rem;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}
.catalog-chat-history-item:last-child { border-bottom: none; }
.catalog-chat-history-item:hover { background: var(--color-bg-subtle); }
.catalog-chat-history-item .cc-hist-time { font-size: 10px; color: var(--color-text-muted); margin-left: 0.25rem; }
.catalog-chat-history-new {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.875rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    background: none;
    width: 100%;
    border-left: none;
    border-right: none;
    border-top: none;
}
.catalog-chat-history-new:hover { background: var(--color-bg-subtle); }
.catalog-chat-history-new [data-lucide] { width: 13px; height: 13px; }

/* Messages area */
.catalog-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    scroll-behavior: smooth;
}

/* Empty state */
.catalog-chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 0.5rem;
    padding: 2rem 1rem 1rem;
    text-align: center;
}
.catalog-chat-empty [data-lucide] { width: 36px; height: 36px; color: var(--color-primary); opacity: .6; margin-bottom: 0.25rem; }
.catalog-chat-empty-title { font-weight: 600; color: var(--color-text); font-size: var(--font-size-sm); }
.catalog-chat-empty-sub { font-size: var(--font-size-xs, 12px); color: var(--color-text-muted); }

/* Quick-ask chips */
.catalog-chat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.75rem;
}
.catalog-chat-chip {
    font-size: 11px;
    padding: 0.3rem 0.7rem;
    border-radius: 2rem;
    border: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    color: var(--color-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s, color .15s, background .15s;
    font-weight: 500;
}
.catalog-chat-chip:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(37,99,235,.06);
}

/* Message rows */
.catalog-chat-msg {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    animation: ccFadeIn .2s ease both;
}
.catalog-chat-msg.user { flex-direction: row-reverse; }
.catalog-chat-msg-body { display: flex; flex-direction: column; gap: 0.2rem; max-width: 85%; }
.catalog-chat-msg.user .catalog-chat-msg-body { align-items: flex-end; }

/* Avatars */
.catalog-chat-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 2px;
}
.catalog-chat-avatar.user { background: var(--color-primary-strong); color: #fff; }
.catalog-chat-avatar.assistant { background: var(--color-bg-subtle); border: 1px solid var(--color-border); color: var(--color-primary); }
.catalog-chat-avatar.assistant [data-lucide] { width: 13px; height: 13px; }

/* Bubbles */
.catalog-chat-bubble {
    padding: 0.625rem 0.9rem;
    border-radius: 1.125rem;
    font-size: var(--font-size-sm);
    line-height: 1.55;
    word-break: break-word;
}
.catalog-chat-msg.user .catalog-chat-bubble {
    background: var(--color-primary-strong);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.catalog-chat-msg.assistant .catalog-chat-bubble {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.catalog-chat-bubble ul, .catalog-chat-bubble ol { margin: 0.375rem 0 0 0; padding-left: 1.25rem; }
.catalog-chat-bubble li { margin-bottom: 0.2rem; }
.catalog-chat-ts {
    font-size: 10px;
    color: var(--color-text-muted);
    padding: 0 0.25rem;
}

/* Typing indicator */
.catalog-chat-typing-bubble {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0.6rem 0.875rem;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: 1.125rem;
    border-bottom-left-radius: 4px;
    width: fit-content;
}
.catalog-chat-typing-bubble span {
    width: 6px;
    height: 6px;
    background: var(--color-text-muted);
    border-radius: 50%;
    display: inline-block;
    animation: ccTypingDot 1.2s infinite ease-in-out both;
}
.catalog-chat-typing-bubble span:nth-child(2) { animation-delay: .2s; }
.catalog-chat-typing-bubble span:nth-child(3) { animation-delay: .4s; }

/* Input area */
.catalog-chat-input-area {
    display: flex;
    gap: 0.625rem;
    padding: 0.875rem 1rem 1rem;
    border-top: 1px solid var(--color-border);
    align-items: flex-end;
    flex-shrink: 0;
    background: var(--color-surface);
}
.catalog-chat-input {
    flex: 1;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.625rem 0.875rem;
    resize: none;
    font-size: var(--font-size-sm);
    background: var(--color-bg-subtle);
    outline: none;
    line-height: 1.5;
    max-height: 120px;
    overflow-y: auto;
    font-family: inherit;
    color: var(--color-text);
    transition: border-color .15s, background .15s;
    color-scheme: light dark;
}
.catalog-chat-input:focus {
    border-color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
[data-theme="dark"] .catalog-chat-input { background: var(--color-bg-subtle); color: var(--color-text); }
@media (prefers-color-scheme: dark) {
    .catalog-chat-input { background: var(--color-bg-subtle); color: var(--color-text); }
}
.catalog-chat-input::placeholder { color: var(--color-text-muted); opacity: 1; }
.catalog-chat-send {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary-strong);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s, transform .1s;
}
.catalog-chat-send:hover { background: var(--color-primary-strong-hover); }
.catalog-chat-send:active { transform: scale(.94); }
.catalog-chat-send [data-lucide] { width: 16px; height: 16px; }
.catalog-chat-send:disabled { opacity: .45; cursor: not-allowed; }

/* Animations */
@keyframes ccFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ccTypingDot { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* Dark mode adjustments */
[data-theme="dark"] .catalog-chat-msg.assistant .catalog-chat-bubble {
    background: var(--color-bg-subtle);
    border-color: var(--color-border);
}
@media (prefers-color-scheme: dark) {
    .catalog-chat-msg.assistant .catalog-chat-bubble {
        background: var(--color-bg-subtle);
        border-color: var(--color-border);
    }
}

/* Mobile: full-screen chat */
@media (max-width: 640px) {
    .catalog-chat-layout {
        padding: 0;
        min-height: calc(100vh - 64px);
    }
    .catalog-chat-panel {
        max-width: 100%;
        height: calc(100vh - 64px);
        border-radius: 0;
        border: none;
        box-shadow: none;
    }
}

/* ── Flow Designer ──────────────────────────────────────────────────── */

/* Full-page form wrapper */
#flow-form {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Top bar */
.flow-top-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    flex-shrink: 0;
    min-height: 52px;
}
.flow-top-bar-title {
    flex: 1;
    font-size: var(--font-size-sm);
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.5rem;
    background: transparent;
    color: var(--color-text);
    min-width: 0;
    max-width: 320px;
}
.flow-top-bar-title:hover,
.flow-top-bar-title:focus {
    border-color: var(--color-border);
    background: var(--color-bg-subtle);
    outline: none;
}
.flow-top-bar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Three-column shell */
.flow-designer-shell {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ── Palette (left sidebar) ── */
.flow-palette {
    width: 220px;
    flex-shrink: 0;
    border-right: 1px solid var(--color-border);
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.flow-palette-search {
    padding: 0.5rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
#palette-groups-container {
    flex: 1;
    overflow-y: auto;
}
.flow-palette-group {
    border-bottom: 1px solid var(--color-border);
}
.flow-palette-group-header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.4rem 0.75rem;
    background: none;
    border: none;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    cursor: pointer;
    text-align: left;
}
.flow-palette-group-header:hover {
    background: var(--color-bg-subtle);
    color: var(--color-text-secondary);
}
.flow-palette-group-header svg,
.flow-palette-group-header .pgrp-chevron {
    width: 12px !important;
    height: 12px !important;
    max-width: 12px;
    max-height: 12px;
    flex-shrink: 0;
}
.flow-palette-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 8px 8px;
}
.flow-palette-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    cursor: grab;
    user-select: none;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    transition: background 0.1s;
}
.flow-palette-item:hover {
    background: var(--color-bg-subtle);
    color: var(--color-text);
}
.flow-palette-item:active {
    cursor: grabbing;
}

/* ── Canvas (centre) ── */
.flow-canvas-wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
    background-color: var(--color-bg-alt);
    background-image: radial-gradient(var(--color-border) 1px, transparent 0);
    background-size: 20px 20px;
}
#flow-canvas {
    position: absolute;
    inset: 0;
    cursor: default;
}
.flow-canvas-inner {
    position: absolute;
    top: 0;
    left: 0;
    /* transform applied by JS */
    transform-origin: 0 0;
}
.flow-edges-svg {
    position: absolute;
    top: 0;
    left: 0;
    /* no z-index — first in DOM so naturally behind nodes, which are injected after */
    width: 4000px;
    height: 4000px;
    pointer-events: none;
    overflow: visible;
}
.flow-labels-svg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5; /* above nodes so labels are always readable */
    width: 4000px;
    height: 4000px;
    pointer-events: none;
    overflow: visible;
}
.flow-edges-svg path.flow-edge {
    pointer-events: stroke;
    stroke-width: 2;
    fill: none;
    cursor: pointer;
}
.flow-edges-svg path.flow-edge:hover {
    stroke-width: 3;
    opacity: 0.8;
}
.flow-edges-svg path.flow-edge-hitarea {
    pointer-events: all;
    stroke-width: 8;
    stroke: rgba(0, 0, 0, 0.008);
    fill: none;
    cursor: pointer;
}
.flow-edges-svg path.flow-edge-selected {
    stroke: var(--color-danger) !important;
    stroke-width: 3 !important;
}

/* Empty state */
.flow-canvas-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Zoom toolbar */
.flow-canvas-toolbar {
    position: absolute;
    bottom: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 10;
}
.zoom-label {
    font-size: var(--font-size-xs);
    min-width: 36px;
    text-align: center;
    color: var(--color-text-secondary);
}

/* ── Nodes ── */
.flow-node {
    position: absolute;
    width: 200px;
    border-radius: var(--radius);
    border: 2px solid transparent;
    background: var(--color-bg);
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.12);
    cursor: pointer;
    user-select: none;
}
.flow-node.selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15), 0 2px 8px rgba(16, 24, 40, 0.12);
}
.flow-node.run-completed { border-color: var(--color-success); }
.flow-node.run-failed    { border-color: var(--color-danger); }
.flow-node.run-running   { border-color: var(--color-warning); }
.flow-node.run-skipped   { border-color: var(--color-border); opacity: 0.6; }
.flow-node.debug-active  { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent); animation: debug-pulse 1s ease-in-out infinite; }
@keyframes debug-pulse {
    0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent); }
    50%       { box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-primary) 10%, transparent); }
}

/* ── Debug panel ─────────────────────────────────────────────────────────── */
.flow-debug-panel {
    display: none;
    position: fixed;
    top: 0; right: 280px; bottom: 0; /* sits left of the 280px inspector */
    width: 360px;
    z-index: 200;
    flex-direction: column;
    background: var(--color-bg);
    border-left: 1px solid var(--color-border);
    box-shadow: -4px 0 20px rgba(0,0,0,.2);
    overflow: hidden;
}
.flow-debug-panel.is-open { display: flex; }
.flow-debug-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    flex-shrink: 0;
}
.flow-debug-panel-title {
    font-weight: 600;
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.flow-debug-section {
    flex: 1;
    overflow-y: auto;
    padding: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.flow-debug-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin: 0;
}
.flow-debug-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
}
.flow-debug-textarea {
    width: 100%;
    flex: 1;
    min-height: 160px;
    font-family: ui-monospace, monospace;
    font-size: 11px;
    line-height: 1.5;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.5rem;
    background: var(--color-bg-subtle);
    color: var(--color-text);
    resize: vertical;
    color-scheme: dark light;
}
.flow-debug-error {
    padding: 0.5rem 0.625rem;
    background: #fee2e2;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    color: #b91c1c;
}
[data-theme="dark"] .flow-debug-error { background: #3f1010; color: #f87171; }
.flow-debug-running {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.flow-debug-run-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    background: var(--color-bg-subtle);
}
.flow-debug-log {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: var(--font-size-xs);
}
.flow-debug-log-entry {
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-subtle);
}
.flow-debug-ctx-wrap {
    padding: 0.75rem 0.875rem;
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}
.flow-debug-ctx {
    font-size: 10px;
    max-height: 160px;
    overflow: auto;
    background: var(--color-bg-subtle);
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    margin: 0;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.flow-node-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 6px 10px;
    border-radius: calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0;
    background: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border);
    cursor: grab;
}
.flow-node-header:active {
    cursor: grabbing;
}
.flow-node-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.flow-node-body {
    padding: 4px 10px 6px;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    min-height: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Ports ── */
.flow-port {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--color-bg);
    background: var(--color-primary);
    cursor: crosshair;
    z-index: 2;
    opacity: 0.4;
    transition: opacity 120ms, transform 120ms;
}
/* Expand invisible hit zone via ::before without growing the visible dot */
.flow-port::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
}
.flow-node:hover .flow-port { opacity: 0.8; }
.flow-port:hover { opacity: 1; transform: scale(1.5); }

.flow-port.port-top    { top: -7px;    left: 50%; transform: translateX(-50%); }
.flow-port.port-bottom { bottom: -7px; left: 50%; transform: translateX(-50%); }
.flow-port.port-left   { left: -7px;   top: 50%;  transform: translateY(-50%); }
.flow-port.port-right  { right: -7px;  top: 50%;  transform: translateY(-50%); }
.flow-port.port-top:hover    { opacity: 1; transform: translateX(-50%) scale(1.5); }
.flow-port.port-bottom:hover { opacity: 1; transform: translateX(-50%) scale(1.5); }
.flow-port.port-left:hover   { opacity: 1; transform: translateY(-50%) scale(1.5); }
.flow-port.port-right:hover  { opacity: 1; transform: translateY(-50%) scale(1.5); }

/* Node error state (highlighted by save-error JS feedback) */
.flow-node.has-error { outline: 2px solid var(--color-danger); outline-offset: 2px; }

/* Keyboard focus ring — visible outline when a node is focused via Tab */
.flow-node:focus { outline: none; }
.flow-node:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.flow-node:focus .flow-port { opacity: 1; }

/* Reduced motion: keep ports visible, skip transitions */
@media (prefers-reduced-motion: reduce) {
    .flow-port { opacity: 0.6; transition: none; }
    .flow-node:hover .flow-port { opacity: 0.9; }
}

/* ── Inspector (right sidebar) ── */
.flow-inspector {
    width: 280px;
    flex-shrink: 0;
    border-left: 1px solid var(--color-border);
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.flow-inspector-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    font-weight: 600;
    flex-shrink: 0;
}
.flow-inspector-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--color-text-muted);
    padding: 2rem;
    text-align: center;
    font-size: var(--font-size-sm);
    gap: 0.5rem;
}
.flow-inspector-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.flow-inspector-body label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--color-text-secondary);
}
.flow-inspector-body input[type="text"],
.flow-inspector-body input[type="number"],
.flow-inspector-body select,
.flow-inspector-body textarea {
    width: 100%;
    font-size: var(--font-size-xs);
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
}
.flow-inspector-body input[type="text"]:focus,
.flow-inspector-body select:focus,
.flow-inspector-body textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}
.flow-inspector-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}
.flow-inspector-test-result {
    margin: 0 1rem 1rem;
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--color-bg-subtle);
    font-size: var(--font-size-xs);
    font-family: monospace;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
}

/* ── Variable Picker Popover ── */
.flow-var-picker {
    position: fixed;
    z-index: 1000;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.15);
    max-height: 200px;
    overflow-y: auto;
    min-width: 220px;
}
.flow-var-item {
    padding: 6px 10px;
    cursor: pointer;
    font-size: var(--font-size-xs);
    font-family: monospace;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
}
.flow-var-item:last-child { border-bottom: none; }
.flow-var-item:hover {
    background: var(--color-bg-subtle);
    color: var(--color-text);
}

/* ── Dark mode overrides ── */
[data-theme="dark"] .flow-canvas-wrap {
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 0);
}
[data-theme="dark"] .flow-node {
    background: var(--color-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .flow-node.selected {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25), 0 2px 8px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .flow-inspector-test-result {
    background: var(--color-bg-alt);
}
[data-theme="dark"] .flow-var-picker {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* ── Org list popover (provider list table) ─────────────────── */
details.org-list-popover {
    position: relative;
    display: inline-block;
}
details.org-list-popover > summary {
    list-style: none;
    cursor: pointer;
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    user-select: none;
    white-space: nowrap;
}
details.org-list-popover > summary::-webkit-details-marker { display: none; }
details.org-list-popover > summary:hover { text-decoration: underline; }
.org-list-popover-items {
    position: fixed;
    z-index: 500;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    min-width: 180px;
    white-space: nowrap;
    padding: 0.375rem 0;
}
.org-list-popover-item {
    display: block;
    padding: 0.35rem 0.85rem;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    text-decoration: none;
}
.org-list-popover-item:hover {
    background: var(--color-bg-subtle);
    color: var(--color-primary);
}

/* ── Approval Chain Designer (V6) ───────────────────────────────── */

#step-formset {
    display: none !important;
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

#approval-designer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-height: 80px;
}

.acd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

.acd-step-card {
    position: relative;
    width: 100%;
    max-width: 640px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    transition: box-shadow 0.15s, border-color 0.15s;
    cursor: grab;
    overflow: hidden;
}
.acd-step-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-primary);
    opacity: 0.18;
    transition: opacity var(--transition-fast);
}
.acd-step-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.acd-step-card.acd-dragging {
    opacity: 0.4;
}
.acd-step-card.acd-drag-over {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary);
}

.acd-step-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
}

.acd-step-badge {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm, 6px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.acd-step-info {
    flex: 1;
    min-width: 0;
}
.acd-step-name {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.acd-step-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.acd-step-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.acd-step-sla {
    display: flex;
    align-items: center;
    gap: 3px;
}
.acd-step-breach {
    font-size: 11px;
    color: var(--color-text-faint);
}

.acd-step-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.acd-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    border-radius: var(--radius-sm, 6px);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}
.acd-btn-icon:hover {
    background: var(--color-bg-subtle);
    color: var(--color-text);
}
.acd-btn-delete:hover {
    color: var(--color-danger);
    background: rgba(217, 45, 32, 0.08);
}

.acd-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--color-text-faint);
    cursor: grab;
}
.acd-drag-handle:active { cursor: grabbing; }

/* Connector line between cards */
.acd-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 32px;
    position: relative;
}
.acd-connector-line {
    width: 2px;
    flex: 1;
    background: var(--color-border);
}
.acd-connector-arrow {
    width: 16px;
    height: 16px;
    color: var(--color-text-faint);
    flex-shrink: 0;
}

/* Inline editor */
.acd-step-editor {
    border-top: 1px solid var(--color-border);
    padding: 1rem;
    background: var(--color-bg-subtle);
    border-radius: 0 0 var(--radius) var(--radius);
    user-select: text;
    -webkit-user-select: text;
}
.acd-editor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.acd-editor-field label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}
.acd-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.75rem;
    font-size: var(--font-size-sm);
    font-family: inherit;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 6px);
    background: var(--color-bg);
    color: var(--color-text);
    color-scheme: light dark;
    -webkit-appearance: none;
}
.acd-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.acd-editor-field.acd-hidden {
    display: none !important;
}

/* Add step button */
.acd-add-wrap {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    width: 100%;
}
.acd-add-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Dark mode */
[data-theme="dark"] .acd-step-card {
    background: var(--color-bg-alt);
}
[data-theme="dark"] .acd-step-editor {
    background: var(--color-bg);
}
[data-theme="dark"] .acd-input {
    background: var(--color-bg-alt);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .acd-step-card {
        background: var(--color-bg-alt);
    }
    :root:not([data-theme="light"]) .acd-step-editor {
        background: var(--color-bg);
    }
    :root:not([data-theme="light"]) .acd-input {
        background: var(--color-bg-alt);
    }
}

/* ============================================================
   CSP-compliant utility classes
   Replaces inline style="" attributes blocked by style-src-attr.
   ============================================================ */

/* --- Icon sizing (canonical 6-size scale — phase UX-ICONS) --- */
/* .icon-sm   12px  — dense table cells, inline labels
   .icon-md   14px  — inline with body text
   .icon-lg   18px  — buttons, nav, default
   .icon-xl   24px  — card headers, prominent actions
   .icon-2xl  40px  — empty states, hero callouts
   .icon-3xl  48px  — setup screens, onboarding, full-page empty states
   Legacy aliases (icon-10 .. icon-64, icon-13-inline, icon-14v, icon-xs,
   icon-md-inline, icon-xs-inline) live below and map into this scale.
*/
.icon-sm  { width: 12px; height: 12px; }
.icon-md  { width: 14px; height: 14px; }
.icon-lg  { width: 18px; height: 18px; }
.icon-xl  { width: 24px; height: 24px; }
.icon-2xl { width: 40px; height: 40px; }
.icon-3xl { width: 48px; height: 48px; }
/* inline variants keep a small vertical-align nudge so they sit on the baseline */
.icon-md-inline { width: 14px; height: 14px; vertical-align: -2px; }
.icon-md-va     { width: 14px; height: 14px; vertical-align: -2px; }
.icon-xs        { width: 12px; height: 12px; }        /* legacy alias -> icon-sm */

/* Icon baseline/margin utilities migrated from <style nonce> blocks (T4) */
.icon-inline-sm      { vertical-align: -1px; }
.icon-inline-heading { vertical-align: -3px; margin-right: 6px; }
.icon-header-inline  { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }
.icon-warning-inline { vertical-align: -1px; color: var(--color-warning); margin-right: 3px; }
.icon-title-inline   { vertical-align: -3px; margin-right: 0.25rem; }

/* --- Demo banner --- */
.demo-banner {
    display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;
    padding: 0.7rem 1rem; border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-info) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-info) 25%, transparent);
}
.demo-banner-icon  { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-info); }
.demo-banner-body  { flex: 1; font-size: var(--font-size-sm); }
.demo-banner-form  { margin: 0; }
.demo-banner-dismiss {
    background: none; border: none; cursor: pointer;
    color: var(--color-text-muted); padding: 0.1rem; display: flex; align-items: center;
}

/* --- Page header actions row --- */
.page-header-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

/* --- Button group flush (no gap) --- */
.btn-group-flush { display: inline-flex; gap: 0; }

/* --- Column chooser --- */
.col-chooser-wrap { display: none; position: relative; }
.col-chooser-body { padding: 0.5rem; max-height: 400px; overflow-y: auto; min-width: 200px; }
.col-chooser-label { display: flex; align-items: center; padding: 0.25rem 0; cursor: pointer; }
.col-chooser-text  { margin-left: 0.5rem; }

/* --- Stats strip muted icon --- */
.stats-strip-icon-muted { background: var(--color-bg-subtle); color: var(--color-text-muted); }

/* --- Filter bar helpers --- */
.filter-clear-btn   { padding: 0.15rem 0.4rem; font-size: var(--font-size-xs); }
.filter-preset-save { padding: 0.25rem 0.5rem; }
.filter-groupby     { min-width: 140px; }

/* --- Service card helpers --- */
.bulk-check-card {
    width: 16px; height: 16px; flex-shrink: 0; margin-right: 4px; cursor: pointer;
}
.service-card-link { flex: 1; min-width: 0; }

/* --- Table view --- */
.d-none { display: none !important; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.cursor-grabbing { cursor: grabbing; }
.flow-node-header-icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--node-accent); }
.align-items-center { align-items: center; }
.align-items-start { align-items: flex-start; }
.flex-wrap { flex-wrap: wrap; }
.gap-md { gap: 1rem; }
.mt-sm { margin-top: 0.5rem; }
.btn-danger-outline { color: var(--color-danger); border-color: var(--color-danger); }
.btn-danger-outline:hover { background: var(--color-danger); color: #fff; }

/* --- CSP-safe utility classes (replaces inline styles in JS) --- */
.overflow-hidden { overflow: hidden; }
.cursor-col-resize { cursor: col-resize; }
.catalog-loading { opacity: 0.5; transition: opacity 0.12s ease; }

/* Component builder */
.inventory-loading-msg { padding: 0.5rem 1.5rem; font-size: 0.8rem; color: var(--color-text-muted); }
.inventory-empty-msg { padding: 0.35rem 1.5rem; font-size: 0.75rem; color: var(--color-text-muted); }

/* Approval chain designer */
.acd-empty-icon { width: 40px; height: 40px; color: var(--color-text-muted); }
.acd-empty-title { margin: 0.75rem 0 0; color: var(--color-text-muted); }
.acd-empty-subtitle { font-size: var(--font-size-xs); color: var(--color-text-faint); }
.acd-badge-icon { color: #fff; }
.acd-editor-actions { margin-top: 0.75rem; display: flex; gap: 0.5rem; }

/* IAM group search */
.iam-search-error { color: var(--color-danger); padding: 0.25rem; }
.iam-search-empty { color: var(--color-text-muted); padding: 0.25rem; }
.iam-group-list { border: 1px solid var(--color-border); border-radius: 6px; max-height: 200px; overflow-y: auto; }
.iam-group-option { padding: 0.5rem 0.75rem; cursor: pointer; border-bottom: 1px solid var(--color-border); }
.iam-group-option:hover { background: var(--color-bg-hover, #f5f5f5); }

/* Field mapper */
.fm-error { color: var(--color-danger); }
.bulk-action-bar {
    display: none; width: 100%; box-sizing: border-box;
    background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border);
    padding: 0.625rem 1rem; justify-content: flex-end;
}
.bulk-action-col  { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; }
.bulk-action-row  { display: flex; gap: 0.5rem; flex-wrap: nowrap; }
.bulk-count       { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.th-checkbox      { width: 40px; }

/* --- Table cell helpers --- */
.cell-flex   { display: flex; align-items: center; gap: 0.5rem; }
.cell-name   { font-weight: 500; }
.cell-tags   { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.cell-gap-xs { margin-left: 0.25rem; }

/* --- Text utilities --- */
.fw-semibold  { font-weight: 600; }
.pos-relative { position: relative; }

/* --- Deprecate / bulk modal --- */
.deprecate-overlay {
    display: none; position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,0.55); align-items: center; justify-content: center;
}
.deprecate-dialog {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: 1.5rem; max-width: 520px; width: 90%;
    max-height: 80vh; overflow-y: auto; box-shadow: var(--shadow-lg);
}
.deprecate-title  { margin: 0 0 0.75rem; color: var(--color-warning, #f59e0b); }
.deprecate-text   { margin: 0 0 0.75rem; font-size: var(--font-size-sm); }
.deprecate-list   { margin: 0 0 1rem; padding-left: 1.25rem; font-size: var(--font-size-sm); line-height: 1.7; }
.deprecate-check  { margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; font-size: var(--font-size-sm); }
.deprecate-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }

/* --- Navbar helpers (base.html CSP compliance) --- */
.nav-sub-divider {
    border-top: 1px solid var(--color-border);
    margin-top: 0.25rem; padding-top: 0.25rem;
}
.nav-link-divider {
    border-top: 1px solid var(--color-border);
    margin-top: 0.25rem; padding-top: 0.5rem;
}
.nav-link-divider-warning {
    color: var(--color-warning);
    border-top: 1px solid var(--color-border);
    margin-top: 0.25rem; padding-top: 0.5rem;
}
.nav-dropdown-tasks   { min-width: 220px; }
.nav-dropdown-create  { min-width: 180px; }
.nav-dropdown-user    { min-width: 160px; }
.nav-create-btn       { width: 14px; height: 14px; stroke-width: 2.5; }
.user-avatar-btn      { padding: 0; border: none; cursor: pointer; }

/* --- AI chat panel helpers --- */
.ai-clear-btn {
    margin-left: auto; font-size: .75rem; padding: .25rem .5rem; opacity: .7;
}
.ai-quick-ask-pad { padding: 0 0.75rem; }

/* --- Support access banner --- */
.support-banner     { background: var(--color-warning); color: #000; }
.support-banner-form { display: inline; }
.support-banner-btn { background: #000; color: #fff; }

/* ============================================
   Solution List — CSP-safe utility classes
   ============================================ */

/* Page header layout */
.sol-page-header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.5rem; }
.sol-header-actions { display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center; }

/* Icon sizing — legacy aliases (retained during UX-ICONS migration window).
   Each maps into the canonical .icon-sm/.icon-md/.icon-lg/.icon-xl/.icon-2xl/.icon-3xl
   scale defined above. T2c removes these once every template reference is gone. */
.icon-14  { width: 14px; height: 14px; }                                   /* -> icon-md */
.icon-14v { width: 14px; height: 14px; vertical-align: -2px; }             /* -> icon-md + va */
.icon-12  { width: 12px; height: 12px; }                                   /* -> icon-sm */
.icon-11  { width: 12px; height: 12px; }                                   /* -> icon-sm (was 11, +1 align) */
.icon-16  { width: 18px; height: 18px; }                                   /* -> icon-lg (was 16, +2) */

/* View mode toggle */
.sol-btn-group-flush { display:inline-flex; gap:0; }

/* Column chooser dropdown */
.sol-col-chooser { display:none; position:relative; }
.sol-col-menu-inner { padding:0.5rem; max-height:400px; overflow-y:auto; min-width:180px; }
.sol-col-label { display:flex; align-items:center; padding:0.25rem 0; cursor:pointer; }
.sol-col-label-text { margin-left:0.5rem; }

/* Stats strip inactive */
.sol-stats-icon-inactive { background:var(--color-bg-subtle); color:var(--color-text-muted); }

/* Filter bar */
.sol-filter-clear { padding:0.15rem 0.4rem; font-size:var(--font-size-xs); }
.sol-dropdown-rel { position:relative; }
.sol-save-btn { padding:0.25rem 0.5rem; }
.sol-groupby { min-width:140px; }

/* Card view */
.sol-card-link { flex:1; min-width:0; }
.sol-card-icon-mr { margin-right:4px; }
.sol-card-cost { font-size:var(--font-size-sm); }
.sol-card-action-flex { flex:1; text-align:center; }

/* Table view */
.sol-table-hidden { display:none; }
/* UX-LIST-STANDARD P2 Task 3: generic safe bulk-select bar. The bar is hidden
   until data-table.js toggles .is-visible when ≥1 row on the page is selected.
   The attribute+class selector outranks any single-class base (e.g. .sol-bulk-bar)
   so display:flex wins on show. */
[data-bulk-bar] { display:none; }
[data-bulk-bar].is-visible { display:flex; }
.sol-bulk-bar { display:none; width:100%; box-sizing:border-box; background:var(--color-bg-subtle); border-bottom:1px solid var(--color-border); padding:0.625rem 1rem; justify-content:flex-end; }
.sol-bulk-inner { display:flex; flex-direction:column; align-items:flex-end; gap:0.25rem; }
.sol-bulk-actions { display:flex; gap:0.5rem; flex-wrap:nowrap; }
.sol-bulk-count { font-size:var(--font-size-xs); color:var(--color-text-muted); }
.sol-th-check { width:40px; }
.sol-sort-header { cursor:pointer; }

/* Table cell helpers */
.sol-cell-name { display:flex; align-items:center; gap:0.5rem; }
.sol-name-link { font-weight:500; }
.sol-text-muted { color:var(--color-text-muted); }
.sol-pill-static { cursor:default; pointer-events:none; }

/* Group header (JS-generated) */
.sol-group-header-td { background:var(--color-bg-subtle); font-weight:600; font-size:var(--font-size-sm); padding:0.4rem 0.75rem; color:var(--color-text-secondary); }

/* ── Component Catalogue ───────────────────────────────────────────────────── */

/* Stats strip — selected state (clickable stat = filter) */
.stats-strip-card.card-selected { outline:2px solid var(--color-primary); outline-offset:-2px; }

/* Stats strip — component-type icon colors */
.stats-strip-icon-comp-library   { background:rgba(99,102,241,0.12); color:var(--color-primary); }
.stats-strip-icon-comp-api       { background:rgba(14,165,233,0.12); color:var(--badge-info-text); }
.stats-strip-icon-comp-database  { background:rgba(34,197,94,0.12);  color:var(--badge-success-text); }
.stats-strip-icon-comp-team      { background:rgba(217,119,6,0.12);  color:#d97706; }

/* Top accent bar — card view (overrides ::before on .service-card) */
.service-card.comp-type-library::before          { background:var(--color-primary); opacity:1; }
.service-card.comp-type-api::before              { background:var(--badge-info-text); opacity:1; }
.service-card.comp-type-database::before         { background:var(--badge-success-text); opacity:1; }
.service-card.comp-type-team::before             { background:#d97706; opacity:1; }
.service-card.comp-type-microservice::before     { background:var(--badge-partner-text, #0E7090); opacity:1; }
.service-card.comp-type-saas::before             { background:var(--badge-vendor-text, #0891b2); opacity:1; }
.service-card.comp-type-os_package::before       { background:#84cc16; opacity:1; }
.service-card.comp-type-container::before        { background:#0ea5e9; opacity:1; }
.service-card.comp-type-runtime::before          { background:#f97316; opacity:1; }
.service-card.comp-type-framework::before        { background:#8b5cf6; opacity:1; }
.service-card.comp-type-internal_service::before { background:#64748b; opacity:1; }

/* Left accent border on table rows removed (P2 review fix #2): component rows now
   match services/products rows — clean, just the .data-table zebra. The card-view
   ::before accent above is kept intentionally. */

/* Component name cell — purl sub-line */
.comp-name-purl { font-size:var(--font-size-xs); color:var(--color-text-muted); font-family:var(--font-mono, monospace); word-break:break-all; }

/* Component group header (JS-generated) */
.comp-group-header-td { background:var(--color-bg-subtle); font-weight:600; font-size:var(--font-size-sm); padding:0.4rem 0.75rem; color:var(--color-text-secondary); }

/* ==========================================================================
   CSP Compliance — Utility Classes (replaces inline style="" attributes)
   ========================================================================== */

/* --- Text color --- */
.text-secondary { color: var(--color-text-secondary); }
.text-warning { color: var(--color-warning); }
.text-faint { color: var(--color-text-faint); }

/* --- Text alignment --- */
.text-right { text-align: right; }
.text-left { text-align: left; }

/* --- Margin --- */
.m-0 { margin: 0; }
.mb-0 { margin-bottom: 0; }
.mt-0 { margin-top: 0; }
.ml-2 { margin-left: 0.5rem; }
.ml-auto { margin-left: auto; }
.mr-1 { margin-right: 0.375rem; }
.mr-xs { margin-right: 0.25rem; }
.mb-sm { margin-bottom: 0.75rem; }

/* --- Padding --- */
.p-0 { padding: 0; }
.p-xs { padding: 0.5rem; }
.px-md { padding-left: 1rem; padding-right: 1rem; }
.py-xs { padding-top: 0.5rem; padding-bottom: 0.5rem; }

/* --- Sizing --- */
.max-w-none { max-width: none; }

/* --- Display --- */
.d-inline { display: inline; }
.d-block { display: block; }
.d-grid { display: grid; }

/* --- Flexbox --- */
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }

/* --- Gap --- */
.gap-xs { gap: 0.25rem; }
.gap-sm { gap: 0.5rem; }
.gap-lg { gap: 1.5rem; }

/* --- Misc utilities --- */
.cursor-pointer { cursor: pointer; }
.rounded-full { border-radius: 50%; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.opacity-50 { opacity: 0.5; }
.opacity-70 { opacity: 0.7; }
.overflow-x-auto { overflow-x: auto; }
.font-mono { font-family: var(--font-mono, monospace); }
.font-italic { font-style: italic; }
.uppercase { text-transform: uppercase; }
.border-none { border: none; }

/* --- Icon size legacy aliases (retired in T2c of UX-ICONS) --- */
/* Each legacy class now maps into the canonical scale
   (icon-sm 12 / icon-md 14 / icon-lg 18 / icon-xl 24 / icon-2xl 40 / icon-3xl 48).
   Keep-as-alias during migration; remove when audit_icons --strict is green. */
.icon-10 { width: 12px; height: 12px; }                                    /* -> icon-sm */
.icon-13 { width: 14px; height: 14px; }                                    /* -> icon-md */
.icon-13-inline { width: 14px; height: 14px; vertical-align: -2px; }       /* -> icon-md + va */
.icon-xs-inline { width: 12px; height: 12px; vertical-align: -1px; }       /* -> icon-sm + va */
.icon-15 { width: 14px; height: 14px; }                                    /* -> icon-md */
.icon-18 { width: 18px; height: 18px; }                                    /* -> icon-lg */
.icon-20 { width: 18px; height: 18px; }                                    /* -> icon-lg */
.icon-24 { width: 24px; height: 24px; }                                    /* -> icon-xl */
.icon-28 { width: 24px; height: 24px; }                                    /* -> icon-xl */
.icon-40 { width: 40px; height: 40px; }                                    /* -> icon-2xl */
.icon-48 { width: 48px; height: 48px; }                                    /* -> icon-3xl */
.icon-52 { width: 48px; height: 48px; }                                    /* -> icon-3xl (T2b decision) */
.icon-64 { width: 48px; height: 48px; }                                    /* -> icon-3xl (T2b decision) */

/* --- Compound / semantic classes --- */
.th-label { padding: 0.5rem 0.75rem; text-align: left; font-weight: 600; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.cell-pad { padding: 0.5rem 1rem; }
.cell-pad-sm { padding: 0.5rem 0.75rem; }
.cell-pad-md { padding: 0.6rem 1rem; }
.grid-2-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.grid-3-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 1rem; }
.grid-col-span-2 { grid-column: 1 / 3; }
.flex-center { display: flex; align-items: center; gap: 0.5rem; }
.table-scroll { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.code-block { background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.875rem 1rem; font-size: var(--font-size-xs); overflow-x: auto; white-space: pre-wrap; word-break: break-word; margin: 0; font-family: var(--font-mono, monospace); }
.progress-track { background: var(--color-bg-subtle); border-radius: 99px; height: 8px; overflow: hidden; }

/* --- Column widths (table th/td percentage widths) --- */
.col-w-7 { width: 7%; } .col-w-8 { width: 8%; } .col-w-9 { width: 9%; } .col-w-10 { width: 10%; }
.col-w-11 { width: 11%; } .col-w-12 { width: 12%; } .col-w-14 { width: 14%; }
.col-w-26 { width: 26%; }
.col-w-15 { width: 15%; } .col-w-18 { width: 18%; } .col-w-20 { width: 20%; }
.col-w-22 { width: 22%; } .col-w-25 { width: 25%; } .col-w-28 { width: 28%; }
.col-w-30 { width: 30%; } .col-w-35 { width: 35%; } .col-w-40 { width: 40%; }
.col-w-45 { width: 45%; } .col-w-50 { width: 50%; }

/* --- CSP inline-style removal: additional utilities --- */
.filter-bar-clear  { padding: 0.15rem 0.4rem; font-size: var(--font-size-xs); }
.filter-apply-btn  { align-self: flex-start; margin-top: 1.75rem; }
.min-w-800         { min-width: 800px; }
.opacity-40        { opacity: 0.4; }
.max-w-180         { max-width: 180px; }
.max-w-600         { max-width: 600px; }
.max-w-660         { max-width: 660px; }
.max-w-900         { max-width: 900px; }
.max-w-1000        { max-width: 1000px; }
.text-truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-auto           { margin-left: auto; margin-right: auto; }
.result-count      { margin-bottom: 0.75rem; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.d-inline-block    { display: inline-block; }
.word-break-all    { word-break: break-all; }
.stats-strip-icon-neutral { background: var(--badge-neutral-bg); color: var(--badge-neutral-text); }
/* CSP inline-style sweep (FBL#31) — utilities replacing dropped style="" attrs */
.opacity-35        { opacity: 0.35; }
.w-380             { width: 380px; }
.max-w-28r         { max-width: 28rem; }
.cell-divided      { border-bottom: 1px solid var(--color-border); }
.bg-primary        { background: var(--color-primary-strong); }
.sidebar-card-header-warning { background: color-mix(in srgb, var(--color-warning) 8%, var(--color-bg)); }
.sidebar-card-header-danger  { background: color-mix(in srgb, var(--color-danger) 8%, var(--color-bg)); }

/* ==========================================================================
   Shared Layout Components — extracted from scoped <style> blocks
   ========================================================================== */

/* --- Sidebar Layout (detail pages with sidebar) --- */
.sidebar-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.25rem;
    align-items: start;
}
.sidebar-layout-280 { grid-template-columns: 1fr 280px; }
.sidebar-layout-content { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.sidebar-layout-sticky { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 1rem; }
@media (max-width: 900px) {
    .sidebar-layout, .sidebar-layout-280 { grid-template-columns: 1fr; }
    .sidebar-layout-sticky { position: static; }
}

/* --- Key-Value Detail Rows --- */
.kv-row { display: flex; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--color-border); font-size: var(--font-size-sm); align-items: flex-start; }
.kv-row:last-child { border-bottom: none; }
.kv-label { flex-shrink: 0; color: var(--color-text-muted); font-weight: 500; min-width: 130px; }
.kv-value { flex: 1; color: var(--color-text); }

/* --- Page Content Wrapper (flex column with gap) --- */
.page-content-wrap { display: flex; flex-direction: column; gap: 1.5rem; }
/* UX-18: gap owns the stat-strip → filter → table rhythm (1.5rem, matching
   /catalogue/services/); zero direct-child + nested-filter block-margins so they
   don't stack with the gap. Consumers are list/table pages (audit, discovery, backups). */
.page-content-wrap > * { margin-top: 0; margin-bottom: 0; }
.page-content-wrap .filter-bar { margin-bottom: 0; }

/* --- Result Meta (count + pagination info between filters and table) --- */
.result-meta { display: flex; align-items: center; justify-content: space-between; font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: 0.75rem; }

/* --- Padding utilities --- */
.pl-md { padding-left: 1rem; }
.py-lg { padding-top: 2rem; padding-bottom: 2rem; }

/* --- Page description (subtitle below page-header) --- */
.page-description { color: var(--color-text-muted); margin: -0.5rem 0 1.25rem; font-size: var(--font-size-sm); }

/* ============================================================
 * Guided tour — UX-ONB2.2 (.gt-*)
 * Scope: single-page staff dashboard tour. CSP-safe.
 * All positioning via CSS custom properties set from JS.
 * ============================================================ */
.gt-overlay {
    position: fixed; inset: 0;
    background: transparent;
    z-index: 9998;
    transition: background-color 0.2s ease;
}
.gt-overlay--dim {
    background: rgba(0, 0, 0, 0.55);
}
.gt-ring {
    position: fixed;
    left: var(--gt-ring-x, 0);
    top: var(--gt-ring-y, 0);
    width: var(--gt-ring-w, 0);
    height: var(--gt-ring-h, 0);
    border: 2px solid var(--color-primary, #2563eb);
    border-radius: var(--radius, 8px);
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--color-primary, #2563eb) 20%, transparent),
        0 0 0 9999px rgba(0, 0, 0, 0.55);
    pointer-events: none;
    z-index: 9999;
    transition: all 0.2s ease;
}
.gt-ring--hidden { display: none; }
.gt-popover {
    position: fixed;
    left: var(--gt-x, 50%);
    top: var(--gt-y, 50%);
    width: min(340px, calc(100vw - 2rem));
    background: var(--color-surface, #fff);
    color: var(--color-text, #111);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.18));
    padding: 1rem 1.125rem 0.875rem;
    z-index: 10000;
}
.gt-popover--center {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.gt-counter {
    font-size: 0.75rem;
    color: var(--color-text-muted, #6b7280);
    margin-bottom: 0.25rem;
}
.gt-title {
    font-weight: 600;
    font-size: var(--font-size-md, 1rem);
    margin: 0 0 0.375rem;
    line-height: 1.3;
}
.gt-body {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-secondary, var(--color-text-muted, #6b7280));
    margin: 0 0 0.875rem;
    line-height: 1.5;
}
.gt-foot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-end;
}
.gt-btn {
    font: inherit;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius, 6px);
    border: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-surface, #fff);
    color: var(--color-text, #111);
    cursor: pointer;
}
.gt-btn:hover { background: var(--color-bg, #f9fafb); }
.gt-btn:focus-visible {
    outline: 2px solid var(--color-primary, #2563eb);
    outline-offset: 2px;
}
.gt-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}
.gt-btn-primary {
    background: var(--color-primary-strong, #2563eb);
    color: #fff;
    border-color: var(--color-primary, #2563eb);
}
.gt-btn-primary:hover {
    background: color-mix(in srgb, var(--color-primary-strong, #2563eb) 88%, black);
}
.gt-btn-skip { margin-right: auto; background: transparent; border-color: transparent; color: var(--color-text-muted, #6b7280); }
.gt-btn-skip:hover { color: var(--color-text, #111); background: var(--color-bg, #f3f4f6); }

@media (max-width: 640px) {
    .gt-popover, .gt-popover--mobile {
        position: fixed;
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
        transform: none;
    }
    .gt-popover--center { transform: none; }
    .gt-ring { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .gt-overlay, .gt-ring, .gt-popover { transition: none; }
}

/* ============================================================
 * First-use hints — just-in-time inline callouts (UX-ONB24 Task 14)
 * A tiny absolutely-positioned card anchored under a single control.
 * Position (top/left) is set from JS via el.style (CSSOM, CSP-OK).
 * ============================================================ */
.first-use-hint {
    position: absolute;
    z-index: 1200;
    max-width: 260px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-left: 3px solid var(--color-primary, #4f46e5);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-lg);
    animation: first-use-hint-in 160ms ease-out;
}
.first-use-hint-inner {
    padding: .75rem .875rem;
}
.first-use-hint-title {
    margin: 0 0 .25rem;
    font-weight: 600;
    font-size: .875rem;
    color: var(--color-text, #1e293b);
}
.first-use-hint-body {
    margin: 0 0 .625rem;
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--color-text-muted, #64748b);
}
.first-use-hint-dismiss {
    appearance: none;
    border: none;
    background: var(--color-primary-strong, #2563eb);
    color: #fff;
    font-size: .8125rem;
    font-weight: 600;
    padding: .3125rem .75rem;
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
}
.first-use-hint-dismiss:hover {
    filter: brightness(1.05);
}
@keyframes first-use-hint-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .first-use-hint { animation: none; }
}

/* ============================================================
 * Avatar dropdown — "Show me around" submenu (UX-ONB2.3)
 * ============================================================ */
.nav-dropdown-submenu-anchor {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    cursor: pointer;
    color: inherit;
    user-select: none;
}
.nav-dropdown-submenu-anchor:hover,
.nav-dropdown-submenu-anchor:focus-within {
    background: var(--color-bg, var(--color-surface));
}
.nav-dropdown-submenu-chevron {
    margin-left: auto;
    opacity: .6;
}
.nav-dropdown-submenu {
    display: none;
    position: absolute;
    top: 0;
    right: 100%;          /* open to the left of the parent item */
    min-width: 240px;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: .25rem 0;
    margin-right: .5rem;
    z-index: 1000;
}
/* Invisible hover bridge — keeps :hover alive when the cursor crosses the
   gap between the anchor and the submenu. */
.nav-dropdown-submenu::after {
    content: "";
    position: absolute;
    top: 0;
    right: -.5rem;
    width: .5rem;
    height: 100%;
}
.nav-dropdown-submenu-anchor:hover .nav-dropdown-submenu,
.nav-dropdown-submenu-anchor:focus-within .nav-dropdown-submenu,
.nav-dropdown-submenu-anchor[aria-expanded="true"] .nav-dropdown-submenu {
    display: block;
}
.nav-dropdown-submenu a {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}
.nav-dropdown-submenu a:hover,
.nav-dropdown-submenu a:focus-visible {
    background: var(--color-bg, var(--color-surface));
    outline: none;
}
/* Group headers (Core / Operations / Admin) — UX-ONB2.4 Task 12. */
.nav-dropdown-submenu-group-label {
    padding: .4rem .75rem .2rem;
    margin-top: .25rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    border-top: 1px solid var(--color-border);
}
.nav-dropdown-submenu-group-label:first-child {
    margin-top: 0;
    border-top: none;
}
.tour-menu-status {
    display: inline-block;
    width: 1.25rem;
    text-align: center;
    font-weight: 600;
}
.tour-menu-status-done        { color: var(--color-success, var(--color-primary)); }
.tour-menu-status-in-progress { color: var(--color-info, var(--color-primary)); }
.tour-menu-status-pending     { color: var(--color-text-muted); }

@media (max-width: 640px) {
    .nav-dropdown-submenu {
        position: static;
        box-shadow: none;
        border: none;
        border-top: 1px solid var(--color-border);
        border-radius: 0;
        margin: 0 0 0 1rem;
    }
    .nav-dropdown-submenu-chevron { transform: rotate(90deg); }
}

/* ============================================================
 * A11y utility — screen-reader-only text
 * ============================================================ */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Unified Audit Log (people/audit-log + platform/audit) ──
   Shared by templates/core/_audit_filter_card.html and _audit_unified_table.html
   so /people/audit-log/ and /platform/audit/ render identically. */
.audit-result-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0.5rem 0 0.75rem;
}
/* Table toolbar: filtered-count (left) + column chooser & Export CSV (right),
   attached directly above the table card so it never floats in its own band. */
.audit-table-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    min-height: 2rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.audit-toolbar-meta { min-width: 0; }
.audit-toolbar-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.audit-col-chooser { position: relative; display: inline-block; }
/* Right-align the menu under the button (the chooser sits on the right edge of the toolbar). */
.audit-col-chooser .dropdown-menu { right: 0; left: auto; }
.audit-table-wrap {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.audit-table-wrap::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-primary);
    opacity: 0.18;
    z-index: 1;
}
.audit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}
.audit-table thead {
    background: var(--color-bg-subtle);
    border-bottom: 2px solid var(--color-border);
}
.audit-table th {
    padding: 0.75rem 0.75rem;
    text-align: left;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.audit-table td {
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
.audit-table tbody tr:last-child td { border-bottom: none; }
.audit-table tbody tr.audit-row:hover { background: var(--color-bg-subtle); }
.audit-actor-cell { display: flex; flex-direction: column; gap: 0.1rem; }
.audit-actor-name { font-weight: 500; font-size: var(--font-size-sm); color: var(--color-text); }
.audit-actor-email { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.audit-time-secondary { opacity: 0.75; }
.audit-ip { font-family: var(--font-mono, monospace); }
.audit-details-cell {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    max-width: 360px;
    word-break: break-word;
}
.audit-empty {
    text-align: center;
    padding: 3.5rem 2rem;
    color: var(--color-text-muted);
}
.audit-empty svg { width: 48px; height: 48px; opacity: 0.25; margin-bottom: 0.75rem; }
.audit-empty-title { font-weight: 600; margin-bottom: 0.25rem; font-size: 1rem; }
.audit-pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    align-items: center;
    margin-top: 1rem;
}
.audit-pagination-info {
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.audit-row { cursor: pointer; transition: background 0.1s; }
.audit-detail-row { display: none; }
.audit-detail-row.open { display: table-row; }
.audit-detail-cell {
    padding: 0.75rem 1rem;
    background: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
}
.audit-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 2rem; }
.audit-detail-label {
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10px;
    margin-bottom: 0.15rem;
}
.audit-detail-value { margin-bottom: 0.5rem; word-break: break-word; }
.audit-detail-changes {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    max-height: 200px;
    overflow: auto;
    white-space: pre-wrap;
}
.audit-expand-icon {
    opacity: 0.4;
    transition: transform 0.15s, opacity 0.15s;
    flex-shrink: 0;
}
.audit-row.expanded .audit-expand-icon { transform: rotate(90deg); opacity: 0.8; }
.audit-code-ref {
    display: inline-block;
    margin-top: 0.2rem;
}
.audit-code-ref > code {
    font-size: 11px;
    color: var(--color-text-muted);
    background: transparent;
    padding: 0;
}
.audit-retention-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: -0.5rem 0 0.75rem;
}
@media (max-width: 900px) {
    .audit-table th:nth-child(4), .audit-table td:nth-child(4) { display: none; }
}
@media (max-width: 768px) {
    .audit-table th:nth-child(n+4), .audit-table td:nth-child(n+4) { display: none; }
}

/* ---- Editorial display serif (Newsreader) -------------------------- */
/* Headings opt in via .font-display — we do NOT blanket-override h1/h2/h3 in
   this phase (see docs/plans/phase-ux-editorial-typography.md). */
.font-display {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.01em;   /* serifs read better very slightly tightened at display sizes */
}
/* ---- End editorial display serif ----------------------------------- */

/* ---- Warm dashboard: tasks / nudge / recent strip ------------------ */
.dash-tasks { padding: 1.5rem; margin-bottom: 1.5rem; }
.dash-tasks-title { font-size: var(--font-size-xl); margin: 0 0 1rem; }
.dash-tasks-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.dash-tasks-item { border-radius: var(--radius-md); border-left: 3px solid var(--color-border); background: var(--color-surface-hover); transition: background var(--transition-fast); }
.dash-tasks-item a { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; color: var(--color-text); text-decoration: none; }
.dash-tasks-item:hover { background: var(--color-surface); }
.dash-tasks-item a:hover { color: var(--color-primary); }
.dash-tasks-icon { flex-shrink: 0; color: var(--color-text-muted); }
.dash-tasks-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-tasks-chevron { flex-shrink: 0; color: var(--color-text-faint); opacity: 0; transition: opacity var(--transition-fast), transform var(--transition-fast); }
.dash-tasks-item:hover .dash-tasks-chevron { opacity: 1; transform: translateX(2px); }
.dash-urgency-high { border-left-color: var(--color-danger); }
.dash-urgency-high .dash-tasks-icon { color: var(--color-danger); }
.dash-urgency-medium { border-left-color: var(--color-warning); }
.dash-urgency-medium .dash-tasks-icon { color: var(--color-warning); }
.dash-urgency-low { border-left-color: var(--color-success); }
.dash-urgency-low .dash-tasks-icon { color: var(--color-success); }
.dash-tasks-viewall { display: inline-block; margin-top: 0.75rem; font-weight: 500; color: var(--color-primary); }
.dash-tasks-empty { color: var(--color-text-muted); margin: 0; }

.dash-nudge { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.75rem 1rem; border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
    margin-bottom: 1rem; }
.dash-nudge[hidden] { display: none; }
.dash-nudge-dismiss { background: none; border: none; cursor: pointer; color: var(--color-text-muted); font-size: 1.1rem; line-height: 1; }

.dash-recent { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.dash-recent:empty { display: none; }
.dash-recent-chip { padding: 0.25rem 0.625rem; border-radius: 999px; background: var(--color-surface-hover);
    border: 1px solid var(--color-border); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.dash-timeline-more { color: var(--color-text-muted); font-size: var(--font-size-sm); margin-top: 0.5rem; }

[data-theme="dark"] .dash-tasks-item { background: var(--color-bg-subtle); }
@media (prefers-color-scheme: dark) { [data-theme="system"] .dash-tasks-item { background: var(--color-bg-subtle); } }
@media (max-width: 640px) { .dash-tasks { padding: 1rem; } }
@media (prefers-reduced-motion: reduce) { .dash-nudge, .dash-recent-chip, .dash-tasks-item, .dash-tasks-chevron { transition: none; } }
/* ---- End warm dashboard -------------------------------------------- */

/* UX-EDITORIAL-CONSISTENCY — Newsreader display font on all content headings */
h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

/* UI chrome: keep sans-serif for navigation, sidebar, modal, and integration card labels */
.sidebar-section h3,
.detail-sidebar h3,
.related-group h3,
.cost-estimate-section h3,
.tree-section h2,
.modal-header h2,
.modal-header h3,
.form-section-title,
.nav-section-title,
.ig-gallery-title,
.card-title,
.navbar h1,
.navbar h2,
.navbar h3 {
    font-family: var(--font-sans);
    letter-spacing: normal;
}

/* === UX-MOBILE-FIRST: bottom-tab nav (<=640px) ===
   A fixed, thumb-reachable bottom-tab bar for staff/admin on phones. Hidden
   everywhere by default; revealed only at <=640px. The "More" tab re-targets
   the SAME .navbar-links DOM the hamburger toggles (single source of nav truth)
   and re-anchors it as a bottom sheet at this breakpoint. Colours come only from
   the navbar tokens + the --color-primary accent + the existing .nav-badge
   class (no new colour/token). Tab text is Serif-OFF (var(--font-sans)). */

/* Hidden by default at all widths (only flex'd in the <=640px block below). */
.mobile-bottom-nav { display: none; }
/* The account-row name only appears in the <=640px "More" sheet; the desktop
   navbar avatar stays a bare initials circle. */
.nav-avatar-name { display: none; }

@media (max-width: 640px) {
    /* The bottom-bar "More" tab is the sole secondary-menu trigger on phones;
       the top-bar hamburger is removed so there is one obvious affordance. */
    .navbar-toggle { display: none; }

    /* Re-anchor the SAME .navbar-links element as a bottom sheet sitting just
       above the tab bar (it is a top:100% dropdown >640px — see the 960px
       block). One DOM, two positionings by breakpoint. */
    .navbar-links {
        position: fixed; /* anchor to the viewport, not the navbar (was absolute >640px) */
        top: auto;
        left: 0;
        right: 0;
        bottom: calc(3.5rem + env(safe-area-inset-bottom));
        max-height: 70vh;
        border-top: 1px solid rgba(255, 255, 255, 0.10);
        border-bottom: none;
        box-shadow: var(--shadow-lg);
        z-index: 45;
    }

    /* ---- The bar itself ---- */
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        /* Above page content + the sticky form bar, below the Ops drawer
           backdrop (z-index 49/50, settings-hub.css) and modals (1000+). */
        z-index: 40;
        background: var(--color-navbar-bg);
        border-top: 1px solid rgba(255, 255, 255, 0.10);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .bottom-tab {
        position: relative;
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.125rem;
        min-height: 44px; /* tap target */
        padding: 0.4rem 0.25rem;
        background: none;
        border: none;
        cursor: pointer;
        text-decoration: none;
        color: var(--color-navbar-text-muted);
        font-family: var(--font-sans); /* nav text is Serif-OFF */
        font-size: 0.6875rem;
        line-height: 1.1;
    }
    .bottom-tab:hover { color: var(--color-navbar-text); }
    .bottom-tab:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: -2px;
    }
    .bottom-tab-active { color: var(--color-navbar-text); }
    .bottom-tab-active::before {
        content: "";
        position: absolute;
        top: 0;
        width: 1.75rem;
        height: 2px;
        border-radius: 0 0 2px 2px;
        background: var(--color-primary); /* tenant accent */
    }
    .bottom-tab-label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .bottom-tab-icon-wrap { position: relative; display: inline-flex; }
    /* .nav-badge carries colour; we only reposition it onto the icon corner. */
    .bottom-tab-badge {
        position: absolute;
        top: -0.4rem;
        left: 0.75rem;
        margin: 0;
        vertical-align: baseline;
    }

    /* The fixed bar must never cover page content. */
    body { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)); }

    /* When a sticky form bar is visible it owns the thumb zone (decision 4):
       hide the bottom bar and drop its spacer (the form bar is fixed/overlay,
       as it was before this feature). */
    body:has(.sticky-form-bar.sfb-visible) .mobile-bottom-nav { display: none; }
    body:has(.sticky-form-bar.sfb-visible) { padding-bottom: 0; }

    /* ---- "More" / "Create" bottom-sheet formatting ----
       The sheet reuses the desktop .navbar-links, which carries three icon-only
       desktop affordances (create "+", quick-search, avatar). Format them for a
       stacked mobile list and split the two triggers so More ≠ Create. */

    /* Create has its own tab — drop the bare, label-less "+" create dropdown
       from the full "More" sheet. */
    .navbar-links:not(.mobile-create-mode) .nav-dropdown[data-tour="create"] { display: none; }

    /* "Create" sheet (set by the Create tab): show ONLY the create actions,
       reusing the same feature/role-gated .nav-dropdown-create links — single
       source of truth — with their labels, not the whole nav. */
    .navbar-links.mobile-create-mode > *:not([data-tour="create"]) { display: none; }
    .navbar-links.mobile-create-mode .nav-dropdown[data-tour="create"] > .nav-dropdown-toggle { display: none; }
    .navbar-links.mobile-create-mode .nav-dropdown-create a { padding-left: 1.5rem; }

    /* Plain top-level links (Settings, Ops) are .navbar-links a, which inherit
       justify-content:center from the desktop nav — the mobile block only
       re-aligns .nav-dropdown-toggle, so these render centred in the sheet.
       Left-align them to match the dropdown rows. */
    .navbar-links a { justify-content: flex-start; }

    /* Account row: an initials circle + the user's name as a full-width row,
       instead of a lone floating avatar dot. */
    .navbar-links .user-avatar {
        width: 100%;
        height: auto;
        margin: 0.25rem 0 0;
        padding: 0.625rem 1.5rem;
        border-radius: 0;
        background: none;
        justify-content: flex-start;
        gap: 0.6rem;
        color: var(--color-navbar-text-muted);
        font-size: var(--font-size-sm);
        font-weight: 500;
    }
    .navbar-links .user-avatar:hover { color: var(--color-navbar-text); background: var(--color-navbar-hover); }
    .navbar-links .user-avatar-initials {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: var(--radius-full);
        background: var(--color-primary-strong);
        color: #fff;
        font-size: var(--font-size-xs);
        font-weight: 600;
        flex-shrink: 0;
    }
    .navbar-links .nav-avatar-name { display: inline; }

    /* Quick-search reads as a flat full-width row in the sheet (it's a pill
       button on desktop). Label it "Search"; the ⌘K hint is touch-irrelevant. */
    .navbar-links #cp-trigger {
        width: 100%;
        justify-content: flex-start;
        gap: 0.5rem;
        padding: 0.625rem 1.5rem;
        background: none;
        border: none;
        border-radius: 0;
        color: var(--color-navbar-text-muted);
    }
    .navbar-links #cp-trigger:hover { color: var(--color-navbar-text); background: var(--color-navbar-hover); }
    .navbar-links #cp-trigger::after { content: "Search"; }
    .navbar-links #cp-trigger .navbar-kbd { display: none; }

    /* Dark mode: the tenant brand colour (navbar-bg, e.g. teal) is too saturated
       as a full-bleed mobile surface. Use the app's dark slate for the bar +
       sheet; the brand stays only as the active-tab accent + badges. */
    [data-theme="dark"] .mobile-bottom-nav,
    [data-theme="dark"] .navbar-links { background: rgba(30, 41, 59, 0.96); }

    /* Keep the AI-chat FAB clear of the bar, and out of the way while a sheet is
       open. (When a sticky form bar is visible, its higher-specificity rule
       above lifts the FAB over that bar instead.) */
    .ai-chat-fab { bottom: calc(1.5rem + 3.5rem + env(safe-area-inset-bottom) + var(--fab-footer-gap, 0px)); }
    body:has(.navbar-links.open) .ai-chat-fab { display: none; }
}
/* System theme following a dark OS gets the same dark-slate mobile chrome. */
@media (max-width: 640px) and (prefers-color-scheme: dark) {
    [data-theme="system"] .mobile-bottom-nav,
    [data-theme="system"] .navbar-links { background: rgba(30, 41, 59, 0.96); }
}
/* === End UX-MOBILE-FIRST === */

/* --- Dashboard customize (phase-ux-dashboard-widgets) --- */
.dashboard-card-danger::before { background: var(--badge-danger-text); opacity: 1; }
.dashboard-card-warning::before { background: var(--badge-warning-text); opacity: 1; }

.dash-preset-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.dash-widget-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.dash-widget-row { display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding: 0.5rem 0.6rem; border: 1px solid var(--color-border); border-radius: var(--radius); }
.dash-widget-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.dash-widget-moves { display: flex; gap: 0.25rem; }

.incident-spark { width: 100%; height: 60px; }
.incident-spark-line { stroke: var(--color-primary); stroke-width: 2; }

@media (prefers-reduced-motion: reduce) {
  .modal { animation: none; }
}
/* --- End Dashboard customize --- */

/* --- Service Detail Tab Reorganisation (phase-ux-service-detail-tabs) --- */
.tab-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-bottom: 1rem;
}
.section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}
.section-heading:first-child { margin-top: 0; }
.section-heading h3 {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text);
}
.section-heading .view-all {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    white-space: nowrap;
}
.section-heading .view-all:hover { color: var(--color-primary); }
.ops-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    margin-bottom: 0.5rem;
}
.ops-table th,
.ops-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: var(--font-size-sm);
    border-bottom: 1px solid var(--color-border);
}
.ops-table th {
    background: var(--color-bg-subtle);
    font-weight: 600;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}
.ops-table tbody tr:last-child td { border-bottom: none; }
.ops-table tbody tr:hover { background: var(--color-surface-hover); }
[data-theme="dark"] .ops-table th,
[data-theme="system"] .ops-table th {
    background: var(--color-surface);
    color: var(--color-text-muted);
}
.settings-link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}
.settings-link-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--color-text);
    transition: all var(--transition-fast);
    font-size: var(--font-size-sm);
    font-weight: 500;
}
.settings-link-card:hover {
    border-color: var(--color-primary);
    background: var(--color-surface-hover);
    color: var(--color-primary);
}
.settings-link-card svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-text-muted); }
.settings-link-card:hover svg { color: var(--color-primary); }
.settings-group-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin: 1.5rem 0 0.5rem;
}
.settings-group-label:first-child { margin-top: 0; }
/* --- End Service Detail Tab Reorganisation --- */

/* ===== UX-LIST-STANDARD — unified list table (additive; NOT a merge) ===== */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
/* Surface card for the unified list table — mirrors .service-table-wrapper so the P3/P1
   pages (org/contracts/people/subscriptions/roles/break-glass) match the P2 catalogue look:
   the transparent odd rows sit on --color-surface (not the grey page bg), and the table is
   framed identically in light AND dark mode. Paired with .table-scroll-wrap on the wrapper
   div; applied only to wrappers that actually hold a .data-table (never the contract
   empty-state or the platform tables, which keep a bare .table-scroll-wrap). */
.data-table-wrap { background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table thead { background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border); }
.data-table th { padding: 0.625rem 0.875rem; text-align: left; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); white-space: nowrap; position: relative; }
.data-table td { padding: 0.75rem 0.875rem; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.data-table tbody tr:nth-child(even) { background: var(--color-surface-hover); }
/* Soften the zebra in dark themes (mirrors the retired .service-table rule) so the
   even-row band isn't a harsh light block over the dark surface (P2 review fix #2). */
[data-theme="dark"] .data-table tbody tr:nth-child(even),
[data-theme="system"] .data-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
.data-table tbody tr:hover { background: var(--color-bg-subtle); }
/* Actions column hugs its buttons: shrink the column to the buttons' width and centre both
   the header and the buttons, so "Actions" sits directly over them and never drifts to the
   far edge when columns are hidden. Keyed on .dt-col-actions (every unified list table's
   actions column carries it) — never on last-child, since some tables end in a data column. */
.data-table th.dt-col-actions,
.data-table td.dt-col-actions { width: 1%; white-space: nowrap; text-align: center; }
.data-table td.dt-col-actions .table-actions { justify-content: center; }
/* Column-alignment utilities — always set the header AND its cells together so the header
   follows its content. .dt-col-num right-aligns bare numbers (currency, quantity) so digits
   line up by place value; .dt-col-center centres icon-only / single-token columns. */
.data-table th.dt-col-num,
.data-table td.dt-col-num { text-align: right; }
.data-table th.dt-col-center,
.data-table td.dt-col-center { text-align: center; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table th[data-sort] a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 0.25rem; }
.data-table th[data-sort] a:hover { color: var(--color-text); }
.data-table th[aria-sort="ascending"] a, .data-table th[aria-sort="descending"] a { color: var(--color-text); }

/* Actions cell */
.table-actions { display: flex; gap: 0.375rem; align-items: center; justify-content: flex-end; white-space: nowrap; }
.table-actions .dt-inline-form { margin: 0; display: inline; }
.action-btn { min-height: 24px; padding: 0.25rem 0.625rem; font-size: var(--font-size-xs); font-weight: 600;
  border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 0.25rem; cursor: pointer;
  border: 1px solid transparent; text-decoration: none; white-space: nowrap; }
.action-btn--primary { background: var(--color-primary-strong); color: #fff; }
.action-btn--primary:hover { background: var(--color-primary-strong-hover); color: #fff; }
.action-btn--secondary { background: transparent; color: var(--color-text-secondary); border-color: var(--color-border); }
.action-btn--secondary:hover { background: var(--color-bg-subtle); color: var(--color-text); }
.action-btn--danger { background: var(--color-danger); color: #fff; }
.action-btn--danger:hover { filter: brightness(0.94); color: #fff; }
.action-btn--success { background: var(--badge-success-bg); color: var(--badge-success-text); border-color: var(--badge-success-text); }
.action-btn--warning { background: var(--badge-warning-bg); color: var(--badge-warning-text); border-color: var(--badge-warning-text); }
.action-btn--neutral { background: var(--color-surface); color: var(--color-text-secondary); border-color: var(--color-border); }

/* Footer + confirm */
.list-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
/* Reserve clearance for the fixed AI-chat FAB (bottom-right) so the pagination/per-page
   controls are never overlaid on narrow (full-width-content) viewports. 4.5rem clears
   the FAB's ~3.5rem height + its 1.5rem bottom offset; adds no whitespace on wide screens. */
@media (max-width: 960px) {
  .list-footer { padding-bottom: 4.5rem; }
}
.list-footer-count { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.per-page-form { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; }
.per-page-select { height: 28px; padding: 0 0.4rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); text-align: center; text-align-last: center; }
.confirm-delete { max-width: 32rem; }
.confirm-delete-actions { display: flex; gap: 0.5rem; margin-top: 1rem; }

/* ── UX-LIST-STANDARD P3 — column chooser positioning (reuses .dropdown/.dropdown-menu) ── */
.dt-col-chooser { display: inline-block; }
.dt-col-chooser .dropdown-menu { right: 0; left: auto; min-width: 200px; padding: 0.5rem; max-height: 360px; overflow-y: auto; }
.dt-col-chooser .dropdown-menu [data-col-reset] { margin-top: 0.25rem; }


/* ════════════════════════════════════════════════════════════════════
   Control Plane surface — shared token layer
   ════════════════════════════════════════════════════════════════════
   Marketing/onboarding "Control Plane" surfaces (landing page, onboarding
   chrome, pricing) opt in by wrapping their content in .cp-page.

   Theme-aware: LIGHT is the default (mirrors :root above); DARK applies under
   [data-theme="dark"] and system-dark — so these surfaces follow the viewer's
   theme exactly like every other page (anonymous renders data-theme="system").

   SINGLE SOURCE OF TRUTH for the --cp-* palette. Do NOT duplicate it into a
   template's scoped <style> block — page-specific LAYOUT belongs there, the
   palette does not (a duplicated copy silently drifts).

   Design: design-reference/homepage-marketing-v2/Control Plane.dc.html
   Plans:  docs/plans/phase-ux-homepage-control-plane.md
           docs/plans/phase-ux-onboarding-chrome.md
   ════════════════════════════════════════════════════════════════════ */
.cp-page {
    --cp-acc: #6366f1;
    /* LIGHT (default) */
    --cp-ink: #eef1f7; --cp-ink-2: #e7ebf4; --cp-panel: #ffffff; --cp-panel-2: #ffffff;
    --cp-line: #dfe3ec; --cp-line-2: #d5dae4;
    --cp-acc-2: #4f46e5; --cp-acc-soft: color-mix(in srgb, var(--cp-acc), transparent 90%);
    --cp-tx: #0f1222; --cp-tx-2: #4b5468; --cp-tx-3: #616979;   /* AA-tuned vs design #7c8398 */
    --cp-ok: #059669; --cp-ok-soft: rgba(5,150,105,0.12);
    --cp-warn: #b45309; --cp-warn-soft: rgba(180,83,9,0.12);
    --cp-danger: #e11d48; --cp-danger-soft: rgba(225,29,72,0.10);
    --cp-fill-05: rgba(15,23,42,0.02); --cp-fill-1: rgba(15,23,42,0.025); --cp-fill-2: rgba(15,23,42,0.035);
    --cp-fill-3: rgba(15,23,42,0.045); --cp-fill-4: rgba(15,23,42,0.05); --cp-fill-5: rgba(15,23,42,0.07);
    --cp-fill-h: rgba(15,23,42,0.05); --cp-fill-h2: rgba(15,23,42,0.07);
    --cp-ava-blue: #2563eb; --cp-ava-purple: #6d28d9; --cp-ava-green: #047857; --cp-ava-amber: #b45309; --cp-ava-slate: #475569;
    --cp-atmo-1: rgba(99,102,241,0.07); --cp-atmo-2: color-mix(in srgb, var(--cp-acc), transparent 90%);
    --cp-g1: 0 1px 2px rgba(16,24,40,0.04), 0 24px 60px -28px color-mix(in srgb, var(--cp-acc), transparent 55%);
    --cp-g2: 0 0 0 1px color-mix(in srgb, var(--cp-acc), transparent 86%), 0 1px 2px rgba(16,24,40,0.05), 0 24px 60px -28px color-mix(in srgb, var(--cp-acc), transparent 62%);

    position: relative;
    min-height: 100vh;
    background: var(--cp-ink);
    color: var(--cp-tx-2);
    font-family: var(--font-sans);
    line-height: 1.6;
}
/* DARK — explicit toggle + system-dark (duplicated per the main.css theme pattern) */
[data-theme="dark"] .cp-page {
    --cp-ink: #0c0a22; --cp-ink-2: #100d2c; --cp-panel: #161334; --cp-panel-2: #1c1948;
    --cp-line: rgba(255,255,255,0.09); --cp-line-2: rgba(255,255,255,0.14);
    --cp-acc-2: color-mix(in srgb, var(--cp-acc), #fff 30%); --cp-acc-soft: color-mix(in srgb, var(--cp-acc), transparent 84%);
    --cp-tx: #ECEBFB; --cp-tx-2: #ADA9D6; --cp-tx-3: #9591bd;   /* AA-tuned vs design #7d79a6 */
    --cp-ok: #34d399; --cp-ok-soft: rgba(52,211,153,0.15);
    --cp-warn: #fbbf24; --cp-warn-soft: rgba(251,191,36,0.16);
    --cp-danger: #fb7185; --cp-danger-soft: rgba(251,113,133,0.16);
    --cp-fill-05: rgba(255,255,255,0.015); --cp-fill-1: rgba(255,255,255,0.02); --cp-fill-2: rgba(255,255,255,0.03);
    --cp-fill-3: rgba(255,255,255,0.04); --cp-fill-4: rgba(255,255,255,0.05); --cp-fill-5: rgba(255,255,255,0.06);
    --cp-fill-h: rgba(255,255,255,0.07); --cp-fill-h2: rgba(255,255,255,0.08);
    --cp-ava-blue: #93c5fd; --cp-ava-purple: #c4b5fd; --cp-ava-green: #6ee7b7; --cp-ava-amber: #fcd34d; --cp-ava-slate: #cbd5e1;
    --cp-atmo-1: rgba(139,92,246,0.20); --cp-atmo-2: color-mix(in srgb, var(--cp-acc), transparent 78%);
    --cp-g1: 0 30px 90px -30px color-mix(in srgb, var(--cp-acc), transparent 48%);
    --cp-g2: 0 0 0 1px color-mix(in srgb, var(--cp-acc), transparent 82%), 0 26px 70px -30px color-mix(in srgb, var(--cp-acc), transparent 58%);
}
@media (prefers-color-scheme: dark) {
    [data-theme="system"] .cp-page {
        --cp-ink: #0c0a22; --cp-ink-2: #100d2c; --cp-panel: #161334; --cp-panel-2: #1c1948;
        --cp-line: rgba(255,255,255,0.09); --cp-line-2: rgba(255,255,255,0.14);
        --cp-acc-2: color-mix(in srgb, var(--cp-acc), #fff 30%); --cp-acc-soft: color-mix(in srgb, var(--cp-acc), transparent 84%);
        --cp-tx: #ECEBFB; --cp-tx-2: #ADA9D6; --cp-tx-3: #9591bd;
        --cp-ok: #34d399; --cp-ok-soft: rgba(52,211,153,0.15);
        --cp-warn: #fbbf24; --cp-warn-soft: rgba(251,191,36,0.16);
        --cp-danger: #fb7185; --cp-danger-soft: rgba(251,113,133,0.16);
        --cp-fill-05: rgba(255,255,255,0.015); --cp-fill-1: rgba(255,255,255,0.02); --cp-fill-2: rgba(255,255,255,0.03);
        --cp-fill-3: rgba(255,255,255,0.04); --cp-fill-4: rgba(255,255,255,0.05); --cp-fill-5: rgba(255,255,255,0.06);
        --cp-fill-h: rgba(255,255,255,0.07); --cp-fill-h2: rgba(255,255,255,0.08);
        --cp-ava-blue: #93c5fd; --cp-ava-purple: #c4b5fd; --cp-ava-green: #6ee7b7; --cp-ava-amber: #fcd34d; --cp-ava-slate: #cbd5e1;
        --cp-atmo-1: rgba(139,92,246,0.20); --cp-atmo-2: color-mix(in srgb, var(--cp-acc), transparent 78%);
        --cp-g1: 0 30px 90px -30px color-mix(in srgb, var(--cp-acc), transparent 48%);
        --cp-g2: 0 0 0 1px color-mix(in srgb, var(--cp-acc), transparent 82%), 0 26px 70px -30px color-mix(in srgb, var(--cp-acc), transparent 58%);
    }
}
.cp-page ::selection { background: rgba(99,102,241,0.35); color: #fff; }
.cp-page a { text-decoration: none; }

/* Mono accent (JetBrains Mono) used by Control Plane surfaces */
.cp-mono { font-family: var(--font-mono); }

/* Icon colours — sizing via the canonical icon-* classes; the Lucide svg inherits colour. */
.cp-i-acc { color: var(--cp-acc-2); }
.cp-i-ok { color: var(--cp-ok); } .cp-i-warn { color: var(--cp-warn); }
.cp-i-mut { color: var(--cp-tx-3); }
.cp-i-teal { color: #2dd4bf; } .cp-i-blue { color: #60a5fa; } .cp-i-amber { color: #fbbf24; }
.cp-i-violet { color: #a78bfa; } .cp-i-orange { color: #f59e0b; } .cp-i-sky { color: #38bdf8; }
.cp-i-slate { color: var(--cp-ava-slate); } .cp-i-red { color: #f87171; } .cp-i-red2 { color: #fb7185; }
/* ============================================================================
   Auth surfaces — design handoff (UX-AUTH-MICRO)
   Shared shell affordances for login / MFA / recovery / sign-out / hard-stops.
   Consumed by templates/sso/*, templates/customer/(login|logout|password_reset*),
   templates/account/*, templates/core/(mfa_*|email_verify_*), templates/signed_out.html,
   templates/security/lockout.html. Paired with static/js/auth-ux.js.
   All colours are tokens, so light/dark/tenant-brand are inherited for free.
   ============================================================================ */

/* Hero icon disc — tinted circle + coloured glyph, centred above the H1. */
.auth-icon-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}
.auth-icon-circle--primary { background: var(--color-primary-alpha); color: var(--color-primary); }
.auth-icon-circle--success { background: var(--color-success-light); color: var(--color-success); }
.auth-icon-circle--warning { background: var(--color-warning-light); color: var(--color-warning); }
.auth-icon-circle--danger  { background: var(--color-danger-light);  color: var(--color-danger); }
.auth-icon-circle--muted   { background: var(--color-bg-subtle);     color: var(--color-text-muted); }

/* Alert row with a leading icon (used across the auth surfaces). */
.auth-alert { display: flex; align-items: flex-start; gap: 0.5rem; }
.auth-alert > i[data-lucide],
.auth-alert > svg { flex-shrink: 0; margin-top: 1px; }
.auth-alert p { margin: 0; }

/* Password field with an in-field show/hide reveal button. */
.pw-field { position: relative; }
.pw-field .form-control { padding-right: 2.75rem; }
.pw-toggle {
    position: absolute;
    right: 0.3125rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}
.pw-toggle:hover { color: var(--color-text); }
.pw-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
/* When a zxcvbn strength meter is injected below the input the field grows;
   pin the reveal toggle to the input row rather than the whole field. */
.pw-field--meter .pw-toggle { top: 1.4rem; transform: translateY(-50%); }

/* Caps-Lock hint row (revealed by auth-ux.js). */
.caps-hint {
    display: flex;
    align-items: center;
    gap: 0.3125rem;
    margin-top: 0.375rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-warning);
}
/* The .caps-hint display:flex outranks the UA [hidden] rule — restore it explicitly. */
.caps-hint[hidden] { display: none; }

/* "Passwords match" confirmation row (revealed by auth-ux.js on the confirm field). */
.pw-match-hint {
    display: flex;
    align-items: center;
    gap: 0.3125rem;
    margin-top: 0.375rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-success);
}
.pw-match-hint[hidden] { display: none; }

/* Inline in-flight spinner for submit buttons (reuses @keyframes spin). */
.btn-spinner {
    width: 0.9375rem;
    height: 0.9375rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    display: inline-block;
    margin-right: 0.5rem;
    vertical-align: -2px;
    animation: spin 0.9s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .btn-spinner { animation: none; } }

/* Bordered helper note (e.g. "This link expires in 3 days"). */
.auth-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5625rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-subtle);
    margin-bottom: 1.1rem;
    font-size: var(--font-size-xs);
    line-height: 1.55;
    color: var(--color-text-secondary);
    text-align: left;
}
.auth-note i[data-lucide],
.auth-note svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--color-text-muted);
}

/* Keep-me-signed-in / remember-device inline checkbox rows. */
.auth-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    margin-bottom: 1.1rem;
}
.auth-check input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--color-primary); margin: 0; }

/* Vertically centre the auth card in the space between the navbar and footer.
   #main-content is a flex child of the body flex-column but doesn't grow by
   default, so auth cards sat top-aligned with dead space below. Scoped to the
   auth surfaces (the sole users of .login-container / .auth-center-shell); the
   card keeps its own `margin: * auto` for horizontal centring, and any Django
   messages/break-glass banner above it stay full-width. Degrades gracefully
   where :has() is unsupported (→ top-aligned, as before). */
#main-content:has(> .login-container),
#main-content:has(> .auth-center-shell) {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* `safe center` centres when the card fits and falls back to top-aligned +
       scrollable when a tall card exceeds the space (no clipped top). */
    justify-content: safe center;
}

/* Full-height centred wrapper for chrome-less confirm / hard-stop pages
   (logout confirm, signed-out landing, lockout, rate-limited). Reuses
   .login-container for the card itself, overriding its auto top margin. */
.auth-center-shell {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
.auth-center-shell .login-container {
    margin: 0;
    width: 100%;
}

/* Numbered step badge (MFA enrol, email-verify checklist). */
.auth-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-primary-strong);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    flex-shrink: 0;
}
.auth-step-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--color-text);
}

/* Large centred one-time-code input (MFA challenge / enrol). */
.mfa-code-input {
    text-align: center;
    letter-spacing: 0.42em;
    font-family: var(--font-mono, monospace);
    font-size: 1.375rem;
    font-weight: 600;
}
.mfa-code-input--backup { letter-spacing: 0.18em; font-size: 1.0625rem; }