/* =============================================================
   Kizuna 訪問看護スケジュール — レスポンシブデザイン
   ブレイクポイント:
     Mobile   : ≤ 640px
     Tablet   : 641px〜1024px  ← iPad 横向き含む
     Desktop  : ≥ 1025px（デフォルト）
   ============================================================= */

/* ─────────────────────────────────────────
   共通: タッチ操作向けの最小タップエリア確保
   ───────────────────────────────────────── */
@media (pointer: coarse) {
  button, .nav-btn, .dept-tab, .icon-btn, .btn, .tag-btn {
    min-height: 40px;
  }
  .row-cell { min-height: 28px; }
  /* スクロールバーを細く */
  ::-webkit-scrollbar { width: 6px; height: 6px; }
}

/* =============================================================
   TABLET / iPad 横向き（641px〜1024px）
   ============================================================= */
@media (max-width: 1024px) {

  /* ━━ ナビバー ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .navbar {
    padding: 0 10px;
    gap: 2px;
    height: 50px;
  }
  .brand  { font-size: 13px; margin-right: 6px; }
  .brand-sub { display: none; }           /* サブタイトルを非表示 */
  .version-chip { display: none; }
  /* 事業所タブ: 横スクロール対応 */
  #office-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 1;
    min-width: 0;
    scrollbar-width: none;
  }
  #office-tabs::-webkit-scrollbar { display: none; }
  .nav-office-btn { padding: 5px 10px; font-size: 11px; }
  /* view-mode-switcher */
  .vms-btn { padding: 5px 9px; font-size: 11px; }
  /* 右上ユーザー表示 */
  .user-pill { font-size: 11px; padding: 4px 9px; max-width: 140px;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .navbar-mychecks-btn { padding: 4px 8px; font-size: 12px; }

  /* ━━ ツールバー ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .toolbar {
    padding: 5px 10px;
    gap: 5px;
    flex-wrap: wrap;
  }
  /* 日付ナビ */
  .date-lbl  { font-size: 14px; min-width: 148px; font-weight: 700; }
  .icon-btn  { padding: 5px 9px; font-size: 11px; }
  /* 主要ボタンをコンパクトに */
  .btn       { padding: 5px 11px; font-size: 11.5px; }
  .btn-sm    { padding: 4px 8px;  font-size: 10.5px; }
  /* ビュー切り替えトグル */
  .vt-btn    { padding: 4px 9px;  font-size: 11px; }
  /* サマリー */
  .summary-wrap { gap: 10px; }
  .sum-n { font-size: 17px; }
  .sum-l { font-size: 9px; }

  /* ━━ スケジュール: スタッフ列幅を縮小 ━━━━━━━━━━━━━━━━━━━━━ */
  :root { --SW: 130px; }
  /* スタッフヘッダー内テキストを短縮 */
  .shdr-name { font-size: 11px; }
  .shdr-dept { font-size: 9px; }

  /* ━━ 掲示板レイアウト ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .bd-sidebar {
    width: 240px;
    min-width: 220px;
  }
  .bd-sidebar-title { font-size: 14px; }
  .bd-ch-name  { font-size: 12px; }
  .bd-ch-prev  { font-size: 11px; }
  .bd-post-name { font-size: 12px; }
  .bd-bubble-body { font-size: 12.5px; }

  /* ━━ 受け入れ詳細モーダル (id-modal) ━━━━━━━━━━━━━━━━━━━━━━━ */
  .id-modal {
    width: min(96vw, 660px);
  }
  .id-modal-body {
    max-height: calc(85vh - 130px);
  }

  /* ━━ 訪問モーダル / 汎用モーダル ━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .modal {
    width: min(96vw, 480px);
    max-height: 88vh;
  }
  .modal-bd { padding: 16px 18px; }

  /* ━━ スタッフ管理モーダル ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  #staff-mgr-modal .modal { width: min(96vw, 700px); }

  /* ━━ 統計モーダル ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  #stats-overlay .modal { width: min(96vw, 720px); }

  /* ━━ スタッフ登録通知ポップアップ ━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  #staff-created-notice .modal { width: min(96vw, 440px); }

  /* ━━ スケジュール ヘッダーツールバー（検索・付箋） ━━━━━━━━━━ */
  .search-bar { font-size: 11px; }

  /* ━━ 未割り当てパネル ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .unassigned-panel { min-width: 180px; }
  .unp-card { padding: 7px 10px; }
  .unp-card-name  { font-size: 11px; }
  .unp-card-time  { font-size: 10px; }

  /* ━━ シフト管理 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  #scr-shift   { overflow: auto; -webkit-overflow-scrolling: touch; }
  #shift-table { min-width: 800px; }

  /* ━━ 勤怠管理 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  #scr-timecard { overflow: auto; -webkit-overflow-scrolling: touch; }
  .tc-table     { min-width: 800px; }

  /* ━━ スタッフ登録ポップアップ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .ns-overlay .modal { width: min(96vw, 540px); }
}

/* =============================================================
   MOBILE (≤ 640px)
   ============================================================= */
@media (max-width: 640px) {

  /* ── ナビバー: 2段構成 ── */
  .navbar {
    height: auto;
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 6px;
    row-gap: 6px;
  }
  .brand { font-size: 15px; margin-right: 0; width: 100%; }
  /* ナビメニューは横スクロール可能な行に */
  .navbar > .nav-btn { font-size: 11px; padding: 5px 9px; }
  .navbar-right {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
    gap: 6px;
  }
  .navbar-login-lbl { display: none; }
  .navbar-login-sel { font-size: 11px; padding: 5px 22px 5px 10px; }
  .version-chip { display: none; }
  .user-pill { font-size: 11px; padding: 3px 8px; }

  /* ── 部署タブ ── */
  .dept-bar { padding: 0 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dept-tab { padding: 9px 12px; font-size: 12px; }

  /* ── ツールバー ── */
  .toolbar {
    padding: 6px 10px;
    gap: 5px;
    flex-wrap: wrap;
  }
  .date-nav { order: 1; }
  .date-lbl { font-size: 13px; min-width: 130px; }
  .summary-wrap {
    order: 3;
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
    gap: 10px;
  }
  .sum-n { font-size: 16px; }
  .sum-l { font-size: 9px; }
  /* ビュー切り替えボタンを折り返し */
  .vr-btns { order: 2; display: flex; flex-wrap: wrap; gap: 4px; }
  .icon-btn, .btn-sm { font-size: 11px; padding: 5px 9px; }

  /* ── スケジュール画面: 縦スクロール重視 ── */
  #scr-schedule { overflow: auto; -webkit-overflow-scrolling: touch; }
  :root { --SW: 90px; --ROW: 48px; --TW: 50px; }

  /* スタッフヘッダーの氏名を短縮 */
  .shdr-name { font-size: 10px; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .shdr-badge { font-size: 9px; }

  /* 訪問ブロック */
  .vblk-name  { font-size: 10px; }
  .vblk-time  { font-size: 9px; }
  .vblk-note  { display: none; }  /* メモはスペース節約のため非表示 */
  .vblk-upd   { display: none; }
  .vblk-tags  { gap: 2px; }
  .vblk-tag   { font-size: 8px; padding: 0 3px; }

  /* ── シフト管理: テーブルを横スクロール ── */
  #scr-shift   { overflow: auto; -webkit-overflow-scrolling: touch; }
  #shift-table { min-width: 700px; }
  .sname       { position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 80px; }

  /* ── 勤怠管理: 横スクロール ── */
  #scr-timecard { overflow: auto; }
  .tc-table     { min-width: 700px; }

  /* ── ワークフロー: カード縦並び ── */
  .wfc-row { flex-direction: column; gap: 8px; }
  .wfc-actions { margin-top: 8px; display: flex; gap: 8px; }

  /* ── 付箋メモ: 画面幅に収まるよう最大幅制限 ── */
  .todo-note { max-width: calc(100vw - 24px) !important; }
  .todo-inner { min-width: unset !important; }

  /* ── モーダル: ほぼフルスクリーン ── */
  .modal-box {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 95vh;
    margin: auto 0 0;
    border-radius: 16px 16px 0 0;
    overflow-y: auto;
  }
  /* モーダルオーバーレイ: 下から出るシート形式 */
  .overlay.show { align-items: flex-end; }
  #visit-overlay.show { align-items: flex-end; }

  /* ── ログインモーダル: 全幅 ── */
  .login-card {
    width: 100vw;
    max-width: 100vw;
    border-radius: 0;
    padding: 32px 20px;
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* ── ローディング ── */
  #app-loading { padding: 20px; }

  /* ── オンコールバー ── */
  .oncall-bar { font-size: 11px; padding: 5px 12px; }

  /* ── 空き状況: ガントを横スクロール ── */
  .vacancy-gantt { min-width: 600px; }
  #scr-vacancy   { overflow: auto; -webkit-overflow-scrolling: touch; }

  /* ── ホバーポップアップ: 大きくして読みやすく ── */
  #hover-popup { font-size: 12px; max-width: calc(100vw - 20px); }
}

/* =============================================================
   タッチデバイス向けドラッグ補助
   ============================================================= */
@media (pointer: coarse) {
  /* ドラッグハンドルを大きく */
  .vblk-resize { height: 12px; }
  /* スタッフヘッダードラッグ: タッチ長押しで発動するためカーソル変更不要 */
  .staff-header-cell { cursor: default; }
  /* ホバーポップアップはタッチでは非表示 */
  #hover-popup { display: none !important; }
}

/* =============================================================
   印刷向け（シフト表・勤怠帳票）
   ============================================================= */
@media print {
  .navbar, .dept-bar, .toolbar, .oncall-bar,
  #login-overlay, #app-loading, .todo-note,
  #hover-popup, #ghost { display: none !important; }

  body { overflow: visible; height: auto; font-size: 11px; background: #fff; }
  .screen { display: block !important; overflow: visible; }
  .main  { overflow: visible; }

  /* シフト表をページ幅に収める */
  #shift-table { width: 100%; font-size: 10px; }
  .sname { min-width: 60px; }

  /* 勤怠表 */
  .tc-table { width: 100%; font-size: 10px; }
  .tc-summary { page-break-before: always; }
}