/* Mobile overrides for expense category picker and add-record modal */

/* --- Enforce 4-column grid on mobile and tighten card layout --- */
@media (max-width: 480px) {
  .expense-category-header {
    padding: 2px 10px 2px;
    min-height: 28px;
  }

  .preset-category-label {
    font-size: 14px;
  }

  .edit-category-btn {
    height: 30px;
    padding: 4px 6px;
  }

  #expenseCategoryPicker {
    /* bring grid closer to title */
    margin-top: -8px;
    /* 确保外层容器不限制高度 */
    max-height: none;
    overflow: visible;
    padding-bottom: 0;
    position: relative;
  }

  #expenseCategoryPicker .category-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* 严格的4列布局 */
    gap: 8px;
    padding: 4px 6px 14px 6px; /* 增加底部padding确保最后一行完整显示 */
    /* 确保前两列(8个分类项)完整显示 */
    /* 移动端计算: 每个卡片高度约为其宽度(aspect-ratio: 1/1) */
    /* 在375px宽设备上: (375 - 12px边距) / 4列 ≈ 90px/列 */
    /* 2行 × 90px + 1个gap(8px) + 上下padding(18px) = 206px */
    max-height: 210px; /* 增加高度确保完整显示两行 */
    overflow-y: auto;
    overflow-x: hidden;
    /* iOS Safari关键优化 */
    -webkit-overflow-scrolling: touch; /* 启用弹性滚动 */
    -webkit-transform: translateZ(0); /* 硬件加速 */
    transform: translateZ(0);
    /* 确保滚动容器有明确的约束 */
    min-height: 0;
    /* 防止iOS Safari的滚动问题 */
    position: relative;
    /* 防止弹性滚动影响布局 */
    overscroll-behavior-y: contain;
    /* 确保在iOS上正确显示 */
    will-change: scroll-position;
  }

  #expenseCategoryPicker .category-card {
    width: 100%; /* fill grid cell */
    max-width: none;
    min-width: 0;
    aspect-ratio: 1 / 1;
    padding: 6px;
  }

  #expenseCategoryPicker .category-card__content {
    gap: 4px; /* tighter internals */
    padding: 10px 4px 4px; /* 增加顶部内边距，减少底部内边距 */
  }

  #expenseCategoryPicker .category-card .category-icon {
    width: 24px; /* 调整图标尺寸 */
    height: 24px;
    margin: 0 auto 2px; /* 添加底部边距 */
    border-radius: 7px; /* 减小圆角 */
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.25); /* 减小阴影效果 */
  }

  #expenseCategoryPicker .category-card .category-icon i {
    font-size: 0.75rem;
  }

  #expenseCategoryPicker .category-card .category-name {
    font-size: 12px;
    line-height: 1.3;
    margin: 0;
    text-align: center;
    /* 移除flex布局，改用inline-block以支持文字换行 */
    display: inline-block;
    width: 100%; /* 默认宽度 */
    min-height: 2.4em; /* 预留两行空间以稳定布局 */
    /* 支持文字自动换行 */
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
    /* iOS Safari文字渲染优化 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* 针对不同字符长度的分类名称进行特殊处理 */
  #expenseCategoryPicker .category-card .category-name[data-length="1"],
  #expenseCategoryPicker .category-card .category-name[data-length="2"],
  #expenseCategoryPicker .category-card .category-name[data-length="3"],
  #expenseCategoryPicker .category-card .category-name[data-length="4"] {
    white-space: nowrap; /* 1-4个字符保持单行显示 */
    min-height: 1.2em; /* 单行高度即可 */
  }

  #expenseCategoryPicker .category-card .category-name[data-length="5"] {
    width: 4em; /* 限制宽度，使第5个字符换行 */
    min-height: 2.4em; /* 两行高度 */
    line-height: 1.2;
  }

  /* 6个字，3+3两行显示 */
  #expenseCategoryPicker .category-card .category-name[data-length="6"] {
    width: 42px; /* 限制宽度为3个字（约14px × 3 = 42px，确保能容纳3个中文字），实现3+3换行 */
    min-height: 2.4em; /* 两行高度 */
    line-height: 1.3;
    word-break: break-all; /* 确保精确按宽度换行 */
  }

  /* 7个字，4+3两行显示 */
  #expenseCategoryPicker .category-card .category-name[data-length="7"] {
    width: 52px; /* 限制宽度为4个字（需要稍宽以容纳4个中文字），实现4+3换行 */
    min-height: 2.4em; /* 两行高度 */
    line-height: 1.3;
    word-break: break-all; /* 确保精确按宽度换行 */
  }

  /* 8个字，4+4两行显示 */
  #expenseCategoryPicker .category-card .category-name[data-length="8"] {
    width: 52px; /* 限制宽度为4个字（需要稍宽以容纳4个中文字），实现4+4换行 */
    min-height: 2.4em; /* 两行高度 */
    line-height: 1.3;
    word-break: break-all; /* 确保精确按宽度换行 */
  }

  /* Safari浏览器特殊处理 */
  @supports (-webkit-touch-callout: none) {
    #expenseCategoryPicker .category-card .category-name[data-length="5"],
    #expenseCategoryPicker .category-card .category-name[data-length="6"],
    #expenseCategoryPicker .category-card .category-name[data-length="7"],
    #expenseCategoryPicker .category-card .category-name[data-length="8"] {
      -webkit-line-break: after-white-space; /* Safari专用换行控制 */
      line-break: auto; /* 标准换行控制 */
    }
  }

  /* 暗黑模式下移动端容器背景 - 玻璃态设计 */
  .dark-mode #expenseCategoryPicker .category-cards {
    background: linear-gradient(
        to bottom,
        rgba(20, 20, 25, 0.4) 0%,
        rgba(25, 25, 30, 0.5) 50%,
        rgba(30, 30, 35, 0.6) 100%
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
  }
}

/* --- Trim add-record modal top area on mobile --- */
@media (max-width: 480px) {
  #addRecordModal .modal-title {
    margin-bottom: 8px;
  }

  /* 确保模态框不限制分类选择器的高度 */
  #addRecordModal .modal-content {
    max-height: 90vh; /* 限制整个模态框高度 */
    overflow-y: visible; /* 模态框本身不滚动 */
    display: flex;
    flex-direction: column;
  }

  /* 确保expense-category-picker-container不被裁剪 */
  #addRecordModal .expense-category-picker-container {
    overflow: visible;
    margin-bottom: 12px;
    /* iOS Safari关键修复: 确保容器不会收缩 */
    flex-shrink: 0;
    /* 确保内容不被裁剪 */
    min-height: 0;
  }

  /* iOS Safari特殊优化 - 使用特征检测 */
  @supports (-webkit-touch-callout: none) {
    #expenseCategoryPicker .swipe-category-picker,
    #expenseCategoryPicker .swipe-container {
      overflow: visible !important;
      height: auto !important;
    }

    #expenseCategoryPicker .category-cards {
      /* iOS Safari需要明确的height来正确处理overflow */
      height: auto;
      max-height: 210px;
      /* 优化iOS滚动性能 */
      -webkit-overflow-scrolling: touch;
      will-change: scroll-position;
      /* 防止橡皮筋效果影响布局 */
      overscroll-behavior: contain;
    }
  }
}