/* v6.115.0: 現場シフト表 一覧ページ（site-shifts-list.html）専用 CSS
   - コントロールバーのピル部品は site-shifts.css の並列定義（設計知見 #92、宣言ブロック一括コピー流儀 v6.47.4）
   - テーブル・バッジは確定済みデザインサンプル docs/samples/site_shifts_list_final.html（G-2 Gmailラベル風）に忠実
   - 他画面波及なし（.ssl- プレフィックスでスコープ） */

.ssl-wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 16px 24px 40px;
}

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

/* 拠点プルダウン: site-shifts.css .ss-dept-pill の宣言ブロック一括コピー（#92） */
.ssl-dept-pill {
  display: flex; align-items: center; gap: 6px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  box-shadow: var(--shadow-1); border-radius: 9999px;
  padding: 0 14px; height: 44px; flex: none; width: 180px;
  overflow: hidden;
}
.ssl-dept-pill select {
  border: none; background: transparent; color: var(--color-text);
  font-size: 14px; font-weight: 500; cursor: pointer; outline: none;
  padding: 0; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: inherit;
}

/* 前月/翌月ボタン: site-shifts.css #btnPrevMonth/#btnNextMonth（90px・SVG flex-shrink:0）の並列定義 */
.ssl-nav-btn {
  width: 90px !important;
  gap: 6px;
  font-weight: 500;
  box-sizing: border-box;
}
.ssl-nav-btn svg {
  flex-shrink: 0;
}

/* 年月ピル: site-shifts.css .pill-wrap / .date-range-pill / .date-range-text の宣言ブロック一括コピー（#92） */
.pill-wrap {
  height: 44px;
  border-radius: 9999px;
  padding: 0 16px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, rgba(60,64,67,.14));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-1);
}
.pill-wrap.date-range-pill {
  height: 44px;
  padding: 0 18px;
  position: relative;
}
.date-range-text {
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ===== 一覧テーブル（サンプル site_shifts_list_final.html 準拠） ===== */
.ssl-list-wrap {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  overflow-x: auto; /* モバイル幅は横スクロール許容（既存ページと同方針） */
}
.ssl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.ssl-table thead th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  background: #fafbfc;
  white-space: nowrap;
}
.ssl-table tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid #f1f3f5;
  vertical-align: middle;
  white-space: nowrap;
}
.ssl-table tbody tr:last-child td { border-bottom: none; }
.ssl-table tbody tr.ssl-row { cursor: pointer; transition: background .12s; }
.ssl-table tbody tr.ssl-row:hover { background: #f6f9ff; }
.ssl-table .th-num, .ssl-table .td-num { text-align: center; width: 90px; }
.ssl-kyoten { font-size: 12px; color: #6b7280; }
.ssl-site-name { font-weight: 600; }
.ssl-empty {
  text-align: center;
  color: #6b7280;
  padding: 40px 16px !important;
}

/* G-2バッジ: Gmailラベル風（淡背景・色文字・枠なし、サンプル確定値） */
.ssl-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 8px;
}
.ssl-badge.created       { background: #e6f4ea; color: #188038; }
.ssl-badge.not-created   { background: #f1f3f4; color: #5f6368; }
.ssl-badge.confirmed     { background: #e8f0fe; color: #1a73e8; }
.ssl-badge.not-confirmed { background: #fef7e0; color: #b06000; }

/* 未配置数: 1以上 = 赤太字 #d93025 15px / 0 = グレー（サンプル確定値） */
.ssl-unassigned { font-weight: 700; color: #d93025; font-size: 15px; }
.ssl-unassigned.zero { color: #c0c5cc; font-weight: 400; font-size: 14px; }
.ssl-dash { color: #c0c5cc; }
.ssl-arrow-cell { width: 30px; color: #c0c5cc; font-size: 13px; text-align: right; padding-right: 20px !important; }

/* ============================================================
   v6.122.0: テスト用一括処理モーダル（#sslBulkTestModal）
   site-shifts.css の .time-edit-modal 系 + dialog 中央固定の並列定義（設計知見 #92・
   宣言ブロック一括コピーの流儀 v6.47.4）。一覧ページは site-shifts.css を読まないため
   必要ブロックを本ファイルに持つ。カレンダー（.bt-modal-grid / .btcal-*）は共有
   bt-calendar.css を HTML 側で読み込み。
   ============================================================ */
.time-edit-modal {
  border: none;
  border-radius: 8px;
  padding: 0;
  width: 360px;
  background: #fff;
}
.time-edit-modal::backdrop { background: rgba(0, 0, 0, 0.4); }
/* テスト処理モーダルだけカレンダー2列が収まる幅（site-shifts.css #ssBulkTestModal と同値） */
#sslBulkTestModal { width: min(720px, 92vw); }
#sslBulkTestModal .time-edit-modal__content { max-width: none; box-sizing: border-box; width: 100%; }
.time-edit-modal__content { padding: 22px; }
.time-edit-modal__content h3 { margin: 0 0 12px 0; font-size: 16px; }
.time-edit-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.time-edit-modal__actions button {
  padding: 8px 16px;
  border-radius: 9999px;
  cursor: pointer;
  border: 1px solid rgba(60,64,67,.2);
  background: #fff;
  font-family: inherit;
  font-size: 13px;
}
/* dialog 中央固定（site-shifts.css v6.44.1 ルールの並列定義。スコープ=本ページのみ） */
dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}