/* design-tokens.css — Single source of truth for all design values.
   When an audit says "change X color/spacing", change it here.

   ── KRA-270 palette doctrine ──────────────────────────────────────────
   To prevent the "color soup" the May 2026 clinician audit flagged, every
   color in the app should map to ONE meaning:

     red     — critical / danger / error                 → --emr-danger
     amber   — warning / abnormal / needs attention      → --emr-warning
     green   — normal / success / acknowledged           → --emr-success
     blue    — interactive / primary action / link       → --emr-primary
     purple  — RESERVED but DEMOTED to neutral slate     (KRA-267 — AI feature
                                                          pinning was the only
                                                          purple use; tokens
                                                          --emr-ai-* now slate)
     gray    — disabled / secondary / chrome             → --emr-text-muted /
                                                          --emr-border-color

   Patient Chart summary cards intentionally use a single neutral slate
   accent (KRA-270 D7) so card color signals "navigation", not "status".
   The data inside each section carries its own status color (e.g. an
   abnormal lab gets red).

   When you find raw hex colors in a component, prefer the matching token
   above. Hardcoded hex is OK for one-off illustrations or external
   references; otherwise it drifts from the palette over time.
   ────────────────────────────────────────────────────────────────────── */

/* === Self-hosted Inter variable font (latin) === */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
        U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* === Font Family === */
    --emr-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* === Brand Colors === */
    --emr-primary: #2160E8;
    --emr-primary-hover: #1E4FC7;
    --emr-primary-active: #1A3FA5;
    --emr-primary-light: #eff6ff;

    /* === Semantic Colors === */
    --emr-success: #10B981;
    --emr-success-dark: #059669;
    --emr-success-light: #ecfdf5;
    --emr-danger: #B91C1C;
    --emr-danger-dark: #991b1b;
    --emr-danger-light: #fef2f2;
    --emr-warning: #F59E0B;
    --emr-warning-dark: #92400e;
    --emr-warning-light: #fffbeb;
    --emr-info: #3B82F6;
    --emr-info-dark: #1e40af;
    --emr-info-light: #eff6ff;
    --emr-purple: #8b5cf6;
    --emr-purple-dark: #6d28d9;
    --emr-purple-light: #f5f3ff;
    --emr-orange: #EA580C;
    --emr-orange-dark: #c2410c;
    --emr-orange-light: #fff7ed;
    --emr-teal: #0891b2;
    --emr-teal-dark: #0e7490;
    --emr-teal-light: #ecfeff;

    /* === Text Colors === */
    --emr-text-primary: #111827;
    --emr-text-secondary: #374151;
    --emr-text-muted: #4B5563;
    --emr-text-light: #6B7280;
    --emr-text-white: #FFFFFF;

    /* === Background Colors === */
    --emr-bg-page: #F9FAFB;
    --emr-bg-card: #FFFFFF;
    --emr-bg-hover: #F3F4F6;
    --emr-bg-subtle: #f3f4f6;
    --emr-bg-selected: #eff6ff;

    /* === Border Colors === */
    --emr-border: #E5E7EB;
    --emr-border-dark: #D1D5DB;
    --emr-border-focus: #93c5fd;

    /* === Severity Colors ===
       KRA-892: these legacy aliases now resolve to the canonical three-tier
       --emr-sev-* tokens in severity-scale.css — the single source of truth
       for severity color. Do NOT reintroduce raw severity hex here.
         * "-critical-*" maps to the CRITICAL tier.
         * "-high-*" maps to the WARNING tier (high-text resolves to the
           AAA-contrast brown #7C2D12; the old #92400e fell below 4.5:1 on
           pale-warm backgrounds — see the warning-text note in
           severity-scale.css, do not drop back to it).
       --emr-severity-normal-text stays green (#16a34a): green means
       "no severity" and is deliberately NOT one of the three tiers.

       KRA-1065 (foundation slice of KRA-1053): the canonical SeverityTaxonomy
       ladder in EMRAI.Web/Services/SeverityTaxonomy.cs has six levels and its
       ColorToken(level) emits one --emr-severity-<level>-text per level. The
       moderate/low/info text tokens were undefined, so any surface that wired
       SeverityLevel.Moderate/Low/Info through the taxonomy would resolve to an
       invalid value and fall back silently. These three aliases close that gap
       WITHOUT adding a fourth severity tier — they collapse onto the same three
       --emr-sev-* tiers (icons/labels carry the per-level distinction):
         * Moderate -> WARNING tier (needs-attention, same amber as High).
         * Low / Info -> INFO tier (blue, no urgency).
       SeverityTaxonomyColorTokenContractTests locks this C#<->CSS contract. */
    --emr-severity-critical-bg: var(--emr-sev-critical-bg);
    --emr-severity-critical-border: var(--emr-sev-critical-border);
    --emr-severity-critical-text: var(--emr-sev-critical-text);
    --emr-severity-high-bg: var(--emr-sev-warning-bg);
    --emr-severity-high-border: var(--emr-sev-warning-fill);
    --emr-severity-high-text: var(--emr-sev-warning-text);
    --emr-severity-moderate-text: var(--emr-sev-warning-text);
    --emr-severity-low-text: var(--emr-sev-info-text);
    --emr-severity-info-text: var(--emr-sev-info-text);
    --emr-severity-normal-text: #16a34a;

    /* === Spacing (4px grid) === */
    --emr-space-2xs: 2px;
    --emr-space-xs: 4px;
    --emr-space-sm: 8px;
    --emr-space-md: 12px;
    --emr-space-lg: 16px;
    --emr-space-xl: 24px;
    --emr-space-2xl: 32px;
    --emr-space-3xl: 48px;

    /* === Layout === */
    --emr-max-content-width: 1400px;
    --emr-card-gap: 12px;
    --emr-card-radius: 8px;
    --emr-card-padding: 12px;
    --emr-radius-sm: 4px;
    --emr-radius-md: 6px;
    --emr-radius-lg: 8px;
    --emr-radius-xl: 12px;
    --emr-radius-full: 9999px;

    /* === Typography (4-tier: meta, body, subhead, heading) === */
    --emr-font-xs: 11px;
    --emr-font-sm: 12px;
    --emr-font-base: 13px;
    --emr-font-md: 13px;
    --emr-font-lg: 14px;
    --emr-font-xl: 16px;
    --emr-font-2xl: 20px;
    --emr-font-3xl: 24px;
    --emr-font-4xl: 28px;

    --emr-weight-normal: 400;
    --emr-weight-medium: 500;
    --emr-weight-semibold: 600;
    --emr-weight-bold: 700;
    --emr-weight-extrabold: 800;

    --emr-leading-tight: 1.25;
    --emr-leading-normal: 1.5;
    --emr-leading-relaxed: 1.7;

    /* === Shadows (3 levels + focus) — visible depth, not just a hint === */
    --emr-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    --emr-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --emr-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
    --emr-shadow-focus: 0 0 0 3px rgba(33, 96, 232, 0.2);

    /* === Transitions === */
    --emr-transition-fast: 100ms ease;
    --emr-transition-base: 150ms ease;
    --emr-transition-slow: 250ms ease;

    /* === Density (audit-prone padding/gap values) === */
    --emr-density-compact: 4px 8px;
    --emr-density-normal: 8px 12px;
    --emr-density-comfortable: 10px 16px;

    /* === Layout (sidebar collapse) === */
    --emr-sidebar-width: 300px;
    --emr-sidebar-collapsed-width: 56px;
    --emr-header-height: 56px;
    --emr-tab-bar-height: 44px;

    /* === AI accent — distinct indigo/violet gradient, clearly "AI" === */
    /* KRA-267: AI panel tokens demoted from brand purple/indigo to neutral slate.
       Capability stays — visual loudness drops. The sparkle gradient on the
       left bar is kept very subtle so a clinician can still identify the
       panel as AI-flavoured at a glance, but it no longer competes with the
       red/orange clinical signals on the same surface. */
    --emr-ai-bg: #f8fafc;
    --emr-ai-border: #e2e8f0;
    --emr-ai-text: #334155;
    --emr-ai-accent: #64748b;
    --emr-ai-icon-bg: #e2e8f0;

    /* === Form Input Tokens === */
    --emr-input-border: var(--emr-border-dark);
    --emr-input-border-hover: #9ca3af;
    --emr-input-focus-ring: 0 0 0 3px rgba(33, 96, 232, 0.15);
    --emr-input-focus-border: var(--emr-primary);
    --emr-input-radius: var(--emr-radius-md);
    --emr-input-padding: 7px 12px;
    --emr-input-bg: #fff;
    --emr-label-color: var(--emr-text-secondary);
    --emr-label-weight: var(--emr-weight-medium);
    --emr-label-size: var(--emr-font-sm);

    /* === Icon Sizes === */
    --emr-icon-xs: 14px;
    --emr-icon-sm: 16px;
    --emr-icon-md: 20px;
    --emr-icon-lg: 24px;
    --emr-icon-xl: 32px;

    /* === Surface tokens (legacy callers in app.css/dashboard.css) === */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-card: #ffffff;
    --text-primary: #1a1a2e;
    --text-secondary: #64748b;
    --border-color: #e2e8f0;
    --sidebar-bg: #1a1a2e;
    --sidebar-text: #e2e8f0;
}

/* ============================================================
   Dark theme — KRA-483
   ============================================================
   Opt-in. Activated by html[data-theme="dark"] (set synchronously in
   App.razor's head from localStorage, toggled from the account menu).
   Light mode is the default and is untouched by this block.

   Strategy: this is a TOKEN-LEVEL theme. The app's color surfaces resolve
   through the --emr-* tokens (plus a small set of legacy aliases below), so
   re-pointing those tokens flips the whole token-driven surface area at once.
   The light values of --emr-bg-card / --emr-bg-page / --emr-bg-subtle are
   #fff / #f9fafb / #f3f4f6, which is exactly what the structural containers
   (.content-card, .page, .sidebar, …) used as hardcoded literals before this
   change — so converting those literals to the matching token is a no-op in
   light mode and inherits the dark value here.

   Severity tokens (--emr-sev-* in severity-scale.css) are overridden in that
   file for dark mode, keeping the same critical/warning/info meanings with
   dark-tinted pill surfaces. Deep per-component hardcoded-color polish (the
   ~9 hardcoded near-black text spots + one-off literals app.css still
   carries) is tracked as a follow-up; v1 covers the token-driven app. */
[data-theme="dark"] {
    /* Tell the UA to render native form controls, scrollbars and the
       default canvas in dark — fixes inputs/selects/scrollbars for free. */
    color-scheme: dark;

    /* Brand — lifted for legibility against dark surfaces */
    --emr-primary: #5B8DEF;
    --emr-primary-hover: #6F9CF2;
    --emr-primary-active: #4A7BD8;
    --emr-primary-light: #1E2A47;

    /* Semantic accents — saturated colors brightened; the pale "-light"
       pill backgrounds become dark tints and the "-dark" shades (used as
       text ON those pills) become light so badges stay legible. */
    --emr-success: #34D399;
    --emr-success-dark: #6EE7B7;
    --emr-success-light: #11261F;
    --emr-danger: #F87171;
    --emr-danger-dark: #FCA5A5;
    --emr-danger-light: #2A1416;
    --emr-warning: #FBBF24;
    --emr-warning-dark: #FCD34D;
    --emr-warning-light: #2A2210;
    --emr-info: #60A5FA;
    --emr-info-dark: #93C5FD;
    --emr-info-light: #16243B;
    --emr-purple: #A78BFA;
    --emr-purple-dark: #C4B5FD;
    --emr-purple-light: #221B3A;
    --emr-orange: #FB923C;
    --emr-orange-dark: #FDBA74;
    --emr-orange-light: #2A1B10;
    --emr-teal: #2DD4BF;
    --emr-teal-dark: #5EEAD4;
    --emr-teal-light: #0E2A2E;

    /* Text — light-on-dark */
    --emr-text-primary: #F1F5F9;
    --emr-text-secondary: #CBD5E1;
    --emr-text-muted: #94A3B8;
    --emr-text-light: #94A3B8;

    /* Backgrounds — slate scale (page darkest, sidebar/subtle mid, cards lifted) */
    --emr-bg-page: #0F172A;
    --emr-bg-card: #1E293B;
    --emr-bg-hover: #334155;
    --emr-bg-subtle: #1B2638;
    --emr-bg-selected: #1E3A5F;

    /* Borders */
    --emr-border: #334155;
    --emr-border-dark: #475569;
    --emr-border-focus: #3B82F6;

    /* Shadows — deepen so elevation still reads on dark */
    --emr-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
    --emr-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.4);
    --emr-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.45);
    --emr-shadow-focus: 0 0 0 3px rgba(91, 141, 239, 0.35);

    /* AI panel tokens (neutral slate, KRA-267) — dark equivalents */
    --emr-ai-bg: #172033;
    --emr-ai-border: #334155;
    --emr-ai-text: #CBD5E1;
    --emr-ai-icon-bg: #334155;

    /* Form input tokens */
    --emr-input-bg: #1E293B;
    --emr-input-border-hover: #64748B;
    --emr-input-focus-ring: 0 0 0 3px rgba(91, 141, 239, 0.25);

    /* Legacy surface aliases still referenced by app.css/dashboard.css */
    --bg-primary: #1E293B;
    --bg-secondary: #0F172A;
    --bg-card: #1E293B;
    --text-primary: #F1F5F9;
    --text-secondary: #94A3B8;
    --border-color: #334155;
}

/* Inherited body text (anything relying on the UA default near-black) flips
   to the light text token in dark mode so it never lands dark-on-dark. */
[data-theme="dark"] body {
    color: var(--emr-text-primary);
    /* Provider-review #21: the page backdrop must flip too. Without this the
       <body> stayed #fff, so any surface shorter than the viewport (and the gaps
       around content cards) rendered as a white band behind the dark UI. */
    background-color: var(--emr-bg-page);
}

/* ============================================================
   Accessibility — Focus Visible
   ============================================================ */
button:focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid #2160E8;
    outline-offset: 2px;
}

/* ============================================================
   Accessibility — Color Contrast for Status Badges
   ============================================================ */
.badge-warning, .chip-warning,
[class*="amber"], [class*="yellow"] {
    color: #78350f !important;
}
.badge-success, [class*="green"] {
    color: #14532d !important;
}

/* ============================================================
   Skip Navigation
   ============================================================ */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: -1;
}
.skip-link:focus {
    position: fixed;
    left: 1rem;
    top: 1rem;
    width: auto;
    height: auto;
    z-index: 9999;
    background: #fff;
    color: #1a1a2e;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* ============================================================
   Loading Skeleton
   ============================================================ */
/* PR walkthrough-r3 cluster-H: skeleton contrast bump.
   The walkthrough flagged Dashboard / Schedule skeletons as "nearly invisible
   washed-out bars" — the prior #f8fafc → #e2e8f0 gradient sat too close to the
   card background and the eye couldn't distinguish loading state from content.
   Bumped to #e2e8f0 (base) → #94a3b8 (peak) so the bars clearly read as
   loading placeholders, while staying lighter than real text/content so they
   never masquerade as data. */
.skeleton {
    background: linear-gradient(90deg, #e2e8f0 25%, #94a3b8 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 4px;
}
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================
   Skeleton variants (KRA-84) — pair with .skeleton base above
   ============================================================ */
.emr-skeleton-bar {
    height: 0.875rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}
.emr-skeleton-bar-title {
    height: 1.25rem;
    width: 40%;
    margin-bottom: 0.75rem;
}
.emr-skeleton-bar-line { width: 100%; }
.emr-skeleton-bar-line-short { width: 65%; }

.emr-skeleton-card {
    padding: 1rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    background: var(--bg-elevated, #fff);
}

.emr-skeleton-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.25rem;
}
.emr-skeleton-table td { padding: 0.25rem 0.5rem; }

.emr-skeleton-chart {
    padding: 1rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 0.5rem;
}
.emr-skeleton-chart-area {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 8rem;
    margin-top: 0.5rem;
}
.emr-skeleton-chart-col {
    flex: 1;
    border-radius: 4px 4px 0 0;
}

.emr-skeleton-avatar {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.emr-skeleton-button {
    display: inline-block;
    width: 5rem;
    height: 2rem;
    border-radius: 0.375rem;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.emr-skeleton-text > .emr-skeleton-bar:last-child {
    margin-bottom: 0;
}

/* ============================================================
   Reduced Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .skeleton {
        animation: none;
        /* Match the new visible skeleton tone so a user with reduced-motion
           preferences still sees the loading bars clearly rather than a
           ghost-pale rectangle that looks like an empty content area. */
        background: #cbd5e1;
    }
}

/* ============================================================
   Global Transitions — all interactive elements get smooth motion
   ============================================================ */
button, a, input, select, textarea,
.emr-card, .emr-badge, .emr-btn, .emr-ai-panel,
[role="button"], [role="tab"] {
    transition: background-color var(--emr-transition-base),
                color var(--emr-transition-base),
                border-color var(--emr-transition-base),
                box-shadow var(--emr-transition-base),
                transform var(--emr-transition-fast),
                opacity var(--emr-transition-base);
}

/* Focus ring for keyboard accessibility */
:focus-visible {
    outline: 2px solid var(--emr-primary);
    outline-offset: 2px;
}

/* ============================================================
   Utility Classes — map to CSS vars above
   ============================================================ */

/* --- Cards --- */
.emr-card {
    background: var(--emr-bg-card);
    border: 1px solid var(--emr-border);
    border-radius: var(--emr-card-radius);
    padding: var(--emr-card-padding);
    box-shadow: var(--emr-shadow-sm);
}

.emr-card:hover {
    border-color: var(--emr-border-dark);
    box-shadow: var(--emr-shadow-md);
}

.emr-card-interactive {
    background: var(--emr-bg-card);
    border: 1px solid var(--emr-border);
    border-radius: var(--emr-card-radius);
    padding: var(--emr-card-padding);
    cursor: pointer;
}

.emr-card-interactive:hover {
    border-color: var(--emr-border-dark);
    box-shadow: var(--emr-shadow-md);
    transform: translateY(-1px);
}

.emr-card-interactive.selected {
    border-color: var(--emr-primary);
    background: var(--emr-bg-selected);
    box-shadow: var(--emr-shadow-md);
}

.emr-card-title {
    font-size: var(--emr-font-md);
    font-weight: var(--emr-weight-bold);
    color: var(--emr-text-primary);
    margin-bottom: var(--emr-space-xs);
}

.emr-card-body {
    font-size: var(--emr-font-md);
    color: var(--emr-text-secondary);
    line-height: var(--emr-leading-normal);
}

/* --- Typography hierarchy (4-tier: page title → section → subsection → meta) --- */
.emr-page-title {
    font-size: var(--emr-font-4xl);
    font-weight: var(--emr-weight-bold);
    color: var(--emr-text-primary);
    letter-spacing: -0.01em;
    line-height: var(--emr-leading-tight);
    margin: 0;
}

.emr-page-subtitle {
    font-size: var(--emr-font-lg);
    color: var(--emr-text-muted);
    font-weight: var(--emr-weight-normal);
    margin: var(--emr-space-2xs) 0 0 0;
}

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

.emr-section-title {
    font-size: var(--emr-font-xl);
    font-weight: var(--emr-weight-bold);
    color: var(--emr-text-primary);
    letter-spacing: -0.01em;
}

/* Section title with left accent — use on major content sections */
.emr-section-title-accent {
    font-size: var(--emr-font-xl);
    font-weight: var(--emr-weight-bold);
    color: var(--emr-text-primary);
    letter-spacing: -0.01em;
    padding-left: var(--emr-space-md);
    border-left: 3px solid var(--emr-primary);
}

.emr-section-subtitle {
    font-size: var(--emr-font-sm);
    color: var(--emr-text-muted);
    margin-top: var(--emr-space-2xs);
}

.emr-subsection-title {
    font-size: var(--emr-font-md);
    font-weight: var(--emr-weight-semibold);
    color: var(--emr-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0;
}

/* --- Flex helpers --- */
.emr-flex-row {
    display: flex;
    align-items: center;
}

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

.emr-flex-col {
    display: flex;
    flex-direction: column;
}

.emr-flex-wrap { flex-wrap: wrap; }
.emr-flex-1 { flex: 1; }
.emr-flex-shrink-0 { flex-shrink: 0; }

.emr-gap-2xs { gap: var(--emr-space-2xs); }
.emr-gap-xs { gap: var(--emr-space-xs); }
.emr-gap-sm { gap: var(--emr-space-sm); }
.emr-gap-md { gap: var(--emr-space-md); }
.emr-gap-lg { gap: var(--emr-space-lg); }
.emr-gap-xl { gap: var(--emr-space-xl); }

/* --- Text --- */
.emr-text-meta {
    font-size: var(--emr-font-sm);
    color: var(--emr-text-muted);
}

.emr-text-secondary {
    color: var(--emr-text-secondary);
}

.emr-text-bold {
    font-weight: var(--emr-weight-bold);
}

.emr-text-semibold {
    font-weight: var(--emr-weight-semibold);
}

.emr-text-xs { font-size: var(--emr-font-xs); }
.emr-text-sm { font-size: var(--emr-font-sm); }
.emr-text-md { font-size: var(--emr-font-md); }
.emr-text-lg { font-size: var(--emr-font-lg); }
.emr-text-xl { font-size: var(--emr-font-xl); }

.emr-text-success { color: var(--emr-success-dark); }
.emr-text-danger { color: var(--emr-danger); }
.emr-text-warning { color: var(--emr-warning-dark); }
.emr-text-primary-color { color: var(--emr-primary); }
.emr-text-muted-color { color: var(--emr-text-muted); }

/* --- Margin/Padding shorthands --- */
.emr-mb-xs { margin-bottom: var(--emr-space-xs); }
.emr-mb-sm { margin-bottom: var(--emr-space-sm); }
.emr-mb-md { margin-bottom: var(--emr-space-md); }
.emr-mb-lg { margin-bottom: var(--emr-space-lg); }
.emr-ml-auto { margin-left: auto; }
.emr-mt-xs { margin-top: var(--emr-space-xs); }

/* --- Empty/Warning/Alert states --- */
.emr-empty-state {
    text-align: center;
    padding: var(--emr-space-xl) var(--emr-space-lg);
    color: var(--emr-text-muted);
}

.emr-empty-state-inline {
    display: flex;
    align-items: center;
    gap: var(--emr-space-md);
    padding: var(--emr-space-md) var(--emr-space-lg);
    color: var(--emr-text-muted);
    text-align: left;
}

.emr-empty-state-icon {
    font-size: 32px;
    margin-bottom: var(--emr-space-sm);
    opacity: 0.5;
}

.emr-empty-state-title {
    font-size: var(--emr-font-lg);
    font-weight: var(--emr-weight-semibold);
    color: var(--emr-text-secondary);
    margin-bottom: var(--emr-space-xs);
}

.emr-empty-state-subtitle {
    font-size: var(--emr-font-sm);
    color: var(--emr-text-muted);
}

.emr-warning {
    color: var(--emr-warning-dark);
    background: var(--emr-severity-high-bg);
    border: 1px solid var(--emr-severity-high-border);
    border-radius: var(--emr-card-radius);
    padding: var(--emr-space-sm) var(--emr-space-md);
    font-size: var(--emr-font-md);
}

.emr-alert {
    color: var(--emr-severity-critical-text);
    background: var(--emr-severity-critical-bg);
    border: 1px solid var(--emr-severity-critical-border);
    border-radius: var(--emr-card-radius);
    padding: var(--emr-space-sm) var(--emr-space-md);
    font-size: var(--emr-font-md);
    font-weight: var(--emr-weight-semibold);
}

.emr-info-banner {
    display: flex;
    align-items: center;
    gap: var(--emr-space-sm);
    color: var(--emr-info-dark);
    background: var(--emr-info-light);
    border: 1px solid #bfdbfe;
    border-radius: var(--emr-card-radius);
    padding: var(--emr-space-sm) var(--emr-space-md);
    font-size: var(--emr-font-md);
}

/* --- Badge --- */
.emr-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--emr-radius-full);
    font-size: var(--emr-font-xs);
    font-weight: var(--emr-weight-semibold);
    white-space: nowrap;
}

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

.emr-badge-warning {
    background: var(--emr-severity-high-bg);
    color: var(--emr-warning-dark);
}

.emr-badge-danger {
    background: var(--emr-severity-critical-bg);
    color: #991b1b;
}

.emr-badge-info {
    background: var(--emr-info-light);
    color: var(--emr-info-dark);
}

.emr-badge-purple {
    background: var(--emr-purple-light);
    color: var(--emr-purple-dark);
}

.emr-badge-neutral {
    background: var(--emr-bg-subtle);
    color: var(--emr-text-primary);
}

.emr-badge-orange {
    background: var(--emr-orange-light);
    color: var(--emr-orange-dark);
}

.emr-badge-teal {
    background: var(--emr-teal-light);
    color: var(--emr-teal-dark);
}

.emr-badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--emr-radius-full);
    font-size: var(--emr-font-xs);
    font-weight: var(--emr-weight-bold);
    color: white;
    background: var(--emr-danger);
}

/* --- AI Panel — purpose-designed AI feature styling --- */
/* KRA-267: AI panels demoted to neutral surface — same shape, no brand glow. */
.emr-ai-panel {
    background: var(--emr-ai-bg);
    border: 1px solid var(--emr-ai-border);
    border-radius: var(--emr-radius-md);
    padding: var(--emr-space-md);
    position: relative;
}

.emr-ai-panel::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: var(--emr-ai-accent);
    border-radius: 0 2px 2px 0;
}

.emr-ai-panel .inline-svg-icon {
    color: var(--emr-ai-accent);
    background: var(--emr-ai-icon-bg);
    border-radius: var(--emr-radius-md);
    padding: 3px;
    width: 20px;
    height: 20px;
}

.emr-ai-panel-title {
    font-size: var(--emr-font-md);
    font-weight: var(--emr-weight-semibold);
    color: var(--emr-ai-text);
    margin-bottom: var(--emr-space-sm);
}

/* Provenance tag — distinguishes deterministic/rules-based panels from LLM
   output. Reserved for "rules-based" labeling on deterministic surfaces
   (refill monitoring, pharmacy brief, reconciliation gate) so "AI" is never
   used for non-model features (AI-surface review items 6/7/11/24). */
.emr-panel-provenance-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: var(--emr-weight-semibold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #1f513a;
    background: #e2f3ea;
    border: 1px solid #b6ddc7;
    vertical-align: middle;
}

/* --- AI Explainability Panel (KRA-88) --- */
.emr-ai-explain {
    margin-top: var(--emr-space-sm);
    border-top: 1px dashed var(--emr-ai-border);
    padding-top: var(--emr-space-sm);
}

.emr-ai-explain-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--emr-space-xs);
    background: transparent;
    border: 1px solid var(--emr-ai-border);
    color: var(--emr-ai-text);
    border-radius: var(--emr-radius-md);
    padding: var(--emr-space-xs) var(--emr-space-sm);
    font-size: var(--emr-font-sm);
    cursor: pointer;
}

.emr-ai-explain-toggle:hover {
    background: var(--emr-ai-icon-bg);
}

.emr-ai-explain-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--emr-ai-accent);
    color: white;
    font-weight: var(--emr-weight-bold);
}

.emr-ai-explain-confidence {
    margin-left: var(--emr-space-sm);
    color: var(--emr-text-meta);
    font-weight: var(--emr-weight-semibold);
}

.emr-ai-explain-body {
    margin-top: var(--emr-space-sm);
    background: var(--emr-ai-bg);
    border: 1px solid var(--emr-ai-border);
    border-radius: var(--emr-radius-md);
    padding: var(--emr-space-md);
}

.emr-ai-explain-body h4 {
    font-size: var(--emr-font-sm);
    font-weight: var(--emr-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 var(--emr-space-xs);
    color: var(--emr-ai-text);
}

.emr-ai-explain-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--emr-space-xs) var(--emr-space-md);
    margin: 0 0 var(--emr-space-sm);
}

.emr-ai-explain-grid dt {
    font-weight: var(--emr-weight-semibold);
    color: var(--emr-text-meta);
}

.emr-ai-explain-grid dd {
    margin: 0;
    font-family: var(--emr-font-mono, monospace);
    font-size: var(--emr-font-sm);
}

.emr-ai-explain-section {
    margin-top: var(--emr-space-sm);
}

.emr-ai-explain-section ol,
.emr-ai-explain-section ul {
    margin: 0;
    padding-left: var(--emr-space-lg);
}

.emr-ai-explain-disclaimer {
    margin-top: var(--emr-space-sm);
    padding-top: var(--emr-space-sm);
    border-top: 1px solid var(--emr-ai-border);
    font-size: var(--emr-font-sm);
    color: var(--emr-text-meta);
    font-style: italic;
}

/* --- Buttons (consolidated) --- */
.emr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--emr-space-xs);
    padding: var(--emr-density-compact);
    border-radius: var(--emr-radius-md);
    font-size: var(--emr-font-md);
    font-weight: var(--emr-weight-semibold);
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    text-decoration: none;
}

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

.emr-btn-primary {
    background: var(--emr-primary);
    color: white;
    border-color: var(--emr-primary);
}

.emr-btn-primary:hover {
    background: var(--emr-primary-hover);
    border-color: var(--emr-primary-hover);
    box-shadow: var(--emr-shadow-sm);
}

.emr-btn-secondary {
    background: var(--emr-bg-card);
    color: var(--emr-text-secondary);
    border-color: var(--emr-border-dark);
}

.emr-btn-secondary:hover {
    background: var(--emr-bg-hover);
    border-color: var(--emr-border-dark);
}

.emr-btn-ghost {
    background: transparent;
    color: var(--emr-text-muted);
    border-color: transparent;
}

.emr-btn-ghost:hover {
    background: var(--emr-bg-hover);
    color: var(--emr-text-secondary);
}

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

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

.emr-btn-success {
    background: var(--emr-success);
    color: white;
    border-color: var(--emr-success);
}

.emr-btn-success:hover {
    background: var(--emr-success-dark);
    border-color: var(--emr-success-dark);
}

.emr-btn-warning {
    background: var(--emr-warning);
    color: white;
    border-color: var(--emr-warning);
}

.emr-btn-warning:hover {
    background: var(--emr-warning-dark);
    border-color: var(--emr-warning-dark);
}

.emr-btn-sm {
    padding: var(--emr-space-xs) 10px;
    font-size: var(--emr-font-sm);
}

.emr-btn-lg {
    padding: var(--emr-density-comfortable);
    font-size: var(--emr-font-lg);
}

.emr-btn:disabled, .emr-btn[disabled] {
    background-color: #e5e7eb;
    color: #4b5563;
    border-color: #d1d5db;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

/* --- Chip / Filter pills --- */
.emr-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--emr-space-xs);
    padding: var(--emr-space-xs) var(--emr-space-md);
    border-radius: var(--emr-radius-full);
    font-size: var(--emr-font-sm);
    font-weight: var(--emr-weight-medium);
    border: 1px solid var(--emr-border-dark);
    background: var(--emr-bg-card);
    color: var(--emr-text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

.emr-chip:hover {
    background: var(--emr-bg-hover);
    border-color: var(--emr-text-muted);
}

.emr-chip.active {
    background: var(--emr-primary);
    color: white;
    border-color: var(--emr-primary);
}

/* --- Color accent bars (for cards with semantic meaning) --- */
.emr-accent-left-danger { border-left: 3px solid var(--emr-danger); }
.emr-accent-left-warning { border-left: 3px solid var(--emr-warning); }
.emr-accent-left-success { border-left: 3px solid var(--emr-success); }
.emr-accent-left-info { border-left: 3px solid var(--emr-info); }
.emr-accent-left-primary { border-left: 3px solid var(--emr-primary); }

/* --- Dividers --- */
.emr-divider {
    height: 1px;
    background: var(--emr-border);
    margin: var(--emr-space-md) 0;
    border: none;
}

/* --- Overlay/Modal backdrop --- */
.emr-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.emr-modal {
    background: var(--emr-bg-card);
    border-radius: var(--emr-radius-lg);
    box-shadow: var(--emr-shadow-lg);
    padding: var(--emr-space-xl);
    max-width: 480px;
    width: 90%;
}

/* --- Summary card (chart tab) --- */
.emr-summary-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px var(--emr-space-sm);
    border-radius: var(--emr-card-radius);
    cursor: pointer;
    border: 2px solid var(--emr-border);
    background: var(--emr-bg-card);
    font-size: var(--emr-font-md);
    font-weight: var(--emr-weight-semibold);
    color: var(--emr-text-secondary);
}

.emr-summary-card:hover {
    border-color: var(--emr-border-dark);
    box-shadow: var(--emr-shadow-sm);
    transform: translateY(-1px);
}

.emr-summary-card.selected {
    box-shadow: var(--emr-shadow-md);
    transform: translateY(-1px);
}

.emr-summary-card.empty {
    opacity: 0.85;
    background: var(--emr-bg-page);
}

.emr-summary-card-value {
    font-size: 18px;
    font-weight: var(--emr-weight-bold);
}

.emr-summary-card-label {
    font-size: var(--emr-font-sm);
    margin-top: var(--emr-space-2xs);
}

/* --- Tab pills (active/inactive tab buttons inside chart) --- */
.emr-tab-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--emr-space-xs);
    padding: var(--emr-space-xs) var(--emr-space-md);
    border-radius: var(--emr-radius-md);
    font-size: var(--emr-font-sm);
    font-weight: var(--emr-weight-medium);
    color: var(--emr-text-muted);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
}

.emr-tab-pill:hover {
    background: var(--emr-bg-hover);
    color: var(--emr-text-secondary);
}

.emr-tab-pill.active {
    background: var(--emr-primary);
    color: white;
    font-weight: var(--emr-weight-semibold);
}

/* --- Inline icon sizing --- */
.emr-icon-sm { width: 16px; height: 16px; }
.emr-icon-md { width: 20px; height: 20px; }
.emr-icon-lg { width: 24px; height: 24px; }
.emr-icon-xl { width: 32px; height: 32px; }
.emr-icon-2xl { width: 48px; height: 48px; }

/* --- Scroll container --- */
.emr-scroll-y {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--emr-border-dark) transparent;
}

/* --- Truncation --- */
.emr-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Result card states (used by results tab) --- */
.emr-result-abnormal {
    background: var(--emr-warning-light);
    border-left: 3px solid var(--emr-warning);
}

.emr-result-critical {
    background: var(--emr-danger-light);
    border-left: 3px solid var(--emr-danger);
}

.emr-result-acknowledged {
    opacity: 0.7;
    background: var(--emr-bg-page);
}

.emr-result-acknowledged.emr-result-abnormal {
    border-left-color: var(--emr-border-dark);
    background: var(--emr-bg-page);
}

.emr-result-acknowledged.emr-result-critical {
    border-left-color: var(--emr-text-light);
    background: var(--emr-bg-subtle);
}

/* --- Grid layouts --- */
.emr-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--emr-space-sm);
}

/* --- Text size utilities --- */
.emr-text-xs { font-size: var(--emr-font-xs); }

/* --- Accent bar (vertical left indicator) --- */
.emr-accent-left {
    width: 4px;
    height: 16px;
    border-radius: var(--emr-radius-sm);
    flex-shrink: 0;
}

/* ============================================================
   DQ-9 Extensions — Comprehensive component library
   Eliminates all inline styles from provider-visible components
   ============================================================ */

/* --- Alert system (4 variants: danger, warning, info, success) --- */
.emr-alert-warning {
    display: flex;
    align-items: center;
    gap: var(--emr-space-sm);
    color: var(--emr-warning-dark);
    background: var(--emr-warning-light);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-left: 3px solid var(--emr-warning);
    border-radius: var(--emr-radius-lg);
    padding: var(--emr-space-sm) var(--emr-space-md);
    font-size: var(--emr-font-md);
}

.emr-alert-info {
    display: flex;
    align-items: center;
    gap: var(--emr-space-sm);
    color: var(--emr-info-dark);
    background: var(--emr-info-light);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-left: 3px solid var(--emr-info);
    border-radius: var(--emr-radius-lg);
    padding: var(--emr-space-sm) var(--emr-space-md);
    font-size: var(--emr-font-md);
}

.emr-alert-success {
    display: flex;
    align-items: center;
    gap: var(--emr-space-sm);
    color: var(--emr-success-dark);
    background: var(--emr-success-light);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-left: 3px solid var(--emr-success);
    border-radius: var(--emr-radius-lg);
    padding: var(--emr-space-sm) var(--emr-space-md);
    font-size: var(--emr-font-md);
}

.emr-alert-danger {
    display: flex;
    align-items: center;
    gap: var(--emr-space-sm);
    color: var(--emr-danger-dark);
    background: var(--emr-danger-light);
    border: 1px solid rgba(220, 38, 38, 0.25);
    border-left: 3px solid var(--emr-danger);
    border-radius: var(--emr-radius-lg);
    padding: var(--emr-space-sm) var(--emr-space-md);
    font-size: var(--emr-font-md);
    font-weight: var(--emr-weight-semibold);
}

/* --- Inline hint (subtle, non-intrusive) --- */
.emr-inline-hint {
    display: flex;
    align-items: center;
    gap: var(--emr-space-xs);
    padding: var(--emr-space-xs) var(--emr-space-md);
    font-size: var(--emr-font-sm);
    color: var(--emr-text-muted);
    border-left: 3px solid var(--emr-warning);
}

.emr-inline-hint a {
    color: var(--emr-primary);
    text-decoration: underline;
}

/* --- Modal system (overlay + content + close) --- */
.emr-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: emr-fade-in var(--emr-transition-fast);
}

.emr-modal-content {
    background: var(--emr-bg-card);
    border-radius: var(--emr-radius-xl);
    padding: var(--emr-space-xl);
    max-width: 420px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    position: relative;
    animation: emr-scale-in var(--emr-transition-base);
}

.emr-modal-close {
    position: absolute;
    top: var(--emr-space-md);
    right: var(--emr-space-md);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--emr-text-light);
    line-height: 1;
    padding: var(--emr-space-xs);
    border-radius: var(--emr-radius-sm);
}

.emr-modal-close:hover {
    color: var(--emr-text-secondary);
    background: var(--emr-bg-hover);
}

.emr-modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--emr-space-md);
}

.emr-modal-header h3 {
    margin: 0;
    font-size: var(--emr-font-xl);
    font-weight: var(--emr-weight-semibold);
}

.emr-modal-body {
    color: var(--emr-text-secondary);
    margin-bottom: var(--emr-space-lg);
    font-size: var(--emr-font-lg);
    line-height: var(--emr-leading-normal);
}

.emr-modal-footer {
    display: flex;
    gap: var(--emr-space-sm);
    justify-content: flex-end;
}

/* --- Table styles (clinical data tables) --- */
.emr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--emr-font-md);
}

.emr-table th {
    padding: var(--emr-space-md) var(--emr-space-md);
    font-weight: var(--emr-weight-semibold);
    color: var(--emr-text-muted);
    text-align: left;
    border-bottom: 2px solid var(--emr-border);
    font-size: var(--emr-font-sm);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--emr-bg-page);
    position: sticky;
    top: 0;
    z-index: 1;
}

.emr-table td {
    padding: var(--emr-space-md) var(--emr-space-md);
    color: var(--emr-text-primary);
    border-bottom: 1px solid rgba(229, 231, 235, 0.6);
}

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

.emr-table tbody tr:nth-child(even) td {
    background-color: rgba(249, 250, 251, 0.5);
}

.emr-table tr:hover td {
    background: var(--emr-bg-hover);
}

.emr-table tbody tr {
    transition: background-color var(--emr-transition-fast);
}

/* --- Stat card (dashboard) --- */
.emr-stat-card {
    display: flex;
    align-items: center;
    gap: var(--emr-space-md);
    padding: var(--emr-space-md) var(--emr-space-lg);
    background: var(--emr-bg-card);
    border: 1px solid var(--emr-border);
    border-radius: var(--emr-radius-lg);
    cursor: pointer;
    min-width: 0;
}

.emr-stat-card:hover {
    border-color: var(--emr-border-dark);
    box-shadow: var(--emr-shadow-md);
    transform: translateY(-1px);
}

.emr-stat-value {
    font-size: var(--emr-font-2xl);
    font-weight: var(--emr-weight-bold);
    color: var(--emr-text-primary);
    line-height: 1;
}

.emr-stat-label {
    font-size: var(--emr-font-sm);
    color: var(--emr-text-muted);
    font-weight: var(--emr-weight-medium);
    margin-top: 2px;
}

.emr-stat-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--emr-radius-lg);
    flex-shrink: 0;
}

.emr-stat-icon-primary { background: var(--emr-primary-light); color: var(--emr-primary); }
.emr-stat-icon-danger { background: var(--emr-danger-light); color: var(--emr-danger); }
.emr-stat-icon-warning { background: var(--emr-warning-light); color: var(--emr-warning-dark); }
.emr-stat-icon-success { background: var(--emr-success-light); color: var(--emr-success-dark); }
.emr-stat-icon-purple { background: var(--emr-purple-light); color: var(--emr-purple); }
.emr-stat-icon-info { background: var(--emr-info-light); color: var(--emr-info); }
.emr-stat-icon-orange { background: var(--emr-orange-light); color: var(--emr-orange); }
.emr-stat-icon-teal { background: var(--emr-teal-light); color: var(--emr-teal); }

/* --- Order type badges --- */
.emr-order-type {
    font-size: var(--emr-font-xs);
    font-weight: var(--emr-weight-semibold);
    padding: 1px var(--emr-space-xs);
    border-radius: var(--emr-radius-sm);
    letter-spacing: 0.3px;
}

.emr-order-type-rx { color: var(--emr-purple); background: var(--emr-purple-light); }
.emr-order-type-lab { color: #0891b2; background: #ecfeff; }
.emr-order-type-img { color: var(--emr-success-dark); background: var(--emr-success-light); }

/* --- Order card accent colors --- */
.emr-order-accent-rx { border-left: 3px solid var(--emr-purple); }
.emr-order-accent-lab { border-left: 3px solid #0891b2; }
.emr-order-accent-img { border-left: 3px solid var(--emr-success-dark); }

/* --- Patient row (dashboard) --- */
.emr-patient-row {
    display: flex;
    align-items: center;
    gap: var(--emr-space-md);
    padding: var(--emr-space-md) var(--emr-space-lg);
    border-bottom: 1px solid var(--emr-border);
    background: var(--emr-bg-card);
}

.emr-patient-row:hover {
    background: var(--emr-bg-hover);
}

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

/* --- Acuity indicators --- */
.emr-acuity-bar {
    width: 4px;
    height: 100%;
    min-height: 40px;
    border-radius: var(--emr-radius-sm);
    flex-shrink: 0;
}

.emr-acuity-urgent { background: var(--emr-danger); }
.emr-acuity-moderate { background: var(--emr-warning); }
.emr-acuity-routine { background: var(--emr-border); }

/* --- Note editor panels --- */
.emr-note-panel {
    margin-bottom: var(--emr-space-lg);
    border: 2px solid var(--emr-border);
    border-radius: var(--emr-radius-lg);
    padding: var(--emr-space-lg);
}

.emr-note-panel-primary { border-color: var(--emr-primary); }
.emr-note-panel-warning { border-color: var(--emr-warning); background: var(--emr-warning-light); }
.emr-note-panel-success { border-color: var(--emr-success); background: var(--emr-success-light); }

/* --- Pill / Tag (for reactions, quick-add) --- */
.emr-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--emr-space-xs);
    padding: var(--emr-space-xs) var(--emr-space-md);
    background: var(--emr-bg-subtle);
    border-radius: var(--emr-radius-xl);
    font-size: var(--emr-font-md);
    color: var(--emr-text-secondary);
}

.emr-pill-remove {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: var(--emr-space-xs);
    color: var(--emr-text-muted);
    font-size: var(--emr-font-sm);
}

.emr-pill-remove:hover {
    color: var(--emr-danger);
}

/* --- Toolbar (note editor, order actions) --- */
.emr-toolbar {
    display: flex;
    gap: var(--emr-space-sm);
    align-items: center;
    flex-wrap: wrap;
}

.emr-toolbar-spacer {
    flex-grow: 1;
}

/* --- Dropdown menu --- */
.emr-dropdown {
    position: absolute;
    z-index: 1050;
    background: var(--emr-bg-card);
    border: 1px solid var(--emr-border);
    border-radius: var(--emr-radius-lg);
    box-shadow: var(--emr-shadow-lg);
    min-width: 180px;
    margin-top: var(--emr-space-xs);
    padding: var(--emr-space-xs) 0;
    animation: emr-scale-in var(--emr-transition-fast);
}

.emr-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--emr-space-sm);
    padding: var(--emr-space-sm) var(--emr-space-md);
    font-size: var(--emr-font-md);
    color: var(--emr-text-secondary);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.emr-dropdown-item:hover {
    background: var(--emr-bg-hover);
    color: var(--emr-text-primary);
}

/* --- Form elements --- */
.emr-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--emr-space-xs);
}

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

.emr-form-input {
    padding: var(--emr-space-sm) var(--emr-space-md);
    border: 1px solid var(--emr-border);
    border-radius: var(--emr-radius-md);
    font-size: var(--emr-font-md);
    color: var(--emr-text-primary);
    background: var(--emr-bg-card);
}

.emr-form-input:focus {
    border-color: var(--emr-primary);
    box-shadow: var(--emr-shadow-focus);
    outline: none;
}

.emr-form-input::placeholder {
    color: var(--emr-text-light);
}

/* --- Section divider with label --- */
.emr-section-divider {
    display: flex;
    align-items: center;
    gap: var(--emr-space-sm);
    margin: var(--emr-space-md) 0;
    color: var(--emr-text-muted);
    font-size: var(--emr-font-sm);
    font-weight: var(--emr-weight-medium);
}

.emr-section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--emr-border);
}

/* --- Micro-interactions & Animations --- */
@keyframes emr-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes emr-scale-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

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

/* Card hover elevation (applies to ALL cards) */
.emr-card:hover,
.order-card:hover,
.result-card:hover,
.note-card:hover {
    box-shadow: var(--emr-shadow-md);
}

/* Interactive row hover */
.emr-row-interactive {
    cursor: pointer;
    transition: background-color var(--emr-transition-base);
}

.emr-row-interactive:hover {
    background: var(--emr-bg-hover);
}

/* Button press feedback */
.emr-btn:active:not(:disabled),
.btn-primary:active:not(:disabled),
.btn-secondary:active:not(:disabled),
.btn-success:active:not(:disabled) {
    transform: scale(0.97);
}

/* Badge subtle pulse for unread counts */
.emr-badge-count-animated {
    animation: emr-badge-pulse 2s ease-in-out infinite;
}

@keyframes emr-badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Smooth tab transitions */
.tab-content-enter {
    animation: emr-fade-in var(--emr-transition-base);
}

/* Global hover lift for clickable elements with shadows */
[data-testid="stat-card"]:hover,
[data-testid="patient-card"]:hover {
    box-shadow: var(--emr-shadow-md);
    transform: translateY(-1px);
}

/* Ensure all button transitions use token values */
.btn, .btn-primary, .btn-secondary, .btn-success, .btn-warning,
.btn-danger, .btn-info, .btn-sm, .btn-lg,
.btn-text, .btn-icon, .btn-bold {
    transition: background-color var(--emr-transition-base),
                color var(--emr-transition-base),
                border-color var(--emr-transition-base),
                box-shadow var(--emr-transition-base),
                transform var(--emr-transition-fast);
}

/* Ensure all card-like elements get smooth hover */
.order-card, .result-card, .note-card, .allergy-card,
.problem-card, .medication-card, .encounter-card,
.care-plan-card, .stat-card, .patient-row {
    transition: background-color var(--emr-transition-base),
                box-shadow var(--emr-transition-base),
                border-color var(--emr-transition-base),
                transform var(--emr-transition-fast);
}

/* Input focus transitions */
input, select, textarea {
    transition: border-color var(--emr-transition-base),
                box-shadow var(--emr-transition-base);
}

input:focus, select:focus, textarea:focus {
    border-color: var(--emr-primary);
    box-shadow: var(--emr-shadow-focus);
}

/* --- Spacing utilities --- */
.emr-p-xs { padding: var(--emr-space-xs); }
.emr-p-sm { padding: var(--emr-space-sm); }
.emr-p-md { padding: var(--emr-space-md); }
.emr-p-lg { padding: var(--emr-space-lg); }
.emr-p-xl { padding: var(--emr-space-xl); }
.emr-px-md { padding-left: var(--emr-space-md); padding-right: var(--emr-space-md); }
.emr-px-lg { padding-left: var(--emr-space-lg); padding-right: var(--emr-space-lg); }
.emr-py-sm { padding-top: var(--emr-space-sm); padding-bottom: var(--emr-space-sm); }
.emr-py-md { padding-top: var(--emr-space-md); padding-bottom: var(--emr-space-md); }
.emr-mt-sm { margin-top: var(--emr-space-sm); }
.emr-mt-md { margin-top: var(--emr-space-md); }
.emr-mt-lg { margin-top: var(--emr-space-lg); }
.emr-mb-xl { margin-bottom: var(--emr-space-xl); }

/* --- Color utilities --- */
.emr-color-danger { color: var(--emr-danger); }
.emr-color-warning { color: var(--emr-warning-dark); }
.emr-color-success { color: var(--emr-success-dark); }
.emr-color-primary { color: var(--emr-primary); }
.emr-color-muted { color: var(--emr-text-muted); }
.emr-color-purple { color: var(--emr-purple); }
.emr-color-orange { color: var(--emr-orange); }
.emr-color-teal { color: var(--emr-teal); }
.emr-color-info { color: var(--emr-info); }

/* --- Background utilities --- */
.emr-bg-danger-light { background: var(--emr-danger-light); }
.emr-bg-warning-light { background: var(--emr-warning-light); }
.emr-bg-success-light { background: var(--emr-success-light); }
.emr-bg-primary-light { background: var(--emr-primary-light); }
.emr-bg-purple-light { background: var(--emr-purple-light); }

/* --- Border utilities --- */
.emr-border-bottom { border-bottom: 1px solid var(--emr-border); }
.emr-border-top { border-top: 1px solid var(--emr-border); }

/* --- Misc utilities --- */
.emr-text-italic { font-style: italic; }
.emr-text-medium { font-weight: var(--emr-weight-medium); }
.emr-nowrap { white-space: nowrap; }
.emr-w-full { width: 100%; }

/* ============================================================
   Form Control Overrides — token-based, replaces Bootstrap defaults
   ============================================================ */
.form-control, .form-select {
    font-family: var(--emr-font-family);
    font-size: var(--emr-font-base);
    color: var(--emr-text-primary);
    background-color: var(--emr-input-bg);
    border: 1px solid var(--emr-input-border);
    border-radius: var(--emr-input-radius);
    padding: var(--emr-input-padding);
    transition: border-color var(--emr-transition-base), box-shadow var(--emr-transition-base);
}

.form-control:hover, .form-select:hover {
    border-color: var(--emr-input-border-hover);
}

.form-control:focus, .form-select:focus {
    border-color: var(--emr-input-focus-border);
    box-shadow: var(--emr-input-focus-ring);
    outline: 0;
}

.form-label {
    font-family: var(--emr-font-family);
    font-size: var(--emr-label-size);
    font-weight: var(--emr-label-weight);
    color: var(--emr-label-color);
    margin-bottom: var(--emr-space-xs);
}

textarea.form-control {
    line-height: var(--emr-leading-normal);
}

/* ============================================================
   Icon Size Classes — consistent SVG/icon sizing via tokens
   ============================================================ */
.emr-icon-xs { width: var(--emr-icon-xs); height: var(--emr-icon-xs); max-width: var(--emr-icon-xs); max-height: var(--emr-icon-xs); }
.emr-icon-sm { width: var(--emr-icon-sm); height: var(--emr-icon-sm); max-width: var(--emr-icon-sm); max-height: var(--emr-icon-sm); }
.emr-icon-md { width: var(--emr-icon-md); height: var(--emr-icon-md); max-width: var(--emr-icon-md); max-height: var(--emr-icon-md); }
.emr-icon-lg { width: var(--emr-icon-lg); height: var(--emr-icon-lg); max-width: var(--emr-icon-lg); max-height: var(--emr-icon-lg); }
.emr-icon-xl { width: var(--emr-icon-xl); height: var(--emr-icon-xl); max-width: var(--emr-icon-xl); max-height: var(--emr-icon-xl); }
.emr-icon-2xl { width: 48px; height: 48px; max-width: 48px; max-height: 48px; }

.emr-icon-xs, .emr-icon-sm, .emr-icon-md, .emr-icon-lg, .emr-icon-xl, .emr-icon-2xl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.emr-icon-xs svg, .emr-icon-sm svg, .emr-icon-md svg, .emr-icon-lg svg, .emr-icon-xl svg, .emr-icon-2xl svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

svg.emr-icon-xs { width: var(--emr-icon-xs); height: var(--emr-icon-xs); max-width: var(--emr-icon-xs); max-height: var(--emr-icon-xs); }
svg.emr-icon-sm { width: var(--emr-icon-sm); height: var(--emr-icon-sm); max-width: var(--emr-icon-sm); max-height: var(--emr-icon-sm); }
svg.emr-icon-md { width: var(--emr-icon-md); height: var(--emr-icon-md); max-width: var(--emr-icon-md); max-height: var(--emr-icon-md); }
svg.emr-icon-lg { width: var(--emr-icon-lg); height: var(--emr-icon-lg); max-width: var(--emr-icon-lg); max-height: var(--emr-icon-lg); }
svg.emr-icon-xl { width: var(--emr-icon-xl); height: var(--emr-icon-xl); max-width: var(--emr-icon-xl); max-height: var(--emr-icon-xl); }
svg.emr-icon-2xl { width: 48px; height: 48px; max-width: 48px; max-height: 48px; }

.emr-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: currentColor;
}