/*
  全科护理 · 界面设计层（2026-10-31）
  作为最后一层样式叠加，统一字体层级、间距、配色语义与响应式细节。
  只作用于系统外壳与工作界面；护士长手册原版文书、原表查检单（.manual-original*、.qc-sheet、打印）
  沿用各自的原版格式，不在此处改动。回退方法：从 index.html 去掉本文件引用即可。
*/

/* ---------- 1. 设计令牌 ---------- */
:root {
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC", "Noto Sans CJK SC",
    "Microsoft YaHei", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  /* 文字：正文墨绿黑，次要文字对 #f3f6f5 底色对比度 ≥ 4.8:1 */
  --ink: #15302d;
  --ink-2: #34504c;
  --muted: #566b68;
  --canvas: #f3f6f5;
  --surface: #ffffff;
  --line: #dfe7e5;
  --line-strong: #c8d5d2;
  /* 品牌色保持科徽绿，只用于主操作、当前位置与链接 */
  --brand-ink: #00715f;
  --teal: var(--brand-ink);
  --brand-soft: #e7f4ef;
  /* 状态语义：完成 / 待办提醒 / 超期与缺失风险 / 信息 */
  --ok-ink: #0b6650;   --ok-bg: #e5f3ec;
  --warn-ink: #85500a; --warn-bg: #fcf0dc;
  --risk-ink: #b02a20; --risk-bg: #fcecea;
  --info-ink: #275d86; --info-bg: #e9f1f8;
  /* 字号阶梯（1.2 比例，取整） */
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 16px;
  --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px;
  /* 间距阶梯（4 的倍数） */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --radius: 10px;
  --shadow-1: 0 1px 2px rgb(21 48 45 / 0.04), 0 2px 8px rgb(21 48 45 / 0.04);
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 数字统一等宽对齐，便于纵向比较 */
.number, .workspace-progress strong, .sensitive-summary strong, td, .pill, time,
.qh-summary strong, [class*="kpi"] strong { font-variant-numeric: tabular-nums; }

/* ---------- 2. 外壳：侧栏、顶栏 ---------- */
.layout { background: var(--canvas); }
.rail {
  height: 100dvh;
  padding: 28px 16px 20px;
  border-right-color: var(--line);
}
/* 修复：菜单展开较多或屏幕较矮时，最后几项被裁掉无法点击 → 菜单区内部滚动 */
.rail > nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-inline: -4px; padding-inline: 4px; }
.rail-note { flex-shrink: 0; padding-top: var(--sp-3); font-size: var(--fs-xs); color: var(--muted); }
.brand { margin-bottom: var(--sp-6); font-size: 21px; letter-spacing: 0.02em; }

/* 顶栏：系统名降为路径式小字，把注意力让给页面标题 */
.topbar { min-height: 64px; padding-block: 12px; border-bottom-color: var(--line); background: rgb(255 255 255 / 0.92); backdrop-filter: saturate(1.4) blur(6px); }
.topbar .app-title { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); letter-spacing: 0.02em; }
.topbar .actions > span { font-size: var(--fs-sm); color: var(--ink-2); }
.topbar .actions button { padding: 7px 14px; font-size: var(--fs-sm); }

/* ---------- 3. 字体层级 ---------- */
/* 页内二级标题（如绩效“组长考评”）低于页面主标题一级 */
.page-head h2 { margin: 0; font-size: var(--fs-xl); font-weight: 650; line-height: 1.3; color: var(--ink); }
.page-head { align-items: flex-end; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.page-head h1 {
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.main :where(.panel, .card) h2,
.main .panel-head h2 { font-size: var(--fs-md); font-weight: 650; line-height: 1.4; color: var(--ink); letter-spacing: 0; }
.main :where(.panel) h3 { font-size: var(--fs-base); font-weight: 650; color: var(--ink-2); }
.main :where(.panel, .card) :where(p, li) { line-height: 1.7; }
.main small, .main .muted { color: var(--muted); }

/* 面板标题行的“查看全部 →”类链接：小一号、加粗，箭头随悬停前移 */
.panel-head > a { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.panel-head > a:hover { text-decoration: none; color: var(--ink); }

/* ---------- 4. 面板与卡片 ---------- */
.main :where(.panel, .card) {
  border-color: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

/* ---------- 5. 按钮层级：主操作实心，其余描边，第三级文字链 ---------- */
button.secondary, a.button.secondary { color: var(--ink-2); border-color: var(--line-strong); }
button.secondary:hover, a.button.secondary:hover { background: #f6faf9; border-color: #b3c6c2; filter: none; }
button:not(.secondary):not(.danger):hover { filter: brightness(0.94); }
.main a.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px; border: 1px solid transparent; border-radius: 8px;
  background: var(--brand-ink); color: #fff; font-weight: 600; line-height: 1.4; text-decoration: none; white-space: nowrap;
}
/* 工具栏里的链接按钮与同排按钮同高（排班工具栏保留其紧凑尺寸） */
.main .toolbar:not(.schedule-toolbar) > a,
.main .actions-row > a { padding: 10px 16px; line-height: 1.4; font-weight: 600; }
.main a.button.secondary { background: #fff; color: var(--ink-2); border-color: var(--line-strong); }
.main a.button:hover { text-decoration: none; }
:where(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; }

/* ---------- 6. 状态标签：语义固定，不随页面换色 ---------- */
.pill { font-weight: 600; letter-spacing: 0.01em; }
.pill.warning { color: var(--warn-ink); background: var(--warn-bg); }
.pill.gray { color: var(--muted); background: #edf2f1; }

/* ---------- 7. 护士长工作台 ---------- */
/* 日期不再做成灰色色块，改为页面标题旁的安静说明 */
.workspace-date.pill { background: transparent; padding: 0 0 4px; font-size: var(--fs-md); font-weight: 600; color: var(--muted); letter-spacing: 0.04em; }

/* 指标数字：默认墨色，只有“需要处理”的才着色，颜色不再随意 */
.workspace-cards .number,
.workspace-management-cards .number { color: var(--ink); font-weight: 700; letter-spacing: -0.01em; }
.workspace-pending .number { color: var(--ink); }
.workspace-clear .number { color: var(--muted); }
.workspace-alert .number { color: var(--risk-ink); }
.workspace-remediation .number { color: var(--ink); }
.workspace-progress strong,
.workspace-progress span:nth-child(-n+2) strong,
.workspace-remediation-card .workspace-progress span:nth-child(3) strong,
.workspace-management .workspace-progress span:nth-child(3) strong { color: var(--ink); }
.workspace-cards .card { border-top: 0; }
.workspace-alert { box-shadow: inset 3px 0 0 var(--risk-ink), var(--shadow-1); }
.workspace-card-detail { font-size: var(--fs-xs); color: var(--muted); }

/* 今日排班为空时不再被右栏撑成大块空白 */
.workspace-dashboard-layout { align-items: start; }
.workspace-management .workspace-shifts > .empty { min-height: 96px; }

/* 敏感指标：缺失数据用“风险”语义而不是品牌绿，避免被误读为正常值 */
.sensitive-summary { transition: border-color 0.15s ease, background-color 0.15s ease; }
.sensitive-summary:hover { border-color: var(--line-strong); background: #fafcfb; text-decoration: none; }
.sensitive-summary strong { color: var(--ink); font-weight: 700; }
.sensitive-summary strong.is-missing { color: var(--risk-ink); font-size: var(--fs-md); font-weight: 650; }
.sensitive-summary span { color: var(--ink-2); line-height: 1.5; }

/* ---------- 8. 质量监测：待完成项目不再整行染色，状态由标签表达 ---------- */
.main tr.qh-pending, .main .quality-project-pending tbody tr { background: transparent; }

/* ---------- 9. 表格 ---------- */
.main :where(table:not(.manual-original table):not(.qc-sheet table)) th { color: var(--ink-2); font-weight: 600; }

/* 工具栏内全部控件隐藏时不再留出空白 */
.main .toolbar:not(:has(> :not([hidden]))) { display: none; }

/* ---------- 10. 响应式 ---------- */
/* 修复：fieldset 默认最小宽度等于内容宽度，会在手机上撑出横向滚动 */
.main fieldset { min-width: 0; }
@media (max-width: 760px) {
  .page-head { flex-direction: column; align-items: flex-start; gap: var(--sp-2); margin-bottom: var(--sp-4); }
  .page-head h1 { font-size: var(--fs-xl); }
  .topbar { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--sp-2) var(--sp-3); }
  .topbar .app-title { font-size: var(--fs-xs); line-height: 1.4; }
  .topbar .actions { grid-column: 1 / -1; justify-content: flex-end; }
  /* 修复：排班页周/月切换在手机上横向溢出 */
  .schedule-period-toolbar { flex-wrap: wrap; }
  .schedule-period-controls { flex: 1 1 100%; max-width: 100%; flex-wrap: wrap; min-width: 0; row-gap: var(--sp-2); }
}

@media print {
  .topbar, .rail { box-shadow: none; backdrop-filter: none; }
}