/* pages-construction.css —— 「建设中」四页（实时数据 / 今日预抵 / 已收款 / 财务对账）
 *
 * ⚠️ 本文件是**新增样式**，当前 index.html **尚未引用**（按任务约束不改宿主文件）。
 *    wiring Agent 在 css/pages.css 之后加一行即可：
 *      <link rel="stylesheet" href="./css/pages-construction.css" />
 *
 * 命名空间：全部规则限定在 .pages-construction / .pages-ct-* 下，不触碰 styles.css、
 * css/pages.css、css/pages-*.css 与 board2.css 的既有类名；删除本文件不会影响其它页面。
 *
 * 设计基线：沿用 pages.css 的品牌变量（--pg-*，本文件用 var(--pg-x, fallback) 兜底），
 * 桌面优先；≤899px 给一套单列兜底（页面本身只在 ≥900px 挂载，窄屏样式用于预览/窗口收缩）。
 */

.pages-construction {
  --ct-brand: var(--pg-brand, #087c61);
  --ct-brand-deep: var(--pg-brand-deep, #0b3d66);
  --ct-ink: var(--pg-ink, #193b34);
  --ct-ink-soft: var(--pg-ink-soft, #31546e);
  --ct-muted: var(--pg-muted, #7c9188);
  --ct-line: var(--pg-line, #dbe7f2);
  --ct-line-soft: var(--pg-line-soft, #edf3f9);
  --ct-surface: var(--pg-surface, #ffffff);
  --ct-ok: var(--pg-ok, #087c61);
  --ct-ok-bg: var(--pg-ok-bg, #e4f5ec);
  --ct-warn: var(--pg-warn, #b5762a);
  --ct-warn-bg: var(--pg-warn-bg, #fdf2e2);
  --ct-bad: var(--pg-bad, #c84d45);
  --ct-bad-bg: var(--pg-bad-bg, #fbeae7);
  --ct-info: var(--pg-info, #2f7fc4);
  --ct-info-bg: var(--pg-info-bg, #e8f2fd);
  --ct-neutral: var(--pg-neutral, #6f8298);
  --ct-neutral-bg: var(--pg-neutral-bg, #eef2f7);

  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.pages-construction .pages-note {
  margin: 8px 0 0;
}

/* —— 顶部信息条（营业日 / 更新时间 / 刷新） —— */
.pages-ct-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 12px 16px;
  background: var(--ct-surface);
  border: 1px solid var(--ct-line);
  border-radius: 14px;
  box-shadow: 0 5px 20px #37648a10;
}

.pages-ct-strip-main,
.pages-ct-strip-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-width: 0;
}

.pages-ct-kicker {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--ct-info-bg);
  color: var(--ct-info);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}

.pages-ct-today {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--ct-ink);
}

.pages-ct-muted {
  color: var(--ct-muted);
  font-size: 12px;
  font-weight: 400;
}

.pages-ct-updated {
  color: var(--ct-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* —— 工具条 / 快捷区间 —— */
.pages-ct-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pages-ct-quickbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 2px;
}

.pages-ct-quick-label {
  margin-right: 2px;
  color: var(--ct-muted);
  font-size: 11px;
  font-weight: 800;
}

.pages-ct-chip {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--ct-line);
  border-radius: 999px;
  background: #fff;
  color: var(--ct-ink-soft);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.pages-ct-chip:hover {
  border-color: var(--ct-brand);
  color: var(--ct-brand);
}

.pages-ct-chip.is-active {
  border-color: var(--ct-brand);
  background: var(--ct-ok-bg);
  color: var(--ct-brand);
  box-shadow: inset 0 0 0 1px var(--ct-brand);
}

.pages-ct-chip:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px #087c611a;
}

.pages-ct-export-msg {
  margin-left: auto;
  color: var(--ct-muted);
  font-size: 12px;
}

/* —— 徽标 —— */
.pages-ct-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--ct-neutral-bg);
  color: var(--ct-neutral);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.pages-ct-badge-warn {
  background: var(--ct-warn-bg);
  color: var(--ct-warn);
}

/* —— 统计卡 / KPI 网格 —— */
.pages-ct-kpis,
.pages-ct-stats {
  display: grid;
  gap: 10px;
}

.pages-ct-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pages-ct-stats {
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}

.pages-ct-stats-6 {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.pages-ct-kpi,
.pages-ct-stat {
  position: relative;
  min-width: 0;
  border-top: 3px solid var(--ct-line);
  overflow: hidden;
}

.pages-ct-kpi[data-tone="ok"],
.pages-ct-stat[data-tone="ok"] { border-top-color: var(--ct-ok); }
.pages-ct-kpi[data-tone="info"],
.pages-ct-stat[data-tone="info"] { border-top-color: var(--ct-info); }
.pages-ct-kpi[data-tone="warn"],
.pages-ct-stat[data-tone="warn"] { border-top-color: var(--ct-warn); }
.pages-ct-kpi[data-tone="bad"],
.pages-ct-stat[data-tone="bad"] { border-top-color: var(--ct-bad); }
.pages-ct-kpi[data-tone="neutral"],
.pages-ct-stat[data-tone="neutral"] { border-top-color: var(--ct-neutral); }

.pages-ct-kpi .pages-stat-value,
.pages-ct-stat .pages-stat-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

.pages-ct-kpi .pages-stat-note,
.pages-ct-stat .pages-stat-note {
  min-height: 16px;
}

.pages-ct-stats-panel {
  padding-bottom: 14px;
}

/* —— 两栏面板（房态分布 + 趋势） —— */
.pages-ct-panel-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 14px;
  align-items: start;
}

.pages-ct-panel {
  min-width: 0;
}

.pages-ct-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* —— 房态分布 —— */
.pages-ct-dist {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.pages-ct-dist-row {
  display: grid;
  grid-template-columns: 86px 44px minmax(60px, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--ct-line-soft);
  border-radius: 10px;
  background: #fbfdfd;
}

.pages-ct-dist-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ct-ink-soft);
  white-space: nowrap;
}

.pages-ct-dist-count {
  font-size: 18px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ct-ink);
  text-align: right;
}

.pages-ct-dist-meter {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--ct-line-soft);
  overflow: hidden;
}

.pages-ct-dist-meter > i {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 999px;
  background: var(--ct-neutral);
  transition: width .25s ease;
}

.pages-ct-dist-row[data-tone="info"] .pages-ct-dist-meter > i { background: var(--ct-info); }
.pages-ct-dist-row[data-tone="ok"] .pages-ct-dist-meter > i { background: var(--ct-ok); }
.pages-ct-dist-row[data-tone="warn"] .pages-ct-dist-meter > i { background: var(--ct-warn); }
.pages-ct-dist-row[data-tone="neutral"] .pages-ct-dist-meter > i { background: var(--ct-neutral); }

.pages-ct-dist-note {
  color: var(--ct-muted);
  font-size: 11px;
  white-space: nowrap;
}

/* —— 7 日趋势 —— */
.pages-ct-trend {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  height: 190px;
  padding: 6px 2px 0;
}

.pages-ct-trend-col {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 6px;
  min-width: 0;
}

.pages-ct-trend-value {
  color: var(--ct-ink-soft);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}

.pages-ct-trend-bar {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 40px;
  border-radius: 8px;
  background: repeating-linear-gradient(180deg, #f7fafc 0 1px, #ffffff 1px 22px);
  border: 1px solid var(--ct-line-soft);
  overflow: hidden;
}

.pages-ct-trend-bar > i {
  display: block;
  width: 100%;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg, #38b48b, var(--ct-brand));
  transition: height .25s ease;
}

.pages-ct-trend-label {
  color: var(--ct-muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}

.pages-ct-skeleton-trend {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 150px;
  padding: 6px 2px 0;
}

.pages-ct-sk-bar {
  flex: 1 1 0;
  min-height: 12px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(90deg, #eef2f7 25%, #f9fbfd 37%, #eef2f7 63%);
  background-size: 400% 100%;
  animation: pages-ct-shimmer 1.4s ease-in-out infinite;
}

/* —— 骨架 —— */
.pages-ct-sk {
  pointer-events: none;
}

.pages-ct-sk-line {
  display: block;
  height: 10px;
  margin: 5px 0;
  border-radius: 6px;
  background: linear-gradient(90deg, #eef2f7 25%, #f9fbfd 37%, #eef2f7 63%);
  background-size: 400% 100%;
  animation: pages-ct-shimmer 1.4s ease-in-out infinite;
}

.pages-ct-sk-line.tall {
  height: 22px;
  margin: 10px 0;
}

.pages-ct-sk-line.w30 { width: 30%; }
.pages-ct-sk-line.w40 { width: 40%; }
.pages-ct-sk-line.w50 { width: 50%; }
.pages-ct-sk-line.w60 { width: 60%; }
.pages-ct-sk-line.w70 { width: 70%; }
.pages-ct-sk-line.w80 { width: 80%; }
.pages-ct-sk-line.w100 { width: 100%; }

@keyframes pages-ct-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* —— 表格 —— */
.pages-ct-table-wrap {
  border: 1px solid var(--ct-line-soft);
  border-radius: 12px;
}

.pages-ct-table {
  margin: 0;
}

.pages-ct-table th,
.pages-ct-table td {
  vertical-align: middle;
}

.pages-ct-table td[data-cell="note"] {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pages-ct-pending {
  color: var(--ct-muted);
  letter-spacing: .12em;
}

.pages-ct-collect {
  color: var(--ct-ok);
}

.pages-ct-refund {
  color: var(--ct-bad);
}

.pages-ct-diff {
  font-variant-numeric: tabular-nums;
}

.pages-ct-diff[data-diff="nonzero"] {
  color: var(--ct-bad);
  font-weight: 800;
}

.pages-ct-diff[data-diff="zero"] {
  color: var(--ct-muted);
}

.pages-ct-row-diff td {
  background: #fdf5f3;
}

.pages-ct-row-diff:hover td {
  background: #fbeeeb;
}

.pages-ct-total-row td {
  border-top: 2px solid var(--ct-line);
  background: #f6faf8;
  font-weight: 800;
  color: var(--ct-ink);
}

.pages-ct-reconcile {
  min-width: 860px;
}

.pages-ct-reconcile td[data-cell="date"] {
  font-variant-numeric: tabular-nums;
}

/* —— 空态 / 未就绪 —— */
.pages-ct-empty {
  align-items: center;
  text-align: center;
}

.pages-ct-empty p {
  margin: 6px 0;
  max-width: 620px;
  color: var(--ct-muted);
  line-height: 1.7;
}

.pages-ct-empty-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.pages-ct-empty .construction-badge {
  margin-bottom: 4px;
}

.pages-ct-empty .pages-error {
  max-width: 640px;
  margin: 12px auto 0;
  text-align: left;
}

/* —— 口径说明 —— */
.pages-ct-callout {
  border-left: 3px solid var(--ct-brand);
  background: #f8fcfa;
}

.pages-ct-callout .section-title {
  margin-bottom: 8px;
}

.pages-ct-note-list {
  margin: 0;
  padding-left: 18px;
  color: var(--ct-ink-soft);
  font-size: 12px;
  line-height: 1.9;
}

.pages-ct-note-list b {
  color: var(--ct-ink);
}

.pages-ct-note-list code {
  font-size: 11px;
}

.pages-ct-footnote {
  margin: 0;
}

.pages-ct-stale-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}

.pages-ct-stale-note .pages-error {
  flex: 1 1 360px;
  margin: 0;
}

/* —— 窄屏兜底（模块只在 ≥900px 挂载；此段用于预览/窗口收缩） —— */
@media (max-width: 1024px) {
  .pages-ct-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 899px) {
  .pages-construction {
    gap: 12px;
  }

  .pages-ct-strip {
    align-items: flex-start;
    flex-direction: column;
  }

  .pages-ct-strip-actions {
    width: 100%;
    justify-content: space-between;
  }

  .pages-ct-kpis,
  .pages-ct-stats,
  .pages-ct-stats-6 {
    grid-template-columns: minmax(0, 1fr);
  }

  .pages-ct-panel-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .pages-construction .pages-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .pages-construction .pages-field {
    flex: 1 1 auto;
    width: 100%;
  }

  .pages-construction .pages-filter-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

  .pages-ct-quickbar {
    gap: 8px;
  }

  .pages-ct-export-msg {
    margin-left: 0;
    flex: 1 1 100%;
  }

  .pages-ct-dist-row {
    grid-template-columns: 72px 44px minmax(48px, 1fr);
  }

  .pages-ct-dist-note {
    grid-column: 1 / -1;
    white-space: normal;
  }

  .pages-ct-trend {
    height: 160px;
    gap: 5px;
  }

  .pages-ct-reconcile {
    min-width: 760px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pages-ct-sk-line,
  .pages-ct-sk-bar {
    animation: none;
  }

  .pages-ct-chip,
  .pages-ct-dist-meter > i,
  .pages-ct-trend-bar > i {
    transition: none;
  }
}