@charset "utf-8";
/* スマホ・iPad mini（2026-10-11 ユーザー）。PC の見た目は変えない。決算・給与は PC で使う前提なので手を入れない。
   base.html でいちばん後に読む（画面ごとの CSS より後）。確かめ方: dev/tools/mobile_audit.py（390px と 744px で全画面を開く） */

/* ---- 表は横に送れる箱に入れる（js/app.js が .table を .table-scroll で包む）---- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* ---- 指で触る端末: iOS は 16px 未満の入力欄を、触ったときに拡大してしまうので 16px にする ---- */
@media (pointer: coarse) {
  .input, .select, .textarea, select, textarea,
  input[type=text], input[type=search], input[type=email], input[type=tel], input[type=url], input[type=number],
  input[type=password], input[type=date], input[type=time], input[type=datetime-local], input[type=month] { font-size: 16px; }
}

/* ---- タブレット（iPad mini の縦 744px）まで ---- */
@media (max-width: 860px) {
  .cols > *, .form-grid > *, .page-head > * { min-width: 0; }
  .page-head__actions { flex-wrap: wrap; justify-content: flex-end; }
  .card__head { flex-wrap: wrap; row-gap: var(--sp-2); }
  /* 見出しは 1 行を取る（右のボタンに押されて、文字が縦 1 列に並んでいた）。添え書きは折り返す */
  .card__title { flex: 1 1 auto; min-width: min(100%, 10em); flex-wrap: wrap; }
  .card__title .muted, .card__title .small { white-space: normal; }
  /* 画面ごとの 2 列の割り付けは 1 列に（1fr だと中の広い表に引っ張られて、画面の外へはみ出していた） */
  .att, .my, .dp-layout, .ye-layout, .ye-ledger, .ye-reports { grid-template-columns: minmax(0, 1fr); }
  .dp-side, .ye-side { position: static; }
  /* アプリのメニューは画面の幅いっぱいに（ボタンの位置から右へはみ出していた）。長ければメニューの中で送る */
  .appmenu__panel, .appmenu__panel.compmenu__panel { position: fixed; top: calc(var(--header-h) + 4px); left: 8px; right: 8px; width: auto;
    max-height: calc(100dvh - var(--header-h) - 16px); overflow-y: auto; }
  /* 表: 欄が細くなって文字が 1〜2 文字ずつ折り返し、行が縦に伸びていた。折り返さずに横へ送る。
     文字の多い欄（js/app.js が .is-longcol を付ける。手で付けるなら .t-wrap）だけ幅を持たせて折り返す */
  .table th, .table td { white-space: nowrap; }
  .table .is-longcol, .table td.t-wrap { white-space: normal; min-width: 15em; max-width: 28em; }
  .table--doc-lines td:first-child { min-width: 9em; }   /* 伝票の明細の「内容」 */
  .card__actions { flex-wrap: wrap; justify-content: flex-end; }
}

/* ---- スマホ ---- */
@media (max-width: 640px) {
  .wrap { padding: 0 12px; }
  main { padding: var(--sp-4) 0 var(--sp-6); }
  h1 { font-size: 22px; }
  h2 { font-size: 18px; }

  /* ヘッダ: 文字のロゴは隠して絵だけ。ボタンは詰める */
  .nav { gap: var(--sp-2); }
  .brand__word { display: none; }
  .brand__mark { height: 30px; }
  .appmenu, .compmenu__label { margin-left: 0; }
  /* いまの組織: 頭文字と短い名前（長ければ省く） */
  .compmenu__name { max-width: 5.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .compmenu__label { padding: 0 6px 0 4px; }
  .compmenu__btn .fa-chevron-down { display: none; }
  .trail { margin-left: 0; }
  .nav-user { gap: 4px; }
  .nav-user__me { padding: 2px; }
  .appmenu__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .appmenu__item { padding: 8px; }

  /* 見出し: 説明とボタンは下へ回す */
  .page-head { gap: var(--sp-3); margin-bottom: var(--sp-4); }
  .page-head__note { font-size: var(--fs-sm); }

  .card__head { padding: var(--sp-3); }
  .card__body { padding: var(--sp-3); }

  /* 入力欄: 横に 2 つ並べず 1 列に（短い欄だけ 2 つ並べる） */
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .form-grid > .field, .form-grid > [class*="field--"] { grid-column: 1 / -1; }
  .form-grid > .field--2, .form-grid > .field--3 { grid-column: span 1; }
  .inline-form .field { min-width: 0; flex-basis: 100%; }

  .table th, .table td { padding: 8px 10px; }
  .table .is-longcol, .table td.t-wrap { min-width: 13em; }

  /* 固定の幅の入力欄（style="width: 260px" など）を画面に収める */
  .input, .select, .textarea { max-width: 100%; }

  /* 検索の行: 欄とボタンを折り返す（固定の幅の select が右へはみ出していた） */
  .searchbar { flex-wrap: wrap; min-width: 0; }
  .searchbar > * { min-width: 0; max-width: 100%; }
  .card__head--stack .searchbar .input[type="search"] { flex-basis: 100%; }

  /* 切り替え（.seg）: 文字が 1 字ずつ縦に折れていた。折り返さず、入りきらなければ横へ送る */
  .seg { display: flex; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .seg > * { flex: none; white-space: nowrap; }

  /* スケジュールの月: 7 日を画面の幅に収める（PC は 760px 以上）。予定は件名だけを短く */
  .cal-month { min-width: 0; }
  .cal-day { min-height: 72px; padding: 2px; }
  .cal-day__head { font-size: var(--fs-xs); }
  .cal-day__wd, .cal-day__hol { display: none; }
  .cal-ev { font-size: 10px; padding: 1px 2px; gap: 2px; }
  .cal-ev__time, .cal-ev__who { display: none; }

  /* モーダルは画面いっぱいに近く */
  .modal { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .modal__body { padding: var(--sp-3); }
}