header{padding-bottom:14px;}


/* 画面名。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);}


.summary .big{font-size:24px; font-weight:800; color:var(--red); line-height:1;}


.summary .lbl{color:var(--muted); font-size:13px;}


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


/* ── シフト変更の申請（2026-08-18）── 琥珀色で目立たせる。 */
.alert{display:block;}


.alert .lbl{color:var(--muted); font-size:12.5px; margin-left:8px;}


.alert-rows{margin-top:10px; display:flex; flex-direction:column; gap:6px;}


.a-name{font-weight:700; min-width:110px;}


.a-date{font-weight:700; color:var(--red); font-variant-numeric:tabular-nums; min-width:70px;}


.alert.req{
  border-color:#d98e33; background:#fffaf2; margin-bottom:14px;
}


.alert.req b{color:#b45309;}


.req-row{
  display:flex; flex-direction:column; gap:5px;
  padding:9px 11px; background:#fff;
  border:1px solid #d98e33; border-radius:6px; font-size:13px;
}


.req-line{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}


/* 変更前 → 変更後。何がどう変わるのかが一目で分かることが肝心なので、
   矢印で並べて出す（承認の判断はここだけ見れば足りるようにする）。 */
.req-line.change{gap:8px;}


.req-from{color:var(--muted); text-decoration:line-through;}


.req-arrow{color:#b45309; font-weight:800; flex:none;}


.req-to{font-weight:700;}


.req-reason{
  font-size:12.5px; line-height:1.6; color:var(--ink);
  background:#fffaf2; border-radius:5px; padding:5px 8px;
}


.req-btns{display:flex; gap:8px; justify-content:flex-end; margin-top:2px;}


.req-ok{
  border:1px solid #059669; background:#059669; color:#fff;
  padding:5px 16px; border-radius:99px;
  font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
}


.req-ok:hover:not(:disabled){background:#047857;}


.req-askno, .req-cancel{
  border:1px solid var(--line); background:#fff; color:var(--muted);
  padding:5px 14px; border-radius:99px;
  font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
}


.req-askno:hover:not(:disabled){border-color:var(--red); color:var(--red);}


.req-no{
  border:1px solid var(--red); background:var(--red); color:#fff;
  padding:5px 16px; border-radius:99px;
  font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
}


.req-ok:disabled, .req-no:disabled, .req-askno:disabled{opacity:.5; cursor:default;}


.req-reject{display:flex; flex-direction:column; gap:7px; margin-top:3px;}


.req-note{
  width:100%; border:1px solid var(--line); border-radius:6px;
  padding:7px 9px; font-family:inherit; font-size:13px; color:var(--ink); background:#fff;
}


/* ── 清掃員の一覧（表） ──
   以前は1人＝1枚のカード（ダッシュボード設定の手配先ブロック .co-block と
   同じ作り）だった。自社清掃員が30人規模になったところ、1人ぶんの縦幅が
   大きすぎて「翌月シフトを出していないのは誰か」を探すのに何度も
   スクロールすることになったため、一覧性を優先して表に変えた（2026-08-27）。

   手配先（.co-block）は数が少ないのでカードのまま。**もう同じ作りではない**
   ので、片方を直しても、もう片方に合わせ直す必要はない。 */
.sa-table{
  width:100%; border-collapse:collapse; table-layout:fixed;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 1px 3px rgba(0,0,0,.07); font-size:13px;
}


/* 見出しは画面の上端に貼り付ける。30人ぶん並ぶと、下のほうを見ているときに
   どの列が何なのか分からなくなるため。
   **表を overflow:hidden の入れ物に入れないこと。** 入れると sticky の
   基準がその入れ物になり、貼り付かなくなる（角丸を overflow で切らずに
   四隅のセルへ個別に付けているのはこのため）。 */
.sa-table thead th{
  position:sticky; top:0; z-index:2;
  text-align:left; padding:9px 10px; white-space:nowrap;
  font-size:11px; font-weight:700; color:var(--muted);
  background:#f6f6f7; border-bottom:1px solid var(--line);
}


.sa-table thead th:first-child{border-top-left-radius:10px;}


.sa-table thead th:last-child{border-top-right-radius:10px;}


/* 担当施設列の見出し＝ソートボタン。見出しの他の列と揃えて出したいので
   ボタンの既定の見た目は消し、押せることはホバーと矢印だけで示す。 */
.th-sort{
  border:none; background:none; padding:0; margin:0; cursor:pointer;
  font-family:inherit; font-size:11px; font-weight:700; color:var(--muted);
  display:flex; align-items:center; gap:3px;
}


.th-sort:hover, .th-sort.active{color:var(--red-dark);}


.th-arrow{font-size:9px;}


/* 列幅は table-layout:fixed なので見出し行（thead th）から決まる。
   担当施設だけ幅を指定せず、余った分を受け持たせる。 */
.sa-table .c-dot  {width:28px; padding-right:0;}


.sa-table .c-rank {width:52px;}


.sa-table .c-name {width:150px;}


.sa-table .c-memo {width:140px;}


/* 「提出済み」（4文字）が収まる幅。以前は80pxで、Windows既定フォントだと
   ぎりぎり足りずに末尾の1文字だけ次の行に折り返すことがあった
   （2026-08-30、ユーザー指摘）。white-space:nowrap（.m-state）と合わせて、
   はみ出す分はバッジごと右へ伸びるだけにして折り返させない。 */
.sa-table .c-state{width:92px;}


/* 「開く」と「×」が並ぶ列。×を押すと幅のある「削除」に変わるので、
   その状態でも収まる幅にしてある（はみ出すと表の枠から飛び出す）。 */
.sa-table .c-act  {width:136px; text-align:right; white-space:nowrap;}


.sa-tr > td{
  padding:6px 10px; border-bottom:1px solid var(--line-soft); vertical-align:middle;
}


.sa-tr:hover > td{background:#f8f8f9;}


/* 開いている行は、下に続く編集欄と地続きに見えるよう色を敷く */
.sa-tr.open > td{background:var(--red-tint);}


.sa-table tbody tr:last-child > td{border-bottom:none;}


.sa-table tbody tr:last-child > td:first-child{border-bottom-left-radius:10px;}


.sa-table tbody tr:last-child > td:last-child{border-bottom-right-radius:10px;}


.sa-table .dot{
  display:block; width:13px; height:13px; border-radius:50%;
  border:1.5px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.15);
}


/* 名前・備考は列の幅で切る（table-layout:fixed なので、セル幅を超えた分は
   中の span 側で隠さないと隣の列へはみ出す）。 */
.sa-name{
  display:block; font-weight:700; font-size:13.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}


.sa-memo{
  display:block; color:var(--muted); font-size:11.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}


.sa-memo.none{color:#ccc;}


/* 一覧に出す担当施設。以前は施設ごとに丸バッジ（pill）で出していたが、
   人数が増えるほどバッジが並んで賑やかすぎたので、他のセルと同じ
   ただのテキストに変えた（2026-08-27）。担当施設欄（propsBlock）の表は
   今までどおりバッジ無しの表なので、そちらとも見た目がそろう。 */
.sa-props{
  display:block; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}


.sa-props.none{color:var(--muted);}


.props-more{color:var(--muted);}


/* ── 開いたときの編集欄。行の位置はそのままに、真下へ差し込む ──
   （閉じたときに元の場所を見失わないようにするため）。 */
.sa-detail > td{padding:0; border-bottom:1px solid var(--line);}


.sa-detail .sa-body{border-left:3px solid var(--red); background:#fdfdfd;}


/* ── 年月の選択。既定は今月。過ぎた月も選べば読み出せる ── */
.ym-pick{display:flex; align-items:center; gap:8px;}


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


.ym-pick select:focus{outline:none; border-color:var(--red);}


.ym-now{
  padding:2px 9px; border-radius:99px; font-size:11px; font-weight:800;
  background:var(--red-tint); border:1px solid var(--red-line); color:var(--red);
}


.btn-shift-check{
  flex:none; border:1px solid var(--red); background:#fff; color:var(--red);
  padding:6px 14px; border-radius:6px;
  font-family:inherit; font-size:12px; font-weight:700; cursor:pointer;
}


.btn-shift-check:hover{background:var(--red); color:#fff;}


/* 「シフト確認」を押すまでの案内。一覧の代わりに出す */
.sa-month-hint{
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  font-size:13px; color:var(--muted);
}


.m-state{
  flex:none; white-space:nowrap;
  padding:2px 9px; border-radius:99px;
  font-size:11px; font-weight:800; font-variant-numeric:tabular-nums;
}


.m-state.ok{background:#ecfdf5; color:#059669;}


/* 未提出は赤くする。出ていない人に催促するのがこの画面の役目なので */
.m-state.no{background:var(--red-tint); color:var(--red); border:1px solid var(--red-line);}


.m-state.past{background:#f2f2f2; color:var(--muted);}


.sa-open{
  flex:none; border:1px solid var(--line); background:#fff; color:var(--muted);
  padding:5px 13px; border-radius:99px;
  font-family:inherit; font-size:12px; font-weight:700; cursor:pointer;
}


.sa-open:hover{border-color:var(--red); color:var(--red);}


.sa-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:16px;}


.sa-row{display:flex; flex-direction:column; gap:8px;}


.sa-row .lbl{color:var(--muted); font-size:12px; font-weight:700;}


.hint{color:var(--muted); font-size:11px; font-weight:400; margin-left:8px;}


/* ── ランク（清掃手配の優先度）。小さいしるしとして出す ── */
.rank{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:5px;
  font-size:11px; font-weight:800; line-height:1;
}


.rank.r-A{background:var(--red); color:#fff;}


.rank.r-B{background:#fde8ea; color:var(--red-dark); border:1px solid var(--red-line);}


.rank.r-C{background:#f2f2f2; color:var(--muted); border:1px solid var(--line);}


.rank.none{background:#fff; color:#c8c8c8; border:1px dashed var(--line);}


/* ── 基本情報（名前・ランク・連絡先・備考） ── */
.sa-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px;}


.sa-field{display:flex; flex-direction:column; gap:5px;}


.sa-field.wide{grid-column:1 / -1;}


.sa-field .lbl{color:var(--muted); font-size:12px; font-weight:700;}


.sa-field input, .sa-field select{
  font-family:inherit; font-size:13px; padding:7px 9px; color:var(--ink);
  border:1px solid var(--line); border-radius:6px; background-color:#fff; width:100%; box-sizing:border-box;
}


/* select だけ、矢印（base.css の共通ルール）ぶんの右余白を足す。
   input と同じルールで padding をまとめていたので、ここは select 単独で
   上書きする（input には矢印が無いので余白は要らない）。 */
.sa-field select{padding-right:28px;}


.sa-field input:focus, .sa-field select:focus{outline:none; border-color:var(--red);}


/* 名前・ランク・連絡先・備考の保存ボタン。入力のたびに自動保存もするが、
   押した手応えが欲しいという要望で、その場で確定できる手段を用意する。 */
.sa-profile-foot{display:flex; justify-content:flex-end; margin-top:10px;}


.btn-save-profile{
  border:1.5px solid var(--red); background:var(--red); color:#fff;
  padding:6px 16px; border-radius:6px;
  font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
}


.btn-save-profile:hover{background:var(--red-dark);}


/* ── 清掃員に渡すURL ── */
.url-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}


.url-row input{
  flex:1; min-width:220px; font-family:var(--font-mono);
  font-size:12px; padding:6px 9px; color:var(--muted);
  border:1px solid var(--line); border-radius:6px; background:#fafafa;
}


.btn-copy{
  flex:none; border:1px solid var(--red); background:#fff; color:var(--red);
  padding:6px 14px; border-radius:6px;
  font-family:inherit; font-size:12px; font-weight:700; cursor:pointer;
}


.btn-copy:hover{background:var(--red); color:#fff;}


/* ── 清掃員の登録・削除 ── */
.btn-add{
  margin-left:auto; border:1.5px dashed var(--red); background:#fff; color:var(--red);
  padding:6px 16px; border-radius:99px;
  font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
}


.btn-add:hover{background:var(--red); color:#fff; border-style:solid;}


/* 登録の応答待ち（actions.js の addStaff）。押せないことが見て分かるように。 */
.btn-add:disabled,
.btn-add:disabled:hover{cursor:progress; opacity:.6; background:#fff; color:var(--red); border-style:dashed;}


/* 読み込み中の集計バーに置く見えない「＋ 清掃員を登録」（staff-admin.html）。
   ボタンのぶん集計バーが高くなるので、読み込み中から同じ高さにしておく
   （届いた瞬間に下の表が押し下げられないように。REVIEW-2026-09-27 の M02）。 */
.btn-add-ph{visibility:hidden; pointer-events:none;}


/* 削除の×。押すと確認ポップアップ（js/lib/confirmdialog.js）が出て、そこで確定する。 */
.sa-del{
  flex:none; border:none; background:none; color:#ccc; cursor:pointer;
  font-family:inherit; font-size:17px; line-height:1; padding:0 2px;
}


.sa-del:hover{color:var(--red);}


/* ── 開いたときの月の内容 ── */
.sa-month{
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:2px 16px;
}


.sa-day{display:flex; align-items:center; gap:10px; padding:5px 2px; font-size:13px; border-bottom:1px solid var(--line-soft);}


/* 過ぎた日は薄く。もう手配は終わっているので目立たせない */
.sa-day.past{opacity:.4;}


.sa-date{font-weight:700; flex:none; min-width:62px; font-variant-numeric:tabular-nums;}


.sa-sum{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}


.s-none{color:var(--muted);}


.s-off{color:var(--muted); font-weight:700;}


.s-ok{font-weight:700;}


/* 案が複数のときの「または」。どれか1つを選ぶ意味だと分かるように弱く出す */
.s-ok em{font-style:normal; color:var(--red); font-weight:700; font-size:11px; margin:0 2px;}


.prop-add-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}


.prop-add-label{font-size:12px; font-weight:700; color:var(--red-dark); white-space:nowrap; flex:none;}


/* 検索して選ぶ欄の見た目そのものは css/combobox.css に移した（2026-08-31。
   extramodal.css にも同じ指定があって二重管理になっていたため）。
   ここに残すのはこの画面だけの幅の調整。 */
.prop-search-wrap{max-width:420px;}


/* ── 幅の狭い画面では、清掃員の表を1人＝2〜3段の行に組み替える ──
   （2026-09-27 点検 M07）

   上の表は table-layout:fixed で、担当施設の列だけ幅を決めずに余りを
   受け持たせている。ほかの列の幅（28+52+150+140+92+136＝598px）に main の
   左右の余白（48px）を足した約650pxを下回ると、余りが0になって「担当施設」の
   列が消え、見出しの並べ替えボタンも隣の列の下に潜って押せなくなっていた。
   スマホ幅（375px）では、担当施設を除いた列だけでも収まらない。

   表を横スクロールの入れ物に入れる直し方は採らない：入れ物が
   スクロールの基準になって、見出しが画面の上端に貼り付かなくなる
   （上の .sa-table thead th のコメント）。**列を消さずに、段に組み替える。**

     1段目  ● ランク 名前 ………… 開く ×
     2段目  担当施設 …………………… 提出済み
     3段目  備考（あるときだけ）

   見出しは「担当施設（並べ替え）」と「月」だけを残し、見出しごと上端に貼り付ける。
   760px は、表のままでも担当施設の列に約110px（施設名がおよそ1件読める幅）が
   残る境目。 */
@media (max-width:760px){
  .sa-table, .sa-table tbody{display:block;}

  /* 見出しは th ではなく thead ごと貼り付ける（th はもう表のセルではないので、
     th に付けた sticky は短い行の中でしか効かない）。 */
  .sa-table thead{
    display:block; position:sticky; top:0; z-index:2;
    background:#f6f6f7; border-bottom:1px solid var(--line);
    border-radius:10px 10px 0 0;
  }
  .sa-table thead tr{display:flex; align-items:center;}
  .sa-table thead th{display:none; position:static; border-bottom:none; background:none;}
  .sa-table thead th.c-props{display:block; flex:1; width:auto; min-width:0;}
  .sa-table thead th.c-state{display:block; width:auto; text-align:right;}

  .sa-tr{
    display:grid; align-items:center; column-gap:8px;
    grid-template-columns:auto auto minmax(0,1fr) auto;
    grid-template-areas:
      "dot   rank  name  act"
      "props props props state"
      "memo  memo  memo  memo";
    padding:6px 10px; border-bottom:1px solid var(--line-soft);
  }
  /* 行の色はセルではなく行に敷く（格子の隙間が白く抜けないように）。 */
  .sa-table .sa-tr > td{
    display:block; width:auto; padding:2px 0; border-bottom:none;
    background:none;
  }
  .sa-tr:hover{background:#f8f8f9;}
  .sa-tr.open{background:var(--red-tint);}
  .sa-table tbody tr:last-child{border-bottom:none; border-radius:0 0 10px 10px;}

  .sa-tr > td.c-dot  {grid-area:dot;}
  .sa-tr > td.c-rank {grid-area:rank;}
  .sa-tr > td.c-name {grid-area:name; min-width:0;}
  .sa-tr > td.c-act  {grid-area:act;}
  .sa-tr > td.c-props{grid-area:props; min-width:0;}
  .sa-tr > td.c-state{grid-area:state; text-align:right;}
  .sa-tr > td.c-memo {grid-area:memo; min-width:0; padding:0;}
  /* 備考が無い人は3段目を出さない（「–」だけの段は要らない）。 */
  .sa-tr > td.c-memo .sa-memo.none{display:none;}

  .sa-detail{display:block;}
  .sa-table .sa-detail > td{display:block; width:auto;}
}