/* ===== 物料管理系统 全局样式 =====
   约束：无紫色、无圆角(全方形)、无 emoji、不对称商务布局、响应式 */

:root {
    --bg: #eef1f4;
    --surface: #ffffff;
    --surface-2: #f6f8fa;
    --ink: #1b2533;
    --muted: #5c6b7a;
    --line: #d4dae1;
    --primary: #0f5d8a;      /* 钢蓝，非紫 */
    --primary-d: #0b4566;
    --accent: #1f7a5c;       /* 商务绿 */
    --warn: #9a6a12;
    --danger: #a82e25;
    --shadow: 0 1px 0 #d4dae1, 0 2px 8px rgba(27,37,51,.06);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--bg);
    color: var(--ink);
    font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    padding-bottom: 52px; /* 让位固定底部 */
    -webkit-font-smoothing: antialiased;
}

/* 强制全站方形：无圆角 */
button, input, select, textarea, .card, .btn, .tag, .panel, table, img, .label-box, .nav, .field {
    border-radius: 0 !important;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== 顶部导航（不对称：左品牌宽，右菜单窄且靠右） ===== */
.nav {
    display: flex;
    align-items: stretch;
    background: var(--ink);
    border-bottom: 3px solid var(--primary);
    position: sticky;
    top: 0;
    z-index: 50;
}
.nav .brand {
    background: var(--primary);
    color: #fff;
    padding: 14px 26px;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 16px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}
.nav .brand small { display:block; font-weight:400; font-size:11px; letter-spacing:0; opacity:.85; }
.nav .menu {
    margin-left: auto;
    display: flex;
    align-items: stretch;
}
.nav .menu a {
    color: #d7e2ec;
    padding: 0 18px;
    display: flex;
    align-items: center;
    border-left: 1px solid rgba(255,255,255,.08);
    font-size: 13px;
}
.nav .menu a:hover, .nav .menu a.active { background: var(--primary-d); color: #fff; text-decoration: none; }
.nav .menu .user { color:#9fb3c4; padding:0 16px; display:flex; align-items:center; }

/* ===== 布局容器 ===== */
.wrap { max-width: 1180px; margin: 0 auto; padding: 22px 18px 30px; }
.page-title { font-size: 20px; font-weight: 700; margin: 4px 0 18px; display:flex; align-items:baseline; gap:12px; }
.page-title .sub { font-size: 12px; color: var(--muted); font-weight: 400; }

/* ===== 不对称栅格 ===== */
.grid { display: grid; gap: 16px; }
.grid.asym { grid-template-columns: 2.2fr 1fr; }
.grid.asym-2 { grid-template-columns: 1fr 1.6fr; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px){ .grid.asym, .grid.asym-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } }

/* ===== 卡片/面板（方形、无圆角） ===== */
.card { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 16px; }
.card h3 { margin: 0 0 12px; font-size: 14px; border-left: 4px solid var(--primary); padding-left: 10px; }
.panel-offset { margin-top: 22px; }   /* 不对称：错落偏移 */

/* ===== 按钮 ===== */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--primary); background: var(--primary); color: #fff;
    padding: 9px 16px; cursor: pointer; font-size: 13px; border-radius: 0;
}
.btn:hover { background: var(--primary-d); text-decoration: none; }
.btn.ghost { background: #fff; color: var(--primary); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.danger { border-color: var(--danger); background: var(--danger); }
.btn.danger:hover { background: #861f18; }
.btn.sm { padding: 6px 10px; font-size: 12px; }
.btn.block { width: 100%; justify-content: center; }

/* ===== 表单 ===== */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.field input, .field select, .field textarea {
    width: 100%; border: 1px solid var(--line); background: #fff; padding: 9px 10px; font-size: 13px; color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px){ .form-row { grid-template-columns: 1fr; } }

/* ===== 表格 ===== */
.table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); }
.table th, .table td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; font-size: 13px; }
.table th { background: var(--surface-2); color: var(--muted); font-weight: 600; white-space: nowrap; }
.table tbody tr:hover { background: #f3f7fb; }
.table .code { font-family: "Consolas", monospace; font-weight: 700; color: var(--primary-d); }

/* ===== 状态标签（方形） ===== */
.tag { display: inline-block; padding: 3px 9px; font-size: 12px; border: 1px solid; background: #fff; }
.tag.s0 { color: var(--muted); border-color: var(--muted); }
.tag.s1 { color: var(--accent); border-color: var(--accent); }
.tag.s2 { color: var(--warn); border-color: var(--warn); }
.tag.s3 { color: var(--danger); border-color: var(--danger); }

/* ===== 工具条/筛选 ===== */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.toolbar input, .toolbar select { border: 1px solid var(--line); padding: 8px 10px; font-size: 13px; }
.toolbar .grow { flex: 1 1 220px; }

/* ===== 概览统计块（不对称大小） ===== */
.stat { padding: 18px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
.stat .n { font-size: 30px; font-weight: 800; color: var(--primary-d); line-height: 1; }
.stat .l { font-size: 12px; color: var(--muted); margin-top: 8px; }
.stat.wide { background: var(--ink); color: #fff; }
.stat.wide .n { color: #6fd3b0; }
.stat.wide .l { color: #aebfcd; }

/* ===== 登录页（不对称分屏） ===== */
.login { min-height: 100vh; display: grid; grid-template-columns: 1.35fr 1fr; }
@media (max-width: 760px){ .login { grid-template-columns: 1fr; } .login .sidebar{ display:none; } }
.login .sidebar { background: var(--ink); color: #fff; padding: 60px 50px; border-right: 6px solid var(--primary); }
.login .sidebar h1 { font-size: 30px; line-height: 1.25; margin: 0 0 18px; }
.login .sidebar p { color: #aebfcd; font-size: 14px; max-width: 420px; }
.login .sidebar .mark { margin-top: 40px; font-size: 12px; color: #6f8497; border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px; }
.login .form-area { display: flex; align-items: center; justify-content: center; padding: 30px; background: var(--bg); }
.login .box { width: 100%; max-width: 360px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); padding: 28px; }
.login .box h2 { margin: 0 0 18px; font-size: 18px; border-left: 4px solid var(--primary); padding-left: 10px; }
.alert { border: 1px solid var(--danger); background: #fdecea; color: var(--danger); padding: 10px 12px; font-size: 13px; margin-bottom: 14px; }
.alert.ok { border-color: var(--accent); background: #eaf6f1; color: var(--accent); }

/* ===== 扫码界面 ===== */
.scan-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
@media (max-width: 860px){ .scan-layout { grid-template-columns: 1fr; } }
#scan-view { position: relative; background: #000; border: 1px solid var(--line); min-height: 320px; overflow: hidden; }
#scan-view video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; display: block; }
#scan-view .mask { position:absolute; inset:0; pointer-events:none; box-shadow: inset 0 0 0 2px rgba(15,93,138,.0); }
#scan-view .line { position:absolute; left:8%; right:8%; height:2px; background: var(--primary); top:50%; animation: scanmove 2s infinite linear; }
@keyframes scanmove { 0%{top:12%} 50%{top:88%} 100%{top:12%} }
.scan-result .empty { color: var(--muted); font-size: 13px; padding: 30px 10px; text-align: center; border:1px dashed var(--line); }
.mat-card { border:1px solid var(--line); padding:14px; }
.mat-card .mc { font-family:"Consolas",monospace; font-weight:700; color: var(--primary-d); font-size:16px; }
.status-btns { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.status-btns .btn { justify-content:center; }
.manual { margin-top: 14px; border-top:1px solid var(--line); padding-top:12px; }
.manual input { width:100%; border:1px solid var(--line); padding:8px 10px; }

/* ===== 打印标签 ===== */
.print-tools { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px; }
.print-tools select, .print-tools input { border:1px solid var(--line); padding:8px 10px; }
.label-sheet { background:#fff; padding:18px; border:1px solid var(--line); }
.label {
    border: 1px solid #333; padding: 8px; margin: 0 auto 14px; background:#fff;
    display: flex; flex-direction: column; align-items: center; gap: 4px; page-break-inside: avoid;
}
.label .lc { font-family:"Consolas",monospace; font-weight:700; font-size:14px; letter-spacing:1px; }
.label .ln { font-size:11px; color:#333; }
.label svg { width: 100%; height: auto; }
.size-s .label { width: 50mm; }
.size-m .label { width: 70mm; }
.size-l .label { width: 100mm; }

/* ===== 固定底部 ===== */
.site-footer {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 80;
    background: var(--ink); color: #cdd8e2; border-top: 2px solid var(--primary);
    font-size: 12px; text-align: center; padding: 14px 12px; letter-spacing: .3px;
}

.empty-tip { color: var(--muted); padding: 28px; text-align:center; border:1px dashed var(--line); }
.checkbox-cell { width: 34px; text-align:center; }