/* Bayanaty practice simulator.
   A scripted stage set, not a working EHR. Screens are drawn to match the
   real Bayanaty (TrakCare) chrome so learners recognise the live system.
   Everything renders inside a fixed 1280x720 stage that is scaled to fit,
   so the layout never reflows and hotspot coordinates stay honest. */

/* ---- practice dialog: a native <dialog> gets focus-trap, inert-background
   and Escape-to-close for free. Chrome only needs the visual reset. ---- */
dialog.practice-dialog { width:min(920px,94vw); max-height:88vh; padding:0; overflow:hidden; flex-direction:column; border:0; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); background:var(--paper); }
/* Position it ourselves rather than relying on the browser's native
   top-layer centering for showModal() -- some Safari versions have shown
   showModal() failing silently (no error, dialog just never opens), so
   there's a JS fallback that forces [open] via a plain attribute instead.
   Positioning it explicitly here means both paths render identically. */
dialog.practice-dialog[open] { display:flex; position:fixed; inset:0; margin:auto; z-index:60; }
/* Own class, not .drawer-backdrop -- that one is gated behind body.drawer-open
   for the unrelated course-outline drawer, which would keep this hidden
   regardless of its own [hidden] attribute. */
.practice-backdrop { position:fixed; inset:0; z-index:59; background:rgba(20,16,12,.4); backdrop-filter:blur(2px); animation:fade-in .18s ease; }
dialog.practice-dialog::backdrop { background:rgba(20,16,12,.5); backdrop-filter:blur(2px); }
.practice-dialog header { flex:none; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:22px 24px; background:#fff; border-bottom:1px solid var(--line); }
.practice-dialog header h2 { margin-top:6px; font-size:1.25rem; }
#practice-content { flex:1; overflow-y:auto; padding:24px; }
.practice-options { max-width:640px; margin-inline:auto; text-align:center; }
.practice-options h3 { margin-top:8px; font-size:1.5rem; }
.practice-options > p { margin-top:10px; color:var(--muted); }
.practice-mode-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-top:26px; text-align:left; }
.practice-mode { display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:18px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); cursor:pointer; transition:border-color .15s ease, transform .15s ease; }
.practice-mode:hover { border-color:var(--taupe); transform:translateY(-1px); }
.practice-mode span { color:var(--faint); font-size:.78rem; font-weight:700; }
.practice-mode strong { font-size:.95rem; color:var(--ink); }
.practice-mode p { color:var(--muted); font-size:.84rem; line-height:1.45; }
.practice-mode .icon { align-self:flex-end; width:16px; height:16px; color:var(--faint); margin-top:4px; }
.practice-disclosure { margin-top:22px; color:var(--faint); font-size:.82rem; }
.mobile-practice-note { display:none; margin-top:8px; color:var(--faint); font-size:.8rem; }
.practice-result { max-width:520px; margin-inline:auto; text-align:center; }
.practice-result .eyebrow { margin-top:18px; }
.practice-result h3 { margin-top:8px; font-size:1.4rem; }
.practice-result > p { margin-top:10px; color:var(--muted); }
.practice-result details { margin-top:18px; padding:16px 18px; text-align:left; background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); }
.practice-result summary { cursor:pointer; font-weight:650; font-size:.88rem; }
.practice-result ul { margin:12px 0 0; padding-left:18px; color:var(--muted); font-size:.85rem; line-height:1.6; }
.result-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:26px; }
@media (max-width:640px) {
  dialog.practice-dialog { width:100vw; height:100vh; max-height:100dvh; border-radius:0; }
  .mobile-practice-note { display:block; }
}

/* ---- stage ------------------------------------------------------------
   Authored at the real system's native 1920x1080 and CSS-scaled to fit, so
   every value below is measured off a 1920x1080 PNG of the live system rather
   than converted. Palette and geometry both come from those captures. */
.bay-stage {
  --purple:#7a3389;      /* application header                     */
  --teal:#007067;        /* links, active rail tiles, primary btns  */
  --page:#fafafa;        /* window background, most field fills     */
  --hdr:#f2f2f2;         /* panel header bars, inactive rail tiles  */
  --hdr-dark:#d3d3d3;    /* the Filters header specifically         */
  --hdr-mid:#e0e0e0;     /* the Search Results header               */
  --line:#cccccc;        /* field borders, row separators           */
  --line-soft:#e7e7e7;   /* window chrome edge                      */
  --stripe:#f5f5f5;      /* alternating list row                    */
  --fill-ro:#edefff;     /* read-only / computed field fill         */
  --drug:#d5f5f3;        /* medication context strip                */
  --danger:#ca0000;      /* cart item marker                        */
  --thumb:#8b8b8b;       /* scrollbar thumb                         */
}
.sim-stage-wrap { position:relative; width:100%; overflow:hidden; border:1px solid #b9c4c9; border-radius:10px; background:#3a4145; }
.sim-stage-sizer { position:relative; width:100%; }
.bay-stage { position:absolute; top:0; left:0; width:1920px; height:1080px; transform-origin:top left;
  display:flex; flex-direction:column; overflow:hidden;
  font-family:"Segoe UI",Tahoma,Arial,sans-serif; font-size:13px; color:#1a1a1a; background:var(--page);
  -webkit-font-smoothing:antialiased; user-select:none; cursor:default; }
.bay-stage *, .bay-stage *::before, .bay-stage *::after { box-sizing:border-box; }

/* browser frame (Edge, as the captures show) ---------------------------- */
.bay-browser { flex:none; height:80px; background:var(--line-soft); }
.bay-tabs { height:40px; display:flex; align-items:flex-end; padding-left:36px; }
.bay-tab { display:flex; align-items:center; gap:10px; height:36px; padding:0 16px; background:#fff; border-radius:8px 8px 0 0; font-size:13px; max-width:420px; }
.bay-tab i { width:16px; height:16px; background:var(--teal); border-radius:3px; flex:none; }
.bay-tab span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bay-tab u { margin-left:6px; color:#666; text-decoration:none; }
.bay-urlbar { height:40px; display:flex; align-items:center; gap:16px; padding:0 16px; background:#fff; }
.bay-urlbar b { color:#444; font-weight:400; font-size:17px; }
.bay-url { flex:1; height:28px; display:flex; align-items:center; padding:0 14px; background:#fff; border:1px solid var(--line); border-radius:14px; color:#222; font-size:13px; overflow:hidden; white-space:nowrap; }

/* purple application header, measured 35px --------------------------------- */
.bay-head { flex:none; height:35px; display:flex; align-items:center; gap:14px; padding:0 14px; color:#fff; background:var(--purple); }
.bay-head-ico { font-size:18px; opacity:.95; }
.bay-crumb { display:flex; align-items:center; gap:12px; height:24px; padding:0 10px; background:rgba(255,255,255,.2); border-radius:3px; font-size:13px; white-space:nowrap; }
.bay-assist { flex:none; width:580px; height:23px; margin:0 auto; display:flex; align-items:center; justify-content:center; position:relative; background:#fff; border-radius:3px; color:#555; font-size:12.5px; }
.bay-head-right { margin-left:auto; display:flex; align-items:center; gap:16px; font-size:13.5px; font-weight:700; }

/* patient banner ---------------------------------------------------------- */
.bay-banner { flex:none; position:relative; padding:9px 22px 6px; background:var(--page); }
.bay-banner::after { content:""; position:absolute; right:36px; top:12px; bottom:6px; width:2px; background:var(--purple); }
.bay-pt-name { font-size:16px; font-weight:700; letter-spacing:.03em; }
.bay-banner-cols { display:flex; margin-top:5px; }
.bay-bcol { display:grid; grid-template-columns:auto auto; gap:3px 12px; font-size:13px; color:#222; align-content:start; }
.bay-bcol:nth-of-type(1) { width:525px; }
.bay-bcol:nth-of-type(2) { width:365px; }
.bay-bcol dt { color:#333; }
.bay-bcol dd { margin:0; }
.bay-bicons { margin-left:auto; margin-right:64px; display:flex; align-items:flex-start; gap:6px; padding-top:1px; }
.bay-bicons i { position:relative; width:20px; height:20px; border-radius:2px; display:block; }
.bay-bicons i[data-badge]::after { content:attr(data-badge); position:absolute; top:-3px; right:-3px; min-width:10px; height:10px; padding:0 1px; background:#e8f0fa; border:1px solid #7799bb; border-radius:5px; color:#1a4a7a; font-size:7px; line-height:9px; text-align:center; }
.bay-dots { position:absolute; right:14px; top:30px; color:#333; font-size:18px; letter-spacing:1px; }
.bay-allergy { flex:none; display:flex; align-items:center; gap:12px; padding:6px 22px 17px; background:var(--page); font-size:13px; }
.bay-allergy b { font-weight:400; letter-spacing:.02em; }
.bay-allergy span { padding:3px 9px; background:var(--hdr); border:1px solid var(--line); font-weight:700; }

/* the thin rule under the banner, present on every screen ------------------ */
.bay-rule { flex:none; height:1px; background:var(--line); }
/* Below the purple header the page is inset 11px by the browser window edge;
   the header itself runs full bleed. Measured off the captures. */
.bay-page { flex:1; min-height:0; display:flex; flex-direction:column; padding:0 11px; background:var(--line-soft); }

/* body columns ------------------------------------------------------------- */
.bay-body { display:flex; flex:1; min-height:0; background:var(--page); }
.bay-rail { flex:none; width:82px; padding-top:6px; background:var(--page); }
.bay-rail button { width:68px; height:47px; margin:0 0 2px 0; display:grid; align-content:center; justify-items:center; gap:1px; padding:2px; background:none; border:0; color:#333; font:inherit; font-size:10.5px; line-height:1.15; text-align:center; cursor:pointer; }
.bay-rail button i { font-size:19px; font-style:normal; line-height:1; color:#4a6a7a; }
.bay-rail button.is-on { background:var(--teal); color:#fff; }
.bay-rail button.is-on i { color:#fff; }
.bay-rail button:hover:not(.is-on) { background:var(--hdr); }
/* Order Entry uses a compact, label-less rail. */
.bay-rail.is-compact { width:74px; padding-top:8px; }
.bay-rail.is-compact button { width:68px; height:34px; margin-bottom:4px; place-items:center; background:var(--hdr); }
.bay-rail.is-compact button.is-on { background:var(--teal); }

.bay-actions { flex:none; width:401px; display:flex; flex-direction:column; background:#fff; }
.bay-actions-hd { flex:none; display:flex; align-items:center; justify-content:space-between; height:27px; padding:0 14px; background:var(--hdr); font-weight:400; font-size:14px; }
.bay-quick { flex:none; display:flex; align-items:center; gap:14px; height:32px; padding:0 14px; background:var(--page); }
.bay-quick label { color:#222; }
.bay-quick .bay-in { flex:1; height:24px; }
.bay-actions-scroll { flex:1; overflow:hidden; position:relative; border-top:1px solid var(--line); }
.bay-actions-list { position:absolute; inset:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--thumb) var(--hdr); }
.bay-actions-list::-webkit-scrollbar { width:12px; }
.bay-actions-list::-webkit-scrollbar-thumb { background:var(--thumb); border-radius:6px; border:3px solid var(--hdr); }
.bay-actions-list::-webkit-scrollbar-track { background:var(--hdr); }
.bay-grp { display:flex; align-items:center; gap:16px; height:29px; padding:0 14px; font-weight:700; font-size:13.5px; color:#4b4b4b; background:var(--hdr); border-bottom:1px solid var(--line); }
.bay-grp::before { content:"\2304"; position:relative; top:-4px; font-weight:400; font-size:15px; }
.bay-act { display:flex; align-items:center; width:100%; height:29px; padding:0 12px 0 17px; text-align:left; background:var(--page); border:0; border-bottom:1px solid var(--line); color:var(--teal); font:inherit; font-size:13px; cursor:pointer; }
.bay-act:nth-of-type(even) { background:var(--stripe); }
.bay-act:hover { background:#e3efee; }

.bay-main { flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; background:var(--page); }
.bay-main-scroll { flex:1; overflow:hidden; position:relative; }
.bay-main-inner { position:absolute; inset:0; overflow-y:auto; padding:8px 12px 20px; }
.bay-link { color:var(--teal); cursor:pointer; }
.bay-link:hover { text-decoration:underline; }
.bay-titlebar { flex:none; height:22px; display:flex; align-items:center; padding:0 12px; background:var(--hdr); font-size:13px; }

/* panels, fields ----------------------------------------------------------- */
.bay-panel { margin-bottom:10px; background:var(--page); }
.bay-panel-hd { display:flex; align-items:center; justify-content:space-between; height:26px; padding:0 12px; background:var(--hdr); border-bottom:1px solid var(--teal); font-size:13.5px; }
.bay-panel-hd.is-grey { background:var(--hdr-dark); border-bottom:0; }
.bay-panel-hd.is-mid { background:var(--hdr-mid); border-bottom:0; }
.bay-panel-bd { padding:10px 12px; }
.bay-fs { margin:0 0 10px; padding:6px 12px 10px; border:1px solid var(--line); }
.bay-fs > legend { padding:0 6px; color:#222; font-size:12.5px; }
.bay-row { display:grid; grid-template-columns:180px minmax(0,1fr); align-items:center; gap:10px; margin-bottom:7px; }
.bay-row > label { color:#222; }
.bay-row > label .req { color:#111; }
.bay-in { position:relative; height:24px; padding:0 26px 0 7px; background:var(--page); border:1px solid var(--line); font:inherit; font-size:13px; line-height:22px; color:#111; overflow:hidden; white-space:nowrap; }
.bay-in.is-fill { background:var(--fill-ro); }
.bay-in.is-sel { background:#2a6fc9; color:#fff; }
.bay-in.lookup::after { content:""; position:absolute; right:5px; top:5px; width:14px; height:14px; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='7' cy='7' r='4.2' fill='none' stroke='%23007067' stroke-width='1.6'/><line x1='10.2' y1='10.2' x2='14.2' y2='14.2' stroke='%23007067' stroke-width='1.8' stroke-linecap='round'/></svg>") center/contain no-repeat; }
.bay-in.spin::after { content:""; position:absolute; right:4px; top:5px; width:13px; height:13px; background:radial-gradient(circle,#999 .8px,transparent .9px) 0 0/4px 4px; opacity:.85; }
.bay-in.is-focus { outline:2px solid #2a6fc9; outline-offset:-1px; }
.bay-cbx { width:17px; height:17px; display:inline-grid; place-items:center; background:#fff; border:1px solid var(--line); font-size:12px; color:var(--teal); cursor:pointer; }
.bay-cbx.is-on { color:var(--teal); font-weight:700; }
.bay-radio { display:inline-flex; align-items:center; gap:9px; cursor:pointer; }
.bay-radio i { width:14px; height:14px; border:1px solid #8a8a8a; border-radius:50%; background:#fff; display:block; }
.bay-radio.is-on i { border-color:var(--teal); background:radial-gradient(circle,var(--teal) 0 42%,#fff 44%); }
.bay-chip { display:inline-flex; align-items:center; gap:10px; padding:3px 10px; background:var(--hdr); border:1px solid var(--line); font-size:13px; }

/* favourites catalogue (the pane Order Entry lands on) ---------------------- */
.bay-fav { display:flex; align-items:center; gap:14px; height:31px; padding:0 12px 0 22px; background:var(--page); border-bottom:1px solid var(--line); color:#1a1a1a; font-size:13.5px; cursor:pointer; }
.bay-fav:nth-of-type(even) { background:var(--stripe); }
.bay-fav:hover { background:#e3efee; }
.bay-fav-chev { color:#555; font-size:15px; }

/* search results ----------------------------------------------------------- */
.bay-res { display:flex; align-items:center; width:100%; padding:7px 12px 7px 40px; text-align:left; background:var(--page); border:0; border-bottom:1px solid var(--line); font:inherit; cursor:pointer; }
.bay-res:nth-of-type(even) { background:var(--stripe); }
.bay-res-label { flex:1; min-width:0; }
.bay-res b { display:block; color:var(--teal); font-size:13px; font-weight:700; }
.bay-res small { color:#333; font-size:12.5px; }
.bay-res-act { flex:none; width:30px; height:24px; display:grid; place-items:center; color:var(--teal); font-size:17px; }
.bay-res:hover { background:#e3efee; }

/* cart --------------------------------------------------------------------- */
.bay-cart-hd { display:flex; align-items:center; gap:18px; height:26px; padding:0 12px; background:var(--hdr); font-size:13px; }
.bay-cart-hd .sp { margin-left:auto; }
.bay-cart-grp { display:flex; align-items:center; gap:14px; padding:7px 12px; border-bottom:1px solid var(--line); font-weight:700; font-size:14px; }
.bay-cart-item { position:relative; display:flex; gap:14px; padding:8px 12px 8px 26px; border-bottom:1px solid var(--line); cursor:pointer; }
.bay-cart-item::before { content:""; position:absolute; left:0; top:0; bottom:0; width:9px; background:var(--danger); }
.bay-cart-item:hover { background:#e3efee; }
.bay-cart-item div { flex:1; line-height:1.45; }
.bay-cart-item b { font-weight:700; }
.bay-cart-item em { font-style:normal; color:#2a6fc9; font-weight:700; }
.bay-trash { color:var(--danger); font-size:16px; }

/* medication order details ------------------------------------------------- */
.bay-drug { flex:none; padding:9px 22px; background:var(--drug); font-size:14px; }
.bay-drug b { font-weight:700; }
.bay-drug em { font-style:normal; color:#2a6fc9; font-weight:700; }
.bay-detail-grid { display:grid; grid-template-columns:minmax(0,1fr) 450px; gap:16px; }
.bay-subgrid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 24px; }
.bay-note { height:100px; background:var(--page); border:1px solid var(--line); margin-bottom:10px; }
.bay-note-lbl { color:#222; margin-bottom:3px; }

/* outpatient appointment list ----------------------------------------------- */
.bay-appt-title { flex:none; padding:14px 22px 10px; font-size:14px; color:#222; }
.bay-appt-table { flex:1; min-height:0; margin:0 22px; overflow:auto; background:var(--page); border:1px solid var(--line); }
.bay-appt-row { display:grid; grid-template-columns:90px 80px 170px 140px 160px minmax(0,1fr) 90px 130px 160px 60px 70px 50px; align-items:center; }
.bay-appt-row > span { padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
.bay-appt-row > span:not(.bay-appt-menu) { overflow:hidden; text-overflow:ellipsis; }
.bay-appt-head { position:sticky; top:0; background:var(--hdr-mid); font-weight:700; z-index:1; }
.bay-appt-pt { color:var(--teal); font-weight:700; }
.bay-appt-menu { position:relative; display:flex; justify-content:center; }
.bay-appt-dots { padding:4px 8px; background:none; border:0; color:#333; font-size:16px; letter-spacing:1px; cursor:pointer; }
.bay-appt-dots:hover { background:var(--hdr); border-radius:4px; }
.bay-ctx-menu { position:absolute; right:0; top:26px; z-index:4; min-width:190px; background:#fff; border:1px solid var(--line); box-shadow:0 6px 18px rgba(0,0,0,.22); }
.bay-ctx-item { display:block; width:100%; padding:9px 14px; text-align:left; background:#fff; border:0; border-bottom:1px solid var(--line); color:#1a1a1a; font:inherit; font-size:13px; cursor:pointer; }
.bay-ctx-item:last-child { border-bottom:0; }
.bay-ctx-item:hover { background:#e3efee; }

/* footers ------------------------------------------------------------------ */
.bay-foot { flex:none; height:56px; display:flex; align-items:center; justify-content:center; background:var(--page); color:#c4c4c4; font-size:21px; font-weight:600; letter-spacing:.02em; }
.bay-actionbar { flex:none; height:42px; display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:0 16px; background:var(--page); }
.bay-btn { min-width:80px; padding:5px 20px; background:var(--teal); border:0; color:#fff; font:inherit; font-size:13.5px; cursor:pointer; }
.bay-btn:hover { filter:brightness(1.12); }
.bay-btn.is-off { background:#bdbdbd; }
.bay-btn.is-ghost { background:var(--hdr); color:#333; border:1px solid var(--line); }

/* ---- coaching layer ---------------------------------------------------- */
.sim-ring { position:absolute; z-index:5; border:2px solid #ff8a00; border-radius:4px; pointer-events:none;
  box-shadow:0 0 0 3px rgba(255,138,0,.28); animation:simPulse 1.6s ease-in-out infinite; }
@keyframes simPulse { 0%,100% { box-shadow:0 0 0 3px rgba(255,138,0,.3); } 50% { box-shadow:0 0 0 8px rgba(255,138,0,0); } }
.sim-ring::after { content:""; position:absolute; inset:0; border:2px solid #fff; border-radius:2px; opacity:.55; }
@media (prefers-reduced-motion:reduce) { .sim-ring { animation:none; } }

.sim-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 14px; background:var(--ink-2); color:#fff; border-radius:10px 10px 0 0; }
.sim-step-n { flex:none; min-width:64px; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; opacity:.75; }
.sim-say { flex:1 1 260px; font-size:.9rem; line-height:1.45; }
.sim-say b { color:#8fd6f2; font-weight:700; }
.sim-bar-actions { display:flex; gap:8px; margin-left:auto; }
.sim-mini { padding:5px 11px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); border-radius:7px; color:#fff; font-size:.76rem; cursor:pointer; }
.sim-mini:hover { background:rgba(255,255,255,.24); }
.sim-track { height:3px; background:rgba(255,255,255,.2); border-radius:3px; overflow:hidden; }
.sim-track span { display:block; height:100%; width:0; background:#62c8ee; transition:width .35s ease; }

.sim-toast { position:absolute; left:50%; bottom:16px; z-index:6; transform:translateX(-50%); max-width:560px;
  padding:9px 14px; border-radius:9px; font-size:.84rem; line-height:1.45; color:#fff; background:rgba(43,36,29,.94);
  box-shadow:0 10px 30px rgba(0,0,0,.3); }
.sim-toast.is-wrong { background:#8a2b2b; }
.sim-toast.is-right { background:#1d6b47; }

@media (max-width:720px) {
  .sim-bar { border-radius:10px 10px 0 0; }
  .sim-step-n { min-width:0; }
}