/* ──────────────────────────────────────────────────────────────────────────
   shared-app.css — first-principles token overrides
   Lifted from the per-page :root blocks of the 9 in-app doctor pages
   (index, patients, records, prescription, referral, payments, settings,
    calendar, clinical). Generated 2026-04-18.

   Wins over shared.css + ui/elan-ui.css by being loaded AFTER them.
   ONLY imported by the 9 in-app pages. Admin pages (admin-*.html) keep
   the legacy teal palette + Heebo and must NOT import this file.

   Locked design constraints (decisions_snapshot_2026-04-18):
   - Type stack: -apple-system, "SF Hebrew", "Assistant", sans-serif (no Heebo)
   - No teal as UI brand color — primary = #1c1c1e near-black
   - Destructive = #d70015
   - No shadows, no gradients
   ────────────────────────────────────────────────────────────────────────── */

:root {
  /* Two-tier grey system (2026-04-20) — replaces near-black #1c1c1e.
     --mc-ink  → text / icon ink color (slightly softer than near-black)
     --mc-dark-surface → dark background fills (scrims, toasts, dark buttons) */
  --mc-ink: #1e1e22;
  --mc-ink-strong: #1e1e22;
  --mc-dark-surface: #2a2a30;

  /* mc-* tokens (primary shared-css namespace) */
  --mc-font: -apple-system, BlinkMacSystemFont, "SF Hebrew", "Assistant", system-ui, sans-serif;
  --mc-primary: #2da696;
  --mc-dark: #207d73;
  --mc-light: #3ac2b1;
  --mc-pale: #f2f2f7;
  --mc-text: #1e1e22;
  --mc-text-secondary: #636366;
  --mc-text-tertiary: #8e8e93;
  --mc-border: rgba(60,60,67,0.18);
  --mc-shadow: none;
  --mc-shadow-lg: none;
  --mc-error: #d70015;
  --mc-warning: #ff9500;
  --mc-bg: #f9f9fb;

  /* elan-* aliases (legacy token namespace) */
  --elan-green: #2da696;
  --elan-green-dark: #207d73;
  --elan-green-light: #f2f2f7;
  --elan-teal: #2da696;
  --elan-red: #d70015;
  --elan-red-light: #f2f2f7;
  --elan-text: #1e1e22;
  --elan-text-dark: #1e1e22;
  --elan-text-light: #636366;
  --elan-text-muted: #8e8e93;
  --elan-border: rgba(60,60,67,0.18);
  --elan-border-light: rgba(60,60,67,0.12);
  --elan-bg: #f9f9fb;
  --elan-font: -apple-system, BlinkMacSystemFont, "SF Hebrew", "Assistant", system-ui, sans-serif;
}

/* Type stack + ink color baseline */
html, body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Hebrew", "Assistant", system-ui, sans-serif !important;
  color: var(--mc-text);
}

/* Kill any inline linear-gradient decoration inherited from legacy markup */
[style*="linear-gradient"] { background-image: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   Contrast guard rails — 2026-04-18 audit fix
   ────────────────────────────────────────────────────────────────────────
   When shared-app.css flipped --mc-primary / --elan-green / --elan-teal to
   #1c1c1e (near-black), several legacy button classes suddenly had near-black
   text on near-black backgrounds (WCAG fail). These rules restore contrast
   without touching each of the 13 in-app pages individually.
   Safe because they only re-state the canonical first-principles palette:
     PRIMARY    → bg #1c1c1e, color #fff
     SECONDARY  → bg #fff, color #1c1c1e, 0.5px border
     GHOST/TEXT → transparent bg, ink text
     DESTRUCTIVE→ bg #d70015 OR ink text on transparent (no red ink bg
                  trap — legacy uses both patterns).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── PRIMARY (filled) — white text on ink ─────────────────────────────── */
.btn-primary,
.mc-btn-primary,
.top-btn-primary,
.cl-btn-primary,
button.btn.btn-primary,
a.btn.btn-primary {
  background: #2da696 !important;
  color: #ffffff !important;
  border-color: #2da696 !important;
}
.btn-primary:hover:not(:disabled),
.mc-btn-primary:hover:not(:disabled),
.top-btn-primary:hover:not(:disabled),
.cl-btn-primary:hover:not(:disabled) {
  background: #207d73 !important;
  border-color: #207d73 !important;
  color: #ffffff !important;
}
.btn-primary:disabled,
.mc-btn-primary:disabled,
.cl-btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── SECONDARY / OUTLINE (ghost) — ink text on white ──────────────────── */
.btn-outline,
.btn-secondary,
.mc-btn-ghost,
.mc-btn-outline,
.top-btn-ghost,
.cl-btn-ghost {
  background: #ffffff !important;
  color: var(--mc-ink) !important;
  border: 0.5px solid rgba(60,60,67,0.29) !important;
}
.btn-outline:hover:not(:disabled),
.btn-secondary:hover:not(:disabled),
.mc-btn-ghost:hover:not(:disabled),
.mc-btn-outline:hover:not(:disabled),
.top-btn-ghost:hover:not(:disabled),
.cl-btn-ghost:hover:not(:disabled) {
  background: #f2f2f7 !important;
  border-color: var(--mc-ink) !important;
  color: var(--mc-ink) !important;
}

/* ── TERTIARY / GHOST (no-border text button) ─────────────────────────── */
.btn-ghost {
  background: transparent !important;
  color: var(--mc-ink) !important;
  border: 0.5px solid transparent !important;
}
.btn-ghost:hover:not(:disabled) {
  background: rgba(42,42,48,0.06) !important;
  color: var(--mc-ink) !important;
}

/* ── DESTRUCTIVE (mc-btn-danger stays outlined ink-red) ───────────────── */
.mc-btn-danger {
  background: transparent !important;
  color: #d70015 !important;
  border: 0.5px solid #d70015 !important;
}
.mc-btn-danger:hover:not(:disabled) {
  background: rgba(215,0,21,0.06) !important;
}

/* ── Belt-and-braces: inline styles that used flipped tokens ──────────
   Any element whose inline style sets background to a token that flipped
   to ink gets white text forced. This catches:
     style="background:var(--elan-green);..."      (no color specified)
     style="background:var(--elan-teal);..."       (no color specified)
     style="background:var(--mc-primary);..."      (no color specified)
     style="background:var(--elan-text);..."       (already ink)
   ─────────────────────────────────────────────────────────────────────── */
button[style*="background:var(--elan-green)"],
button[style*="background: var(--elan-green)"],
button[style*="background:var(--elan-teal)"],
button[style*="background: var(--elan-teal)"],
button[style*="background:var(--mc-primary)"],
button[style*="background: var(--mc-primary)"],
button[style*="background:var(--elan-text)"],
button[style*="background: var(--elan-text)"],
a[style*="background:var(--elan-green)"],
a[style*="background: var(--elan-green)"],
a[style*="background:var(--elan-teal)"],
a[style*="background: var(--elan-teal)"] {
  color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Page-specific button classes — contrast guard rails extension
   ────────────────────────────────────────────────────────────────────────
   2026-04-18 follow-up: the first guard-rail pass covered .btn-*, .mc-btn-*,
   .top-btn-*, .cl-btn-*. Several pages use their own class names for the
   same PRIMARY/SECONDARY/DESTRUCTIVE roles — these were missed and went
   black-on-black when --mc-primary flipped. Named pages and classes:
     record-entry.html → .action-icon-btn.{submit,draft,print,delete}, .pay-btn
     referral.html     → .doc-action-btn(.primary)
     document-flow-mockup → .action-btn.{primary,ghost}
     admin-tickets/feedback → .action-btn.{teal,btn-approve,btn-reject}
   Safe because they only re-state the canonical palette.
   ══════════════════════════════════════════════════════════════════════════ */

/* PRIMARY on record-entry (submit = transmit/dispatch) */
.action-icon-btn.submit,
.doc-action-btn.primary,
.action-btn.primary,
.action-btn.teal,
button.action-btn.btn-approve {
  background: #2da696 !important;
  color: #ffffff !important;
  border: 0.5px solid #2da696 !important;
}
.action-icon-btn.submit:hover:not(:disabled),
.doc-action-btn.primary:hover:not(:disabled),
.action-btn.primary:hover:not(:disabled),
.action-btn.teal:hover:not(:disabled),
button.action-btn.btn-approve:hover:not(:disabled) {
  background: #207d73 !important;
  border-color: #207d73 !important;
  color: #ffffff !important;
}

/* SECONDARY / neutral on record-entry, referral, document-flow */
.action-icon-btn.draft,
.action-icon-btn.print,
.doc-action-btn,
.action-btn,
.action-btn.ghost,
.pay-btn {
  background: #ffffff !important;
  color: var(--mc-ink) !important;
  border: 0.5px solid rgba(60,60,67,0.29) !important;
}
/* Selected pay-btn visual: teal fill, white text, teal border */
.pay-btn.selected {
  background: #2da696 !important;
  color: #ffffff !important;
  border: 0.5px solid #2da696 !important;
}
.pay-btn.selected:hover:not(:disabled) {
  background: #207d73 !important;
  border-color: #207d73 !important;
  color: #ffffff !important;
}

/* DESTRUCTIVE — delete / reject, red text on white */
.action-icon-btn.delete,
button.action-btn.btn-reject {
  background: #ffffff !important;
  color: #d70015 !important;
  border: 0.5px solid rgba(60,60,67,0.29) !important;
}
.action-icon-btn.delete:hover:not(:disabled),
button.action-btn.btn-reject:hover:not(:disabled) {
  background: #f2f2f7 !important;
  border-color: #d70015 !important;
  color: #d70015 !important;
}

/* re-apply primary AFTER the secondary reset — specificity parity,
   but primary selectors use the variant class so they still win cleanly */
.action-icon-btn.submit,
.doc-action-btn.primary,
.action-btn.primary {
  background: #2da696 !important;
  color: #ffffff !important;
  border-color: #2da696 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Universal button text centering — 2026-04-18
   ────────────────────────────────────────────────────────────────────────
   body { direction: rtl; text-align: right } in shared.css leaks a
   right-aligned baseline onto any <button> that is display:flex /
   inline-flex without explicit justify-content:center. Browsers only
   center text in buttons when display is the default (inline-block).
   This rule forces both text-align and flex main-axis centering on every
   button and common .btn-like / .*-btn / .btn-* class used in the app.
   We scope it to classes we've audited so we don't clobber intentional
   icon-left / left-align variants (nav items, list rows, menu-sheet
   entries) which don't carry "btn" in their class name.
   ══════════════════════════════════════════════════════════════════════════ */
button,
.btn,
[class*="btn-"],
[class$="-btn"],
[class*="-btn "],
.pay-btn,
.action-icon-btn,
.doc-action-btn,
.action-btn {
  text-align: center !important;
  justify-content: center;
  align-items: center;
}

/* Don't center buttons that were explicitly sized full-width and ALSO
   opt-in to left-aligned content via .btn-block-start or aria-role=menuitem.
   (Kept as a safety hatch — no current page uses these, so no-op today.) */
.btn-block-start,
[role="menuitem"] {
  text-align: start !important;
  justify-content: flex-start !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   First-principles button dimension normalization — 2026-04-18
   ────────────────────────────────────────────────────────────────────────
   Canonical sizes across all in-app pages. Extends the existing contrast
   guard rails (which only enforce color + border). These rules enforce
   min-height, padding, font-size, font-weight, border-radius per role.

   Canonical table:
     PRIMARY      → 44px / 0 20px / 15px / 500 / 10px
     SECONDARY    → 40px / 0 16px / 14px / 500 / 10px
     GHOST        → 40px / 0 12px / 14px / 500 / 10px (no bg, no border)
     DESTRUCTIVE  → same dims as PRIMARY (bg #d70015 — color guard rail
                    already leaves outline variant .mc-btn-danger alone)
     ROW BUTTON   → 32px / 0 12px / 13px / 500 / 10px (smaller allowed)

   Explicitly NOT touched: menu-sheet.js corner-dots, feedback-widget FAB,
   icon-only 48x48 action row on record-entry/prescription/referral
   (those use their own specific classes / inline sizing).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── PRIMARY CTA dimensions ────────────────────────────────────────────── */
.btn-primary,
.mc-btn-primary,
.top-btn-primary,
.cl-btn-primary,
button.btn.btn-primary,
a.btn.btn-primary,
.action-btn.primary,
.doc-action-btn.primary,
.action-btn.teal,
button.action-btn.btn-approve {
  min-height: 44px !important;
  padding: 0 20px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}

/* ── SECONDARY / OUTLINE dimensions ────────────────────────────────────── */
.btn-outline,
.btn-secondary,
.mc-btn-outline,
.top-btn-ghost,
.cl-btn-ghost,
.doc-action-btn,
.action-btn,
.pay-btn {
  min-height: 40px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}

/* ── GHOST / text-only dimensions ──────────────────────────────────────── */
.btn-ghost,
.mc-btn-ghost,
.action-btn.ghost {
  min-height: 40px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}

/* ── DESTRUCTIVE dimensions (filled red — PRIMARY-sized) ──────────────── */
.btn-danger,
button.action-btn.btn-reject {
  min-height: 44px !important;
  padding: 0 20px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}
/* Outline-variant destructive (mc-btn-danger) keeps SECONDARY dims */
.mc-btn-danger {
  min-height: 40px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}

/* ── TABLE ROW buttons — smaller allowed ──────────────────────────────── */
.row-btn,
.row-btn-danger {
  min-height: 32px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}

/* ── Re-primary after secondary reset — specificity parity for combined
      selectors (.action-btn.primary hit by .action-btn secondary rule) ── */
.action-btn.primary,
.doc-action-btn.primary,
.action-btn.teal,
button.action-btn.btn-approve {
  min-height: 44px !important;
  padding: 0 20px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
}
/* Ghost variant must beat the generic .action-btn secondary rule */
.action-btn.ghost {
  min-height: 40px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   mc-chrome tokens (unified doctor-facing chrome)
   Added 2026-04-20 for the new top+bottom grey-strip layout.
   Consumed by /js/components/mc-chrome.js. Safe to inherit site-wide.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --mc-strip-bg: #ececf0;
  --mc-strip-line: rgba(0,0,0,.06);
  --mc-btn: 52px;
  --mc-btn-ico: 24px;
  --mc-strip: 70px;
  --mc-teal-hov: #26907f;
  --mc-subheader-bg: rgba(45,166,150,.08);
  --mc-subheader-line: rgba(45,166,150,.18);
  --mc-subheader-h: 38px;
  /* Operating-room briefing band — stacks below sub-header, white status line */
  --mc-brief-h: 32px;
}
body.mc-chrome-active{
  padding-top: var(--mc-strip);
  padding-bottom: var(--mc-strip);
}
body.mc-chrome-active.mc-chrome-subheader-on{
  padding-top: calc(var(--mc-strip) + var(--mc-subheader-h));
}
/* Brief band — assumes sub-header is present (every in-app page has one).
   Placed after the subheader-on rule so equal-specificity cascade wins. */
body.mc-chrome-active.mc-chrome-brief-on{
  padding-top: calc(var(--mc-strip, 70px) + var(--mc-subheader-h, 38px) + var(--mc-brief-h, 32px));
}
/* Mobile: brief band compresses to 28px */
@media (max-width: 480px){
  :root{ --mc-brief-h: 28px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Paper-First mode · global overrides (2026-04-21)
   ─────────────────────────────────────────────────────────────────────────
   Activated by body.paper-first class. Triggered from mc-chrome.js based on
   localStorage.mc_practice_mode === 'paper' or ?practice_mode=paper URL
   param, or seat/me response practice_mode field. Paper-First is a compliance
   envelope targeting doctors who keep paper records and just need a minimum
   digital trail. All AI features are stripped. Menu is filtered to 6 items.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Bump base type for readability (older doctor audience) */
body.paper-first{
  font-size: 17px;
}

/* Kill the idle triad halo — distraction in op-room brief-free flow */
body.paper-first .mc-chrome-triad .mc-chrome-btn.is-primary{
  animation: none !important;
}

/* Brief band hidden in Paper-First — simpler is the whole point */
body.paper-first .mc-chrome-brief{
  display: none !important;
}

/* Restore the 108px top inset since brief-on adds brief height we're hiding */
body.paper-first.mc-chrome-active.mc-chrome-brief-on{
  padding-top: calc(var(--mc-strip, 70px) + var(--mc-subheader-h, 38px));
}

/* Pill-shaped slot buttons when labelMode=inline (or body.paper-first).
   The mc-chrome-slot-btn itself is the button — style it wider with a label. */
body.paper-first .mc-chrome-slot-btn.has-inline-label{
  width: auto;
  min-width: 60px;
  height: 60px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  gap: 6px;
}
body.paper-first .mc-chrome-slot-btn.has-inline-label .slot-label{
  display: inline-block;
  white-space: nowrap;
}
body.paper-first .mc-chrome-slot-btn.has-inline-label svg{
  margin-inline-start: 6px;
}

/* ──────────────────────────────────────────────────────────────────────────
   Shared FHIR-gate — 72px floating circle above bottom-strip.
   Follows the pattern locked in invoice-new.html 2026-04-21. Lifted here
   2026-04-21 so record-entry (Paper-First submit path) + future doc pages
   can reuse the same pristine → checking → sealed morph without duplicating
   80 lines of CSS per file.
   States: pristine (teal border, halo) · checking (teal fill, spinner) ·
   sealed (teal fill + white check) · failed (amber border + red badge).
   Mount via JS into `.mc-chrome-strip.bot` with position:absolute;top:-36px.
   ────────────────────────────────────────────────────────────────────────── */
.fhir-gate-shared{
  position:absolute;left:50%;top:-36px;transform:translateX(-50%);
  width:72px;height:72px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1.5px solid #2da696;color:#2da696;
  cursor:pointer;z-index:5;
  transition:background .28s ease, border-color .28s ease, color .28s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 8px 24px rgba(0,0,0,.10);
  -webkit-tap-highlight-color:transparent;
  padding:0;
}
.fhir-gate-shared:hover{transform:translateX(-50%) translateY(-1px) scale(1.04)}
.fhir-gate-shared:active{transform:translateX(-50%) scale(.96);transition-duration:.08s}
.fhir-gate-shared svg{
  width:32px;height:32px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  pointer-events:none;
}
.fhir-gate-shared-label{
  position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);
  font:600 11px/1 -apple-system,"SF Hebrew","Assistant",sans-serif;
  color:#6e6e73;white-space:nowrap;pointer-events:none;
}
.fhir-gate-shared.state-pristine{animation:mcGateHalo 2.6s ease-out infinite}
@keyframes mcGateHalo{
  0%  {box-shadow:0 0 0 0   rgba(45,166,150,.38),0 8px 24px rgba(0,0,0,.10)}
  60% {box-shadow:0 0 0 14px rgba(45,166,150,0),  0 8px 24px rgba(0,0,0,.10)}
  100%{box-shadow:0 0 0 0   rgba(45,166,150,0),  0 8px 24px rgba(0,0,0,.10)}
}
.fhir-gate-shared.state-checking{
  background:#2da696;color:#fff;border-color:#2da696;animation:none;
}
.fhir-gate-shared.state-checking::before{
  content:"";position:absolute;inset:-6px;
  border:2px dashed rgba(45,166,150,.55);border-radius:999px;
  animation:mcGateSpinner 1.6s linear infinite;pointer-events:none;
}
@keyframes mcGateSpinner{to{transform:rotate(360deg)}}
.fhir-gate-shared.state-sealed{
  background:#2da696;color:#fff;border-color:#2da696;animation:none;
}
.fhir-gate-shared.state-sealed .badge{
  position:absolute;top:-4px;left:-4px;width:22px;height:22px;border-radius:999px;
  background:#fff;color:#2da696;display:flex;align-items:center;justify-content:center;
  border:2px solid #2da696;
}
.fhir-gate-shared.state-sealed .badge svg{width:11px;height:11px;stroke-width:2.4}
.fhir-gate-shared.state-failed{
  background:#fff;color:#ff9500;border-color:#ff9500;animation:none;
}
.fhir-gate-shared.state-failed .fail-badge{
  position:absolute;top:-4px;left:-4px;min-width:22px;height:22px;padding:0 6px;
  border-radius:999px;background:#d70015;color:#fff;
  font:700 11px/22px -apple-system,"SF Hebrew","Assistant",sans-serif;
  text-align:center;border:2px solid #fff;
  font-variant-numeric:tabular-nums;
}
/* print-ready — after Lambda 200 ack. Morphs to printer icon; tap opens
   the browser print dialog. Teal check badge confirms the seal. */
.fhir-gate-shared.state-print-ready{
  background:#2da696;color:#fff;border-color:#2da696;animation:none;
}
.fhir-gate-shared.state-print-ready .badge{
  position:absolute;top:-4px;left:-4px;width:22px;height:22px;border-radius:999px;
  background:#fff;color:#2da696;display:flex;align-items:center;justify-content:center;
  border:2px solid #2da696;
}
.fhir-gate-shared.state-print-ready .badge svg{width:11px;height:11px;stroke-width:2.4}