/* ============================================================
   方太驾驶舱 · 统一液态玻璃主题（覆盖层）
   挂在每个看板页最后一个 <link>，不改动原有结构与脚本。
   与主页 home.html 的黑底玻璃风格保持一致。
   ============================================================ */

/* ---------- 1. 变量翻转：三套体系统一成黑底玻璃 ---------- */
:root {
  /* dashboard-reference 体系 */
  --bg: #000000;
  --surface: rgba(255, 255, 255, 0.028);
  --surface-raised: rgba(255, 255, 255, 0.05);
  --surface-muted: rgba(255, 255, 255, 0.016);
  --line: rgba(255, 255, 255, 0.12);
  --line-soft: rgba(255, 255, 255, 0.08);
  --text: #f4f7fa;
  --muted: rgba(255, 255, 255, 0.55);
  --subtle: rgba(255, 255, 255, 0.38);

  /* innovation-dashboard 体系 */
  --ink: #f4f7fa;
  --surface-soft: rgba(255, 255, 255, 0.04);
  --line-strong: rgba(255, 255, 255, 0.16);
  --nav: rgba(255, 255, 255, 0.03);
  --nav-active: rgba(47, 156, 129, 0.35);
  --primary-soft: rgba(23, 107, 91, 0.28);
  --self-soft: rgba(47, 156, 129, 0.22);
  --shadow: none;

  /* dashboard-prototype / reseller-dashboard 体系 */
  --color-background: #000000;
  --color-surface: rgba(255, 255, 255, 0.028);
  --color-surface-subtle: rgba(255, 255, 255, 0.045);
  --color-foreground: #f4f7fa;
  --color-muted: rgba(255, 255, 255, 0.55);
  --color-border: rgba(255, 255, 255, 0.12);
  --color-grid: rgba(255, 255, 255, 0.08);
  --color-primary-soft: rgba(37, 99, 235, 0.22);
  --color-accent-soft: rgba(234, 88, 12, 0.2);
  --color-success-soft: rgba(8, 122, 85, 0.22);
  --color-danger-soft: rgba(194, 65, 58, 0.22);
}

/* ---------- 2. 全局底色与文字 ---------- */
html, body {
  background: #000 !important;
  color: var(--text, #f4f7fa);
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 40% at 50% -5%, rgba(120, 160, 255, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 35% at 80% 110%, rgba(255, 150, 80, 0.05) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
body > * { position: relative; z-index: 1; }

/* ---------- 3. 面板玻璃化 ---------- */
.panel,
.metric-card,
.home-core-card,
.chart-panel,
.table-panel,
.placeholder-page .panel {
  background: rgba(255, 255, 255, 0.028) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: transform 0.35s cubic-bezier(0.22, 0.68, 0, 1), background 0.35s, border-color 0.35s;
}
.panel:hover,
.metric-card:hover {
  background: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  transform: translateY(-3px);
}

/* ---------- 4. 导航 tabs 药丸玻璃化 ---------- */
.page-tabs {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 8px 14px !important;
}
.tab-button, .tab-link, .nav-button {
  border-radius: 999px !important;
  border-color: transparent !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.75) !important;
  transition: background 0.25s, color 0.25s;
}
.tab-button:hover, .tab-link:hover, .nav-button:hover { color: #fff !important; background: rgba(255, 255, 255, 0.06) !important; }
.tab-button.active, .tab-link.active, .nav-button.active,
.tab-button[aria-current], .tab-link[aria-current] {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

/* ---------- 5. 控件（筛选、下拉、输入、按钮） ---------- */
button, select, input, .field-control, .time-button, .jump-button, .sidebar-action {
  border-radius: 999px;
}
.field-control, select, input[type="date"], input[type="search"], input[type="text"] {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #f4f7fa !important;
}
.select-popover, .select-list {
  background: rgba(10, 12, 16, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ---------- 6. 表格 ---------- */
table { border-color: rgba(255, 255, 255, 0.1) !important; }
th {
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.75) !important;
}
td { border-color: rgba(255, 255, 255, 0.07) !important; }
tr:hover td { background: rgba(255, 255, 255, 0.03); }

/* ---------- 7. 标题排版统一（编号衬线斜体点缀） ---------- */
.section-heading span,
.section-index,
.section-kicker,
.nav-index,
.module-index {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-style: italic;
  letter-spacing: 2px;
}
.section-kicker { color: rgba(255, 255, 255, 0.4) !important; text-transform: uppercase; }

/* ---------- 8. 面板进场动画（一次性，不影响交互） ---------- */
@keyframes glassRise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
.panel, .metric-card {
  animation: glassRise 0.7s cubic-bezier(0.22, 0.68, 0, 1) backwards;
}
.panel:nth-child(2), .metric-card:nth-child(2) { animation-delay: 0.08s; }
.panel:nth-child(3), .metric-card:nth-child(3) { animation-delay: 0.16s; }
.panel:nth-child(4), .metric-card:nth-child(4) { animation-delay: 0.24s; }
.panel:nth-child(5), .metric-card:nth-child(5) { animation-delay: 0.32s; }

/* ---------- 9. 滚动条 ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  border: 2px solid #000;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.25); }

/* ---------- 10. 筛选控件适配修正 ----------
   外层药丸统一承载「标签 + 值」，内层 input/select 去框，
   避免双层边框；多选框高度自适应，避免选中值被截断。 */
.field-control {
  gap: 2px;
  padding: 9px 14px 11px !important;
}
.field-control > span {
  margin: 0 0 2px !important;
}
.field-control input,
.field-control select,
.field-control input[type="date"] {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0;
  background: transparent !important;
}
.field-control select {
  padding-right: 18px !important;
}
.multi-select summary {
  height: auto !important;
  min-height: 0 !important;
  padding: 9px 30px 11px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.04) !important;
}
.multi-select summary::after {
  top: 50%;
  bottom: auto;
  right: 17px;
  margin-top: -4px;
}

/* ---------- 11. 板块顶部背景（统一星空底 + 压暗渐变，保证文字可读） ---------- */
.topbar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 22px;
  padding: 30px 34px 36px;
}
.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(4, 6, 10, 0.30) 0%, rgba(4, 6, 10, 0.55) 55%, rgba(4, 6, 10, 0.94) 100%),
    url("./dashboard-reference/assets/home-ai-cockpit-bg.png") center 28% / cover no-repeat;
}

/* ---------- 12. 各看板大标题统一衬线艺术体（与主页/原版一致） ---------- */
.topbar h1 {
  font-family: 'Noto Serif SC', 'Songti SC', 'STSong', Georgia, serif !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}