/* RadX AI - clinical dark theme, easy on the eyes */
:root{
  /* refined navy-tinted slate — quieter and more premium than a flat charcoal,
     and cohesive with the RadX logo navy (#243060) */
  --bg:#13151b;            /* deep slate, faint navy tint */
  --bg-2:#1b1e26;          /* panel */
  --bg-3:#262a34;          /* raised */
  --bg-row:#181b22;
  --bg-row-alt:#1d2029;
  --line:#313644;
  --txt:#e8e9ee;           /* soft off-white, faint cool tint */
  --txt-dim:#98a0b0;
  /* one restrained accent: a refined royal indigo drawn from the brand navy —
     deliberately not the generic bright teal/cyan */
  --accent:#5f78cc;
  --accent-ink:#0b1024;    /* near-black navy for text on the accent */
  --accent-2:#9cc0d8;      /* the logo's powder blue, for subtle highlights */
  --good:#4bb27c;
  --warn:#d3a24a;
  --bad:#d97070;
  --chip:#242833;
  --radius:8px;
  --shadow:0 6px 22px -6px rgba(0,0,0,.55);
}
/* ---------- light theme: tones of white, toggled app-wide from the worklist ---------- */
:root.theme-light{
  --bg:#e6eaef;
  --bg-2:#f1f4f7;
  --bg-3:#e1e6ec;
  --bg-row:#f1f4f7;
  --bg-row-alt:#e8ecf1;
  --line:#cfd7e0;
  --txt:#1c2733;
  --txt-dim:#5c6b7a;
  --accent:#4257b0;
  --accent-2:#5b7fc4;
  --good:#2f9e5b;
  --warn:#b98423;
  --bad:#c94c4c;
  --chip:#e2e8ee;
  --shadow:0 2px 12px rgba(30,45,65,.14);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:"Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  background:var(--bg);color:var(--txt);font-size:14px;line-height:1.4;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-2);text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:14px}
.hidden{display:none !important}

/* ---------- buttons ---------- */
.btn{
  background:var(--bg-3);color:var(--txt);border:1px solid var(--line);
  padding:8px 14px;border-radius:var(--radius);font-size:13px;
  transition:.15s;display:inline-flex;align-items:center;gap:6px;
}
.btn:hover{background:#2c2d33;border-color:var(--accent)}
:root.theme-light .btn:hover{background:#e3ecf5}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.btn-primary:hover{background:#46b6b6}
.btn-good{background:var(--good);border-color:var(--good);color:#04210f;font-weight:600}
.btn-bad{background:transparent;border-color:var(--bad);color:var(--bad)}
.btn-bad:hover{background:var(--bad);color:#fff}
.btn-sm{padding:4px 10px;font-size:12px}

/* ---------- login ---------- */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1200px 600px at 70% -10%,#1c3535 0%,var(--bg) 55%);
}
:root.theme-light .login-wrap{
  background:radial-gradient(1200px 600px at 70% -10%,#dce8f5 0%,var(--bg) 55%);
}
.login-card{
  width:380px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:14px;padding:34px 30px;box-shadow:var(--shadow);
}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.brand .logo{
  width:38px;height:38px;border-radius:9px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--accent-ink);
}
.brand h1{font-size:20px;margin:0;letter-spacing:.5px}
.logo-img{height:42px;width:auto;display:block;border-radius:8px;background:#fff;padding:2px}
.topbar .logo-img{height:34px}
.brand small{color:var(--txt-dim)}
.login-card h2{font-weight:600;font-size:16px;margin:22px 0 4px}
.login-card p.sub{color:var(--txt-dim);margin:0 0 20px;font-size:13px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--txt-dim);margin-bottom:6px}
.field input{
  width:100%;padding:11px 12px;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);color:var(--txt);
}
.field input:focus{outline:none;border-color:var(--accent)}
.login-card .btn-primary{width:100%;justify-content:center;padding:11px;margin-top:6px}
.err{color:var(--bad);font-size:13px;min-height:18px;margin-top:8px}
.hint{margin-top:18px;color:var(--txt-dim);font-size:12px;text-align:center;
  border-top:1px solid var(--line);padding-top:14px}

/* ---------- top bar ---------- */
.topbar{
  height:54px;background:linear-gradient(90deg,#101114,#1d1e23);
  display:flex;align-items:center;padding:0 16px;gap:18px;
  border-bottom:1px solid var(--line);
}
:root.theme-light .topbar{background:linear-gradient(90deg,#ffffff,#eef3f8)}
.topbar .brand h1{font-size:18px}
.topbar .logo{width:32px;height:32px;font-size:14px}
.topnav{display:flex;gap:4px;margin-left:10px}
.topnav a{
  padding:7px 14px;border-radius:7px;color:var(--txt-dim);font-size:13px;font-weight:500;
}
.topnav a.active,.topnav a:hover{background:var(--accent);color:var(--accent-ink)}
.topbar .spacer{flex:1}
.pill{background:var(--chip);padding:5px 12px;border-radius:20px;font-size:12px;color:var(--txt-dim)}
.userchip{display:flex;align-items:center;gap:9px}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--accent-2);
  display:flex;align-items:center;justify-content:center;color:#06223f;font-weight:700;font-size:13px}
.icon-btn{background:none;border:none;color:var(--txt-dim);font-size:17px;padding:6px;border-radius:6px}
.icon-btn:hover{color:var(--txt);background:var(--bg-3)}

/* ---------- worklist layout ---------- */
.app{display:flex;height:calc(100vh - 54px);height:calc(100dvh - 54px)}
/* filters sidebar: a sliding drawer, hidden by default so the worklist gets
   the full width — a small tab peeks out from the edge; click it to slide
   the drawer open (see .sidebar-tab). */
.sidebar{position:fixed;top:54px;left:0;bottom:0;width:250px;z-index:130;
  transform:translateX(-100%);transition:transform .22s ease}
.sidebar.open{transform:translateX(0)}
.sidebar-scroll{height:100%;overflow-y:auto;padding-bottom:14px;
  background:var(--bg-2);border-right:1px solid var(--line);
  box-shadow:6px 0 22px rgba(0,0,0,.35)}
.sidebar-backdrop{position:fixed;top:54px;left:0;right:0;bottom:0;z-index:129;
  background:rgba(0,0,0,.42);opacity:0;pointer-events:none;transition:opacity .22s ease}
.sidebar-backdrop.open{opacity:1;pointer-events:auto}
/* the peek tab: a direct child of .sidebar (not .sidebar-scroll) so it can
   stick out past the drawer's right edge without being clipped, and slides
   along with the drawer since it shares the same transform */
.sidebar-tab{position:absolute;top:8px;right:-26px;width:26px;z-index:1;
  background:var(--bg-2);border:1px solid var(--line);border-left:none;
  border-radius:0 9px 9px 0;cursor:pointer;color:var(--txt-dim);
  box-shadow:4px 0 14px rgba(0,0,0,.3);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:8px 0;transition:background .15s,color .15s}
.sidebar-tab:hover{background:var(--bg-3);color:var(--txt)}
.sidebar-tab .tab-label{writing-mode:vertical-rl;text-orientation:mixed;
  font-size:9px;font-weight:700;letter-spacing:1px}
.sidebar-tab .tab-arrow{font-size:11px;transition:transform .22s ease}
.sidebar.open .tab-arrow{transform:rotate(180deg)}
.sidebar-head{display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--line);margin-bottom:6px;
  position:sticky;top:0;background:var(--bg-2)}
.sidebar-head .title{font-weight:700;font-size:14.5px;color:var(--txt)}
.side-group{padding:6px 18px}
.side-group h4{font-size:11px;letter-spacing:1px;color:var(--txt-dim);
  text-transform:uppercase;margin:14px 0 8px}
.side-item{display:block;padding:7px 10px;border-radius:6px;color:var(--txt-dim);
  font-size:13px;cursor:pointer;margin-bottom:2px}
.side-item:hover{background:var(--bg-3);color:var(--txt)}
.side-item.active{background:var(--accent);color:var(--accent-ink);font-weight:600}

.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
#studyListView{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.filters{display:flex;gap:7px;padding:11px 16px 11px 40px;flex-wrap:wrap;align-items:center;
  border-bottom:1px solid var(--line);background:var(--bg)}
.filters input,.filters select{
  padding:6px 9px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:7px;color:var(--txt);min-width:108px;font-size:12.5px;height:32px}
.filters .f-name{min-width:176px}
.filters .date-field{font-size:11.5px;color:var(--txt-dim)}
.filters input:focus,.filters select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}

.list-head{display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px 12px 40px;border-bottom:1px solid var(--line)}
.list-head h3{margin:0;font-size:15px;color:var(--accent)}
.toolbar-mini{display:flex;gap:8px}

.table-wrap{flex:1;overflow:auto}
/* the table may grow wider than the screen (many columns) and scroll
   horizontally rather than squeezing columns into wrapping */
table.worklist{width:max-content;min-width:100%;border-collapse:collapse;font-size:13px}
table.worklist th,table.worklist td{white-space:nowrap}
/* header: quiet uppercase labels on a flat bar, sticky while the body scrolls */
table.worklist th{
  position:sticky;top:0;background:var(--bg-2);color:var(--txt-dim);
  text-align:left;padding:12px 14px;font-weight:700;white-space:nowrap;letter-spacing:.055em;
  text-transform:uppercase;border-bottom:1px solid var(--line);font-size:10.5px;z-index:2;
  cursor:grab;user-select:none}
table.worklist th:active{cursor:grabbing}
table.worklist th.col-drop{color:var(--txt);box-shadow:inset 2px 0 0 var(--accent)}
table.worklist td{padding:13px 14px;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle}
/* no zebra — open rows with a single hairline divider and a soft hover lift */
table.worklist tbody tr{background:transparent;transition:background .1s}
table.worklist tbody tr:hover{background:var(--bg-2);cursor:pointer}
:root.theme-light table.worklist tbody tr:hover{background:#eef3f9}
table.worklist tbody tr:last-child td{border-bottom:none}
/* signature: a slim status-coloured spine on the row's leading edge */
table.worklist tbody tr td:first-child{box-shadow:inset 3px 0 0 transparent}
table.worklist tbody tr[data-st="Signedoff"]  td:first-child{box-shadow:inset 3px 0 0 #4bb27c}
table.worklist tbody tr[data-st="Preliminary"] td:first-child{box-shadow:inset 3px 0 0 #d3a24a}
table.worklist tbody tr[data-st="Locked"]      td:first-child{box-shadow:inset 3px 0 0 #c98b3a}
table.worklist tbody tr[data-st="Readytoview"] td:first-child{box-shadow:inset 3px 0 0 #7c86e0}
table.worklist tbody tr[data-st="Uploading"]   td:first-child{box-shadow:inset 3px 0 0 #5f78cc}
table.worklist tbody tr[data-st="Scheduled"]   td:first-child{box-shadow:inset 3px 0 0 #5ab6c9}
.status{padding:3px 10px;border-radius:12px;font-size:11px;font-weight:600;display:inline-block}
.status.Completed{background:#1f3a2c;color:#79d6a0}
.status.Reported{background:#1d3550;color:#79b6ec}
.status.Not.Scheduled,.status.Notscheduled{background:#33323a;color:#b9b9c4}
/* study lifecycle — refined tinted chips (calm, distinct), identical per role */
.status.Scheduled{background:#173642;color:#7bcbdd;box-shadow:inset 0 0 0 1px rgba(123,203,221,.2)}
.status.Uploading{background:#1c2c4a;color:#8fb2ee;box-shadow:inset 0 0 0 1px rgba(143,178,238,.22);
  animation:statusPulse 1.6s ease-in-out infinite}
@keyframes statusPulse{0%,100%{opacity:1}50%{opacity:.62}}
.status.Readytoview{background:#242847;color:#b0b9ee;box-shadow:inset 0 0 0 1px rgba(176,185,238,.2)}
.status.Preliminary{background:#332c12;color:#e2c877;box-shadow:inset 0 0 0 1px rgba(226,200,119,.2)}
.mod{font-weight:700;color:var(--accent)}

/* Light theme: the dark tinted chips above wash out on white, so give each
   status a soft light tint with saturated, high-contrast ink of the same hue. */
:root.theme-light .status.Scheduled{background:#bfe4ee;color:#0a5261;box-shadow:inset 0 0 0 1px rgba(10,82,97,.25)}
:root.theme-light .status.Uploading{background:#cfddfa;color:#1f428f;box-shadow:inset 0 0 0 1px rgba(31,66,143,.24)}
:root.theme-light .status.Readytoview{background:#d3d7f5;color:#2d3690;box-shadow:inset 0 0 0 1px rgba(45,54,144,.24)}
:root.theme-light .status.Preliminary{background:#f4dfa6;color:#6f4e0a;box-shadow:inset 0 0 0 1px rgba(111,78,10,.26)}
:root.theme-light .status.Signedoff,
:root.theme-light .pill.status.Signedoff{background:#bde5cd;color:#125e39;box-shadow:inset 0 0 0 1px rgba(18,94,57,.26)}
:root.theme-light .status.Locked{background:#eed6a3;color:#78500f;box-shadow:inset 0 0 0 1px rgba(120,80,15,.28);border:none}
:root.theme-light .status.Locked.unlockable:hover{background:#e7ca8c;color:#684509}
:root.theme-light .status.Completed{background:#bde5cd;color:#125e39}
:root.theme-light .status.Reported{background:#cfe0f7;color:#22488f}
:root.theme-light .status.Notscheduled,
:root.theme-light .status.Not.Scheduled{background:#e2e5ec;color:#4a5462}
.row-actions{display:flex;gap:8px;color:var(--txt-dim)}
.row-actions span{cursor:pointer}
.row-actions span:hover{color:var(--accent)}

.page-controls{display:flex;gap:8px;align-items:center;font-size:12.5px}
.page-controls select{height:28px}
.page-controls .btn:disabled{opacity:.35;cursor:default}
.pager{display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;border-top:1px solid var(--line);color:var(--txt-dim);font-size:13px}

/* ---------- modal ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(10,10,12,.7);display:flex;
  align-items:center;justify-content:center;z-index:50}
.modal{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;
  width:560px;max-width:92vw;padding:24px;box-shadow:var(--shadow)}
.modal h3{margin:0 0 4px}
.modal p.sub{color:var(--txt-dim);margin:0 0 18px;font-size:13px}
/* register-patient (RIS) form grid inside the modal */
.reg-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px 12px}
.reg-grid .field{grid-column:span 1}
.reg-grid .field:first-child{grid-column:span 2}
.reg-grid .field label{display:block;font-size:11px;color:var(--txt-dim);margin-bottom:5px}
.reg-grid input,.reg-grid select{width:100%;padding:9px 10px;background:var(--bg);
  border:1px solid var(--line);border-radius:7px;color:var(--txt);box-sizing:border-box}
.reg-grid input:focus,.reg-grid select:focus{outline:none;border-color:var(--accent)}
.drop{border:2px dashed var(--line);border-radius:10px;padding:34px;text-align:center;
  color:var(--txt-dim);transition:.15s}
.drop.drag{border-color:var(--accent);background:#142a2a;color:var(--txt)}
:root.theme-light .drop.drag{background:#e3f2f0}
.progress{height:8px;background:var(--bg);border-radius:6px;overflow:hidden;margin-top:14px}
.progress > div{height:100%;width:0;background:var(--accent);transition:width .2s}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.grid2 .field{margin:0}

/* ---------- viewer ---------- */
/* the viewer page is a flex column (topbar → toolbar → body) so the toolbar
   can WRAP onto extra rows on narrow windows instead of overflowing — buttons
   never disappear, and the image area takes whatever height is left */
body.viewerpage{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
body.viewerpage .topbar{flex:0 0 auto}
.viewer-body{display:flex;flex:1 1 auto;min-height:0}
/* single-line toolbar that scrolls horizontally; a sticky arrow at the far
   right pages through the overflow instead of wrapping onto a second row */
.vtoolbar{height:58px;background:linear-gradient(180deg,var(--bg-2),color-mix(in srgb,var(--bg-2) 88%,#000));
  border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(255,255,255,.03),0 3px 10px rgba(0,0,0,.22);
  display:flex;align-items:center;flex-wrap:nowrap;gap:1px;padding:2px 6px;
  flex:0 0 auto;overflow-x:auto;overflow-y:visible;
  scrollbar-width:none;-ms-overflow-style:none}
.vtoolbar::-webkit-scrollbar{display:none}
.tool{display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex:0 0 auto;min-width:48px;height:50px;padding:0 6px;border-radius:9px;
  color:var(--txt-dim);font-size:12.5px;gap:3px;border:none;background:none;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.tool .ic{font-size:20px;line-height:1;transition:transform .15s ease}
.tool:hover{background:var(--bg-3);color:var(--txt)}
.tool:hover .ic{transform:translateY(-1px)}
.tool.active{background:var(--accent);color:var(--accent-ink);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent),0 3px 10px -3px var(--accent)}
.tool .lbl{font-size:11px;letter-spacing:.1px;white-space:nowrap}
/* sticky pager arrow — stays pinned at the right edge while tools scroll under it */
.vtb-arrow{position:sticky;right:0;flex:0 0 auto;align-self:stretch;margin-left:2px;
  display:none;align-items:center;justify-content:center;width:38px;border:none;cursor:pointer;
  color:var(--txt);font-size:19px;
  background:linear-gradient(90deg,transparent,var(--bg-2) 34%);
  box-shadow:-14px 0 16px -6px var(--bg-2)}
.vtb-arrow::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;background:var(--line)}
.vtb-arrow:hover{color:var(--accent)}
.vtb-arrow.show{display:flex}
.vtb-arrow .chev{transition:transform .2s ease}
.vtb-arrow.at-end .chev{transform:rotate(180deg)}
.vsep{width:1px;height:32px;background:var(--line);margin:0 3px;flex:0 0 auto}
/* measurement-tools dropdown: one toolbar button that opens a small menu of
   the individual tool buttons, so they don't eat six slots of toolbar width */
.tool-dd{position:relative;flex:0 0 auto}
/* fixed so the horizontally-scrolling toolbar can't clip it; JS sets top/left */
.tool-dd-menu{position:fixed;z-index:200;
  background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow);padding:5px;display:flex;flex-direction:column;gap:2px;min-width:170px}
.tool-dd-menu.hidden{display:none}
.tool-dd-menu .tool{flex-direction:row;justify-content:flex-start;gap:9px;
  width:100%;height:34px;min-width:0;padding:0 10px}
.tool-dd-menu .tool .ic{font-size:16px}
.tool-dd-menu .tool .lbl{font-size:13px}
.vtoolbar select.btn{height:38px !important;font-size:14.5px;padding:0 4px;flex:0 0 auto;max-width:88px}
/* narrow screens: icon-only toolbar (tooltips carry the names) */
@media (max-width:1420px){
  .vtoolbar{height:50px}
  .tool{height:42px;min-width:40px;padding:0 6px}
  .tool .lbl{display:none}
  /* text-only buttons (Axial/Coronal/Sagittal, MIP/MinIP) have no icon —
     hiding their label would leave an empty, invisible button */
  .tool:not(:has(.ic)) .lbl{display:block;font-size:11.5px}
  .tool .ic{font-size:21px}
  /* the dropdown menu itself has plenty of width — keep its row labels even
     when the outer toolbar has gone icon-only */
  .tool-dd-menu .tool{height:34px;min-width:0}
  .tool-dd-menu .tool .lbl{display:block;font-size:13px}
  .tool-dd-menu .tool .ic{font-size:16px}
}
/* always-visible mouse-button assignment bar (compact) */
.mousebar{display:flex;align-items:center;gap:4px;padding:0 2px}
.mb-pair{display:flex;align-items:center;gap:2px}
.mb-ico{width:14px;height:19px;display:block;flex-shrink:0}
.mb-sel{background:var(--bg-3);border:1px solid var(--line);color:var(--txt);
  border-radius:5px;padding:2px 4px;font-size:13.5px;height:30px;max-width:94px;
  -webkit-appearance:none;appearance:none;cursor:pointer}
.mb-sel:hover{border-color:var(--accent)}
.mb-sel:focus{outline:none;border-color:var(--accent)}

.series-rail{width:148px;background:linear-gradient(180deg,var(--bg-2),color-mix(in srgb,var(--bg-2) 90%,#000));
  border-right:1px solid var(--line);overflow-y:auto;padding:10px 9px;flex-shrink:0;
  scrollbar-width:thin;scrollbar-color:var(--bg-3) transparent}
.series-rail::-webkit-scrollbar{width:7px}
.series-rail::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:4px}
.series-rail::-webkit-scrollbar-thumb:hover{background:var(--line)}
.thumb{position:relative;border:1.5px solid var(--line);border-radius:11px;margin-bottom:10px;
  cursor:grab;background:#000;overflow:hidden;
  transition:border-color .15s ease,transform .12s ease,box-shadow .15s ease}
.thumb:hover{border-color:var(--txt-dim);transform:translateY(-1px);box-shadow:0 5px 16px -7px rgba(0,0,0,.75)}
.thumb:active{cursor:grabbing;transform:none}
.thumb.active{border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent),0 7px 20px -8px color-mix(in srgb,var(--accent) 55%,transparent)}
.thumb.active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--accent);z-index:2;border-radius:0 2px 2px 0}
.thumb canvas,.thumb .ph{width:100%;height:auto;aspect-ratio:1/1;display:block;background:#000}
.thumb .ph{display:flex;align-items:center;justify-content:center;color:#3a546e;font-size:12.5px}
.thumb .cap{font-size:11px;color:var(--txt-dim);padding:5px 7px;text-align:center;line-height:1.35;
  background:color-mix(in srgb,var(--bg-2) 66%,#000);letter-spacing:.1px}
.thumb.active .cap{color:var(--txt)}

.stage{flex:1;background:#000;position:relative;min-width:0}
#dicomView{width:100%;height:100%;position:relative}
#viewGrid{width:100%;height:100%;display:grid;gap:3px;background:#000}
.pane{position:relative;background:#000;overflow:hidden;border:1.5px solid transparent}
.pane.active{border-color:var(--accent)}
.pane.drop{border-color:var(--accent-2);box-shadow:inset 0 0 0 2px var(--accent-2)}
.pane .cs{width:100%;height:100%;position:relative}
/* fusion colour overlay (e.g. PET on CT) — above the base image, below the
   reference lines and text. No explicit z-index: inserted right after .cs. */
.pane .fusion-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  mix-blend-mode:normal}
/* reference/scout-line overlay — sits above the image, below the text overlays.
   No explicit z-index: it's inserted right after .cs and before the overlay
   divs in the DOM, so plain paint order already puts it in between. */
.pane .ref-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pane .empty-pane{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:#3a546e;font-size:13.5px;pointer-events:none}
/* MPR volume-reconstruction progress — a floating chip with a spinner */
.pane .mpr-progress{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:10px;color:var(--accent);font-size:13px;font-weight:600;
  padding:11px 18px;border-radius:12px;background:rgba(8,10,14,.74);border:1px solid var(--line);
  box-shadow:0 10px 34px rgba(0,0,0,.55);backdrop-filter:blur(3px);z-index:5;pointer-events:none;
  white-space:nowrap}
.pane .mpr-progress::before{content:"";width:15px;height:15px;flex:none;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--accent) 30%,transparent);border-top-color:var(--accent);
  animation:mpr-spin .7s linear infinite}
@keyframes mpr-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.pane .mpr-progress::before{animation:none}}
/* axial / coronal / sagittal reformat buttons */
.plane-group{display:flex;gap:2px;background:var(--bg-2);border-radius:8px;padding:2px}
.plane-group .plane-btn{min-width:0}
.plane-group .plane-btn .lbl{font-size:11.5px}
/* capture button lives on the pane itself, top-left corner */
.pane-capture{position:absolute;top:9px;left:9px;z-index:6;width:31px;height:31px;
  border-radius:9px;background:rgba(10,12,16,.5);border:1px solid rgba(255,255,255,.14);
  color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;opacity:0;transform:translateY(-2px);backdrop-filter:blur(5px);
  transition:opacity .16s ease,transform .16s ease,background .16s ease,border-color .16s ease;padding:0}
.pane:hover .pane-capture,.pane.active .pane-capture{opacity:1;transform:none}
.pane-capture:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
  box-shadow:0 4px 14px -4px var(--accent)}
.overlay{position:absolute;color:#bfe8d8;font-size:13.5px;pointer-events:none;
  text-shadow:0 1px 2px #000;font-family:"SF Mono",Menlo,monospace}
.overlay.tl{top:10px;left:48px}   /* shifted right of the pane's capture button */
.overlay.tr{top:10px;right:12px;text-align:right}
.overlay.bl{bottom:10px;left:12px}
.overlay.br{bottom:10px;right:12px;text-align:right}
/* patient-orientation markers (R/L/A/P/H/F) on the four edges, PACS-style */
.orient{position:absolute;color:#ffcf6e;font-size:14.5px;font-weight:700;
  pointer-events:none;text-shadow:0 1px 4px #000;z-index:5;letter-spacing:1px}
.orient.mt{top:8px;left:50%;transform:translateX(-50%)}
.orient.mr{right:10px;top:50%;transform:translateY(-50%)}
.orient.mb{bottom:8px;left:50%;transform:translateX(-50%)}
.orient.ml{left:10px;top:50%;transform:translateY(-50%)}
.empty-stage{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;color:#43617e;gap:10px;text-align:center}

/* right report/ai panel */
.report-panel{width:430px;background:var(--bg-2);border-left:1px solid var(--line);
  display:flex;flex-direction:column;flex-shrink:0}
.panel-tabs{display:flex;border-bottom:1px solid var(--line)}
.panel-tabs button{flex:1;padding:12px;background:none;border:none;color:var(--txt-dim);
  font-size:13px;font-weight:600;border-bottom:2px solid transparent}
.panel-tabs button.active{color:var(--accent);border-bottom-color:var(--accent)}
.panel-body{flex:1;overflow-y:auto;padding:16px}
.panel-foot{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:10px}

.phead{font-size:13.5px;color:var(--txt-dim);margin-bottom:6px;letter-spacing:.3px;
  text-transform:uppercase}
.rpt-field{margin-bottom:16px}
.rpt-field textarea{width:100%;background:var(--bg);border:1px solid var(--line);
  border-radius:8px;color:var(--txt);padding:11px;resize:vertical;min-height:70px;line-height:1.5}
.rpt-field textarea:focus{outline:none;border-color:var(--accent)}
.tmpl-select{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--txt);
  border-radius:8px;padding:9px 10px;font-size:13px}
.tmpl-select:focus{outline:none;border-color:var(--accent)}
.tmpl-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.chip{background:var(--chip);border:1px solid var(--line);color:var(--txt-dim);
  padding:5px 10px;border-radius:14px;font-size:12px;cursor:pointer}
.chip:hover{border-color:var(--accent);color:var(--txt)}

/* AI cards */
.ai-banner{background:linear-gradient(90deg,#17322f,#1f2226);border:1px solid #2d4a44;
  border-radius:9px;padding:12px 14px;margin-bottom:14px;font-size:14px;color:var(--txt-dim)}
:root.theme-light .ai-banner{background:linear-gradient(90deg,#eaf4f4,#e7eef8);border-color:#cfe0e8}
.ai-banner b{color:var(--accent)}
.ai-card{background:var(--bg);border:1px solid var(--line);border-radius:9px;
  padding:13px;margin-bottom:11px}
.ai-card.accepted{border-color:var(--good)}
.ai-card.rejected{border-color:var(--bad);opacity:.65}
.ai-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.ai-label{font-weight:700;font-size:15.5px}
.conf{font-size:12.5px;padding:2px 8px;border-radius:10px;background:var(--chip);color:var(--txt-dim)}
.conf.hi{color:#79d6a0}.conf.mid{color:#e3c468}.conf.lo{color:#d99}
.ai-desc{color:var(--txt-dim);font-size:14.5px;margin-bottom:10px}
.ai-actions{display:flex;gap:8px}
.ai-state{font-size:12.5px;font-weight:700;padding:2px 8px;border-radius:10px}
.ai-state.accepted{color:#79d6a0}.ai-state.rejected{color:#d99}

/* teach form */
.teach-box{background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:14px}
.teach-box .field{margin-bottom:12px}
.teach-box label{display:block;font-size:13.5px;color:var(--txt-dim);margin-bottom:5px}
.teach-box input,.teach-box select,.teach-box textarea{
  width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:7px;
  color:var(--txt);padding:9px 10px}
.teach-box textarea{resize:vertical;min-height:60px}
.train-item{font-size:13.5px;color:var(--txt-dim);padding:8px 0;border-bottom:1px solid var(--line)}
.train-item b{color:var(--txt)}
/* embedded OHIF (3D/MPR) overlay */
.mpr-overlay{position:fixed;inset:0;z-index:200;background:#000;display:flex;flex-direction:column}
.mpr-bar{height:46px;flex-shrink:0;background:var(--bg-2);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;padding:0 14px}
.mpr-title{color:var(--txt);font-weight:600;font-size:15.5px}
.mpr-overlay iframe{flex:1;width:100%;border:0;background:#000}

/* split-screen report (embedded report editor) */
.report-split{flex:0 0 46%;min-width:360px;border-left:1px solid var(--line);background:var(--bg)}
.report-split iframe{width:100%;height:100%;border:0;display:block;background:var(--bg)}

/* sliding AI / Teach drawer (slides in from the right border) */
.ai-drawer{position:fixed;top:54px;right:0;bottom:0;width:380px;max-width:90vw;z-index:120;
  background:linear-gradient(180deg,var(--bg-2),color-mix(in srgb,var(--bg-2) 94%,#000));
  border-left:1px solid var(--line);display:flex;flex-direction:column;
  box-shadow:-16px 0 44px -10px rgba(0,0,0,.55);transform:translateX(0);
  transition:transform .24s cubic-bezier(.4,0,.2,1)}
.ai-drawer.hidden{display:flex !important;transform:translateX(110%)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line);padding-right:8px}
.drawer-tabs{display:flex}
.drawer-tabs button{padding:13px 16px;background:none;border:none;color:var(--txt-dim);
  font-size:14.5px;font-weight:600;border-bottom:2px solid transparent;cursor:pointer;
  transition:color .15s ease,border-color .15s ease}
.drawer-tabs button:hover{color:var(--txt)}
.drawer-tabs button.active{color:var(--accent);border-bottom-color:var(--accent)}
.drawer-body{flex:1;overflow-y:auto;padding:16px;scrollbar-width:thin;scrollbar-color:var(--bg-3) transparent}
/* refined thin scrollbars across viewer panels */
.drawer-body::-webkit-scrollbar,.hist-dropdown::-webkit-scrollbar,.hdrop::-webkit-scrollbar,
.refpanel-body::-webkit-scrollbar,.panel-body::-webkit-scrollbar{width:8px}
.drawer-body::-webkit-scrollbar-thumb,.hist-dropdown::-webkit-scrollbar-thumb,.hdrop::-webkit-scrollbar-thumb,
.refpanel-body::-webkit-scrollbar-thumb,.panel-body::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:4px}
.drawer-body::-webkit-scrollbar-thumb:hover,.panel-body::-webkit-scrollbar-thumb:hover{background:var(--line)}

/* report page embedded inside the viewer split:
   the assist rail becomes a slim wrapping bar on top and the paper
   shrinks to the pane width so the whole document stays visible */
body.embed .topbar{display:none}
.rep-close-floating{display:none;position:fixed;top:8px;right:10px;z-index:400;
  font-size:16px;background:var(--bg-2);border:1px solid var(--line);border-radius:7px;
  width:30px;height:30px}
body.embed .rep-close-floating{display:flex;align-items:center;justify-content:center}
body.embed .rep-shell{height:100vh;flex-direction:column}
body.embed .rep-body{flex-direction:column}
/* embedded in the viewer split: the rail collapses to one compact top bar —
   just the AI draft card (findings/learning live in the viewer's own AI
   drawer, so tabs/learning are hidden here); reporting actions collapse into
   a slim footer bar instead of the full-width one on the dedicated page */
body.embed .rep-rail{order:-1;width:auto;flex-direction:row;align-items:center;flex-wrap:wrap;
  gap:10px;padding:7px 12px;border-left:none;border-bottom:1px solid var(--line);overflow:visible}
body.embed .rail-tabs,body.embed .accepted-wrap,body.embed #rpanel-learn,
body.embed .ai-card-sub{display:none}
body.embed .rail-scroll{flex:0 0 auto;padding:0;overflow:visible;display:flex;align-items:center}
body.embed .ai-card{background:none;border:none;padding:0;margin:0}
body.embed .ai-draft-btn{width:auto;padding:7px 13px;font-size:14px}
body.embed .rep-footbar{padding:6px 12px;gap:10px}
body.embed .footbar-info{display:none}
body.embed .report-actions{flex-wrap:wrap;gap:6px;justify-content:flex-end}
body.embed .report-actions .act-row{display:contents}
body.embed .report-actions .btn,body.embed .act-signoff{flex:0 0 auto;width:auto;padding:6px 10px;font-size:13.5px}
body.embed .rdoc-scroll{padding:12px}
body.embed .rdoc-paper{width:auto;max-width:100%;padding:22px 26px}
body.embed .rdoc-logo{height:42px}
/* ---------- dedicated report page ---------- */
.rep-shell{display:flex;flex-direction:column;height:calc(100vh - 54px);height:calc(100dvh - 54px);background:var(--bg)}
.rep-body{flex:1;display:flex;min-height:0;overflow:hidden}
.rep-main{flex:1;display:flex;flex-direction:column;min-width:0}
.rdoc-toolbar{min-height:42px;flex-shrink:0;display:flex;align-items:center;gap:4px;row-gap:4px;
  flex-wrap:wrap;padding:4px 12px;background:var(--bg-2);border-bottom:1px solid var(--line)}
.rdoc-toolbar button{background:var(--bg-3);border:1px solid var(--line);color:var(--txt);
  min-width:30px;height:28px;border-radius:6px;font-size:13px;cursor:pointer}
.rdoc-toolbar button:hover{border-color:var(--accent)}
.rdoc-toolbar .fsep{width:1px;height:20px;background:var(--line);margin:0 5px}
.rdoc-tlabel{font-size:11.5px;color:var(--txt-dim);margin:0 4px 0 2px;white-space:nowrap}
.rdoc-tmpl{height:30px;background:var(--bg-3);border:1px solid var(--line);color:var(--txt);
  border-radius:6px;font-size:12.5px;padding:0 8px;max-width:230px;min-width:120px;flex:0 1 auto;cursor:pointer}
.rdoc-tmpl:hover{border-color:var(--accent)}
.rdoc-toolbar button.is-active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.rdoc-size{height:28px;background:var(--bg-3);border:1px solid var(--line);color:var(--txt);
  border-radius:6px;font-size:12px;padding:0 4px;cursor:pointer}
.rdoc-size:hover{border-color:var(--accent)}
.rdoc-font{height:28px;background:var(--bg-3);border:1px solid var(--line);color:var(--txt);
  border-radius:6px;font-size:12px;padding:0 6px;cursor:pointer;max-width:132px}
.rdoc-font:hover{border-color:var(--accent)}
.rdoc-color{position:relative;width:30px;height:28px;border:1px solid var(--line);border-radius:6px;
  background:var(--bg-3);cursor:pointer;padding:0;overflow:hidden}
.rdoc-color:hover{border-color:var(--accent)}
.rdoc-color input{position:absolute;inset:-4px;width:140%;height:140%;border:none;padding:0;cursor:pointer;background:none}
.rdoc-color .swatch{position:absolute;left:4px;right:4px;bottom:3px;height:4px;border-radius:2px}
.rdoc-toolbar button.mic-on{background:var(--accent);color:#fff;border-color:var(--accent);
  animation:micpulse 1.4s ease infinite}
@keyframes micpulse{0%,100%{box-shadow:0 0 0 0 rgba(80,160,255,.45)}50%{box-shadow:0 0 0 6px rgba(80,160,255,0)}}
.rdoc-scroll{flex:1;overflow:auto;padding:14px;display:block}
.rdoc-paper{width:100%;max-width:none;background:#fff;color:#11202e;border-radius:6px;
  box-shadow:0 6px 24px rgba(0,0,0,.4);padding:40px 56px;min-height:calc(100% - 0px);box-sizing:border-box}
.rdoc-letterhead{display:flex;align-items:center;gap:14px;border-bottom:2px solid #1F3864;
  padding-bottom:14px;margin-bottom:18px}
.rdoc-logo{height:54px;width:auto}
.rdoc-center{font-size:22px;font-weight:700;color:#1F3864}
.rdoc-sub{font-size:13px;color:#5a6b7d;letter-spacing:1px;text-transform:uppercase}
.rdoc-table{width:100%;border-collapse:collapse;margin-bottom:22px;font-size:13px}
.rdoc-table th,.rdoc-table td{border:1px solid #b9c4d0;padding:6px 9px;text-align:left}
.rdoc-table th{background:#eef2f6;color:#33475b;font-weight:600;width:120px;white-space:nowrap}
.rdoc-body{min-height:380px;outline:none;font-size:14.5px;line-height:1.7;color:#11202e}
.rdoc-body:focus{outline:none}
.rdoc-body h3{font-size:14px;color:#1F3864;letter-spacing:.5px;margin:16px 0 4px;font-weight:700}
.rdoc-body div{margin:0}
.rdoc-body ul,.rdoc-body ol{margin:4px 0 4px 22px}
.rdoc-sign{margin-top:36px;padding-top:14px;border-top:1px solid #cdd6e0;font-size:13px}
.rdoc-signdate{margin-top:4px}

.rep-rail{width:340px;flex-shrink:0;background:var(--bg-2);border-left:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0}
.rail-hint{font-size:11.5px;color:var(--txt-dim);margin-top:7px;line-height:1.45}
.rail-meta{font-size:11.5px;color:var(--txt-dim);margin-bottom:8px}
/* rail tabs */
.rail-tabs{display:flex;flex-shrink:0;border-bottom:1px solid var(--line)}
.rtab{flex:1;padding:12px 8px;background:none;border:none;color:var(--txt-dim);font-size:13px;
  font-weight:600;cursor:pointer;border-bottom:2px solid transparent}
.rtab:hover{color:var(--txt)}
.rtab.active{color:var(--accent);border-bottom-color:var(--accent)}
.rail-scroll{flex:1;overflow-y:auto;padding:16px;min-height:0}
/* AI draft card */
.ai-card{background:linear-gradient(150deg,#17322f,#212226);border:1px solid #2d4a44;
  border-radius:12px;padding:14px}
:root.theme-light .ai-card{background:linear-gradient(150deg,#eaf4f4,#e7eef8);border-color:#cfe0e8}
.ai-draft-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent);color:#04211f;font-weight:700;border:none;border-radius:9px;
  padding:12px 14px;font-size:14px;cursor:pointer;transition:.15s;box-shadow:0 2px 10px rgba(58,160,160,.3)}
.ai-draft-btn:hover{background:#46b6b6;transform:translateY(-1px)}
.ai-draft-btn:disabled{opacity:.7;cursor:default;transform:none}
.ai-draft-btn .ic{font-size:15px}
.ai-card-sub{color:var(--txt-dim);font-size:11.5px;line-height:1.5;margin:10px 0 0}
/* accepted findings (read-only) */
.accepted-wrap{margin-top:18px}
.accepted-head{font-size:11px;color:var(--txt-dim);letter-spacing:.4px;text-transform:uppercase;
  font-weight:600;margin-bottom:8px}
.finding-chip{background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--good);
  border-radius:7px;padding:8px 11px;margin-bottom:7px;font-size:12.5px;color:var(--txt-dim)}
.finding-chip b{color:var(--txt)}
.learn-ok{background:#16302a;border:1px solid #2c5a47;border-radius:9px;padding:11px 13px;
  margin-top:12px;font-size:12.5px;color:#9fe0c0}
/* reporting action bar — a full-width bar pinned to the bottom of the page,
   kept separate from the editing toolbar and the AI rail */
.rep-footbar{flex-shrink:0;border-top:1px solid var(--line);padding:10px 20px;
  background:var(--bg-2);display:flex;align-items:center;gap:20px}
.footbar-info{flex:0 0 auto;min-width:150px}
.rail-autosave{font-size:11px;color:var(--txt-dim);min-height:14px;margin-bottom:2px}
.report-actions{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:12px}
/* Sign off is the final, most consequential action — make it the brightest
   button on the page. Preliminary is an interim state, so it stays muted
   (amber) in clear contrast rather than competing for attention. */
.act-signoff{justify-content:center;font-size:14px;padding:10px 22px;white-space:nowrap;
  background:linear-gradient(135deg,#1fd6a0,#10b981);border-color:#0ea173;color:#04241a;
  font-weight:700;box-shadow:0 2px 14px rgba(16,214,160,.45)}
.act-signoff:hover{background:linear-gradient(135deg,#35e0b0,#12c98f);border-color:#0ea173;
  box-shadow:0 3px 18px rgba(16,214,160,.6)}
.act-prelim{background:var(--warn);border-color:var(--warn);color:#241a04;font-weight:600}
.act-prelim:hover{background:#c99239;border-color:#c99239}
.act-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.act-row .btn{justify-content:center;padding:8px 13px;font-size:12.5px;white-space:nowrap}
.pill.status{font-weight:600}
/* report-tools cluster in the editing toolbar (Template / Dictate / Reference) */
.rdoc-tools{display:flex;align-items:center;gap:6px;margin-left:auto;padding-left:8px;
  border-left:1px solid var(--line)}
.rdoc-tool{display:inline-flex;align-items:center;gap:5px;background:var(--bg-3);
  border:1px solid var(--line);color:var(--txt);height:28px;padding:0 11px !important;
  border-radius:6px;font-size:12.5px;cursor:pointer;width:auto !important;min-width:0 !important}
.rdoc-tool:hover{border-color:var(--accent)}
.rdoc-tool.ref{background:var(--accent-2);border-color:var(--accent-2);color:#052240;font-weight:700;
  box-shadow:0 1px 8px rgba(79,142,220,.45)}
.rdoc-tool.ref:hover{background:#6ba3e8;border-color:#6ba3e8;box-shadow:0 2px 12px rgba(79,142,220,.65)}
@media (max-width:1100px){.rdoc-tool .lbl{display:none}}

@media print {
  .topbar,.rdoc-toolbar,.rep-rail,.rep-footbar{display:none !important}
  .rep-shell,.rep-body{display:block;height:auto}
  .rdoc-scroll{overflow:visible;padding:0;display:block}
  .rdoc-paper{box-shadow:none;width:auto;border-radius:0;padding:0}
  body{background:#fff}
}

/* ---- delayed hover tooltip (shows only after ~3s hover, see [data-tip]) ---- */
.rx-tooltip{position:fixed;z-index:500;background:#0e0f12;color:#e7e7ea;
  border:1px solid var(--line);border-radius:6px;padding:6px 10px;font-size:12px;
  line-height:1.4;max-width:240px;box-shadow:var(--shadow);pointer-events:none;
  opacity:0;transform:translateY(4px);transition:opacity .15s ease,transform .15s ease}
.rx-tooltip.show{opacity:1;transform:translateY(0)}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  background:var(--bg-3);border:1px solid var(--accent);color:var(--txt);
  padding:11px 18px;border-radius:8px;box-shadow:var(--shadow);z-index:80;font-size:13px}

/* ---- header dropdowns (notifications / settings) ---- */
.hdrop-wrap{position:relative}
.icon-btn{position:relative}
.hdrop-badge{position:absolute;top:-2px;right:-2px;background:var(--bad);color:#fff;
  font-size:10px;line-height:1;min-width:15px;height:15px;padding:0 3px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;font-weight:700}
.hdrop{position:absolute;top:44px;right:0;width:320px;
  background:color-mix(in srgb,var(--bg-2) 94%,transparent);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:13px;box-shadow:0 18px 48px -12px rgba(0,0,0,.62);z-index:90;
  overflow:hidden;animation:drop-in .16s ease}
@keyframes drop-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hdrop{animation:none}}
.hdrop-head{padding:12px 15px;font-weight:600;font-size:12px;letter-spacing:.4px;text-transform:uppercase;
  color:var(--txt-dim);border-bottom:1px solid var(--line)}
.hdrop-row{display:flex;align-items:center;gap:9px;padding:10px 14px;font-size:13px;
  color:var(--txt);cursor:pointer;border-bottom:1px solid var(--line)}
.hdrop-row:hover{background:var(--bg-3)}
.hdrop-row input{accent-color:var(--accent);width:15px;height:15px;flex:none}
.hdrop-foot{padding:10px 14px}
.hdrop-hint{font-size:11px;color:var(--txt-dim)}
.hdrop-group{padding:10px 14px;border-bottom:1px solid var(--line)}
.hdrop-glabel{font-size:12.5px;color:var(--txt);margin-bottom:8px}
.hdrop-group label{display:flex;align-items:center;gap:8px;font-size:12.5px;
  color:var(--txt-dim);padding:4px 0;cursor:pointer}
.hdrop-group label:hover{color:var(--txt)}
.hdrop-group input{accent-color:var(--accent);width:14px;height:14px;flex:none}
.hdrop-item{display:block;padding:10px 14px;border-bottom:1px solid var(--line);
  font-size:13px;cursor:pointer;color:var(--txt)}
.hdrop-item:hover{background:var(--bg-3)}
.hdrop-item .sub{color:var(--txt-dim);font-size:11px;margin-top:2px}
.hdrop-empty{padding:18px 14px;text-align:center;color:var(--txt-dim);font-size:12px}
body.dense .worklist td,body.dense .worklist th{padding-top:5px;padding-bottom:5px}

/* ---- reference / web-search slide-over (report page) ---- */
.refpanel{position:fixed;top:0;right:0;width:min(560px,92vw);height:100vh;z-index:120;
  background:var(--bg-2);border-left:1px solid var(--line);box-shadow:-4px 0 24px rgba(0,0,0,.45);
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .22s ease}
.refpanel.open{transform:translateX(0)}
.refpanel-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.refpanel-head .title{font-weight:600;font-size:14px;margin-right:auto}
.refpanel-bar{display:flex;gap:7px;padding:10px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.refpanel-bar select{height:32px;background:var(--bg-3);border:1px solid var(--line);color:var(--txt);
  border-radius:6px;font-size:12.5px;padding:0 8px;cursor:pointer}
.refpanel-bar input{flex:1;min-width:140px;height:32px;background:var(--bg-3);border:1px solid var(--line);
  color:var(--txt);border-radius:6px;font-size:13px;padding:0 10px}
.refpanel-bar input:focus{outline:none;border-color:var(--accent)}
.refpanel-body{flex:1;position:relative;background:#fff}
.refpanel-body iframe{width:100%;height:100%;border:none}
.refpanel-hint{padding:8px 12px;font-size:11.5px;color:var(--txt-dim);border-top:1px solid var(--line);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.refpanel-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;color:#5a6b7d;text-align:center;padding:24px}
.ref-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:119;opacity:0;
  pointer-events:none;transition:opacity .22s ease}
.ref-backdrop.open{opacity:1;pointer-events:auto}

/* ---- worklist assignment dropdown + admin / staff page ---- */
.assign-sel{background:var(--bg-3);border:1px solid var(--line);color:var(--txt);
  border-radius:6px;font-size:12px;padding:4px 6px;max-width:160px;cursor:pointer}
.assign-sel:hover{border-color:var(--accent)}
.admin-wrap{max-width:1000px;margin:0 auto;padding:24px 20px}
.admin-card{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;
  padding:20px 22px;margin-bottom:20px}
.admin-card h3{margin:0 0 4px;font-size:16px;color:var(--accent)}
.admin-card p.sub{margin:0 0 16px;color:var(--txt-dim);font-size:13px}
.admin-form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.admin-form .field{margin:0;flex:1;min-width:140px}
.admin-form .field label{display:block;font-size:11px;color:var(--txt-dim);margin-bottom:5px}
.admin-form input,.admin-form select{width:100%;padding:9px 10px;background:var(--bg);
  border:1px solid var(--line);border-radius:7px;color:var(--txt)}
.admin-form input:focus,.admin-form select:focus{outline:none;border-color:var(--accent)}
.staff-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px}
.staff-table th{text-align:left;padding:9px 10px;color:var(--txt-dim);font-size:12px;
  border-bottom:1px solid var(--line)}
.staff-table td{padding:9px 10px;border-bottom:1px solid var(--line)}
.role-badge{padding:2px 9px;border-radius:11px;font-size:11px;font-weight:600}
.role-Radiologist{background:#1d3550;color:#79b6ec}
.role-Technician{background:#1f3a2c;color:#79d6a0}
.role-Admin{background:#3a3320;color:#e3c468}
.role-SuperAdmin{background:#3a2030;color:#e07da0}
.role-Receptionist{background:#173a3a;color:#67e8f9}
.ro-banner{background:#3a3320;color:#e3c468;border:1px solid #5a4a20;border-radius:8px;
  padding:9px 13px;font-size:12.5px;margin-bottom:10px}
.pw-input{width:100%;box-sizing:border-box;padding:9px 11px;border:1px solid var(--line);
  border-radius:8px;background:var(--bg);color:var(--txt);margin-bottom:14px}
.pw-input:focus{outline:none;border-color:var(--accent)}
.staff-inactive td{opacity:.45}
.staff-actions{display:flex;gap:6px;justify-content:flex-end}
.ae-cell{display:flex;gap:6px;align-items:center}
.ae-input{width:140px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;
  background:var(--bg-2,#0f2336);color:var(--txt);font-size:12px}
.unr-centre,.unr-rad{padding:5px 8px;border:1px solid var(--line);border-radius:6px;
  background:var(--bg-2,#0f2336);color:var(--txt);font-size:12px;margin-right:4px}

/* ---- AI token billing ---- */
.tok-pill{background:var(--chip,#292b31);color:var(--accent);border:1px solid var(--accent);
  padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap;
  margin-right:8px;align-self:center}
.tok-pill.low{color:var(--bad);border-color:var(--bad)}
.ai-banner.ai-blocked{background:#3a2222;border:1px solid #7a3a3a;color:#f0b8b8}
.tok-summary{display:flex;flex-wrap:wrap;gap:18px;margin:6px 0 14px}
.tok-stat{color:var(--txt-dim);font-size:13px}
.tok-stat b{color:var(--txt);font-size:15px}
.tok-ok{color:var(--good);font-weight:600}
.tok-low{color:var(--bad);font-weight:600}
.tok-topup{display:flex;gap:6px;align-items:center}
.tok-topup input{width:96px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;
  background:var(--bg-2,#0f2336);color:var(--txt);font-size:12px}

/* ---- share report modal ---- */
.modal-backdrop{position:fixed;inset:0;background:rgba(10,10,12,.7);z-index:300}
.share-modal{position:fixed;z-index:301;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(440px,94vw);background:var(--bg-2);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);padding:20px 22px}
.share-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.share-head .title{font-size:17px;font-weight:600;flex:1}
.share-sub{color:var(--txt-dim);font-size:12.5px;margin:0 0 16px;line-height:1.5}
.share-recip{display:flex;gap:8px;margin-bottom:16px}
.share-recip .chip.active{background:var(--accent);border-color:var(--accent);
  color:var(--accent-ink);font-weight:600}
.share-lbl{display:block;font-size:12px;color:var(--txt-dim);margin:0 0 6px}
.share-linkrow{display:flex;gap:8px}
.share-docrow{display:flex;gap:8px;margin-bottom:16px}
.share-docrow select{flex:1;min-width:0;padding:9px 11px;border:1px solid var(--line);
  border-radius:8px;background:var(--bg);color:var(--txt);font-size:13px}
.share-docrow select:focus{outline:none;border-color:var(--accent)}
.share-phonerow{display:flex;gap:8px;margin-bottom:16px}
.share-linkrow input,#sharePhone{flex:1;width:100%;padding:9px 11px;border:1px solid var(--line);
  border-radius:8px;background:var(--bg);color:var(--txt);font-size:13px}
#sharePhone{margin-bottom:0}
.share-exp{font-size:11px;color:var(--txt-dim);margin:6px 0 16px}
.share-send{display:flex;gap:10px}
.share-send .btn{flex:1;justify-content:center}
.share-note{color:var(--txt-dim);font-size:11px;margin:14px 0 0;line-height:1.5}

/* ---- capture image modal ---- */
.cap-modal{position:fixed;z-index:301;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(560px,94vw);max-height:92vh;overflow:auto;background:var(--bg-2);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:20px 22px}
.cap-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.cap-head .title{font-size:17px;font-weight:600;flex:1}
.cap-sub{color:var(--txt-dim);font-size:12.5px;margin:0 0 14px;line-height:1.5}
.cap-preview{position:relative;background:#000;border:1px solid var(--line);border-radius:10px;
  display:flex;align-items:center;justify-content:center;max-height:52vh;overflow:hidden}
.cap-preview img{max-width:100%;max-height:52vh;display:block}
#capCanvas{max-width:100%;max-height:52vh;display:block}
.cap-preview.cropping{cursor:crosshair}
.cap-cropbox{position:absolute;border:1.5px dashed var(--accent);
  background:rgba(58,160,160,.14);pointer-events:none;z-index:2}
.cap-cropbox.hidden{display:none}
.cap-crophint{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:3;
  background:rgba(10,12,16,.8);color:#fff;font-size:11.5px;padding:5px 11px;border-radius:20px;
  pointer-events:none;white-space:nowrap}
.cap-crophint.hidden{display:none}
/* capture edit toolbar */
.cap-edit{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.cap-tool{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:8px;
  border:1px solid var(--line);background:var(--bg-3);color:var(--txt);font-size:12.5px;
  cursor:pointer;font-family:inherit;transition:border-color .15s,background .15s,color .15s}
.cap-tool:hover{border-color:var(--accent);color:var(--accent)}
.cap-tool.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.cap-adj{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--txt-dim);
  padding:4px 8px;border:1px solid var(--line);border-radius:8px;background:var(--bg-3)}
.cap-adj input[type=range]{width:88px;accent-color:var(--accent);cursor:pointer}
.cap-lbl{display:block;font-size:12px;color:var(--txt-dim);margin:14px 0 6px}
#capCaption{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;
  background:var(--bg);color:var(--txt);font-size:13px}
.cap-actions{display:flex;gap:10px;margin-top:18px}
.cap-actions .btn{flex:1;justify-content:center}

/* ---- keyboard-shortcut editor ---- */
.keys-modal{width:min(640px,94vw)}
.keys-list{display:grid;grid-template-columns:1fr 1fr;gap:2px 26px;max-height:54vh;
  overflow-y:auto;padding:2px}
@media (max-width:560px){.keys-list{grid-template-columns:1fr}}
.key-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:3px 2px}
.key-row .kl{font-size:13px;color:var(--txt)}
.key-btn{min-width:56px;height:27px;padding:0 10px;border-radius:6px;border:1px solid var(--line);
  background:var(--bg-3);color:var(--txt);font-size:12.5px;cursor:pointer;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.key-btn:hover{border-color:var(--accent)}
.key-btn.listening{border-color:var(--accent);background:var(--accent);color:var(--accent-ink);font-weight:600}
/* plain-button variant of an .hdrop-row (the settings menu is mostly labels) */
.hdrop-btn{width:100%;background:none;border:none;color:var(--txt);cursor:pointer;text-align:left;font-size:13px}

/* captured images embedded in a report */
.rdoc-body .rpt-fig,.sh-rptbody .rpt-fig{margin:14px 0;text-align:center}
.rdoc-body .rpt-fig img,.sh-rptbody .rpt-fig img,
.rdoc-body img,.sh-rptbody img{max-width:100%;border-radius:6px;border:1px solid #d4dbe4}
.rdoc-body figcaption,.sh-rptbody figcaption{font-size:12px;color:#5a6b7d;margin-top:6px}
/* report images are click-to-select, then resizable/movable like in Word */
.rdoc-body .rpt-fig img{cursor:pointer}
.rdoc-body .rpt-fig img.img-selected{outline:2px solid var(--accent);outline-offset:2px}
.rdoc-body .rpt-fig.align-left{text-align:left}
.rdoc-body .rpt-fig.align-center{text-align:center}
.rdoc-body .rpt-fig.align-right{text-align:right}
/* floating handles + toolbar overlay (lives outside the editable body) */
#imgTools{position:fixed;top:0;left:0;width:0;height:0;z-index:400;pointer-events:none;display:none}
#imgTools.on{display:block}
#imgTools .ih{position:absolute;width:12px;height:12px;background:var(--accent);
  border:2px solid #fff;border-radius:3px;pointer-events:auto;box-shadow:0 1px 4px rgba(0,0,0,.4)}
#imgTools .ih.nw{cursor:nwse-resize}#imgTools .ih.ne{cursor:nesw-resize}
#imgTools .ih.sw{cursor:nesw-resize}#imgTools .ih.se{cursor:nwse-resize}
#imgTools .ibar{position:absolute;display:flex;gap:2px;pointer-events:auto;
  background:var(--bg-2);border:1px solid var(--line);border-radius:9px;padding:4px;
  box-shadow:var(--shadow);white-space:nowrap}
#imgTools .ibar button{border:none;background:none;color:var(--txt-dim);cursor:pointer;
  width:30px;height:28px;border-radius:6px;font-size:14px;display:flex;align-items:center;justify-content:center}
#imgTools .ibar button:hover{background:var(--bg-3);color:var(--txt)}
#imgTools .ibar button.on{background:var(--accent);color:var(--accent-ink)}
#imgTools .ibar .isep{width:1px;background:var(--line);margin:3px 2px}

/* ---- worklist: quick status tabs (segmented control w/ live counts) ---- */
.status-tabs{display:inline-flex;gap:3px;margin:2px 0 12px;padding:4px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:12px}
.status-tabs .stab{display:inline-flex;align-items:center;gap:7px;background:none;border:none;
  color:var(--txt-dim);font:inherit;font-weight:600;font-size:12.5px;padding:7px 13px;border-radius:8px;
  cursor:pointer;transition:background .14s,color .14s}
.status-tabs .stab:hover{color:var(--txt);background:var(--bg-3)}
.status-tabs .stab.active{color:#fff;background:var(--accent)}
.status-tabs .stab .tcount{min-width:19px;height:18px;padding:0 5px;border-radius:9px;font-size:10.5px;
  font-weight:700;display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg-3);color:var(--txt-dim);transition:background .14s,color .14s}
.status-tabs .stab:hover .tcount{background:var(--bg-2)}
.status-tabs .stab.active .tcount{background:rgba(255,255,255,.24);color:#fff}
.worklist .cell-main{line-height:1.3}
.worklist .cell-sub{font-size:11.5px;color:var(--txt-dim);margin-top:2px;line-height:1.2}
.worklist .status-cell{display:flex;align-items:center;gap:8px;white-space:nowrap}
.worklist .status-age{font-size:11px;color:var(--txt-dim)}
.worklist .status-age.old{color:var(--warn)}
.worklist .tat{font-weight:600;font-size:12.5px;color:var(--txt)}
.worklist .center-chip{display:inline-block;background:var(--chip);border:1px solid var(--line);
  border-radius:6px;padding:2px 8px;font-size:11.5px;font-weight:600;color:var(--txt-dim)}
.worklist .rpt-link{color:var(--accent);cursor:pointer;font-weight:600;font-size:12.5px;white-space:nowrap}
.worklist .rpt-link:hover{text-decoration:underline}

/* ---- viewer: touch + mobile/tablet + Safari ---- */
.pane .cs,.sh-cs{touch-action:none;-webkit-user-select:none;user-select:none}
/* crosshair mode: left click/drag localises a point across panes */
body.crosshair-mode .pane .cs{cursor:crosshair}
.lp-nav{-webkit-backdrop-filter:blur(8px)}
@media (max-width:820px){
  /* viewer stacks: series strip on top, image below; report/AI go full width */
  .viewer-body{flex-direction:column}
  .series-rail{display:flex;width:auto;height:96px;flex-direction:row;gap:8px;border-right:none;
    border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:hidden;padding:6px}
  .series-rail .thumb{flex:0 0 62px;margin:0}
  .stage{flex:1;min-height:0}
  .report-split{position:fixed;inset:54px 0 0 0;z-index:130;flex:none;width:auto;
    min-width:0;border-left:none}
  .ai-drawer{width:100vw;max-width:100vw;top:54px}
  .cap-actions{flex-direction:column}
}

/* ---- digital signature on reports ---- */
.rdoc-signimg{display:block;max-height:70px;max-width:280px;margin-bottom:4px}
.rdoc-sign-edit{margin-top:8px;background:none;border:1px dashed #b9c4d0;color:#5a6b7d;
  border-radius:6px;padding:5px 10px;font-size:12px;cursor:pointer}
.rdoc-sign-edit:hover{border-color:var(--accent);color:#1F3864}
@media print{.rdoc-sign-edit{display:none !important}}
/* signature upload modal preview */
.sig-preview{background:#fff;border:1px solid var(--line);border-radius:8px;min-height:90px;
  display:flex;align-items:center;justify-content:center;margin:6px 0 16px;padding:10px}
.sig-preview img{max-height:120px;max-width:100%}
.sig-empty{color:var(--txt-dim);font-size:12.5px}
/* shared (/r/) view sign-off */
.sh-sign{margin-top:18px;padding-top:12px;border-top:1px solid #cdd6e0;color:#33475b;font-size:13px}
.sh-signimg{display:block;max-height:64px;max-width:260px;margin-bottom:4px}
.sh-signdate{color:#5a6b7d;font-size:12px;margin-top:2px}

/* ---- worklist/report status updates ---- */
.status.Signedoff{background:#153a2c;color:#63d3a0;box-shadow:inset 0 0 0 1px rgba(99,211,160,.24)}
.status.Locked{background:#342b18;color:#dcb373;box-shadow:inset 0 0 0 1px rgba(220,179,115,.22);border:none}
.status.Locked.unlockable{cursor:pointer}
.status.Locked.unlockable:hover{background:#3f331d;color:#e8c283}
.pill.status.Signedoff{background:#153a2c;color:#63d3a0}
/* larger RadX logo in the app top bar */
.topbar .logo-img{height:46px}
.topbar .brand h1{font-size:21px}
.topbar .logo{width:42px;height:42px;font-size:18px}
/* worklist date-range fields */
.date-field{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--txt-dim);
  background:var(--bg-2);border:1px solid var(--line);border-radius:7px;padding:0 8px;height:34px}
.date-field input[type=date]{background:none;border:none;color:var(--txt);font-size:12.5px;
  color-scheme:dark;padding:4px 0;outline:none}
:root.theme-light .date-field input[type=date]{color-scheme:light}
/* report auto-save indicator */
.rail-autosave{font-size:11.5px;color:var(--txt-dim);margin-bottom:6px;min-height:14px}

/* ---- Scheduler: week-at-a-glance calendar (worklist) ---- */
.sched-view{flex:1;display:flex;flex-direction:column;min-height:0}
.sched-head{display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--line)}
.sched-range{color:var(--txt-dim);font-size:13px;margin-left:6px}
.sched-grid{flex:1;display:grid;grid-template-columns:repeat(7,1fr);gap:1px;
  background:var(--line);overflow:auto;min-height:0}
.sched-day{background:var(--bg);display:flex;flex-direction:column;min-width:0}
.sched-day.today{background:#1c2d2b}
:root.theme-light .sched-day.today{background:#e7f2f2}
.sched-daylabel{padding:10px 10px 8px;font-size:12px;color:var(--txt-dim);font-weight:600;
  border-bottom:1px solid var(--line);flex-shrink:0}
.sched-day.today .sched-daylabel{color:var(--accent)}
.sched-daylabel .num{color:var(--txt);font-size:14px;margin-left:4px}
.sched-items{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px}
.sched-item{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--accent-2);
  border-radius:7px;padding:7px 9px;cursor:pointer;font-size:12px}
.sched-item:hover{border-color:var(--accent)}
.sched-time{font-weight:700;color:var(--accent-2);font-size:11.5px}
.sched-pat{color:var(--txt);margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sched-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.sched-meta .mod{font-size:10.5px}
.sched-meta .status{font-size:9.5px;padding:2px 7px}
.sched-empty{color:var(--txt-dim);font-size:11.5px;text-align:center;padding:14px 4px}

/* ---- personal report templates (save current report / manage list) ---- */
.tmpl-list{max-height:220px;overflow-y:auto}
.tmpl-row{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 2px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--txt)}
.tmpl-row:last-child{border-bottom:none}
.tmpl-row .del{color:var(--bad);cursor:pointer;font-size:13px;flex-shrink:0}
.tmpl-row .del:hover{opacity:.7}
.tmpl-empty{color:var(--txt-dim);font-size:12px;padding:8px 2px}

/* ---- colour scheme toggle (worklist, bottom-right) ---- */
.theme-toggle{position:fixed;right:22px;bottom:22px;z-index:400;width:46px;height:46px;
  border-radius:50%;background:var(--bg-2);border:1px solid var(--line);color:var(--txt);
  font-size:19px;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:var(--shadow);transition:.15s}
.theme-toggle:hover{border-color:var(--accent);transform:translateY(-1px)}

/* ---- patient history (worklist: add; viewer: read-only dropdown) ---- */
.hist-textarea{width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:8px;
  background:var(--bg);color:var(--txt);font-size:13px;font-family:inherit;resize:vertical}
.hist-images{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px;
  max-height:220px;overflow-y:auto}
.hist-thumb{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg)}
.hist-thumb img{width:100%;height:76px;object-fit:cover;display:block;cursor:pointer}
.hist-thumb-del{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;
  background:rgba(10,15,22,.7);color:#fff;border:none;font-size:11px;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.hist-thumb-del:hover{background:var(--bad)}
.hist-thumb-cap{font-size:10.5px;color:var(--txt-dim);padding:3px 6px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.hist-addrow{display:flex;gap:8px}
.hist-addrow input{flex:1;padding:8px 10px;border:1px solid var(--line);border-radius:7px;
  background:var(--bg);color:var(--txt);font-size:12.5px}
.hist-empty{grid-column:1/-1;color:var(--txt-dim);font-size:12px;text-align:center;padding:14px 0}

/* viewer: read-only History dropdown, anchored under the toolbar button */
.hist-dropdown{position:fixed;z-index:150;width:360px;max-height:72vh;overflow-y:auto;
  background:color-mix(in srgb,var(--bg-2) 94%,transparent);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:13px;
  box-shadow:0 20px 52px -14px rgba(0,0,0,.62);animation:drop-in .16s ease;
  scrollbar-width:thin;scrollbar-color:var(--bg-3) transparent}
@media(prefers-reduced-motion:reduce){.hist-dropdown{animation:none}}
.hist-dd-head{display:flex;align-items:center;gap:8px;justify-content:space-between;
  padding:13px 15px;border-bottom:1px solid var(--line);font-weight:600;font-size:13.5px;
  position:sticky;top:0;background:inherit;backdrop-filter:blur(14px);z-index:1}
.hist-dd-body{padding:14px}
.hist-dd-meta{font-size:11px;color:var(--txt-dim);margin-bottom:10px}
.hist-dd-text{white-space:pre-wrap;font-size:13px;color:var(--txt);line-height:1.55;
  margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.hist-dd-images{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hist-dd-img{border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer;background:var(--bg)}
.hist-dd-img img{width:100%;height:88px;object-fit:cover;display:block}
.hist-dd-img .cap{font-size:10.5px;color:var(--txt-dim);padding:4px 6px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.hist-dd-empty{color:var(--txt-dim);font-size:12.5px;text-align:center;padding:22px 4px}
/* small dot on the History toolbar button when there is history to see */
.tool.has-history{position:relative}
.tool.has-history::after{content:"";position:absolute;top:6px;right:8px;width:7px;height:7px;
  border-radius:50%;background:var(--warn);box-shadow:0 0 0 2px var(--bg-2)}

/* ================================================================
   MOBILE — Phase 1 foundation (responsive, all browsers, PWA)
   Fixes: scroll traps (dvh + overflow chain), tiny tap targets,
   the wide worklist table (→ cards), and top-bar crowding.
   ================================================================ */
:root{ --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px); }
html{ -webkit-text-size-adjust:100%; }
/* momentum scrolling on any scroll container */
.table-wrap,.sidebar-scroll,.panel-body,.drawer-body,.rdoc-scroll,.hdrop{ -webkit-overflow-scrolling:touch; }

@media (max-width:760px){
  /* ---- top bar: size to content, wrap, drop the crowding ---- */
  .topbar{ height:auto; flex-wrap:wrap; gap:8px 12px; padding:8px 12px;
    padding-top:calc(8px + var(--safe-t)); }
  .topbar .brand h1{ font-size:17px; }
  .topbar .logo-img{ height:32px; }
  .topbar .spacer{ display:none; }
  .topnav{ order:6; width:100%; margin-left:0; overflow-x:auto; scrollbar-width:none; }
  .topnav::-webkit-scrollbar{ display:none; }
  #ctxPill{ display:none; }
  .userchip #hiName{ display:none; }
  .userchip{ margin-left:auto; }

  /* ---- worklist: the page scrolls, not an inner box ---- */
  .app{ display:block; height:auto; }
  .main{ overflow:visible; }
  #studyListView{ overflow:visible; }
  body:not(.viewerpage):not(.embed){ height:auto; min-height:100dvh; overflow-y:auto; }

  /* filters: stacked, full-width, thumb-sized */
  .filters{ padding:10px 12px; gap:8px; }
  .filters input,.filters select,.filters .f-name{ min-width:0; width:100%; height:42px; font-size:15px; }
  .filters .date-field{ flex:1 1 calc(50% - 4px); font-size:12px; }
  .filters .date-field input{ width:100%; }
  .filters .btn{ flex:1; height:42px; }

  .list-head{ padding:10px 12px; flex-wrap:wrap; gap:8px; }
  .list-head h3{ width:100%; }
  .toolbar-mini{ width:100%; }
  .toolbar-mini .btn{ flex:1; }

  .status-tabs{ width:100%; overflow-x:auto; scrollbar-width:none; }
  .status-tabs::-webkit-scrollbar{ display:none; }

  /* ---- worklist → compact tappable list (scan by name, tap opens study) ----
     Only patient · study · status show; the rest lives inside the study, so a
     doctor scrolls a short list instead of tall cards. Long-press-free: the
     whole row opens the viewer. */
  .table-wrap{ overflow:visible; }
  table.worklist{ display:block; width:100%; min-width:0; }
  table.worklist thead{ display:none; }
  table.worklist tbody{ display:block; }
  table.worklist tbody tr{ display:grid; grid-template-columns:1fr auto; column-gap:10px; row-gap:1px;
    align-items:center; background:var(--bg-2); border:1px solid var(--line); border-left:3px solid var(--line);
    border-radius:10px; margin:0 10px 7px; padding:9px 12px; }
  table.worklist tbody tr[data-st="Signedoff"]{ border-left-color:#4bb27c; }
  table.worklist tbody tr[data-st="Preliminary"]{ border-left-color:#d3a24a; }
  table.worklist tbody tr[data-st="Locked"]{ border-left-color:#c98b3a; }
  table.worklist tbody tr[data-st="Readytoview"]{ border-left-color:#7c86e0; }
  table.worklist tbody tr[data-st="Uploading"]{ border-left-color:#5f78cc; }
  table.worklist tbody tr[data-st="Scheduled"]{ border-left-color:#5ab6c9; }
  /* hide every column by default; show only the three we want */
  table.worklist td{ display:none; border:none; padding:0; box-shadow:none !important; }
  table.worklist td::before{ display:none; }
  table.worklist td[data-col="patient"]{ display:block; grid-column:1; grid-row:1; min-width:0; }
  table.worklist td[data-col="patient"] .cell-main{ font-size:14.5px; font-weight:700; line-height:1.25;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  table.worklist td[data-col="patient"] .cell-sub{ font-size:11px; color:var(--txt-dim); margin-top:0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  table.worklist td[data-col="study"]{ display:block; grid-column:1; grid-row:2; min-width:0;
    font-size:11.5px; color:var(--txt-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  table.worklist td[data-col="study"] .cell-main{ display:inline; font-weight:500; }
  table.worklist td[data-col="study"] .cell-sub{ display:none; }
  table.worklist td[data-col="status"]{ display:block; grid-column:2; grid-row:1 / span 2;
    justify-self:end; align-self:center; }
  table.worklist td[data-col="status"] .status-cell{ flex-direction:column; align-items:flex-end; gap:3px; }
  table.worklist td[data-col="status"] .status-age{ font-size:10px; }

  .pager{ flex-wrap:wrap; gap:8px; padding-bottom:calc(10px + var(--safe-b)); }

  /* modals: full-width sheets with room for the notch */
  .modal-card,.reg-card{ width:calc(100vw - 24px); max-width:none; }
  .reg-grid{ grid-template-columns:1fr; }
}