:root {
  --bg: #f5f6fa;
  --panel: #ffffff;
  --line: #e6e8f0;
  --text: #1e2433;
  --text-2: #6b7385;
  --brand: #2563eb;
  --brand-soft: #eaf0ff;
  --ok: #10b981;
  --warn: #f59e0b;
  --danger: #ef4444;
  --radius: 12px;
  --shadow: 0 2px 10px rgba(20, 30, 60, .06);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.55 -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
}
a { color: var(--brand); text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }

/* ---------- 布局 ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 216px; flex: 0 0 216px; background: #111827; color: #cbd5e1;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; gap: 10px; align-items: center; padding: 18px 16px; border-bottom: 1px solid #1f2937; }
.brand-logo {
  width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, #2563eb, #10b981);
  display: grid; place-items: center; color: #fff; font-weight: 700;
}
.brand strong { color: #fff; display: block; font-size: 14px; }
.brand small { color: #94a3b8; font-size: 11px; }
.nav { padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 9px;
  background: transparent; color: #cbd5e1; text-align: left; width: 100%; font-size: 14px;
}
.nav-item:hover { background: #1f2937; color: #fff; }
.nav-item.active { background: var(--brand); color: #fff; font-weight: 600; }
.nav-item .ic { width: 18px; text-align: center; }
.sidebar-foot { margin-top: auto; padding: 12px; border-top: 1px solid #1f2937; font-size: 12px; color: #94a3b8; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 56px; background: var(--panel); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; padding: 0 18px; position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-size: 16px; margin: 0; flex: 1; }
.topbar .who { color: var(--text-2); font-size: 12px; }
.hamburger { display: none; background: transparent; border: 0; font-size: 18px; }
/* ---------- 侧边栏收回（桌面：收成 56px 图标栏） ---------- */
.collapse-btn {
  background: transparent; border: 0; font-size: 16px; color: var(--text-2);
  padding: 2px 8px; border-radius: 8px; line-height: 1.4;
}
.collapse-btn:hover { background: var(--brand-soft); color: var(--text); }
@media (min-width: 901px) {
  .sidebar { transition: width .15s ease, flex-basis .15s ease; overflow: hidden; }
  body.side-collapsed .sidebar { width: 56px; flex: 0 0 56px; }
  body.side-collapsed .brand { padding: 14px 0; justify-content: center; }
  body.side-collapsed .brand-text,
  body.side-collapsed .sidebar-foot { display: none; }
  body.side-collapsed .nav { padding: 10px 4px; }
  body.side-collapsed .nav-item { justify-content: center; padding: 10px 0; gap: 0; }
  body.side-collapsed .nav-item span:not(.ic) { display: none; }   /* 只留图标 */
  body.side-collapsed .collapse-btn { transform: none; }
}
.content { padding: 18px; flex: 1; }

/* ---------- 备案信息（管局要求：页面底部展示备案号并链接工信部首页） ---------- */
.site-foot { padding: 14px 18px; text-align: center; color: var(--text-2); font-size: 12px; line-height: 1.6; }
.site-foot a { color: var(--text-2); }
.site-foot a:hover { color: var(--brand); text-decoration: underline; }
/* 登录页没有 .main 的流式布局，备案号固定贴视口底部 */
.site-foot--fixed { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 12px; }

/* ---------- 组件 ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card + .card { margin-top: 14px; }
.card-hd { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.card-hd h3 { margin: 0; font-size: 14px; flex: 1; }
/* 堆叠头：标题独占一行，副标题（数据来源等）整行显示在标题下方（窄屏不再挤压换行错版） */
.card-hd.stack { flex-wrap: wrap; row-gap: 2px; }
.card-hd.stack h3, .card-hd.stack > span { flex: 1 0 100%; }
.card-bd { padding: 14px; }
.grid { display: grid; gap: 14px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 网格内卡片的间距由 gap 控制：抵消上方 .card + .card 的 margin-top，
   否则 c3 网格里第 2/3 张板块卡比第 1 张低 14px（「气瓶管理比另两个高」的根因）。 */
.grid > .card + .card { margin-top: 0; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.stat .k { color: var(--text-2); font-size: 12px; }
.stat .v { font-size: 24px; font-weight: 700; margin-top: 4px; }
.stat .s { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.stat.danger .v { color: var(--danger); }
.stat.warn .v { color: var(--warn); }
.stat.ok .v { color: var(--ok); }
.btn {
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  padding: 7px 12px; border-radius: 9px; display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover { border-color: #c9cfdd; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: #1d4ed8; }
.btn.danger { color: var(--danger); border-color: #f6cccc; background: #fff6f6; }
.btn.sm { padding: 4px 9px; font-size: 12px; border-radius: 7px; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--brand); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.tight { gap: 6px; }
.spacer { flex: 1; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 12px; color: var(--text-2); }
input[type=text], input[type=password], input[type=number], input[type=date], select, textarea {
  border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; background: #fff; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
th { color: var(--text-2); font-weight: 600; background: #fafbff; position: sticky; top: 0; }
tbody tr:hover { background: #fafbff; }
.table-wrap { overflow: auto; max-height: 62vh; }
.tag { display: inline-block; padding: 1px 8px; border-radius: 20px; font-size: 12px; border: 1px solid var(--line); background: #f6f7fb; }
.tag.ok { color: #047857; background: #ecfdf5; border-color: #b7f0d8; }
.tag.warn { color: #b45309; background: #fffbeb; border-color: #fde4a7; }
.tag.danger { color: #b91c1c; background: #fef2f2; border-color: #fbd0d0; }
.tag.info { color: #1d4ed8; background: #eff4ff; border-color: #cddcff; }
.muted { color: var(--text-2); }
.small { font-size: 12px; }
/* 缺现场地址徽标：iSimt 推送时 USE_LOCATION 为空（上游未填），提醒人工补全 */
.badge { display: inline-block; padding: 0 7px; line-height: 18px; border-radius: 9px; font-size: 11px; font-weight: 600; border: 1px solid transparent; vertical-align: middle; }
.badge.warn { color: #b45309; background: #fffbeb; border-color: #f5c97a; }
.badge.warn::before { content: "⚠ "; }
/* 同一样品清单内多个样品各占一行，避免挤在一行 */
.sample-line { line-height: 1.5; white-space: nowrap; }
.sample-line + .sample-line { margin-top: 2px; }
.empty { padding: 28px; text-align: center; color: var(--text-2); }
.bar { height: 8px; border-radius: 20px; background: #eef0f7; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--brand); }
.alert { display: flex; gap: 8px; align-items: center; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.alert.warn { background: #fffbeb; border-color: #fde4a7; }
.alert.danger { background: #fef2f2; border-color: #fbd0d0; }
.pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding: 10px 4px 0; color: var(--text-2); }

/* ---------- 功能板块（总览入口卡） ---------- */
/* 三张卡必须等宽且同一行水平对齐：c3 保证等宽；align-items:stretch + 卡片 height:100%
   让三张卡填满同一行高（= 最高那张），card-hd flex:1 纵向居中，去掉描述后三张卡内容一致、一排完全对齐不参差。 */
.grid.c3 { align-items: stretch; }
.grid.c3 > .module-card { min-height: 112px; height: 100%; display: flex; flex-direction: column; }
.grid.c3 > .module-card > .card-hd { flex: 1; display: flex; align-items: center; }

/* 统计卡（总览 c2 两张：气瓶管理 / 委托单）也要等高 + 内容垂直居中：
   副标题字数不同会换行，若不强行等高两张卡会一高一低，整页看着「大大小小不统一」。 */
.grid.c2 { align-items: stretch; }
.grid.c2 > .stat { height: 100%; display: flex; flex-direction: column; justify-content: center; }

/* ---------- 申购需求表（回退为平台默认浅色表格，不再套用 8000 深色主题） ---------- */

/* ---------- 台账单元格 ---------- */
/* 状态标签压在单号 / 钢瓶号第二行：主标识更醒目，同时省掉一整列宽度 */
.cell-main { font-weight: 600; }
.cell-sub { margin-top: 3px; }
.tag.xs { padding: 0 6px; font-size: 11px; line-height: 18px; }

/* 表格里可点的标识（委托单号）：用按钮而不是 <a href="javascript:...">，
   免得被当成真链接（中键新开、被拦截器改地址都不合适） */
.link { background: none; border: 0; padding: 0; color: var(--brand); text-align: left; }
.link:hover { text-decoration: underline; }

/* ---------- 弹层 ---------- */
/* z-index 90：高于侧边栏(70)与手机端抽屉遮罩(65)，确保任意弹层（含填写委托单的表单）
   都不会被侧边栏遮挡（手机端原「常驻 56px 图标栏压住表单左缘」的根因即此）。 */
.mask { position: fixed; inset: 0; background: rgba(17, 24, 39, .45); display: grid; place-items: center; z-index: 90; padding: 16px; }
.modal { background: #fff; border-radius: 14px; width: min(760px, 100%); max-height: 88vh; display: flex; flex-direction: column; }
.modal header { padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; }
.modal header h3 { margin: 0; font-size: 15px; flex: 1; }
.modal .body { padding: 16px; overflow: auto; }
.modal footer { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; }
.toast-wrap { position: fixed; top: 16px; right: 16px; z-index: 90; display: flex; flex-direction: column; gap: 8px; }
.toast { background: #111827; color: #fff; padding: 9px 14px; border-radius: 10px; box-shadow: var(--shadow); font-size: 13px; }
.toast.err { background: #b91c1c; }
.toast.ok { background: #047857; }

/* ---------- 登录 ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(135deg, #eef2ff, #f8fafc); }
.login { width: min(380px, 92vw); background: #fff; border-radius: 16px; box-shadow: 0 20px 50px rgba(20, 30, 60, .12); padding: 26px; }
.login h2 { margin: 0 0 4px; font-size: 20px; }
.login p { margin: 0 0 18px; color: var(--text-2); font-size: 13px; }
.login .field { margin-bottom: 12px; }

/* ---------- 图表 ---------- */
.chart { display: flex; align-items: flex-end; gap: 10px; height: 160px; padding: 8px 4px 0; }
.chart .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; height: 100%; }
.chart .col i { width: 100%; max-width: 46px; background: linear-gradient(180deg, #60a5fa, #2563eb); border-radius: 6px 6px 0 0; }
.chart .col span { font-size: 11px; color: var(--text-2); }
.chart .col b { font-size: 12px; }

/* ---------- 日历 / 地图 ---------- */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal .d { min-height: 84px; border: 1px solid var(--line); border-radius: 10px; padding: 6px; background: #fff; }
.cal .d.today { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.cal .d .n { font-size: 12px; color: var(--text-2); }
.cal .d .o { font-size: 11px; background: var(--brand-soft); color: #1d4ed8; border-radius: 6px; padding: 2px 5px; margin-top: 3px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map { height: 420px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.weekhd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }

@media (max-width: 900px) {
  .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.c3, .grid.c2 { grid-template-columns: 1fr; }
  /* 手机端侧边栏：默认隐藏，点 ☰ 滑出抽屉（不再常驻 56px 图标栏，避免遮挡表单/内容） */
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 70;
    width: 220px; flex: 0 0 220px;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: 2px 0 14px rgba(17, 24, 39, .18);
  }
  body.side-open .sidebar { transform: translateX(0); }
  .brand { padding: 18px 16px; justify-content: flex-start; }
  .brand-text, .sidebar-foot { display: block; }
  .nav { padding: 10px 8px; }
  .nav-item { justify-content: flex-start; padding: 10px 12px; gap: 10px; }
  .nav-item span:not(.ic) { display: inline; }
  .hamburger { display: inline-block; }   /* 手机端显示汉堡，点开抽屉 */
  .collapse-btn { display: none; }
  .main { margin-left: 0; }               /* 内容占满宽度（抽屉不常驻） */
  /* 抽屉半透明遮罩：点遮罩 / 选菜单自动关闭（JS 控制 body.side-open） */
  .side-backdrop { display: none; }
  body.side-open .side-backdrop {
    display: block; position: fixed; inset: 0; z-index: 65;
    background: rgba(17, 24, 39, .42);
  }
  .content { padding: 12px; }
  .topbar h1 { font-size: 15px; }
  /* 窄屏防溢出：表单控件与定宽容器一律不得超过卡片内容区（下拉/输入框超出边框的根因是内联定宽） */
  .card-bd input[type=text], .card-bd input[type=password], .card-bd input[type=number],
  .card-bd input[type=date], .card-bd select, .card-bd textarea { max-width: 100%; }
  .card-bd div[style], .card-bd .field { max-width: 100%; }
  .card-bd { min-width: 0; overflow-x: hidden; }
  .table-wrap { max-height: none; }
  /* 窄屏卡片头统一堆叠：标题整行横排，副标题整行跟在下方（避免长标题被压成竖排） */
  .card-hd { flex-wrap: wrap; row-gap: 2px; }
  .card-hd h3, .card-hd > span { flex: 1 0 100%; }
  /* 备案信息：窄屏收紧内边距 */
  .site-foot { padding: 12px; }
  .site-foot--fixed { padding: 10px 12px; }
}

/* WeChat web-view simplified layout; full browser mode is unaffected. */
body.mini-mode .grid.c4, body.mini-mode .grid.c3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
body.mini-mode .row { flex-wrap:wrap; }
body.mini-mode .content { padding:12px; }
body.mini-mode .modal { width:calc(100vw - 20px); max-height:92vh; overflow:auto; }
body.mini-mode .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
body.mini-mode input, body.mini-mode select, body.mini-mode textarea { font-size:16px; max-width:100%; }
body.mini-mode .btn { min-height:40px; }
@media(max-width:600px) { body.mini-mode .grid.c2 { grid-template-columns:minmax(0,1fr); } body.mini-mode .who { font-size:12px; } }

.instrument-matches{display:flex;flex-direction:column;gap:6px;margin-top:6px;max-height:240px;overflow:auto}.instrument-matches .btn{text-align:left;white-space:normal}
@media(max-width:900px){.module-entries{grid-template-columns:repeat(2,minmax(0,1fr))!important}.module-entries .module-card{width:100%;min-width:0;margin:0}.module-entries .card-hd{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;text-align:center;padding:16px 8px;min-height:150px}.module-entries .card-hd>.row{flex:none!important;width:100%;justify-content:center}.module-entries .card-hd .btn{width:112px;height:40px;min-height:40px;flex:none;margin:0;display:flex;align-items:center;justify-content:center}}

/* Mobile overview: every entry, including the fifth, uses the same card size. */
@media (max-width: 900px) {
  .grid.c3.module-entries { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: 160px; gap: 12px; }
  .grid.c3.module-entries > .module-card { box-sizing: border-box; width: 100%; height: 160px; min-height: 0; margin: 0; }
  .module-entries > .module-card > .card-hd { box-sizing: border-box; width: 100%; height: 100%; min-height: 0; padding: 12px 8px; flex: none; flex-wrap: nowrap; justify-content: center; gap: 12px; }
  .module-entries > .module-card > .card-hd > .row { flex-direction: column; flex-wrap: nowrap; height: 54px; gap: 4px !important; align-items: center; justify-content: center; }
  .module-entries .card-hd strong { font-size: 14px; line-height: 20px; text-align: center; }
  .module-entries .card-hd .btn { box-sizing: border-box; width: 112px; max-width: 100%; height: 40px; min-height: 40px; padding: 0 8px; }
}