/* 港湾出勤看板 · 移动端修正 v2 (2026-09-30)
   根因：.national-pills / .kpis 的 1fr 1fr 被内容 min-content 撑破，
   整页变宽 ~430px → 右侧元素统一被裁。改用 minmax(0,1fr) 强制收缩。 */

@media (max-width: 640px) {
  /* 0) 页面级兜底：杜绝横向滚动 */
  html, body { overflow-x: hidden; }

  /* ★ 根因修复：14 天趋势图的 14 根柱子(≈644px)把 grid 轨道撑到 690px，
     整页 body 变宽 702px → 右侧所有内容被裁。让网格子项可收缩、
     趋势图改为容器内横向滚动。 */
  .top-grid > *, .bottom-grid > * {
    min-width: 0;
  }
  .panel {
    min-width: 0;
  }
  .trend-chart {
    min-width: 0;
  }

  /* 1) KPI 卡与中/外籍汇总盒：强制等分可收缩，页宽回到视口内 */
  .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kpis article {
    min-width: 0;
  }
  .national-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .national-pills > div {
    min-width: 0;
  }

  /* 2) 顶栏：品牌一行、导航与登录换行，不再横向裁切 */
  header {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    height: auto;
  }
  .main-nav {
    width: 100%;
    gap: 6px;
  }
  .login-button {
    width: 100%;
  }

  /* 3) Hero：标题块与"统计日期"竖排，副标题不再被 overflow:hidden 裁掉 */
  .hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 30px 18px;
  }
  .hero h2 {
    font-size: 26px;
    white-space: normal;
  }
  .hero p {
    white-space: normal;
  }

  /* 4) 面板标题行 + 中/外籍图例：允许换行，"外籍联合国蓝"不再截断 */
  .panel-title {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .nationality-key {
    white-space: normal;
  }

  /* 5) 单位卡内部允许收缩 */
  .team-grid > * {
    min-width: 0;
  }
  .team-grid * {
    min-width: 0;
  }

  /* 6) 工作区头部窄屏允许换行 */
  .workspace-head {
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
  }
  .workspace-actions {
    flex-wrap: wrap;
  }
}