/* ==========================================================================
   responsive.css — モバイル / 小型タブレット表示の補強

   既存の <style> ブロック (cashflow/index.html) は維持したまま、後ろから
   オーバーライドする形でレスポンシブ専用の規則をここに集約する。
   CONVENTIONS.md §1 に従い CSS は styles/ 配下に段階的に分離していく。

   ブレークポイント方針:
     - 既存:       max-width: 900px (タブレット〜大型スマホ)
     - 追加:       max-width: 600px (一般的なスマートフォン縦持ち)
     - 追加:       max-width: 380px (小型スマホ; iPhone SE 等)
     - 追加:       (max-height: 480px) AND (max-width: 900px) (横持ち)

   タッチ端末判定: (pointer: coarse)
   ========================================================================== */

/* ---------- タップ領域 (Apple HIG / Material Design いずれも >= 44px 推奨) -- */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 36px; }
  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="search"],
  select,
  textarea {
    min-height: 44px;
    font-size: 16px; /* iOS Safari の自動ズーム抑止 */
  }
}

/* ---------- 中型ブレークポイント (≤ 600px) ----------------------------------- */
@media (max-width: 600px) {
  /* レイアウト全体の余白を詰める */
  .main-content { padding: 14px 12px; }
  .main-header { padding: 0 12px; height: 52px; }
  .card { padding: 14px; border-radius: 10px; }

  /* 見出しサイズ */
  h2 { font-size: 1.05rem; }
  h3 { font-size: 0.98rem; }
  h4 { font-size: 0.9rem; }

  /* KPI グリッドを 1 列に */
  .kpi-grid { grid-template-columns: 1fr !important; gap: 10px; }

  /* サイドバー幅をビューポート連動に */
  .sidebar { width: 84vw; max-width: 300px; }

  /* モーダル: 画面端まで使う */
  .modal { padding: 8px; align-items: flex-end; }
  .modal-content {
    max-width: 100%;
    width: 100%;
    padding: 18px 16px;
    border-radius: 14px 14px 0 0;
    max-height: 90vh;
  }

  /* テーブルのフォントを縮小 (横スクロールは既存 .table-wrapper で対応) */
  table { font-size: 0.78rem; }
  th, td { padding: 6px 8px !important; }

  /* フォーム要素 */
  .form-group label { font-size: 0.82rem; }
  .form-group { margin-bottom: 10px; }

  /* タブ / バッジ / リンクの密度 */
  .badge { font-size: 0.7rem; padding: 2px 8px; }

  /* ヘッダーアクション (ログアウトなど) は折り返し */
  .auth-header-user { font-size: 0.78rem; gap: 6px; }
  .auth-header-user button { padding: 6px 10px; min-height: 36px; }
}

/* ---------- 小型ブレークポイント (≤ 380px / iPhone SE) ---------------------- */
@media (max-width: 380px) {
  .main-content { padding: 10px 10px; }
  .card { padding: 12px; }
  .badge { font-size: 0.66rem; }
  .btn { padding: 10px 14px; }
  .btn-sm { padding: 6px 10px; font-size: 0.78rem; }
  /* サイドバーブランド名は省略 */
  .sidebar-brand small { display: none; }
}

/* ---------- 横持ちで縦が低いとき (画像プレビュー等を抑える) ----------------- */
@media (max-height: 480px) and (max-width: 900px) {
  .receipt-preview-img { max-height: 160px !important; }
}

/* ==========================================================================
   レシート読み込み (Receipt OCR) 専用の補強
   ========================================================================== */
.receipt-preview-img {
  max-width: 100%;
  max-height: 380px;
  border-radius: 6px;
  display: block;
  margin: 0 auto;
}
.receipt-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

@media (max-width: 600px) {
  .receipt-preview-img { max-height: 240px; }

  /* 撮影/ファイル選択/クリア ボタンを 1 列縦並びでフルワイドに */
  .receipt-action-row { flex-direction: column; align-items: stretch; }
  .receipt-action-row > label,
  .receipt-action-row > button { width: 100%; justify-content: center; text-align: center; }
}