/* 牛元宝ERP - 样式 */
:root {
  --primary: #b83b2f;      /* 牛肉红 */
  --primary-dark: #96281b;
  --bg: #f5f2ee;
  --card: #ffffff;
  --text: #2d2a26;
  --muted: #8a857e;
  --border: #e5e0da;
  --green: #1f7a4d;
  --green-bg: #e8f5ee;
  --red: #b83b2f;
  --red-bg: #fdecea;
  --blue-bg: #eaf1fb;
  --yellow-bg: #fdf6e3;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--text); font-size: 14px; }

.layout { display: flex; min-height: 100vh; }

/* 侧边栏
   🚨 flex: 0 0 210px —— 必须显式禁止收缩。
   只写 width: 210px 时 flex-shrink 默认为 1，主区里一旦出现宽内容
   （表格单元格是 white-space: nowrap，多列表格 min-content 很宽），
   主区拒绝收缩 → 溢出部分全部由侧边栏「让位」→ 侧边栏被压到接近 0 宽，
   表现为「一点物料库，边栏就消失」。 */
.sidebar {
  flex: 0 0 210px; width: 210px; background: #2d2a26; color: #e8e2da;
  /* overflow:hidden —— 滚动交给内部 .nav：品牌区与底部「用户/退出」保持固定，
     否则菜单变多后要滚到底才能看到退出按钮。 */
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: hidden;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 18px 16px; border-bottom: 1px solid #3a3733; }
.logo {
  width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--primary), #e2703a);
  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: #fff;
}
.brand-name { font-size: 16px; font-weight: 700; }
.brand-sub { font-size: 11px; color: #a29c93; }
/* min-height:0 —— flex 子项默认 min-height:auto，会撑破父容器使内部滚动失效，必须显式置 0 */
.nav { padding: 12px 8px; flex: 1; min-height: 0; overflow-y: auto; }
/* 导航分组：按业务域分区（供应链 / 财务 / 系统与运营），只影响呈现，不涉及权限 */
.nav-group { margin-top: 12px; }
.nav-group-title {
  padding: 0 14px 6px; font-size: 11px; letter-spacing: .06em;
  color: #7c766d; user-select: none;
}
.nav-item-top { margin-bottom: 6px; }
.nav-item {
  display: block; padding: 10px 14px; border-radius: 8px; cursor: pointer; color: #c9c3b9;
  text-decoration: none; margin-bottom: 2px; transition: background .15s, color .15s;
}
.nav-item:hover { background: #3a3733; color: #fff; }
.nav-item.active {
  background: rgba(184,59,47,0.15); color: #f08070;
  border-left: 3px solid var(--primary); border-radius: 0 8px 8px 0;
  padding-left: 11px;
}
.sidebar-foot { padding: 14px 16px; font-size: 11px; color: #7c766d; border-top: 1px solid #3a3733; }

/* 主区
   🚨 min-width: 0 —— flex item 默认 min-width: auto（=内容的 min-content 宽度），
   宽表格会把它顶大、再去挤压侧边栏。显式置 0 后主区可被压缩，
   超出部分交给下方 .card 的 overflow-x 内部滚动。 */
.main { flex: 1; min-width: 0; padding: 20px 28px; max-width: 1200px; overflow-x: auto; }
.topbar { margin-bottom: 18px; }
.topbar h1 { font-size: 22px; }
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.spacer { flex: 1; }

/* 卡片
   overflow-x: auto —— 全局表格都是 white-space: nowrap，列多的页面
   （物料库 10 列、应付/应收/发票/审批/固定资产 9 列等）必然超宽，
   让它在本卡片内横向滚动，而不是撑破整个页面布局。 */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px; margin-bottom: 16px; overflow-x: auto; }
.card h2 { font-size: 15px; margin-bottom: 12px; }

/* 仪表盘统计 */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 16px; }
.stat { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.stat .label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.stat .value { font-size: 22px; font-weight: 700; }
.stat .value.red { color: var(--red); }
.stat .value.green { color: var(--green); }

/* 表格 */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 10px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { font-size: 12px; color: var(--muted); font-weight: 600; }
td { font-size: 13px; }
tr:hover td { background: #faf8f5; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* 标签 */
.badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 12px; }
.badge.red { background: var(--red-bg); color: var(--red); }
.badge.green { background: var(--green-bg); color: var(--green); }
.badge.yellow { background: var(--yellow-bg); color: #a4710a; }
.badge.blue { background: var(--blue-bg); color: #2f5ea8; }
.badge.gray { background: #f0ede9; color: #6b6560; }

/* 按钮 */
.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px;
  border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 13px; color: var(--text);
  transition: all .15s;
}
.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-dark); color: #fff; }
.btn.sm { padding: 4px 10px; font-size: 12px; }
.btn.danger { color: var(--red); border-color: #e8c4c0; }
.btn.danger:hover { background: var(--red-bg); }

/* 表单 */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.form-item { display: flex; flex-direction: column; gap: 5px; }
.form-item.full { grid-column: 1 / -1; }
label { font-size: 12px; color: var(--muted); }
input, select, textarea {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px;
  font-family: inherit; background: #fff; color: var(--text); width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* 弹窗 */
.modal-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 100;
}
.modal { background: #fff; border-radius: 14px; width: 560px; max-width: 94vw; max-height: 90vh; overflow: auto; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 15px; }
.modal-body { padding: 18px 20px; }
.icon-btn { border: none; background: none; font-size: 22px; cursor: pointer; color: var(--muted); }

/* Toast */
.toast {
  position: fixed; top: 24px; left: 50%; transform: translateX(-50%); background: #2d2a26; color: #fff;
  padding: 10px 20px; border-radius: 8px; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 200;
}
.toast.show { opacity: 1; }

/* ---------- 别名类（补齐 2026-08 后新增模块用到的类名） ----------
   ⚠️ 背景：企微审批对接 / 固定资产 / 总账报表 / 银行对账 / 加盟商对账单 /
   预算控制 / 期末处理 / 工资凭证 这 8 个页面用的是 .tbl / .form-row / .modal-foot /
   .btn-primary / .muted 等类名，而早期模块用的是 table / .form-item / .form-actions /
   .btn.primary。这些别名从未定义，8 个页面一直靠浏览器默认样式在渲染
   （表格不满宽、label 与输入框挤在一行、弹窗按钮不右对齐、主按钮和次按钮长得一样）。
   这里统一补上别名，语义与既有类完全一致 —— 不改各页面模板，避免回归面扩大。 */
.tbl { width: 100%; border-collapse: collapse; }
/* 表头/单元格样式由上面的全局 `th, td` 规则提供，此处不再重复 */
.muted { color: var(--muted); }
.form-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.form-row > label { font-size: 12px; color: var(--muted); }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
/* .btn.sm.on —— 总账报表的四个 tab（科目余额表/序时账/明细账/维度报表）
   用 `on` 表示当前选中；.btn 本身没有选中态，不加会看不出在哪个 tab。 */
.btn.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.on:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
/* .ts —— 发票列表「关联单据」列的承载标签。原先无定义，与普通正文完全同形，
   看不出它是「这张票挂在哪张应付/应收单上」的关联信息。 */
.ts { font-size: 12px; color: var(--muted); }
/* .ipt —— 工资凭证页的输入控件（内联 style 会覆盖宽度，此处只保证盒模型一致） */
.ipt { width: 100%; box-sizing: border-box; }

/* 报表 */
.report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.report-table td:last-child, .report-table td:first-child { text-align: right; }
.report-table th:last-child { text-align: right; }
.report-total td { font-weight: 700; border-top: 2px solid var(--primary); }

/* 空状态 */
.empty { text-align: center; color: var(--muted); padding: 40px 0; }

/* 登录页 */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card { width: 320px; max-width: 92vw; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 32px 28px; text-align: center; }
.login-logo { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, var(--primary), #e2703a); color: #fff; font-size: 28px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.login-title { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.login-sub { font-size: 12px; color: var(--muted); margin-bottom: 20px; }
.login-card input { margin-bottom: 10px; }
.login-btn { width: 100%; justify-content: center; padding: 10px; }
.login-err { color: var(--red); font-size: 12px; margin-top: 10px; min-height: 16px; }

/* 档案分组折叠 */
.fieldset-group { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.fieldset-group h3 { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 10px; }
.user-row { display: flex; align-items: center; justify-content: space-between; }
.user-row .logout { cursor: pointer; color: #a29c93; font-size: 11px; text-decoration: underline; }
.view-switch { display: inline-flex; gap: 4px; }
.vs-btn { background: transparent; border: 1px solid #4a463f; color: #c9c3b9; font-size: 11px; padding: 2px 8px; border-radius: 6px; cursor: pointer; }
.vs-btn.on { background: var(--primary); border-color: var(--primary); color: #fff; }

@media (max-width: 860px) {
  .layout { flex-direction: column; }
  /* 窄屏改为顶部横向导航条：flex-basis 必须一并覆盖，
     否则会继承桌面端的 flex: 0 0 210px，把导航条压成 210px 宽。 */
  .sidebar { flex: 0 0 auto; width: 100%; height: auto; flex-direction: row; align-items: center; position: static; }
  .brand-name, .brand-sub { display: none; }
  .brand { border: none; padding: 8px; }
  .nav { display: flex; flex: 1; gap: 4px; padding: 8px; overflow-x: auto; }
  /* 分组：display:contents 让组内菜单直接参与 .nav 的横向 flex，
     不额外产生盒子；组标题在窄屏没空间，隐藏（仅呈现层，不影响权限）。
     注意 applyNav() 会给整组写内联 display，内联优先级更高，二者不冲突。 */
  .nav-group { display: contents; }
  .nav-group-title { display: none; }
  /* 🚨 不能等分宽度（flex:1）：20 个菜单挤进窄屏后每个只剩 ~35px，
     中文被迫一个字一行（竖排）。改为按内容宽度排列，放不下时导航条横向滚动。 */
  .nav-item { display: block; flex: 0 0 auto; white-space: nowrap; text-align: center; padding: 8px 10px; font-size: 12px; }
  .main { padding: 14px; }
  .form-grid { grid-template-columns: 1fr; }
}