/* Cancer Manager Production UI v1.0.0
   仅覆盖视觉、导航与交互密度；不改变医疗数据和业务接口。 */

:root{
  --sidebar-width:232px;
  --sidebar-collapsed-width:76px;
  --topbar-height:86px;
  --surface:#ffffff;
  --surface-soft:#f8fafc;
  --surface-subtle:#f4f7fb;
  --line:#e7ebf2;
  --line-strong:#d9e0ea;
  --text-strong:#111827;
  --text:#273244;
  --text-soft:#667085;
  --brand:#2857d8;
  --brand-strong:#1f46b8;
  --brand-soft:#edf3ff;
  --sidebar:#111827;
  --sidebar-soft:#1f2937;
  --sidebar-line:#2d3748;
  --success:#067647;
  --warning:#b54708;
  --danger:#b42318;
  --shadow-sm:0 1px 2px rgba(16,24,40,.04);
  --shadow-md:0 8px 24px rgba(16,24,40,.07);
  --radius-sm:8px;
  --radius:12px;
  --radius-lg:16px;
}

html{background:#f4f6fa}
body{
  background:#f4f6fa;
  color:var(--text);
  min-width:320px;
}
body.modal-open{overflow:hidden}

/* ===== Layout ===== */
.app-shell{min-height:100vh;display:block}
.sidebar{
  width:var(--sidebar-width);
  padding:14px 12px 12px;
  background:var(--sidebar);
  border-right:1px solid #1e293b;
  box-shadow:none;
  transition:width .18s ease,transform .18s ease;
  overflow:hidden;
}
.sidebar-header{display:flex;align-items:center;gap:8px;min-height:48px}
.brand{padding:0 4px;min-width:0;flex:1;gap:10px}
.brand-mark{width:36px;height:36px;border-radius:10px;font-size:13px;flex:0 0 36px}
.brand-copy{min-width:0}
.brand-title{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-subtitle{font-size:10px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-collapse-btn{
  width:28px;height:28px;border:1px solid #334155;background:#172033;color:#cbd5e1;
  border-radius:8px;cursor:pointer;font-size:22px;line-height:1;padding:0;flex:0 0 28px;
}
.sidebar-collapse-btn:hover{background:#243041;color:#fff}

.sidebar-patient{
  display:flex;align-items:center;gap:9px;margin:10px 2px 12px;padding:10px;
  border:1px solid #263448;background:#172033;border-radius:11px;min-height:58px;
}
.sidebar-patient-avatar{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#273a5d;
  color:#dbeafe;font-size:12px;font-weight:800;flex:0 0 30px;
}
.sidebar-patient-copy{display:flex;flex-direction:column;min-width:0}
.sidebar-patient-copy strong{font-size:12px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-patient-copy span{font-size:10px;color:#94a3b8;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.nav{display:block;overflow:auto;padding:0 2px 10px;margin:0 -2px;scrollbar-width:thin;scrollbar-color:#344054 transparent}
.nav-section{margin:0 0 12px}
.nav-section-title{
  padding:4px 10px 5px;color:#64748b;font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;white-space:nowrap;
}
.nav-item{
  display:flex;align-items:center;gap:9px;width:100%;min-height:38px;padding:7px 9px;margin:2px 0;
  border-radius:8px;color:#cbd5e1;font-size:13px;transition:background .12s,color .12s,border-color .12s;
}
.nav-item:hover{background:#1e293b;color:#fff}
.nav-item.active{background:#244176;color:#fff;font-weight:700;box-shadow:inset 3px 0 0 #7aa2ff}
.nav-icon{
  width:24px;height:24px;border-radius:7px;display:grid;place-items:center;flex:0 0 24px;
  color:#9fb5d6;background:#1a2738;font-size:10px;font-weight:800;
}
.nav-item.active .nav-icon{background:#315994;color:#fff}
.nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-footer{padding:10px 8px 2px;margin-top:auto;border-top:1px solid var(--sidebar-line);font-size:11px}
.sidebar-footer-row{display:flex;justify-content:space-between;gap:10px;margin:4px 0;color:#94a3b8}
.sidebar-footer-row strong{color:#dbe4f0}
.production-badge{margin-top:8px;padding:5px 7px;border-radius:7px;background:#132d25;color:#8ee0bd;text-align:center;font-size:10px;font-weight:700}

.main{
  margin-left:var(--sidebar-width);width:calc(100% - var(--sidebar-width));
  padding:0 28px 48px;transition:margin-left .18s ease,width .18s ease;
}
.topbar{
  position:sticky;top:0;z-index:25;min-height:var(--topbar-height);margin:0 -28px 20px;padding:14px 28px;
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  background:rgba(244,246,250,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
.topbar-leading{display:flex;align-items:center;gap:10px;min-width:0}
.page-heading{min-width:0}
.page-context{font-size:11px;color:#8a94a6;margin-bottom:2px}
.topbar h1{font-size:24px;line-height:1.2;color:var(--text-strong)}
.topbar p{font-size:12px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:720px}
.top-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.refresh-meta{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;margin-right:3px}
.refresh-meta span{font-size:9px;color:#98a2b3}
.refresh-meta strong{font-size:11px;color:#667085;font-weight:600}
.mobile-nav-btn{display:none}
.icon-button{
  width:34px;height:34px;border:1px solid var(--line-strong);border-radius:9px;background:#fff;color:#344054;
  cursor:pointer;display:inline-grid;place-items:center;font-size:16px;
}
.icon-button:hover{background:#f8fafc;border-color:#cbd5e1}
.kbd{font-size:9px;border:1px solid #d7dde8;border-bottom-width:2px;background:#f8fafc;border-radius:5px;padding:1px 4px;color:#667085;margin-left:5px;font-weight:600}

/* ===== Dense but calm visual system ===== */
.button{min-height:36px;border-radius:9px;padding:7px 12px;font-size:12.5px;box-shadow:none;transition:.12s ease}
.button:hover{transform:none;filter:brightness(.985)}
.button.primary{background:var(--brand);border-color:var(--brand);box-shadow:var(--shadow-sm)}
.button.primary:hover{background:var(--brand-strong)}
.button.secondary{background:#fff;border-color:#dce2ea}
.button.secondary:hover{background:#f8fafc;border-color:#cbd5e1}
.button.ghost{border-color:transparent;background:transparent;color:#667085}
.button.ghost:hover{background:#f3f5f8;color:#344054}
.button.danger{background:#fff;color:var(--danger);border:1px solid #f5c2bd}
.button.danger:hover{background:#fff5f4;border-color:#efb1aa}
.button.small{min-height:30px;padding:5px 9px;font-size:11.5px;border-radius:8px}

.input,textarea.input,select.input{min-height:38px;border-radius:9px;border-color:#dce2ea;background:#fff;font-size:13px}
.input:focus,textarea.input:focus,select.input:focus{border-color:#84a7ff;box-shadow:0 0 0 3px rgba(49,94,251,.10)}
label>span:not(.badge){font-size:12px}

.patient-hero{
  background:linear-gradient(135deg,#fbfdff 0%,#eef4ff 100%);color:var(--text-strong);
  border:1px solid #dbe6fb;border-radius:var(--radius-lg);padding:18px 20px;margin-bottom:14px;box-shadow:none;
}
.patient-name{font-size:26px;color:#14213d}
.patient-diagnosis{color:#4f5e73;margin-top:5px}
.patient-meta{color:#607089;margin-top:12px;font-size:12px}
.patient-hero .badge.primary{background:#dfeaff;color:#244fb5}

.summary-grid{gap:9px;margin-bottom:14px}
.summary-card{padding:12px 13px;border-radius:11px;box-shadow:none;background:#fff}
.summary-label{font-size:10.5px;margin-bottom:6px}
.summary-value{font-size:15px;line-height:1.35}
.panel{border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.panel-head{margin-bottom:12px;align-items:flex-start}
.panel-head h2{font-size:16px;color:var(--text-strong)}
.grid-2{gap:14px}
.record{border-radius:10px;padding:12px;margin-bottom:8px;background:#fff}
.record-title{margin-bottom:7px}
.record-title h3{font-size:14px}
.record-body{font-size:12.5px;line-height:1.65}
.kv-grid{gap:5px 16px}
.kv{grid-template-columns:128px 1fr;padding:7px 0;font-size:12.5px}
.note,.trend-hint,.followup-note,.report-note{font-size:12px;line-height:1.55;border:1px solid #e8edf4;background:#f8fafc}
.empty{padding:28px 18px;font-size:12.5px}

.badge{font-size:10.5px;padding:3px 7px}
.home-dashboard-grid{gap:9px}
.home-metric-card{padding:11px;border-radius:10px;min-height:104px;box-shadow:none}
.home-metric-card:hover{transform:none;box-shadow:0 4px 14px rgba(16,24,40,.06);border-color:#cdd6e2}
.home-metric-value{font-size:21px}
.home-kpi{border-radius:10px;padding:10px}
.home-kpi-value{font-size:19px}

/* ===== Filters / tables ===== */
.filter-grid{display:grid;gap:8px;align-items:end;margin-bottom:12px;padding:10px;background:#f8fafc;border:1px solid #edf0f4;border-radius:10px}
.lab-filter-grid{grid-template-columns:minmax(220px,2fr) minmax(150px,1fr) minmax(130px,1fr) minmax(138px,1fr) minmax(138px,1fr) auto}
.document-filter-grid{grid-template-columns:minmax(220px,2fr) minmax(160px,1fr) minmax(145px,1fr) minmax(138px,1fr) minmax(138px,1fr) auto}
.table-wrap{border-radius:10px;border-color:#e2e7ee;max-height:70vh;background:#fff}
table{min-width:760px}
th,td{padding:8px 10px;font-size:12px;line-height:1.45}
th{background:#f7f9fc;color:#536176;font-size:11px;font-weight:700;z-index:2}
tbody tr:hover td{background:#fbfdff}
.document-actions{display:flex;gap:5px;flex-wrap:wrap;min-width:310px}

.table-pager{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 2px 2px;flex-wrap:wrap}
.table-pager-info{font-size:11px;color:#667085}
.table-pager-actions{display:flex;align-items:center;gap:5px}
.table-pager .button{min-width:34px}
.table-page-current{padding:0 7px;font-size:11px;color:#475467;white-space:nowrap}

/* ===== Toolbars ===== */
.trend-toolbar,.cycle-compare-toolbar,.imaging-toolbar,.imaging-compare-toolbar,.dictionary-toolbar,.quality-toolbar,.followup-settings{
  background:#f8fafc;border:1px solid #edf0f4;border-radius:10px;padding:10px;gap:8px;
}
.trend-preset-row{gap:6px;margin-bottom:10px}
.trend-options-line{margin:9px 0;gap:12px}
.trend-stat-card,.cycle-summary-chip,.imaging-compare-card,.quality-card,.dictionary-kpi,.followup-kpi,.followup-snapshot{box-shadow:none;border-color:#e7ebf1}
.trend-chart-wrap{border-color:#e7ebf1}
.help-details{margin:8px 0 12px;border:1px solid #e7ebf1;border-radius:9px;background:#f8fafc;color:#5b6778;font-size:11.5px}
.help-details summary{cursor:pointer;padding:8px 10px;font-weight:700;color:#475467;user-select:none}
.help-details>div{padding:0 10px 9px;line-height:1.55}
.followup-fix-note{margin:0 0 12px;padding:8px 10px;font-size:11.5px;border-radius:9px}

/* ===== Quick action dropdown ===== */
.quick-action-wrap{position:relative}
.quick-action-menu{
  position:absolute;right:0;top:calc(100% + 8px);width:190px;background:#fff;border:1px solid #dde3eb;
  border-radius:10px;padding:6px;box-shadow:0 14px 35px rgba(16,24,40,.14);z-index:80;
}
.quick-action-menu button,.quick-action-menu a{
  display:block;width:100%;padding:9px 10px;border:0;background:transparent;border-radius:7px;color:#344054;
  text-decoration:none;text-align:left;font-size:12px;cursor:pointer;
}
.quick-action-menu button:hover,.quick-action-menu a:hover{background:#f4f7fb;color:#1d4ed8}
.quick-action-separator{height:1px;background:#edf0f4;margin:5px 3px}

/* ===== Command palette ===== */
.command-palette{position:fixed;inset:0;z-index:200;display:grid;place-items:start center;padding-top:min(15vh,140px)}
.command-palette-backdrop{position:absolute;inset:0;background:rgba(17,24,39,.42);backdrop-filter:blur(2px)}
.command-palette-card{position:relative;width:min(620px,calc(100vw - 28px));background:#fff;border:1px solid #dfe5ed;border-radius:14px;box-shadow:0 28px 80px rgba(16,24,40,.28);overflow:hidden}
.command-palette-head{display:flex;justify-content:space-between;align-items:flex-start;padding:14px 14px 8px}
.command-palette-head strong{display:block;font-size:14px;color:#111827}
.command-palette-head span{display:block;font-size:10.5px;color:#98a2b3;margin-top:2px}
.command-palette-input{width:calc(100% - 28px);margin:4px 14px 8px;padding:12px 13px;border:1px solid #d9e0e9;border-radius:10px;font-size:14px;outline:none}
.command-palette-input:focus{border-color:#84a7ff;box-shadow:0 0 0 3px rgba(49,94,251,.10)}
.command-palette-list{max-height:360px;overflow:auto;padding:4px 8px 8px}
.command-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;background:transparent;border-radius:8px;text-align:left;cursor:pointer;color:#344054}
.command-item:hover,.command-item.active{background:#eef4ff;color:#1d4ed8}
.command-item-icon{width:26px;height:26px;border-radius:7px;background:#f1f4f8;display:grid;place-items:center;font-size:10px;font-weight:800;flex:0 0 26px}
.command-item-copy{min-width:0;flex:1}
.command-item-copy strong{display:block;font-size:12.5px}
.command-item-copy span{display:block;font-size:10.5px;color:#98a2b3;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.command-palette-foot{display:flex;gap:14px;padding:8px 14px;border-top:1px solid #edf0f4;background:#fafbfc;color:#98a2b3;font-size:10px}

/* ===== Back to top ===== */
.back-to-top{position:fixed;right:20px;bottom:20px;width:38px;height:38px;border:1px solid #d9e0e8;background:#fff;color:#475467;border-radius:10px;box-shadow:var(--shadow-md);cursor:pointer;opacity:0;pointer-events:none;transform:translateY(6px);transition:.15s;z-index:50}
.back-to-top.visible{opacity:1;pointer-events:auto;transform:none}

/* ===== Collapsed sidebar ===== */
body.sidebar-collapsed .sidebar{width:var(--sidebar-collapsed-width)}
body.sidebar-collapsed .main{margin-left:var(--sidebar-collapsed-width);width:calc(100% - var(--sidebar-collapsed-width))}
body.sidebar-collapsed .brand-copy,
body.sidebar-collapsed .sidebar-patient-copy,
body.sidebar-collapsed .nav-section-title,
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .sidebar-footer-row,
body.sidebar-collapsed .production-badge{display:none}
body.sidebar-collapsed .brand{justify-content:center;padding:0}
body.sidebar-collapsed .sidebar-header{flex-direction:column;gap:6px}
body.sidebar-collapsed .sidebar-collapse-btn{transform:rotate(180deg)}
body.sidebar-collapsed .sidebar-patient{justify-content:center;padding:8px 6px}
body.sidebar-collapsed .nav-item{justify-content:center;padding:7px 5px}
body.sidebar-collapsed .nav-icon{width:28px;height:28px;flex-basis:28px}
body.sidebar-collapsed .sidebar-footer{border-top:0}

.sidebar-backdrop{display:none}

/* ===== Responsive ===== */
@media(max-width:1280px){
  .main{padding-left:20px;padding-right:20px}
  .topbar{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}
  .refresh-meta{display:none}
  .summary-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .trend-toolbar{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lab-filter-grid,.document-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:960px){
  .sidebar{position:fixed;width:244px;transform:translateX(-102%);z-index:120}
  body.sidebar-collapsed .sidebar{width:244px}
  body.sidebar-collapsed .brand-copy,body.sidebar-collapsed .sidebar-patient-copy,body.sidebar-collapsed .nav-section-title,body.sidebar-collapsed .nav-label,body.sidebar-collapsed .sidebar-footer-row,body.sidebar-collapsed .production-badge{display:initial}
  body.sidebar-collapsed .sidebar-header{flex-direction:row}
  body.sidebar-collapsed .nav-item{justify-content:flex-start;padding:7px 9px}
  body.sidebar-collapsed .nav-icon{width:24px;height:24px;flex-basis:24px}
  body.mobile-sidebar-open .sidebar{transform:translateX(0)}
  .sidebar-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.35);z-index:110}
  body.mobile-sidebar-open .sidebar-backdrop{display:block}
  .sidebar-collapse-btn{display:none}
  .mobile-nav-btn{display:inline-grid}
  .main,body.sidebar-collapsed .main{margin-left:0;width:100%;padding:0 16px 38px}
  .topbar{margin:0 -16px 16px;padding:11px 16px;min-height:74px}
  .top-actions{gap:6px}
  .quick-nav-trigger .kbd{display:none}
  .topbar p{max-width:420px}
  .quality-section-grid,.followup-grid,.imaging-compare-grid,.imaging-diff-grid,.grid-2{grid-template-columns:1fr}
  .trend-toolbar,.cycle-compare-toolbar,.imaging-toolbar,.imaging-compare-toolbar,.lab-filter-grid,.document-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:680px){
  .main{padding-left:10px;padding-right:10px}
  .topbar{margin-left:-10px;margin-right:-10px;padding-left:10px;padding-right:10px}
  .topbar{align-items:flex-start}
  .topbar h1{font-size:20px}
  .topbar p{max-width:230px;font-size:10.5px}
  .top-actions .quick-nav-trigger{display:none}
  .top-actions .button{padding:7px 9px}
  .quick-action-wrap .button{font-size:0}
  .quick-action-wrap .button::after{content:"操作";font-size:12px}
  .summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .panel{padding:12px;border-radius:10px}
  .patient-hero{padding:14px}
  .patient-name{font-size:22px}
  .patient-hero-top{flex-direction:column;gap:8px}
  .trend-toolbar,.cycle-compare-toolbar,.imaging-toolbar,.imaging-compare-toolbar,.lab-filter-grid,.document-filter-grid,.dictionary-toolbar{grid-template-columns:1fr}
  .upload-form{grid-template-columns:1fr}
  .filter-grid{padding:8px}
  .command-palette{padding-top:10vh}
  .back-to-top{right:12px;bottom:12px}
}

/* Small production polish */
.nav{flex:1;min-height:0}
.row-actions{display:flex;gap:5px;flex-wrap:wrap;min-width:190px}
.button:disabled{opacity:.45;cursor:not-allowed;filter:none}
.badge.danger{background:#fef3f2;color:#b42318}
.badge.neutral{background:#f2f4f7;color:#667085}
@media(max-width:960px){
  body.sidebar-collapsed .brand-copy{display:block}
  body.sidebar-collapsed .sidebar-patient-copy{display:flex}
  body.sidebar-collapsed .nav-section-title{display:block}
  body.sidebar-collapsed .nav-label{display:inline}
  body.sidebar-collapsed .sidebar-footer-row{display:flex}
  body.sidebar-collapsed .production-badge{display:block}
}