/* ============================================================
   theme-v2.css — 促销团队管理后台 · 小程序同源配色（色块风）
   ------------------------------------------------------------
   加载位置：admin.css 之后（index.html 内多一行 <link>）
   设计来源：promo-ticket-miniprogram/miniprogram/app.wxss（v3 蓝系）
             以及 pages/home、pages/login、custom-tab-bar 的色块用法

   本文件只做视觉覆盖：不改任何类名、DOM 结构、JS 逻辑。
   删掉这一行 <link> 即 100% 回到原版外观。
   全部选择器加 :root/.xxx 精确覆盖，无 !important（除个别防御性场景）。
   ============================================================ */

/* ============================================================
   1. 设计令牌重映射 —— 把 admin.css 的令牌整体换成小程序色板
   ============================================================ */
:root {
  /* ---- 主色：与小程序 --brand 完全同值 ---- */
  --c-primary-50:  #F2F8FD;
  --c-primary-100: #E6F1FB;   /* = 小程序 --brand-50（软色块底） */
  --c-primary-200: #C7DBFC;   /* = 小程序 --brand-100（描边） */
  --c-primary-300: #A3C2F8;
  --c-primary-500: #3B7BE0;
  --c-primary-600: #2B6DE5;   /* = 小程序 --brand */
  --c-primary-700: #1E5FC9;   /* = 小程序 --brand-dark */
  --c-primary-800: #164BAD;
  --c-primary-900: #133C8A;

  /* ---- 中性：线更浅（小程序 --line #E9ECF0），底色换小程序 --bg ---- */
  --c-ink-300: #E9ECF0;       /* = 小程序 --line —— 全站分割线/卡片描边 */
  --c-ink-200: #F0F2F5;       /* = 小程序 --line-strong 近似 */
  --bg: #F5F6F8;              /* = 小程序 --bg */

  /* ---- 语义色：换小程序功能色；文字色按 ≥4.5:1 微调 ---- */
  --c-success-600: #07C160;   /* = 小程序 --green */
  --c-success-700: #0F7A46;   /* 4.90:1 on --c-success-50 */
  --c-success-50:  #E8F8EE;   /* = 小程序 --green-50 */
  --c-warning-600: #FA9D3B;   /* = 小程序 --orange */
  --c-warning-700: #A8551A;   /* 4.82:1 on --c-warning-50 */
  --c-warning-50:  #FFF3E4;   /* = 小程序 --orange-50 */
  --c-danger-600:  #FA5151;   /* = 小程序 --red */
  --c-danger-700:  #B83535;   /* 5.17:1 on --c-danger-50 */
  --c-danger-50:   #FFEDED;   /* = 小程序 --red-50 */
  --c-violet-700:  #4B4ED8;   /* = 小程序 tag.reviewing 文字 */
  --c-violet-50:   #EFEFFE;   /* = 小程序 --purple-50 */

  /* ---- 侧栏：小程序没有深色导航 → 改浅色 + 品牌胶囊选中 ---- */
  --c-nav-bg:   #FFFFFF;
  --c-nav-text: #57606A;      /* = 小程序 --t2 */

  /* ---- 圆角：小程序卡片 16~28rpx ≈ 8~14px，整体再柔一档 ---- */
  --r-md: 12px;
  --r-lg: 14px;
  --r-xl: 16px;
  --r-2xl: 18px;
}

/* ============================================================
   2. 框架：浅色侧栏 + 毛玻璃顶栏（对齐小程序白色悬浮 tabBar 观感）
   ============================================================ */
.sidebar {
  background: var(--c-nav-bg);
  border-right: 1px solid var(--line);
}
.brand-text strong { color: var(--c-ink-900); }
.brand-text small  { color: var(--c-ink-500); }

.nav-item {
  border-radius: var(--r-md);
  color: var(--c-nav-text);
  font-weight: 500;
}
.nav-item:hover { background: var(--c-primary-100); color: var(--c-primary-700); }
/* 选中 = 品牌色实心胶囊（对应小程序 tabBar 选中态） */
.nav-item.active {
  background: var(--c-primary-600);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(43, 109, 229, .28);
}
.nav-item.active:hover { background: var(--c-primary-700); color: #fff; }

/* 侧栏底部按钮：小程序按钮是非描边的填充块 */
.side-foot .btn.ghost {
  background: var(--c-ink-100);
  border-color: transparent;
  color: var(--c-ink-700);
}
.side-foot .btn.ghost:hover {
  background: var(--c-primary-100);
  border-color: transparent;
  color: var(--c-primary-700);
}

.topbar {
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

/* 顶栏地域胶囊：软色块 */
.region-chip {
  background: var(--c-primary-100);
  border-color: var(--c-primary-200);
  color: var(--c-primary-700);
}
.region-chip:hover { background: var(--c-primary-200); border-color: var(--c-primary-200); }

/* ============================================================
   3. 卡片 / 统计卡：去描边、柔阴影、大圆角（小程序卡片口径）
   ============================================================ */
.card,
.stat {
  border: none;
  border-radius: var(--r-xl);
  box-shadow: 0 2px 10px rgba(16, 24, 40, .05);
}
.card:hover { box-shadow: 0 4px 16px rgba(16, 24, 40, .08); }

.stat .v { font-weight: 700; }
.stat .k { color: var(--c-ink-500); }

.sec-title { border-left-width: 4px; border-left-color: var(--c-primary-600); border-radius: 2px; }

/* ============================================================
   4. 按钮 / 胶囊：统一为小程序胶囊形态
   ============================================================ */
.btn { border-radius: var(--r-full); }
.btn.primary { box-shadow: 0 4px 14px rgba(43, 109, 229, .26); }
.btn.primary:hover { background: var(--c-primary-700); }
.btn.ghost {
  background: #fff;
  border: 1.5px solid var(--c-primary-200);
  color: var(--c-primary-600);
}
.btn.ghost:hover { background: var(--c-primary-100); border-color: var(--c-primary-200); color: var(--c-primary-700); }
.btn.danger { background: var(--c-danger-50); color: var(--c-danger-700); border: none; }
.btn.danger:hover { background: #FBDCDC; }

/* ============================================================
   5. 状态徽章：全套换成小程序软色块（底色 + 同色系深字）
   ------------------------------------------------------------
   注意：这里同时把 pending / reviewing 的色相改成与小程序一致
   （小程序 pending = 橙、reviewing = 紫），此前 PC 端是 灰 / 橙。
   纯视觉映射，状态文字不变，语义不变。
   ============================================================ */
.badge {
  padding: 3px 9px;
  border-radius: 6px;
  font-weight: 600;
}
.badge.pending   { background: var(--c-warning-50); color: var(--c-warning-700); }
.badge.running   { background: var(--c-primary-100); color: #185FA5; }   /* 小程序 --blue */
.badge.reviewing { background: var(--c-violet-50);  color: var(--c-violet-700); }
.badge.passed    { background: var(--c-success-50); color: var(--c-success-700); }
.badge.rejected  { background: var(--c-danger-50);  color: var(--c-danger-700); }
.badge.on        { background: var(--c-success-50); color: var(--c-success-700); }
.badge.role-m    { background: var(--c-violet-50);  color: var(--c-violet-700); }
.badge.role-p    { background: var(--c-primary-100); color: var(--c-primary-700); }

/* 物料规格标签也走软色块 */
.pm-spec-tag { background: var(--c-primary-100); color: var(--c-primary-700); border-radius: var(--r-full); }

/* ============================================================
   6. 表单：应用内输入框改「填充块」（小程序 .ipt 口径：无描边的浅灰圆角块）
   ============================================================ */
.f-item select, .f-item input,
.mini-form textarea,
.aof-search,
.bd-cfg-sec select, .bd-cfg-sec input, .bd-cfg-sec textarea,
.bd-sel {
  background-color: var(--c-ink-100);
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
}
.f-item select:focus, .f-item input:focus,
.mini-form textarea:focus,
.aof-search:focus,
.bd-cfg-sec select:focus, .bd-cfg-sec input:focus, .bd-cfg-sec textarea:focus {
  background-color: #fff;
  border-color: var(--c-primary-600);
  box-shadow: 0 0 0 3px var(--c-primary-100);
}
/* 登录页输入框保持「白底 + 描边」（对齐小程序 login 页口径） */
.form-row input { border-color: #D5DAE1; border-radius: var(--r-md); }

/* ============================================================
   7. 表格：更轻的分割线（小程序 cell 分割线口径）
   ============================================================ */
.tbl th { background: var(--c-ink-50); border-bottom: 1.5px solid var(--line); color: var(--c-ink-500); }
.tbl td { border-bottom: 1px solid var(--line); }
.tbl tr:hover td { background: var(--c-primary-50); }

/* ============================================================
   8. Tab / Chip：全部统一为「浅灰胶囊 → 选中变实心品牌色」
   （对应小程序 .tab / .fchip 的两种态）
   ============================================================ */
.bd-tab {
  border: 1.5px solid transparent;
  background: var(--c-ink-100);
  color: var(--c-ink-600);
  border-radius: var(--r-full);
}
.bd-tab:hover { background: var(--c-primary-100); border-color: transparent; color: var(--c-primary-700); }
.bd-tab.on { background: var(--c-primary-600); border-color: transparent; color: #fff; box-shadow: 0 4px 12px rgba(43, 109, 229, .24); }
.bd-tab.bd-add { background: transparent; border: 1.5px dashed var(--c-ink-300); color: var(--c-ink-500); }
.bd-tab.bd-add:hover { border-color: var(--c-primary-600); color: var(--c-primary-700); }

.bd-sl-chip {
  border: 1.5px solid transparent;
  background: var(--c-ink-100);
  color: var(--c-ink-600);
}
.bd-sl-chip:hover { background: var(--c-primary-100); border-color: transparent; color: var(--c-primary-700); }
.bd-sl-chip.on { background: var(--c-primary-600); border-color: transparent; color: #fff; }
.bd-sl-more { border-style: dashed; border-color: var(--c-ink-300); }

.aof-chip {
  border: 1.5px solid transparent;
  background: var(--c-ink-100);
  color: var(--c-ink-600);
  border-radius: var(--r-full);
}
.aof-chip:hover { background: var(--c-primary-100); border-color: transparent; color: var(--c-primary-700); }
.aof-chip.on { background: var(--c-primary-600); border-color: transparent; color: #fff; }

.bd-type-btn {
  border: 1.5px solid transparent;
  background: var(--c-ink-100);
  color: var(--c-ink-600);
}
.bd-type-btn:hover { background: var(--c-primary-100); border-color: transparent; color: var(--c-primary-700); }
.bd-type-btn.on { background: var(--c-primary-600); border-color: transparent; color: #fff; }

/* 已选筛选回显 chip */
.aof-echochip { background: var(--c-primary-100); color: var(--c-primary-700); }

/* ============================================================
   9. 看板：轨道 / 进度条 / 面板
   ============================================================ */
.bd-panel { border-radius: var(--r-xl); box-shadow: 0 2px 10px rgba(16, 24, 40, .05); }
.bd-slicer { border: none; border-radius: var(--r-xl); box-shadow: 0 2px 10px rgba(16, 24, 40, .05); }
.bd-track { background: var(--c-primary-100); }
.bd-add-panel { background: var(--c-primary-50); border: 2px dashed var(--c-primary-200); }
.bd-stat-main { background: var(--c-primary-100); border-radius: var(--r-lg); }
.bd-tblwrap, .bd-sl-all { border-color: var(--line); }
.bd-sl-row:hover { background: var(--c-primary-50); }
.bd-sl-row.on { background: var(--c-primary-100); color: var(--c-primary-800); }
.bd-filter-on { background: var(--c-primary-100); border-color: var(--c-primary-200); color: var(--c-primary-700); }

.bar { background: var(--c-primary-100); }

/* ============================================================
   10. 弹层 / 提示 / 空态
   ============================================================ */
.modal { border-radius: var(--r-2xl) var(--r-2xl) 0 0; box-shadow: 0 -10px 44px rgba(15, 35, 90, .16); }
.modal-mask.show .modal { box-shadow: 0 -10px 44px rgba(15, 35, 90, .16); }
.modal .close { background: var(--c-ink-100); color: var(--c-ink-500); }
.modal .close:hover { background: var(--c-ink-200); }

.toast { border-radius: var(--r-md); }
.toast.err { background: var(--c-danger-600); }
.toast.ok  { background: var(--c-success-600); }

.trail li::before { background: var(--c-primary-100); border-color: var(--c-primary-600); }
.trail { border-left-color: var(--c-ink-200); }

.photo-box { border: none; background: var(--c-ink-100); border-radius: var(--r-md); }

/* 登录层：保留品牌蓝幕布，仅统一到小程序品牌色；卡片更圆更柔 */
.login-layer { background: linear-gradient(160deg, #1E5FC9, #2B6DE5 55%, #3B7BE0); }
.login-box { border-radius: var(--r-2xl); box-shadow: 0 18px 54px rgba(15, 35, 90, .26); }
.login-hint-box { background: var(--c-warning-50); border-color: var(--c-warning-600); }
.login-hint-title, .login-hint-val b { color: var(--c-warning-700); }
.login-dev-toggle { border-radius: var(--r-full); }
.login-dev-panel { background: var(--c-primary-50); border-color: var(--c-primary-200); border-radius: var(--r-lg); }
.login-dev-grid button { border-radius: var(--r-md); background: var(--c-ink-100); border-color: transparent; }
.login-dev-grid button:hover { background: var(--c-primary-100); border-color: transparent; color: var(--c-primary-700); }
.login-dev-grid button.super { background: var(--c-warning-50); color: var(--c-warning-700); border-color: transparent; }
.login-dev-grid button.super:hover { background: var(--c-warning-50); }

/* ============================================================
   11. 移动端断点：侧栏变白色横滑条时的观感对齐
   ============================================================ */
@media (max-width: 991px) {
  .sidebar { border-right: none; border-bottom: 1px solid var(--line); }
  .nav-item.active { box-shadow: none; }
}

/* ============================================================
   12. 打印：保持灰度输出，不受彩块影响
   ============================================================ */
@media print {
  .sidebar { border-right: none; }
}