/* ==============================================================
   Mobile Base — 全アプリ共通のスマホ表示最適化 (T-007 Step B)

   対象: ヘッダー、タブバー、モーダル、フォーム、ボタン、フォント

   /css/mobile-safe.css (safe-area 対応) と組み合わせて使う。
   各アプリの HTML で、theme.css → mobile-safe.css → mobile-base.css の
   順で読み込むこと。
   ============================================================== */

/* ────────────────────────────────────────────
   1. iOS Safari の input ズーム回避

   font-size: 16px 未満の input にフォーカスすると、iOS Safari は
   自動でページをズームインしてしまう (アクセシビリティ機能)。
   これを回避するため、input/select/textarea の最小フォントサイズを
   16px に統一する。デスクトップ表示には影響しない (もともと小さいフォントを
   使っていなければ視覚的に変化なし)。
   ──────────────────────────────────────────── */

@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="number"],
  input[type="password"],
  input[type="date"],
  input[type="time"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ────────────────────────────────────────────
   2. タッチターゲット最小サイズの統一

   Apple HIG / Material Design ともに 44px 以上を推奨。
   既存アプリで 32px の小ボタン (.btn-small など) もあるため、
   ここでは「タップ可能要素の最小高さ 44px」を強制せず、
   「主要ボタンは 44px 以上を保証」の方針とする。
   各アプリの button.btn は既に min-height: 44px だが、
   念のためグローバルに保険ルールを入れる。
   ──────────────────────────────────────────── */

@media (max-width: 768px) {
  button:not(.btn-small):not(.modal-close):not(.btn-rotate):not(.theme-btn):not(.hdr-btn):not(.btn-rollback):not(.btn-merge):not(.btn-tab) {
    min-height: 44px;
  }
}

/* ────────────────────────────────────────────
   3. ヘッダー右側の詰まり対策

   .header-right に theme-btn + username + logout が並ぶと、
   画面幅 360-380px で詰まる。狭画面では:
   - username を非表示に
   - btn-logout を「ログアウト」→ アイコン (🚪) に変更するのは難しいため、
     ボタンサイズを少し小さくする (font-size: 11px / padding: 4px 8px)
   - theme-btn は既存のまま (不要なら個別アプリで隠す)
   ──────────────────────────────────────────── */

@media (max-width: 480px) {
  .hdr-username {
    display: none !important;
  }
  .hdr-btn,
  .header-right .btn {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }
}

/* ────────────────────────────────────────────
   4. タブバーのスクロール演出

   .tabs / .app-nav / .tab-bar に overflow-x: auto が設定されている
   アプリで、スクロール可能なことが視覚的に分かるよう、
   - スクロールバーを薄く表示
   - 右端にフェードグラデーションを追加 (オプション)
   ──────────────────────────────────────────── */

.tabs::-webkit-scrollbar,
.app-nav::-webkit-scrollbar,
.tab-bar::-webkit-scrollbar {
  height: 3px;
  background: transparent;
}
.tabs::-webkit-scrollbar-thumb,
.app-nav::-webkit-scrollbar-thumb,
.tab-bar::-webkit-scrollbar-thumb {
  background: var(--border-main, rgba(127, 119, 221, 0.3));
  border-radius: 2px;
}

/* スクロール時の慣性 (iOS) */
.tabs,
.app-nav,
.tab-bar {
  -webkit-overflow-scrolling: touch;
}

/* ────────────────────────────────────────────
   5. モーダルの狭画面対応

   既存実装は max-height: 90vh のみ。max-width が未設定 or width: 100% の
   ことが多く、padding と相まって狭画面で内側のグリッドが overflow する。

   - .modal の padding を狭画面で 16px → 12px に
   - .modal-field-row .full の grid-column を狭画面で span 1 に強制
     (個別アプリの @media クエリと重複してもよい、!important なし)
   ──────────────────────────────────────────── */

@media (max-width: 640px) {
  .modal {
    padding: 14px !important;
    border-radius: 10px !important;
  }
  .modal-actions {
    flex-direction: column-reverse;
    gap: 8px;
  }
  .modal-actions .btn {
    width: 100%;
  }
}

/* ────────────────────────────────────────────
   6. body 全体の左右パディング微調整

   各アプリの .pane や .container で max-width が設定されていない場合、
   コンテンツが画面端に張り付いて窮屈に見える。
   左右に最低 12px の余白を確保する。
   ──────────────────────────────────────────── */

@media (max-width: 480px) {
  main {
    padding-left: max(12px, env(safe-area-inset-left, 0)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0)) !important;
  }
}

/* ────────────────────────────────────────────
   7. フォーム要素の縦並び対応 (狭画面)

   .modal-field-row, .row-split など、デフォルトで grid 2 列の要素が
   狭画面で 1 列になるよう、共通化する。各アプリで個別対応している
   ものもあるが、ここで保険ルールを入れる。
   ──────────────────────────────────────────── */

@media (max-width: 480px) {
  .row-split,
  .modal-field-row {
    grid-template-columns: 1fr !important;
  }
}