/* ============================================================
   恒悦入库 · 界面升级 v3  （2026-09-18）
   纯样式覆盖层：不改变页面结构、路由、脚本，可随时删链接回滚
   ============================================================ */

:root{
  /* 新设计令牌 */
  --brand:      #2f6bff;
  --brand-deep: #1e4fd6;
  --brand-soft: #ecf2ff;
  --brand-line: #d8e4ff;
  --bg:         #f2f4fa;
  --surface:    #ffffff;
  --line:       #e7ebf3;
  --t1:         #17233d;
  --t2:         #5b6578;
  --t3:         #9aa3b5;
  --green:      #0e9f6e;
  --green-soft: #e5f7f0;
  --red:        #e0294a;
  --red-soft:   #fdecef;
  --amber:      #b45309;
  --amber-soft: #fef3e2;
  --r:          14px;
  --sh-1:       0 1px 2px rgba(23,35,61,.04), 0 4px 16px rgba(23,35,61,.05);
  --sh-2:       0 10px 28px rgba(47,107,255,.16);

  /* 兼容旧变量（旧样式块仍在引用） */
  --brand-dark: #16233c;
  --brand-mid:  #1d3054;
  --brand-blue: #2f6bff;
  --brand-blue2:#3b7bff;
  --bg-page:    #f2f4fa;
  --border:     #e7ebf3;
  --text-1:     #17233d;
  --text-2:     #5b6578;
  --text-3:     #9aa3b5;
  --up:         #d92d20;
  --down:       #0e9f6e;
  --grad:       linear-gradient(135deg,#3b7bff,#2456e8);
  --card:       #ffffff;
}

body{
  background:var(--bg);
  color:var(--t1);
  font-family:"PingFang SC",-apple-system,BlinkMacSystemFont,"Microsoft YaHei","Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
a:hover{ color:var(--brand-deep); }

/* ============================================================
   1. 左侧导航栏 —— 浅蓝底 + 蓝色品牌头块（明显、醒目）
   ============================================================ */
.sidebar{
  width:240px;
  background:linear-gradient(180deg,#eaf1fe 0%,#f4f8ff 42%,#fbfdff 100%);
  border-right:1px solid #d9e3f6;
  box-shadow:1px 0 0 rgba(47,107,255,.04), 6px 0 22px rgba(23,35,61,.045);
  color:var(--t1);
}
.main{ margin-left:240px; }

/* 品牌头块：真实品牌色卡片，一眼看到 */
.brand{
  margin:14px 14px 6px;
  padding:14px;
  border-radius:15px;
  border-bottom:0;
  background:linear-gradient(135deg,#3b7bff 0%,#2456e8 100%);
  box-shadow:0 8px 22px rgba(47,107,255,.30);
  align-items:center;
}
.brand-logo-wrap{
  width:46px; height:46px; border-radius:12px; padding:3px;
  background:#fff;
  box-shadow:0 4px 12px rgba(10,32,80,.22);
}
.brand-logo-wrap img{ border-radius:9px; }
.brand-name{ color:#fff; font-size:17px; font-weight:800; letter-spacing:.6px; }
.brand-sub{ color:rgba(255,255,255,.76) !important; font-size:9.5px; letter-spacing:1.6px; font-weight:600; }

.nav-sec{ padding:6px 0 10px; }
.nav-label{
  color:var(--brand) !important;
  font-size:10.5px; font-weight:800; letter-spacing:1.4px;
  padding:16px 22px 7px;
  opacity:.72;
}
.nav-item{
  display:flex; align-items:center; gap:11px;
  margin:3px 11px; padding:10px 13px;
  border-radius:11px;
  color:#39456b !important;
  font-size:14px; font-weight:600;
  transition:background .16s, color .16s, transform .12s, box-shadow .16s;
}
.nav-item i{ font-size:16.5px; width:20px; text-align:center; opacity:.9; }
.nav-item:hover{
  background:#dbe7ff !important;
  color:var(--brand-deep) !important;
  transform:translateX(2px);
}
.nav-item:hover i{ opacity:1; }
.nav-item.active{
  background:linear-gradient(135deg,#3b7bff,#2456e8) !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(47,107,255,.34);
}
.nav-item.active i{ opacity:1; color:#fff; }
.nav-item:active{ transform:scale(.98); }

/* 客服块（浅底适配） */
.customer-service{
  margin:10px 13px 12px;
  border:1px solid var(--brand-line) !important;
  border-radius:12px;
  background:#fff !important;
  box-shadow:0 2px 10px rgba(47,107,255,.07);
}
.customer-service button{ color:#39456b !important; }
.customer-service i{ color:var(--brand) !important; }
.customer-service small{ color:var(--t3) !important; }
.customer-service .bi-chevron-right{ color:#b8c6e4 !important; }

/* 用户区 */
.user-area{
  border-top:1px solid #e2e9f7 !important;
  background:#fff;
  padding:13px 15px;
}
.avatar{
  background:linear-gradient(135deg,#3b7bff,#2456e8) !important;
  box-shadow:0 4px 10px rgba(47,107,255,.28);
}
.user-name{ color:var(--t1) !important; font-weight:700; }
.user-role{ color:var(--t3) !important; }
.logout-link{ color:#93a1b5 !important; }
.logout-link:hover{ color:var(--red) !important; background:#fdecef !important; }
.nav-dot{ background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.20); }

/* 折叠按钮 */
.sidebar-toggle{
  border:1px solid var(--brand-line) !important;
  background:#fff !important;
  color:var(--brand) !important;
  box-shadow:0 4px 12px rgba(47,107,255,.18) !important;
}
.sidebar-toggle:hover{ background:var(--brand-soft) !important; }

/* 折叠态：品牌头块必须跟着收窄，否则 46px 图标溢出 74px 侧栏 */
.sidebar-collapsed .brand{
  margin:10px 6px 4px !important;
  padding:12px 0 !important;
  border-radius:13px;
  justify-content:center;
}
.sidebar-collapsed .brand-logo-wrap{ width:40px; height:40px; border-radius:11px; }
.sidebar-collapsed .nav-item{ margin:4px 9px !important; }
.sidebar-collapsed .nav-label{ padding:12px 0 6px; text-align:center; font-size:9px; letter-spacing:.5px; }
.sidebar-collapsed .user-area{ padding:12px 8px !important; }

/* ============================================================
   2. 顶栏
   ============================================================ */
.topbar{
  height:62px;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.6) blur(8px);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(23,35,61,.02);
  padding:0 26px;
}
.page-title{ font-size:20px; font-weight:800; letter-spacing:-.01em; }
.page-sub{ font-size:11.5px; color:var(--t3); }
.hamburger{ color:var(--t1); font-size:21px; }

/* 顶栏会员/管理员徽标 */
.member-chip{ font-weight:700; padding:5px 13px; }
.member-chip.ok{ background:var(--green-soft); color:#08795a; border:1px solid #b6ecd8; }
.member-chip.expiring{ background:var(--amber-soft); color:var(--amber); border:1px solid #fbe0b4; }
.member-chip.none{ background:var(--red-soft); color:#c11f3c; border:1px solid #f8c9d3; }
.member-chip.admin{ background:var(--brand-soft); color:var(--brand-deep); border:1px solid var(--brand-line); }

/* ============================================================
   3. 内容区 / 卡片
   ============================================================ */
.content{ padding:24px 26px 44px; max-width:1440px; }

.card{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--surface);
  box-shadow:var(--sh-1);
  transition:box-shadow .18s, border-color .18s;
}
.card:hover{ border-color:#dbe4f5; box-shadow:0 4px 20px rgba(23,35,61,.07); }
.card-h{
  padding:16px 20px;
  border-bottom:1px solid #eff2f8;
  font-weight:700; font-size:15px;
}
.card-h .sub{ font-size:11.5px; color:var(--t3); }
.card-b{ padding:18px 20px; }

/* 统计卡：彩色图标块（四色轮换）+ 数字优先 */
.stat-grid{ gap:14px; margin-bottom:16px; }
.stat-card{
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:16px 18px 17px 56px;
  position:relative;
  box-shadow:var(--sh-1);
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.stat-card::before{ display:none; }
.stat-card:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(23,35,61,.09); border-color:#dbe4f5; }
.stat-label{
  font-size:12.5px; color:var(--t2); font-weight:600;
  display:flex; align-items:center; gap:6px;
}
.stat-label i{
  position:absolute; left:18px; top:17px;
  width:30px; height:30px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-size:15px !important;
}
.stat-value{ font-size:26px; font-weight:800; letter-spacing:-.02em; margin:5px 0 2px; }
.stat-sub{ font-size:11.5px; color:var(--t3); }
.stat-grid>.stat-card:nth-child(4n+1) .stat-label i{ background:var(--brand-soft); color:var(--brand); }
.stat-grid>.stat-card:nth-child(4n+2) .stat-label i{ background:var(--green-soft); color:var(--green); }
.stat-grid>.stat-card:nth-child(4n+3) .stat-label i{ background:var(--amber-soft); color:var(--amber); }
.stat-grid>.stat-card:nth-child(4n+4) .stat-label i{ background:var(--red-soft);   color:var(--red); }

/* ============================================================
   4. 按钮 / 表单
   ============================================================ */
.btn-p{
  background:linear-gradient(135deg,#3b7bff,#2456e8);
  border:0; border-radius:10px;
  padding:9px 18px; font-size:13.5px; font-weight:700;
  box-shadow:0 4px 12px rgba(47,107,255,.20);
  transition:all .16s;
}
.btn-p:hover{
  color:#fff !important;
  box-shadow:0 7px 20px rgba(47,107,255,.34);
  transform:translateY(-1px);
  filter:none;
}
.btn-p:active{ transform:scale(.97); }
.btn-ghost,.btn-outline{
  background:#fff; border:1px solid #d9e2f2; color:var(--t2);
  border-radius:10px; font-weight:600;
  transition:all .16s;
}
.btn-ghost:hover,.btn-outline:hover{
  border-color:var(--brand); color:var(--brand); background:var(--brand-soft);
}
.btn-ghost:active,.btn-outline:active{ transform:scale(.97); }
.btn-danger-soft{ border-radius:10px; transition:all .16s; }
.btn-danger-soft:hover{ background:var(--red-soft); border-color:#f0a8b8; }

.form-control,.form-select{
  border-radius:10px; border-color:#dde4f0; color:var(--t1);
  transition:border-color .15s, box-shadow .15s;
}
.form-control:hover,.form-select:hover{ border-color:#c7d4ec; }
.form-control:focus,.form-select:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(47,107,255,.13);
}
.form-label{ font-size:12.5px; color:var(--t2); font-weight:600; }
.form-check-input:checked{ background-color:var(--brand); border-color:var(--brand); }
.form-check-input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(47,107,255,.13); }

/* ============================================================
   5. 表格
   ============================================================ */
table.tbl{ font-size:13.5px; }
.tbl thead th{
  background:#f7faff;
  color:#718098;
  font-size:11.5px; font-weight:700; letter-spacing:.2px;
  padding:11px 13px;
  border-bottom:1px solid var(--line);
}
.tbl tbody td{ padding:12px 13px; border-bottom:1px solid #f1f4f9; }
.tbl tbody tr{ transition:background .15s; }
.tbl tbody tr:hover{ background:#eef4ff; }
.tbl tbody tr:hover td{ background:transparent; }
.tbl .empty{ color:var(--t3); }

/* ============================================================
   6. 标签 / 价格 / 徽标
   ============================================================ */
.tag{ font-weight:700; padding:3px 10px; }
.tag-green{ background:var(--green-soft); color:#08795a; }
.tag-red{ background:var(--red-soft); color:#c11f3c; }
.tag-blue{ background:var(--brand-soft); color:var(--brand-deep); }
.tag-amber{ background:var(--amber-soft); color:var(--amber); }
.tag-gray{ background:#f2f4f7; color:var(--t2); }

.up,.price-up{ color:var(--up) !important; }
.down,.price-down{ color:var(--down) !important; }
.price{ font-weight:700; }
.chip-code{
  background:#f5f8fd; border:1px solid #e0e8f5; color:#20375c;
  border-radius:7px; font-weight:600;
}
.pos{ color:var(--green); font-weight:700; }
.neg{ color:var(--red); font-weight:700; }
.muted{ color:var(--t3) !important; }
.money{ font-variant-numeric:tabular-nums; }

/* ============================================================
   7. 提示条 / 弹窗
   ============================================================ */
.alert-custom{ border-radius:12px; font-weight:500; }
.flash-msg{ border-radius:11px; font-weight:600; box-shadow:0 8px 24px rgba(16,24,40,.14); }
.modal-content{ border-radius:16px; }
.btn-close:focus{ box-shadow:0 0 0 3px rgba(47,107,255,.15); }

/* 品牌图统一白底瓦片（防止深浅不一） */
img[src*="/uploads/brand_"]{
  background:#fff; object-fit:contain;
}

/* ============================================================
   8. 滚动条 & 无障碍
   ============================================================ */
.scrollbar::-webkit-scrollbar{ width:7px; height:7px; }
.scrollbar::-webkit-scrollbar-thumb{ background:#c8d4e8; border-radius:4px; }
.scrollbar::-webkit-scrollbar-thumb:hover{ background:#a9bcd9; }
*:focus-visible{ outline:2px solid rgba(47,107,255,.55); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ============================================================
   9. 响应式（手机 / 平板）
   ============================================================ */
@media (max-width:992px){
  .content{ padding:18px 18px 36px; }
}
@media (max-width:768px){
  /* 关键：新规则 .main{margin-left:240px} 会盖掉原移动端重置，这里补回 */
  .main,.sidebar-collapsed .main{ margin-left:0 !important; }
  /* 栅格列允许收缩（默认 min-width:auto 会把布局视口撑到 ~484px 导致右侧裁切） */
  .content .row > [class*="col"]{ min-width:0; }
  .content .card-b .d-flex{ min-width:0; flex-wrap:wrap; }
  .content{ overflow-x:hidden; }
  .topbar{ height:56px; padding:0 14px; }
  .page-title{ font-size:17px; }
  .content{ padding:13px 13px 90px; }
  .card-b{ padding:15px 14px; }
  .card-h{ padding:13px 14px; }
  .stat-card{ padding:14px 15px 15px 52px; }
  .stat-value{ font-size:22px; }
  .stat-label i{ left:15px; top:15px; width:28px; height:28px; }
  /* 表格横向滚动，不再把页面撑破 */
  table.tbl{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; }
  table.tbl thead,table.tbl tbody{ display:table; width:100%; min-width:600px; }
  /* iOS 聚焦不放大 */
  .form-control,.form-select{ font-size:16px; }
  /* 触控目标放大 */
  .btn-p,.btn-ghost,.btn-outline{ min-height:40px; }
  .tbl .btn-p,.tbl .btn-ghost,.tbl .btn-outline,.tbl .btn-danger-soft{ min-height:0; }
  .nav-item{ padding:12px 14px; font-size:14.5px; }
  .brand{ margin:12px 12px 4px; }
}
@media (max-width:560px){
  .stat-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .stat-label{ font-size:11.5px; }
  .stat-value{ font-size:20px; }
  .stat-card{ padding:13px 12px 13px 46px; }
  .stat-label i{ left:12px; top:13px; width:26px; height:26px; font-size:13px !important; }
  .member-chip span.xs-hide{ display:none; }
}

/* ============================================================
   10. 页面私有样式统一（各页原来是各写一套，这里统一到同一套令牌）
   ============================================================ */

/* ---- 10.1 顶部深蓝大横幅 → 浅色汇总带（不再占屏、不再压暗） ---- */
.inv-hero,.out-hero,.record-hero{
  background:linear-gradient(135deg,#eef4ff 0%,#f7faff 62%,#ffffff 100%) !important;
  border:1px solid var(--brand-line) !important;
  border-left:4px solid var(--brand) !important;
  border-radius:var(--r) !important;
  color:var(--t1) !important;
  padding:18px 22px !important;
  box-shadow:0 2px 12px rgba(47,107,255,.07) !important;
  align-items:center;
}
.inv-hero h2,.out-hero h2,.record-hero h2{
  color:var(--t1) !important; font-size:20px !important; font-weight:800 !important; margin:3px 0 4px !important;
}
.inv-hero p,.out-hero p,.record-hero p{ color:var(--t2) !important; font-size:13px; }
.out-hero i{ color:#c3d6f5 !important; font-size:34px !important; }
/* 横幅内指标配色（浅底可读） */
.inv-hero .hs-label{ color:var(--t2) !important; font-weight:600; }
.inv-hero .hs-value{ color:var(--brand-deep) !important; font-size:21px !important; }
.inv-hero .hs-sub{ color:var(--t3) !important; }
.inv-hero .hs-up{ color:var(--green) !important; }
.inv-hero .hs-down{ color:var(--red) !important; }

/* 工作台问候条：字号收敛，不再霸屏（仅桌面端覆盖，手机端保留页面自带自适应） */
@media (min-width:769px){
  .workbench-greeting{ height:112px; padding:20px 26px; border-radius:var(--r); }
  .workbench-greeting h2{ font-size:26px; margin-bottom:8px; }
  .workbench-greeting p{ font-size:14.5px; }
  .greeting-scan{ top:26px !important; }
}

/* ---- 10.2 利润配色修正（旧规则 .up{!important} 把正利润也染红了） ---- */
.mkt-profit.up,.out-mkt-profit.up,.rec-mkt-profit.up{ color:var(--green) !important; }
.mkt-profit.down,.out-mkt-profit.down,.rec-mkt-profit.down{ color:var(--red) !important; }
.mkt-profit.none,.mkt-profit-none,.out-mkt-none,.rec-mkt-none{ color:var(--t3) !important; font-weight:600; }
/* 行情价标签统一 */
.mkt-price,.out-mkt-price,.rec-mkt-price{ color:var(--t1) !important; }
.out-mkt-price,.rec-mkt-price{
  background:var(--brand-soft) !important; color:var(--brand-deep) !important;
  border-radius:8px !important; font-weight:700 !important;
}

/* ---- 10.3 商品卡：统一圆角/描边/悬停浮起 ---- */
.inv-card,.out-card,.record-card{
  border:1px solid var(--line) !important;
  border-radius:var(--r) !important;
  box-shadow:var(--sh-1) !important;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.inv-card:hover,.out-card:hover,.record-card:hover{
  border-color:#bcd0ff !important;
  box-shadow:var(--sh-2) !important;
  transform:translateY(-2px);
}
.inv-cost,.inv-market,.record-metric{ border-radius:11px !important; }
.inv-market{
  background:linear-gradient(160deg,#f4f9ff,#ecf4ff) !important;
  border:1px solid #dbe9fb !important;
}
.inv-product,.record-product{ align-items:flex-start; }
.inv-name,.out-name,.record-name{ color:var(--t1) !important; }

/* 品牌图瓦片统一：白底 + 细描边，深浅图都好看 */
.inv-logo,.record-brand-mark{
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
}
.inv-logo img,.record-brand-mark img{ padding:6px !important; border-radius:11px; }

/* ---- 10.4 表格式行：悬停高亮 ---- */
.todo-row,.warning-row{ transition:background .15s; }
.todo-row:hover,.warning-row:hover{ background:#eef4ff; }
.record-actions details summary,.inv-actions summary{
  cursor:pointer; transition:color .15s; border-radius:8px;
}
.record-actions details summary:hover,.inv-actions summary:hover{ color:var(--brand) !important; }

/* ---- 10.5 分段切换（结算页 未结算/已结算） ---- */
.seg{ background:#eef2fa !important; border-radius:11px !important; padding:4px !important; }
.seg-item{ border-radius:8px !important; font-weight:700 !important; color:var(--t2) !important; transition:all .16s; }
.seg-item:hover{ color:var(--brand) !important; }
.seg-item.active{
  background:#fff !important; color:var(--brand-deep) !important;
  box-shadow:0 2px 6px rgba(23,35,61,.10) !important;
}

/* ---- 10.6 工作台面板 ---- */
.workbench-panel{ border:1px solid var(--line) !important; border-radius:var(--r) !important; box-shadow:var(--sh-1) !important; }
.workbench-panel-h{ font-weight:800 !important; color:var(--t1) !important; }
.workbench-panel-h i{ color:var(--brand) !important; }
.workbench-panel-h .link{ color:var(--brand) !important; font-weight:600; }
.workbench-stat{ border:1px solid var(--line) !important; border-radius:var(--r) !important; box-shadow:var(--sh-1) !important; }
.workbench-stat-value{ color:var(--t1) !important; }
.record-view{ color:var(--brand) !important; font-weight:700; }
.record-view:hover{ color:var(--brand-deep) !important; text-decoration:underline; }

/* ---- 10.7 条码库（catalog_barcodes 私有类） ---- */
.barcode-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.barcode-code{
  font-family:Consolas,Menlo,monospace; background:#f5f8fd; border:1px solid #e0e8f5;
  border-radius:7px; padding:1px 7px; font-size:12.5px; color:#20375c;
}
.spec-picker{ position:relative; }
.barcode-add{ transition:all .16s; }