/* ============================================================================
   theme.css — 视觉对齐 ChaoshunPay
   ----------------------------------------------------------------------------
   参考 screenshots/chaoshun-overview.png：
     · 白色侧栏 + 分组小标题 + 圆角激活项 + 底部用户卡
     · 顶栏：小号大写面包屑 + 右侧圆角胶囊状态
     · 页面标题：蓝色竖条 + 大号粗体
     · 卡片：大圆角、细边框、极淡阴影
     · 数字卡片：小图标 + 灰色标签 + 超大数字，其中一张实心蓝

   只在 style.css 之后加载，纯覆盖，不改页面结构。
   ========================================================================== */

/* ---------------- 设计令牌 ---------------- */
:root,
[data-theme="light"] {
  --bg: #f6f8fc;
  --bg-2: #ffffff;
  --bg-3: #f1f4f9;
  --line: #e8edf5;
  --line-2: #dbe3ef;
  --txt: #0f172a;
  --txt-2: #55617a;
  --txt-3: #8b96a8;
  --acc: #2563eb;
  --acc-2: #1d4ed8;
  --green: #10b981;
  --amber: #f59e0b;
  --red: #ef4444;
  --radius: 14px;

  /* chaoshun 专属 */
  --cs-radius-card: 16px;
  --cs-shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -12px rgba(16, 24, 40, .10);
  --cs-shadow-soft: 0 1px 2px rgba(16, 24, 40, .05);
  --cs-active-bg: #eef4ff;
  --cs-hilite: #2f6fe4;
}

body { background: var(--bg); color: var(--txt); }

/* ---------------- 侧栏 ---------------- */
.sidebar {
  background: #fff !important;
  border-right: 1px solid var(--line);
  box-shadow: none !important;
}

/* 品牌区：主标题 + CONTROL CENTER 小字 */
.sidebar .logo {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 18px 12px;
  font-size: 18px; font-weight: 750; letter-spacing: -.2px;
  color: var(--txt);
}
.sidebar .logo .dot {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--acc); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; box-shadow: 0 4px 10px -2px rgba(37, 99, 235, .45);
}
.sidebar .logo::after {
  content: 'CONTROL CENTER';
  position: absolute; left: 58px; top: 44px;
  font-size: 9px; font-weight: 600; letter-spacing: .12em;
  color: var(--txt-3);
}

/* 导航容器 */
.nav { padding: 8px 12px 16px; }

/* 分组标题：小号大写灰字 */
.nav-group {
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
  color: var(--txt-3);
  padding: 16px 10px 6px;
  text-transform: none;
}

/* 导航项 */
.nav-item {
  display: flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 10px; margin: 1px 0;
  border-radius: 9px;
  font-size: 13.5px; font-weight: 500;
  color: var(--txt-2);
  transition: background .14s, color .14s;
}
.nav-item:hover { background: var(--bg-3); color: var(--txt); }
.nav-item.active {
  background: var(--cs-active-bg);
  color: var(--acc-2);
  font-weight: 600;
}
.nav-item .ic {
  width: 18px; text-align: center;
  font-size: 14px; opacity: .78;
  filter: grayscale(1);
}
.nav-item.active .ic { opacity: 1; filter: none; }

/* 侧栏底部：做成用户卡 */
.sidebar-foot {
  margin: 8px 12px 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcfe;
  font-size: 11.5px; color: var(--txt-3);
}

/* ---------------- 顶栏 ---------------- */
.topbar {
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  height: 58px;
  box-shadow: none !important;
}
.topbar .crumb {
  font-size: 12px; font-weight: 600;
  letter-spacing: .06em;
  color: var(--txt-3);
}
.topbar .crumb b, .topbar .crumb .cur { color: var(--txt); font-weight: 700; }

/* 顶栏右侧胶囊 */
.topbar .right { gap: 9px; }
.topbar .right .btn,
.topbar .right .badge {
  border-radius: 999px !important;
  border: 1px solid var(--line-2);
  background: #fff;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--txt-2);
  box-shadow: none;
}
.topbar .right .badge.ok {
  color: #067a4b; background: #effaf4; border-color: #b7ebd2;
}
.topbar .right .btn:hover { background: var(--bg-3); color: var(--txt); }
.topbar .right #userBox {
  font-size: 12px; color: var(--txt-2);
  padding-left: 4px;
}

/* ---------------- 页面标题头 ---------------- */
.page-head {
  padding: 22px 26px 4px;
  display: flex; align-items: center; gap: 12px;
}
.page-head h1 {
  margin: 0;
  font-size: 24px; font-weight: 750; letter-spacing: -.4px;
  color: var(--txt);
  display: flex; align-items: center; gap: 10px;
}
.page-head h1::before {
  content: '';
  width: 3.5px; height: 22px; border-radius: 2px;
  background: var(--acc);
  display: inline-block;
}
.page-head .sub {
  font-size: 12.5px; color: var(--txt-3);
  margin-left: auto;
}

/* ---------------- 内容区 ---------------- */
.content { padding: 16px 26px 40px; }

/* 卡片 / 面板 */
.card, .panel, .kpi {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--cs-radius-card) !important;
  box-shadow: var(--cs-shadow-soft);
}
.card { padding: 18px 20px; }
.panel { padding: 16px 18px; }

/* KPI 卡片：图标 + 小标签 + 大数字 */
.kpi {
  padding: 16px 18px;
  min-height: 96px;
}
.kpi .kpi-label, .kpi .label, .kpi > div:first-child {
  font-size: 12.5px; color: var(--txt-2); font-weight: 500;
}
.kpi .kpi-value, .kpi .val, .kpi b {
  font-size: 28px; font-weight: 750; letter-spacing: -.8px;
  font-variant-numeric: tabular-nums;
}

/* 表格：更松的行高、淡灰表头 */
table { border-collapse: separate; border-spacing: 0; }
thead th {
  background: #f8fafd !important;
  font-size: 12px; font-weight: 600;
  color: var(--txt-3);
  border-bottom: 1px solid var(--line) !important;
  padding: 11px 14px !important;
  white-space: nowrap;
}
tbody td {
  padding: 12px 14px !important;
  border-bottom: 1px solid #f2f5fa !important;
  font-size: 13px;
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none !important; }
tbody tr:hover { background: #fafcff !important; }

/* 按钮：胶囊 + 细边 */
.btn {
  border-radius: 10px;
  font-weight: 550;
  border: 1px solid var(--line-2);
  background: #fff;
  color: var(--txt-2);
  transition: all .14s;
}
.btn:hover { background: var(--bg-3); color: var(--txt); }
.btn.primary {
  background: var(--acc); border-color: var(--acc);
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(37, 99, 235, .55);
}
.btn.primary:hover { background: var(--acc-2); border-color: var(--acc-2); }
.btn.sm { padding: 5px 11px; font-size: 12.5px; }

/* 小号胶囊按钮（链接页、订单页在用） */
.pill-btn {
  border-radius: 999px !important;
  border: 1px solid var(--line-2);
  background: #fff;
  color: var(--txt-2);
  padding: 3px 11px;
  font-size: 12px;
}
.pill-btn:hover { background: var(--bg-3); color: var(--txt); }
.pill-btn.danger { color: var(--red); border-color: #f6c9c9; background: #fff7f7; }

/* 徽标 */
.badge, .soft-badge {
  border-radius: 999px;
  font-weight: 550;
  letter-spacing: .01em;
}

/* 工具栏 / 筛选条 */
.toolbar {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--cs-radius-card);
  padding: 10px 14px;
  box-shadow: var(--cs-shadow-soft);
  gap: 9px;
}
.toolbar input, .toolbar select,
.input, select, input[type="search"], input[type="text"], input[type="number"], input[type="date"] {
  border-radius: 9px !important;
  border: 1px solid var(--line-2) !important;
  background: #fff !important;
  color: var(--txt) !important;
  padding: 7px 11px !important;
  font-size: 13px !important;
  outline: none;
}
.toolbar input:focus, .toolbar select:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--acc) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
}

/* 抽屉 */
.drawer {
  border-radius: 18px 0 0 18px !important;
  box-shadow: -20px 0 60px -20px rgba(16, 24, 40, .25);
}
.drawer-head { border-bottom: 1px solid var(--line); }
.drawer .kv { padding: 9px 0; border-bottom: 1px dashed #f0f4f9; }
.drawer .kv .k { color: var(--txt-3); font-size: 12.5px; }
.drawer .kv .v { color: var(--txt); font-weight: 550; }

/* 空态 */
.empty {
  color: var(--txt-3);
  font-size: 13px;
  padding: 42px 0;
  text-align: center;
}

/* 标签页栏 */
.tabbar {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 0 18px;
}
.tabbar .tab {
  border-radius: 9px 9px 0 0;
  font-size: 12.5px;
}

/* 进度条 */
.bar { background: var(--bg-3); border-radius: 999px; overflow: hidden; }
.bar i { background: var(--acc); border-radius: 999px; }

/* 深色主题保留（用户点 ◐ 时仍可用），只调底色别太黑 */
[data-theme="dark"] {
  --bg: #0d1220;
  --bg-2: #141b2c;
  --bg-3: #1a2337;
  --line: #222d44;
  --line-2: #2c3a55;
  --txt: #e8eefb;
  --txt-2: #9aabc6;
  --txt-3: #6b7d99;
}
[data-theme="dark"] .sidebar,
[data-theme="dark"] .topbar,
[data-theme="dark"] .toolbar,
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .kpi,
[data-theme="dark"] .tabbar { background: var(--bg-2); }
[data-theme="dark"] thead th { background: #182136 !important; }
[data-theme="dark"] tbody td { border-bottom-color: #1d2740 !important; }
[data-theme="dark"] tbody tr:hover { background: #172035 !important; }
[data-theme="dark"] .nav-item.active { background: rgba(47, 111, 228, .18); color: #7fb0ff; }

/* 窄屏：侧栏抽屉化时不要白边 */
@media (max-width: 900px) {
  .page-head { padding: 16px 16px 2px; }
  .page-head h1 { font-size: 20px; }
  .content { padding: 12px 16px 32px; }
}

/* ---------------- 统计卡收尾修正 ---------------- */
/* 等高：网格子项拉伸，卡片撑满 */
.grid { align-items: stretch; }
.grid > .stat-card, .grid > .card, .grid > .panel { height: 100%; }

/* 金额必须完整可读：不换行，也绝不裁切。
   卡片宽度靠下面的列数控制来保证放得下。 */
.stat-card .stat-value,
.stat-value {
  white-space: nowrap !important;
  overflow: visible;
  max-width: 100%;
}

/* 固定 4 列（1330px 内容宽 → 每张 330px，放得下 "USD 2,230,679.00"）。
   之前用 auto-fit 会让 5 张卡排成不规则的跨行马赛克，这里固定列数更稳。 */
.grid.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 1400px) { .grid.g4 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 1080px) { .grid.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 720px)  { .grid.g4 { grid-template-columns: 1fr !important; } }
.grid.g4 .stat-value { font-size: 23px; letter-spacing: -.6px; }
.grid.g4 .stat-sub { font-size: 11px; }

/* 第一张卡带进度条时不要把高度撑歪 */
.stat-card .bar { max-width: 100%; }