/* ============================================================
   劲仪经营服务平台 · 统一主题 v2
   视觉参考：抖音生意经（字节 Arco Design 色板）

   关键做法：
   1) 先覆盖旧样式表定义的 CSS 变量（--navy / --green / --brand ...）
      → 所有用 var() 的老组件自动换色，不用逐个改
   2) 再精准修几个写死颜色的组件（KPI 卡、徽标、表格）
   3) 统一圆角 / 间距 / 容器宽度

   加载位置：shared/base.html </head> 最末
   ============================================================ */

/* ── 1. 覆盖旧变量：这一步最关键 ────────────────────────── */
:root,
.p1-page {
  /* 主色：抖音蓝 */
  --brand: #165DFF;
  --brand-soft: #E8F3FF;

  /* 深色不再是藏青，改成中性近黑 */
  --navy: #1D2129;
  --navy-deep: #10141A;

  /* 绿色退回"功能性绿"，不再当主色用 */
  --green: #00B42A;
  --green-soft: #E8FFEA;
  --gold: #FF7D00;
  --gold-soft: #FFF7E8;
  --red: #F53F3F;
  --red-soft: #FFECE8;

  /* 文字三级 */
  --ink: #1D2129;
  --muted: #86909C;

  /* 线框与底色 */
  --line: #E5E6EB;
  --line-soft: #F2F3F5;
  --bg: #F2F5FA;
  --card: #FFFFFF;

  /* 形状 */
  --radius: 8px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);

  /* 我自己的令牌 */
  --dy-primary: #165DFF;
  --dy-primary-hover: #4080FF;
  --dy-primary-light: #E8F3FF;
  --dy-primary-lighter: #F2F7FF;
  --dy-success: #00B42A;
  --dy-warning: #FF7D00;
  --dy-danger: #F53F3F;
  --dy-text-1: #1D2129;
  --dy-text-2: #4E5969;
  --dy-text-3: #86909C;
  --dy-text-4: #C9CDD4;
  --dy-border: #E5E6EB;
  --dy-border-light: #F2F3F5;
  --dy-fill: #F7F8FA;
  --dy-fill-2: #F2F3F5;
  --dy-radius: 8px;
  --dy-radius-lg: 12px;
}

/* ── 2. 页面骨架 ──────────────────────────────────── */
html, body {
  background: var(--bg) !important;
  color: var(--ink) !important;
  -webkit-font-smoothing: antialiased;
}

/* 内容居中 + 最大宽度（抖音那种"收着"的感觉） */
.page-container,
.page-shell {
  max-width: var(--content-width, 1440px);
  margin: 0 auto !important;
  padding: 20px 24px 40px !important;
  background: transparent !important;
}
@media (max-width: 900px) {
  .page-container,
  .page-shell { padding: 14px 12px 32px !important; }
}

/* ── 3. 顶栏与导航 ────────────────────────────────── */
.site-header {
  background: #fff !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none !important;
  color: var(--ink) !important;
}
.site-header .header-inner {
  max-width: var(--content-width, 1440px);
  margin: 0 auto !important;
  padding: 12px 24px !important;
  min-height: 0 !important;
}
/* 品牌区：白底要重设字号/颜色/分隔线（原样式是给深色底写的） */
.site-header .product-brand {
  color: var(--ink) !important;
  gap: 12px !important;
}
.site-header .product-brand > strong {
  font-size: 22px !important;
  letter-spacing: 0.06em !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}
.site-header .product-brand > span {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1D2129 !important;
  border-left: 1px solid var(--line) !important;
  padding-left: 12px !important;
}
.site-header .product-brand small {
  display: block !important;
  color: var(--muted) !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  margin-top: 2px !important;
}
.site-header .user-info strong { color: var(--ink) !important; }
.site-header .user-info span { color: var(--muted) !important; }
.site-header .header-action,
.site-header .header-logout button {
  color: var(--text-2, #4E5969) !important;
  background: transparent !important;
  border: none !important;
  font-size: 13px !important;
}
.site-header .header-action:hover { color: var(--brand) !important; }

.navigation-wrap {
  background: #fff !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none !important;
}
/* [2026-11-02 UI] 菜单栏：拉开间距 + 按钮背景色
   原样是 padding:11px 0 + background:transparent，导致菜单挤在一起、没有按钮感。
   改为胶囊按钮：左右 16px 内边距、浅灰底、圆角，悬停/当前页变蓝底。 */
.product-navigation {
  gap: 8px !important;
  align-items: center !important;
}
.product-navigation a,
.nav-more summary {
  color: #4E5969 !important;
  background: #F2F3F5 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 9px 16px !important;
  border-radius: 8px !important;
  border-bottom: 0 !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  box-shadow: none !important;
  transition: background-color .15s ease, color .15s ease !important;
}
.product-navigation a:hover,
.nav-more summary:hover {
  color: var(--brand) !important;
  background: #E8F3FF !important;
}
.has-business-navigation .product-navigation a {
  min-height: 38px !important;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}
.navigation-inner {
  max-width: var(--content-width, 1440px);
  margin: 0 auto !important;
  padding: 0 24px !important;
  min-height: 0 !important;
}
/* 当前页：蓝底高亮（不再用底部下划线，与按钮风格统一） */
.product-navigation a[aria-current="page"] {
  color: var(--brand) !important;
  font-weight: 600 !important;
  background: #E8F3FF !important;
  box-shadow: none !important;
}
.navigation-secondary { background: #fff !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-hover) !important; }
.navigation-secondary a { color: #4E5969 !important; }
.navigation-secondary a:hover { color: var(--brand) !important; background: var(--brand-soft) !important; }
.environment-badge {
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
  border: none !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  padding: 2px 8px !important;
}

/* ── 4. 页头 ─────────────────────────────────────── */
.page-header {
  background: #fff !important;
  border-radius: var(--dy-radius-lg) !important;
  padding: 20px 24px !important;
  margin-bottom: 16px !important;
  box-shadow: var(--shadow) !important;
  border: none !important;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}
.page-header h1 {
  color: var(--ink) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.page-header p { color: var(--muted) !important; font-size: 13px !important; }
.page-header .eyebrow {
  color: var(--muted) !important;
  font-size: 12px !important;
  letter-spacing: 0.04em;
}
.page-header .data-date { text-align: right; }
.page-header .data-date span { color: var(--muted) !important; font-size: 12.5px; display: block; }
.page-header .data-date strong { color: var(--ink) !important; font-size: 13px; }

/* ── 5. 卡片 ─────────────────────────────────────── */
.card {
  background: #fff !important;
  border: none !important;
  border-radius: var(--dy-radius-lg) !important;
  box-shadow: var(--shadow) !important;
  padding: 20px 22px !important;
}
.card h2, .card h3 {
  color: var(--ink) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  margin-bottom: 12px !important;
}
.card-head { border-bottom: 1px solid var(--line-soft) !important; padding-bottom: 12px !important; margin-bottom: 4px !important; }

/* ── 6. 经营汇总区：整体做成卡片，内部指标用浅色小块 ──────── */
.abcf-summary {
  background: #fff !important;
  border-radius: var(--dy-radius-lg) !important;
  box-shadow: var(--shadow) !important;
  padding: 18px 20px !important;
  margin: 0 0 16px !important;
}
/* 汇总区顶部那句「全服务范围基准…」当卡片小标题 */
.abcf-summary > .status-note:first-child {
  margin: 0 0 14px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px !important;
  color: var(--muted) !important;
}
/* 指标小块：浅灰底、无边框，像抖音的指标磁贴 */
.mini-kpi,
.abcf-summary .mini-kpi,
.p1-page .p1-kpis .mini-kpi {
  background: var(--dy-fill) !important;
  border: 1px solid transparent !important;
  border-top: 1px solid transparent !important;
  border-radius: var(--dy-radius) !important;
  color: var(--muted) !important;
  font-size: 12.5px !important;
  padding: 14px 16px !important;
  transition: background 0.15s, border-color 0.15s;
}
.mini-kpi:hover,
.abcf-summary .mini-kpi:hover {
  background: #fff !important;
  border-color: var(--brand) !important;
}
.mini-kpi b,
.p1-page .p1-kpis .mini-kpi b {
  color: var(--ink) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  margin: 6px 0 2px !important;
}
.mini-kpi small { color: var(--muted) !important; font-size: 11.5px !important; }
.abcf-kpis a:hover { outline: none !important; }
/* 汇总区底部的「平均每单…」 */
.abcf-summary .abcf-average {
  margin: 12px 0 0 !important;
  padding: 0 !important;
  border-top: 1px solid var(--line-soft);
  padding-top: 12px !important;
}
.abcf-average summary { color: #4E5969 !important; font-size: 12.5px !important; cursor: pointer; }

/* ── 7. 表格 ─────────────────────────────────────── */
table { border-color: var(--line) !important; }
th {
  background: var(--dy-fill) !important;
  color: #4E5969 !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  border-color: var(--line) !important;
  padding: 10px 12px !important;
}
td {
  color: var(--ink) !important;
  border-color: var(--line-soft) !important;
  padding: 10px 12px !important;
  font-size: 13.5px !important;
}
tr:hover td { background: var(--dy-primary-lighter) !important; }

/* ── 8. 按钮与表单 ────────────────────────────────── */
.button {
  border-radius: var(--dy-radius) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
  transition: all 0.15s;
}
.button-primary {
  background: var(--brand) !important;
  border: 1px solid var(--brand) !important;
  color: #fff !important;
}
.button-primary:hover {
  background: var(--dy-primary-hover) !important;
  border-color: var(--dy-primary-hover) !important;
}
.button-secondary {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  color: #4E5969 !important;
}
.button-secondary:hover {
  border-color: var(--brand) !important;
  color: var(--brand) !important;
  background: var(--brand-soft) !important;
}
.filter-bar {
  background: #fff !important;
  border-radius: var(--dy-radius-lg) !important;
  padding: 12px 18px !important;
  box-shadow: var(--shadow) !important;
  border: none !important;
  margin-bottom: 16px !important;
}
.filter-bar label { color: #4E5969 !important; font-size: 13px !important; }
input, select, textarea {
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  color: var(--ink) !important;
  background: #fff !important;
  font-family: inherit !important;
  font-size: 13.5px !important;
  padding: 7px 10px !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--brand) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px var(--brand-soft) !important;
}

/* ── 9. 徽标 / 标签 ───────────────────────────────── */
.pill,
.tag,
.badge {
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 2px 8px !important;
  border: none !important;
}

/* ── 10. 说明文字 ─────────────────────────────────── */
.status-note,
.metric-help,
.desc,
.abcf-comparison {
  color: var(--muted) !important;
  font-size: 12.5px !important;
  line-height: 1.7;
}
/* 直接挂在页面上的孤立说明（不在卡片里）：缩小、加下边距 */
.page-container > .status-note,
.page-shell > .status-note {
  font-size: 12px !important;
  color: #A1A6AD !important;
  margin: 0 0 12px !important;
}
.status-note { background: transparent !important; border: none !important; padding: 0 !important; }
.metric-help { background: #fff !important; border-radius: var(--dy-radius) !important; padding: 12px 16px !important; box-shadow: var(--shadow) !important; }
.metric-help summary { color: #4E5969 !important; font-size: 13px !important; cursor: pointer; }
.notice {
  background: var(--brand-soft) !important;
  border: 1px solid #BEDAFF !important;
  border-radius: var(--dy-radius) !important;
  color: #1D2129 !important;
  padding: 12px 16px !important;
}

/* ── 11. 链接 ─────────────────────────────────────── */
a { color: var(--brand); }
a:hover { color: var(--dy-primary-hover); }
.detail-link { color: var(--brand) !important; font-size: 13px; text-decoration: none; }
.detail-link:hover { text-decoration: underline; }

/* ── 12. 区域版图 ────────────────────────────────── */
.abcf-regions {
  background: #fff !important;
  border-radius: var(--dy-radius-lg) !important;
  box-shadow: var(--shadow) !important;
  border: none !important;
  padding: 20px 22px !important;
  margin-bottom: 16px !important;
}
.abcf-regions h2 { font-size: 15px !important; }
.abcf-regions [data-regional-metric] {
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #4E5969 !important;
  font-size: 13px !important;
  padding: 7px 14px !important;
  cursor: pointer;
}
.abcf-regions [data-regional-metric]:hover { border-color: var(--brand) !important; color: var(--brand) !important; }
.abcf-regions [data-regional-metric].active {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}
.abcf-regions .abcf-region-panel {
  background: var(--dy-fill) !important;
  border-radius: var(--dy-radius) !important;
  padding: 16px 18px !important;
}
.abcf-regions .abcf-region-row {
  background: #fff !important;
  border: 1px solid var(--line-soft) !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
  margin-bottom: 6px !important;
}
.abcf-regions .abcf-region-row:hover { border-color: var(--brand) !important; background: var(--dy-primary-lighter) !important; }
.abcf-regions .abcf-bar { height: 5px !important; background: var(--dy-fill-2) !important; border-radius: 3px !important; overflow: hidden; }
.abcf-regions .abcf-bar span { display: block; height: 100%; background: var(--brand) !important; border-radius: 3px; }
.abcf-regions .abcf-cell { border: 1px solid var(--line-soft) !important; border-radius: var(--dy-radius) !important; }
.abcf-regions .abcf-selection { border: 1px solid var(--line) !important; border-radius: var(--dy-radius) !important; }

/* ── 13. 页脚 ─────────────────────────────────────── */
.site-footer {
  background: transparent !important;
  color: var(--muted) !important;
  border-top: 1px solid var(--line) !important;
  font-size: 12px !important;
  padding: 20px 0 !important;
}

/* ── 14. 移动端 ───────────────────────────────────── */
@media (max-width: 640px) {
  .page-header { padding: 14px 16px !important; border-radius: var(--dy-radius) !important; }
  .page-header h1 { font-size: 19px !important; }
  .card { padding: 14px 16px !important; border-radius: var(--dy-radius) !important; }
  .mini-kpi, .abcf-summary .mini-kpi { padding: 12px 14px !important; }
  .mini-kpi b, .p1-page .p1-kpis .mini-kpi b { font-size: 20px !important; }
  th, td { padding: 8px 8px !important; font-size: 12.5px !important; }
  .filter-bar { padding: 10px 12px !important; }
  .button { padding: 8px 12px !important; }
}