/* ============================================================
 * mobile.css - 移动端适配（针对 iPhone SE / 12 / 14 三档实测）
 * 基于 Playwright 实测的字号 + 间距 + 触控目标审计结果
 * ============================================================ */

/* ----------- 大屏桌面：≥1025px ----------- */
/* 默认无媒体查询块：保持原桌面布局 */

/* ----------- iPad 横屏 + 小桌面：≤1024px ----------- */
@media (max-width: 1024px) {
  :root { font-size: 15px; }
  body { font-size: 15px; }
  .container, main, .dashboard, .panel { max-width: 100% !important; padding: 16px !important; }
  h1 { font-size: 22px !important; }
  h2 { font-size: 18px !important; }
  h3 { font-size: 16px !important; }
}

/* ----------- iPad 竖屏 + 大手机：≤768px ----------- */
@media (max-width: 768px) {
  :root { font-size: 15px; }

  /* v3.0.9 关键修复：所有 inline 写死的 width/transform 必须被 !important 覆盖
     历史 bug：测试时在浏览器 DevTools 调试，将 width: 1292px 等 inline style 保存到 HTML
     → mobile.css 失效 → 整页 zoom out */
  .dashboard-page,
  .charts-grid,
  .chart-card,
  .reconcile,
  /* v3.0.9 修复：用 :not 选择器排除 .drawer/.drawer-bg/.fab 等固定定位元素
     —— 之前全局 transform: none !important 会把 .drawer 的 translateX(100%) 抹掉，
     导致抽屉默认就可见（占据整个屏幕），挡住 audit 页表格 */
  .detail-card,
  .kpi-master-and-grid,
  .chart-title-row,
  .trend-section-row,
  .time-range-row,
  .reconcile-title,
  .reconcile-row,
  .detail-tabs,
  .detail-summary,
  .alert-banner,
  main,
  body > div:not(.drawer):not(.drawer-bg):not(.fab-menu):not(.modal) {
    width: 100% !important;
    max-width: 100vw !important;
    transform: none !important;
    left: 0 !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 字号阶梯 */
  body { font-size: 15px; line-height: 1.55; }
  h1 { font-size: 22px; line-height: 1.3; }
  h2 { font-size: 18px; line-height: 1.35; }
  h3 { font-size: 16px; line-height: 1.4; }
  label { font-size: 14px !important; line-height: 1.4; font-weight: 600; }
  small, .hint { font-size: 13px; }

  /* 输入框：关键修复！font-size: 16px 阻止 iOS Safari 自动放大 */
  input, select, textarea, .form-input {
    font-size: 16px !important;
    height: 44px !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
  }
  textarea { height: auto !important; min-height: 100px; }

  /* 按钮：保证 ≥44px 触控目标 */
  button, .btn, .button, .nav-link {
    min-height: 44px !important;
    font-size: 15px !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
  }
  .btn-primary { font-weight: 600; }

  /* 间距（label → input、input → input、button → button） */
  .form-group { margin-bottom: 18px !important; }
  label + input, label + select, label + textarea { margin-top: 8px !important; }
  .form-group + .form-group { margin-top: 8px; }
  .button-group button + button, .btn + .btn { margin-top: 12px; margin-left: 0; }

  /* 登录卡：撑满视口宽度，但保留 16px 边距 */
  .login-card, .login-container, .auth-card {
    width: calc(100vw - 24px) !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    padding: 20px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  /* 顶栏导航：折叠为汉堡 */
  header nav, .nav-tabs, .navbar, header .actions,
  .topbar .nav-tabs, .topbar .actions, .month-switcher, .month-dropdown {
    display: none !important;
  }

  /* sub-page 的 .nav 容器：换行 + 缩小 */
  nav.nav, .nav, .top-nav {
    flex-wrap: wrap !important;
    padding: 12px !important;
    gap: 8px !important;
  }
  nav.nav .nav-title, .nav .nav-title {
    flex: 1 1 100% !important;
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }
  nav.nav .nav-link, .nav .nav-link {
    padding: 6px 10px !important;
    font-size: 13px !important;
  }
  nav.nav .nav-user, .nav .nav-user {
    font-size: 12px !important;
    order: 99 !important;
  }
  .btn-logout {
    padding: 8px 12px !important;
    font-size: 13px !important;
    min-height: 40px !important;
  }
  header nav.open, .nav-tabs.open, .navbar.open {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    background: white;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    padding: 8px 0;
    z-index: 1000;
  }
  header nav.open a, .nav-tabs.open a, .navbar.open a {
    padding: 14px 20px;
    border-bottom: 1px solid #eee;
    font-size: 15px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* 汉堡按钮 */
  .hamburger-btn {
    display: flex !important;
    flex-direction: column;
    justify-content: space-around;
    width: 44px !important;
    height: 44px !important;
    background: transparent;
    border: 0;
    padding: 10px;
    cursor: pointer;
  }
  .hamburger-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform .2s;
  }

  /* 顶栏整体 */
  header { padding: max(8px, env(safe-area-inset-top)) 16px 8px !important; min-height: calc(56px + env(safe-area-inset-top)) !important; }
  header h1, header .logo, header .brand { font-size: 16px !important; }

  /* 表格：横向滚动容器 */
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px !important;
    padding: 0 16px !important;
    width: calc(100% + 32px) !important;
    max-width: 100vw !important;
    display: block !important;
  }
  /* v3.0.9 修复：去掉 min-width: 600px 硬编码，否则小屏表格会撑破容器 */
  .table-responsive table { font-size: 14px; }
  .table-responsive th, .table-responsive td { padding: 10px 8px !important; }

  /* 不在表格响应容器里的 table 也加滚动 */
  table {
    max-width: 100% !important;
    width: 100% !important;
    font-size: 13px !important;
    table-layout: fixed;
    word-break: break-word;
  }
  table th, table td { font-size: 13px !important; padding: 6px 4px !important; }

  /* tab 容器：mobile 折行（避免挤压） */
  .time-presets, .detail-tabs, .dim-tabs, .month-pills {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .time-presets button, .detail-tab, .dim-tab, .month-pill {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
    font-size: 13px !important;
    padding: 8px 10px !important;
  }

  /* v3.0.9 趋势图 mobile 优化：避免 70/30 grid 把 SVG 切成细条 + tab 横向滚动 */
  .trend-section-row {
    display: block !important;     /* 取消 70/30，改为单列堆叠 */
  }
  .trend-chart-wrap {
    width: 100% !important;
    margin: 12px 0 !important;
  }
  /* SVG 改为方形比例（高度 = 宽度），标签清晰 */
  .trend-chart {
    width: 100% !important;
    height: auto !important;       /* 让 viewBox 控制比例 */
    aspect-ratio: 800 / 380;       /* 给 X 轴标签留更多空间 */
    display: block !important;
  }
  /* X 轴 / Y 轴文字：缩小但保留可读性 */
  .trend-chart .axis-label { font-size: 10px !important; }
  .trend-chart .trend-line { stroke-width: 2 !important; }
  .trend-chart .trend-point { r: 4 !important; }
  /* 图例：横向排列不换行 */
  .trend-legend {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    font-size: 11px !important;
    margin-top: 6px !important;
  }
  .trend-legend .legend-item {
    font-size: 11px !important;
  }
  /* Top 5 对方户名：从右栏改成下方独立模块 */
  .top5-wrap {
    margin-top: 16px !important;
    width: 100% !important;
  }
  .top5-wrap .top5-list {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  /* dimension tabs：横向滚动条（5 个 tab 在 360px 视口塞不下） */
  .dimension-tabs, .dim-tabs {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    gap: 6px !important;
  }
  .dimension-tabs .dim-tab, .dim-tabs .dim-tab {
    flex: 0 0 auto !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }
  /* chart 卡片标题栏：标题+tab 上下排（避免挤一行） */
  .chart-title-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .chart-title-row .chart-title {
    font-size: 15px !important;
    margin-bottom: 0 !important;
  }

  /* 搜索框 + 输入框撑满 */
  .search-input, .add-cat-input, input[type="text"], input[type="search"] {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important;  /* iOS Safari 防止自动放大 */
    height: 44px !important;
    box-sizing: border-box !important;
  }
  .search-row { width: 100% !important; flex-direction: column !important; }

  /* v3.0.9：对账状态 chip（全部/已对账/未匹配）—— mobile 排版优化
     - 不强制 column（让 3 个 chip 横向并排，能挤进同一行）
     - chip 不换字（white-space: nowrap）
     - 紧凑内边距，让 3 个 chip 能在 375px 视口挤进一行 */
  .status-filter-row {
    flex-wrap: nowrap !important;
    gap: 4px !important;
  }
  .status-filter-row .filter-chip {
    white-space: nowrap !important;
    flex: 1 1 0 !important;
    text-align: center !important;
    padding: 6px 4px !important;
    font-size: 12px !important;
    min-width: 0 !important;
  }
  .status-filter-row .filter-chip .count {
    margin-left: 2px !important;
    padding: 0 4px !important;
    font-size: 10px !important;
  }

  /* dashboard 卡片：单列 */
  .dashboard-grid, .stats-grid, .cards-grid,
  .kpi-grid-2x2, .business-master-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* 业务主卡容器：撑满 */
  .kpi-master-and-grid {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .business-master-card-full {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* 业务主卡 header（title + net）：保持横排，缩小 padding */
  .business-master-header {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    padding: 4px 0 8px !important;
  }
  .business-master-header > div:first-child { flex: 1 1 auto !important; min-width: 0 !important; }
  .business-master-header > .business-master-net { flex: 0 0 auto !important; min-width: 0 !important; }
  /* 业务主卡 net（净额）：紧凑显示，不撑满 */
  .business-master-net {
    max-width: 55% !important;
    padding: 0 !important;
    font-size: 13px !important;
    gap: 4px !important;
  }
  .business-master-net .net-label { font-size: 11px !important; }
  .business-master-net .net-value { font-size: 18px !important; }
  /* 业务侧（收入/支出）：堆叠单列 */
  .business-side {
    padding: 8px !important;
    font-size: 13px !important;
  }
  .business-side .side-amount { font-size: 18px !important; }
  .business-side .side-label { font-size: 11px !important; }

  /* dashboard 月份筛选器：横排可滚动 */
  .month-filter, .month-picker {
    display: flex !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .month-filter button, .month-picker button {
    flex-shrink: 0;
    width: 44px !important;
    height: 44px !important;
    font-size: 14px;
  }
}

/* ----------- 中型手机：≤640px ----------- */
@media (max-width: 640px) {
  :root { font-size: 15px; }
  body { font-size: 15px; }
  h1 { font-size: 20px !important; }
  h2 { font-size: 17px !important; }
  label { font-size: 14px !important; }
  input, select, textarea { font-size: 16px !important; height: 46px !important; }
  button, .btn { font-size: 15px !important; min-height: 46px !important; padding: 12px 14px !important; }
  .login-card, .login-container, .auth-card { padding: 18px !important; }
  .container, main { padding: 12px !important; }
}

/* ----------- 小型手机（iPhone SE）：≤375px ----------- */
@media (max-width: 375px) {
  :root { font-size: 14px; }
  body { font-size: 14px; }
  h1 { font-size: 18px !important; }
  h2 { font-size: 16px !important; }
  label { font-size: 13px !important; }
  input, select, textarea { font-size: 16px !important; height: 46px !important; }
  button, .btn { font-size: 15px !important; min-height: 46px !important; padding: 11px 12px !important; }
  .login-card, .login-container, .auth-card { width: calc(100vw - 24px) !important; padding: 16px !important; }
  header { padding: 6px 12px !important; }
}

/* ----------- 横屏适配 ----------- */
@media (orientation: landscape) and (max-height: 500px) {
  header { height: 48px !important; padding: 4px 16px !important; }
  .login-card { margin: 12px auto !important; padding: 16px !important; }
  .login-card h1 { font-size: 18px !important; margin-bottom: 12px !important; }
  .form-group { margin-bottom: 10px !important; }
}

/* ----------- 暗色模式自动适配 ----------- */
@media (prefers-color-scheme: dark) {
  /* 暂不实现，留待 v3.1.0 */
}