/* ==========================================================================
   Ultra PIMS 2026 — Modern EMR Core
   Futuristic glass + 3D depth system. Zero CDNs. CSS-only theme switching.
   Consumes tokens defined in cloude_memory_cache.json.
   --------------------------------------------------------------------------
   File:       assets/modern-emr/modern-emr-core.css
   Author:     Ultra PIMS UI Overhaul (Phase 1)
   Depends on: nothing. This file defines the ground truth.
   Loaded by:  login.modern.php, index.modern.php, every migrated page.
   ========================================================================== */

/* --- 1. LOCAL FONTS --------------------------------------------------------
   Drop the Inter woff2 files (400, 500, 600, 700, 800) into
   assets/modern-emr/fonts/inter/. A system-ui fallback keeps the page
   legible until they are installed.
   -------------------------------------------------------------------------- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('fonts/inter/Inter-Regular.woff2')   format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('fonts/inter/Inter-Medium.woff2')    format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('fonts/inter/Inter-SemiBold.woff2')  format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('fonts/inter/Inter-Bold.woff2')      format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap;
    src: url('fonts/inter/Inter-ExtraBold.woff2') format('woff2'); }

/* Monospace for code / IDs / lab values */
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('fonts/jetbrains-mono/JetBrainsMono-Regular.woff2') format('woff2'); }


/* --- 2. ROOT TOKENS --------------------------------------------------------
   All tokens live in :root so the entire system is themeable from one place.
   Light theme is the default; `html[data-theme="dark"]` overrides below.
   -------------------------------------------------------------------------- */
:root {
    /* ---- Typography ---- */
    --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    --fs-2xs: 0.6875rem;   /* 11px */
    --fs-xs:  0.75rem;     /* 12px */
    --fs-sm:  0.8125rem;   /* 13px */
    --fs-md:  0.9375rem;   /* 15px */
    --fs-lg:  1.0625rem;   /* 17px */
    --fs-xl:  1.25rem;     /* 20px */
    --fs-2xl: 1.5rem;      /* 24px */
    --fs-3xl: 2rem;        /* 32px */
    --fs-4xl: 2.75rem;     /* 44px */

    --fw-reg: 400;
    --fw-med: 500;
    --fw-sem: 600;
    --fw-bld: 700;
    --fw-xbl: 800;

    --lh-tight: 1.2;
    --lh-body:  1.5;
    --lh-loose: 1.7;

    --tracking-tight:  -0.01em;
    --tracking-normal:  0;
    --tracking-caps:    0.08em;

    /* ---- Spacing (4-pt scale) ---- */
    --sp-0:  0;
    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-5:  1.25rem;
    --sp-6:  1.5rem;
    --sp-8:  2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;

    /* ---- Radius ---- */
    --r-xs:  6px;
    --r-sm:  10px;
    --r-md:  14px;
    --r-lg:  18px;
    --r-xl:  22px;
    --r-2xl: 28px;
    --r-pill: 999px;

    /* ---- Motion ---- */
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast:   120ms;
    --dur-med:    240ms;
    --dur-slow:   420ms;
    --dur-xslow:  720ms;

    /* ---- Z-index (authoritative map from cloude_memory_cache.json) ---- */
    --z-base:        0;
    --z-content:    10;
    --z-glass-nav:  50;
    --z-sticky:    100;
    --z-modal:     500;
    --z-popup:     600;
    --z-tooltip:   700;
    --z-toast:    1000;

    /* ---- Status palette (shared) ---- */
    --st-success:     #10B981;
    --st-warning:     #F59E0B;
    --st-danger:      #EF4444;
    --st-info:        #0EA5E9;
    --st-neutral:     #64748B;

    /* ============================================================
       LIGHT THEME (default) — "Lively Light"
       ============================================================ */
    --bg-primary:    #F8FAFC;
    --bg-elevated:   #FFFFFF;
    --bg-subtle:     #F1F5F9;
    --bg-muted:      #E2E8F0;

    --glass-bg:         rgba(255, 255, 255, 0.70);
    --glass-bg-strong:  rgba(255, 255, 255, 0.86);
    --glass-bg-soft:    rgba(255, 255, 255, 0.45);
    --glass-border:     rgba(14, 165, 233, 0.22);
    --glass-border-hi:  rgba(14, 165, 233, 0.45);
    --glass-blur:       blur(18px) saturate(1.15);

    --accent:          #0EA5E9;
    --accent-hover:    #0284C7;
    --accent-soft:     rgba(14, 165, 233, 0.12);
    --accent-ring:     rgba(14, 165, 233, 0.35);

    --text-main:       #1E293B;
    --text-body:       #334155;
    --text-muted:      #64748B;
    --text-faint:      #94A3B8;
    --text-on-accent:  #FFFFFF;

    --border-subtle:   rgba(15, 23, 42, 0.08);
    --border-strong:   rgba(15, 23, 42, 0.16);

    /* --- Migration-friendly aliases (--c-* tokens) -------------------
       Several v3.14+ migrated pages reference --c-accent, --c-text,
       --c-surface, --c-surface-2, --c-border, --c-danger, --c-success.
       Map them onto the canonical variables here so no per-page edits
       are needed. Status colors (success/warning/danger) get explicit
       light-theme values. */
    --c-accent:    var(--accent);
    --c-text:      var(--text-main);
    --c-surface:   var(--bg-elevated);
    --c-surface-2: var(--bg-subtle);
    --c-border:    var(--border-subtle);
    --c-success:   #16A34A;
    --c-warning:   #D97706;
    --c-danger:    #DC2626;

    /* Layered 3D shadows (z-axis depth). Kowalski rule: stack, don't bludgeon. */
    --shadow-0: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-1: 0 2px 4px rgba(15, 23, 42, 0.05), 0 4px 10px -2px rgba(15, 23, 42, 0.06);
    --shadow-2: 0 4px 8px rgba(15, 23, 42, 0.06), 0 12px 24px -8px rgba(15, 23, 42, 0.10);
    --shadow-3: 0 8px 16px rgba(15, 23, 42, 0.08), 0 24px 48px -12px rgba(15, 23, 42, 0.14);
    --shadow-glow: 0 0 0 1px var(--glass-border), 0 0 32px -8px var(--accent-ring);
    --shadow-ring: 0 0 0 3px var(--accent-ring);

    /* Background aurora blooms for the app shell */
    --aurora-a: radial-gradient(circle at 12% 18%, rgba(110, 231, 183, 0.28), transparent 48%);
    --aurora-b: radial-gradient(circle at 88% 82%, rgba(196, 181, 253, 0.28), transparent 48%);
    --aurora-c: radial-gradient(circle at 50% 55%, rgba(14, 165, 233, 0.10), transparent 62%);
    --aurora-grid:
        linear-gradient( 60deg, rgba(100,140,200,0.06) 1px, transparent 1px),
        linear-gradient(-60deg, rgba(100,140,200,0.06) 1px, transparent 1px);
    --aurora-base: linear-gradient(135deg, #F0F9FF 0%, #F5F3FF 50%, #ECFDF5 100%);

    color-scheme: light;
}

/* ============================================================
   DARK THEME — "Cyber-Clinical Futuristic"
   Rebinds the dark-mode tokens to the palette used by the
   futuristic-dashboard.css command-center pages, so toggling
   to dark gives the whole shell + all modern-emr pages the
   same cyan-on-deep-navy cyber look as the futuristic
   dashboards (frmJourneyTracker, frmDashboardFuturistic, etc.).

   Source palette: assets/modern-emr/futuristic-dashboard.css
     --fd-bg-0..3, --fd-accent (#00e0ff), --fd-accent-2 (#7d5cff),
     --fd-text (#cfe9ff), --fd-ok/--fd-warn/--fd-danger, etc.
   ============================================================ */
html[data-theme="dark"] {
    --bg-primary:    #060b1a;   /* fd-bg-1 */
    --bg-elevated:   #0b1424;   /* fd-bg-2 */
    --bg-subtle:     #03060f;   /* fd-bg-0 */
    --bg-muted:      #11233f;   /* fd-bg-3 */

    --glass-bg:         rgba(11, 20, 36, 0.70);
    --glass-bg-strong:  rgba(11, 20, 36, 0.88);
    --glass-bg-soft:    rgba(11, 20, 36, 0.45);
    --glass-border:     rgba(30, 184, 255, 0.30);    /* fd-border + slight bump */
    --glass-border-hi:  rgba(30, 184, 255, 0.60);

    --accent:          #00e0ff;                       /* fd-accent */
    --accent-hover:    #1eb8ff;                       /* fd-glow */
    --accent-soft:     rgba(0, 224, 255, 0.12);
    --accent-ring:     rgba(0, 224, 255, 0.45);

    --text-main:       #ffffff;                       /* fd-text-strong */
    --text-body:       #cfe9ff;                       /* fd-text */
    --text-muted:      #6e8aab;                       /* fd-text-muted */
    --text-faint:      rgba(207, 233, 255, 0.55);     /* fd-text-faint */
    --text-on-accent:  #03060f;

    --border-subtle:   rgba(30, 184, 255, 0.12);      /* fd-border-soft */
    --border-strong:   rgba(30, 184, 255, 0.25);      /* fd-border */

    /* Status colors: pulled directly from the futuristic palette
       (--fd-ok / --fd-warn / --fd-danger). */
    --c-success:       #19e0a4;
    --c-warning:       #f7b62c;
    --c-danger:        #ff4e6b;

    --shadow-0: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-1: 0 2px 4px rgba(0, 0, 0, 0.45), 0 4px 10px -2px rgba(0, 0, 0, 0.40);
    --shadow-2: 0 4px 8px rgba(0, 0, 0, 0.50), 0 12px 28px -8px rgba(0, 0, 0, 0.60);
    --shadow-3: 0 8px 16px rgba(0, 0, 0, 0.55), 0 24px 56px -12px rgba(0, 0, 0, 0.70);
    --shadow-glow: 0 0 0 1px var(--glass-border), 0 0 36px -6px var(--accent-ring);
    --shadow-ring: 0 0 0 3px var(--accent-ring);

    /* Cyber-tint aurora bg: cooler cyan/violet wash + faint scanline grid. */
    --aurora-a: radial-gradient(circle at 12% 18%, rgba(30, 184, 255, 0.22), transparent 48%);
    --aurora-b: radial-gradient(circle at 88% 82%, rgba(125, 92, 255, 0.20), transparent 48%);
    --aurora-c: radial-gradient(circle at 50% 55%, rgba(0, 224, 255, 0.08), transparent 62%);
    --aurora-grid:
        linear-gradient( 60deg, rgba(30, 184, 255, 0.06) 1px, transparent 1px),
        linear-gradient(-60deg, rgba(30, 184, 255, 0.06) 1px, transparent 1px);
    --aurora-base: linear-gradient(135deg, #03060f 0%, #060b1a 50%, #0b1424 100%);

    color-scheme: dark;
}


/* --- 3. BASE RESET + TYPOGRAPHY -------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Mobile-defensive: kills horizontal scroll caused by 3D transforms,
   off-screen sidebar (translateX -100%), aurora blooms, and any inline
   element whose computed width briefly exceeds 100vw. Vertical scroll
   is preserved. */
html, body { overflow-x: hidden; max-width: 100%; }
html { overscroll-behavior-x: contain; }
html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
}
body {
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    font-weight: var(--fw-reg);
    line-height: var(--lh-body);
    color: var(--text-main);
    background: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    min-height: 100svh;
}

/* App shell background: aurora blooms + isometric grid over base gradient */
.app-shell-bg,
body.app-shell {
    background:
        var(--aurora-grid),
        var(--aurora-a),
        var(--aurora-b),
        var(--aurora-c),
        var(--aurora-base);
    background-size: 40px 69.28px, 40px 69.28px, auto, auto, auto, auto;
    background-attachment: fixed;
}

h1,h2,h3,h4,h5,h6 { margin: 0 0 var(--sp-3); font-weight: var(--fw-sem); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); color: var(--text-main); }
h1 { font-size: var(--fs-3xl); font-weight: var(--fw-bld); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); }
p  { margin: 0 0 var(--sp-3); color: var(--text-body); }

a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--accent-hover); }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }

hr { border: 0; height: 1px; background: var(--border-subtle); margin: var(--sp-5) 0; }

::selection { background: var(--accent-soft); color: var(--text-main); }

/* Focus visibility — WCAG AAA contrast */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--shadow-ring);
    border-radius: var(--r-xs);
}


/* --- 4. LAYOUT PRIMITIVES -------------------------------------------------- */
.container          { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--sp-5); }
.container-narrow   { max-width: 760px; }
.container-wide     { max-width: 1680px; }
.stack   > * + *    { margin-top: var(--sp-4); }
.stack-sm > * + *   { margin-top: var(--sp-2); }
.stack-lg > * + *   { margin-top: var(--sp-6); }
.row-flex           { display: flex; gap: var(--sp-3); align-items: center; }
.row-between        { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.col-flex           { display: flex; flex-direction: column; gap: var(--sp-3); }
.grid-2             { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.grid-3             { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.grid-auto          { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); }
@media (max-width: 900px) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

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


/* --- 5. GLASS SURFACES ---------------------------------------------------- */
.glass {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
            backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-2);
    color: var(--text-main);
}
.glass-strong { background: var(--glass-bg-strong); box-shadow: var(--shadow-3); }
.glass-soft   { background: var(--glass-bg-soft);   box-shadow: var(--shadow-1); }

.glass-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
            backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-2);
    padding: var(--sp-5);
    transition: transform var(--dur-med) var(--ease-out),
                box-shadow var(--dur-med) var(--ease-out),
                border-color var(--dur-med) var(--ease-out);
}
.glass-card.is-interactive { cursor: pointer; }
.glass-card.is-interactive:hover {
    transform: translateY(-2px);
    border-color: var(--glass-border-hi);
    box-shadow: var(--shadow-3), 0 0 30px -10px var(--accent-ring);
}

/* --- 5b. GLASS-CARD COMPOSITION (header / body / accent variant) -----------
   Native primitives for cards that need a titled header bar — used by the
   helper classes (Filter::*) and by every form section in the migrated
   pages. The accent variant adds a left rule + accent-tinted heading. */
.glass-card-accent {
    border-left: 3px solid var(--accent);
}
.glass-card-header {
    padding: var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--glass-border);
    font: var(--fw-sem) var(--fs-md)/1.25 var(--font-sans);
    color: var(--text-main);
    letter-spacing: 0.2px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
}
.glass-card-accent > .glass-card-header { color: var(--accent); }

/* Glass title — used inside .glass-card-header as a <h3>/<h2> heading so the
   default browser margins don't fight the header padding. */
.glass-title {
    margin: 0;
    font: var(--fw-sem) var(--fs-md)/1.25 var(--font-sans);
    color: var(--text-main);
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.glass-title > i, .glass-title > .fa { color: var(--accent); }
.glass-card-body {
    padding: var(--sp-4) var(--sp-5);
    color: var(--text-main);
    font: var(--fw-med) var(--fs-sm)/1.55 var(--font-sans);
}
.glass-card-body > :last-child { margin-bottom: 0; }
/* When .glass-card-header / .glass-card-body live inside .glass-card we want
   the parent's padding to collapse so header/body provide their own. */
.glass-card:has(> .glass-card-header) { padding: 0; overflow: hidden; }

/* --- 5c. BTN-HUD BUTTON SYSTEM ---------------------------------------------
   Used as the primary action button in every modernized form. Three flavors:
     .btn-hud-primary  → accent gradient
     .btn-hud-ghost    → bordered, transparent fill (cancel / back)
     .btn-hud-danger   → red gradient (destructive)
   Plus .btn-hud-icon for compact icon-only buttons (e.g., search, refresh). */
.btn-hud {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    font: var(--fw-sem) var(--fs-sm)/1 var(--font-sans);
    cursor: pointer;
    text-decoration: none;
    transition: filter var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
    user-select: none;
    white-space: nowrap;
}
.btn-hud:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.btn-hud-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 4px 12px -4px var(--accent-ring);
}
.btn-hud-primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-hud-ghost {
    background: transparent;
    color: var(--text-main);
    border-color: var(--border-subtle);
}
.btn-hud-ghost:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.btn-hud-danger {
    background: linear-gradient(135deg, #DC2626, #991B1B);
    color: #fff; border-color: #991B1B;
    box-shadow: 0 4px 12px -4px rgba(220, 38, 38, 0.5);
}
.btn-hud-danger:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-hud-icon {
    width: 38px; height: 38px;
    padding: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    border: 1px solid var(--accent);
    color: #fff;
    box-shadow: 0 4px 10px -4px var(--accent-ring);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: filter var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn-hud-icon:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-hud-icon > svg { width: 16px; height: 16px; fill: currentColor; }

/* --- 5d. GLASS-TABLE (data grid with sticky header) ------------------------
   Used by the heaviest pages (waiting list, consultation history) so doctors
   never lose column context when scrolling. z-index: var(--z-sticky) keeps
   the header above row content but below modals. */
.glass-table-wrap {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
            backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-2);
    overflow: auto;
    max-height: 70vh;
    position: relative;
}
.glass-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font: var(--fw-med) var(--fs-sm)/1.45 var(--font-sans);
    color: var(--text-main);
}
.glass-table thead th,
.glass-table tr.header td {
    position: sticky; top: 0;
    z-index: var(--z-sticky);
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--glass-border);
    font: var(--fw-sem) var(--fs-xs)/1.2 var(--font-sans);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 12px;
    text-align: left;
    white-space: nowrap;
}
.glass-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}
.glass-table tbody tr:last-child td { border-bottom: 0; }
.glass-table tbody tr { transition: background var(--dur-fast) var(--ease-out); }
.glass-table tbody tr:hover > td { background: var(--accent-soft); }
.glass-table tbody tr.is-inactive > td { color: var(--text-muted); text-decoration: line-through; }
.glass-table tbody tr.is-inactive .btn-hud,
.glass-table tbody tr.is-inactive .badge,
.glass-table tbody tr.is-inactive img { text-decoration: none; }

/* --- 5e. GLASS-TABS (vanilla replacement for Bootstrap nav-tabs) -----------
   Pure-CSS tabs driven by a hidden radio input per tab. JS-free. Each tab
   panel is a sibling of the radios; the :checked selector reveals it.
   Markup pattern:
     <div class="glass-tabs" role="tablist">
       <input type="radio" name="tabs-X" id="tab-X-1" checked>
       <label for="tab-X-1" class="glass-tab" role="tab">Tab 1</label>
       <input type="radio" name="tabs-X" id="tab-X-2">
       <label for="tab-X-2" class="glass-tab" role="tab">Tab 2</label>
       <div class="glass-tab-panel" data-tab-for="tab-X-1">...</div>
       <div class="glass-tab-panel" data-tab-for="tab-X-2">...</div>
     </div>
   For JS-driven tabs (state shared with AJAX), use .glass-tabs-js below. */
.glass-tabs {
    display: grid;
    grid-template-columns: 1fr;
}
.glass-tabs > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.glass-tabs > .glass-tab-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: var(--bg-subtle);
    border-radius: var(--r-md);
    border: 1px solid var(--glass-border);
    margin-bottom: var(--sp-3);
}
.glass-tab {
    padding: 8px 16px;
    border-radius: 8px;
    font: var(--fw-sem) var(--fs-sm)/1 var(--font-sans);
    color: var(--text-main);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    border: 1px solid transparent;
    background: transparent;
    user-select: none;
}
.glass-tab:hover { background: var(--accent-soft); color: var(--accent); }
.glass-tab.is-active,
.glass-tabs input[type="radio"]:checked + .glass-tab {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 2px 8px -2px var(--accent-ring);
}
.glass-tab-panel { display: none; }
.glass-tab-panel.is-active { display: block; }
/* Pure-CSS variant: panel matches its radio via [data-tab-for]. */
.glass-tabs > input[type="radio"]:checked ~ .glass-tab-panel[data-tab-for] { display: none; }
.glass-tabs > input#tab-1:checked ~ .glass-tab-panel[data-tab-for="tab-1"],
.glass-tabs > input#tab-2:checked ~ .glass-tab-panel[data-tab-for="tab-2"],
.glass-tabs > input#tab-3:checked ~ .glass-tab-panel[data-tab-for="tab-3"] { display: block; }

/* --- 5f. GLASS-DIALOG (vanilla glass modal, replaces Bootstrap .modal) -----
   <dialog class="glass-dialog">...</dialog> + JS open()/close().
   Falls back to display:block + .is-open for browsers without <dialog>. */
.glass-dialog {
    border: 0; padding: 0;
    background: transparent;
    max-width: 90vw; max-height: 90vh;
    z-index: var(--z-modal);
}
.glass-dialog::backdrop { background: rgba(15, 23, 42, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.glass-dialog > .glass-card { width: min(640px, 92vw); padding: 0; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
.glass-dialog > .glass-card > .glass-card-body { overflow-y: auto; }
.glass-dialog-footer {
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--glass-border);
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-3);
}

/* --- 5g. ALERT-HUD (in-page success/danger/info bubbles) -------------------
   Used in every migrated form to show '?s' / '?e' query-string flags. */
.alert-hud {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px;
    border-radius: var(--r-md);
    font: var(--fw-med) var(--fs-sm)/1.4 var(--font-sans);
    border: 1px solid transparent;
    margin-bottom: var(--sp-3);
}
.alert-hud-success, .alert-hud.alert-success { background: rgba(16, 185, 129, 0.10); color: #047857; border-color: rgba(16, 185, 129, 0.30); }
.alert-hud-danger,  .alert-hud.alert-danger  { background: rgba(239, 68, 68, 0.10);  color: #B91C1C; border-color: rgba(239, 68, 68, 0.30); }
.alert-hud-warning, .alert-hud.alert-warning { background: rgba(245, 158, 11, 0.10); color: #92400E; border-color: rgba(245, 158, 11, 0.30); }
.alert-hud-info,    .alert-hud.alert-info    { background: var(--accent-soft);       color: var(--accent); border-color: var(--accent); }

.glass-panel {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
            backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-3);
}


/* --- 6. APP CHROME: TOPBAR + SIDEBAR + VIEWPORT --------------------------- */
.emr-shell {
    display: grid;
    grid-template-columns: 272px 1fr;
    grid-template-rows: 64px 1fr;
    grid-template-areas:
        "sidebar topbar"
        "sidebar viewport";
    min-height: 100vh;
    min-height: 100svh;
}

/* Topbar */
.emr-topbar {
    grid-area: topbar;
    position: sticky; top: 0;
    z-index: var(--z-glass-nav);
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 0 var(--sp-5);
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
            backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-border);
}
.emr-topbar .brand {
    display: inline-flex; align-items: center; gap: var(--sp-3);
    color: var(--text-main); font-weight: var(--fw-bld); font-size: var(--fs-md);
    letter-spacing: 0.2px;
}
.emr-topbar .brand img { width: 36px; height: 36px; border-radius: 10px; background: #fff; padding: 2px; border: 1px solid var(--glass-border); }
.emr-topbar .nav-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }

.nav-icon-btn {
    --sz: 40px;
    display: inline-grid; place-items: center;
    width: var(--sz); height: var(--sz);
    border-radius: var(--r-sm);
    color: var(--text-muted); background: transparent; border: 0;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.nav-icon-btn:hover, .nav-icon-btn:focus-visible {
    background: var(--accent-soft);
    color: var(--accent);
    box-shadow: 0 0 15px -3px var(--accent-ring);
}

.nav-user {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: 6px 14px; border-radius: var(--r-pill);
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border);
    color: var(--text-main); font-weight: var(--fw-med);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
}
.nav-user:hover { border-color: var(--glass-border-hi); color: var(--accent); box-shadow: 0 0 15px -3px var(--accent-ring); }

/* Sidebar */
.emr-sidebar {
    grid-area: sidebar;
    position: sticky; top: 0; align-self: start;
    width: 272px; height: 100vh; height: 100svh;
    overflow-y: auto; overflow-x: hidden;
    padding: var(--sp-4) var(--sp-3);
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
            backdrop-filter: var(--glass-blur);
    border-right: 1px solid var(--glass-border);
    z-index: var(--z-glass-nav);
}
.emr-sidebar .sb-section-title {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3); margin-top: var(--sp-3);
    color: var(--accent); font-size: var(--fs-2xs); font-weight: var(--fw-bld);
    letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.emr-sidebar .sb-item,
.emr-sidebar a.sb-link {
    display: flex; align-items: center; gap: var(--sp-3);
    width: 100%;
    padding: 10px 12px; margin: 2px 0;
    border-radius: var(--r-sm);
    color: var(--text-body); text-decoration: none;
    font-size: var(--fs-sm); font-weight: var(--fw-med);
    line-height: 1.3;
    background: transparent;
    border: 0;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.emr-sidebar .sb-item > span,
.emr-sidebar a.sb-link > span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.emr-sidebar .sb-ico,
.emr-sidebar .sb-item > i.fa,
.emr-sidebar a.sb-link > i.fa {
    color: var(--accent);
    opacity: 0.85;
    flex-shrink: 0;
    width: 1.1em;
    text-align: center;
    font-size: 0.95em;
}
.emr-sidebar .sb-item:hover,
.emr-sidebar a.sb-link:hover {
    background: var(--accent-soft);
    color: var(--accent);
    box-shadow: 0 0 14px -6px var(--accent-ring);
}
.emr-sidebar .sb-item.is-active,
.emr-sidebar a.sb-link.is-active {
    background: var(--accent-soft);
    color: var(--accent);
    box-shadow: inset 2px 0 0 var(--accent), 0 0 14px -6px var(--accent-ring);
}
.emr-sidebar .sb-arrow { margin-left: auto; transition: transform var(--dur-med) var(--ease-out); opacity: 0.6; }
.emr-sidebar .sb-item.is-open > .sb-arrow { transform: rotate(90deg); }

.emr-sidebar .sb-sub {
    display: none;
    padding: 4px 0 6px 10px;
    margin: 2px 0 6px 8px;
    border-left: 2px solid var(--glass-border-hi);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: rgba(0,0,0,0.02);
}
html[data-theme="dark"] .emr-sidebar .sb-sub { background: rgba(255,255,255,0.03); }
.emr-sidebar .sb-sub.is-open { display: block; }
.emr-sidebar .sb-sub a.sb-link,
.emr-sidebar .sb-sub .sb-item { padding-left: 16px; font-size: var(--fs-xs); }
.emr-sidebar .sb-sub .sb-sub a.sb-link,
.emr-sidebar .sb-sub .sb-sub .sb-item { padding-left: 24px; }
.emr-sidebar .sb-sub .sb-sub .sb-sub a.sb-link { padding-left: 32px; }

/* Viewport — AJAX target */
.emr-viewport-wrap {
    grid-area: viewport;
    padding: var(--sp-5);
    min-height: 0;
    overflow: auto;
}
#viewport {
    position: relative;
    min-height: calc(100vh - 64px - var(--sp-8));
    border-radius: var(--r-xl);
    background: var(--bg-elevated);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-3);
    padding: var(--sp-6);
    color: var(--text-main);
}
#viewport.is-loading::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: var(--r-xl);
    background: var(--glass-bg-soft);
    -webkit-backdrop-filter: var(--glass-blur);
            backdrop-filter: var(--glass-blur);
    z-index: var(--z-content);
}

/* Legacy iframe fallback host — stays below the SPA viewport but above the shell */
#viewport-iframe-host {
    display: none;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--bg-elevated);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-3);
}
#viewport-iframe-host.is-visible { display: block; }
#viewport-iframe-host iframe {
    display: block;
    width: 100%;
    height: calc(100vh - 64px - var(--sp-8));
    border: 0;
    background: var(--bg-elevated);
}

/* Sidebar smooth collapse */
.emr-sidebar {
    transition: opacity var(--dur-med) var(--ease-out),
                transform var(--dur-med) var(--ease-out);
}

/* Desktop collapse — burger toggles .is-sidebar-collapsed on .emr-shell */
.emr-shell.is-sidebar-collapsed {
    grid-template-columns: 0 1fr;
}
.emr-shell.is-sidebar-collapsed .emr-sidebar {
    width: 0;
    padding: 0;
    border-right-width: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Shell collapses on mobile (burger becomes an overlay toggle) */
@media (max-width: 900px) {
    .emr-shell { grid-template-columns: 1fr; grid-template-areas: "topbar" "viewport"; }
    .emr-shell.is-sidebar-collapsed { grid-template-columns: 1fr; }
    .emr-shell.is-sidebar-collapsed .emr-sidebar { width: 272px; padding: var(--sp-4) var(--sp-3); opacity: 1; pointer-events: auto; border-right-width: 1px; }
    .emr-sidebar { position: fixed; left: 0; top: 64px; height: calc(100vh - 64px); transform: translateX(-100%); z-index: calc(var(--z-glass-nav) + 1); }
    .emr-sidebar.is-open { transform: translateX(0); box-shadow: var(--shadow-3); }

    /* Topbar fits viewport — clip any overflow from icon buttons; brand may
       truncate; viewport-wrap padding reduces to avoid pushing content out. */
    .emr-topbar { padding: 0 var(--sp-3); overflow: hidden; }
    .emr-topbar .brand { min-width: 0; overflow: hidden; }
    .emr-topbar .brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; }
    .emr-topbar .nav-actions { min-width: 0; }
    .emr-viewport-wrap { padding: var(--sp-3); }
    #viewport { padding: var(--sp-4); }
    #viewport-iframe-host iframe { width: 100%; }
}

/* Phone-sized viewports: shrink icon buttons + hide non-essential actions */
@media (max-width: 480px) {
    .nav-icon-btn { --sz: 36px; }
    .emr-topbar .nav-icon-btn[title="Schedule appointment"],
    .emr-topbar .nav-icon-btn[title="Vehicle Request"],
    .emr-topbar .nav-icon-btn[title="Support / Tickets"] {
        display: none;     /* low-frequency icons; reach via sidebar */
    }
    .emr-topbar .brand img { width: 30px; height: 30px; }
    .emr-topbar .brand span { font-size: var(--fs-sm); max-width: 32vw; }
}


/* --- 7. BUTTONS ----------------------------------------------------------- */
.btn-emr {
    --h: 40px;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    height: var(--h); padding: 0 var(--sp-5);
    font: var(--fw-sem) var(--fs-sm)/1 var(--font-sans);
    letter-spacing: 0.2px;
    border-radius: var(--r-sm);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--text-main);
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
    -webkit-backdrop-filter: var(--glass-blur);
            backdrop-filter: var(--glass-blur);
    user-select: none;
    white-space: nowrap;
}
.btn-emr:hover { transform: translateY(-1px); border-color: var(--glass-border-hi); box-shadow: var(--shadow-1), 0 0 16px -8px var(--accent-ring); }
.btn-emr:active { transform: translateY(0); box-shadow: var(--shadow-0); }
.btn-emr:disabled, .btn-emr[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-emr.btn-primary   { background: var(--accent); color: var(--text-on-accent); border-color: transparent; }
.btn-emr.btn-primary:hover   { background: var(--accent-hover); box-shadow: var(--shadow-2), 0 0 24px -6px var(--accent-ring); }
.btn-emr.btn-ghost     { background: transparent; border-color: transparent; color: var(--text-body); }
.btn-emr.btn-ghost:hover { background: var(--accent-soft); color: var(--accent); }
.btn-emr.btn-outline   { background: transparent; }
.btn-emr.btn-danger    { background: var(--st-danger); color: #fff; border-color: transparent; }
.btn-emr.btn-danger:hover { background: #DC2626; box-shadow: 0 0 22px -6px rgba(239,68,68,0.5); }
.btn-emr.btn-success   { background: var(--st-success); color: #fff; border-color: transparent; }
.btn-emr.btn-warning   { background: var(--st-warning); color: #1F2937; border-color: transparent; }

.btn-emr.btn-sm  { --h: 32px; padding: 0 var(--sp-4); font-size: var(--fs-xs); }
.btn-emr.btn-lg  { --h: 48px; padding: 0 var(--sp-6); font-size: var(--fs-md); }
.btn-emr.btn-icon{ padding: 0; width: var(--h); }

/* Status-aware toggle: Activate / Deactivate — bound by JS via [data-status] */
.btn-emr[data-status="0"] { background: var(--glass-bg); color: var(--st-success); border-color: var(--glass-border-hi); }
.btn-emr[data-status="0"]::before { content: "Activate"; }
.btn-emr[data-status="1"] { background: var(--glass-bg); color: var(--st-warning); border-color: var(--glass-border-hi); }
.btn-emr[data-status="1"]::before { content: "Deactivate"; }


/* --- 8. FORMS ------------------------------------------------------------- */
.fld {
    display: flex; flex-direction: column; gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}
.fld-label {
    font-size: var(--fs-xs); font-weight: var(--fw-sem); color: var(--text-muted);
    letter-spacing: 0.3px; text-transform: uppercase;
}
.fld-label .req { color: var(--st-danger); margin-left: 2px; }

.fld-input,
.fld-select,
.fld-textarea {
    width: 100%;
    height: 42px;
    padding: 0 var(--sp-4);
    font: var(--fw-med) var(--fs-md)/1 var(--font-sans);
    color: var(--text-main);
    background: var(--glass-bg-strong);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-sm);
    transition: border-color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
    outline: none;
}
.fld-textarea { height: auto; min-height: 96px; padding: var(--sp-3) var(--sp-4); line-height: var(--lh-body); resize: vertical; }
.fld-input:hover, .fld-select:hover, .fld-textarea:hover { border-color: var(--border-strong); }
.fld-input:focus, .fld-select:focus, .fld-textarea:focus {
    border-color: var(--accent);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-ring);
}
.fld-input::placeholder, .fld-textarea::placeholder { color: var(--text-faint); }
.fld-input:disabled, .fld-select:disabled, .fld-textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.fld-input.is-invalid, .fld-select.is-invalid, .fld-textarea.is-invalid { border-color: var(--st-danger); box-shadow: 0 0 0 3px rgba(239,68,68,0.25); }

.fld-hint { font-size: var(--fs-xs); color: var(--text-muted); display: block; margin-top: 4px; }
.fld-error { font-size: var(--fs-xs); color: var(--st-danger); }

/* ── Form layout helpers (replacements for Bootstrap form-horizontal grid) ── */
.fld-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.fld-group {
    display: grid;
    grid-template-columns: minmax(140px, 200px) 1fr;
    gap: var(--sp-3);
    align-items: start;
}
.fld-group > .fld-label { padding-top: 8px; }
@media (max-width: 700px) {
    .fld-group { grid-template-columns: 1fr; gap: var(--sp-1); }
    .fld-group > .fld-label { padding-top: 0; }
}
/* Bootstrap col-sm-* leftovers inside .fld-group cooperate: the right-hand
   column wraps a col-sm-X div which becomes a no-op flex item. */
.fld-group > [class*="col-sm-"] { padding: 0; }

/* Static text styled like a disabled input (was Bootstrap .form-control-static). */
.fld-static {
    display: block;
    padding: 8px 0;
    color: var(--text-main);
    font-size: var(--fs-md);
    min-height: 38px;
}

/* Red asterisk / required-field indicator (was Bootstrap .text-danger). */
.fld-required { color: var(--st-danger); font-weight: 600; }

/* ── Bootstrap leftover shims ───────────────────────────────────────────────
   Forms migrated from legacy templates often still ship .content-wrapper /
   .row / .col-md-N / .col-sm-N / .page-header markup. Without Bootstrap
   loaded these end up unstyled. The rules below give them sensible defaults
   so the migrated forms render correctly without needing per-file HTML
   surgery. */
.content-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-3) var(--sp-6);
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* .row used to negative-margin its children; without Bootstrap we just want
   columns to stack vertically with a small gap. Inside .glass-card-body we
   want them flush. */
.row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.row > [class*="col-"] { flex: 1 1 100%; min-width: 0; }
.row > .col-md-6, .row > .col-lg-6, .row > .col-sm-6 { flex: 1 1 calc(50% - var(--sp-3)); }
.row > .col-md-4, .row > .col-lg-4, .row > .col-sm-4 { flex: 1 1 calc(33.333% - var(--sp-3)); }
.row > .col-md-3, .row > .col-lg-3, .row > .col-sm-3 { flex: 1 1 calc(25% - var(--sp-3)); }
.row > .col-md-8, .row > .col-lg-8, .row > .col-sm-8 { flex: 1 1 calc(66.666% - var(--sp-3)); }
.row > .col-md-9, .row > .col-lg-9, .row > .col-sm-9 { flex: 1 1 calc(75% - var(--sp-3)); }
.row > .col-md-12, .row > .col-lg-12, .row > .col-sm-12 { flex: 1 1 100%; }
@media (max-width: 768px) {
    .row > [class*="col-"] { flex: 1 1 100%; }
}

/* Page-header heading (legacy Bootstrap class) — render as a modern section
   header so forms that still use it look right. */
.page-header {
    margin: 0 0 var(--sp-3);
    padding: 0 0 var(--sp-2);
    border-bottom: 1px solid var(--border-subtle);
    font: var(--fw-sem) var(--fs-xl)/1.3 var(--font-sans);
    color: var(--text-main);
    letter-spacing: 0.2px;
}

/* Tighten any inline <font color> color tags that legacy forms emit for
   "saved" / "error" messages — give them a subtle pill background. */
body.app-shell font[color], body.app-shell font[style] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--font-sans) !important;
    font-size: var(--fs-xs) !important;
    background: rgba(56,189,248,0.08);
    border: 1px solid var(--border-subtle);
}

/* Input with leading icon */
.fld-input-wrap { position: relative; }
.fld-input-wrap .fld-input { padding-left: 40px; }
.fld-input-wrap > .fld-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); pointer-events: none;
    width: 18px; height: 18px; display: grid; place-items: center;
}

/* Select chevron */
.fld-select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    padding-right: 40px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 20px) 19px,
        calc(100% - 15px) 19px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

/* Switch */
.fld-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.fld-switch input { opacity: 0; width: 0; height: 0; }
.fld-switch .slider {
    position: absolute; inset: 0; cursor: pointer;
    background: var(--bg-muted); border-radius: var(--r-pill);
    transition: background var(--dur-med) var(--ease-out);
}
.fld-switch .slider::before {
    content: ""; position: absolute; left: 3px; top: 3px;
    width: 18px; height: 18px; border-radius: 50%; background: #fff;
    box-shadow: var(--shadow-1);
    transition: transform var(--dur-med) var(--ease-spring);
}
.fld-switch input:checked + .slider { background: var(--accent); }
.fld-switch input:checked + .slider::before { transform: translateX(20px); }
.fld-switch input:focus-visible + .slider { box-shadow: var(--shadow-ring); }

/* Checkbox + radio (custom, accessible) */
.fld-check { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; font-size: var(--fs-sm); color: var(--text-body); }
.fld-check input[type="checkbox"], .fld-check input[type="radio"] {
    appearance: none; -webkit-appearance: none;
    width: 18px; height: 18px; margin: 0;
    border: 1.5px solid var(--border-strong); background: var(--glass-bg-strong);
    border-radius: 5px;
    display: grid; place-content: center;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
}
.fld-check input[type="radio"] { border-radius: 50%; }
.fld-check input:checked { background: var(--accent); border-color: var(--accent); }
.fld-check input[type="checkbox"]:checked::after {
    content: ""; width: 10px; height: 10px;
    background: #fff;
    clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 20%, 84% 0, 40% 68%);
}
.fld-check input[type="radio"]:checked::after {
    content: ""; width: 8px; height: 8px; background: #fff; border-radius: 50%;
}
.fld-check input:focus-visible { box-shadow: var(--shadow-ring); }


/* --- 9. TABLES + STATUS CHIPS --------------------------------------------- */
.emr-table-wrap {
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--bg-elevated);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-1);
}
.emr-table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    font-size: var(--fs-sm);
}
.emr-table thead th {
    position: sticky; top: 0; z-index: 2;
    padding: var(--sp-3) var(--sp-4);
    text-align: left; font-weight: var(--fw-sem); color: var(--text-muted);
    font-size: var(--fs-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase;
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border-subtle);
}
.emr-table tbody td {
    padding: var(--sp-3) var(--sp-4);
    color: var(--text-body);
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}
.emr-table tbody tr { transition: background var(--dur-fast) var(--ease-out); }
.emr-table tbody tr:hover { background: var(--accent-soft); }

/* Inactive rows: readable but clearly signalled. Strikethrough on text cells,
   muted (not dimmed) color. Chips and buttons inside the row opt out of the
   strikethrough so their own status is still legible. */
.emr-table tbody tr.is-inactive td {
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-color: var(--text-faint);
    text-decoration-thickness: 1px;
}
.emr-table tbody tr.is-inactive td .chip,
.emr-table tbody tr.is-inactive td .btn-emr,
.emr-table tbody tr.is-inactive td .chip *,
.emr-table tbody tr.is-inactive td .btn-emr * {
    text-decoration: none;
}

/* Pagination — wraps the raw output of Pager::pageList() (first/prev anchors,
   a <select name='pageCombo'> jump, next/last anchors) and gives it a modern
   pill look. Use: <div class="emr-pager"><?php echo $list[last]; ?></div>  */
.emr-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: var(--sp-3) 0;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
.emr-pager a {
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border-subtle);
    background: var(--glass-bg-soft);
    -webkit-backdrop-filter: var(--glass-blur);
            backdrop-filter: var(--glass-blur);
    color: var(--text-body) !important;
    text-decoration: none !important;
    line-height: 1;
    transition: background var(--dur-fast) var(--ease-out),
                color      var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                transform  var(--dur-fast) var(--ease-out);
    font-weight: var(--fw-med);
}
.emr-pager a:hover {
    background: var(--accent-soft);
    color: var(--accent) !important;
    border-color: var(--glass-border-hi);
    box-shadow: 0 0 14px -6px var(--accent-ring);
    transform: translateY(-1px);
}
.emr-pager a:active { transform: translateY(0); }
.emr-pager select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    height: 34px;
    min-width: 68px;
    padding: 0 28px 0 12px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border-subtle);
    background-color: var(--bg-elevated);
    color: var(--text-main);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-med);
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 14px) 15px,
        calc(100% - 9px) 15px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow   var(--dur-fast) var(--ease-out);
}
.emr-pager select:hover { border-color: var(--glass-border-hi); }
.emr-pager select:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-ring); }

/* Jump-to-page number input injected by modern-emr-spa.js §12 */
.emr-pager input.emr-pager-input {
    height: 34px;
    width: 68px;
    padding: 0 var(--sp-3);
    border-radius: var(--r-sm);
    border: 1px solid var(--border-subtle);
    background: var(--bg-elevated);
    color: var(--text-main);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-sem);
    text-align: center;
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.emr-pager input.emr-pager-input:hover { border-color: var(--glass-border-hi); }
.emr-pager input.emr-pager-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-ring); }
.emr-pager input.emr-pager-input::-webkit-outer-spin-button,
.emr-pager input.emr-pager-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.emr-pager input.emr-pager-input { -moz-appearance: textfield; }
.emr-pager .emr-pager-of { color: var(--text-muted); font-size: var(--fs-xs); margin-left: -2px; }
.emr-pager .emr-pager-go {
    height: 34px; padding: 0 12px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border-subtle);
    background: var(--accent-soft);
    color: var(--accent);
    font: inherit; font-weight: var(--fw-sem); font-size: var(--fs-xs);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.emr-pager .emr-pager-go:hover { background: var(--accent); color: var(--text-on-accent); box-shadow: 0 0 16px -6px var(--accent-ring); transform: translateY(-1px); }
.emr-pager .emr-pager-go:active { transform: translateY(0); }

/* Status chip */
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 22px; padding: 0 10px;
    font-size: var(--fs-xs); font-weight: var(--fw-sem); letter-spacing: 0.2px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-subtle);
    background: var(--glass-bg-soft);
    color: var(--text-body);
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.chip-active    { color: var(--st-success); border-color: rgba(16,185,129,0.35); background: rgba(16,185,129,0.10); }
.chip.chip-inactive  { color: var(--text-muted); border-color: var(--border-strong);  background: var(--bg-muted); text-decoration: line-through; }
.chip.chip-warning   { color: var(--st-warning); border-color: rgba(245,158,11,0.35); background: rgba(245,158,11,0.10); }
.chip.chip-danger    { color: var(--st-danger);  border-color: rgba(239,68,68,0.35);  background: rgba(239,68,68,0.10); }
.chip.chip-info      { color: var(--st-info);    border-color: rgba(14,165,233,0.35); background: rgba(14,165,233,0.10); }

/* Status-driven row class (data-driven — wire via JS using row.dataset.status).
   No opacity — color + strikethrough is the signal; rows must stay readable. */
[data-status="0"] .chip-auto { color: var(--text-muted); border-color: var(--border-strong); background: var(--bg-muted); text-decoration: line-through; }
[data-status="0"] .chip-auto::before { content: "Inactive"; }
[data-status="1"] .chip-auto { color: var(--st-success); border-color: rgba(16,185,129,0.35); background: rgba(16,185,129,0.10); }
[data-status="1"] .chip-auto::before { content: "Active"; }


/* --- 10. BENTO FILTER BAR + DRAWER ---------------------------------------- */
.bento-filter-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) auto;
    gap: var(--sp-3);
    padding: var(--sp-4);
    margin-bottom: var(--sp-4);
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
            backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
}
.bento-filter-bar .fld { margin-bottom: 0; }

.drawer-overlay {
    position: fixed; inset: 0;
    background: rgba(2, 6, 23, 0.45);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    z-index: var(--z-modal);
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur-med) var(--ease-out);
}
.drawer-overlay.is-open { opacity: 1; pointer-events: auto; }

.drawer {
    position: fixed; top: 0; right: 0; height: 100vh; height: 100svh;
    width: min(420px, 92vw);
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: var(--glass-blur);
            backdrop-filter: var(--glass-blur);
    border-left: 1px solid var(--glass-border);
    box-shadow: -24px 0 48px -20px rgba(2,6,23,0.4);
    z-index: calc(var(--z-modal) + 1);
    transform: translateX(100%);
    transition: transform var(--dur-slow) var(--ease-out);
    display: flex; flex-direction: column;
}
.drawer.is-open { transform: translateX(0); }
.drawer-header { padding: var(--sp-5); border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: space-between; }
.drawer-body   { padding: var(--sp-5); overflow-y: auto; flex: 1; }
.drawer-footer { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--glass-border); display: flex; justify-content: flex-end; gap: var(--sp-3); }
.drawer.drawer-left { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--glass-border); transform: translateX(-100%); box-shadow: 24px 0 48px -20px rgba(2,6,23,0.4); }
.drawer.drawer-left.is-open { transform: translateX(0); }


/* --- 11. MODALS (z-index > drawer but < popups/pickers) ------------------- */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(2, 6, 23, 0.55);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    display: grid; place-items: center;
    z-index: var(--z-modal);
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur-med) var(--ease-out);
}
.modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.modal {
    width: min(560px, 92vw);
    max-height: 86vh;
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: var(--glass-blur);
            backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-3);
    display: flex; flex-direction: column;
    transform: translateY(12px) scale(0.98);
    opacity: 0;
    transition: transform var(--dur-slow) var(--ease-spring), opacity var(--dur-med) var(--ease-out);
}
.modal-overlay.is-open .modal { transform: translateY(0) scale(1); opacity: 1; }
.modal-header { padding: var(--sp-5); border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: space-between; }
.modal-body   { padding: var(--sp-5); overflow-y: auto; }
.modal-footer { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--glass-border); display: flex; justify-content: flex-end; gap: var(--sp-3); }

/* Popups + date-pickers always on top */
.emr-popup, .emr-datepicker, .flatpickr-calendar, .ui-datepicker, .bootstrap-datetimepicker-widget {
    z-index: var(--z-popup) !important;
}
.emr-tooltip { z-index: var(--z-tooltip) !important; }


/* --- 12. TOASTS ----------------------------------------------------------- */
.toast-stack {
    position: fixed; top: var(--sp-5); right: var(--sp-5);
    display: flex; flex-direction: column; gap: var(--sp-3);
    z-index: var(--z-toast);
    max-width: 380px; width: calc(100vw - var(--sp-8));
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: var(--glass-blur);
            backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-3);
    color: var(--text-main);
    transform: translateX(20px); opacity: 0;
    animation: toastEnter var(--dur-med) var(--ease-spring) forwards;
}
.toast.is-leaving { animation: toastExit var(--dur-med) var(--ease-out) forwards; }
.toast .toast-icon { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 2px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 700; }
.toast .toast-body { flex: 1; min-width: 0; }
.toast .toast-title { font-size: var(--fs-sm); font-weight: var(--fw-sem); margin-bottom: 2px; color: var(--text-main); }
.toast .toast-msg   { font-size: var(--fs-xs); color: var(--text-body); word-wrap: break-word; }
.toast .toast-close { background: transparent; border: 0; color: var(--text-muted); cursor: pointer; padding: 2px; border-radius: var(--r-xs); transition: color var(--dur-fast); }
.toast .toast-close:hover { color: var(--text-main); }

.toast.toast-success { border-color: rgba(16,185,129,0.40); }
.toast.toast-success .toast-icon { background: var(--st-success); }
.toast.toast-danger  { border-color: rgba(239,68,68,0.40); }
.toast.toast-danger  .toast-icon { background: var(--st-danger); }
.toast.toast-warning { border-color: rgba(245,158,11,0.40); }
.toast.toast-warning .toast-icon { background: var(--st-warning); color: #1F2937; }
.toast.toast-info    { border-color: var(--glass-border-hi); }
.toast.toast-info    .toast-icon { background: var(--accent); }

@keyframes toastEnter { to { transform: translateX(0); opacity: 1; } }
@keyframes toastExit  { to { transform: translateX(20px); opacity: 0; } }


/* --- 13. SKELETON LOADERS (glassmorphic shimmer) -------------------------- */
.skeleton {
    position: relative;
    background: linear-gradient(90deg, var(--bg-muted) 0%, rgba(255,255,255,0.35) 50%, var(--bg-muted) 100%);
    background-size: 200% 100%;
    border-radius: var(--r-xs);
    overflow: hidden;
    animation: skeletonShimmer 1.4s linear infinite;
}
html[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg, #1E293B 0%, rgba(148,163,184,0.18) 50%, #1E293B 100%);
    background-size: 200% 100%;
}
.skeleton.sk-line   { height: 12px; width: 100%; margin: 6px 0; }
.skeleton.sk-line.sk-sm  { height: 10px; width: 60%; }
.skeleton.sk-line.sk-lg  { height: 16px; }
.skeleton.sk-block  { height: 120px; width: 100%; border-radius: var(--r-md); }
.skeleton.sk-circle { width: 40px; height: 40px; border-radius: 50%; }

.skeleton-card {
    padding: var(--sp-5);
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
            backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
}

@keyframes skeletonShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }


/* --- 14. STATUS LOGIC (0=inactive, 1=active, >1=context) ------------------ */
/* Inactive: clearly signalled (strikethrough + muted color) but kept readable
   — never hide content behind opacity. */
.status-0, .is-inactive {
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-color: var(--text-faint);
    text-decoration-thickness: 1px;
}
.status-0 .chip-auto::before, .is-inactive .chip-auto::before { content: "Inactive"; }

.status-1, .is-active {
    color: var(--text-main);
}

/* Medical status variants — use data-medical-status attribute */
[data-medical-status="critical"]  { color: var(--st-danger);  }
[data-medical-status="urgent"]    { color: #F97316;           }
[data-medical-status="stable"]    { color: var(--st-success); }
[data-medical-status="pending"]   { color: var(--st-warning); }
[data-medical-status="resolved"]  { color: var(--text-muted); }


/* --- 15. LOGIN CARD ENTRANCE (3D reveal) ---------------------------------- */
.login-stage {
    min-height: 100vh; min-height: 100svh;
    display: grid; place-items: center; padding: var(--sp-5);
    perspective: 1400px;
}
.login-card {
    width: min(440px, 100%);
    padding: var(--sp-8);
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: var(--glass-blur);
            backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border-hi);
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-3), var(--shadow-glow);
    transform-origin: 50% 110%;
    animation: loginEnter 900ms var(--ease-out) forwards;
    will-change: transform, opacity;
}
.login-card .brand-badge {
    width: 64px; height: 64px; border-radius: var(--r-lg);
    display: grid; place-items: center; margin: 0 auto var(--sp-5);
    background: var(--accent-soft);
    border: 1px solid var(--glass-border-hi);
    box-shadow: var(--shadow-glow);
    color: var(--accent);
    animation: badgePulse 2.8s ease-in-out infinite;
}

@keyframes loginEnter {
    0%   { transform: translateY(40px) rotateX(16deg) scale(0.92); opacity: 0; }
    60%  { opacity: 1; }
    100% { transform: translateY(0)   rotateX(0)      scale(1);    opacity: 1; }
}
@keyframes badgePulse {
    0%, 100% { box-shadow: var(--shadow-glow); }
    50%      { box-shadow: 0 0 0 1px var(--glass-border-hi), 0 0 48px -4px var(--accent-ring); }
}


/* --- 16. SCROLLBAR -------------------------------------------------------- */
::-webkit-scrollbar              { width: 10px; height: 10px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: var(--border-strong); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover  { background: var(--accent); background-clip: padding-box; border: 2px solid transparent; }


/* --- 17. LEGACY SIDEBAR COMPAT (sidebar1.php markup) ----------------------
   sidebar1.php emits its own <aside class="navbar-default sidebar"> whose
   submenus toggle via a ".in" class (handler lives inside sidebar1.php).
   Without the original startmin.css, every <ul.nav-second-level> rendered
   expanded and the whole menu cascaded. These rules flow the inner aside
   naturally inside our .emr-sidebar wrapper and hide submenus until .in.
   -------------------------------------------------------------------------- */
.emr-sidebar aside.navbar-default.sidebar {
    position: static;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    width: auto;
    height: auto;
    overflow: visible;
    margin: 0;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
}
.emr-sidebar .sidebar-brand {
    padding: var(--sp-2) var(--sp-3) var(--sp-3) !important;
    color: var(--accent) !important;
    font-size: var(--fs-2xs) !important;
    letter-spacing: var(--tracking-caps) !important;
    text-transform: uppercase;
    font-weight: var(--fw-bld);
    display: flex; align-items: center; gap: var(--sp-2);
}
.emr-sidebar .sidebar-nav,
.emr-sidebar .navbar-collapse {
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
}
.emr-sidebar #side-menu,
.emr-sidebar #side-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.emr-sidebar #side-menu li { list-style: none; }

.emr-sidebar #side-menu a {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 9px 12px;
    margin: 2px 0;
    color: var(--text-body);
    background: transparent;
    border: 0;
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-weight: var(--fw-med);
    text-decoration: none;
    cursor: pointer;
    white-space: normal;
    line-height: 1.3;
    transition: background var(--dur-fast) var(--ease-out),
                color      var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}
.emr-sidebar #side-menu a:hover,
.emr-sidebar #side-menu a:focus-visible {
    background: var(--accent-soft);
    color: var(--accent);
    box-shadow: 0 0 14px -6px var(--accent-ring);
    outline: none;
}
.emr-sidebar #side-menu a > i.fa,
.emr-sidebar #side-menu a > i[class*="fa-"] {
    color: var(--accent);
    opacity: 0.85;
    font-size: 0.92em;
    flex-shrink: 0;
    width: 1.1em;
    text-align: center;
}
.emr-sidebar #side-menu li.active > a,
.emr-sidebar #side-menu a.selected {
    background: var(--accent-soft);
    color: var(--accent);
    box-shadow: inset 2px 0 0 var(--accent), 0 0 14px -6px var(--accent-ring);
}

/* Submenus — hidden by default, opened via .in (sidebar1.php toggles it) */
.emr-sidebar .nav-second-level,
.emr-sidebar .nav-third-level {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
.emr-sidebar .nav-second-level.in,
.emr-sidebar .nav-third-level.in {
    display: block;
    padding: 4px 0 6px;
    margin: 2px 0 6px 10px;
    border-left: 2px solid var(--glass-border-hi);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: rgba(15, 23, 42, 0.03);
}
html[data-theme="dark"] .emr-sidebar .nav-second-level.in,
html[data-theme="dark"] .emr-sidebar .nav-third-level.in {
    background: rgba(255, 255, 255, 0.03);
}

.emr-sidebar .nav-second-level a { padding-left: 28px; font-size: var(--fs-xs); }
.emr-sidebar .nav-third-level  a { padding-left: 40px; font-size: var(--fs-xs); }

.emr-sidebar .fa.arrow {
    margin-left: auto;
    transition: transform var(--dur-med) var(--ease-out);
    opacity: 0.55;
}
.emr-sidebar li.active > a > .fa.arrow { transform: rotate(90deg); }

/* Legacy divider <li class='divider'>&nbsp;</li> */
.emr-sidebar li.divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 8px 4px;
    padding: 0;
    font-size: 0;
    overflow: hidden;
    list-style: none;
}
.emr-sidebar li.divider a { display: none; }

/* Defuse leaked Bootstrap-3 chrome in case anything else drops in later */
.emr-sidebar .navbar-inverse  { background: transparent; border: 0; box-shadow: none; }


/* --- 18. UTILITIES -------------------------------------------------------- */
.t-center  { text-align: center; }
.t-right   { text-align: right; }
.t-muted   { color: var(--text-muted); }
.t-faint   { color: var(--text-faint); }
.t-accent  { color: var(--accent); }
.t-xs { font-size: var(--fs-xs); }
.t-sm { font-size: var(--fs-sm); }
.t-lg { font-size: var(--fs-lg); }
.t-caps { text-transform: uppercase; letter-spacing: var(--tracking-caps); font-weight: var(--fw-sem); }
.t-mono { font-family: var(--font-mono); }

.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.w-full { width: 100%; }
.hidden { display: none !important; }

/* Reduced motion — respect OS setting */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* High-contrast boost (AAA) — triggered by user preference */
@media (prefers-contrast: more) {
    :root {
        --border-subtle:  rgba(15, 23, 42, 0.22);
        --border-strong:  rgba(15, 23, 42, 0.40);
        --glass-border:   rgba(14, 165, 233, 0.55);
        --text-muted:     #475569;
    }
    html[data-theme="dark"] {
        --border-subtle: rgba(241, 245, 249, 0.22);
        --border-strong: rgba(241, 245, 249, 0.40);
        --glass-border:  rgba(56, 189, 248, 0.60);
        --text-muted:    #CBD5E1;
    }
}

/* ==========================================================================
   13. Combobox (autocomplete primitive)
   --------------------------------------------------------------------------
   Drop-in replacement for legacy filter dropdowns. Renders as a glassmorphic
   trigger that opens a search-filtered list. Supports:
     - SSR-first <select class="emr-combobox"> progressive enhancement
     - Async data via data-source-key (uses EMR.lookup → cached lookups.php)
     - Keyboard nav (Arrow Up/Down, Enter, Escape, type-to-search)
     - Hidden input for form submission compatibility
   ========================================================================== */
.emr-combobox-wrap { position:relative; display:inline-block; min-width:200px; }
.emr-combobox-wrap.is-block { display:block; width:100%; }
.emr-combobox-trigger {
    display:flex; align-items:center; gap:8px;
    width:100%; padding:8px 36px 8px 12px;
    background:var(--bg-card, #fff);
    border:1px solid var(--bd-1, rgba(0,0,0,0.12));
    border-radius:var(--rad-sm, 6px);
    font:inherit; color:var(--fg-1, #1f2937);
    cursor:pointer; text-align:left;
    transition:border-color .12s ease, box-shadow .12s ease;
    position:relative;
}
.emr-combobox-trigger:hover { border-color:var(--accent-1, #4f8cff); }
.emr-combobox-trigger:focus { outline:none; border-color:var(--accent-1, #4f8cff); box-shadow:0 0 0 3px rgba(79,140,255,0.15); }
.emr-combobox-trigger.is-empty .emr-combobox-label { color:var(--fg-3, #94a3b8); }
.emr-combobox-trigger::after {
    content:""; position:absolute; right:12px; top:50%;
    width:8px; height:8px; transform:translateY(-70%) rotate(45deg);
    border-right:2px solid var(--fg-3, #94a3b8); border-bottom:2px solid var(--fg-3, #94a3b8);
    pointer-events:none; transition:transform .15s ease;
}
.emr-combobox-wrap.is-open .emr-combobox-trigger::after { transform:translateY(-30%) rotate(225deg); }

.emr-combobox-label { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.emr-combobox-clear {
    display:none; width:18px; height:18px; border:none; background:transparent;
    color:var(--fg-3, #94a3b8); cursor:pointer; padding:0; font-size:14px;
    line-height:1; border-radius:50%;
}
.emr-combobox-clear:hover { background:rgba(0,0,0,0.06); color:var(--fg-1, #1f2937); }
.emr-combobox-wrap.has-value .emr-combobox-clear { display:inline-flex; align-items:center; justify-content:center; }

.emr-combobox-pop {
    /* Fixed positioning so the dropdown floats over glass-card / viewport
       containers (backdrop-filter creates a containing block that traps
       position:absolute descendants and clips them at the card's bounds).
       JS sets top/left/width/max-height on every open and on scroll/resize.
       z-index 9999 keeps the dropdown above every other layer (modals 500,
       popup 600, tooltip 700, toast 1000) so it's never visually clipped. */
    position:fixed; top:0; left:0; width:240px;
    z-index:9999;
    background:var(--bg-card, #fff);
    border:1px solid var(--bd-1, rgba(0,0,0,0.12));
    border-radius:var(--rad-sm, 6px);
    box-shadow:0 10px 32px rgba(15,23,42,0.18);
    /* No backdrop-filter — pop has solid background and shouldn't blur
       what's behind it (the user's complaint: the dropdown items at the
       bottom were visually washing into the section below). */
    display:none; flex-direction:column;
    animation:emrComboFade .12s ease;
}
.emr-combobox-wrap.is-open .emr-combobox-pop,
.emr-combobox-pop.is-open { display:flex; }
@keyframes emrComboFade { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }

.emr-combobox-search { padding:8px; border-bottom:1px solid var(--bd-1, rgba(0,0,0,0.08)); }
.emr-combobox-search input {
    width:100%; padding:6px 10px; font:inherit; color:var(--fg-1, #1f2937);
    background:var(--bg-input, #f8fafc);
    border:1px solid var(--bd-1, rgba(0,0,0,0.08)); border-radius:4px; outline:none;
}
.emr-combobox-search input:focus { border-color:var(--accent-1, #4f8cff); }

.emr-combobox-list {
    list-style:none; margin:0; padding:4px;
    overflow-y:auto;
    /* Fill the pop's available height (set by JS via max-height on pop)
       and scroll when content overflows. */
    flex:1 1 auto; min-height:0;
    -webkit-overflow-scrolling:touch;
}
.emr-combobox-item {
    padding:8px 10px; cursor:pointer; border-radius:4px;
    color:var(--fg-1, #1f2937); font-size:14px;
    display:flex; align-items:center; gap:8px;
    transition:background .08s ease;
}
.emr-combobox-item:hover,
.emr-combobox-item.is-active { background:rgba(79,140,255,0.10); }
.emr-combobox-item.is-selected { background:rgba(79,140,255,0.18); font-weight:600; }
.emr-combobox-item.is-skeleton { pointer-events:none; opacity:0.7; }
.emr-combobox-item.is-skeleton::before {
    content:""; flex:1; height:14px; border-radius:3px;
    background:linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.10) 50%, rgba(0,0,0,0.06) 75%);
    background-size:200% 100%;
    animation:skeletonShimmer 1.4s linear infinite;
}
.emr-combobox-empty {
    padding:14px; text-align:center; color:var(--fg-3, #94a3b8); font-size:13px;
}

html[data-theme="dark"] .emr-combobox-trigger { background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.10); color:#e2e8f0; }
html[data-theme="dark"] .emr-combobox-pop { background:#1e293b; border-color:rgba(255,255,255,0.10); }
html[data-theme="dark"] .emr-combobox-search input { background:rgba(0,0,0,0.30); border-color:rgba(255,255,255,0.10); color:#e2e8f0; }

/* ==========================================================================
   14. TipTap (MIT) editor — drop-in CKEditor replacement
   --------------------------------------------------------------------------
   See assets/modern-emr/emr-tiptap.js. Pages add class="emr-tiptap" to a
   <textarea> and the script auto-mounts the editor.
   ========================================================================== */
.emr-tiptap-wrap {
    border:1px solid var(--bd-1, rgba(0,0,0,0.12));
    border-radius:var(--rad-sm, 6px);
    background:var(--bg-card, #fff);
    overflow:hidden;
}
.emr-tiptap-toolbar {
    display:flex; flex-wrap:wrap; gap:2px;
    padding:6px 8px;
    background:var(--bg-elev, #f8fafc);
    border-bottom:1px solid var(--bd-1, rgba(0,0,0,0.08));
}
.emr-tiptap-btn {
    min-width:28px; height:28px; padding:0 8px;
    background:transparent; color:var(--fg-1, #1f2937);
    border:1px solid transparent; border-radius:4px;
    font:600 13px/1 system-ui, sans-serif;
    cursor:pointer; transition:background .08s ease, border-color .08s ease;
}
.emr-tiptap-btn:hover    { background:rgba(79,140,255,0.10); }
.emr-tiptap-btn.is-active{ background:rgba(79,140,255,0.18); border-color:var(--accent-1, #4f8cff); }
.emr-tiptap-host {
    padding:12px 14px;
    min-height:160px;
    color:var(--fg-1, #1f2937);
    font:14px/1.55 inherit;
}
.emr-tiptap-host:focus-within { outline:none; }
.emr-tiptap-host .ProseMirror { outline:none; min-height:140px; }
.emr-tiptap-host .ProseMirror p.is-editor-empty:first-child::before {
    content:attr(data-placeholder); float:left; color:var(--fg-3, #94a3b8);
    pointer-events:none; height:0;
}
.emr-tiptap-host .ProseMirror h1 { font-size:1.4em; font-weight:700; margin:0.4em 0 0.3em; }
.emr-tiptap-host .ProseMirror h2 { font-size:1.2em; font-weight:600; margin:0.4em 0 0.3em; }
.emr-tiptap-host .ProseMirror h3 { font-size:1.1em; font-weight:600; margin:0.4em 0 0.3em; }
.emr-tiptap-host .ProseMirror ul,
.emr-tiptap-host .ProseMirror ol { padding-left:1.4em; margin:0.4em 0; }
.emr-tiptap-host .ProseMirror blockquote {
    border-left:3px solid var(--bd-2, rgba(0,0,0,0.18));
    padding-left:0.9em; margin:0.6em 0;
    color:var(--fg-2, #475569); font-style:italic;
}
.emr-tiptap-host .ProseMirror a { color:var(--accent-1, #4f8cff); text-decoration:underline; }
.emr-tiptap-host .ProseMirror table {
    border-collapse:collapse; width:100%; margin:0.5em 0;
}
.emr-tiptap-host .ProseMirror th,
.emr-tiptap-host .ProseMirror td {
    border:1px solid var(--bd-1, rgba(0,0,0,0.12)); padding:6px 8px;
}

html[data-theme="dark"] .emr-tiptap-wrap    { background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.10); }
html[data-theme="dark"] .emr-tiptap-toolbar { background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.10); }
html[data-theme="dark"] .emr-tiptap-host    { color:#e2e8f0; }

/* ==========================================================================
   15. Multi-row list (rowlist primitive)
   --------------------------------------------------------------------------
   Replaces legacy "counter + foreach( $i = 1..$counter )" multi-row patterns.
   Pages declare a <template> child with the per-row markup, then JS clones
   it on "+" click. See assets/modern-emr/modern-emr-spa.js §15.
   ========================================================================== */
.emr-rowlist { display:flex; flex-direction:column; gap:6px; }
.emr-rowlist-rows { display:flex; flex-direction:column; gap:6px; }
.emr-rowlist-row {
    display:grid; grid-template-columns: 24px 1fr auto; gap:8px; align-items:center;
    padding:6px 8px;
    background:var(--bg-card, #fff);
    border:1px solid var(--bd-1, rgba(0,0,0,0.08));
    border-radius:var(--rad-sm, 6px);
    transition:box-shadow .12s ease;
}
.emr-rowlist-row:focus-within { box-shadow:0 0 0 3px rgba(79,140,255,0.15); border-color:var(--accent-1, #4f8cff); }
.emr-rowlist-row.is-dragging  { opacity:0.6; }
.emr-rowlist-handle {
    width:22px; height:22px; display:flex; align-items:center; justify-content:center;
    color:var(--fg-3, #94a3b8); cursor:grab; user-select:none;
    border-radius:4px;
}
.emr-rowlist-handle:hover  { background:rgba(0,0,0,0.04); color:var(--fg-1, #1f2937); }
.emr-rowlist-handle:active { cursor:grabbing; }
.emr-rowlist-handle::before { content:"⋮⋮"; font-size:14px; line-height:1; letter-spacing:-2px; }

.emr-rowlist-fields { display:flex; flex-wrap:wrap; gap:8px; align-items:center; min-width:0; }
.emr-rowlist-fields > * { flex:1 1 140px; min-width:0; }
.emr-rowlist-fields .fld-input,
.emr-rowlist-fields .fld-select { padding:6px 10px; }

.emr-rowlist-rm {
    width:28px; height:28px; padding:0;
    background:transparent; border:1px solid transparent;
    color:var(--fg-3, #94a3b8); border-radius:4px; cursor:pointer;
    font:600 16px/1 system-ui, sans-serif;
}
.emr-rowlist-rm:hover { background:rgba(220,53,69,0.12); color:#b30021; border-color:rgba(220,53,69,0.25); }

.emr-rowlist-add {
    align-self:flex-start; padding:6px 12px; gap:6px;
    background:rgba(79,140,255,0.08); color:var(--accent-1, #4f8cff);
    border:1px dashed var(--accent-1, #4f8cff); border-radius:var(--rad-sm, 6px);
    font:600 13px/1 inherit; cursor:pointer;
    display:inline-flex; align-items:center;
    transition:background .08s ease;
}
.emr-rowlist-add:hover { background:rgba(79,140,255,0.16); }
.emr-rowlist-add::before { content:"+"; font-size:16px; font-weight:700; }

.emr-rowlist-empty {
    padding:18px; text-align:center; color:var(--fg-3, #94a3b8); font-size:13px;
    border:1px dashed var(--bd-1, rgba(0,0,0,0.12)); border-radius:var(--rad-sm, 6px);
}

html[data-theme="dark"] .emr-rowlist-row { background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.10); }
html[data-theme="dark"] .emr-rowlist-add { background:rgba(79,140,255,0.10); }

/* ==========================================================================
   16. Data Grid (sortable / filterable / selectable enhancer)
   --------------------------------------------------------------------------
   Layered on top of .emr-table. Pages add .emr-grid + per-column hints
   (data-key, data-sort) and JS in §15 wires sort + per-column filter +
   bulk-select. See assets/modern-emr/modern-emr-spa.js §15.
   ========================================================================== */
.emr-grid thead th[data-sort] { cursor:pointer; user-select:none; position:relative; }
.emr-grid thead th[data-sort]:hover { background:rgba(79,140,255,0.06); }
.emr-grid thead th[data-sort]::after {
    content:"⇅"; opacity:0.35; margin-left:6px; font-size:11px;
    transition:opacity .12s ease;
}
.emr-grid thead th[data-sort].is-sort-asc::after  { content:"▲"; opacity:0.95; color:var(--accent-1, #4f8cff); }
.emr-grid thead th[data-sort].is-sort-desc::after { content:"▼"; opacity:0.95; color:var(--accent-1, #4f8cff); }

.emr-grid-filter-row td,
.emr-grid-filter-row th { padding:4px 6px; border-top:1px dashed var(--bd-1, rgba(0,0,0,0.08)); }
.emr-grid-filter-row input.fld-input { padding:4px 8px; font-size:12px; }

.emr-grid tbody tr.is-grid-hidden { display:none; }

.emr-grid-bulkbar {
    display:none; align-items:center; gap:var(--sp-2, 10px);
    padding:8px 12px; margin-bottom:8px;
    background:rgba(79,140,255,0.10); border:1px solid rgba(79,140,255,0.25);
    border-radius:var(--rad-sm, 6px); color:var(--accent-1, #4f8cff);
    font-size:13px; font-weight:600;
    animation:emrBulkSlide .18s ease;
}
.emr-grid-bulkbar.is-active { display:flex; }
@keyframes emrBulkSlide { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.emr-grid-bulkbar .emr-grid-bulk-count { color:var(--fg-1, #1f2937); }

input.emr-grid-checkall,
input.emr-grid-checkrow { width:16px; height:16px; cursor:pointer; }

html[data-theme="dark"] .emr-grid thead th[data-sort]:hover { background:rgba(79,140,255,0.10); }
html[data-theme="dark"] .emr-grid-bulkbar { background:rgba(79,140,255,0.14); border-color:rgba(79,140,255,0.30); }

/* ==========================================================================
   17. Tree (collapsible hierarchy)
   --------------------------------------------------------------------------
   Native <details>/<summary>-based tree. No JS required for basic expand;
   JS in §16 only adds keyboard nav + persisted state.
   Pages: <ul class="emr-tree"><li><details><summary>Node</summary><ul>…</ul></details></li></ul>
   ========================================================================== */
.emr-tree, .emr-tree ul { margin:0; padding:0; list-style:none; }
.emr-tree ul {
    margin-left:1.2em;
    border-left:1px dashed var(--bd-1, rgba(0,0,0,0.15));
    padding-left:0.8em;
}
.emr-tree li { line-height:1.8em; padding:2px 0; color:var(--fg-1, #1f2937); }
.emr-tree summary {
    cursor:pointer; font-weight:600; padding:2px 4px;
    border-radius:4px;
    transition:background .08s ease;
    list-style:none;
}
.emr-tree summary::-webkit-details-marker { display:none; }
.emr-tree summary::before {
    content:"▶"; display:inline-block; width:10px; margin-right:6px;
    transition:transform .15s ease;
    font-size:0.7em; opacity:0.6;
}
.emr-tree details[open] > summary::before { transform:rotate(90deg); }
.emr-tree summary:hover  { background:rgba(79,140,255,0.08); }
.emr-tree summary:focus  { outline:none; background:rgba(79,140,255,0.12); }
.emr-tree li.is-leaf {
    padding-left:18px;   /* align with summary text after marker */
    font-weight:400;
}
.emr-tree .tree-tag {
    display:inline-block; padding:0 6px; margin-left:6px;
    background:rgba(0,0,0,0.06); color:var(--fg-2, #475569);
    border-radius:10px; font-size:0.75em; font-weight:600; line-height:1.5;
}
html[data-theme="dark"] .emr-tree summary:hover { background:rgba(79,140,255,0.14); }
html[data-theme="dark"] .emr-tree .tree-tag    { background:rgba(255,255,255,0.10); color:#cbd5e1; }

/* ====================================================================
   18. DataTables (Bootstrap integration shim)
   --------------------------------------------------------------------
   The wizard hosts (frmContractDiscounts, frmPriceList) include a
   DataTables-driven sub-page table, and the "dataTables.bootstrap.css"
   integration file expects Bootstrap classes (.pagination, .btn,
   .form-control, .row, .col-sm-*) that we no longer ship. These
   minimal rules style the DataTables wrapper, length+filter row,
   info text, and pagination so the table looks correct without
   pulling in all of Bootstrap.
   ==================================================================== */
.dataTables_wrapper {
    display:flex; flex-direction:column; gap:var(--sp-2);
    color:var(--c-text);
}
.dataTables_wrapper .top, .dataTables_wrapper .bottom,
.dataTables_wrapper .row {
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
    gap:var(--sp-2);
}
.dataTables_wrapper .col-sm-12,
.dataTables_wrapper .col-sm-6,
.dataTables_wrapper .col-sm-5,
.dataTables_wrapper .col-sm-7 { flex:1 1 auto; min-width:0; }
.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate {
    display:flex; align-items:center; gap:6px; font-size:14px;
}
.dataTables_filter { justify-content:flex-end; }
.dataTables_filter input,
.dataTables_length select {
    padding:4px 8px; border:1px solid var(--c-border); border-radius:6px;
    background:var(--c-surface); color:var(--c-text); font:inherit; outline:none;
}
.dataTables_filter input:focus,
.dataTables_length select:focus { border-color:var(--c-accent); }
.dataTables_info { color:var(--text-muted); }

/* Pagination — flat horizontal list of <li><a> buttons */
.dataTables_paginate .pagination,
.dataTables_paginate ul.pagination {
    list-style:none; margin:0; padding:0;
    display:inline-flex; gap:2px; flex-wrap:wrap;
}
.dataTables_paginate .pagination li {
    display:inline-block; list-style:none;
}
.dataTables_paginate .pagination li a,
.dataTables_paginate .pagination li span,
.dataTables_paginate .paginate_button {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:32px; height:32px; padding:0 10px;
    border:1px solid var(--c-border); border-radius:6px;
    background:var(--c-surface); color:var(--c-text);
    text-decoration:none; font-size:13px; cursor:pointer;
    transition:background .12s ease, border-color .12s ease;
}
.dataTables_paginate .pagination li a:hover,
.dataTables_paginate .paginate_button:hover {
    background:var(--c-surface-2); border-color:var(--c-accent);
}
.dataTables_paginate .pagination li.active a,
.dataTables_paginate .pagination li.active span,
.dataTables_paginate .paginate_button.current {
    background:var(--c-accent); color:#fff; border-color:var(--c-accent);
}
.dataTables_paginate .pagination li.disabled a,
.dataTables_paginate .pagination li.disabled span,
.dataTables_paginate .paginate_button.disabled {
    opacity:0.45; pointer-events:none;
}

/* Sort indicators on <thead th> — DataTables adds .sorting / .sorting_asc / _desc */
table.dataTable thead th { cursor:pointer; user-select:none; position:relative; }
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
    content:""; position:absolute; right:8px; top:50%;
    width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
    opacity:0.5;
}
table.dataTable thead th.sorting::after      { border-bottom:5px solid currentColor; transform:translateY(-50%) rotate(0); opacity:0.25; }
table.dataTable thead th.sorting_asc::after  { border-bottom:5px solid currentColor; transform:translateY(-50%); }
table.dataTable thead th.sorting_desc::after { border-top:5px solid currentColor;    transform:translateY(-50%); }

/* DataTable body rows — let our .emr-table styles take over for hover/border */
table.dataTable.emr-table tbody tr:hover { background:var(--c-surface-2); }

/* Search inputs DataTables auto-injects into thead/tfoot — narrow, full-width */
table.dataTable thead tr td input[type=text],
table.dataTable tfoot tr td input[type=text] {
    width:100%; padding:4px 8px; border:1px solid var(--c-border); border-radius:5px;
    background:var(--c-surface); color:var(--c-text); font:inherit; outline:none;
}
table.dataTable thead tr td input[type=text]:focus,
table.dataTable tfoot tr td input[type=text]:focus { border-color:var(--c-accent); }

html[data-theme="dark"] .dataTables_filter input,
html[data-theme="dark"] .dataTables_length select,
html[data-theme="dark"] table.dataTable thead tr td input[type=text],
html[data-theme="dark"] table.dataTable tfoot tr td input[type=text] {
    background:#1e293b; border-color:rgba(255,255,255,0.10);
}

/* --- LEGACY-BOOTSTRAP COMPAT ----------------------------------------------
   Many legacy helpers (Filter::patientFilter, Filter::printHeader, etc.) emit
   Bootstrap-3-style markup (.panel, .panel-heading, .panel-body, .col-lg-X,
   .form-control, .btn-success, .table, .nav-tabs, .modal). To keep those
   helpers visually consistent inside the modern shell without rewriting them,
   we ship a global compat shim here. Pages NEVER need to copy-paste this
   shim themselves anymore. Scoped to body.app-shell so the modern-only,
   non-bootstrap pages are unaffected. ----------------------------------- */
body.app-shell #wrapper { background: transparent; }
body.app-shell #page-wrapper1 { padding: var(--sp-3); }
body.app-shell .container-fluid { max-width: 100%; padding: 0; }
/* .panel = glass-card. Helper-emitted panels (Filter::patientFilter, etc.)
   render with the same glass treatment as native .glass-card sections. */
body.app-shell .panel {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
            backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-2);
    margin-bottom: var(--sp-4);
    overflow: hidden;
}
body.app-shell .panel-heading {
    background: transparent;
    border-bottom: 1px solid var(--glass-border);
    padding: var(--sp-3) var(--sp-4);
    font: var(--fw-sem) var(--fs-md)/1.2 var(--font-sans);
    color: var(--text-main);
    letter-spacing: 0.2px;
}
body.app-shell .panel-body {
    padding: var(--sp-4);
    font-size: var(--fs-sm); line-height: 1.55; color: var(--text-main);
    background: transparent;
}
body.app-shell .panel-body::after,
body.app-shell .tab-pane::after { content: ""; display: table; clear: both; }
body.app-shell .form-control {
    width: 100%;
    background: var(--glass-bg-strong);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: 9px 12px;
    font: var(--fw-med) var(--fs-sm)/1 var(--font-sans);
    color: var(--text-main);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
body.app-shell .form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
/* --- LEGACY .btn / .btn-success / .btn-info / .btn-primary / .btn-default /
   .btn-danger / .btn-warning  → modern Glassmorphism 2.0 treatment.
   Covers <button>, <a>, AND <input type='submit|button'>. Any legacy code
   emitting `<input type='submit' class='btn btn-success' value='Save'>` now
   renders identically to the native .btn-hud-primary (gradient + lift +
   accent-ring shadow). Page-local overrides should be deleted in favor of
   this canonical cascade. ------------------------------------------------- */
body.app-shell .btn,
body.app-shell button.btn,
body.app-shell input.btn,
body.app-shell input[type="submit"].btn,
body.app-shell input[type="button"].btn,
body.app-shell a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    font: var(--fw-sem) var(--fs-sm)/1 var(--font-sans);
    cursor: pointer;
    text-decoration: none;
    vertical-align: middle;
    line-height: 1;
    transition: filter var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
    white-space: nowrap;
}
body.app-shell .btn:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
body.app-shell .btn:disabled,
body.app-shell input.btn:disabled,
body.app-shell button.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

/* Success — green gradient. The flat `.btn btn-success` Bootstrap style is now
   a proper Glassmorphism 2.0 primary button. */
body.app-shell .btn-success,
body.app-shell input.btn-success,
body.app-shell button.btn-success,
body.app-shell input[type="submit"].btn-success {
    background: linear-gradient(135deg, #16a34a, #0f8a3e);
    border-color: #0f8a3e;
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(16, 185, 129, 0.5);
}
body.app-shell .btn-success:hover,
body.app-shell input.btn-success:hover,
body.app-shell button.btn-success:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* Primary / Info — accent gradient. */
body.app-shell .btn-primary, body.app-shell input.btn-primary, body.app-shell button.btn-primary,
body.app-shell .btn-info,    body.app-shell input.btn-info,    body.app-shell button.btn-info {
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 4px 12px -4px var(--accent-ring);
}
body.app-shell .btn-primary:hover, body.app-shell .btn-info:hover,
body.app-shell input.btn-primary:hover, body.app-shell input.btn-info:hover,
body.app-shell button.btn-primary:hover, body.app-shell button.btn-info:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* Danger / Error — red gradient. */
body.app-shell .btn-danger,  body.app-shell input.btn-danger,  body.app-shell button.btn-danger,
body.app-shell .btn-error,   body.app-shell input.btn-error,   body.app-shell button.btn-error {
    background: linear-gradient(135deg, #DC2626, #991B1B);
    border-color: #991B1B;
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(220, 38, 38, 0.5);
}
body.app-shell .btn-danger:hover, body.app-shell .btn-error:hover,
body.app-shell input.btn-danger:hover, body.app-shell input.btn-error:hover,
body.app-shell button.btn-danger:hover, body.app-shell button.btn-error:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* Warning — amber gradient. */
body.app-shell .btn-warning, body.app-shell input.btn-warning, body.app-shell button.btn-warning {
    background: linear-gradient(135deg, #F59E0B, #B45309);
    border-color: #B45309;
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(245, 158, 11, 0.5);
}
body.app-shell .btn-warning:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* Default / Ghost — bordered transparent fill. */
body.app-shell .btn-default, body.app-shell input.btn-default, body.app-shell button.btn-default {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
}
body.app-shell .btn-default:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

/* Size variants — applied additively to any .btn-* color variant. */
body.app-shell .btn-xs { padding: 4px 10px; font-size: 11.5px; border-radius: var(--r-sm); }
body.app-shell .btn-sm { padding: 6px 12px; font-size: 12px;   border-radius: var(--r-sm); }
body.app-shell .btn-lg { padding: 12px 24px; font-size: 15px;  border-radius: var(--r-md); }
/* Legacy .table = .glass-table treatment. Helper Filter::printHeader and every
   chrome-swap data grid auto-inherit the sticky-header glass treatment without
   needing per-page markup changes. */
body.app-shell .table {
    width: 100%;
    background: transparent;
    color: var(--text-main);
    border-collapse: separate;
    border-spacing: 0;
    font: var(--fw-med) var(--fs-sm)/1.45 var(--font-sans);
}
body.app-shell .table > thead > tr > th,
body.app-shell .table > thead > tr > td,
body.app-shell .table > tbody > tr.header > td {
    position: sticky; top: 0;
    z-index: var(--z-sticky);
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--glass-border);
    font: var(--fw-sem) var(--fs-xs)/1.2 var(--font-sans);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 12px;
    text-align: left;
    white-space: nowrap;
}
body.app-shell .table > tbody > tr > td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}
body.app-shell .table > tbody > tr:last-child > td { border-bottom: 0; }
body.app-shell .table > tbody > tr { transition: background var(--dur-fast) var(--ease-out); }
body.app-shell .table > tbody > tr:hover > td { background: var(--accent-soft); }
/* .table-bordered / .table-striped retired: native .table now provides the
   modern row-divider look. Kept as no-ops for any embedded helper that still
   adds the classes — no visual harm, no border/stripe noise. */
body.app-shell .table-bordered td, body.app-shell .table-bordered th { border: 0; }
body.app-shell .table-striped > tbody > tr:nth-child(odd) { background: transparent; }
body.app-shell .table-hover > tbody > tr:hover > td { background: var(--accent-soft); }
body.app-shell fieldset {
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
            backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-1);
}
body.app-shell fieldset > legend {
    font: var(--fw-bold) var(--fs-xs)/1 var(--font-sans);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 0 var(--sp-2);
    background: var(--bg-elevated);
    border-radius: var(--r-sm);
}
/* Accent stripe for .panel.panel-primary so the heading reads as the modern
   accent-bordered card (matches .glass-card.is-accent treatment elsewhere). */
body.app-shell .panel.panel-primary { border-color: var(--accent); }
body.app-shell .panel.panel-primary > .panel-heading {
    border-bottom-color: var(--accent);
    color: var(--accent);
}
body.app-shell .row { margin: 0 -8px; }
body.app-shell .row::before, body.app-shell .row::after { content: ""; display: table; }
body.app-shell .row::after { clear: both; }
body.app-shell [class*="col-lg-"], body.app-shell [class*="col-md-"],
body.app-shell [class*="col-sm-"], body.app-shell [class*="col-xs-"] {
    padding: 0 8px; box-sizing: border-box; float: left; min-height: 1px;
}
body.app-shell .col-lg-1  { width: 8.333%; } body.app-shell .col-lg-2  { width: 16.666%; }
body.app-shell .col-lg-3  { width: 25%; }    body.app-shell .col-lg-4  { width: 33.333%; }
body.app-shell .col-lg-5  { width: 41.666%; } body.app-shell .col-lg-6  { width: 50%; }
body.app-shell .col-lg-7  { width: 58.333%; } body.app-shell .col-lg-8  { width: 66.666%; }
body.app-shell .col-lg-9  { width: 75%; }    body.app-shell .col-lg-10 { width: 83.333%; }
body.app-shell .col-lg-11 { width: 91.666%; } body.app-shell .col-lg-12 { width: 100%; }
@media (max-width: 992px) { body.app-shell [class*="col-lg-"] { width: 100%; float: none; } }
body.app-shell .form-group { margin-bottom: var(--sp-3); }
body.app-shell .form-group > label {
    display: block;
    font: var(--fw-sem) var(--fs-xs)/1 var(--font-sans);
    color: var(--text-muted);
    margin-bottom: var(--sp-2);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
body.app-shell .text-center { text-align: center; }
body.app-shell .pull-right { float: right; }
body.app-shell .pull-left  { float: left; }
body.app-shell .clearfix::after { content: ""; display: table; clear: both; }
body.app-shell .tab-pane { display: none; }
body.app-shell .tab-pane.active { display: block; }
body.app-shell .tab-pane.fade { opacity: 1; }
body.app-shell .modal {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1050; background: rgba(0,0,0,0.5); overflow: auto;
}
body.app-shell .modal.in { display: block; }
body.app-shell .modal-dialog { margin: 60px auto; max-width: 600px; }
body.app-shell .modal-content {
    background: var(--bg-elevated); border-radius: 12px; box-shadow: var(--elev-2); overflow: hidden;
}
body.app-shell .modal-header {
    padding: 14px 18px; border-bottom: 1px solid var(--border-subtle);
    display: flex; justify-content: space-between; align-items: center;
}
body.app-shell .modal-body { padding: 18px; }
body.app-shell .modal-footer { padding: 12px 18px; border-top: 1px solid var(--border-subtle); text-align: right; }
body.app-shell ul.nav.nav-tabs {
    list-style: none; margin: 0 0 12px 0; padding: 4px;
    display: flex; flex-wrap: wrap; gap: 4px;
    background: var(--bg-subtle); border-radius: 10px; border: 1px solid var(--border-subtle);
}
body.app-shell ul.nav.nav-tabs > li { list-style: none; margin: 0; }
body.app-shell ul.nav.nav-tabs > li > a {
    display: inline-block; padding: 7px 14px; font-size: 13px; font-weight: 600;
    color: var(--text-main); text-decoration: none; cursor: pointer;
    background: var(--bg-elevated); border: 1px solid var(--border-subtle);
    border-radius: 6px; transition: all 0.12s;
}
body.app-shell ul.nav.nav-tabs > li > a:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
body.app-shell ul.nav.nav-tabs > li.active > a { background: var(--accent); color: #fff; border-color: var(--accent); }
body.app-shell .badge.badge-primary { background: var(--accent-soft); color: var(--accent); border-radius: 12px; padding: 3px 10px; font-weight: 600; font-size: 12px; }

/* --- AUTOCOMPLETE DROPDOWN (.searchResult) --------------------------------
   Filter::patientFilter / employeeFilter / itemFilter / etc. drop their
   ajax results into <div class='searchResult'>...</div>. The legacy CSS
   in css/style.css uses plain white + dotted borders. Override with glass
   treatment so the dropdown matches the modern card. -------------------- */
body.app-shell .searchResult {
    background: var(--glass-bg-strong) !important;
    -webkit-backdrop-filter: var(--glass-blur);
            backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-2);
    margin-top: var(--sp-2);
    overflow: hidden;
    cursor: pointer;
    max-height: 360px;
    overflow-y: auto;
}
body.app-shell .searchResult:empty { display: none; }
body.app-shell .searchResult ul {
    padding: var(--sp-2) var(--sp-3);
    margin: 0;
    list-style: none;
    border-bottom: 1px solid var(--border-subtle);
    background: transparent !important;
    color: var(--text-main) !important;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
}
body.app-shell .searchResult ul:last-child { border-bottom: 0; }
body.app-shell .searchResult ul:hover {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
}
body.app-shell .searchResult a {
    color: inherit;
    text-decoration: none;
    font-size: var(--fs-sm);
    cursor: pointer;
}

/* --- LEGACY TABLE ROW STATES (.tr / .td / .tdInActive) ---------------------
   Most styling now lives in the .table block above (sticky header + glass).
   This block adds inactive-row treatment (muted text, no opacity per ui_rules
   .inactive_row_visibility — preserves AAA contrast). ------------------------ */
body.app-shell .table td.tdInActive { color: var(--text-muted); text-decoration: line-through; }
body.app-shell .table td.tdInActive .btn-hud,
body.app-shell .table td.tdInActive .badge,
body.app-shell .table td.tdInActive img { text-decoration: none; }

/* --- LEGACY ALERT TEXT FRAGMENTS ------------------------------------------
   Legacy code outputs `<font style='color: green/red'>...saved/exists...`
   inline. Replace the styling with a real glass alert bubble when seen
   inside the modern shell. ---------------------------------------------- */
body.app-shell font[style*="color: green"],
body.app-shell font[style*="color:green"] {
    display: inline-block;
    padding: 8px 14px;
    background: rgba(22, 163, 74, 0.12);
    color: #16a34a !important;
    border: 1px solid rgba(22, 163, 74, 0.35);
    border-radius: var(--r-md);
    font: var(--fw-sem) var(--fs-sm)/1 var(--font-sans) !important;
    font-family: var(--font-sans) !important;
}
body.app-shell font[style*="color: red"],
body.app-shell font[style*="color:red"] {
    display: inline-block;
    padding: 8px 14px;
    background: rgba(220, 38, 38, 0.10);
    color: #dc2626 !important;
    border: 1px solid rgba(220, 38, 38, 0.35);
    border-radius: var(--r-md);
    font: var(--fw-sem) var(--fs-sm)/1 var(--font-sans) !important;
    font-family: var(--font-sans) !important;
}

/* --- 5h. CLINICAL CONSULTATION SHELL --------------------------------------
   Two-column shell shared by every consultation-style page (OPD + IPD):
   sidebar nav on the left, scrollable content on the right. Mirrors the
   patient-chart mental model used by Epic/Cerner. Below 1024px the sidebar
   slides off-screen and a hamburger toggle in the patient banner reveals it. */
.consult-shell {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--sp-3);
    min-height: 70vh;
}

.consult-sidebar {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
            backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-2);
    padding: 8px;
    max-height: 80vh;
    overflow-y: auto;
    scrollbar-width: thin;
}
.consult-sidebar::-webkit-scrollbar { width: 6px; }
.consult-sidebar::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 3px; }

ul.consult-nav { list-style: none; margin: 0; padding: 0; }
ul.consult-nav > li { list-style: none; margin: 0; padding: 0; }
ul.consult-nav > li.consult-nav-group {
    padding: 12px 12px 6px;
    font: var(--fw-bold) 10.5px/1 var(--font-sans);
    letter-spacing: 1.2px;
    color: var(--accent);
    text-transform: uppercase;
    border-top: 1px solid var(--glass-border);
    margin-top: 6px;
}
ul.consult-nav > li.consult-nav-group:first-child { border-top: none; margin-top: 0; padding-top: 6px; }
ul.consult-nav > li > a {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; margin: 2px 0;
    font: var(--fw-med) 13px/1.3 var(--font-sans);
    color: var(--text-main) !important;
    background: transparent;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
ul.consult-nav > li > a:hover {
    background: var(--accent-soft); color: var(--accent) !important;
}
ul.consult-nav > li.active > a,
ul.consult-nav > li.active > a:hover,
ul.consult-nav > li.active > a:focus,
ul.consult-nav > li > a.is-active {
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: #fff !important;
    font-weight: var(--fw-sem);
    box-shadow: 0 2px 6px -2px var(--accent-ring);
}
ul.consult-nav > li > a .consult-nav-icon {
    width: 14px; flex: 0 0 auto; opacity: 0.5; font-size: 14px; line-height: 1;
}
ul.consult-nav > li.active > a .consult-nav-icon { opacity: 1; }
ul.consult-nav > li > a .consult-nav-label {
    flex: 1; min-width: 0; word-break: break-word;
}

/* Sub-tab item: nested under a parent (e.g. Certificates → Medical Cert / Referral).
   Smaller indent, lighter when inactive, full accent when picked. */
ul.consult-nav > li.consult-nav-sub > a {
    padding-left: 28px;
    font: var(--fw-med) 12px/1.3 var(--font-sans);
    color: var(--text-muted) !important;
    margin: 1px 0;
    border-left: 2px solid var(--border-subtle);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
ul.consult-nav > li.consult-nav-sub > a:hover {
    background: var(--accent-soft);
    color: var(--accent) !important;
    border-left-color: var(--accent);
}
ul.consult-nav > li.consult-nav-sub > a.is-active {
    background: var(--accent-soft);
    color: var(--accent) !important;
    border-left: 2px solid var(--accent);
    box-shadow: none;
    font-weight: var(--fw-sem);
    /* Override the gradient pill style from the top-level active variant */
    background-image: none;
}
ul.consult-nav > li.consult-nav-sub > a .consult-nav-icon {
    width: 8px; opacity: 0.4; font-size: 12px;
}

.consult-content {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
            backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-2);
    padding: var(--sp-4) var(--sp-5);
    min-height: 70vh;
    color: var(--text-main);
    font: var(--fw-med) var(--fs-sm)/1.55 var(--font-sans);
    display: flex;
    flex-direction: column;
}
.consult-content > .tab-content,
.consult-content > .ipd-consult-content { flex: 1; overflow-y: auto; }

/* Sub-tab pane (.dataDiv inside .ipd-consult-content) gets its own subtle
   glass-card frame so each sub-tab content reads as a discrete panel inside
   the consult-content shell, not a bare content block. */
.consult-content .ipd-consult-content > .dataDiv {
    background: var(--bg-elevated);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4) !important;
    margin: 0 0 var(--sp-3) 0;
    box-shadow: var(--shadow-1);
}
/* Sub-divs (sibling SubDivContentXSubDivY) sit INSIDE the parent dataDiv.
   They get a lighter treatment so the layering reads cleanly: the parent
   dataDiv is the panel container, each sub-div is a section within it. */
.consult-content .ipd-consult-content > .dataDiv > .dataDiv {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0 !important;
    margin: 0 0 var(--sp-3) 0;
}

/* Raw legacy section wrappers inside Interface-emitted partials —
   <fieldset><legend> and <div class='panel panel-default/info/primary/success'>
   should read as glass cards. The global .panel rules handle most of this;
   the rules below add the missing accent-stripe + transparent body for
   nested cards inside .consult-content so we don't get card-on-card
   solid-fill stacking. */
.consult-content .panel,
.consult-content fieldset {
    background: var(--glass-bg-soft) !important;
    -webkit-backdrop-filter: var(--glass-blur);
            backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-1) !important;
    padding: var(--sp-3) var(--sp-4) !important;
    margin-bottom: var(--sp-3) !important;
}
.consult-content fieldset > legend {
    font: var(--fw-bold) var(--fs-xs)/1 var(--font-sans) !important;
    color: var(--text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 0 var(--sp-2);
    background: var(--bg-elevated);
    border-radius: var(--r-sm);
    margin-bottom: var(--sp-2);
}

/* Raw section wrappers built from a heading-row inside a <table> (the legacy
   "PRESCRIPTION ORDER LIST" / "PRESCRIPTION ORDER" pattern) get a glass
   sub-section treatment so each visual block reads as a card. ---------- */
.consult-content .ipd-consult-content > .dataDiv > table:not(.glass-table):not(.emr-table) {
    background: transparent;
    margin-bottom: var(--sp-3);
}

/* Inner Interface-emitted content (MedicationInterface, ConsultationInterface,
   FollowUpInterface, MasterServicesList, etc.) drops bare <input>/<label>/
   <select>/<textarea>/<table> markup. Auto-modernize so the doctor's chart
   reads as one cohesive glass UI without per-page-class rewrites. Scope to
   .consult-content so we don't bleed into other shells. ---------------- */
.consult-content input[type="text"]:not(.btn):not(.btn-hud):not(.fld-input):not(.form-control),
.consult-content input[type="number"],
.consult-content input[type="email"],
.consult-content input[type="tel"],
.consult-content input[type="search"],
.consult-content input[type="password"],
.consult-content input[type="date"],
.consult-content input[type="time"],
.consult-content input[type="datetime-local"],
.consult-content input:not([type]),
.consult-content select:not(.fld-input):not(.form-control),
.consult-content textarea:not(.fld-input):not(.form-control) {
    background: var(--glass-bg-strong);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-sm);
    padding: 6px 10px;
    font: var(--fw-med) var(--fs-sm)/1.3 var(--font-sans);
    color: var(--text-main);
    box-sizing: border-box;
    min-width: 32px;
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}
.consult-content input:focus,
.consult-content select:focus,
.consult-content textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.consult-content input[readonly],
.consult-content input:disabled,
.consult-content select:disabled,
.consult-content textarea:disabled {
    background: var(--bg-subtle);
    color: var(--text-muted);
    cursor: not-allowed;
}
.consult-content input[type="checkbox"],
.consult-content input[type="radio"] {
    accent-color: var(--accent);
    width: 16px; height: 16px;
    vertical-align: middle;
    margin: 0 4px;
}
/* Inline labels inside .consult-content stay readable but lightweight — we
   don't apply the uppercase-muted .fld-label treatment because those labels
   are already styled by the surrounding card-headers / fieldset legends. */
.consult-content label {
    color: var(--text-main);
    font: var(--fw-med) var(--fs-sm)/1.4 var(--font-sans);
    cursor: pointer;
}
/* Tables inside Interface-emitted content — defensive sane defaults so the
   raw <table border='1' style='border:1px solid black'> markup reads modern. */
.consult-content table:not(.glass-table):not(.emr-table) {
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
    color: var(--text-main);
    font: var(--fw-med) var(--fs-sm)/1.4 var(--font-sans);
}
.consult-content table:not(.glass-table):not(.emr-table) td,
.consult-content table:not(.glass-table):not(.emr-table) th {
    border: 1px solid var(--border-subtle);
    padding: 6px 10px;
    vertical-align: middle;
}
.consult-content table:not(.glass-table):not(.emr-table) th {
    background: var(--bg-subtle);
    font: var(--fw-sem) var(--fs-xs)/1.2 var(--font-sans);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: left;
}
/* Buttons inside Interface-emitted content that don't carry a modern .btn
   class — give them the default glass-modern button look so save/print/etc.
   buttons in legacy partials read as the rest of the system. */
.consult-content input[type="submit"]:not(.btn):not(.btn-hud),
.consult-content input[type="button"]:not(.btn):not(.btn-hud),
.consult-content button[type="submit"]:not(.btn):not(.btn-hud),
.consult-content button[type="button"]:not(.btn):not(.btn-hud) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: #fff;
    border: 1px solid var(--accent);
    border-radius: var(--r-sm);
    font: var(--fw-sem) var(--fs-sm)/1 var(--font-sans);
    cursor: pointer;
    transition: filter var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.consult-content input[type="submit"]:not(.btn):not(.btn-hud):hover,
.consult-content input[type="button"]:not(.btn):not(.btn-hud):hover,
.consult-content button:not(.btn):not(.btn-hud):hover { filter: brightness(1.06); transform: translateY(-1px); }

/* --- 5h-bis. CLINICAL CONSULTATION CHROME ----------------------------------
   Primitives for the doctor's consultation page. Patient-banner pinned under
   the topbar for clinical-safety identity persistence; sticky action bar at
   the viewport bottom so Save is always one click away regardless of how
   many tabs the doctor scrolls through; tablet-collapsible sidebar via a
   hamburger toggle so the page stays usable on the iPad at the bedside. */

/* Patient banner — clinical-safety identity bar */
.consult-patient-banner {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: var(--sp-3);
    align-items: center;
    padding: var(--sp-2) var(--sp-4);
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
            backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-2);
    margin-bottom: var(--sp-3);
}
.consult-patient-banner.has-allergy { border-left-color: #DC2626; }
.consult-patient-banner-photo {
    width: 56px; height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--glass-border);
    background: var(--bg-subtle);
}
.consult-patient-banner-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.consult-patient-banner-name {
    font: var(--fw-bold) var(--fs-md)/1.2 var(--font-sans);
    color: var(--text-main);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.consult-patient-banner-meta {
    display: flex; flex-wrap: wrap; gap: 12px;
    font: var(--fw-med) var(--fs-xs)/1.3 var(--font-sans);
    color: var(--text-muted);
}
.consult-patient-banner-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.consult-patient-banner-meta strong { color: var(--text-main); font-weight: var(--fw-sem); }
.consult-patient-banner-actions {
    display: flex; align-items: center; gap: var(--sp-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}
/* Compact, uniform action buttons in the banner row.
   The banner has 3 moved actions (New patient badge, Complete Visit, Schedule
   Appointment) plus the NKA chip and the sidebar toggle. We force a single
   compact height across all of them so the row reads as one balanced toolbar. */
.consult-patient-banner-actions .btn-hud,
.consult-patient-banner-actions input[type="button"].btn-hud,
.consult-patient-banner-actions input[type="submit"].btn-hud {
    height: 32px;
    padding: 0 12px;
    font-size: var(--fs-xs);
    border-radius: var(--r-sm);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: none;
    transform: none;
}
.consult-patient-banner-actions .btn-hud-primary {
    box-shadow: 0 2px 6px -2px var(--accent-ring);
}
.consult-patient-banner-actions .btn-hud-primary:hover { transform: translateY(-1px); }

/* Elevate the "New patient" / "Revisit" badge into a proper pill that visually
   pairs with the buttons rather than the meta row below. */
.consult-patient-banner-actions .badge {
    display: inline-flex; align-items: center;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    font: var(--fw-sem) var(--fs-xs)/1 var(--font-sans);
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent-ring);
    letter-spacing: 0.2px;
    white-space: nowrap;
}
.consult-patient-banner-actions .badge b { font-weight: var(--fw-sem); }

/* Schedule Appointment emoji baseline + spacing */
.consult-patient-banner-actions .modern-btn { font-size: var(--fs-xs); }

/* Visual divider: separates the moved actions (left group) from the
   allergy chip + nav toggle (right group). The divider is a 1px line
   inserted before the NKA chip, drawn via a pseudo-element. */
.consult-patient-banner-actions .consult-allergy-chip {
    position: relative;
    height: 32px;
    margin-left: 4px;
    padding-left: 14px;
}
.consult-patient-banner-actions .consult-allergy-chip::before {
    content: "";
    position: absolute;
    left: -8px; top: 6px; bottom: 6px;
    width: 1px;
    background: var(--border-subtle);
}
.consult-patient-banner-actions .consult-toggle {
    width: 32px; height: 32px;
    display: inline-grid; place-items: center;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.consult-patient-banner-actions .consult-toggle:hover {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}

/* On narrow viewports, drop the actions onto their own line under the
   identity block so the row doesn't compress the MRN/Attending meta. */
@media (max-width: 900px) {
    .consult-patient-banner { grid-template-columns: 48px 1fr; grid-template-rows: auto auto; }
    .consult-patient-banner-photo { grid-row: 1; grid-column: 1; }
    .consult-patient-banner-id    { grid-row: 1; grid-column: 2; }
    .consult-patient-banner-actions {
        grid-row: 2; grid-column: 1 / -1;
        justify-content: flex-start;
        padding-top: var(--sp-1);
        border-top: 1px solid var(--border-subtle);
        margin-top: var(--sp-1);
    }
}

/* Allergy badge — red blinker if any allergies, neutral "NKA" if none. */
.consult-allergy-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font: var(--fw-bold) var(--fs-xs)/1 var(--font-sans);
    background: rgba(239, 68, 68, 0.12);
    color: #B91C1C;
    border: 1px solid rgba(220, 38, 38, 0.40);
    max-width: 280px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    animation: consult-allergy-pulse 2.4s ease-in-out infinite;
}
.consult-allergy-chip.is-nka {
    background: var(--bg-subtle);
    color: var(--text-muted);
    border-color: var(--border-subtle);
    animation: none;
}
@keyframes consult-allergy-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.20); }
    50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

/* Sticky bottom action bar — Save always one click away. */
.consult-action-bar {
    position: sticky;
    bottom: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: var(--glass-blur);
            backdrop-filter: var(--glass-blur);
    border-top: 1px solid var(--glass-border);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    box-shadow: 0 -4px 16px -8px rgba(15, 23, 42, 0.18);
    margin-top: var(--sp-3);
}
.consult-action-bar-spacer { flex: 1; }
.consult-autosave {
    display: inline-flex; align-items: center; gap: 6px;
    font: var(--fw-med) var(--fs-xs)/1 var(--font-sans);
    color: var(--text-muted);
    transition: color var(--dur-fast) var(--ease-out);
}
.consult-autosave::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
    animation: consult-autosave-pulse 2s ease-out infinite;
    transition: background var(--dur-fast) var(--ease-out);
}
.consult-autosave.is-saving { color: var(--accent); }
.consult-autosave.is-saving::before {
    background: var(--accent);
    box-shadow: 0 0 0 0 var(--accent-ring);
    animation: consult-autosave-pulse-busy 0.9s ease-out infinite;
}
.consult-autosave.is-error { color: #B91C1C; }
.consult-autosave.is-error::before {
    background: #DC2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.20);
    animation: none;
}
@keyframes consult-autosave-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
    70%  { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
@keyframes consult-autosave-pulse-busy {
    0%   { box-shadow: 0 0 0 0 var(--accent-ring); }
    70%  { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

/* Sidebar tab completion-state dot */
.consult-tab-state-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex: 0 0 8px;
    margin-left: auto;
    background: var(--text-muted); opacity: 0.35;
    transition: background var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.consult-tab-state-dot[data-state="filled"]   { background: #10B981; opacity: 1; }
.consult-tab-state-dot[data-state="dirty"]    { background: #F59E0B; opacity: 1; }
.consult-tab-state-dot[data-state="required"] { background: #DC2626; opacity: 1; animation: consult-allergy-pulse 2.4s ease-in-out infinite; }

/* iPad / mobile sidebar collapse */
.consult-toggle {
    display: none;
    width: 38px; height: 38px;
    padding: 0;
    border-radius: var(--r-md);
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-main);
    cursor: pointer;
    align-items: center; justify-content: center;
}
.consult-toggle:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.consult-toggle > svg { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 1024px) {
    .consult-toggle { display: inline-flex; }
    body.app-shell .consult-shell { grid-template-columns: 1fr !important; }
    body.app-shell .consult-sidebar {
        position: fixed; top: 64px; left: 0; bottom: 0;
        width: 280px; max-width: 86vw;
        z-index: calc(var(--z-modal) - 1);
        transform: translateX(-100%);
        transition: transform var(--dur-med) var(--ease-out);
        max-height: none;
        border-radius: 0 var(--r-lg) var(--r-lg) 0;
    }
    body.app-shell .consult-sidebar.is-open { transform: translateX(0); box-shadow: var(--shadow-3, var(--shadow-2)); }
    body.app-shell .consult-sidebar-backdrop {
        position: fixed; inset: 64px 0 0 0;
        background: rgba(15, 23, 42, 0.40);
        -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
        z-index: calc(var(--z-modal) - 2);
        opacity: 0; pointer-events: none;
        transition: opacity var(--dur-med) var(--ease-out);
    }
    body.app-shell .consult-sidebar-backdrop.is-open { opacity: 1; pointer-events: auto; }
}

/* Empty state — replaces blank tab content with actionable guidance */
.empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    padding: var(--sp-5) var(--sp-4);
    min-height: 240px;
    color: var(--text-muted);
}
.empty-state-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: var(--sp-3);
}
.empty-state-icon > svg { width: 28px; height: 28px; fill: currentColor; }
.empty-state-title {
    font: var(--fw-sem) var(--fs-md)/1.3 var(--font-sans);
    color: var(--text-main);
    margin-bottom: 6px;
}
.empty-state-desc {
    font: var(--fw-med) var(--fs-sm)/1.5 var(--font-sans);
    color: var(--text-muted);
    max-width: 380px;
    margin-bottom: var(--sp-4);
}

/* --- LEGACY-FILTER COMPAT --------------------------------------------------
   Filter::patientFilter / itemFilter etc. emit:
       <button class='btn btn-success btn-circle btn-lg form-control'>
           <i class='fa fa-search bi bi-search'></i>
       </button>
   Without these rules, .form-control forces 100% width (giant green pill)
   and Font Awesome is not loaded so the icon is invisible. We rein in the
   width and rely on Bootstrap Icons (already shipped with this stylesheet)
   via the .bi class which the filter helpers now also emit. ----------------- */
body.app-shell .btn.btn-circle.btn-lg.form-control,
body.app-shell .btn-circle.btn-lg.form-control {
    width: 44px !important;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Inline-SVG glyph for .fa-search since Font Awesome / Bootstrap Icons fonts
   aren't loaded by modern-emr-core.css. Always renders, regardless of classes. */
body.app-shell i.fa-search { font-style: normal; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; }
body.app-shell i.fa-search::before {
    content: "";
    display: inline-block;
    width: 16px; height: 16px;
    background-repeat: no-repeat; background-position: center; background-size: contain;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/></svg>");
}

/* --- END ------------------------------------------------------------------ */