/* ========================================================================
   CloudGovernancePulse — Dual Theme Dashboard (Dark + Light)
   ======================================================================== */

/* --- Dark Theme (default) — "Deep Space" --- */
/* Depth comes from stacked surfaces and borders, not from glow or gradients.
   Token names are intentionally unchanged: markup, scoped CSS and the Bootstrap
   overrides below all read these names, so a palette change stays a value change. */
[data-theme="dark"], :root {
    --bg-primary: #0d1117;
    --bg-secondary: #131a23;
    --bg-tertiary: #182029;
    --bg-surface: #131a23;

    --glass-bg: rgba(19, 26, 35, 0.86);
    --glass-border: #1f2731;
    --glass-blur: 8px;

    /* Elevated surface — cards, panels, dropdowns */
    --surface: #131a23;
    --surface-raised: #182029;
    --surface-sunken: #0f151d;

    --text-primary: #e6ecf4;
    --text-secondary: #95a2b3;
    /* #5a6675 from the mockup fails AA (2.99:1); lifted to pass on --surface */
    --text-muted: #7a8a9e;
    --text-on-accent: #0a1018;

    --border-subtle: #1f2731;
    --border-medium: #2b3947;

    --gradient-accent: linear-gradient(135deg, #7aa2ff, #4fd1c5);
    --gradient-header: linear-gradient(135deg, #0d1117 0%, #182029 100%);
    --sidebar-bg: #090c11;

    --color-success: #4ade80;
    --color-danger: #f87171;
    --color-warning: #fbbf24;
    --color-info: #7aa2ff;
    --color-primary: #7aa2ff;
    --accent: #7aa2ff;
    --accent-hover: #9bb8ff;
    --accent-soft: rgba(122, 162, 255, 0.14);
    --accent-secondary: #4fd1c5;

    /* Categorical ramp — for chart series and log categories that need distinct
       hues rather than semantic meaning. Deliberately small: four hues only. */
    --cat-1: #7aa2ff;
    --cat-2: #4fd1c5;
    --cat-3: #c4a2ff;
    --cat-4: #f0a3c0;
    --cat-lime: #a3d160;

    --border-color: var(--border-medium);

    --severity-critical: #f87171;
    --severity-high: #fb923c;
    --severity-medium: #fbbf24;
    --severity-low: #7a8a9e;
    --severity-critical-bg: #2c1518;
    --severity-critical-fg: #f87171;
    --severity-high-bg: #2b1c11;
    --severity-high-fg: #fb923c;
    --severity-medium-bg: #2b2010;
    --severity-medium-fg: #fbbf24;
    --severity-low-bg: #1b222c;
    --severity-low-fg: #a3b0c0;

    --badge-danger-bg: #2c1518;
    --badge-danger-fg: #f87171;
    --badge-warning-bg: #2b2010;
    --badge-warning-fg: #fbbf24;
    --badge-info-bg: #132430;
    --badge-info-fg: #8fb4ff;
    --badge-secondary-bg: #1b222c;
    --badge-secondary-fg: #a3b0c0;
    --badge-success-bg: #10261a;
    --badge-success-fg: #4ade80;
    --badge-primary-bg: #16243a;
    --badge-primary-fg: #8fb4ff;

    --alert-info-bg: #101c28;
    --alert-info-border: #1d3350;
    --alert-info-fg: #8fb4ff;
    --alert-success-bg: #0d1d15;
    --alert-success-border: #1c4030;
    --alert-success-fg: #4ade80;
    --alert-danger-bg: #1d1216;
    --alert-danger-border: #4a2226;
    --alert-danger-fg: #f87171;
    --alert-warning-bg: #1d1810;
    --alert-warning-border: #3a2e18;
    --alert-warning-fg: #fbbf24;

    --pre-bg: #0a0f16;
    --pre-fg: #c3cdda;
    --table-hover-bg: rgba(122, 162, 255, 0.06);
    --table-active-bg: rgba(122, 162, 255, 0.11);
    --table-header-bg: #0f151d;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px -14px rgba(0, 0, 0, 0.9);
    --shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, 0.95);
    --shadow-card: var(--shadow-md);
    --focus-ring: 0 0 0 3px rgba(122, 162, 255, 0.4);

    --btn-outline-secondary-fg: #c3cdda;
    --btn-outline-secondary-border: #26313d;
    --btn-outline-secondary-hover-bg: #1b222c;

    --dropdown-bg: #182029;
    --dropdown-hover: #1e2733;
    --dropdown-check: #7aa2ff;

    /* Sidebar tokens — overridden per theme */
    --sidebar-text: #95a2b3;
    --sidebar-text-hover: #dbe3ed;
    --sidebar-text-active: #f0f4f9;
    --sidebar-hover-bg: #12181f;
    --sidebar-active-bg: #161d26;
    --sidebar-border: #1f2731;
    --sidebar-label: #7a8a9e;

    /* Graph tokens */
    --graph-bg: #090c11;
    --graph-text: #95a2b3;
    --graph-text-muted: #7a8a9e;
    --graph-text-bright: #e6ecf4;
    --graph-legend-bg: #0f151d;
    --graph-zoom-bg: #182029;
    --graph-zoom-border: #2b3947;
    --graph-zoom-text: #e6ecf4;
    --graph-edge-hierarchy: #26313d;
    --graph-edge-child: #4a6a8a;
    --graph-ring-bg: #2b3947;
    --graph-dp-border: #1f2731;

    --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;

    /* Spacing scale — 4px base */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* Type scale */
    --fs-xs: 0.75rem;
    --fs-sm: 0.8125rem;
    --fs-md: 0.875rem;
    --fs-base: 0.9375rem;
    --fs-lg: 1.0625rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;
    --fs-3xl: 1.875rem;

    /* Border radius scale */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;

    /* Layout */
    --content-max: 1440px;
    --topbar-h: 3.5rem;
    --sidebar-w: 244px;

    /* Z-index scale — single source of truth */
    --z-content: 1;
    --z-sticky: 10;
    --z-dropdown: 100;
    --z-error-ui: 1000;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-sidebar: 1060;
    --z-diag-backdrop: 10000;
    --z-diag-modal: 10001;

    color-scheme: dark;
}

/* --- Light Theme — "Deep Space", light counterpart --- */
/* Not an inversion: the page sits slightly grey so white surfaces read as raised,
   mirroring how the dark theme separates --bg-primary from --surface. */
[data-theme="light"] {
    --bg-primary: #f3f5f8;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f4f7fa;
    --bg-surface: #e7ebf1;

    --glass-bg: rgba(255, 255, 255, 0.88);
    --glass-border: #dfe4ea;
    --glass-blur: 8px;

    --surface: #ffffff;
    --surface-raised: #ffffff;
    --surface-sunken: #f7f9fb;

    --text-primary: #1e2733;
    --text-secondary: #5c6b7d;
    /* #8b98a8 from the mockup fails AA (2.94:1) */
    --text-muted: #6a7785;
    --text-on-accent: #ffffff;

    --border-subtle: #dfe4ea;
    --border-medium: #cbd3dc;

    --gradient-accent: linear-gradient(135deg, #2f6bd8, #0f9b8e);
    --gradient-header: linear-gradient(135deg, #f3f5f8 0%, #e7ebf1 100%);
    --sidebar-bg: #f6f8fa;

    --color-success: #15803d;
    --color-danger: #c0392f;
    --color-warning: #a16207;
    --color-info: #2f6bd8;
    --color-primary: #2f6bd8;
    --accent: #2f6bd8;
    --accent-hover: #24559f;
    --accent-soft: rgba(47, 107, 216, 0.1);
    --accent-secondary: #0f9b8e;

    --cat-1: #2f6bd8;
    --cat-2: #0f7d73;
    --cat-3: #6d4bc4;
    --cat-4: #b3446b;
    --cat-lime: #4d7c0f;

    --border-color: var(--border-medium);

    --severity-critical: #c0392f;
    --severity-high: #b4531a;
    --severity-medium: #915806;
    --severity-low: #6a7785;
    --severity-critical-bg: #fdeceb;
    --severity-critical-fg: #a2322a;
    --severity-high-bg: #fdf0e4;
    --severity-high-fg: #8f4315;
    /* mockup values missed AA on their own tints; darkened to pass */
    --severity-medium-bg: #fdf3e0;
    --severity-medium-fg: #7d4c05;
    --severity-low-bg: #eef1f5;
    --severity-low-fg: #55616f;

    --badge-danger-bg: #fdeceb;
    --badge-danger-fg: #a2322a;
    --badge-warning-bg: #fdf3e0;
    --badge-warning-fg: #7d4c05;
    --badge-info-bg: #e9f0fd;
    --badge-info-fg: #23539f;
    --badge-secondary-bg: #eef1f5;
    --badge-secondary-fg: #55616f;
    --badge-success-bg: #e6f5eb;
    --badge-success-fg: #10662f;
    --badge-primary-bg: #e9f0fd;
    --badge-primary-fg: #23539f;

    --alert-info-bg: #eff4fd;
    --alert-info-border: #cadcf7;
    --alert-info-fg: #1d4a91;
    --alert-success-bg: #edf7f0;
    --alert-success-border: #bfe3cc;
    --alert-success-fg: #10592a;
    --alert-danger-bg: #fdf1f0;
    --alert-danger-border: #f2c9c5;
    --alert-danger-fg: #8f2c25;
    --alert-warning-bg: #fdf7ec;
    --alert-warning-border: #eddcb6;
    --alert-warning-fg: #6f4405;

    --pre-bg: #f6f8fa;
    --pre-fg: #31404f;
    --table-hover-bg: rgba(47, 107, 216, 0.05);
    --table-active-bg: rgba(47, 107, 216, 0.09);
    --table-header-bg: #f7f9fb;
    --shadow-sm: 0 1px 2px rgba(20, 30, 45, 0.07);
    --shadow-md: 0 6px 18px -10px rgba(20, 30, 45, 0.28);
    --shadow-lg: 0 18px 50px -18px rgba(20, 30, 45, 0.32);
    --shadow-card: var(--shadow-sm);
    --focus-ring: 0 0 0 3px rgba(47, 107, 216, 0.3);

    --btn-outline-secondary-fg: #31404f;
    --btn-outline-secondary-border: #d7dee7;
    --btn-outline-secondary-hover-bg: #f2f5f9;

    --dropdown-bg: #ffffff;
    --dropdown-hover: #eef2f7;
    --dropdown-check: #2f6bd8;

    /* Sidebar follows the theme — light surface, dark text */
    --sidebar-text: #5c6b7d;
    --sidebar-text-hover: #1e2733;
    --sidebar-text-active: #0f1720;
    --sidebar-hover-bg: #eef2f7;
    --sidebar-active-bg: #eaf1fd;
    --sidebar-border: #dfe4ea;
    --sidebar-label: #8b98a8;

    /* Graph tokens — light theme uses lighter backgrounds */
    --graph-bg: #f3f5f8;
    --graph-text: #5c6b7d;
    --graph-text-muted: #8b98a8;
    --graph-text-bright: #1e2733;
    --graph-legend-bg: #e7ebf1;
    --graph-zoom-bg: #ffffff;
    --graph-zoom-border: #cbd3dc;
    --graph-zoom-text: #31404f;
    --graph-edge-hierarchy: #aab5c2;
    --graph-edge-child: #6a7785;
    --graph-ring-bg: #cbd3dc;
    --graph-dp-border: #e7ebf1;

    color-scheme: light;
}


/* ===================== BASE ===================== */

html, body {
    font-family: var(--font-sans);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.2s ease, color 0.2s ease;
}

body {
    font-size: var(--fs-base);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.btn {
    --bs-btn-border-radius: var(--radius-md);
    font-weight: 500;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.btn-sm {
    --bs-btn-border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    padding: 0.3rem 0.65rem;
}

.btn-lg {
    font-size: var(--fs-lg);
    padding: 0.6rem 1.25rem;
}

.content {
    padding-top: var(--space-5);
    padding-bottom: var(--space-7);
    max-width: var(--content-max);
    width: 100%;
    margin-inline: auto;
}

.app-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    border-top: 1px solid var(--border-subtle);
    margin-top: auto;
}

.app-footer a {
    color: var(--text-secondary);
    text-decoration: none;
}

.app-footer a:hover {
    color: var(--color-info);
}

.app-footer-sep {
    opacity: 0.4;
}

h1:focus { outline: none; }

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    letter-spacing: -0.011em;
}

h1 {
    font-weight: 650;
    font-size: var(--fs-2xl);
    letter-spacing: -0.02em;
}

h2 { font-size: var(--fs-xl); font-weight: 600; }
h3 { font-size: var(--fs-lg); font-weight: 600; }
h4 { font-size: var(--fs-base); font-weight: 600; }
h5 { font-size: var(--fs-md); font-weight: 600; }
h6 { font-size: var(--fs-sm); font-weight: 600; }

p, li, td, th, span, small, label, div {
    color: inherit;
}


/* ===================== LINKS & BUTTONS ===================== */

a, .btn-link {
    color: var(--color-info);
}
a:hover {
    color: var(--accent-hover);
}

.btn-primary {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent-hover);
    --bs-btn-hover-border-color: var(--accent-hover);
    --bs-btn-active-bg: var(--accent-hover);
    --bs-btn-active-border-color: var(--accent-hover);
    --bs-btn-disabled-bg: var(--accent);
    --bs-btn-disabled-border-color: var(--accent);
    color: var(--text-on-accent);
    font-weight: 500;
}
.btn-primary:hover {
    color: var(--text-on-accent);
}

.btn-outline-primary {
    color: var(--color-info);
    border-color: var(--border-medium);
}
.btn-outline-primary:hover {
    background: var(--accent-soft);
    color: var(--color-info);
    border-color: var(--color-info);
}

.btn-outline-secondary {
    color: var(--btn-outline-secondary-fg);
    border-color: var(--btn-outline-secondary-border);
}
.btn-outline-secondary:hover {
    background: var(--btn-outline-secondary-hover-bg);
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

.btn-warning {
    background: var(--color-warning);
    border-color: var(--color-warning);
    color: #000;
}
.btn-outline-warning {
    color: var(--color-warning);
    border-color: var(--border-medium);
}
.btn-outline-warning:hover {
    background: rgba(245, 158, 11, 0.12);
    color: var(--color-warning);
    border-color: var(--color-warning);
}

.btn-danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--text-on-accent);
}

.btn-success {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--text-on-accent);
}

.btn:focus-visible, .nav-link:focus-visible, a:focus-visible, .form-control:focus, .form-check-input:focus, .form-select:focus {
    box-shadow: var(--focus-ring);
    outline: none;
}

.btn:focus:not(:focus-visible) {
    box-shadow: none;
}


/* ===================== CLOUD BADGES ===================== */

.cloud-badge {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    line-height: 1.5;
    vertical-align: middle;
}
.cloud-badge-azure {
    background: var(--accent-soft);
    color: var(--color-info);
}
.cloud-badge-aws {
    background: rgba(245, 158, 11, 0.14);
    color: var(--color-warning);
}

/* ===================== NAV TABS ===================== */

.nav-tabs {
    border-bottom-color: var(--border-subtle);
    gap: var(--space-1);
}
.nav-tabs .nav-link {
    color: var(--text-secondary);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.5rem 0.9rem;
    font-size: var(--fs-md);
    font-weight: 500;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.nav-tabs .nav-link:hover {
    color: var(--text-primary);
    background: transparent;
    border-bottom-color: var(--border-medium);
}
.nav-tabs .nav-link.active {
    color: var(--text-primary);
    background: transparent;
    border-bottom-color: var(--accent);
    font-weight: 600;
}

/* ===================== LIST GROUP ===================== */

.list-group-item {
    background: var(--surface);
    border-color: var(--border-subtle);
    color: var(--text-primary);
    transition: background var(--transition-fast);
}
.list-group-item:hover {
    background: var(--bg-tertiary);
}
.list-group-item + .list-group-item {
    border-top-color: var(--border-subtle);
}

/* ===================== FORMS ===================== */

.form-control, .form-select {
    background-color: var(--surface-sunken);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--fs-md);
    padding: 0.45rem 0.7rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-control-sm, .form-select-sm {
    font-size: var(--fs-sm);
    padding: 0.3rem 0.55rem;
    border-radius: var(--radius-sm);
}
.form-control:focus, .form-select:focus {
    background-color: var(--surface-sunken);
    border-color: var(--accent);
    color: var(--text-primary);
}
.form-control::placeholder {
    color: var(--text-muted);
}
.form-control:disabled, .form-select:disabled {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-muted);
    opacity: 0.6;
}
.form-label {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 500;
    margin-bottom: 0.3rem;
}
.form-check-input {
    background-color: var(--bg-tertiary);
    border-color: var(--border-medium);
}
.form-check-input:checked {
    background-color: var(--color-info);
    border-color: var(--color-info);
}
.form-check-label {
    color: var(--text-primary);
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--text-muted);
    text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* select option (native) */
option {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* ===================== CARDS ===================== */

.card {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-weight: 600;
    font-size: var(--fs-md);
    padding: 0.7rem 1rem;
}
.card-body {
    color: var(--text-primary);
}
.card-title {
    color: var(--text-primary);
}


/* ===================== TABLES ===================== */

.table {
    color: var(--text-primary);
    border-color: var(--border-subtle);
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    --bs-table-striped-bg: rgba(0, 0, 0, 0.02);
    --bs-table-hover-bg: var(--table-hover-bg);
    --bs-table-active-bg: var(--table-active-bg);
}
[data-theme="dark"] .table {
    --bs-table-striped-bg: rgba(30, 41, 59, 0.3);
}

.table > thead {
    color: var(--text-secondary);
}
.table > thead th {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: var(--fs-sm);
    letter-spacing: 0;
    border-bottom-color: var(--border-medium);
}
.table > tbody > tr {
    border-bottom-color: var(--border-subtle);
    transition: background-color var(--transition-fast);
}
.table > tbody > tr > td {
    color: var(--text-primary);
}
.table > :not(caption) > * > * {
    padding: 0.6rem 0.75rem;
}
.table-sm > :not(caption) > * > * {
    padding: 0.45rem 0.6rem;
}

.table-modern {
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-md);
}
.table-modern > thead {
    position: sticky;
    top: var(--topbar-h);
    z-index: 2;
}
.table-modern > thead th {
    background: var(--table-header-bg);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: var(--fs-sm);
    text-transform: none;
    letter-spacing: 0;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--border-medium);
}
.table-modern > tbody > tr {
    transition: background-color var(--transition-fast);
}
.table-modern > tbody > tr:hover {
    background-color: var(--table-hover-bg);
}

/* table-active row */
.table-active, .table > tbody > .table-active > td {
    background-color: var(--table-active-bg);
    color: var(--text-primary);
    --bs-table-active-bg: var(--table-active-bg);
}

/* table-primary row — override Bootstrap defaults for themed tables */
.table-primary, .table > tbody > .table-primary > td,
.table > tbody > .table-primary > th {
    --bs-table-bg: var(--table-active-bg);
    --bs-table-color: var(--text-primary);
    background-color: var(--table-active-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle);
}


/* ===================== ALERTS ===================== */

.alert {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    padding: 0.7rem 0.9rem;
    font-size: var(--fs-md);
}
.alert a {
    font-weight: 500;
}
.alert-info {
    background: var(--alert-info-bg);
    border-color: var(--alert-info-border);
    color: var(--alert-info-fg);
}
.alert-success {
    background: var(--alert-success-bg);
    border-color: var(--alert-success-border);
    color: var(--alert-success-fg);
}
.alert-danger {
    background: var(--alert-danger-bg);
    border-color: var(--alert-danger-border);
    color: var(--alert-danger-fg);
}
.alert-warning {
    background: var(--alert-warning-bg);
    border-color: var(--alert-warning-border);
    color: var(--alert-warning-fg);
}


/* ===================== BADGES ===================== */

.badge {
    border-radius: var(--radius-sm);
    padding: 0.25em 0.55em;
    font-weight: 600;
    font-size: var(--fs-xs);
    letter-spacing: 0;
    line-height: 1.45;
}
.badge.bg-danger {
    background: var(--badge-danger-bg) !important;
    color: var(--badge-danger-fg);
}
.badge.bg-warning, .badge.bg-warning.text-dark {
    background: var(--badge-warning-bg) !important;
    color: var(--badge-warning-fg);
}
.badge.bg-info {
    background: var(--badge-info-bg) !important;
    color: var(--badge-info-fg);
}
.badge.bg-secondary {
    background: var(--badge-secondary-bg) !important;
    color: var(--badge-secondary-fg);
}
.badge.bg-success {
    background: var(--badge-success-bg) !important;
    color: var(--badge-success-fg);
}
.badge.bg-primary {
    background: var(--badge-primary-bg) !important;
    color: var(--badge-primary-fg);
}
.badge.bg-light, .badge.bg-light.text-dark {
    background: var(--badge-secondary-bg) !important;
    color: var(--badge-secondary-fg);
}

/* Severity badges — rendered by Components/Shared/SeverityBadge.razor */
.badge-critical {
    background: var(--severity-critical-bg);
    color: var(--severity-critical-fg);
}
.badge-high {
    background: var(--severity-high-bg);
    color: var(--severity-high-fg);
}
.badge-medium {
    background: var(--severity-medium-bg);
    color: var(--severity-medium-fg);
}
.badge-low {
    background: var(--severity-low-bg);
    color: var(--severity-low-fg);
}

/* Compact badge variant — for dense lists / table cells */
.badge-sm {
    font-size: var(--fs-xs);
    padding: 0.15em 0.45em;
}


/* ===================== PRE / CODE ===================== */

pre, code {
    background: var(--pre-bg);
    color: var(--pre-fg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
}
pre { padding: 0.75rem 1rem; }
code { padding: 0.15em 0.4em; font-size: 0.875em; border: none; }
pre code { padding: 0; border: none; background: none; }


/* ===================== TEXT UTILITIES ===================== */

.text-muted { color: var(--text-muted) !important; }
.text-dark { color: var(--text-secondary) !important; }
.text-success { color: var(--color-success) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-warning { color: var(--color-warning) !important; }
strong { color: inherit; }


/* ===================== PLATFORM STATS (header) ===================== */

.platform-stats {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-xs);
    font-weight: 450;
    color: var(--text-muted);
    margin-right: auto;
    white-space: nowrap;
}

.platform-stats-label {
    font-weight: 500;
    color: var(--text-muted);
    margin-right: 0;
}

.platform-stats-sep {
    opacity: 0.3;
}

@media (max-width: 1279.98px) {
    .platform-stats { display: none !important; }
}


/* ===================== RESULT GROUP ROWS ===================== */
/* Grouping headers used a blue wash plus a heavy blue underline, which read as
   a selected row rather than a heading. A raised surface and a quiet rule do
   the same job without competing with the severity colours in the rows below. */
.group-row {
    cursor: pointer;
}

.group-row-primary {
    background: var(--surface-raised);
    border-bottom: 1px solid var(--border-medium);
}

.group-row-primary:hover {
    background: var(--bg-tertiary);
}

.group-row-nested {
    background: var(--surface-sunken);
}

.group-row-nested:hover {
    background: var(--surface-raised);
}


/* ===================== FILTER BAR & CHIPS ===================== */
/* Filters read as a single row of state rather than a form to fill in: the
   common ones are one click, and the long lists stay as selects. */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.filter-search {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: 1 1 16rem;
    min-width: 12rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    color: var(--text-muted);
}

.filter-search:focus-within {
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.filter-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    color: var(--text-primary);
    font-size: var(--fs-md);
    outline: none;
}

.filter-search-input::placeholder { color: var(--text-muted); }

.filter-search-clear {
    border: none;
    background: none;
    color: var(--text-muted);
    padding: 0;
    display: flex;
    cursor: pointer;
}

.filter-search-clear:hover { color: var(--text-primary); }

.filter-group {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.32rem 0.7rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-medium);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.chip:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.chip-on {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--text-primary);
}

/* A severity chip keeps its own colour once selected, so the active filter and
   the rows it produces are describing the same thing. */
.chip-sev-critical.chip-on { background: var(--severity-critical-bg); border-color: var(--severity-critical); color: var(--severity-critical-fg); }
.chip-sev-high.chip-on { background: var(--severity-high-bg); border-color: var(--severity-high); color: var(--severity-high-fg); }
.chip-sev-medium.chip-on { background: var(--severity-medium-bg); border-color: var(--severity-medium); color: var(--severity-medium-fg); }
.chip-sev-low.chip-on { background: var(--severity-low-bg); border-color: var(--severity-low); color: var(--severity-low-fg); }

.filter-select {
    padding: 0.35rem 0.6rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-medium);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    max-width: 14rem;
}

.filter-select:focus {
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
    outline: none;
}

.filter-active {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.filter-active-label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--text-muted);
    margin-right: 0.2rem;
}

.filter-clear-all {
    border: none;
    background: none;
    color: var(--accent);
    font-size: var(--fs-sm);
    cursor: pointer;
    padding: 0.2rem 0.3rem;
}

.filter-clear-all:hover { text-decoration: underline; }


/* ===================== KPI STRIP ===================== */
/* One divided row instead of separate cards: the numbers are read together as
   a single reading of the estate, and the shared frame says so. */
.kpi-strip {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
}

.kpi-cell {
    flex: 1 1 9rem;
    min-width: 0;
    display: block;
    padding: var(--space-4) var(--space-5);
    border-right: 1px solid var(--border-subtle);
    transition: background-color var(--transition-fast);
}

.kpi-cell:last-child { border-right: none; }

.kpi-cell:hover { background: var(--surface-raised); }

.kpi-label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.kpi-value {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-top: var(--space-2);
    font-size: 1.6rem;
    font-weight: 650;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

/* Only the two cells that carry a verdict are tinted; the rest stay neutral
   so a glance lands on pass/fail rather than on every number at once. */
.kpi-success .kpi-value { color: var(--color-success); }
.kpi-danger .kpi-value { color: var(--color-danger); }

@media (max-width: 640px) {
    .kpi-cell {
        flex-basis: 50%;
        border-bottom: 1px solid var(--border-subtle);
    }
}


/* ===================== METRIC CARDS ===================== */

.metric-card {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.metric-card:hover {
    border-color: var(--border-medium);
    box-shadow: var(--shadow-md);
}

.metric-card .metric-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-secondary);
    margin-bottom: 0.45rem;
}
.metric-card .metric-label::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
}
.metric-secondary .metric-label::before { background: var(--text-muted); }
.metric-primary .metric-label::before { background: var(--accent); }
.metric-success .metric-label::before { background: var(--color-success); }
.metric-danger .metric-label::before { background: var(--color-danger); }
.metric-warning .metric-label::before { background: var(--color-warning); }
.metric-info .metric-label::before { background: var(--color-info); }

.metric-card .metric-value {
    font-size: 1.75rem;
    font-weight: 650;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}
.metric-secondary .metric-value,
.metric-primary .metric-value,
.metric-success .metric-value,
.metric-danger .metric-value,
.metric-warning .metric-value,
.metric-info .metric-value { color: var(--text-primary); }


/* ===================== SUBSCRIPTION DROPDOWN ===================== */



/* ===================== THEME TOGGLE ===================== */

.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
    font-size: 1rem;
    line-height: 1;
    margin-left: var(--space-2);
    flex-shrink: 0;
}
.theme-toggle:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
    color: var(--text-primary);
}


/* ===================== ANIMATIONS ===================== */

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

main {
    animation: fadeInUp 0.4s ease-out;
}

/* ===================== SKELETON LOADING ===================== */

.skeleton-card {
    border-radius: 8px;
    padding: 1rem;
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
.skeleton-bar {
    height: 14px;
    border-radius: 4px;
    background: var(--bg-tertiary);
    opacity: 0.5;
}
.skeleton-bar-lg { height: 24px; }
.skeleton-bar-sm { height: 10px; }
.skeleton-row {
    display: flex;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.skeleton-row .skeleton-bar { flex: 1; }


/* ===================== VALIDATION ===================== */

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--color-success); }
.invalid { outline: 1px solid var(--color-danger); }
.validation-message { color: var(--color-danger); }


/* ===================== BLAZOR ERROR BOUNDARY ===================== */

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after {
    content: "An error has occurred."
}
.darker-border-checkbox.form-check-input {
    border-color: var(--border-medium);
}

.cursor-pointer { cursor: pointer; }
.spinner-border { color: var(--color-info); }

/* ===================== RULE HIGHLIGHT ===================== */
.rule-highlight {
    background: var(--accent-soft) !important;
    border-left: 3px solid var(--color-info);
    animation: rule-highlight-fade 3s ease-out forwards;
}

@keyframes rule-highlight-fade {
    0%   { background: rgba(122, 162, 255, 0.22); }
    70%  { background: rgba(122, 162, 255, 0.14); }
    100% { background: rgba(122, 162, 255, 0.07); }
}

/* ===================== INPUT GROUP (Onboarding) ===================== */
.input-group .btn {
    border-color: var(--border-medium);
}

/* ===================== MODAL (Dark theme) ===================== */
.modal-content {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    color: var(--text-primary);
}

.modal-header {
    border-bottom: 1px solid var(--border-subtle);
}

.modal-footer {
    border-top: 1px solid var(--border-subtle);
}

[data-theme="dark"] .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.modal-backdrop.show {
    background: rgba(0, 0, 0, 0.6);
}


/* ===================== LANDING PAGE ===================== */

.landing-page {
    min-height: 100vh;
    background: var(--bg-primary);
}

.landing-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Header */
.landing-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-bottom: 1px solid var(--glass-border);
}

.landing-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.landing-brand {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}
.landing-brand:hover { color: var(--text-primary); text-decoration: none; }

.landing-brand-icon { font-size: 1.3rem; }

/* Brand mark: dark-navy CG glyph. Blends softly into the dark UI by design. */
.brand-logo-mark,
.landing-brand-img {
    display: inline-block;
    height: 1.35em;
    width: 1.35em;
    background: url("/images/logo-dark.png") no-repeat center / contain;
    flex-shrink: 0;
    vertical-align: -0.22em;
}

/* Wordmark stays solid; the gradient lives on the logo mark next to it. */
.brand-text {
    color: var(--text-primary);
    font-weight: 700;
}

.landing-nav {
    display: flex;
    gap: 1.5rem;
    margin-left: auto;
}

.landing-nav a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: color var(--transition-fast);
    cursor: pointer;
}
.landing-nav a:hover { color: var(--text-primary); }

.landing-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Hero */
.landing-hero {
    padding: 6rem 0 4rem;
    text-align: center;
}

.landing-hero-title {
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
}

.landing-hero-accent {
    color: var(--accent);
}

.landing-hero-subtitle {
    font-size: 1.15rem;
    color: var(--text-secondary);
    max-width: 640px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}

.landing-hero-ctas {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.landing-hero-note {
    margin-top: 1.25rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Sections */
.landing-section {
    padding: 5rem 0;
}

.landing-section-alt {
    background: var(--bg-secondary);
}

.landing-section-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.landing-section-subtitle {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 3rem;
    font-size: 1.05rem;
}

/* Features Grid */
.landing-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.landing-feature-card {
    padding: var(--space-6);
    text-align: left;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.landing-feature-card:hover {
    border-color: var(--border-medium);
    box-shadow: var(--shadow-md);
}
.landing-feature-icon {
    font-size: 2rem;
    margin-bottom: var(--space-4);
    color: var(--accent);
}
.landing-feature-card h3 {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}
.landing-feature-card p {
    font-size: var(--fs-md);
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* Steps */
.landing-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1.5rem;
}

.landing-step {
    text-align: center;
    flex: 1;
    max-width: 280px;
}

.landing-step-number {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.landing-step h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.landing-step p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.landing-step-arrow {
    font-size: 1.5rem;
    color: var(--text-muted);
    margin-top: 0.75rem;
}

/* Stats Grid */
.landing-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
}

/* Pricing Grid */
.landing-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}

.landing-pricing-card {
    padding: 2.5rem 2rem;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
}
.landing-pricing-card ul {
    flex-grow: 1;
}

.landing-pricing-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.landing-pricing-price {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}
.landing-pricing-price span {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-secondary);
}

.landing-pricing-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    text-align: left;
}
.landing-pricing-card li {
    padding: 0.4rem 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-subtle);
}
.landing-pricing-card li::before {
    content: '\2713';
    color: var(--color-success);
    margin-right: 0.5rem;
    font-weight: 700;
}

.landing-pricing-highlight {
    border: 1px solid var(--accent);
    box-shadow: var(--shadow-md);
}

.landing-pricing-badge {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: var(--text-on-accent);
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 0.2rem 0.75rem;
    border-radius: var(--radius-pill);
}

/* Contact Form */
.landing-contact-form {
    max-width: 700px;
    margin: 0 auto;
}

/* Footer */
.landing-footer {
    border-top: 1px solid var(--border-subtle);
    padding: 3rem 0 2rem;
    background: var(--bg-secondary);
}

.landing-footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

.landing-footer-grid h4 {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.landing-footer-grid a {
    display: block;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    padding: 0.2rem 0;
    cursor: pointer;
    transition: color var(--transition-fast);
}
.landing-footer-grid a:hover { color: var(--text-primary); }

.landing-footer-copy {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border-subtle);
    padding-top: 1.5rem;
}

/* ===================== STATUS / ERROR PAGES ===================== */

.status-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 3rem 1.5rem;
}

.status-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--glass-bg);
    border: 2px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 1.5rem;
}

.status-code {
    font-size: 4rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.status-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.status-message {
    font-size: 1rem;
    color: var(--text-secondary);
    max-width: 500px;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.status-request-id {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.status-request-id code {
    background: var(--glass-bg);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

.status-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.status-help {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.status-help a {
    color: var(--accent);
    text-decoration: none;
}

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

/* Responsive */
@media (max-width: 768px) {
    .landing-hero-title { font-size: 2rem; }
    .landing-features-grid { grid-template-columns: 1fr; }
    .landing-steps { flex-direction: column; align-items: center; }
    .landing-step-arrow { transform: rotate(90deg); }
    .landing-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .landing-pricing-grid { grid-template-columns: 1fr; }
    .landing-pricing-highlight { transform: none; }
    .landing-nav { display: none; }
    .landing-footer-grid { grid-template-columns: 1fr; }
}

/* --- Property Path Picker --- */
.pp-picker { position: relative; }
.pp-suggestions {
    position: absolute; z-index: 100; top: 100%; left: 0; right: 0;
    max-height: 240px; overflow-y: auto;
    list-style: none; margin: 2px 0 0; padding: 4px 0;
    background: var(--bg-tertiary); border: 1px solid var(--border-medium);
    border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.pp-suggestions li {
    padding: 7px 12px; cursor: pointer; font-size: 0.82rem;
    display: flex; align-items: center; gap: 8px;
    color: var(--text-primary);
    transition: background var(--transition-fast);
}
.pp-suggestions li:hover { background: var(--bg-surface); }
.pp-suggestions li code {
    font-size: 0.82rem;
    font-family: inherit;
    color: var(--text-primary);
    background: none;
    padding: 0;
    border: none;
}
.pp-sample { font-size: 0.7rem; color: var(--text-muted); margin-left: auto; }

/* ========================================================================
   Utility classes — replace common inline styles
   ======================================================================== */
/* Type scale — use these instead of inline font-size */
.text-3xs { font-size: 0.6875rem; }
.text-2xs { font-size: var(--fs-xs); }
.text-xs  { font-size: var(--fs-xs); }
.text-sm  { font-size: var(--fs-sm); }
.text-md  { font-size: var(--fs-md); }
.text-base { font-size: var(--fs-base); }
.text-lg  { font-size: var(--fs-lg); }
.text-label { font-size: var(--fs-sm); }
/* Bootstrap's .text-secondary is its own grey; ours follows the theme token. */
.text-secondary { color: var(--text-secondary) !important; }
.nowrap { white-space: nowrap; }
/* Card- and row-sized links that should not look like links until hovered. */
.link-plain { text-decoration: none; display: block; }
.ls-wide { letter-spacing: 0.02em; }
.ls-wider { letter-spacing: 0.04em; }
.fw-semibold { font-weight: 600; }
.tabular-nums { font-variant-numeric: tabular-nums; }

/* ── Page header — shared by PageHeader.razor ── */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}
.page-header-main { min-width: 0; }
.page-header-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}
.page-header-subtitle {
    margin: 0.35rem 0 0;
    font-size: var(--fs-md);
    color: var(--text-secondary);
}
.page-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* Compound patterns — common style combos */
.code-block { font-size: var(--fs-sm); line-height: 1.6; overflow-x: auto; }
.blockquote-role { font-style: italic; font-size: var(--fs-base); color: var(--text-secondary); padding-left: 1rem; margin: 0 0 1rem 0; }
.stat-value { font-size: var(--fs-sm); font-weight: 600; }
.stat-pct { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }

/* Empty states: the icon sits in a recessed disc so the block reads as a
   deliberate placeholder rather than a page that failed to load. */
.empty-state {
    text-align: center;
    padding: var(--space-7) var(--space-5);
    max-width: 30rem;
    margin-inline: auto;
}

.empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: var(--space-4);
    border-radius: 50%;
    background: var(--surface-sunken);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
}

.empty-state-title {
    font-size: var(--fs-lg);
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.empty-state-desc {
    color: var(--text-secondary);
    font-size: var(--fs-md);
    margin-bottom: var(--space-5);
}

.dash-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--color-primary); color: var(--text-on-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-xs); font-weight: 700; flex-shrink: 0;
}

.audit-pack-card {
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.audit-pack-card:hover {
    border-color: var(--border-medium);
    box-shadow: var(--shadow-md);
}

.card-header-compact {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}
.card-header-compact strong {
    font-size: var(--fs-md);
}

/* ── Blog (Soro embed) — enforce our theme over their default inline styles.
   Soro injects bare HTML with its own classes and inline styles into #soro-blog.
   Without this block their light-mode defaults render as near-invisible grey on
   our dark background. !important is required because Soro sets inline styles. */
#soro-blog {
    color: var(--text-primary) !important;
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
    line-height: 1.65 !important;
    width: 100% !important;
}
#soro-blog .soro-blog,
#soro-blog .soro-blog * {
    color: inherit;
}
/* Defeat any width / max-width / padding the embed sets on its wrappers so the
   article cards span the same width as the .blog-cta cards above and below. */
#soro-blog .soro-blog,
#soro-blog .soro-blog-list,
#soro-blog .soro-blog-article {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#soro-blog .soro-blog-card { width: 100% !important; box-sizing: border-box !important; }
#soro-blog .soro-blog-card-title,
#soro-blog .soro-blog-article-title,
#soro-blog .soro-blog-content h1,
#soro-blog .soro-blog-content h2,
#soro-blog .soro-blog-content h3,
#soro-blog .soro-blog-content h4 {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}
#soro-blog .soro-blog-content h2 { font-size: 1.4rem !important; margin: 1.8rem 0 .6rem !important; }
#soro-blog .soro-blog-content h3 { font-size: 1.15rem !important; margin: 1.4rem 0 .5rem !important; }
#soro-blog .soro-blog-content p {
    color: var(--text-primary) !important;
    margin: 0 0 1rem !important;
    font-size: 1rem !important;
}
#soro-blog .soro-blog-card-excerpt,
#soro-blog .soro-blog-card-date,
#soro-blog .soro-blog-article-date {
    color: var(--text-muted) !important;
    font-size: .85rem !important;
}
#soro-blog .soro-blog-content a,
#soro-blog .soro-blog-article-title a,
#soro-blog .soro-blog-back {
    color: var(--color-primary) !important;
    text-decoration: none !important;
}
#soro-blog .soro-blog-content a:hover,
#soro-blog .soro-blog-back:hover { text-decoration: underline !important; }
#soro-blog .soro-blog-content code {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
    font-size: .9em !important;
    border: 1px solid var(--border-subtle) !important;
}
#soro-blog .soro-blog-content pre {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    overflow-x: auto !important;
    margin: 1rem 0 !important;
}
#soro-blog .soro-blog-content pre code { background: transparent !important; border: 0 !important; padding: 0 !important; }
#soro-blog .soro-blog-content blockquote {
    border-left: 3px solid var(--color-primary) !important;
    padding: .25rem 0 .25rem 1rem !important;
    margin: 1rem 0 !important;
    color: var(--text-muted) !important;
}
#soro-blog .soro-blog-content ul,
#soro-blog .soro-blog-content ol {
    padding-left: 1.4rem !important;
    margin: .5rem 0 1rem !important;
}
#soro-blog .soro-blog-content li { margin: .25rem 0 !important; color: var(--text-primary) !important; }
#soro-blog .soro-blog-card,
#soro-blog .soro-blog-article {
    /* Match the .blog-cta cards above and below the list — same padding, radius, and
       subtle gradient — so the article list reads as a single visual rhythm. */
    background: linear-gradient(135deg, rgba(56,189,248,.08) 0%, rgba(99,102,241,.08) 100%) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 0.75rem !important;
    padding: 1.5rem 1.75rem !important;
    margin: 0 0 1rem !important;
    transition: border-color .15s, transform .15s !important;
}
#soro-blog .soro-blog-card:hover {
    border-color: var(--color-primary) !important;
    transform: translateY(-1px) !important;
}
#soro-blog .soro-blog-card-image {
    border-radius: 8px !important;
    max-width: 160px !important;
    height: auto !important;
    margin: 0 1.25rem 0 0 !important;
    flex: 0 0 auto !important;
}
/* Hide hero image inside the expanded article — the AI-generated illustration
   doesn't add value once the user is reading and steals real estate from text. */
#soro-blog .soro-blog-article-image { display: none !important; }
#soro-blog .soro-blog-loading,
#soro-blog .soro-blog-empty,
#soro-blog .soro-blog-error { color: var(--text-muted) !important; padding: 2rem 0 !important; }

/* ===================== REDUCED MOTION ===================== */
/* Respect the OS-level "reduce motion" preference: kill page-load slides,
   infinite shimmers, and hover translations across the app. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    main,
    .skeleton-card {
        animation: none !important;
    }
    .rule-highlight {
        animation: none !important;
        background: var(--accent-soft) !important;
    }
    .btn-primary:hover,
    .metric-card:hover,
    .audit-pack-card:hover,
    #soro-blog .soro-blog-card:hover {
        transform: none !important;
    }
}
#soro-blog .soro-blog-spinner { border-top-color: var(--color-primary) !important; }

/* ---- Public policy library (/library) ---- */
.library-page {
    padding: 3rem 0 4rem;
    max-width: 900px;
}

.library-breadcrumb {
    font-size: 0.85rem;
    opacity: 0.75;
    margin-bottom: 1.25rem;
}

.library-breadcrumb a {
    text-decoration: none;
}

.library-header {
    margin-bottom: 2.5rem;
}

.library-header h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.library-page section {
    margin-bottom: 2.5rem;
}

.library-page h2 {
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.library-page h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 1.25rem 0 0.5rem;
}

.library-page pre {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 1rem;
    overflow-x: auto;
    font-size: 0.85rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.library-tile {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color 0.15s ease;
}

.library-tile:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

.library-tile-title {
    font-weight: 600;
    font-size: 1.1rem;
}

.library-tile-meta {
    font-size: 0.82rem;
    opacity: 0.7;
}

.library-framework-list,
.library-rule-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.5rem;
}

.library-framework-list li,
.library-rule-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.library-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.library-badge {
    font-size: 0.78rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.library-badge.severity-critical,
.library-badge.severity-high {
    border-color: rgba(239, 68, 68, 0.55);
}

.library-badge.severity-medium {
    border-color: rgba(245, 158, 11, 0.55);
}

.library-warning {
    border-left: 3px solid rgba(245, 158, 11, 0.7);
    padding-left: 0.85rem;
}

.library-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.75rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
}

.library-cta h2 {
    margin-bottom: 0.35rem;
}

.library-cta p {
    margin: 0;
    opacity: 0.8;
}