/* Cancer Manager Product UX v1.2.0
   Second-pass product polish: progressive disclosure, workspace tabs,
   accessible metric pickers and calmer clinical information hierarchy.
   No medical data or parser logic is changed here. */

:root{
  --sidebar-width:244px;
  --app-bg:#f7f8fa;
  --surface:#ffffff;
  --surface-subtle:#fafbfc;
  --surface-tint:#f5f8fc;
  --line:#e6e9ee;
  --line-soft:#eef1f4;
  --text-strong:#172033;
  --text:#344054;
  --text-soft:#6b7280;
  --brand:#356bd8;
  --brand-strong:#2857b9;
  --brand-soft:#eef4ff;
  --radius:11px;
  --radius-lg:14px;
}

body{background:var(--app-bg);font-size:14.5px;line-height:1.65;color:var(--text)}
.sidebar{width:var(--sidebar-width);padding:16px 12px 13px;background:#fbfcfd;border-right:1px solid #e8ebef}
.brand-mark{background:#356bd8;box-shadow:none;border-radius:10px}
.sidebar-patient{background:#fff;border-color:#e7ebf0;box-shadow:0 1px 2px rgba(16,24,40,.025)}
.nav-section{margin-bottom:13px}
.nav-section-title{padding-left:10px;font-size:9.5px;letter-spacing:.10em;color:#9ca3af}
.nav-item{min-height:40px;border-radius:9px;padding:7px 9px;color:#526071}
.nav-item:hover{background:#f2f5f9}
.nav-item.active{background:#eaf1ff;color:#2557b5}
.nav-item.active .nav-icon{background:transparent;color:#356bd8}
.nav-icon{width:25px;height:25px;flex-basis:25px}
.nav-label{font-size:13px;font-weight:650}
.production-badge{background:#f3f5f7;border-color:#e5e7eb;color:#6b7280}

.main{margin-left:var(--sidebar-width);width:calc(100% - var(--sidebar-width));padding:0 30px 56px}
.main>.view,.main>#loading,.main>#errorBox{max-width:1500px}
.topbar{margin:0 -30px 24px;padding:12px 30px;min-height:76px;background:rgba(255,255,255,.98);backdrop-filter:none;border-color:#e8ebef}
.topbar h1{font-size:21px;font-weight:780;letter-spacing:-.015em}
.topbar p{font-size:12.5px;color:#7a8392}
.page-context{font-size:10.5px;color:#a0a7b2}
.global-search-trigger{height:38px;min-width:236px;background:#fafbfc;border-color:#e2e6eb}

/* Product surfaces are flatter than the previous card-heavy layout. */
.panel{border:1px solid #e7eaee;border-radius:13px;padding:20px 21px;margin-bottom:16px;box-shadow:0 1px 2px rgba(16,24,40,.018)}
.panel-head{margin-bottom:15px}
.panel-head h2{font-size:16.5px;font-weight:760}
.patient-hero{border-radius:14px;border-color:#e6e9ee;box-shadow:none;padding:19px 21px}
.patient-hero:before{width:3px;background:#356bd8}
.summary-card,.home-kpi,.home-metric-card,.quality-kpi,.dictionary-kpi,.followup-kpi{box-shadow:none!important;border-color:#e9ecef!important}
.record{border-color:#e9ecef;border-radius:10px;padding:15px 16px}
.record:hover{background:#fbfcfd;border-color:#dfe4ea}

.button{border-radius:9px;min-height:38px;font-size:12.8px;font-weight:650}
.button.primary{background:#356bd8;border-color:#356bd8;box-shadow:none}
.button.primary:hover{background:#2d5fc4;border-color:#2d5fc4}
.button.secondary{border-color:#dfe4ea;background:#fff}
.button.secondary:hover{border-color:#cfd6df;background:#fafbfc}
.button.ghost{color:#6b7280}
.input,textarea.input,select.input{border-radius:9px;border-color:#dde2e8;background:#fff;min-height:40px;font-size:13.2px}
.input:focus,textarea.input:focus,select.input:focus{border-color:#84a6e8;box-shadow:0 0 0 3px rgba(53,107,216,.09)}

/* Workspace tabs: dense analytical pages become one task at a time. */
.workspace-tabs{
  display:inline-flex;gap:3px;align-items:center;margin:0 0 14px;padding:4px;
  background:#eceff3;border:1px solid #e0e4e9;border-radius:11px;
  position:sticky;top:84px;z-index:18;box-shadow:0 5px 16px rgba(16,24,40,.035)
}
.workspace-tab{
  appearance:none;border:0;background:transparent;color:#667085;border-radius:8px;min-height:34px;
  padding:7px 14px;font:inherit;font-size:12.5px;font-weight:680;cursor:pointer;white-space:nowrap;
  transition:background .12s,color .12s,box-shadow .12s;
}
.workspace-tab:hover{color:#344054;background:rgba(255,255,255,.45)}
.workspace-tab.active{background:#fff;color:#244f9f;box-shadow:0 1px 3px rgba(16,24,40,.09)}
.workspace-panel{display:none!important}
.workspace-panel.active{display:block!important}
#view-followup>.workspace-panel.active,#view-quality>.workspace-panel.active{display:block!important}

/* Filters read as one compact control surface rather than another nested card. */
.filter-grid,.trend-toolbar,.cycle-compare-toolbar,.imaging-toolbar,.imaging-compare-toolbar,.dictionary-toolbar,.quality-toolbar,.followup-settings,.stage-observe-toolbar{
  background:#fafbfc;border-color:#e8ebef;border-radius:10px;padding:11px;
}
.trend-preset-row{gap:6px;margin-bottom:10px}
.trend-preset-row .button{background:#fff;border:1px solid #e3e7ec;color:#5e6978}
.trend-preset-row .button:hover{border-color:#bfcbe0;color:#2857b9;background:#f8faff}
.trend-options-line{background:#fafbfc;border:1px solid #edf0f3;border-radius:9px;padding:8px 10px;margin:10px 0;gap:16px}
.trend-options-line label{font-size:12px;color:#667085}
.help-details{border-color:#edf0f3;background:#fbfcfd}

/* Native multiple-selects are preserved for business logic but replaced visually. */
.native-multi-select-hidden{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}
.smart-multi-picker{position:relative;width:100%;min-width:0}
.smart-picker-trigger{
  width:100%;min-height:42px;border:1px solid #dde2e8;background:#fff;border-radius:9px;padding:6px 9px;
  display:flex;align-items:center;gap:8px;text-align:left;color:#344054;cursor:pointer;
}
.smart-picker-trigger:hover{border-color:#cbd3dc}
.smart-picker-trigger[aria-expanded="true"]{border-color:#84a6e8;box-shadow:0 0 0 3px rgba(53,107,216,.08)}
.smart-picker-value{display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-width:0;flex:1}
.smart-picker-placeholder{font-size:13px;color:#98a2b3}
.smart-picker-chip{display:inline-flex;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 7px;background:#f0f4fb;color:#35588f;border-radius:6px;font-size:11.5px;font-weight:650}
.smart-picker-more{font-size:11.5px;color:#667085;font-weight:700}
.smart-picker-caret{font-size:12px;color:#98a2b3}
.smart-picker-popover{
  position:absolute;z-index:90;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid #dde3ea;
  border-radius:11px;box-shadow:0 16px 36px rgba(16,24,40,.14);overflow:hidden;min-width:300px;
}
.smart-picker-popover.hidden{display:none}
.smart-picker-search-wrap{padding:9px;border-bottom:1px solid #edf0f3;background:#fbfcfd}
.smart-picker-search{width:100%;height:35px;border:1px solid #dfe4ea;border-radius:8px;padding:0 10px;outline:none;font:inherit;font-size:12.5px}
.smart-picker-search:focus{border-color:#84a6e8;box-shadow:0 0 0 2px rgba(53,107,216,.07)}
.smart-picker-list{max-height:310px;overflow:auto;padding:5px}
.smart-picker-option{display:flex;align-items:flex-start;gap:9px;border-radius:7px;padding:8px 9px;cursor:pointer;color:#475467;font-size:12.5px;line-height:1.4}
.smart-picker-option:hover{background:#f6f8fb}
.smart-picker-option.selected{background:#f1f5fd;color:#244f9f}
.smart-picker-option input{margin-top:2px;accent-color:#356bd8}
.smart-picker-footer{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-top:1px solid #edf0f3;background:#fbfcfd;font-size:11.5px;color:#7a8392}
.smart-picker-clear{border:0;background:transparent;color:#356bd8;cursor:pointer;font:inherit;font-size:11.5px;font-weight:650}
.smart-picker-empty{padding:24px 12px;text-align:center;color:#98a2b3;font-size:12px}

/* Tables: clearer hierarchy, lighter chrome and more readable results. */
.table-wrap{border-radius:10px;border-color:#e6e9ed;max-height:70vh}
th,td{padding:10px 12px;border-bottom-color:#eff1f4}
th{background:#fafbfc;color:#77808f;font-size:11.3px;letter-spacing:.015em}
tbody tr:hover td{background:#f9fbfe}
td strong{font-weight:720;color:#273548}
.row-menu>summary{height:31px;border-color:#dfe4e9;background:#fff;color:#667085}
.row-menu>summary:after{content:"···";letter-spacing:1px;font-weight:800;margin:0;font-size:12px}
.row-menu>summary{font-size:0;min-width:38px;width:38px;padding:0}
.row-menu-popover{min-width:160px;border-radius:9px;box-shadow:0 12px 28px rgba(16,24,40,.13)}

/* Documents: import is progressive disclosure, list is the primary workspace. */
.product-disclosure{margin-bottom:14px;border:1px solid #e3e7ec;border-radius:11px;background:#fff;overflow:hidden}
.product-disclosure>summary{list-style:none;cursor:pointer;min-height:58px;padding:11px 15px;display:flex;align-items:center;justify-content:space-between;gap:14px;color:#344054}
.product-disclosure>summary::-webkit-details-marker{display:none}
.product-disclosure>summary:hover{background:#fafbfc}
.product-disclosure>summary strong{display:block;font-size:14px;color:#253247}
.product-disclosure>summary small{display:block;font-size:11.5px;color:#8a93a0;margin-top:2px;font-weight:500}
.product-disclosure .disclosure-chevron{color:#8b95a3;transition:transform .15s}
.product-disclosure[open] .disclosure-chevron{transform:rotate(180deg)}
.product-disclosure .disclosure-panel{margin:0;border:0;border-top:1px solid #edf0f3;border-radius:0;box-shadow:none;background:#fbfcfd}
.documents-primary-panel{margin-top:0}
.upload-form{background:transparent}
.upload-help .note{background:#f4f7fb}

/* Calendar and analytical matrices gain a stronger header/focus hierarchy. */
.followup-kpi-grid,.quality-kpi-grid{gap:9px}
.followup-kpi,.quality-kpi{border-radius:10px!important;padding:12px 13px!important;background:#fff}
.followup-kpi strong,.quality-kpi-value{font-size:21px!important;color:#243147!important}
.followup-fix-note{background:#f7f9fc;border-color:#e7ebf0;color:#667085}
.followup-calendar-grid{border-radius:10px;border-color:#e7eaee;background:#e7eaee}
.followup-weekday{background:#fafbfc;color:#7b8492}
.followup-day{min-height:105px}
.stage-matrix-wrap{border-radius:10px;border-color:#e6e9ed}
.stage-matrix th{background:#fafbfc;color:#697384}
.stage-matrix-stage{background:#fbfcfd}
.stage-matrix-value:hover{background:#f7faff}

/* KPI and stat cards: reduce visual noise while keeping key numbers scannable. */
.trend-stats-grid{gap:9px}
.trend-stat-card{border-color:#e9ecef;border-radius:10px;padding:12px 13px;box-shadow:none}
.trend-stat-value{font-size:22px;color:#243147}
.home-dashboard-grid{gap:10px}
.home-metric-card{border-radius:10px;padding:13px 14px}
.home-metric-value{font-size:22px}

/* Toasts replace blocking alerts for lightweight guidance. */
.product-toast-host{position:fixed;right:22px;top:92px;z-index:200;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.product-toast{min-width:260px;max-width:420px;padding:10px 12px;border:1px solid #dfe4ea;border-radius:10px;background:#fff;box-shadow:0 12px 30px rgba(16,24,40,.14);display:flex;gap:9px;align-items:flex-start;color:#475467;font-size:12.5px;opacity:0;transform:translateY(-6px);transition:.18s ease}
.product-toast.visible{opacity:1;transform:none}
.product-toast-dot{width:8px;height:8px;border-radius:50%;background:#5b8ee8;margin-top:6px;flex:0 0 8px}
.product-toast.warning .product-toast-dot{background:#d69437}
.product-toast.success .product-toast-dot{background:#2d8a63}
.product-toast.error .product-toast-dot{background:#c64a43}

/* Report is allowed more breathing room than data-entry pages. */
#view-report .panel{padding:24px 26px}
.report-toolbar{gap:7px}
.report-note{background:#f7f9fc;border:1px solid #edf0f3}

/* Comfortable is the default. Compact remains a conscious choice. */
body.ui-compact{font-size:13.5px;line-height:1.5}
body.ui-compact .panel{padding:15px 17px;margin-bottom:12px}
body.ui-compact th,body.ui-compact td{padding:7px 9px;font-size:12px}
body.ui-compact .record{padding:11px 13px}
body.ui-compact .workspace-tab{min-height:30px;padding:5px 11px;font-size:11.8px}

@media (max-width:1200px){
  .main{padding-left:22px;padding-right:22px}.topbar{margin-left:-22px;margin-right:-22px;padding-left:22px;padding-right:22px}
  .workspace-tabs{top:82px;max-width:100%;overflow:auto}
  .smart-picker-popover{min-width:260px}
}
@media (max-width:960px){
  .main{margin-left:0;width:100%;padding-left:16px;padding-right:16px}
  .topbar{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
  .workspace-tabs{position:static;width:100%;display:flex;overflow:auto}
  .workspace-tab{flex:1;text-align:center}
  .product-toast-host{left:16px;right:16px;top:78px}.product-toast{max-width:none;width:100%}
}
@media (max-width:720px){
  .panel{padding:16px 14px;border-radius:11px}
  .smart-picker-popover{position:fixed;left:12px;right:12px;top:110px;min-width:0;max-height:70vh}
  .smart-picker-list{max-height:52vh}
}