/* スマートフォン表示の調整（★2026-07-31 乾さん依頼④）
   ─ 方針 ─
   ・PCの画面はそのまま。狭い画面のときだけ並べ方を変える（情報は減らさない）。
   ・表は「枠の中だけ」横スクロールさせ、ページ全体は横に動かないようにする。
   ・指で押しやすいよう、ボタンの高さと間隔を確保する。
   ・入力欄は16px以上（これ未満だとiPhoneで勝手に拡大される）。 */

/* ===== 表の横スクロール（mobile.js が表をこの枠で包む）===== */
.m-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.m-scroll>table{min-width:max-content}
.m-hint{display:none;font-size:11.5px;color:#A39C9A;margin:0 0 5px;line-height:1.5}
.m-hint::before{content:"← → ";letter-spacing:1px}
.m-scroll.is-over+.m-hint,.m-hint.on{display:block}

@media (max-width:820px){
  /* ---- 共通 ---- */
  .m-hint.on{display:block}

  /* ---- ダッシュボード（index.html）：左の縦メニューを上の横並びメニューにする ---- */
  body.m-dash{display:block}
  /* メニューは「☰ メニュー」ボタンで開閉する（田中さん指摘④：横スクロール式だと2つ目以降に気づけない。
     常時全部見せると画面の半分をメニューが占めるため、タップで全項目を折り返し表示する方式にした） */
  body.m-dash .side{width:auto;height:auto;position:static;flex-direction:row;align-items:center;
    gap:8px;padding:10px 12px;flex-wrap:wrap;overflow:visible}
  body.m-dash .logo{padding:0 10px 0 2px;flex-shrink:0}
  body.m-dash .logo span{display:none}
  /* 820px以下：メニューは折り返して全項目を見せる（PCのウィンドウ半分表示でもリンクが隠れないように。
     乾さんから「運用パネルへ行けない」の指摘があり、この幅で畳むのをやめた 2026-07-31） */
  body.m-dash .nav{flex-direction:row;margin-top:0;gap:6px;flex-wrap:wrap;width:100%}
  body.m-dash .side.nav-open .nav{display:flex}
  .m-navtoggle{margin-left:auto;font-family:inherit;font-size:13px;font-weight:700;color:#fff;
    background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:10px;
    padding:9px 14px;cursor:pointer;flex-shrink:0}
  body.m-dash .nav .lbl{display:none}
  body.m-dash .nav a{padding:10px 13px;flex-shrink:0;white-space:nowrap;min-height:42px}
  body.m-dash .side .foot{display:none}
  body.m-dash .top{height:auto;flex-wrap:wrap;gap:8px;padding:11px 14px;position:static}
  body.m-dash .top .sub{width:100%;margin-left:0}
  body.m-dash .shop{margin-left:0}
  body.m-dash .wrap{padding:16px 12px 46px}
  body.m-dash .kpis{grid-template-columns:1fr 1fr;gap:10px}
  body.m-dash .kpi{padding:13px 13px 11px}
  body.m-dash .kpi .v{font-size:20px}
  /* 1fr ではなく minmax(0,1fr)。中身の最小幅（長い見出しや横並びのボタン）に押し広げられて
     列が画面より広くなるのを防ぐ（予算管理タブで実際に発生していた）。 */
  body.m-dash .g2,body.m-dash .groups,body.m-dash .cmp,body.m-dash .mcards{grid-template-columns:minmax(0,1fr)}
  body.m-dash .panel{padding:14px;min-width:0}
  /* パネル見出しの右側に並ぶ操作ボタンは、狭いときは折り返す */
  body.m-dash .panel .ph{flex-wrap:wrap;gap:8px}
  body.m-dash .aibar{padding:15px 16px}

  /* ---- 運用パネル・管理者ホーム（control.html / admin.html）---- */
  body.m-page{padding:16px 12px 46px}
  body.m-page .grid{grid-template-columns:minmax(0,1fr)}
  body.m-page .panel{min-width:0}
  body.m-page header{flex-wrap:wrap;gap:8px}
  body.m-page .sp{margin-left:0;width:100%}
  /* 見出しの中に横並びで置かれたアカウント表示やリンクを折り返す（画面外にはみ出していた） */
  body.m-page h1{flex-wrap:wrap;gap:6px;min-width:0}
  body.m-page h1>span{flex-wrap:wrap;min-width:0}

  /* 横2列ぶんを占める指定（grid-column:1/3 など）は、1列表示では列を勝手に増やしてしまう。
     1列に収まるよう打ち消す（運用パネルの「全幅パネル」で発生していた）。 */
  .grid>*,.g2>*,.groups>*,.cmp>*,.mcards>*{grid-column:1 / -1}

  /* 選択肢の文言が長い入力欄が、親からはみ出さないようにする。
     label が入力欄を囲んでいる形（label＞select）では label 側も抑えないと、
     label が中身の幅に広がってしまうので両方に指定する。 */
  input,select,textarea{max-width:100%}
  label{max-width:100%;min-width:0}

  /* ---- 押しやすさ（ボタンの高さと間隔）---- */
  .btn,button,a.btn{min-height:42px}
  /* 丸い小さなアイコンボタン（?マーク等）は高さを広げない（広げると縦長の楕円につぶれる：田中さん指摘①） */
  .helpbtn{min-height:0 !important;width:19px;height:19px}
  .sp,.tools,.bar,.tabs{gap:10px}

  /* ---- ラベル＋入力欄の横並び行は、スマホでは縦積みにする（田中さん指摘②③）----
     横並びのままだとラベルが数pxまで潰されて1文字ずつ縦に折り返される。
     「店舗ID」→改行→入力欄、の並びにする。 */
  body.m-page .row{display:block}
  body.m-page .row label{display:block;flex:none;width:auto;margin-bottom:5px}
  body.m-page .row input,body.m-page .row select,body.m-page .row textarea{flex:none;width:100% !important}
}

@media (max-width:640px){
  /* スマホ幅だけ：メニューは「☰ メニュー」で開閉（常時全部見せると画面の半分を占めるため） */
  body.m-dash .nav{display:none}
  body.m-dash .side.nav-open .nav{display:flex}
}

@media (max-width:430px){
  body.m-dash .kpis{grid-template-columns:1fr}
  /* 入力欄は16px以上（iPhoneで勝手に拡大されるのを防ぐ）。
     一部の入力欄はHTML側で font:inherit 等が直接指定されており、通常の指定では負けるため !important を使う。 */
  input,select,textarea{font-size:16px !important}
}