/* Cancer Manager Clinical Workflow v1.3.0
   Interaction maturity pass: focus mode, side details, product dialogs,
   durable filters and calmer high-density record browsing. */

:root{
  --workflow-overlay:rgba(15,23,42,.28);
  --workflow-shadow:0 18px 55px rgba(15,23,42,.16);
  --workflow-border:#e4e8ee;
}

/* --- Focus mode --------------------------------------------------------- */
.sidebar,.main{transition:transform .18s ease,margin-left .18s ease,width .18s ease,padding .18s ease}
.focus-mode .sidebar{transform:translateX(calc(-1 * var(--sidebar-width) - 20px));pointer-events:none}
.focus-mode .main{margin-left:0;width:100%;padding-left:38px;padding-right:38px}
.focus-mode .topbar{margin-left:-38px;margin-right:-38px;padding-left:38px;padding-right:38px}
.focus-mode-toggle{display:inline-flex;align-items:center;gap:7px}
.focus-mode-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.focus-mode .focus-mode-toggle{background:var(--brand-soft);border-color:#c9dafc;color:var(--brand-strong)}
@media(max-width:900px){.focus-mode-toggle{display:none}.focus-mode .main{padding-left:16px;padding-right:16px}.focus-mode .topbar{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}}

/* --- Loading ------------------------------------------------------------ */
.loading-card{display:flex;align-items:center;gap:10px;min-height:58px;color:#667085}
.loading-spinner{width:18px;height:18px;border-radius:50%;border:2px solid #dce5f4;border-top-color:var(--brand);animation:workflowSpin .7s linear infinite}
@keyframes workflowSpin{to{transform:rotate(360deg)}}

/* --- Tables ------------------------------------------------------------- */
.table-primary-link{appearance:none;border:0;padding:0;background:transparent;color:var(--text-strong);font:inherit;font-weight:720;text-align:left;cursor:pointer;line-height:1.45}
.table-primary-link:hover{color:var(--brand-strong);text-decoration:underline;text-underline-offset:3px}
.table-primary-link:focus-visible{outline:2px solid #8cb0ef;outline-offset:3px;border-radius:3px}
.table-pager{gap:12px;align-items:center}
.table-pager-info{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pager-size-label{display:inline-flex;align-items:center;gap:6px;color:#667085;font-size:12px}
.pager-size-select{height:30px;min-width:62px;border:1px solid #dce2e9;border-radius:7px;background:#fff;color:#344054;padding:0 7px}
.table-page-current{min-width:56px;text-align:center;font-variant-numeric:tabular-nums}
.row-menu summary{border-radius:8px}
#labList .table-wrap,#documentList .table-wrap{scrollbar-gutter:stable}

/* --- Clinical drawer ---------------------------------------------------- */
.clinical-drawer-backdrop{position:fixed;inset:0;background:var(--workflow-overlay);z-index:130;opacity:1;transition:opacity .16s ease}
.clinical-drawer{position:fixed;top:0;right:0;bottom:0;width:min(470px,92vw);background:#fff;z-index:135;display:flex;flex-direction:column;box-shadow:var(--workflow-shadow);border-left:1px solid var(--workflow-border);transform:translateX(0);transition:transform .18s ease}
.clinical-drawer.hidden{display:flex!important;transform:translateX(105%);pointer-events:none}
.clinical-drawer-backdrop.hidden{display:block!important;opacity:0;pointer-events:none}
.clinical-drawer-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:22px 22px 17px;border-bottom:1px solid #edf0f3}
.clinical-drawer-head h2{margin:2px 0 0;font-size:20px;line-height:1.35;color:#182230;letter-spacing:-.015em}
.clinical-drawer-eyebrow{font-size:11px;font-weight:760;letter-spacing:.08em;color:#7b8796;text-transform:uppercase}
.clinical-drawer-subtitle{margin-top:5px;color:#667085;font-size:12.5px;line-height:1.55}
.clinical-drawer-body{flex:1;overflow:auto;padding:10px 22px 24px}
.clinical-drawer-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;padding:14px 22px 18px;border-top:1px solid #edf0f3;background:#fbfcfd}
.clinical-detail-list{margin:0}
.clinical-detail-row{display:grid;grid-template-columns:118px minmax(0,1fr);gap:18px;padding:13px 0;border-bottom:1px solid #f0f2f5}
.clinical-detail-row:last-child{border-bottom:0}
.clinical-detail-row dt{color:#7a8492;font-size:12.5px}
.clinical-detail-row dd{margin:0;color:#344054;font-size:13.5px;line-height:1.6;overflow-wrap:anywhere}
.clinical-detail-row dd.clinical-detail-emphasis{font-size:20px;font-weight:770;color:#172033;line-height:1.25;font-variant-numeric:tabular-nums}
body.drawer-open{overflow:hidden}
@media(max-width:640px){.clinical-drawer{width:100vw}.clinical-drawer-head,.clinical-drawer-body,.clinical-drawer-actions{padding-left:17px;padding-right:17px}.clinical-detail-row{grid-template-columns:96px minmax(0,1fr);gap:12px}}

/* --- Product dialog ----------------------------------------------------- */
.product-dialog{position:fixed;inset:0;z-index:170;display:grid;place-items:center;padding:20px}
.product-dialog.hidden{display:none}
.product-dialog-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.38);backdrop-filter:blur(1.5px)}
.product-dialog-card{position:relative;width:min(520px,calc(100vw - 28px));border:1px solid #e1e6ec;border-radius:16px;background:#fff;box-shadow:0 28px 80px rgba(15,23,42,.24);overflow:hidden}
.product-dialog-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:20px 22px 14px}
.product-dialog-head h2{margin:2px 0 0;font-size:19px;color:#182230}
.product-dialog-eyebrow{font-size:10.5px;font-weight:760;letter-spacing:.08em;color:#7a8492}
.product-dialog-message{padding:0 22px 18px;color:#475467;font-size:13.5px;line-height:1.72}
.product-dialog-field{padding:0 22px 20px}
.product-dialog-field label{display:block;margin-bottom:7px;font-size:12.5px;font-weight:680;color:#344054}
.product-dialog-field-hint{margin-top:6px;color:#8490a0;font-size:11.5px}
.product-dialog-actions{display:flex;justify-content:flex-end;gap:8px;padding:14px 22px 18px;background:#fafbfc;border-top:1px solid #eef1f4}
.product-dialog.tone-danger .product-dialog-eyebrow{color:#b42318}
.product-dialog.tone-danger .product-dialog-confirm,.product-dialog.tone-danger #productDialogConfirm{background:#c43232;border-color:#c43232}
.product-dialog.tone-warning .product-dialog-eyebrow{color:#b54708}
.product-dialog.tone-warning #productDialogConfirm{background:#b96a17;border-color:#b96a17}
body.dialog-open{overflow:hidden}

/* --- Filter and browsing refinements ----------------------------------- */
.filter-bar,.filter-toolbar,.search-toolbar{scroll-margin-top:96px}
.table-wrap table td,.table-wrap table th{vertical-align:middle}
.table-wrap table td:nth-child(4){font-variant-numeric:tabular-nums}
.row-menu-popover{min-width:170px}
.row-menu-popover .button,.row-menu-popover a.button{justify-content:flex-start;width:100%;text-align:left}

/* Keep key data visually dominant without introducing more cards. */
#labList td:nth-child(4){font-weight:680;color:#27364a}
#labList td:nth-child(4).abnormal{color:#b42318}
#documentList td:nth-child(4){max-width:340px}
#documentList .table-primary-link{max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}

/* Mature empty states: calmer and easier to scan. */
.empty,.trend-empty,.followup-empty{background:#fbfcfd;border:1px dashed #dce2e9;border-radius:11px;color:#7b8796}

/* Wider analytical pages benefit from focus mode, but remain readable normally. */
#view-trends .panel,#view-followup .panel,#view-imaging .panel,#view-quality .panel{scroll-margin-top:95px}

/* Small screen dialog/drawer safety. */
@media(max-width:720px){
  .product-dialog{padding:10px;align-items:end}
  .product-dialog-card{border-radius:16px 16px 10px 10px}
  .product-dialog-actions{position:sticky;bottom:0}
  .table-pager{align-items:flex-start}
  .table-pager-actions{width:100%;overflow:auto;justify-content:flex-start}
}