/* ==========================================================================
   v2 设计系统 · 设备点检系统
   基调：SCADA / HMI 工业监控风 —— 深蓝灰低饱和底 + 青蓝强调 + 语义状态色
   原则：克制（不发光晕/不用霓虹紫）· 高对比 · 8pt 栅格 · 键盘可达 · 尊重减少动效
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root {
  /* 画布与层次（surface） */
  --bg-0:#080d18;          /* 最底 */
  --bg-1:#0d1524;          /* 页面底 */
  --bg-2:#131d31;          /* 卡片 */
  --bg-3:#1a2740;          /* 抬升卡片 / 表头 */
  --bg-4:#22314f;          /* hover */

  --line-1:#26344f;        /* 分隔线 */
  --line-2:#33456a;        /* 强调线 */

  /* 文本（对比度按 WCAG AA 校准，正文在 --bg-1 / --bg-2 上均 ≥ 4.5:1） */
  --tx-1:#e8eefc;          /* 主文本  14.5:1（在 --bg-2 上） */
  --tx-2:#b3c2dd;          /* 次文本   9.4:1 */
  --tx-3:#8b9dbe;          /* 辅助文本 6.1:1 */
  --tx-4:#7d8eaf;          /* 占位符 5.1:1 —— 原来 #6b7c9c 只有 4.0:1，且被大量当作
                              「次要说明文字」用（设备点检表的「—」占位等），12.5px 下偏低；
                              统一提到 5.1:1，占位符与小字说明都稳过 AA。 */

  /* 强调色 */
  --accent:#3d8bfd;        /* 主强调（蓝） */
  --accent-hi:#5fa0ff;
  --accent-soft:rgba(61,139,253,.16);
  --accent-line:rgba(61,139,253,.42);
  --accent-ink:#2563eb;    /* 需要「白字压底」的实心按钮专用：白字 5.2:1。
                              原来的 --accent(#3d8bfd) 上压白字只有 3.33:1，14px 下不达标
                              （截图里的主按钮看着发虚就是这个原因）。仅用于实心底，
                              描边/文字强调仍用 --accent，保持原有视觉语言。 */
  --accent-ink-hi:#1d4ed8;
  --cyan:#22b8cf;
  --cyan-soft:rgba(34,184,207,.14);

  /* 语义状态色（红涨绿跌不适用，此处为「正常/异常」设备状态） */
  --ok:#2fbf71;   --ok-soft:rgba(47,191,113,.15);  --ok-line:rgba(47,191,113,.42);
  --ng:#e5484d;   --ng-soft:rgba(229,72,77,.15);   --ng-line:rgba(229,72,77,.45);
  /* 深底上的红字：--ng 在 --bg-2 上仅 4.30:1，改用 --ng-hi 压到 5.8:1。
     表格异常数字、异常计数这类「要一眼看见」的小字都用它。 */
  --ng-hi:#ff6b6b;
  --warn:#e2a03f; --warn-soft:rgba(226,160,63,.15);--warn-line:rgba(226,160,63,.42);
  --warn-hi:#f0b355;       /* 深底上的黄字，比 --warn 再亮一档 */
  --idle:#64748b; --idle-soft:rgba(100,116,139,.16);

  /* 圆角 */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-full:999px;

  /* 间距（8pt 栅格） */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px;

  /* 字体 */
  --fs-xs:11px; --fs-sm:12.5px; --fs-md:14px; --fs-lg:16px;
  --fs-xl:19px; --fs-2xl:24px; --fs-3xl:30px; --fs-4xl:38px;
  --lh-tight:1.25; --lh-base:1.6;

  /* 阴影（低扩散，模拟工业面板而非漂浮卡片） */
  --sh-1:0 1px 2px rgba(0,0,0,.35);
  --sh-2:0 4px 14px rgba(0,0,0,.34);
  --sh-3:0 12px 34px rgba(0,0,0,.44);

  /* 动效 */
  --t-fast:120ms cubic-bezier(.4,0,.2,1);
  --t-base:200ms cubic-bezier(.4,0,.2,1);

  --nav-h:56px;
  --maxw:1360px;
}

/* ---------- 2. 基础重置 ---------- */
*, *::before, *::after { box-sizing:border-box; }
html, body { margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body {
  min-height:100vh;
  font-family:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:var(--fs-md);
  line-height:var(--lh-base);
  color:var(--tx-1);
  background:
    radial-gradient(1100px 560px at 10% -12%, rgba(61,139,253,.13), transparent 62%),
    radial-gradient(900px 460px at 105% 8%,   rgba(34,184,207,.10), transparent 58%),
    linear-gradient(168deg, var(--bg-0), var(--bg-1) 46%, #101a2c);
  background-attachment:fixed;
}
a { color:var(--accent-hi); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:3px; }
button, input, select, textarea { font-family:inherit; font-size:var(--fs-md); }
button { cursor:pointer; }
h1,h2,h3,h4 { margin:0; line-height:var(--lh-tight); font-weight:700; }
:focus-visible {
  outline:2px solid var(--accent-hi);
  outline-offset:2px;
  border-radius:var(--r-sm);
}
::selection { background:var(--accent-soft); color:#fff; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:var(--r-full); border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover { background:#40567f; background-clip:content-box; }

/* ---------- 3. 布局 ---------- */
.app-nav {
  position:sticky; top:0; z-index:60;
  height:var(--nav-h);
  display:flex; align-items:center; gap:var(--s-2);
  padding:0 var(--s-5);
  background:rgba(8,13,24,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-1);
}
.app-nav .brand {
  display:flex; align-items:center; gap:var(--s-2);
  font-size:var(--fs-lg); font-weight:800; letter-spacing:.5px;
  color:var(--tx-1); white-space:nowrap;
}
.app-nav .brand .mark {
  width:26px; height:26px; flex:none; border-radius:7px;
  display:grid; place-items:center; font-size:14px;
  background:linear-gradient(135deg,var(--accent),var(--cyan));
  color:#04101f;
}
.app-nav .links { display:flex; align-items:center; gap:2px; margin-left:var(--s-4); }
.app-nav .links a {
  padding:7px 13px; border-radius:var(--r-md);
  font-size:var(--fs-md); color:var(--tx-2); white-space:nowrap;
  border:1px solid transparent; transition:background var(--t-fast), color var(--t-fast);
}
.app-nav .links a:hover { background:var(--bg-3); color:var(--tx-1); text-decoration:none; }
.app-nav .links a[aria-current="page"] {
  background:var(--accent-soft); border-color:var(--accent-line); color:#fff; font-weight:600;
}
/* 操作手册入口（v1.35.0）：站内页面但新窗口打开，用「按钮感」与普通导航项区分 */
.app-nav .links a.man { color:var(--tx-1); border-color:var(--line-2); background:var(--bg-3); }
.app-nav .links a.man:hover { background:var(--bg-4); border-color:var(--line-2); }
/* 外部系统快捷入口（v1.34.0）：青色 + ↗ 表示「点开会离开本站」 */
.app-nav .links .sep { width:1px; height:16px; background:var(--line-2); margin:0 6px; flex:none; }
.app-nav .links a.ext { color:var(--cyan); }
.app-nav .links a.ext:hover { background:var(--cyan-soft); color:var(--cyan); }
.app-nav .links a.ext .ar { font-size:var(--fs-xs); opacity:.85; margin-left:3px; }
@media (max-width:900px) {
  .app-nav .links .sep { display:none; }
  .app-nav .links a.ext { color:var(--cyan); }
}
.app-nav .sp { flex:1; }
.app-nav .ver { font-size:var(--fs-xs); color:var(--tx-4); font-variant-numeric:tabular-nums; }
.nav-toggle { display:none; }

.page { max-width:var(--maxw); margin:0 auto; padding:var(--s-6) var(--s-5) var(--s-12); }
.page-head { display:flex; align-items:flex-end; gap:var(--s-4); flex-wrap:wrap; margin-bottom:var(--s-5); }
.page-head h1 { font-size:var(--fs-2xl); letter-spacing:.4px; }
.page-head .sub { font-size:var(--fs-sm); color:var(--tx-3); }
.page-head .sp { flex:1; }

/* ---------- 4. 表面 / 卡片 ---------- */
.panel {
  background:var(--bg-2);
  border:1px solid var(--line-1);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}
.panel-pad { padding:var(--s-5); }
.panel + .panel { margin-top:var(--s-4); }
.panel-head {
  display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-4) var(--s-5);
  border-bottom:1px solid var(--line-1);
}
.panel-head h2 { font-size:var(--fs-lg); }
.panel-head .sp { flex:1; }

/* ---------- 5. 按钮 ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:36px; padding:0 14px;
  border-radius:var(--r-md); border:1px solid var(--line-2);
  background:var(--bg-3); color:var(--tx-1);
  font-size:var(--fs-md); font-weight:600; white-space:nowrap;
  transition:background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn:hover { background:var(--bg-4); border-color:var(--line-2); text-decoration:none; }
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn-sm { min-height:30px; padding:0 11px; font-size:var(--fs-sm); border-radius:var(--r-sm); }
.btn-lg { min-height:44px; padding:0 22px; font-size:var(--fs-lg); }
/* 实心主按钮用 --accent-ink（白字 5.2:1）；悬停反而「更浅」会掉到 3.3:1，
   所以悬停往更深走，保证鼠标停上去时文字照样清晰。 */
.btn-primary { background:var(--accent-ink); border-color:var(--accent-ink); color:#fff; }
.btn-primary:hover { background:var(--accent-ink-hi); border-color:var(--accent-ink-hi); color:#fff; }
.btn-ghost { background:transparent; border-color:var(--line-2); color:var(--tx-2); }
.btn-ghost:hover { background:var(--bg-3); color:var(--tx-1); }
.btn-danger { background:transparent; border-color:var(--ng-line); color:var(--ng-hi); }
.btn-danger:hover { background:var(--ng-soft); }
.btn-icon { min-width:36px; padding:0 9px; }

/* ---------- 6. 表单 ---------- */
.field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.field > label { font-size:var(--fs-sm); font-weight:600; color:var(--tx-3); }
.input, input[type=text], input[type=password], input[type=date], input[type=month], select, textarea {
  width:100%; min-height:36px; padding:7px 11px;
  background:var(--bg-1); color:var(--tx-1);
  border:1px solid var(--line-2); border-radius:var(--r-md);
  outline:none; transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
input::placeholder, textarea::placeholder { color:var(--tx-4); }
/* 展开后的原生下拉列表由操作系统绘制，会忽略 select 自身的 color：
   不显式给 option 设色，未选中项就会以系统灰字落在暗底上（选中项因系统高亮反而看得见）——
   这正是「房间下拉里只有当前房间清楚、其他都发虚」的根因。 */
select option, select optgroup { color:var(--tx-1); background:var(--bg-3); }
select option:disabled { color:var(--tx-4); }
select optgroup { font-style:normal; font-weight:700; color:var(--tx-3); }
input:focus, select:focus, textarea:focus {
  border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
select { cursor:pointer; appearance:none; padding-right:30px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%238b9dbe' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
}
textarea { resize:vertical; min-height:64px; line-height:1.55; }
.row { display:flex; gap:var(--s-3); flex-wrap:wrap; align-items:flex-end; }
.row > .field { flex:1 1 180px; }

/* ---------- 7. 表格 ---------- */
.table-wrap { overflow:auto; border-radius:var(--r-md); }
table.tbl { width:100%; border-collapse:separate; border-spacing:0; font-size:var(--fs-sm); }
table.tbl th, table.tbl td { padding:9px 12px; text-align:left; border-bottom:1px solid var(--line-1); vertical-align:middle; }
table.tbl thead th {
  position:sticky; top:0; z-index:2;
  background:var(--bg-3); color:var(--tx-3);
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.4px;
  white-space:nowrap;
}
table.tbl tbody tr:hover td { background:rgba(255,255,255,.025); }
table.tbl tbody tr:last-child td { border-bottom:none; }

/* ---------- 8. 徽标 / 药丸 ---------- */
.pill { display:inline-flex; align-items:center; gap:5px; padding:2px 9px;
  border-radius:var(--r-full); font-size:var(--fs-xs); font-weight:700; white-space:nowrap; }
.pill-ok   { background:var(--ok-soft);   color:var(--ok);   border:1px solid var(--ok-line); }
.pill-ng   { background:var(--ng-soft);   color:#ff8f92;     border:1px solid var(--ng-line); }
.pill-warn { background:var(--warn-soft); color:var(--warn); border:1px solid var(--warn-line); }
.pill-idle { background:var(--idle-soft); color:var(--tx-3); border:1px solid var(--line-2); }
.dot { width:9px; height:9px; border-radius:50%; flex:none; display:inline-block; }
.dot-ok{background:var(--ok)} .dot-ng{background:var(--ng)} .dot-warn{background:var(--warn)} .dot-idle{background:var(--idle)}

/* ---------- 9. 提示条 / 空态 / 骨架 ---------- */
.banner { display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap;
  padding:9px 14px; border-radius:var(--r-md); font-size:var(--fs-sm); margin-bottom:var(--s-4);
  background:var(--cyan-soft); border:1px solid rgba(34,184,207,.4); color:var(--tx-1); }
.banner.info { background:var(--accent-soft); border-color:var(--accent-line); }
.banner.warn { background:var(--warn-soft); border-color:var(--warn-line); }
.banner.ng   { background:var(--ng-soft);   border-color:var(--ng-line); }
.banner .sp { flex:1; }

/* 科室横幅（v1.29.0 从旧 style.css 迁入 v2 令牌；房间选择页用 DEPT.banner 渲染）
   旧版只在 style.css 里定义，而 v2 页面（rooms/index/inspect）只加载 theme.css，
   导致该横幅在这些页面上完全没有样式 —— 这里补上，令牌全部走 v2。 */
.dept-bar { display:flex; align-items:center; gap:var(--s-2); flex-wrap:wrap;
  padding:9px 14px; margin-bottom:var(--s-4); border-radius:var(--r-md);
  font-size:var(--fs-sm); color:var(--tx-1);
  background:var(--cyan-soft); border:1px solid rgba(34,184,207,.4); }
.dept-bar svg.ic { flex:none; color:var(--cyan); }
.dept-bar b { color:var(--tx-1); }
.dept-bar .tip { margin-left:auto; font-size:var(--fs-xs); color:var(--tx-4); }
.dept-bar.admin { background:var(--accent-soft); border-color:var(--accent-line); }
.dept-bar.admin svg.ic { color:var(--accent-hi); }
.dept-bar.admin a { margin-left:auto; color:var(--accent-hi); font-weight:600; }

.empty { padding:var(--s-10) var(--s-5); text-align:center; color:var(--tx-3); }
.empty .ico { font-size:30px; opacity:.5; display:block; margin-bottom:var(--s-3); }
.empty .ico svg.ic { margin:0 auto; }
.empty .t { font-size:var(--fs-lg); color:var(--tx-2); font-weight:600; margin-bottom:6px; }
.empty .d { font-size:var(--fs-sm); }

.skel { background:linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 37%, var(--bg-2) 63%);
  background-size:400% 100%; animation:skel 1.3s ease infinite; border-radius:var(--r-sm); }
@keyframes skel { 0%{background-position:100% 50%} 100%{background-position:0 50%} }

/* ---------- 10. Toast（队列化） ---------- */
.toast-host { position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:200; display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none; width:max-content; max-width:92vw; }
.toast {
  padding:10px 18px; border-radius:var(--r-md);
  background:var(--bg-3); border:1px solid var(--line-2); color:var(--tx-1);
  font-size:var(--fs-md); box-shadow:var(--sh-3);
  animation:toastIn var(--t-base);
}
.toast.ok   { border-color:var(--ok-line); }
.toast.err  { border-color:var(--ng-line); color:#ffc9cb; }
.toast.warn { border-color:var(--warn-line); }
.toast.out  { animation:toastOut var(--t-base) forwards; }
@keyframes toastIn  { from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }
@keyframes toastOut { to{opacity:0; transform:translateY(10px)} }

/* ---------- 11. 工具类 ---------- */
.muted { color:var(--tx-3); } .dim { color:var(--tx-4); }
.tiny { font-size:var(--fs-xs); } .sm { font-size:var(--fs-sm); }
.mono { font-variant-numeric:tabular-nums; }
.sp { flex:1; }
.mt-2{margin-top:var(--s-2)} .mt-3{margin-top:var(--s-3)} .mt-4{margin-top:var(--s-4)} .mt-6{margin-top:var(--s-6)}
.mb-2{margin-bottom:var(--s-2)} .mb-3{margin-bottom:var(--s-3)} .mb-4{margin-bottom:var(--s-4)}
.flex{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.nowrap{white-space:nowrap}
[hidden]{display:none !important}

/* 统一线性图标（v1.29.0）：由 CORE.icon() 产出，描边/圆头/线宽在此集中定义，
   页面侧只需用 color 控制颜色、用 width/height 属性控制尺寸。 */
svg.ic { flex:none; display:inline-block; vertical-align:-.16em;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }

/* 键盘提示 / 无障碍隐藏 / 文字按钮 */
.kbd { display:inline-flex; align-items:center; justify-content:center; min-width:19px; height:19px;
  padding:0 5px; border-radius:5px; font-size:var(--fs-xs); font-weight:700; line-height:1;
  color:var(--tx-3); background:var(--bg-3); border:1px solid var(--line-2); border-bottom-width:2px; }
.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; }
.linkbtn { padding:0; border:0; background:none; color:var(--accent-hi); font:inherit; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; }

/* ---------- 12. 响应式 ---------- */
@media (max-width:900px) {
  .app-nav { padding:0 var(--s-3); }
  .app-nav .links {
    position:absolute; top:var(--nav-h); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px; margin:0;
    padding:var(--s-2); background:var(--bg-1);
    border-bottom:1px solid var(--line-1); box-shadow:var(--sh-2);
    display:none;
  }
  .app-nav .links.open { display:flex; }
  .app-nav .links a { padding:10px 14px; }
  .nav-toggle {
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:var(--r-md);
    border:1px solid var(--line-2); background:var(--bg-3); color:var(--tx-1); font-size:16px;
  }
  .page { padding:var(--s-4) var(--s-3) var(--s-10); }
  .page-head h1 { font-size:var(--fs-xl); }
}

/* ---------- 13. 动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ---------- 14. 打印 ---------- */
@media print {
  .app-nav, .toast-host, .no-print { display:none !important; }
  body { background:#fff; color:#000; }
}

/* v1.27.0 左上角品牌图（白底片保证黑字在深色导航上可读） */
/* 顶栏标识（v1.36.2）：登录后不再放公司大图标，改用「方块标记 + 文字」——
   标记用 CSS 画的 3 条横杠（记录/清单意象），零图片、零 emoji，与控制台风格一致 */
.app-nav .brand .mark {
  width:24px; height:24px; flex:none; border-radius:7px; position:relative;
  background:linear-gradient(135deg,var(--accent),var(--cyan));
}
.app-nav .brand .mark::after {
  content:''; position:absolute; left:5px; right:5px; top:6px; bottom:6px;
  background:
    linear-gradient(#04101f,#04101f) 0 0/100% 2px no-repeat,
    linear-gradient(#04101f,#04101f) 0 50%/72% 2px no-repeat,
    linear-gradient(#04101f,#04101f) 0 100%/48% 2px no-repeat;
}