/* シフト確認ページだけのスタイル。tokens.css → base.css の後に読む。
   骨組み（.head-in / main / .summary / footer）は自社清掃員管理と同じ寸法に
   そろえてある（同じところから開く画面なので、切り替えたときに枠が動かない
   ほうがよい）。表だけこの画面固有。 */


/* この画面の横幅。骨格（header/main/footer の余白）は base.css。 */
:root{--page-max:1400px;}


/* 画面名。h1（20px）より一回り小さく、頭の1文字だけ赤くする。
   base.css に置くと dashboard/vendor の h1 まで縮むので各画面に持つ
   （理由は base.css の .head-in h1 のコメント）。 */
.head-in h1{font-size:19px; margin:0; letter-spacing:.02em;}


.head-in h1::first-letter{color:var(--red);}


header{padding-bottom:14px;}


/* ── 上部バー（年月・タブ）── */
.bar{display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap; margin-bottom:16px;}


/* JS が描くまでのあいだ、年月の段の高さ（ボタン・プルダウンの30px）を
   取っておく。空だと高さ0で、入った瞬間に下の表が押し下げられる
   （docs/REVIEW-2026-09-27.md の M02）。 */
.bar:empty{min-height:30px;}


.ym{display:flex; align-items:center; gap:6px;}


.ym select{
  font-family:inherit; font-size:13px; padding:6px 28px 6px 8px;
  border:1px solid var(--line); border-radius:6px; background-color:#fff; color:var(--ink);
}


/* 矢印はSVG（chevronHtml、lib/dom.js）。文字（‹›）だとフォントによって
   ボタン中央からズレて見えたため（2026-08-30）。display:flex で確実に
   中央へ置く。 */
.ym-nav{
  display:flex; align-items:center; justify-content:center; padding:0;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  width:30px; height:30px; border-radius:6px; cursor:pointer;
  font-family:inherit;
}


.ym-nav:hover{border-color:var(--red); color:var(--red);}


.ym-now{
  color:var(--red); font-size:12px; font-weight:700;
  border:1px solid var(--red-line); background:var(--red-tint);
  border-radius:99px; padding:3px 10px;
}


.ym-today{
  border:1px solid var(--line); background:#fff; color:var(--muted);
  border-radius:99px; padding:4px 12px; cursor:pointer;
  font-family:inherit; font-size:12px; font-weight:700;
}


.ym-today:hover{border-color:var(--red); color:var(--red);}


.summary .big{font-size:20px;}


.summary .sep{width:1px; height:16px; background:var(--red-line);}


/* ── 表 ──
   日数が最大31あるので横スクロールする。左端の見出し列（清掃員名・施設名）と
   日付の見出しの行を position:sticky でその場に残す（スクロールすると誰の行か・
   何日の列か分からなくなるため）。

   枠（.sh-wrap）の高さは画面に収め、枠の中で縦にも横にもスクロールさせる
   （docs/REVIEW-2026-09-27.md の M08）。以前は overflow-x だけで高さを
   決めていなかったので、枠が縦にスクロールしない＝見出しの行の sticky が
   効く場所が無く、ページを下げると日付の見出しが消えた。横スクロールバーも
   表の一番下（約7画面下）にあった。
   --sh-top は枠の上端のページ内の位置（view.js の fitTableHeight が実測して
   入れる）。-16px は下の余白。画面が極端に低いときでも数行は見えるよう
   320px を下限にする。dvh はスマホのアドレスバーの出し入れに追従する単位で、
   使えない古いブラウザは1行目の vh を使う。
   **ページ全体（body）を固定する作りにはしない**（REVIEW 5章の「採らない
   直し方」。staff.css 冒頭の iPhone の描画崩れの経緯を参照）。 */
.sh-wrap{
  overflow:auto; border:1px solid var(--line); border-radius:10px; background:#fff;
  max-height:max(320px, calc(100vh - var(--sh-top, 240px) - 16px));
  max-height:max(320px, calc(100dvh - var(--sh-top, 240px) - 16px));
}


/* 選んだ月を読み込んでいる間は、前の月の表を薄くして残す（C02）。
   空にすると表の高さが縮んでページが跳ね、選んだ月の日付で描くと
   シフトが無い＝全員「未提出」の表に見えるため。 */
.sh-body.is-loading .sh-wrap{opacity:.45; transition:opacity .15s; cursor:progress;}


.sh-table{border-collapse:separate; border-spacing:0; width:100%;}


.sh-table th, .sh-table td{border-bottom:1px solid var(--line); border-right:1px solid var(--line);}


.sh-table tr:last-child th, .sh-table tr:last-child td{border-bottom:none;}


/* 左端の見出し列。ここだけスクロールしても残す。
   中身を並べる flex は内側の .hc に持たせる。**<th> 自身に display:flex を
   付けてはいけない**（セルが table-cell でなくなり、行の高さがそろわなくなる
   うえ position:sticky も効かなくなる）。 */
.sh-table .head-col{
  position:sticky; left:0; z-index:2; background:#fff;
  min-width:150px; max-width:190px; text-align:left; font-weight:700;
  padding:7px 10px; font-size:12.5px;
}


.sh-table .head-col .hc{display:flex; align-items:center; gap:7px;}


/* thead の見出し列は、縦にも横にも固定する（行と列の交点）。 */
.sh-table thead .head-col{z-index:4; background:#fafafa;}


.sh-table thead th{
  position:sticky; top:0; z-index:3; background:#fafafa;
  font-weight:700; font-size:11px; color:var(--muted); padding:5px 0;
  text-align:center; white-space:nowrap;
}


.sh-table thead th.d{min-width:46px; width:46px;}


.sh-table thead th.d .d-n{display:block; font-size:13px; color:var(--ink);}


.sh-table thead th.d .d-w{display:block; font-size:10px;}


.sh-table thead th.d.sat .d-n, .sh-table thead th.d.sat .d-w{color:#2563eb;}


.sh-table thead th.d.sun .d-n, .sh-table thead th.d.sun .d-w{color:var(--red);}


/* 今日の列は上下に通して分かるようにする（縦線で位置を見失わないため）。 */
.sh-table thead th.d.today{background:var(--red-tint); box-shadow:inset 0 -3px 0 var(--red);}


.sh-table thead th.d.past{opacity:.55;}


/* 清掃員名（行の見出し） */
.sh-table .head-col .dot{
  width:9px; height:9px; border-radius:50%; flex:none;
}


.sh-table .head-col .nm{
  flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}


.sh-table .head-col .code{
  color:var(--red); font-family:var(--font-mono); font-size:10.5px; font-weight:700;
  border:1px solid var(--red-line); border-radius:4px; padding:0 4px; flex:none;
}


/* ランク（清掃手配の優先度）。自社清掃員管理と同じ見た目にそろえてある。 */
.sh-table .head-col .rank{
  flex:none; width:15px; height:15px; border-radius:3px; text-align:center;
  font-size:10px; font-weight:800; line-height:15px; color:#fff; background:#9ca3af;
}


.sh-table .head-col .rank.r-A{background:#dc2626;}
.sh-table .head-col .rank.r-B{background:#ea580c;}
.sh-table .head-col .rank.r-C{background:#64748b;}


.sh-table .head-col .nm.none{color:var(--muted); font-weight:400;}


/* ── 施設の見出し行 ──
   その施設のまとまりの頭。清掃員の行より濃くして、どこで切れているかを
   一目で分かるようにする（1画面に施設と清掃員が混ざって並ぶため、
   区切りが弱いとどの施設の話か見失う）。 */
.sh-table tr.prop-row > *{
  border-top:2px solid var(--red-line); background:#fff8f8;
}


.sh-table tr.prop-row .head-col{background:#fff8f8;}


.sh-table td.pc{
  text-align:center; vertical-align:middle; padding:3px 1px; height:40px;
  font-size:12px;
}


.sh-table td.pc.past{opacity:.5;}


.sh-table td.pc.none{background:#fdf5f5;}


.sh-table td.pc.ok{background:#eefdf3;}


/* 確実に来る人が0で、Or の候補しかいない日。人手があるように見せては
   いけないので緑にしない。 */
.sh-table td.pc.onlymaybe{background:#fefce8;}


.sh-table td.pc .pc-n{display:block; font-size:14px; font-weight:800; color:#047857; line-height:1.2;}


.sh-table td.pc.onlymaybe .pc-n{color:var(--muted);}


.sh-table td.pc .pc-s{display:block; font-size:9.5px; color:var(--muted); line-height:1.2;}


/* 部屋数に添える「？」（確実＋Or候補の合計で、確定した数ではないという印）。 */
.sh-table td.pc .pc-s .q{color:#a16207; font-weight:800;}


/* ── 清掃員の行のセル ── */
.sh-table tr.staff-row .head-col{padding-left:22px;}


.sh-table td.c{
  text-align:center; vertical-align:middle; padding:3px 1px; height:32px;
  font-size:12px;
}


.sh-table td.c.past{opacity:.5;}


/* 未提出。薄いだけで何も出さない（「出ていない」ことが分かればよい）。 */
.sh-table td.c.none{background:#fbfbfb;}


/* 休み（出られないと答えた）。未提出とは意味が違うので別の見た目にする。 */
.sh-table td.c.off{background:#f4f4f5; color:var(--muted); font-weight:700; font-size:11px;}


/* この施設に確実に来る。数字はその部屋数。 */
.sh-table td.c.sure{background:#f0fdf4; color:#047857; font-weight:800; font-size:14px;}


/* 別の施設と選択（Or）。来るとは限らないので緑にしない。 */
.sh-table td.c.maybe{
  background:#fefce8; color:#a16207; font-weight:700; font-size:11px;
}


/* 提出はしたが、この施設は案に入っていない（別の施設へ行く）。
   未提出（声をかけられる）と区別が付くよう、行き先の施設コードを薄く出す。 */
.sh-table td.c.other{background:#fbfbfb;}


.sh-table td.c.other .oth{color:#c9c9c9; font-size:14px; line-height:1;}


/* ── 凡例 ── */
.legend{
  display:flex; gap:16px; flex-wrap:wrap; align-items:center;
  margin-top:12px; color:var(--muted); font-size:11.5px;
}


.legend span{display:flex; align-items:center; gap:6px;}


.legend .sw{
  min-width:20px; height:17px; border-radius:3px; border:1px solid var(--line);
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  font-style:normal; font-size:10px; font-weight:800; padding:0 4px;
}


.legend .sw.prop{background:#eefdf3; border-color:#10b981;}


.legend .sw.sure{background:#f0fdf4; border-color:#10b981; color:#047857;}


.legend .sw.off{background:#f4f4f5; color:var(--muted);}


.legend .sw.none{background:#fbfbfb;}


.legend .sw.other{background:#fbfbfb; color:#c9c9c9; font-size:13px;}


.legend .sw.maybe{
  border:1px dashed #a16207; color:#a16207; background:#fff;
  border-radius:99px;
}


.legend .sw.maybe .q{font-weight:800;}


.empty{
  text-align:center; color:var(--muted); padding:56px 20px;
  border:1px dashed var(--line); border-radius:10px;
}