/*
 * TCL 华南大区 BI 看板 — 响应式移动端补丁
 * Phase 3.2 — iPhone 实机截图反馈后修正版
 *
 * 核心修复: --w 变量在手机端从 800px 覆盖为 100vw
 */

/* ── 全局基础 ──────────────────────────────────── */
html,
body {
  overflow-x: hidden !important;
  -webkit-text-size-adjust: 100%;
}

/* ═══════════════════════════════════════════════════
 * 断点 1: 移动端 + 平板（≤ 768px）
 * 核心策略: 表格智能裁列（6-7列→3列），不横滑
 * ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ★ 核心: CSS 变量覆盖 → 所有 var(--w) 引用自动变为视口宽度 */
  :root {
    --w: 100vw !important;
  }

  /* ★ 全局防溢出（排除表格） */
  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }

  body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* poster 主容器: 允许内部表格溢出后横滑 */
  .poster {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  /* ── Hero 区 ─────────────────────────────────── */
  .hero {
    padding: 48px 16px 16px !important;
    border-radius: 0 !important;
    width: 100% !important;
  }

  .hero-title {
    font-size: 20px !important;
  }

  .hero-subtitle {
    font-size: 11px !important;
    margin-bottom: 12px !important;
    white-space: normal !important;
    word-break: break-all !important;
  }

  /* KPI 快照 → 2列 (隐藏第3列:年累金额) */
  .hero-snapshot {
    grid-template-columns: 1fr 1px 1fr !important;
    padding: 12px 0 !important;
    overflow: hidden !important;
  }

  .hero-snap-divider:nth-of-type(2),
  .hero-snap-item:nth-of-type(3) {
    display: none !important;
  }

  .hero-snap-value {
    font-size: 24px !important;
  }

  .hero-snap-item {
    padding: 0 10px !important;
  }

  .hero-snap-label {
    font-size: 11px !important;
  }

  /* 指标条横向滚动换为换行 */
  .hero-kpi-bar {
    flex-wrap: wrap !important;
    gap: 4px 12px !important;
    font-size: 11px !important;
    padding: 0 16px !important;
  }

  /* ── section 通用 ────────────────────────────── */
  .section-block {
    padding: 0 12px !important;
    width: 100% !important;
  }

  .block-header {
    padding: 16px 12px 10px !important;
    font-size: 14px !important;
  }

  .block-header h2 {
    font-size: 15px !important;
  }

  /* ── AI 诊断 ─────────────────────────────────── */
  .diagnosis-card {
    padding: 14px !important;
    width: 100% !important;
  }

  .diagnosis-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .diagnosis-content {
    font-size: 13px !important;
    line-height: 1.6 !important;
    word-break: break-word !important;
  }

  /* ── 仪表盘: 隐藏 ECharts 圆环, 纯数字卡片 ───── */
  .gauge-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
    padding: 0 !important;
  }

  .gauge-divider {
    display: none !important;
  }

  .gauge-card {
    flex: none !important;
    min-width: 0 !important;
    padding: 12px 6px !important;
    text-align: center !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
  }

  .gauge-chart {
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .gauge-title {
    font-size: 11px !important;
    margin-bottom: 6px !important;
    opacity: 0.7 !important;
  }

  .gauge-bottom {
    margin-top: 0 !important;
  }

  .gauge-actual {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.3px !important;
    font-variant-numeric: tabular-nums !important;
  }

  .gauge-actual-sep {
    opacity: 0.4 !important;
    margin: 0 1px !important;
  }

  .gauge-actual-target {
    font-size: 11px !important;
    font-weight: 400 !important;
    opacity: 0.5 !important;
  }

  .gauge-actual-unit {
    font-size: 10px !important;
    opacity: 0.5 !important;
  }

  /* ── 预警卡片 ────────────────────────────────── */
  .alert-card,
  .insight-card {
    padding: 12px !important;
    margin: 0 0 8px !important;
    width: 100% !important;
    word-break: break-word !important;
  }

  .alert-card h3,
  .insight-card h3 {
    font-size: 14px !important;
  }

  .alert-card p,
  .insight-card p {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  /* ── 渠道卡片 ────────────────────────────────── */
  .channel-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 0 12px !important;
  }

  .channel-card {
    min-height: auto !important;
    padding: 12px !important;
    width: 100% !important;
  }

  .channel-card-meta {
    grid-template-columns: 1fr 1fr !important;
    gap: 2px 8px !important;
  }

  /* ── 本周签收 banner → 2×2 网格 ─────────────── */
  .week-banner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .week-banner-item {
    min-width: 0 !important;
    text-align: center !important;
  }

  .week-banner-value {
    font-size: 20px !important;
  }

  .week-banner-divider {
    display: none !important;
  }

  /* ═══════════════════════════════════════════════════
   * 表格智能裁列 — 隐藏次要列，3-4 核心列完整展示
   * 策略: 不横滑，直接在屏幕内显示完整表格
   * ═══════════════════════════════════════════════════ */

  /* ── 表格通用 ─────────────────────────────────── */
  .section-block {
    overflow-x: hidden !important;
    padding: 0 8px !important;
  }

  .achievement-table,
  .region-table,
  .customers-table {
    font-size: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  .achievement-table th,
  .achievement-table td,
  .region-table th,
  .region-table td,
  .customers-table th,
  .customers-table td {
    padding: 8px 6px !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ── achievement-table: 6列 → 3列 ──────────────
   * 保留: 指标(1) + 月累实绩(3) + 月达成(4)
   * 隐藏: 月目标(2) + Q实绩(5) + 年累(6) */
  .achievement-table th:nth-child(2),
  .achievement-table td:nth-child(2),
  .achievement-table th:nth-child(5),
  .achievement-table td:nth-child(5),
  .achievement-table th:nth-child(6),
  .achievement-table td:nth-child(6) {
    display: none !important;
  }

  .achievement-table th:nth-child(1),
  .achievement-table td:nth-child(1) {
    width: 25% !important;
  }

  .achievement-table th:nth-child(3),
  .achievement-table td:nth-child(3) {
    width: 35% !important;
    text-align: right !important;
  }

  .achievement-table th:nth-child(4),
  .achievement-table td:nth-child(4) {
    width: 40% !important;
    text-align: right !important;
  }

  /* ── region-table: 7列 → 3列 ───────────────────
   * 保留: 战区(1) + 月累金额(3) + 月达成率(5)
   * 隐藏: 今日(2) + 月目标(4) + 年达成(6) + 结构机(7) */
  .region-table th:nth-child(2),
  .region-table td:nth-child(2),
  .region-table th:nth-child(4),
  .region-table td:nth-child(4),
  .region-table th:nth-child(6),
  .region-table td:nth-child(6),
  .region-table th:nth-child(7),
  .region-table td:nth-child(7) {
    display: none !important;
  }

  .region-table th:nth-child(1),
  .region-table td:nth-child(1) {
    width: 28% !important;
  }

  .region-table th:nth-child(3),
  .region-table td:nth-child(3) {
    width: 32% !important;
    text-align: right !important;
  }

  .region-table th:nth-child(5),
  .region-table td:nth-child(5) {
    width: 40% !important;
  }

  /* region-name 紧凑化 */
  .region-name {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 12px !important;
  }

  .rank-badge {
    width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
    flex-shrink: 0 !important;
  }

  /* 月达成率进度条适配 */
  .rate-bar-wrap {
    min-width: 0 !important;
  }

  .rate-bar {
    height: 4px !important;
  }

  /* 隐藏时间进度标记("10%") 避免溢出 */
  .rate-bar-marker {
    display: none !important;
  }

  .rate-bar-marker::before,
  .rate-bar-marker::after {
    display: none !important;
  }

  /* 月累金额列: 隐藏“XX台”子行文本节省空间 */
  .region-table td:nth-child(3)>div {
    display: none !important;
  }

  /* ── customers-table: 6列 → 3列 ──────────────
   * 客户表(6列): #/客户/签收台/金额万/同比/结构机%
   *   保留: #(1) + 客户(2) + 金额(4)
   *   隐藏: 签收台(3) + 同比(5) + 结构机%(6) */
  .customers-table th:nth-child(3),
  .customers-table td:nth-child(3),
  .customers-table th:nth-child(5),
  .customers-table td:nth-child(5),
  .customers-table th:nth-child(6),
  .customers-table td:nth-child(6) {
    display: none !important;
  }

  .customers-table th:nth-child(1),
  .customers-table td:nth-child(1) {
    width: 12% !important;
  }

  .customers-table th:nth-child(2),
  .customers-table td:nth-child(2) {
    width: 58% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .customers-table th:nth-child(4),
  .customers-table td:nth-child(4) {
    width: 30% !important;
    text-align: right !important;
  }

  .customers-table {
    font-size: 12px !important;
  }

  /* ── 渠道卡片微调 ────────────────────────────── */
  .channel-amt {
    font-size: 20px !important;
  }

  .channel-rate {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  /* ── 时间进度 banner ────────────────────────────── */
  .time-gap-banner {
    flex-wrap: wrap !important;
    padding: 10px 12px !important;
    gap: 8px !important;
    font-size: 12px !important;
  }

  .time-gap-badge {
    flex-shrink: 0 !important;
  }

  /* ── 趋势图/周报表 ──────────────────────────── */
  .trend-section {
    padding: 0 8px !important;
  }

  /* ── 家中专区 → 2×2 网格 ────────────────────── */
  .home-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .home-divider {
    display: none !important;
  }

  .home-stat {
    text-align: center !important;
    padding: 8px !important;
  }

  .home-stat-val {
    font-size: 18px !important;
  }

  /* ── 预警区域 ────────────────────────────────── */
  .alerts-block {
    padding: 0 8px !important;
  }

  .alert-item {
    padding: 10px !important;
  }

  .alert-content {
    font-size: 12px !important;
    word-break: break-word !important;
  }

  .alert-suggestion {
    font-size: 11px !important;
  }

  /* ── 底部 Footer ────────────────────────────── */
  .poster-footer {
    padding: 16px 12px !important;
    flex-direction: column !important;
    gap: 8px !important;
    font-size: 11px !important;
  }

  /* ── 图表 ────────────────────────────────────── */
  .chart-container,
  [id^="chart"],
  [id^="gauge"] {
    width: 100% !important;
    min-width: 0 !important;
    height: 200px !important;
  }

  #chart-trend {
    height: 220px !important;
  }

  /* ── 战区选择器 ──────────────────────────────── */
  #region-wrap {
    top: 8px !important;
    right: 8px !important;
  }

  #region-wrap select {
    font-size: 12px !important;
    padding: 4px 8px !important;
  }
}

/* 断点 2 已合并到断点 1（≤ 768px） */

/* ═══════════════════════════════════════════════════
 * 断点 3: 桌面（> 768px）
 * ═══════════════════════════════════════════════════ */
@media (min-width: 769px) {
  .poster {
    max-width: 800px;
    margin: 0 auto;
  }
}

/* ── 全局: 长文本防溢出 ─────────────────────────── */
.region-table td,
.achievement-table td {
  word-break: break-all;
}

/* ── ECharts 高度保护 ──────────────────────────── */
.gauge-chart {
  min-height: 60px;
}