/* =====================================================================
   MedX v6 "Clinical" theme layer — loaded LAST on every page.
   Navy frame (menu, admin band) · teal actions · white cards on a cool canvas.
   Only restyles: no markup changes are needed, every page keeps working with JS off.
   ===================================================================== */

/* ---------------- Base ---------------- */
body { background: var(--c-bg); letter-spacing: .002em; }
h1, h2, h3, .brand__name, .tile__label, .side__clinic b, .task__head h1, .done h2 { font-family: var(--font-display); letter-spacing: -.006em; word-spacing: .06em; }
h1, .home__hello h1 { letter-spacing: -.02em; word-spacing: .04em; }
h1 { font-weight: 800; }
h2, h3 { font-weight: 750; }
.eyebrow { font-family: var(--font-display); font-weight: 700; letter-spacing: .01em; color: var(--blue-700); }
.page-desc { color: var(--c-text-2); }
::selection { background: var(--blue-200); }

/* ---------------- Buttons ---------------- */
.btn { border-radius: var(--r-md); font-weight: 700; letter-spacing: .005em; transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--g-brand); border-color: transparent; box-shadow: var(--shadow-glow), inset 0 1px 0 rgba(255, 255, 255, .14); }
.btn--primary:hover { background: linear-gradient(135deg, #0f8a7d, #0b6359 60%, #0a4f57); border-color: transparent; box-shadow: 0 14px 30px -12px rgba(13, 122, 112, .7); }
:root[data-theme="dark"] .btn--primary { background: var(--blue-500); color: var(--c-on-primary); }
.btn--soft { background: var(--blue-100); color: var(--blue-800); }
.btn--ghost:hover { background: var(--blue-50); }
.btn-group .btn:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.btn-group .btn:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }

/* ---------------- Forms ---------------- */
.input, .select, .textarea { border-radius: var(--r-md); background-color: var(--c-surface); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--blue-500); box-shadow: var(--focus); }
.field > label, .label { font-family: var(--font-display); font-size: 13.5px; font-weight: 700; color: var(--c-text-2); }
.segmented { border-radius: var(--r-md); background: var(--c-surface-3); }
.segmented span { border-radius: 8px; }
.segmented input:checked + span { color: var(--blue-800); box-shadow: 0 1px 3px rgba(15, 27, 45, .12); }
.chip.is-on, .chip-check input:checked + .chip { background: var(--blue-50); border-color: var(--blue-500); color: var(--blue-800); }

/* ---------------- Cards, tables, tabs ---------------- */
.card { border-radius: var(--r-xl); border-color: var(--c-border); box-shadow: var(--shadow-sm); }
a.card:hover, a.kpi:hover, .token-card:hover { border-color: var(--blue-300); box-shadow: var(--shadow-md); }
.card__header { border-bottom-color: var(--c-border); }
.card__header h2, .card__header h3 { font-size: 16.5px; }
.card--accent { border-left: 0; box-shadow: inset 4px 0 0 var(--blue-500), var(--shadow-sm); }
.table th { font-family: var(--font-display); font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-3); background: var(--c-surface-2); }
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover { background: var(--blue-50); }
.kpi__value { font-family: var(--font-display); letter-spacing: -.02em; }
.avatar { background: var(--blue-100); color: var(--blue-800); font-family: var(--font-display); }
.modal__box, .find-dlg__box { border-radius: 20px; }
.modal__backdrop, .sheet { backdrop-filter: blur(3px); }
.alert { border-radius: var(--r-lg); }
.pill, .tag { font-family: var(--font-display); }

/* ---------------- Top bar (task screens) ---------------- */
.appbar { background: var(--c-surface-glass); backdrop-filter: saturate(1.4) blur(10px); border-bottom-color: var(--c-border); }
.appbar__task { font-family: var(--font-display); word-spacing: .06em; }
.appbar__mark { background: var(--brand-mark); box-shadow: 0 6px 16px -6px rgba(20, 184, 166, .7), inset 0 1px 0 rgba(255, 255, 255, .25); font-family: var(--font-display); }
.appbar__search, .appbar__menu { border-radius: var(--r-md); }

/* =====================================================================
   Navy side menu (workforce app)
   ===================================================================== */
.side { background: var(--g-navy); border-right: 0; color: var(--c-side-text); box-shadow: 1px 0 0 rgba(7, 19, 36, .6), 8px 0 32px -18px rgba(7, 19, 36, .55); }
.side__head { height: 76px; border-bottom-color: var(--c-side-line); }
.side__brand { color: #fff; }
.side__brand:hover .appbar__mark { box-shadow: 0 0 0 3px rgba(94, 234, 212, .25); }
.side__clinic b { color: #fff; font-size: 15px; }
.side__clinic span { color: var(--navy-300); }
.side__scroll { scrollbar-color: rgba(255, 255, 255, .14) transparent; padding: 14px 12px; }
.side__label { padding: 16px 12px 6px; font-family: var(--font-display); font-size: 11px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: #6f87a6; }
.side__label [lang="ur"] { text-transform: none; letter-spacing: 0; font-size: 13px; }
.side__item { color: var(--c-side-text); font-weight: 600; border-radius: 10px; transition: background var(--t-fast), color var(--t-fast); }
.side__item:hover { background: var(--c-side-hover); color: #fff; }
.side__item:focus-visible { outline-color: #5eead4; }
.side__item .tile__icon { background: rgba(255, 255, 255, .06); color: #cbd5e1; box-shadow: none; transition: background var(--t-fast); }
.side .tile__icon.cat-desk { color: var(--cat-desk-nav); background: rgba(143, 181, 255, .10); }
.side .tile__icon.cat-care { color: var(--cat-care-nav); background: rgba(94, 234, 212, .10); }
.side .tile__icon.cat-lab { color: var(--cat-lab-nav); background: rgba(196, 181, 253, .10); }
.side .tile__icon.cat-pharm { color: var(--cat-pharm-nav); background: rgba(252, 211, 77, .10); }
.side .tile__icon.cat-money { color: var(--cat-money-nav); background: rgba(134, 239, 172, .10); }
.side .tile__icon.cat-manage { color: var(--cat-manage-nav); background: rgba(203, 213, 225, .10); }
.side__item--home .tile__icon, .side__item--search .tile__icon, .side__more > summary .tile__icon { background: rgba(255, 255, 255, .07); color: #dbe5f1; }
.side__item[aria-current="page"] { background: linear-gradient(90deg, rgba(45, 212, 191, .20), rgba(45, 212, 191, .06)); color: #fff; font-weight: 750; box-shadow: inset 0 0 0 1px rgba(94, 234, 212, .16); }
.side__item[aria-current="page"]::before { left: -12px; background: #2dd4bf; box-shadow: 0 0 12px rgba(45, 212, 191, .8); }
.side__item[aria-current="page"] .tile__icon { background: rgba(45, 212, 191, .2); color: #99f6e4; }
.side__more { border-top-color: var(--c-side-line); }
.side__foot { border-top-color: var(--c-side-line); background: rgba(0, 0, 0, .12); }
.side__kbd { border-color: rgba(255, 255, 255, .18); color: var(--navy-300); background: rgba(255, 255, 255, .04); }
.side .segmented { background: rgba(255, 255, 255, .06); border-color: var(--c-side-line); }
.side .segmented span { color: var(--navy-300); }
.side .segmented input:checked + span { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: none; }
.side__shrink { color: var(--navy-300); }
.side__shrink:hover { background: var(--c-side-hover); color: #fff; }
.side .person-chip { color: #fff; }
.side .person-chip:hover, .side .menu[open] > .person-chip { background: var(--c-side-hover); }
.side .person-chip__text b { color: #fff; }
.side .person-chip__text span { color: var(--navy-300); }
.side .avatar { background: var(--brand-mark); color: #fff; }
.side .menu__pop { color: var(--c-text); }
.side:has(.side__toggle:checked) .side__label { background: var(--c-side-line); }
.side__close { background: rgba(255, 255, 255, .08); border-color: var(--c-side-line); color: #fff; }

/* =====================================================================
   Home: a hero band + cards
   ===================================================================== */
.home { padding: 36px 32px 64px; }
.home::before { width: auto; height: 198px; left: 24px; right: 24px; top: 20px; border-radius: 26px; opacity: 1;
  background:
    radial-gradient(600px 260px at 88% -10%, rgba(45, 212, 191, .38), transparent 60%),
    radial-gradient(420px 220px at 10% 120%, rgba(59, 130, 246, .28), transparent 60%),
    linear-gradient(120deg, #0b1b30 0%, #10324a 55%, #0d5c5c 100%); }
.home::after { width: 300px; height: 198px; left: auto; right: 24px; top: 20px; bottom: auto; border-radius: 0 26px 26px 0; opacity: .5;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, .22) 1.5px, transparent 2px) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%); }
.home__in { max-width: 1080px; gap: 24px; }
.home__hello { padding: 8px 8px 0; }
.home__hello .eyebrow { color: #7fe0d3; font-size: 14px; }
.home__hello h1 { color: #fff; font-size: 36px; }
.home__search { height: 58px; border-radius: 16px; border: 1px solid transparent; box-shadow: 0 18px 40px -18px rgba(7, 19, 36, .55), 0 2px 6px rgba(7, 19, 36, .12); }
.home__search:hover { border-color: var(--blue-300); }
.home__search kbd { border-radius: 8px; background: var(--c-surface-2); }

.tiles { gap: 18px; margin-top: 18px; }
.tile { min-height: 190px; padding: 22px; border-radius: 20px; border-color: var(--c-border); box-shadow: var(--shadow-sm); overflow: hidden; }
.tile::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--tile-ink, var(--blue-500)); opacity: 0; transition: opacity var(--t-fast); }
.tile:hover { border-color: var(--c-border); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.tile:hover::before { opacity: 1; }
.cat-desk { --tile-ink: var(--cat-desk-fg); } .cat-care { --tile-ink: var(--cat-care-fg); } .cat-lab { --tile-ink: var(--cat-lab-fg); }
.cat-pharm { --tile-ink: var(--cat-pharm-fg); } .cat-money { --tile-ink: var(--cat-money-fg); } .cat-manage { --tile-ink: var(--cat-manage-fg); }
.tile__icon { width: 58px; height: 58px; border-radius: 16px; box-shadow: none; }
.tile__icon svg { width: 38px; height: 38px; }
.tile__label { font-size: 17.5px; font-weight: 750; }
.tile__go { box-sizing: border-box; width: 34px; height: 34px; padding: 8px; right: 18px; bottom: 20px; border-radius: 50%; background: var(--c-surface-3); color: var(--c-text-2); }
.tile:hover .tile__go { background: var(--c-primary); color: #fff; }
.tile__count { border-radius: 8px; font-family: var(--font-display); height: 28px; }
.tile__count--crit { background: var(--st-crit); }
/* The lead card: teal gradient, white text */
.tile--lead { background: linear-gradient(130deg, #0d7a70 0%, #0b6359 45%, #0e4a63 100%); border-color: transparent; color: #fff; box-shadow: 0 22px 44px -22px rgba(13, 122, 112, .8); }
.tile--lead::after { content: ""; position: absolute; right: -60px; bottom: -90px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 65%); pointer-events: none; }
.tile--lead::before { display: none; }
.tile--lead .tile__icon { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.tile--lead .tile__hint { color: rgba(255, 255, 255, .82); }
.tile--lead .tile__count { background: rgba(255, 255, 255, .16); color: #fff; }
.tile--lead .tile__count--crit { background: #fff; color: var(--c-danger); }
.tile--lead .tile__go { background: rgba(255, 255, 255, .16); color: #fff; }
.tile--lead:hover .tile__go { background: #fff; color: var(--blue-700); }
.tile--more { border: 1.5px dashed var(--c-border-strong); background: rgba(255, 255, 255, .4); }
.tile--more:hover { border-color: var(--blue-400); background: var(--c-surface); }

/* =====================================================================
   Task screens
   ===================================================================== */
.task { padding-top: 32px; }
.task__head h1 { font-size: 30px; }
.steps { font-family: var(--font-display); }
.steps__dots i { height: 6px; background: var(--c-border); }
.steps__dots i.is-on { background: var(--g-brand); }
.actionbar { border-radius: 18px; border-color: var(--c-border); background: var(--c-surface-glass); backdrop-filter: blur(12px) saturate(1.3); box-shadow: 0 16px 40px -20px rgba(15, 27, 45, .35); }
.pick-list { border-radius: 18px; box-shadow: var(--shadow-sm); }
.pick { transition: background var(--t-fast); }
.pick:has(input:checked) { background: var(--blue-50); box-shadow: inset 4px 0 0 var(--blue-500); }
.done { border-radius: 24px; box-shadow: var(--shadow-md); padding: 48px 28px; background:
  radial-gradient(500px 200px at 50% -40px, rgba(45, 212, 191, .16), transparent 70%), var(--c-surface); }
.done__check { background: linear-gradient(135deg, #22c55e, #157347); box-shadow: 0 0 0 10px rgba(34, 197, 94, .12), 0 14px 30px -12px rgba(21, 115, 71, .7); }
.find-item:hover, .find-item.is-sel { background: var(--blue-50); }
.sheet__panel { border-radius: 26px 26px 0 0; }

/* ---------------- Phone bottom bar ---------------- */
@media (max-width: 640px) {
  .home { padding: 24px 14px 40px; }
  .home::before { left: 10px; right: 10px; top: 10px; height: 200px; border-radius: 20px; }
  .home::after { display: none; }
  .home__hello h1 { font-size: 26px; }
  .tile, .tile--lead { min-height: 0; padding: 14px 54px 14px 14px; border-radius: 18px; }
  .tile--lead { background: linear-gradient(130deg, #0d7a70, #0e4a63); }
  .tile__go { width: 30px; height: 30px; padding: 7px; top: 50%; bottom: auto; right: 12px; margin-top: -15px; }
  .tile__icon { width: 52px; height: 52px; }
  .tile__icon svg { width: 34px; height: 34px; }
  .side { box-shadow: 0 0 0 100vmax rgba(7, 19, 36, .55); }
  .bar { background: var(--c-surface-glass); backdrop-filter: blur(12px); }
  .bar__item[aria-current="page"], .bar__item--more[data-phone-current] { background: var(--blue-50); }
}

/* =====================================================================
   Sign-in pages already in the app (workforce + admin chooser)
   ===================================================================== */
.signin__art { background: var(--g-navy) !important; color: #fff !important; }
.signin__art::before { background: radial-gradient(circle, rgba(45, 212, 191, .35), transparent 65%); opacity: 1; width: 620px; height: 620px; }
.signin__art :is(h1, h2, h3, b, .brand__name) { color: #fff !important; }
.signin__art :is(p, .brand__sub, .page-desc, .help-tips) { color: rgba(226, 236, 248, .82) !important; }
.signin__art .help-tips .icon { color: #5eead4; }
.signin__art .brand__logo { background: var(--brand-mark) !important; }
.who-card { border-radius: 14px; border-color: var(--c-border); background: var(--c-surface); transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.who-card:hover { border-color: var(--blue-300); background: var(--c-surface); box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* =====================================================================
   Admin: navy band + navy side menu (an L-shaped frame)
   ===================================================================== */
.adminbar { background: var(--navy-900); border-bottom: 1px solid var(--c-side-line); }
:root[data-theme="dark"] .adminbar { background: #060e1a; }
.adminbar__brand { font-family: var(--font-display); word-spacing: .06em; }
.adminbar__mark { background: var(--brand-mark); box-shadow: 0 6px 16px -6px rgba(20, 184, 166, .7); }
.adminbar__ctx { background: rgba(45, 212, 191, .12); color: #99f6e4; box-shadow: inset 0 0 0 1px rgba(94, 234, 212, .2); }
.adminbar__link { border-radius: var(--r-md); border-color: rgba(255, 255, 255, .16); }
.adminbar .avatar { background: var(--brand-mark); }
.adminnav { background: linear-gradient(180deg, var(--navy-900), var(--navy-950)); border-right: 0; }
:root[data-theme="dark"] .adminnav { background: #060e1a; }
.adminnav__head { font-family: var(--font-display); font-size: 11px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: #6f87a6; }
.adminnav__item { color: var(--c-side-text); font-weight: 600; }
.adminnav__item .icon { background: rgba(255, 255, 255, .06); color: #cbd5e1; }
.adminnav__item:hover { background: var(--c-side-hover); color: #fff; }
.adminnav__item[aria-current="page"] { background: linear-gradient(90deg, rgba(45, 212, 191, .20), rgba(45, 212, 191, .06)); color: #fff; box-shadow: inset 0 0 0 1px rgba(94, 234, 212, .16); }
.adminnav__item[aria-current="page"] .icon { background: rgba(45, 212, 191, .2); color: #99f6e4; }
.adminnav__item[aria-current="page"]::before { background: #2dd4bf; box-shadow: 0 0 12px rgba(45, 212, 191, .8); }
@media (max-width: 1000px) {
  .adminnav { background: var(--navy-900); border-bottom: 1px solid var(--c-side-line); }
  .adminnav__item { border-color: var(--c-side-line); }
  .adminnav__item[aria-current="page"] { border-color: rgba(94, 234, 212, .4); }
}
.admin-main { padding-top: 30px; }
.crumb a { color: var(--blue-700); }
.tiles--admin .tile { min-height: 160px; }
.check-item.is-next { background: var(--blue-50); box-shadow: inset 4px 0 0 var(--blue-500); }
.progress-ring { background: conic-gradient(var(--blue-500) calc(var(--p) * 1%), var(--c-surface-3) 0); }

/* =====================================================================
   Patient portal
   ===================================================================== */
.portal { background: var(--c-bg); }