/* Geist Font Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

@font-face {
    font-family: 'Geist';
    src: url('https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-sans/Geist-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-sans/Geist-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-sans/Geist-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Lucerna Design Tokens - Rufilla Brand */
:root {
    /* Primary Colors - Rufilla Brand */
    --color-primary: #DB3512;
    --color-primary-hover: #b82c0f;
    --color-primary-light: #fde8e4;
    
    /* Secondary/Accent - Rufilla Purple */
    --color-accent: #764AB7;
    --color-accent-hover: #5f3a94;
    --color-accent-light: #ebe4f4;
    
    /* Brand Colors */
    --color-brand-red: var(--color-primary);
    --color-brand-black: #131313;
    --color-brand-purple: var(--color-accent);
    --color-brand-gray: #ECECEC;
    
    /* Neutral Colors */
    --color-gray-50: #fafafa;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #ECECEC;
    --color-gray-300: #d4d4d4;
    --color-gray-400: #a3a3a3;
    --color-gray-500: #737373;
    --color-gray-600: #525252;
    --color-gray-700: #404040;
    --color-gray-800: #262626;
    --color-gray-900: #131313;
    
    /* Status Colors */
    --color-success: #10b981;
    --color-success-dark: #065f46;
    --color-warning: #FB9124;
    --color-warning-dark: #92400e;
    --color-danger: var(--color-primary);
    --color-danger-dark: #991b1b;
    --color-danger-hover: #b91c1c;
    --color-remove: #8B0000;
    --color-remove-hover: #6B0000;
    --color-info: var(--color-accent);
    --color-info-dark: var(--color-accent-hover);
    /* Status Backgrounds */
    --color-success-light: #d1fae5;
    --color-warning-light: #fef3c7;
    --color-danger-light: #fee2e2;
    /* CRA Reports sidebar link while any reporting event is open (LUC-108) —
       light tint of --color-primary */
    --color-cra-attention-bg: #fbe8e4;
    --color-info-light: #ebe4f4;
    --color-info-lighter: #f5f0fa;

    /* Blue accent (info banners, badges, kernel modules) */
    --color-blue: #3b82f6;
    --color-blue-light: #dbeafe;
    --color-blue-lighter: #e0f2fe;
    --color-blue-dark: #1e40af;
    --color-blue-muted: #60a5fa;

    /* Indigo (kernel local-reachability badges) */
    --color-indigo-light: #e0e7ff;
    --color-indigo-dark: #3730a3;

    /* Vivid purple (kernel security modules) */
    --color-purple-vivid: #a855f7;
    --color-purple-vivid-light: #faf5ff;

    /* AI panel muted accent colours */
    --color-ai-score-critical: #b45c5c;
    --color-ai-score-high: #c4915c;
    --color-ai-score-medium: #b8a85c;
    --color-ai-score-low: var(--color-slate);
    --color-ai-agree: #5c8a5c;
    --color-ai-agree-light: #7a9a7a;
    --color-ai-knowledge-bg: #e8f0f4;
    --color-ai-knowledge-text: #4a6572;
    --color-ai-knowledge-border: #b8c9d4;
    --color-ai-knowledge-user-bg: #e8f4e8;
    --color-ai-knowledge-user-text: #4a6549;
    --color-ai-chat-bg: #f0f4f8;

    /* Feedback success (green) */
    --color-feedback-success-bg: #e8f5e9;
    --color-feedback-success-text: #2e7d32;

    /* UI Colors */
    --color-white: #ffffff;
    --color-white-translucent: rgba(255, 255, 255, 0.3);
    --color-overlay: rgba(19, 19, 19, 0.5);
    --color-gray-light: #a3a3a3;
    --color-black: #131313;

    /* ---- Clickable-element tokens ----
       All button + nav-clickable + role-pill rules pull from these tokens.
       To restyle the brand red, change --color-primary above and the
       button gradient/shadow tokens below. */

    /* Primary (red) gradient + shadow */
    --color-primary-gradient-start: var(--color-primary);
    --color-primary-gradient-end: var(--color-primary-hover);
    --color-primary-gradient-start-hover: #c42f10;
    --color-primary-gradient-end-hover: #a0260d;
    --color-primary-shadow: rgba(219, 53, 18, 0.25);
    --color-primary-shadow-hover: rgba(219, 53, 18, 0.35);
    --color-primary-tint: rgba(219, 53, 18, 0.03);

    /* Accent (purple) gradient + shadow */
    --color-accent-gradient-start: var(--color-accent);
    --color-accent-gradient-end: var(--color-accent-hover);
    --color-accent-gradient-start-hover: #6a42a5;
    --color-accent-gradient-end-hover: #543385;
    --color-accent-shadow: rgba(118, 74, 183, 0.25);
    --color-accent-shadow-hover: rgba(118, 74, 183, 0.35);

    /* Role colours (used by role-pill, nav-user chip, business-switcher) */
    --color-role-admin: var(--color-primary);
    --color-role-member: var(--color-accent-hover);
    --color-role-viewer: var(--color-gray-400);


    /* Audit trail colors (used for CVE detail audit trail) */
    --color-audit-manual: var(--color-primary);
    --color-audit-automatic: var(--color-gray-400);

    /* Slate (save-knowledge button) */
    --color-slate: #6b8a99;

    /* Pagination tokens (Figma: text-style Prev/Next, dark circle for active page) */
    --color-page-active: var(--color-brand-black);
    --color-page-active-text: var(--color-white);
    --color-page-inactive-text: var(--color-gray-700);
    --color-page-inactive-bg-hover: var(--color-gray-100);
    --color-page-nav-text: var(--color-gray-900);
    --color-page-nav-text-hover: var(--color-brand-black);
    --color-page-nav-disabled: var(--color-gray-light);
    --size-page-circle: 32px;

    /* Dev-mode button (purple tint, dashed) */
    --color-dev-bg-start: #f5f3ff;
    --color-dev-bg-end: #ede9fe;
    --color-dev-bg-hover-start: #ede9fe;
    --color-dev-bg-hover-end: #ddd6fe;
    --color-dev-text: #6d28d9;
    --color-dev-text-hover: #5b21b6;
    --color-dev-border: #8b5cf6;
    --color-dev-border-hover: #7c3aed;
    --color-dev-pulse: #8b5cf6;

    /* Dark "upload scan" button */
    --color-upload-scan-bg: var(--color-brand-black);
    --color-upload-scan-bg-hover: #2a2a2a;

    /* Delete-icon button */
    --color-delete-icon-bg: var(--color-danger-light);
    --color-delete-icon-bg-hover: var(--color-danger-light);
    --color-delete-icon-border: var(--color-remove);
    --color-delete-icon-border-hover: var(--color-remove-hover);

    /* Muted/secondary-muted button family */
    --color-btn-muted-bg: #6b7280;
    --color-btn-muted-bg-hover: #4b5563;
    --color-btn-muted-secondary-bg: #e5e7eb;
    --color-btn-muted-secondary-bg-hover: #d1d5db;
    --color-btn-muted-secondary-text: #4b5563;
    --color-btn-muted-secondary-border: #d1d5db;
    --color-btn-muted-secondary-border-hover: #9ca3af;
    --color-btn-muted-link-text: #6b7280;
    --color-btn-muted-link-text-hover: #374151;

    /* AI-muted button */
    --color-btn-ai-muted-bg: #e5e7eb;
    --color-btn-ai-muted-bg-hover: #d1d5db;
    --color-btn-ai-muted-text: #374151;
    --color-btn-ai-muted-border: #d1d5db;
    --color-btn-ai-muted-border-hover: #9ca3af;

    /* Feedback button (CVE detail) */
    --color-btn-feedback-bg: var(--color-white);
    --color-btn-feedback-bg-hover: #f3f4f6;
    --color-btn-feedback-bg-active: #e5e7eb;
    --color-btn-feedback-text: #6b7280;
    --color-btn-feedback-text-active: #374151;
    --color-btn-feedback-border: #e5e7eb;
    --color-btn-feedback-border-hover: #d1d5db;
    --color-btn-feedback-border-active: #9ca3af;

    /* Letter Spacing */
    --letter-spacing-tight: 0.5px;
    --letter-spacing-wide: 1px;
    
    /* Typography - Geist Font Family */
    --font-base: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;
    
    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    
    /* Sizes */
    --size-icon: 40px;
    --size-spinner: 14px;
    --size-stat-icon: 60px;
    --size-close-icon: 28px;
    --size-auth-offset: 200px;
    
    /* Min Widths */
    --min-width-form-control: 300px;
    --min-width-card: 180px;
    --min-width-card-grid: 300px;
    
    /* Max Widths */
    --max-width-container: 2400px;
    --max-width-form: 800px;
    --max-width-modal: 500px;
    --max-width-auth: 450px;
    --max-width-logo: 200px;
    --max-width-content: 300px;
    
    /* Borders */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    /* ---- Pill / badge colour tokens ----
       All pill colour tokens (severity, status, triage, chart-line)
       live in partials/_pill_tokens.html — the single source of truth
       shared by web (base.html) and PDF templates. */

    /* Generic badge pills */
    --pill-badge-admin-bg: var(--color-danger);
    --pill-badge-admin-text: #ffffff;
    --pill-badge-user-bg: var(--color-primary);
    --pill-badge-user-text: #ffffff;
    --pill-badge-viewer-bg: var(--color-gray-400);
    --pill-badge-viewer-text: #ffffff;
    --pill-badge-success-bg: var(--color-success);
    --pill-badge-success-text: #ffffff;
    --pill-badge-error-bg: var(--color-danger);
    --pill-badge-error-text: #ffffff;
    --pill-badge-info-bg: var(--color-info-light);
    --pill-badge-info-text: var(--color-info-dark);
    --border-width-xs: 1px;
    --border-width-sm: 2px;
    --border-width-md: 3px;
    --border-width-lg: 4px;
    
    /* Breakpoints */
    --breakpoint-form-row: 200px;
    --breakpoint-mobile: 768px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.1);
    --focus-ring-neutral: 0 0 0 3px rgba(0, 0, 0, 0.06);

    /* Shared select arrow (brand red chevron) */
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpolygon points='0,0 10,0 5,6' fill='%23DB3512'/%3E%3C/svg%3E");
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-y: scroll;
}

html.has-sidebar {
    overflow: hidden;
    height: 100vh;
}

body {
    font-family: var(--font-base);
    line-height: 1.6;
    color: var(--color-gray-900);
    background-color: var(--color-gray-50);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.has-sidebar {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Navigation */
.navbar {
    background-color: var(--color-white);
    color: var(--color-gray-900);
    padding: var(--space-4) 0;
    box-shadow: var(--shadow-md);
    border-bottom: var(--border-width-xs) solid var(--color-gray-200);
    position: sticky;
    top: 0;
    z-index: 1000;
}

body.has-sidebar .navbar {
    box-shadow: none;
    border-bottom: none;
    padding-top: var(--space-6);
    padding-bottom: var(--space-10);
}

.nav-container {
    width: 90%;
    max-width: var(--max-width-container);
    margin: 0 auto;
    padding: 0 var(--space-8);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.nav-brand-link {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
    cursor: pointer;
}

.nav-brand-link:hover {
    opacity: 0.8;
}

.nav-logo {
    height: var(--size-icon);
    width: auto;
}

.nav-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.brand-subtitle {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    font-weight: 400;
}

.nav-menu {
    display: flex;
    gap: var(--space-6);
    align-items: center;
}

.nav-link {
    color: var(--color-gray-700);
    text-decoration: none;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    transition: all 0.3s;
    font-weight: 500;
    /* Reset native button appearance so <button class="nav-link"> matches <a class="nav-link"> */
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
}

.nav-link:hover {
    background-color: var(--color-gray-100);
    color: var(--color-primary);
}

.nav-logout {
    background-color: var(--color-gray-100);
    color: var(--color-gray-800);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-4);
    font-weight: 600;
}

.nav-logout:hover {
    background-color: var(--color-gray-200);
    color: var(--color-gray-900);
}

.nav-user-link {
    text-decoration: none;
    transition: all 0.3s;
}

.nav-user-link:hover .nav-user {
    opacity: 0.92;
}

.nav-user {
    color: var(--color-white);
    padding: var(--space-2) var(--space-4);
    background-color: var(--color-gray-500);
    border-radius: var(--radius-sm);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

.nav-user-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.nav-user-admin {
    background-color: var(--color-role-admin);
}

.nav-user-member {
    background-color: var(--color-role-member);
}

.nav-user-viewer {
    background-color: var(--color-role-viewer);
}

.nav-form {
    display: inline;
    margin: 0;
}

.business-switcher-form {
    margin: 0;
}

.nav-user-link:hover .nav-user-admin,
.nav-user-link:hover .nav-user-member,
.nav-user-link:hover .nav-user-viewer {
    filter: brightness(0.92);
}

/* Container */
.container {
    width: 90%;
    max-width: var(--max-width-container);
    margin: var(--space-8) auto;
    padding: 0 var(--space-8);
    flex: 1;
}

/* Dashboard Header */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.dashboard-subtitle {
    color: var(--color-gray-600);
    font-size: var(--text-base);
}

/* CVE Trend Chart Container */
.cve-trend-chart-container {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-md);
}

.cve-trend-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.cve-trend-chart-header h3 {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-gray-700);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* ── Chart info icon + tooltip ──────────────────────────────────────────── */
.chart-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    cursor: default;
    flex-shrink: 0;
    position: relative;
}

.chart-info-icon::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-gray-800);
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    white-space: normal;
    width: 260px;
    padding: 8px 10px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
    z-index: 100;
}

.chart-info-icon:hover::after,
.chart-info-icon:focus::after {
    opacity: 1;
}

.cve-trend-chart-subtitle {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
}

.cve-trend-chart-wrapper {
    height: 220px;
    position: relative;
}

/* Stocks-style range selector on the release-over-time chart */
.luc-range-selector {
    display: flex;
    gap: var(--space-1);
    margin-left: auto;
    margin-right: var(--space-3);
}

.luc-range-selector button {
    border: 1px solid var(--color-gray-200);
    background: var(--color-white);
    color: var(--color-gray-600);
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.luc-range-selector button:hover {
    border-color: var(--color-gray-400);
    color: var(--color-gray-800);
}

.luc-range-selector button.is-active {
    background: var(--color-gray-800);
    border-color: var(--color-gray-800);
    color: var(--color-white);
}

/* Scan Info Section - Metadata on left, compact tiles on right */
.scan-info-section {
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
    margin-bottom: var(--space-4);
}

.scan-metadata-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    flex-shrink: 0;
    box-shadow: var(--shadow-md);
}

.meta-table {
    border-collapse: separate;
    border-spacing: 16px 4px;
}

.meta-table td {
    padding: 0;
    vertical-align: top;
}

.meta-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-gray-900);
    white-space: nowrap;
    text-align: right;
}

.meta-label::after {
    content: ":";
}

.meta-value {
    font-size: 0.9375rem;
    font-weight: 400;
    color: #6b7280;
}

/* Filter pills - compact horizontal badges */
.filter-grid-compact {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    align-content: center;
    height: 100%;
}

/* Severity scorecard container */
.severity-scorecard-container {
    margin-bottom: var(--space-4);
}

.severity-scorecard-container .stat-card-scorecard {
    max-width: none;
    width: 100%;
}

/* Dashboard 2-column row layout */
.dashboard-row-two-col {
    display: grid;
    grid-template-columns: minmax(280px, 320px) 1fr;
    gap: var(--space-4);
    align-items: stretch;
    margin-bottom: var(--space-4);
}

.dashboard-row-two-col .scan-metadata-card {
    margin-bottom: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

.dashboard-row-two-col .cve-trend-chart-inline {
    margin-bottom: 0;
    min-height: 240px;
}

.dashboard-row-two-col .cve-trend-chart-inline .cve-trend-chart-wrapper {
    height: 200px;
}

/* View Mode Bar with Filter Tags */
.view-mode-bar {
    margin: var(--space-3) 0;
    padding: var(--space-2) var(--space-3);
    background-color: #f8f9fa;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-200);
}

/* Filter Tags - compact colored pills */
.filter-tags {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
}

.filter-tags .filter-tag {
    flex: 1;
    justify-content: center;
}

.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.filter-tag-count {
    font-weight: 600;
}

/* Inactive (default) state — all filter tags render light grey */
.filter-tag-total,
.filter-tag-unpatched,
.filter-tag-patched,
.filter-tag-ignored,
.filter-tag-triaged,
.filter-tag-untriaged {
    background-color: var(--color-gray-100);
    color: var(--color-gray-700);
    border: 1px solid var(--color-gray-200);
}
.filter-tag-total:hover,
.filter-tag-unpatched:hover,
.filter-tag-patched:hover,
.filter-tag-ignored:hover,
.filter-tag-triaged:hover,
.filter-tag-untriaged:hover {
    background-color: var(--color-gray-200);
}

/* Active state — each pill takes on its own colour */
.filter-tag-total.filter-tag-active {
    background-color: var(--pill-filter-total-bg);
    color: var(--pill-filter-total-text);
    border-color: var(--pill-filter-total-bg);
}
.filter-tag-unpatched.filter-tag-active {
    background-color: var(--pill-status-unpatched-bg);
    color: var(--pill-status-unpatched-text);
    border-color: var(--pill-status-unpatched-bg);
}
.filter-tag-patched.filter-tag-active {
    background-color: var(--pill-status-patched-bg);
    color: var(--pill-status-patched-text);
    border-color: var(--pill-status-patched-bg);
}
.filter-tag-ignored.filter-tag-active {
    background-color: var(--pill-filter-ignored-bg);
    color: var(--pill-filter-ignored-text);
    border-color: var(--pill-filter-ignored-bg);
}
.filter-tag-triaged.filter-tag-active {
    background-color: var(--pill-filter-triaged-bg);
    color: var(--pill-filter-triaged-text);
    border-color: var(--pill-filter-triaged-bg);
}
.filter-tag-untriaged.filter-tag-active {
    background-color: var(--pill-status-untriaged-bg);
    color: var(--pill-status-untriaged-text);
    border-color: var(--pill-status-untriaged-bg);
}

/* Severity filter buttons — colour-coded row below status filter tags */
.severity-filter-buttons {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
}
.severity-filter-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
    cursor: pointer;
    border: 2px solid transparent;
}
.severity-filter-btn-count {
    font-weight: 600;
}
/* Inactive (default) state — all severity buttons render light grey */
.severity-filter-btn-exploitable,
.severity-filter-btn-critical,
.severity-filter-btn-high,
.severity-filter-btn-medium,
.severity-filter-btn-low {
    background-color: var(--color-gray-100);
    color: var(--color-gray-700);
    border-color: var(--color-gray-200);
}
.severity-filter-btn-exploitable:hover,
.severity-filter-btn-critical:hover,
.severity-filter-btn-high:hover,
.severity-filter-btn-medium:hover,
.severity-filter-btn-low:hover {
    background-color: var(--color-gray-200);
}

/* Active state — each button takes on its own severity colour.
   Exploitable (CISA KEV) uses the brand red, matching the KEV flag. */
.severity-filter-btn-exploitable.severity-filter-btn-active {
    background-color: var(--color-brand-red);
    color: var(--color-white);
    border-color: var(--color-brand-red);
}
.severity-filter-btn-critical.severity-filter-btn-active {
    background-color: var(--pill-severity-critical-bg);
    color: var(--pill-severity-critical-text);
    border-color: var(--pill-severity-critical-bg);
}
.severity-filter-btn-high.severity-filter-btn-active {
    background-color: var(--pill-severity-high-bg);
    color: var(--pill-severity-high-text);
    border-color: var(--pill-severity-high-bg);
}
.severity-filter-btn-medium.severity-filter-btn-active {
    background-color: var(--pill-severity-medium-bg);
    color: var(--pill-severity-medium-text);
    border-color: var(--pill-severity-medium-bg);
}
.severity-filter-btn-low.severity-filter-btn-active {
    background-color: var(--pill-severity-low-bg);
    color: var(--pill-severity-low-text);
    border-color: var(--pill-severity-low-bg);
}

/* Expandable Filter Summary */
.filter-summary {
    margin-top: var(--space-3);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.filter-summary-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-gray-700);
    text-align: left;
    transition: background-color 0.15s ease;
}

.filter-summary-toggle:hover {
    background-color: var(--color-gray-100);
}

.filter-summary-chevron {
    font-size: 10px;
    color: var(--color-primary);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.filter-summary.expanded .filter-summary-chevron {
    transform: rotate(90deg);
}

.filter-summary-collapsed-text {
    font-size: 13px;
    font-family: inherit;
    font-weight: 600;
    color: var(--color-gray-900);
}

.filter-summary-details {
    display: none;
    padding: 0 var(--space-3) var(--space-3) var(--space-3);
    border-top: 1px solid var(--color-gray-200);
}

.filter-summary.expanded .filter-summary-details {
    display: block;
}

.filter-summary-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    font-size: 13px;
    color: var(--color-gray-700);
}

.filter-summary-row:first-child {
    padding-top: var(--space-2);
}

.filter-summary-sev {
    font-weight: 600;
    min-width: 70px;
}

.filter-summary-sev-critical { color: var(--pill-severity-critical-bg); }
.filter-summary-sev-high { color: var(--pill-severity-high-bg); }
.filter-summary-sev-medium { color: var(--pill-severity-medium-bg); }
.filter-summary-sev-low { color: var(--pill-severity-low-bg); }

.filter-summary-counts {
    color: var(--color-gray-600);
}

/* Full-width trend chart */
.cve-trend-chart-fullwidth {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-bottom: var(--space-4);
}

.cve-trend-chart-fullwidth .cve-trend-chart-wrapper {
    height: 180px;
}

/* Responsive: stack columns on smaller screens */
@media (max-width: 900px) {
    .dashboard-row-two-col {
        grid-template-columns: 1fr;
    }
    
    .dashboard-row-filters {
        grid-template-columns: 1fr;
    }
    
    .filter-pills-vertical {
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: auto;
    }
}

/* Filter and Scorecard Row Layout - Using CSS Grid */
.filter-scorecard-row {
    display: grid;
    grid-template-columns: minmax(400px, 500px) 1fr;
    gap: var(--space-6);
    align-items: start;
    margin-bottom: var(--space-4);
}

/* Filter Grid tile layout - all 5 tiles in one row */
.filter-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-2);
    margin: 0;
    padding: 0;
}

/* Scorecard in row layout */
.stat-card.stat-card-scorecard {
    min-width: 0;
    max-width: none;
    padding: var(--space-4);
    align-items: flex-start;
    display: block;
    margin: 0;
}

/* Statistics Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-width-card), 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-10);
}

.stat-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-md);
    display: flex;
    gap: var(--space-3);
    align-items: center;
    transition: all 0.3s;
}

.stat-card:hover {
    box-shadow: var(--shadow-lg);
}

.stat-card-wide {
    grid-column: span 2;
}

.stat-card-filter {
    transition: all 0.2s ease;
}

.stat-card-filter:hover {
    border-left-color: var(--color-primary);
}

.stat-icon {
    font-size: var(--text-2xl);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.stat-icon-total {
    background-color: var(--color-info-light);
}

.stat-icon-critical {
    background-color: var(--color-danger-light);
}

.stat-icon-triaged {
    background-color: var(--color-success-light);
}

.stat-icon-ignored {
    background-color: var(--color-gray-100);
}

.stat-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-content h3 {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-gray-600);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-number {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: 0;
    line-height: 1.2;
}

.stat-label {
    font-size: var(--text-xs);
    color: var(--color-gray-400);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Headline summary tiles ----
   Shared component for centred "headline number + label" tiles used
   on dashboard-section blocks (e.g. the image report's executive
   summary). Distinct from the icon-row .stat-card pattern above.
   Variants apply an accent left-border + tinted background.
   Render via the `summary_tile` macro in templates/partials/_buttons.html. */
.summary-tile-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.summary-tile {
    text-align: center;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-gray-50);
    border: var(--border-width-xs) solid var(--color-gray-200);
}

.summary-tile-total {
    border-left: var(--border-width-lg) solid var(--color-blue);
}

.summary-tile-critical {
    border-left: var(--border-width-lg) solid var(--pill-severity-critical-bg);
    background: var(--color-danger-light);
}

.summary-tile-patched {
    border-left: var(--border-width-lg) solid var(--color-success);
    background: var(--color-success-light);
}

.summary-tile-triaged {
    border-left: var(--border-width-lg) solid var(--color-purple-vivid);
    background: var(--color-purple-vivid-light);
}

.summary-tile-value {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-gray-800);
}

.summary-tile-label {
    font-size: var(--text-sm);
    color: var(--color-gray-700);
}

@media (max-width: 768px) {
    .summary-tile-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .summary-tile-grid {
        grid-template-columns: 1fr;
    }
}

/* Alerts */
.alert {
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-brand-black);
    font-size: 1rem;
    text-align: center;
}

.alert-success,
.alert-info {
    background-color: #CEF1E2;
    border-bottom-color: #0BC782;
    color: #0BC782;
}

.alert-error {
    background-color: #F2D3CA;
    border-bottom-color: var(--color-primary);
    color: var(--color-primary);
}

.flash-alert {
    transition: opacity 0.3s ease-out;
}

.flash-alert.fade-out {
    opacity: 0;
}

/* Table Inline Notifications — DEPRECATED
   Use showToast() from utils.js instead for modal-style notifications.
   Kept for backwards compatibility. */
.table-notification-container {
    margin-top: var(--space-4);
}

.table-notification {
    transition: opacity 0.3s ease-out;
}

.table-notification.fade-out {
    opacity: 0;
}

/* Cards */
.card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: var(--space-8);
    margin-bottom: var(--space-8);
    box-shadow: var(--shadow-md);
}

.card h2 {
    margin-bottom: var(--space-6);
    color: var(--color-gray-900);
    font-size: var(--text-2xl);
}

/* Auth Container */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - var(--size-auth-offset));
}

.auth-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-12);
    width: 100%;
    max-width: var(--max-width-auth);
    box-shadow: var(--shadow-lg);
}

.auth-logo {
    text-align: center;
}

.auth-card h1 {
    text-align: center;
    margin-bottom: var(--space-2);
    color: var(--color-primary);
    font-size: var(--text-3xl);
    font-weight: 700;
}

.auth-card p {
    text-align: center;
    margin-bottom: var(--space-6);
    color: var(--color-gray-600);
}

.auth-subtitle {
    text-align: center;
    margin-bottom: var(--space-8);
    color: var(--color-gray-600);
}

.auth-card form {
    text-align: center;
}

.auth-card form .form-group {
    text-align: left;
}

.auth-links {
    margin-top: var(--space-6);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.auth-links a {
    color: var(--color-primary);
    text-decoration: none;
}

.auth-links a:hover {
    text-decoration: underline;
}

/* Utility Classes */
.section-intro {
    margin-bottom: var(--space-4);
}

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

.flex-row {
    display: flex;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}

.flex-1 {
    flex: 1;
}

.form-container {
    max-width: var(--max-width-form);
    margin: 0 auto;
}

.auth-logo-image {
    max-width: var(--max-width-logo);
    margin-bottom: var(--space-6);
}

.section-title-new {
    color: var(--color-warning);
}

.section-title-fixed {
    color: var(--color-success);
}

.section-title-regressed {
    color: var(--color-danger);
}

.section-title-unchanged {
    color: var(--color-gray-600);
}

.summary-cursor {
    cursor: pointer;
    font-weight: bold;
    padding: var(--space-3);
}

.max-w-300 {
    max-width: var(--max-width-content);
}

.info-banner {
    margin-top: var(--space-5);
    padding: var(--space-3);
    background-color: var(--color-info-lighter);
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-info);
    font-weight: bold;
}

/* Spacing Utilities */
.u-mt-1 { margin-top: var(--space-1); }
.u-mt-2 { margin-top: var(--space-2); }
.u-mt-3 { margin-top: var(--space-3); }
.u-mt-4 { margin-top: var(--space-4); }
.u-mt-5 { margin-top: var(--space-5); }
.u-mt-6 { margin-top: var(--space-6); }
.u-mb-4 { margin-bottom: var(--space-4); }
.u-ml-auto { margin-left: auto; }

/* Vertically-aligned small button for use inside flex action-rows
   (e.g. table action columns). Pairs with size='sm'. */
.btn-row-aligned {
    display: inline-flex;
    align-items: center;
    height: 28px;
}

/* Visibility */
.is-hidden {
    display: none;
}

.is-loading {
    pointer-events: none;
    opacity: 0.7;
}

/* Inline Modal */
.inline-modal {
    margin-top: var(--space-5);
    padding: var(--space-5);
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
}

.inline-modal h3 {
    margin-bottom: var(--space-4);
    color: var(--color-gray-900);
}

/* Checkbox Items */
.checkbox-item {
    margin-bottom: var(--space-2);
}

.checkbox-item input[type="checkbox"] {
    margin-right: var(--space-2);
}

/* Loading Spinner */
.spinner {
    display: inline-block;
    width: var(--size-spinner);
    height: var(--size-spinner);
    border: var(--border-width-sm) solid var(--color-white-translucent);
    border-top: var(--border-width-sm) solid var(--color-white);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Forms */
.form-group {
    margin-bottom: var(--space-6);
}

.form-group label:not(.checkbox-label) {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: 500;
    color: var(--color-gray-900);
}

.form-control {
    width: 100%;
    padding: var(--space-3);
    border: var(--border-width-xs) solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-family: inherit;
    transition: border-color 0.3s;
}

.profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.profile-grid > .dashboard-section {
    margin: 0;
}

@media (max-width: 900px) {
    .profile-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Custom dropdown component (single source of truth)
   ------------------------------------------------------------
   Drives every <select data-dropdown> in the app. Every
   colour comes from a token below; tweak the token, every
   dropdown updates. The native <select> is kept in the DOM
   (display: none) so form submission and value sync work
   exactly as before.
   ============================================================ */
:root {
    --dropdown-trigger-bg: var(--color-gray-100);
    --dropdown-trigger-bg-hover: var(--color-gray-200);
    --dropdown-trigger-border: var(--color-gray-200);
    --dropdown-trigger-border-hover: var(--color-gray-300);
    --dropdown-trigger-color: var(--color-gray-900);
    --dropdown-trigger-radius: 6px;
    --dropdown-panel-bg: var(--color-white);
    --dropdown-panel-border: var(--color-gray-200);
    --dropdown-panel-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    --dropdown-panel-radius: 6px;
    --dropdown-row-color: var(--color-gray-900);
    --dropdown-row-hover-bg: var(--color-gray-200);
    --dropdown-row-selected-bg: var(--color-gray-700);
    --dropdown-row-selected-color: var(--color-white);
    --dropdown-arrow-color: var(--color-primary);
}

.dropdown {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.dropdown--full {
    display: block;
    width: 100%;
}

.dropdown--wide .dropdown-trigger { min-width: 310px; }
.dropdown--medium .dropdown-trigger { min-width: 210px; }

/* Keep the native <select> in the layout (overlaying the trigger but
   visually invisible & non-interactive) so:
     - form submission still picks up its value
     - browser `required` constraint validation still fires and the
       browser-anchored validation popup points to the visible trigger
   We can't use display:none — that disables constraint validation. */
.dropdown-native-hidden {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.dropdown-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 10px 14px 10px 16px;
    border: 1px solid var(--dropdown-trigger-border);
    border-radius: var(--dropdown-trigger-radius);
    background-color: var(--dropdown-trigger-bg);
    color: var(--dropdown-trigger-color);
    font-size: 13px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.15s ease;
}

.dropdown--compact .dropdown-trigger {
    padding: 6px 10px 6px 12px;
    font-size: var(--text-sm);
}

.dropdown--full .dropdown-trigger {
    padding: 12px 14px 12px 16px;
    font-size: var(--text-base);
    border-radius: var(--radius-md);
    background-color: var(--dropdown-trigger-bg);
    border-color: var(--color-gray-300);
}

.dropdown-trigger:hover:not(:disabled) {
    background-color: var(--dropdown-trigger-bg-hover);
    border-color: var(--dropdown-trigger-border-hover);
}

.dropdown--full .dropdown-trigger:hover:not(:disabled) {
    background-color: var(--dropdown-trigger-bg-hover);
    border-color: var(--color-gray-400);
}

.dropdown-trigger:focus-visible {
    border-color: var(--color-gray-400);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.dropdown--full .dropdown-trigger:focus-visible {
    border-color: var(--color-primary);
}

.dropdown--open .dropdown-trigger {
    border-color: var(--dropdown-trigger-border-hover);
}

.dropdown-trigger:disabled,
.dropdown--disabled .dropdown-trigger {
    cursor: not-allowed;
    opacity: 0.6;
}

.dropdown-trigger-label {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-trigger-arrow {
    flex-shrink: 0;
    width: 10px;
    height: 6px;
    background-image: var(--select-arrow);
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.15s ease;
}

.dropdown--open .dropdown-trigger-arrow {
    transform: rotate(180deg);
}

.dropdown-panel {
    /* Positioning (position/top/left/min-width) is set inline by
       static/js/dropdown.js, which portals the panel to <body> so
       ancestor overflow:hidden/auto cannot clip it (e.g. modal scroll
       containers). z-index is high enough to sit above modal overlays. */
    position: fixed;
    max-height: 320px;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background-color: var(--dropdown-panel-bg);
    border: 1px solid var(--dropdown-panel-border);
    border-radius: var(--dropdown-panel-radius);
    box-shadow: var(--dropdown-panel-shadow);
    overflow-y: auto;
    z-index: 10000;
}

.dropdown-option {
    padding: 8px 14px;
    font-size: 13px;
    color: var(--dropdown-row-color);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown--compact .dropdown-option,
.dropdown--full .dropdown-option {
    font-size: var(--text-sm);
}

.dropdown-option--active {
    background-color: var(--dropdown-row-hover-bg);
}

.dropdown-option[aria-selected="true"] {
    background-color: var(--dropdown-row-selected-bg);
    color: var(--dropdown-row-selected-color);
}

.dropdown-option[aria-selected="true"].dropdown-option--active {
    background-color: var(--dropdown-row-selected-bg);
    filter: brightness(1.15);
}

.dropdown-option--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
}

.form-group small {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-gray-600);
    font-size: var(--text-sm);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--breakpoint-form-row), 1fr));
    gap: var(--space-4);
    align-items: end;
}

/* ============================================================
   Buttons, nav clickables, role pills, business switcher
   ------------------------------------------------------------
   Render every clickable via the macros in
   templates/partials/_buttons.html. Never hand-write a
   `class="btn ..."`, `class="nav-..."`, `class="role-..."` or
   `class="business-switcher-..."` string in a template.

   Macros (in templates/partials/_buttons.html):
       button(label, variant, size, icon, href, type, disabled,
              name, value, id, form, title, onclick, as_span,
              safe_label, extra_classes, attrs)
       nav_link(label, href, type, form_action, csrf_token_value,
                classes, id, attrs)
       nav_user_link(href, name, role)
       nav_brand_link(href, logo_src, alt)
       business_switcher_item(action_url, csrf_token_value,
                              business_name, role, logo_src,
                              switcher_icon_src,
                              switcher_icon_selected_src=None)
       role_pill(role, label=None)

   Markup convention: <button class="btn btn-{variant} btn-{size}">
   All colours come from --color-* tokens defined in :root above.

   Variants (colour):  primary, secondary, danger, warning, slate,
                       back, accent, outline, neutral, dev,
                       page-active, upload-scan, browse,
                       primary-muted, secondary-muted, ai-muted,
                       feedback, disabled, static
   Sizes:              md (default — no extra class), sm, lg, action

   Out-of-family icon-button / link styles (NOT under .btn-):
       .clear-file-btn   — × to clear an uploaded file
       .delete-icon-btn  — trash-icon button on product hierarchy
       .link-muted       — subtle inline <a> text link
       .pdf-sidebar-cancel-btn — JS-injected PDF-sidebar cancel

   See replit.md "Clickable Elements" for usage details.
   ============================================================ */
.btn {
    padding: var(--space-3) var(--space-6);
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--text-base);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    font-weight: 500;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary-gradient-start) 0%, var(--color-primary-gradient-end) 100%);
    color: var(--color-white);
    border: var(--border-width-sm) solid transparent;
    box-shadow: 0 2px 4px var(--color-primary-shadow);
}

.btn-full-width {
    width: 100%;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--color-primary-shadow-hover);
    background: linear-gradient(135deg, var(--color-primary-gradient-start-hover) 0%, var(--color-primary-gradient-end-hover) 100%);
}

.btn-secondary {
    background-color: var(--color-gray-400);
    color: var(--color-white);
}

.btn-secondary:hover {
    background-color: var(--color-gray-600);
}

.btn-danger {
    background-color: var(--color-danger);
    color: var(--color-white);
}

.btn-danger:hover {
    background-color: var(--color-danger-hover);
}

.btn-remove {
    background-color: var(--color-remove);
    color: var(--color-white);
}

.btn-remove:hover {
    background-color: var(--color-remove-hover);
}

.btn-slate {
    background-color: var(--color-slate);
    color: var(--color-white);
    border: none;
}

.btn-slate:hover {
    filter: brightness(0.92);
}

/* Warning variant — kept for any other callers that need a yellow
   action; the token-management modal now toggles between
   btn-secondary-muted (Revoke) and btn-danger (Delete). */

/* Sizes */
.btn-sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
}

.btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-lg);
}

.btn-action {
    padding: 8px 16px;
    font-size: 13px;
    min-width: 180px;
    height: 36px;
    line-height: 18px;
    box-sizing: border-box;
}

.btn-back {
    background-color: var(--color-gray-100);
    color: var(--color-gray-700);
    border: 1px solid var(--color-gray-300);
}

.btn-back:hover {
    background-color: var(--color-gray-200);
    color: var(--color-gray-800);
    border-color: var(--color-gray-400);
}

/* Muted button family (consolidated from cve_detail.html) */
.link-muted,
.btn-link-muted { /* legacy alias — do not use in new templates */
    font-size: 12px;
    color: var(--color-btn-muted-link-text);
    text-decoration: none;
}

.link-muted:hover,
.btn-link-muted:hover { /* legacy alias */
    color: var(--color-btn-muted-link-text-hover);
    text-decoration: underline;
}

.btn-primary-muted {
    background: var(--color-btn-muted-bg);
    color: var(--color-white);
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-primary-muted:hover {
    background: var(--color-btn-muted-bg-hover);
}

.btn-secondary-muted {
    background: var(--color-btn-muted-secondary-bg);
    color: var(--color-btn-muted-secondary-text);
    border: 1px solid var(--color-btn-muted-secondary-border);
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary-muted:hover {
    background: var(--color-btn-muted-secondary-bg-hover);
}

.btn-ai-muted {
    width: 100%;
    background: var(--color-btn-ai-muted-bg);
    color: var(--color-btn-ai-muted-text);
    border: 1px solid var(--color-btn-ai-muted-border);
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-ai-muted:hover {
    background: var(--color-btn-ai-muted-bg-hover);
    border-color: var(--color-btn-ai-muted-border-hover);
}

.btn-ai-muted:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-feedback {
    background: var(--color-btn-feedback-bg);
    border: 1px solid var(--color-btn-feedback-border);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--color-btn-feedback-text);
}

.btn-feedback:hover:not(:disabled) {
    background: var(--color-btn-feedback-bg-hover);
    border-color: var(--color-btn-feedback-border-hover);
}

.btn-feedback:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-feedback.active {
    background: var(--color-btn-feedback-bg-active);
    border-color: var(--color-btn-feedback-border-active);
    color: var(--color-btn-feedback-text-active);
}

/* Compact icon spacing helper for icon+label buttons (image_report) */
.btn-icon {
    margin-right: var(--space-1);
}

/* Dashboard */
.dashboard,
.dashboard-container {
    padding: var(--space-10) 0 var(--space-2);
}

.dashboard h1,
.dashboard-container h1 {
    margin-bottom: var(--space-8);
    color: var(--color-gray-900);
    font-size: var(--text-3xl);
}

/* Override for dashboard-header h1 specifically */
.dashboard-header h1 {
    font-family: 'Inter', var(--font-heading), sans-serif;
    font-size: 2.5rem;          /* ~40px, matches Figma */
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 0;
}

.dashboard h2 {
    margin-bottom: var(--space-6);
    color: var(--color-gray-900);
    font-size: 1.1rem;
    font-weight: 600;
}

.dashboard-section {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: var(--space-8);
    margin-bottom: var(--space-8);
    box-shadow: var(--shadow-md);
}

/* Tables */
.table-responsive {
    overflow-x: auto;
}

/* =================================================================
   Data tables — single source of truth.

   Use the macros in templates/partials/_tables.html for every
   list/grid in the app:
       data_table(extra_classes='', id=None, attrs={})
       data_table_section(title, meta=None, table_classes='',
                          table_id=None, table_attrs={})
       sortable_header(label, key, sort_by, sort_order, extra=...)

   To restyle every table at once, edit the rules below and the
   tokens they reference in :root — never add per-page overrides.

   Excluded by design:
     - image_report_pdf.html — print-engine specific layout.
     - .severity-counts-table — numeric severity grid, not a list.
   ================================================================= */
.table,
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--space-2);
}

.table th,
.table td,
.data-table th,
.data-table td {
    padding: var(--space-4) var(--space-5);
    text-align: left;
    border-bottom: var(--border-width-xs) solid var(--color-gray-200);
    font-size: var(--text-base);
}

/* Muted, transparent header — matches Figma. */
.table th,
.data-table th {
    background: transparent;
    color: var(--color-gray-500);
    font-weight: 500;
}

/* No underline beneath the header row. */
.table thead th,
.data-table thead th {
    border-bottom: none;
}

/* No underline on the last row of the table. */
.table tbody tr:last-child td,
.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* Row hover is opt-in: only rows tagged .clickable-row react to the cursor.
   Plain read-only tables (e.g. dashboard Team Members and API Tokens) stay
   inert. The actual hover style lives on .clickable-row:hover below. */
.table tbody tr.clickable-row:hover,
.data-table tbody tr.clickable-row:hover {
    background-color: var(--color-gray-100);
}

/* Section wrapper used above a data_table — title on the left,
   optional meta on the right (e.g. "2 total scan(s)"). */
.data-table-section-header,
.bsp-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
}

.data-table-section-header h2,
.bsp-section-header h2 {
    margin: 0;
}

/* Right-hand group of the BSP card header: scan counts + the
   Configure-hardware button. */
.bsp-section-header-right {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* PNG icon inside a button label (matches the emoji icons' optical size) */
.btn-icon-img {
    height: 16px;
    width: auto;
    vertical-align: -3px;
}

.data-table-section-header .data-table-section-meta,
.bsp-section-header .bsp-section-meta {
    margin: 0;
    font-weight: 600;
    color: var(--color-gray-900);
}

/* Allow <col class="col-hidden"> in a colgroup to remove that column
   from layout entirely. The existing .col-hidden rule further down
   only targets <th>/<td>, which leaves the column slot in the table
   grid still reserving width. visibility: collapse on the <col> element
   removes the column from layout, letting sibling columns absorb the
   space. */
.data-table col.col-hidden {
    visibility: collapse;
}

/* Narrow centred column for a single icon-button (e.g. delete row). */
.data-table th.col-icon-action,
.data-table td.col-icon-action {
    width: 50px;
    text-align: center;
}

/* Centred column for two icon-buttons side by side. */
.data-table th.col-icon-actions,
.data-table td.col-icon-actions {
    width: 80px;
    text-align: center;
    white-space: nowrap;
}
.data-table td.col-icon-actions form {
    display: inline;
}

/* Right-aligned numeric column. */
.data-table th.col-numeric,
.data-table td.col-numeric {
    text-align: right;
}

/* Centred column for status badges, toggles, etc. */
.data-table th.col-center,
.data-table td.col-center {
    text-align: center;
}

/* Nowrap column for short fixed values (timestamps, role chips). */
.data-table th.col-nowrap,
.data-table td.col-nowrap {
    white-space: nowrap;
}

/* Wide cell that allows long body content to wrap. */
.data-table td.col-wide {
    max-width: 300px;
    word-break: break-word;
}

/* Label column in a key/value table (first <th> column). */
.data-table th.col-label {
    width: 30%;
}

/* Hidden column — toggled in/out by JS (e.g. the "Open" column on
   image_cves). Use instead of inline style="display:none". */
.data-table th.col-hidden,
.data-table td.col-hidden {
    display: none;
}

/* Wide-but-tighter content cell (e.g. feedback message body). */
.data-table td.col-wide-300 {
    max-width: 300px;
    word-break: break-word;
}

/* Empty-state row used when a table has no data — centred, muted,
   generous vertical padding. Wrap a single full-width <td> with this. */
.data-table td.empty-state {
    text-align: center;
    padding: var(--space-8) var(--space-5);
    color: var(--color-gray-500);
}

/* Clickable table rows */
.clickable-row {
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.clickable-row:hover {
    background-color: var(--color-gray-100);
}

/* Row links for accessibility */
.row-link {
    color: inherit;
    text-decoration: none;
    display: block;
    width: 100%;
}

.row-link:hover {
    text-decoration: none;
    color: inherit;
}

.row-link:focus {
    outline: none;
}

.clickable-row:focus-within {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* Top Progress Bar (YouTube/GitHub style) */
.top-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-warning), var(--color-primary));
    background-size: 200% 100%;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 0 10px var(--color-primary), 0 0 5px var(--color-primary);
}

.top-progress-bar.active {
    opacity: 1;
    width: 100%;
    animation: progressShimmer 1s linear infinite;
}

.top-progress-bar.complete {
    opacity: 0;
    transition: opacity 0.3s ease;
}

@keyframes progressShimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ---- Shared pill base ----
   All pill-shaped labels inherit layout from here.
   Variants only override background-color and color via tokens. */
.pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.4;
}

/* Pill colour modifiers — use with .pill */
.pill-success {
    background-color: var(--pill-badge-success-bg);
    color: var(--pill-badge-success-text);
}

.pill-error {
    background-color: var(--pill-badge-error-bg);
    color: var(--pill-badge-error-text);
}

.pill-info {
    background-color: var(--pill-badge-info-bg);
    color: var(--pill-badge-info-text);
}

.pill-pending {
    background-color: var(--color-warning-light);
    color: var(--color-warning-dark);
}

/* Badges — larger pill variant used in super-admin pages */
.badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.4;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--color-overlay);
}

.modal-content {
    background-color: var(--color-white);
    margin: 5% auto;
    padding: var(--space-8);
    border-radius: var(--radius-md);
    width: 90%;
    max-width: var(--max-width-modal);
}

.modal-content.modal-sm {
    max-width: 400px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.close {
    color: var(--color-gray-light);
    float: right;
    font-size: var(--size-close-icon);
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: var(--color-black);
}

/* Footer */
.footer {
    background-color: var(--color-brand-black);
    color: var(--color-gray-300);
    text-align: center;
    padding: var(--space-3) var(--space-4);
    margin-top: auto;
    border-top: none;
    font-size: var(--text-sm);
}

.footer a {
    color: var(--color-primary);
    transition: color 0.2s ease;
}

.footer a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.text-muted {
    color: var(--color-gray-600);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

/* Settings Section */
.settings-section {
    background: white;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

.settings-section h2 {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--color-gray-900);
}

.settings-section > p.text-muted {
    margin-bottom: var(--space-6);
}

/* Card Grid */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--min-width-card-grid), 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.card-grid .card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
    margin-bottom: 0;
}

.card-grid .card h3 {
    color: var(--color-gray-900);
    margin-bottom: var(--space-2);
}

.card-grid .card p {
    color: var(--color-gray-600);
    margin-bottom: var(--space-2);
}

.card-grid .card.card-active {
    border: 2px solid var(--color-primary);
}

.card-grid a.card-switchable {
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card-grid a.card-switchable:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

/* Dashboard Panels (two-column layout) */
.dashboard-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
    align-items: start;
}

.panel-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-6);
    overflow: hidden;
}

.panel-card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: var(--space-4);
}

.panel-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

/* Business list rows */
.biz-list {
    display: flex;
    flex-direction: column;
}

.biz-row,
a.biz-row-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-3);
    border-top: 1px solid var(--color-gray-100);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}

.biz-list .biz-row-link:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: var(--shadow-lg);
}

.biz-list .biz-row:first-child,
.biz-list a.biz-row-link:first-child {
    border-top: none;
}

.biz-row-active {
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
}

a.biz-row-link:hover {
    background: var(--color-gray-50);
}

.biz-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.biz-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.biz-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.biz-desc {
    font-size: 13px;
    color: var(--color-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.biz-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.biz-since {
    font-size: 12px;
    color: var(--color-gray-400);
    white-space: nowrap;
}

/* Role pills */
.role-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-white);
    white-space: nowrap;
    line-height: 1.4;
}

.role-admin {
    background: var(--color-role-admin);
}

.role-member {
    background: var(--color-role-member);
}

.role-viewer {
    background: var(--color-role-viewer);
}

/* Role chip — pill containing the role icon + label, tinted with
   a light version of the role colour. Used in read-only Role cells
   on the Teams page. The chip variants (admin/member/viewer) share
   the layout and only swap background + text colour. */
.role-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.role-chip-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.role-chip-admin {
    background: var(--color-role-admin);
    color: var(--color-white);
}

.role-chip-member {
    background: var(--color-role-member);
    color: var(--color-white);
}

.role-chip-viewer {
    background: var(--color-role-viewer);
    color: var(--color-white);
}

/* Invert the role icon to white so it reads on the solid background. */
.role-chip .role-chip-icon {
    filter: brightness(0) invert(1);
}

/* Product list */
.product-list-header {
    display: flex;
    padding: var(--space-2) 0 var(--space-2) 0;
    font-size: 12px;
    color: var(--color-gray-400);
    font-weight: 500;
    border-bottom: 1px solid var(--color-gray-100);
    margin-bottom: 0;
}

.product-list-header > span:first-child {
    flex: 1;
}

.product-list-header > span:nth-child(2) {
    width: 100px;
    text-align: left;
}

.product-list-header > span:nth-child(3) {
    width: 60px;
    text-align: center;
}

.product-list {
    display: flex;
    flex-direction: column;
}

.product-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    border-bottom: 1px solid var(--color-gray-100);
    transition: background 0.15s ease;
}

.product-row:last-child {
    border-bottom: none;
}

.product-row:hover {
    background: var(--color-gray-50);
    margin: 0 calc(-1 * var(--space-3));
    padding-left: var(--space-3);
    padding-right: var(--space-3);
    border-radius: var(--radius-md);
}

.product-row-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    text-decoration: none;
    color: inherit;
    flex: 1;
    min-width: 0;
}

.product-row-delete {
    width: 60px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.product-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-gray-900);
}

.product-desc {
    font-size: 13px;
    color: var(--color-gray-500);
    margin-top: 2px;
    overflow-wrap: break-word;
    word-break: break-word;
}

.product-right {
    width: 100px;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

.product-since {
    font-size: 12px;
    color: var(--color-gray-400);
    white-space: nowrap;
}

@media (max-width: 900px) {
    .dashboard-panels {
        grid-template-columns: 1fr;
    }
}

/* Info Grid */
.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.info-item {
    padding: var(--space-4);
    background: var(--color-gray-100);
    border-radius: var(--radius-sm);
    border-left: var(--border-width-md) solid var(--color-primary);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.info-item strong {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--color-gray-900);
}

/* Inline Forms */
.inline-form {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin-bottom: var(--space-4);
}

.inline-form .form-control {
    flex: 1;
    margin-bottom: 0;
    min-width: var(--min-width-form-control);
}

.inline-form .btn {
    margin-top: 0;
    width: auto;
    white-space: nowrap;
}

/* Alert Warning */
.alert-warning {
    background-color: #F2D3CA;
    border: none;
    border-bottom: 2px solid var(--color-primary);
    color: var(--color-primary);
}

/* Static warning alert (doesn't auto-hide) - for read-only mode banners */
.alert-warning-static {
    background-color: var(--color-warning-light, #FEF3CD);
    border: none;
    border-bottom: 2px solid var(--color-warning, #FFC107);
    color: var(--color-warning-dark, #856404);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    text-align: left;
}

/* Responsive */
@media (max-width: 900px) {
    .filter-scorecard-row {
        grid-template-columns: 1fr;
    }
    
    .filter-grid {
        width: 100%;
        max-width: 400px;
    }
    
    .stat-card-scorecard {
        min-width: unset;
        width: 100%;
    }
    
    .cve-trend-chart-wrapper {
        height: 180px;
    }
}

@media (max-width: 768px) {
    .nav-container {
        flex-direction: column;
        gap: var(--space-4);
    }
    
    .nav-menu {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .table {
        font-size: var(--text-sm);
    }
    
    .table th,
    .table td {
        padding: var(--space-2);
    }
    
    .card-grid {
        grid-template-columns: 1fr;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .inline-form {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Sortable Table Headers */
.sortable-header {
    padding: 0 !important;
}

.header-label {
    white-space: nowrap;
}

/* Fixed layout so colgroup widths are honoured exactly and leftover container
   width is distributed proportionally across all cols rather than being dumped
   onto the widest one. Keeps the table flush with its container while
   preserving the balanced column ratios set in the template. */
.cve-detail-table {
    table-layout: fixed;
    width: 100%;
}

.cve-detail-table td.pkg-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pkg-version-muted {
    color: var(--color-gray-400);
    font-size: 0.8em;
    margin-left: 0.35em;
}

/* Right-align the trailing Triage Status column so its pill sits flush
   with the right edge of the table — matches the per-page dropdown in
   the pagination bar above/below. The header-filter-container uses
   display:flex so text-align alone doesn't reach the label; push its
   contents to the end as well. */
.cve-detail-table th:last-child,
.cve-detail-table td:last-child {
    text-align: right;
}

.cve-detail-table th:last-child .header-filter-container {
    justify-content: flex-end;
}

.sortable-header a.sort-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    color: inherit;
    text-decoration: none;
    font-weight: inherit;
    width: 100%;
    transition: background-color 0.2s ease;
}

.sortable-header a.sort-link:hover {
    background-color: var(--color-gray-100);
    cursor: pointer;
}

.sort-arrow {
    margin-left: 8px;
    font-size: 12px;
    color: var(--color-primary);
    font-weight: bold;
}

.filter-indicator {
    margin-left: 8px;
    font-size: 11px;
    color: var(--color-primary);
    font-weight: 600;
    background-color: var(--color-primary-light);
    padding: 2px 6px;
    border-radius: 3px;
}

/* CVE Detail Table - Disable sorting appearance */
.cve-detail-table thead th {
    cursor: default !important;
}

/* Modal Overlay */
.modal-overlay {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    align-items: center;
    justify-content: center;
}

.modal-overlay.is-active {
    display: flex;
}

.modal-dialog {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    animation: modalSlideIn 0.2s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-6);
    border-bottom: 1px solid var(--color-gray-200);
}

.modal-header h3 {
    margin: 0;
    font-size: var(--text-xl);
    color: var(--color-gray-900);
}

.modal-close {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--color-gray-400);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.modal-close:hover {
    color: var(--color-gray-700);
}

.modal-body {
    padding: var(--space-6);
}

.modal-body .form-group {
    margin-bottom: var(--space-4);
}

.modal-body .form-actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-gray-200);
}

/* Upload Progress */
.upload-progress {
    margin: var(--space-4) 0;
}

.progress-bar-container {
    width: 100%;
    height: 8px;
    background-color: var(--color-gray-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background-color: var(--color-primary);
    border-radius: var(--radius-sm);
    transition: width 0.3s ease;
    width: 0%;
}

.progress-text {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    text-align: center;
}

/* Upload Result */
.upload-result {
    margin: var(--space-4) 0;
}

.upload-result .alert {
    margin: 0;
}

/* Drop Zone */
.drop-zone {
    border: 2px dashed var(--color-gray-300);
    border-radius: var(--radius-md);
    padding: var(--space-8);
    text-align: center;
    transition: all 0.2s ease;
    background-color: var(--color-gray-50);
    cursor: pointer;
}

.drop-zone:hover {
    border-color: var(--color-primary);
    background-color: rgba(219, 53, 18, 0.03);
}

.drop-zone.drag-over {
    border-color: var(--color-primary);
    background-color: rgba(219, 53, 18, 0.06);
    border-style: solid;
}

.drop-zone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.drop-zone-icon {
    color: var(--color-gray-400);
    margin-bottom: var(--space-2);
}

.drop-zone.drag-over .drop-zone-icon {
    color: var(--color-primary);
}

.drop-zone-text {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0;
}

.drop-zone-hint {
    font-size: var(--text-sm);
    color: var(--color-gray-400);
    margin: var(--space-1) 0;
}

.drop-zone-formats {
    font-size: var(--text-xs);
    color: var(--color-gray-400);
    margin-top: var(--space-2);
}

.btn-browse {
    padding: var(--space-2) var(--space-6);
    font-size: var(--text-sm);
    border-radius: 999px;
    font-weight: 600;
    background-color: var(--color-gray-200);
    color: var(--color-gray-900);
}

.btn-browse:hover {
    background-color: var(--color-gray-300);
    color: var(--color-gray-900);
}

/* Upload Scan Modal — Figma-aligned overrides */
#uploadScanModal .modal-header {
    border-bottom: none;
    padding-bottom: 0;
}

#uploadScanModal .modal-header h3 {
    font-family: 'Inter', var(--font-heading), sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

#uploadScanModal .modal-body .text-muted {
    font-size: var(--text-sm);
    line-height: 1.5;
    margin-bottom: var(--space-4);
}

#uploadScanModal .modal-body .form-actions {
    flex-direction: column;
    gap: var(--space-2);
    border-top: none;
    padding-top: 0;
}

#uploadScanModal .modal-body .form-actions .btn {
    width: 100%;
}

.drop-zone-selected {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-4);
}

.drop-zone-selected .file-icon {
    color: var(--color-primary);
    flex-shrink: 0;
}

.drop-zone-selected #selectedFileName {
    font-weight: 500;
    color: var(--color-gray-800);
    word-break: break-all;
}

.clear-file-btn,
.btn-clear-file { /* legacy alias — do not use in new templates */
    background: none;
    border: none;
    font-size: 20px;
    color: var(--color-gray-400);
    cursor: pointer;
    padding: 0 var(--space-1);
    line-height: 1;
    transition: color 0.2s;
}

.clear-file-btn:hover,
.btn-clear-file:hover { /* legacy alias */
    color: var(--color-danger);
}

.drop-zone.has-file {
    border-color: var(--color-primary);
    background-color: var(--color-primary-tint);
    border-style: solid;
}

/* Accent/Secondary Button - Rufilla Purple */
.btn-accent {
    background: linear-gradient(135deg, var(--color-accent-gradient-start) 0%, var(--color-accent-gradient-end) 100%);
    color: var(--color-white);
    border: var(--border-width-sm) solid transparent;
    box-shadow: 0 2px 4px var(--color-accent-shadow);
}

.btn-accent:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--color-accent-shadow-hover);
    background: linear-gradient(135deg, var(--color-accent-gradient-start-hover) 0%, var(--color-accent-gradient-end-hover) 100%);
}

/* Outline Button Variant */
.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

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

/* Sidebar Layout */
.app-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    height: calc(100vh - 89px);
    overflow: hidden;
    background: var(--color-white);
}

.sidebar {
    width: 340px;
    min-width: 340px;
    background-color: var(--color-white);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.sidebar-nav {
    padding: var(--space-4);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sidebar-business-switcher {
    position: relative;
    margin: calc(-1 * var(--space-4));
    margin-bottom: var(--space-4);
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
}

.business-switcher-current {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    transition: background-color 0.15s ease;
}

.business-switcher-logo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.business-switcher-icon-wrap {
    flex-shrink: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.business-switcher-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

.business-switcher-icon-selected {
    display: none;
}

.sidebar-business-switcher.is-open .business-switcher-icon-default {
    display: none;
}

.sidebar-business-switcher.is-open .business-switcher-icon-selected {
    display: block;
}

.business-switcher-current > .role-pill {
    margin-left: auto;
}

.business-switcher-current[onclick] {
    cursor: pointer;
}

.business-switcher-current[onclick]:hover {
    background-color: var(--color-gray-50);
}

.business-switcher-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.business-switcher-name {
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--color-brand-black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.business-switcher-role-label {
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    width: fit-content;
}

.business-switcher-role-label.role-admin {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
}

.business-switcher-role-label.role-member {
    background-color: var(--color-accent-light);
    color: var(--color-accent);
}

.business-switcher-role-label.role-viewer {
    background-color: var(--color-gray-200);
    color: var(--color-gray-600);
}

.business-switcher-chevron {
    font-size: 20px;
    color: var(--color-gray-600);
    flex-shrink: 0;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}

.business-switcher-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-dropdown);
    overflow: hidden;
}

.business-switcher-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-5);
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s ease;
}

.business-switcher-item > .role-pill {
    margin-left: auto;
}

.business-switcher-item:hover {
    background-color: var(--color-gray-50);
}

.business-switcher-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.business-switcher-item-name {
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--color-brand-black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.business-switcher-item:hover .business-switcher-item-name {
    color: var(--color-brand-black);
}

.sidebar-section {
    margin-bottom: var(--space-4);
}

.sidebar-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    transition: background-color 0.2s;
}

.sidebar-section-header:hover {
    background-color: var(--color-gray-100);
}

.sidebar-section-header-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    text-decoration: none;
    font-size: var(--text-sm);
    color: var(--color-gray-700);
}

.sidebar-section-header:has(> .sidebar-section-header-link.active) {
    background-color: var(--color-gray-100);
}

.sidebar-section-header-link.active {
    color: var(--color-gray-900);
    font-weight: 500;
}

.sidebar-chevron {
    transition: transform 0.2s;
    font-size: 12px;
    cursor: pointer;
}

.sidebar-section.expanded > .sidebar-section-header > .sidebar-chevron {
    transform: rotate(90deg);
}

.sidebar-section-content {
    display: none;
    padding-left: 56px;
}

.sidebar-section.expanded .sidebar-section-content {
    display: block;
}

.sidebar-item {
    display: block;
    padding: var(--space-2) var(--space-3);
    color: var(--color-gray-600);
    text-decoration: none;
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
    margin: 2px 0;
    transition: all 0.2s;
}

.sidebar-item:hover {
    background-color: var(--color-gray-100);
    color: var(--color-gray-900);
}

.sidebar-item.active {
    background-color: var(--color-gray-100);
    color: var(--color-gray-900);
    font-weight: 500;
}

.sidebar-nested {
    padding-left: var(--space-4);
}

.sidebar-nested .sidebar-item {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-3);
}

/* Help section overrides — scoped to #helpSection so other sections (e.g. Products) keep their nested indentation */
#helpSection > .sidebar-section-header {
    border-bottom: 1px solid var(--color-gray-200);
    border-radius: 0;
}

#helpSection .sidebar-help-item {
    padding: var(--space-3);
    margin: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--color-gray-200);
}

#helpSection .sidebar-help-item:hover,
#helpSection .sidebar-help-item.active {
    border-radius: 0;
}

.sidebar-product-name {
    padding: 0;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sidebar-chevron-product {
    font-size: 10px;
    flex-shrink: 0;
    margin-left: var(--space-1);
}

.sidebar-chevron-bsp {
    font-size: 8px;
    flex-shrink: 0;
    margin-left: var(--space-1);
}

.sidebar-bsp-item {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}


.sidebar-bsp-group {
    margin: 0;
}

.sidebar-bsp-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color 0.2s;
}

.sidebar-bsp-toggle:hover {
    background-color: var(--color-gray-100);
}

.sidebar-bsp-toggle .sidebar-chevron {
    margin-right: var(--space-2);
    flex-shrink: 0;
}

.sidebar-bsp-group.expanded > .sidebar-bsp-toggle > .sidebar-chevron {
    transform: rotate(90deg);
}

.sidebar-image-list {
    display: none;
    padding-left: var(--space-3);
}

.sidebar-bsp-group.expanded > .sidebar-image-list {
    display: block;
}

.sidebar-image-item {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-2);
    color: var(--color-gray-500);
}

.sidebar-footer-logo {
    margin-top: auto;
    padding: var(--space-6) var(--space-3) 0;
}

.sidebar-footer-logo img {
    display: block;
    height: 40px;
    width: auto;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    color: var(--color-gray-700);
    text-decoration: none;
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.sidebar-link:hover {
    background-color: var(--color-gray-100);
    color: var(--color-gray-900);
}

.sidebar-link.active {
    background-color: var(--color-gray-100);
    color: var(--color-gray-900);
    font-weight: 500;
}

.sidebar-icon {
    font-size: var(--text-base);
    width: 20px;
    text-align: center;
}

.sidebar-divider {
    height: 1px;
    background-color: var(--color-gray-200);
    margin: var(--space-3) 0;
}

.main-content {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: auto;
}

.main-content:has(.dashboard) {
    background-color: var(--color-white);
}

.dashboard .panel-card,
.dashboard .dashboard-section {
    background: var(--color-white);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.account-info-list {
    display: flex;
    flex-direction: column;
}

.account-info-header {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: var(--space-4);
    padding: 0 var(--space-4) var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-gray-500);
}

.account-info-header span:first-of-type {
    grid-column: 2;
}

.account-info-row {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-gray-50);
    border-radius: var(--radius-md);
}

.account-info-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.account-info-email {
    font-weight: 700;
    color: var(--color-brand-black);
}

.account-info-last-login {
    color: var(--color-gray-700);
}

.main-content .container,
body.has-sidebar .container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: var(--space-6);
}

body.has-sidebar .nav-container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 var(--space-5);
}

.product-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: var(--space-1) var(--space-3);
    color: var(--color-gray-600);
    font-size: var(--text-sm);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.product-toggle:hover {
    background-color: var(--color-gray-100);
}

.product-toggle.active {
    background-color: var(--color-gray-100);
    color: var(--color-gray-900);
    font-weight: 500;
}

.product-toggle.active .sidebar-product-name {
    color: var(--color-gray-900);
    font-weight: 500;
}

.product-images {
    display: none;
    padding-left: var(--space-3);
}

.product-toggle.expanded + .product-images {
    display: block;
}

.product-toggle.expanded .sidebar-chevron {
    transform: rotate(90deg);
}

.sidebar-cve-search {
    padding: var(--space-2) var(--space-3);
}

.sidebar-cve-search input {
    width: 100%;
    padding: var(--space-2);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}

.sidebar-cve-search button {
    width: 100%;
    margin-top: var(--space-2);
    padding: var(--space-2);
    font-size: var(--text-sm);
}

/* CVE Search Popup — DEPRECATED
   Now uses the generic Toast Popup system (showToast from utils.js).
   Kept for backwards compatibility only. */
.cve-search-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 60px;
    background: rgba(19, 19, 19, 0.15);
}

.cve-search-popup-content {
    background-color: #F2D3CA;
    border: none;
    border-bottom: 2px solid var(--color-primary);
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    max-width: 500px;
    font-size: 1rem;
    color: var(--color-primary);
    text-align: center;
}

.cve-search-popup-close {
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: var(--color-primary);
    opacity: 0.6;
    padding: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.cve-search-popup-close:hover {
    opacity: 1;
}


/* ============================================================================
   Toast Popup Notification System
   Modal-style centered toast that overlays content with subtle backdrop.
   Supports success, error, warning, info variants.
   ============================================================================ */
.toast-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 60px;
    background: rgba(19, 19, 19, 0.15);
    animation: toastFadeIn 0.2s ease-out;
}

.toast-popup-overlay.visible {
    display: flex;
}

.toast-popup-overlay.fade-out {
    animation: toastFadeOut 0.3s ease-out forwards;
}

@keyframes toastFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes toastFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.toast-popup {
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    max-width: 500px;
    font-size: 1rem;
    text-align: center;
    border: none;
    animation: toastSlideDown 0.2s ease-out;
}

@keyframes toastSlideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Variant: Error (matches existing alert-error styling) */
.toast-popup--error {
    background-color: #F2D3CA;
    border-bottom: 2px solid var(--color-primary);
    color: var(--color-primary);
}

/* Variant: Success (matches existing alert-success styling) */
.toast-popup--success {
    background-color: #CEF1E2;
    border-bottom: 2px solid #0BC782;
    color: #0BC782;
}

/* Variant: Warning */
.toast-popup--warning {
    background-color: var(--color-warning-light, #FEF3CD);
    border-bottom: 2px solid var(--color-warning, #FFC107);
    color: var(--color-warning-dark, #856404);
}

/* Variant: Info */
.toast-popup--info {
    background-color: #CEF1E2;
    border-bottom: 2px solid #0BC782;
    color: #0BC782;
}

.toast-popup__message {
    flex: 1;
}

.toast-popup__close {
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    padding: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: inherit;
}

.toast-popup__close:hover {
    opacity: 1;
}


/* Development Mode Buttons - Visually distinct for testing/debugging */
.btn-dev {
    background: linear-gradient(135deg, var(--color-dev-bg-start) 0%, var(--color-dev-bg-end) 100%);
    color: var(--color-dev-text);
    border: 2px dashed var(--color-dev-border);
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-dev:hover {
    background: linear-gradient(135deg, var(--color-dev-bg-hover-start) 0%, var(--color-dev-bg-hover-end) 100%);
    border-color: var(--color-dev-border-hover);
    color: var(--color-dev-text-hover);
}

.btn-dev:active {
    transform: scale(0.98);
}

.btn-dev::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--color-dev-pulse);
    border-radius: 50%;
    animation: dev-pulse 2s infinite;
}

@keyframes dev-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.dev-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dev-modal {
    background: white;
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 1000px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 3px solid var(--color-dev-border);
}

.dev-modal-header {
    background: linear-gradient(135deg, var(--color-dev-border-hover) 0%, var(--color-dev-border) 100%);
    color: var(--color-white);
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dev-modal-header h3 {
    margin: 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dev-modal-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dev-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.dev-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.dev-prompt-section {
    margin-bottom: 24px;
}

.dev-prompt-section h4 {
    color: var(--color-dev-text);
    font-size: 14px;
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dev-prompt-content {
    background: var(--color-gray-50);
    border: 1px solid var(--color-btn-muted-secondary-bg);
    border-radius: var(--radius-md);
    padding: 16px;
    font-family: 'Geist Mono', monospace;
    font-size: 12px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-x: auto;
    max-height: 300px;
    overflow-y: auto;
}

/* Help Page Content */
.help-container {
    max-width: 90%;
    margin: 0;
    padding: 0 2rem 2rem;
}

.help-content {
    line-height: 1.7;
    color: var(--color-gray-800);
}

.help-content h1 {
    font-family: 'Inter', var(--font-heading), sans-serif;
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: var(--color-gray-900);
}

.help-content h2 {
    font-family: 'Inter', var(--font-heading), sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-gray-200);
    padding-bottom: 0.75rem;
}

.help-content h3 {
    font-family: 'Inter', var(--font-heading), sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.help-content p {
    margin-bottom: 1rem;
}

.help-content ul, .help-content ol {
    margin-bottom: 1rem;
    padding-left: 2rem;
}

.help-content li {
    margin-bottom: 0.5rem;
}

.help-content a {
    color: var(--color-primary);
    text-decoration: none;
}

.help-content a:hover {
    text-decoration: underline;
}

.help-content code {
    background: var(--color-gray-100);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.9em;
}

.help-content pre {
    background: var(--color-gray-100);
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.help-content pre code {
    background: none;
    padding: 0;
}

.help-content hr {
    border: none;
    border-top: 1px solid var(--color-gray-200);
    margin: 2rem 0;
}

.help-content blockquote {
    border-left: 4px solid var(--color-primary);
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    background: var(--color-gray-50);
    color: var(--color-gray-700);
}

.help-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.help-content th, .help-content td {
    border: 1px solid var(--color-gray-200);
    padding: 0.75rem;
    text-align: left;
}

.help-content th {
    background: var(--color-gray-100);
    font-weight: 600;
}

.help-content em {
    color: var(--color-gray-500);
    font-style: italic;
}

/* Toast Notifications — DEPRECATED
   Use showToast() from utils.js instead (uses toast-popup system).
   Kept for backwards compatibility. */
.toast-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    animation: toastSlideIn 0.3s ease-out;
}

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Super Admin Navigation */
.super-admin-nav {
    margin-bottom: 24px;
    padding: 16px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.super-admin-nav .nav-tab {
    padding: 8px 16px;
    margin-right: 8px;
    text-decoration: none;
    color: var(--color-gray-600);
}

.super-admin-nav .nav-tab.active {
    color: var(--color-primary);
    font-weight: 600;
    border-bottom: 2px solid var(--color-primary);
}

/* Token Management Form */
.token-form-container {
    background: var(--color-white);
    padding: 0;
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
}

.token-form-container h3 {
    margin-bottom: 16px;
    font-size: 16px;
}

/* Light-grey muted inputs inside the token form, matching the
   dropdown trigger so Token Name + Product read as one muted row. */
.token-form-container .form-control {
    background-color: var(--dropdown-trigger-bg);
}

.token-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 12px;
    align-items: end;
}

.token-form-grid label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
    font-size: 14px;
}

.token-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

/* Tight, right-aligned column for row-action buttons. Shrinks to fit
   its content so adjacent columns absorb the leftover table width. */
.data-table th.col-actions-tight,
.data-table td.col-actions-tight {
    width: 1%;
    white-space: nowrap;
}

.data-table td.col-actions-tight {
    text-align: right;
}

/* Row action buttons (Revoke + Delete) — normalize sizing so the
   two buttons match regardless of which variant they use. */
.token-action-btn {
    padding: 8px 14px;
    font-size: 13px;
    line-height: 18px;
    border-radius: 6px;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    box-sizing: border-box;
}

.token-action-btn.btn-secondary-muted {
    border-color: var(--color-btn-muted-secondary-border);
}

.token-actions .form-inline {
    display: flex;
    align-items: center;
    margin: 0;
}

/* Code Token Display */
.code-inline {
    background: var(--color-gray-100);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Feature Flag Cards */
.feature-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.feature-card {
    background: var(--color-white);
    padding: 24px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.feature-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.feature-card h3 {
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.feature-card p {
    color: var(--color-gray-600);
    margin: 0 0 8px 0;
}

.badge-experimental {
    background: var(--color-warning);
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
}

.badge-purchasable {
    background: var(--color-info);
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
}

.feature-toggle-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.feature-toggle-label {
    color: var(--color-gray-600);
    font-size: 14px;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-gray-300);
    transition: .3s;
    border-radius: 26px;
}

.toggle-slider .toggle-knob {
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--color-success);
}

.toggle-switch input:checked + .toggle-slider .toggle-knob {
    left: 26px;
}

/* Small toggle variant */
.toggle-switch-sm {
    width: 44px;
    height: 22px;
}

.toggle-switch-sm .toggle-slider {
    border-radius: 22px;
}

.toggle-switch-sm .toggle-knob {
    height: 16px;
    width: 16px;
}

.toggle-switch-sm input:checked + .toggle-slider .toggle-knob {
    left: 24px;
}

/* Business Access Panel */
.business-access {
    border-top: 1px solid var(--color-gray-200);
    padding-top: 16px;
    margin-top: 16px;
}

.business-access-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    cursor: pointer;
}

.business-access-header h4 {
    margin: 0;
    color: var(--color-gray-700);
}

.business-access-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}

.business-access-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
}

/* Kernel Config Page */
.kernel-info-banner {
    background: #dbeafe;
    border: 1px solid #3b82f6;
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 24px;
}

.kernel-info-banner p {
    margin: 8px 0 0 0;
    font-size: 14px;
}

.kernel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.kernel-panel {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 20px;
}

.kernel-panel h3 {
    margin: 0 0 16px 0;
    font-size: 16px;
    color: var(--color-gray-700);
}

.kernel-panel-desc {
    font-size: 13px;
    color: var(--color-gray-500);
    margin-bottom: 12px;
}

.kernel-panel-scroll {
    max-height: 300px;
    overflow-y: auto;
}

.kernel-list-item {
    padding: 8px 12px;
    background: var(--color-gray-50);
    border-radius: 4px;
    margin-bottom: 8px;
}

.kernel-list-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kernel-list-item-detail {
    font-size: 12px;
    color: var(--color-gray-500);
    margin-top: 4px;
}

.kernel-yaml-container {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 20px;
}

.kernel-yaml-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.kernel-yaml-header h3 {
    margin: 0;
    font-size: 16px;
    color: var(--color-gray-700);
}

.kernel-yaml-pre {
    background: var(--color-gray-900);
    color: #e5e7eb;
    padding: 16px;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 12px;
    line-height: 1.5;
    max-height: 500px;
    overflow-y: auto;
}

/* Reachability Badges */
.reachability-badge {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
}

.reachability-network {
    background: var(--color-danger-light);
    color: var(--color-danger-dark);
}

.reachability-physical {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
}

.reachability-local {
    background: var(--color-indigo-light);
    color: var(--color-indigo-dark);
}

/* Dashboard Section Header */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-header-right {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Create Modal */
.create-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.create-modal-content {
    background: var(--color-white);
    padding: 32px;
    border-radius: var(--radius-lg);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.create-modal-content h2 {
    margin-top: 0;
}

.create-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Action Bar */
.action-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 15px;
}

/* Chart Placeholder */
.chart-placeholder {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-placeholder-tall {
    height: 200px;
    flex-direction: column;
}

.chart-placeholder p {
    color: var(--color-gray-500);
    font-size: var(--text-sm);
}

/* View Mode Bar */
.view-mode-controls {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.view-mode-label {
    font-weight: 600;
}

.radio-label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.radio-label input {
    margin-right: 5px;
}

/* Pagination */
.pagination-container {
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pagination-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

.pagination-buttons {
    display: flex;
    gap: 5px;
}

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

.btn-page-active {
    background-color: var(--color-page-active);
    color: var(--color-white);
}

.btn-static {
    cursor: default;
}

/* Layout helper for buttons that pair an inline icon (emoji or <img>) with text. */
.btn-icon-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Report Options */
.report-options-sections {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

.report-section h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-gray-700);
}

.report-checkboxes {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--color-gray-900);
}

.checkbox-label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--color-gray-300);
    background: white;
    cursor: pointer;
    margin: 0;
    position: relative;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.checkbox-label input[type="checkbox"]:hover {
    border-color: var(--color-gray-400);
}

.checkbox-label input[type="checkbox"]:checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.checkbox-label input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 47%;
    width: 4px;
    height: 9px;
    border: solid var(--color-white);
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -55%) rotate(45deg);
}

.checkbox-label input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Invite Form Row */
.invite-form-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}

/* Info Box (Registration) */
.info-box {
    background: #e7f3ff;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    border-left: 3px solid #3498db;
}

/* Header Filter Dropdown */
.header-filter-container {
    display: flex;
    align-items: center;
}

.header-filter-dropdown {
    position: relative;
}

.header-filter-btn {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
    color: #6c757d;
    transition: all 0.2s ease;
}

.header-filter-btn:hover {
    background-color: #e9ecef;
    border-color: #dee2e6;
}

.header-filter-btn.header-filter-active {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.header-filter-btn.header-filter-active:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.header-filter-menu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    min-width: 120px;
    padding: 4px 0;
    margin-top: 4px;
    max-height: 200px;
    overflow-y: auto;
}

.header-filter-menu.show {
    display: block;
}

.header-filter-menu.header-filter-menu--end {
    left: auto;
    right: 0;
}

.filter-option {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    color: var(--color-gray-700);
    font-size: var(--text-sm);
    transition: background 0.15s;
}

.filter-option:hover {
    background-color: var(--color-gray-100);
}

.filter-option.filter-option-active {
    color: var(--color-gray-900);
    font-weight: 500;
    background-color: var(--color-gray-100);
}

/* Status, severity, and triage pill variant classes all live in
   partials/_pill_tokens.html (shared with PDF template). */

.delete-icon-btn,
.btn-delete-icon { /* legacy alias — do not use in new templates */
    background-color: var(--color-delete-icon-bg);
    border: 1px solid var(--color-delete-icon-border);
    cursor: pointer;
    color: var(--color-delete-icon-border);
    padding: 5px 7px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.delete-icon-btn:hover,
.btn-delete-icon:hover { /* legacy alias */
    color: var(--color-delete-icon-border-hover);
    border-color: var(--color-delete-icon-border-hover);
    background-color: var(--color-delete-icon-bg-hover);
}

.delete-icon-btn svg,
.btn-delete-icon svg { /* legacy alias */
    stroke: var(--color-delete-icon-border);
}

.delete-icon-btn:hover svg,
.btn-delete-icon:hover svg { /* legacy alias */
    stroke: var(--color-delete-icon-border-hover);
}

/* Same construction as .delete-icon-btn, non-destructive accent palette */
.config-icon-btn {
    background-color: var(--color-accent-light);
    border: 1px solid var(--color-accent);
    cursor: pointer;
    color: var(--color-accent);
    padding: 5px 7px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.config-icon-btn:hover {
    color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}
.config-icon-btn svg {
    stroke: var(--color-accent);
}
.config-icon-btn:hover svg {
    stroke: var(--color-accent-hover);
}

#deleteModalConfirm:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

#deleteConfirmModal .delete-item-name {
    font-weight: 600;
    color: var(--color-gray-900);
}

/* PDF Sidebar Status Panel */
.pdf-sidebar-panel {
    padding: 0 12px 12px 12px;
}

.pdf-sidebar-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.pdf-sidebar-spinner {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid var(--color-gray-300);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: pdfSpin 1s linear infinite;
    flex-shrink: 0;
}

@keyframes pdfSpin {
    to { transform: rotate(360deg); }
}

.pdf-sidebar-msg {
    font-size: 0.7rem;
    color: var(--color-gray-500);
    margin-bottom: 8px;
    word-break: break-word;
    line-height: 1.4;
}

.pdf-sidebar-bar-wrap {
    width: 100%;
    height: 6px;
    background: var(--color-gray-200);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.pdf-sidebar-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), #6366f1);
    border-radius: 3px;
    transition: width 0.4s ease;
    min-width: 4px;
    width: var(--bar-width, 0%);
}

.pdf-sidebar-pct {
    font-size: 0.7rem;
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 8px;
}

.pdf-sidebar-cancel-btn {
    display: block;
    width: 100%;
    padding: 5px 0;
    background: var(--color-gray-100);
    color: var(--color-gray-600);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.75rem;
    text-align: center;
    font-family: inherit;
}

.pdf-sidebar-cancel-btn:hover {
    background: var(--color-gray-200);
}

.pdf-sidebar-download-btn {
    display: block;
    width: 100%;
    padding: 8px 0;
    background: #22c55e;
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    margin-bottom: 6px;
}

.pdf-sidebar-download-btn:hover {
    background: #16a34a;
    color: white;
    text-decoration: none;
}

.pdf-sidebar-error {
    font-size: 0.7rem;
    color: var(--color-primary);
    margin-bottom: 8px;
}

/* Dark Upload Scan button */
.btn-upload-scan {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--color-upload-scan-bg);
    color: var(--color-white);
    padding: 8px 14px;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.btn-upload-scan:hover {
    background-color: var(--color-upload-scan-bg-hover);
    color: var(--color-white);
    text-decoration: none;
}

.upload-btn-icon {
    height: 16px;
    width: auto;
    object-fit: contain;
    vertical-align: middle;
}

/* Sidebar PNG icon images */
.sidebar-icon-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Page heading icon images */
.page-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 4px;
}

/* Role badge images */
.role-badge-img {
    height: 20px;
    width: auto;
    object-fit: contain;
    vertical-align: middle;
    flex-shrink: 0;
}

.role-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.role-icon-c {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}


/* Login split layout */
.auth-split-container {
    display: flex;
    height: 100vh;
    width: 100%;
    background: var(--color-white);
    align-items: center;
    justify-content: center;
    padding: 24px;
    gap: 24px;
    overflow: hidden;
}

.auth-split-left {
    flex: 0 0 auto;
    aspect-ratio: 1 / 1;
    width: min(calc(50% - 12px), calc(100vh - 48px));
    height: auto;
    border-radius: 12px;
    background: var(--color-brand-black) url("/static/images/gradient-background.svg") center/cover no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.auth-split-left > * {
    position: relative;
    z-index: 1;
}

.auth-split-logo {
    max-width: 88px;
    height: auto;
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

.auth-split-tagline {
    color: #ffffff;
    font-size: 36px;
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
    width: 100%;
    letter-spacing: -0.01em;
}

.auth-split-right {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    padding: 24px;
    position: relative;
}

.auth-split-right .auth-card {
    box-shadow: none;
    width: 100%;
    max-width: 380px;
    padding: var(--space-8);
    text-align: center;
}

.auth-split-right .auth-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.auth-split-right .auth-logo-image {
    max-width: 180px;
    height: auto;
}

.auth-split-right .auth-subtitle {
    text-align: center;
    color: var(--color-gray-700);
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 24px;
}

.auth-split-right .form-group {
    margin-bottom: 14px;
}

.auth-split-right .form-control {
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px 18px;
    font-size: 14px;
}

.auth-split-right .btn-primary {
    width: 100%;
    border-radius: 8px;
    padding: 14px;
    font-weight: 600;
    margin-top: 4px;
}

.auth-split-right .auth-links {
    text-align: center;
    margin-top: 14px;
}

.auth-split-brand-logo {
    display: block;
    margin: 56px auto 0;
    height: 40px;
    width: auto;
}

/* Neutralize the global .container wrapper when it wraps the split-auth layout
   so that .auth-split-container can claim the full viewport without margins. */
.container:has(> .auth-split-container) {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Hide the global footer on split-auth pages — the design shows none,
   and removing it ensures the page fits within 100vh. */
body:has(.auth-split-container) > .footer {
    display: none;
}

@media (max-width: 768px) {
    .auth-split-container {
        height: auto;
        overflow: visible;
        padding: 0;
        gap: 0;
    }
    .auth-split-left {
        display: none;
    }
    .auth-split-right {
        flex: 1;
    }
    .auth-split-tagline {
        font-size: 24px;
    }
}

/* ===== Image CVEs page visual refresh (Task #26) ===== */

/* Page header (shared across all pages) */
.page-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 4px 0 24px;
}

.page-header-icon {
    height: 40px;
    width: auto;
    flex-shrink: 0;
}

/* Icon sitting inline inside an <h1> (rather than as a flex sibling) */
.page-header-inline {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.page-header-inline .page-header-icon {
    height: 32px;
}

.dashboard h1.page-header-title {
    font-family: 'Inter', var(--font-heading), sans-serif;
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--color-gray-900);
    line-height: 1.1;
}

/* Neutral light-grey button (paired with action-bar-select) */
.btn-neutral {
    background-color: var(--color-gray-100);
    color: var(--color-gray-900);
    border: 1px solid var(--color-gray-200);
    padding: 10px 22px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-neutral:hover:not(:disabled) {
    background-color: var(--color-gray-200);
    border-color: var(--color-gray-300);
}

.btn-neutral:focus {
    outline: none;
    box-shadow: var(--focus-ring-neutral);
}

/* Action-bar primary buttons (View Report / Download SBOM): brand-red
   variant sized to sit beside the action-bar dropdown triggers — same
   vertical metrics and font as .dropdown-trigger, and a shared min-width
   so labels of different lengths render as equal-width buttons. */
.action-bar-btn {
    padding: 10px 22px;
    font-size: 13px;
    min-width: 150px;
    /* The SBOM button is an <a>, which inherits body line-height (1.6);
       <button> defaults to normal — pin it so both render the same height. */
    line-height: normal;
}

/* Gradient image-info bar */
.image-info-bar {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    padding: 14px 24px;
    border-radius: 8px;
    background: linear-gradient(90deg, #1a0503 0%, #6b1a08 60%, #a84934 80%, #b13910 95%);
    margin-bottom: 16px;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.image-info-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.4 -0.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    background-repeat: repeat;
    mix-blend-mode: overlay;
    opacity: 0.85;
    z-index: 0;
}
.image-info-bar > * {
    position: relative;
    z-index: 1;
}
.image-info-bar-item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 14px;
    color: #ffffff;
    white-space: nowrap;
}
.image-info-bar-item .info-label {
    font-weight: 600;
    color: #ffffff;
    opacity: 0.85;
}
.image-info-bar-item .info-value {
    font-weight: 600;
    color: #ffffff;
}

/* Inline environment (prod/dev) toggle form — sits beside the env pill in the
   image info bar and the product-hierarchy image table without breaking flow. */
.env-toggle-form {
    display: inline-block;
    margin: 0 0 0 8px;
}

/* Severity scorecard split into two cards */
.severity-cards-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 16px;
    margin-bottom: 16px;
    align-items: stretch;
}
.severity-bars-card,
.severity-counts-card { min-width: 0; }
/* The grid stretches both cards to the taller one's height (the bars card,
   since the Total bar was added) — centre the table so the slack splits
   evenly above and below instead of pooling at the bottom. */
.severity-counts-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (max-width: 900px) {
    .severity-cards-row {
        grid-template-columns: 1fr;
    }
}
.severity-bars-card,
.severity-counts-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 20px 24px;
    box-shadow: var(--shadow-md);
}
.severity-card-title {
    margin: 0 0 18px 0;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

/* Severity bar rows */
.severity-bars-list { display: flex; flex-direction: column; gap: 14px; }
.sev-bar-row { padding: 4px 6px; border-radius: 6px; }
.sev-bar-row-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}
.sev-bar-row-label {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}
.sev-bar-row-range {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 400;
    margin-left: 4px;
}
.sev-bar-row-count {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}
.sev-bar-track {
    width: 100%;
    height: 14px;
    background-color: #f3f4f6;
    border-radius: 999px;
    overflow: hidden;
}
.sev-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease;
    width: var(--bar-width, 0%);
}
.sev-bar-fill-total { background-color: var(--color-gray-900); }
.sev-bar-fill-critical { background-color: var(--pill-severity-critical-bg); }
.sev-bar-fill-high { background-color: var(--pill-severity-high-bg); }
.sev-bar-fill-medium { background-color: var(--pill-severity-medium-bg); }
.sev-bar-fill-low { background-color: var(--pill-severity-low-bg); }

/* Severity counts table */
.severity-counts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.severity-counts-table thead th {
    padding: 8px 6px 12px;
    text-align: center;
    font-weight: 500;
    color: #9ca3af;
    font-size: 12px;
    text-transform: none;
    border-bottom: 1px solid transparent;
}
.severity-counts-table thead th.sct-total {
    color: #111827;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.severity-counts-table thead th:first-child { width: 100px; }
.severity-counts-table tbody td {
    padding: 14px 6px;
    text-align: center;
    color: #374151;
    border-top: 1px solid #f3f4f6;
}
/* Stays display:table-cell — flex here detached the cell from row layout,
   so its top border drifted off the shared separator line (ragged left
   edge on alternating rows). Circle/text alignment is done inline. */
.severity-counts-table tbody td.sct-label-cell {
    text-align: left;
    font-weight: 500;
    color: #111827;
}
.severity-counts-table tbody td.sct-label-cell .sct-circle {
    margin-right: 10px;
    vertical-align: middle;
}
.severity-counts-table tbody td.sct-label-cell .sct-label {
    vertical-align: middle;
}
.severity-counts-table tbody td.sct-total { font-weight: 700; color: #111827; }

/* Column-totals row: bold throughout, separated from the band rows */
.severity-counts-table tbody tr.sct-totals-row td {
    font-weight: 700;
    border-top: 1px solid var(--color-gray-200);
}
.sct-circle {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sct-circle-critical { background-color: var(--pill-severity-critical-bg); }
.sct-circle-high { background-color: var(--pill-severity-high-bg); }
.sct-circle-medium { background-color: var(--pill-severity-medium-bg); }
.sct-circle-low { background-color: var(--pill-severity-low-bg); }

/* View Mode segmented control */
.view-mode-section {
    margin: 16px 0;
}
.view-mode-row {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #e5e7eb;
}
.view-mode-heading {
    font-weight: 600;
    color: #111827;
    font-size: 14px;
}
.view-mode-segmented {
    display: flex;
    flex: 1;
    gap: 12px;
    background: transparent;
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
}
.view-mode-seg-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    background-color: #f3f4f6;
    color: #6b7280;
    font-size: 15px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid #e5e7eb;
    user-select: none;
}
.view-mode-seg-btn input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.view-mode-seg-btn:hover { background-color: #e5e7eb; }
.view-mode-seg-btn.is-active {
    background-color: #111827;
    color: #ffffff;
    border-color: #111827;
}

/* ---- Shared utility classes ---- */

.hidden-initial {
    display: none;
}

.form-narrow {
    max-width: 500px;
}

.form-group-spaced {
    margin-bottom: 16px;
}

.form-label-light {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
}

.input-disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.text-hint {
    color: var(--color-gray-400);
}

.modal-hint-text {
    font-size: var(--text-sm);
}

.info-box-highlight {
    background: var(--color-blue-light);
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    border-left: 3px solid var(--color-blue);
}

.invite-form {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.invite-field-email {
    flex: 1;
    min-width: 250px;
}

.invite-field-role {
    min-width: 150px;
}

.role-select-inline {
    width: auto;
    min-width: 120px;
}

/* Tinted backgrounds for the inline role select so the cell reads
   the same colour as the corresponding read-only role chip. The
   native <select data-dropdown> is hidden and replaced by a custom
   .dropdown wrapper + .dropdown-trigger button, so we tint the
   visible trigger via the wrapper modifier (forwarded by
   static/js/dropdown.js and kept in sync by teams.html JS). */
.dropdown.role-tint-admin .dropdown-trigger {
    background-color: var(--color-role-admin);
    color: var(--color-white);
    border-color: var(--color-role-admin);
    font-weight: 600;
}

.dropdown.role-tint-member .dropdown-trigger {
    background-color: var(--color-role-member);
    color: var(--color-white);
    border-color: var(--color-role-member);
    font-weight: 600;
}

.dropdown.role-tint-viewer .dropdown-trigger {
    background-color: var(--color-role-viewer);
    color: var(--color-white);
    border-color: var(--color-role-viewer);
    font-weight: 600;
}

/* Invert the trigger chevron + role icon to white so they read on
   the solid role-coloured background. */
.dropdown.role-tint-admin .dropdown-trigger-arrow,
.dropdown.role-tint-member .dropdown-trigger-arrow,
.dropdown.role-tint-viewer .dropdown-trigger-arrow {
    filter: brightness(0) invert(1);
}

.dropdown.role-tint-admin .dropdown-trigger-label::before,
.dropdown.role-tint-member .dropdown-trigger-label::before,
.dropdown.role-tint-viewer .dropdown-trigger-label::before {
    filter: brightness(0) invert(1);
}

/* Role icon inside the inline role dropdown trigger, matching the
   icon shown in the read-only `.role-chip`. The PNGs live in
   static/images/ and are mapped per role by Jinja `_role_icon_filename`. */
.dropdown.role-tint-admin .dropdown-trigger-label::before,
.dropdown.role-tint-member .dropdown-trigger-label::before,
.dropdown.role-tint-viewer .dropdown-trigger-label::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: -2px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.dropdown.role-tint-admin .dropdown-trigger-label::before {
    background-image: url('/static/images/Admin.png');
}

.dropdown.role-tint-member .dropdown-trigger-label::before {
    background-image: url('/static/images/Member.png');
}

.dropdown.role-tint-viewer .dropdown-trigger-label::before {
    background-image: url('/static/images/Viewer.png');
}

/* Light-grey muted inputs inside the invite form, matching the
   dropdown trigger so Email Address + Role read as one muted row. */
.invite-form .form-control {
    background-color: var(--dropdown-trigger-bg);
}

.you-indicator {
    color: var(--color-gray-400);
    font-size: 12px;
}

.modal-dialog-sm {
    max-width: 450px;
}

.modal-header-centered {
    justify-content: center;
}

.modal-body-centered {
    text-align: center;
}

.modal-message {
    margin-bottom: 20px;
}

.modal-message-sm {
    margin-bottom: 12px;
}

.form-actions-centered {
    justify-content: center;
}

.form-inline {
    display: inline;
}

.empty-state-padded {
    padding: var(--space-6) 0;
}

.invite-hint {
    margin-top: 10px;
    color: var(--color-gray-500);
    font-size: 14px;
}

.card-desc {
    margin-bottom: 8px;
}

.card-role {
    margin-bottom: 8px;
}

.product-group-heading {
    margin: 16px 0 8px 0;
    color: var(--color-gray-700);
    font-size: 16px;
    font-weight: 600;
}

.flex-row-gap {
    display: flex;
    gap: 10px;
}

.token-form-full {
    width: 100%;
}

.sidebar-item-empty {
    color: var(--color-gray-400);
}

.sidebar-cve-context {
    font-size: 0.7rem;
    color: var(--color-gray-400);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-cve-search form {
    margin: 0;
}

.footer-link {
    color: var(--color-primary);
    text-decoration: none;
}

.footer-version {
    margin-left: 1rem;
    color: var(--color-gray-500);
}

.drop-zone-icon-img {
    width: 59px;
    height: auto;
}

.file-input-hidden {
    display: none;
}

.u-mb-20 {
    margin-bottom: 20px;
}

.u-mt-4-space {
    margin-top: var(--space-4);
}

.section-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.section-header-flex h2 {
    margin: 0;
}

/* Lighter weight text in headings (for connecting words like "with", "for") */
.title-light {
    font-weight: 400;
}

.pagination-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pagination-bar-top {
    margin-bottom: 15px;
}

.pagination-bar-bottom {
    margin-top: 20px;
}

.pagination-controls-inner {
    display: flex;
    gap: 16px;
    align-items: center;
}

.pagination-pages {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* ---- Figma pagination styling ----
   Generic — applies to every table that uses .pagination-pages markup.
   Overrides the .btn defaults so Prev/Next render as plain text links and
   page numbers render as small circles, with the active page filled. */
.pagination-pages .btn,
.pagination-pages .btn-sm,
.pagination-pages .btn-primary,
.pagination-pages .btn-disabled,
.pagination-pages .btn-static,
.pagination-pages .btn-page-active {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-page-inactive-text);
    border-radius: var(--radius-pill);
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Numeric page links — circular hit area */
.pagination-pages .btn:not(.btn-page-active):not(.btn-static) {
    min-width: var(--size-page-circle);
    height: var(--size-page-circle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pagination-pages a.btn:hover {
    background-color: var(--color-page-inactive-bg-hover);
    color: var(--color-page-nav-text-hover);
    transform: none;
}

/* Active page — dark filled circle */
.pagination-pages .btn-page-active {
    background-color: var(--color-page-active);
    color: var(--color-page-active-text);
    min-width: var(--size-page-circle);
    height: var(--size-page-circle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Ellipsis — plain text, no hover */
.pagination-pages .btn-static {
    color: var(--color-page-inactive-text);
    min-width: auto;
    padding: 0 4px;
}

/* Previous / Next — text links sit flush either side of the page numbers.
   Match by position so we don't need template changes. Explicitly reset the
   circle sizing applied by the numeric rule above. */
.pagination-pages .btn:first-child,
.pagination-pages .btn:last-child {
    min-width: auto;
    height: auto;
    padding: 6px 8px;
    color: var(--color-page-nav-text);
    border-radius: var(--radius-sm);
}

.pagination-pages .btn-disabled:first-child,
.pagination-pages .btn-disabled:last-child {
    color: var(--color-page-nav-disabled);
    opacity: 1;
    cursor: default;
}

.pagination-pages a.btn:first-child:hover,
.pagination-pages a.btn:last-child:hover {
    background-color: var(--color-page-inactive-bg-hover);
    color: var(--color-page-nav-text-hover);
}

.filter-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.view-mode-form {
    margin: 0;
}

.alert-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

/* ---- Scan-history table (BSP page) ----
   Per-scan Release/Build/Upload-date/Type table. The Type cell hosts the
   custom dropdown (admin) or a plain label; give it a stable min-width so
   the trigger doesn't jump between Production/Development across rows. */
.scan-history-table .dropdown {
    min-width: 150px;
}
.scan-history-table td {
    vertical-align: middle;
}
.scan-type-label {
    color: var(--color-gray-900);
}


/* ── SBOM CVE-ingest in-progress banner ─────────────────────────────────────
   Shared by image_cves.html and product_hierarchy.html (moved here from
   image-cves.css 2026-07-02 so the BSP/product page gets the same yellow
   animated banner). Server-rendered off the scan's cve_ingest_status, so it
   persists across navigation and simply disappears when ingest completes. The
   pulse + spinner read as active background work rather than a static warning.
   (`spin` keyframe defined earlier in this file.) */
.sbom-ingest-banner {
    animation: ingest-pulse 1.8s ease-in-out infinite;
}

@keyframes ingest-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.72; }
}

.ingest-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-gray-200);
    border-top: 2px solid var(--color-blue);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
    flex-shrink: 0;
}

.warning-banner {
    margin-bottom: 15px;
    padding: 12px 16px;
    background-color: var(--color-warning-light);
    border: 1px solid var(--color-warning);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.warning-banner-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.warning-banner-icon {
    font-size: 20px;
}

.warning-banner-text {
    color: var(--color-warning-dark);
    font-weight: 500;
}

.warning-banner-action {
    background-color: var(--color-warning);
    color: white;
    padding: 6px 14px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    font-size: 13px;
}


/* ── Package grouping (LUC-85) ─────────────────────────────────────────────
   One row per identical-CPE-list group in the package view; member rows sit
   hidden beneath and toggle via togglePkgGroup(). */
.pkg-group-chevron {
    display: inline-block;
    margin-right: 6px;
    color: var(--color-gray-600);
    transition: transform 0.15s ease;
}

.pkg-group-row.pkg-group-open .pkg-group-chevron {
    transform: rotate(90deg);
}

/* The group row's name link must flow inline after the chevron — .row-link
   is display:block for full-row click targets, which stacks them onto
   separate lines here. */
.pkg-group-row .row-link {
    display: inline;
    width: auto;
}

.pkg-member-row td:first-child {
    padding-left: 36px;
}

/* ── KEV emblem (LUC-11) ─────────────────────────────────────────────
   Flag beside a CVE id when it is in the CISA Known Exploited
   Vulnerabilities catalogue (templates/partials/_kev_flag.html). */
/* CISA-KEV rows in the CVE tables: translucent brand-red wash so
   known-exploited CVEs read as a real problem at a glance. The wash covers
   the middle two-thirds of the row with clear bands above and below, so
   consecutive KEV rows show as separate stripes rather than one solid
   block. Hover darkens the same tint rather than falling back to the grey
   hover. */
.table tbody tr.kev-row > td,
.data-table tbody tr.kev-row > td {
    background: linear-gradient(to bottom,
        transparent 17%,
        rgba(219, 53, 18, 0.10) 17%,
        rgba(219, 53, 18, 0.10) 83%,
        transparent 83%);
}

.table tbody tr.kev-row.clickable-row:hover,
.data-table tbody tr.kev-row.clickable-row:hover {
    background-color: transparent;
}

.table tbody tr.kev-row.clickable-row:hover > td,
.data-table tbody tr.kev-row.clickable-row:hover > td {
    background: linear-gradient(to bottom,
        transparent 17%,
        rgba(219, 53, 18, 0.18) 17%,
        rgba(219, 53, 18, 0.18) 83%,
        transparent 83%);
}

.kev-flag {
    height: 28px;
    width: auto;
    margin-left: 6px;
    vertical-align: -8px;
}

/* Dedicated KEV column: emblem centred in its own narrow cell */
.kev-header,
.kev-cell {
    text-align: center;
    white-space: nowrap;
}
.kev-cell .kev-flag {
    margin-left: 0;
    /* The 28px emblem must not set the row height: centre it and pull its
       overflow back into the cell padding so KEV rows stay the same height
       as their neighbours. */
    vertical-align: middle;
    margin-top: -8px;
    margin-bottom: -8px;
}

/* In CVE tables the id occupies a fixed-width slot so every KEV flag
   starts at the same column regardless of id length; an unusually long id
   simply pushes its flag right rather than colliding. */
.cve-id-slot {
    display: inline-block;
    min-width: 16ch;
}

.cve-detail-eyebrow .kev-flag {
    height: 32px;
    vertical-align: -10px;
}

/* ── CRA Reports sidebar link (LUC-108) ──────────────────────────────────
   Attention state while the business has any open Article 14 reporting
   event: light-red background + count badge. The CRA section's own pages
   are styled in cra.css. */
.sidebar-link.cra-attention {
    background: var(--color-cra-attention-bg);
    border-radius: 6px;
}
.sidebar-link.cra-attention:hover {
    background: var(--color-danger-light);
}
.cra-attention-count {
    margin-left: auto;
    background: var(--color-primary);
    color: #fff;
    border-radius: 10px;
    padding: 0 8px;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 18px;
}

/* ============================================================
   Tag chips — LUC-49
   ============================================================ */

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: var(--color-accent-light);
    color: var(--color-accent);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tag-chip-remove {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--color-accent);
    font-size: 0.85rem;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.tag-chip-remove:hover {
    opacity: 1;
}

.tag-add-form {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

.tag-add-input {
    font-size: 0.75rem;
    padding: 2px 8px;
    border: 1px solid var(--color-gray-300);
    border-radius: 999px;
    outline: none;
    width: 140px;
    transition: border-color 0.15s;
}

.tag-add-input:focus {
    border-color: var(--color-accent);
}

.tag-add-btn {
    font-size: 0.75rem;
    padding: 2px 10px;
    border-radius: 999px;
    background-color: var(--color-accent);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s;
}

.tag-add-btn:hover {
    background-color: var(--color-accent-hover);
}

/* ============================================================
   Tag UI redesign — LUC-49 (modal-based)
   ============================================================ */

/* # trigger button — always visible to admins beside entity names */
.tag-edit-trigger {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-accent);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0 4px;
    line-height: 1;
    opacity: 0.75;
    vertical-align: middle;
    transition: opacity 0.15s;
    user-select: none;
}

.tag-edit-trigger:hover {
    opacity: 1;
}

/* Inline display container */
.tag-display {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

/* Removable chip variant (inside modal) */
.tag-chip-removable {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: var(--color-accent-light);
    color: var(--color-accent);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}

/* Modal footer */
.modal-footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-gray-200);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
}

/* Narrow modal variant for the tag editor */
.modal-dialog-narrow {
    max-width: 480px;
}

/* Allow the suggestion panel to overflow the dialog without being clipped */
#tagEditModal .modal-dialog {
    overflow: visible;
}

#tagEditModal .modal-footer {
    justify-content: center;
}

#tagEditModal .form-control:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(118, 74, 183, 0.12);
}

/* Chip area inside the tag modal */
.tag-modal-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 28px;
    margin-bottom: var(--space-4);
}

.tag-modal-empty {
    font-size: 0.85rem;
}

/* Add row: input + button side by side */
.tag-modal-add-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Input wrapper: flex child that takes remaining space + anchors suggestion list */
.tag-modal-input-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

/* Suggestion dropdown reuses .dropdown-panel visuals, anchored to the input */
.tag-suggestions-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 2px;
    max-height: 180px;
    z-index: 1050;
}

/* Inline error message in the modal */
.tag-modal-error {
    margin: var(--space-2) 0 0;
    font-size: 0.8rem;
    color: var(--color-danger, #c0392b);
    min-height: 1.2em;
}

/* Tag filter bar above tables */
.tag-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: var(--space-2) var(--space-2);
    background: var(--color-gray-50, #f9f9fb);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
}

.tag-filter-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.tag-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    background-color: var(--color-accent-light);
    color: var(--color-accent);
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.tag-filter-chip:hover {
    background-color: var(--color-accent-light);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.tag-filter-chip.active {
    background-color: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

.tag-filter-chip .tag-filter-chip-remove {
    font-size: 0.75rem;
    line-height: 1;
    opacity: 0.75;
}

.tag-filter-clear {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--color-gray-500);
    text-decoration: none;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    transition: color 0.15s;
}

.tag-filter-clear:hover {
    color: var(--color-gray-800);
}

/* Reset UA button styles when .tag-filter-chip / .tag-filter-clear are on <button> */
button.tag-filter-chip,
button.tag-filter-clear {
    font-family: inherit;
}
button.tag-filter-clear {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 8px;
}

/* ══════════════════════════════════════════════════════════════════════
   AI help assistant drawer — "Ask Lucerna" (LUC-104)
   All colours from the --color-* tokens in :root.
   ══════════════════════════════════════════════════════════════════════ */

.help-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(19, 19, 19, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1090;
}
.help-drawer-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.help-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 600px;
    max-width: 92vw;
    background: #fff;
    box-shadow: -4px 0 24px rgba(19, 19, 19, 0.18);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 1100;
    display: flex;
    flex-direction: column;
}
.help-drawer.open {
    transform: translateX(0);
}

.help-drawer-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-brand-gray);
    background: var(--color-primary-light);
}
.help-drawer-header img {
    width: 22px;
    height: 22px;
}
.help-drawer-title {
    font-weight: 600;
    color: var(--color-brand-black);
    flex: 1;
}
.help-drawer-header button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-brand-black);
    font-size: 0.85rem;
    padding: 4px 8px;
    border-radius: 4px;
}
.help-drawer-header button:hover {
    background: rgba(219, 53, 18, 0.10);
}
.help-drawer-close {
    font-size: 1.1rem !important;
    line-height: 1;
}
.help-drawer-resizer {
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    cursor: ew-resize;
    touch-action: none;   /* pointer events drive the drag, even on touch */
}
.help-drawer-resizer:hover,
.help-drawer-resizer:active {
    background: rgba(219, 53, 18, 0.15);
}

.help-chat-list {
    overflow-y: auto;
    max-height: 40%;
    border-bottom: 1px solid var(--color-brand-gray);
    padding: 8px;
}
.help-chat-list-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.9rem;
    color: var(--color-brand-black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.help-chat-list-item:hover {
    background: var(--color-primary-light);
}
.help-chat-list-row {
    display: flex;
    align-items: center;
    gap: 4px;
}
.help-chat-list-row .help-chat-list-item {
    flex: 1;
    min-width: 0;
}
.help-chat-list-delete {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-gray-500);
    font-size: 1rem;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 4px;
    flex: 0 0 auto;
}
.help-chat-list-delete:hover {
    color: var(--color-primary);
    background: var(--color-primary-light);
}
.help-chat-list-row-all {
    justify-content: flex-end;
    border-bottom: 1px solid var(--color-gray-200);
    padding-bottom: 4px;
    margin-bottom: 4px;
}
.help-chat-list-delete-all {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-gray-500);
    font-size: 0.8rem;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 4px;
}
.help-chat-list-delete-all:hover {
    color: var(--color-primary);
    background: var(--color-primary-light);
}
.help-chat-list-delete,
.help-chat-list-delete-all {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.help-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.help-chat-empty {
    color: #777;
    font-size: 0.9rem;
    text-align: center;
    margin-top: 30px;
}
.help-chat-msg {
    /* Column so the timestamp sits under the bubble (triage-chat pattern) */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.help-chat-user {
    align-items: flex-end;
}
.help-chat-timestamp {
    font-size: 11px;
    color: var(--color-gray-400);
    margin-top: 2px;
}
.help-delete-modal {
    /* Above the drawer (z-index 1100); .modal-overlay's own is 1000 */
    z-index: 1200;
}
.help-chat-bubble {
    max-width: 85%;
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.45;
    overflow-wrap: break-word;
}
.help-chat-user .help-chat-bubble {
    background: var(--color-gray-500);
    color: white;
    border-bottom-right-radius: 4px;
}
.help-chat-assistant .help-chat-bubble {
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
    color: var(--color-gray-700);
    border-bottom-left-radius: 4px;
    white-space: pre-wrap;
}
.help-chat-assistant .help-chat-bubble p { margin: 0 0 8px; white-space: normal; }
.help-chat-assistant .help-chat-bubble p:last-child { margin-bottom: 0; }
.help-chat-assistant .help-chat-bubble ul,
.help-chat-assistant .help-chat-bubble ol { margin: 0 0 8px 18px; white-space: normal; }
.help-chat-assistant .help-chat-bubble code {
    background: rgba(19, 19, 19, 0.08);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.85em;
}
.help-chat-streaming::after {
    content: '▍';
    animation: help-chat-blink 1s step-start infinite;
}
@keyframes help-chat-blink { 50% { opacity: 0; } }

.help-chat-composer {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--color-brand-gray);
}
.help-chat-input {
    flex: 1;
    resize: none;
    border: 1px solid var(--color-brand-gray);
    border-radius: 8px;
    padding: 9px 10px;
    font: inherit;
    font-size: 0.9rem;
    max-height: 110px;
}
.help-chat-input:focus {
    outline: none;
    border-color: var(--color-primary);
}
.help-chat-send {
    background: linear-gradient(135deg, var(--color-primary-gradient-start) 0%, var(--color-primary-gradient-end) 100%);
    color: var(--color-white);
    border: none;
    border-radius: 8px;
    padding: 0 16px;
    cursor: pointer;
    font-size: 0.9rem;
}
.help-chat-send:hover { background: linear-gradient(135deg, var(--color-primary-gradient-start-hover) 0%, var(--color-primary-gradient-end-hover) 100%); }
.help-chat-send:disabled { opacity: 0.5; cursor: default; }

/* Floating launcher — present on every page with business context (incl.
   CRA pages, whose sidebar override drops the sidebar link). */
.help-launcher {
    position: fixed;
    bottom: 22px;
    right: 22px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(19, 19, 19, 0.2);
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
}
.help-launcher:hover {
    box-shadow: 0 4px 12px var(--color-primary-shadow-hover);
    border-color: var(--color-primary);
}
.help-launcher img {
    width: 30px;
    height: 30px;
}