/* web_statistics · Responsive — 5 个断点(1400/1280/1100/860/480) + prefers-reduced-motion
   加载顺序最后：覆盖 layout/components 基础规则
*/
/* ====================================================================
   Responsive
   ==================================================================== */
@media (max-width: 1400px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1280px) {
  /* 1280px 时 .kpis 默认就是 repeat(4,1fr)（见 layout.css），不用覆盖。
     只在这里封 main max-width 防爆框（4 KPI 行默认是横向滚动轴承载，
     但 .main { max-width: 100% } 在 1280 及以下才需要保护以免顶部 grid 容器撑大）。 */
  .main { max-width: 100%; }
}
/* 宽屏（≥1600）：解除 main 的 max-width 上限，让它撑满 body grid 的 1fr 列。
   默认 --content-max=1520 在 1920 下让 main 比 grid 列窄 100px+，造成右侧空白；
   用 calc(100vw - sidebar - 32px) 不够干净（sidebar-w 还会随断点变 288/240），
   直接 max-width: none 让 grid 列决定宽度最稳。4K 重新封顶，防 KPI 单卡过宽。 */
@media (min-width: 1600px) {
  .main { max-width: none; }
}
@media (min-width: 2400px) {
  .main { max-width: 2200px; }
  :root { --content-max: 2200px; }
}
@media (max-width: 1100px) {
  :root { --sidebar-w: 240px; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .main { padding: 22px 24px 48px; gap: 16px; }
  .topbar-context .select-wrap { width: 180px; }
  .kpi { padding: 16px 18px 14px; min-height: 128px; }
  .kpi-value { font-size: 32px; }
  .kpi-spark { height: 28px; }
  .page-title { font-size: 22px; }
}
@media (max-width: 860px) {
  body {
    grid-template-columns: 1fr;
    /* 3 行全部 auto + body height:auto 让内容自然撑大整页。
       之前用 "auto auto minmax(0, 1fr)" 时 body height:100% 把总高锁在 viewport,
       1fr 只能拿到 (viewport - topbar - sidebar) 剩余空间（390x844 实测仅 318px）,
       KPI 之后的 trend / 来源域名 / 浏览器/操作系统/设备 / 实时事件流全部溢出 main 网格
       区域,被 body overflow-x:hidden + grid container 边界裁掉。
       elementFromPoint(241,470) 返回 HTML 根节点可佐证该区域无渲染元素。 */
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "topbar"
      "sidebar"
      "main";
    overflow-x: hidden;  /* 防止 topbar 内容溢出撑大 body */
    height: auto;        /* 解除 layout.css "html, body { height: 100% }" 的 viewport 锁定 */
    min-height: 100vh;   /* 内容为空时仍铺满首屏 */
  }
  .sidebar {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 18px;
    gap: 18px;
    min-height: max-content;
    min-width: 0;
  }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .main { padding: 18px; gap: 14px; }
  .page-title { font-size: 20px; }
  .topbar-context .select-wrap { width: 120px; }
  .topbar { padding: 0 10px; gap: 8px; }
  .panel { padding: 16px 16px 18px; }
  .panel-head { margin-bottom: 12px; }
  .trend { padding: 18px 18px 20px; }

  /* Topbar 在 sidebar-above 时是 body 全宽，481-860 视口下若不收起次要项，
     内容 ~913px > 视口，导致 "就绪 / 0 在线" 被截断、主题切换和用户菜单不可见。
     收起 5 个非必要项（就绪徽章/在线/管理站点/ctx-divider/ctx-label）后约 744px，
     860 视口有 116px 余量、720 视口也有 24px 余量（720 断点再压一次到 ~576px）。 */
  .ctx-label { display: none; }
  .ctx-divider { display: none; }
  #health-pill { display: none; }
  #manage-sites { display: none; }
  #online-pill { display: none; }
}
/* 481-720 视口（小型平板竖屏 / 大手机横屏）：860 断点收的还不够，
   还要窄化 select、压紧 segmented/KPI/字体。 */
@media (max-width: 720px) {
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 14px 14px 12px; min-height: 110px; }
  .kpi-value { font-size: 26px; }
  .kpi-label { font-size: 11px; }
  .kpi-spark { height: 22px; }
  .main { padding: 14px; gap: 12px; }
  .panel { padding: 14px 14px 16px; }
  .page-title { font-size: 18px; }
  .topbar-context .select-wrap { width: 100px; }
  .segmented button { padding: 4px 7px; font-size: 12px; }
  .topbar-actions { gap: 4px; }
  .topbar-actions .btn-text { display: none; }
  .topbar { gap: 6px; padding: 0 8px; }
}
/* ≤480 视口（手机）：topbar 三个子项加和仍 ≥450px，强行单行会撑爆 body
   导致 sidebar/main/卡片全部被横向裁切。改成两行布局：
     行 1: 品牌 + 操作组(导出/主题/用户)
     行 2: 站点选择 + 时间范围（占满整行，select 不再被压成"My"）
   topbar 高度从 60 → auto；body 已在 860 断点用 grid-template-rows: auto，
   sticky + backdrop-filter 与 auto 高度兼容。 */
@media (max-width: 480px) {
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 14px 14px 12px; min-height: 110px; }
  .kpi-value { font-size: 26px; }
  .kpi-label { font-size: 11px; }
  .kpi-spark { height: 22px; }
  .bar-row { grid-template-columns: 80px 1fr 40px; font-size: 12px; gap: 10px; }
  .data-table { font-size: 12.5px; }
  .data-table th, .data-table td { padding: 10px 10px; }
  .main { padding: 14px; gap: 12px; }
  .panel { padding: 14px 14px 16px; }
  .page-title { font-size: 18px; }
  .topbar {
    flex-wrap: wrap;
    height: auto;
    padding: 8px 10px;
    gap: 8px 10px;
    row-gap: 8px;
  }
  .topbar-brand { padding-right: 0; margin-right: 0; border-right: none; }
  .topbar-context {
    order: 3;
    flex: 1 1 100%;
    min-width: 0;
    gap: 8px;
  }
  .topbar-context .select-wrap { flex: 1 1 auto; min-width: 0; width: auto; }
  .topbar-context .segmented { flex: 0 0 auto; }
  .topbar-actions { order: 2; margin-left: auto; gap: 4px; }
  .topbar-actions .btn-text { display: none; }
  /* 极窄屏隐藏次要项，防止操作组过宽 */
  #online-pill { display: none; }
  /* 站点选择 select 文字完整展示需要更宽，限制 flex 1 让 segmented 拿到空间 */
  .select-wrap select { font-size: 13px; padding: 7px 30px 7px 11px; }
  /* page-subtitle 内的 site-id-pill 在窄屏会挤压标题 */
  .page-subtitle { flex-wrap: wrap; }
  .page-subtitle .site-id-pill { max-width: 100%; }
  /* 实时事件流 6 列在极窄屏挤，隐藏"系统 / 设备"次要列 */
  .data-table-rt thead th:nth-child(5),
  .data-table-rt thead th:nth-child(6),
  .data-table-rt tbody td:nth-child(5),
  .data-table-rt tbody td:nth-child(6) { display: none; }
  .bar-track { height: 6px; }
  /* 极窄屏 trend 图表降低高度，节省首屏纵向空间 */
  #chart-trend { height: 200px; }
}

/* Reduced motion
   1) OS 偏好（prefers-reduced-motion: reduce）— 兜底（用户在系统设置里打开「减少动效」生效）
   2) 用户在设置面板手动关闭 — html[data-animations="off"]（与 OS 偏好并存）
   !important 是必要的：components.css 各组件的 transition / animation 必须被覆盖 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  #online-pill .dot,
  .card-status-loading::before { animation: none; }
}
html[data-animations="off"] *,
html[data-animations="off"] *::before,
html[data-animations="off"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}