/* ====================================================================
 * weekly-mobile.css — スマホ（≤768px）専用の上書きレイヤ
 *
 * 規約:
 *   - このファイルの全ルールは @media screen and (max-width: 768px) の中に置く
 *     （= 769px以上のデスクトップと印刷には1pxも影響しない）
 *   - weekly.css 本体・@media print には触れない
 *   - 表示の切替は weekly-mobile.js が body に付ける
 *     data-mobile-view="day|week" / data-mobile-day="0..5" を CSS で拾うだけ
 * ==================================================================== */

@media screen and (max-width: 768px) {

  /* ----- 全体 ----- */
  #app {
    padding: 8px 10px calc(78px + var(--safe-bottom)); /* 下端は曜日バーの分を空ける */
    gap: 10px;
  }

  /* ----- ヘッダ ----- */
  .w-header { gap: 6px; padding: 2px 0; }
  .back-link { width: 40px; height: 40px; }
  .brand { gap: 6px; }
  .brand-name { font-size: 19px; }
  .brand-sub { font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
  .header-actions { gap: 6px; width: 100%; }
  /* 週ピッカーは全幅1行に */
  .week-picker {
    flex: 1 1 100%;
    justify-content: space-between;
    min-height: 44px;
    padding: 4px 6px;
  }
  .week-picker .header-btn.ghost { min-width: 44px; min-height: 36px; }
  .header-btn {
    min-height: 42px;
    padding: 8px 12px;
    font-size: 13px;
    white-space: nowrap;
  }

  /* ----- 学年タブ: 横スクロール＋上端固定 ----- */
  .grade-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: sticky;
    top: 0;
    z-index: 40;
  }
  .grade-tabs::-webkit-scrollbar { display: none; }
  .grade-tab {
    flex: 0 0 auto;
    min-width: 76px;
    min-height: 44px;
    padding: 10px 14px;
  }
  .tab-label { font-size: 14px; }

  /* ----- 学年バナー（縦1文字折れの修正）----- */
  .grade-banner {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
  }
  .grade-banner-title {
    font-size: 16px;
    letter-spacing: .02em;
    flex: 1 1 auto;
    min-width: 0;
  }
  .grade-banner-shortcuts {
    padding-left: 0;
    min-width: 0;
    flex: 0 0 auto;
    justify-content: flex-start;
  }
  .grade-banner-week { font-size: 12px; padding: 4px 10px; margin-left: 0; }
  .grade-banner-history { gap: 4px; }
  .grade-banner-history .btn-undo,
  .grade-banner-history .btn-redo { min-height: 40px; padding: 6px 10px; }
  .grade-banner-btn { min-height: 40px; }

  .grade-body { padding: 8px; }

  /* 付箋ツールバーのヒント文は畳む */
  .label-box-toolbar-hint { display: none; }

  /* =================================================
   *  1日表示（既定）: body[data-mobile-view="day"]
   *  時限ラベル + 当日の2列にグリッドを折り畳む
   * ================================================= */
  body[data-mobile-view="day"] .week-grid {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  body[data-mobile-view="day"][data-mobile-day="0"] .week-grid > [data-day-idx]:not([data-day-idx="0"]),
  body[data-mobile-view="day"][data-mobile-day="1"] .week-grid > [data-day-idx]:not([data-day-idx="1"]),
  body[data-mobile-view="day"][data-mobile-day="2"] .week-grid > [data-day-idx]:not([data-day-idx="2"]),
  body[data-mobile-view="day"][data-mobile-day="3"] .week-grid > [data-day-idx]:not([data-day-idx="3"]),
  body[data-mobile-view="day"][data-mobile-day="4"] .week-grid > [data-day-idx]:not([data-day-idx="4"]),
  body[data-mobile-view="day"][data-mobile-day="5"] .week-grid > [data-day-idx]:not([data-day-idx="5"]) {
    display: none;
  }

  /* 付箋は位置が「週全体に対する%」なので1日表示では非表示。
     確認・追加・削除は週表示か付箋一覧ダイアログで行う */
  body[data-mobile-view="day"] .label-box-layer { display: none; }
  body[data-mobile-view="day"] .label-box-toolbar { display: none; }

  /* 1日表示はセルが全幅になるので、文字を読みやすいサイズに固定 */
  body[data-mobile-view="day"] .cell-period {
    min-height: 84px;
    padding: 8px 26px 18px 12px;
  }
  body[data-mobile-view="day"] .cell-subject { font-size: 16px !important; }
  body[data-mobile-view="day"] .cell-content { font-size: 14px !important; }
  body[data-mobile-view="day"] .cell-teacher { font-size: 12px !important; }
  body[data-mobile-view="day"] .cell-meta { min-height: 40px; font-size: 13px; }
  body[data-mobile-view="day"] .cell-head { min-height: 44px; }
  body[data-mobile-view="day"] .cell-head .head-weekday { font-size: 16px; }
  body[data-mobile-view="day"] .cell-head .head-date { font-size: 13px; }

  /* =================================================
   *  週表示（トグル時）: body[data-mobile-view="week"]
   *  横スクロール＋時限ラベル列を左に固定
   * ================================================= */
  body[data-mobile-view="week"] .grade-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  body[data-mobile-view="week"] .week-grid { min-width: 640px; }
  body[data-mobile-view="week"] .cell-row-label,
  body[data-mobile-view="week"] .week-grid > .cell-row-label:first-child {
    position: sticky;
    left: 4px;
    z-index: 7;
    background: var(--bg-soft);
    /* grid gap(4px) の隙間から下のセルが透けるのを左影で塞ぐ */
    box-shadow: -4px 0 0 var(--line-soft);
  }

  /* =================================================
   *  画面下固定の曜日バー（weekly-mobile.js が制御）
   *  デスクトップ・印刷では HTML の hidden 属性で非表示のまま
   * ================================================= */
  .mobile-day-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    gap: 4px;
    padding: 6px 8px calc(6px + var(--safe-bottom));
    background: var(--surface);
    box-shadow: 0 -2px 14px rgba(60, 50, 30, .14);
  }
  .mobile-day-bar button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--ink-dim);
    font-family: var(--font-title);
    font-size: 15px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 4px 0;
    cursor: pointer;
  }
  .mobile-day-bar .bar-date {
    font-size: 10px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--ink-soft);
  }
  .mobile-day-bar button.active { color: var(--ink); }
  .mobile-day-bar [data-day="0"].active { background: var(--weekday-mon); }
  .mobile-day-bar [data-day="1"].active { background: var(--weekday-tue); }
  .mobile-day-bar [data-day="2"].active { background: var(--weekday-wed); }
  .mobile-day-bar [data-day="3"].active { background: var(--weekday-thu); }
  .mobile-day-bar [data-day="4"].active { background: var(--weekday-fri); }
  .mobile-day-bar [data-day="5"].active { background: var(--weekday-sat); }
  .mobile-day-bar [data-day="week"] {
    flex: 0 0 56px;
    border-left: 1px solid var(--line-soft);
    border-radius: 0 10px 10px 0;
  }
  .mobile-day-bar [data-day="week"].active {
    background: var(--ink);
    color: #fff;
    border-radius: 10px;
  }
  /* 土曜ボタンは6日制の週だけ表示 */
  .mobile-day-bar [data-day="5"] { display: none; }
  body[data-mobile-saturday="1"] .mobile-day-bar [data-day="5"] { display: flex; }

  /* フィードバックFABが曜日バーに被らないよう上へ */
  .feedback-launcher {
    bottom: calc(66px + var(--safe-bottom)) !important;
  }

  /* =================================================
   *  編集UIのタッチ最適化（Phase 2）
   * ================================================= */

  /* iOSはフォーカスした入力の font-size が16px未満だと画面ごとズームするため16pxに固定 */
  .cell-inline-editor,
  .excel-meta-editor,
  .events-edit-textarea,
  .closing-message-textarea,
  .label-add-text,
  .bulk-simple-input,
  .batch-search {
    font-size: 16px !important;
  }

  /* ホバーで現れる系のボタンはタッチでは見えないので常時薄表示＋タップしやすく拡大 */
  .cell-star-toggle-direct,
  .cell-teacher-button,
  .cell-broadcast-toggle,
  .cell-quick-noclass {
    opacity: .55;
  }
  .cell-star-toggle-direct { width: 28px; height: 28px; }
  .cell-star-toggle-direct.is-on { width: 30px; height: 30px; }
  .cell-teacher-button { min-width: 26px; height: 26px; }

  /* 教科サジェスト: 指で確実に押せる行高 */
  .subject-suggest-item {
    min-height: 44px;
    font-size: 15px;
    padding: 10px 12px;
  }

  /* モーダル類は画面内に収めてスクロール */
  .apply-daily-modal,
  .swap-choice-modal,
  .label-batch-dialog,
  .label-add-dialog,
  .export-modal {
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal-btn { min-height: 44px; }

  /* 付箋の削除×・リサイズつまみをタッチサイズに（週表示で使用） */
  .weekly-label-delete { width: 28px; height: 28px; }
  .weekly-label-resize { width: 30px; height: 30px; }

  /* トーストを曜日バーの上に逃がす */
  .toast-stack {
    bottom: calc(70px + var(--safe-bottom));
    right: 12px;
    left: 12px;
  }
}