/* ============================================================
   mobile.css — フィリール納期管理システム モバイル対応
   すべて @media (max-width: 768px) 内に閉じる。
   PC（>768px）には一切影響しない。
   問題時は index.html の読み込み2行をコメントアウトで完全復帰。
   ============================================================ */

@media (max-width: 768px) {

  /* ===== 全体レイアウト：アプリシェル解除（モバイルは通常フロー＝body/viewportがスクロール） ===== */
  html {
    height: auto;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
  }
  body {
    display: block;            /* flex行レイアウト解除（#app-bodyのstretch解消） */
    height: auto;
    min-height: 100vh;
    overflow: visible;         /* 100vh固定＋hiddenを解除＝ページ全体がスクロール */
  }
  /* ドロワー展開中のみ背面スクロールをロック（付与/解除は openDrawer/closeDrawer に集約）。
     body height:auto では overflow:hidden だけでは効かないため position:fixed 方式。
     top は JS が -scrollY を設定し、閉じるとき window.scrollTo で復元する。 */
  body.m-drawer-open {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
  }

  #app-body {
    display: block;            /* flex 横並びを解除 */
    height: auto;
    min-height: 100vh;
    overflow: visible;
    padding-top: 62px;         /* 全幅ヘッダー下端(実測 top0+height58px)＋余白。潜り込み防止 */
  }

  #main {
    height: auto;
    min-height: 100vh;
    overflow-y: visible;
    padding: 8px 10px 32px;    /* 上余白はヘッダー分を #app-body 側の padding-top で確保 */
    width: 100%;
  }

  /* ===== サイドバー → 左ドロワー化 =====
     #app-body #sidebar（2 id）で #sidebar.closed（1id+1class）より高い詳細度にして
     PC用の width:14% / .closed width:7% を確実に上書きする。 */
  #app-body #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;
    width: 82%;
    max-width: 320px;
    min-width: 0;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10050;
    overflow-y: auto;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.25);
  }
  #app-body #sidebar.is-open {
    transform: translateX(0);
  }

  /* PC用の開閉トグルボタンはモバイルでは隠す */
  .toggle-area { display: none !important; }

  /* ドロワー内のタブは見やすく（タップ領域 44px 以上） */
  .tab-item {
    padding: 15px 22px;
    min-height: 44px;
  }
  .tab-item .tab-label { font-size: 15px; }

  /* ===== モバイルで非表示にするタブ（PC専用機能） =====
     .tab-item[data-tab="X"]（0,2,0）が .tab-item（0,1,0）に勝つ。 */
  .tab-item[data-tab="shipreg"],
  .tab-item[data-tab="master"],
  .tab-item[data-tab="input"],
  .tab-item[data-tab="restore"],
  .tab-item[data-tab="account"] {
    display: none !important;
  }

  /* ============================================================
     モバイルヘッダーバー全幅化（実機バグ修正）
     PCの右寄せピル型は right:16px 固定・width:auto で内容に応じ「左へ」伸びる。
     ログイン後にユーザー名/同期テキストが入ると左端が画面外(実測 left:-58px)に出て、
     バー内で最左の子であるハンバーガー(実測 left:-45px)がタップ不能になる。
     → モバイルでは top:0・全幅・角丸なしの固定バーにし、
        ハンバーガーを必ず左端(画面内)に固定。テキストは ellipsis で溢れさせない。
     ============================================================ */
  #sync-status-bar {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 0;
    border-left: none;
    border-right: none;
    justify-content: flex-start;   /* PC の flex-end を打ち消し、ハンバーガーを左端に */
    gap: 8px;
    padding: 6px 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  }
  /* ハンバーガー：常に左端・固定幅（縮まない・折り返さない＝必ず画面内） */
  #sync-status-bar #m-hamburger { flex: 0 0 auto; }
  /* 同期テキスト：可変・溢れたら省略（ハンバーガー/ログアウトを押せることを最優先） */
  #sync-status-bar #sync-status-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* ユーザー情報：縮小可。ログアウトボタンは固定幅で常にタップ可、名前は省略 */
  #sync-status-bar .login-user-info { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  #sync-status-bar .login-user-name {
    max-width: 84px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #sync-status-bar .btn-logout { flex: 0 0 auto; }

  /* ===== ハンバーガーボタン（JSで #sync-status-bar に追加） ===== */
  #m-hamburger {
    display: inline-flex !important;   /* JSのinline display:none を上書き（!important） */
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: #ffffff;
    color: #333;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }

  /* ===== ドロワー背面オーバーレイ（JSで body に追加） ===== */
  #m-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 10040;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
  }
  #m-drawer-overlay.is-visible {
    display: block !important;         /* JSのinline display:none を上書き */
    opacity: 1;
    pointer-events: auto;
  }

  /* ===== 入力欄：iOS Safari の自動ズーム防止（16px以上） ===== */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* タップ領域の確保 */
  button,
  input[type="checkbox"],
  input[type="radio"] {
    min-height: 24px;
  }
  .tab-item, #m-hamburger, .btn-expand-case {
    min-height: 44px;
  }

  /* ===== モーダル：幅100%・縦スクロール可 ===== */
  .alert-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 88vh;
  }
  .alert-modal-overlay { padding: 8px; }
  #ng-modal-box {
    width: 92% !important;
    max-width: 92% !important;
    max-height: 88vh;
    overflow-y: auto;
  }

  /* ============================================================
     出荷遅延タブ以外の横スクロールテーブルは横スクロール維持
     （Phase 2 で変換するのは progress のみ）
     ============================================================ */

  /* ============================================================
     Phase 2: 進捗タブ 案件アコーディオン（progress のみ）
     既存DOMは移動・再構築せず、クラス付与と display 切替のみで表現。
     block レイアウト化＋ JS 付与クラスで折りたたみ。
     ============================================================ */

  /* thead は不要（カード化するため隠す） */
  #progress-cases-table thead { display: none; }

  /* 横スクロールをやめて全幅に */
  #page-progress .all-cases-scroll { overflow-x: visible; }
  #page-progress .all-cases-wrap { overflow: visible; }

  /* table 構造を block 化（rowspan は無視され、セルが縦に積まれる） */
  #progress-cases-table,
  #progress-cases-table tbody,
  #progress-cases-table tr,
  #progress-cases-table td {
    display: block;
    width: auto;
  }
  #progress-cases-table td {
    border: none;
    padding: 2px 4px;
  }

  /* 案件ヘッダ行 = カード。col-expand と col-case を横並びに */
  #progress-cases-table tr.m-case-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px 8px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    margin: 8px 0;
    padding: 8px 10px;
    background: #ffffff;
    cursor: pointer;
  }
  #progress-cases-table tr.m-case-head > td.col-expand {
    flex: 0 0 auto;
    padding: 0;
  }
  #progress-cases-table tr.m-case-head > td.col-case {
    flex: 1 1 60%;
    padding: 0;
  }
  /* ヘッダ行内の図面セルは折り返して全幅（開いた時だけ表示） */
  #progress-cases-table tr.m-case-head > td.m-drawcell {
    flex: 1 1 100%;
  }

  /* 図面行（2枚目以降）= インデントされたミニカード */
  #progress-cases-table tr.m-draw-row {
    margin: 0 0 4px 12px;
    padding: 6px 8px;
    border-left: 3px solid #e0e0e0;
    background: #fafafa;
    border-radius: 0 6px 6px 0;
  }

  /* ステータスパネル行・編集パネル行 */
  #progress-cases-table tr.m-panel-row {
    margin: 0 0 8px 0;
  }

  /* ---- 折りたたみ制御 ---- */
  /* 畳んだ状態：ヘッダ行の図面セル・図面行・ステータスパネル行を隠す */
  #progress-cases-table tr.m-case-head.m-collapsed > td.m-drawcell { display: none; }
  #progress-cases-table tr.m-draw-row.m-collapsed { display: none; }
  #progress-cases-table tr.m-panel-row.m-collapsed { display: none; }

  /* 不要列（社名・O/N・手配先・手配日・メモ・出荷情報）はモバイルで隠す */
  #progress-cases-table td.m-hide-mobile { display: none !important; }

  /* 表示する図面セルはインラインブロックで流す＋ラベル付与 */
  #progress-cases-table td.m-drawcell:not(.m-hide-mobile) {
    display: inline-block;
    vertical-align: top;
    margin: 1px 8px 1px 0;
    font-size: 13px;
  }
  #progress-cases-table td.m-drawcell[data-mlabel]::before {
    content: attr(data-mlabel) "：";
    font-weight: bold;
    color: #999;
    font-size: 11px;
    margin-right: 2px;
  }
  /* ステータスバッジ列（col-draw-status）はラベルなし・ブロックで全幅 */
  #progress-cases-table td.col-draw-status.m-drawcell {
    display: block;
    margin: 2px 0;
  }

  /* ---- 遅延／NG のピンク背景（既存配色 #ffd6d6 を踏襲） ---- */
  #progress-cases-table tr.m-draw-row.m-delay,
  #progress-cases-table tr.m-draw-row.m-ng {
    background: #ffd6d6;
    border-left-color: #e74c3c;
  }
  #progress-cases-table tr.m-case-head.m-has-alert {
    border-color: #e9a1a1;
    background: #fff5f5;
  }

  /* ---- 畳んだ状態のバッジ（枚数・遅延・NG、JSで span を append） ---- */
  .m-case-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
  }
  .m-case-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    padding: 1px 7px;
    border-radius: 10px;
    background: #eef1f5;
    color: #445;
    white-space: nowrap;
  }
  .m-case-badge.m-badge-delay { background: #ffe0e0; color: #c0392b; }
  .m-case-badge.m-badge-ng    { background: #ffd0d0; color: #b71c1c; }

  /* 案件セル内の情報を読みやすく */
  #progress-cases-table td.col-case .case-cell-company { font-weight: bold; font-size: 14px; }
  #progress-cases-table td.col-case .case-cell-supplier,
  #progress-cases-table td.col-case .case-cell-on,
  #progress-cases-table td.col-case .case-cell-caseNo { font-size: 12px; color: #666; }

  /* ============================================================
     やることリスト：カレンダー月切替（モバイルのみ・display切替）
     ============================================================ */
  /* 表示月をラッパー内側で横スクロール（ページ全体は html{overflow-x:hidden}で固定済み） */
  #calendar-grid {
    overflow-x: auto;
    gap: 0;
  }
  /* 非表示月（先月・来月のうち本体でないもの） */
  #calendar-grid .cal-month.m-cal-hidden { display: none !important; }
  /* 表示月：マス幅はJSが .cal-days に repeat(7, Wpx) を設定 → コンテナは max-content で追従 */
  #calendar-grid .cal-month.m-cal-shown {
    flex: none !important;      /* 既存 .small(flex:0 0 270px)/.large(flex:1) を無効化 */
    width: max-content;
    max-width: none;
  }
  #calendar-grid .cal-month.m-cal-shown .cal-day { min-height: 80px; }   /* large相当 */
  #calendar-grid .cal-month.m-cal-shown .cal-event { padding: 2px 4px; margin-top: 3px; }

  /* ---- フォント 0.8倍（--m-cal-scale で一括制御・後から係数のみ変更可） ---- */
  #todo-calendar-section { --m-cal-scale: 0.8; }
  #todo-calendar-section .cal-month-header { font-size: calc(15.6px * var(--m-cal-scale)); }
  #todo-calendar-section .cal-weekday      { font-size: calc(11px  * var(--m-cal-scale)); }
  #todo-calendar-section .cal-day-num      { font-size: calc(11px  * var(--m-cal-scale)); }
  /* ---- 案件名：折り返さず・省略記号なしで全部表示（この状態で幅を計測する） ---- */
  #todo-calendar-section .cal-event {
    font-size: calc(12px * var(--m-cal-scale));
    white-space: nowrap;   /* 折り返さない（維持） */
    overflow: visible;     /* hidden 解除 */
    text-overflow: clip;   /* ellipsis 解除 */
  }

  /* 月切替ボタンバー（JSで #todo-calendar-section 先頭に冪等append） */
  #m-cal-switcher {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 8px;
  }
  .m-cal-btn {
    flex: 0 0 auto;
    min-height: 44px;           /* タップ領域確保 */
    min-width: 96px;
    padding: 8px 18px;
    background: #2c3e50;         /* 既存の月ヘッダー配色 */
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
  }
  .m-cal-btn:active { background: #1f2c39; }
}