/* ===== 纸箱采购管理系统 - 样式（快宝管家风格改版） ===== */
:root {
  --sidebar-w: 216px;
  --topbar-h: 56px;
  --brand: #3d7fff;          /* 主色：亮蓝 */
  --brand-deep: #2b62d9;     /* 深一档：hover */
  --brand-light: #3d7fff;
  --brand-ink: #1f2d3d;      /* 数值深色 */
  --bg: #eef2f8;             /* 页面浅蓝灰底 */
  --card-border: #e9eef5;
  --text: #2c3546;
  --text-sub: #8592a6;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  font-size: 14px;
  color: var(--text);
}

/* ---------- 顶栏（通栏 · 柔和蓝紫渐变背景） ---------- */
.navbar-top {
  height: var(--topbar-h);
  /* 左上淡蓝光斑 + 右侧淡紫光斑，中部留白，整体近白 */
  background:
    radial-gradient(420px 140px at 2% -30%, rgba(148, 176, 255, .40), transparent 70%),
    radial-gradient(380px 130px at 96% -40%, rgba(186, 170, 250, .35), transparent 70%),
    radial-gradient(300px 110px at 22% 120%, rgba(255, 255, 255, .9), transparent 70%),
    linear-gradient(180deg, #f6f8ff 0%, #fdfdff 60%, #ffffff 100%);
  border-bottom: 1px solid #edf1f7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 16px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.navbar-brand-area { display: flex; align-items: center; gap: 10px; }
.brand {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 17px;
  font-weight: 800;
  color: var(--brand);
  text-decoration: none;
  letter-spacing: .5px;
}
.brand i { font-size: 21px; }
.brand-sub {
  font-size: 11.5px;
  color: #98a4b8;
  background: #f1f5fb;
  border-radius: 4px;
  padding: 2px 7px;
  margin-left: 2px;
}
.btn-icon-only {
  border: 0; background: transparent; font-size: 20px; color: #5a6b85;
  padding: 4px 8px; border-radius: 8px;
}
.btn-icon-only:hover { background: #f1f5fb; }
.topbar-date { color: var(--text-sub); font-size: 13px; }
.user-chip { color: var(--text); }
/* v1.16 顶栏右上角菜单（系统设置等，从侧边栏移入） */
.topbar-action {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  color: #5a6b85; font-size: 13.5px; text-decoration: none;
  transition: background .15s, color .15s;
}
.topbar-action:hover { background: #f1f5fb; color: var(--brand); }
.topbar-action.active { background: #eaf1ff; color: var(--brand); font-weight: 600; }
.topbar-action i { font-size: 16px; }
.user-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, #4d92ff, #2f6bff);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; flex: none;
}
.user-name { font-size: 13.5px; font-weight: 600; }
.user-role {
  font-size: 11px; color: var(--brand);
  background: #eaf1ff; border-radius: 10px; padding: 1px 8px;
}

.app-wrap { display: flex; min-height: calc(100vh - var(--topbar-h)); }

/* ---------- 侧边栏（白底浅色） ---------- */
.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: #fff;
  border-right: 1px solid #edf1f7;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
}
.sidebar-nav { padding: 8px 10px 30px; }
.sidebar-divider {
  padding: 16px 10px 6px;
  font-size: 12px;
  color: #9aa6b9;
  font-weight: 600;
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin: 2px 0;
  color: #4c5a70;
  text-decoration: none;
  font-size: 13.5px;
  border-radius: 8px;
  transition: all .15s;
}
.sidebar-link:hover { background: #f2f6fc; color: var(--brand); }
.sidebar-link.active {
  background: #eaf1ff;
  color: var(--brand);
  font-weight: 600;
}
.sidebar-link i { font-size: 15px; width: 18px; text-align: center; }

/* ---------- 主区 ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.content { padding: 18px 20px 28px; flex: 1; }

/* ---------- 卡片 ---------- */
.card {
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(31, 63, 120, .04);
}
.card-header {
  background: #fff;
  border-bottom: 1px solid #f0f3f8;
  font-weight: 600;
  color: var(--brand-ink);
  padding: 12px 16px;
  border-radius: 10px 10px 0 0 !important;
}
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}
.page-head h4 { margin: 0; font-size: 18px; font-weight: 700; color: var(--brand-ink); }
.page-head .desc { color: var(--text-sub); font-size: 12.5px; margin-top: 2px; }

/* ---------- 统计卡 ---------- */
.stat-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 14px 16px;
  height: 100%;
  box-shadow: 0 1px 2px rgba(31, 63, 120, .04);
}
.stat-card .label { font-size: 12.5px; color: var(--text-sub); margin-bottom: 6px; }
.stat-card .value { font-size: 24px; font-weight: 800; color: var(--brand-ink); line-height: 1.2; }
.stat-card .value small { font-size: 12px; font-weight: 400; color: #9aa6b9; }
.stat-card .extra { font-size: 12px; color: #9aa6b9; margin-top: 4px; }
/* 强调色数值（涨红跌绿遵循 A 股习惯由视图自行加 class） */
.stat-card .value.text-danger,
.stat-card .value.text-success { color: inherit; }
.stat-card .value.up   { color: #e0343a; }
.stat-card .value.down { color: #0e9d58; }

/* ---------- 表格（v1.18 统一规范：边距适当、行高舒展、表头清晰） ---------- */
.table-wrap { overflow-x: auto; }
.table {
  margin-bottom: 0;
  font-size: 13.5px;
  color: var(--text);
  /* 用 1px 列分隔线，密集表格里更易横向对齐阅读 */
  --bs-table-bg: transparent;
}
/* 表头：淡蓝灰底 + 深色字，上下边框定界 */
.table > thead > tr > th {
  background: #f6f8fc;
  color: #4a5a73;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .2px;
  white-space: nowrap;
  padding: 11px 16px;
  border-top: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
  vertical-align: middle;
}
/* 数据行：左右各 16px 内边距，行高舒展不拥挤 */
.table > tbody > tr > td {
  padding: 12px 16px;
  vertical-align: middle;
  border-bottom: 1px solid #f1f4f9;
}
/* 最后一行的下边框去掉，避免与卡片圆角重叠出现双线 */
.table > tbody > tr:last-child > td { border-bottom: 0; }
/* 紧凑表格（看板小表）：内边距略收，但仍保持可读的呼吸感 */
.table-sm > thead > tr > th { padding: 9px 12px; }
.table-sm > tbody > tr > td { padding: 9px 12px; }
/* 悬停行高亮（叠加在状态底色之上时用 box-shadow 避免被覆盖） */
.table-hover > tbody > tr:hover > * { background: #f5f9ff; }
/* 斑马纹（可选，页面按需加 .table-striped 之外的 .table-zebra） */
.table-zebra > tbody > tr:nth-child(even) > * { background: #fafcff; }
.table-zebra.table-hover > tbody > tr:nth-child(even):hover > * { background: #f2f8ff; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .center { text-align: center; }
/* 表内主标识（单号/编码）：加粗 + 深色，便于行内定位 */
.table td .row-key, .table td b.row-key { color: var(--brand-ink); font-weight: 700; }
/* 表格内的小号次要说明文字 */
.table td .sub { display: block; font-size: 12px; color: var(--text-sub); margin-top: 1px; }

/* 表格容器：给卡片内表格加内边距留白，避免表格紧贴卡片边缘 */
.card > .table-wrap > .table > thead > tr > th:first-child,
.card > .table-wrap > .table > tbody > tr > td:first-child { padding-left: 20px; }
.card > .table-wrap > .table > thead > tr > th:last-child,
.card > .table-wrap > .table > tbody > tr > td:last-child { padding-right: 20px; }

/* 操作列按钮组：统一间距，避免按钮挤在一起 */
.table .op-btns { display: inline-flex; gap: 6px; align-items: center; justify-content: center; }
.table .op-btns .btn { white-space: nowrap; }

/* 表格内输入框（报价录入用） */
.table input.cell-input {
  width: 100%;
  border: 1px solid #d6dee8;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 13px;
  text-align: right;
}
.table input.cell-input:focus {
  outline: none;
  border-color: var(--brand-light);
  box-shadow: 0 0 0 2px rgba(46,117,182,.15);
}

/* 合计行 */
tr.total-row > td {
  background: #eaf2fb !important;
  font-weight: 700;
  color: var(--brand);
}

/* ---------- 徽章（软色徽章：统一尺寸与字重） ---------- */
.badge-soft {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 11.5px; font-weight: 600; line-height: 1.5;
  white-space: nowrap; vertical-align: middle;
}
.bg-soft-danger  { background: #fdecec; color: #c2312f; }
.bg-soft-success { background: #e6f4ea; color: #1b7a3d; }
.bg-soft-warn    { background: #fff4e0; color: #b26a00; }
.bg-soft-warning { background: #fff4e0; color: #b26a00; }
.bg-soft-info    { background: #eaf1ff; color: #2b62d9; }
.bg-soft-primary { background: #e8f1fb; color: #1f4e78; }
.bg-soft-gray    { background: #eef0f3; color: #6b7683; }
.bg-soft-secondary { background: #eef0f3; color: #6b7683; }

/* 最优行高亮 */
tr.row-best > td { background: #fffbf0 !important; }
tr.row-best:hover > td { background: #fff6e0 !important; }

/* ---------- 批量录入报价：勾选行状态 ---------- */
/* 已勾选：淡蓝底 + 左侧灰色状态条 */
tr.row-picked > td { background: #f0f6fd !important; }
tr.row-picked:hover > td { background: #e6f0fb !important; }
tr.row-picked > td:first-child { box-shadow: inset 3px 0 0 #b9cbe0; }
/* 已勾选且填了单价：状态条转绿，一眼看出哪些会真的写库 */
tr.row-ready > td:first-child { box-shadow: inset 3px 0 0 #1b7a3d; }

/* ---------- 报价明细：弹窗回填的新行（尚未保存过）---------- */
tr.row-new > td { background: #fffbea !important; }
tr.row-new:hover > td { background: #fff6dd !important; }
tr.row-new > td:first-child { box-shadow: inset 3px 0 0 #ffc107; }

/* 分类行（表格里的品类分隔条） */
tr.cat-row > td { border-bottom: 1px solid #e3e8ef; }
tr.cat-row:hover > td { background: #f7f9fc !important; }

/* 底部操作条吸附在视口底部，长清单滚动时也能随时保存 */
.card-footer.sticky-bottom {
  position: sticky;
  bottom: 0;
  z-index: 3;
  border-top: 1px solid #e3e8ef;
  box-shadow: 0 -2px 6px rgba(31, 78, 120, .06);
}

/* 总分 */
.total-score { font-size: 16px; font-weight: 700; color: var(--brand); }

/* 状态行颜色（库存建议用） */
tr.st-danger > td { background: #fff5f5 !important; }
tr.st-warn   > td { background: #fffbf0 !important; }
tr.st-over   > td { background: #f4f6f9 !important; }
tr.st-danger:hover > td { background: #ffeeee !important; }
tr.st-warn:hover   > td { background: #fff6e0 !important; }
tr.st-over:hover   > td { background: #eef1f5 !important; }

/* 小标签（结果结论卡片） */
.result-box {
  background: #f7fbf7;
  border: 1px solid #cfe8d6;
  border-radius: 6px;
  padding: 12px 16px;
}
.result-box .rl { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; }
.result-box .rl .k { color: #6b7683; }
.result-box .rl .v { font-weight: 600; }

/* ---------- 参数区 ---------- */
.param-box {
  background: #fffdf5;
  border: 1px solid #ffe9a8;
  border-radius: 6px;
  padding: 12px 16px;
}
.param-box .param-item { display: flex; align-items: center; gap: 8px; }
.param-box label { font-size: 13px; color: #7a5c00; margin: 0; white-space: nowrap; }
.param-box input {
  width: 90px;
  border: 1px solid #ffd666;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 13px;
  text-align: center;
}

/* ---------- 空状态 ---------- */
.empty-tip {
  text-align: center;
  padding: 48px 20px;
  color: #99a3b3;
}
.empty-tip i { font-size: 40px; display: block; margin-bottom: 10px; opacity: .5; }
/* 空态里放的操作按钮不要被上面的图标规则波及（否则按钮图标 40px，按钮变成大方块） */
.empty-tip .btn i {
  font-size: inherit;
  display: inline-block;
  margin-bottom: 0;
  opacity: 1;
  vertical-align: -.125em;
}

/* 表格窄列里的 number 输入框隐藏上下 spinner 箭头，避免遮挡数字（如 222 只露出 22） */
.table input[type="number"]::-webkit-outer-spin-button,
.table input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.table input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ---------- 分页 ---------- */
.pagination { margin: 0; }
.pagination .page-link { color: var(--brand); font-size: 13.5px; }
.pagination .active .page-link { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------- 响应式 ---------- */
@media (max-width: 992px) {
  .sidebar {
    position: fixed;
    left: -100%;
    top: var(--topbar-h);
    z-index: 1050;
    transition: left .2s;
    box-shadow: 2px 0 12px rgba(20, 40, 80, .15);
  }
  .sidebar.open { left: 0; }
}


/* ==========================================================
 * 选品弹窗（quotes.php）
 * ========================================================== */

/* 弹窗内的表格滚动区：固定高度，表头吸附在顶部 */
.pick-wrap {
  max-height: 52vh;
  overflow-y: auto;
  border: 1px solid #e3e8ef;
  border-radius: 6px;
}
#pickTable > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f1f5fa !important;
  box-shadow: inset 0 -1px 0 #dde4ee;
  font-weight: 600;
  white-space: nowrap;
}

/* 工具条与筛选区之间的分隔 */
.pick-toolbar { border-bottom: 1px dashed #e3e8ef; }

/* 品类行（整组勾选） */
#pickBody tr.pick-cat > td {
  background: #f7f9fc;
  border-bottom: 1px solid #e3e8ef;
}
#pickBody tr.pick-cat:hover > td { background: #eef4fb; }

/* 弹窗里被勾上的行：淡蓝底 + 左侧色条，方便一口气勾十几个后回看 */
#pickBody tr.pick-row.row-picked > td { background: #f0f6fd; }
#pickBody tr.pick-row.row-picked:hover > td { background: #e6f0fb; }
#pickBody tr.pick-row.row-picked > td:first-child { box-shadow: inset 3px 0 0 #b9cbe0; }

/* 明细表里刚被弹窗回填进来的行：快速闪一下，提示「已加到这里」 */
@keyframes quoteFlash {
  0%   { background-color: #ffe9a8; }
  100% { background-color: transparent; }
}
tr.row-flash > td { animation: quoteFlash 1.1s ease-out; }

/* ===== 审批流程节点条（订单详情页） ===== */
.flow-steps { gap: 0; }
.flow-node { display: flex; align-items: center; gap: 6px; opacity: .55; }
.flow-node.done, .flow-node.current { opacity: 1; }
.flow-dot { width: 24px; height: 24px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: .72rem; font-weight: 700;
  background: #e9edf3; color: #7a8699; flex: none; transition: all .15s; }
.flow-node.done .flow-dot { background: #d1e7dd; color: #146c43; }
.flow-node.current .flow-dot { background: var(--brand); color: #fff;
  box-shadow: 0 0 0 4px rgba(61, 127, 255, .15); }
.flow-node.current .flow-label { color: #1d3557; font-weight: 700; }
.flow-label { font-size: .82rem; color: #5a6572; white-space: nowrap; }
.flow-node.done .flow-label { color: #146c43; }
.flow-arrow { color: #c8d0da; margin: 0 4px; font-size: .8rem; line-height: 1; }
.flow-arrow.passed { color: #7db4e0; }
#apQr img { border: 6px solid #fff; box-shadow: 0 2px 14px rgba(0,0,0,.12); border-radius: 8px; }

/* ===== 统一提示弹窗 ===== */
.ui-dialog .modal-content { border: 0; border-radius: 16px; box-shadow: 0 18px 50px rgba(15,35,64,.25); }
.ui-dialog .modal-body { padding: 30px 24px 4px; }
.ui-dialog-icon { font-size: 46px; display: inline-block; line-height: 1; }
.ui-dialog-title { font-weight: 700; color: var(--brand-ink); margin-top: 10px; font-size: 1.04rem; }
.ui-dialog-msg { color: #4a5a73; font-size: .93rem; line-height: 1.7; white-space: pre-line; margin-top: 6px; }
.ui-dialog .modal-footer { gap: 10px; padding-bottom: 22px; }
.ui-dialog .btn { min-width: 92px; }
/* 图标入场：轻微弹跳，提示「有事情发生了」 */
.ui-dialog.show .ui-dialog-icon { animation: uiDialogPop .32s cubic-bezier(.34,1.56,.64,1); }
@keyframes uiDialogPop {
  0%   { transform: scale(.5); opacity: 0; }
  100% { transform: scale(1);  opacity: 1; }
}
/* 危险确认：图标做一次轻微抖动强调 */
.ui-dialog .bi-x-circle-fill, .ui-dialog .bi-exclamation-triangle-fill {
  filter: drop-shadow(0 4px 10px rgba(214, 69, 69, .22));
}

#uiToastHost { position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 3000; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
/* v1.18：toast 统一为「左侧色条 + 软色底 + 深色字」，成功绿 / 失败红 / 警告橙 一眼可辨 */
.ui-toast { display: flex; align-items: center; gap: 10px; padding: 12px 22px 12px 18px;
  border-radius: 12px; background: #fff;
  box-shadow: 0 12px 34px rgba(15,35,64,.18);
  font-size: .9rem; font-weight: 600; color: #2c3546;
  border: 1px solid var(--card-border); border-left: 4px solid #9aa6b9;
  opacity: 0; transform: translateY(-16px) scale(.98); transition: all .32s cubic-bezier(.34,1.4,.64,1);
  max-width: 84vw; }
.ui-toast.show { opacity: 1; transform: translateY(0) scale(1); }
.ui-toast i { font-size: 1.2rem; flex: none; }
.ui-toast span { line-height: 1.5; }
/* 各语义色：图标色 + 底色 + 左侧色条 */
.ui-toast-success { background: #f2fbf5; border-color: #cdeed9; border-left-color: #2e9e5b; }
.ui-toast-success i { color: #2e9e5b; }
.ui-toast-info { background: #f2f7ff; border-color: #d6e6ff; border-left-color: var(--brand); }
.ui-toast-info i { color: var(--brand); }
.ui-toast-warning { background: #fffaf0; border-color: #ffe9c2; border-left-color: #e8a020; }
.ui-toast-warning i { color: #d9911b; }
.ui-toast-danger { background: #fff4f4; border-color: #fbd9d9; border-left-color: #d64545; }
.ui-toast-danger i { color: #d64545; }

/* 页面顶部 flash 提示：统一为「可自动消失」的软色条（带左色条 + 图标） */
.alert-flash {
  display: flex; align-items: center; gap: 10px;
  border-radius: 11px; padding: 12px 16px;
  font-size: 13.5px; font-weight: 600;
  border: 1px solid transparent; border-left: 4px solid #9aa6b9;
  box-shadow: 0 2px 8px rgba(31,63,120,.05);
}
.alert-flash .btn-close { opacity: .45; }
.alert-flash .btn-close:hover { opacity: .8; }
.alert-flash.is-hiding { opacity: 0; transform: translateY(-6px); transition: all .35s ease; }
/* flash 语义变体（布局默认 success；需要失败提示的页面可自行覆盖 class） */
.alert-flash.alert-success { background: #f2fbf5; border-color: #cdeed9; border-left-color: #2e9e5b; color: #127a43; }
.alert-flash.alert-success i { color: #2e9e5b; }
.alert-flash.alert-danger  { background: #fff4f4; border-color: #fbd9d9; border-left-color: #d64545; color: #c2312f; }
.alert-flash.alert-danger i { color: #d64545; }
.alert-flash.alert-warning { background: #fffaf0; border-color: #ffe9c2; border-left-color: #e8a020; color: #a96c00; }
.alert-flash.alert-warning i { color: #d9911b; }
.alert-flash.alert-info    { background: #f2f7ff; border-color: #d6e6ff; border-left-color: var(--brand); color: #2b62d9; }
.alert-flash.alert-info i { color: var(--brand); }

/* ==========================================================
 * 快宝管家风格改版补充（亮蓝主题）
 * ========================================================== */

/* ---------- 按钮：圆角亮蓝 ---------- */
.btn { border-radius: 7px; font-size: 13.5px; font-weight: 500; }
.btn-sm { border-radius: 6px; }
.btn-primary {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-deep);
  --bs-btn-hover-border-color: var(--brand-deep);
  --bs-btn-active-bg: var(--brand-deep);
  --bs-btn-active-border-color: var(--brand-deep);
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-bg: var(--brand);
  --bs-btn-active-border-color: var(--brand);
}
.btn-link { --bs-btn-color: var(--brand); --bs-btn-hover-color: var(--brand-deep); }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-deep); }

/* ---------- 表单控件 ---------- */
.form-control, .form-select {
  border-radius: 7px;
  border-color: #dfe6f0;
  font-size: 13.5px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(61, 127, 255, .12);
}
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.page-link:focus { box-shadow: 0 0 0 3px rgba(61, 127, 255, .12); }

/* ---------- 下拉菜单 / 模态 ---------- */
.dropdown-menu { border-radius: 10px; border-color: var(--card-border);
  box-shadow: 0 10px 34px rgba(31, 63, 120, .12); }
.dropdown-item:active { background: var(--brand); }
.modal-content { border-radius: 14px; border: 0;
  box-shadow: 0 18px 50px rgba(15, 35, 64, .22); }
.modal-header { border-bottom: 1px solid #f0f3f8; }
.modal-footer { border-top: 1px solid #f0f3f8; }

/* ---------- 提示 ---------- */
.alert { border-radius: 10px; border: 0; font-size: 13.5px; }
.alert-success { background: #e6f7ec; color: #127a43; }
.alert-danger  { background: #fdecec; color: #c2312f; }
.alert-warning { background: #fff6e4; color: #a96c00; }
.alert-info    { background: #eaf1ff; color: #2b62d9; }

/* ---------- 页面主标题下的软色小徽章 ---------- */
.badge-soft { font-weight: 600; }

/* ---------- 看板大数字（dashboard 用） ---------- */
.kpi-num { font-size: 26px; font-weight: 800; color: var(--brand-ink);
  font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi-label { font-size: 12.5px; color: var(--text-sub); }
.kpi-card { background: #fff; border: 1px solid var(--card-border);
  border-radius: 10px; padding: 14px 16px; height: 100%;
  box-shadow: 0 1px 2px rgba(31, 63, 120, .04); }
.kpi-card .kpi-icon { width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; flex: none; }
.kpi-icon.blue   { background: #eaf1ff; color: #2b62d9; }
.kpi-icon.green  { background: #e6f7ec; color: #127a43; }
.kpi-icon.orange { background: #fff2e2; color: #c47b00; }
.kpi-icon.red    { background: #fdecec; color: #c2312f; }
.kpi-icon.cyan   { background: #e3f6f8; color: #0e7f8c; }
.kpi-icon.purple { background: #f0ebff; color: #6b46d8; }

/* ==========================================================
 * v1.12 框架改造：折叠式侧边栏 + 抽屉式多标签条
 * ========================================================== */

/* ---------- 侧边栏：一级项 + 分组（可折叠、默认全展开） ---------- */
.sidebar-nav { padding: 10px 10px 24px; }
.sidebar-link { padding: 7px 12px; font-size: 13.5px; }

/* 分组标题（可点击收起/展开）：保留原分组标签观感，右侧带折叠箭头 */
.acc { margin-top: 2px; }
.acc-head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  background: transparent; border: 0; text-align: left;
  padding: 13px 10px 5px;
  font-size: 12px; color: #9aa6b9; font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
}
.acc-head:hover { color: var(--brand); }
.acc-head .acc-caret {
  font-size: 10px; transition: transform .2s ease; color: #c3ccd9;
}
.acc-head[aria-expanded="true"] .acc-caret { transform: rotate(180deg); }

/* 分组内容：子项左缩进一点，与一级项形成层次 */
.acc-body { padding: 0 0 2px 0; }
.sidebar-sublink { padding: 6px 12px 6px 20px; font-size: 13px; }
.sidebar-sublink i { font-size: 14px; width: 17px; }
.sidebar-sublink.active { background: #eaf1ff; }

/* ---------- v1.14 系统设置 Hub：页内顶部 Tab（下划线式） ---------- */
.hub-tabs {
  border-bottom: 2px solid #eef1f6;
  gap: 2px;
  --bs-nav-link-color: #4c5a70;
}
.hub-tabs .nav-link {
  border: 0;
  background: transparent;
  color: #4c5a70;
  padding: 10px 18px;
  font-size: 14px;
  border-radius: 8px 8px 0 0;
  margin-bottom: -2px;
}
.hub-tabs .nav-link:hover { color: var(--brand); }
.hub-tabs .nav-link.active {
  color: var(--brand);
  font-weight: 600;
  background: transparent;
  box-shadow: inset 0 -2px 0 var(--brand);
}

/* ---------- v1.15 全局消息提醒（右下角） ---------- */
.nt-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1060;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(40, 60, 90, .16);
  padding: 8px;
  min-width: 260px;
  max-width: 340px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
.nt-toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.nt-toast .nt-close {
  position: absolute; top: -8px; right: -8px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 0; background: #eef1f6; color: #8a97ab;
  font-size: 11px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; transition: opacity .15s;
}
.nt-toast:hover .nt-close { opacity: 1; }
.nt-toast .nt-close:hover { background: #dfe5ee; color: #5a6a80; }
.nt-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 9px;
  text-decoration: none; color: #3d4a5c; font-size: 13px;
  transition: background .15s;
}
.nt-row:hover { background: #f2f6fc; color: var(--brand); }
.nt-row .nt-icon {
  flex: none; width: 32px; height: 32px; border-radius: 9px;
  background: #fff2e2; color: #e8830c;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.nt-row .nt-text { flex: 1; line-height: 1.45; }
.nt-row .nt-text b { color: #e8830c; }
.nt-row .nt-go { color: #b9c1cd; font-size: 12px; }

/* ---------- 抽屉式多标签条 ---------- */
.tabbar {
  display: flex; align-items: stretch;
  height: 38px;
  background: #fff;
  border-bottom: 1px solid #edf1f7;
  padding: 0 6px;
  position: sticky;
  top: var(--topbar-h);
  z-index: 90;
  flex: none;
}
.tab-strip {
  flex: 1; min-width: 0;
  display: flex; align-items: stretch; gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 2px;
}
.tab-strip::-webkit-scrollbar { display: none; }
.tab-item {
  display: inline-flex; align-items: center; gap: 6px;
  flex: none; max-width: 190px;
  padding: 0 10px;
  font-size: 12.5px;
  color: #6b7683;
  background: #f6f8fc;
  border: 1px solid #eaeff7;
  border-radius: 8px 8px 0 0;
  text-decoration: none;
  white-space: nowrap;
  transition: all .15s;
  position: relative;
  top: 1px;
}
.tab-item:hover { color: var(--brand); background: #eef4ff; }
.tab-item.active {
  color: var(--brand);
  background: #fff;
  border-color: #e2eaf7;
  border-bottom-color: #fff;
  font-weight: 600;
  box-shadow: 0 -2px 0 var(--brand) inset;
}
.tab-item .tab-text {
  overflow: hidden; text-overflow: ellipsis; max-width: 140px;
}
.tab-close {
  font-size: 12px; color: #b6c0cf; border-radius: 50%;
  width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.tab-close:hover { background: #ffdcdc; color: #d64545; }
.tab-scroll {
  flex: none; width: 26px;
  border: 0; background: transparent;
  color: #93a0b3; font-size: 13px;
  border-radius: 6px;
}
.tab-scroll:hover { background: #f1f5fb; color: var(--brand); }
.tab-tools { display: flex; align-items: center; border-left: 1px solid #f0f3f8; padding-left: 2px; }

/* 标签条下的内容区（去掉多余上边距，避免和标签条叠出双层空隙） */
.tabbar + .content { padding-top: 16px; }

/* ==========================================================
 * 产品资料页：内嵌品类侧栏
 * ========================================================== */
.cat-side { position: sticky; top: calc(var(--topbar-h) + 48px); }
.cat-list { display: flex; flex-direction: column; padding: 6px; max-height: 62vh; overflow-y: auto; }
.cat-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  color: #4c5a70;
  font-size: 13.5px;
  text-decoration: none;
  transition: all .15s;
}
.cat-item:hover { background: #f2f6fc; color: var(--brand); }
.cat-item.active { background: #eaf1ff; color: var(--brand); font-weight: 600; }
.cat-item > i { font-size: 14px; width: 16px; text-align: center; flex: none; }
.cat-item .cat-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-item .cat-cnt {
  font-size: 11px; color: #97a2b3; background: #f1f4f9;
  border-radius: 10px; padding: 0 7px; flex: none;
}
.cat-item.active .cat-cnt { background: #d7e5ff; color: var(--brand-deep); }
/* 编辑/删除图标：hover 才出现，保持列表清爽；进入「管理品类」模式后常显 */
.cat-item .cat-ops { display: none; gap: 6px; flex: none; }
.cat-item:hover .cat-ops { display: inline-flex; }
.cat-side.managing .cat-item .cat-ops { display: inline-flex; }
.cat-item .cat-ops i { font-size: 12.5px; color: #9aa6b9; cursor: pointer; padding: 2px; }
.cat-item .cat-ops i:hover { color: var(--brand); }
.cat-item .cat-ops .cat-del:hover { color: #d64545; }
.cat-add {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  margin: 6px; padding: 7px;
  border: 1px dashed #d6e2f2; border-radius: 8px;
  background: #fbfdff; color: var(--brand);
  font-size: 12.5px;
}
.cat-add:hover { background: #f0f6ff; border-color: var(--brand); }
@media (max-width: 992px) {
  .cat-side { position: static; }
  .cat-list { max-height: none; flex-direction: row; flex-wrap: wrap; }
  .cat-item { border: 1px solid #eaeff7; }
}