:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --teal: #0d9488;
  --bg: #f5f7fb;
  --panel: #ffffff;
  --ink: #1f2937;
  --ink-soft: #6b7280;
  --line: #e6eaf0;
  --line-soft: #eef1f6;
  --warn: #d97706;
  --danger: #dc2626;
  --ok: #16a34a;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  --shadow-md: 0 6px 18px rgba(16,24,40,.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.5; }
a { text-decoration: none; color: inherit; }

/* ---------- 顶栏 ---------- */
.topbar { background: linear-gradient(90deg,#1e3a8a,#2563eb); color:#fff; padding: 14px 22px; display:flex; justify-content:space-between; align-items:center; box-shadow: var(--shadow-md); position: sticky; top:0; z-index: 20; }
.brand { font-size: 18px; font-weight: 700; letter-spacing:.5px; }
.badge { background:#fbbf24; color:#78350f; font-size:12px; padding:2px 9px; border-radius:20px; margin-left:10px; font-weight:700; }
.topbar-right { font-size:13px; opacity:.95; }
.topbar-right a { margin-left:14px; text-decoration: underline; opacity:.9; }

/* ---------- 侧边栏 ---------- */
.layout { display:flex; min-height: calc(100vh - 54px); }
.sidebar { width:210px; background: var(--panel); border-right:1px solid var(--line); padding:14px 0; position:sticky; top:54px; height: calc(100vh - 54px); overflow-y:auto; }
.sidebar a { display:flex; align-items:center; gap:10px; padding:11px 20px; color:var(--ink-soft); border-left:3px solid transparent; font-size:14px; }
.sidebar a .ico { width:20px; text-align:center; font-size:15px; }
.sidebar a:hover { background:#f3f6fd; color:var(--ink); }
.sidebar a.active { background:#eef3ff; border-left-color:var(--primary); color:var(--primary); font-weight:700; }

/* ---------- 内容区 ---------- */
.content { flex:1; padding:24px 28px; overflow:auto; }
h1 { font-size:21px; margin-bottom:6px; font-weight:700; }
.page-sub { color:var(--ink-soft); font-size:13px; margin-bottom:18px; }
h2 { font-size:16px; margin:18px 0 12px; color:var(--primary); display:flex; align-items:center; gap:8px; }

/* ---------- 卡片 ---------- */
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin-bottom:18px; box-shadow:var(--shadow); }
.card h2:first-child { margin-top:0; }

/* ---------- 顶部统计 ---------- */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); gap:14px; }
.stat { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); position:relative; overflow:hidden; }
.stat::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--primary); }
.stat .num { font-size:27px; font-weight:800; color:var(--primary); line-height:1.1; }
.stat .lbl { font-size:13px; color:var(--ink-soft); margin-top:6px; }
.stat.amber::before { background:var(--warn); } .stat.amber .num { color:var(--warn); }
.stat.red::before { background:var(--danger); } .stat.red .num { color:var(--danger); }
.stat.violet::before { background:#7c3aed; } .stat.violet .num { color:#7c3aed; }
.stat.darkred::before { background:#b91c1c; } .stat.darkred .num { color:#b91c1c; }

/* ---------- 仓库总览卡片 ---------- */
.wh-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(225px,1fr)); gap:16px; }
.wh-card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:0; box-shadow:var(--shadow); overflow:hidden; transition:transform .12s ease, box-shadow .12s ease; }
.wh-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.wh-accent { height:5px; }
.wh-body { padding:14px 16px 16px; }
.wh-head { display:flex; align-items:center; gap:10px; }
.wh-icon { font-size:24px; width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:#f1f5f9; }
.wh-name { font-weight:700; font-size:15px; }
.wh-stats { display:flex; gap:22px; margin-top:12px; }
.wh-num { font-size:23px; font-weight:800; color:var(--ink); }
.wh-lbl { font-size:12px; color:var(--ink-soft); }
.wh-zones { margin-top:12px; display:flex; flex-wrap:wrap; gap:6px; }
.wh-zone-chip { font-size:11.5px; padding:3px 9px; border-radius:20px; background:#f1f5f9; color:#475569; }
.wh-empty { font-size:12px; color:#9aa5b1; margin-top:12px; }

/* ---------- 表单 ---------- */
/* 栅格：auto-fit + 1fr —— 「自动排满整行 + 拉伸填满」。
   · minmax(150px,1fr)：列宽不小于 150px，且屏幕越宽是「列数变多」，不是框越拉越长；
   · auto-fit（而非 auto-fill）会折叠多余空轨道，让最后一列拉满整行 → 右侧不留空白；
   · 所有控件 width:100% 严格等于列宽 → 横竖两向都对齐，不再有大长条空框。 */
form.inline { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px 14px; align-items:start; }
.field { display:flex; flex-direction:column; gap:5px; min-width:0; }
.field label { font-size:12.5px; color:var(--ink-soft); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
form.inline .field > input,
form.inline .field > select,
form.inline .field > textarea { width:100%; box-sizing:border-box; }
form.inline > button,
form.inline > .btn { justify-self:start; align-self:end; white-space:nowrap; }
/* 字段跨列（合并格仍落在栅格线上，故仍与上下行对齐） */
form.inline .span2 { grid-column:span 2; }
form.inline .span4 { grid-column:span 4; }
@media (max-width:820px)  { form.inline { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
  form.inline .span2, form.inline .span4 { grid-column:1/-1; } }
input,select,textarea { padding:9px 11px; border:1px solid #cfd8e3; border-radius:8px; font-size:13px; font-family:inherit; background:#fff; transition:border-color .12s, box-shadow .12s; }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }

/* ---------- 按钮 ---------- */
.btn { background:var(--primary); color:#fff; border:none; padding:9px 17px; border-radius:8px; cursor:pointer; font-size:13px; font-weight:600; transition:background .12s, transform .05s; }
.btn:hover { background:var(--primary-dark); }
.btn:active { transform:translateY(1px); }
.btn.sm { padding:5px 11px; font-size:12px; }
.btn.green { background:var(--teal); } .btn.green:hover { background:#0b7d72; }
.btn.red { background:var(--danger); } .btn.red:hover { background:#b91c1c; }
.btn.warn { background:var(--warn); } .btn.warn:hover { background:#b45309; }
.btn.ghost { background:#eef2f7; color:var(--ink); } .btn.ghost:hover { background:#e2e8f0; }
.link-danger { color:var(--danger); font-size:12px; }
.link-edit { color:var(--primary); font-size:12px; margin-right:8px; }

/* ---------- 标签 / 状态 ---------- */
.tag { display:inline-block; padding:2px 10px; border-radius:20px; font-size:12px; font-weight:700; }
.tag.待验 { background:#fef3c7; color:#92660a; }
.tag.合格 { background:#dcfce7; color:#15803d; }
.tag.不合格 { background:#fee2e2; color:#b91c1c; }
.tag.退货 { background:#ede9fe; color:#6d28d9; }
.tag.召回 { background:#ffe4e6; color:#9f1239; }
.tag.留样 { background:#ede9fe; color:#6d28d9; }
.tag.待处理 { background:#fef3c7; color:#92660a; }
.tag.已处置 { background:#dcfce7; color:#15803d; }
.zone-pill { display:inline-block; padding:2px 9px; border-radius:6px; background:#eef3ff; color:var(--primary); font-size:12px; font-weight:600; }
.cat-pill { display:inline-block; padding:2px 9px; border-radius:6px; background:#f1f5f9; color:#475569; font-size:12px; font-weight:600; }

/* ---------- 筛选标签 ---------- */
.filter-bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:16px; }
.filter-tabs { display:flex; flex-wrap:wrap; gap:8px; }
.filter-tabs a { padding:6px 13px; border-radius:20px; background:#fff; border:1px solid var(--line); font-size:13px; color:var(--ink-soft); transition:all .12s; }
.filter-tabs a:hover { border-color:var(--primary); color:var(--primary); }
.filter-tabs a.active { background:var(--primary); border-color:var(--primary); color:#fff; font-weight:600; }
.filter-label { font-size:12.5px; color:var(--ink-soft); font-weight:600; margin-right:2px; }

/* ---------- 表格 ---------- */
table { width:100%; border-collapse:collapse; margin-top:8px; font-size:13px; }
th,td { padding:10px 11px; border-bottom:1px solid var(--line-soft); text-align:left; }
th { background:#f8fafc; color:#64748b; font-weight:700; font-size:12.5px; border-bottom:2px solid var(--line); }
tr:hover td { background:#fafcff; }
td.num { text-align:right; font-variant-numeric:tabular-nums; }

/* ---------- 提示 ---------- */
.flash { padding:11px 15px; border-radius:9px; margin-bottom:14px; font-size:13px; border:1px solid transparent; }
.flash.success { background:#ecfdf5; color:#047857; border-color:#a7f3d0; }
.flash.warning { background:#fffbeb; color:#92400e; border-color:#fde68a; }
.flash.danger { background:#fef2f2; color:#b91c1c; border-color:#fecaca; }
.alert-list li { padding:9px 11px; border-bottom:1px solid #f0f2f5; font-size:13px; }
.muted { color:var(--ink-soft); }
.row-actions { display:flex; gap:6px; }

/* ---------- 分区小标题 ---------- */
.section-head { display:flex; align-items:center; gap:10px; margin:20px 0 0; padding:10px 14px; background:#f8fafc; border:1px solid var(--line); border-bottom:none; border-radius:10px 10px 0 0; }
.section-head .zh-name { font-weight:700; font-size:15px; }
.section-head .zh-meta { font-size:12px; color:var(--ink-soft); }
.in-card { border-radius:0 0 10px 10px; margin-bottom:16px; }

/* ---------- 页脚说明 ---------- */
.note { color:var(--ink-soft); font-size:12.5px; margin-top:10px; line-height:1.7; }
.print-only { display:none; }
@media print {
  .sidebar,.topbar,.no-print { display:none !important; }
  .content { padding:0; }
  body { background:#fff; }
}