/* ========================================
   mobile.css（v2.30.0）📱 スマホ最適化（閲覧ベース）
   ----------------------------------------
   ・このファイルは「追加専用」＝既存CSSファイルは一切変更していない。
   ・中身は「基本非表示のスマホ専用部品」と @media(max-width:700px) のみ
     ＝PC（幅701px以上）の表示には一切影響しない。
   ・全体方針（開発全体メモ）＝スマホは閲覧ベース（出先・幹部のサクッと確認用）。
     操作・登録・細かい設定はPC基本。既存機能は消さないが作り込まない。
   ======================================== */
#m-tabbar,#m-nav-ovl,.m-only{display:none}
@keyframes sfNavIn{from{transform:translateX(-44px);opacity:0}to{transform:translateX(0);opacity:1}}

@media (max-width:700px){
  /* ── 枠組み：既存768pxの「横帯サイドバー」をやめ、ドロワー＋下部タブに ── */
  #app{grid-template-columns:1fr;grid-template-rows:var(--topbar) 1fr}
  #sidebar{display:none}
  #main{grid-column:1;grid-row:2}
  body.m-nav-open #sidebar{display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;width:min(80vw,300px);height:auto;z-index:1400;overflow-y:auto;overflow-x:hidden;padding:6px 0 30px;border-right:1px solid var(--border);border-bottom:none;box-shadow:12px 0 60px rgba(0,0,0,.45);animation:sfNavIn .16s ease}
  body.m-nav-open #sidebar .si-section-title{display:block}
  body.m-nav-open #sidebar .si-item{border-left:3px solid transparent;border-bottom:none;padding:10px 14px;white-space:normal}
  body.m-nav-open #sidebar .si-item.active{border-left-color:var(--brand);border-bottom:none}
  body.m-nav-open #m-nav-ovl{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1390}
  #sidebar .si-item.m-only{display:flex}

  /* ── トップバー圧縮（消した機能は☰ドロワーへ退避） ── */
  #topbar{padding:0 8px;gap:6px}
  #topbar .ver{display:none}
  .theme-toggle,#topbar .sync-indicator,.help-btn,#topbar .btn-sm,#topbar .topbar-user .u-name{display:none}

  /* ── 下部タブバー ── */
  #m-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1300;background:var(--bg2);border-top:1px solid var(--border);padding:4px 2px calc(4px + env(safe-area-inset-bottom))}
  #m-tabbar button{flex:1;background:none;border:0;color:var(--text2);font-family:inherit;font-size:9.5px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 0 2px;cursor:pointer}
  #m-tabbar button .tic{font-size:19px;line-height:1.15}
  #m-tabbar button.on{color:var(--brand)}

  /* ── ビュー余白（下部タブぶん）＋見出し圧縮 ── */
  .view{padding:10px 10px calc(86px + env(safe-area-inset-bottom))}
  .view-header{gap:8px;margin-bottom:10px}
  .view-title{font-size:15px}
  .view-actions{margin-left:0;width:100%}
  .search{width:100%;flex:1;min-width:0}
  .filter-tabs{max-width:100%;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .filter-tabs button{white-space:nowrap;flex:0 0 auto}

  /* ── 表＝列を潰さず横スクロールで閲覧 ── */
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.tbl th,table.tbl td{white-space:nowrap}

  /* ── モーダル＝下から出るシート型（下部タブより手前＝z-index:1500） ── */
  .modal-backdrop{align-items:flex-end;padding:0;z-index:1500}
  .modal-box,.modal-box.wide{max-width:none;width:100%;border-radius:16px 16px 0 0;max-height:92dvh}
  .modal-body{padding-bottom:calc(15px + env(safe-area-inset-bottom))}
  /* iOSの「入力欄タップで勝手にズーム」防止＝スマホだけ入力文字16px */
  input[type=text],input[type=search],input[type=number],input[type=date],select,textarea{font-size:16px!important}

  /* ── トースト＝下部タブの上に ── */
  #toast{bottom:calc(84px + env(safe-area-inset-bottom))}
}