/* FAIA_Auth — Design System (Enterprise UX Standards, WCAG 2.2 AA)
   
   Design Tokens following ISO 42001 (AI governance) and WCAG 3.0 outcome-based accessibility
   principles. Supports neurodiversity-friendly patterns and responsive interaction design.
*/

:root {
    /* ── SEMANTIC COLORS (accessible, high contrast) ── */
    --color-primary: #0052a3;           /* Primary action blue (WCAG AAA contrast on white) */
    --color-primary-light: #e8f0ff;     /* Light background */
    --color-primary-dark: #003d7a;      /* Darker for active/focus states */
    
    --color-success: #006622;            /* Success green (4.5:1 contrast) */
    --color-success-light: #e8f5e9;      /* Success background */
    
    --color-warning: #b8860b;            /* Warning amber (not pure yellow - better for color-blind) */
    --color-warning-light: #fff8e1;      /* Warning background */
    
    --color-danger: #d32f2f;             /* Danger red (proper contrast ratio) */
    --color-danger-light: #ffebee;       /* Danger background */
    
    --color-info: #1976d2;               /* Info blue (distinct from primary) */
    --color-info-light: #e3f2fd;         /* Info background */
    
    /* ── NEUTRAL PALETTE ── */
    --color-text: #212121;               /* Primary text (WCAG AAA) */
    --color-text-secondary: #666666;     /* Secondary text (4.5:1 minimum) */
    --color-text-disabled: #999999;      /* Disabled text */
    
    --color-bg: #ffffff;                 /* Main background */
    --color-bg-secondary: #f5f5f5;       /* Secondary background (elevated) */
    --color-bg-tertiary: #eeeeee;        /* Tertiary background (forms) */
    
    --color-border: #d0d0d0;             /* Borders (not pure gray) */
    --color-border-light: #e0e0e0;       /* Light borders */
    
    /* ── FOCUS & INTERACTIVE STATES ── */
    --focus-outline: 3px solid #0052a3;  /* Visible focus indicator (WCAG 2.4.7) */
    --focus-outline-offset: 2px;         /* Space between element and outline */
    
    /* ── SHADOWS (elevation system for clarity) ── */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.12);
    --shadow-lg: 0 8px 16px rgba(0,0,0,0.15);
    --shadow-interactive: 0 2px 8px rgba(0, 82, 163, 0.15);
    
    /* ── TYPOGRAPHY SCALE (rem-based, accessible) ── */
    --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-family-mono: 'Courier New', monospace;
    
    --font-size-xs: 0.75rem;             /* Captions */
    --font-size-sm: 0.875rem;            /* Small text */
    --font-size-base: 1rem;              /* Body text (16px base) */
    --font-size-lg: 1.125rem;            /* Larger body */
    --font-size-xl: 1.25rem;             /* Subheadings */
    --font-size-2xl: 1.5rem;             /* Section headings */
    --font-size-3xl: 1.875rem;           /* Page headings */
    --font-size-4xl: 2.25rem;            /* Hero headings */
    
    --line-height-tight: 1.2;            /* For headings */
    --line-height-normal: 1.5;           /* For body text (dyslexia-friendly) */
    --line-height-relaxed: 1.75;         /* For improved readability */
    
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* ── SPACING SCALE (8px baseline for consistency) ── */
    --space-xs: 0.25rem;    /* 4px - tight spacing */
    --space-sm: 0.5rem;     /* 8px - small spacing */
    --space-md: 1rem;       /* 16px - standard spacing */
    --space-lg: 1.5rem;     /* 24px - large spacing */
    --space-xl: 2rem;       /* 32px - extra large */
    --space-2xl: 3rem;      /* 48px - double extra */
    --space-3xl: 4rem;      /* 64px - triple extra */
    
    /* ── BORDER RADIUS (neurodiversity-friendly: not too rounded) ── */
    --radius-sm: 4px;       /* Subtle rounding */
    --radius-md: 6px;       /* Standard rounding */
    --radius-lg: 8px;       /* Generous rounding */
    --radius-full: 9999px;  /* Fully rounded (pills) */
    
    /* ── TRANSITIONS (respects prefers-reduced-motion) ── */
    --transition-fast: 150ms ease-out;
    --transition-base: 200ms ease-out;
    --transition-slow: 300ms ease-out;
    
    /* ── TOUCH TARGETS (compact enterprise density; still clears WCAG 2.2 AA 24px minimum) ── */
    --touch-target: 2.5rem;  /* 40px at the 16px reference root */
    
    /* ── Z-INDEX SCALE (predictable layering) ── */
    --z-negative: -1;
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 1000;
    --z-tooltip: 1100;
    --z-max: 9999;

    /* ── CONTENT SURFACE REFRESH (v3) ──
       Additive tokens for the content canvas only — the header, top navigation, and
       footer keep their existing hard-coded palette untouched (§ "keep header/footer
       style as is"). These drive cards, buttons, badges, tables, and the sign-in page. */
    --brand-blue: #0052a3;
    --brand-blue-dark: #003d7a;
    --brand-violet: #6d5bd0;
    --brand-violet-dark: #4f3fb0;

    --surface-canvas: #f5f6fb;
    --surface-card: #ffffff;
    --surface-card-border: rgba(15, 23, 42, 0.08);
    --surface-muted: #f8f9fd;

    --content-success: #059669;
    --content-success-bg: #ecfdf5;
    --content-success-border: rgba(5, 150, 105, 0.28);
    --content-warning: #d97706;
    --content-warning-bg: #fffbeb;
    --content-warning-border: rgba(217, 119, 6, 0.28);
    --content-danger: #dc2626;
    --content-danger-bg: #fef2f2;
    --content-danger-border: rgba(220, 38, 38, 0.28);
    --content-info: #2563eb;
    --content-info-bg: #eff6ff;
    --content-info-border: rgba(37, 99, 235, 0.24);

    --content-radius-md: 0.75rem;
    --content-radius-lg: 1rem;
    --content-radius-xl: 1.35rem;

    --content-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
    --content-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.05);
    --content-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.05);
    --content-shadow-lg: 0 20px 45px rgba(23, 33, 82, 0.12);
    --content-shadow-glow: 0 10px 30px rgba(0, 82, 163, 0.18);
}

/* ── FOUNDATIONAL STYLES ── */

*, *::before, *::after { 
    box-sizing: border-box; 
}

html {
    /* Accessibility: allow user to scale text to 200% without horizontal scroll.
       14px keeps the whole rem-based scale (type, spacing, controls) at a denser,
       enterprise-console density; all sizing stays relative so browser zoom and
       OS text-size settings still work identically. */
    font-size: 14px;
    scroll-behavior: smooth;
}

/* Neurodiversity-friendly body: lots of whitespace, readable line length */
body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background: var(--color-bg);
    margin: 0;
}

/* Reduced motion support (WCAG 2.1 Animation from Interactions) */
@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;
    }
}

/* ── TYPOGRAPHY SYSTEM ── */

h1 {
    font-size: 1.75rem;
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-bold);
    margin: var(--space-lg) 0 var(--space-md) 0;
    color: var(--color-text);
}

h2 {
    font-size: 1.5rem;
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-semibold);
    margin: var(--space-lg) 0 var(--space-md) 0;
    color: var(--color-text);
}

h3 {
    font-size: 1.25rem;
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-semibold);
    margin: var(--space-md) 0 var(--space-sm) 0;
}

h4 {
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    margin: var(--space-md) 0 var(--space-sm) 0;
}

p {
    margin: var(--space-md) 0;
    max-width: 65ch;  /* Optimal line length for readability */
}

small {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Dyslexia-friendly link styling: underline + color, not color alone */
a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

a:hover, a:active {
    color: var(--color-primary-dark);
    text-decoration-thickness: 3px;
}

a:visited {
    color: #5a4f9c;  /* Distinct visited color for clarity */
}

/* ── NAVIGATION (WCAG 2.1 target size, keyboard navigation) ── */

nav {
    font-size: var(--font-size-base);
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav li {
    margin-bottom: var(--space-sm);
}

nav a, .nav-link {
    display: block;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    min-height: var(--touch-target);  /* Touch-friendly size */
    display: flex;
    align-items: center;
    transition: all var(--transition-base);
}

nav a:hover, .nav-link:hover {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}

nav a:focus-visible, .nav-link:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
}

nav a.active, .nav-link.active {
    background: var(--color-primary);
    color: white;
    font-weight: var(--font-weight-bold);
}


/* ── BUTTON STYLES (modern, gradient-accented, accessible, touch-friendly) ── */

.btn-primary,
.btn-secondary,
.btn-approve,
.btn-deactivate,
.btn-large {
    padding: var(--space-sm) var(--space-lg);
    border: 1px solid transparent;
    border-radius: var(--content-radius-md);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    min-height: 2.5rem;               /* Touch target minimum */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    line-height: 1;
    transition: transform var(--transition-fast), box-shadow var(--transition-base), background var(--transition-base), border-color var(--transition-base);
    text-decoration: none;
    white-space: nowrap;
}

.btn-primary .icon,
.btn-secondary .icon,
.btn-approve .icon,
.btn-deactivate .icon {
    width: 1rem;
    height: 1rem;
}

.btn-primary {
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-violet) 130%);
    color: white;
    box-shadow: var(--content-shadow-glow);
}

/* A visited <a class="btn-primary"> (e.g. Dashboard's "Review approvals" link) otherwise loses
   to the global `a:visited` rule above: both are 1-class-equivalent specificity, but `a:visited`
   also matches the element selector so it wins the tie, painting the button text a near-invisible
   dark purple against the blue/violet gradient. Pin it to white in every link-state explicitly. */
a.btn-primary,
a.btn-primary:hover,
a.btn-primary:active,
a.btn-primary:visited {
    color: white;
}

.btn-primary:hover {
    box-shadow: 0 14px 32px rgba(0, 82, 163, 0.28);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--content-shadow-xs);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-approve:focus-visible,
.btn-deactivate:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-approve:disabled,
.btn-deactivate:disabled {
    background: var(--color-text-disabled);
    border-color: var(--color-text-disabled);
    color: white;
    cursor: not-allowed;
    opacity: 0.6;
    box-shadow: none;
    transform: none;
}

.btn-secondary {
    background: var(--surface-card);
    color: var(--color-text);
    border-color: var(--surface-card-border);
    box-shadow: var(--content-shadow-xs);
}

.btn-secondary:hover {
    background: var(--surface-muted);
    border-color: var(--brand-blue);
    color: var(--brand-blue);
}

.btn-large {
    padding: var(--space-md) var(--space-xl);
    font-size: var(--font-size-base);
    min-height: var(--touch-target);
}

.btn-approve {
    background: linear-gradient(135deg, var(--content-success) 0%, #10b981 130%);
    color: white;
    margin-right: var(--space-sm);
    box-shadow: 0 8px 20px rgba(5, 150, 105, 0.22);
}

.btn-approve:hover {
    box-shadow: 0 14px 28px rgba(5, 150, 105, 0.3);
    transform: translateY(-1px);
}

.btn-approve:active {
    transform: translateY(0);
}

.btn-deactivate {
    background: var(--surface-card);
    color: var(--content-danger);
    border-color: var(--content-danger-border);
    box-shadow: var(--content-shadow-xs);
}

.btn-deactivate:hover {
    background: var(--content-danger-bg);
    box-shadow: var(--content-shadow-sm);
    transform: translateY(-1px);
}

.btn-deactivate:active {
    transform: translateY(0);
}

/* ── STATUS & STATISTICS ── */

.stat {
    margin: var(--space-md) 0;
}

.stat-value {
    display: block;
    font-size: 2.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--brand-blue);
    line-height: 1;
    margin-bottom: var(--space-sm);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    background: var(--content-success-bg);
    color: var(--content-success);
    border: 1px solid var(--content-success-border);
}

.status-healthy {
    background: var(--content-success-bg);
    color: var(--content-success);
    border-color: var(--content-success-border);
}

.status-warning {
    background: var(--content-warning-bg);
    color: var(--content-warning);
    border-color: var(--content-warning-border);
}

.status-error {
    background: var(--content-danger-bg);
    color: var(--content-danger);
    border-color: var(--content-danger-border);
}

/* ── FORM STYLES (Accessible, WCAG 2.1) ── */

.filter-section {
    padding: var(--space-sm) var(--space-md);
    background: var(--surface-card);
    border-radius: var(--content-radius-lg);
    border: 1px solid var(--surface-card-border);
    box-shadow: var(--content-shadow-xs);
}

/* Compact horizontal toolbar — fields sit inline instead of stacking full-width,
   so a single filter no longer consumes half the viewport height.
   align-items is flex-start (not flex-end): a field's optional helper <small>
   below the input makes that field taller than the button, and flex-end would
   anchor to that extra line — visually dropping the button below the dropdown.
   Starting all items at the top keeps the button's input-height box level with
   the actual select/input regardless of trailing helper text. */
.filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-md) var(--space-lg);
}

/* Invisible spacer matching the label's line so the button (which has no
   label) starts at the same vertical offset as the sibling input/select. */
.filter-label-spacer {
    display: block;
    visibility: hidden;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

.filter-action-field {
    flex: 0 0 auto;
}

.filter-field {
    display: flex;
    flex: 0 1 20rem;
    min-width: 12rem;
    flex-direction: column;
    gap: var(--space-xs);
}

.filter-field label {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

/* Must come after the base .filter-field rule above so it wins the cascade
   (same specificity, later source order) and shrinks the button's wrapper
   back down to its content width instead of the 20rem field basis. */
.filter-field.filter-action-field {
    flex: 0 0 auto;
    min-width: 0;
}

/* Generic inline form row — used by "Add user", "Onboard tenant", "Register
   application/service client" panels so fields sit side by side instead of
   stacking full-width on their own line (matches .filter-row's density). */
.form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-md) var(--space-lg);
}

.form-row + .form-row {
    margin-top: var(--space-md);
}

/* Inside a modal, fields stack vertically (full-width) so labels and inputs
   always align regardless of whether a helper <small> is present. */
.modal-body .form-row {
    flex-direction: column;
    align-items: stretch;
}

.modal-body .form-field {
    flex: none;
    width: 100%;
    min-width: 0;
}

.modal-body .form-field-wide {
    flex-basis: auto;
}

.form-field {
    display: flex;
    flex: 1 1 16rem;
    min-width: 12rem;
    flex-direction: column;
    gap: var(--space-xs);
}

.form-field-wide {
    flex-basis: 100%;
}

.form-field label {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

/* Checkbox field variant — label wraps the checkbox inline instead of stacking above it. */
.form-field-checkbox label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: var(--font-weight-medium);
}

.form-field-checkbox input[type="checkbox"] {
    width: auto;
    min-height: 0;
    flex: none;
}

/* Progressive disclosure for optional/advanced fields (e.g. Graph directory search config) so the
   default onboarding form stays short — fewer visible fields to scan, expand only when needed. */
.form-advanced {
    margin-top: var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--content-radius-md);
    padding: var(--space-sm) var(--space-md);
}

.form-advanced summary {
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    padding: var(--space-xs) 0;
}

.form-advanced[open] summary {
    margin-bottom: var(--space-sm);
}

.form-advanced .form-field + .form-field {
    margin-top: var(--space-md);
}

.form-row-action {
    flex: 0 0 auto;
}

.filter-section input,
.filter-section select,
.form-row input,
.form-row select,
.form-row textarea {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--content-radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
    min-height: var(--touch-target);
    background: var(--surface-muted);
}

.form-row textarea {
    min-height: 5rem;
}

.filter-section input:focus,
.filter-section select:focus,
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    outline: none;
    border-color: var(--brand-blue);
    background: var(--surface-card);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.filter-apply {
    flex: 0 0 auto;
}

/* Role <select> in the Users Management table (Users.razor) — otherwise an unstyled native
   <select> in a table cell renders as plain flat text with no visible border/affordance, so it
   reads as inert display text rather than an interactive control (usability gap, 2026-07-20). */
.role-select {
    width: auto;
    min-width: 9rem;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--content-radius-md);
    background: var(--surface-muted);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    cursor: pointer;
    min-height: 2.25rem;
    transition: border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}

.role-select:hover {
    border-color: var(--brand-blue);
    background: var(--surface-card);
}

.role-select:focus-visible {
    outline: none;
    border-color: var(--brand-blue);
    background: var(--surface-card);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* ── ALERTS & FEEDBACK (Accessible, semantic) ── */

.alert {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--content-radius-lg);
    margin-bottom: var(--space-sm);
    border: 1px solid;
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
    box-shadow: var(--content-shadow-xs);
}

.alert .icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.1rem;
}

.alert-success {
    background: var(--content-success-bg);
    border-color: var(--content-success-border);
    color: var(--content-success);
}

.alert-error,
.error {
    background: var(--content-danger-bg);
    border-color: var(--content-danger-border);
    color: var(--content-danger);
}

.alert-warning {
    background: var(--content-warning-bg);
    border-color: var(--content-warning-border);
    color: var(--content-warning);
}

.alert-info {
    background: var(--content-info-bg);
    border-color: var(--content-info-border);
    color: var(--content-info);
}

.alert strong {
    color: var(--color-text);
}

.feedback {
    padding: var(--space-md);
    background: var(--content-info-bg);
    border-left: 4px solid var(--content-info);
    border-radius: var(--content-radius-md);
    margin-top: var(--space-md);
}

/* ── BADGES (Status indicators) ── */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem var(--space-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border: 1px solid;
    white-space: nowrap;
}

.badge .icon {
    width: 0.85rem;
    height: 0.85rem;
}

.badge-active {
    background: var(--content-success-bg);
    color: var(--content-success);
    border-color: var(--content-success-border);
}

.badge-pendingapproval {
    background: var(--content-warning-bg);
    color: var(--content-warning);
    border-color: var(--content-warning-border);
}

.badge-deactivated {
    background: var(--content-danger-bg);
    color: var(--content-danger);
    border-color: var(--content-danger-border);
}

/* ── TABLES (Accessible, responsive, card-wrapped) ── */

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
    border: 1px solid var(--surface-card-border);
    border-radius: var(--content-radius-lg);
    background: var(--surface-card);
    box-shadow: var(--content-shadow-sm);
    overflow: hidden;
}

th,
td {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    border-bottom: 1px solid var(--surface-card-border);
}

th {
    background: var(--surface-muted);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

tbody tr {
    background: var(--surface-card);
    transition: background var(--transition-fast);
}

tbody tr:last-child td {
    border-bottom: none;
}

tbody tr:hover {
    background: var(--surface-muted);
}

/* ── FOCUS VISIBILITY (WCAG 2.4.7 Visible Focus) ── */

:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
}

/* ── SKIP LINK (WCAG 2.1 Bypass Blocks) ── */

.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: var(--z-max);
}

.skip-link:focus {
    position: fixed;
    top: var(--space-sm);
    left: var(--space-sm);
    width: auto;
    height: auto;
    padding: var(--space-md) var(--space-lg);
    background: var(--color-primary);
    color: white;
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-md);
    text-decoration: none;
    z-index: var(--z-max);
    outline: var(--focus-outline);
}

/* ── SCREEN READER ONLY (WCAG 1.3.1 Info & Relationships) ── */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ── LOADING SKELETON (Progressive enhancement) ── */

.skeleton {
    background: linear-gradient(90deg, var(--color-border) 0%, var(--color-border-light) 50%, var(--color-border) 100%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
    border-radius: var(--radius-md);
    height: 1rem;
}

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

@media (prefers-reduced-motion: reduce) {
    .skeleton {
        animation: none;
        background: var(--color-border);
    }
}

.skeleton-title {
    height: 1.5rem;
    width: 60%;
    margin-bottom: var(--space-md);
}

.skeleton-text {
    height: 1rem;
    width: 100%;
    margin-bottom: var(--space-sm);
}

/* ── RESPONSIVE DESIGN (Mobile-first) ── */

@media (max-width: 768px) {
    .layout {
        flex-direction: column;
    }
    
    .sidebar {
        width: 100%;
        max-height: auto;
        position: static;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding: var(--space-md);
        overflow-y: visible;
    }
    
    .content {
        padding: var(--space-md);
    }
    
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
    
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .features ul {
        grid-template-columns: 1fr;
    }
    
    table {
        font-size: var(--font-size-sm);
    }
    
    th, td {
        padding: var(--space-sm);
    }
    
    .filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-field {
        flex-basis: auto;
    }

    .filter-section input,
    .filter-section select {
        width: 100%;
        max-width: 100%;
    }
}

/* ── UTILITY CLASSES (CSP-safe — replace inline style= attributes) ──
   A strict Content-Security-Policy (default-src 'self', no 'unsafe-inline')
   blocks inline styles. These classes cover every previously-inline pattern
   so components stay markup-only and CSP can be enforced without exceptions. */

/* Text / colour */
.text-secondary { color: var(--color-text-secondary); }
.text-success { color: var(--color-success); }

/* Spacing */
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.mx-xs { margin: 0 var(--space-xs); }

/* Layout helpers */
.overflow-x-auto { overflow-x: auto; }
.table-pagination {
    display: flex;
    justify-content: center;
    min-height: 3.5rem;
    padding: var(--space-md);
}
.actions-cell { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.col-actions { min-width: 150px; }
.link-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-sm); }

/* Skeleton size variants */
.skeleton-line { height: 1rem; }
.skeleton-btn { height: var(--touch-target); }
.skeleton-cta { margin-top: var(--space-md); height: var(--touch-target); border-radius: var(--content-radius-md); }

/* Empty-state panels */
.empty-state {
    padding: var(--space-xl);
    text-align: center;
    background: var(--surface-card);
    border-radius: var(--content-radius-xl);
    border: 1px solid var(--surface-card-border);
    box-shadow: var(--content-shadow-xs);
}
.empty-state .icon {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.6rem;
    margin-bottom: var(--space-sm);
    color: var(--brand-blue);
    background: var(--color-primary-light);
    border-radius: var(--radius-full);
}
.empty-state-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    font-size: 1.5rem;
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-sm);
}

/* Full-viewport centering for the "sign in required" panel (unauthenticated session hitting an
   operations-console route) — mirrors the centered sign-in card rather than pinning to the top-left
   like a normal in-page empty state. */
.auth-required-content {
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-required-panel {
    width: min(100%, 28rem);
}

/* Filter helper text */
.filter-help {
    margin: 0;
    color: var(--color-text-secondary);
    font-weight: normal;
    font-size: var(--font-size-xs);
}

/* Info badge + code chip (audit log) */
.badge-info {
    background: var(--content-info-bg);
    color: var(--content-info);
    border-color: var(--content-info-border);
}
.badge-warn {
    background: var(--content-warning-bg);
    color: var(--color-warning);
    border-color: var(--color-warning-light);
}
.code-chip {
    font-size: var(--font-size-sm);
    background: var(--surface-muted);
    color: var(--color-text);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    border: 1px solid var(--surface-card-border);
}
.strikethrough { text-decoration: line-through; }

/* Dashboard status + info panels */
.status-panel {
    padding: var(--space-md);
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--surface-card) 100%);
    border-radius: var(--content-radius-lg);
    border: 1px solid var(--surface-card-border);
    font-size: var(--font-size-sm);
}
/* ── MODAL DIALOG (accessible overlay) ── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    backdrop-filter: blur(2px);
}

.modal-panel {
    background: var(--surface-card);
    border-radius: var(--content-radius-xl);
    border: 1px solid var(--surface-card-border);
    box-shadow: var(--shadow-lg);
    width: min(100%, 48rem);
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--surface-card-border);
}

.modal-header h2 {
    margin: 0;
    font-size: var(--font-size-xl);
}

.modal-body {
    padding: var(--space-md) var(--space-lg);
    flex: 1;
}

.modal-body > p {
    margin-top: 0;
    max-width: none;
}

.modal-footer {
    padding: var(--space-sm) var(--space-lg);
    border-top: 1px solid var(--surface-card-border);
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
}

.modal-close {
    flex-shrink: 0;
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    color: var(--color-text-secondary);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    font-size: var(--font-size-lg);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch-target);
}

.modal-close:hover {
    background: var(--surface-muted);
    color: var(--color-text);
    border-color: var(--color-border);
}

.modal-close:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
}

/* Lookup preview card inside the Add User modal */
.lookup-preview {
    margin-top: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--surface-muted);
    border: 1px solid var(--surface-card-border);
    border-radius: var(--content-radius-md);
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.lookup-preview-info {
    flex: 1;
}

.lookup-preview-name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.lookup-preview-email {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.lookup-preview-tenant {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-xs);
}

/* Inline email+verify field group */
.input-action-group {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-end;
}

.input-action-group input {
    flex: 1;
}

.btn-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 0 var(--space-md);
    min-height: var(--touch-target);
    border: 1px solid var(--color-border);
    border-radius: var(--content-radius-md);
    background: var(--surface-card);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background var(--transition-base), border-color var(--transition-base);
    white-space: nowrap;
}

.btn-icon:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
}

.btn-icon:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
}

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

/* Panel intro copy should use the panel's actual width instead of the global
   65ch reading-measure cap — inside a wide card that cap forces an unnecessary
   3-4 line wrap with a large empty gutter to the right. Same reasoning applies
   to short 1-2 sentence descriptions under page/section headings. */
.page-heading p,
.panel-heading p {
    max-width: none;
}

.info-grid {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
}

/* Sidebar brand heading (was inline color:white) */
.sidebar header h2 { color: #fff; }

.public-workspace {
    min-height: 0;
    overflow-y: auto;
}

.public-shell {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100vh;
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3.5rem;
    padding: var(--space-sm) var(--space-xl);
    border-bottom: 1px solid #d5dfdc;
    background: #fff;
}

.site-brand {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-sm);
    color: #123047;
    text-decoration: none;
}

.site-brand:hover {
    color: #123047;
    text-decoration: none;
}

.site-brand-name {
    color: #1558a6;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.site-brand-context {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.site-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    min-height: 2.75rem;
    padding: var(--space-xs) var(--space-md);
    border-top: 1px solid #e4e8ed;
    background: #fff;
    color: #9aa3ad;
    font-size: var(--font-size-xs);
}

.site-footer p {
    margin: 0;
}

.amplifai-footer-product {
    color: #9da6b0;
    font-size: 0.65rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0;
}

.amplifai-footer-powered {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.amplifai-footer-powered a {
    color: #284d70;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
}

.amplifai-footer-powered a:hover {
    color: #1558a6;
    text-decoration: underline;
}

.footer-brand-logo {
    display: block;
    height: 24px;
    width: auto;
}

/* The operations shell is a fixed-viewport-height dashboard layout: header + scrollable content +
   footer, with NO page-level scroll intended (only `.operations-content`'s own overflow-y:auto
   scrolls). `.app-shell{overflow:hidden}` alone is not enough — Chromium's actual scrolling element
   is <html>, and a CSS Grid container's "1fr" row can still let its content's scrollable overflow
   propagate to the document's own scrollHeight even through a clipped ancestor, letting the real
   page scroll a second time (visually revealed as blank space below the footer once scrolled). Lock
   the actual root scrolling element too, scoped via :has() so the public sign-in layout (which has
   no `.app-shell` and may legitimately need document-level scroll on very small/zoomed screens) is
   unaffected.
*/
html:has(.app-shell),
body:has(.app-shell) {
    height: 100%;
    overflow: hidden;
}

.app-shell {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100vh;
    overflow: hidden;
    background: var(--surface-canvas);
}

/* Pin explicit rows rather than relying on child order/auto-placement: MainLayout's unauthenticated
   / loading branches omit <SiteHeader> (only 2 children instead of 3), and without an explicit
   grid-row the auto-placement algorithm shifts .operations-content into row 1 (auto, sized to
   content) and SiteFooter into row 2 (1fr, stretching the footer to fill the remaining height) —
   producing a huge, misaligned footer. Pinning rows keeps the header/content/footer slots stable
   regardless of which children are actually rendered.
*/
.app-shell > .site-header {
    grid-row: 1;
}
.app-shell > .operations-content {
    grid-row: 2;
}
.app-shell > .site-footer {
    grid-row: 3;
}

.product-kicker,
.eyebrow {
    margin: 0 0 var(--space-xs);
    color: #49726b;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0;
    text-transform: uppercase;
}

.operations-header {
    flex-wrap: wrap;
    row-gap: var(--space-sm);
}

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--touch-target);
    height: var(--touch-target);
    padding: 0;
    border: 1px solid #d5dfdc;
    border-radius: var(--radius-md);
    background: #fff;
    cursor: pointer;
}

.nav-toggle:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    display: block;
    width: 1.125rem;
    height: 2px;
    background: #123047;
    border-radius: 1px;
}

.nav-toggle-bars {
    position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }

.top-nav {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
}

.top-nav .link-list {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
}

.top-nav li {
    margin-bottom: 0;
}

.top-nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: 2.75rem;
    padding: 0 var(--space-md);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

.nav-icon {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
}

/* ── NAV GROUPS (consolidated menu — collapsible sections, native <details>/<summary>) ── */

.nav-group {
    position: relative;
}

.nav-group-summary {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    min-height: var(--touch-target);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.nav-group-summary::-webkit-details-marker {
    display: none;
}

.nav-group-summary:hover {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}

/* Highlight the parent group summary when one of its children is the active page */
.nav-group details:has(.nav-link.active) > .nav-group-summary {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-weight: var(--font-weight-semibold);
}

.nav-group-summary:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
}

.nav-chevron {
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
    margin-left: auto;
    transition: transform var(--transition-base);
}

.nav-group details[open] > .nav-group-summary .nav-chevron {
    transform: rotate(180deg);
}

.nav-submenu {
    list-style: none;
    margin: 0;
    padding: var(--space-xs) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.nav-submenu .nav-link {
    padding-left: calc(var(--space-md) + 1.1rem);
    font-size: var(--font-size-sm);
}

/* Desktop top-nav: groups render as click-to-open dropdown popovers, not inline blocks. */
.top-nav .nav-group-summary {
    display: inline-flex;
    min-height: 2.75rem;
    padding: 0 var(--space-md);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

.top-nav .nav-submenu {
    position: absolute;
    top: calc(100% + var(--space-xs));
    left: 0;
    min-width: 12rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-xs);
    z-index: var(--z-dropdown);
}

.top-nav .nav-submenu li {
    width: 100%;
}

.top-nav .nav-submenu .nav-link {
    display: flex;
    width: 100%;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    white-space: nowrap;
}

/* ── USER MENU (signed-in identity + sign out — reuses .nav-group/.nav-submenu dropdown) ── */

.user-menu {
    margin-left: auto;
}

.user-menu-summary {
    gap: var(--space-sm);
}

.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0;
}

.user-menu-label {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: left;
}

.user-menu-name {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The user/account menu (SiteHeader.razor) is rendered as a DIRECT SIBLING of `.top-nav`
   (kept always visible in the header, independent of the mobile hamburger toggle) — it is never
   actually nested inside `.top-nav`. The previous `.top-nav .user-menu .nav-submenu` selector
   below therefore never matched, so opening the account menu fell back to the base `.nav-submenu`
   flex/static layout and visually expanded the whole header instead of floating as a dropdown
   (usability bug, 2026-07-20). Scope the popover directly off `.user-menu` — applies at every
   breakpoint, since this menu is a compact avatar trigger regardless of viewport width. */
.user-menu .nav-submenu {
    position: absolute;
    top: calc(100% + var(--space-xs));
    right: 0;
    left: auto;
    min-width: 14rem;
    max-width: calc(100vw - 2 * var(--space-md));
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-xs);
    z-index: var(--z-dropdown);
}

.user-menu-header {
    display: flex;
    flex-direction: column;
    padding: var(--space-xs) var(--space-md);
}

.user-menu-header-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.user-menu-email {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-divider {
    height: 1px;
    margin: var(--space-xs) 0;
    background: var(--color-border);
}

.user-menu-signout {
    width: 100%;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.operations-content {
    width: min(100%, 120rem);
    margin: 0 auto;
    padding: var(--space-md) var(--space-lg);
    min-height: 0;
    overflow-y: auto;
}

/* Pages whose content benefits from the full available width (wide tables, the
   API reference iframe) opt out of the 120rem cap entirely. */
.operations-content:has(.api-docs-page) {
    width: 100%;
}

.operations-footer {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
}

.sign-in-page {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: var(--space-lg);
    background:
        radial-gradient(circle at 15% 15%, rgba(109, 91, 208, 0.16), transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(0, 82, 163, 0.14), transparent 45%),
        var(--surface-canvas);
}

.sign-in-panel {
    width: min(100%, 31rem);
    padding: clamp(2rem, 8vw, 3.5rem);
    border: 1px solid var(--surface-card-border);
    border-radius: var(--content-radius-xl);
    background: var(--surface-card);
    box-shadow: var(--content-shadow-lg);
    text-align: center;
}

.sign-in-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: var(--space-md);
    border-radius: var(--content-radius-lg);
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-violet) 130%);
    color: white;
    box-shadow: var(--content-shadow-glow);
}

.sign-in-mark .icon {
    width: 1.9rem;
    height: 1.9rem;
}

/* Error-state variant of the sign-in mark for /access-denied — warm amber gradient instead of the
   default brand blue/violet, so the icon itself signals "something needs attention" at a glance. */
.sign-in-mark-error {
    background: linear-gradient(135deg, var(--color-warning) 0%, #d9822b 130%);
}

.sign-in-panel .product-kicker {
    text-align: center;
}

.sign-in-panel h1 {
    margin-top: 0;
}

.sign-in-summary {
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
}

.sign-in-button {
    width: 100%;
    margin-top: var(--space-lg);
    min-height: 3rem;
    font-size: var(--font-size-base);
}

.sign-in-note {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.35rem;
    margin-bottom: 0;
    margin-top: var(--space-md);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    text-align: left;
}

.sign-in-note .icon {
    width: 0.95rem;
    height: 0.95rem;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.operations-page {
    display: grid;
    gap: var(--space-md);
    min-width: 0;
}

.page-heading,
.panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-lg);
}

.page-heading h1,
.panel-heading h2 {
    margin-top: 0;
}

.page-heading > div > p:last-child,
.panel-heading p {
    margin-bottom: 0;
}

.page-action {
    flex: 0 0 auto;
}

.overview-metrics {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
}

.metric-card,
.operations-panel,
.approval-workbench {
    border: 1px solid var(--surface-card-border);
    border-radius: var(--content-radius-xl);
    background: var(--surface-card);
    box-shadow: var(--content-shadow-sm);
    transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}

.metric-card {
    padding: var(--space-md);
    position: relative;
    overflow: hidden;
}

.metric-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--brand-blue), var(--brand-violet));
}

.metric-card:hover {
    box-shadow: var(--content-shadow-md);
    transform: translateY(-2px);
}

.metric-card-priority::before {
    background: linear-gradient(180deg, var(--brand-violet), var(--brand-violet-dark));
}

.metric-label,
.metric-detail,
.metric-state,
.metric-value {
    margin: 0;
}

.metric-label {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.metric-value {
    margin-top: var(--space-sm);
    color: var(--brand-blue); /* fallback paint if background-clip:text is unsupported/overridden */
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-violet));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2.5rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

.metric-state {
    margin-top: var(--space-sm);
    color: var(--color-text);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.metric-detail {
    margin-top: var(--space-sm);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.skeleton-metric {
    width: 4rem;
    height: 3rem;
    margin-top: var(--space-md);
}

/* Pending-summary card (single consolidated metric — replaces the old 3-card overview-metrics
   grid + the duplicate giant number that used to also appear in the approval-queue panel below,
   2026-07-20 dashboard usability review). */
.pending-summary-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.pending-summary-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-sm);
    flex: 0 0 auto;
}

.pending-summary-timestamp {
    margin: 0;
    font-size: var(--font-size-xs);
}

.pending-summary-empty {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
    color: var(--color-success);
    font-size: var(--font-size-lg);
}

/* Quick links (platform-snapshot panel) — lets the Overview page act as an actual landing page
   instead of only ever pointing at the approval queue. */
.quick-links {
    list-style: none;
    margin: var(--space-md) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.quick-links a {
    display: block;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

.quick-links a:hover {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}

.operations-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 1fr);
    gap: var(--space-md);
}

.operations-panel,
.approval-workbench {
    padding: var(--space-md);
}

.operations-panel {
    position: relative;
    overflow: hidden;
}

.operations-panel::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--brand-blue), var(--brand-violet));
}

.operations-panel-primary::before {
    background: linear-gradient(180deg, var(--brand-violet), var(--brand-violet-dark));
}

.operations-panel:hover,
.approval-workbench:hover {
    box-shadow: var(--content-shadow-md);
}

.panel-heading h2 {
    font-size: var(--font-size-xl);
}

.queue-summary-loading {
    margin-top: var(--space-lg);
}

/* Windows High Contrast / forced-colors mode overrides authored backgrounds but leaves
   `-webkit-text-fill-color: transparent` untouched, which would otherwise render the pending-count
   headline number completely invisible (same class of bug as the earlier a:visited/btn-primary
   fix, 2026-07-20 dashboard usability review). Force a solid, system-respecting colour instead. */
@media (forced-colors: active) {
    .metric-value {
        background: none;
        -webkit-text-fill-color: currentColor;
        color: CanvasText;
    }
}

.governance-list {
    display: grid;
    gap: var(--space-md);
    margin: var(--space-lg) 0 0;
}

.governance-list div {
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--surface-card-border);
}

.governance-list div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.governance-list dt {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.governance-list dd {
    margin: var(--space-xs) 0 0;
    font-weight: var(--font-weight-semibold);
}

.queue-count {
    flex: 0 0 auto;
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-primary-light);
    border-radius: var(--radius-full);
    background: var(--color-primary-light);
    color: var(--brand-blue-dark);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.approval-workbench {
    padding: 0;
    min-width: 0;
    overflow: hidden;
}

.approval-workbench > .p-lg,
.approval-workbench > .alert,
.approval-workbench > .empty-state {
    margin: var(--space-md);
}

.approval-table {
    margin: 0;
    border: 0;
    border-radius: 0;
}

.approval-table th {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
}

.approval-table tbody tr:hover {
    background: var(--surface-muted);
}

.identity-detail {
    display: block;
    margin-top: var(--space-xs);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.approval-workbench .overflow-x-auto {
    max-width: 100%;
}

.api-docs-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.api-docs-frame {
    flex: 1;
    width: 100%;
    height: calc(100vh - 16rem);
    min-height: 40rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
}

.api-docs-signin {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--surface-card);
    border: 1px solid var(--surface-card-border);
    border-radius: var(--content-radius-xl);
    box-shadow: var(--content-shadow-sm);
}

.api-docs-signin p {
    margin: 0;
    max-width: none;
}

@media (max-width: 768px) {
    .nav-toggle {
        display: inline-flex;
    }

    .top-nav {
        display: none;
        flex-basis: 100%;
        width: 100%;
        padding-top: var(--space-sm);
        border-top: 1px solid #e4e8ec;
    }

    .top-nav-open {
        display: flex;
    }

    .top-nav .link-list {
        flex-direction: column;
        width: 100%;
        gap: var(--space-xs);
    }

    .top-nav .nav-submenu {
        position: static;
        min-width: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: var(--space-xs) 0 0;
    }

    .top-nav .nav-submenu .nav-link {
        padding-left: calc(var(--space-md) + 1.1rem);
    }

    .operations-topbar,
    .site-header,
    .operations-content,
    .site-footer {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

    .operations-content {
        padding-top: var(--space-md);
        padding-bottom: var(--space-md);
    }

    .overview-metrics,
    .operations-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .page-heading,
    .panel-heading {
        flex-direction: column;
    }

    .page-action {
        width: 100%;
    }

    .queue-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .site-brand-context,
    .header-actions {
        display: none;
    }
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.6rem 1.25rem 0.7rem;
    background: #fef3c7;
    color: #7c2d12;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    z-index: var(--z-modal);
}

#blazor-error-ui .reload {
    margin-left: 0.75rem;
    color: inherit;
    text-decoration: underline;
}