/* ============================================================
   汽配智能管理系统 · UI 主题层（对齐 UI 原型 ui-prototype 设计稿）
   - 浅色侧栏 / 品牌蓝 #2f6bff / 大圆角卡片 / 柔和阴影
   - 基础段覆盖 style.css；html.v2 作用域段覆盖 v2.css（特异性更高，
     无论 v2.css 何时动态加载都会被压住）
   ============================================================ */

/* ---------- 基础 tokens（style.css 模式） ---------- */
:root {
  --brand: #2f6bff;
  --brand-d: #2456d6;
  --brand-tint: #eaf0ff;
  --bg: #f3f5f9;
  --ink: #1f2329;
  --muted: #6b7686;
  --line: #e8ebf0;
  --radius: 12px;
  --radius-lg: 12px;
  --shadow: 0 2px 14px rgba(20, 40, 90, 0.07);
}

/* ---------- 侧栏浅色化（原型样式） ---------- */
.sidebar {
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
  border-right: 1px solid var(--line);
}
.brand { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 12px 12px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.brand-logo { width: 38px; height: 38px; object-fit: contain; flex: 0 0 38px; padding: 2px; }
.brand-text { flex: 1; min-width: 0; }
.brand-tag { font-size: 11px; color: var(--muted); letter-spacing: 0.5px; }
/* 登录页也有 .brand-name（居中小字），收窄作用域避免误伤 */
.sidebar .brand-name { font-weight: 800; font-size: 15px; color: #1f2329; line-height: 1.25; }
.brand-sub { font-size: 15px; font-weight: 800; color: #1f2329; letter-spacing: 0; }
.nav-toggle { background: #fff; border: 1px solid var(--line); color: var(--muted); border-radius: 8px; }
.nav-toggle:hover { background: var(--brand-tint); color: var(--brand); border-color: var(--brand-tint); }
.nav-item { color: #5b6472; font-weight: 600; border-radius: 9px; }
.nav-item:hover { background: var(--bg); color: var(--brand); }
.nav-item.active { background: var(--brand-tint); color: var(--brand); font-weight: 700; }
.nav-section { font-size: 11px; color: #98a1b3; letter-spacing: 0.6px; font-weight: 700; opacity: 1; }
.sidebar-foot { color: var(--muted); border-top: 1px solid var(--line); }

/* ---------- 顶栏 / 面板 / 表格 / 按钮 ---------- */
.topbar { background: #fff; border-bottom: 1px solid var(--line); }
.panel { border-radius: 12px; box-shadow: var(--shadow); }
.table th { background: #f4f6fa; font-weight: 700; color: #43506b; }
.btn { border-radius: 9px; }
.btn-primary { background: var(--brand); border-color: var(--brand); box-shadow: 0 1px 3px rgba(47, 107, 255, 0.25); }
.btn-primary:hover { background: var(--brand-d); border-color: var(--brand-d); color: #fff; }
.btn-link { color: var(--brand); }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.tag { background: var(--brand-tint); color: var(--brand); }

/* ---------- 配件类目筛选 chips / 常卖标记（对齐 UI 原型，变量两模式通用） ---------- */
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 20px 12px; }
.cat-chips .c { padding: 5px 14px; border-radius: 18px; background: #fff; border: 1px solid var(--line); color: #5b6472; font-size: 12.5px; cursor: pointer; font-weight: 600; user-select: none; }
.cat-chips .c:hover { border-color: var(--brand); color: var(--brand); }
.cat-chips .c.on { background: var(--brand-tint); border-color: var(--brand-tint); color: var(--brand); }
.tag.orange { background: #fff1e8; color: #d9730d; }

/* ---------- 开单候选下拉：常卖置顶 + 行右价格档 ---------- */
.si-drop-item { flex-wrap: wrap; align-items: center; }
.si-drop-item .ps-price { margin-left: auto; flex: none; align-self: center; padding: 3px 8px; border: 1px solid var(--line); border-radius: 7px; font-size: 12px; font-family: inherit; background: #fff; color: var(--ink); cursor: pointer; }
.si-drop-item .ps-price:hover { border-color: var(--brand); color: var(--brand); }
.si-pt { border: 1px solid var(--line); border-radius: 7px; font-family: inherit; font-size: 12.5px; background: #fff; color: var(--ink); }

/* ---------- v2 模式覆盖（html.v2 前缀 → 特异性高于 v2.css） ---------- */
html.v2 {
  --brand: #2f6bff;
  --brand-d: #2456d6;
  --brand-tint: #eaf0ff;
  --bg: #f3f5f9;
  --ink: #1f2329;
  --muted: #6b7686;
  --line: #e8ebf0;
  --line-soft: #eef0f4;
  --radius: 12px;
  --radius-lg: 12px;
  --shadow: 0 2px 14px rgba(20, 40, 90, 0.07);
  /* 侧栏浅色化（覆盖 v2 深蓝灰） */
  --side: #ffffff;
  --side-2: #f7f9fc;
  --side-ink: #1f2329;
  --side-ink-soft: #6b7686;
  --side-line: #eceff3;
  --side-active: #eaf0ff;
}
html.v2 .sidebar { background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%); border-right: 1px solid var(--side-line); }
html.v2 .brand { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 12px 12px 10px; border-bottom: 1px solid var(--side-line); }
html.v2 .brand-logo { padding: 2px; }
html.v2 .brand-text { flex: 1; min-width: 0; }
html.v2 .brand-sub { font-size: 15px; font-weight: 800; color: #1f2329; letter-spacing: 0; }
html.v2 .sidebar .brand-name { font-weight: 800; font-size: 15px; color: #1f2329; }
html.v2 .brand-tag { font-size: 11px; color: var(--side-ink-soft); letter-spacing: 0.5px; }
html.v2 .nav-toggle { background: #fff; border: 1px solid var(--side-line); color: var(--side-ink-soft); }
html.v2 .nav-toggle:hover { background: var(--side-active); color: var(--brand); border-color: var(--side-active); }
html.v2 .nav-item { color: var(--side-ink-soft); font-weight: 600; border-radius: 9px; }
html.v2 .nav-item:hover { background: var(--bg); color: var(--brand); }
html.v2 .nav-item.active { background: var(--side-active); color: var(--brand); font-weight: 700; }
html.v2 .nav-section { color: #98a1b3; letter-spacing: 0.6px; opacity: 1; }
html.v2 .sidebar-foot { color: var(--side-ink-soft); border-top: 1px solid var(--side-line); }
html.v2 .topbar { background: #fff; border-bottom: 1px solid var(--line); }
html.v2 .panel { border-radius: 12px; box-shadow: var(--shadow); }
html.v2 .table th { background: #f4f6fa; font-weight: 700; color: #43506b; }
html.v2 .btn { border-radius: 9px; }
html.v2 .btn-primary { background: var(--brand); border-color: var(--brand); box-shadow: 0 1px 3px rgba(47, 107, 255, 0.25); }
html.v2 .btn-primary:hover { background: var(--brand-d); border-color: var(--brand-d); color: #fff; }
html.v2 .btn-link { color: var(--brand); }
html.v2 input:focus, html.v2 select:focus, html.v2 textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
html.v2 .tag { background: var(--brand-tint); color: var(--brand); }