/* ═══════════════════════ v24 · «Quiet Clinical» — the approved design system on production ═══════════════════════
   Loaded after app.css. Reads only design tokens (assets/css/tokens.css, generated from design-system/tokens.json).
   Maps the Clinical Calm variables (--v-*) and Bootstrap's (--bs-*) onto the tokens, then restyles the shared
   components every screen is built from: shell, page header, KPI tiles, cards, tables, chips, buttons, forms, tabs,
   patient banner, decision list, command palette, patient-context list, login hero. Signature: the pulse line. */

:root{
  --v-primary:var(--vt-primary);--v-primary-dark:var(--vt-primary-hover);--v-secondary:var(--vt-teal-500);--v-accent:var(--vt-teal-500);
  --v-gradient:linear-gradient(135deg,var(--vt-primary-500),var(--vt-teal-500));
  --v-bg:var(--vt-s0);--v-card:var(--vt-s2);--v-text:var(--vt-text);--v-muted:var(--vt-text-muted);--v-border:var(--vt-line);--v-hover:var(--vt-hover);
  --v-sidebar:var(--vt-nav);--v-sidebar-text:var(--vt-nav-text);--v-sidebar-active:var(--vt-primary-400);--v-ink:var(--vt-n900);
  --radius:var(--vt-r-lg);--radius-sm:var(--vt-r-md);
  --v-shadow-sm:var(--vt-e1);--v-shadow-md:var(--vt-e2);
  --bs-primary:#2352D9;--bs-primary-rgb:35,82,217;--bs-link-color:var(--vt-primary);--bs-link-color-rgb:35,82,217;--bs-link-hover-color:var(--vt-primary-hover);
  --bs-body-bg:var(--vt-s0);--bs-body-color:var(--vt-text);--bs-border-color:var(--vt-line);--bs-secondary-color:var(--vt-text-muted);
  --bs-font-sans-serif:var(--vt-font);--bs-border-radius:var(--vt-r-md);--bs-border-radius-lg:var(--vt-r-lg);
  --bs-success:#178A4E;--bs-success-rgb:23,138,78;--bs-danger:#C6303E;--bs-danger-rgb:198,48,62;--bs-warning:#B8690A;--bs-warning-rgb:184,105,10;--bs-info:#1D6FA8;--bs-info-rgb:29,111,168;
}
[data-bs-theme="dark"]{--bs-body-bg:var(--vt-s0);--bs-body-color:var(--vt-text);--bs-border-color:var(--vt-line);--bs-secondary-color:var(--vt-text-muted);--bs-link-color:var(--vt-primary);--bs-primary:#4F78EE;--bs-primary-rgb:79,120,238}

/* ── ground: not flat grey — two faint tints (cobalt at the nav corner, teal at the far corner) ── */
body{background:radial-gradient(1100px 480px at 100% -10%,color-mix(in srgb,var(--vt-primary) 7%,transparent),transparent 65%),radial-gradient(800px 380px at 0% 100%,color-mix(in srgb,var(--vt-teal-500) 5%,transparent),transparent 60%),var(--vt-s0);color:var(--vt-text);font-size:.9rem}
[dir=ltr] body{background:radial-gradient(1100px 480px at 0% -10%,color-mix(in srgb,var(--vt-primary) 7%,transparent),transparent 65%),radial-gradient(800px 380px at 100% 100%,color-mix(in srgb,var(--vt-teal-500) 5%,transparent),transparent 60%),var(--vt-s0)}
h1,h2,h3,h4,h5{color:var(--vt-text);text-wrap:balance}
a{color:var(--vt-primary)}
:focus-visible{outline:none;box-shadow:var(--vt-focus)}
.text-muted{color:var(--vt-text-muted)!important}
.num,.table td,.stat .v{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── the signature: a quiet pulse line, drawn once ── */
.vt-pulse{display:block;width:100%;height:18px;color:var(--vt-primary-300);opacity:.9}
.vt-pulse path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;animation:vtDraw 1.6s var(--vt-e-decelerate) forwards}
@keyframes vtDraw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.vt-pulse path{stroke-dashoffset:0}}

/* ── shell: navigation (start side), context list (end side), top bar ── */
.sidebar{background:linear-gradient(180deg,#101E3C 0%,var(--vt-nav) 40%,#0A1428 100%);color:var(--vt-nav-text)}
.sidebar .brand{font-size:1.1rem;padding:14px 10px 10px}
.sidebar .brand small{color:var(--vt-nav-text)}
.sidebar .vbrand-tile{box-shadow:0 0 0 1px rgba(255,255,255,.12),0 8px 20px -8px rgba(46,99,240,.9);border-radius:9px}
.sidebar .group{font-size:.66rem;letter-spacing:.3px;color:rgba(184,195,217,.62);padding:14px 10px 4px}
.sidebar .group::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.07)}
.sidebar .group::before{background:var(--grp,var(--vt-primary-300));width:6px;height:6px;border-radius:2px}
.sidebar a.item{border-radius:8px;padding:8px 10px;font-size:.84rem;font-weight:500;color:var(--vt-nav-text);transition:background var(--vt-d-fast),color var(--vt-d-fast)}
.sidebar a.item i{color:var(--vt-nav-text);opacity:.85}
.sidebar a.item:hover{background:rgba(255,255,255,.06);color:#fff;padding-inline-start:10px}
.sidebar a.item.active{background:linear-gradient(90deg,rgba(46,99,240,.34),rgba(46,99,240,.14));color:#fff;box-shadow:inset 3px 0 0 var(--vt-primary-400),0 0 0 1px rgba(79,120,238,.28)}
[dir=rtl] .sidebar a.item.active{box-shadow:inset -3px 0 0 var(--vt-primary-400),0 0 0 1px rgba(79,120,238,.28)}
.sidebar a.item.active i{color:var(--vt-primary-300);opacity:1}
.sidebar .side-search input{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:var(--vt-r-md);height:var(--vt-input-height-bar);min-height:var(--vt-input-height-bar);font-size:.82rem}
.sidebar .side-search input:focus{border-color:var(--vt-primary-400);box-shadow:0 0 0 3px rgba(79,120,238,.25)}
.sb-user{background:rgba(255,255,255,.05);border-top:1px solid rgba(255,255,255,.08);border-radius:10px}
.topbar{height:56px;padding:0 1.4rem;background:color-mix(in srgb,var(--vt-s1) 86%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--vt-line)}
[data-bs-theme="dark"] .topbar{background:color-mix(in srgb,var(--vt-s1) 86%,transparent)}
/* min-height too, not just height: the field rule further down sets a touch-target minimum that would
   otherwise win here and push the search out of the 56px bar it is meant to sit inside. */
.topbar .search input{height:var(--vt-input-height-bar);min-height:var(--vt-input-height-bar);border-radius:var(--vt-r-md);border:1px solid var(--vt-line);background:var(--vt-s0);font-size:.82rem}
.topbar .search input:focus{border-color:var(--vt-primary);box-shadow:var(--vt-focus)}
.topbar .search kbd{font-family:var(--vt-mono);border:1px solid var(--vt-line-strong);border-radius:4px;font-size:.66rem;color:var(--vt-text-muted)}
.topbar .icon-btn{width:36px;height:36px;border-radius:var(--vt-r-md);border:1px solid transparent;background:transparent;color:var(--vt-text-2)}
.topbar .icon-btn:hover{background:var(--vt-hover);color:var(--vt-primary)}
.topbar .icon-btn .dot{background:var(--vt-danger);border-color:var(--vt-s1)}
.topbar .btn-light{height:36px;border-radius:var(--vt-r-md);border:1px solid var(--vt-line-strong);background:var(--vt-s1);color:var(--vt-text);font-weight:600;font-size:.8rem}
.tb-quick{height:36px;border-radius:var(--vt-r-md);background:var(--vt-primary);font-weight:600;font-size:.8rem;box-shadow:none}
.tb-quick:hover{background:var(--vt-primary-hover)}
.avatar{background:var(--vt-primary-soft);color:var(--vt-primary);font-weight:700}
.topbar .avatar{background:var(--vt-primary-soft);color:var(--vt-primary)}
.content{padding:var(--vt-sp-6)}

/* ── page header ── */
.page-header{margin-bottom:var(--vt-sp-5);align-items:flex-end}
.page-header h1{font-size:var(--vt-h1-size);line-height:var(--vt-h1-line);font-weight:var(--vt-h1-weight);letter-spacing:-.1px}
.page-header h1 i{color:var(--vt-primary);margin-inline-end:.45rem;font-size:.9em}
.page-header .crumbs{font-size:.74rem;color:var(--vt-text-muted)}
.page-header .crumbs a{color:var(--vt-text-muted)}.page-header .crumbs a:hover{color:var(--vt-primary)}
.page-header small.text-muted,.page-header .lead,.page-header .sub{color:var(--vt-text-muted)!important;font-size:.82rem}
.page-header .btn{height:38px;border-radius:var(--vt-r-md);font-weight:600;font-size:.82rem;padding:0 14px;box-shadow:none}
.page-header .btn-sm{height:32px;padding:0 12px}

/* ── the morning brief (dashboard): deep navy → cobalt band ── */
.brief{position:relative;overflow:hidden;border-radius:var(--vt-r-xl);background:linear-gradient(120deg,#0E1A33 0%,#15338A 55%,#2352D9 100%);color:#fff;padding:22px 24px 30px;margin-bottom:var(--vt-sp-5);box-shadow:var(--vt-e3)}
[dir=ltr] .brief{background:linear-gradient(240deg,#0E1A33 0%,#15338A 55%,#2352D9 100%)}
.brief::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 200px at 20% 120%,rgba(14,156,154,.35),transparent 70%);pointer-events:none}
.brief .page-header{margin:0;position:relative}
.brief .page-header h1{color:#fff;font-size:26px;line-height:34px}
.brief .page-header h1 i{color:rgba(255,255,255,.7)}
.brief .page-header .crumbs,.brief .page-header .crumbs a,.brief .page-header small.text-muted{color:rgba(255,255,255,.7)!important}
.brief .page-header .btn-primary{background:#fff;color:var(--vt-primary-700);border-color:#fff}
.brief .page-header .btn-primary:hover{background:#EDF2FF;color:var(--vt-primary-700)}
.brief .page-header .btn-outline-secondary,.brief .page-header .btn-light{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18);color:#fff}
.brief .page-header .btn-outline-secondary:hover,.brief .page-header .btn-light:hover{background:rgba(255,255,255,.2);color:#fff}
.brief .vt-pulse{position:absolute;inset-inline:0;bottom:-2px;height:30px;color:rgba(255,255,255,.28);opacity:1}

/* ── KPI tiles: tonal accent bar + quiet icon ── */
.stat{border-radius:var(--vt-r-lg);padding:14px 16px 14px 18px;border:1px solid var(--vt-line);box-shadow:var(--vt-e1);position:relative;overflow:hidden;background:var(--vt-s2)}
[dir=rtl] .stat{padding:14px 18px 14px 16px}
.stat::before{content:"";position:absolute;inset-inline-start:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--vt-primary-300)}
[dir=ltr] .stat::before{border-radius:3px 0 0 3px}
.stat .ic{width:30px;height:30px;border-radius:8px;font-size:.8rem;color:var(--vt-primary);background:var(--vt-primary-soft)!important;box-shadow:none}
.stat .ic.bg-g2{color:var(--vt-teal-600);background:var(--vt-teal-50)!important}.stat .ic.bg-g3{color:var(--vt-pending);background:var(--vt-pending-bg)!important}
.stat .ic.bg-g4{color:var(--vt-danger);background:var(--vt-danger-bg)!important}.stat .ic.bg-g5{color:var(--vt-warning);background:var(--vt-warning-bg)!important}.stat .ic.bg-g6{color:var(--vt-info);background:var(--vt-info-bg)!important}
.stat:has(.ic.bg-g2)::before{background:var(--vt-teal-500)}.stat:has(.ic.bg-g3)::before{background:var(--vt-pending)}.stat:has(.ic.bg-g4)::before{background:var(--vt-danger)}.stat:has(.ic.bg-g5)::before{background:var(--vt-warning)}.stat:has(.ic.bg-g6)::before{background:var(--vt-info)}
.stat .v{font-size:24px;font-weight:800;line-height:1.1}
.stat .l{font-size:.78rem;font-weight:500;color:var(--vt-text-muted)}
.stat .trend{font-size:.72rem;font-weight:600}.stat .trend.up{color:var(--vt-success)}.stat .trend.down{color:var(--vt-danger)}
.stat svg.spark polyline{stroke:var(--vt-primary-400)!important;opacity:1!important}
.content .stat:hover{transform:translateY(-1px);border-color:var(--vt-line-strong);box-shadow:var(--vt-e2)}
/* `backwards`, never `both`: a forward fill keeps `transform` applied after the entrance ends, and an
   element with a filling transform is the containing block for its position:fixed descendants — which
   silently moved every searchable-select panel inside a card off-screen. */
.content .row>[class*="col"] .stat,.content .row>[class*="col"] .card{animation:vtRise var(--vt-d-slow) var(--vt-e-decelerate) backwards}
.content .row>[class*="col"]:nth-child(2) .stat{animation-delay:40ms}.content .row>[class*="col"]:nth-child(3) .stat{animation-delay:80ms}.content .row>[class*="col"]:nth-child(4) .stat{animation-delay:120ms}.content .row>[class*="col"]:nth-child(5) .stat{animation-delay:160ms}.content .row>[class*="col"]:nth-child(6) .stat{animation-delay:200ms}
@keyframes vtRise{from{opacity:0;transform:translateY(6px)}}

/* ── cards, tables ── */
.card{border-radius:var(--vt-r-lg);border:1px solid var(--vt-line);background:var(--vt-s2);box-shadow:var(--vt-e1)}
.card-header{padding:14px 18px;font-size:.9rem;font-weight:700;border-bottom:1px solid var(--vt-line);background:transparent;color:var(--vt-text)}
.card-header i{color:var(--vt-primary)}
.content .card:hover,.pt-wrap .card:hover{transform:none;box-shadow:var(--vt-e1)}
.table{font-size:.85rem;color:var(--vt-text)}
.table thead th{background:var(--vt-s1);color:var(--vt-text-muted);font-size:.74rem;font-weight:600;text-transform:none;letter-spacing:.1px;padding:10px 14px;border-bottom:1px solid var(--vt-line)}
[data-bs-theme="dark"] .table thead th{background:var(--vt-s1)}
.table td{padding:10px 14px;border-color:var(--vt-line);vertical-align:middle}
.table-hover>tbody>tr:hover>*{background:var(--vt-hover);color:var(--vt-text)}
.table-hover>tbody>tr:hover>td:first-child{box-shadow:inset 3px 0 0 var(--vt-primary-200)}
.table-striped>tbody>tr:nth-of-type(odd)>*{background:transparent}
.mini-table td,.mini-table th{padding:.5rem .8rem}
.pagination .page-link{border-radius:6px;border:1px solid var(--vt-line);color:var(--vt-text-2);font-weight:600}
.pagination .page-item.active .page-link{background:var(--vt-primary);border-color:var(--vt-primary);color:var(--vt-on-primary)}

/* ── status chips: colour never alone — soft field, line, and a leading glyph ── */
.badge{border-radius:999px;font-weight:600;font-size:.72rem;padding:.3em .7em;border:1px solid transparent;display:inline-flex;align-items:center;gap:.35em;vertical-align:middle}
.badge::before{font-family:"Font Awesome 6 Free","Font Awesome 7 Free";font-weight:900;font-size:.8em;line-height:1}
.badge.text-bg-success{background:var(--vt-success-bg)!important;color:var(--vt-success)!important;border-color:var(--vt-success-line)}.badge.text-bg-success::before{content:"\f00c"}
.badge.text-bg-danger{background:var(--vt-danger-bg)!important;color:var(--vt-danger)!important;border-color:var(--vt-danger-line)}.badge.text-bg-danger::before{content:"\f071"}
.badge.text-bg-warning{background:var(--vt-warning-bg)!important;color:var(--vt-warning)!important;border-color:var(--vt-warning-line)}.badge.text-bg-warning::before{content:"\f017"}
.badge.text-bg-info{background:var(--vt-info-bg)!important;color:var(--vt-info)!important;border-color:var(--vt-info-line)}.badge.text-bg-info::before{content:"\f05a"}
.badge.text-bg-primary{background:var(--vt-primary-soft)!important;color:var(--vt-primary)!important;border-color:var(--vt-primary-200)}
.badge.text-bg-secondary,.badge.text-bg-light,.badge.text-bg-dark{background:var(--vt-hover)!important;color:var(--vt-text-2)!important;border-color:var(--vt-line)}
.badge.text-bg-pink,.badge.bg-purple{background:var(--vt-pending-bg)!important;color:var(--vt-pending)!important;border-color:var(--vt-pending-line)}.badge.text-bg-pink::before{content:"\f017"}
.badge.rounded-pill{border-radius:999px}
.badge:has(> i:first-child)::before,.badge.no-glyph::before,.sidebar .badge::before,.nav-link .badge::before,.btn .badge::before{content:none}
.sidebar .badge{background:rgba(255,255,255,.1)!important;color:#fff!important;border:0}
.chip{font-size:.7rem;font-weight:600;border:1px solid transparent}
.chip-r{background:var(--vt-danger-bg);color:var(--vt-danger);border-color:var(--vt-danger-line)}.chip-a{background:var(--vt-warning-bg);color:var(--vt-warning);border-color:var(--vt-warning-line)}
.chip-g{background:var(--vt-success-bg);color:var(--vt-success);border-color:var(--vt-success-line)}.chip-b{background:var(--vt-info-bg);color:var(--vt-info);border-color:var(--vt-info-line)}.chip-s{background:var(--vt-hover);color:var(--vt-text-2);border-color:var(--vt-line)}
[data-bs-theme="dark"] .chip-r,[data-bs-theme="dark"] .chip-a,[data-bs-theme="dark"] .chip-g,[data-bs-theme="dark"] .chip-b,[data-bs-theme="dark"] .chip-s{background:revert-layer}
[data-bs-theme="dark"] .chip-r{background:var(--vt-danger-bg);color:var(--vt-danger)}[data-bs-theme="dark"] .chip-a{background:var(--vt-warning-bg);color:var(--vt-warning)}[data-bs-theme="dark"] .chip-g{background:var(--vt-success-bg);color:var(--vt-success)}[data-bs-theme="dark"] .chip-b{background:var(--vt-info-bg);color:var(--vt-info)}[data-bs-theme="dark"] .chip-s{background:var(--vt-hover);color:var(--vt-text-2)}

/* ── buttons: one primary per screen, no coloured glows ── */
.btn{border-radius:var(--vt-r-md);font-weight:600;box-shadow:none!important;transition:background var(--vt-d-fast),border-color var(--vt-d-fast),color var(--vt-d-fast),transform var(--vt-d-fast)}
.btn:active{transform:translateY(1px)}
.btn-sm{border-radius:8px}
.btn-primary,.btn-gradient{background:var(--vt-primary)!important;border-color:var(--vt-primary)!important;color:var(--vt-on-primary)!important;filter:none!important}
.btn-primary:hover,.btn-gradient:hover,.btn-primary:focus{background:var(--vt-primary-hover)!important;border-color:var(--vt-primary-hover)!important}
.btn-outline-primary{color:var(--vt-primary);border-color:var(--vt-primary-200)}.btn-outline-primary:hover{background:var(--vt-primary-soft);color:var(--vt-primary);border-color:var(--vt-primary)}
.btn-light,.btn-outline-secondary{background:var(--vt-s1);border-color:var(--vt-line-strong);color:var(--vt-text)}
.btn-light:hover,.btn-outline-secondary:hover{background:var(--vt-hover);border-color:var(--vt-line-strong);color:var(--vt-text)}
.btn-success{background:var(--vt-success);border-color:var(--vt-success)}.btn-danger{background:var(--vt-danger);border-color:var(--vt-danger)}
.btn-warning{background:var(--vt-warning);border-color:var(--vt-warning);color:#fff}.btn-info{background:var(--vt-info);border-color:var(--vt-info);color:#fff}
.btn-outline-danger{color:var(--vt-danger);border-color:var(--vt-danger-line)}.btn-outline-danger:hover{background:var(--vt-danger);border-color:var(--vt-danger)}
.btn-outline-success{color:var(--vt-success);border-color:var(--vt-success-line)}.btn-outline-success:hover{background:var(--vt-success);border-color:var(--vt-success)}

/* ── forms ── */
/* The sign-in field's shape carried across the system: the touch-target height, the large radius, a softer
   line that firms up on hover, and the wider focus ring. Every value is a token emitted from
   component.input in design-system/tokens.json — nothing here is a literal. */
.form-control,.form-select,.ss-control{border-radius:var(--vt-input-radius);min-height:var(--vt-input-height);border:var(--vt-input-border-width) solid var(--vt-line);background:var(--vt-s1);color:var(--vt-text);box-shadow:none}
.form-control-sm,.form-select-sm{min-height:var(--vt-input-height-sm);border-radius:var(--vt-input-radius-sm)}
.form-control:hover:not(:focus),.form-select:hover:not(:focus),.ss-control:hover{border-color:var(--vt-line-strong)}
.form-control:focus,.form-select:focus,.ss-wrap.open .ss-control{border-color:var(--vt-primary);box-shadow:var(--vt-focus-lg)}
.form-check-input:checked{background-color:var(--vt-primary);border-color:var(--vt-primary)}
.form-label{font-size:.8rem;font-weight:600;color:var(--vt-text-2)}
.form-text,.invalid-feedback{font-size:.76rem}
.input-group-text{border-radius:var(--vt-r-md);border:1px solid var(--vt-line-strong);background:var(--vt-hover);color:var(--vt-text-muted)}
.ss-item.active,.ss-chip{background:var(--vt-primary-soft);color:var(--vt-primary)}
.ss-panel{border-radius:var(--vt-r-md);box-shadow:var(--vt-e3);border-color:var(--vt-line)}

/* ── tabs, segments, dropdowns, modals, alerts ── */
.nav-tabs{background:transparent;border:0;border-bottom:1px solid var(--vt-line);border-radius:0;padding:0;gap:4px}
.nav-tabs .nav-link{border:0;border-bottom:2px solid transparent;border-radius:0;margin-bottom:-1px;padding:10px 12px;font-weight:600;font-size:.84rem;color:var(--vt-text-muted)}
.nav-tabs .nav-link:hover{background:transparent;color:var(--vt-text)}
.nav-tabs .nav-link.active{background:transparent;color:var(--vt-primary);border-bottom-color:var(--vt-primary)}
.nav-pills .nav-link{border-radius:999px;font-weight:600;color:var(--vt-text-2)}.nav-pills .nav-link.active{background:var(--vt-primary);color:var(--vt-on-primary)}
.seg{background:var(--vt-s0);border:1px solid var(--vt-line);border-radius:var(--vt-r-md)}
.seg .on{background:var(--vt-s2);color:var(--vt-text);box-shadow:var(--vt-e1)}
.dropdown-menu{border-radius:var(--vt-r-md);border:1px solid var(--vt-line);box-shadow:var(--vt-e3);background:var(--vt-s3)}
.dropdown-item{border-radius:8px;font-size:.84rem;color:var(--vt-text)}.dropdown-item:hover{background:var(--vt-hover);color:var(--vt-text)}
.modal-content{border-radius:var(--vt-r-xl);border:0;box-shadow:var(--vt-e4);background:var(--vt-s3)}
.modal-header,.modal-footer{border-color:var(--vt-line)}
.alert{border-radius:var(--vt-r-md);border:1px solid;font-size:.86rem}
.alert-success{background:var(--vt-success-bg);color:var(--vt-success);border-color:var(--vt-success-line)}
.alert-danger{background:var(--vt-danger-bg);color:var(--vt-danger);border-color:var(--vt-danger-line)}
.alert-warning{background:var(--vt-warning-bg);color:var(--vt-warning);border-color:var(--vt-warning-line)}
.alert-info{background:var(--vt-info-bg);color:var(--vt-info);border-color:var(--vt-info-line)}
.toast{border-radius:var(--vt-r-md);box-shadow:var(--vt-e3)}
.progress{background:var(--vt-hover);border-radius:999px}.progress-bar{background:var(--vt-primary)}
.list-group-item{border-color:var(--vt-line);background:var(--vt-s2);color:var(--vt-text)}

/* ── patient identity band ── */
/* No overflow:hidden and no glow pseudo-element: the hidden overflow clipped the visit menu in the banner, and a
   positioned glow would need stacking tricks that trap that menu instead. The glow is a background layer. */
.patient-banner{border-radius:var(--vt-r-lg);border:1px solid var(--vt-line);border-inline-start-width:1px;background:radial-gradient(180px circle at 100% 0,color-mix(in srgb,var(--vt-teal-500) 12%,transparent),transparent 70%),linear-gradient(135deg,color-mix(in srgb,var(--vt-primary) 6%,var(--vt-s2)),var(--vt-s2) 55%);position:relative;box-shadow:var(--vt-e1)}
[dir=rtl] .patient-banner{background:radial-gradient(180px circle at 0 0,color-mix(in srgb,var(--vt-teal-500) 12%,transparent),transparent 70%),linear-gradient(135deg,color-mix(in srgb,var(--vt-primary) 6%,var(--vt-s2)),var(--vt-s2) 55%)}
.patient-banner .avatar{width:60px;height:60px;border-radius:50%;font-size:1.3rem;background:linear-gradient(135deg,var(--vt-primary-500),var(--vt-teal-500));color:#fff;box-shadow:0 0 0 2px var(--vt-s2),0 0 0 4px var(--vt-primary-300)}
.patient-banner .meta{font-size:.82rem;color:var(--vt-text-2);gap:.6rem 1.2rem}
.patient-banner .meta b{color:var(--vt-text)}
.allergy-alert{border-radius:var(--vt-r-md);background:var(--vt-danger-bg);color:var(--vt-danger);border:1px solid var(--vt-danger-line);font-weight:600}
.vcard{border-radius:var(--vt-r-lg);border:1px solid var(--vt-line);box-shadow:var(--vt-e1);background:var(--vt-s2)}
.vcard::before{background:var(--vt-primary-300)}.vcard.sev-crit::before{background:var(--vt-danger)}
.vital.warn{background:var(--vt-warning-bg);color:var(--vt-warning)}
.vflag.red{background:var(--vt-danger-bg);color:var(--vt-danger)}
.bed{border-radius:var(--vt-r-md)}.bed.available{background:var(--vt-success-bg);border-color:var(--vt-success-line)}.bed.occupied{background:var(--vt-s2);border-color:var(--vt-line)}

/* ── the decision list ── */
.need{padding:12px 16px;border-color:var(--vt-line);animation:vtRise var(--vt-d-base) var(--vt-e-decelerate) backwards}
.need:nth-child(2){animation-delay:35ms}.need:nth-child(3){animation-delay:70ms}.need:nth-child(4){animation-delay:105ms}.need:nth-child(5){animation-delay:140ms}.need:nth-child(n+6){animation-delay:175ms}
.need:hover{background:var(--vt-hover)}
.need .av{border-radius:8px;font-size:.8rem}
.need .who b{font-weight:600}.need .who span{color:var(--vt-text-muted)}
.need .btn{border-radius:8px;background:var(--vt-primary-soft);border-color:transparent;color:var(--vt-primary);font-weight:600}
.need .btn:hover{background:var(--vt-primary-100);color:var(--vt-primary-700)}

/* ── command palette ── */
.cmdk{background:rgba(10,18,38,.45);backdrop-filter:blur(2px)}
.cmdk-box{border-radius:var(--vt-r-xl);border-color:var(--vt-line);box-shadow:var(--vt-e4);background:var(--vt-s3)}
.cmdk-it{border-radius:var(--vt-r-md)}.cmdk-it.sel{box-shadow:none;background:var(--vt-selected)}
.cmdk-it .ic{background:var(--vt-primary-soft);color:var(--vt-primary);border-radius:8px}

/* ── patient-context list (end side) ── */
.psb{background:var(--vt-s1);border-color:var(--vt-line)}
.psb-title .psb-icon{background:linear-gradient(135deg,var(--vt-primary-50),var(--vt-teal-50));color:var(--vt-primary);border-radius:8px}
[data-bs-theme="dark"] .psb-title .psb-icon{background:var(--vt-selected)}
.psb-search input{border-radius:var(--vt-r-md);border:1px solid var(--vt-line);background:var(--vt-s0);height:36px}
.psb-search input:focus{outline:none;border-color:var(--vt-primary);box-shadow:var(--vt-focus)}
.psb-tab{border-radius:999px;border:1px solid var(--vt-line);background:var(--vt-s2);color:var(--vt-text-2);font-weight:600;font-size:.76rem;padding:4px 11px}
.psb-tab.active{background:var(--vt-primary);border-color:var(--vt-primary);color:var(--vt-on-primary)}
.psb-card,.psb-item{border:1px solid var(--vt-line);border-radius:var(--vt-r-md);background:var(--vt-s2);transition:border-color var(--vt-d-fast),box-shadow var(--vt-d-fast)}
.psb-card:hover,.psb-item:hover{border-color:var(--vt-line-strong);box-shadow:var(--vt-e1)}
.psb-card.active,.psb-item.active,.psb-card.is-active,.psb-item.is-active{border-color:var(--vt-primary);background:linear-gradient(90deg,color-mix(in srgb,var(--vt-primary) 9%,var(--vt-s2)),var(--vt-s2));box-shadow:inset 3px 0 0 var(--vt-primary)}
.psb-edge{background:var(--vt-primary);color:var(--vt-on-primary);border-radius:10px 0 0 10px}
.psb-bottom{color:var(--vt-text-muted);font-size:.72rem;border-top:1px solid var(--vt-line)}

/* ── floating grid, heart map, misc chrome ── */
.vfab{background:var(--vt-primary);box-shadow:var(--vt-e3)}
.vfab-panel{border-radius:var(--vt-r-xl);border-color:var(--vt-line);box-shadow:var(--vt-e4);background:var(--vt-s3)}
.vfab-tile{border-radius:var(--vt-r-md);border-color:var(--vt-line)}.vfab-tile .ic{background:var(--vt-primary-soft);color:var(--vt-primary);border-radius:8px}
.demo-bar{background:var(--vt-warning-bg);color:var(--vt-warning);border-bottom:1px solid var(--vt-warning-line)}
.impersonate-bar{background:var(--vt-danger-bg);color:var(--vt-danger)}
.section-title{color:var(--vt-text);font-weight:700}.section-title i{color:var(--vt-primary)}
.kpi-card{border-radius:var(--vt-r-lg);border:1px solid var(--vt-line);background:var(--vt-s2)}
.timeline:before{background:var(--vt-line)}.timeline .tl:before{border-color:var(--vt-primary);background:var(--vt-s2)}
.esi-1{background:var(--vt-danger)}
.flag-HH,.flag-LL{color:var(--vt-danger);font-weight:700}

/* ── sign-in hero ── */
.auth-hero{background:radial-gradient(70% 60% at 80% 0%,rgba(79,120,238,.45),transparent 70%),radial-gradient(55% 50% at 0% 100%,rgba(14,156,154,.45),transparent 70%),linear-gradient(160deg,#0E1A33 0%,#112A6B 60%,#15338A 100%)}
.auth-brand-h .mark{background:linear-gradient(135deg,var(--vt-primary-500),var(--vt-teal-500));border-radius:12px;box-shadow:0 10px 30px -10px rgba(46,99,240,.8)}
.auth-hero .vt-pulse{height:56px;color:rgba(255,255,255,.35);margin:18px 0 6px;position:relative}
.auth-hero .slide .fig{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:var(--vt-r-md)}
.auth-form .btn-primary{height:46px;border-radius:var(--vt-r-md)}
.auth-body{background:linear-gradient(180deg,color-mix(in srgb,var(--vt-primary) 4%,var(--vt-s0)),var(--vt-s0))}
/* sign-in and the rest of the system now agree on the field radius */
.auth-form-inner .auth-inp,.auth-form-inner .form-control{border-radius:var(--vt-r-lg)}

/* ── responsive touches ── */
@media (max-width:576px){.stat .v{font-size:20px}.brief{padding:16px 16px 26px}.brief .page-header h1{font-size:22px;line-height:30px}.content{padding:14px}}
@media print{.brief{background:#fff!important;color:#000!important;box-shadow:none}.vt-pulse{display:none}}

/* ── row tints: soft fields, never loud ── */
.table-warning>td,.table-warning>th,tr.table-warning{background:var(--vt-warning-bg)!important;--bs-table-bg:var(--vt-warning-bg)}
.table-danger>td,.table-danger>th,tr.table-danger{background:var(--vt-danger-bg)!important;--bs-table-bg:var(--vt-danger-bg)}
.table-success>td,.table-success>th,tr.table-success{background:var(--vt-success-bg)!important;--bs-table-bg:var(--vt-success-bg)}
.table-info>td,.table-info>th,tr.table-info{background:var(--vt-info-bg)!important;--bs-table-bg:var(--vt-info-bg)}
.table-light>td,.table-light>th,tr.table-light,.table-secondary>td,tr.table-secondary{background:var(--vt-hover)!important;--bs-table-bg:var(--vt-hover)}
/* page tools inside the brief band */
.brief #pageTools .btn,.brief .btn-group .btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18);color:#fff}
.brief #pageTools .btn:hover,.brief .btn-group .btn:hover{background:rgba(255,255,255,.22);color:#fff}
.brief #pageTools .btn i,.brief .btn-group .btn i{color:#fff!important}
/* stat: value first, label second, spark fills the width */
.stat .st-head{align-items:flex-start}
.stat svg.spark{margin-top:6px}

/* ── phones and narrow tablets: nothing scrolls the page sideways; wide things scroll inside their own box ── */
@media (max-width:900px){
  .main{overflow-x:hidden}
  .content{padding:14px 14px 90px}
  .pagination{flex-wrap:wrap;gap:4px;row-gap:6px}
  .pagination .page-link{padding:.3rem .55rem;font-size:.8rem}
  .card>.table,.card-body>.table,.content .table:not(.no-scroll){display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .card>.table>thead,.card>.table>tbody,.card-body>.table>thead,.card-body>.table>tbody,.content .table:not(.no-scroll)>thead,.content .table:not(.no-scroll)>tbody{display:table;width:100%;min-width:600px}
  .table-responsive .table{display:table;white-space:normal}
  .page-header{flex-direction:column;align-items:stretch}
  .page-header>.d-flex{flex-wrap:wrap}
  .page-header .btn{height:36px;font-size:.8rem;padding:0 12px}
  .stat .v{font-size:20px}
  .patient-banner{flex-direction:column;align-items:flex-start;gap:10px}
  .patient-banner .meta{gap:.4rem .9rem}
  .nav-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .nav-tabs .nav-link{white-space:nowrap}
  .cmdk{padding:4vh 8px}
  .modal-content{border-radius:var(--vt-r-lg)}
}
@media (max-width:640px){
  .row.g-3>[class*="col-6"]{flex:0 0 50%;max-width:50%}
  .stat{padding:12px 14px 12px 16px}
  .brief .page-header h1{font-size:20px;line-height:28px}
}
/* auth.css loads after this layer: pin the pulse and the flat primary on the sign-in screens */
.auth-hero .vt-pulse path,.auth-hero svg.vt-pulse path{fill:none!important;stroke:currentColor!important}
.auth-form .btn-primary,.auth-form-inner .btn-primary{background:var(--vt-primary)!important;background-image:none!important;border-color:var(--vt-primary)!important;box-shadow:none!important}
.auth-form .btn-primary:hover,.auth-form-inner .btn-primary:hover{background:var(--vt-primary-hover)!important}
.auth-btn{background:var(--vt-primary)!important;border-radius:var(--vt-r-md);height:48px;font-weight:700;box-shadow:none}
.auth-btn:hover{background:var(--vt-primary-hover)!important}

/* ── training button (every screen) and the sign-in entry menu ──────────────────────────────────────────
   The training button sits beside the all-screens FAB, not on top of it: same inline edge, one button-width
   further along, so the two never overlap on a phone. */
.vtrain{position:fixed;inset-block-end:22px;inset-inline-end:88px;width:48px;height:48px;border-radius:50%;
  border:1px solid var(--vt-line);background:var(--vt-s2);color:var(--vt-primary);font-size:1.05rem;
  box-shadow:var(--vt-e2);z-index:1055;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:transform .18s var(--vt-e-decelerate),box-shadow .18s,background .18s}
.vtrain:hover{transform:translateY(-2px);background:var(--vt-primary);color:var(--vt-on-primary);box-shadow:var(--vt-e3)}
.vtrain:focus-visible{outline:none;box-shadow:var(--vt-focus-lg)}
.vtrain-tip{position:absolute;inset-inline-end:calc(100% + 10px);white-space:nowrap;background:var(--vt-s4);
  color:var(--vt-text);font-size:.74rem;font-weight:600;padding:5px 10px;border-radius:8px;box-shadow:var(--vt-e2);
  opacity:0;pointer-events:none;transition:opacity .15s}
.vtrain:hover .vtrain-tip,.vtrain:focus-visible .vtrain-tip{opacity:1}
@media (max-width:700px){.vtrain{width:44px;height:44px;inset-block-end:18px;inset-inline-end:76px}.vtrain-tip{display:none}}
@media print{.vtrain{display:none}}

/* sign-in: the other ways in live behind one button instead of crowding the form */
.auth-fab{position:fixed;inset-block-end:22px;inset-inline-start:22px;z-index:60}
.auth-fab-btn{width:52px;height:52px;border-radius:50%;border:1px solid var(--vt-line);background:var(--vt-s1);
  color:var(--vt-primary);font-size:1.1rem;box-shadow:var(--vt-e2);cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:transform .18s var(--vt-e-decelerate),box-shadow .18s}
.auth-fab-btn:hover{transform:translateY(-2px);box-shadow:var(--vt-e3)}
.auth-fab-btn:focus-visible{outline:none;box-shadow:var(--vt-focus-lg)}
.auth-fab-menu{position:absolute;inset-block-end:calc(100% + 10px);inset-inline-start:0;min-width:244px;
  background:var(--vt-s1);border:1px solid var(--vt-line);border-radius:var(--vt-r-lg);box-shadow:var(--vt-e4);
  padding:6px;display:none;animation:vtRise var(--vt-d-base) var(--vt-e-decelerate) backwards}
.auth-fab.open .auth-fab-menu{display:block}
.auth-fab.open .auth-fab-btn{transform:rotate(90deg)}
.auth-fab-menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;
  color:var(--vt-text);text-decoration:none;font-size:.86rem;font-weight:600}
.auth-fab-menu a:hover{background:var(--vt-hover);color:var(--vt-primary)}
.auth-fab-menu a i{width:20px;text-align:center;color:var(--vt-text-muted)}
.auth-fab-menu a:hover i{color:var(--vt-primary)}
.auth-fab-menu .sep{height:1px;background:var(--vt-line);margin:5px 8px}
.auth-fab-menu small{display:block;font-weight:500;font-size:.72rem;color:var(--vt-text-muted)}