/* =====================================================================
   スマホ対応（レスポンシブ）。幅 640px 以下で縦積み・横スクロールに最適化。
   既存レイアウト（app.blade レイアウト配下の画面）を対象。最後に読み込む。
   ===================================================================== */
@media (max-width: 640px) {
  /* コンテナ余白を圧縮 */
  main.container, .container { padding-left: 8px !important; padding-right: 8px !important; max-width: 100% !important; }

  /* トップバー: 折り返して段組み */
  .topbar { flex-wrap: wrap; height: auto !important; padding: 6px 10px !important; gap: 4px 8px; }
  .topbar .brand { font-size: 15px; }
  .topbar .spacer { display: none !important; }
  .topbar .topnav { margin-left: 0 !important; order: 3; width: 100%; flex-wrap: wrap; gap: 4px; }
  .topbar .topnav a { padding: 6px 10px; font-size: 14px; }
  .topbar .user { order: 4; width: 100%; font-size: 14px; justify-content: space-between; }

  /* 開発バナー: flex が折り返さないと1文字ずつ縦に潰れて画面の半分を占領するので折返す。
     マウスホバーの説明はスマホでは意味が無いので隠す。 */
  .dev-banner { font-size: 14px; padding: 4px 8px; flex-wrap: wrap; gap: 4px 8px; line-height: 1.4; }
  .dev-banner .dev-hint { display: none; }
  .dev-banner .dev-switch { margin-left: 0; }
  .dev-banner .dev-table-badge { margin-left: 0 !important; }

  /* ページタイトルと右寄せボタン */
  .page-title { font-size: 18px !important; line-height: 1.3; }
  .page-title .btn, .page-title .btn-new { float: none !important; display: inline-block; margin: 6px 4px 0 0; }

  /* 検索フォーム: 1列に */
  .search .row { flex-direction: column; align-items: stretch; gap: 8px; }
  .search label { width: 100%; }
  .search input[type="text"], .search input[type="date"], .search input[type="number"],
  .search input[type="email"], .search input[type="password"], .search select { width: 100% !important; box-sizing: border-box; }
  .search .actions { flex-wrap: wrap; gap: 6px; }
  .search .actions .btn { flex: 1 1 auto; }

  /* 一覧・ポータル・入力ヘッダの各表: 横スクロールで崩さず表示 */
  table.list, table.portal, .po-head, .seg {
    display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  table.list { white-space: nowrap; }

  /* 加工指図書 入力: 2ペイン → 1列 */
  .po-cols { grid-template-columns: 1fr !important; gap: 10px !important; }
  .form-grid { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* 入力タイトルバー / ステータス: 折返し */
  .po-titlebar { flex-wrap: wrap; gap: 8px; }
  .po-titlebar .grow { display: none; }
  .po-statusbox { flex-wrap: wrap; gap: 6px 12px; }

  /* タブ: 折返し */
  .tabs { flex-wrap: wrap; gap: 4px; }
  .tabs button, .tabs .tab-btn { padding: 8px 14px; font-size: 14px; }

  /* 閲覧ヘッダ: 6列 → 2列 */
  .detail-head { grid-template-columns: 1fr 1fr !important; }

  /* フッター操作: 縦積み・全幅 */
  .po-foot, .foot-actions { flex-wrap: wrap; gap: 8px; }
  .po-foot .btn, .foot-actions .btn { flex: 1 1 auto; text-align: center; }

  /* モーダルを画面幅に収める */
  .modal-box { width: 94vw !important; max-width: 94vw !important; }

  /* iOS でフォーカス時に自動ズームしないよう入力フォントを 16px に */
  input[type="text"], input[type="number"], input[type="date"], input[type="email"],
  input[type="password"], select, textarea { font-size: 16px; }
}

/* =====================================================================
   課別メニュー（スマートフォン）。
   ・課タイル一覧 /section-menu … 既定は 5列固定なので、狭い画面では列を減らす。
     タイル高さも固定 140px をやめ、課名が何行になっても収まるようにする
     （固定高だと「生産部生産課（繊維）」等がはみ出して縦書きのように潰れる）。
   ・課別メニュー /section-view … 機能ボタンを1列に伸ばし、タップ領域を確保する。
   ===================================================================== */
@media (max-width: 900px) {
  .sec-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; }
}

@media (max-width: 640px) {
  /* --- 課タイル一覧: 1列（縦積み）で1行1課 ---
     2列だと「生産部生産課（繊維）」等の長い課名が折返して読みにくいので、
     全幅の横長タイルを縦に並べ、課名を左寄せ・課コードは名称の後ろに小さく置く。 */
  .sec-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important; margin: 14px 0 !important; max-width: 100% !important;
  }
  .sec-tile {
    height: auto !important; min-height: 0 !important;
    justify-content: flex-start !important; text-align: left !important;
    padding: 14px 16px !important; font-size: 17px !important;
    line-height: 1.35; border-radius: 12px;
    overflow-wrap: anywhere; word-break: break-word;
  }
  .sec-tile small {
    display: inline !important; font-size: 14px !important;
    margin: 0 0 0 8px !important;
  }

  /* タイトル右のボタンが浮いてタイルに重ならないようにする */
  .page-title { overflow: hidden; }
  .page-title .btn { float: none !important; display: block; width: 100%;
    box-sizing: border-box; text-align: center; margin: 10px 0 0 !important; }

  /* --- 課別メニュー（機能ボタン） --- */
  .sec-board { padding: 10px !important; border-radius: 8px; }
  .sec-cols  { columns: 1 !important; column-gap: 0 !important; }
  .sec-col   { margin-bottom: 14px; }
  .sec-col h3 { font-size: 15px; padding: 8px; }
  .fn-btn { min-height: 52px; font-size: 15px; padding: 10px 12px; margin: 7px 0; }
  .fn-icon { width: 30px; height: 28px; font-size: 14px; }
  .fn-icon.k-report { font-size: 14px; }

  /* タブは折返して全部見えるように（横に切れて押せなくならないように） */
  .sec-tabs { flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
  .sec-tabs a { padding: 9px 14px; font-size: 14px; border-radius: 8px; border-bottom: 1px solid var(--hig-sep); }

  /* フッターの移動ボタンは全幅 */
  .sec-footer { flex-direction: column; gap: 10px; margin: 18px 0 8px; }
  .sec-navbtn { min-width: 0; width: 100%; box-sizing: border-box; font-size: 16px; padding: 13px 16px; }
}