/* BANsuke ── 店長・社員がシフトを組む画面
   BANeはオレンジ、BANsukeは藍。同じ一家だが、開いた瞬間にどちらか分かるようにする。
   店長は事務所のPCでも使うので、幅を活かして一覧を詰めて出す。 */
:root{
  --bg:#eef1f4; --card:#fff; --ink:#16202c; --sub:#66717d; --sep:#dde3e9;
  --accent:#1f4470; --accentSoft:#e6eef6;
  --ok:#3d6b4d; --okSoft:#e5efe8; --ei:#a9701f; --eiSoft:#f8efe0; --ng:#8e959c; --ngSoft:#eef0f2;
  --danger:#b23b3b;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#10151b; --card:#181f27; --ink:#e3e9f0; --sub:#95a1ad; --sep:#2a333e;
    --accent:#7ea8d8; --accentSoft:#1b2733;
    --ok:#7fb08c; --okSoft:#1a2a20; --ei:#d3a35f; --eiSoft:#2a2419; --ng:#7d8894; --ngSoft:#1e242b;
    --danger:#e07a7a;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.7}
/* ⚠️ BANsukeは事務所のPCで使う（2026-09-06 小泉）。幅の上限を外して画面いっぱいに使う。
   半月＝最大16列。1列84px＋名前150px＝約1500pxで、横スクロールなしに収まる。 */
#app{max-width:none;margin:0;padding:0 0 32px}

.hdr{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;background:var(--card);border-bottom:1px solid var(--sep);position:sticky;top:0;z-index:20;flex-wrap:wrap}
.brand{font-size:20px;font-weight:800;letter-spacing:.02em;color:var(--accent)}
.brand span{font-size:11px;margin-left:7px;color:var(--sub);font-weight:600;letter-spacing:.14em}
.brand.big{font-size:30px}
.hdr-right{display:flex;gap:8px;align-items:center}
select,input{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--sep);border-radius:8px;padding:7px 9px}
button{font:inherit;cursor:pointer;border-radius:9px;border:1px solid var(--sep);background:var(--card);color:var(--ink);padding:8px 13px;font-weight:600}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.ghost{background:transparent;color:var(--sub)}
button:disabled{opacity:.5;cursor:default}

.tabs{display:flex;gap:6px;padding:8px 20px 0;flex-wrap:wrap}
.tabs button{border:0;background:transparent;color:var(--sub);padding:9px 14px;border-bottom:2px solid transparent;border-radius:0}
.tabs button.on{color:var(--accent);border-bottom-color:var(--accent)}

.cycbar{display:flex;align-items:center;gap:10px;padding:10px 20px;flex-wrap:wrap}
.cycbar label{color:var(--sub);font-size:12px;font-weight:700}
.pill{font-size:11px;font-weight:700;padding:2px 9px;border-radius:99px;border:1px solid var(--sep);color:var(--sub)}
.pill.collecting{color:var(--ei);border-color:var(--ei);background:var(--eiSoft)}
.pill.building{color:var(--accent);border-color:var(--accent);background:var(--accentSoft)}
.pill.published{color:var(--ok);border-color:var(--ok);background:var(--okSoft)}

.panel{background:var(--card);border:1px solid var(--sep);border-radius:12px;margin:12px 20px;padding:14px 18px}
.panel h2{margin:0 0 4px;font-size:15px;font-weight:800;display:flex;align-items:baseline;gap:10px}
.count{font-size:12px;font-weight:700;color:var(--accent)}
.note{margin:6px 0 0;font-size:12px;color:var(--sub);line-height:1.75}
.note.ng{color:var(--danger)}
.empty{margin:12px 20px;padding:28px;background:var(--card);border:1px solid var(--sep);border-radius:12px;text-align:center;color:var(--sub)}
.empty.small{margin:8px 0;padding:16px}
.loading{padding:40px;text-align:center;color:var(--sub)}
.actions{margin:12px 20px 28px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}

.formrow{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:10px}
.formrow label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--sub);font-weight:700}

/* 提出のようす */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.chip{display:inline-flex;flex-direction:column;padding:5px 11px;border-radius:9px;border:1px solid var(--sep);font-size:13px;font-weight:700;line-height:1.35}
.chip b{font-size:10px;font-weight:700;color:var(--sub)}
.chip.done{background:var(--okSoft);border-color:var(--ok)} .chip.done b{color:var(--ok)}
.chip.part{background:var(--eiSoft);border-color:var(--ei)} .chip.part b{color:var(--ei)}
.chip.none{background:var(--ngSoft)}

/* 日×人の一覧 */
.panel.wide{padding:14px 0 8px}
.panel.wide h2,.panel.wide>.note{padding:0 20px}
/* ⚠️ 表だけを自前でスクロールさせる。ページごと流すと、見出し行と名前の列が
   画面の外へ出て「誰の・いつの」が分からなくなる。 */
.scrollx{overflow:auto;margin-top:10px;max-height:72vh}
.matrix{border-collapse:collapse;font-size:12px;min-width:100%}
.matrix th,.matrix td{border:1px solid var(--sep);padding:5px 7px;text-align:center;white-space:nowrap}
.matrix th{background:var(--bg);font-weight:700;position:sticky;top:0;z-index:1}
.matrix .stick{position:sticky;left:0;background:var(--card);font-weight:800;text-align:left;z-index:2}
.matrix .stick span{color:var(--sub);font-weight:600;margin-left:4px;font-size:11px}
.matrix .stick.sat{color:#2f6f9e} .matrix .stick.sun{color:var(--danger)}
.cell.un{color:var(--sub);opacity:.5}
.cell.ok{background:var(--okSoft);color:var(--ok);font-weight:700}
.cell.ei{background:var(--eiSoft);color:var(--ei);font-weight:700}
.cell.ng{background:var(--ngSoft);color:var(--ng)}
.cell.asgd{background:var(--accentSoft);color:var(--accent);font-weight:700}
.cell i{font-style:normal;font-size:10px;margin-left:3px;opacity:.75}

/* 組む */
.daypick{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.dbtn{display:flex;flex-direction:column;align-items:center;min-width:52px;padding:7px 4px;line-height:1.25}
.dbtn b{font-size:16px;font-weight:800}
.dbtn span{font-size:10px;color:var(--sub);font-weight:700}
.dbtn i{font-style:normal;font-size:10px;color:var(--sub)}
.dbtn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.dbtn.on span,.dbtn.on i{color:#fff;opacity:.85}
.dbtn.sat b{color:#2f6f9e} .dbtn.sun b{color:var(--danger)}
.dbtn.on.sat b,.dbtn.on.sun b{color:#fff}

.cands{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.cand{display:flex;align-items:center;gap:12px;border:1px solid var(--sep);border-radius:10px;padding:8px 10px}
.cand.ok{background:var(--okSoft);border-color:var(--ok)}
.cand.ei{background:var(--eiSoft);border-color:var(--ei)}
.cand b{display:block;font-size:14px}
.cand span{font-size:11px;color:var(--sub)}
.cand i{display:block;font-style:normal;font-size:11px;color:var(--sub)}

.asg{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-top:1px solid var(--sep);padding:10px 0}
.asg-name{font-weight:800;min-width:6.5em}
.asg-f{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--sub)}
.asg-f input[type=time]{padding:5px 6px}
.asg-f input[type=number]{width:62px;padding:5px 6px}
.asg-f.slot select{border-color:var(--accent);color:var(--accent);font-weight:700}
.asg-reason{flex:1;min-width:220px;padding:6px 9px}
.del{border-color:transparent;color:var(--sub);padding:5px 10px;font-size:16px;line-height:1}
.del:hover{color:var(--danger)}

/* ログイン */
.login{max-width:340px;margin:60px auto;display:flex;flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--sep);border-radius:14px;padding:28px 24px}
.login .sub{margin:0 0 6px;font-size:13px;color:var(--sub)}
.login input{padding:11px 12px}
.err{color:var(--danger);font-size:12px;min-height:1.2em}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:10px;font-size:13px;font-weight:600;opacity:0;pointer-events:none;transition:.22s;z-index:50}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:640px){
  .panel{margin:10px;padding:14px}
  .asg-reason{min-width:100%}
}

/* 半月のきまり（毎月5日まで＝当月16〜末／毎月20日まで＝翌月1〜15）を押すだけで埋める。
   期間と締切を毎回手で入れると、月をまたぐたびに1日ずれる */
.half{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.halfbtn{flex:1 1 190px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;text-align:left;line-height:1.45}
.halfbtn b{font-size:13px}
.halfbtn span{font-size:12px;color:var(--sub);font-weight:600}
.halfbtn i{font-style:normal;font-size:11px;color:var(--sub)}
.halfbtn u{text-decoration:none;font-size:11px;color:var(--ok);font-weight:700}
.halfbtn.made{opacity:.55;cursor:default}
.halfbtn:not(.made):hover{border-color:var(--accent);color:var(--accent)}

/* 祝日。⚠️ 計算せず Supabase の holiday 表から出す。組むときに平日と同じ見え方だと人を張り忘れる */
.matrix .stick i.hol{display:block;font-style:normal;font-size:10px;color:var(--danger);font-weight:700;margin-top:1px}
.dbtn.sun span{color:var(--danger)}
.holtag{font-size:11px;font-weight:700;color:var(--danger);border:1px solid var(--danger);border-radius:6px;padding:1px 7px}

/* ===== シフト表（日 × 人のグリッド）=====
   らくしふのシフト表と同じ形。1日ずつ開く形だと、週の並びも人の偏りも見えない。
   1つのマスに 確定（上）と希望（下）を重ねる＝希望と違う置き方をした所が目で分かる。 */
.grid{border-collapse:separate;border-spacing:0;font-size:12px;min-width:100%}
.grid th,.grid td{border-right:1px solid var(--sep);border-bottom:1px solid var(--sep);padding:4px 6px;text-align:center;white-space:nowrap}
.grid thead th{position:sticky;top:0;z-index:3;background:var(--bg);font-weight:700;padding:6px}
.grid thead th i{display:block;font-style:normal;font-size:9px;color:var(--danger);font-weight:700}
.grid thead th.sat{color:#2f6f9e} .grid thead th.sun{color:var(--danger)}
.grid .stick{position:sticky;left:0;background:var(--card);z-index:2;text-align:left;min-width:132px}
.grid thead .stick{z-index:4;background:var(--bg)}
.grid .sumrow th,.grid .sumrow td{background:var(--surface-2,var(--bg));font-weight:700;color:var(--sub)}
.grid .sumrow td i{color:var(--sep);font-style:normal}
.grid .grouprow th{background:var(--accentSoft);color:var(--accent);font-weight:800;font-size:11px;letter-spacing:.06em}
.grid .grouprow td{background:var(--accentSoft)}
.nameth .nm{font-size:13px;font-weight:700;line-height:1.3}
.nameth .sub{display:flex;align-items:center;gap:6px;margin-top:1px}
.nameth .tt{font-size:11px;color:var(--sub);font-variant-numeric:tabular-nums}
.rk{font-size:10px;font-weight:800;border-radius:4px;padding:0 5px;border:1px solid currentColor}
.rk.rD{color:#8e959c} .rk.rC{color:#2f6f9e} .rk.rB{color:#3d6b4d} .rk.rA{color:#a9701f} .rk.rS{color:#a9512a}
/* マス。上＝確定、下＝希望 */
.cell{cursor:pointer;min-width:96px;height:46px;vertical-align:middle}
.cell:hover{background:var(--accentSoft)}
.cell .asgbox{display:block;border:1px dashed var(--ok);border-radius:5px;padding:2px 4px;color:var(--ok);font-weight:700;background:var(--okSoft)}
.cell .asgbox.s-ikusei{border-color:var(--ei);color:var(--ei);background:var(--eiSoft)}
.cell .asgbox.s-chosei{border-color:var(--sub);color:var(--sub);background:transparent}
.cell .req{display:block;font-size:10px;color:var(--sub);margin-top:1px;min-height:12px}
.cell .addhint{display:block;color:var(--sep);font-size:14px;font-weight:700}
.cell:hover .addhint{color:var(--accent)}
.cell.ng{background:var(--ngSoft)}
.cell.ng .addhint{opacity:.25}
/* 1マスの編集 */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:40;align-items:center;justify-content:center;padding:16px}
.modal.open{display:flex}
.modal .box{background:var(--card);border-radius:14px;padding:20px;width:100%;max-width:520px;max-height:100%;overflow-y:auto}
.mh{font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mreq{margin-top:6px;font-size:12px;color:var(--sub)}
.mreq i{font-style:normal}
.mrow{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px}
.mrow label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--sub);font-weight:700}
.mrow label span{display:flex;align-items:center;gap:5px;color:var(--ink);font-weight:400}
.mrow input[type=number]{width:64px}
.mreason{width:100%;margin-top:12px;padding:9px 10px}
.mbtns{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.mbtns .danger{border-color:var(--danger);color:var(--danger);margin-right:auto}

/* 希望の一覧のマス（組む画面と同じ表を使うので、色だけ足す） */
.cell.rq{font-weight:700}
.cell.rq.ok{background:var(--okSoft);color:var(--ok)}
.cell.rq.ei{background:var(--eiSoft);color:var(--ei)}
.cell.rq.ng{background:var(--ngSoft);color:var(--ng);font-weight:600}
.cell.rq i{font-style:normal;font-size:10px;margin-left:3px;opacity:.75}
.nameth .tt.ok{color:var(--ok);font-weight:700}

/* お試しの希望（管理者だけ）。本番の操作と見た目で分ける＝枠を点線にして「実験」に見せる */
.demorow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px dashed var(--sep)}
.demorow .note{margin:0;flex:1 1 260px}

/* ===== PC最適化（2026-09-06 小泉指示。スマホ最適化は最後にやる） ===== */
.cell{min-width:84px}
.grid .stick{min-width:150px}
.grid th,.grid td{padding:3px 5px}
.grid thead th{padding:5px 4px;font-size:11.5px}
.nameth .nm{font-size:12.5px}
/* 回収をはじめる：候補ボタンと入力を横に並べる（PCは縦に流さない） */
@media (min-width:1000px){
  .half{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .halfbtn{flex:none}
  .formrow{align-items:flex-end;gap:14px;padding-top:12px;margin-top:12px;border-top:1px dashed var(--sep)}
  .chips{gap:6px}
  .modal .box{max-width:600px}
}
/* 画面が広いほど列を太らせる＝スカスカにも詰まりすぎにもしない */
@media (min-width:1600px){ .cell{min-width:96px} .grid .stick{min-width:170px} }
@media (min-width:1900px){ .cell{min-width:108px} }

/* 半月＝最大16列を横スクロールなしで置きたい。文字を1段落として詰める。
   ⚠️ 名前とランクは詰めない（誰の行かが読めなくなる）。詰めるのは時刻だけ。 */
.cell .asgbox{font-size:11px;padding:1px 3px;letter-spacing:-.2px}
.cell .req{font-size:9.5px;letter-spacing:-.2px}
.grid th,.grid td{padding:3px 4px}

/* ===== 2画面に整理（2026-09-06 小泉）。期間を選ぶ → 状況を見る → 組む → 配信 ===== */
.pickhd{padding:10px 20px 0;font-size:12px;color:var(--sub);font-weight:700}
.picker{display:flex;gap:8px;overflow-x:auto;padding:8px 20px 4px}
.pcard{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:132px;padding:8px 12px;text-align:left;line-height:1.4}
.pcard .pd{font-size:13px;font-weight:800}
.pcard .ps{font-size:11px;font-weight:700;color:var(--sub)}
.pcard .pl{font-size:10px;color:var(--sub)}
.pcard.on{border-width:2px;border-color:var(--accent);background:var(--accentSoft)}
.pcard.on .ps{color:var(--accent)}
.pcard.collecting .ps{color:var(--ei)}
.pcard.building .ps{color:var(--accent)}
.pcard.published .ps{color:var(--ok)}
.pcard.over .ps{color:var(--danger)}
.pcard.new{border-style:dashed;color:var(--sub)}
.pcard.new .pd{font-weight:600}

/* 操作バー。状態と行き先を1行にまとめる＝メニューを増やさない */
.bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 20px 0;padding:10px 14px;background:var(--card);border:1px solid var(--sep);border-radius:10px}
.barsp{font-size:13px;font-weight:700}
.baract{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.baract .demo{opacity:.75;font-size:12px}
.warn{margin:10px 20px 0;padding:10px 14px;border:1px solid var(--ei);background:var(--eiSoft);color:var(--ei);border-radius:10px;font-size:12.5px}
.warn a{color:var(--accent);text-decoration:underline;cursor:pointer;font-weight:700}
.scrollx{margin:10px 20px 0;border:1px solid var(--sep);border-radius:10px;background:var(--card)}
.foot{margin:8px 20px 28px;font-size:11.5px;color:var(--sub)}
.lg{display:inline-block;font-size:10px;font-weight:700;border-radius:4px;padding:0 5px;margin:0 3px;border:1px dashed currentColor}
.lg.s-senryoku{color:var(--ok)} .lg.s-ikusei{color:var(--ei)} .lg.s-chosei{color:var(--sub)}
/* 自動の下書きは点線を強めて「まだ人が見ていない」ことを出す */
.asgbox.draft{border-style:dotted;opacity:.9}
.sumrow b.short{color:var(--danger)} .sumrow b.okv{color:var(--ok)}
/* 設定 */
.setlist{width:100%;border-collapse:collapse;margin-top:8px;font-size:13px}
.setlist td{padding:4px 6px;border-bottom:1px solid var(--sep)}
.setlist input[type=text],.setlist td>input:not([type]){width:140px}
.setlist input[type=number]{width:96px}
.setrow{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px}
.setrow input{width:80px}
.mseg{display:flex;gap:8px;margin:14px 0 4px}
.mseg button{flex:1;padding:11px;font-weight:700}
.mseg button.on{background:var(--ok);border-color:var(--ok);color:#fff}
.mseg button.on.ng{background:var(--ng);border-color:var(--ng)}
.mpats{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.mpats button{flex:1 1 120px;font-size:12px;line-height:1.3;padding:7px 6px}
.mpats button span{display:block;font-size:10px;color:var(--sub);font-weight:600}

/* 名前の列。左端に張り付くと読みにくいので余白を入れる（2026-09-06 小泉指摘） */
.grid .stick{padding-left:12px;padding-right:10px}
.grid thead .stick{padding-left:12px}
.nameth .nm{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.nameth .sub{margin-top:2px}
/* ヘルプ */
.helprow th.stick{background:var(--eiSoft)}
.fromtag{font-size:9.5px;font-weight:700;color:var(--ei);border:1px solid var(--ei);border-radius:4px;padding:0 4px}
.cell.away{background:var(--ngSoft)}
.awaybox{display:block;font-size:10.5px;font-weight:700;color:var(--sub)}

/* もう一方の区分で入っている日。空けたまま、そこに居ることだけ小さく出す */
.cell.other{background:var(--bg)}
.otherbox{display:block;font-size:10px;font-weight:800;color:var(--sub);opacity:.6}

/* 集計行：想定売上とモデル帯 */
.sumrow .fc{color:var(--sub)}
.sumrow .bd{font-size:10px;font-weight:700;color:var(--accent)}
.setlist thead th{font-size:11px;color:var(--sub);text-align:left;padding:4px 6px;border-bottom:1px solid var(--sep)}
.scorecell{font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}

.pcard.past{border-style:dotted;color:var(--sub)}
.pcard.past .ps{color:var(--sub)}
.pcard.past.on{border-style:solid;border-width:2px;border-color:var(--sub);background:var(--ngSoft)}
.bandname{font-weight:800;white-space:nowrap}

/* 設定の表は2つとも同じ列幅にそろえる（2026-09-06 小泉指摘）。
   width:100% のままだと入力欄が画面幅いっぱいに伸びて、上下の表で列がずれる。
   ⚠️ table-layout:fixed ＋ colgroup で、どちらの表も同じ位置に来るようにする。 */
.setlist{width:auto;max-width:960px;table-layout:fixed}
.setlist .c1{width:140px} .setlist .c2{width:300px} .setlist .c3{width:130px}
.setlist .c4{width:150px} .setlist .c5{width:110px} .setlist .c6{width:50px}
.setlist td,.setlist th{overflow:hidden}
.setlist td.nowrap{white-space:nowrap}
.setlist input[type=text],.setlist td>input:not([type]){width:100%}
.setlist input[type=number]{width:92px}
.setlist td.nowrap input[type=number]{width:78px}
.setlist input[type=time]{width:96px}
.setlist select{width:100%}

/* 過去はふだんたたむ（2026-09-06 小泉）。開く釦は先頭に置く */
.pcard.fold{border-style:dashed;color:var(--sub);min-width:96px}
.pcard.fold .pd{font-size:12px;font-weight:700;color:var(--accent)}