/* ============================================================================
   style.css のトークンを使う追加コンポーネント。
   画面設計 docs\画面設計.md で決まった、希望入力のチップUIと日ごと備考。
   トークンは style.css 側に定義がある前提で、ここでは色を直に書かない。

   2026-09-19 改訂: 「選択済み／未回答の差が弱い」という自己申告点を受けて、
   Airシフト（airregi.jp/shift/）の実際のチャット風UIで見た「選ばれた側は塗りつぶし、
   未処理側は縁取りのみ」という強いコントラストの付け方を踏襲した（HTML/CSSは見ていない、
   考え方だけ）。チップは選択時にチェック記号＋浮き上がる影を足し、未回答行は左に太い帯を立てた。
   ============================================================================ */

/* 1日分のブロック */
.dayrow{
  display:flex;flex-direction:column;gap:7px;
  padding:11px 14px 11px 12px;border-bottom:1px solid var(--line);
  border-left:3px solid transparent;
}
.dayrow:last-child{border-bottom:none}
.dayrow.unanswered{background:var(--warn-soft);border-left-color:var(--warn)}
.dayhead{display:flex;align-items:center;gap:10px}
.dayhead .date{font-family:"IBM Plex Mono",monospace;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}

/* 時間帯チップ — 長い選択肢を1行に圧縮せず2段書きにする */
.daylist{align-items:stretch}
.dayrow{align-items:stretch}
.chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:6px;width:100%}
.chips.more{margin-top:-1px}
/* display:grid が [hidden] を打ち消すので明示的に止める */
.chips[hidden]{display:none}
.chip{
  font:inherit;cursor:pointer;text-align:left;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:7px 10px 7px 26px;position:relative;
  display:flex;flex-direction:column;gap:1px;min-height:46px;
  transition:border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
/* 未選択チップにも空のチェック枠を出し、選択時との差を形でも示す */
.chip::before{
  content:"";position:absolute;left:9px;top:9px;width:13px;height:13px;
  border-radius:4px;border:1.5px solid var(--line-strong);background:var(--surface);
}
.chip:hover:not(:disabled){border-color:var(--action)}
.chip:disabled{opacity:.5;cursor:not-allowed}
.chip .chip-main{font-size:13.5px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.chip .chip-sub{font-size:10.5px;color:var(--muted);white-space:nowrap}
.chip.on{
  background:var(--action);border-color:var(--action);color:var(--btn-ink);
  box-shadow:var(--shadow);
}
.chip.on::before{
  border-color:var(--btn-ink);background:var(--btn-ink);
  display:flex;align-items:center;justify-content:center;
  color:var(--action);font-size:10px;font-weight:900;line-height:1;
  content:"\2713";text-align:center;
}
.chip.on .chip-sub{color:inherit;opacity:.85}
.chip.rest .chip-main{font-weight:500}

.morebtn{
  font:inherit;font-size:12px;cursor:pointer;align-self:flex-start;
  background:none;border:none;color:var(--action);padding:2px 0;text-decoration:underline;
}

/* その日の備考 — 折りたたまない。実データで最も使われている欄 */
.daynote{
  width:100%;font-size:12.5px;padding:5px 8px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);color:var(--ink);
}
.daynote::placeholder{color:var(--muted);opacity:.75}
.daynote:disabled{background:var(--sunk)}

/* 調整画面 — その日の備考パネル。セルを1つずつ開かせない */
.notepanel{margin-top:12px}
.notepanel .card-head{gap:10px}
.notepanel ul{list-style:none;margin:0;padding:0}
.notepanel li{
  display:flex;gap:14px;padding:7px 16px;border-bottom:1px solid var(--line);font-size:13px;
}
.notepanel li:hover{background:var(--sunk)}
.notepanel li:last-child{border-bottom:none}
.notepanel .who{flex:0 0 190px;font-weight:700}
.notepanel .what{flex:1;white-space:normal}
td.cell.hasnote{box-shadow:inset 0 -3px 0 var(--action)}

/* 勤務量の目安メモ（集計・マスタ）。自由記述なので折り返す。数値ではないので等幅にしない */
td.memo{
  white-space:normal;color:var(--muted);font-size:12px;
  max-width:200px;line-height:1.5;
}

/* 保存失敗の通知。黙って飲み込まないための最小限の表示 */
.toasts{
  position:fixed;left:50%;bottom:20px;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:8px;z-index:50;width:min(520px,calc(100% - 32px));
}
.toast{
  background:var(--danger-soft);color:var(--danger);
  border:1px solid var(--danger);border-radius:var(--radius);
  padding:10px 14px;font-size:13px;font-weight:700;box-shadow:var(--shadow);
}
.toast.ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}

/* 実データを表示しているときの帯。ダミー用の帯と見間違えないよう色を変える */
.devbar.real{
  background:var(--danger-soft);color:var(--danger);border-bottom-color:var(--danger);
}