/* =====================================================================
   ICU 护理记录系统 — 统一样式表
   ---------------------------------------------------------------------
   - 视觉体系抽取自原单页工作台（配色令牌、卡片、表格、徽章、进度条、模态框）
   - 原文件各页重复的 :root 令牌在此合并为一套；主题由 [data-theme] 切换
   - 主题通过 <html data-theme="..."> 控制，localStorage 只保存主题偏好（外观）
   - 无障碍基线：
     * 所有可点击元素均为 button / a[href]，键盘可达
     * :focus-visible 焦点环（不依赖边框变色，outline 对比度均 >3:1）
     * 输入框边界 --input-border 在深色主题下 >= 4.5:1（原 1.35:1 → 已修）
     * 触控目标最小 24x24px（.btn-sm / .x-btn 实际为 28px+）
     * prefers-reduced-motion 下关闭动画
   ===================================================================== */

/* ===== 1. 设计令牌：默认 = 深蓝主题（夜间模式） ===== */
:root{
  /* 表面 */
  --bg:#12141a; --card:#1c202b; --card2:#232a3a; --border:#2c3242;
  --input:#252b3b; --input-border:#8a94a6;   /* 修复项：原 #383f52(1.35:1) → 4.62:1 */
  --input-border-hover:#a4adbf;
  --row-hover:#212736;
  /* 文字 */
  --text:#e8ebf2; --text2:#9fb4d8; --text3:#8f97ae;  /* 修复项：原 #777f96(4.08:1) → 5.58:1 */
  /* 品牌 */
  --accent:#4070dd; --accent2:#5482ee; --accent-strong:#2f5ec4; /* 白字对比 5.97:1 */
  --on-accent:#ffffff;
  --focus:#7aa2f7;            /* 焦点环：#252b3b 上 5.61:1 */
  --focus-ring:rgba(122,162,247,.35);
  /* 语义状态（文字色均 >= 4.5:1） */
  --ok:#4ade80; --warn:#ffc145; --crit:#ff6b6b; --info:#8fb0f5; --sooner:#e8d47a;
  --ok-strong:#2c7a4f; --warn-strong:#8a5f18; --crit-strong:#9c3434; --info-strong:#2f5ec4;
  --ok-tint:rgba(74,222,128,.13); --warn-tint:rgba(255,193,69,.15);
  --crit-tint:rgba(255,107,107,.15); --info-tint:rgba(64,112,221,.16);
  --sooner-tint:rgba(232,212,122,.12); --row-crit:rgba(255,107,107,.09);
  /* 尺寸 */
  --radius:10px; --radius-sm:6px;
  --tap:24px;                 /* 触控目标下限 */
  --prog-ok-1:#4070dd; --prog-ok-2:#72aaff;
  --prog-full-1:#2c7a4f; --prog-mid-1:#c99a2e; --prog-low-1:#a33;
  --shadow-card:0 4px 14px rgba(0,0,0,.25);
  --topbar-bg:rgba(18,20,26,.92);
  color-scheme:dark;
}

/* ===== 2. 主题：纯黑 ===== */
[data-theme="black"]{
  --bg:#000000; --card:#111111; --card2:#1a1a1a; --border:#2a2a2a;
  --input:#181818; --input-border:#8a94a6; --input-border-hover:#a4adbf; --row-hover:#151515;
  --text:#e6e6e6; --text2:#a0a0a0; --text3:#8a8a8a;
  --accent:#3b82f6; --accent2:#60a5fa; --accent-strong:#2b57bd;
  --focus:#7aa2f7; --focus-ring:rgba(122,162,247,.35);
  --topbar-bg:rgba(0,0,0,.92);
}
/* ===== 3. 主题：浅色（日间） ===== */
[data-theme="light"]{
  --bg:#f4f6fb; --card:#ffffff; --card2:#eef2f8; --border:#d7dfea;
  --input:#ffffff; --input-border:#7a8496; --input-border-hover:#5f6878; --row-hover:#f8fafc;
  --text:#1e293b; --text2:#475569; --text3:#64748b;
  --accent:#4070dd; --accent2:#5482ee; --accent-strong:#2f5ec4;
  --focus:#1d4ed8; --focus-ring:rgba(29,78,216,.25);
  --ok:#15683a; --warn:#8a5a00; --crit:#b91c1c; --info:#1d4ed8; --sooner:#8a5a00;
  --ok-strong:#15683a; --warn-strong:#8a5a00; --crit-strong:#b91c1c; --info-strong:#1d4ed8;
  --ok-tint:rgba(21,104,58,.10); --warn-tint:rgba(138,90,0,.10);
  --crit-tint:rgba(185,28,28,.10); --info-tint:rgba(29,78,216,.09);
  --sooner-tint:rgba(138,90,0,.08); --row-crit:rgba(185,28,28,.055);
  --prog-ok-1:#4070dd; --prog-ok-2:#72aaff;
  --prog-full-1:#15683a; --prog-mid-1:#b45309; --prog-low-1:#b91c1c;
  --shadow-card:0 4px 14px rgba(15,23,42,.10);
  --topbar-bg:rgba(244,246,251,.95);
  color-scheme:light;
}
/* ===== 4. 主题：护眼绿 ===== */
[data-theme="green"]{
  --bg:#0f1a14; --card:#16241c; --card2:#1d3025; --border:#24382c;
  --input:#1a2b21; --input-border:#8a94a6; --input-border-hover:#a4adbf; --row-hover:#182a20;
  --text:#d8f0e0; --text2:#8fc0a4; --text3:#8fb09b;
  --accent:#2c7a4f; --accent2:#3d9e68; --accent-strong:#246b45;
  --focus:#7dd3a0; --focus-ring:rgba(125,211,160,.32);
  --topbar-bg:rgba(15,26,20,.92);
}
/* ===== 5. 主题：紫韵 ===== */
[data-theme="purple"]{
  --bg:#14121f; --card:#1f1b2e; --card2:#282341; --border:#332d52;
  --input:#241f38; --input-border:#8a94a6; --input-border-hover:#a4adbf; --row-hover:#211c33;
  --text:#ece9f8; --text2:#b0a5d8; --text3:#9186bd;
  --accent:#8b5cf6; --accent2:#a78bfa; --accent-strong:#6d3fd1;
  --focus:#c4b5fd; --focus-ring:rgba(196,181,253,.30);
  --topbar-bg:rgba(20,18,31,.92);
}
/* ===== 6. 主题：暖灰 ===== */
[data-theme="warm"]{
  --bg:#1a1817; --card:#262320; --card2:#302c28; --border:#3d3833;
  --input:#2a2622; --input-border:#8a94a6; --input-border-hover:#a4adbf; --row-hover:#221f1c;
  --text:#f0ece6; --text2:#c4b8a8; --text3:#a59886;
  --accent:#a85c2e; --accent2:#d98b56; --accent-strong:#8f4c24;
  --focus:#f0a878; --focus-ring:rgba(240,168,120,.30);
  --topbar-bg:rgba(26,24,23,.92);
}

/* ===== 6.5 主题：白橙（白底 + 橙系主色）===== */
[data-theme="orange"]{
  --bg:#fdfcfb; --card:#ffffff; --card2:#fff7f0; --border:#f0e2d6;
  --input:#ffffff; --input-border:#b8a091; --input-border-hover:#96755f; --row-hover:#fff8f2;
  --text:#2b1f18; --text2:#6b5648; --text3:#8a7566;
  --accent:#ea7317; --accent2:#ff8c42; --accent-strong:#c25a0a;
  --on-accent:#ffffff;
  --focus:#c25a0a; --focus-ring:rgba(234,115,23,.28);
  --ok:#1a7f4b; --warn:#a35f00; --crit:#c0331f; --info:#b3540a; --sooner:#a35f00;
  --ok-strong:#1a7f4b; --warn-strong:#a35f00; --crit-strong:#c0331f; --info-strong:#b3540a;
  --ok-tint:rgba(26,127,75,.10); --warn-tint:rgba(163,95,0,.10);
  --crit-tint:rgba(192,51,31,.10); --info-tint:rgba(179,84,10,.10);
  --sooner-tint:rgba(163,95,0,.08); --row-crit:rgba(192,51,31,.055);
  --prog-ok-1:#ea7317; --prog-ok-2:#ffb072;
  --prog-full-1:#1a7f4b; --prog-mid-1:#b45309; --prog-low-1:#c0331f;
  --shadow-card:0 4px 14px rgba(120,72,32,.10);
  --topbar-bg:rgba(253,252,251,.95);
  color-scheme:light;
}

/* ===== 6.6 自定义调色：由「调色」面板实时写入 --custom-* =====
   只要设置过 --custom-accent，就覆盖当前主题的主色系，
   任意色相/深浅都能用，不限于预设主题。 */
html[data-custom="1"]{
  --accent:var(--custom-accent) !important;
  --accent2:var(--custom-accent2) !important;
  --accent-strong:var(--custom-accent-strong) !important;
  --on-accent:var(--custom-on-accent) !important;
  --focus:var(--custom-accent-strong) !important;
  --prog-ok-1:var(--custom-accent) !important;
  --prog-ok-2:var(--custom-accent2) !important;
}

/* ===== 6.7 让 hidden 属性真正生效 =====
   组件类（如 .alert{display:flex}）会覆盖浏览器默认的 [hidden]{display:none}，
   导致 hidden 元素仍然显示。用 !important 兜底，统一解决这类问题。 */
[hidden]{display:none !important;}

/* ===== 7. 基础重置 ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,'PingFang SC','Microsoft YaHei','Noto Sans SC',sans-serif;
  font-size:15px; line-height:1.5;
  min-height:100vh;
  transition:background .3s,color .3s;
  /* 固定顶栏下的锚点/焦点滚动留白 */
  scroll-padding-top:120px;
}
h1{font-size:20px;line-height:1.3;font-weight:700;}
h2{font-size:16px;line-height:1.4;font-weight:700;}
h3{font-size:16px;line-height:1.4;font-weight:700;}
a{color:var(--info);}
a:hover{color:var(--accent2);}
:focus{outline:none;}
:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}
::selection{background:var(--accent);color:var(--on-accent);}
img,svg{max-width:100%;}

/* 仅供读屏 */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* 跳到主内容 */
.skip-link{
  position:absolute;left:12px;top:-60px;z-index:200;
  background:var(--accent-strong);color:var(--on-accent);
  padding:10px 16px;border-radius:var(--radius-sm);font-weight:600;text-decoration:none;
  transition:top .15s;
}
.skip-link:focus{top:10px;color:var(--on-accent);}

/* ===== 8. 顶栏（含角色感知的用户菜单） ===== */
.app-header{
  position:sticky;top:0;z-index:60;
  background:var(--topbar-bg);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.app-header-inner{
  max-width:1440px;margin:0 auto;padding:10px 16px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--text);}
.brand .logo{font-size:22px;line-height:1;}
.brand .t{font-size:17px;font-weight:700;color:var(--text);white-space:nowrap;}
.app-nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-left:auto;}
.app-nav a{
  display:inline-flex;align-items:center;gap:6px;
  min-height:36px;padding:7px 13px;border-radius:var(--radius-sm);
  color:var(--text2);text-decoration:none;font-size:14px;font-weight:600;
  border:1px solid transparent;
}
.app-nav a:hover{color:var(--text);background:var(--card2);}
.app-nav a[aria-current="page"]{
  color:var(--on-accent);background:var(--accent-strong);border-color:var(--accent-strong);
}
.nav-btn{
  display:inline-flex;align-items:center;gap:6px;
  min-height:36px;padding:7px 13px;border-radius:var(--radius-sm);
  background:var(--card2);border:1px solid var(--border);color:var(--text2);
  font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;
}
.nav-btn:hover{color:var(--text);border-color:var(--input-border);}
.user-chip{
  display:flex;align-items:center;gap:9px;
  padding:5px 12px 5px 7px;border-radius:999px;
  background:var(--card2);border:1px solid var(--border);
  min-height:38px;
}
.user-chip .av{
  width:28px;height:28px;border-radius:50%;flex:0 0 28px;
  background:var(--accent-strong);color:var(--on-accent);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;
}
.user-chip .un{font-size:14px;font-weight:600;color:var(--text);max-width:12em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.role-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;
}
.role-admin{background:var(--info-tint);color:var(--info);border:1px solid rgba(143,176,245,.45);}
.role-nurse{background:var(--ok-tint);color:var(--ok);border:1px solid rgba(74,222,128,.40);}
.role-doctor{background:rgba(96,165,250,.16);color:#93c5fd;border:1px solid rgba(96,165,250,.45);}
.role-director{background:rgba(251,191,36,.16);color:#fcd34d;border:1px solid rgba(251,191,36,.45);}
[data-theme="light"] .role-admin{border-color:rgba(29,78,216,.35);}
[data-theme="light"] .role-nurse{border-color:rgba(21,104,58,.35);}
[data-theme="light"] .role-doctor{background:rgba(37,99,235,.10);color:#1d4ed8;border-color:rgba(37,99,235,.35);}
[data-theme="light"] .role-director{background:rgba(180,120,0,.12);color:#8a5a00;border-color:rgba(180,120,0,.35);}
.clock{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:7px 12px;font-size:13px;color:var(--text2);white-space:nowrap;min-height:36px;
}
.clock b{color:var(--text);font-variant-numeric:tabular-nums;font-size:14px;}
@media(max-width:900px){
  .app-header-inner{gap:8px;padding:8px 12px;}
  .app-nav{width:100%;margin-left:0;order:3;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;}
  .brand .t{font-size:15px;}
}
@media(max-width:560px){
  .user-chip .un{display:none;}
  .clock{display:none;}
}

/* ===== 9. 页面骨架 ===== */
.page-wrap{max-width:1440px;margin:0 auto;padding:16px 16px 56px;}
.page-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:14px;
}
.page-head .ph-txt{min-width:0;}
.page-head h1{color:var(--accent2);}
[data-theme="light"] .page-head h1{color:var(--accent-strong);}
.page-head .ph-sub{font-size:13px;color:var(--text3);margin-top:4px;line-height:1.6;}
.foot-note{
  text-align:center;color:var(--text3);font-size:12px;margin-top:22px;line-height:1.8;
  padding:0 8px;
}

/* ===== 10. 面板 / 卡片 ===== */
.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;margin-bottom:16px;
  transition:background .3s,border-color .3s;
}
.card.accent{border-color:var(--accent-strong);border-width:2px;}
.card-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:10px;
}
.card-head h2{color:var(--text);display:flex;align-items:center;gap:8px;}
.card-head .count{
  font-size:12px;font-weight:700;color:var(--text2);
  background:var(--card2);border:1px solid var(--border);
  padding:2px 9px;border-radius:999px;font-variant-numeric:tabular-nums;
}
.card .sub{display:block;font-size:12px;color:var(--text3);font-weight:400;margin-bottom:10px;line-height:1.6;}
.hint{font-size:12px;color:var(--text3);margin-top:10px;line-height:1.7;}

/* ===== 11. 统计条 ===== */
.stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.stat-card{
  background:var(--card);padding:10px 16px;border-radius:var(--radius-sm);
  border:1px solid var(--border);min-width:104px;flex:1 1 104px;
}
.stat-card .l{font-size:12px;color:var(--text3);display:flex;align-items:center;gap:4px;}
.stat-card .v{font-size:20px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;}
.stat-card.warn .v{color:var(--warn);}

/* 统计卡里的床号标签（点击跳到该条记录） */
.stat-card.has-beds{min-width:150px;flex:1 1 150px;}
.stat-beds{
  display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;
}
.bed-chip{
  font-size:11px;line-height:1;padding:4px 7px;border-radius:999px;
  border:1px solid currentColor;background:transparent;color:var(--text2);
  cursor:pointer;min-height:20px;white-space:nowrap;
  transition:background .12s ease,color .12s ease;
}
.bed-chip:hover,.bed-chip:focus-visible{
  background:var(--accent);color:var(--on-accent);border-color:var(--accent);
}
.stat-card.crit .bed-chip{color:var(--crit);}
.stat-card.warn .bed-chip{color:var(--warn);}
.stat-card.crit .bed-chip:hover,.stat-card.warn .bed-chip:hover{
  background:currentColor;
}
.stat-card.crit .bed-chip:hover{color:var(--card);}
.stat-card.warn .bed-chip:hover{color:var(--card);}
.bed-more{font-size:11px;color:var(--text3);align-self:center;}

/* 床号跳转后的高亮脉冲 */
@keyframes rowFlash{
  0%   {box-shadow:0 0 0 0 var(--accent);}
  25%  {box-shadow:0 0 0 3px var(--accent);background:var(--accent);}
  60%  {box-shadow:0 0 0 3px var(--accent);}
  100% {box-shadow:0 0 0 0 transparent;}
}
tr.row-flash{animation:rowFlash 1.8s ease-out 1;}
tr.row-flash > td{background:transparent !important;}
.stat-card.crit .v{color:var(--crit);}
.stat-card.ok .v{color:var(--ok);}

/* ===== 12. 表格 ===== */
.tbl-wrap{overflow-x:auto;border-radius:var(--radius-sm);-webkit-overflow-scrolling:touch;}
table{width:100%;border-collapse:collapse;font-size:13px;}
caption{text-align:left;font-size:12px;color:var(--text3);padding:0 0 8px;}
thead th{
  background:var(--card2);color:var(--text2);padding:9px 8px;text-align:left;
  font-weight:700;white-space:nowrap;font-size:12px;border-bottom:1px solid var(--border);
}
tbody td{padding:9px 8px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text);}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--row-hover);}
tbody tr.row-crit{background:var(--row-crit);}
tbody tr.row-crit:hover{background:var(--crit-tint);}
td.actions{white-space:nowrap;}
td.actions .btn + .btn,
td.actions .btn + .x-btn,
td.actions .x-btn + .btn{margin-left:6px;}
.bed{
  display:inline-block;font-weight:700;color:var(--text);background:var(--card2);
  padding:2px 8px;border-radius:5px;white-space:nowrap;
}
.num{font-variant-numeric:tabular-nums;white-space:nowrap;}
.big-time{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;}
.text-crit{color:var(--crit);}
.text-warn{color:var(--warn);}
.text-ok{color:var(--ok);}
.text-muted{color:var(--text3);}
.meta{font-size:11px;color:var(--text3);line-height:1.5;}
.empty{text-align:center;color:var(--text3);font-size:13px;padding:20px 12px;}

/* 余量进度条 */
.cell-prog{display:flex;align-items:center;gap:7px;min-width:112px;}
.prog{
  height:8px;background:var(--input);border-radius:4px;overflow:hidden;
  min-width:60px;border:1px solid var(--border);flex:1;
}
.prog > i{display:block;height:100%;border-radius:4px;transition:width .4s;}
.pg-ok{background:linear-gradient(90deg,var(--prog-ok-1),var(--prog-ok-2));}
.pg-full{background:linear-gradient(90deg,var(--prog-full-1),var(--ok));}
.pg-mid{background:linear-gradient(90deg,var(--prog-mid-1),var(--warn));}
.pg-low{background:linear-gradient(90deg,var(--prog-low-1),var(--crit));}
.cell-prog .pv{font-size:11px;color:var(--text3);font-variant-numeric:tabular-nums;white-space:nowrap;}

/* ===== 13. 徽章（颜色 + 文字 + 图标 三重编码） ===== */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:var(--radius-sm);font-size:12px;font-weight:700;
  white-space:nowrap;border:1px solid transparent;line-height:1.5;
}
.badge .bi{font-size:11px;line-height:1;}
.b-crit{background:var(--crit-tint);color:var(--crit);border-color:rgba(255,107,107,.45);}
.b-warn{background:var(--warn-tint);color:var(--warn);border-color:rgba(255,193,69,.45);}
.b-soon{background:var(--sooner-tint);color:var(--sooner);border-color:rgba(232,212,122,.40);}
.b-ok{background:var(--ok-tint);color:var(--ok);border-color:rgba(74,222,128,.42);}
.b-blue{background:var(--info-tint);color:var(--info);border-color:rgba(143,176,245,.42);}
.b-gray{background:var(--card2);color:var(--text2);border-color:var(--border);}
[data-theme="light"] .b-crit{border-color:rgba(185,28,28,.40);}
[data-theme="light"] .b-warn,[data-theme="light"] .b-soon{border-color:rgba(138,90,0,.40);}
[data-theme="light"] .b-ok{border-color:rgba(21,104,58,.40);}
[data-theme="light"] .b-blue{border-color:rgba(29,78,216,.40);}
.badge.shift{font-size:11px;font-weight:600;color:var(--text2);background:var(--card2);border-color:var(--border);}

/* ===== 14. 按钮 ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:38px;padding:8px 15px;border-radius:var(--radius-sm);
  border:1px solid transparent;background:var(--accent-strong);color:var(--on-accent);
  font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
  text-decoration:none;line-height:1.3;
}
.btn:hover{background:var(--accent);color:var(--on-accent);}
.btn:active{transform:translateY(1px);}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;}
.btn-gray{background:var(--card2);color:var(--text2);border-color:var(--border);}
.btn-gray:hover{background:var(--input);color:var(--text);border-color:var(--input-border);}
.btn-ok{background:var(--ok-strong);}
.btn-ok:hover{background:var(--ok-strong);filter:brightness(1.15);}
.btn-warn{background:var(--warn-strong);}
.btn-warn:hover{background:var(--warn-strong);filter:brightness(1.15);}
.btn-danger{background:var(--crit-strong);}
.btn-danger:hover{background:var(--crit-strong);filter:brightness(1.15);}
/* 小按钮：仍保证 >= 28px 触控目标（SC 2.5.8 要求 24px） */
.btn-sm{min-height:30px;padding:5px 11px;font-size:12.5px;}
.x-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;min-height:30px;padding:4px 9px;border-radius:var(--radius-sm);
  background:var(--card2);border:1px solid var(--border);color:var(--text2);
  font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;
}
.x-btn:hover{background:var(--crit-tint);color:var(--crit);border-color:var(--crit);}
.btn-block{width:100%;}

/* ===== 15. 表单 ===== */
.field{display:flex;flex-direction:column;gap:5px;min-width:0;justify-content:flex-start;}
/* 标签统一高度，长标签（如「冲洗量（ml）」）折行时不把输入框顶下去 */
.field > label,.field-label{min-height:18px;}
.field > label,.field-label{
  font-size:12px;font-weight:600;color:var(--text2);
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
}
.field > label .req{color:var(--crit);}
.field .help{font-size:11px;color:var(--text3);line-height:1.5;}
input[type="text"],input[type="password"],input[type="number"],input[type="date"],
input[type="datetime-local"],input[type="time"],input[type="color"],select,textarea{
  background:var(--input);border:1px solid var(--input-border);color:var(--text);
  padding:8px 10px;border-radius:var(--radius-sm);
  font-size:14px;font-family:inherit;min-height:38px;width:100%;
  transition:border-color .15s,box-shadow .15s;
  color-scheme:inherit;
}
input:hover,select:hover,textarea:hover{border-color:var(--input-border-hover);}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--focus);outline-offset:2px;
  border-color:var(--focus);
  box-shadow:0 0 0 5px var(--focus-ring);
}
input::placeholder,textarea::placeholder{color:var(--text3);opacity:1;}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{
  border-color:var(--crit);border-width:2px;
}
input[type="number"]{font-variant-numeric:tabular-nums;}
select{
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 17px) calc(50% + 1px),calc(100% - 12px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:32px;
}
textarea{min-height:84px;resize:vertical;line-height:1.6;}
/* 不再使用"隐藏控件 + 占位符"的写法；字段说明统一由 <label> + .help 承载 */
.form-grid{
  display:grid;gap:12px 14px;
  /* 固定列数，保证同一行字段的标签与输入框始终对齐；
     不再用 auto-fill，避免字段数变化时整块跳到第二行造成错位 */
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  align-items:start;
}
.form-grid .field-wide{grid-column:1 / -1;}
.form-grid .field span2{grid-column:span 2;}
.form-actions{
  display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;
  grid-column:1 / -1;
}
.field-inline{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.field-inline select{width:auto;min-width:96px;}
.field-inline input[type="number"]{width:auto;min-width:96px;}

/* 可访问的复选框 / 单选框 */
.check{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--text2);cursor:pointer;min-height:var(--tap);}
.check input[type="checkbox"],.check input[type="radio"]{
  width:20px;height:20px;min-height:20px;accent-color:var(--accent-strong);cursor:pointer;flex:0 0 20px;
}

/* ===== 16. 模态框 ===== */
.mask{
  position:fixed;inset:0;z-index:100;
  background:rgba(0,0,0,.66);
  display:none;                 /* 不用时 display:none，绝不靠位移移出屏幕 */
  align-items:center;justify-content:center;
  padding:16px;
}
.mask.show{display:flex;}
.modal{
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:20px;width:100%;max-width:560px;max-height:86vh;overflow-y:auto;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;
}
.modal-head h2{color:var(--text);font-size:17px;}
.modal-foot{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:16px;}
body.modal-open{overflow:hidden;}

/* ===== 17. 提示条 / Toast ===== */
.toast-wrap{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  z-index:300;display:flex;flex-direction:column;gap:8px;align-items:center;
  width:calc(100% - 32px);max-width:520px;pointer-events:none;
}
.toast{
  display:flex;align-items:flex-start;gap:9px;
  padding:11px 15px;border-radius:var(--radius-sm);
  background:var(--card2);border:1px solid var(--border);border-left:4px solid var(--accent-strong);
  color:var(--text);font-size:14px;line-height:1.55;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  pointer-events:auto;animation:toast-in .18s ease-out;
  max-width:100%;
}
.toast .ti{flex:0 0 auto;font-size:15px;line-height:1.4;}
.toast.ok{border-left-color:var(--ok);}
.toast.err{border-left-color:var(--crit);}
.toast.warn{border-left-color:var(--warn);}
.toast.info{border-left-color:var(--info);}
@keyframes toast-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

.alert{
  display:flex;align-items:flex-start;gap:9px;
  padding:11px 14px;border-radius:var(--radius-sm);font-size:14px;line-height:1.6;
  border:1px solid var(--border);background:var(--card2);color:var(--text);
  margin-bottom:14px;
}
.alert .ai{flex:0 0 auto;}
.alert-ok{background:var(--ok-tint);border-color:rgba(74,222,128,.45);color:var(--text);}
.alert-ok .ai{color:var(--ok);}
.alert-err{background:var(--crit-tint);border-color:rgba(255,107,107,.5);color:var(--text);}
.alert-err .ai{color:var(--crit);}
.alert-warn{background:var(--warn-tint);border-color:rgba(255,193,69,.45);color:var(--text);}
.alert-warn .ai{color:var(--warn);}
.alert-info{background:var(--info-tint);border-color:rgba(143,176,245,.45);color:var(--text);}
.alert-info .ai{color:var(--info);}

/* ===== 18. 分段切换（班次口径 日划分 / 整夜班） ===== */
.seg{
  display:inline-flex;background:var(--card2);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:3px;gap:3px;
}
.seg button{
  min-height:32px;padding:5px 13px;border-radius:5px;border:1px solid transparent;
  background:transparent;color:var(--text2);font-size:13px;font-weight:600;
  font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
}
.seg button:hover{color:var(--text);background:var(--card);}
.seg button[aria-pressed="true"]{
  background:var(--accent-strong);color:var(--on-accent);border-color:var(--accent-strong);
}

/* ===== 19. 主 Tab（ICU 工作台 / 用户管理；保留 APG tabs 语义） ===== */
.tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.tab{
  min-height:42px;padding:9px 20px;border-radius:9px;
  background:var(--card);border:1px solid var(--border);
  font-size:15px;font-weight:600;color:var(--text2);font-family:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;transition:.15s;
}
.tab:hover{border-color:var(--accent);color:var(--text);}
.tab[aria-selected="true"]{
  background:var(--accent-strong);color:var(--on-accent);border-color:var(--accent-strong);
  box-shadow:var(--shadow-card);
}
.panel[hidden]{display:none;}

/* ===== 20. 登录页 ===== */
.auth-body{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:20px 16px;
  background-image:radial-gradient(900px 500px at 50% -10%,rgba(64,112,221,.18),transparent);
}
.auth-wrap{width:100%;max-width:392px;}
.auth-brand{text-align:center;margin-bottom:22px;}
.auth-brand .logo{font-size:44px;line-height:1;}
.auth-brand h1{font-size:22px;color:var(--accent2);margin-top:8px;}
[data-theme="light"] .auth-brand h1{color:var(--accent-strong);}
.auth-brand p{font-size:13px;color:var(--text3);margin-top:6px;}
.auth-card{
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:26px 22px;box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.auth-card .field{margin-bottom:14px;}
.auth-card .btn-block{margin-top:6px;min-height:44px;font-size:16px;}
.auth-tip{text-align:center;font-size:12px;color:var(--text3);margin-top:16px;line-height:1.8;}
@media(max-width:420px){.auth-card{padding:22px 16px;}}

/* ===== 21. 用户管理 ===== */
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px;}
.search{position:relative;flex:1 1 200px;max-width:320px;}
.search input{padding-left:34px;}
.search .si{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  color:var(--text3);font-size:14px;pointer-events:none;
}
.user-name-cell{display:flex;flex-direction:column;gap:2px;}

/* ===== 22. 通用工具类 ===== */
.flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.flex-end{justify-content:flex-end;}
.grow{flex:1 1 auto;}
.nowrap{white-space:nowrap;}
.mt-8{margin-top:8px;}
.mt-16{margin-top:16px;}
.mb-0{margin-bottom:0;}
.stack{display:flex;flex-direction:column;gap:12px;}
.divider{border:0;border-top:1px solid var(--border);margin:14px 0;}

/* ===== 23. 响应式（床旁平板 / 手机） ===== */
@media(max-width:1024px){
  body{font-size:15px;}
  .page-wrap{padding:14px 12px 60px;}
  .card{padding:14px;}
}
@media(max-width:768px){
  .form-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));}
  .stat-card{flex:1 1 calc(50% - 10px);min-width:0;}
  .page-wrap{padding:12px 10px 64px;}
  .modal{max-height:92vh;padding:16px;}
  table{font-size:13px;}
  thead th,tbody td{padding:8px 7px;}
}
@media(max-width:560px){
  .tabs{gap:6px;}
  .tab{padding:9px 12px;font-size:14px;flex:1 1 auto;}
  .form-grid{grid-template-columns:1fr 1fr;}
  .form-actions{grid-column:1 / -1;}
  .toast-wrap{bottom:12px;}
}

/* ===== 手机端：保持整表横向滑动（列不换行），进度条列置顶 =====
   表格仍用 table-layout，超出容器就左右滑动；
   「余量」进度条在窄屏下用 CSS order 提到最前面，一眼先看剩余量。 */
@media(max-width:768px){
  .tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-sm);
            -webkit-overflow-scrolling:touch;}
  /* 横向滑动时表头跟随 */
  .tbl-wrap table{min-width:860px;font-size:13px;}
  thead th,tbody td{padding:8px 7px;white-space:nowrap;}

  /* 把进度条列（源码里是第 4 列）排到第一列显示 */
  .tbl-wrap tbody tr{display:flex;flex-wrap:wrap;align-items:center;}
  .tbl-wrap thead tr{display:flex;flex-wrap:wrap;align-items:center;}
  .tbl-wrap tbody td,.tbl-wrap thead th{flex:0 0 auto;}
  .tbl-wrap tbody td, .tbl-wrap thead th{order:0;}
  /* 进度条列提前（写在后面，确保覆盖上面的 order:0） */
  .tbl-wrap tbody td.cell-prog{order:-2;min-width:126px;}
  .tbl-wrap thead th:nth-child(4){order:-2;min-width:126px;}
  /* 进度条本身撑满该格 */
  .tbl-wrap td.cell-prog .cell-prog{width:110px;}
}

@media (min-resolution:1dppx) and (max-width:480px){
  input,select,textarea{font-size:16px;}  /* 防止 iOS 聚焦时自动放大页面 */
}

/* ===== 24. 减少动态 ===== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .toast{animation:none;}
}
/* 用户手动关闭动效（顶栏按钮 aria-pressed=true） */
html.reduce-motion *,html.reduce-motion *::before,html.reduce-motion *::after{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
}

/* ===== 25. 打印（交接班带表格下病区） ===== */
@media print{
  .app-header,.toast-wrap,.btn,.x-btn,.seg,.hint,.skip-link{display:none !important;}
  body{background:#fff;color:#000;}
  .card{border:1px solid #ccc;box-shadow:none;break-inside:avoid;}
  .tbl-wrap{overflow:visible;}
  a[href]::after{content:"";}
}

/* ============================================================
   调色面板
   ============================================================ */
.theme-mask{
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  display:flex;align-items:flex-start;justify-content:flex-end;
  padding:70px 16px 16px;z-index:1200;
}
.theme-mask[hidden]{display:none;}
.theme-panel{
  width:340px;max-width:100%;max-height:calc(100vh - 90px);
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:0 18px 48px rgba(0,0,0,.35);
  display:flex;flex-direction:column;overflow:hidden;
}
.tp-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--border);
}
.tp-head h2{margin:0;font-size:16px;color:var(--text);}
.tp-body{padding:14px 16px;overflow-y:auto;}
.tp-label{
  margin:14px 0 8px;font-size:12px;font-weight:600;
  color:var(--text3);letter-spacing:.02em;
}
.tp-label:first-child{margin-top:0;}
/* 标题删掉后，用间距区分区块 */
.tp-presets{margin-bottom:14px;}
.tp-row{margin-bottom:4px;}
.tp-body > .tp-row + .tp-slider{margin-top:14px;}
.tp-body > .tp-slider:last-of-type + .tp-row{margin-top:16px;margin-bottom:0;}

/* 预设色板 */
.tp-presets{display:flex;gap:8px;flex-wrap:wrap;}
.tp-swatch{
  width:34px;height:34px;border-radius:50%;cursor:pointer;
  border:2px solid transparent;position:relative;
  transition:transform .12s ease,border-color .12s ease;
}
.tp-swatch:hover{transform:scale(1.1);}
.tp-swatch[aria-checked="true"]{
  border-color:var(--text);box-shadow:0 0 0 3px var(--card) inset;
}

/* 取色器行 */
.tp-row{display:flex;gap:8px;align-items:center;}
.tp-row input[type="color"]{
  width:52px;height:38px;padding:2px;border-radius:8px;
  border:1px solid var(--input-border);background:var(--input);cursor:pointer;
  flex:0 0 auto;
}
.tp-row input[type="text"]{
  flex:1 1 auto;height:38px;font-family:ui-monospace,Menlo,monospace;
  letter-spacing:.03em;
}

/* 滑块 */
.tp-slider{
  display:grid;grid-template-columns:52px 1fr 46px;
  align-items:center;gap:8px;margin-top:10px;
}
.tp-slider label{font-size:12px;color:var(--text2);}
.tp-slider input[type="range"]{
  width:100%;height:24px;accent-color:var(--accent);cursor:pointer;
}
.tp-slider span{
  font-size:12px;color:var(--text3);text-align:right;
  font-variant-numeric:tabular-nums;
}
/* 色相条用彩虹背景提示 */
#tp-hue{
  background:linear-gradient(to right,
    #f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%);
  border-radius:4px;height:9px;-webkit-appearance:none;appearance:none;
  accent-color:auto;
}
#tp-hue::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:#fff;border:2px solid var(--text);cursor:pointer;
}

/* 背景按钮 */
.tp-bgbtn{
  flex:1 1 0;padding:9px 8px;font-size:13px;cursor:pointer;
  background:var(--input);color:var(--text2);
  border:1px solid var(--input-border);border-radius:8px;
}
.tp-bgbtn[aria-pressed="true"]{
  border-color:var(--accent);color:var(--accent);font-weight:600;
}

/* 预览 */
.tp-preview{
  margin-top:14px;padding:12px;border-radius:8px;
  background:var(--card2);border:1px solid var(--border);
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.tpv-btn{
  background:var(--accent);color:var(--on-accent);
  padding:7px 14px;border-radius:6px;font-size:13px;font-weight:600;
}
.tpv-badge{
  background:var(--ok-tint);color:var(--ok);
  padding:5px 10px;border-radius:999px;font-size:12px;
  border:1px solid currentColor;
}
.tpv-link{color:var(--accent-strong);font-size:13px;text-decoration:underline;}

.tp-foot{
  display:flex;gap:8px;justify-content:flex-end;
  padding:12px 16px;border-top:1px solid var(--border);
}

@media(max-width:560px){
  .theme-mask{justify-content:center;padding:12px;}
  .theme-panel{width:100%;max-height:calc(100vh - 24px);}
}