/* ==========================================================================
   LensCabin 后台 · 页面级骨架 v2（pv2）
   --------------------------------------------------------------------------
   目的：把「一堆独立 card 堆叠」重排为「页头 → 指标条带 → 面板」的层级结构。
   用法：<div class="merchant-content pv2"> / <div class="admin-content pv2">
   约束：纯增量。全部类名带 pv2- 前缀，不改既有 .card/.table 定义，
        不动任何 th:* 属性、id、name、onclick。昼夜双主题跟随 theme.css 变量。
   ========================================================================== */

/* ---------- 0. 顶栏标题去重 ---------- */
/* 只有本页已渲染 .pv2-head（自建页头）时才隐藏顶栏同名小标题，
   否则没有页头的页面会变成无标题。别放宽这个条件。 */
body:has(.pv2-head) .admin-header .page-title { display: none; }

/* ==========================================================================
   L1 · 结构保持型版式升级（适用于尚未重排 DOM 的页面）
   --------------------------------------------------------------------------
   思路：不动 HTML，只把「Bootstrap 网格 + 独立 card」在视觉上重解释成
        「指标条带 + 面板」。这样 300+ 页零结构风险地统一版式。
   ========================================================================== */

/* ---------- L1-1. KPI 网格 → 指标条带 ---------- */
/* 只在「一行里放着若干 .fs-4 大数字卡」时命中，普通功能卡片行不受影响 */
.pv2 .row:has(> [class*="col-"] .fs-4) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 16px !important;
  overflow: hidden;
}
.pv2 .row:has(> [class*="col-"] .fs-4) > [class*="col-"] {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
  border-left: 1px solid var(--border);
  min-width: 0;
}
.pv2 .row:has(> [class*="col-"] .fs-4) > [class*="col-"]:first-child { border-left: none; }
/* 拆掉每格自己的卡片外壳 */
.pv2 .row:has(> [class*="col-"] .fs-4) > [class*="col-"] > .card {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  margin: 0 !important;
  height: 100%;
}
.pv2 .row:has(> [class*="col-"] .fs-4) > [class*="col-"] > .card > .card-body {
  padding: 14px 16px 13px !important;
  text-align: left !important;
}
/* 标签小字 + 数值大字 */
.pv2 .row:has(> [class*="col-"] .fs-4) > [class*="col-"] .card-body > div:first-child {
  font-size: 11.5px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  color: var(--text-3) !important;
  margin-bottom: 6px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pv2 .row:has(> [class*="col-"] .fs-4) > [class*="col-"] .fs-4 {
  font-size: 22px !important;
  line-height: 1.15 !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: tabular-nums;
}
/* 指标数字统一主文字色：Bootstrap 的 primary/info/warning/purple 同排会显得零碎，
   只保留 danger / success 用于表达负向与正向 */
.pv2 .row:has(> [class*="col-"] .fs-4) > [class*="col-"] .fs-4.text-primary,
.pv2 .row:has(> [class*="col-"] .fs-4) > [class*="col-"] .fs-4.text-info,
.pv2 .row:has(> [class*="col-"] .fs-4) > [class*="col-"] .fs-4.text-warning,
.pv2 .row:has(> [class*="col-"] .fs-4) > [class*="col-"] .fs-4.text-purple,
.pv2 .row:has(> [class*="col-"] .fs-4) > [class*="col-"] .fs-4.text-muted {
  color: var(--text) !important;
}

/* ---------- L1-2. 表格卡 → 面板 ---------- */
/* 表头吸附、去斑马、行高统一；卡片本体退化成面板 */
.pv2 .card:has(> .card-body > .table-responsive),
.pv2 .card:has(> .card-body.p-0 > .table-responsive),
.pv2 .card:has(> .card-body > table) {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden;
}
.pv2 .card > .card-body.p-0 { padding: 0 !important; }
.pv2 .table-responsive { max-height: none; }

/* 纯操作栏卡：压薄垂直内边距，避免占掉一整条高度 */
.pv2 .card:has(.btn):not(:has(table)):not(:has(form)) > .card-body {
  padding: 10px 16px !important;
}

/* ---------- L1-3. 分页条 → 面板底栏 ---------- */
.pv2 > .d-flex.justify-content-end:has(.pagination),
.pv2 .container-fluid > .d-flex.justify-content-end:has(.pagination) {
  background: transparent !important;
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
  padding: 11px 16px !important;
  margin-top: 0 !important;
  font-size: 12px;
}
.pv2 .pagination .page-link {
  font-size: 12px;
  color: var(--text-2);
  border-color: var(--border);
  background: var(--surface);
  padding: 5px 10px;
}
.pv2 .pagination .page-item.active .page-link {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.pv2 .pagination .page-item.disabled .page-link { color: var(--text-3); opacity: .55; }

/* ---------- L1-4. 筛选类卡片：内边距与控件密度 ---------- */
.pv2 .card:has(form) > .card-body { padding: 14px 16px !important; }
.pv2 .card:has(form) .form-label {
  font-size: 11.5px !important;
  font-weight: 500;
  color: var(--text-3);
  margin-bottom: 4px;
}
.pv2 .form-control-sm,
.pv2 .form-select-sm { font-size: 12.5px; }

/* ---------- L1-5. 页面内小标题统一 ---------- */
.pv2 .card-body > h5,
.pv2 .card-header h5 {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.pv2 .card-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 16px !important;
  font-size: 13px;
  font-weight: 600;
}

/* 顶栏标题升级：小灰字 → 页级标题（未插自建页头的页面靠这条拿到层级） */
body:has(.pv2) .admin-header .page-title {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* ---------- 页面容器 ---------- */
/* padding / 最大宽只在有自建页头时生效，避免影响尚未重排的页面 */
.pv2 { min-width: 0; }
.pv2:has(> .pv2-head) {
  padding: 20px 24px 40px;
  max-width: 1680px;
}

/* ---------- 1. 页头 ---------- */
.pv2-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 2px 2px 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.pv2-head-titles { min-width: 0; }
.pv2-title {
  margin: 0;
  font-size: 19px;
  line-height: 1.35;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pv2-sub {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-3);
}
.pv2-sub b { color: var(--text-2); font-weight: 600; }
.pv2-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* 标题旁的计数徽标 */
.pv2-count {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

/* ---------- 2. 指标条带（替代 6 张独立 KPI 卡） ---------- */
.pv2-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  overflow: hidden;
}
.pv2-stat {
  padding: 14px 16px 13px;
  border-left: 1px solid var(--border);
  min-width: 0;
}
.pv2-stat:first-child { border-left: none; }
.pv2-stat-lbl {
  display: block;
  font-size: 11.5px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-3);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pv2-stat-val {
  display: block;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pv2-stat-val small {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  margin-left: 3px;
  letter-spacing: 0;
}
/* 指标强调色（红=金额/负面、绿=正向） */
.pv2-stat-val.is-accent { color: var(--accent-text); }
.pv2-stat-val.is-ok     { color: var(--success-text); }
.pv2-stat-delta {
  display: inline-block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}
.pv2-stat-delta.up   { color: var(--ok-fg, #1c7a4a); }
.pv2-stat-delta.down { color: var(--danger-fg, #b3322a); }

/* ---------- 3. 面板（替代独立 card 堆叠） ---------- */
.pv2-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  overflow: hidden;
}
.pv2-panel:last-child { margin-bottom: 0; }

/* 面板头：左侧标题 / 右侧操作，底部分隔线形成表头感 */
.pv2-panel-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
}
.pv2-panel-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.pv2-panel-title i { color: var(--text-3); font-size: 12.5px; }
.pv2-panel-meta {
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pv2-panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.pv2-panel-bd { padding: 16px; }
.pv2-panel-bd.is-flush { padding: 0; }
.pv2-panel-bd.is-tight { padding: 10px 16px; }

/* 可折叠面板头（筛选区用） */
.pv2-panel-hd.is-toggle { cursor: pointer; user-select: none; }
.pv2-panel-hd.is-toggle:hover { background: var(--surface-2); }
.pv2-chevr {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-3);
  transition: transform .18s ease;
}
.pv2-panel.is-collapsed .pv2-chevr { transform: rotate(-90deg); }
.pv2-panel.is-collapsed .pv2-panel-bd { display: none; }

/* ---------- 4. 筛选区 ---------- */
/* 把原本分散的两三个 form 收进一张面板，行间用细线分开 */
.pv2-filters .form-label,
.pv2-filters label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-3);
  margin-bottom: 4px;
}
.pv2-filters .form-control,
.pv2-filters .form-select {
  font-size: 12.5px;
  border-color: var(--border);
  background: var(--surface);
  color: var(--text);
}
.pv2-filters .form-control:focus,
.pv2-filters .form-select:focus {
  border-color: var(--accent-border);
  box-shadow: var(--ring);
}
/* 两个 form 之间的分隔 */
.pv2-filters .pv2-form-sep {
  height: 1px;
  background: var(--border);
  margin: 12px 0;
}

/* ---------- 5. 表格密度（在 pv2 内生效，不污染全局 .table） ---------- */
.pv2 .table > thead > tr > th {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--table-head-fg);
  background: var(--table-head-bg);
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  vertical-align: middle;
}
.pv2 .table > tbody > tr > td {
  padding: 11px 12px;
  font-size: 12.5px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.pv2 .table > tbody > tr:last-child > td { border-bottom: none; }
/* 去掉斑马纹，改用 hover 提示行位置 */
.pv2 .table > tbody > tr:nth-child(odd) > td,
.pv2 .table > tbody > tr:nth-child(even) > td { background: transparent; }
.pv2 .table > tbody > tr:hover > td { background: var(--surface-2); }
.pv2 .table > tbody > tr.is-selected > td { background: var(--accent-dim); }
.pv2 .table-responsive { border-radius: 0; }

/* 数字列等宽对齐 */
.pv2 .num,
.pv2 .amount-cell { font-variant-numeric: tabular-nums; }

/* pv2 内的次要文字统一到 --text-2，避免 Bootstrap text-muted 在深色底偏暗 */
.pv2 .text-muted { color: var(--text-2) !important; }

/* 进度条统一成细圆条（原 6px 直角条与新密度不协调） */
.pv2 .progress {
  height: 5px !important;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.pv2 .progress-bar {
  border-radius: var(--radius-pill);
  font-size: 0;
  min-width: 2px;
}

/* ---------- 6. 空状态 ---------- */
.pv2-empty {
  padding: 56px 20px;
  text-align: center;
  color: var(--text-3);
}
.pv2-empty-ico {
  display: block;
  font-size: 30px;
  margin-bottom: 10px;
  opacity: .55;
}
.pv2-empty-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 4px;
}
.pv2-empty-desc { font-size: 12px; color: var(--text-3); }
.pv2-empty-actions { margin-top: 14px; }

/* ---------- 7. 分页 ---------- */
.pv2-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-3);
  flex-wrap: wrap;
}
.pv2-pager .pagination { margin: 0; }
.pv2-pager .page-link {
  font-size: 12px;
  color: var(--text-2);
  border-color: var(--border);
  background: var(--surface);
  padding: 5px 10px;
}
.pv2-pager .page-item.active .page-link {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.pv2-pager .page-item.disabled .page-link { color: var(--text-3); opacity: .55; }

/* ---------- 8. 详情页双栏（描述列表） ---------- */
.pv2-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}
.pv2-cols > .pv2-main { min-width: 0; }

.pv2-dl {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px 14px;
  font-size: 12.5px;
  align-items: baseline;
}
.pv2-dl dt {
  color: var(--text-3);
  font-weight: 500;
  font-size: 12px;
}
.pv2-dl dd {
  margin: 0;
  color: var(--text);
  min-width: 0;
  word-break: break-word;
}

/* ---------- 9. 表单页：分组卡片 ---------- */
.pv2-fieldset { margin-bottom: 16px; }
.pv2-fieldset:last-child { margin-bottom: 0; }
.pv2-fieldset-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 7px;
}
.pv2-form-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 5px;
}
.pv2-form-help {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 4px;
}

/* 表单页底部固定操作条 */
.pv2-formfoot {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  z-index: 5;
}

/* ---------- 10. 看板页网格 ---------- */
.pv2-grid {
  display: grid;
  gap: 16px;
}
.pv2-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pv2-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pv2-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pv2-chart-box { padding: 4px 2px 0; min-height: 220px; }

/* ---------- 11. 工具类 ---------- */
.pv2-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.pv2-gap-8 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pv2-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.pv2-muted { color: var(--text-3); }
.pv2-nowrap { white-space: nowrap; }
.pv2-hr { height: 1px; background: var(--border); border: 0; margin: 14px 0; }

/* ---------- 13. 面板内的 Bootstrap 卡头/卡脚（L2 重排后的页面用） ---------- */
/* 列表卡外壳已换成 .pv2-panel，里面的 card-header / card-footer 需要跟随主题，
   否则深色下会出现白条（Bootstrap 默认白底）。 */
.pv2-panel > .card-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text);
  padding: 12px 16px !important;
  font-size: 13.5px;
  font-weight: 600;
}
.pv2-panel > .card-header h1,
.pv2-panel > .card-header h2,
.pv2-panel > .card-header h3,
.pv2-panel > .card-header h4,
.pv2-panel > .card-header h5 {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.pv2-panel .card-footer {
  background: transparent !important;
  border-top: 1px solid var(--border) !important;
  color: var(--text-3);
  padding: 11px 16px !important;
  font-size: 12px;
}
.pv2-panel > .pv2-panel-bd.is-flush > .card-footer:last-child { border-radius: 0; }

/* ---------- 14. 表单页 ---------- */
/* 表单页正文收窄到 1240px：字段不被拉到 2000px 宽，视线移动距离可控。
   用双类 + :has() 提高优先级，压过 §页面容器 的 1680px。 */
.pv2.pv2-form,
.pv2.pv2-form:has(> .pv2-head) {
  max-width: 1240px;
}
/* 表单里的卡片之间留一点呼吸，卡片头统一成面板头样式 */
.pv2-form .card + .card,
.pv2-form .form-card + .form-card { margin-top: 14px; }
.pv2-form .card-header {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
/* 吸附操作条：与上方内容的间距 + 顶部细线 */
.pv2-form .pv2-formfoot {
  margin-top: 16px;
}
/* 表单小标签统一（原 `.form-label.small` 字号参差） */
.pv2-form .form-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 5px;
}
.pv2-form .form-control,
.pv2-form .form-select,
.pv2-form .form-control-sm,
.pv2-form .form-select-sm {
  font-size: 13px;
  border-color: var(--border);
  background: var(--surface);
  color: var(--text);
}
.pv2-form .form-control:focus,
.pv2-form .form-select:focus {
  border-color: var(--accent-border);
  box-shadow: var(--ring);
}
.pv2-form .form-text,
.pv2-form small.text-muted { color: var(--text-3); font-size: 11.5px; }

/* ---------- 12. 响应式 ---------- */
@media (max-width: 1200px) {
  .pv2-cols { grid-template-columns: minmax(0, 1fr); }
  .pv2-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv2-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .pv2 { padding: 14px 14px 32px; }
  .pv2-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .pv2-head-actions { justify-content: flex-start; }
  .pv2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv2-stat { border-left: none; border-top: 1px solid var(--border); }
  .pv2-stat:nth-child(1),
  .pv2-stat:nth-child(2) { border-top: none; }
  .pv2-stat:nth-child(even) { border-left: 1px solid var(--border); }
  .pv2-grid.cols-2,
  .pv2-grid.cols-3,
  .pv2-grid.cols-4 { grid-template-columns: minmax(0, 1fr); }
}