/* ============================================================
   給与計算・シフト管理 専用コンポーネント
   ------------------------------------------------------------
   theme.css のトークン / app.css のボタン・バッジ・カード・テーブルの
   上に構築する。色・角丸・影は必ず var(--...) を使い、直書きしない。
   （スタッフの識別カラーだけは data 属性 / inline style で差し込む）

   ====== クラス索引 ======
   ページ土台:
     .page-head        画面上部の見出し行（タイトル＋右アクション）
     .page-title       画面タイトル
     .page-sub         タイトル下の補足1行
     .toolbar          フィルタ・月切替などの操作行
     .month-nav        「◀ 2026年10月 ▶」の月送り
   指標:
     .stat-grid        KPIタイルのグリッド
     .stat             KPIタイル1枚
     .stat-label / .stat-value / .stat-sub
   カレンダー:
     .cal              月間カレンダー（7列グリッド）
     .cal-head         曜日見出し行
     .cal-day          1日ぶんのセル
     .cal-day.is-out   当月外の日
     .cal-day.is-sat / .is-sun / .is-holiday / .is-sale  日種別
     .cal-date         日付の数字
     .cal-mark         祝日・セールの小ラベル
     .chip-staff       スタッフの色つきチップ
   シフト表（スタッフ×日のマトリクス）:
     .shift-wrap       横スクロール枠
     .shift-tbl        マトリクス本体
     .shift-name       左端の固定名前列
     .cell-on / .cell-off / .cell-paid / .cell-req
   明細:
     .kv               ラベル＋金額の1行
     .kv-total         合計行（太字・上罫線）
     .payslip          明細カードの外枠（A4風）
   チェック・警告:
     .alert-row        チェック結果の1件
     .alert-ico        左のアイコン枠
   その他:
     .legend           凡例の並び
     .legend-dot       凡例の色見本
     .seg              セグメント切替（月/週 など）
     .seg-item
   シフト系（追記）:
     .gen-bar          自動生成の操作バー（条件＋実行ボタン）
     .gen-field        操作バー内の「ラベル＋入力」1組
     .drop-zone        紙提出の写真アップロード枠（点線）
     .chip-filter      スタッフ絞り込みのトグルチップ
     .note             画面内の注記（薄い地＋アイコン）
     .sw-dot           氏名の前に置く識別カラーの点
     .legend-dot.sat / .sun / .out   カレンダーの日種別に合わせた凡例の色見本
   ============================================================ */

/* ---------------- ページ土台 ---------------- */
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.page-title { font-size:20px; font-weight:800; color:var(--ink); line-height:1.3; }
.page-sub { font-size:12.5px; color:var(--ink-3); margin-top:5px; line-height:1.6; }

.toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.toolbar .spacer { flex:1; }

.month-nav { display:inline-flex; align-items:center; gap:2px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:3px; }
.month-nav button { width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-sm); color:var(--ink-3); transition: all var(--dur) var(--ease); }
.month-nav button:hover { background:var(--surface-3); color:var(--ink); }
.month-nav .label { padding:0 12px; font-size:13.5px; font-weight:700; color:var(--ink); white-space:nowrap; }

.seg { display:inline-flex; background:var(--surface-3); border-radius:var(--r); padding:3px; gap:2px; }
.seg-item { padding:6px 13px; font-size:12.5px; font-weight:600; color:var(--ink-3); border-radius:var(--r-sm);
  transition: all var(--dur) var(--ease); cursor:pointer; }
.seg-item:hover { color:var(--ink); }
.seg-item.active { background:var(--surface); color:var(--ink); box-shadow:var(--shadow-xs); }

/* ---------------- 指標タイル ---------------- */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
.stat { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:15px 16px; }
.stat-label { font-size:11.5px; font-weight:600; color:var(--ink-3); display:flex; align-items:center; gap:6px; }
.stat-value { font-family:var(--font-num); font-variant-numeric:tabular-nums; font-size:25px; font-weight:800;
  color:var(--ink); line-height:1.2; margin-top:8px; letter-spacing:-.02em; }
.stat-value .unit { font-size:13px; font-weight:700; color:var(--ink-3); margin-left:3px; }
.stat-sub { font-size:11.5px; color:var(--ink-3); margin-top:6px; line-height:1.5; }

/* ---------------- 月間カレンダー ---------------- */
.cal { display:grid; grid-template-columns:repeat(7,1fr); background:var(--border); gap:1px;
  border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.cal-head { background:var(--surface-2); text-align:center; padding:9px 0; font-size:11.5px; font-weight:700; color:var(--ink-3); }
.cal-head.sat { color:var(--sat); }
.cal-head.sun { color:var(--danger); }

.cal-day { background:var(--surface); min-height:104px; padding:7px 8px 9px; display:flex; flex-direction:column; gap:4px; }
.cal-day.is-out { background:var(--surface-2); }
.cal-day.is-out .cal-date { color:var(--ink-4); }
.cal-day.is-sat { background:var(--sat-bg); }
.cal-day.is-sun, .cal-day.is-holiday { background:var(--sun-bg); }
.cal-day.is-sale { background:var(--warning-soft); }
.cal-day.is-today { box-shadow: inset 0 0 0 2px var(--accent); }

.cal-date { font-family:var(--font-num); font-size:12.5px; font-weight:700; color:var(--ink-2); display:flex; align-items:center; gap:5px; }
.cal-day.is-sun .cal-date, .cal-day.is-holiday .cal-date { color:var(--danger); }
.cal-day.is-sat .cal-date { color:var(--sat); }
.cal-mark { font-size:10px; font-weight:700; padding:1px 5px; border-radius:var(--r-xs); background:var(--danger-soft); color:var(--danger); }
.cal-mark.sale { background:var(--warning-soft); color:var(--warning); }

.chip-staff { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:var(--ink-2);
  background:var(--surface-2); border-radius:var(--r-xs); padding:2px 5px; line-height:1.5; }
.chip-staff .sw { width:7px; height:7px; border-radius:var(--r-pill); flex-shrink:0; }
.chip-staff .t { font-family:var(--font-num); color:var(--ink-3); font-size:10.5px; margin-left:auto; }
.cal-more { font-size:10.5px; font-weight:600; color:var(--ink-4); padding-left:2px; }

/* ---------------- シフトマトリクス ---------------- */
.shift-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); }
.shift-tbl { border-collapse:separate; border-spacing:0; font-size:12px; min-width:100%; }
.shift-tbl th, .shift-tbl td { border-bottom:1px solid var(--border); border-right:1px solid var(--border); }
.shift-tbl thead th { position:sticky; top:0; z-index:2; background:var(--surface-2); font-weight:700; color:var(--ink-3);
  font-size:11px; padding:7px 0; width:34px; min-width:34px; text-align:center; }
.shift-tbl thead th.sun, .shift-tbl thead th.holiday { color:var(--danger); background:var(--sun-bg); }
.shift-tbl thead th.sat { color:var(--sat); background:var(--sat-bg); }
.shift-name { position:sticky; left:0; z-index:3; background:var(--surface); width:150px; min-width:150px;
  text-align:left; padding:8px 12px; font-weight:700; color:var(--ink); }
.shift-tbl thead .shift-name { z-index:4; background:var(--surface-2); }
.shift-name .sw { display:inline-block; width:8px; height:8px; border-radius:var(--r-pill); margin-right:7px; }
.shift-name .h { display:block; font-size:10.5px; font-weight:500; color:var(--ink-4); margin-top:1px; padding-left:15px; }
.shift-tbl tbody td { text-align:center; padding:0; height:38px; font-family:var(--font-num); font-size:11px; font-weight:600; }
.cell-on   { background:var(--accent-soft); color:var(--accent); }
.cell-off  { background:var(--surface); color:var(--ink-4); }
.cell-paid { background:var(--success-soft); color:var(--success); }
.cell-req  { background:var(--warning-soft); color:var(--warning); }
.shift-tbl tbody tr:hover td { background:var(--surface-3); }
.shift-tbl tbody tr:hover .shift-name { background:var(--surface-3); }
.shift-tbl tbody tr:hover .cell-on { background:var(--accent-soft); }

/* ---------------- 凡例 ---------------- */
.legend { display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:11.5px; color:var(--ink-3); }
.legend > span { display:inline-flex; align-items:center; gap:6px; }
.legend-dot { width:11px; height:11px; border-radius:var(--r-xs); border:1px solid var(--border); }

/* ---------------- 明細 ---------------- */
.payslip { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:24px 26px; max-width:640px; }
.kv { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px dashed var(--border); }
.kv:last-child { border-bottom:0; }
.kv .k { font-size:12.5px; color:var(--ink-2); }
.kv .k small { display:block; font-size:10.5px; color:var(--ink-4); margin-top:2px; }
.kv .v { font-family:var(--font-num); font-variant-numeric:tabular-nums; font-size:14px; font-weight:700; color:var(--ink); white-space:nowrap; }
.kv-total { border-bottom:0; border-top:2px solid var(--ink); margin-top:6px; padding-top:12px; }
.kv-total .k { font-size:13.5px; font-weight:700; color:var(--ink); }
.kv-total .v { font-size:21px; font-weight:800; }

/* ---------------- チェック結果・警告 ---------------- */
.alert-row { display:flex; align-items:flex-start; gap:11px; padding:12px 14px; border:1px solid var(--border);
  border-radius:var(--r); background:var(--surface); transition: border-color var(--dur) var(--ease); }
.alert-row:hover { border-color:var(--border-strong); }
.alert-ico { width:28px; height:28px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.alert-ico.danger { background:var(--danger-soft); color:var(--danger); }
.alert-ico.warning { background:var(--warning-soft); color:var(--warning); }
.alert-ico.info { background:var(--accent-soft); color:var(--accent); }
.alert-row .ttl { font-size:13px; font-weight:700; color:var(--ink); }
.alert-row .dsc { font-size:12px; color:var(--ink-3); margin-top:3px; line-height:1.6; }

/* ---------------- 印刷（明細のPDF出力イメージ） ---------------- */
@media print {
  .sidebar, .topbar, .no-print { display:none !important; }
  .content { padding:0; }
  .payslip { border:0; max-width:none; }
}

/* === shift系 追記 ===
   シフト3画面（希望の回収 / シフト作成 / シフトカレンダー）で使う追加部品。
   ここより下は末尾に追記していく。色は必ず var(--...) を使う。 */

/* 自動生成の操作バー */
.gen-bar { display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:14px 16px; }
.gen-bar .spacer { flex:1; }
.gen-field { display:flex; flex-direction:column; gap:6px; min-width:132px; }
.gen-field > .lb { font-size:11px; font-weight:700; color:var(--ink-3); }
.gen-field > .vl { font-size:13.5px; font-weight:700; color:var(--ink); }

/* 紙提出の写真アップロード枠 */
.drop-zone { border:1px dashed var(--border-strong); border-radius:var(--r-lg); background:var(--surface-2);
  padding:22px 18px; text-align:center; transition: all var(--dur) var(--ease); cursor:pointer; }
.drop-zone:hover { border-color:var(--accent); background:var(--accent-softer); }
.drop-zone .ico { width:40px; height:40px; border-radius:var(--r); background:var(--surface);
  border:1px solid var(--border); display:inline-flex; align-items:center; justify-content:center; color:var(--ink-3); }
.drop-zone .ttl { font-size:13px; font-weight:700; color:var(--ink); margin-top:10px; }
.drop-zone .dsc { font-size:11.5px; color:var(--ink-3); margin-top:5px; line-height:1.7; }

/* スタッフ絞り込みチップ */
.chip-filter { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  color:var(--ink-3); background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-pill); padding:5px 11px; cursor:pointer; transition: all var(--dur) var(--ease); }
.chip-filter:hover { border-color:var(--border-strong); color:var(--ink); }
.chip-filter .sw { width:8px; height:8px; border-radius:var(--r-pill); flex-shrink:0; }
.chip-filter.active { background:var(--accent-soft); border-color:var(--accent-soft); color:var(--accent); }

/* 注記 */
.note { display:flex; align-items:flex-start; gap:9px; background:var(--accent-soft);
  border-radius:var(--r); padding:11px 13px; font-size:12px; color:var(--ink-2); line-height:1.7; }
.note .ico { color:var(--accent); flex-shrink:0; margin-top:2px; }

/* 氏名の前の識別カラー点 */
.sw-dot { display:inline-block; width:9px; height:9px; border-radius:var(--r-pill); flex-shrink:0; }

/* === マスタ系 追記 === */
/* 索引:
   .ba-grid / .ba-col / .ba-head / .ba-list / .ba-arrow   ビフォーアフター比較（2カラム＋矢印）
   .switch                                                トグルスイッチ（設定のON/OFF）
   .rule-row / .rule-ctl                                  設定1行（見出し＋説明＋右コントロール）
   .form-grid / .field                                    マスタ編集フォームのグリッド
   .hol-grid / .hol-item                                  祝日一覧の月別グリッド
   .panel-head                                            展開パネルの見出し行
   .sub-note                                              表の下などに置く小さな補足1行
*/

/* ビフォーアフター比較 */
.ba-grid { display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:stretch; }
.ba-col { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg); padding:15px 16px; }
.ba-col.is-after { background:var(--accent-softer); border-color:var(--accent-soft); }
.ba-head { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--ink-3); }
.ba-col.is-after .ba-head { color:var(--accent); }
.ba-head .lb { font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.ba-list { margin-top:11px; display:flex; flex-direction:column; gap:8px; }
.ba-list li { display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color:var(--ink-2); line-height:1.65; }
.ba-list li .n { font-family:var(--font-num); font-size:10.5px; font-weight:700; color:var(--ink-4);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xs);
  min-width:17px; height:17px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; }
.ba-col.is-after .ba-list li .n { color:var(--accent); border-color:var(--accent-soft); }
.ba-arrow { align-self:center; width:30px; height:30px; border-radius:var(--r-pill); background:var(--accent-soft);
  color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
@media (max-width:820px) {
  .ba-grid { grid-template-columns:1fr; }
  .ba-arrow { transform:rotate(90deg); margin:0 auto; }
}

/* トグルスイッチ */
.switch { position:relative; display:inline-flex; align-items:center; width:40px; height:23px; flex-shrink:0; cursor:pointer; }
.switch input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.switch .track { width:40px; height:23px; border-radius:var(--r-pill); background:var(--border-strong);
  transition: background-color var(--dur) var(--ease); }
.switch .knob { position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:var(--r-pill);
  background:var(--surface); box-shadow:var(--shadow-xs); transition: transform var(--dur) var(--ease); }
.switch input:checked + .track { background:var(--accent); }
.switch input:checked ~ .knob { transform:translateX(17px); }
.switch input:focus-visible + .track { box-shadow:0 0 0 3px var(--accent-ring); }

/* 設定1行 */
.rule-row { display:flex; align-items:flex-start; gap:14px; padding:13px 0; border-bottom:1px solid var(--border); }
.rule-row:last-child { border-bottom:0; }
.rule-row > .bd { flex:1; min-width:0; }
.rule-row .ttl { font-size:13px; font-weight:700; color:var(--ink); }
.rule-row .dsc { font-size:11.5px; color:var(--ink-3); margin-top:4px; line-height:1.7; }
.rule-ctl { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.rule-ctl .input, .rule-ctl .select { width:auto; min-width:96px; height:32px; font-size:12.5px; }

/* マスタ編集フォーム */
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px 16px; }
.field { min-width:0; }
.field .hint { font-size:11px; color:var(--ink-4); margin-top:5px; line-height:1.6; }
.field-full { grid-column:1 / -1; }

/* 祝日一覧（月別） */
.hol-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:9px; }
.hol-item { display:flex; align-items:center; gap:9px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r); padding:9px 11px; }
.hol-item .mo { font-family:var(--font-num); font-size:11px; font-weight:700; color:var(--ink-4);
  min-width:30px; flex-shrink:0; }
.hol-item .nm { font-size:12px; font-weight:600; color:var(--ink); line-height:1.4; flex:1; min-width:0; }
.hol-item .dy { font-family:var(--font-num); font-size:11px; color:var(--ink-3); flex-shrink:0; }
.hol-item.is-off { opacity:.5; }

/* 展開パネルの見出し行 */
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 18px; border-bottom:1px solid var(--border); }
.panel-head .ttl { font-size:13.5px; font-weight:800; color:var(--ink); display:flex; align-items:center; gap:8px; }
.panel-head .dsc { font-size:11.5px; color:var(--ink-3); margin-top:3px; line-height:1.6; }

/* 表の下の小さな補足 */
.sub-note { font-size:11.5px; color:var(--ink-3); line-height:1.7; padding:11px 16px; background:var(--surface-2);
  border-top:1px solid var(--border); }

/* 凡例の色見本（カレンダーの日種別に合わせる。HTMLへhexを直書きしないため） */
.legend-dot.sat { background:var(--sat-bg); }
.legend-dot.sun { background:var(--sun-bg); }
.legend-dot.out { background:var(--surface-2); }

/* === 給与系 追記 ===
   勤怠管理 / 給与計算 / 給与明細 の3画面で使う追加パーツ
     .tbl-wrap      横スクロールするテーブル枠
     .tbl tfoot     合計行
     .is-flagged / .is-warn   要対応の行（背景の塗りで強調・左縦線は使わない）
     .d-sat / .d-sun / .d-holiday  日付セルの曜日色
     .note-box / .formula     ロジック説明ボックスと計算例
     .staff-pick / .staff-pick-item  明細の対象者リスト
     .payslip-head / .ps-grid / .ps-cell / .ps-sec  明細の体裁
   ------------------------------------------------------------ */
.tbl-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); }
.tbl-wrap .tbl { min-width:100%; }
.tbl-wrap .tbl thead th:first-child, .tbl-wrap .tbl tbody td:first-child { padding-left:16px; }
.tbl-wrap .tbl tbody tr:last-child td { border-bottom:0; }

.tbl tfoot td { padding:12px 14px; background:var(--surface-2); font-size:12.5px; font-weight:800;
  color:var(--ink); border-top:1px solid var(--border-strong); white-space:nowrap; }
.tbl tfoot td:first-child { padding-left:16px; }

.tbl tbody tr.is-flagged, .tbl tbody tr.is-flagged:hover { background:var(--danger-soft); }
.tbl tbody tr.is-warn, .tbl tbody tr.is-warn:hover { background:var(--warning-soft); }
.tbl td.is-over { color:var(--danger); font-weight:700; }
.tbl td.is-muted { color:var(--ink-4); }

.d-sat { color:var(--sat); }
.d-sun, .d-holiday { color:var(--danger); }

.note-box { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r); padding:14px 16px; }
.note-box .nb-ttl { font-size:13px; font-weight:800; color:var(--ink); display:flex; align-items:center; gap:7px; }
.note-box .nb-txt { font-size:12.5px; color:var(--ink-2); line-height:1.7; margin-top:6px; }
.formula { display:inline-block; font-family:var(--font-num); font-variant-numeric:tabular-nums; font-size:12px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); padding:8px 11px;
  color:var(--ink-2); margin-top:9px; }

.staff-pick { padding:7px; display:flex; flex-direction:column; gap:1px; }
.staff-pick-item { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:var(--r);
  cursor:pointer; transition: background-color var(--dur) var(--ease); }
.staff-pick-item:hover { background:var(--surface-2); }
.staff-pick-item.active { background:var(--accent-soft); }
.staff-pick-item.active .sp-name { color:var(--accent); font-weight:700; }
.staff-pick-item .sw { width:9px; height:9px; border-radius:var(--r-pill); flex-shrink:0; }
.sp-name { font-size:12.5px; font-weight:600; color:var(--ink); flex:1; min-width:0; }
.sp-amt { font-family:var(--font-num); font-variant-numeric:tabular-nums; font-size:11.5px; color:var(--ink-3); }

.payslip-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding-bottom:14px; border-bottom:2px solid var(--ink); }
.payslip-title { font-size:16px; font-weight:800; color:var(--ink); letter-spacing:.06em; }
.payslip-sub { font-size:11.5px; color:var(--ink-3); margin-top:5px; line-height:1.6; }
.ps-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(108px,1fr)); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.ps-cell { background:var(--surface-2); padding:9px 11px; }
.ps-cell .l { font-size:10.5px; font-weight:600; color:var(--ink-3); }
.ps-cell .v { font-family:var(--font-num); font-variant-numeric:tabular-nums; font-size:15px;
  font-weight:700; color:var(--ink); margin-top:3px; }
.ps-sec { font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--ink-3); margin-bottom:3px; }