/* ASP Alerts Dashboard - CCHMC Theme (Refreshed) */

:root {
    /* CCHMC Brand Colors - vibrant palette from logo */
    --color-primary: #0891B2;           /* Vibrant teal/cyan - main brand color */
    --color-primary-dark: #0E7490;
    --color-primary-light: #22D3EE;
    --color-secondary: #A4367B;         /* Magenta/pink - accent color */
    --color-secondary-dark: #831843;
    --color-secondary-light: #EC4899;
    --color-tertiary: #059669;          /* Fresh green - from logo swoosh */
    --color-tertiary-light: #34D399;
    --color-accent: #E0F2FE;            /* Light cyan tint */
    --color-accent-dark: #BAE6FD;

    /* Semantic Colors */
    --color-success: #059669;           /* Green */
    --color-success-light: #D1FAE5;
    --color-warning: #D97706;           /* Amber/orange */
    --color-warning-light: #FEF3C7;
    --color-danger: #DC2626;            /* Clear red for alerts */
    --color-danger-light: #FEE2E2;
    --color-info: #0891B2;              /* Teal */
    --color-info-light: #CFFAFE;

    /* Neutrals - cooler tones */
    --color-white: #ffffff;
    --color-gray-50: #F8FAFC;
    --color-gray-100: #F1F5F9;
    --color-gray-200: #E2E8F0;
    --color-gray-300: #CBD5E1;
    --color-gray-400: #94A3B8;
    --color-gray-500: #64748B;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1E293B;
    --color-gray-900: #0F172A;

    /* Shadows - softer, more modern */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 40px -10px rgba(0, 0, 0, 0.15);

    /* Border radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: var(--color-gray-800);
    background: linear-gradient(180deg, var(--color-gray-50) 0%, var(--color-gray-100) 50%, var(--color-accent) 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

/* ============================================
   Navigation
   ============================================ */
.navbar {
    background: linear-gradient(135deg, var(--color-gray-800) 0%, var(--color-gray-900) 100%);
    color: var(--color-white);
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-lg);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 3px solid var(--color-primary);
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-brand a {
    color: var(--color-white);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.25rem;
    padding: 1rem 0;
}

.nav-about {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--color-white) !important;
    padding: 0.5rem 1rem !important;
    background: #0891B2;
    border: none;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.nav-about:hover {
    background: #0E7490;
}

.nav-shield {
    width: 28px;
    height: 28px;
}

.nav-links {
    display: flex;
    gap: 0.5rem;
}

.nav-links a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    padding: 1rem 1.25rem;
    font-weight: 500;
    transition: all var(--transition-fast);
    border-bottom: 3px solid transparent;
}

.nav-links a:hover {
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.1);
}

.nav-links a.active {
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.1);
    border-bottom-color: var(--color-primary-light);
}

.nav-divider {
    color: rgba(255, 255, 255, 0.3);
    padding: 1rem 0.5rem;
    user-select: none;
}

.nav-switch {
    color: rgba(255, 255, 255, 0.6) !important;
    font-style: italic;
}

.nav-switch:hover {
    color: var(--color-white) !important;
}

/* Quick links to other dashboards */
.nav-au-ar,
.nav-nhsn {
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--radius-sm);
    margin-left: 0.5rem;
    font-size: 0.8rem;
}

.nav-au-ar {
    background: rgba(124, 58, 237, 0.7) !important;  /* Purple for AU/AR */
}

.nav-au-ar:hover {
    background: rgba(124, 58, 237, 0.9) !important;
}

.nav-nhsn {
    background: rgba(5, 150, 105, 0.7) !important;  /* Green for HAI */
}

.nav-nhsn:hover {
    background: rgba(5, 150, 105, 0.9) !important;
}

.nav-alerts {
    background: rgba(220, 38, 38, 0.7) !important;  /* Red for Alerts */
}

.nav-alerts:hover {
    background: rgba(220, 38, 38, 0.9) !important;
}

.nav-dashboards {
    background: rgba(8, 145, 178, 0.7) !important;  /* Teal for Dashboards */
}

.nav-dashboards:hover {
    background: rgba(8, 145, 178, 0.9) !important;
}

.nav-home {
    background: rgba(100, 116, 139, 0.7) !important;  /* Gray for Home */
}

.nav-home:hover {
    background: rgba(100, 116, 139, 0.9) !important;
}

/* ============================================
   Disclaimer Banner
   ============================================ */
.disclaimer-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, var(--color-gray-800) 0%, var(--color-gray-900) 100%);
    color: rgba(255, 255, 255, 0.85);
    padding: 0.75rem 1.5rem;
    text-align: center;
    font-size: 0.875rem;
    border-top: 3px solid var(--color-primary);
    z-index: 99;
}

.disclaimer-banner strong {
    color: var(--color-white);
}

/* Add padding to body to prevent content from being hidden behind fixed banner */
body {
    padding-bottom: 3.5rem;
}

/* ============================================
   Container & Layout
   ============================================ */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

/* ============================================
   Page Header
   ============================================ */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-gray-800);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ============================================
   Stats Summary Cards
   ============================================ */
.stats-summary {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.stat {
    background: var(--color-white);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-gray-200);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all var(--transition-fast);
}

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

.stat-number {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary-dark);
}

.stat-label {
    color: var(--color-gray-600);
    font-weight: 500;
}

/* Large stat cards for dashboard */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
    border-left: 4px solid var(--color-primary);
    transition: all var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, transparent 50%, var(--color-accent) 50%);
    opacity: 0.5;
    border-radius: 0 0 0 100%;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.stat-card.critical {
    border-left-color: var(--color-danger);
}
.stat-card.critical::before {
    background: linear-gradient(135deg, transparent 50%, var(--color-danger-light) 50%);
}

.stat-card.warning {
    border-left-color: var(--color-warning);
}
.stat-card.warning::before {
    background: linear-gradient(135deg, transparent 50%, var(--color-warning-light) 50%);
}

.stat-card.success {
    border-left-color: var(--color-success);
}
.stat-card.success::before {
    background: linear-gradient(135deg, transparent 50%, var(--color-success-light) 50%);
}

.stat-card.info {
    border-left-color: var(--color-secondary);
}
.stat-card.info::before {
    background: linear-gradient(135deg, transparent 50%, rgba(164, 54, 123, 0.1) 50%);
}

.stat-card-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-gray-800);
    line-height: 1;
}

.stat-card-label {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    margin-top: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================
   Filters
   ============================================ */
.filters {
    background: var(--color-white);
    padding: 1.25rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-gray-200);
}

.filter-form {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.filter-form label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-gray-700);
    font-weight: 500;
}

.filter-form select,
.filter-form input[type="text"] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    transition: all var(--transition-fast);
}

.filter-form select:focus,
.filter-form input[type="text"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(143, 68, 105, 0.1);
}

/* ============================================
   Flash Messages
   ============================================ */
.flash-message {
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: slideIn 0.3s ease;
}

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

.flash-success {
    background: var(--color-success-light);
    color: #047857;
    border: 1px solid var(--color-success);
}

.flash-success::before {
    content: "\2713";
    font-weight: bold;
}

.flash-error {
    background: var(--color-danger-light);
    color: var(--color-danger);
    border: 1px solid var(--color-danger);
}

.flash-error::before {
    content: "\2717";
    font-weight: bold;
}

/* ============================================
   Tables
   ============================================ */
.alerts-table,
.audit-table {
    width: 100%;
    background: var(--color-white);
    border-collapse: collapse;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.alerts-table th,
.alerts-table td,
.audit-table th,
.audit-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-gray-200);
}

.alerts-table th,
.audit-table th {
    background: var(--color-gray-50);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-600);
}

.alerts-table tbody tr {
    transition: all var(--transition-fast);
}

.alerts-table tbody tr:hover {
    background: var(--color-gray-50);
}

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

.alerts-table a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

.alerts-table a:hover {
    text-decoration: underline;
}

/* Ensure buttons in tables have white text */
.alerts-table a.btn,
.audit-table a.btn,
table a.btn {
    color: var(--color-white) !important;
    text-decoration: none;
}

.alerts-table a.btn:hover,
.audit-table a.btn:hover,
table a.btn:hover {
    text-decoration: none;
}

/* Severity row highlighting */
.severity-critical {
    border-left: 4px solid var(--color-danger) !important;
    background: rgba(192, 57, 43, 0.03);
}

.severity-warning {
    border-left: 4px solid var(--color-warning) !important;
    background: rgba(201, 162, 39, 0.03);
}

.severity-info {
    border-left: 4px solid var(--color-info) !important;
}

.resolved {
    opacity: 0.6;
}

/* ============================================
   Badges
   ============================================ */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.badge-critical {
    background: linear-gradient(135deg, var(--color-danger) 0%, #B91C1C 100%);
    color: var(--color-white);
}

.badge-warning {
    background: linear-gradient(135deg, var(--color-warning) 0%, #B45309 100%);
    color: var(--color-white);
}

.badge-info {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
}

.badge-status-pending {
    background: linear-gradient(135deg, var(--color-gray-400) 0%, var(--color-gray-500) 100%);
    color: var(--color-white);
}

.badge-status-sent {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
}

.badge-status-acknowledged {
    background: linear-gradient(135deg, var(--color-success) 0%, #047857 100%);
    color: var(--color-white);
}

.badge-status-snoozed {
    background: linear-gradient(135deg, var(--color-warning) 0%, #B45309 100%);
    color: var(--color-white);
}

.badge-status-resolved {
    background: var(--color-gray-300);
    color: var(--color-gray-700);
}

/* Coverage status badges for bacteremia alerts */
.badge-coverage-inadequate {
    background: var(--color-danger);
    color: var(--color-white);
}

.badge-coverage-partial {
    background: var(--color-warning);
    color: var(--color-gray-900);
}

.badge-coverage-adequate {
    background: var(--color-secondary);
    color: var(--color-white);
}

/* Indication classification badges */
.badge-classification-N {
    background: linear-gradient(135deg, var(--color-danger) 0%, #B91C1C 100%);
    color: var(--color-white);
}

.badge-classification-U {
    background: linear-gradient(135deg, var(--color-gray-500) 0%, var(--color-gray-600) 100%);
    color: var(--color-white);
}

.badge-classification-S {
    background: linear-gradient(135deg, var(--color-warning) 0%, #B45309 100%);
    color: var(--color-white);
}

.badge-classification-A,
.badge-classification-P,
.badge-classification-FN {
    background: linear-gradient(135deg, var(--color-success) 0%, #047857 100%);
    color: var(--color-white);
}

.badge-success {
    background: linear-gradient(135deg, var(--color-success) 0%, #047857 100%);
    color: var(--color-white);
}

.badge-secondary {
    background: var(--color-gray-300);
    color: var(--color-gray-700);
}

/* Indication alert type styling */
.alert-type-no-indication {
    color: var(--color-danger);
    font-weight: 600;
}

/* Recommendation text styling */
.recommendation-text {
    background: var(--color-warning-light);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-warning);
    font-style: italic;
}

/* ============================================
   Buttons
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-smooth);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    box-shadow: 0 2px 4px rgba(8, 145, 178, 0.3);
}

.btn:hover {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.4);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(8, 145, 178, 0.3);
}

.btn-small {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
}

.btn-secondary {
    background: linear-gradient(135deg, var(--color-gray-500) 0%, var(--color-gray-600) 100%);
    color: var(--color-white);
    box-shadow: 0 2px 4px rgba(100, 116, 139, 0.3);
}

.btn-secondary:hover {
    background: linear-gradient(135deg, var(--color-gray-600) 0%, var(--color-gray-700) 100%);
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.4);
}

.btn-success {
    background: linear-gradient(135deg, var(--color-success) 0%, #047857 100%);
    color: var(--color-white);
    box-shadow: 0 2px 4px rgba(5, 150, 105, 0.3);
}

.btn-success:hover {
    background: linear-gradient(135deg, var(--color-tertiary-light) 0%, var(--color-success) 100%);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.4);
}

.btn-teal {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    color: var(--color-white);
    box-shadow: 0 2px 4px rgba(13, 148, 136, 0.3);
}

.btn-teal:hover {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.4);
}

.btn-warning {
    background: linear-gradient(135deg, var(--color-warning) 0%, #B45309 100%);
    color: var(--color-white);
    box-shadow: 0 2px 4px rgba(217, 119, 6, 0.3);
}

.btn-danger {
    background: linear-gradient(135deg, var(--color-danger) 0%, #B91C1C 100%);
    color: var(--color-white);
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
}

.btn-danger:hover {
    background: linear-gradient(135deg, #EF4444 0%, var(--color-danger) 100%);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    box-shadow: none;
}

.btn-outline:hover {
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
}

.btn-help {
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
    color: var(--color-white);
}

.btn-help:hover {
    background: linear-gradient(135deg, #818CF8 0%, #6366F1 100%);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.btn-link {
    background: none;
    color: var(--color-primary);
    padding: 0.5rem;
    font-weight: 500;
    box-shadow: none;
}

.btn-link:hover {
    background: none;
    text-decoration: underline;
    box-shadow: none;
    transform: none;
}

/* ============================================
   Alert Detail Layout (Two-Column)
   ============================================ */
.alert-detail-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.alert-detail-main {
    min-width: 0;
}

.alert-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.action-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-md);
}

.action-card h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-gray-700);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-gray-200);
}

.action-card .form-group {
    margin-bottom: 1rem;
}

.action-card .form-group:last-of-type {
    margin-bottom: 1rem;
}

.action-buttons-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.action-buttons-vertical form {
    width: 100%;
}

.btn-block {
    width: 100%;
    display: flex;
    justify-content: center;
}

.resolve-card-highlight {
    border: 2px solid var(--color-primary);
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.05) 0%, rgba(14, 116, 144, 0.08) 100%);
}

.resolve-card-highlight h3 {
    color: var(--color-primary-dark);
    font-size: 1rem;
    border-bottom: 2px solid var(--color-primary);
}

.resolved-card {
    background: var(--color-success-light);
    border-left: 4px solid var(--color-success);
}

.resolved-card h3 {
    color: #047857;
    border-bottom-color: var(--color-success);
}

.resolution-dl {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.resolution-dl dt {
    font-weight: 600;
    color: var(--color-gray-600);
}

.resolution-dl dd {
    margin: 0;
}

.notes-content-small {
    background: var(--color-white);
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    white-space: pre-wrap;
    margin: 0;
    max-height: 100px;
    overflow-y: auto;
}

/* ============================================
   Alert Detail Card
   ============================================ */
.alert-detail-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    margin-bottom: 0;
    overflow: hidden;
    padding: 1.5rem;
}

.alert-header {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--color-gray-200);
    background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-white) 100%);
}

.alert-id {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.alert-type {
    font-size: 0.75rem;
    color: var(--color-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.alert-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-gray-800);
}

.alert-body {
    padding: 2rem;
}

.info-section {
    margin-bottom: 2rem;
}

.info-section h3 {
    font-size: 0.875rem;
    margin-bottom: 1rem;
    color: var(--color-primary-dark);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 0.5rem;
}

.info-section dl {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 0.75rem;
}

.info-section dt {
    font-weight: 600;
    color: var(--color-gray-600);
    font-size: 0.875rem;
}

.info-section dd {
    margin: 0;
    color: var(--color-gray-800);
}

.notes-content {
    background: var(--color-gray-50);
    padding: 1rem;
    border-radius: var(--radius-md);
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 0.875rem;
    border-left: 3px solid var(--color-primary);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* ============================================
   Alert Actions
   ============================================ */
.alert-actions {
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--color-gray-200);
    background: var(--color-gray-50);
}

.alert-actions h3 {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--color-gray-700);
}

.action-buttons {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

/* ============================================
   Forms
   ============================================ */
.resolve-section,
.note-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-gray-300);
}

.resolve-section h3,
.note-section h4 {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--color-gray-700);
}

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

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-gray-700);
}

.form-select,
.form-textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.875rem;
    transition: all var(--transition-fast);
}

.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(143, 68, 105, 0.1);
}

.form-select {
    background-color: var(--color-white);
    cursor: pointer;
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

/* ============================================
   Resolution Info
   ============================================ */
.resolution-info {
    background: var(--color-success-light);
    padding: 1.5rem;
    border-radius: var(--radius-md);
    margin-top: 1.5rem;
    border-left: 4px solid var(--color-success);
}

.resolution-info h3 {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: #047857;
}

.resolution-info dl {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 0.5rem;
}

.resolution-info dt {
    font-weight: 600;
    color: var(--color-gray-600);
}

.resolution-info dd {
    margin: 0;
}

/* ============================================
   Audit Section
   ============================================ */
.audit-section {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
}

.audit-section h3 {
    margin-bottom: 1rem;
    color: var(--color-gray-700);
    font-size: 1rem;
}

/* ============================================
   Empty State
   ============================================ */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--color-gray-500);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.empty-state::before {
    content: "\2713";
    display: block;
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--color-success);
    opacity: 0.6;
}

.empty-state p {
    font-size: 1.125rem;
}

/* ============================================
   Error Page
   ============================================ */
.error-page {
    text-align: center;
    padding: 4rem 2rem;
}

.error-page h1 {
    margin-bottom: 1rem;
    color: var(--color-gray-800);
}

.error-page p {
    margin-bottom: 0.5rem;
    color: var(--color-gray-600);
}

.error-page code {
    background: var(--color-gray-100);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
}

.error-page .btn {
    margin-top: 2rem;
}

/* ============================================
   Footer
   ============================================ */
.footer {
    text-align: center;
    padding: 2rem;
    padding-bottom: 4rem; /* Extra padding for fixed disclaimer */
    color: var(--color-gray-500);
    font-size: 0.875rem;
}

.footer p {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* ============================================
   Relative Time
   ============================================ */
.time-relative {
    color: var(--color-gray-600);
    font-size: 0.875rem;
}

.time-relative[data-urgent="true"] {
    color: var(--color-danger);
    font-weight: 600;
}

/* ============================================
   Auto-refresh Indicator
   ============================================ */
.refresh-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-gray-500);
    padding: 0.5rem 1rem;
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.refresh-indicator .dot {
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ============================================
   Patient Info
   ============================================ */
.patient-info {
    line-height: 1.4;
}

.patient-name {
    font-weight: 600;
    color: var(--color-gray-800);
}

.patient-mrn {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 1024px) {
    .container {
        padding: 1.5rem;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .alert-detail-layout {
        grid-template-columns: 1fr;
    }

    .alert-detail-sidebar {
        order: -1;
    }
}

@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        padding: 0;
    }

    .nav-brand a {
        padding: 1rem;
    }

    .nav-links {
        width: 100%;
        justify-content: center;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .nav-links a {
        flex: 1;
        text-align: center;
        padding: 0.75rem;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .stats-summary {
        width: 100%;
    }

    .stat {
        flex: 1;
        justify-content: center;
    }

    .filter-form {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-form label {
        flex-direction: column;
        align-items: flex-start;
    }

    .filter-form select,
    .filter-form input[type="text"] {
        width: 100%;
    }

    .info-section dl {
        grid-template-columns: 1fr;
    }

    .info-section dt {
        margin-top: 0.5rem;
    }

    .alert-detail-layout {
        grid-template-columns: 1fr;
    }

    .alert-detail-sidebar {
        order: -1;
    }

    .action-buttons {
        flex-direction: column;
    }

    .action-buttons .btn {
        width: 100%;
    }

    .alerts-table {
        font-size: 0.8125rem;
    }

    .alerts-table th,
    .alerts-table td {
        padding: 0.75rem 0.5rem;
    }

    /* Hide less important columns on mobile */
    .alerts-table th:nth-child(1),
    .alerts-table td:nth-child(1) {
        display: none;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 1rem;
    }

    .alert-header,
    .alert-body,
    .alert-actions {
        padding: 1rem;
    }

    .stat-card {
        padding: 1rem;
    }

    .stat-card-value {
        font-size: 2rem;
    }
}

/* ============================================
   Reports Page
   ============================================ */

/* Stat cards for reports summary */
.stat-card .stat-value {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    line-height: 1;
    position: relative;
    z-index: 1;
}

.stat-card .stat-label {
    font-size: 0.75rem;
    color: var(--color-gray-600);
    margin-top: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    z-index: 1;
}

/* Reports two-column layout */
.reports-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 1.5rem;
}

.reports-main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

.reports-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Report cards */
.report-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
}

.report-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-gray-700);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-primary);
}

/* Bar chart */
.chart-container {
    overflow-x: auto;
}

.bar-chart {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bar-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bar-label {
    width: 80px;
    font-size: 0.75rem;
    color: var(--color-gray-600);
    text-align: right;
    flex-shrink: 0;
}

.bar-wrapper {
    flex: 1;
    background: var(--color-gray-100);
    border-radius: var(--radius-sm);
    height: 24px;
    overflow: hidden;
}

.bar {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    height: 100%;
    border-radius: var(--radius-sm);
    min-width: 28px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.5rem;
    transition: width 0.3s ease;
}

.bar-value {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-white);
}

/* Breakdown table */
.breakdown-table {
    width: 100%;
    border-collapse: collapse;
}

.breakdown-table th,
.breakdown-table td {
    padding: 0.625rem;
    text-align: left;
    border-bottom: 1px solid var(--color-gray-200);
    font-size: 0.875rem;
}

.breakdown-table th {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-500);
    font-weight: 600;
}

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

.percentage-bar-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 120px;
}

.percentage-bar {
    height: 8px;
    background: linear-gradient(135deg, var(--color-secondary-dark) 0%, var(--color-secondary) 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.percentage-text {
    font-size: 0.75rem;
    color: var(--color-gray-600);
    min-width: 42px;
}

/* Severity breakdown */
.severity-breakdown,
.status-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.severity-item,
.status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.severity-item:last-child,
.status-item:last-child {
    border-bottom: none;
}

.severity-count,
.status-count {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-gray-800);
}

/* Response times */
.response-times {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
}

.response-times dt {
    font-size: 0.875rem;
    color: var(--color-gray-600);
}

.response-times dd {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-gray-800);
    text-align: right;
    margin: 0;
}

/* No data message */
.no-data {
    color: var(--color-gray-500);
    font-size: 0.875rem;
    font-style: italic;
    text-align: center;
    padding: 1rem;
}

/* Reports responsive */
@media (max-width: 1024px) {
    .reports-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .bar-label {
        width: 60px;
        font-size: 0.6875rem;
    }

    .percentage-bar-wrapper {
        min-width: 80px;
    }
}

/* ============================================
   Help Page
   ============================================ */
.help-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.help-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 1.5rem 2rem;
    box-shadow: var(--shadow-md);
}

.help-card h2 {
    font-size: 1.25rem;
    color: var(--color-primary-dark);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-primary);
}

.help-card h3 {
    font-size: 1rem;
    color: var(--color-gray-700);
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

.help-card h3:first-of-type {
    margin-top: 0;
}

.help-card p {
    color: var(--color-gray-700);
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

.help-card ol,
.help-card ul {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
    color: var(--color-gray-700);
}

.help-card li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.help-card ul ul {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.help-card pre {
    background: var(--color-gray-800);
    color: var(--color-gray-100);
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    overflow-x: auto;
    font-size: 0.8125rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.help-card code {
    font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;
    font-size: 0.8125rem;
}

.help-card p code,
.help-card td code {
    background: var(--color-gray-100);
    color: var(--color-primary-dark);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
}

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

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

.help-table th {
    background: var(--color-gray-50);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-600);
}

.help-table tbody tr:hover {
    background: var(--color-gray-50);
}

.architecture-diagram {
    background: var(--color-gray-50) !important;
    color: var(--color-gray-700) !important;
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
}

/* Workflow Steps Diagram */
.workflow-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-accent) 100%);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-200);
    margin-top: 1rem;
    overflow-x: auto;
}

.workflow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 160px;
    max-width: 190px;
}

.step-number {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.step-title {
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--color-gray-800);
    margin-bottom: 0.375rem;
}

.step-desc {
    font-size: 0.9375rem;
    color: var(--color-gray-600);
    line-height: 1.4;
    margin-bottom: 0.625rem;
}

.step-output {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    background: var(--color-white);
    padding: 0.375rem 0.625rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-gray-300);
}

.workflow-arrow {
    font-size: 2.5rem;
    color: var(--color-primary);
    font-weight: 900;
    padding-top: 0.25rem;
    flex-shrink: 0;
    text-shadow: 0 0 1px var(--color-primary);
}

@media (max-width: 768px) {
    .workflow-steps {
        flex-direction: column;
        align-items: center;
    }

    .workflow-arrow {
        transform: rotate(90deg);
        padding: 0.25rem 0;
    }

    .workflow-step {
        max-width: 200px;
    }
}

@media (max-width: 768px) {
    .help-card {
        padding: 1rem 1.25rem;
    }

    .help-table {
        font-size: 0.8125rem;
    }

    .help-table th,
    .help-table td {
        padding: 0.5rem;
    }
}

/* ============================================
   Drug-Bug Mismatch Styles
   ============================================ */
.susceptibility-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-top: 0.5rem;
}

.susceptibility-table th,
.susceptibility-table td {
    padding: 0.625rem 0.875rem;
    text-align: left;
    border-bottom: 1px solid var(--color-gray-200);
    font-size: 0.8125rem;
}

.susceptibility-table th {
    background: var(--color-gray-50);
    font-weight: 600;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-600);
}

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

/* Row highlighting based on susceptibility result */
.susceptibility-table tr.susc-s {
    background: rgba(5, 150, 105, 0.05);
}

.susceptibility-table tr.susc-i {
    background: rgba(217, 119, 6, 0.05);
}

.susceptibility-table tr.susc-r {
    background: rgba(220, 38, 38, 0.05);
}

/* Susceptibility result badges - global styles */
.susc-result {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.susc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.susc-badge.susc-s {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

.susc-badge.susc-i {
    background: var(--color-warning-light);
    color: var(--color-warning-dark);
}

.susc-badge.susc-r {
    background: var(--color-danger-light);
    color: var(--color-danger-dark);
}

.susc-text {
    color: var(--color-gray-600);
    font-size: 0.8125rem;
}

/* Allergy exclusion styling for susceptibilities */
.susceptibility-table tr.allergy-excluded {
    opacity: 0.7;
}

.allergy-icon {
    color: var(--color-warning);
    margin-left: 0.25rem;
}

.allergy-note {
    padding: 0.5rem;
    color: var(--color-warning-dark);
    background: var(--color-warning-light);
    border-radius: var(--radius-sm);
    margin-top: 0.5rem;
}

/* Culture card styles */
.culture-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1rem;
}

.culture-card:last-child {
    margin-bottom: 0;
}

.culture-card .culture-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-gray-200);
}

.culture-card .organism-name {
    font-weight: 600;
    color: var(--color-teal-700);
}

.culture-card .culture-date {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
}

.culture-card .culture-title {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.culture-card .specimen-type {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--color-gray-500);
}

.culture-list h3 {
    margin-bottom: 1rem;
}

/* Antibiotic mismatch items in detail view */
.abx-mismatch-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    flex-wrap: wrap;
}

.abx-mismatch-item:not(:last-child) {
    border-bottom: 1px solid var(--color-gray-200);
    margin-bottom: 0.25rem;
}

/* Mismatch type badges */
.badge-resistant {
    background: linear-gradient(135deg, var(--color-danger) 0%, #B91C1C 100%);
    color: var(--color-white);
}

.badge-intermediate {
    background: linear-gradient(135deg, var(--color-warning) 0%, #B45309 100%);
    color: var(--color-white);
}

.badge-no_coverage {
    background: linear-gradient(135deg, var(--color-gray-500) 0%, var(--color-gray-600) 100%);
    color: var(--color-white);
}

.badge-danger {
    background: linear-gradient(135deg, var(--color-danger) 0%, #B91C1C 100%);
    color: var(--color-white);
}

/* ============================================
   Alert Detail Page - Compact Layout (Scoped)
   ============================================ */
.alert-detail-page .alert-header {
    padding: 0.75rem 1.25rem;
}

.alert-detail-page .alert-id {
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.alert-detail-page .alert-title {
    font-size: 1.25rem;
}

.alert-detail-page .alert-body {
    padding: 1rem 1.25rem;
}

.alert-detail-page .alert-detail-card {
    padding: 0.75rem;
}

.alert-detail-page .info-section {
    margin-bottom: 0.75rem;
}

.alert-detail-page .info-section h3 {
    font-size: 0.8125rem;
    margin-bottom: 0.375rem;
    padding-bottom: 0.25rem;
}

.alert-detail-page .info-section dl {
    grid-template-columns: 140px 1fr;
    gap: 0.25rem 0.75rem;
}

.alert-detail-page .info-section dt {
    font-size: 0.875rem;
}

.alert-detail-page .info-section dd {
    font-size: 0.9375rem;
}

/* Two-column row for patient/timeline */
.alert-detail-page .info-row-compact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-gray-200);
}

.alert-detail-page .info-row-compact .info-section {
    margin-bottom: 0;
}

/* Susceptibility badge - colored square */
.alert-detail-page .susc-result {
    display: flex;
    align-items: center;
}

.alert-detail-page .susc-badge {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.875rem;
    margin-right: 0.5rem;
}

.alert-detail-page .susc-badge.susc-s {
    background: #d1fae5;
    color: #065f46;
}

.alert-detail-page .susc-badge.susc-i {
    background: #fef3c7;
    color: #92400e;
}

.alert-detail-page .susc-badge.susc-r {
    background: #fee2e2;
    color: #991b1b;
}

.alert-detail-page .susc-text {
    color: var(--color-gray-500);
    font-size: 0.875rem;
}

/* Larger font in susceptibility table */
.alert-detail-page .susceptibility-table {
    font-size: 1rem;
}

.alert-detail-page .susceptibility-table th {
    font-size: 0.9375rem;
    padding: 0.625rem 1rem;
}

.alert-detail-page .susceptibility-table td {
    padding: 0.625rem 1rem;
    font-size: 1rem;
}

.alert-detail-page .susceptibility-table .susc-badge {
    width: 1.75rem;
    height: 1.75rem;
    line-height: 1.75rem;
    font-size: 1rem;
}

.alert-detail-page .susceptibility-table .susc-text {
    font-size: 0.9375rem;
}

/* Recommendation box - pink/danger theme */
.alert-detail-page .recommendation-text {
    background: #fee2e2;
    border-left-color: var(--color-danger);
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    font-style: normal;
    font-weight: 600;
}

@media (max-width: 768px) {
    .alert-detail-page .info-row-compact {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* ============================================
   HAI Candidate Page - Compact Layout (Scoped)
   ============================================ */
.hai-candidate-page .alert-detail-card {
    padding: 1rem;
}

.hai-candidate-page .candidate-status-bar {
    margin-bottom: 0.75rem;
}

.hai-candidate-page .info-section {
    margin-bottom: 0.75rem;
}

.hai-candidate-page .info-section h3 {
    font-size: 0.8125rem;
    margin-bottom: 0.375rem;
    padding-bottom: 0.25rem;
}

.hai-candidate-page .info-section dl {
    grid-template-columns: 100px 1fr;
    gap: 0.25rem 0.75rem;
}

.hai-candidate-page .info-section dt {
    font-size: 0.875rem;
}

.hai-candidate-page .info-section dd {
    font-size: 0.9375rem;
}

/* Two-column row for patient/culture */
.hai-candidate-page .info-row-compact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-gray-200);
}

.hai-candidate-page .info-row-compact .info-section {
    margin-bottom: 0;
}

.hai-candidate-page .metric-value-inline {
    color: var(--color-primary);
    font-size: 1.25rem;
}

/* Single centered classification button */
.classification-buttons-single {
    display: flex;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.classification-buttons-single .btn {
    min-width: 200px;
}

@media (max-width: 768px) {
    .hai-candidate-page .info-row-compact {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* ============================================
   Shared Info Grid Pattern
   Used by: ABX Indications, Surgical Prophylaxis, HAI Detection
   ============================================ */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-value {
    font-size: 0.875rem;
    color: var(--color-gray-800);
}

.info-value.patient-mrn {
    font-family: monospace;
    font-weight: 600;
}

.info-value.medication-name {
    font-weight: 600;
    color: var(--color-primary);
}

/* ============================================
   Detail List Pattern (dl/dt/dd)
   Used by: ASP Alerts, HAI Candidate Detail
   ============================================ */
.detail-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1rem;
    margin: 0;
}

.detail-list dt {
    font-weight: 500;
    color: var(--color-gray-600);
    font-size: 0.875rem;
}

.detail-list dd {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-gray-800);
}

.detail-list-compact {
    gap: 0.25rem 0.75rem;
}

.detail-list-compact dt,
.detail-list-compact dd {
    font-size: 0.8rem;
}

/* ============================================
   Shared Evidence Sources Pattern
   Used by: ABX Indications, HAI Detection
   ============================================ */
.evidence-sources {
    border-left: 3px solid var(--color-success);
    padding: 1rem;
    background: var(--color-gray-50);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.evidence-item {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: 6px;
    padding: 0.75rem;
    margin-top: 0.75rem;
}

.evidence-item:first-of-type {
    margin-top: 0.5rem;
}

.evidence-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.badge-note-type {
    background: var(--color-primary);
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.evidence-date {
    font-size: 0.8rem;
    color: var(--color-gray-600);
}

.evidence-author {
    font-size: 0.8rem;
    color: var(--color-gray-600);
    font-style: italic;
}

.evidence-relevance {
    font-size: 0.85rem;
    color: var(--color-gray-700);
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
    border-left: 2px solid var(--color-gray-300);
}

.evidence-quotes {
    margin: 0;
    padding-left: 1.5rem;
    list-style: none;
}

.evidence-quotes .quote {
    font-style: italic;
    color: var(--color-gray-600);
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.evidence-quotes .quote::before {
    content: '"';
}

.evidence-quotes .quote::after {
    content: '"';
}

/* Supporting vs Contradicting evidence variants */
.evidence-sources.evidence-supporting {
    border-left-color: var(--color-success);
}

.evidence-sources.evidence-contradicting {
    border-left-color: var(--color-danger);
}

/* Badge variant for evidence source (HAI format) */
.badge-evidence-source {
    background: var(--color-gray-600);
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
}

/* ============================================
   Shared Extraction Metadata Pattern
   Used by: ABX Indications, HAI Detection
   ============================================ */
.extraction-meta {
    display: flex;
    gap: 1.5rem;
    font-size: 0.8rem;
    color: var(--color-gray-500);
    margin-top: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-gray-200);
    flex-wrap: wrap;
}

.extraction-meta .confidence,
.extraction-meta .model,
.extraction-meta .tokens,
.extraction-meta .notes-count {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.extraction-meta .notes-count {
    background: var(--color-gray-100);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

/* ============================================
   Shared Supporting Quotes Pattern (legacy)
   Used by: ABX Indications fallback
   ============================================ */
.supporting-quotes {
    border-left: 3px solid var(--color-primary);
    padding: 1rem;
    background: var(--color-gray-50);
    border-radius: 8px;
}

.supporting-quotes .quote {
    font-style: italic;
    color: var(--color-gray-600);
    margin-bottom: 0.5rem;
}

/* ============================================
   Shared Stats Grid Pattern
   Used by: All dashboards
   ============================================ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.stat-card.stat-primary {
    border-left: 4px solid var(--color-primary);
    background: linear-gradient(135deg, #E0F2FE 0%, var(--color-white) 100%);
}
.stat-card.stat-primary .stat-value { color: var(--color-primary-dark); }

.stat-card.stat-success {
    border-left: 4px solid var(--color-success);
}
.stat-card.stat-success .stat-value { color: var(--color-success); }

.stat-card.stat-warning {
    border-left: 4px solid var(--color-warning);
}
.stat-card.stat-warning .stat-value { color: var(--color-warning); }

.stat-card.stat-danger {
    border-left: 4px solid var(--color-danger);
}
.stat-card.stat-danger .stat-value { color: var(--color-danger); }

.stat-card.stat-info {
    border-left: 4px solid var(--color-primary);
}

.stat-card.stat-critical {
    border-left: 4px solid var(--color-danger);
    background: linear-gradient(135deg, #FEE2E2 0%, var(--color-white) 100%);
}
.stat-card.stat-critical .stat-value { color: var(--color-danger); }

.stat-value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--color-gray-800);
}

.stat-value.stat-date {
    font-size: 1.25rem;
}

.stat-label {
    color: var(--color-gray-500);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.stat-sublabel {
    color: var(--color-gray-400);
    font-size: 0.75rem;
    margin-top: 0.125rem;
}

/* ============================================
   Shared HAI Type Badges
   Used by: HAI dashboards and reports
   ============================================ */
.badge-hai-clabsi {
    background: #dc2626;
    color: white;
}

.badge-hai-cauti {
    background: #f59e0b;
    color: white;
}

.badge-hai-ssi {
    background: #8b5cf6;
    color: white;
}

.badge-hai-vae {
    background: #3b82f6;
    color: white;
}

.badge-hai-cdi {
    background: #0d9488;
    color: white;
}

/* ============================================
   Shared Priority Badges
   Used by: ASP Metrics, Targets
   ============================================ */
.priority-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
}

.priority-high {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

.priority-medium {
    background: var(--color-warning-light);
    color: #d97706;
}

.priority-low {
    background: var(--color-success-light);
    color: var(--color-success);
}

.priority-none {
    background: var(--color-gray-100);
    color: var(--color-gray-500);
}

/* ============================================
   Shared Status Badges
   Used by: ASP Metrics, Interventions
   ============================================ */
.status-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

.status-identified {
    background: #fef3c7;
    color: #92400e;
}

.status-planned {
    background: #dbeafe;
    color: #1e40af;
}

.status-in_progress {
    background: #dcfce7;
    color: #166534;
}

.status-completed {
    background: var(--color-gray-100);
    color: var(--color-gray-700);
}

/* ============================================
   Shared Metric Rows
   Used by: Reports, Quality Metrics
   ============================================ */
.quality-metrics {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-gray-100);
}

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

.metric-label {
    color: var(--color-gray-500);
    font-size: 0.9rem;
}

.metric-value {
    font-weight: 600;
    font-size: 1.1rem;
}

.text-success { color: var(--color-success); }
.text-warning { color: #d97706; }
.text-danger { color: var(--color-danger); }

/* ============================================
   Shared Filter Forms
   Used by: Reports, List views
   ============================================ */
.filters {
    margin-bottom: 1.5rem;
}

.filter-form {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.filter-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--color-gray-600);
}

.filter-label select {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    background: var(--color-white);
}

.filter-label select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.1);
}

/* ============================================
   Shared Quick Links
   Used by: Dashboards
   ============================================ */
.quick-links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.quick-links-vertical {
    flex-direction: column;
}

.quick-links-vertical .btn {
    width: 100%;
    text-align: center;
}

/* ============================================
   Shared Bar Chart Pattern
   Used by: Reports
   ============================================ */
.chart-container {
    margin: 1rem 0;
}

.bar-chart {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bar-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.bar-label {
    flex: 0 0 80px;
    font-size: 0.8rem;
    color: var(--color-gray-600);
    text-align: right;
}

.bar-wrapper {
    flex: 1;
    height: 24px;
    background: var(--color-gray-100);
    border-radius: 4px;
    overflow: hidden;
}

.bar {
    height: 100%;
    border-radius: 4px;
    min-width: 4px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.5rem;
    transition: width 0.3s ease;
}

.bar-value {
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
}

.bar-primary {
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
}

.bar-hai {
    background: linear-gradient(90deg, #dc2626, #f87171);
}

.bar-success {
    background: linear-gradient(90deg, var(--color-success), #34d399);
}

/* ============================================
   Shared Dashboard/Report Cards
   Used by: All dashboards and reports
   ============================================ */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.dashboard-card,
.report-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
}

.dashboard-card h3,
.report-card h3 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: var(--color-gray-800);
}

.dashboard-card h4,
.report-card h4 {
    margin: 1rem 0 0.5rem 0;
    font-size: 0.9rem;
    color: var(--color-gray-600);
}

.card-subtitle {
    color: var(--color-gray-500);
    font-size: 0.875rem;
    margin-top: -0.5rem;
    margin-bottom: 1rem;
}

/* ============================================
   Shared Reports Layout
   Used by: hai_reports.html
   ============================================ */
.reports-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
}

.reports-main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.reports-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

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

    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Shared Data Tables
   Used by: All list views
   ============================================ */
.data-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

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

/* Ensure table fills available width in containers */
.section .data-table {
    min-width: 100%;
}

/* Allow first column (Patient) to take more space */
.data-table td:first-child,
.data-table th:first-child {
    min-width: 150px;
}

/* Make Organism and other text columns expand */
.data-table td:nth-child(3) {
    min-width: 120px;
}

.data-table th {
    background: var(--color-gray-50);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-gray-600);
    white-space: nowrap;
}

.data-table tr:hover {
    background: var(--color-gray-50);
}

.data-table .row-warning {
    background: var(--color-warning-light);
}

/* ============================================
   Shared Empty State
   Used by: All views
   ============================================ */
.empty-state {
    text-align: center;
    padding: 2rem;
    color: var(--color-gray-500);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
}

.empty-state a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* ============================================
   Shared Alert Boxes
   Used by: All views
   ============================================ */
.alert {
    padding: 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

.alert-success {
    background: var(--color-success-light);
    border: 1px solid var(--color-success);
    color: #065f46;
}

.alert-warning {
    background: var(--color-warning-light);
    border: 1px solid var(--color-warning);
    color: #92400e;
}

.alert-danger,
.alert-error {
    background: var(--color-danger-light);
    border: 1px solid var(--color-danger);
    color: #991b1b;
}

.alert-info {
    background: #E0F2FE;
    border: 1px solid var(--color-primary);
    color: var(--color-primary-dark);
}

/* ============================================
   HAI Type Breakdown (Reports Page)
   ============================================ */
.type-breakdown {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.type-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

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

.type-count {
    font-weight: 600;
    font-size: 1.25rem;
}

.type-bar-wrapper {
    height: 8px;
    background: var(--color-gray-100);
    border-radius: 4px;
    overflow: hidden;
}

.type-bar {
    height: 100%;
    border-radius: 4px;
    min-width: 4px;
}

.type-bar-clabsi { background: #dc2626; }
.type-bar-cauti { background: #f59e0b; }
.type-bar-ssi { background: #8b5cf6; }
.type-bar-vae { background: #3b82f6; }
.type-bar-cdi { background: #0d9488; }

/* ============================================
   Override List (Reports Page)
   ============================================ */
.override-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.override-item {
    padding: 0.75rem;
    background: var(--color-gray-50);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-warning);
}

.override-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.override-date {
    font-size: 0.8rem;
    color: var(--color-gray-500);
}

.override-details {
    font-size: 0.85rem;
    color: var(--color-gray-600);
    margin-bottom: 0.5rem;
}

.override-decision {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.arrow {
    color: var(--color-gray-400);
    font-weight: bold;
}

.override-notes {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--color-gray-200);
    color: var(--color-gray-500);
    font-size: 0.8rem;
}

/* ============================================
   Subsection Title (Reports Page)
   ============================================ */
.subsection-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-gray-500);
    margin: 1rem 0 0.5rem 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-gray-200);
}

/* ============================================
   Small Badges
   ============================================ */
.badge-sm {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
}

/* ============================================
   Section Containers
   ============================================ */
.section {
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.section:first-of-type {
    margin-top: 0;
}

.section h2 {
    color: var(--color-gray-800);
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

/* ============================================
   Button Variants
   ============================================ */
.btn-info {
    background: linear-gradient(135deg, #0891B2 0%, #0E7490 100%);
    color: white;
}

.btn-nhsn {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: white;
}

.btn-au-ar {
    background: linear-gradient(135deg, #A4367B 0%, #831843 100%);
    color: white;
}

.btn-small {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

/* ============================================
   Text Utilities
   ============================================ */
.text-muted {
    color: var(--color-gray-500);
}

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

/* ============================================
   Clinical Context Card
   MDR history, allergies, renal status alerts
   ============================================ */
.clinical-context-card {
    background: var(--color-white);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.clinical-context-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-gray-700);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-gray-200);
}

.context-section {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.75rem;
    background: var(--color-gray-50);
}

.context-section:last-of-type {
    margin-bottom: 0;
}

.context-section.mdr-section {
    background: var(--color-danger-light);
    border-left: 4px solid var(--color-danger);
}

.context-section.allergy-section {
    background: var(--color-warning-light);
    border-left: 4px solid var(--color-warning);
}

.context-section.allergy-section.critical {
    background: var(--color-danger-light);
    border-left: 4px solid var(--color-danger);
}

.context-section.renal-section {
    background: var(--color-info-light);
    border-left: 4px solid var(--color-info);
}

.section-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.section-content {
    flex: 1;
    min-width: 0;
}

.section-content strong {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-gray-800);
    margin-bottom: 0.5rem;
}

.mdr-badges,
.renal-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}

.mdr-details {
    margin: 0.5rem 0 0 0;
    padding-left: 1rem;
    font-size: 0.8rem;
    color: var(--color-gray-600);
}

.mdr-details li {
    margin-bottom: 0.25rem;
}

.allergy-list {
    margin: 0;
    padding-left: 1rem;
    font-size: 0.85rem;
}

.allergy-list li {
    margin-bottom: 0.375rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.allergy-reaction {
    font-size: 0.75rem;
    color: var(--color-gray-500);
    font-style: italic;
}

.renal-values {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
}

.renal-value {
    font-weight: 500;
    color: var(--color-gray-700);
}

.no-alerts {
    text-align: center;
    color: var(--color-gray-500);
    padding: 1rem;
    font-style: italic;
    margin: 0;
}

/* ============================================
   Allergy-Adjusted Recommendations
   ============================================ */
.allergy-adjusted-recommendation {
    margin-bottom: 0.75rem;
}

.allergy-warnings {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.allergy-warning-badge {
    display: inline-block;
    background: var(--color-warning-light);
    color: var(--color-gray-800);
    padding: 0.375rem 0.625rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    border-left: 3px solid var(--color-warning);
}

/* Strikethrough for excluded options */
.badge s {
    text-decoration: line-through;
    opacity: 0.7;
}

/* Susceptible options with allergy exclusions */
.recommendation-text .badge-danger {
    background: var(--color-danger-light);
    color: var(--color-danger);
    border: 1px solid var(--color-danger);
}

/* Allergy-excluded rows in susceptibility tables */
.allergy-excluded {
    background: var(--color-danger-light);
    opacity: 0.7;
}

.allergy-excluded td {
    text-decoration: line-through;
    color: var(--color-gray-500);
}

.allergy-icon {
    color: var(--color-warning);
    margin-left: 0.25rem;
}

.allergy-note {
    margin-top: 0.5rem;
    padding: 0.375rem 0.5rem;
    background: var(--color-warning-light);
    border-radius: var(--radius-sm);
    color: var(--color-gray-700);
}

/* ============================================
   Outbreak Detection Module
   ============================================ */

/* Severity Grid - 4 equal columns for severity cards */
.severity-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

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

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

/* Severity Card - bordered cards with severity-specific colors */
.severity-card {
    background: var(--color-white);
    border: 2px solid;
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-align: center;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

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

.severity-card.severity-empty {
    opacity: 0.5;
}

.severity-critical { border-color: var(--color-danger); }
.severity-high { border-color: #fd7e14; }
.severity-medium { border-color: var(--color-warning); }
.severity-low { border-color: var(--color-success); }

.severity-count {
    font-size: 2.5rem;
    font-weight: bold;
}

.severity-critical .severity-count { color: var(--color-danger); }
.severity-high .severity-count { color: #fd7e14; }
.severity-medium .severity-count { color: var(--color-warning); }
.severity-low .severity-count { color: var(--color-success); }

.severity-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-gray-500);
}

/* Severity Badges */
.badge-severity-critical { background-color: var(--color-danger); color: white; }
.badge-severity-high { background-color: #fd7e14; color: white; }
.badge-severity-medium { background-color: var(--color-warning); color: black; }
.badge-severity-low { background-color: var(--color-success); color: white; }

/* Type Badge - for infection type labels */
.badge-type {
    background-color: var(--color-primary);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
}

/* Case Count - pill-shaped counter */
.case-count {
    display: inline-block;
    background: var(--color-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-weight: bold;
}

/* Type Grid - responsive grid for type cards */
.type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.type-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    padding: 1rem;
    text-align: center;
    transition: transform var(--transition-fast);
}

.type-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.type-card .type-count {
    font-size: 2rem;
    font-weight: bold;
    color: var(--color-primary);
}

.type-card .type-label {
    font-size: 0.9rem;
    color: var(--color-gray-500);
}

/* Alert List - vertical list of alert items */
.alert-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.alert-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--radius-md);
    border-left: 4px solid;
}

.alert-item.alert-critical { border-color: var(--color-danger); background: var(--color-danger-light); }
.alert-item.alert-high { border-color: #fd7e14; background: #fff8f0; }
.alert-item.alert-medium { border-color: var(--color-warning); background: var(--color-warning-light); }
.alert-item.alert-low { border-color: var(--color-primary); background: var(--color-info-light); }

.alert-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
}

.alert-critical .alert-icon { background: var(--color-danger); color: white; }
.alert-high .alert-icon { background: #fd7e14; color: white; }
.alert-medium .alert-icon { background: var(--color-warning); color: black; }
.alert-low .alert-icon { background: var(--color-primary); color: white; }

.alert-item .alert-content { flex: 1; }
.alert-item .alert-title { font-weight: 600; margin-bottom: 0.25rem; }
.alert-item .alert-message { color: var(--color-gray-500); margin-bottom: 0.5rem; }
.alert-item .alert-meta { font-size: 0.85rem; color: var(--color-gray-500); }

/* ============================================
   MDRO Surveillance Module
   ============================================ */

/* MDRO Type Grid */
.mdro-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

/* MDRO Type Card */
.mdro-type-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-align: center;
    transition: transform var(--transition-fast);
}

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

.mdro-type-count {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--color-primary);
}

.mdro-type-label {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0.5rem 0;
}

.mdro-type-name {
    font-size: 0.85rem;
    color: var(--color-gray-500);
}

/* MDRO Type Colors */
.mdro-mrsa .mdro-type-count { color: var(--color-danger); }
.mdro-vre .mdro-type-count { color: #6f42c1; }
.mdro-cre .mdro-type-count { color: #d63384; }
.mdro-esbl .mdro-type-count { color: #fd7e14; }
.mdro-crpa .mdro-type-count { color: #0d6efd; }
.mdro-crab .mdro-type-count { color: var(--color-success); }

/* MDRO Badges */
.badge-mdro {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.85rem;
}

.badge-mrsa { color: var(--color-danger); background-color: var(--color-danger-light); }
.badge-vre { color: #6f42c1; background-color: #e8daef; }
.badge-cre { color: #d63384; background-color: #f8d7e8; }
.badge-esbl { color: #fd7e14; background-color: #ffe5d0; }
.badge-crpa { color: #0d6efd; background-color: #cfe2ff; }
.badge-crab { color: var(--color-success); background-color: var(--color-success-light); }

/* Unit Bars - horizontal bar chart for units */
.unit-bars {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.unit-bar-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.unit-name {
    width: 150px;
    font-weight: 500;
    text-align: right;
    flex-shrink: 0;
}

.unit-bar-container {
    flex: 1;
    background: var(--color-gray-100);
    border-radius: 4px;
    height: 24px;
}

.unit-bar {
    height: 100%;
    background: var(--color-primary);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.5rem;
    min-width: fit-content;
}

.unit-count {
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .unit-name {
        width: 100px;
        font-size: 0.875rem;
    }
}

/* ============================================
   Guideline Adherence Module
   ============================================ */

/* Dashboard Summary - horizontal stats row */
.dashboard-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Summary Card - stats card with icon */
.summary-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.summary-icon {
    font-size: 2rem;
}

.summary-content {
    flex: 1;
}

.summary-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-gray-800);
}

.summary-label {
    font-size: 0.875rem;
    color: var(--color-gray-600);
}

/* Guideline Cards - clickable cards for bundles */
.guideline-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.guideline-card {
    display: block;
    padding: 1rem;
    border-radius: var(--radius-md);
    background: var(--color-gray-50);
    border-left: 4px solid var(--color-secondary);
    text-decoration: none;
    color: inherit;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

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

.guideline-card h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    color: var(--color-gray-800);
}

.guideline-card p {
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
    color: var(--color-gray-600);
}

.bundle-stat {
    margin-bottom: 0.5rem;
}

/* Compliance Badge - percentage indicator */
.compliance-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.875rem;
}

.compliance-badge.success {
    background: var(--color-success-light);
    color: var(--color-success);
}

.compliance-badge.warning {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.compliance-badge.danger {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

/* Element Count Badge */
.element-count {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    background: var(--color-secondary);
    color: white;
}

/* Status Badges for Guideline Adherence */
.badge-status-active {
    background: var(--color-info-light);
    color: var(--color-primary);
}

.badge-status-complete {
    background: var(--color-success-light);
    color: var(--color-success);
}

/* ============================================
   Shared Section Card Styling
   ============================================ */

/* Section with card styling - used in guideline adherence and other dashboards */
.section.section-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
}

.section.section-card h2 {
    margin-top: 0;
}

.section-footer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-gray-200);
}

/* Summary icon color utilities */
.summary-icon.icon-success { color: var(--color-success); }
.summary-icon.icon-primary { color: var(--color-primary); }
.summary-icon.icon-warning { color: var(--color-warning); }
.summary-icon.icon-danger { color: var(--color-danger); }
.summary-icon.icon-info { color: var(--color-info); }

/* Page subtitle styling */
.page-header .subtitle,
.subtitle {
    color: var(--color-gray-500);
    font-size: 1rem;
    margin-top: 0.25rem;
}

/* Header actions - buttons in page header */
.header-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}


/* ==============================================
   Shared Component Styles (BEM)
   Supporting CSS for _components/ Jinja2 macros.
   These use BEM naming (--modifier, __element) to
   avoid conflicts with existing Bootstrap-style classes.
   ============================================== */

/* --- Stat Cards (BEM) --- */
.stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card.stat-card--red { border-left-color: var(--color-danger, #e74c3c); }
.stat-card.stat-card--yellow { border-left-color: var(--color-warning, #f39c12); }
.stat-card.stat-card--green { border-left-color: var(--color-success, #27ae60); }
.stat-card.stat-card--blue { border-left-color: var(--color-info, #3498db); }
.stat-card.stat-card--gray { border-left-color: var(--color-gray-400, #95a5a6); }
.stat-card.stat-card--teal { border-left-color: var(--color-primary, #00d4aa); }

.stat-card__icon {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.stat-card__value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-gray-800, #1E293B);
    line-height: 1;
}

.stat-card__title {
    font-size: 0.85rem;
    color: var(--color-gray-500, #64748B);
    margin-top: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-card__subtitle {
    font-size: 0.8rem;
    color: var(--color-gray-400, #94A3B8);
    margin-top: 0.25rem;
}

/* --- Badges (BEM) --- */
.badge.badge--red { background: var(--color-danger-light, #FEE2E2); color: var(--color-danger, #DC2626); }
.badge.badge--yellow { background: var(--color-warning-light, #FEF3C7); color: var(--color-warning, #D97706); }
.badge.badge--orange { background: rgba(230, 126, 34, 0.15); color: #e67e22; }
.badge.badge--green { background: var(--color-success-light, #D1FAE5); color: var(--color-success, #059669); }
.badge.badge--blue { background: var(--color-info-light, #CFFAFE); color: var(--color-info, #0891B2); }
.badge.badge--teal { background: rgba(8, 145, 178, 0.15); color: var(--color-primary, #0891B2); }
.badge.badge--gray { background: var(--color-gray-100, #F1F5F9); color: var(--color-gray-500, #64748B); }

/* Severity-level aliases for badge--critical, badge--high, etc. */
.badge.badge--critical { background: var(--color-danger-light, #FEE2E2); color: var(--color-danger, #DC2626); }
.badge.badge--high { background: rgba(230, 126, 34, 0.15); color: #e67e22; }
.badge.badge--medium { background: var(--color-warning-light, #FEF3C7); color: var(--color-warning, #D97706); }
.badge.badge--low { background: var(--color-success-light, #D1FAE5); color: var(--color-success, #059669); }

/* --- Empty States (BEM) --- */
.empty-state-container {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--color-gray-500, #64748B);
    background: var(--color-gray-50, #F8FAFC);
    border-radius: var(--radius-md, 10px);
    margin-top: 1rem;
}

.empty-state-container .empty-state__icon {
    font-size: 3rem;
    color: var(--color-success, #059669);
    margin-bottom: 1rem;
}

.empty-state-container .empty-state__title {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--color-gray-700, #334155);
}

.empty-state-container .empty-state__message {
    font-size: 0.9rem;
    color: var(--color-gray-400, #94A3B8);
    margin-bottom: 1rem;
}

/* --- Filter Bar (BEM) --- */
.filter-bar {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    background: var(--color-gray-50, #F8FAFC);
    padding: 1rem;
    border-radius: var(--radius-md, 10px);
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-group label {
    font-size: 0.85rem;
    color: var(--color-gray-500, #64748B);
    white-space: nowrap;
    font-weight: 500;
}

.filter-group select {
    background: var(--color-white, #fff);
    color: var(--color-gray-800, #1E293B);
    border: 1px solid var(--color-gray-300, #CBD5E1);
    border-radius: var(--radius-sm, 6px);
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
    min-width: 150px;
}

/* --- Action Buttons (BEM) --- */
.action-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.btn.btn--primary { background: var(--color-primary, #0891B2); color: var(--color-white, #fff); }
.btn.btn--secondary { background: var(--color-gray-100, #F1F5F9); color: var(--color-gray-700, #334155); border: 1px solid var(--color-gray-300, #CBD5E1); }
.btn.btn--danger { background: var(--color-danger, #DC2626); color: var(--color-white, #fff); }
.btn.btn--sm { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* === Detail Page Layout (BEM) === */

.detail-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 1.5rem;
    align-items: start;
}

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

.detail-layout__sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.detail-layout__main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.detail-section {
    background: var(--color-white, #ffffff);
    border-radius: var(--radius-lg, 16px);
    padding: 1.25rem;
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,0.08));
    border: 1px solid var(--color-gray-200, #E2E8F0);
}

.detail-section__title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary-dark, #0E7490);
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-primary, #0891B2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-field {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--color-gray-100, #F1F5F9);
}

.detail-field:last-child {
    border-bottom: none;
}

.detail-field__label {
    color: var(--color-gray-500, #64748B);
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-right: 0.75rem;
}

.detail-field__value {
    color: var(--color-gray-800, #1E293B);
    font-size: 0.9rem;
    text-align: right;
}

.detail-action-bar {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--color-white, #ffffff);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,0.08));
    border: 1px solid var(--color-gray-200, #E2E8F0);
    align-items: center;
    flex-wrap: wrap;
}

/* --- Detail Status Bar --- */
.detail-status-bar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

/* --- Detail Timeline --- */
.detail-timeline {
    position: relative;
    padding-left: 1.5rem;
}

.detail-timeline::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-gray-200, #E2E8F0);
}

.detail-timeline__entry {
    position: relative;
    padding-bottom: 1rem;
    padding-left: 0.75rem;
}

.detail-timeline__entry:last-child {
    padding-bottom: 0;
}

.detail-timeline__marker {
    position: absolute;
    left: -1.5rem;
    top: 0.35rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary, #0891B2);
    border: 2px solid var(--color-white, #ffffff);
    box-shadow: 0 0 0 2px var(--color-gray-200, #E2E8F0);
}

.detail-timeline__time {
    font-size: 0.75rem;
    color: var(--color-gray-500, #64748B);
}

.detail-timeline__action {
    font-size: 0.875rem;
    color: var(--color-gray-800, #1E293B);
    font-weight: 500;
}

.detail-timeline__actor {
    font-size: 0.8rem;
    color: var(--color-gray-500, #64748B);
}

.detail-timeline__details {
    font-size: 0.8rem;
    color: var(--color-gray-500, #64748B);
    margin-top: 0.25rem;
}

/* --- Data Tables (BEM) --- */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}