/* MedMax public demo — chrome dock, live-version dialog, guided tour, finale, entry buttons.
   Loaded only when MEDMAX_DEMO_PUBLIC is on (demo_public/_chrome.html and the login page).
   Every overlay is position:fixed, so the host page never shifts. Logical properties keep
   RTL and LTR correct; the few physical coordinates are computed in JS from getBoundingClientRect.
   Stacking: app header 30, sidebar 40/50, demo layers 9300-9500, session modals 9999,
   toasts 10000, boot loader 99999. The live dialog uses showModal() (top layer). */

:root {
  --dt-navy: #07293D;
  --dt-navy-2: #0B3A57;
  --dt-cyan: #00B6E6;
  --dt-cyan-ink: #0083B4;
  --dt-gold: #FFC233;
  --dt-gold-ink: #8A6100;
  --dt-ink: #0F2A3A;
  --dt-muted: #4A6579;
  --dt-line: #DBEDF5;
  --dt-ease: cubic-bezier(.2, .8, .2, 1);
  --dt-dock-h: 52px;
}

/* ── Dock (the "5 of 30+" bar) ───────────────────────────────────────────── */
.dpb {
  position: fixed;
  z-index: 9300;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  max-width: calc(100vw - 24px);
  min-height: var(--dt-dock-h);
  padding-block: 6px;
  padding-inline: 16px 6px;
  border-radius: 999px;
  background: rgba(7, 41, 61, .94);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 18px 44px rgba(7, 41, 61, .32), 0 0 0 1px rgba(0, 182, 230, .28);
  animation: dpbIn .6s var(--dt-ease) both .2s;
}
@keyframes dpbIn { from { opacity: 0; transform: translate(-50%, 16px); } }
.dpb__tag { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--dt-gold); }
.dpb__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--dt-gold); flex: none;
  box-shadow: 0 0 0 0 rgba(255, 194, 51, .6); animation: dpbDot 2.4s ease-out infinite;
}
@keyframes dpbDot { 70% { box-shadow: 0 0 0 7px rgba(255, 194, 51, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 194, 51, 0); } }
.dpb__count { display: inline-flex; align-items: center; gap: 4px; color: #DDF3FB; }
.dpb__count b { font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.dpb__bar {
  display: inline-block; width: 56px; height: 6px; margin-inline-start: 8px; border-radius: 3px;
  background: rgba(255, 255, 255, .16); overflow: hidden; flex: none;
}
.dpb__bar i { display: block; width: 16%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--dt-cyan), var(--dt-gold)); }
/* PDPL notice: inline on wide screens, its own top row in the dock below 1100px. */
.dpb__note {
  padding-inline-start: 10px; border-inline-start: 1px solid rgba(255, 255, 255, .18);
  color: #BFE3F2; font-size: 12px; font-weight: 600;
}
@media (max-width: 1100px) {
  :root { --dt-dock-h: 74px; }
  .dpb { flex-wrap: wrap; justify-content: center; row-gap: 4px; border-radius: 22px; padding-block: 7px 6px; }
  .dpb__note {
    order: -1; flex: 1 0 100%; padding: 0 6px; border: 0; text-align: center;
    white-space: normal; font-size: 11.5px; line-height: 1.35;
  }
}
.dpb__replay {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border: 0; border-radius: 999px;
  background: transparent; color: #CFE7F2; font: inherit; font-weight: 600; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.dpb__replay:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.dpb__ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.dpb__live, .dld__go, .dtour-next, .dtour-go {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border: 0; border-radius: 999px;
  background: var(--dt-gold); color: var(--dt-navy); font: inherit; font-weight: 800; font-size: 13.5px;
  line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(255, 194, 51, .32);
  transition: transform .2s var(--dt-ease), box-shadow .2s, background-color .2s;
}
.dpb__live:hover, .dld__go:hover, .dtour-next:hover, .dtour-go:hover { transform: translateY(-1px); background: #FFCB4F; box-shadow: 0 10px 24px rgba(255, 194, 51, .42); }
.dpb button:focus-visible, .dld :focus-visible, .dtour-bubble :focus-visible, .dtour-finale :focus-visible {
  outline: 3px solid var(--dt-cyan); outline-offset: 2px;
}

/* The dock floats over the page: give the scroll containers room so nothing hides under it. */
html:has(#demo-public-bar) main.overflow-y-auto::after { content: ""; display: block; flex: none; height: calc(var(--dt-dock-h) + 36px); }
html:has(#demo-public-bar) body > .page,
html:has(#demo-public-bar) main.patient-record-main { padding-bottom: calc(var(--dt-dock-h) + 36px); }
/* The private-demo badge says the same thing; in public mode the dock replaces it. */
#medmax-demo-badge { display: none !important; }

/* ── Live-version dialog ─────────────────────────────────────────────────── */
.dld {
  box-sizing: border-box; width: min(440px, calc(100vw - 32px)); max-width: none;
  border: 0; border-radius: 22px; padding: 28px; background: #fff; color: var(--dt-ink);
  text-align: start; box-shadow: 0 30px 80px rgba(7, 41, 61, .35);
}
.dld[open] { animation: dldIn .42s var(--dt-ease) both; }
@keyframes dldIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.dld::backdrop { background: rgba(7, 41, 61, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dld h2 { font-size: 20px; line-height: 1.45; margin: 14px 0 8px; color: var(--dt-navy); font-weight: 800; }
.dld p { margin: 0; color: var(--dt-muted); line-height: 1.85; font-size: 14.5px; }
.dld__icon {
  width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(255, 194, 51, .28), rgba(0, 182, 230, .18)); color: var(--dt-gold-ink);
}
.dld__icon svg { width: 24px; height: 24px; fill: currentColor; }
.dld__acts, .dtf-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.dld__back, .dtf-back {
  border: 1px solid var(--dt-line); background: #fff; border-radius: 999px; padding: 10px 18px;
  cursor: pointer; color: var(--dt-muted); font: inherit; font-weight: 700; font-size: 13.5px;
  transition: border-color .2s, color .2s;
}
.dld__back:hover, .dtf-back:hover { border-color: #A9D8EA; color: var(--dt-navy); }

/* ── Spotlight veil: a rounded hole whose giant spread shadow dims everything else ── */
.dtour-veil {
  position: fixed; top: 0; left: 0; z-index: 9400; width: 0; height: 0;
  border-radius: 14px; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .95), 0 0 0 5px rgba(0, 182, 230, .85), 0 0 0 200vmax rgba(7, 41, 61, .5);
  transition: transform .5s var(--dt-ease), width .5s var(--dt-ease), height .5s var(--dt-ease), opacity .35s ease;
  will-change: transform, width, height;
}
.dtour-veil.is-in { opacity: 1; }
.dtour-veil.is-tracking, .dtour-veil.no-anim { transition: opacity .35s ease; }
.dtour-veil::after {
  content: ""; position: absolute; inset: -5px; border-radius: 18px;
  border: 2px solid rgba(0, 182, 230, .75); animation: dtourPulse 2s var(--dt-ease) infinite;
}
@keyframes dtourPulse { 0% { opacity: .9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.06); } }

/* ── Bubble (spotlight and compact "next step" share one visual language) ── */
.dtour-bubble {
  position: fixed; top: 0; left: 0; z-index: 9402; box-sizing: border-box;
  width: min(340px, calc(100vw - 24px)); padding: 16px 18px 14px;
  border-radius: 18px; background: linear-gradient(160deg, var(--dt-navy-2), var(--dt-navy));
  color: #fff; font-size: 14px; line-height: 1.7; text-align: start;
  box-shadow: 0 24px 54px rgba(7, 41, 61, .42), 0 0 0 1px rgba(0, 182, 230, .4);
  opacity: 0; transition: transform .5s var(--dt-ease), opacity .3s ease;
}
.dtour-bubble.is-in { opacity: 1; }
.dtour-bubble.no-anim { transition: none; }
.dtour-bubble::before {
  content: ""; position: absolute; left: var(--ax, 50%); width: 14px; height: 14px; margin-left: -7px;
  background: var(--dt-navy-2); transform: rotate(45deg); border-radius: 3px;
}
.dtour-bubble[data-side="above"]::before { bottom: -6px; background: var(--dt-navy); }
.dtour-bubble[data-side="below"]::before { top: -6px; }
.dtour-bubble[data-side="float"]::before, .dtour-bubble--nav::before { display: none; }
.dtour-bubble--nav {
  top: auto; left: auto; inset-inline-end: 18px; bottom: calc(var(--dt-dock-h) + 30px + env(safe-area-inset-bottom, 0px));
  width: min(320px, calc(100vw - 24px)); transform: translateY(14px);
}
.dtour-bubble--nav.is-in { transform: none; }
.dtour-cheer {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .1); color: var(--dt-gold); font-weight: 800;
  animation: dtCheer .7s var(--dt-ease) both .15s;
}
.dtour-cheer svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
@keyframes dtCheer { from { opacity: 0; transform: translateY(6px); } }
.dtour-step { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: #7FDDF5; letter-spacing: .01em; }
.dtour-dots { display: inline-flex; align-items: center; gap: 4px; }
.dtour-dots i { display: block; width: 7px; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .22); transition: width .4s var(--dt-ease), background-color .4s; }
.dtour-dots i.is-done { background: var(--dt-gold); }
.dtour-dots i.is-now { width: 20px; background: var(--dt-cyan); }
.dtour-text { margin: 6px 0 12px; font-size: 14.5px; line-height: 1.8; color: #F2FAFD; }
.dtour-acts { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dtour-next, .dtour-go { padding: 8px 16px; font-size: 13px; }
.dtour-go svg, .dtour-next svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .dtour-go svg, [dir="rtl"] .dtour-next svg { transform: scaleX(-1); }
.dtour-skip {
  margin-inline-start: auto; padding: 6px 2px; background: none; border: 0; cursor: pointer;
  color: rgba(255, 255, 255, .62); font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 3px;
}
.dtour-skip:hover { color: #fff; }
.dtour-target { scroll-margin: 96px; }

/* ── Finale ──────────────────────────────────────────────────────────────── */
.dtour-finale {
  position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; padding: 16px;
  background: rgba(7, 41, 61, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .4s ease;
}
.dtour-finale.is-in { opacity: 1; }
.dtf-card {
  box-sizing: border-box; width: 100%; max-width: 680px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto;
  padding: 28px; border-radius: 24px; background: #fff; color: var(--dt-ink); text-align: start;
  box-shadow: 0 40px 100px rgba(7, 41, 61, .4);
  transform: translateY(18px) scale(.97); transition: transform .6s var(--dt-ease);
}
.dtour-finale.is-in .dtf-card { transform: none; }
.dtf-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--dt-cyan-ink); font-weight: 800; font-size: 13px; }
.dtf-kicker svg { width: 16px; height: 16px; fill: var(--dt-gold); }
.dtf-card h2 { font-size: clamp(20px, 3.2vw, 26px); line-height: 1.35; margin: 0 0 6px; color: var(--dt-navy); font-weight: 800; }
.dtf-sub { margin: 0 0 18px; color: var(--dt-muted); line-height: 1.8; font-size: 14.5px; }
.dtf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 8px; }
.dtf-cell {
  display: flex; align-items: center; gap: 8px; min-height: 42px; box-sizing: border-box; padding: 9px 11px;
  border-radius: 12px; background: #F3F8FB; color: #8AA0AE; font-size: 13px; font-weight: 700; line-height: 1.35;
  animation: dtfCell .55s var(--dt-ease) both; animation-delay: calc(var(--i, 0) * 40ms + 200ms);
}
.dtf-cell svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dtf-cell.is-on {
  background: linear-gradient(135deg, rgba(0, 182, 230, .14), rgba(0, 182, 230, .06)); color: var(--dt-cyan-ink);
  box-shadow: inset 0 0 0 1px rgba(0, 182, 230, .35);
  animation-name: dtfCell, dtfGlow; animation-duration: .55s, 1.6s; animation-delay: calc(var(--i, 0) * 40ms + 200ms), calc(var(--i, 0) * 40ms + 700ms);
}
.dtf-cell.dtf-more { justify-content: center; background: var(--dt-navy); color: var(--dt-gold); }
@keyframes dtfCell { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes dtfGlow { 40% { box-shadow: inset 0 0 0 1px rgba(0, 182, 230, .6), 0 0 0 4px rgba(0, 182, 230, .14); } }

/* ── Login page: one-click role entry ────────────────────────────────────── */
.demo-public-entry {
  margin-top: 22px; padding: 20px; border-radius: 20px;
  background: linear-gradient(160deg, rgba(0, 182, 230, .07), rgba(255, 194, 51, .07));
  border: 1px solid var(--dt-line);
}
.demo-public-entry .auth-title { font-size: clamp(1.35rem, 2.6vw, 1.75rem); line-height: 1.3; margin: 0 0 6px; }
.demo-public-entry .auth-subtitle { margin: 0 0 16px; font-size: .95rem; font-weight: 500; color: var(--dt-muted); }
.demo-entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.demo-entry-grid form { margin: 0; }
.demo-entry-btn {
  width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 12px 16px; border-radius: 16px; border: 1.5px solid #BFE3F2; background: #fff; color: var(--dt-navy);
  font: inherit; font-weight: 800; font-size: 15px; cursor: pointer;
  transition: transform .2s var(--dt-ease), box-shadow .2s, border-color .2s;
}
.demo-entry-btn > i { display: none; }
.demo-entry-btn::after {
  content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg); flex: none; opacity: .8;
}
[dir="rtl"] .demo-entry-btn::after { transform: rotate(-135deg); }
.demo-entry-grid form:first-child .demo-entry-btn {
  border-color: transparent; color: #fff; background: linear-gradient(135deg, var(--dt-cyan), var(--dt-cyan-ink));
  box-shadow: 0 12px 26px rgba(0, 131, 180, .28);
}
.demo-entry-btn:hover { transform: translateY(-1px); border-color: var(--dt-cyan); box-shadow: 0 12px 26px rgba(0, 131, 180, .18); }
.demo-entry-btn:focus-visible { outline: 3px solid var(--dt-gold); outline-offset: 2px; }
[data-theme="dark"] .demo-public-entry { border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); }
[data-theme="dark"] .demo-entry-grid form:last-child .demo-entry-btn { background: transparent; color: #E6F6FC; border-color: rgba(255, 255, 255, .22); }
.demo-entry-pdpl {
  display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 9px 12px; border-radius: 12px;
  background: rgba(255, 194, 51, .14); color: var(--dt-gold-ink); font-size: .85rem; font-weight: 700; line-height: 1.4;
}
.demo-entry-pdpl::before { content: "!"; flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--dt-gold); color: var(--dt-navy); font-size: 12px; font-weight: 900; }
[data-theme="dark"] .demo-entry-pdpl { background: rgba(255, 194, 51, .12); color: #FFD978; }

/* ── Dark app theme ──────────────────────────────────────────────────────── */
html.dark .dld, html.dark .dtf-card, [data-theme="dark"] .dld, [data-theme="dark"] .dtf-card { background: #0F1E2B; color: #E6F1F7; }
html.dark .dld h2, html.dark .dtf-card h2, [data-theme="dark"] .dld h2, [data-theme="dark"] .dtf-card h2 { color: #fff; }
html.dark .dld p, html.dark .dtf-sub, [data-theme="dark"] .dld p, [data-theme="dark"] .dtf-sub { color: #A9C1CF; }
html.dark .dld__back, html.dark .dtf-back, [data-theme="dark"] .dld__back, [data-theme="dark"] .dtf-back { background: transparent; color: #CFE2EC; border-color: rgba(255, 255, 255, .16); }
html.dark .dtf-cell, [data-theme="dark"] .dtf-cell { background: rgba(255, 255, 255, .05); color: #6F8796; }
html.dark .dtf-cell.is-on, [data-theme="dark"] .dtf-cell.is-on { color: #7FDDF5; }

/* ── Small screens (fits 360px) ──────────────────────────────────────────── */
@media (max-width: 767px) {
  /* The nav drawer is full-height and fixed (below the md breakpoint); the dock
     would sit on its bottom edge, over the logout button. Padding shrinks the
     flex-1 nav and lifts the footer actions above the dock. */
  html:has(#demo-public-bar) #sidebar-container {
    padding-bottom: calc(var(--dt-dock-h) + 24px + env(safe-area-inset-bottom, 0px));
  }
}
@media (max-width: 640px) {
  .dpb {
    left: 10px; right: 10px; transform: none; max-width: none; justify-content: space-between; gap: 6px;
    padding-inline: 12px 5px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  @keyframes dpbIn { from { opacity: 0; transform: translateY(16px); } }
  .dpb__replay { padding: 8px; }
  .dpb__replay-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dpb__live { padding: 9px 14px; font-size: 13px; }
  .dtour-bubble--nav { inset-inline: 12px; width: auto; bottom: calc(var(--dt-dock-h) + 22px + env(safe-area-inset-bottom, 0px)); }
  .dtf-card { padding: 20px; border-radius: 20px; }
  .dtf-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
}
@media (max-width: 480px) {
  .dpb__tag { font-size: 0; gap: 0; }
  .demo-entry-grid { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .dpb__bar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dpb, .dpb__dot, .dld[open], .dtour-veil::after, .dtour-cheer, .dtf-cell, .dtf-cell.is-on { animation: none !important; }
  .dtour-veil, .dtour-bubble, .dtf-card, .dtour-finale, .demo-entry-btn { transition: none !important; }
  .dtour-dots i { transition: none; }
}

@media print {
  .dpb, .dld, .dtour-veil, .dtour-bubble, .dtour-finale { display: none !important; }
  html:has(#demo-public-bar) body > .page { padding-bottom: 0; }
}