/**
 * K3-R 共享组件样式 —— 全部引用 web/tokens/design-tokens.css 变量，禁止字面量颜色
 * 密度定位：院内桌面端（≥1280×800 优化，1024 以下显示引导）
 */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--gray-900);
  background: var(--surface-page-bg);
}
#app { min-height: 100vh; }

/* 图标：尺寸三档 16/20/24，颜色继承 currentColor */
.icon { display: inline-flex; width: 20px; height: 20px; vertical-align: -4px; flex-shrink: 0; }
.icon-sm { width: 16px; height: 16px; vertical-align: -3px; }
.icon-lg { width: 24px; height: 24px; vertical-align: -6px; }

/* 焦点环：永不被移除（无障碍） */
:focus-visible { outline: 2px solid var(--primary-border); outline-offset: 1px; }

/* ===== 按钮 ===== */
.btn {
  display: inline-flex; align-items: center; gap: var(--spacing-4);
  height: var(--control-height-md); padding: 0 var(--spacing-16);
  border-radius: var(--radius-sm); border: 1px solid var(--gray-200);
  background: var(--surface-card-bg); color: var(--gray-700);
  font-size: var(--font-size-base); cursor: pointer; user-select: none;
  transition: background var(--motion-duration-fast) var(--motion-easing-standard),
              border-color var(--motion-duration-fast) var(--motion-easing-standard);
}
.btn:hover { background: var(--gray-50); border-color: var(--gray-300); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--surface-card-bg); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--surface-card-bg); }
.btn-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); }
.btn-sm { height: var(--control-height-sm); padding: 0 var(--spacing-8); font-size: var(--font-size-sm); }
.btn:disabled { background: var(--disabled-bg); border-color: var(--gray-200); color: var(--disabled-text); cursor: not-allowed; }

/* ===== 卡片 ===== */
.card {
  background: var(--surface-card-bg); border-radius: var(--radius-md);
  border: 1px solid var(--gray-100); box-shadow: var(--shadow-card);
  padding: var(--spacing-16);
}
.card-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-12); }

/* ===== 表格（紧凑高密度）===== */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.tbl th {
  height: var(--table-header-height); text-align: left; padding: 0 var(--spacing-12);
  background: var(--surface-table-header-bg); color: var(--gray-600);
  font-weight: var(--font-weight-medium); white-space: nowrap;
}
.tbl td {
  height: var(--table-row-height); padding: 0 var(--spacing-12);
  border-top: 1px solid var(--gray-100); line-height: var(--line-height-table);
}
.tbl tbody tr:nth-child(even) { background: var(--surface-table-stripe-bg); }
.tbl tbody tr:hover { background: var(--surface-row-hover); }
.tbl-wrap { overflow-x: auto; background: var(--surface-card-bg); border: 1px solid var(--gray-100); border-radius: var(--radius-md); }
.mono { font-family: var(--font-family-mono); }

/* ===== 徽章（状态=颜色+文字双通道；4px 直角对齐 HCRM .badge，去胶囊化）===== */
.badge {
  display: inline-flex; align-items: center; gap: var(--spacing-4);
  padding: 2px var(--spacing-8); border-radius: var(--radius-sm);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-medium);
  border: 1px solid transparent; white-space: nowrap;
}
.badge-success { color: var(--success); background: var(--success-bg); border-color: var(--primary-border); }
.badge-warning { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-bg); }
.badge-danger  { color: var(--danger);  background: var(--danger-bg);  border-color: var(--danger-bg); }
.badge-info    { color: var(--info);    background: var(--info-bg);    border-color: var(--info-bg); }
.badge-neutral { color: var(--gray-600); background: var(--gray-100); border-color: var(--gray-200); }

/* ===== 三级开关 ===== */
.switch {
  position: relative; width: 36px; height: 20px; border-radius: var(--radius-full);
  background: var(--switch-off); cursor: pointer; border: none; flex-shrink: 0;
  transition: background var(--motion-duration-base) var(--motion-easing-standard);
}
.switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--surface-card-bg);
  transition: transform var(--motion-duration-base) var(--motion-easing-standard);
}
.switch.on { background: var(--switch-on); }
.switch.on::after { transform: translateX(16px); }
.switch:disabled { opacity: 0.45; cursor: not-allowed; }

/* ===== 表单 ===== */
.field { display: flex; flex-direction: column; gap: var(--spacing-4); margin-bottom: var(--spacing-16); }
.field label { font-size: var(--font-size-sm); color: var(--gray-600); }
.input, .select, .textarea {
  height: var(--control-height-md); padding: 0 var(--spacing-12);
  border: 1px solid var(--gray-300); border-radius: var(--radius-sm);
  background: var(--surface-card-bg); color: var(--gray-900); font-size: var(--font-size-base);
  font-family: var(--font-family-base); width: 100%;
}
.textarea { height: auto; min-height: 96px; padding: var(--spacing-8) var(--spacing-12); resize: vertical; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary); outline: none; }
.input::placeholder, .textarea::placeholder { color: var(--gray-400); }

/* ===== 弹窗（焦点可 Tab 遍历、Esc 关闭由组件处理）===== */
.modal-scrim {
  position: fixed; inset: 0; background: var(--surface-overlay-scrim);
  z-index: var(--z-modal); display: flex; align-items: center; justify-content: center;
}
.modal {
  background: var(--surface-card-bg); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal); width: 480px; max-width: calc(100vw - 48px);
  max-height: 84vh; overflow-y: auto; padding: var(--spacing-24);
}
.modal-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-12); display: flex; align-items: center; gap: var(--spacing-8); }
.modal-foot { display: flex; justify-content: flex-end; gap: var(--spacing-8); margin-top: var(--spacing-20); }

/* ===== Toast（动态区域 aria-live 由组件处理）===== */
.toast-box { position: fixed; top: var(--spacing-16); left: 50%; transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--spacing-8); align-items: center; }
.toast {
  padding: var(--spacing-8) var(--spacing-16); border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised); font-size: var(--font-size-base); max-width: 640px;
  display: flex; align-items: center; gap: var(--spacing-8);
}
.toast-success { background: var(--success-bg); color: var(--primary-active); border: 1px solid var(--primary-border); }
.toast-error   { background: var(--danger-bg);  color: var(--danger-hover);   border: 1px solid var(--danger-bg); }
.toast-info    { background: var(--info-bg);    color: var(--info);          border: 1px solid var(--info-bg); }

/* ===== 空态：原因 + 下一步动作 ===== */
.empty { padding: var(--spacing-48) var(--spacing-24); text-align: center; color: var(--gray-500); }
.empty .icon { width: 32px; height: 32px; color: var(--gray-300); margin-bottom: var(--spacing-8); }
.empty-title { font-size: var(--font-size-base); color: var(--gray-700); font-weight: var(--font-weight-medium); margin-bottom: var(--spacing-4); }
.empty-hint { font-size: var(--font-size-sm); }

/* ===== 页面布局（管理后台页签式）===== */
.page { max-width: var(--content-max-width); margin: 0 auto; padding: var(--spacing-24); }
.topbar { background: var(--surface-card-bg); border-bottom: 1px solid var(--gray-100); }
.topbar-inner { max-width: var(--content-max-width); margin: 0 auto; padding: 0 var(--spacing-24); display: flex; align-items: center; height: 56px; gap: var(--spacing-16); }
.brand { display: flex; align-items: center; gap: var(--spacing-8); font-weight: var(--font-weight-semibold); color: var(--primary); font-size: var(--font-size-lg); }
.tabs { display: flex; gap: var(--spacing-4); margin-left: var(--spacing-16); flex: 1; }
.tab {
  padding: 0 var(--spacing-16); height: 56px; display: inline-flex; align-items: center; gap: var(--spacing-4);
  color: var(--gray-600); cursor: pointer; border: none; background: none; font-size: var(--font-size-base);
  border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--gray-900); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--font-weight-medium); }
.user-chip { display: flex; align-items: center; gap: var(--spacing-8); color: var(--gray-600); font-size: var(--font-size-sm); }

/* ===== 医生工作台侧边栏（HCRM 同款深绿渐变 + 左描边导航）===== */
.wb-layout { display: flex; height: 100vh; overflow: hidden; }
.wb-side {
  width: var(--sidebar-width); background: var(--surface-sidebar-bg);
  color: var(--surface-sidebar-text); display: flex; flex-direction: column;
  transition: width var(--motion-duration-base) var(--motion-easing-standard); flex-shrink: 0;
}
.wb-side.collapsed { width: var(--sidebar-collapsed-width); }
/* 品牌区：橄榄叶标记 + 系统名 + 副题（HCRM .sidebar .logo 同构） */
.wb-side-brand { display: flex; align-items: center; gap: 10px; padding: 18px 16px; border-bottom: 1px solid var(--surface-sidebar-border); white-space: nowrap; }
.wb-side-brand .brand-mark { width: 34px; height: 34px; border-radius: var(--radius-md); flex-shrink: 0; color: var(--primary); background: rgba(255, 255, 255, 0.92); display: inline-flex; align-items: center; justify-content: center; }
.wb-side-brand .brand-mark .icon { width: 22px; height: 22px; }
.wb-side-brand .brand-text { line-height: 1.25; min-width: 0; }
.wb-side-brand .brand-text b { display: block; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--surface-card-bg); letter-spacing: 1px; }
.wb-side-brand .brand-text small { display: block; font-size: 11px; font-weight: var(--font-weight-regular); color: var(--surface-sidebar-sub); margin-top: 2px; }
.wb-nav { display: flex; flex-direction: column; padding: 10px 0; flex: 1; overflow-y: auto; }
/* 导航项：HCRM 同构——左描边选中条，选中底 rgba(primary,.18) */
.wb-nav-item {
  display: flex; align-items: center; gap: 10px; padding: 0 var(--spacing-16);
  height: 44px; color: var(--surface-sidebar-text);
  cursor: pointer; border: none; border-left: 3px solid transparent; background: none;
  font-size: var(--font-size-base); text-align: left; font-family: var(--font-family-base);
  white-space: nowrap; overflow: hidden; width: 100%;
}
.wb-nav-item:hover { background: var(--surface-sidebar-hover-bg); }
.wb-nav-item.active { background: var(--surface-sidebar-active-bg); color: var(--surface-sidebar-active-text); border-left-color: var(--primary); }
.wb-side-foot { padding: 14px 0; border-top: 1px solid var(--surface-sidebar-border); }
.wb-side-foot .wb-nav-item { height: 40px; font-size: var(--font-size-sm); }
.wb-main { flex: 1; overflow-y: auto; }
.wb-content { max-width: var(--content-max-width); padding: var(--spacing-24); }

/* ===== 页头（HCRM .page-title / .page-sub 同构：大标题 + 一行说明）===== */
.page-head { margin-bottom: var(--spacing-16); }
.page-head h1 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--gray-900); display: flex; align-items: center; gap: var(--spacing-8); }
.page-head h1 .icon { color: var(--primary); }
.page-head p { color: var(--gray-500); font-size: var(--font-size-sm); margin-top: var(--spacing-4); }

/* ===== 今日工作三段式（A 判断 / B 确认 / C 延续）：区块标题 + 字母段标 ===== */
.sec-head { display: flex; align-items: center; gap: var(--spacing-8); margin: 0 0 var(--spacing-12); }
.sec-head strong { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--gray-800); }
.muted-txt { color: var(--gray-500); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); }
.sec-tag { width: 22px; height: 22px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--surface-card-bg); flex-shrink: 0; }
.sec-tag-a { background: var(--clinical-l1); }
.sec-tag-b { background: var(--clinical-l2); }
.sec-tag-c { background: var(--gray-400); }
.grid-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-16); }
@media (max-width: 1439px) { .grid-2col { grid-template-columns: 1fr; } }

/* ===== SLA 三色计时（颜色+文字双通道）===== */
.sla-cell { display: inline-flex; align-items: center; gap: var(--spacing-4); font-weight: var(--font-weight-medium); }
.sla-ok      { color: var(--sla-ok); }
.sla-near    { color: var(--sla-near); }
.sla-overdue { color: var(--sla-overdue); }

/* ===== 概要卡（A1）===== */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-16); margin-bottom: var(--spacing-24); }
.kpi-card { cursor: pointer; text-align: left; border: 1px solid var(--gray-100); background: var(--surface-card-bg); border-radius: var(--radius-md); padding: var(--spacing-16); box-shadow: var(--shadow-card); font-family: var(--font-family-base); }
.kpi-card:hover { box-shadow: var(--shadow-raised); }
.kpi-label { font-size: var(--font-size-sm); color: var(--gray-500); display: flex; align-items: center; gap: var(--spacing-4); }
.kpi-value { font-size: var(--font-size-xxl); font-weight: var(--font-weight-bold); margin-top: var(--spacing-8); }
.kpi-sub { font-size: var(--font-size-xs); color: var(--gray-400); margin-top: var(--spacing-4); }

/* ===== 漏斗（B2）===== */
.funnel { display: flex; align-items: stretch; gap: var(--spacing-8); margin-bottom: var(--spacing-24); }
.funnel-seg { flex: 1; background: var(--surface-card-bg); border: 1px solid var(--gray-100); border-radius: var(--radius-md); padding: var(--spacing-12); position: relative; }
.funnel-arrow { align-self: center; color: var(--gray-300); }
.funnel-count { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); }
.funnel-name { font-size: var(--font-size-xs); color: var(--gray-500); }

/* ===== 患者卡（B2 分桶）===== */
.bucket-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-16); }
.bucket-card { background: var(--surface-card-bg); border: 1px solid var(--gray-100); border-left-width: 3px; border-radius: var(--radius-md); padding: var(--spacing-12) var(--spacing-16); box-shadow: var(--shadow-card); cursor: pointer; font-family: var(--font-family-base); text-align: left; width: 100%; }
.bucket-card:hover { box-shadow: var(--shadow-raised); }
.bucket-l1 { border-left-color: var(--clinical-l1); }
.bucket-l2 { border-left-color: var(--clinical-l2); }
@media (min-width: 1920px) { .bucket-grid { grid-template-columns: repeat(4, 1fr); } }

/* ===== 状态分列（B4 四列板）===== */
.state-columns { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--spacing-12); }
.state-col-head { display: flex; align-items: center; gap: var(--spacing-8); padding: var(--spacing-8) var(--spacing-12); border-radius: var(--radius-sm); font-weight: var(--font-weight-medium); margin-bottom: var(--spacing-8); }
.col-draft    { color: var(--card-draft);    background: var(--gray-100); }
.col-signed   { color: var(--card-delivered);background: var(--primary-bg); }
.col-delivered{ color: var(--card-delivered);background: var(--info-bg); }
.col-viewed   { color: var(--card-viewed);   background: var(--warning-bg); }
.col-acked    { color: var(--card-acked);    background: var(--success-bg); }
.mini-card { background: var(--surface-card-bg); border: 1px solid var(--gray-100); border-radius: var(--radius-sm); padding: var(--spacing-12); margin-bottom: var(--spacing-8); box-shadow: var(--shadow-card); font-size: var(--font-size-sm); }

/* ===== 告警横幅（A6 连续失败）===== */
.banner-danger { display: flex; align-items: center; gap: var(--spacing-8); background: var(--danger-bg); color: var(--danger-hover); border: 1px solid var(--danger-bg); border-radius: var(--radius-md); padding: var(--spacing-12) var(--spacing-16); margin-bottom: var(--spacing-16); }

/* ===== 违禁词命中高亮（A5 / B1）===== */
.hit-word { background: var(--danger-bg); color: var(--danger-hover); padding: 0 2px; border-radius: 2px; font-weight: var(--font-weight-medium); }

/* ===== 宽表筛选区 ===== */
.filter-bar { display: flex; gap: var(--spacing-8); align-items: center; margin-bottom: var(--spacing-16); flex-wrap: wrap; }
.filter-bar .input, .filter-bar .select { width: 200px; }

/* ===== 患者 360 侧栏（B2 · EP05）：右侧抽屉，Esc/遮罩关闭；≤1279 窄屏转全屏 ===== */
.drawer-scrim { position: fixed; inset: 0; background: var(--surface-overlay-scrim); z-index: var(--z-modal); }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100vw;
  background: var(--surface-card-bg); box-shadow: var(--shadow-modal);
  z-index: calc(var(--z-modal) + 1); display: flex; flex-direction: column;
  animation: drawer-in var(--motion-duration-base) var(--motion-easing-standard);
}
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.drawer-head { display: flex; align-items: center; gap: var(--spacing-8); padding: var(--spacing-12) var(--spacing-16); border-bottom: 1px solid var(--gray-100); flex-shrink: 0; }
.drawer-title { display: flex; align-items: center; gap: var(--spacing-8); min-width: 0; flex: 1; }
.drawer-close { border: none; background: none; cursor: pointer; color: var(--gray-500); padding: var(--spacing-4); border-radius: var(--radius-sm); display: inline-flex; }
.drawer-close:hover { color: var(--gray-900); background: var(--gray-100); }
.drawer-tabs { display: flex; gap: var(--spacing-4); padding: 0 var(--spacing-16); border-bottom: 1px solid var(--gray-100); flex-shrink: 0; }
.drawer-tab { padding: 0 var(--spacing-12); height: 44px; border: none; background: none; cursor: pointer; font-size: var(--font-size-base); color: var(--gray-600); border-bottom: 2px solid transparent; font-family: var(--font-family-base); }
.drawer-tab:hover { color: var(--gray-900); }
.drawer-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--font-weight-medium); }
.drawer-body { flex: 1; overflow-y: auto; padding: var(--spacing-16); }
.drawer-foot { flex-shrink: 0; padding: var(--spacing-12) var(--spacing-16); border-top: 1px solid var(--gray-100); display: flex; justify-content: flex-end; gap: var(--spacing-8); }
.icon-spin { animation: icon-spin 0.8s linear infinite; }
@keyframes icon-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* 患者基础信息：两列 label/value，紧凑密度 */
.p360-base { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-8) var(--spacing-16); margin-bottom: var(--spacing-16); font-size: var(--font-size-sm); }
.p360-base dt { color: var(--gray-500); font-size: var(--font-size-xs); }
.p360-base dd { color: var(--gray-900); word-break: break-all; }

/* 七域摘要卡：计数 + 关键行 + source 域标注；不渲染临床结论文字 */
.p360-dom { border: 1px solid var(--gray-100); border-radius: var(--radius-md); padding: var(--spacing-12); margin-bottom: var(--spacing-8); background: var(--surface-card-bg); }
.p360-dom-head { display: flex; align-items: center; gap: var(--spacing-8); margin-bottom: var(--spacing-8); }
.p360-dom-head strong { font-size: var(--font-size-base); }
.p360-dom-count { margin-left: auto; font-family: var(--font-family-mono); font-size: var(--font-size-sm); color: var(--gray-500); }
.p360-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--spacing-8); padding: var(--spacing-4) 0; border-top: 1px dashed var(--gray-100); font-size: var(--font-size-sm); }
.p360-row:first-of-type { border-top: none; }
.p360-row-label { color: var(--gray-500); flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--spacing-4); }
.p360-row-val { text-align: right; min-width: 0; word-break: break-all; color: var(--gray-900); }
.p360-src { display: block; font-size: var(--font-size-xs); color: var(--gray-400); margin-top: 2px; }
.p360-dom-empty { font-size: var(--font-size-sm); color: var(--gray-400); }

/* 时间线（倒序分页） */
.tl-item { padding: var(--spacing-8) 0; border-bottom: 1px solid var(--gray-100); font-size: var(--font-size-sm); }
.tl-item:last-child { border-bottom: none; }
.tl-head { display: flex; align-items: center; gap: var(--spacing-8); }
.tl-at { font-family: var(--font-family-mono); font-size: var(--font-size-xs); color: var(--gray-400); margin-left: auto; white-space: nowrap; }
.tl-detail { color: var(--gray-600); margin-top: var(--spacing-4); word-break: break-all; }
.tl-more { width: 100%; text-align: center; padding: var(--spacing-8); border: none; background: none; cursor: pointer; color: var(--primary); font-size: var(--font-size-sm); font-family: var(--font-family-base); }
.tl-more:hover { background: var(--primary-bg); }
.tl-end { text-align: center; color: var(--gray-400); font-size: var(--font-size-xs); padding: var(--spacing-8); }

/* 窄屏（≥1024 但 <1280 的过渡区）：抽屉转全屏 */
@media (max-width: 1279px) { .drawer { width: 100vw; } }

/* ===== 低分辨率引导（<1024 不适配）===== */
.need-desktop { display: none; }
@media (max-width: 1023px) {
  .need-desktop {
    display: flex; position: fixed; inset: 0; z-index: 9999; background: var(--surface-page-bg);
    align-items: center; justify-content: center; flex-direction: column; gap: var(--spacing-12);
    color: var(--gray-600); text-align: center; padding: var(--spacing-24);
  }
  .page, .wb-layout { display: none; }
}