/* ═══════════════════════════════════════════════════════════════════════════════
   SIRC+ Design System - Modern, Mobile-First UI/UX
   Safety Incident Reporting System
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES (Design Tokens)
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
    /* ═══════════════════════════════════════════════════════════
       PRIMARY BRAND COLORS - SIRC+ Teal
       Deep teal for trust, professionalism, and safety focus
       ═══════════════════════════════════════════════════════════ */
    --primary-50: #E6F3F4;
    --primary-100: #B3DDE0;
    --primary-200: #80C7CC;
    --primary-300: #4DB1B8;
    --primary-400: #269BA4;
    --primary-500: #0D7377;  /* Main brand color - Teal */
    --primary-600: #0A5B5E;
    --primary-700: #084346;
    --primary-800: #052B2E;
    --primary-900: #031416;

    /* ═══════════════════════════════════════════════════════════
       ACCENT COLORS - SIRC+ Brown/Orange
       Warm accent for highlights, CTAs, and warnings
       ═══════════════════════════════════════════════════════════ */
    --accent-50: #FDF5EB;
    --accent-100: #FAE6CC;
    --accent-200: #F5CCA3;
    --accent-300: #F0B27A;
    --accent-400: #EB9851;
    --accent-500: #D4872A;  /* Main accent - Brown/Orange */
    --accent-600: #B8741F;
    --accent-700: #8C5818;
    --accent-800: #603D11;
    --accent-900: #34210A;

    /* ═══════════════════════════════════════════════════════════
       NEUTRAL COLORS
       Warm grays for a softer, more approachable feel
       ═══════════════════════════════════════════════════════════ */
    --neutral-0: #FFFFFF;
    --neutral-50: #FAFAFA;
    --neutral-100: #F5F5F5;
    --neutral-200: #E5E5E5;
    --neutral-300: #D4D4D4;
    --neutral-400: #A3A3A3;
    --neutral-500: #737373;
    --neutral-600: #525252;
    --neutral-700: #404040;
    --neutral-800: #262626;
    --neutral-900: #171717;

    /* ═══════════════════════════════════════════════════════════
       SEMANTIC COLORS
       Clear, intuitive feedback colors
       ═══════════════════════════════════════════════════════════ */
    --success-light: #D1FAE5;
    --success-main: #10B981;
    --success-dark: #059669;

    --warning-light: #FEF3C7;
    --warning-main: #F59E0B;
    --warning-dark: #D97706;

    --error-light: #FEE2E2;
    --error-main: #EF4444;
    --error-dark: #DC2626;

    --info-light: #DBEAFE;
    --info-main: #3B82F6;
    --info-dark: #2563EB;

    /* ═══════════════════════════════════════════════════════════
       SURFACE & BACKGROUND
       Layered surfaces for depth and hierarchy
       ═══════════════════════════════════════════════════════════ */
    --surface-ground: #FAFAFA;
    --surface-card: #FFFFFF;
    --surface-overlay: #FFFFFF;
    --surface-elevated: #FFFFFF;
    --surface-subtle: #F0F9FA;
    --surface-hover: #F5FAFA;
    --border-subtle: #EEF1F1;

    /* ═══════════════════════════════════════════════════════════
       SHADOWS
       Tinted, layered shadows for warmth and cohesion
       ═══════════════════════════════════════════════════════════ */
    --shadow-xs: 0 1px 2px 0 rgb(13 115 119 / 0.04);
    --shadow-sm: 0 1px 3px 0 rgb(13 115 119 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06);
    --shadow-md: 0 4px 6px -1px rgb(13 115 119 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    --shadow-lg: 0 10px 15px -3px rgb(13 115 119 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);
    --shadow-xl: 0 20px 25px -5px rgb(13 115 119 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.06);
    --shadow-glow: 0 0 20px rgb(13 115 119 / 0.15);
    --shadow-colored: 0 4px 14px -2px rgb(13 115 119 / 0.2);
    --shadow-inner-glow: inset 0 1px 0 rgb(255 255 255 / 0.8);

    /* ═══════════════════════════════════════════════════════════
       BORDER RADIUS
       Consistent rounded corners for modern feel
       ═══════════════════════════════════════════════════════════ */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* ═══════════════════════════════════════════════════════════
       SPACING SCALE
       Consistent 4px base unit
       ═══════════════════════════════════════════════════════════ */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* ═══════════════════════════════════════════════════════════
       TYPOGRAPHY
       Modern, readable font stack
       ═══════════════════════════════════════════════════════════ */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;

    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* ═══════════════════════════════════════════════════════════
       TRANSITIONS
       Smooth, consistent animations
       ═══════════════════════════════════════════════════════════ */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    --transition-slower: 500ms ease;

    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

    /* ═══════════════════════════════════════════════════════════
       GRADIENT TOKENS
       Reusable gradient definitions
       ═══════════════════════════════════════════════════════════ */
    --gradient-primary: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
    --gradient-primary-soft: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
    --gradient-accent: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-600) 100%);
    --gradient-hero: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 50%, var(--neutral-800) 100%);
    --gradient-success: linear-gradient(135deg, var(--success-main) 0%, var(--success-dark) 100%);
    --gradient-danger: linear-gradient(135deg, var(--error-main) 0%, var(--error-dark) 100%);
    --gradient-warning: linear-gradient(135deg, var(--warning-main) 0%, var(--warning-dark) 100%);
    --gradient-info: linear-gradient(135deg, var(--info-main) 0%, var(--info-dark) 100%);

    /* ═══════════════════════════════════════════════════════════
       RADZEN THEME OVERRIDES
       ═══════════════════════════════════════════════════════════ */
    --rz-primary: var(--primary-500);
    --rz-primary-light: var(--primary-100);
    --rz-primary-lighter: var(--primary-50);
    --rz-primary-dark: var(--primary-700);
    --rz-primary-darker: var(--primary-800);

    --rz-secondary: var(--neutral-600);
    --rz-secondary-light: var(--neutral-200);
    --rz-secondary-lighter: var(--neutral-100);

    --rz-success: var(--success-main);
    --rz-success-light: var(--success-light);
    --rz-success-lighter: #D1FAE5;

    --rz-danger: var(--error-main);
    --rz-danger-light: var(--error-light);
    --rz-danger-lighter: #FECACA;

    --rz-warning: var(--warning-main);
    --rz-warning-light: var(--warning-light);
    --rz-warning-lighter: #FED7AA;

    --rz-info: var(--info-main);
    --rz-info-light: var(--info-light);
    --rz-info-lighter: #BFDBFE;

    --rz-text-color: var(--neutral-800);
    --rz-text-secondary-color: var(--neutral-500);
    --rz-text-disabled-color: var(--neutral-400);

    --rz-base-background-color: var(--surface-ground);
    --rz-base-border-color: var(--neutral-200);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BASE STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */

html, body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--neutral-800);
    background-color: var(--surface-ground);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* {
    box-sizing: border-box;
}

a, .btn-link {
    color: var(--primary-600);
    text-decoration: none;
    transition: color var(--transition-fast);
    background-image: linear-gradient(var(--primary-500), var(--primary-500));
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease, color var(--transition-fast);
}

a:hover, .btn-link:hover {
    color: var(--primary-700);
    background-size: 100% 1px;
}

/* Disable underline on nav links and buttons */
nav a, .sirc-edge-rail a, .sirc-bottom-nav a, .sirc-command-bar a:not(.sirc-command-bar__logo),
.rz-button, .sirc-btn, .sirc-hub-card {
    background-image: none !important;
}

h1:focus {
    outline: none;
}

/* Form validation states */
.valid.modified:not([type=checkbox]) {
    outline: 2px solid var(--success-main);
    outline-offset: -2px;
}

.invalid {
    outline: 2px solid var(--error-main);
    outline-offset: -2px;
}

.validation-message {
    color: var(--error-main);
    font-size: var(--text-sm);
    margin-top: var(--space-1);
}

/* Blazor error boundary */
.blazor-error-boundary {
    background: var(--error-main);
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-12);
    color: white;
    border-radius: var(--radius-md);
    margin: var(--space-4);
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY CLASSES
   ═══════════════════════════════════════════════════════════════════════════════ */

.text-display {
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: var(--font-bold);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--neutral-900);
}

.text-h1 {
    font-size: clamp(1.875rem, 4vw, 2.25rem);
    font-weight: var(--font-bold);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--neutral-900);
}

.text-h2 {
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    font-weight: var(--font-semibold);
    line-height: 1.3;
    color: var(--neutral-800);
}

.text-h3 {
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    font-weight: var(--font-semibold);
    line-height: 1.4;
    color: var(--neutral-800);
}

.text-body-lg {
    font-size: var(--text-lg);
    font-weight: var(--font-normal);
    line-height: 1.6;
}

.text-body {
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: 1.5;
}

.text-body-sm {
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    line-height: 1.5;
}

.text-caption {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: var(--neutral-500);
}

.text-overline {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    line-height: 1.4;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--neutral-500);
}

.text-numeric {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CARD COMPONENT
   Modern card with subtle depth and hover interaction
   ═══════════════════════════════════════════════════════════════════════════════ */

.sirc-card {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-subtle);
    padding: var(--space-5);

    /* Named properties, not "all". A card sits inside a virtualised grid and watching
       every animatable property for a hover lift is a real source of jank. */
    transition: box-shadow var(--transition-base),
                border-color var(--transition-base),
                transform var(--transition-base);
}

.sirc-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-100);
    transform: translateY(-2px);
}

.sirc-card--interactive {
    cursor: pointer;
    transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.sirc-card--interactive:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-200);
}

.sirc-card--interactive:active {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.sirc-card--accent {
    border-left: 4px solid var(--primary-500);
}

.sirc-card--glass {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.sirc-card--flush {
    padding: 0;
}

.sirc-card--elevated {
    box-shadow: var(--shadow-md);
    border-color: transparent;
}

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

.sirc-card--gradient-border {
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--primary-500), var(--accent-500)) 1;
    border-image-slice: 1 1 0 1;
}

.sirc-card__divider {
    height: 1px;
    background: var(--neutral-100);
    margin: var(--space-4) calc(-1 * var(--space-5));
}

/* Radzen Card Override */
.rz-card {
    background: var(--surface-card) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid var(--border-subtle) !important;
    transition: box-shadow var(--transition-base), border-color var(--transition-base) !important;
}

.rz-card:hover {
    box-shadow: var(--shadow-lg) !important;
    border-color: var(--primary-100) !important;
    transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BUTTON COMPONENTS
   Touch-friendly, clear visual hierarchy
   ═══════════════════════════════════════════════════════════════════════════════ */

.sirc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-sans);
    font-weight: var(--font-medium);
    font-size: var(--text-sm);
    line-height: 1;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
    min-height: 44px;
    min-width: 44px;
}

.sirc-btn--primary {
    background: var(--gradient-primary-soft);
    color: white;
    box-shadow: var(--shadow-sm), 0 2px 8px rgb(13 115 119 / 0.18);
}

.sirc-btn--primary:hover {
    background: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-500) 100%);
    box-shadow: var(--shadow-md), 0 4px 12px rgb(13 115 119 / 0.22);
    transform: translateY(-1px);
}

.sirc-btn--primary:active {
    transform: scale(0.97);
    box-shadow: var(--shadow-xs);
}

.sirc-btn--ghost {
    background: transparent;
    color: var(--neutral-600);
    border: 1px solid transparent;
}

.sirc-btn--ghost:hover {
    background: var(--surface-hover);
    border-color: var(--neutral-200);
    color: var(--primary-600);
}

.sirc-btn--ghost:active {
    transform: scale(0.97);
}

.sirc-btn--loading {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}

.sirc-btn--loading::after {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-left: var(--space-2);
}

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

.sirc-btn-group > .sirc-btn,
.sirc-btn-group > .rz-button {
    border-radius: 0 !important;
}

.sirc-btn-group > :first-child {
    border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
}

.sirc-btn-group > :last-child {
    border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
}

/* Radzen Button Overrides */
.rz-button {
    border-radius: var(--radius-md) !important;
    font-weight: var(--font-medium) !important;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast) !important;
    min-height: 44px !important;
}

.rz-button:active:not(:disabled) {
    transform: scale(0.97) !important;
}

.rz-button.rz-variant-filled.rz-primary {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%) !important;
    box-shadow: 0 2px 4px rgba(13, 115, 119, 0.2), 0 4px 12px rgba(13, 115, 119, 0.15) !important;
    color: white !important;
}

.rz-button.rz-variant-filled.rz-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-500) 100%) !important;
    box-shadow: 0 4px 8px rgba(13, 115, 119, 0.25), 0 8px 20px rgba(13, 115, 119, 0.18) !important;
    transform: translateY(-2px);
}

.rz-button.rz-variant-filled.rz-success {
    background: var(--gradient-success) !important;
    box-shadow: var(--shadow-sm), 0 2px 8px rgb(16 185 129 / 0.18) !important;
}

.rz-button.rz-variant-filled.rz-danger {
    background: var(--gradient-danger) !important;
    box-shadow: var(--shadow-sm), 0 2px 8px rgb(239 68 68 / 0.18) !important;
}

.rz-button.rz-variant-filled.rz-warning {
    background: var(--gradient-warning) !important;
    box-shadow: var(--shadow-sm), 0 2px 8px rgb(245 158 11 / 0.18) !important;
}

.rz-button.rz-variant-filled.rz-info {
    background: var(--gradient-info) !important;
    box-shadow: var(--shadow-sm), 0 2px 8px rgb(59 130 246 / 0.18) !important;
}

.rz-button.rz-variant-light {
    background: var(--neutral-100) !important;
    color: var(--neutral-700) !important;
}

.rz-button.rz-variant-light:hover:not(:disabled) {
    background: var(--neutral-200) !important;
}

/* Icon button consistency */
.rz-button.rz-button-icon-only {
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: var(--radius-lg) !important;
}

/* FAB - Floating Action Button */
.sirc-fab {
    position: fixed;
    bottom: calc(var(--space-6) + 56px);
    right: var(--space-4);
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
    color: white;
    box-shadow: var(--shadow-lg);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.sirc-fab:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-xl);
}

@media (min-width: 768px) {
    .sirc-fab {
        bottom: var(--space-8);
        right: var(--space-8);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FORM INPUT COMPONENTS
   Clean, accessible form controls
   ═══════════════════════════════════════════════════════════════════════════════ */

.sirc-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.sirc-form-label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--neutral-700);
}

.sirc-form-input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--neutral-900);
    background: var(--neutral-0);
    border: 2px solid var(--neutral-200);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
    min-height: 48px;
}

.sirc-form-input:hover {
    border-color: var(--neutral-300);
}

.sirc-form-input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.sirc-form-input::placeholder {
    color: var(--neutral-400);
}

/* Radzen Form Field Overrides */
.rz-form-field {
    margin-bottom: var(--space-4);
}

.rz-textbox, .rz-dropdown, .rz-numeric, .rz-datepicker, .rz-textarea {
    border-radius: var(--radius-md) !important;
    border: 1.5px solid var(--neutral-200) !important;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast) !important;
    min-height: 48px !important;
    background: var(--surface-card) !important;
}

.rz-textbox:hover, .rz-dropdown:hover, .rz-numeric:hover {
    border-color: var(--neutral-300) !important;
}

.rz-textbox:focus, .rz-dropdown:focus, .rz-numeric:focus,
.rz-state-focused .rz-textbox, .rz-state-focused .rz-dropdown {
    border-color: var(--primary-500) !important;
    box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    background: rgba(240, 249, 250, 0.5) !important;
}

/* Error state */
.rz-form-field.rz-state-invalid .rz-textbox,
.rz-form-field.rz-state-invalid .rz-dropdown {
    border-color: var(--error-main) !important;
    animation: fieldShake 0.4s ease;
}

.rz-form-field.rz-state-invalid .rz-textbox:focus {
    box-shadow: 0 0 0 3px rgb(239 68 68 / 0.1) !important;
}

@keyframes fieldShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    50% { transform: translateX(4px); }
    75% { transform: translateX(-2px); }
}

/* Dropdown panel animation */
.rz-dropdown-panel {
    animation: dropdownSlideIn 0.2s var(--ease-out-expo) !important;
}

@keyframes dropdownSlideIn {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Form section grouping */
.sirc-form-section {
    border-left: 3px solid var(--primary-200);
    padding-left: var(--space-5);
    margin-bottom: var(--space-6);
}

.sirc-form-section__title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--primary-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-4);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DATA TABLE COMPONENT
   Clean, scannable data presentation
   ═══════════════════════════════════════════════════════════════════════════════ */

.rz-datatable {
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid var(--border-subtle) !important;
}

.rz-datatable-thead {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
}

/* Table header. Declared once, here. A second rule further down the file used to
   overwrite every declaration in this one, so the teal gradient written here never
   reached the screen and the light treatment won by cascade position alone. The light
   one is what people have actually been looking at, and it is the better of the two,
   so it is now the only one. */
.rz-datatable-thead th {
    padding: var(--space-3) var(--space-4) !important;
    font-size: var(--text-xs) !important;
    font-weight: var(--font-semibold) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--neutral-600) !important;
    background: var(--neutral-50) !important;
    border-bottom: 1px solid var(--neutral-200) !important;
    transition: color var(--transition-fast), background var(--transition-fast) !important;
}

.rz-datatable-data td {
    padding: var(--space-3) var(--space-4) !important;
    border-bottom: 1px solid var(--neutral-100) !important;
    vertical-align: middle !important;
    transition: background var(--transition-fast), border-color var(--transition-fast) !important;
}

.rz-datatable-data tr:nth-child(even) td {
    background: rgba(13, 115, 119, 0.02) !important;
}

.rz-datatable-data tr:hover td {
    background: rgba(13, 115, 119, 0.06) !important;
}

.rz-datatable-data tr:hover td:first-child {
    box-shadow: inset 4px 0 0 var(--primary-500);
}

/* Selected row */
.rz-datatable-data tr.rz-state-highlight td {
    background: var(--primary-50) !important;
}

.rz-datatable-data tr.rz-state-highlight td:first-child {
    box-shadow: inset 3px 0 0 var(--primary-500) !important;
}

/* Sortable column hover */
/* This was white-on-teal, written for the header rule above that never applied - so on
   the light header it rendered white text on near-white, and the column you were about
   to sort by was the one you could not read. */
.rz-datatable-thead th.rz-sortable:hover {
    color: var(--primary-700) !important;
    background: var(--primary-50) !important;
    cursor: pointer;
}

/* Compact density variant */
.rz-datatable--compact .rz-datatable-data td {
    padding: var(--space-2) var(--space-3) !important;
    font-size: var(--text-sm) !important;
}

.rz-datatable--compact .rz-datatable-thead th {
    padding: var(--space-2) var(--space-3) !important;
}

/* Overdue row - gradient left border with subtle background */
.rz-datatable .overdue-row td {
    background-color: rgba(239, 68, 68, 0.03) !important;
    transition: background-color 0.2s ease;
}

.rz-datatable .overdue-row:hover td {
    background-color: rgba(239, 68, 68, 0.06) !important;
}

.rz-datatable .overdue-row td:first-child {
    box-shadow: inset 4px 0 0 var(--error-main) !important;
}

/* Mobile: Card-based layout for responsive tables */
@media (max-width: 767px) {
    .sirc-table-responsive thead {
        display: none;
    }

    .sirc-table-responsive tr {
        display: block;
        background: var(--surface-card);
        border-radius: var(--radius-lg);
        margin-bottom: var(--space-3);
        padding: var(--space-4);
        box-shadow: var(--shadow-sm);
    }

    .sirc-table-responsive td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--space-2) 0;
        border-bottom: 1px solid var(--neutral-100);
    }

    .sirc-table-responsive td:last-child {
        border-bottom: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   STAT CARD COMPONENT
   Key metrics display
   ═══════════════════════════════════════════════════════════════════════════════ */

.sirc-stat-card {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--neutral-100);
    transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

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

.sirc-stat-card--accent {
    border-left: 4px solid var(--primary-500);
}

.sirc-stat-card__label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--neutral-500);
    margin-bottom: var(--space-1);
}

.sirc-stat-card__value {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--neutral-900);
    font-variant-numeric: tabular-nums;
}

.sirc-stat-card__change {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-top: var(--space-2);
}

.sirc-stat-card__change--positive {
    color: var(--success-main);
}

.sirc-stat-card__change--negative {
    color: var(--error-main);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DIALOG/MODAL COMPONENT
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Dialog backdrop */
.rz-dialog-mask {
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

.rz-dialog-wrapper {
    animation: dialogEnter 0.25s var(--ease-out-expo) both !important;
}

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

.rz-dialog {
    border-radius: var(--radius-xl) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.03) !important;
    border: none !important;
    overflow: hidden !important;
}

.rz-dialog-titlebar {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%) !important;
    padding: var(--space-5) var(--space-6) !important;
    border-bottom: none !important;
    position: relative;
    overflow: hidden;
}

.rz-dialog-titlebar::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

.rz-dialog-titlebar .rz-dialog-title {
    color: white !important;
    font-weight: var(--font-semibold) !important;
    font-size: var(--text-lg) !important;
}

.rz-dialog-titlebar .rz-dialog-close {
    color: white !important;
    opacity: 0.8;
    border-radius: var(--radius-full) !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast) !important;
}

.rz-dialog-titlebar .rz-dialog-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.15) !important;
}

.rz-dialog-content {
    padding: var(--space-6) !important;
    background: var(--surface-card) !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
}

/* Danger dialog variant */
.rz-dialog--danger .rz-dialog-titlebar {
    background: var(--gradient-danger) !important;
}

/* Dialog action bar */
.sirc-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding-top: var(--space-5);
    margin-top: var(--space-5);
    border-top: 1px solid var(--neutral-100);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BADGE COMPONENT
   ═══════════════════════════════════════════════════════════════════════════════ */

.rz-badge {
    border-radius: var(--radius-full) !important;
    padding: var(--space-1) var(--space-3) !important;
    font-size: var(--text-xs) !important;
    font-weight: var(--font-semibold) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    line-height: 1.4 !important;
}

.rz-badge.rz-success {
    background: var(--success-light) !important;
    color: var(--success-dark) !important;
}

.rz-badge.rz-warning {
    background: var(--warning-light) !important;
    color: var(--warning-dark) !important;
}

.rz-badge.rz-danger {
    background: var(--error-light) !important;
    color: var(--error-dark) !important;
}

.rz-badge.rz-info {
    background: var(--info-light) !important;
    color: var(--info-dark) !important;
}

.rz-badge.rz-light {
    background: var(--neutral-100) !important;
    color: var(--neutral-600) !important;
}

/* Animated badge for real-time counts */
.sirc-badge--pulse {
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Role badges */
.sirc-badge-superadmin {
    background: #EDE9FE !important;
    color: #6D28D9 !important;
}

.sirc-badge-unitadmin {
    background: #E0E7FF !important;
    color: #4338CA !important;
}

.sirc-badge-closer {
    background: var(--primary-50) !important;
    color: var(--primary-700) !important;
}

.sirc-badge-user {
    background: var(--neutral-100) !important;
    color: var(--neutral-600) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ALERT COMPONENT
   ═══════════════════════════════════════════════════════════════════════════════ */

.rz-alert {
    border-radius: var(--radius-lg) !important;
    padding: var(--space-4) !important;
    border: none !important;
}

.rz-alert.rz-success {
    background: var(--success-light) !important;
    color: var(--success-dark) !important;
}

.rz-alert.rz-warning {
    background: var(--warning-light) !important;
    color: var(--warning-dark) !important;
}

.rz-alert.rz-danger {
    background: var(--error-light) !important;
    color: var(--error-dark) !important;
}

.rz-alert.rz-info {
    background: var(--info-light) !important;
    color: var(--info-dark) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   NAVIGATION COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Desktop Sidebar */
.rz-sidebar {
    background: var(--surface-card) !important;
    border-right: 1px solid var(--neutral-200) !important;
    box-shadow: var(--shadow-sm) !important;
}

.rz-panel-menu .rz-navigation-item-link {
    padding: var(--space-3) var(--space-4) !important;
    margin: var(--space-1) var(--space-2) !important;
    border-radius: var(--radius-md) !important;
    color: var(--neutral-600) !important;
    font-weight: var(--font-medium) !important;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast) !important;
}

.rz-panel-menu .rz-navigation-item-link:hover {
    background: var(--neutral-100) !important;
    color: var(--neutral-900) !important;
}

.rz-panel-menu .rz-navigation-item-link.active,
.rz-panel-menu .rz-navigation-item-link.rz-state-active {
    background: var(--primary-50) !important;
    color: var(--primary-700) !important;
}

.rz-panel-menu .rz-navigation-item-link.active:hover,
.rz-panel-menu .rz-navigation-item-link.rz-state-active:hover {
    background: var(--primary-100) !important;
}

/* Header */
.rz-header {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%) !important;
    box-shadow: var(--shadow-md) !important;
    min-height: 64px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FLOATING NAVIGATION LAYOUT
   Modern, unique navigation with glass-morphism effects
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Main Layout Container */
.sirc-floating-layout {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    background: linear-gradient(180deg, #EDF7F8 0%, #F5F7F8 30%, var(--neutral-100) 100%);
    position: relative;
    overflow: hidden;
}

/* Subtle background pattern with dot grid */
.sirc-floating-layout::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(13, 115, 119, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(212, 135, 42, 0.04) 0%, transparent 50%),
        radial-gradient(circle, rgba(13, 115, 119, 0.04) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 24px 24px;
    pointer-events: none;
    z-index: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FLOATING COMMAND BAR
   Glass-morphism top bar with search and quick actions
   ═══════════════════════════════════════════════════════════════════════════════ */

.sirc-command-bar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-6);
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border-bottom: 1px solid var(--neutral-200);
    box-shadow: 0 1px 3px rgba(13, 115, 119, 0.06), 0 4px 12px rgba(0, 0, 0, 0.03);
    z-index: 100;
    position: sticky;
    top: 0;
}

/* Gradient accent line at top of command bar */
.sirc-command-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-500) 0%, var(--primary-400) 25%, var(--accent-500) 50%, var(--primary-400) 75%, var(--primary-500) 100%);
    background-size: 200% 100%;
    pointer-events: none;
}

@keyframes commandBarGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.sirc-command-bar__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    position: relative;
    z-index: 1;
}

.sirc-command-bar__logo {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;
    font-size: 1.25rem;
    box-shadow: var(--shadow-md), 0 0 20px rgba(13, 115, 119, 0.2);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.sirc-command-bar__logo .rzi,
.sirc-command-bar__logo i {
    color: white !important;
}

.sirc-command-bar__logo:hover {
    color: white !important;
    transform: scale(1.05);
    box-shadow: var(--shadow-lg), 0 0 30px rgba(13, 115, 119, 0.3);
}

.sirc-command-bar__title {
    display: flex;
    flex-direction: column;
}

.sirc-command-bar__title-main {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--neutral-800);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.sirc-command-bar__title-sub {
    font-size: var(--text-xs);
    color: var(--neutral-500);
    font-weight: var(--font-medium);
}

.sirc-command-bar__center {
    flex: 1;
    display: flex;
    justify-content: center;
    max-width: 500px;
    margin: 0 var(--space-8);
}

.sirc-command-bar__search {
    width: 100%;
    position: relative;
}

.sirc-command-bar__search-input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    padding-left: var(--space-10);
    border-radius: var(--radius-full);
    border: 1.5px solid var(--neutral-200);
    background: rgba(240, 249, 250, 0.6);
    font-size: var(--text-sm);
    color: var(--neutral-800);
    transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
    outline: none;
}

.sirc-command-bar__search-input:focus {
    border-color: var(--primary-400);
    box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.12), inset 0 1px 2px rgba(0, 0, 0, 0.03);
    background: white;
    border-radius: var(--radius-xl);
}

.sirc-command-bar__search-input::placeholder {
    color: var(--neutral-400);
}

.sirc-command-bar__search-icon {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--neutral-400);
    font-size: 1.1rem;
    pointer-events: none;
}

.sirc-command-bar__search-kbd {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    padding: 2px 8px;
    font-size: 0.65rem;
    font-family: inherit;
    font-weight: 600;
    color: var(--neutral-400);
    background: var(--neutral-100);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    pointer-events: none;
    letter-spacing: 0.03em;
    transition: opacity var(--transition-base);
}

.sirc-command-bar__search-input:focus ~ .sirc-command-bar__search-kbd {
    opacity: 0;
}

.sirc-command-bar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.sirc-command-bar__action-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    border: none;
    background: transparent;
    color: var(--neutral-600);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
    position: relative;
}

.sirc-command-bar__action-btn:hover {
    background: var(--neutral-100);
    color: var(--primary-600);
}

.sirc-command-bar__action-btn--primary {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
    color: white;
    box-shadow: var(--shadow-sm);
}

.sirc-command-bar__action-btn--primary:hover {
    background: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-500) 100%);
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.sirc-command-bar__user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.sirc-command-bar__user:hover {
    background: var(--neutral-100);
}

.sirc-command-bar__user-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--accent-400) 0%, var(--accent-600) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: outline-color var(--transition-fast);
}

.sirc-command-bar__user:hover .sirc-command-bar__user-avatar {
    outline-color: var(--accent-300);
}

.sirc-command-bar__user-info {
    display: flex;
    flex-direction: column;
}

.sirc-command-bar__user-name {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--neutral-800);
    line-height: 1.2;
}

.sirc-command-bar__user-role {
    font-size: var(--text-xs);
    color: var(--neutral-500);
}

/* User Dropdown Menu */
.sirc-user-menu {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    min-width: 240px;
    background: var(--neutral-0);
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    border: none;
    padding: var(--space-2);
    z-index: 1000;
    animation: userMenuSlideIn 0.2s var(--ease-smooth);
    transform-origin: top right;
}

@keyframes userMenuSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.sirc-user-menu__profile-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3);
}

.sirc-user-menu__profile-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

.sirc-user-menu__profile-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sirc-user-menu__profile-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--neutral-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sirc-user-menu__profile-role {
    font-size: 0.75rem;
    color: var(--neutral-500);
    font-weight: 500;
}

.sirc-user-menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    color: var(--neutral-700);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.sirc-user-menu__item:hover {
    background: var(--neutral-100);
    color: var(--neutral-900);
}

.sirc-user-menu__item--danger {
    color: var(--error-main);
}

.sirc-user-menu__item--danger:hover {
    background: var(--error-light);
    color: var(--error-dark);
}

.sirc-user-menu__divider {
    height: 1px;
    background: var(--neutral-100);
    margin: var(--space-1) var(--space-2);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   EDGE RAIL NAVIGATION
   Slim icon-based navigation that expands on hover
   ═══════════════════════════════════════════════════════════════════════════════ */

.sirc-edge-rail {
    width: 72px;
    background: linear-gradient(180deg, rgba(240, 249, 250, 0.95) 0%, rgba(255, 255, 255, 0.90) 50%, rgba(240, 249, 250, 0.95) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(13, 115, 119, 0.06);
    display: flex;
    flex-direction: column;
    padding: var(--space-4) var(--space-2);
    gap: var(--space-2);
    transition: width var(--transition-slow) var(--ease-smooth);
    will-change: width;
    z-index: 50;
    overflow: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    box-shadow: 1px 0 12px rgba(13, 115, 119, 0.06), 4px 0 24px rgba(0, 0, 0, 0.02);
}

.sirc-edge-rail::-webkit-scrollbar {
    display: none;
}

.sirc-edge-rail:hover {
    width: 240px;
}

.sirc-edge-rail__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.sirc-edge-rail__group-label {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--neutral-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-2) var(--space-3);
    opacity: 0;
    white-space: nowrap;
    transition: opacity var(--transition-base);
}

.sirc-edge-rail:hover .sirc-edge-rail__group-label {
    opacity: 1;
}

.sirc-edge-rail__divider {
    height: 1px;
    background: var(--neutral-200);
    margin: var(--space-2) var(--space-3);
}

.sirc-edge-rail__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    color: var(--neutral-600);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}

.sirc-edge-rail__item:hover {
    background: var(--neutral-100);
    color: var(--primary-600);
}

.sirc-edge-rail__item--active {
    background: linear-gradient(135deg, rgba(13, 115, 119, 0.14) 0%, rgba(13, 115, 119, 0.06) 100%);
    color: var(--primary-600);
    font-weight: var(--font-semibold);
    box-shadow: 0 2px 8px rgba(13, 115, 119, 0.1);
}

.sirc-edge-rail__item--active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    background: linear-gradient(180deg, var(--primary-400) 0%, var(--primary-600) 100%);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    box-shadow: 2px 0 12px rgba(13, 115, 119, 0.3);
}

.sirc-edge-rail__item--active .sirc-edge-rail__item-icon {
    color: var(--primary-600);
}

.sirc-edge-rail__item-icon {
    min-width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

.sirc-edge-rail__item-label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.sirc-edge-rail:hover .sirc-edge-rail__item-label {
    opacity: 1;
}

.sirc-edge-rail__item-badge {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--error-main);
    color: white;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.sirc-edge-rail:hover .sirc-edge-rail__item-badge {
    opacity: 1;
}

/* Submenu Styles */
.sirc-edge-rail__submenu {
    display: flex;
    flex-direction: column;
}

.sirc-edge-rail__submenu-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: none;
    background: none;
    color: var(--neutral-600);
    cursor: pointer;
    transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
    border-radius: var(--radius-md);
    text-align: left;
    width: 100%;
}

.sirc-edge-rail__submenu-toggle:hover {
    background: var(--primary-50);
    color: var(--primary-600);
}

.sirc-edge-rail__submenu-toggle--expanded {
    background: var(--primary-50);
    color: var(--primary-600);
}

.sirc-edge-rail__submenu-arrow {
    font-size: 18px;
    margin-left: auto;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.sirc-edge-rail:hover .sirc-edge-rail__submenu-arrow {
    opacity: 1;
}

.sirc-edge-rail__submenu-items {
    display: flex;
    flex-direction: column;
    padding-left: var(--space-6);
    overflow: hidden;
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 200px;
    }
}

.sirc-edge-rail__item--nested {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
    min-height: unset;
}

.sirc-edge-rail__item--nested .sirc-edge-rail__item-label {
    opacity: 1;
    position: static;
    width: auto;
}

.sirc-edge-rail__item--nested::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--neutral-300);
    margin-right: var(--space-2);
    transition: background var(--transition-base);
}

.sirc-edge-rail__item--nested:hover::before,
.sirc-edge-rail__item--nested.sirc-edge-rail__item--active::before {
    background: var(--primary-500);
}

.sirc-edge-rail__spacer {
    flex: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MAIN CONTENT AREA
   Clean, spacious content container
   ═══════════════════════════════════════════════════════════════════════════════ */

.sirc-main-content {
    padding: var(--space-6);

    /* The quick-action dock is position:fixed and occupies the bottom 90px of the
       viewport (its own height plus its --space-6 offset). Nothing in the normal flow
       knows it is there, so this reserves the room: without it the last 66px of any
       page scrolled to its end sits underneath the dock. The mobile breakpoint below
       already allowed for its own bottom nav; desktop never did.
       Guarded by LayoutChromeTests.TheFixedDockDoesNotCoverTheBottomOfAScrolledPage. */
    padding-bottom: calc(var(--space-6) + 96px);

    overflow-y: auto;
    z-index: 1;
    position: relative;
}

.sirc-main-content__inner {
    max-width: 1400px;
    margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   QUICK ACTIONS DOCK
   Floating action buttons at the bottom
   ═══════════════════════════════════════════════════════════════════════════════ */

.sirc-dock {
    position: fixed;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border-radius: var(--radius-2xl);
    box-shadow: 0 8px 32px rgba(13, 115, 119, 0.12), 0 0 0 1px rgba(13, 115, 119, 0.08), 0 0 60px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(13, 115, 119, 0.12);
    z-index: 100;
    animation: dockSlideUp 0.5s var(--ease-out-expo) both;
    animation-delay: 0.3s;
}

@keyframes dockSlideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.sirc-dock__item {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-xl);
    border: none;
    background: transparent;
    color: var(--neutral-600);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
    position: relative;
}

.sirc-dock__item:hover {
    background: var(--neutral-100);
    color: var(--primary-600);
    transform: translateY(-2px);
}

.sirc-dock__item--primary {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
    color: white;
    box-shadow: var(--shadow-md), 0 4px 15px rgba(13, 115, 119, 0.3);
}

.sirc-dock__item--primary:hover {
    background: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-500) 100%);
    color: white;
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg), 0 8px 25px rgba(13, 115, 119, 0.4);
}

.sirc-dock__item--accent {
    background: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-600) 100%);
    color: white;
    box-shadow: var(--shadow-md), 0 4px 15px rgba(212, 135, 42, 0.3);
}

.sirc-dock__item--accent:hover {
    background: linear-gradient(135deg, var(--accent-400) 0%, var(--accent-500) 100%);
    color: white;
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg), 0 8px 25px rgba(212, 135, 42, 0.4);
}

.sirc-dock__item--warning {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: white;
    box-shadow: var(--shadow-md), 0 4px 15px rgba(245, 158, 11, 0.3);
}

.sirc-dock__item--warning:hover {
    background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
    color: white;
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg), 0 8px 25px rgba(245, 158, 11, 0.4);
}

.sirc-dock__item--danger {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    color: white;
    box-shadow: var(--shadow-md), 0 4px 15px rgba(239, 68, 68, 0.3);
}

.sirc-dock__item--danger:hover {
    background: linear-gradient(135deg, #F87171 0%, #EF4444 100%);
    color: white;
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg), 0 8px 25px rgba(239, 68, 68, 0.4);
}

.sirc-dock__item-icon {
    font-size: 1.35rem;
}

.sirc-dock__tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    padding: var(--space-2) var(--space-3);
    background: var(--neutral-800);
    color: white;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    border-radius: var(--radius-md);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
    pointer-events: none;
}

.sirc-dock__item:hover .sirc-dock__tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-4px);
}

.sirc-dock__divider {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--neutral-300);
    margin: 0 var(--space-1);
}

.sirc-dock__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--neutral-300);
    margin: 0 2px;
    flex-shrink: 0;
}

.sirc-dock__item--active {
    background: rgba(13, 115, 119, 0.12) !important;
    color: var(--primary-600) !important;
}

.sirc-dock__item--active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 3px;
    border-radius: 2px;
    background: var(--primary-500);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MOBILE ADAPTATIONS
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .sirc-floating-layout {
        grid-template-columns: 1fr;
    }

    .sirc-edge-rail {
        display: none;
    }

    .sirc-command-bar__center {
        display: none;
    }

    .sirc-command-bar__user-info {
        display: none;
    }

    .sirc-dock {
        bottom: calc(var(--space-4) + 72px);
    }
}

@media (max-width: 767px) {
    .sirc-command-bar {
        padding: var(--space-3) var(--space-4);
    }

    .sirc-command-bar__title {
        display: none;
    }

    .sirc-main-content {
        padding: var(--space-4);
        padding-bottom: calc(var(--space-4) + 140px);
    }

    .sirc-dock {
        left: var(--space-4);
        right: var(--space-4);
        transform: none;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION
   Thumb-friendly primary navigation
   ═══════════════════════════════════════════════════════════════════════════════ */

.sirc-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface-card);
    border-top: 1px solid var(--neutral-200);
    display: flex;
    justify-content: space-around;
    padding: var(--space-2) 0;
    padding-bottom: env(safe-area-inset-bottom, var(--space-2));
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

@media (min-width: 768px) {
    .sirc-bottom-nav {
        display: none;
    }
}

.sirc-bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    color: var(--neutral-500);
    text-decoration: none;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    transition: color var(--transition-fast);
    min-width: 64px;
    position: relative;
}

.sirc-bottom-nav__pill {
    position: absolute;
    top: -2px;
    width: 24px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-400), var(--primary-600));
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    animation: pillAppear 0.3s var(--ease-smooth);
}

@keyframes pillAppear {
    from { width: 0; opacity: 0; }
    to { width: 24px; opacity: 1; }
}

.sirc-bottom-nav__item--active {
    color: var(--primary-600);
    font-weight: 600;
}

.sirc-bottom-nav__item:active {
    transform: scale(0.95);
}

.sirc-bottom-nav__icon {
    font-size: 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PROGRESS & LOADING STATES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Skeleton loading */
.sirc-skeleton {
    background: linear-gradient(
        90deg,
        var(--neutral-100) 25%,
        var(--surface-subtle) 50%,
        var(--neutral-100) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

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

.sirc-skeleton-card {
    height: 120px;
    border-radius: var(--radius-lg);
}

.sirc-skeleton-row {
    height: 48px;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
}

.sirc-skeleton-circle {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
}

.sirc-skeleton-text {
    height: 14px;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2);
}

.sirc-skeleton-text--short {
    width: 40%;
}

.sirc-skeleton-text--medium {
    width: 65%;
}

/* Empty state component */
.sirc-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-6);
    text-align: center;
    max-width: 380px;
    margin: 0 auto;
}

.sirc-empty-state__icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-xl);
    background: var(--neutral-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-400);
    font-size: 28px;
    margin-bottom: var(--space-4);
}

.sirc-empty-state__title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--neutral-700);
    margin: 0 0 var(--space-2) 0;
}

.sirc-empty-state__description {
    font-size: var(--text-sm);
    color: var(--neutral-500);
    margin: 0 0 var(--space-5) 0;
    line-height: 1.6;
}

/* Loading overlay */
.sirc-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    z-index: 10;
    border-radius: inherit;
    backdrop-filter: blur(2px);
}

.sirc-loading-overlay__text {
    font-size: var(--text-sm);
    color: var(--neutral-500);
    font-weight: var(--font-medium);
}

/* Spinner */
.sirc-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--neutral-200);
    border-top-color: var(--primary-500);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Progress bar */
.sirc-progress {
    height: 4px;
    background: var(--neutral-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.sirc-progress__bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-500), var(--accent-500));
    transition: width var(--transition-slow);
}

.rz-progressbar {
    height: 8px !important;
    border-radius: var(--radius-full) !important;
    overflow: hidden !important;
    background: var(--neutral-100) !important;
}

.rz-progressbar-value {
    background: linear-gradient(90deg, var(--primary-500), var(--accent-500)) !important;
    border-radius: var(--radius-full) !important;
    transition: width 0.6s var(--ease-out-expo) !important;
    position: relative !important;
}

.rz-progressbar-value::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: progressShimmer 2s infinite;
}

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

/* ═══════════════════════════════════════════════════════════════════════════════
   ANIMATIONS & MICRO-INTERACTIONS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Success animation */
.sirc-success-pop {
    animation: success-pop 0.5s var(--ease-bounce);
}

@keyframes success-pop {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

/* Error shake */
.sirc-error-shake {
    animation: shake 0.5s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

/* Toast notification */
.sirc-toast {
    position: fixed;
    bottom: calc(var(--space-6) + 56px);
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--neutral-800);
    color: white;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transition: background-color var(--transition-slow), border-color var(--transition-slow), color var(--transition-slow), box-shadow var(--transition-slow), transform var(--transition-slow);
    z-index: 1100;
}

.sirc-toast--visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

@media (min-width: 768px) {
    .sirc-toast {
        bottom: var(--space-6);
    }
}

/* Page transitions */
.sirc-page-enter {
    opacity: 0;
    transform: translateY(10px);
}

.sirc-page-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: background-color var(--transition-slow), border-color var(--transition-slow), color var(--transition-slow), box-shadow var(--transition-slow), transform var(--transition-slow);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PAGE LAYOUT COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════════ */

.sirc-page-container {
    padding: var(--space-4);
    max-width: 1400px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .sirc-page-container {
        padding: var(--space-6);
    }
}

.sirc-page-header {
    margin-bottom: var(--space-6);
}

.sirc-page-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    line-height: 1.2;
    color: var(--neutral-900);
    margin: 0;
}

/* White only where the background is dark enough to carry it. Every page title sits in
   a gradient header today, but the class now works anywhere. */
.sirc-page-header-gradient .sirc-page-title {
    color: #fff;
}

.sirc-page-subtitle {
    font-size: var(--text-base);
    color: var(--neutral-500);
    margin: 0;
}

/* Inside a gradient header the grey above is barely legible, which is why twelve pages
   hand-rolled rgba(255,255,255,0.85) inline instead of using this class, and why the two
   pages that did use it have a subtitle you can hardly read. */
.sirc-page-header-gradient .sirc-page-subtitle {
    color: rgba(255, 255, 255, 0.85);
}

/* Section headers */
.sirc-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.sirc-section-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--neutral-800);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   HUB/LANDING PAGE COMPONENTS
   Card-based module navigation with modern styling
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Section containers */
.sirc-hub-section {
    margin-bottom: 2rem;
}

.sirc-hub-section__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--neutral-700);
    font-weight: var(--font-semibold);
    margin-bottom: 1rem;
}

/* Grid layout */
.sirc-hub-grid {
    display: grid;

    /* auto-fit, not auto-fill: with three cards in a wide container auto-fill reserves
       a fourth, empty column and the row stops short of the page. */
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: var(--space-4);
}

/* Base hub card - horizontal layout with enhanced sizing */
.sirc-hub-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 1.25rem;
    min-height: 110px;
    max-width: 360px;
    background: linear-gradient(145deg, var(--neutral-0) 0%, var(--neutral-50) 100%);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--neutral-200);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* Colored left accent strip */
.sirc-hub-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--primary-500);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.sirc-hub-card:hover::before {
    transform: scaleY(1);
}

.sirc-hub-card:hover {
    box-shadow: 0 8px 25px rgba(13, 115, 119, 0.15), 0 4px 10px rgba(0, 0, 0, 0.08);
    border-color: var(--primary-300);
    transform: translateY(-3px);
    background: linear-gradient(135deg, var(--neutral-0) 0%, var(--primary-50) 100%);
}

/* Unique gradient backgrounds for different card types */
.sirc-hub-card:has(.sirc-hub-card__icon--primary) {
    background: linear-gradient(145deg, #FFFFFF 0%, rgba(13, 115, 119, 0.04) 100%);
}

.sirc-hub-card:has(.sirc-hub-card__icon--warning) {
    background: linear-gradient(145deg, #FFFFFF 0%, rgba(245, 158, 11, 0.05) 100%);
}

.sirc-hub-card:has(.sirc-hub-card__icon--error) {
    background: linear-gradient(145deg, #FFFFFF 0%, rgba(239, 68, 68, 0.04) 100%);
}

.sirc-hub-card:has(.sirc-hub-card__icon--info) {
    background: linear-gradient(145deg, #FFFFFF 0%, rgba(59, 130, 246, 0.05) 100%);
}

.sirc-hub-card:has(.sirc-hub-card__icon--success) {
    background: linear-gradient(145deg, #FFFFFF 0%, rgba(16, 185, 129, 0.05) 100%);
}

.sirc-hub-card:has(.sirc-hub-card__icon--neutral) {
    background: linear-gradient(145deg, #FFFFFF 0%, rgba(64, 64, 64, 0.03) 100%);
}

.sirc-hub-card:has(.sirc-hub-card__icon--accent) {
    background: linear-gradient(145deg, #FFFFFF 0%, rgba(212, 135, 42, 0.05) 100%);
}

/* Enhanced hover states with stronger gradients */
.sirc-hub-card:has(.sirc-hub-card__icon--warning):hover {
    background: linear-gradient(145deg, #FFFFFF 0%, rgba(245, 158, 11, 0.12) 100%);
}

.sirc-hub-card:has(.sirc-hub-card__icon--error):hover {
    background: linear-gradient(145deg, #FFFFFF 0%, rgba(239, 68, 68, 0.1) 100%);
}

.sirc-hub-card:has(.sirc-hub-card__icon--info):hover {
    background: linear-gradient(145deg, #FFFFFF 0%, rgba(59, 130, 246, 0.12) 100%);
}

.sirc-hub-card:has(.sirc-hub-card__icon--success):hover {
    background: linear-gradient(145deg, #FFFFFF 0%, rgba(16, 185, 129, 0.12) 100%);
}

/* Icon container with gradient background */
.sirc-hub-card__icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, var(--primary-100) 0%, var(--primary-200) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-600);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    box-shadow: 0 2px 8px rgba(13, 115, 119, 0.2);
}

.sirc-hub-card__icon .rzi {
    font-size: 26px;
}

.sirc-hub-card:hover .sirc-hub-card__icon {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(13, 115, 119, 0.3);
}

/* Icon color variants with gradients */
.sirc-hub-card__icon--primary {
    background: linear-gradient(145deg, var(--primary-100) 0%, var(--primary-200) 100%);
    color: var(--primary-600);
    box-shadow: 0 2px 8px rgba(13, 115, 119, 0.2);
}

.sirc-hub-card__icon--accent {
    background: linear-gradient(145deg, var(--accent-100) 0%, var(--accent-200) 100%);
    color: var(--accent-600);
    box-shadow: 0 2px 8px rgba(212, 135, 42, 0.2);
}

.sirc-hub-card__icon--warning {
    background: linear-gradient(145deg, var(--warning-light) 0%, #FDE68A 100%);
    color: var(--warning-dark);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
}

.sirc-hub-card__icon--error {
    background: linear-gradient(145deg, var(--error-light) 0%, #FECACA 100%);
    color: var(--error-dark);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}

.sirc-hub-card__icon--success {
    background: linear-gradient(145deg, var(--success-light) 0%, #A7F3D0 100%);
    color: var(--success-dark);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

.sirc-hub-card__icon--info {
    background: linear-gradient(145deg, var(--info-light) 0%, #BFDBFE 100%);
    color: var(--info-dark);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

.sirc-hub-card__icon--neutral {
    background: linear-gradient(145deg, var(--neutral-100) 0%, var(--neutral-200) 100%);
    color: var(--neutral-600);
    box-shadow: 0 2px 8px rgba(64, 64, 64, 0.15);
}

/* Update hover border colors based on card type */
.sirc-hub-card:has(.sirc-hub-card__icon--warning):hover {
    border-color: var(--warning-main);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.15), 0 4px 10px rgba(0, 0, 0, 0.08);
}

.sirc-hub-card:has(.sirc-hub-card__icon--warning)::before {
    background: var(--warning-main);
}

.sirc-hub-card:has(.sirc-hub-card__icon--error):hover {
    border-color: var(--error-main);
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.15), 0 4px 10px rgba(0, 0, 0, 0.08);
}

.sirc-hub-card:has(.sirc-hub-card__icon--error)::before {
    background: var(--error-main);
}

.sirc-hub-card:has(.sirc-hub-card__icon--info):hover {
    border-color: var(--info-main);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15), 0 4px 10px rgba(0, 0, 0, 0.08);
}

.sirc-hub-card:has(.sirc-hub-card__icon--info)::before {
    background: var(--info-main);
}

.sirc-hub-card:has(.sirc-hub-card__icon--success):hover {
    border-color: var(--success-main);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.15), 0 4px 10px rgba(0, 0, 0, 0.08);
}

.sirc-hub-card:has(.sirc-hub-card__icon--success)::before {
    background: var(--success-main);
}

/* Content area */
/* A column, which it never was. The markup puts a <strong> and a <span> in here, and
   with no flex-direction they ran together on one line - "Awaiting my approval Cards
   nominated to you." The CSS styled .sirc-hub-card__title and __description instead,
   classes the markup has never used, so neither rule ever applied. */
.sirc-hub-card__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.sirc-hub-card__content > strong,
.sirc-hub-card__title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--neutral-800);
    line-height: 1.3;
}

.sirc-hub-card__content > span,
.sirc-hub-card__description {
    font-size: var(--text-sm);
    color: var(--neutral-500);
    line-height: 1.45;
}

.sirc-hub-card__title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--neutral-800);
    margin: 0 0 0.25rem 0;
    line-height: 1.3;
}

.sirc-hub-card__description {
    font-size: var(--text-sm);
    color: var(--neutral-500);
    margin: 0;
    line-height: 1.4;
}

/* Arrow indicator */
.sirc-hub-card__arrow {
    color: var(--neutral-400);
    font-size: 22px !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    flex-shrink: 0;
}

.sirc-hub-card:hover .sirc-hub-card__arrow {
    transform: translateX(5px);
    color: var(--primary-500);
}

.sirc-hub-card:has(.sirc-hub-card__icon--warning):hover .sirc-hub-card__arrow {
    color: var(--warning-dark);
}

.sirc-hub-card:has(.sirc-hub-card__icon--error):hover .sirc-hub-card__arrow {
    color: var(--error-dark);
}

.sirc-hub-card:has(.sirc-hub-card__icon--info):hover .sirc-hub-card__arrow {
    color: var(--info-dark);
}

/* Badge for counts/status */
.sirc-hub-card__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.25rem 0.75rem;
    background: linear-gradient(135deg, var(--error-light) 0%, #FECACA 100%);
    color: var(--error-dark);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    border-radius: var(--radius-full);
    margin-top: 0.5rem;
}

.sirc-hub-card__badge--warning {
    background: linear-gradient(135deg, var(--warning-light) 0%, #FDE68A 100%);
    color: var(--warning-dark);
}

.sirc-hub-card__badge--info {
    background: linear-gradient(135deg, var(--info-light) 0%, #BFDBFE 100%);
    color: var(--info-dark);
}

.sirc-hub-card__badge--success {
    background: linear-gradient(135deg, var(--success-light) 0%, #A7F3D0 100%);
    color: var(--success-dark);
}

/* Unified page header base */
.sirc-page-header-gradient {
    border-radius: var(--radius-xl);
    padding: 2rem 2rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.sirc-page-header-gradient::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

.sirc-page-header-gradient::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    pointer-events: none;
    opacity: 0.8;
}

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

/* Page header variants */
.sirc-page-header--primary,
.sirc-page-header--monitoring {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 50%, var(--primary-800) 100%);
}

.sirc-page-header--incidents {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 50%, var(--neutral-800) 100%);
}

/* Hazard reporting, in the amber that identifies it on the module chooser and in its rail.
   The header text is white, so a missing variant leaves white on near-white and the title
   disappears - which is exactly what happened when the module was renamed and this rule
   was not renamed with it. */
.sirc-page-header--hazards {
    background: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-700) 50%, var(--neutral-800) 100%);
}

.sirc-page-header--accidents {
    background: linear-gradient(135deg, var(--error-main) 0%, var(--error-dark) 50%, #991B1B 100%);
}

.sirc-page-header--admin {
    background: linear-gradient(135deg, var(--neutral-700) 0%, var(--neutral-800) 50%, var(--neutral-900) 100%);
}

.sirc-page-header--reports {
    background: linear-gradient(135deg, var(--info-main) 0%, var(--info-dark) 50%, #1E3A8A 100%);
}

.sirc-page-header--analytics {
    background: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-700) 50%, #78350F 100%);
}

.sirc-page-header--profile {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 50%, var(--neutral-700) 100%);
}

.sirc-page-header--settings {
    background: linear-gradient(135deg, var(--neutral-700) 0%, var(--neutral-800) 100%);
}

.sirc-page-header--help {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Flexbox utilities */
.sirc-flex { display: flex; }
.sirc-flex-col { flex-direction: column; }
.sirc-flex-row { flex-direction: row; }
.sirc-items-center { align-items: center; }
.sirc-items-start { align-items: flex-start; }
.sirc-items-end { align-items: flex-end; }
.sirc-justify-center { justify-content: center; }
.sirc-justify-between { justify-content: space-between; }
.sirc-justify-end { justify-content: flex-end; }
.sirc-flex-wrap { flex-wrap: wrap; }
.sirc-flex-1 { flex: 1; }
.sirc-gap-1 { gap: var(--space-1); }
.sirc-gap-2 { gap: var(--space-2); }
.sirc-gap-3 { gap: var(--space-3); }
.sirc-gap-4 { gap: var(--space-4); }
.sirc-gap-6 { gap: var(--space-6); }

/* Spacing utilities */
.sirc-m-0 { margin: 0; }
.sirc-mt-2 { margin-top: var(--space-2); }
.sirc-mt-4 { margin-top: var(--space-4); }
.sirc-mb-2 { margin-bottom: var(--space-2); }
.sirc-mb-4 { margin-bottom: var(--space-4); }
.sirc-mb-6 { margin-bottom: var(--space-6); }
.sirc-p-0 { padding: 0; }
.sirc-p-4 { padding: var(--space-4); }
.sirc-p-6 { padding: var(--space-6); }
.sirc-px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.sirc-py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.sirc-py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }

/* Text utilities */
.sirc-text-primary { color: var(--primary-600); }
.sirc-text-secondary { color: var(--neutral-500); }
.sirc-text-success { color: var(--success-main); }
.sirc-text-warning { color: var(--warning-main); }
.sirc-text-error { color: var(--error-main); }
.sirc-text-center { text-align: center; }
.sirc-text-right { text-align: right; }
.sirc-font-medium { font-weight: var(--font-medium); }
.sirc-font-semibold { font-weight: var(--font-semibold); }
.sirc-font-bold { font-weight: var(--font-bold); }

/* Background utilities */
.sirc-bg-primary { background-color: var(--primary-500); }
.sirc-bg-primary-light { background-color: var(--primary-50); }
.sirc-bg-success-light { background-color: var(--success-light); }
.sirc-bg-warning-light { background-color: var(--warning-light); }
.sirc-bg-error-light { background-color: var(--error-light); }
.sirc-bg-surface { background-color: var(--surface-card); }

/* Border utilities */
.sirc-border { border: 1px solid var(--neutral-200); }
.sirc-border-t { border-top: 1px solid var(--neutral-200); }
.sirc-border-b { border-bottom: 1px solid var(--neutral-200); }
.sirc-rounded { border-radius: var(--radius-md); }
.sirc-rounded-lg { border-radius: var(--radius-lg); }
.sirc-rounded-xl { border-radius: var(--radius-xl); }
.sirc-rounded-full { border-radius: var(--radius-full); }

/* Shadow utilities */
.sirc-shadow-sm { box-shadow: var(--shadow-sm); }
.sirc-shadow-md { box-shadow: var(--shadow-md); }
.sirc-shadow-lg { box-shadow: var(--shadow-lg); }

/* Display utilities */
.sirc-hidden { display: none; }
.sirc-block { display: block; }
.sirc-inline-block { display: inline-block; }

/* Width utilities */
.sirc-w-full { width: 100%; }

/* Cursor utilities */
.sirc-cursor-pointer { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Respect reduced motion preferences */
@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;
    }

    .sirc-dock {
        animation: none !important;
    }
}

/* Focus visible for keyboard users only */
:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--primary-400);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* High contrast mode support */
@media (forced-colors: active) {
    .sirc-card, .rz-card {
        border: 2px solid ButtonText !important;
    }

    .rz-button {
        border: 1px solid ButtonText !important;
    }

    .rz-badge {
        border: 1px solid ButtonText !important;
    }

    .sirc-edge-rail__item--active::before {
        background: Highlight !important;
    }
}

/* Skip link for screen readers */
.sirc-skip-link {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.sirc-skip-link:focus {
    position: fixed;
    top: var(--space-4);
    left: var(--space-4);
    width: auto;
    height: auto;
    padding: var(--space-4);
    background: var(--surface-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 10000;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE HELPERS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Hide on mobile */
@media (max-width: 767px) {
    .sirc-hide-mobile { display: none !important; }
}

/* Hide on desktop */
@media (min-width: 768px) {
    .sirc-hide-desktop { display: none !important; }
}

/* Body padding for mobile bottom nav */
@media (max-width: 767px) {
    .sirc-body-with-bottom-nav {
        padding-bottom: 72px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ADDITIONAL RADZEN OVERRIDES FOR CONSISTENCY
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Radzen notification styling */
.rz-notification {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Radzen dropdown styling */
.rz-dropdown-panel {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    border: 1px solid var(--neutral-200) !important;
}

.rz-dropdown-item:hover {
    background: var(--neutral-100) !important;
}

.rz-dropdown-item.rz-state-highlight {
    background: var(--primary-50) !important;
    color: var(--primary-700) !important;
}

/* Radzen checkbox and radio styling */
.rz-checkbox .rz-checkbox-box,
.rz-radiobutton .rz-radiobutton-box {
    border-radius: var(--radius-sm) !important;
    border: 2px solid var(--neutral-300) !important;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast) !important;
}

.rz-checkbox .rz-checkbox-box:hover,
.rz-radiobutton .rz-radiobutton-box:hover {
    border-color: var(--primary-500) !important;
}

.rz-checkbox.rz-state-active .rz-checkbox-box,
.rz-radiobutton.rz-state-active .rz-radiobutton-box {
    background: var(--primary-500) !important;
    border-color: var(--primary-500) !important;
    animation: checkPop 0.2s var(--ease-spring);
}

@keyframes checkPop {
    0% { transform: scale(0.85); }
    60% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Radzen tabs styling */
.rz-tabview-nav {
    border-bottom: 2px solid var(--neutral-100) !important;
    gap: var(--space-1) !important;
}

.rz-tabview-nav li .rz-tabview-nav-link {
    border: none !important;
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
    padding: var(--space-3) var(--space-5) !important;
    color: var(--neutral-500) !important;
    font-weight: var(--font-medium) !important;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast) !important;
    position: relative !important;
}

.rz-tabview-nav li .rz-tabview-nav-link:hover {
    color: var(--primary-600) !important;
    background: var(--surface-subtle) !important;
}

.rz-tabview-nav li.rz-tabview-selected .rz-tabview-nav-link {
    color: var(--primary-600) !important;
    font-weight: var(--font-semibold) !important;
    background: var(--primary-50) !important;
    border-bottom: 3px solid var(--primary-500) !important;
    margin-bottom: -2px !important;
}

/* Radzen tooltip styling */
.rz-tooltip {
    background: var(--neutral-800) !important;
    color: white !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-2) var(--space-3) !important;
    font-size: var(--text-sm) !important;
    box-shadow: var(--shadow-lg) !important;
    animation: tooltipEnter 0.15s var(--ease-out-expo) both !important;
}

@keyframes tooltipEnter {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Radzen menu styling */
.rz-menu {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    border: 1px solid var(--neutral-200) !important;
    padding: var(--space-2) !important;
}

.rz-menu .rz-navigation-item-link {
    border-radius: var(--radius-md) !important;
    padding: var(--space-3) var(--space-4) !important;
}

/* Radzen accordion styling */
.rz-accordion-header {
    border-radius: var(--radius-md) !important;
    font-weight: var(--font-medium) !important;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast) !important;
}

.rz-accordion-header:hover {
    background: var(--surface-subtle) !important;
}

.rz-accordion-header .rz-icon {
    transition: transform var(--transition-base) !important;
}

.rz-accordion-header[aria-expanded="true"] .rz-icon {
    transform: rotate(180deg) !important;
}

.rz-accordion-content {
    animation: accordionExpand 0.25s ease-out !important;
}

@keyframes accordionExpand {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 2000px;
    }
}

/* Radzen fieldset styling */
.rz-fieldset {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--neutral-200) !important;
}

.rz-fieldset-legend {
    font-weight: var(--font-semibold) !important;
    color: var(--neutral-700) !important;
}

/* Radzen tree styling */
.rz-tree {
    background: transparent !important;
}

.rz-tree .rz-treenode-content {
    padding: var(--space-2) var(--space-3) !important;
    border-radius: var(--radius-md) !important;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast) !important;
}

.rz-tree .rz-treenode-content:hover {
    background: var(--neutral-100) !important;
}

.rz-tree .rz-treenode-content.rz-state-highlight {
    background: var(--primary-50) !important;
    color: var(--primary-700) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FILE UPLOAD COMPONENT
   Modern drag-and-drop styled file upload
   ═══════════════════════════════════════════════════════════════════════════════ */

.sirc-file-upload-container {
    width: 100%;
}

.sirc-file-upload-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    border: 2px dashed var(--neutral-300);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--neutral-50) 0%, rgba(255, 255, 255, 0.8) 100%);
    transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
    cursor: pointer;
    text-align: center;
}

.sirc-file-upload-dropzone:hover {
    border-color: var(--primary-400);
    background: linear-gradient(135deg, var(--primary-50) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.sirc-file-upload-dropzone:hover .rzi {
    color: var(--primary-500) !important;
}

.sirc-file-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.sirc-selected-file {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--success-light);
    border: 1px solid var(--success-main);
    border-radius: var(--radius-lg);
}

.sirc-file-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   GRID ACTION BUTTONS FIX
   Better visibility for inline action buttons in data grids
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Override Shade.Lighter buttons in grids for better icon visibility */
.rz-datatable .rz-button.rz-variant-text,
.rz-datatable .rz-button.rz-shade-lighter {
    background: var(--neutral-100) !important;
    color: var(--neutral-700) !important;
}

.rz-datatable .rz-button.rz-variant-text:hover,
.rz-datatable .rz-button.rz-shade-lighter:hover {
    background: var(--neutral-200) !important;
    color: var(--neutral-900) !important;
}

/* Specific button style overrides for grid actions */
.rz-datatable .rz-button.rz-info.rz-shade-lighter {
    background: var(--info-light) !important;
    color: var(--info-dark) !important;
}

.rz-datatable .rz-button.rz-info.rz-shade-lighter:hover {
    background: var(--info-main) !important;
    color: white !important;
}

.rz-datatable .rz-button.rz-success.rz-shade-lighter {
    background: var(--success-light) !important;
    color: var(--success-dark) !important;
}

.rz-datatable .rz-button.rz-success.rz-shade-lighter:hover {
    background: var(--success-main) !important;
    color: white !important;
}

.rz-datatable .rz-button.rz-warning.rz-shade-lighter {
    background: var(--warning-light) !important;
    color: var(--warning-dark) !important;
}

.rz-datatable .rz-button.rz-warning.rz-shade-lighter:hover {
    background: var(--warning-main) !important;
    color: white !important;
}

.rz-datatable .rz-button.rz-danger.rz-shade-lighter {
    background: var(--error-light) !important;
    color: var(--error-dark) !important;
}

.rz-datatable .rz-button.rz-danger.rz-shade-lighter:hover {
    background: var(--error-main) !important;
    color: white !important;
}

.rz-datatable .rz-button.rz-primary.rz-shade-lighter {
    background: var(--primary-50) !important;
    color: var(--primary-700) !important;
}

.rz-datatable .rz-button.rz-primary.rz-shade-lighter:hover {
    background: var(--primary-500) !important;
    color: white !important;
}

.rz-datatable .rz-button.rz-secondary.rz-shade-lighter {
    background: var(--neutral-100) !important;
    color: var(--neutral-700) !important;
}

.rz-datatable .rz-button.rz-secondary.rz-shade-lighter:hover {
    background: var(--neutral-300) !important;
    color: var(--neutral-900) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   QUICK ACTION BUTTONS FIX
   Better visibility for dashboard quick action buttons
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Dashboard quick action buttons - ensure text is visible */
.sirc-quick-action-btn {
    font-weight: var(--font-semibold) !important;
    min-width: 130px;
}

.sirc-quick-action-btn.rz-danger {
    background: linear-gradient(135deg, var(--error-main) 0%, var(--error-dark) 100%) !important;
    color: white !important;
}

.sirc-quick-action-btn.rz-success {
    background: linear-gradient(135deg, var(--success-main) 0%, var(--success-dark) 100%) !important;
    color: white !important;
}

.sirc-quick-action-btn.rz-info {
    background: linear-gradient(135deg, var(--info-main) 0%, var(--info-dark) 100%) !important;
    color: white !important;
}

.sirc-quick-action-btn.rz-warning {
    background: linear-gradient(135deg, var(--warning-main) 0%, var(--warning-dark) 100%) !important;
    color: white !important;
}

/* Status badge improvements */
.sirc-status-badge {
    padding: var(--space-2) var(--space-4) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--font-semibold) !important;
    letter-spacing: 0.02em !important;
}

/* Priority badge colors - with dot indicator */
.sirc-priority-high {
    background: var(--error-light) !important;
    color: var(--error-dark) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

.sirc-priority-medium {
    background: var(--warning-light) !important;
    color: var(--warning-dark) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

.sirc-priority-low {
    background: var(--success-light) !important;
    color: var(--success-dark) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

/* Status badge colors - enhanced with subtle gradient */
.sirc-status-open {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, rgba(239, 68, 68, 0.08) 100%) !important;
    color: var(--error-dark) !important;
    font-weight: 600 !important;
    border: 1px solid rgba(239, 68, 68, 0.15) !important;
}

.sirc-status-inprogress {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0.08) 100%) !important;
    color: var(--warning-dark) !important;
    font-weight: 600 !important;
    border: 1px solid rgba(245, 158, 11, 0.15) !important;
}

.sirc-status-closed {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0.08) 100%) !important;
    color: var(--success-dark) !important;
    font-weight: 600 !important;
    border: 1px solid rgba(16, 185, 129, 0.15) !important;
}

/* Overdue badge - pulsing effect */
.sirc-overdue-badge {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.08));
    color: var(--error-dark);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid rgba(239, 68, 68, 0.2);
    animation: overduePulse 2s ease-in-out infinite;
}

@keyframes overduePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.2); }
    50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BREADCRUMB COMPONENT
   ═══════════════════════════════════════════════════════════════════════════════ */

.sirc-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--neutral-500);
    margin-bottom: var(--space-4);
}

.sirc-breadcrumb__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.sirc-breadcrumb__link {
    color: var(--neutral-500);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.sirc-breadcrumb__link:hover {
    color: var(--primary-600);
}

.sirc-breadcrumb__separator {
    color: var(--neutral-300);
}

.sirc-breadcrumb__current {
    color: var(--neutral-800);
    font-weight: var(--font-medium);
}

/* Radzen breadcrumb override */
.rz-breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: var(--space-4);
}

.rz-breadcrumb-item a {
    color: var(--neutral-500) !important;
    text-decoration: none !important;
}

.rz-breadcrumb-item a:hover {
    color: var(--primary-600) !important;
}

.rz-breadcrumb-item.rz-state-disabled {
    color: var(--neutral-800) !important;
    font-weight: var(--font-medium) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MOBILE MENU OVERLAY
   ═══════════════════════════════════════════════════════════════════════════════ */

.sirc-mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1000;
    animation: menuOverlayIn 0.2s ease;
}

@keyframes menuOverlayIn {
    from { opacity: 0; backdrop-filter: blur(0); }
    to { opacity: 1; backdrop-filter: blur(4px); }
}

.sirc-mobile-menu {
    background: var(--neutral-0);
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden;
    animation: menuSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.15);
}

@keyframes menuSlideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.sirc-mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-5) var(--space-4);
    border-bottom: 1px solid var(--neutral-100);
}

.sirc-mobile-menu__header-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.sirc-mobile-menu__header-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sirc-mobile-menu__header span {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--neutral-900);
}

.sirc-mobile-menu__close {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    border: none;
    background: var(--neutral-100);
    color: var(--neutral-600);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.sirc-mobile-menu__close:hover {
    background: var(--neutral-200);
    color: var(--neutral-800);
    transform: rotate(90deg);
}

.sirc-mobile-menu__items {
    padding: var(--space-3) var(--space-4) var(--space-5);
}

.sirc-mobile-menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-xl);
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    border: 1px solid transparent;
}

.sirc-mobile-menu__item:hover {
    background: var(--neutral-50);
    border-color: var(--neutral-100);
}

.sirc-mobile-menu__item:active {
    transform: scale(0.98);
}

.sirc-mobile-menu__item-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.sirc-mobile-menu__item:hover .sirc-mobile-menu__item-icon {
    transform: scale(1.05);
}

.sirc-mobile-menu__item-icon--primary {
    background: linear-gradient(135deg, rgba(13, 115, 119, 0.12), rgba(13, 115, 119, 0.06));
    color: var(--primary-600);
}

.sirc-mobile-menu__item-icon--warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.06));
    color: var(--warning-dark);
}

.sirc-mobile-menu__item-icon--danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.06));
    color: var(--error-dark);
}

.sirc-mobile-menu__item-icon .rzi {
    font-size: 24px;
}

.sirc-mobile-menu__item-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.sirc-mobile-menu__item-title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--neutral-900);
}

.sirc-mobile-menu__item-desc {
    font-size: var(--text-sm);
    color: var(--neutral-500);
}

.sirc-mobile-menu__item-arrow {
    color: var(--neutral-300);
    flex-shrink: 0;
    transition: transform 0.2s ease, color 0.2s ease;
}

.sirc-mobile-menu__item:hover .sirc-mobile-menu__item-arrow {
    color: var(--primary-500);
    transform: translateX(2px);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   NOTIFICATION BADGE
   ═══════════════════════════════════════════════════════════════════════════════ */

.sirc-notification-btn {
    position: relative;
}

.sirc-notification-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-full);
    background: var(--error-main);
    color: white;
    font-size: 11px;
    font-weight: var(--font-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DOCK ITEM VARIANTS
   ═══════════════════════════════════════════════════════════════════════════════ */

.sirc-dock__item--warning {
    background: var(--warning-main) !important;
    color: white !important;
}

.sirc-dock__item--warning:hover {
    background: var(--warning-dark) !important;
}

.sirc-dock__item--danger {
    background: var(--error-main) !important;
    color: white !important;
}

.sirc-dock__item--danger:hover {
    background: var(--error-dark) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   EDGE RAIL FOOTER
   ═══════════════════════════════════════════════════════════════════════════════ */

.sirc-edge-rail__footer {
    padding: var(--space-4);
    border-top: 1px solid var(--neutral-200);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}

.sirc-edge-rail__footer-text {
    font-size: var(--text-xs);
    color: var(--neutral-500);
}

.sirc-edge-rail__footer-version {
    font-size: var(--text-xs);
    color: var(--primary-600);
    font-weight: var(--font-semibold);
    padding: 2px 8px;
    background: var(--primary-50);
    border-radius: var(--radius-full);
}

.sirc-edge-rail__footer-credit {
    font-size: 10px;
    color: var(--neutral-400);
    text-decoration: none;
    opacity: 0.6;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    margin-top: var(--space-1);
    text-align: center;
}

.sirc-edge-rail__footer-credit:hover {
    color: var(--primary-500);
    opacity: 1;
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ENHANCED DASHBOARD ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Staggered fade-in animation for dashboard sections */
@keyframes dashboardFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Alert pulse for overdue items */
@keyframes alertPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }
}

/* Safety score pulse */
@keyframes safetyScorePulse {
    0%, 100% {
        filter: drop-shadow(0 0 3px rgba(16, 185, 129, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.5));
    }
}

/* Floating gradient orbs animation */
@keyframes floatOrb1 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(30px, -20px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
}

@keyframes floatOrb2 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(-40px, 30px) scale(0.9);
    }
    66% {
        transform: translate(25px, -15px) scale(1.1);
    }
}

@keyframes floatOrb3 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(20px, 25px) scale(1.05);
    }
    66% {
        transform: translate(-30px, -10px) scale(0.95);
    }
}

/* Sparkline end dot pulse */
@keyframes sparklinePulse {
    0%, 100% {
        r: 3;
        opacity: 1;
    }
    50% {
        r: 4;
        opacity: 0.8;
    }
}

/* Card hover lift */
.dashboard-card-lift {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dashboard-card-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

/* Subtle shimmer effect */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.dashboard-shimmer {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

/* Number counter effect */
@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-count {
    animation: countUp 0.3s ease-out forwards;
}

/* Icon spin on hover */
.icon-spin-hover:hover {
    animation: iconSpin 0.5s ease-in-out;
}

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

/* Slide right on hover */
.slide-right-hover {
    transition: transform 0.2s ease;
}

.slide-right-hover:hover {
    transform: translateX(4px);
}

/* Glass morphism utility */
.glass-effect {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Dashboard stat cards gradient backgrounds */
.dashboard-gradient-primary {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
}

.dashboard-gradient-accent {
    background: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-700) 100%);
}

.dashboard-gradient-danger {
    background: linear-gradient(135deg, #EF4444 0%, #B91C1C 100%);
}

.dashboard-gradient-warning {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
}

.dashboard-gradient-success {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
}

/* Responsive dashboard utilities */
@media (max-width: 768px) {
    .dashboard-mobile-stack {
        flex-direction: column;
    }

    .dashboard-mobile-full {
        width: 100%;
    }
}

/* Dark mode support for dashboard (if needed in future) */
@media (prefers-color-scheme: dark) {
    .dashboard-card-dark {
        background: var(--neutral-800);
        border-color: var(--neutral-700);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   HAZARD TYPES TREE - Action Button Alignment
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Make RadzenTree take full width and stretch items */
.hazard-types-tree {
    width: 100%;
}

.hazard-types-tree .rz-treenode {
    width: 100%;
}

.hazard-types-tree .rz-treenode-content {
    width: 100%;
    flex: 1;
}

.hazard-types-tree .rz-treenode-label {
    flex: 1;
    width: 100%;
}

/* Hazard type row layout */
.hazard-type-row {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 32px;
}

.hazard-type-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.hazard-type-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hazard-type-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PAGE-LEVEL REUSABLE COMPONENTS
   Filter cards, bulk toolbars, stat cards, report grids
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Filter card with slide-down entrance */
.sirc-filter-card {
    border-radius: var(--radius-lg) !important;
    margin-bottom: var(--space-4);
    background: var(--surface-card) !important;
}

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

/* Bulk actions toolbar */
.sirc-bulk-toolbar {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-5);
    margin-bottom: var(--space-3);
    box-shadow: 0 4px 16px rgba(13, 115, 119, 0.25);
    position: relative;
    overflow: hidden;
}

.sirc-bulk-toolbar::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -5%;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

/* Priority text indicators (inline with icon) */
.sirc-priority-text--high {
    color: var(--error-dark);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.06);
}
.sirc-priority-text--medium {
    color: var(--warning-dark);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    background: rgba(245, 158, 11, 0.06);
}
.sirc-priority-text--low {
    color: var(--success-dark);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    background: rgba(16, 185, 129, 0.06);
}

/* Form card with slide-up entrance */
.sirc-form-card {
    border-radius: var(--radius-lg) !important;
}

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

/* Form section header (card header stripe) */
.sirc-section-header-stripe {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--neutral-100);

    /* Bleeds to the card's edges by cancelling its padding, which is --space-5 (20px).
       This was hard-coded to -24px: four pixels more than the padding it was cancelling,
       so every stripe hung outside its own card and sat over whatever was above it. It
       is used on most detail panels, which is why the overlap appeared page after page. */
    margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-5);
    padding: 16px 24px;
    border-bottom: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Type selector (hazard/near-miss) */
.sirc-type-selector {
    display: flex;
    gap: var(--space-4);
}

.sirc-type-button {
    flex: 1;
    padding: var(--space-4);
    border: 2px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
    text-align: center;
}

.sirc-type-button:hover {
    border-color: var(--primary-300);
    background: var(--primary-50);
}

.sirc-type-button.selected-hazard {
    border-color: var(--warning-main);
    background: var(--warning-light);
}

.sirc-type-button.selected-nearmiss {
    border-color: var(--info-main);
    background: var(--info-light);
}

/* Report stat cards */
.sirc-stat-card {
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.sirc-stat-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 0 0 0 100%;
    pointer-events: none;
}

.sirc-stat-card--primary {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
}

.sirc-stat-card--warning {
    background: linear-gradient(135deg, var(--warning-main) 0%, var(--warning-dark) 100%);
}

.sirc-stat-card--success {
    background: linear-gradient(135deg, var(--success-main) 0%, var(--success-dark) 100%);
}

.sirc-stat-card--danger {
    background: linear-gradient(135deg, var(--error-main) 0%, var(--error-dark) 100%);
}

.sirc-stat-card--info {
    background: linear-gradient(135deg, var(--info-main) 0%, var(--info-dark) 100%);
}

/* Inner card for report sub-sections */
.sirc-inner-card {
    background: var(--neutral-50);
    border-radius: var(--radius-md);
    padding: 1rem;
    border: 1px solid var(--border-subtle);
}

/* Detailed report grid - compact styling */
.sirc-detailed-grid {
    font-size: 0.8rem;
}

.sirc-detailed-grid .rz-data-row td {
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
    line-height: 1.3;
}

.sirc-detailed-grid .rz-column-title {
    font-size: 0.75rem;
    font-weight: 600;
}

.sirc-detailed-grid .rz-badge {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    line-height: 1.2;
}

.sirc-detailed-grid .rz-pager {
    font-size: 0.75rem;
}

.sirc-detailed-grid input,
.sirc-detailed-grid .rz-dropdown {
    font-size: 0.75rem;
}

/* Compact accordion for grouped report views */
.sirc-detailed-accordion .rz-accordion-header {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
}

.sirc-detailed-accordion .rz-accordion-content {
    padding: 0.25rem;
}

/* Analytics components */
.analytics-page {
    padding: 0;
    min-height: 100vh;
}

.analytics-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.analytics-header {
    background: white;
    border-radius: var(--radius-xl);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.analytics-header__title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.analytics-header__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.analytics-section {
    margin-bottom: 1.5rem;
}

.analytics-section__header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--neutral-200);
}

.analytics-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
}

.analytics-card__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--neutral-600);
    margin-bottom: 1rem;
}

.analytics-stat-block {
    background: white;
    border-radius: var(--radius-xl);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
}

.analytics-stat-block__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--neutral-100);
}

.analytics-stat-block__row:last-child {
    border-bottom: none;
}

.analytics-stat-block__value {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary-600);
}

.analytics-stat-block__value--warning {
    color: var(--warning-dark);
}

.analytics-stat-block__value--danger {
    color: var(--error-dark);
}

.analytics-priority-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.analytics-priority-item {
    padding: 0.75rem;
    border-radius: var(--radius-md);
    background: var(--neutral-50);
}

.analytics-priority-item__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.analytics-priority-item__value {
    font-weight: 600;
    color: var(--neutral-600);
}

.analytics-priority-item__label {
    font-size: 0.75rem;
    color: var(--neutral-400);
    display: block;
    margin-top: 0.25rem;
}

.analytics-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    color: var(--neutral-400);
}

.analytics-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--neutral-100);
    font-weight: 600;
    color: var(--neutral-500);
}

.analytics-rank--1 {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: white;
}

.analytics-rank--2 {
    background: linear-gradient(135deg, #C0C0C0 0%, #A0A0A0 100%);
    color: white;
}

.analytics-rank--3 {
    background: linear-gradient(135deg, #CD7F32 0%, #A0522D 100%);
    color: white;
}

.analytics-yoy-summary {
    background: var(--neutral-50);
    padding: 1rem;
    border-radius: var(--radius-md);
    height: 100%;
}

/* ============================================================
   Permit Book — request wizard steps & selectable cards
   ============================================================ */
.sirc-permit-steps {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.sirc-permit-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    background: var(--neutral-100);
    color: var(--neutral-500);
    font-size: 0.85rem;
    font-weight: 600;
    flex: 1 1 0;
    min-width: 120px;
    justify-content: center;
    transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.sirc-permit-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--neutral-300);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}

.sirc-permit-step__label {
    white-space: nowrap;
}

.sirc-permit-step--active {
    background: linear-gradient(135deg, rgba(13, 115, 119, 0.12) 0%, rgba(13, 115, 119, 0.06) 100%);
    color: var(--primary-700, #0A5B5E);
    box-shadow: inset 0 0 0 1px rgba(13, 115, 119, 0.25);
}

.sirc-permit-step--active .sirc-permit-step__num {
    background: var(--primary-500, #0D7377);
}

.sirc-permit-step--done {
    color: var(--success-dark, #047857);
    background: rgba(16, 185, 129, 0.10);
}

.sirc-permit-step--done .sirc-permit-step__num {
    background: var(--success-main, #10B981);
}

/* Selected state for interactive selection cards (type, purpose, return picker) */
.sirc-card--selected {
    border-color: var(--primary-500, #0D7377) !important;
    box-shadow: 0 0 0 2px rgba(13, 115, 119, 0.28), var(--shadow-sm) !important;
    background: linear-gradient(180deg, rgba(13, 115, 119, 0.06) 0%, #fff 60%) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLAZOR RECONNECT OVERLAY
   Blazor adds .components-reconnect-show / -failed / -rejected to
   #components-reconnect-modal as the circuit drops and retries. Hidden until
   then, so a healthy page never sees it.
   ═══════════════════════════════════════════════════════════════════════════ */

.sirc-reconnect {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

.sirc-reconnect__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    max-width: 22rem;
    padding: var(--space-6);
    text-align: center;
    color: var(--neutral-800);
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}

.sirc-reconnect__spinner {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--primary-100);
    border-top-color: var(--primary-500);
    border-radius: var(--radius-full);
    animation: sirc-reconnect-spin 0.8s linear infinite;
}

@keyframes sirc-reconnect-spin {
    to { transform: rotate(360deg); }
}

/* Only the message matching the current circuit state is shown. */
.sirc-reconnect__message { display: none; margin: 0; }

.components-reconnect-show .sirc-reconnect__message--show,
.components-reconnect-failed .sirc-reconnect__message--failed,
.components-reconnect-rejected .sirc-reconnect__message--rejected { display: block; }

.components-reconnect-failed .sirc-reconnect__spinner,
.components-reconnect-rejected .sirc-reconnect__spinner { display: none; }

.sirc-reconnect__message a { color: var(--primary-600); font-weight: var(--font-semibold); }

/* ═══════════════════════════════════════════════════════════════════════════
   SAFETY INCIDENT MODULE
   Capture wizard, map picker and detail layout. Reuses the existing tokens,
   card and badge vocabulary rather than introducing a parallel one.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Map picker (PRD 7.2) ───────────────────────────────────────────────── */

.sirc-map-picker { display: flex; flex-direction: column; gap: var(--space-3); }

.sirc-map-picker__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.sirc-map-picker__hint { font-size: var(--text-sm); color: var(--neutral-600); }

/* A fixed height, because Leaflet cannot size itself inside a flex parent and
   would otherwise collapse to nothing. */
.sirc-map-picker__canvas {
    height: 380px;
    width: 100%;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    z-index: 0; /* keeps Leaflet panes beneath Radzen dialogs and dropdowns */
}

.sirc-map-picker__coords {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

.sirc-map-picker__pinned {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--success-dark);
}

.sirc-map-picker__error {
    padding: var(--space-3);
    font-size: var(--text-sm);
    color: var(--warning-dark);
    background: var(--warning-light);
    border-radius: var(--radius-md);
}

@media (max-width: 768px) {
    /* RTAs are reported from the roadside, so the map has to stay usable
       one-handed on a phone. */
    .sirc-map-picker__canvas { height: 300px; }
    .sirc-map-picker__coords { flex-direction: column; align-items: stretch; }
}

/* ── Capture wizard ─────────────────────────────────────────────────────── */

.sirc-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

.sirc-form-help {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--neutral-600);
}

.sirc-autosave-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    color: white;
    background: rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-full);
}

/* ── Inline alerts ──────────────────────────────────────────────────────── */

.sirc-alert {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
    border-left: 4px solid transparent;
}

.sirc-alert ul { margin: 0; padding-left: var(--space-5); }

.sirc-alert--error   { background: var(--error-light);   border-left-color: var(--error-main);   color: var(--error-dark); }
.sirc-alert--warning { background: var(--warning-light); border-left-color: var(--warning-main); color: var(--warning-dark); }
.sirc-alert--info    { background: var(--info-light);    border-left-color: var(--info-main);    color: var(--info-dark); }

/* ── Detail layout ──────────────────────────────────────────────────────── */

.sirc-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: var(--space-5);
    align-items: start;
}

.sirc-detail-main,
.sirc-detail-side { display: flex; flex-direction: column; gap: var(--space-5); }

.sirc-detail-description { white-space: pre-wrap; line-height: var(--leading-relaxed); }

@media (max-width: 1024px) {
    .sirc-detail-grid { grid-template-columns: 1fr; }
}

.sirc-header-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Definition list used for read-only field summaries. */
.sirc-review-list {
    display: grid;
    grid-template-columns: minmax(140px, auto) 1fr;
    gap: var(--space-2) var(--space-4);
    margin: 0;
}

.sirc-review-list dt {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--neutral-600);
}

.sirc-review-list dd { margin: 0; font-size: var(--text-sm); color: var(--neutral-900); }

@media (max-width: 600px) {
    .sirc-review-list { grid-template-columns: 1fr; gap: var(--space-1); }
    .sirc-review-list dd { margin-bottom: var(--space-3); }
}

.sirc-text-muted { color: var(--neutral-500); }

/* ═══════════════════════════════════════════════════════════════════════════
   BODY MAP (PRD 10.2)
   Inline SVG regions the assessor clicks, with a keyboard-operable equivalent
   beside it. Both views stay visible so they cannot disagree.
   ═══════════════════════════════════════════════════════════════════════════ */

.sirc-bodymap {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: var(--space-5);
    align-items: start;
}

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

.sirc-bodymap__diagram { display: flex; gap: var(--space-4); justify-content: center; }

.sirc-bodymap__figure { margin: 0; text-align: center; }

.sirc-bodymap__figure figcaption {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--neutral-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sirc-bodymap__svg {
    width: 100%;
    max-width: 150px;
    height: auto;
    background: var(--surface-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

.sirc-bodymap__region {
    fill: var(--neutral-200);
    stroke: var(--neutral-400);
    stroke-width: 0.75;
    cursor: pointer;
    transition: fill var(--transition-fast);
}

.sirc-bodymap__region:hover { fill: var(--primary-200); }

.sirc-bodymap__region--selected {
    fill: var(--error-main);
    stroke: var(--error-dark);
}

/* A visible focus ring is what makes the diagram genuinely keyboard-operable
   rather than merely focusable. */
.sirc-bodymap__region:focus-visible {
    outline: 3px solid var(--primary-500);
    outline-offset: 2px;
}

.sirc-bodymap__list { display: flex; flex-direction: column; gap: var(--space-3); }

.sirc-bodymap__list-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-weight: var(--font-semibold);
    color: var(--neutral-800);
}

.sirc-bodymap__count { font-size: var(--text-sm); color: var(--neutral-500); }

.sirc-bodymap__empty { margin: 0; font-size: var(--text-sm); color: var(--neutral-500); }

.sirc-bodymap__selected { list-style: none; margin: 0; padding: 0; display: flex;
    flex-direction: column; gap: var(--space-2); }

.sirc-bodymap__selected-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-subtle);
    border-radius: var(--radius-md);
}

.sirc-bodymap__selected-item > span:first-child { flex: 1; font-size: var(--text-sm); }

/* Impact assessment */

.sirc-injury-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

@media print {
    /* A printed card should show the diagram, not the editing affordances. */
    .sirc-bodymap__list .rz-dropdown,
    .sirc-bodymap__selected-item .rz-button { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INVESTIGATION
   The closure checklist is shown continuously, not only after a refused
   attempt, so the lead can see what is outstanding while they work.
   ═══════════════════════════════════════════════════════════════════════════ */

.sirc-gate-list {
    list-style: none;
    margin: 0 0 var(--space-3);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.sirc-gate-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--neutral-700);
}

.sirc-gate-list li .rz-icon {
    flex-shrink: 0;
    font-size: 1.1em;
    color: var(--warning-main);
}

/* ── Safety dashboard (PRD 18) ─────────────────────────────────────────────── */

.sirc-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.sirc-kpi-tile {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);

    /* The status stripe carries the on/off-target verdict. Colour alone would fail
       WCAG, so the tile also spells the verdict out in words. */
    border-left: 4px solid var(--neutral-300);
}

.sirc-kpi-tile--good { border-left-color: var(--success-main); }
.sirc-kpi-tile--bad  { border-left-color: var(--error-main); }

/* ═══════════════════════════════════════════════════════════════════════════
   STACKED CARDS
   .sirc-card carried no margin of any kind, so two of them one after another sat
   with their borders touching and read as a single card overlapping another. It
   showed up worst on the reports Overview tab, where two cards stack directly,
   but it was every page that puts one card under another.

   Done as a sibling rule rather than a blanket margin-bottom so a card that is the
   only thing in its container still sits flush to it.
   ═══════════════════════════════════════════════════════════════════════════ */

.sirc-card + .sirc-card,
.sirc-card + .sirc-filter-card,
.sirc-filter-card + .sirc-card {
    margin-top: var(--space-5);
}

/* Except inside a container that already spaces its own children. Flex and grid gaps
   do not collapse with margins, so the two add up: a KPI tile is itself a .sirc-card,
   and in the KPI grid every tile after the first was taking the 16px gap plus another
   20px on top, pushing it out of line with the first tile in its row. The rule above
   is for cards stacked directly on a page; anything laid out by a parent keeps the
   parent's spacing and nothing else. */
.sirc-detail-main > .sirc-card + .sirc-card,
.sirc-detail-side > .sirc-card + .sirc-card,
.sirc-kpi-grid > .sirc-card + .sirc-card,
.sirc-stat-row > .sirc-card + .sirc-card,
.sirc-pipeline > .sirc-card + .sirc-card,
.rz-stack > .sirc-card + .sirc-card {
    margin-top: 0;
}

.sirc-kpi-tile__label {
    font-size: var(--text-sm);
    color: var(--neutral-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sirc-kpi-tile__value {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--neutral-900);
    line-height: 1.1;
}

/* An unavailable rate is deliberately muted rather than rendered as a large zero,
   which would read as a period with nothing wrong in it. */
.sirc-kpi-tile__value--unavailable { color: var(--neutral-400); }

.sirc-kpi-tile__note {
    font-size: var(--text-xs);
    color: var(--neutral-600);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.sirc-fatality-totals {
    display: flex;
    gap: var(--space-6);
    flex-wrap: wrap;
    padding-top: var(--space-4);
    border-top: 1px solid var(--neutral-200);
    margin-top: var(--space-3);
}

.sirc-fatality-totals > div {
    display: flex;
    flex-direction: column;
}

.sirc-fatality-totals strong {
    font-size: var(--text-2xl);
    line-height: 1.1;
}

.sirc-map {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--neutral-200);
}

@media (max-width: 768px) {
    .sirc-kpi-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .sirc-fatality-totals { gap: var(--space-4); }
}

.sirc-insight-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.sirc-insight {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--neutral-300);
    background: var(--neutral-50);
    border-radius: var(--radius-md);
}

.sirc-insight span { color: var(--neutral-600); font-size: var(--text-sm); }

/* The severity is carried by the headline text as well as the colour, so the
   ordering still reads correctly without it. */
.sirc-insight--critical { border-left-color: var(--error-main);   background: var(--error-light); }
.sirc-insight--warning  { border-left-color: var(--warning-main); background: var(--warning-light); }
.sirc-insight--positive { border-left-color: var(--success-main); background: var(--success-light); }

/* The page title. A real <h1> rather than Radzen's TextStyle.H4, which rendered an
   <h4> and left every page without a top-level heading - so anyone navigating by
   heading had nothing to land on. The visual weight is unchanged. */
/* The second .sirc-page-title declaration used to live here and forced color:#fff on
   every use, which made the class silently unusable outside a gradient header - white
   text on an off-white page. The colour now comes from context instead; see the base
   rule and the descendant rule beside it. */

/* Off-screen until focused, rather than display:none - a hidden element cannot take
   focus, so hiding it that way would remove the only thing it is for. */
.sirc-skip-link {
    position: absolute;
    left: -9999px;
    top: var(--space-2);
    z-index: 1000;
    padding: var(--space-3) var(--space-4);
    background: var(--primary-600);
    color: #fff;
    border-radius: var(--radius-md);
    font-weight: 600;
    text-decoration: none;
}

.sirc-skip-link:focus {
    left: var(--space-4);
    outline: 3px solid var(--accent-400);
    outline-offset: 2px;
}

/* ── Approval chains ────────────────────────────────────────────────────────
   Used by the workflow admin editor and by the chain panel on an incident. A
   chain is read top to bottom, so both are laid out as a vertical list of
   numbered rungs rather than a grid.
   ───────────────────────────────────────────────────────────────────────── */

.sirc-approval-level {
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    background: var(--neutral-0);
}

.sirc-approval-level__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.sirc-approval-level__number {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background: var(--primary-50);
    color: var(--primary-700);
}

.sirc-approval-level__title {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sirc-approval-level__mode {
    font-size: 0.8125rem;
    color: var(--neutral-500);
}

.sirc-approval-level__actions {
    flex: 0 0 auto;
    display: flex;
    gap: 0.25rem;
}

.sirc-approval-level__people {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: var(--space-3) 0 0 2.75rem;
}

.sirc-approval-level__add {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: var(--space-3) 0 0 2.75rem;
}

.sirc-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem 0.25rem 0.75rem;
    border-radius: 999px;
    background: var(--neutral-100);
    color: var(--neutral-700);
    font-size: 0.8125rem;
}

.sirc-chip em {
    color: var(--neutral-500);
    font-style: normal;
}

/* The chain as it appears on a card: the same rungs, but with what each person
   said, which is the part somebody reading the history actually wants. */

.sirc-approval-chain {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.sirc-approval-chain__step {
    display: flex;
    gap: var(--space-3);
}

.sirc-approval-chain__marker {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    background: var(--neutral-100);
    color: var(--neutral-600);
}

.sirc-approval-chain__step--current .sirc-approval-chain__marker {
    background: var(--primary-50);
    color: var(--primary-700);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.sirc-approval-chain__step--approved .sirc-approval-chain__marker {
    background: var(--success-light);
    color: var(--success-dark);
}

.sirc-approval-chain__step--rejected .sirc-approval-chain__marker {
    background: var(--error-light);
    color: var(--error-dark);
}

.sirc-approval-chain__body {
    flex: 1 1 auto;
    min-width: 0;
}

.sirc-approval-chain__name {
    font-weight: 600;
}

.sirc-approval-chain__meta {
    font-size: 0.8125rem;
    color: var(--neutral-500);
}

.sirc-approval-chain__decision {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
}

.sirc-approval-chain__comment {
    display: block;
    color: var(--neutral-600);
    font-style: italic;
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .sirc-approval-level__people,
    .sirc-approval-level__add {
        margin-left: 0;
    }
}

/* A row of buttons inside a card. Radzen buttons carry no margin of their own, so
   without this they butt against each other and, once they wrap, the second row sits
   flush against the first - which reads as overlapping rather than merely tight. */
.sirc-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: var(--space-4);
}

.sirc-action-row .rz-button {
    flex: 0 0 auto;
}

/* ===== THE WELCOME SCREEN =====

   The one dark screen in the application, and the only page that owns a whole viewport.
   That is the point: it is the moment between signing in and starting work, and looking
   unlike every other page is how it reads as a threshold rather than as another screen.

   Laid out as a three-row grid that fills the viewport, so nothing scrolls on a laptop.
   The previous version put two large choices inside the login shell's narrow right-hand
   column, which is why it did. */

.welcome-shell {
    position: relative;
    min-height: 100dvh;
    background: #05282A;
    overflow: hidden;
}

/* Depth without an image: two large soft lights in the brand colours, and a fine grain
   over the top so the gradient does not band on a projector or a cheap panel. */
.welcome-shell__canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.welcome-shell__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.5;
}

.welcome-shell__glow--teal {
    width: 46rem;
    height: 46rem;
    top: -16rem;
    left: -10rem;
    background: radial-gradient(circle, #0D7377 0%, transparent 70%);
}

.welcome-shell__glow--amber {
    width: 38rem;
    height: 38rem;
    bottom: -14rem;
    right: -8rem;
    background: radial-gradient(circle, #D4872A 0%, transparent 70%);
    opacity: 0.32;
}

.welcome-shell__grain {
    position: absolute;
    inset: 0;
    opacity: 0.4;
    background-image:
        repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
}

.welcome {
    position: relative;
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 1rem;
    padding: 1.5rem clamp(1.25rem, 4vw, 3.5rem) 1.75rem;
    color: #fff;
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */

.welcome__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    animation: welcomeRise 0.5s ease-out both;
}

.welcome__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.welcome__brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.7rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #7FD4D8;
}

.welcome__brand-name {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.welcome__brand-name span { color: #D4872A; }

.welcome__account {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.45rem 0.4rem 0.55rem;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    backdrop-filter: blur(8px);
}

.welcome__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #0D7377, #0A5B5E);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.welcome__who {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.welcome__name {
    font-size: 0.86rem;
    font-weight: 600;
}

.welcome__email {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.55);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 14rem;
}

.welcome__signout {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.42rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease;
}

.welcome__signout:hover,
.welcome__signout:focus-visible {
    background: rgba(239, 83, 80, 0.9);
    color: #fff;
}

/* ── The middle ──────────────────────────────────────────────────────────── */

.welcome__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(1.25rem, 3vh, 2.25rem);
    min-height: 0;
}

.welcome__intro {
    text-align: center;
    animation: welcomeRise 0.5s ease-out 0.08s both;
}

.welcome__greeting {
    margin: 0 0 0.35rem;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7FD4D8;
}

.welcome__title {
    margin: 0 0 0.85rem;
    font-size: clamp(1.75rem, 3.4vw, 2.65rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

.welcome__roles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
    margin: 0;
}

.welcome__role {
    padding: 0.16rem 0.62rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

/* Stated rather than left blank: somebody with no roles can sign in and do nothing, and
   the reason should be on screen rather than discovered page by page. */
.welcome__role--none {
    background: rgba(212, 135, 42, 0.16);
    border-color: rgba(212, 135, 42, 0.4);
    color: #F0C48A;
}

/* ── The two choices ─────────────────────────────────────────────────────── */

.welcome__choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.75rem);
    max-width: 62rem;
    width: 100%;
    margin: 0 auto;
}

.choice {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    padding: clamp(1.25rem, 2.4vh, 1.9rem);
    text-align: left;
    font: inherit;
    color: #fff;
    cursor: pointer;
    overflow: hidden;
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.13);
    backdrop-filter: blur(10px);
    transition: transform 0.22s cubic-bezier(.2, .8, .3, 1),
                border-color 0.22s ease,
                box-shadow 0.22s ease;
}

.choice:nth-child(1) { animation: welcomeRise 0.55s ease-out 0.16s both; }
.choice:nth-child(2) { animation: welcomeRise 0.55s ease-out 0.24s both; }

/* The colour each process is known by, washed up from the bottom of its card so the two
   are told apart before a word is read. */
.choice__wash {
    position: absolute;
    inset: auto -20% -60% -20%;
    height: 16rem;
    opacity: 0.5;
    transition: opacity 0.25s ease;
}

.choice--hazard .choice__wash {
    background: radial-gradient(ellipse at center, rgba(212, 135, 42, 0.55) 0%, transparent 68%);
}

.choice--incident .choice__wash {
    background: radial-gradient(ellipse at center, rgba(13, 115, 119, 0.65) 0%, transparent 68%);
}

.choice:hover,
.choice:focus-visible {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36);
}

.choice:hover .choice__wash,
.choice:focus-visible .choice__wash { opacity: 0.85; }

.choice:active { transform: translateY(-2px); }

.choice > *:not(.choice__wash) { position: relative; }

.choice__head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
}

.choice__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 0.85rem;
    font-size: 1.5rem;
}

.choice--hazard .choice__icon {
    background: rgba(212, 135, 42, 0.2);
    border: 1px solid rgba(212, 135, 42, 0.42);
    color: #F0C48A;
}

.choice--incident .choice__icon {
    background: rgba(13, 115, 119, 0.28);
    border: 1px solid rgba(127, 212, 216, 0.4);
    color: #7FD4D8;
}

.choice__eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.choice__name {
    font-size: clamp(1.25rem, 1.9vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -0.015em;
}

.choice__line {
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
}

.choice__items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.15rem;
}

.choice__items span {
    padding: 0.14rem 0.55rem;
    border-radius: 0.4rem;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.72);
}

.choice__go {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: 0.75rem;
    font-size: 0.92rem;
    font-weight: 700;
}

.choice__go .rz-icon,
.choice__go i {
    font-size: 1.05rem;
    transition: transform 0.22s ease;
}

.choice:hover .choice__go .rz-icon,
.choice:hover .choice__go i { transform: translateX(4px); }

.choice--hazard .choice__go { color: #F0C48A; }
.choice--incident .choice__go { color: #7FD4D8; }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.welcome__foot {
    text-align: center;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
    animation: welcomeRise 0.5s ease-out 0.34s both;
}

.welcome__foot strong { color: rgba(255, 255, 255, 0.78); }

@keyframes welcomeRise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .welcome__top, .welcome__intro, .choice, .welcome__foot { animation: none; }
    .choice { transition: none; }
}

/* A phone has no room for two cards abreast, and scrolling a little there is normal.
   The desktop promise is the one worth keeping. */
@media (max-width: 860px) {
    .welcome { min-height: auto; padding-bottom: 2.5rem; }
    .welcome__choices { grid-template-columns: 1fr; max-width: 30rem; }
    .welcome__top { flex-wrap: wrap; }
    .welcome__email { max-width: 10rem; }
}

@media (max-width: 520px) {
    .welcome__who { display: none; }
    .welcome__signout span { display: none; }
}

/* A 1366x768 laptop leaves about 600px of viewport once the browser has taken its share,
   and that is the machine most people on a site actually use. The grid fits by
   definition; what does not is the cards' own content, so the least load-bearing parts
   of them come off rather than the page starting to scroll. */
@media (max-height: 720px) {
    .welcome { gap: 0.6rem; padding-top: 1rem; padding-bottom: 1rem; }
    .welcome__intro { margin-bottom: 0.25rem; }
    .welcome__title { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 0.5rem; }
    .welcome__greeting { margin-bottom: 0.15rem; }
    .choice { gap: 0.4rem; padding: 1.1rem 1.25rem; }
    .welcome__foot { padding-top: 0.25rem; }
}

@media (max-height: 620px) {
    /* The four sub-task chips are the reminder, not the decision. Below this the choice
       itself is all there is room for, and the choice is what the page is for. */
    .choice__items { display: none; }
    .welcome__roles { display: none; }
}

/* ── The switcher in the command bar, which lives on every other page ─────── */

.sirc-module-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: var(--space-4);
    padding: 0.3rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    font-size: 0.8rem;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.sirc-module-switch:hover,
.sirc-module-switch:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 900px) {
    .sirc-module-switch__label { display: none; }
    .sirc-module-switch { margin-left: var(--space-2); padding: 0.3rem; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   REPORTS
   The page was a header, a row of tiles and an unpadded tab strip with grids
   falling straight out of it. The content is good; it was the frame that was
   missing.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-sirc-page="reports"] + .sirc-filter-card { margin-top: calc(var(--space-5) * -1 + 4px); }

/* Radzen renders the panel with no padding at all, so a grid met the tab strip
   with nothing between them. */
.sirc-report-tabs .rz-tabview-panels {
    padding: var(--space-5) 0 0;
    background: transparent;
}

.sirc-report-tabs .rz-tabview-nav {
    border-bottom: 1px solid var(--border-subtle);
    gap: var(--space-1);
    flex-wrap: wrap;
}

/* A row of figures that belong together, for the headline numbers on a tab. Built
   as its own grid rather than a definition list: these are measurements meant to be
   compared across, and a two-column dt/dd stack makes that a vertical scan. */
.sirc-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--space-4);
}

.sirc-stat-block {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--neutral-50);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--primary-400);
}

.sirc-stat-block--warn { border-left-color: var(--warning-main); }
.sirc-stat-block--alert { border-left-color: var(--error-main); }

.sirc-stat-block__label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--neutral-600);
    margin-bottom: var(--space-2);
}

.sirc-stat-block__value {
    display: block;
    font-size: 1.6rem;
    font-weight: var(--font-bold);
    line-height: 1.1;
    color: var(--neutral-900);
    letter-spacing: -0.02em;
}

/* A figure that could not be computed is words, not a number, and it must not be
   set at display size as though it were one. */
.sirc-stat-block__value--absent {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--neutral-500);
    letter-spacing: 0;
    line-height: 1.4;
}

.sirc-stat-block__note {
    display: block;
    margin-top: var(--space-2);
    font-size: 0.75rem;
    color: var(--neutral-500);
}

@media (max-width: 640px) {
    .sirc-stat-block__value { font-size: 1.35rem; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   OPERATIONS DASHBOARD
   The pipeline: one row per stage of the six, a bar for the shape of the
   backlog and the numbers beside it for what somebody actually does about it.

   Drawn as bars rather than a chart library on purpose. It has to be readable
   without a legend, print, and survive a stage holding zero cards - which a
   donut cannot.
   ═══════════════════════════════════════════════════════════════════════════ */

.sirc-pipeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.sirc-pipeline__stage {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* An empty stage stays on the page rather than being dropped. A missing row would
   read as a stage that does not exist, when what it means is nothing is stuck there. */
.sirc-pipeline__stage--empty { opacity: 0.5; }

.sirc-pipeline__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.sirc-pipeline__name {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--neutral-800);
}

.sirc-pipeline__count {
    font-size: 1.05rem;
    font-weight: var(--font-bold);
    color: var(--neutral-900);
    font-variant-numeric: tabular-nums;
}

.sirc-pipeline__bar {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: var(--neutral-100);
    overflow: hidden;
}

.sirc-pipeline__fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary-500), var(--primary-400));
    transition: width var(--transition-base);
}

/* Late work is drawn over the same bar, from the same origin, so it reads as a
   part of the stage rather than as an extra stage of its own. */
.sirc-pipeline__fill--late {
    background: linear-gradient(90deg, var(--error-main), var(--warning-main));
}

.sirc-pipeline__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-4);
    font-size: 0.78rem;
    color: var(--neutral-600);
}

.sirc-pipeline__next { font-weight: var(--font-medium); }
.sirc-pipeline__wait { font-variant-numeric: tabular-nums; }
.sirc-pipeline__worst { color: var(--neutral-500); }

.sirc-pipeline__late {
    font-weight: var(--font-semibold);
    color: var(--error-main);
}

/* A note on a section header - a verdict that belongs with the heading rather than
   under it, set quietly so it does not compete with the heading itself. */
.sirc-section-header-stripe__note {
    margin-left: auto;
    font-weight: var(--font-normal);
    font-size: 0.78rem;
    color: var(--neutral-600);
}

.sirc-stage-pill {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 0.4rem;
    background: var(--primary-50, rgba(13, 115, 119, 0.08));
    color: var(--primary-700, var(--primary-500));
    font-size: 0.72rem;
    font-weight: var(--font-semibold);
    white-space: nowrap;
}

.sirc-attention__next {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    color: var(--neutral-500);
}

/* Said in words when there is nothing to measure. A KPI tile is set at display size
   and a sentence must not be, or it reads as a number. */
.sirc-kpi-tile__value--absent {
    font-size: var(--text-sm) !important;
    font-weight: var(--font-medium);
    color: var(--neutral-500);
    letter-spacing: 0;
}

.sirc-kpi-tile__unit {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--neutral-500);
    margin-left: 0.15rem;
}

.sirc-empty-note {
    margin: 0;
    padding: var(--space-4) 0;
    font-size: var(--text-sm);
    color: var(--neutral-500);
}


/* ═══════════════════════════════════════════════════════════════════════════
   WORK TILES, OVERDUE LIST, TIMELINE ENTRY

   These were written in markup and never in CSS. WorkTile renders six classes -
   sirc-work-tile and its five children - and SafetyHome renders seven of them in
   a .sirc-worklist on the landing page. None of the seven class names existed in
   any stylesheet, so the primary call to action of the whole application was a
   bare anchor with unstyled spans. Nothing errors when a class is missing, which
   is why it survived.
   ═══════════════════════════════════════════════════════════════════════════ */

.sirc-worklist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--space-3);
}

/* A tile is a link, not a statistic: everything in this panel can be acted on, so
   the whole surface is the target rather than a word inside it. */
.sirc-work-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition-base),
                box-shadow var(--transition-base),
                transform var(--transition-base);
}

.sirc-work-tile:hover,
.sirc-work-tile:focus-visible {
    border-color: var(--primary-200);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.sirc-work-tile__icon {
    color: var(--primary-500);
    font-size: 1.25rem;
    margin-bottom: var(--space-1);
}

.sirc-work-tile__count {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    line-height: 1.05;
    color: var(--neutral-900);
    font-variant-numeric: tabular-nums;
}

.sirc-work-tile__label {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--neutral-800);
}

.sirc-work-tile__detail {
    font-size: var(--text-xs);
    color: var(--neutral-500);
}

/* Urgent means somebody else is blocked until this is dealt with. Carried by a rail
   and by the count's colour, never by colour alone - the label still says what it is. */
.sirc-work-tile--urgent {
    border-color: var(--accent-200);
    background: var(--accent-50);
}

.sirc-work-tile--urgent::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    background: var(--accent-500);
}

.sirc-work-tile--urgent .sirc-work-tile__icon,
.sirc-work-tile--urgent .sirc-work-tile__count {
    color: var(--accent-700);
}

.sirc-work-tile--urgent:hover,
.sirc-work-tile--urgent:focus-visible {
    border-color: var(--accent-500);
}

/* The overdue list sits under the counts on the home page. A list of links, so the
   browser's bullet and margin have to go. */
.sirc-overdue-list {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.sirc-overdue-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--text-sm);
}

.sirc-overdue-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.sirc-overdue-list a {
    font-weight: var(--font-semibold);
    color: var(--primary-600);
    text-decoration: none;
}

.sirc-overdue-list a:hover {
    text-decoration: underline;
}

/* One derogation on the action details page: a due date moved, by whom and why. */
.sirc-timeline-entry {
    position: relative;
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--neutral-50);
    border: 1px solid var(--border-subtle);
    font-size: var(--text-sm);
}

.sirc-timeline-entry::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    background: var(--primary-400);
}

.sirc-timeline-entry strong {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--neutral-900);
}