/* =====================================================================
   Libersync モバイル最適化スタイル（スマホ／折りたたみ端末の外画面向け）
   - すべて @media (max-width: 860px) 内に閉じ込め、PC・大画面のレイアウトは一切変更しない。
   - 既存テンプレートはインラインスタイルが多いため、必要箇所は !important で上書きする。
   ===================================================================== */
@media (max-width: 860px) {

  /* ---- 上部ナビ（モール切替タブ）: スマホはハンバーガー＋ドロワー ----
     mobile.js がハンバーガーを挿入し、タブ列に .mobile-nav-drawer を付与する。
     JSが動かない場合は従来どおり横スクロールでフォールバック。 */
  nav.navbar { position: sticky; top: 0; z-index: 1030; }
  nav.navbar .container-fluid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  nav.navbar .container-fluid::-webkit-scrollbar { height: 0; }
  nav.navbar a {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 0 14px !important;
    font-size: 13px !important;
  }
  nav.navbar a i { font-size: 15px; }
  nav.navbar .btn { white-space: nowrap; }

  /* ハンバーガーボタン（JSで挿入。既定は inline display:none → ここで表示）。右側に寄せる。 */
  .mobile-nav-toggle {
    display: flex !important;
    align-items: center; justify-content: center;
    background: transparent; border: none; color: #fff;
    font-size: 24px; width: 50px; height: 56px; flex: 0 0 auto;
    margin-left: auto;
    padding: 0; cursor: pointer;
  }
  /* 設定ボタンはドロワー内へ移動済み（mobile.js）。元のボタンはスマホでは非表示。 */
  .mobile-hide-original-settings { display: none !important; }

  /* タブ列をドロワー化（縦並び・ナビ直下の右側に出す） */
  nav.navbar .mobile-nav-drawer {
    position: absolute; top: 100%; left: auto; right: 0; z-index: 1031;
    flex-direction: column !important; align-items: stretch !important;
    height: auto !important; width: 84vw !important; max-width: 340px;
    background: #1b232c; box-shadow: -8px 12px 28px rgba(0,0,0,.4);
    border-bottom-left-radius: 14px;
    max-height: 0; overflow: hidden; transition: max-height .25s ease;
  }
  nav.navbar .mobile-nav-drawer.open { max-height: 85vh; overflow-y: auto; }
  /* 項目サイズは「商品ハブ」ページの見え方に全ページで統一する（ユーザー方針）。
     従来は商品ハブ/Yahoo/楽天だけがページ固有CSS(≤768px)で小さめ・アイコン非表示にしており、
     他ページ（注文管理など）と大きさが揃っていなかった。ここに集約して全ページ同一にする。 */
  nav.navbar .mobile-nav-drawer a {
    width: 100% !important; height: auto !important; min-height: 54px;
    box-sizing: border-box;
    padding: 0 10px !important; font-size: 12px !important;
    justify-content: flex-start !important;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  /* 商品ハブと同じくドロワー内のアイコンは非表示（文字だけのコンパクト表示） */
  nav.navbar .mobile-nav-drawer a i { display: none !important; }
  /* JSが差し込む「設定」項目。色指定が無いと既定のリンク色（青＋下線）で浮くため、
     他のメニュー項目と同じ白系テキスト・下線なしに揃える。 */
  nav.navbar .mobile-nav-drawer a.mobile-nav-settings {
    color: rgba(255,255,255,.7) !important;
    text-decoration: none !important;
  }

  /* ---- 検索・操作ボタン行 --------------------------------------------
     原因: ボタン群が ms-auto で右寄せされ、左半分が無駄に空く。
     対策: 検索ボックスとボタン群を全幅・左寄せにして縦に積む。 */
  .input-group.input-group-sm[style*="max-width"] {
    max-width: none !important;
    width: 100%;
  }
  .d-flex.flex-wrap > .ms-auto {
    margin-left: 0 !important;
    width: 100%;
    flex-direction: row !important;   /* 既存の .d-flex{flex-direction:column} を打ち消し横並びに */
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }
  /* ボタンは内容幅で詰めて並べる（全幅ストレッチを防止） */
  .d-flex.flex-wrap > .ms-auto > .btn {
    flex: 0 0 auto !important;
    width: auto !important;
  }
  /* タップしやすいボタンサイズ */
  .btn-sm { padding: 6px 11px !important; }

  /* ---- テーブル -------------------------------------------------------
     列数が多い一覧は横スクロールを維持しつつ、余白とフォントを詰めて
     一画面に入る情報量を増やす。 */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .table-responsive .table-sm > :not(caption) > * > * {
    padding: 5px 6px !important;
    font-size: 12px !important;
  }

  /* ---- 見出し・カードの余白を圧縮 ------------------------------------ */
  .step-header { font-size: 15px !important; }
  h1, .h1 { font-size: 1.4rem !important; }
  h2, .h2 { font-size: 1.25rem !important; }

  /* 端末幅をはみ出す横スクロールバグ防止 */
  body { overflow-x: hidden; }

  /* ---- 上部の取り込みツールバー: 小さいボタンを折り返してコンパクトに ----
     横1列ではみ出し＋余白過多だったのを、小ボタンの折返しに変更。 */
  .import-toolbar {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px 10px !important;
  }
  .import-toolbar .btn {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }
  /* 補足テキスト・区切り線（余白稼ぎ）は省略してスッキリさせる */
  .import-toolbar > span[style*="margin-left:auto"],
  .import-toolbar > span[style*="border-left"] { display: none !important; }

  /* ---- スマホ用 並び替えバーを表示（PCは表ヘッダでソートするため非表示のまま）---- */
  .mobile-sort-bar { display: flex !important; }

  /* Gemini編集指示 + 売上 の横並びを縦積みにして窮屈さを解消 */
  .gemini-sales-row { flex-direction: column !important; }
  .gemini-sales-row > div { width: 100% !important; }

  /* ---- 「選択した商品をGemini編集」ボタンを右下フローティング表示 ----
     商品未選択時(disabled)は非表示、選択するとFABとして出現。Yahoo/楽天 共通(#processSelectedBtn)。 */
  #processSelectedBtn {
    position: fixed !important;
    right: 16px; bottom: 20px;
    z-index: 1045;
    margin: 0 !important;
    width: auto !important;
    border-radius: 26px !important;
    padding: 12px 18px !important;
    font-size: 13px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
    max-width: 88vw;
  }
  #processSelectedBtn:disabled { display: none !important; }

  /* ===================================================================
     楽天 商品マスター一覧: スマホはコンパクトなカード型に
     （1画面に複数商品が入るよう、画像+商品名を1行目、主要項目を横並び、
      重要度の低い項目=RMS/型番/ASIN/SKU/更新 は非表示にして詳細はタップで確認）
     行は renderMasterTable() が data-label を各セルへ付与する。
     =================================================================== */
  #rakutenMasterTable { table-layout: auto !important; }
  #rakutenMasterTable thead { display: none; }
  #rakutenMasterTable,
  #rakutenMasterTable tbody { display: block; width: 100%; }

  #rakutenMasterTable tr {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 10px;
    row-gap: 1px;
    position: relative;
    border: 1px solid #e3e3e3 !important;
    border-radius: 10px;
    background: #fff;
    margin: 0 0 8px;
    padding: 7px 54px 6px 10px;   /* 右側に「チェック＋削除」用の余白を確保 */
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
  }
  #rakutenMasterTable td {
    border: none !important;
    padding: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    max-width: none !important;
    overflow: visible !important;
    font-size: 12px !important;
    line-height: 1.4;
  }
  #rakutenMasterTable td[data-label]::before {
    content: attr(data-label) "：";
    color: #999; font-weight: 600; font-size: 10px; margin-right: 3px;
  }

  /* 重要度の低い項目はカードに出さない（RMS/型番/ASIN/SKU/更新） */
  #rakutenMasterTable td:nth-child(3),
  #rakutenMasterTable td:nth-child(7),
  #rakutenMasterTable td:nth-child(8),
  #rakutenMasterTable td:nth-child(9),
  #rakutenMasterTable td:nth-child(12) { display: none !important; }

  /* チェックボックス: カード右上に大きく表示（選択しやすく） */
  #rakutenMasterTable td:nth-child(1) {
    position: absolute; top: 6px; right: 6px; padding: 0 !important; z-index: 3;
    display: block !important;
  }
  #rakutenMasterTable td:nth-child(1) input {
    width: 22px !important; height: 22px !important; margin: 0 !important;
    accent-color: #e60012; cursor: pointer;
  }
  /* 画像: 1行目の左 */
  #rakutenMasterTable td:nth-child(2) { order: 1; flex: 0 0 auto; }
  #rakutenMasterTable td:nth-child(2) img { width: 50px !important; height: 50px !important; }
  /* 商品名: 1行目・画像の右（最大2行で省略） */
  #rakutenMasterTable td:nth-child(11) {
    order: 2; flex: 1 1 calc(100% - 86px);
    font-weight: 600; font-size: 13px !important; padding-right: 4px !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important;
  }
  /* 主要項目: 2行目以降に横並び（管理番号・在庫・価格・状態） */
  #rakutenMasterTable td:nth-child(4) { order: 3; }
  #rakutenMasterTable td:nth-child(5) { order: 4; }
  #rakutenMasterTable td:nth-child(6) { order: 5; }
  #rakutenMasterTable td:nth-child(10) { order: 6; }
  #rakutenMasterTable td:nth-child(6) > div { display: inline-block; margin-right: 5px; line-height: 1.3; }
  /* 管理番号・状態はラベル省略（値だけで分かる） */
  #rakutenMasterTable td:nth-child(4)::before,
  #rakutenMasterTable td:nth-child(10)::before { content: none; }

  /* 商品ごとの最終更新日時を目立たせる（緑の丸型バッジ。未編集の商品には表示されない） */
  #rakutenMasterTable .m-lastupd {
    display: block !important;
    width: fit-content;
    margin: 4px 0 0 0 !important;
    padding: 2px 10px;
    background: #dcfce7;
    border: 1px solid #86efac;
    border-radius: 999px;
    color: #15803d !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.5;
  }
  /* 操作(削除)ボタン: カード右下の余白に配置（最終行を無くして縦を短縮） */
  #rakutenMasterTable td:nth-child(13) {
    position: absolute; right: 8px; bottom: 8px;
    margin: 0 !important; padding: 0 !important; width: auto;
  }
  #rakutenMasterTable td:nth-child(13)::before { content: none; }
  #rakutenMasterTable td:nth-child(13) .btn {
    font-size: 14px !important; padding: 5px 11px !important; margin: 0 !important;
  }
}