/* ==================================================================
   mobile.css — iOS Safari・Android Chrome レスポンシブ対応
   ブレークポイント: 767px 以下をモバイルとして扱う
   PC のレイアウトは変更しない (screen media query で完全に隔離)
   ================================================================== */

/* ── iOS Safari フォントブースト無効化 ── */
html {
  -webkit-text-size-adjust: 100%;
}

@media screen and (max-width: 767px) {
  /* ── body 余白を縮小 ── */
  body {
    padding: 12px !important;
    margin: 8px !important;
  }

  /* ── h1・h2 フォントサイズ ── */
  h1 {
    font-size: 1.35rem !important;
  }
  h2 {
    font-size: 1.1rem !important;
  }

  /* ================================================================
     テーブル: 横スクロール
     会計・給与テーブルは列数が多く、横スクロールが最適解
     ================================================================ */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* テーブルを包む overflow:hidden ラッパーも解放する */
  .doc-table-wrap {
    overflow-x: auto !important;
  }

  /* ================================================================
     フォーム入力: 16px で iOS の自動ズームを防ぐ
     ================================================================ */
  input[type="text"],
  input[type="date"],
  input[type="number"],
  input[type="password"],
  input[type="email"],
  input[type="tel"],
  select,
  textarea {
    font-size: 16px !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* ================================================================
     ボタン: タップ領域を 44px 以上に (iOS HIG 推奨)
     ================================================================ */
  button,
  input[type="submit"],
  input[type="button"],
  .btn,
  .upload-btn,
  .back-link,
  .logout-btn,
  .change-pw-btn {
    min-height: 44px;
    touch-action: manipulation;
  }

  /* ================================================================
     index.html
     ================================================================ */

  /* 2カラムカードグリッド → 1カラム */
  .grid {
    grid-template-columns: 1fr !important;
  }

  /* ヘッダー: タイトルとユーザー情報を縦積み */
  header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  header h1 {
    font-size: 18px !important;
  }

  .user-info {
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 8px !important;
    font-size: 13px !important;
  }

  /* カード内ボタン群: 縦積み・margin-left をリセット */
  .card p:last-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .btn {
    margin-left: 0 !important;
    display: block !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* パスワード変更モーダル: 画面幅に合わせる */
  .modal-box {
    width: 92vw !important;
    max-width: 92vw !important;
    padding: 20px !important;
  }

  /* ================================================================
     payroll.html (給与システムメニュー)
     ================================================================ */

  .menu-grid {
    grid-template-columns: 1fr !important;
  }

  .menu-card {
    padding: 20px !important;
  }

  /* ================================================================
     journal-entry.html / journal-edit.html (仕訳入力)
     ================================================================ */

  /* 検索フォーム: 2カラムグリッド → 1カラム */
  .search-form-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .search-form-row,
  .search-form-row-full {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }

  .search-form-row label,
  .search-form-row-full label {
    min-width: unset !important;
    width: 100%;
  }

  .search-form-row input,
  .search-form-row select,
  .search-form-row-full input,
  .search-form-row-full select {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 検索ボタン群 */
  .search-buttons {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .search-buttons button {
    flex: 1 1 auto !important;
    min-width: 100px !important;
  }

  /* .row: 日付・摘要・勘定科目などの入力行 */
  .row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    width: 100%;
  }

  .row label {
    min-width: unset !important;
  }

  .row input,
  .row select {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ================================================================
     trial-balance.html (試算表)
     テキスト中心の inline 検索フォームを縦積みにする
     ================================================================ */

  .search-form {
    text-align: left !important;
    padding: 12px !important;
  }

  /* trial-balance の検索フォームは label/input が直接子要素 */
  .search-form > label {
    display: block !important;
    margin: 6px 0 2px !important;
  }

  .search-form > input[type="text"],
  .search-form > input[type="date"],
  .search-form > input[type="number"] {
    display: block !important;
    width: 100% !important;
    margin: 0 0 8px 15px !important;
    box-sizing: border-box !important;
  }

  .search-form > button {
    display: inline-block !important;
    margin: 4px 4px 0 0 !important;
    width: auto !important;
    min-width: 80px;
  }

  /* ================================================================
     nenkin-portal.html (社会保険電子文書)
     ================================================================ */

  .page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .upload-zone {
    padding: 20px 16px !important;
  }

  /* フィルターバー: wrapping は既存スタイルで対応済み、幅を補完 */
  .filter-bar {
    gap: 8px !important;
  }

  .filter-select {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ================================================================
     payroll-employees.html / payroll-settings.html (タブ UI)
     ================================================================ */

  .nav-tabs {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    border-bottom: none !important;
  }

  .nav-tab {
    padding: 8px 14px !important;
    font-size: 0.85rem !important;
    border-radius: 6px !important;
  }

  /* container の余白縮小 */
  .container {
    margin: 10px !important;
    padding: 16px 12px !important;
    border-radius: 10px !important;
  }

  /* ================================================================
     payroll-settings.html (2/3カラムフォームグリッド → 1カラム)
     ================================================================ */

  .form-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .form-row-3 {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .form-group {
    width: 100%;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ================================================================
     payroll-calculation.html (月次給与計算)
     ================================================================ */

  /* フィルター行のラベルを縦積み */
  .filters {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px !important;
  }

  .filters label {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin-right: 0 !important;
    width: 100%;
  }

  .filters input,
  .filters select {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── split-layout: PC は左右分割、モバイルは上下積み ── */
  /* 左リスト・右明細を縦方向に並べ直す */
  .split-layout {
    flex-direction: column !important;
  }

  .split-left {
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    max-height: none !important;
    overflow-y: visible !important;
    position: static !important;
  }

  .split-right {
    width: 100% !important;
    min-width: 0 !important;
    border-left: none !important;
    border-top: 2px solid #e0e8f0 !important;
    padding-left: 0 !important;
    padding-top: 16px !important;
    margin-top: 8px !important;
    max-height: none !important;
    overflow-y: visible !important;
    position: static !important;
  }

  /* ── タブ（給与計算・賞与計算・帳票出力）を折り返し ── */
  .nav-tabs-calc {
    flex-wrap: wrap !important;
    gap: 6px !important;
    border-bottom: none !important;
  }

  .nav-tab-calc {
    padding: 8px 14px !important;
    font-size: 0.9rem !important;
    border-radius: 6px !important;
  }

  /* ── 新規計算モーダル（inline style の width:800px を上書き） ── */
  #calculateModal,
  #bonusModal {
    width: 92vw !important;
    left: 4vw !important;
    transform: none !important;
    max-width: 92vw !important;
    padding: 20px 16px !important;
    box-sizing: border-box !important;
  }
}