/* ============================================================
   覆冰监测系统 · 网页版自适应布局
   ────────────────────────────────────────────────────────────
   app.css 是 build_css.py 的生成物，负责手机端基线；本文件只在
   更宽的屏上叠加断点，不改任何手机端规则：
     ≤767px    单列 430px，底部固定 tabBar  —— 与手机端完全一致
     ≥768px    单列，容器上限放宽到 720px（tabBar 同步对齐）
     ≥1024px   容器上限 1280px；tabBar 移为顶部横向导航；
               首页左列（状态/测量）右列（照片入口等）两列并排
   纯 CSS，不碰 app.js；历史页 canvas 的重画沿用 app.js 里的 resize 监听。
   ============================================================ */

/* ── 平板：单列，容器放宽到 720px ── */
@media (min-width: 768px) {
  .page { max-width: 720px; }
  .tabbar { max-width: 720px; }
}

/* ── 桌面：1280px 两列 + 顶部横向导航 ── */
@media (min-width: 1024px) {

  .page {
    max-width: 1280px;
    padding-top: 64px;      /* 顶部导航占位（下面不再有底部 tabBar） */
    padding-bottom: 40px;
  }

  /* tabBar：底部固定横条 -> 顶部横向导航。
     仍然是同一批 .tabbar-item，app.js 的事件绑定不受影响 */
  .tabbar {
    top: 0;
    bottom: auto;
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    max-width: none;
    justify-content: center;
    border-top: none;
    border-bottom: 1px solid var(--tab-border);
    padding-bottom: 0;
  }
  .tabbar-item {
    flex: 0 0 auto;
    padding: 18px 34px;
    font-size: 14px;
    letter-spacing: 2px;
  }
  /* 顶栏下沿的发光细线，和面板保持同一套冰川语汇 */
  .tabbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%, var(--accent-dim) 30%, var(--accent) 50%,
      var(--accent-dim) 70%, transparent 100%);
    opacity: 0.5;
  }

  /* 首页两列：.idx-col-main = 状态卡 + 仪表 + 气象/力学/评估；
     .idx-col-side = 照片入口、备案信息等其余内容。
     页头与离线横幅横跨整行，不参与分列 */
  #view-index.active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 10px;
    align-items: start;
  }
  #view-index .idx-head,
  #view-index .offline-banner {
    grid-column: 1 / -1;
  }
  #view-index .idx-col-main { grid-column: 1 / 2; }
  #view-index .idx-col-side { grid-column: 2 / 3; }

  /* 宽屏下指标行不必再挤成 20px 字号，留一点呼吸 */
  .metric-tile { padding: 14px 4px; }
  .section-header { padding-top: 18px; }
}

/* ── 调试页（#view-debug）：桌面两列，左列参数+结果、右列预设/基线/校准/设备操作 ──
   仅叠加宽屏规则，短信/平板仍按 app.css 的单列基线走 */
@media (min-width: 1024px) {
  #view-debug.active .dbg-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 10px;
    align-items: start;
  }
  /* 宽屏放宽输入框，避免长数字挤在 130px 里 */
  #view-debug .db-f-input { width: 160px; }
  #view-debug .dbg-warn { font-size: 14px; }
}

/* ── 首页右列补白：快捷入口 #ix-quick + 系统信息 #ix-sysinfo ──
   标记里写死 display:none，保证手机/平板零变化；只在 ≥1024px 打开。
   行内 style 优先级高于本文件，故用 !important 覆盖（全站仅此一处）。 */
@media (min-width: 1024px) {
  #ix-quick,
  #ix-sysinfo { display: block !important; }
}