/* ===== 手机端响应式总修（≤1024px 平板；≤680px 手机） =====
   最后加载，专治：导航与内容叠加、工具栏挤压、表格溢出、按钮换行乱、内边距过窄
   一律用 !important 压过页面内联/mobile.js 注入的规则
*/

/* ---------- ① 顶部导航 + 标签栏：真正吸顶，不再"相对偏移"叠到内容上 ---------- */
.top {
  position: sticky !important;
  top: 0 !important;
  z-index: 90 !important;
}

.tabs {
  position: sticky !important;
  top: 54px !important;          /* 手机顶栏 54px；下方平板档覆盖 */
  z-index: 80 !important;
  background: var(--hz-tabs-bg, #FDF6F8) !important;
  padding: 8px 10px 6px !important;
  margin: 0 0 10px !important;
  box-shadow: 0 4px 12px -8px rgba(30, 50, 90, .35) !important;
  border-radius: 0 !important;
}

body.hz-theme-neutral .tabs { --hz-tabs-bg: #F4F6FA; }
body.hz-theme-sakura  .tabs { --hz-tabs-bg: #FDF6F8; }

/* ---------- ② 卡片与面板间距收紧，避免与吸顶栏贴脸 ---------- */
.cards {
  gap: 10px !important;
  margin-bottom: 12px !important;
}
.card { padding: 12px 14px !important; }

.panel {
  border-radius: 14px !important;
  margin-top: 0 !important;
}
#app .wrap > .bar,
#app .wrap > div[id$="-wrap"] {
  margin-top: 0 !important;
}

/* ---------- ③ 工具栏：不吸顶（会和标签栏抢位置），自然流式换行 ---------- */
#app .bar {
  position: static !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 8px !important;
  padding: 10px !important;
}
#app .bar > * { min-width: 0; }
#app .bar input,
#app .bar select {
  flex: 1 1 100% !important;
  height: 40px !important;
  font-size: 15px !important;
  box-sizing: border-box;
}
#app .bar button,
#app .bar .btn {
  flex: 0 0 auto !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  font-size: 13.5px !important;
  box-sizing: border-box;
}

/* ---------- ④ 表格：容器内横滑，首列固定，表头不钻到导航下 ---------- */
.tw-scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
.tw-scroll > table { min-width: 640px; }
.tw-scroll thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  background: #FFF8FA !important;
}

/* ---------- ⑤ 按钮/标签触控尺寸 ---------- */
.tab, .mini, .hz-fbtn { min-height: 38px !important; }
.tab { padding: 8px 15px !important; font-size: 15px !important; }

/* ---------- ⑥ 弹窗在手机上留边、内部可滚动 ---------- */
#hz-bd, #hz-fedit, #hz-mg, #hz-lg, #hz-be, .hz-modal {
  max-width: 96vw !important;
  max-height: 88vh !important;
  overflow: auto !important;
}
#hz-bd .bd-kpi { grid-template-columns: repeat(2, 1fr) !important; }
/* 已移入手机端媒体查询，见 mobile_fix6.css */

/* ---------- ⑦ 相册网格 ---------- */
#g-wrap #g-grid, #g-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
}

/* ---------- ⑧ 页脚不压内容 ---------- */
.foot { margin-top: 18px !important; padding-bottom: 8px !important; }

/* ================= 平板档 681~1024 ================= */
@media (max-width: 1024px) {
  .tabs { top: 58px !important; }
}

/* ================= 手机档 ≤680 ================= */
@media (max-width: 680px) {
  html { -webkit-text-size-adjust: 100%; }

  .wrap { padding: 12px 12px 44px !important; }

  .top {
    height: 54px !important;
    padding: 0 12px !important;
    gap: 8px !important;
    overflow: hidden !important;
  }
  .top .t1 { font-size: 14.5px !important; }
  .top .t2, .top .hz-sakura-deco { display: none !important; }
  .top img { height: 30px !important; }
  .top .btn, .top button {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }

  .tabs {
    top: 54px !important;
    padding: 7px 10px 5px !important;
    margin-bottom: 8px !important;
  }

  .cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 9px !important;
  }
  .card { padding: 11px 12px !important; border-radius: 13px !important; }
  .card .n { font-size: 11.5px !important; }
  .card .v { font-size: 19px !important; }

  #app .bar {
    gap: 7px !important;
    padding: 9px !important;
    margin-bottom: 10px !important;
  }
  #app .bar button,
  #app .bar .btn { padding: 0 12px !important; font-size: 13px !important; }

  /* 面板内左右留白 */
  .panel { padding-left: 10px !important; padding-right: 10px !important; }

  /* 财务/账本类宽表：保持横滑，别压成一行一个字 */
  #hz-lg, .tw-scroll { overflow-x: auto !important; }

  /* 分组拖拽区手机单列 */
  .hz-gz .gz { flex: 1 1 100% !important; min-width: 0 !important; }

  /* 页脚字号 */
  .foot { font-size: 11px !important; }
}