/* /app/ 移动端可用性增强（v2，2026-10-25）· 独立可删文件
 *
 * 背景（现场手机实拍）：顶栏 5 个按钮被挤成竖排（账号负责人／管理员／改密／设备／退出 各占一行），
 *   看板卡片固定 3 列（每列约 110px），仪表盘和柱状图糊成一团；提示条盖住半个屏幕。
 *   原页面全站只有 1 个 @media 断点（min-width:640px），等于没做手机适配。
 *
 * v2 新增（v1 的规则全部保留）：
 *   1) 顶栏：窄屏改成两行 —— 标题一行（可横滑）、按钮一行（等宽、不换行、不挤成竖排）
 *   2) 导航条：窄屏不再吸顶（吸顶会盖住内容，且顶栏变高后 top 值算不准）
 *   3) 看板卡片：手机 1 列、平板 2 列；卡片里隐藏「图表类型」下拉（手机上根本点不动，还占宽度）
 *   4) 统计小卡：手机 2 列（原来固定 4 列，每格只有 80px）
 *   5) 表格/图表容器允许横滑，不再把页面撑出屏幕
 *
 * 回退方式：删掉本文件 + index.html 里一行 <link> 即完全解耦。
 */

/* ---------- 0) 防安卓字体放大（部分机型会把 12px 自动放大成 16px，把布局撑破） ---------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ---------- 1) 触摸目标：触屏设备上按钮/输入至少 44×44 ---------- */
@media (pointer: coarse) {
  button,
  .btn,
  select,
  input:not([type="checkbox"]):not([type="radio"]) {
    min-height: 44px !important;
  }
  table input,
  table select {
    min-height: 34px !important;
  }
}

/* ---------- 2) 手机（≤600px） ---------- */
@media (max-width: 600px) {
  /* 顶栏：两行布局 —— 之前 5 个按钮挤在一行，被压成竖排文字 */
  .topbar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    align-items: flex-start;
  }
  .brand {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .brand::-webkit-scrollbar { display: none; }
  .brand small { display: none; }
  .brand > a { flex: 0 0 auto; font-size: 11.5px !important; padding: 3px 8px !important; }
  .brand > span { flex: 0 0 auto; }

  .user-chip {
    flex: 1 1 100%;
    justify-content: space-between;
    gap: 4px;
    padding: 4px 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .user-chip::-webkit-scrollbar { display: none; }
  .user-chip button {
    white-space: nowrap;
    padding: 3px 8px;
    font-size: 11.5px;
    line-height: 1.3;
    min-height: 34px !important;
  }
  .user-chip span { white-space: nowrap; }
  #me-name { font-weight: 600; }
  #me-role { display: none; }          /* 角色名太长，窄屏省掉 */

  /* 导航：不再吸顶（顶栏变两行后吸顶会盖住正文） */
  .nav {
    position: static;
    top: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav a { white-space: nowrap; padding: 11px 13px; font-size: 13px; }

  .main { padding: 10px 10px 76px; }

  /* 工具栏统一换行 + 控件铺满 */
  .toolbar { flex-wrap: wrap; }
  .toolbar > input,
  .toolbar > select { flex: 1 1 100%; min-width: 0; }
  .toolbar > .btn { flex: 1 1 auto; }

  .card { padding: 12px; border-radius: 12px; }
  .card h3 { font-size: 15px; }
  .muted, .li-sub, .li-main { font-size: 12.5px; }

  /* ★ 看板卡片：手机强制 1 列（原 3 列每列约 110px，KPI 数字和图都看不清） */
  .pf-grid { grid-template-columns: 1fr !important; gap: 9px; }
  .pf-card { min-height: 196px; }
  .pf-body { min-height: 152px; }
  .pf-head { padding: 6px 8px; gap: 4px; }
  .pf-title { font-size: 12px; }
  .pf-kpi { gap: 5px; }
  .pf-kpi-v { font-size: 29px; }
  .pf-kpi-u { font-size: 12px; }
  .pf-kpi-sub { font-size: 11.5px; gap: 6px; }
  /* ★ 手机上藏掉「图表类型」下拉：一来点不准，二来它吃掉标题空间。
     想换图表类型请用平板/电脑，或用卡片右上角 ⛶ 单卡全屏。 */
  .pf-ctl select { display: none; }
  .pf-zoom { min-height: 30px !important; padding: 4px 9px; }

  /* 看板筛选条：两列排布，日期不挤成一小格 */
  .pf-bar { gap: 6px; }
  .pf-bar select,
  .pf-bar input[type="date"] {
    flex: 1 1 46%;
    min-width: 0;
    max-width: none;
    font-size: 12.5px;
  }

  /* ★ 统计小卡：4 列 → 2 列 */
  .stat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .stat { padding: 10px 6px; }

  /* 表格与图表容器允许横滑，别把整页顶宽 */
  .pf-tblbox,
  .tbl-wrap,
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* 弹窗占满可用宽度 */
  .modal { width: auto !important; max-width: none !important; margin: 0 10px; }
  .modal .btn { width: 100%; }

  /* 提示条别盖满屏 */
  #toast { max-width: 92%; font-size: 13px; bottom: 76px; }
}

/* ---------- 3) 平板（601–1024px） ---------- */
@media (min-width: 601px) and (max-width: 1024px) {
  .main { padding: 14px 18px 84px; }
  .card { padding: 16px; }
  .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .pf-card { min-height: 208px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 4) 超宽屏：限制正文宽度 ---------- */
@media (min-width: 1400px) {
  .main { max-width: 1320px; margin-left: auto; margin-right: auto; }
}

/* ---------- 5) 横屏矮屏：压缩纵向留白 ---------- */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 900px) {
  .topbar { padding-top: 8px; padding-bottom: 8px; }
  .main { padding-top: 10px; }
}