/* ============================================================
   梦百合合作管理系统 · v4 品牌视觉设计系统
   主色：MLILY 梦百合 LOGO 品牌蓝 #004093（自官方横版 LOGO 采样）
   特效：侧边栏流光、卡片入场动画、按钮扫光、登录页浮动光球
   说明：仅重写视觉层，全部 class 名与旧版兼容，业务页面零改动
   ============================================================ */

:root {
  /* ---- 品牌色板（自 LOGO 采样） ---- */
  --brand:        #004093;   /* 主品牌蓝 */
  --brand-deep:   #00316f;   /* 深一档 */
  --brand-darker: #001f4d;   /* 最深（侧边栏底部） */
  --brand-600:    #0a55bd;   /* 亮一档（hover） */
  --brand-500:    #1565d8;   /* 高亮蓝 */
  --brand-400:    #4d94f0;   /* 点缀亮蓝 */
  --brand-100:    #dbe8fa;   /* 浅蓝底 */
  --brand-50:     #eef4fd;   /* 极浅蓝底 */

  /* ---- 布局 ---- */
  --sb-w: 236px;             /* 侧边栏宽度 */
  --sb-collapsed-w: 64px;    /* 收起后宽度 */
  --topbar-h: 58px;

  /* ---- 中性色 ---- */
  --ink: #17263f;            /* 主文字 */
  --ink-2: #51617d;          /* 次级文字 */
  --ink-3: #8595ae;          /* 弱文字 */
  --line: #e5ebf4;           /* 分隔线 */
  --bg: #f2f5fa;             /* 页面底色 */

  /* ---- 阴影 ---- */
  --sh-card: 0 1px 2px rgba(0,47,112,.05), 0 4px 16px rgba(0,47,112,.07);
  --sh-card-hover: 0 4px 10px rgba(0,47,112,.08), 0 14px 34px rgba(0,47,112,.14);
  --sh-primary: 0 4px 14px rgba(0,64,147,.32);
}

/* ==================== 基础 ==================== */
/* v4.70：给 html 也铺上页面底色。
   本站是多页应用，每次点菜单都是整页重新加载 —— 浏览器在新文档渲染前显示的是
   浏览器默认白底，等 body 的背景生效时才变浅灰蓝，这一白一灰就是用户说的「闪一下」。
   把同一底色放到 html 上，跳转过程始终是 #f2f5fa，不再白闪。 */
html { background: #f2f5fa; }
body {
  background:
    radial-gradient(1100px 380px at 85% -120px, rgba(0,64,147,.075), transparent 70%),
    var(--bg);
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  color: var(--ink);
}
::selection { background: rgba(0,64,147,.18); }

/* 页面加载入场动画 —— v4.70 已**移除**
   原因：本站是服务端渲染的多页应用，点侧边栏菜单就是整页重新加载，
   下面的入场动画每次都会重放一遍 → 视觉上「点菜单闪一下、内容还要等一会儿才全出来」。
   （原来有三层叠加：.app-wrap 整体 opacity 0→1 用 .38s；
     .card 从下方 14px 上浮淡入 .45s 且按顺序延迟 0.02~0.32s，也就是说最后一排卡片
     要 0.32+0.45≈0.77s 才完全显现；.topbar 从上方滑入 .4s。实测服务端 TTFB 仅 0.11s，
     用户感知到的延迟全部来自这三层动画。）
   现在改为**直出**：跳转后内容立即完整显示。
   保留的动效：按钮/链接 hover、.side-link.active 高亮、弹窗、徽章脉冲、登录页入场
   （登录页不是频繁切换的页面，入场淡入不影响使用）。
   想恢复：把下面三处注释掉的 animation 行取消注释即可（@keyframes 定义都保留着）。 */
/* .app-wrap { animation: pageIn .38s ease backwards; } */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

/* 品牌蓝焦点环 */
.form-control:focus, .form-select:focus {
  border-color: #7fabdd;
  box-shadow: 0 0 0 3px rgba(0,64,147,.13);
}
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-control, .form-select { border-radius: 8px; border-color: #d9e1ee; }
.form-control::placeholder { color: #a9b6ca; }

/* 细滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #c4d2e5; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a8bcd8; }
::-webkit-scrollbar-track { background: transparent; }

/* ==================== 侧边栏（品牌蓝渐变 + 流光） ==================== */
.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sb-w);
  background: linear-gradient(198deg, #0a55bd 0%, var(--brand) 42%, var(--brand-darker) 100%);
  color: #b9cbe6;
  display: flex;
  flex-direction: column;
  z-index: 1040;
  transition: width .22s ease;
  overflow: hidden;
}
/* 环境光晕（静态装饰） */
.sidebar::before {
  content: '';
  position: absolute;
  top: -140px; right: -110px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(77,148,240,.35), transparent 68%);
  pointer-events: none;
}
.sidebar::after {
  content: '';
  position: absolute;
  bottom: -160px; left: -120px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,175,255,.14), transparent 70%);
  pointer-events: none;
}

/* 品牌区：白色 LOGO + 副标题 */
.sidebar-brand {
  height: 60px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px 0 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  white-space: nowrap;
  position: relative;
  z-index: 1;
}
.brand-logo {
  height: 26px;
  width: auto;
  flex: none;
  filter: drop-shadow(0 1px 4px rgba(0,20,60,.35));
}
.brand-mini {           /* 收起状态下显示的单字徽标 */
  display: none;
  width: 34px; height: 34px;
  flex: none;
  align-items: center; justify-content: center;
  border-radius: 9px;
  background: linear-gradient(135deg, #2f8af0, #4d94f0);
  color: #fff; font-weight: 800; font-size: 17px;
  box-shadow: 0 3px 10px rgba(0,25,70,.4);
}
.brand-text {
  font-weight: 700; color: #fff; font-size: 13.5px; letter-spacing: 1px;
  overflow: hidden; text-overflow: ellipsis;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 0 14px;
  position: relative;
  z-index: 1;
}
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 2px; }

.nav-section {
  margin: 15px 18px 6px;
  font-size: 11px;
  letter-spacing: 2.5px;
  color: rgba(185,203,230,.55);
  white-space: nowrap;
}
.side-link {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 10px;
  padding: 9.5px 12px;
  border-radius: 9px;
  color: var(--sb-text, #b9cbe6);
  color: #b9cbe6;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.side-link .nav-ico { width: 17px; height: 17px; flex: none; opacity: .85; transition: opacity .18s ease; }
.side-link:hover {
  color: #fff;
  background: rgba(255,255,255,.09);
  transform: translateX(3px);
}
.side-link:hover .nav-ico { opacity: 1; }
/* 当前页：品牌亮蓝胶囊 + 流光扫过 */
.side-link.active {
  color: #fff;
  background: linear-gradient(92deg, rgba(77,148,240,.95), rgba(21,101,216,.75));
  box-shadow: 0 3px 12px rgba(0,40,100,.42);
  overflow: hidden;
}
.side-link.active::before {
  content: '';
  position: absolute;
  left: -10px; top: 20%;
  width: 3px; height: 60%;
  border-radius: 0 2px 2px 0;
  background: #8fc3ff;
}
.side-link.active::after {          /* 每 5s 扫过一次的高光 */
  content: '';
  position: absolute;
  top: 0; left: -70%;
  width: 45%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-18deg);
  animation: navSheen 5.2s ease-in-out infinite;
}
@keyframes navSheen {
  0%, 72% { left: -70%; }
  88%, 100% { left: 130%; }
}

.sidebar-foot {
  flex: none;
  padding: 11px 16px;
  border-top: 1px solid rgba(255,255,255,.10);
  font-size: 11px;
  color: rgba(185,203,230,.55);
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

/* 收起状态（桌面端） */
body.sb-collapsed .sidebar { width: var(--sb-collapsed-w); }
body.sb-collapsed .brand-logo,
body.sb-collapsed .brand-text,
body.sb-collapsed .nav-text { display: none; }
body.sb-collapsed .brand-mini { display: inline-flex; }
body.sb-collapsed .nav-section { height: 10px; margin: 12px 14px 4px; border-top: 1px solid rgba(255,255,255,.12); overflow: hidden; }
body.sb-collapsed .sidebar-brand { justify-content: center; padding: 0; }
body.sb-collapsed .side-link { justify-content: center; padding: 10px 0; margin: 2px 12px; }
body.sb-collapsed .sidebar-foot { text-align: center; padding: 10px 0; }

/* 移动端抽屉 */
.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,25,60,.5);
  backdrop-filter: blur(2px);
  z-index: 1035;
}
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); transition: transform .25s ease; width: var(--sb-w) !important; }
  body.sb-open .sidebar { transform: translateX(0); }
  body.sb-open .sidebar-backdrop { display: block; }
  .brand-text, .nav-text { display: initial; }
  .brand-logo { display: inline-block; }
  .brand-mini { display: none; }
}

/* ==================== 右侧主区域 ==================== */
.main-area {
  margin-left: var(--sb-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left .22s ease;
}
body.sb-collapsed .main-area { margin-left: var(--sb-collapsed-w); }
@media (max-width: 991.98px) {
  .main-area { margin-left: 0 !important; }
}

/* 顶栏：毛玻璃 */
.topbar {
  height: var(--topbar-h);
  flex: none;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: 0 1px 3px rgba(0,47,112,.05);
  /* v4.70：移除 topbar 入场动画（每次跳转都从上方滑入，加重「闪」的感觉） */
  /* animation: topbarIn .4s ease both; */
}
@keyframes topbarIn { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
.topbar-title { font-weight: 700; font-size: 16px; color: var(--ink); position: relative; padding-left: 12px; }
.topbar-title::before {   /* 标题前的品牌蓝竖条 */
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 16px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brand-500), var(--brand));
}
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* 收起按钮（三道杠动效） */
.sb-toggle {
  width: 36px; height: 36px;
  border: 1px solid #e0e7f2;
  background: #fff;
  border-radius: 9px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.sb-toggle span {
  display: block;
  width: 16px; height: 2px;
  border-radius: 1px;
  background: var(--brand);
  transition: transform .2s ease, width .2s ease;
}
.sb-toggle:hover { background: var(--brand-50); border-color: #bcd2ef; box-shadow: 0 2px 8px rgba(0,64,147,.12); }
body.sb-collapsed .sb-toggle span:nth-child(1) { width: 10px; transform: translateX(3px); }
body.sb-collapsed .sb-toggle span:nth-child(3) { width: 10px; transform: translateX(-3px); }

.btn-user, .btn-shop-switch {
  border: 1px solid #e0e7f2;
  background: #fff;
  color: var(--ink);
  border-radius: 9px;
  padding: 5px 12px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.btn-user:hover, .btn-shop-switch:hover {
  background: var(--brand-50);
  border-color: #bcd2ef;
  color: var(--brand-deep);
  box-shadow: 0 2px 8px rgba(0,64,147,.12);
}
.user-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  display: inline-block;
  margin-right: 2px;
  box-shadow: 0 0 0 3px rgba(34,197,94,.18);
}

.content { flex: 1; }
@media (max-width: 991.98px) { .content { padding-left: 12px !important; padding-right: 12px !important; } }
.content-foot { padding: 14px 0 22px; }

/* ==================== 通用组件 ==================== */
.card {
  box-shadow: var(--sh-card);
  border: 1px solid rgba(213,226,244,.9);
  border-radius: 14px;
  /* v4.70：移除入场动画（原来 animation: fadeUp .45s ease backwards + 下面 6 档延迟，
     会让卡片在页面跳转后 0.02~0.77s 才陆续出现，被用户感知为「卡一下」）。
     想恢复只需取消注释下面这行和 .card:nth-of-type 那几行。 */
  /* animation: fadeUp .45s ease backwards; */
}
/* 卡片入场：依次上浮（同一行内最多 8 张，错落出现）—— v4.70 停用，保留定义备用 */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
/* 停用中：
.card:nth-of-type(1) { animation-delay: .02s; }
.card:nth-of-type(2) { animation-delay: .08s; }
.card:nth-of-type(3) { animation-delay: .14s; }
.card:nth-of-type(4) { animation-delay: .20s; }
.card:nth-of-type(5) { animation-delay: .26s; }
.card:nth-of-type(6) { animation-delay: .32s; }
*/
@media (prefers-reduced-motion: reduce) {
  .card, .app-wrap, .topbar, .side-link.active::after { animation: none !important; }
}
.card-header {
  background: transparent;
  font-weight: 700;
  border-radius: 14px 14px 0 0 !important;
  border-bottom-color: var(--line);
  color: var(--brand-deep);
}

/* 表格：品牌蓝表头 + 行悬停 */
.table td, .table th { vertical-align: middle; }
.table thead th {
  background: var(--brand-50);
  white-space: nowrap;
  color: #0a3c85;
  border-bottom: 1px solid #d7e4f6;
}
.table tbody tr { transition: background .14s ease; }
.table tbody tr:hover { background: #f6faff; }

/* 主按钮：品牌蓝渐变 + 悬停扫光 */
.btn-primary {
  background: linear-gradient(135deg, var(--brand-600), var(--brand));
  border: none;
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-primary);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #1a66cf, #0a4dae);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,64,147,.4);
}
.btn-primary:active { transform: none; }
.btn-primary::after {                /* 扫光层 */
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-20deg);
  transition: left .45s ease;
}
.btn-primary:hover::after { left: 130%; }
.btn-outline-primary { color: var(--brand); border-color: #b9d0ee; }
/* 悬停：品牌蓝实底 + 白字（显式声明 color，避免被表格链接色覆盖而"文字与背景同色"） */
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* 分页 */
.page-link { color: var(--brand); border-radius: 7px; margin: 0 2px; border: none; font-size: 13px; }
.page-link:focus { box-shadow: 0 0 0 3px rgba(0,64,147,.13); }
.page-item.active .page-link {
  background: linear-gradient(135deg, var(--brand-600), var(--brand));
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(0,64,147,.3);
}
.pagination { gap: 2px; }

/* 徽章圆润一点 */
.badge { border-radius: 6px; font-weight: 600; padding: 4px 8px; }

/* 筛选栏 */
.filter-bar .form-label { margin-bottom: 0; }
.filter-bar .form-control, .filter-bar .form-select { min-width: 140px; }

/* ==================== 移动端适配（v4.5 全站；新页面开发也必须兼顾手机端） ==================== */
/* 筛选栏（手机 ≤767px）：两列流式换行，控件占满所在列；操作按钮独占一行 */
@media (max-width: 767.98px) {
  .filter-bar > .col-auto { flex: 1 1 42%; min-width: 42%; }
  .filter-bar > .col-auto:last-child { flex: 1 1 100%; }
  .filter-bar .form-control, .filter-bar .form-select { min-width: 0; width: 100%; }
  .filter-bar > .col-auto:last-child .btn { padding-left: 10px; padding-right: 10px; }
  .filter-bar > .col-auto > .form-label { display: none; }  /* 「至」等文字标签在两列布局下占位浪费，隐藏（日期先后仍可分辨） */
}
/* 顶栏（手机 ≤575px）：收紧留白、缩小标题、隐藏角色小字，给标题留空间 */
@media (max-width: 575.98px) {
  .topbar { padding: 0 10px; gap: 8px; }
  .topbar-title { font-size: 15px; padding-left: 10px; }
  .btn-user small { display: none; }
  .stat-card .stat-num { font-size: 21px; }
  .pagination { justify-content: center; flex-wrap: wrap; }
}
/* 表格（手机）：表头字号收紧，横向滚动由 table-responsive 承担 */
@media (max-width: 767.98px) {
  .table th, .table td { font-size: 12.5px; }
  .table-sm th, .table-sm td { padding: 5px 6px; }
  .btn-sm { padding: 3px 8px; font-size: 12.5px; }
}
/* 弹窗（手机）：占满屏宽减去安全边距 */
@media (max-width: 575.98px) {
  .modal-dialog { max-width: calc(100% - 1rem); margin: .5rem auto; }
  .modal-body { padding: 14px 14px; }
}

/* 统计卡片：顶部品牌蓝渐变条 + 悬浮上浮 */
.stat-card {
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
  overflow: hidden;
}
.stat-card::before {                 /* 顶边装饰条 */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-400));
  opacity: 0;
  transition: opacity .2s ease;
}
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-card-hover);
}
.stat-card:hover::before { opacity: 1; }
.stat-card .stat-num {
  font-size: 26px;
  font-weight: 800;
  color: var(--brand-deep);
  font-variant-numeric: tabular-nums;
}
.stat-card .stat-label { color: var(--ink-3); font-size: 13px; }

/* 简易条形图（月度销售）：品牌蓝渐变填充 + 动画生长 */
.bar-chart .bar-row { display: flex; align-items: center; margin: 6px 0; }
.bar-chart .bar-label { width: 90px; flex: none; color: var(--ink-2); font-size: 13px; }
.bar-chart .bar-track { flex: 1; background: #e9eff8; border-radius: 5px; height: 18px; overflow: hidden; }
.bar-chart .bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-500));
  border-radius: 5px;
  min-width: 2px;
  animation: barGrow .8s ease both;
  transform-origin: left;
}
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.bar-chart .bar-value { width: 110px; flex: none; text-align: right; font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }

/* 库存偏低提醒 */
.stock-low { color: #dc3545; font-weight: 700; }

/* ==================== 登录页（品牌蓝分屏 + 浮动光球） ==================== */
.login-page {
  min-height: 100vh;
  display: flex;
  background: var(--brand-darker);
}
.login-shell {
  flex: 1;
  display: flex;
  min-height: 100vh;
}
/* 左侧品牌区 */
.login-brand {
  flex: 0 0 40%;      /* 左 4 : 右 6 —— 用百分比定宽，避免内容 min-content 把比例带偏 */
  max-width: 40%;
  min-width: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 40% 宽度下不再需要 170px 的大左边距，改为随视口收放，避免正文被挤成一条 */
  padding: 56px clamp(36px, 4vw, 56px) 56px clamp(48px, 6vw, 96px);
  background:
    radial-gradient(900px 480px at 12% -8%, rgba(77,148,240,.4), transparent 62%),
    radial-gradient(700px 500px at 96% 108%, rgba(0,175,255,.22), transparent 60%),
    linear-gradient(160deg, #0a55bd 0%, var(--brand) 48%, var(--brand-darker) 100%);
  color: #fff;
}
.login-orb {                 /* 漂浮光球（slow float 特效） */
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: .5;
  pointer-events: none;
  animation: orbFloat 9s ease-in-out infinite;
}
.login-orb.o1 { width: 190px; height: 190px; top: 10%; right: 12%;
  background: radial-gradient(circle at 32% 30%, rgba(143,195,255,.55), rgba(21,101,216,.08) 70%); }
.login-orb.o2 { width: 110px; height: 110px; bottom: 20%; left: 14%;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.32), rgba(77,148,240,.05) 72%);
  animation-delay: -3s; animation-duration: 11s; }
.login-orb.o3 { width: 60px; height: 60px; top: 58%; right: 30%;
  background: radial-gradient(circle at 36% 32%, rgba(255,255,255,.4), transparent 72%);
  animation-delay: -6s; animation-duration: 8s; }
@keyframes orbFloat {
  0%, 100% { transform: translateY(0) translateX(0); }
  33%      { transform: translateY(-22px) translateX(10px); }
  66%      { transform: translateY(12px) translateX(-14px); }
}
/* 横版 LOGO 源图 555×144（约3.85:1），按宽度缩放避免高度定值导致比例失衡/过小 */
.login-logo { width: min(300px, 72%); height: auto; margin-bottom: 26px; animation: fadeUp .5s ease both; }
.login-brand h1 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 10px;
  animation: fadeUp .55s ease both;
}
.login-brand .login-sub {
  color: rgba(255,255,255,.78);
  font-size: 14.5px;
  letter-spacing: 1px;
  margin-bottom: 34px;
  animation: fadeUp .6s ease both;
}
.login-feats { list-style: none; padding: 0; margin: 0; animation: fadeUp .66s ease both; }
.login-feats li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.85);
  font-size: 13.5px;
  padding: 6px 0;
}
.login-feats li .fi {
  width: 26px; height: 26px;
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  font-size: 13px;
}
/* 右侧表单区 */
.login-panel {
  flex: 1 1 60%;    /* 左 40% : 右 60% */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  /* 左右不留内边距：让下面的板块能按「右栏整宽」的百分比算宽度（80%），
     两边的呼吸感由板块自身的 80% 宽度（各留 10%）来给，不需要再叠 padding */
  padding: 44px 0 56px;      /* 底部留白：给绝对定位的 .login-foot 让位，避免与表单/二维码重叠 */
  position: relative;
  overflow: hidden;          /* 裁掉 ::before 光晕的 right:-80px，否则会撑出横向滚动条 */
}
/* 右栏内部：「登录表单 + 微信扫码」合成一个带边框和底纹的板块
   宽度按内容自适应（不再固定 80%）：表单列固定 330px、不再被 flex 撑开，
   输入框右侧就不会留出一大块空白（用户截图红框标出的地方） */
.login-panel-inner {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  width: min(654px, 100%);   /* 内容自然宽 654（30+330+24+237+30+2，扫码列实际占 237）；窄容器时钳到 100%，
                                配合表单列可收缩，内容只会变窄、绝不溢出边框 */
  padding: 28px 30px;
  background: linear-gradient(180deg, #fbfcfe 0%, #f4f8fd 100%);
  border: 1px solid #e4ecf7;
  border-radius: 18px;
  box-shadow: 0 14px 36px -24px rgba(0, 47, 112, .3);
  position: relative;
  z-index: 1;
}
/* v4.72：没有微信扫码区时（未配置开放平台），板块收窄到「表单 + 内边距」的宽度并居中，
   否则 654px 的框里只放 330px 的表单，右边会空出一大块 */
.login-panel-inner.is-solo {
  width: min(414px, 100%);   /* 414 = 330 表单 + 30×2 内边距 + 1×2 边框 */
}
.login-panel::before {        /* 右侧顶部淡蓝光晕 */
  content: '';
  position: absolute;
  top: -120px; right: -80px;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,64,147,.08), transparent 68%);
  pointer-events: none;
}
/* 表单列：目标 330px、允许收缩（shrink 1）—— 板块被压窄时输入框跟着变窄，
   而不是把文字/输入框挤出板块边框（用户截图反馈的出框问题）。
   ⚠️ 用 width:330px + flex:0 1 auto，不要写成 flex-basis:330px：
   容器若用 fit-content，Chrome 会拿内容固有宽（输入框默认 ~179px）当贡献值，板块会缩错。 */
.login-form-wrap { flex: 0 1 auto; width: 330px; min-width: 0; position: relative; z-index: 1; }
/* 扫码列：与表单同一行，用竖线分隔（窄屏会自动折到表单下方）
   v4.71：开放平台官方二维码需要 214px 宽的方框（微信官方 iframe 160px + 内边距），
   所以列宽从 190 加到 222（214 + 22 左内边距）。 */
.login-wx-col {
  flex: 0 0 222px;   /* 222 = 214 二维码框 + 22 左内边距（border-box） */
  padding-left: 22px;
  border-left: 1px solid #e8eef7;
}
.login-form-title { font-size: 21px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.login-form-sub { color: var(--ink-3); font-size: 13px; margin-bottom: 24px; }
.login-form-wrap .form-control {
  width: 100%;         /* 表单列已按内容收拢到 330px，输入框直接占满（旧版 60% 留白已废弃） */
  height: 44px;
  border-radius: 10px;
  padding-left: 14px;
}
.login-form-wrap .form-label { font-size: 13px; color: var(--ink-2); font-weight: 600; }
/* 按钮与输入框同宽 */
.login-form-wrap .btn-primary { width: 100%; height: 46px; font-size: 15px; letter-spacing: 6px; border-radius: 10px; }
.login-foot {
  position: absolute;
  bottom: 16px; left: 0; right: 0;
  text-align: center;
  color: var(--ink-3);
  font-size: 12px;
}
/* 中等屏：右栏放不下「表单 + 扫码」一行时，扫码折到表单下方并改横向分隔线
   ⚠️ 临界点用 1200 而不是 1024：板块改成右栏 80% 后，1025~1199 这一段
   「表单 + 扫码」并排会把表单压到 230px 左右、输入框只剩 137px，很难用；
   这一段直接上下堆叠、输入框回到 100% 更舒服。 */
@media (max-width: 1200px) {
  .login-panel-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 78%;          /* 折行后按右栏百分比给宽（fit-content 会收缩成最宽子元素，不能用） */
    max-width: 520px;
  }
  /* 纵向排列时 flex-basis 会变成高度，必须把表单列恢复成常规弹性；
     ⚠️ 同时要把 width 也放开 —— 只写 flex:auto 不够：桌面端的 width:330px 还在，
     会把板块的 min-content 撑到 330+内边距，手机上因此冒出横向滚动条 */
  .login-form-wrap { flex: 1 1 auto; width: auto; }
  .login-wx-col {
    flex: none;
    width: 100%;
    margin-top: 22px;
    padding: 22px 0 0;
    border-left: 0;
    border-top: 1px solid #e8eef7;
  }
  /* 折行后表单不再被扫码列挤压，输入框恢复常规宽度更好用 */
  .login-form-wrap .form-control { width: 100%; }
  .login-form-wrap .btn-primary { width: 100%; }
}
/* 窄屏：品牌区改为顶部横幅（logo+标题居中），表单区在下 */
@media (max-width: 860px) {
  .login-shell { flex-direction: column; }
  .login-brand {
    flex: none;
    width: 100%;
    max-width: 100%;        /* 关键：解除桌面端 40% 的宽度上限，否则横幅只有半屏宽 */
    padding: 28px 22px 24px;
    text-align: center;
    align-items: center;
    justify-content: center;
    /* 手机端改用竖向渐变 + 顶部光晕，避免桌面那三团径向光被压扁后显脏 */
    background:
      radial-gradient(360px 200px at 50% -18%, rgba(96, 165, 250, .42), transparent 72%),
      linear-gradient(180deg, #0d5cc6 0%, var(--brand) 52%, var(--brand-darker) 100%);
  }
  .login-logo { width: 156px; margin-bottom: 12px; }
  .login-brand h1 { font-size: 19px; letter-spacing: .5px; margin-bottom: 5px; }
  .login-brand .login-sub { font-size: 12px; margin-bottom: 0; color: rgba(255, 255, 255, .72); }
  .login-feats { display: none; }
  /* 小屏只留一个大光球压角，其余隐藏，避免糊成一团 */
  .login-orb.o2, .login-orb.o3 { display: none; }
  .login-orb.o1 { width: 170px; height: 170px; top: -78px; right: -54px; opacity: .38; }
  .login-panel { background: #fff; padding: 28px 18px 56px; }
  /* 手机上板块改回满宽（此处父级已有 18px 内边距，再按 80% 算会太窄） */
  .login-panel-inner { width: 100%; max-width: 480px; padding: 24px 22px; border-radius: 16px; }
  .login-form-title { font-size: 19px; }
  .login-foot { position: static; padding: 18px 0 0; }
}
/* 超小屏：进一步压缩品牌横幅与板块内边距 */
@media (max-width: 480px) {
  .login-brand { padding: 22px 18px 20px; }
  .login-logo { width: 132px; margin-bottom: 10px; }
  .login-brand h1 { font-size: 17px; }
  .login-brand .login-sub { font-size: 11.5px; }
  .login-panel { padding: 22px 14px 48px; }
  .login-panel-inner { padding: 20px 16px; }
  .login-wx-box { width: 156px; height: 156px; }
  .login-form-wrap .btn-primary { letter-spacing: 3px; }
}
/* ---- 登录页三种登录方式的补充控件（手机验证码 / 账号密码 / 微信扫码） ---- */
.login-hint { margin-top: 8px; font-size: 12px; text-align: center; color: var(--ink-3); }
.login-hint.err { color: #b42318; }
.login-hint.ok { color: #067647; }
.login-switch { margin-top: 12px; text-align: center; }
.login-switch a { font-size: 12.5px; color: var(--ink-2); text-decoration: none; }
.login-switch a:hover { color: var(--brand); }
.login-wx { text-align: center; }
.login-wx-title { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.login-wx-sub { font-size: 12px; color: var(--ink-3); margin-bottom: 12px; }
.login-wx-box {
  width: 168px; height: 168px;   /* 168 = 150(二维码画布) + 8×2 内边距 + 1×2 边框，避免画布溢出边框 */
  margin: 0 auto;
  padding: 8px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 6px 18px -12px rgba(0, 30, 80, .24);
}
.login-wx-box img, .login-wx-box canvas { display: block; }
.login-wx-box.is-off { background: var(--bg); box-shadow: none; color: #b3bccd; }
.login-wx-box.is-off svg { width: 44px; height: 44px; }
.login-wx-tip { margin-top: 10px; font-size: 12px; color: var(--ink-3); line-height: 1.7; }
.login-wx-tip.is-err { color: #b42318; }
.login-wx-tip.is-ok { color: #067647; }
.login-wx-tip.is-muted { color: var(--ink-3); }
.login-wx-actions { margin-top: 6px; font-size: 12px; }
.login-wx-actions a { color: var(--brand); font-weight: 600; text-decoration: none; }
.login-wx-actions a:hover { text-decoration: underline; }

/* ---------- v4.71 开放平台官方内嵌二维码（同 mingzhidao 官网登录页） ----------
   微信官方 iframe：stylelite=1 时二维码 160×160 居中 + 下方一行「微信登录」文字。
   iframe 高度必须够（约 215），否则 overflow:hidden 会把底部文字裁半。
   宽度固定 214：iframe 宽 100% 就是 190（214 - 12×2 内边距），160 的码在其中居中。 */
.login-qr-official {
  box-sizing: border-box;
  width: 214px;
  padding: 18px 12px 10px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px -12px rgba(0, 30, 80, .24);
}
.login-qr-official iframe {
  display: block;
  width: 100% !important;
  height: 215px !important;
  border: none;
}
/* 降级按钮：SDK 加载失败 / 被网络拦截时点它走「跳转授权页」 */
.login-qr-fb {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 214px;
  height: 190px;
  margin: 0 auto;
  border: 1.5px dashed #cfe0d8;
  border-radius: 12px;
  background: #f6fbf8;
  color: #2AAE67;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s, border-color .2s;
}
.login-qr-fb:hover { background: #eefaf3; border-color: #2AAE67; color: #1f8a51; }
.login-qr-fb svg { width: 30px; height: 30px; }
.login-wx-note { margin-top: 8px; font-size: 11.5px; color: var(--ink-3); line-height: 1.7; }
.login-links { margin-top: 18px; text-align: center; font-size: 12.5px; }
.login-links a { color: var(--ink-2); text-decoration: none; }
.login-links a:hover { color: var(--brand); }
.login-links .sep { color: var(--line); margin: 0 6px; }

/* 弹窗微调 */
.modal-content { border-radius: 14px; border: none; box-shadow: 0 18px 50px rgba(0,30,80,.25); }
.modal-header { border-bottom: 1px solid var(--line); }
.modal-footer { border-top: 1px solid var(--line); }

/* ==================== 领用单 / 对账单 打印版式 ==================== */
.print-sheet { background: #fff; }
.print-sheet .sheet-head { text-align: center; margin-bottom: 6px; }
.print-sheet .sheet-title { font-size: 22px; font-weight: 700; letter-spacing: 6px; }
.print-sheet .sheet-sub { color: #6c757d; font-size: 12px; }
.print-sheet .sheet-meta { margin: 10px 0 4px; font-size: 13px; }
.print-sheet table { width: 100%; border-collapse: collapse; font-size: 13px; }
.print-sheet table th, .print-sheet table td { border: 1px solid #444; padding: 6px 8px; text-align: center; }
.print-sheet table thead th { background: #f1f3f7; }
.sign-row { display: flex; gap: 40px; margin-top: 28px; font-size: 14px; }
.sign-row .sign-item { flex: 1; }
.sign-line { display: inline-block; width: 120px; border-bottom: 1px solid #333; height: 16px; }
.amount-cap { font-size: 13px; margin-top: 6px; }
.bill-title { text-align: center; font-size: 22px; font-weight: 700; margin: 10px 0 4px; }

/* 领用单凭证缩略图（辅料领用单详情）：限制尺寸，点击查看原图 */
.voucher-preview {
  display: block;
  max-width: 320px;
  max-height: 320px;
  width: auto;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f6f7fa;
  object-fit: contain;
}
.voucher-preview:hover { box-shadow: 0 4px 14px rgba(0,47,112,.2); }

/* 独立打印页（apply_print.php，body.print-page）：屏幕上也不显示导航，只呈现单据本体 */
body.print-page .sidebar, body.print-page .sidebar-backdrop, body.print-page .topbar { display: none !important; }
body.print-page .main-area { margin-left: 0 !important; }
body.print-page .content { padding: 12px 18px !important; }

/* 打印样式：仅输出单据主体 */
@media print {
  .no-print, .sidebar, .topbar, .sidebar-backdrop, footer, .btn, .form-select, .form-control { display: none !important; }
  body { background: #fff; }
  .main-area { margin-left: 0 !important; }
  .content { padding: 0 !important; }
  .card { border: none; box-shadow: none; animation: none; }
  .print-sheet table th, .print-sheet table td { border-color: #000; }
  .sign-line { border-bottom-color: #000; }
  .report-thumb, .audit-timeline { break-inside: avoid; }
}

/* ==================== v3 组件：主体切换 / 报备详情 / 审核记录 ==================== */

/* 主体切换器（管理员顶栏） */
.entity-switcher .btn-shop-switch {
  background: linear-gradient(135deg, var(--brand-50), var(--brand-100));
  border-color: #c4d8f4;
  color: var(--brand-deep);
  font-weight: 600;
}
.entity-switcher .btn-shop-switch:hover { background: var(--brand-100); color: var(--brand-darker); }

/* 报备详情：图片缩略图 */
.report-thumb {
  width: 100%;
  height: 120px;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform .18s ease, box-shadow .18s ease;
  background: #f6f7fa;
}
.report-thumb:hover { transform: scale(1.03); box-shadow: 0 4px 14px rgba(0,47,112,.2); }

/* v4.6 报备详情：产品主图按 1:1 方形展示（点击由 MBZoom 弹层放大，故不再用 hover 缩放避免溢出） */
.report-thumb-1x1 { height: auto; aspect-ratio: 1 / 1; }
.report-thumb-1x1:hover { transform: none; box-shadow: 0 2px 10px rgba(0,47,112,.16); }

/* v4.39 报备详情：产品主图整体限制在 250×250 以内（含占位块），窄屏仍自适应缩小 */
.report-main-img { width: 100%; max-width: 250px; }
/* v4.39 细节图固定 ≤150×150（与产品主图不同档；保持 1:1 方形，点开放大仍看原图） */
.report-thumb-detail { max-width: 150px; }

/* 报备详情：审核记录时间线（品牌蓝节点） */
.audit-timeline { list-style: none; padding: 0; }
.audit-timeline .audit-item {
  position: relative;
  padding: 8px 0 10px 16px;
  border-left: 2px solid #dfe8f5;
}
.audit-timeline .audit-item:last-child { padding-bottom: 0; }
.audit-timeline .audit-item::before {
  content: '';
  position: absolute;
  left: -6px; top: 12px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--brand-400);
  box-shadow: 0 0 0 3px #fff;
}
.audit-timeline .audit-pass::before { background: #22c55e; }
.audit-timeline .audit-reject::before { background: #ef4444; }
.audit-timeline .audit-head { font-size: 13px; }

/* 领用单凭证预览 */
.voucher-thumb {
  max-width: 220px;
  max-height: 160px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  object-fit: cover;
}

/* 报备类型筛选快捷标签 */
.type-tabs .btn { border-radius: 20px; padding: 2px 14px; font-size: 13px; }
.type-tabs .btn.btn-primary { box-shadow: none; }

/* 卡片区标题计数小字 */
.count-hint { font-size: 12px; }

/* ============================================================
   v4.1 列表页精修：软色徽章 / 表格质感 / 按钮配色统一
   ============================================================ */

/* ---------- 状态徽章：由高饱和实色改为「浅底深字」软色胶囊 ---------- */
.badge {
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  padding: 3.5px 10px 3.5px 8px;
  letter-spacing: .5px;
  line-height: 1.5;
}
.badge::before {                       /* 状态圆点，一眼识别 */
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: 1px;
  background: currentColor;
}
/* 待审核 / 待发放 / 待确认 —— 琥珀 */
.badge.bg-warning, .badge.bg-warning.text-dark {
  background: #fff6df !important;
  color: #a16200 !important;
  border: 1px solid #f5dfa8;
}
.badge.bg-warning::before { animation: badgePulse 2.2s ease-in-out infinite; }
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217,119,6,.35); }
  50%      { box-shadow: 0 0 0 3.5px rgba(217,119,6,0); }
}
/* 审核通过 / 已领用 / 已确认 —— 翠绿 */
.badge.bg-success {
  background: #e4f6eb !important;
  color: #15803d !important;
  border: 1px solid #bce6cc;
}
/* 驳回 / 异常 —— 珊瑚红 */
.badge.bg-danger {
  background: #fdeceb !important;
  color: #d14343 !important;
  border: 1px solid #f6c8c4;
}
/* 已发放 / 进行中 / 待样品审核 —— 品牌蓝 */
.badge.bg-primary {
  background: var(--brand-50) !important;
  color: var(--brand) !important;
  border: 1px solid #c8dcf7;
}
/* 待寄样 / 流程进行中 —— 青蓝 */
.badge.bg-info {
  background: #e5f4fb !important;
  color: #0b6b8f !important;
  border: 1px solid #b8dff0;
}
/* 未知 / 已作废 —— 中性灰 */
.badge.bg-secondary {
  background: #eef1f6 !important;
  color: #64748b !important;
  border: 1px solid #dde3ec;
}
@media (prefers-reduced-motion: reduce) {
  .badge.bg-warning::before { animation: none !important; }
}

/* ---------- 表格质感 ---------- */
.table { --bs-table-border-color: #edf2f9; margin-bottom: 0; }
.table:not(.print-sheet table) thead th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 9px 12px;
}
.table:not(.print-sheet table) tbody td {
  padding: 9px 12px;
  font-size: 13.5px;
  color: #23324d;
  border-bottom-color: #eef2f9;
}
.table tbody tr:last-child td { border-bottom: none; }
/* 表格内链接（单号等）：品牌蓝 + 悬停下划线
   注意：必须排除 .btn —— 否则下面的链接色会盖掉 btn-outline-* 悬停时的白字，
   表现为「详情/审核」按钮悬停后深蓝底 + 深蓝字、文字与背景混为一体 */
.table td a:not(.btn), .card-body td a:not(.btn) {
  color: var(--brand-500);
  font-weight: 600;
  text-decoration: none;
}
.table td a:not(.btn):hover, .card-body td a:not(.btn):hover {
  color: var(--brand-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* 表格内按钮型链接：保持自身配色，不参与上面的链接样式 */
.table td a.btn { text-decoration: none; }
/* 卡片标题右侧「更多 »」 */
.card-header a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
  transition: color .15s ease;
}
.card-header a:hover { color: var(--brand-500); }
/* 空数据行 */
.table td.text-center.text-muted { color: var(--ink-3) !important; letter-spacing: 1px; }

/* ---------- 销售明细宽表格（sales.php，15 列）----------
   列数多，容器一窄 Bootstrap 的 width:100% 会把每列压到几十像素，
   店铺名、金额全被折成竖排单字，页面很难看。
   做法：单元格一律不折行（单行行高稳定），表格按内容取宽，
   容器不够宽时交给 .table-responsive 横向滚动；
   首列「店铺」加宽并吸在左侧，横向滚动时始终知道看的是哪家店。
   ⚠️ 选择器统一用 `.table.sales-table ... tr ...` 提高优先级：
   文件前面的 `.table:not(.print-sheet table) thead th / tbody td`（0,2,3）
   会盖掉普通 `.sales-table td`（0,1,1）的 padding 与字号。 */
.table.sales-table { min-width: 1120px; }
.table.sales-table thead tr th,
.table.sales-table tbody tr td { white-space: nowrap; padding-left: 7px; padding-right: 7px; }
.table.sales-table tbody tr td { font-size: 13px; }
/* 备注列允许折行，但必须给下限 —— 否则自动布局会把它压到 38px，整行被撑成好几行高 */
.table.sales-table thead tr th:nth-child(15),
.table.sales-table tbody tr td:nth-child(15) { white-space: normal; min-width: 150px; }
/* 空数据整行提示不参与 nowrap */
.table.sales-table tbody tr td[colspan] { white-space: normal; }
/* 首列「店铺」：加宽 + 横向滚动时吸左 */
.table.sales-table thead tr th:first-child,
.table.sales-table tbody tr td:first-child {
  position: sticky;
  left: 0;
  min-width: 168px;
  max-width: 230px;
  white-space: normal;
  background: #fff;
  box-shadow: 1px 0 0 #edf2f9;
}
.table.sales-table thead tr th:first-child { background: var(--brand-50); z-index: 3; }
.table.sales-table tbody tr td:first-child { z-index: 2; }
.table.sales-table tbody tr:hover td:first-child { background: #f6faff; }
@media (max-width: 767.98px) {
  .table.sales-table { min-width: 1000px; }                /* 手机上略微收窄，仍保持单行可读 */
  .table.sales-table thead tr th:first-child,
  .table.sales-table tbody tr td:first-child { min-width: 140px; max-width: 180px; }
}

/* ---------- 按钮配色统一到品牌体系 ---------- */
.btn { border-radius: 8px; font-weight: 600; }
.btn-sm { border-radius: 7px; }
/* 次级/重置/取消：蓝灰调，不再纯灰 */
.btn-outline-secondary {
  color: #51617d;
  border-color: #d4dcea;
  background: #fff;
  transition: all .15s ease;
}
.btn-outline-secondary:hover {
  color: var(--brand-deep);
  border-color: #a9c4ec;
  background: var(--brand-50);
}
/* 通过 / 确认对账：翠绿实心（保留语义色，改为柔和渐变） */
.btn-success {
  background: linear-gradient(135deg, #22a56b, #178a56);
  border: none;
  box-shadow: 0 3px 10px rgba(23,138,86,.28);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-success:hover {
  background: linear-gradient(135deg, #1e9762, #147a4c);
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(23,138,86,.36);
}
.btn-success:active { transform: none; }
.btn-outline-success { color: #178a56; border-color: #b3e0c8; }
.btn-outline-success:hover { background: #e4f6eb; border-color: #178a56; color: #11663f; }
/* 驳回 / 作废 / 删除：珊瑚红轮廓 */
.btn-outline-danger { color: #d14343; border-color: #f0b9b4; }
.btn-outline-danger:hover { background: #fdeceb; border-color: #d14343; color: #b03232; }
/* 停用（琥珀轮廓） */
.btn-outline-warning { color: #a16200; border-color: #ecd9a4; }
.btn-outline-warning:hover { background: #fff6df; border-color: #d97706; color: #8a5200; }
/* 待办强调（去寄样等）：柔和琥珀实心 */
.btn-warning {
  background: linear-gradient(135deg, #f7c14a, #e8a41c);
  border: none;
  color: #52380a;
  box-shadow: 0 3px 10px rgba(217,119,6,.24);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-warning:hover {
  background: linear-gradient(135deg, #f0b73a, #d9960f);
  color: #3d2a04;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(217,119,6,.32);
}
.btn-warning:active { transform: none; }
/* 表格行内小操作按钮（py-0 px-1）呼吸感 */
.table .btn.py-0 { padding-top: 2px !important; padding-bottom: 2px !important; }
.table .btn.py-0.px-1 { padding-left: 7px !important; padding-right: 7px !important; }

/* ---------- 表格「操作」列的按钮组（v4.21） ---------- */
/* 背景：轮廓按钮（btn-outline-*）自带 1px 边框，而实心按钮（btn-success / btn-warning 等）是 border:none，
   同一行并排时会相差 2px；再叠加历史遗留的 mt-1 垂直错位，看起来"高度不一样"。
   做法：外层 flex 拉伸对齐 → 同一行按钮等高；内层 inline-flex 居中 → 文字垂直居中；
   间距统一由 gap 控制，不再依赖 mt-1（各页面的 mt-1 已移除）。 */
.act-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 4px;
  line-height: 1;
}
.act-btns > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;          /* 压掉遗留的 mt-1 / mb-* 外间距 */
  white-space: nowrap;
}
/* 操作列里「表单包着的按钮」（如作废 / 确认领用）也要拉平：
   form 作为 flex 项拉伸到行高，内部按钮再撑满，避免与旁边的 <a> 差 2px 或换行 */
.act-btns > form {
  display: inline-flex;
  align-items: stretch;
  margin: 0 !important;
}
.act-btns > form > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  white-space: nowrap;
}
/* 窄列（表格自动布局会把操作列压到最窄）下保持单行，让列宽按 min-content 撑开 */
.act-btns.nowrap { flex-wrap: nowrap; }

/* ---------- 报备类型标签（产品/辅料）：专属 tag 样式 ---------- */
/* 类型是"分类"不是"状态"：不带状态圆点、小圆角、浅底描边，与状态徽章区分 */
.badge.badge-type::before { display: none; }
.badge.badge-type {
  border-radius: 6px;
  font-weight: 700;
  padding: 3px 10px;
  letter-spacing: 1px;
}
.badge.badge-type.t-product {          /* 产品 —— 品牌蓝 */
  background: #e8f0fc;
  color: var(--brand);
  border: 1px solid #c6daf6;
}
.badge.badge-type.t-material {         /* 辅料 —— 青碧 */
  background: #e1f5f2;
  color: #0f766e;
  border: 1px solid #b2e2db;
}
/* v3.7 供应商状态标签：待审核（琥珀）/ 已驳回（玫红） */
.badge.badge-type.t-warn {             /* 待审核 —— 琥珀 */
  background: #fdf3e2;
  color: #b45309;
  border: 1px solid #f6dcb0;
}
.badge.badge-type.t-danger {           /* 已驳回 —— 玫红 */
  background: #fdecef;
  color: #be123c;
  border: 1px solid #f7ccd6;
}
/* v4.0 供应商/订单/送货/账单状态标签补充 */
.badge.badge-type.t-success {          /* 已完成 / 已签收 / 已结算 —— 草绿 */
  background: #e7f6ea;
  color: #15803d;
  border: 1px solid #bde5c8;
}
.badge.badge-type.t-info {             /* 进行中 / 在途 —— 天青 */
  background: #e6f4fd;
  color: #0369a1;
  border: 1px solid #bae0f8;
}
.badge.badge-type.t-neutral {          /* 草稿 / 已作废 —— 石灰 */
  background: #f1f3f5;
  color: #64748b;
  border: 1px solid #dde3ea;
}
.badge.badge-type.t-purple {           /* 供应商相关 —— 紫罗兰 */
  background: #f1ecfd;
  color: #6d3fd4;
  border: 1px solid #dbcdf7;
}

/* ============================================================
   v3.5 报备流程进度条（提交 → 初审 → 寄样 → 样品审核 → 完成）
   ============================================================ */
.flow-steps { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.flow-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 6px;
  border-radius: 20px;
  background: #f4f7fb;
  border: 1px solid #e3eaf5;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 600;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.flow-step:not(:last-child)::after {          /* 步骤之间的连接线 */
  content: '';
  position: absolute;
  right: -10px; top: 50%;
  width: 10px; height: 2px;
  background: #dbe4f0;
  transform: translateY(-50%);
}
.flow-dot {
  width: 22px; height: 22px;
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #e2e9f4;
  color: #8595ae;
  font-size: 11px;
  font-weight: 800;
}
.flow-step.is-done { background: #e4f6eb; border-color: #bce6cc; color: #15803d; }
.flow-step.is-done .flow-dot { background: #22a56b; color: #fff; }
.flow-step.is-current {
  background: var(--brand-50);
  border-color: #bcd2ef;
  color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0,64,147,.09);
}
.flow-step.is-current .flow-dot { background: var(--brand); color: #fff; animation: badgePulse 2.2s ease-in-out infinite; }
.flow-step.is-reject { background: #fdeceb; border-color: #f6c8c4; color: #d14343; }
.flow-step.is-reject .flow-dot { background: #d14343; color: #fff; }
.flow-tip {
  font-size: 13px;
  color: var(--ink-2);
  background: var(--brand-50);
  border-left: 3px solid var(--brand-400);
  border-radius: 0 8px 8px 0;
  padding: 7px 12px;
}
@media (prefers-reduced-motion: reduce) {
  .flow-step.is-current .flow-dot { animation: none !important; }
}
@media print { .flow-steps, .flow-tip { display: none !important; } }

/* ==================== v4.4 图片上传控件（点击/拖拽/粘贴/批量） ==================== */
.up-box { position: relative; }
/* 原生 file input 仍留在表单内参与提交，仅视觉隐藏（不用 display:none，避免部分浏览器异常） */
.up-native {
  position: absolute !important;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
  overflow: hidden;
}
.up-drop {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 1.5px dashed #c3d4ee;
  border-radius: 12px;
  background: linear-gradient(180deg, #f9fbff, #f2f7fe);
  cursor: pointer;
  user-select: none;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.up-drop:hover { border-color: var(--brand-400); background: var(--brand-50); }
.up-drop.is-drag {                      /* 拖拽悬停高亮 */
  border-color: var(--brand);
  border-style: solid;
  background: var(--brand-100);
  box-shadow: 0 0 0 4px rgba(0,64,147,.10);
  transform: translateY(-1px);
}
.up-ico {
  width: 38px; height: 38px;
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-600), var(--brand));
  color: #fff;
  box-shadow: 0 3px 10px rgba(0,64,147,.25);
}
.up-ico svg { width: 19px; height: 19px; }
.up-txt { font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.up-txt b { color: var(--brand); font-weight: 700; }
.up-txt .up-kbd {
  display: inline-block;
  padding: 0 5px;
  margin: 0 1px;
  border: 1px solid #cfdcee;
  border-bottom-width: 2px;
  border-radius: 4px;
  background: #fff;
  font-size: 11px;
  color: var(--ink-2);
}
.up-txt .up-sub { display: block; font-size: 11.5px; color: var(--ink-3); }
.up-count { margin-left: auto; flex: none; font-size: 12px; font-weight: 700; color: var(--brand); }
/* 缩略图列表 */
.up-list { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 11px; }
.up-list:empty { display: none; }
.up-item { position: relative; width: 74px; }
.up-item img {
  width: 74px; height: 74px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #dbe5f3;
  background: #f5f8fd;
  box-shadow: 0 2px 6px rgba(0,47,112,.08);
  transition: transform .16s ease, box-shadow .16s ease;
}
.up-item:hover img { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,47,112,.16); }
/* v4.63：PDF 等非图片文件的缩略位（尺寸与 .up-item img 对齐，避免破图） */
.up-item .up-fileico {
  display: flex; align-items: center; justify-content: center;
  width: 74px; height: 74px;
  border-radius: 10px;
  border: 1px solid #dbe5f3;
  background: #fff5f5;
  color: #d14343;
  box-shadow: 0 2px 6px rgba(0,47,112,.08);
  transition: transform .16s ease, box-shadow .16s ease;
}
.up-item .up-fileico svg { width: 26px; height: 26px; }
.up-item:hover .up-fileico { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,47,112,.16); }
.up-item .up-name {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--ink-3);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.up-del {
  position: absolute;
  top: -6px; right: -6px;
  width: 20px; height: 20px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #d14343;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  box-shadow: 0 1px 5px rgba(0,30,80,.22);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.up-del:hover { background: #d14343; color: #fff; transform: scale(1.08); }
.up-err { margin-top: 6px; font-size: 12px; color: #d14343; }
@media print { .up-drop, .up-list, .up-err { display: none !important; } }

/* ============================================================
   v3.12 短信发送记录：小字号 + 限制在一屏内 + 悬停看接口返回
   ============================================================ */
.table.sms-log { font-size: 12px; }
.table.sms-log thead th {
  font-size: 11px;
  letter-spacing: .5px;
  padding: 7px 9px;
  position: sticky;                     /* 滚动区表头吸顶，长列表也不丢表头 */
  top: 0;
  z-index: 2;
  background: #f7f9fd;
}
.table.sms-log tbody td { font-size: 12px; padding: 6px 9px; }
/* 记录区高度收敛到「一屏左右」，超出在卡片内部滚动 */
.sms-log-wrap { max-height: 56vh; overflow-y: auto; }
/* 悬停可看的徽章（接口返回等）：给出「可悬停」的鼠标提示 */
.badge[data-bs-toggle="tooltip"] { cursor: help; }
/* 长内容 tooltip（接口返回 JSON）左对齐、放宽宽度，便于逐行阅读 */
.tooltip-inner {
  max-width: 420px;
  text-align: left;
  font-size: 12px;
  line-height: 1.6;
  word-break: break-all;
}

/* ============================================================
   v3.12 登录页 · 微信扫码登录
   ============================================================ */
.wx-qr-wrap { margin-top: 22px; text-align: center; }
.wx-qr-divider { position: relative; margin-bottom: 16px; color: var(--ink-3); font-size: 12px; }
.wx-qr-divider::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: #e6ecf5;
}
.wx-qr-divider span {
  position: relative;                 /* 压在分隔线上，用底色「断开」线条 */
  display: inline-block;
  padding: 0 10px;
  background: #fff;
}
.wx-qr-head { font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 10px; }
.wx-qr-box {
  width: 182px; height: 182px;        /* 164 二维码 + 8*2 内边距 + 1*2 边框 */
  margin: 0 auto;
  padding: 8px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e3eaf5;
  box-shadow: 0 4px 14px rgba(0,47,112,.06);
}
.wx-qr-box img, .wx-qr-box canvas { display: block; }
.wx-qr-tip { margin-top: 9px; font-size: 12px; color: var(--ink-3); }
.wx-qr-tip.is-err { color: #d14343; }
.wx-qr-tip.is-ok { color: #15803d; }
.wx-qr-actions { margin-top: 6px; font-size: 12px; }
.wx-qr-actions a { color: var(--brand); text-decoration: none; font-weight: 600; }
.wx-qr-actions a:hover { text-decoration: underline; }

/* ============================================================
   v3.12 邮件设置 · 保存结果核对区（回显数据库实际值）
   ============================================================ */
.mail-saved-box {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--brand-50);
  border: 1px solid #dbe7f8;
  font-size: 12px;
  color: #45566f;
  line-height: 1.9;
}
.mail-saved-title { font-weight: 700; color: var(--brand); margin-bottom: 6px; }
.mail-saved-box span { color: var(--ink-3); }
.mail-saved-box b { color: #23324d; font-weight: 600; word-break: break-all; }
.mail-saved-tip {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #cfe0f5;
  color: var(--ink-3);
  line-height: 1.6;
}

/* ============================================================
   v3.12 弹窗就地填充（MBModal，见 footer.php）
   目的：点「编辑」不跳转页面，直接把该行数据填进弹窗并弹出。
   本文件无需额外样式——复用 Bootstrap 原生 modal 样式。
   ============================================================ */

/* ============================================================
   移动端表格卡片模式（v4.5，配合 footer.php 转换脚本）
   ≤767px 时把列表表格转换为卡片：标题行 + 字段行 + 操作按钮行；
   单元格里只有图片时自动作为卡片右侧图片块（见用户卡片模板）。
   单据/打印类表格加 class="sheet-table" 或容器加 .mcard-skip 即排除。
   ============================================================ */
table.mcard-hidden { display: none !important; }
.mcard-wrap { display: none; }
@media (max-width: 767.98px) {
  .mcard-wrap { display: block; }
  .mcard {
    background: #fff;
    border: 1px solid #e3e9f2;
    border-radius: 12px;
    padding: 12px 14px;
    margin: 0 0 10px;
    box-shadow: 0 1px 3px rgba(30, 50, 90, .05);
  }
  .mcard-flex { display: flex; gap: 12px; align-items: flex-start; }
  .mcard-main { flex: 1; min-width: 0; }
  .mcard-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 5px; }
  .mcard-title { font-weight: 600; font-size: 14.5px; color: #1f2d3d; flex: 1; min-width: 0; word-break: break-all; }
  .mcard-title a { color: var(--brand-600, #3f6ad8); text-decoration: none; }
  .mcard-media { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; border: 1px solid #e3e9f2; flex: none; }
  .mcard-row {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 3.5px 0; font-size: 13px; line-height: 1.5;
    border-bottom: 1px dashed #eef2f8;
  }
  .mcard-row:last-child { border-bottom: 0; }
  .mcard-label { color: #8a97a8; flex: none; max-width: 42%; }
  .mcard-val { text-align: right; min-width: 0; word-break: break-all; }
  .mcard-actions {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 8px; padding-top: 8px; border-top: 1px solid #eef2f8;
  }
  .mcard-actions .btn { padding: 2px 10px; font-size: 12.5px; }
  .mcard-sum { background: #f6f8fc; font-size: 12.5px; color: #5a6a80; box-shadow: none; }
  .mcard-empty { text-align: center; padding: 18px 0; }
}
  .mcard-title .mcard-sub { font-weight: 400; color: #8a97a8; font-size: 12.5px; margin-left: 6px; }

/* ============================================================
   新增报备：产品参数子表（v4.5.2）
   手机端（≤575px）把每行堆叠为独立块，避免 4 列挤在一起难以填写。
   ============================================================ */
.pr-param-table td .form-control { min-width: 0; }
@media (max-width: 575.98px) {
  .pr-param-table thead { display: none; }
  .pr-param-table, .pr-param-table tbody, .pr-param-table tr, .pr-param-table td { display: block; width: 100%; }
  .pr-param-table tr { border: 1px solid #e3e9f2; border-radius: 10px; padding: 6px 10px; margin-bottom: 8px; }
  .pr-param-table td { border: 0; padding: 3px 0; }
  .pr-param-table td.pr-param-act { text-align: right; padding-top: 2px; }
  .pr-param-table td.pr-param-act .btn { padding: 1px 12px; }
}

/* ============================================================
   可搜索下拉框 MSel（v4.6）
   单控件形态：输入框本身就是下拉框——聚焦即展开全部选项，
   直接在框内输入关键字就地筛选，点选项或回车即选定。
   浮层挂在 body 下（position:fixed），避免被 .table-responsive 裁剪。
   ============================================================ */
.msel { position: relative; }
.msel-input {
  padding-right: 26px;
  cursor: pointer;
  text-overflow: ellipsis;
}
.msel-input:focus { cursor: text; }
.msel-caret {
  position: absolute;
  right: 7px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  pointer-events: none;
  color: var(--ink-3);
  transition: transform .16s ease;
}
.msel.is-open .msel-caret { transform: rotate(180deg); }
.msel-caret svg { width: 14px; height: 14px; display: block; }
/* 浮层（挂在 body 下） */
.msel-panel {
  position: fixed;
  z-index: 1080;
  background: #fff;
  border: 1px solid #d9e1ee;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,47,112,.14);
  padding: 4px;
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.msel-opt {
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  line-height: 1.5;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msel-opt.is-active { background: var(--brand-50); }
.msel-opt.is-sel { color: var(--brand); font-weight: 600; }
.msel-opt.is-sel.is-active { background: var(--brand-100); }
.msel-none {
  padding: 8px 10px;
  color: var(--ink-3);
  font-size: 13px;
  text-align: center;
}

/* ============================================================
   辅料商城（v4.13）：电商化选购 + 购物车
   卡片媒体区固定 1:1（与报备详情页图片口径一致）
   ============================================================ */
.shop-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.shop-card:hover { box-shadow: var(--sh-card-hover); transform: translateY(-2px); }
.shop-media { position: relative; background: linear-gradient(135deg, var(--brand-50), #fff); }
.shop-media-link { display: block; color: inherit; text-decoration: none; }
.shop-name-link { color: inherit; text-decoration: none; }
.shop-name-link:hover { color: var(--brand); }
.shop-img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--brand-50);
}
.shop-img-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-400);
  font-size: 34px;
  font-weight: 700;
}
.shop-flag {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  color: #fff;
}
.shop-flag-out { background: #94a3b8; }
.shop-flag-low { background: #f59e0b; }
.shop-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 1.4em;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.shop-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.shop-tag {
  padding: 0 5px;
  border: 1px solid var(--brand-100);
  border-radius: 4px;
  background: var(--brand-50);
  color: var(--brand);
  font-size: 11px;
  line-height: 18px;
  white-space: nowrap;
}
/* v4.19：分类 / 材质标签与辅料名称排在同一行，标签在前；
   标签保持原宽度不参与收缩（名称过长时由名称让位截断为两行），
   仅当标签本身就宽过整行（极端长分类名）才裁切，避免撑破卡片 */
.shop-name-row { display: flex; align-items: flex-start; gap: 5px; }
.shop-name-row .shop-tags { flex: 0 0 auto; min-width: 0; max-width: 100%; flex-wrap: nowrap; margin-top: 0; overflow: hidden; }
.shop-name-row .shop-name { flex: 1 1 auto; min-width: 0; }
.shop-spec { margin-top: 2px; line-height: 1.35; }
.shop-spec-more { margin-left: 4px; font-size: 11px; color: var(--ink-3); }
.shop-price { color: #d32029; font-size: 19px; font-weight: 700; line-height: 1.2; }
.shop-price-inline { color: #d32029; }
.shop-unit { margin-left: 2px; font-size: 12px; font-weight: 400; color: var(--ink-3); }
.shop-num { width: 60px; flex: 0 0 auto; }
.cart-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  padding: 3px 6px;
  border-radius: 999px;
  background: #d32029;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.cart-thumb {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--brand-50);
  object-fit: cover;
}
.cart-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-400);
  font-size: 20px;
  font-weight: 700;
}
@media (max-width: 575.98px) {
  .shop-name { font-size: 13px; }
  .shop-price { font-size: 16px; }
  .shop-num { width: 48px; }
  .shop-buy .btn { padding-left: 6px; padding-right: 6px; font-size: 12px; }
  .cart-thumb { width: 44px; height: 44px; }
}

/* ============================================================
   辅料商城（v4.14）
   1) 一排 5 列：xxl 断点下卡片变窄，加购行改用紧凑尺寸
   2) 购物车入口固定右下角（悬浮按钮）
   ============================================================ */
.shop-buy { flex-wrap: nowrap; }
@media (min-width: 1200px) {
  .row-cols-xl-5 > .col .shop-num { width: 46px; }
  .row-cols-xl-5 > .col .shop-buy .btn { padding-left: 6px; padding-right: 6px; font-size: 12px; }
  .row-cols-xl-5 > .col .shop-name { font-size: 14px; }
}

.cart-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1040;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(0, 64, 147, .32);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.cart-fab:hover,
.cart-fab:focus {
  background: var(--brand-600);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 64, 147, .4);
}
.cart-fab .nav-ico { width: 18px; height: 18px; }
.cart-fab-badge {
  position: absolute;
  top: -6px;
  right: -4px;
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #d32029;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
@media (max-width: 575.98px) {
  .cart-fab { right: 14px; bottom: 14px; padding: 9px 14px; font-size: 13px; }
}

/* ============================================================
  左侧竖列菜单（card + list-group）
  - 辅料商城（v4.16）：material.php 左侧辅料分类
  - 也在用：material.php 商城分类、sales.php 左侧「店铺」（v4.33，菜单项 = 店铺名称）
  - v4.35 起：shop_manage.php 左侧「合作主体」、entity_manage.php 原 v4.34 的同类菜单已迁走
  与 user_manage.php「角色大类」菜单同款；
  桌面端吸顶跟随滚动，窄屏收成可滚动的竖列表
   ============================================================ */
.shop-cate-card .card-header { border-bottom: 1px solid var(--line); font-size: 14px; }
.shop-cate-card .list-group-item {
  padding: 7px 12px;
  font-size: 13.5px;
  color: var(--ink-2);
  border-color: var(--line);
}
.shop-cate-card .list-group-item:hover { background: var(--brand-50); color: var(--brand); }
.shop-cate-card .list-group-item.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.shop-cate-card .shop-cate-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shop-cate-card .list-group-item .badge { flex: none; margin-left: 6px; font-weight: 600; }
.shop-cate-card .list-group-item.active .badge { background: rgba(255,255,255,.92) !important; color: var(--brand) !important; }
.shop-cate-card .card-body { border-top: 1px solid var(--line); }
@media (min-width: 768px) {
  .shop-cate-card { position: sticky; top: calc(var(--topbar-h) + 14px); }
}
@media (max-width: 767.98px) {
  .shop-cate-card .list-group { max-height: 216px; overflow-y: auto; }
}

/* ============================================================
  辅料商城（v4.17）：搜索栏放大美化
  只作用于 material.php 的筛选条（.shop-filter），
  其它页面沿用 .filter-bar 的紧凑规格，互不影响
   ============================================================ */
.shop-filter .form-control,
.shop-filter .form-select { height: 40px; font-size: 14px; border-radius: 10px; }
.shop-filter .form-select { padding-right: 32px; }
/* 输入框内置放大镜（图标绝对定位 + 文本左内边距让位） */
.shop-search-box { position: relative; }
.shop-search-box .shop-search-ico {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: #9fb0c8;
  pointer-events: none;
  transition: color .15s ease;
}
.shop-search-box .form-control { padding-left: 35px; background: #fbfdff; }
.shop-search-box .form-control:focus { background: #fff; }
.shop-search-box:focus-within .shop-search-ico { color: var(--brand); }
/* 主搜索按钮：品牌蓝渐变（沿用 .btn-primary）+ 放大到 40px 高 */
.shop-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 22px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
}
.shop-search-btn svg { width: 17px; height: 17px; flex: none; }
.shop-search-btn > * { position: relative; z-index: 1; }   /* 压住 .btn-primary 的扫光层 */
.shop-reset-btn {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--ink-2);
  border-color: #d9e1ee;
  background: #fff;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.shop-reset-btn:hover,
.shop-reset-btn:focus {
  background: var(--brand-50);
  border-color: #bcd2ef;
  color: var(--brand-deep);
  box-shadow: 0 2px 8px rgba(0,64,147,.12);
}
@media (min-width: 768px) {
  .shop-search-box .form-control { min-width: 260px; }   /* 商品搜索框给足宽度 */
}
@media (max-width: 767.98px) {
  .shop-filter .form-control, .shop-filter .form-select { height: 38px; }
  .shop-filter > .col-auto:last-child { display: flex; gap: 8px; }   /* 手机：搜索按钮拉满，重置跟在其右 */
  .shop-search-btn, .shop-reset-btn { height: 38px; justify-content: center; }
  .shop-search-btn { flex: 1 1 auto; }
  .shop-reset-btn { flex: 0 0 auto; }
}

/* ============================================================
  辅料商城（v4.15）：辅料详情页 电商商品页
  左侧图集 + 右侧信息卡（标题 / 价格 / 规格选择 / 数量 / 加购）
   ============================================================ */
.product-gallery { position: sticky; top: 12px; }
/* 主图框：固定高度 + object-fit:contain，任何比例的图片都完整显示在框内（不裁切、不溢出） */
.product-main-img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 420px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.product-main-img img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.product-main-img-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 420px;
  background: linear-gradient(135deg, var(--brand-50), #fff);
  color: var(--brand-400);
  font-size: 64px;
  font-weight: 700;
}
.product-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.product-thumbs img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s ease;
}
.product-thumbs img:hover { border-color: var(--brand); }

.product-info-card { padding: 4px 2px; }
.product-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}
.product-price {
  color: #d32029;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
}
.product-price .product-unit { margin-left: 4px; font-size: 14px; font-weight: 400; color: var(--ink-3); }
.product-stock { margin-top: 4px; }

.spec-selector { margin-top: 16px; }
.spec-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.spec-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.spec-btn:hover { border-color: var(--brand); color: var(--brand); }
.spec-btn.active {
  border-color: var(--brand);
  background: var(--brand-50);
  color: var(--brand);
  font-weight: 600;
}
.spec-btn .spec-price { font-size: 12px; color: var(--ink-3); }
.spec-btn.active .spec-price { color: var(--brand); }

.quantity-row { margin-top: 16px; }
.product-actions { border-top: 1px solid var(--line); padding-top: 14px; }

@media (max-width: 991.98px) {
  .product-gallery { position: static; }
  .product-main-img,
  .product-main-img-empty { height: 300px; }
  .product-title { font-size: 18px; }
  .product-price { font-size: 24px; }
}

/* ============================================================
  v4.46：渠道分段切换器（setting.php?tab=notify 的 短信 / 微信公众号 / 邮件 子页）
  为什么不用 Bootstrap 的 nav-pills：默认药丸是裸蓝底 + 直角渐变小圆角，
  还把 success/warning 徽章塞在选中项里（蓝底配绿徽章很撞），
  与本站品牌色板（--brand #004093）和卡片圆角（14px）都不搭。
  这里改成一个整体的「分段控件」：白底外框包住，选中项实心品牌蓝；
  配置状态由徽章改为圆点（绿=已配置 / 琥珀=未配置），选中项加白圈保证在蓝底上仍可辨，
  状态文字保留在 .visually-hidden 里给读屏器。
   ============================================================ */
.ch-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 4px;
  margin-bottom: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--sh-card);
  overflow-x: auto;                  /* 窄屏横向滑动，不换行、不挤压文字 */
  scrollbar-width: none;
}
.ch-switch::-webkit-scrollbar { display: none; }
.ch-switch-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 9px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.ch-switch-item svg { width: 16px; height: 16px; flex: none; }
.ch-switch-item:hover { background: var(--brand-50); color: var(--brand); }
.ch-switch-item.active { background: var(--brand); color: #fff; box-shadow: var(--sh-primary); }
.ch-switch-item.active:hover { background: var(--brand-deep); color: #fff; }
.ch-switch-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #e0a12c;               /* 未配置 */
}
.ch-switch-dot.ok { background: #23a06b; }   /* 已配置 */
.ch-switch-item.active .ch-switch-dot { box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
@media (max-width: 575.98px) {
  .ch-switch-item { padding: 8px 11px; font-size: 13.5px; }
}

/* ==================== 销售报表（v4.59，sales_report.php） ==================== */
/* 模块页签：销售明细 / 销售报表（inc/sales_tabs.php） */
.page-tabs { border-bottom: 1px solid #dbe4f2; margin-top: -2px; }
.page-tabs .nav-link {
  color: var(--ink-2); font-size: 14px; font-weight: 600;
  padding: 7px 16px; border: 1px solid transparent; border-bottom: 2px solid transparent;
  border-radius: 8px 8px 0 0;
}
.page-tabs .nav-link:hover { color: var(--brand); background: rgba(0, 64, 147, .05); }
.page-tabs .nav-link.active {
  color: var(--brand); background: #fff;
  border-color: #dbe4f2 #dbe4f2 #fff; margin-bottom: -1px;
}
/* 图表：服务端渲染 SVG，宽度自适应、等比缩放 */
.rep-svg { width: 100%; height: auto; display: block; }
.rep-donut { max-width: 190px; margin: 0 auto; }
/* 环形图右侧图例 */
.rep-legend-item { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 3px 0; }
.rep-dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.rep-legend-name {
  flex: 1; min-width: 0; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rep-legend-val { font-variant-numeric: tabular-nums; color: #24324a; font-weight: 600; }
/* 趋势图图例小色块（柱 / 线） */
.rep-key {
  display: inline-block; width: 12px; height: 8px; border-radius: 2px; vertical-align: middle;
  background: linear-gradient(180deg, #4d94f0, #0a55bd); margin-right: 3px;
}
.rep-key-line { width: 14px; height: 3px; border-radius: 2px; background: #f0932b; }
/* 排行横条（店铺排行 / 主体对比） */
.rep-rank { display: flex; align-items: center; gap: 8px; margin: 7px 0; }
.rep-rank-name {
  width: 168px; flex: none; font-size: 13px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rep-rank-track { flex: 1; height: 16px; background: #eef3fb; border-radius: 4px; overflow: hidden; }
.rep-rank-fill { height: 100%; border-radius: 4px; transition: width .35s ease; }
.rep-rank-val {
  width: 168px; flex: none; text-align: right; font-size: 12.5px;
  font-variant-numeric: tabular-nums; color: #24324a;
}
/* 店铺汇总表里的迷你占比条 */
.rep-mini-track { width: 72px; height: 8px; background: #eef3fb; border-radius: 4px; overflow: hidden; }
.rep-mini-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--brand), var(--brand-500)); }
/* KPI 环比 */
.rep-up { color: #1a9c63; font-weight: 600; }
.rep-down { color: #d9534f; font-weight: 600; }
.rep-flat { color: var(--ink-3); font-weight: 600; }
@media (max-width: 767.98px) {
  .rep-rank-name { width: 96px; }
  .rep-rank-val { width: 118px; }
  .rep-mini-track { width: 44px; }
}

/* v4.64：辅料调价记录（material_detail.php 编辑页右栏「辅料图片」下方，仅管理员可见） */
.price-log { list-style: none; margin: 0; padding: 0; }
.price-log > li { padding: 8px 0; border-top: 1px dashed #e4eaf3; }
.price-log > li:first-child { border-top: 0; padding-top: 0; }
.price-log > li:last-child { padding-bottom: 0; }
.price-log .pl-spec { font-weight: 600; color: var(--ink-1, #1f2937); }
.price-log .pl-diff { margin-top: 2px; font-size: 12px; color: #475569; }
.price-log .pl-diff .up { color: #d14343; font-weight: 600; }    /* 涨价 = 成本上升 */
.price-log .pl-diff .down { color: #16a34a; font-weight: 600; }  /* 降价 */