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

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

/* ---------- Design Tokens ---------- */
:root {
    /* Typography — Untitled UI scale */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --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: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-light: #3b82f6;
    --color-primary-alpha: rgba(37, 99, 235, 0.12);

    --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: #667085;   /* UUI Gray-500 */
    --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);

    /* 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:  #c2410c;
    --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: #3b82f6;
    --color-primary-hover: #60a5fa;
    --color-primary-light: #2563eb;
    --color-primary-alpha: rgba(59, 130, 246, 0.15);

    --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: #3b82f6;
        --color-primary-hover: #60a5fa;
        --color-primary-light: #2563eb;
        --color-primary-alpha: rgba(59, 130, 246, 0.15);

        --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;
}

.container { width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 1.5rem; }

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;
}
.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);
}

/* 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);
    color: #fff;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

/* 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;
}

/* ---------- 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);
    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); }
/* 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-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.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);
}
.page-description {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: 1.5rem;
}
[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);
    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);
    color: #fff;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-xs);
}
.btn-primary:hover {
    background: var(--color-primary-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);
}

.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); }
.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 header (customer portal variant) */
.service-card-header {
    margin-bottom: 0.5rem;
}
.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); }

/* 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; }
.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);
    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);
    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;
}

/* ---------- 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-top: 4px solid var(--color-primary);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    box-shadow: var(--shadow-xl);
}
.login-container h1 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    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 {
    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-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 {
    text-align: center;
    margin-top: 0.75rem;
    color: var(--color-text-faint);
    font-size: var(--font-size-xs);
}

/* ---------- 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);
    border-color: var(--color-primary);
    color: #fff;
}
.view-toggle-btn.active:hover {
    background: var(--color-primary-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: 0.18;
    transition: opacity var(--transition-fast);
}
.stat-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}
.stat-card:hover::before { opacity: 1; }
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-form {
    max-width: 640px;
    margin-bottom: 2.5rem;
}
.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: 0.35;
    z-index: 2;
    pointer-events: none;
}
[data-theme="dark"] .settings-section::before,
[data-theme="system"] .settings-section::before { opacity: 0.55; }
.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; }
.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);
}

/* ── 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); }

/* 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: 769px) {
    .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: 768px) {
    .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;
    }
    .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: 768px) {
    [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;
    }

    /* 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;
}
.service-card-header {
    padding-right: 2.5rem;
}
.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); }

/* ---------- Bundle Cards ---------- */
.bundle-card .service-card-footer { justify-content: space-between; align-items: center; }
.bundle-meta { font-size: 0.85rem; color: var(--text-muted); }
.bundle-subscribe-section { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
[data-theme="dark"] .bundle-meta { color: var(--text-muted); }

/* ---------- 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, #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-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;
}
.form-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);
}
.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;
    padding: 0 5px;
    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: 0.18;
    transition: opacity var(--transition-fast);
}
.stats-strip-card:hover {
    border-color: var(--color-border-hover);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
    color: inherit;
}
.stats-strip-card:hover::before { opacity: 1; }
.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);
    border-color: var(--color-primary);
    color: #fff;
}
.category-tile-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.category-tile-count {
    color: var(--color-text-faint);
    font-weight: 400;
}
.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;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.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: 100%; 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-pill:has(input:checked) {
    background: var(--color-primary);
    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; }
    .filter-bar-divider { width: 100%; height: 1px; }
}

/* ── Collapsible filter bar ──────────────────────────────────────── */
.filter-bar {
    position: relative;
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
    transition: padding var(--transition-fast);
}
.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;
}
.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;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 1.5rem;
    overflow-x: auto;
}
.detail-tab {
    padding: 0.75rem 1.25rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: var(--font-sans);
}
.detail-tab:hover {
    color: var(--color-text);
}
.detail-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 600;
}
.detail-tab svg {
    width: 16px;
    height: 16px;
}
.detail-tab-panel {
    display: none;
}
.detail-tab-panel.active {
    display: block;
}

/* ---------- 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; }
}
.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);  }

/* ── 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;
}

.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);
    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 ──────────────────────────────────────────── */
.service-table-wrapper {
    min-width: 100%;
}

@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::before {
    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);
}

/* ── Cost simulator (builder preview + bundle detail) ─── */
.bundle-sim-input {
    width: 64px;
    padding: 0.2rem 0.35rem;
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    text-align: center;
}
.bundle-sim-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.bundle-sim-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* bundle detail — per-user badge */
.bundle-badge-per-user {
    background: color-mix(in srgb, var(--color-primary) 15%, transparent);
    color: var(--color-primary);
}

/* bundle detail — simulator row in tfoot */
.bundle-sim-inline {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.bundle-total-row td {
    border-top: 2px solid var(--color-border);
    padding-top: 0.6rem;
}

/* customer bundle detail — cost simulator panel */
.bundle-cost-sim-panel {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.875rem 1rem;
}
.bundle-cost-sim-panel-inner {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.bundle-cost-sim-panel-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
}
.bundle-cost-sim-panel-label {
    color: var(--color-text-muted);
    font-weight: 500;
}
.bundle-cost-sim-panel-sim {
    border-top: 1px dashed var(--color-border);
    padding-top: 0.4rem;
    margin-top: 0.2rem;
}
.bundle-cost-sim-panel-total {
    border-top: 1px solid var(--color-border);
    padding-top: 0.4rem;
    margin-top: 0.2rem;
    font-size: var(--font-size-base);
}

/* 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);
    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);
}
.cust-stat-card:hover::before { opacity: 1; }
    transform: translateY(-2px);
    color: inherit;
}
.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;
}
.btn-xs {
    padding: 0.1rem 0.45rem;
    font-size: var(--font-size-xs);
    border-radius: var(--radius-sm);
}

/* 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; }
}

/* ── Bundle Approval Groups (approvals page) ─────────────────────────── */
.bundle-approval-group {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}
.bundle-approval-group-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: var(--color-surface-raised, var(--color-surface));
    border-bottom: 1px solid var(--color-border);
}
.bundle-approval-group-title {
    font-weight: 600;
    font-size: var(--font-size-sm);
}
.bundle-prereq-row {
    background: var(--color-surface-alt, rgba(0,0,0,.02));
}
.bundle-prereq-row td {
    color: var(--color-text-muted);
}

/* ── 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);
}
.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);
    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; }  /* was 640px, centered */

.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);
    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);
}



/* ==========================================================================
   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);
    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); 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; }

/* ---------- Bundle composition progress bar ---------- */
.bundle-composition-bar {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.bundle-composition-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
}
.bundle-composition-track {
    flex: 1;
    min-width: 100px;
    height: 8px;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-full);
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.bundle-composition-fill {
    height: 100%;
    background: var(--color-success, #22c55e);
    border-radius: var(--radius-full);
    transition: width 0.4s ease;
}
.bundle-composition-count {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
}

/* ---------- 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); }

/* ---------- 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: 1.5rem; right: 1.5rem; z-index: 200;
    width: 3.25rem; height: 3.25rem; border-radius: 50%;
    background: var(--color-primary); color: #fff; border: none;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(16,24,40,.20); cursor: pointer;
    transition: background .15s, transform .15s;
}
.ai-chat-fab:hover { background: var(--color-primary-dark, #1d4ed8); transform: scale(1.06); }
.ai-chat-fab [data-lucide] { width: 22px; height: 22px; }

.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; }

.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); }

.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); 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, .catalog-chat-bubble ul { margin: .25rem 0 .25rem .75rem; padding-left: 1rem; }
.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;
    background: rgba(16,24,40,.18);
}
.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, #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); 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);
    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 { 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);
    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-dark, #1d4ed8); }
.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;
    width: 4000px;
    height: 4000px;
    pointer-events: none;
    overflow: visible;
}
.flow-edges-svg path {
    pointer-events: stroke;
    stroke-width: 2;
    fill: none;
    cursor: pointer;
}
.flow-edges-svg path:hover {
    stroke-width: 3;
    opacity: 0.8;
}
.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;
    transition: transform 0.1s, background 0.1s;
}
.flow-port:hover {
    transform: scale(1.3);
    background: var(--color-primary-dark, var(--color-primary));
}
.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    { transform: translateX(-50%) scale(1.3); }
.flow-port.port-bottom:hover { transform: translateX(-50%) scale(1.3); }
.flow-port.port-left:hover   { transform: translateY(-50%) scale(1.3); }
.flow-port.port-right:hover  { transform: translateY(-50%) scale(1.3); }

.port-label {
    position: absolute;
    white-space: nowrap;
    font-size: 10px;
    color: var(--color-text-muted);
    pointer-events: none;
    background: var(--color-bg);
    padding: 1px 3px;
    border-radius: 3px;
    line-height: 1.2;
}
/* Position labels outside the node bounds based on port side */
.flow-port.port-right .port-label {
    left: calc(100% + 5px);
    top: 50%;
    transform: translateY(-50%);
}
.flow-port.port-left .port-label {
    right: calc(100% + 5px);
    top: 50%;
    transform: translateY(-50%);
}
.flow-port.port-bottom .port-label {
    top: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
}
.flow-port.port-top .port-label {
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
}

/* ── 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; }
.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); }
.inventory-toast-container { position: fixed; top: 4.5rem; right: 1.5rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; max-width: 420px; pointer-events: none; }
.inventory-toast-item { pointer-events: auto; padding: 0.75rem 1.25rem; min-width: 220px; border-radius: var(--radius); font-size: var(--font-size-sm); font-weight: 500; box-shadow: var(--shadow-lg); animation: toast-in 300ms cubic-bezier(0.4,0,0.2,1) forwards; transform: translateX(100%); opacity: 0; }
.inventory-toast-item.inventory-toast-out { animation: toast-out 200ms cubic-bezier(0.4,0,0.2,1) forwards; }

/* 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 --- */
.text-muted   { color: var(--color-text-muted); }
.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-checkbox { width:16px; height:16px; flex-shrink:0; margin-right:4px; cursor:pointer; }
.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; }
.sol-card-delete-form { flex:1; }
.sol-card-delete-btn { width:100%; }

/* Table view */
.sol-table-hidden { display:none; }
.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; }
.sol-delete-inline { display:inline; }
.sol-delete-btn { color:var(--color-danger); }

/* 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 — table view */
.service-table-row.comp-type-library          td:first-child { border-left:3px solid var(--color-primary); }
.service-table-row.comp-type-api              td:first-child { border-left:3px solid var(--badge-info-text); }
.service-table-row.comp-type-database         td:first-child { border-left:3px solid var(--badge-success-text); }
.service-table-row.comp-type-team             td:first-child { border-left:3px solid #d97706; }
.service-table-row.comp-type-microservice     td:first-child { border-left:3px solid var(--badge-partner-text, #0E7090); }
.service-table-row.comp-type-saas             td:first-child { border-left:3px solid var(--badge-vendor-text, #0891b2); }
.service-table-row.comp-type-os_package       td:first-child { border-left:3px solid #84cc16; }
.service-table-row.comp-type-container        td:first-child { border-left:3px solid #0ea5e9; }
.service-table-row.comp-type-runtime          td:first-child { border-left:3px solid #f97316; }
.service-table-row.comp-type-framework        td:first-child { border-left:3px solid #8b5cf6; }
.service-table-row.comp-type-internal_service td:first-child { border-left:3px solid #64748b; }

/* 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); }

/* ==========================================================================
   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.25rem; }

/* --- 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; }

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

/* --- 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, #2563eb);
    color: #fff;
    border-color: var(--color-primary, #2563eb);
}
.gt-btn-primary:hover {
    background: color-mix(in srgb, var(--color-primary, #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; }
}

/* ============================================================
 * 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;
}
.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); }
}