/* ===================== 基础 ===================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --primary: #2f7ce0;
  --primary-d: #1f63bd;
  --bg: #f0f2f5;
  --side: #1f2a3a;
  --side-d: #18222f;
  --side-h: #2a3a52;
  --text: #2c3e50;
  --muted: #8a96a3;
  --line: #e6e9ee;
  --ok: #18a058;
  --warn: #e69b00;
  --danger: #d03050;
  --card: #ffffff;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5;
}
#app { height: 100vh; display: flex; flex-direction: column; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14px; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #c5ccd6; border-radius: 8px; }

/* ===================== 顶部栏 ===================== */
.topbar {
  height: 56px; flex: 0 0 56px; background: var(--primary); color: #fff;
  display: flex; align-items: center; padding: 0 18px; gap: 14px; box-shadow: var(--shadow); z-index: 20;
}
.topbar .logo { font-size: 18px; font-weight: 700; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; }
.topbar .logo .dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; display: inline-block; }
.topbar .spacer { flex: 1; }
.topbar .wh-select {
  background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.35);
  border-radius: 6px; padding: 6px 10px; outline: none;
}
.topbar .wh-select option { color: #222; }
.topbar .user { display: flex; align-items: center; gap: 8px; }
.topbar .avatar { width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--primary); display: grid; place-items: center; font-weight: 700; }
.icon-btn { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 6px; padding: 6px 10px; }
.icon-btn:hover { background: rgba(255,255,255,.28); }

/* ===================== 主体 ===================== */
.body { flex: 1; display: flex; min-height: 0; }

/* 侧边栏 */
.sidebar {
  width: 210px; flex: 0 0 210px; background: var(--side); color: #cdd6e3;
  display: flex; flex-direction: column; transition: width .2s; overflow: hidden;
}
.sidebar.collapsed { width: 0; }
.sidebar .side-scroll { flex: 1; overflow-y: auto; padding: 8px 0; }
.sidebar .menu-group { margin-bottom: 2px; }
.sidebar .menu-item {
  display: flex; align-items: center; gap: 10px; padding: 11px 18px; cursor: pointer;
  color: #cdd6e3; border-left: 3px solid transparent; user-select: none;
}
.sidebar .menu-item:hover { background: var(--side-d); }
.sidebar .menu-item.active { background: var(--side-d); border-left-color: var(--primary); color: #fff; }
.sidebar .menu-item .mi { width: 18px; text-align: center; font-size: 15px; }
.sidebar .menu-item .tx { flex: 1; }
.sidebar .side-foot { padding: 10px 14px; border-top: 1px solid rgba(255,255,255,.08); color: #8290a3; font-size: 12px; }

/* 内容区 */
.main { flex: 1; min-width: 0; overflow-y: auto; padding: 18px 22px 40px; }
.page-head { display: flex; align-items: center; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.page-head h2 { font-size: 19px; font-weight: 700; }
.page-head .sub { color: var(--muted); font-size: 13px; }
.page-head .spacer { flex: 1; }

/* 子页签 */
.subtabs { display: flex; gap: 4px; background: #fff; padding: 6px; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 16px; flex-wrap: wrap; }
.subtabs .tab { padding: 7px 14px; border-radius: 6px; cursor: pointer; color: var(--muted); }
.subtabs .tab.active { background: var(--primary); color: #fff; }

/* 卡片 / 面板 */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }
.card .card-title { font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.grid { display: grid; gap: 16px; }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1000px) { .grid.cols-4, .grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }

.stat { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.stat .label { color: var(--muted); font-size: 13px; }
.stat .value { font-size: 24px; font-weight: 700; margin-top: 6px; }
.stat .value.sales { color: var(--danger); }
.stat .value.pur { color: var(--ok); }
.stat .value.warn { color: var(--warn); }

/* 表格 */
table.tbl { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
table.tbl th, table.tbl td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); font-size: 13px; }
table.tbl th { background: #f7f9fc; color: #5b6776; font-weight: 600; }
table.tbl tr:hover td { background: #fafbfd; }
.table-wrap { box-shadow: var(--shadow); border-radius: var(--radius); overflow: auto; background: #fff; }
.empty { text-align: center; color: var(--muted); padding: 40px; }

/* 表单 */
.form-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12px; color: var(--muted); }
.field input, .field select, .field textarea {
  border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; min-width: 180px; outline: none; background: #fff;
}
.field input:focus, .field select:focus { border-color: var(--primary); }
.row-actions { display: flex; gap: 8px; }

/* 按钮 */
.btn { border: 1px solid var(--line); background: #fff; color: var(--text); border-radius: 6px; padding: 8px 16px; }
.btn:hover { border-color: var(--primary); color: var(--primary); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-d); color: #fff; }
.btn.danger { color: var(--danger); border-color: #f3c2cc; }
.btn.danger:hover { background: #fdeef1; }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.btn.ghost { background: transparent; }

.tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.tag.ok { background: #e7f6ee; color: var(--ok); }
.tag.warn { background: #fdf3df; color: var(--warn); }
.tag.danger { background: #fdeaee; color: var(--danger); }
.tag.info { background: #e7f0fc; color: var(--primary); }

/* 弹窗 */
.modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: grid; place-items: center; z-index: 50; }
.modal { background: #fff; border-radius: 10px; width: min(720px, 94vw); max-height: 90vh; overflow: auto; box-shadow: 0 10px 40px rgba(0,0,0,.2); }
.modal .m-head { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 16px; }
.modal .m-head .x { margin-left: auto; cursor: pointer; color: var(--muted); font-size: 20px; line-height: 1; }
.modal .m-body { padding: 20px; }
.modal .m-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; }

/* 开关 */
.switch { position: relative; display: inline-block; width: 42px; height: 22px; }
.switch input { display: none; }
.switch .sl { position: absolute; inset: 0; background: #ccd3dc; border-radius: 22px; transition: .2s; }
.switch .sl::before { content: ""; position: absolute; width: 18px; height: 18px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: .2s; }
.switch input:checked + .sl { background: var(--primary); }
.switch input:checked + .sl::before { transform: translateX(20px); }

/* 菜单设置列表 */
.menu-set li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); cursor: move; user-select: none; }
.menu-set li.dragging { opacity: .45; background: var(--soft); }
.menu-set li .mi { width: 20px; text-align: center; }
.menu-set li .nm { flex: 1; }
.menu-set .hint { color: var(--muted); font-size: 12px; }
.menu-set .sort-btns { display: flex; gap: 4px; }
.menu-set .sort-btns .btn { min-width: 30px; padding: 2px 6px; line-height: 1.4; }

/* 单据条目 */
.bill-item { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 36px; gap: 8px; align-items: end; margin-bottom: 8px; }
.bill-item input { min-width: 0; width: 100%; }
.totals { text-align: right; font-size: 15px; margin-top: 10px; }
.totals b { color: var(--danger); font-size: 18px; }

/* 提示条 */
.notice { background: #eaf3ff; border: 1px solid #cfe2ff; color: #1f63bd; padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; font-size: 13px; }

.kpi-bar { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.muted { color: var(--muted); }
.right { text-align: right; }

/* ===================== 登录页 ===================== */
.login-wrap{display:flex;align-items:center;justify-content:center;height:100vh;background:linear-gradient(135deg,#2b6cff 0%,#1746b8 100%)}
.login-card{width:340px;background:#fff;border-radius:14px;padding:34px 30px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.login-logo{font-size:20px;font-weight:700;color:#2b6cff;display:flex;align-items:center;gap:8px}
.login-logo .dot{width:12px;height:12px;border-radius:50%;background:#2b6cff;display:inline-block}
.login-sub{color:#888;margin:6px 0 22px;font-size:13px}
.login-input{width:100%;box-sizing:border-box;padding:12px 14px;margin-bottom:14px;border:1px solid #e3e8ef;border-radius:8px;font-size:14px;outline:none}
.login-input:focus{border-color:#2b6cff}
.login-err{color:#cf1322;font-size:13px;margin-bottom:10px}
.login-btn{width:100%;padding:12px;border:0;border-radius:8px;background:#2b6cff;color:#fff;font-size:15px;font-weight:600;cursor:pointer}
.login-btn:hover{background:#1746b8}

/* ===================== 保存确认弹窗 ===================== */
.confirm-summary{border:1px solid var(--line);border-radius:8px;padding:6px 14px;margin-bottom:10px;background:#fafbfc}
.confirm-summary .cs-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px dashed #eceff3}
.confirm-summary .cs-row:last-child{border-bottom:0}
.confirm-summary .cs-row span{color:#8a94a6;font-size:13px}
.confirm-summary .cs-row b{font-weight:600}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* ===================== 进货/单据列表 ===================== */
.bill-list .col-toggle{width:34px;text-align:center}
.toggle-btn{border:0;background:transparent;cursor:pointer;font-size:14px;color:#2b6cff;width:28px;height:28px}
.remark-cell{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.detail-row td{background:#fafbfc;padding:0!important}
.detail-box{padding:14px 18px}
.detail-head{color:#8a94a6;font-size:13px;margin-bottom:8px}
.detail-box .tbl.sub{margin:0}
.detail-box .tbl.sub th{background:#f0f2f5}
.detail-foot{margin-top:8px;color:#555;font-size:13px}
.detail-foot b{color:#222}
.tag.ok{background:#e6f7ec;color:#237804;border:1px solid #b7eb8f;padding:1px 8px;border-radius:10px;font-size:12px}
.row-actions{white-space:nowrap}