/* mobile.css — 响应式公共样式 (v1, 五期新增)
 * 服务端将 /static/ 映射到此目录, 所有页面 <head> 引用:
 *   <link rel="stylesheet" href="/static/mobile.css">
 */

/* === ≤ 768px: 平板/大屏手机 === */
@media (max-width: 768px) {
  body { font-size: 13px; }

  /* 导航条: 字号缩小 + 自动换行 */
  .nav { padding: 0 8px !important; gap: 2px; }
  .nav a { padding: 7px 10px !important; font-size: 12px; }

  /* 顶栏: padding 收紧, 允许换行, 副标题缩小 */
  .topbar { padding: 10px 12px !important; font-size: 14px !important;
            flex-wrap: wrap; gap: 6px; }
  .topbar h1, .topbar > span { font-size: 14px !important; }
  .topbar button, .topbar .btn { padding: 5px 10px !important; font-size: 12px; }
  .topbar .stats { font-size: 12px; }

  /* 容器与卡片 */
  .container { padding: 10px 12px !important; }
  .card { padding: 10px 12px !important; }

  /* 筛选区: 列单列堆叠, 表单元素全宽 */
  .filter { flex-direction: column; align-items: stretch; }
  .filter input, .filter select, .filter button,
  .filter label input, .filter label select {
    width: 100% !important; box-sizing: border-box;
  }
  .filter label { font-size: 12px; }

  /* 表格: 包 .tablewrap 容器即可横向滚动 */
  .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch;
               background: #fff; border-radius: 6px; }
  .tablewrap table { min-width: 600px; font-size: 12px; }
  .tablewrap th, .tablewrap td { padding: 6px 6px; white-space: nowrap; }
  .tablewrap td.msg, .tablewrap td.detail { white-space: normal; }

  /* 资产总览专用: 隐藏次要列 */
  .col-subnet, .col-vendor { display: none; }

  /* 弹窗: 接近全屏 */
  .modal { width: 92vw !important; max-width: 92vw !important;
           max-height: 88vh; padding: 14px 16px !important; }
}

/* === ≤ 480px: 小屏手机 === */
@media (max-width: 480px) {
  .nav a { padding: 6px 8px !important; font-size: 11px; }
  .topbar { padding: 8px 10px !important; }
  .topbar h1, .topbar > span { font-size: 13px !important; }
  .tablewrap table { min-width: 480px; font-size: 11px; }
  .tablewrap th, .tablewrap td { padding: 5px 5px; }
  .rowbtn { padding: 3px 6px !important; font-size: 11px !important; }
}