/* 素のCSS。PCブラウザ前提（1000px幅）。フレームワーク不使用。
   Felio Design System適用（B 九色の窓 / .felio-app）。
   トークンは assets/felio/felio-tokens.css（index.htmlで本ファイルより先に読み込み）から
   var(--...)で参照する。ここでは.felio-appスコープに無いプロジェクト固有の派生色
   （ボタンhover等）だけ追加で定義する。 */

.felio-app {
  --primary-hover: #2c5578; /* --primaryのhover用に一段暗く（felio-hp.cssのbtn-primary:hoverと同値） */
  --danger-hover: #8a3d24; /* --dangerのhover用に一段暗く */
}

* {
  box-sizing: border-box;
}

/* [hidden]属性で表示/非表示を切り替えている箇所（tag-chip-bar/frow等、display:flexを
   持つクラス）で、そのクラス自体のdisplay指定がUAスタイルシートの[hidden]{display:none}
   より詳細度で勝ってしまい非表示にならない問題を防ぐため、グローバルに効かせ直す。 */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-width: 1000px;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
}

/* ---------- ヘッダ・タブ ---------- */
/* 白地＋下線1px＋左にロゴマーク（logo-mark.svg 20px）＋アプリ名、という静かな構成。
   ロゴ画像はDOMに<img>を追加せず、h1::beforeの背景画像として差し込む
   （DOM構造は不変のため。app.js/boot.jsは無変更）。 */

.app-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px 20px;
  background: var(--surface);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.app-header h1 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-h2);
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
  color: var(--ink);
}

.app-header h1::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: url("assets/felio/logo-mark.svg") no-repeat center / contain;
}

.tabs {
  display: flex;
  gap: 4px;
  flex: 1;
}

.tabs button {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  padding: 10px 16px;
  cursor: pointer;
  font-size: var(--fs-body);
  border-radius: 0;
  font-family: var(--font-body);
}

.tabs button:hover {
  color: var(--primary);
}

.tabs button.active {
  color: var(--primary);
  font-weight: 700;
  border-bottom-color: var(--primary);
}

.logout-btn {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 7px 14px;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  font-size: var(--fs-small);
}

.logout-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

#view {
  padding: 20px;
}

/* ---------- 共通: input/selectの基本（各クラス側は幅・paddingなど個別値のみ持つ） ---------- */

input[type="text"],
input[type="number"],
input[type="date"],
input[type="password"],
select {
  font-family: var(--font-body);
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="password"]:focus,
select:focus {
  outline: none;
  border-color: var(--primary);
}

/* ---------- ログイン画面 ---------- */

body:has(> .login-view) {
  background: var(--surface-alt);
}

.login-view {
  max-width: 360px;
  margin: 100px auto;
  padding: 40px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0;
  text-align: center;
}

.login-view::before {
  content: "";
  display: block;
  width: 150px;
  aspect-ratio: 240 / 340;
  margin: 0 auto 16px;
  background: url("assets/felio/logo-felio.svg") no-repeat center / contain;
}

.login-view h1 {
  margin-top: 0;
  margin-bottom: 24px;
  font-size: var(--fs-h1);
  color: var(--ink);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

.login-form label {
  font-size: var(--fs-small);
  color: var(--muted);
}

.login-form input {
  padding: 10px;
  font-size: var(--fs-body);
  margin-top: 4px;
}

.login-form button {
  padding: 12px;
  background: var(--primary);
  color: var(--primary-ink);
  border: none;
  border-radius: 0;
  cursor: pointer;
  font-size: var(--fs-body);
  font-weight: 500;
  font-family: var(--font-body);
}

.login-form button:hover {
  background: var(--primary-hover);
}

.login-form button:disabled {
  opacity: 0.6;
  cursor: default;
}

.login-error {
  color: var(--danger);
  font-size: var(--fs-small);
  margin: 0;
}

/* ---------- トースト ---------- */

#toast-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  max-width: 700px;
  padding: 10px 14px;
  border-radius: 0;
  font-size: var(--fs-small);
  border: 1px solid;
}

.toast-detail {
  flex-basis: 100%;
  font-size: 12px;
  opacity: 0.85;
}

.toast-detail summary {
  cursor: pointer;
}

.toast-detail-body {
  margin-top: 4px;
  white-space: pre-wrap;
  word-break: break-all;
}

/* v2.6: kind='success'は「保存しました」等の完了通知（--success 緑系）。表示から2秒で
   自動的に消える（toast.js参照）。kind='info'はそれ以外の案内（--info 藍系）で、
   同じく2秒で自動的に消える。 */
.toast-success {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success);
}

.toast-info {
  background: var(--info-bg);
  border-color: var(--info);
  color: var(--info);
}

.toast-warn {
  background: var(--warning-bg);
  border-color: var(--warning);
  color: var(--warning);
}

.toast-error {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}

.toast-close {
  background: transparent;
  border: none;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: inherit;
}

/* ---------- 入居者設定タブ ---------- */

/* v2.6: タブ名・見出し改称。autosave-indicator（右上の小さな「保存しました」）を
   絶対配置するため、rootに position:relative を与える。 */
.settings-tab {
  position: relative;
}

.tab-heading {
  margin: 0 0 16px;
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--ink);
}

.autosave-indicator {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 12px;
  color: var(--success);
  background: var(--success-bg);
  border: 1px solid var(--success);
  border-radius: 0;
  padding: 3px 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.autosave-indicator.show {
  opacity: 1;
}

/* v2.6: スタッフ数・平準化許容幅ラベル横のⓘツールチップ。1px藍線・白地・角丸なし・
   最大幅280px・hover/focusで表示（Global Constraints「ツールチップ」節）。 */
.field-label-row {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.info-tooltip {
  position: relative;
  display: inline-flex;
}

.info-tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--primary);
  cursor: help;
}

.info-tooltip-bubble {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  max-width: 280px;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--primary);
  border-radius: 0;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
  white-space: normal;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.12s ease;
  z-index: 20;
  pointer-events: none;
}

.info-tooltip:hover .info-tooltip-bubble,
.info-tooltip:focus-within .info-tooltip-bubble {
  visibility: visible;
  opacity: 1;
}

.settings-section {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0;
  margin-bottom: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-small);
  color: var(--muted);
}

.field input {
  width: 100px;
  padding: 6px;
  font-family: var(--font-latin);
}

.closed-dates {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-small);
  flex-basis: 100%;
}

.closed-dates-heading {
  font-weight: 700;
  color: var(--ink);
}

.closed-dates-add input[type="text"] {
  padding: 6px;
  font-family: var(--font-latin);
  width: 220px;
}

.closed-dates-input-error {
  font-size: 12px;
  color: var(--danger);
}

/* v2.7: 常時表示のミニカレンダーを撤去し、テキスト欄クリック／アイコンクリックで
   ブラウザ標準の日付ピッカーを開く構成に変更（Global Constraints「中止日入力」節）。
   .closed-dates-input-wrapがテキスト欄＋アイコンボタン＋隠しinput[type=date]をまとめる。 */
.closed-dates-input-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* v2.7修正: カレンダーアイコン（見た目のみ・16px）。クリックは真上に重ねた
   .closed-dates-icon-input（透明なネイティブdate input）が受けるため、アイコン自体は
   非インタラクティブでよい。 */
.closed-dates-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--primary);
}

/* アイコンの位置に重ねる透明なネイティブinput[type=date]。iframe（アーティファクト）内では
   input.showPicker()の呼び出しがクロスオリジンでSecurityErrorになりブロックされるため、
   「ユーザーの実際のクリックがinput要素自身に当たる」この方式にする（ブラウザ標準の
   ピッカーがiframe内でも開く）。アイコンと同サイズで重ね、opacity:0で見た目には出さない
   （display:noneやvisibility:hiddenは「レンダリングされていない」扱いでクリック自体を
   受け付けなくなるため使えない）。 */
.closed-dates-icon-input {
  position: absolute;
  inset: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

/* showPicker()を呼び出すためだけの隠し要素（テキスト欄クリック用）。display:noneや
   visibility:hiddenだと仕様上「レンダリングされていない」扱いになりshowPicker()が
   失敗するため、opacity:0＋極小サイズ＋pointer-events:noneで見た目にだけ影響させない。 */
.closed-dates-native {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.closed-dates-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 500px;
}

.closed-dates-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 4px 8px;
  font-family: var(--font-latin);
}

.closed-dates-list button {
  border: none;
  background: transparent;
  color: var(--danger);
  cursor: pointer;
  font-size: 12px;
}

.closed-dates-add {
  display: flex;
  gap: 6px;
}

.closed-dates-add button {
  padding: 4px 10px;
  cursor: pointer;
  background: var(--surface);
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 0;
  font-size: var(--fs-small);
}

.closed-dates-add button:hover {
  background: var(--primary-soft);
}

.residents-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 16px;
}

.table-scroll {
  overflow-x: auto;
}

.residents-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 900px;
  font-size: 13px;
}

.residents-table th,
.residents-table td {
  border: 1px solid var(--line);
  padding: 6px 8px;
  text-align: center;
  white-space: nowrap;
}

.residents-table th {
  background: var(--surface-alt);
  color: var(--ink);
  font-weight: 700;
}

.residents-table input[type="text"],
.residents-table input[type="number"] {
  width: 70px;
  padding: 4px;
  font-family: var(--font-latin);
}

.residents-table select {
  padding: 4px;
}

.residents-table tr.inactive-row {
  background: var(--surface-alt);
  color: var(--muted);
}

/* I-1（最終レビュー同梱）: 退去化確認後、保存前の「退去予定」バッジ */
.leave-pending-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 0;
  font-size: 11px;
  background: var(--warning-bg);
  color: var(--warning);
}

/* 退去化／取り消しボタン（settingsTab.jsのleaveBtn/undoBtnはclassを持たない単独buttonのため、
   既存のtr.inactive-row（在籍/退去予定の切替に既にJSが付け外ししているクラス）を目印に
   在籍中の行=危険操作(退去化)／退去予定の行=通常操作(取り消し)としてCSSだけで判定する）。 */
.residents-table tr:not(.inactive-row) td > button:only-child {
  background: var(--danger);
  color: #fff;
  border: 1px solid var(--danger);
  border-radius: 0;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 12px;
}

.residents-table tr:not(.inactive-row) td > button:only-child:hover {
  background: var(--danger-hover);
}

.residents-table tr.inactive-row td > button:only-child {
  background: var(--surface);
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 0;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 12px;
}

.residents-table tr.inactive-row td > button:only-child:hover {
  background: var(--primary-soft);
}

.residents-table tr.invalid {
  background: var(--danger-bg);
}

.residents-table tr.invalid input,
.residents-table tr.invalid select {
  border-color: var(--danger);
}

/* v2.7: 行の下のNG曜日/希望曜日ソフト警告（Global Constraints「NG曜日」「希望曜日」節）。
   configWarnings()の内容が無ければ空セルのまま（padding/borderを消して行の高さを潰す）。
   複数件あれば.row-warningを縦に並べる。黄=warn(NG曜日が多い)/灰=info(希望曜日>週回数)。 */
.residents-table tr.resident-warning-row td.resident-warning-cell {
  border-top: none;
  padding: 0;
  text-align: left;
  white-space: normal;
}

.row-warning {
  display: block;
  padding: 3px 8px;
  font-size: 11px;
  line-height: 1.4;
}

.row-warning-warn {
  background: var(--warning-bg);
  color: var(--warning);
}

.row-warning-info {
  color: var(--muted);
}

/* v2.1: 固定曜日・NG曜日の曜日トグルボタン（月〜日、押すと点灯） */
.weekday-group {
  display: flex;
  gap: 2px;
  justify-content: center;
}

.weekday-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: 11px;
  line-height: 1;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  cursor: pointer;
  color: var(--muted);
  font-family: var(--font-body);
}

.weekday-btn-fixed.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-ink);
}

.weekday-btn-ng.active {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

/* v2.1: 予定タグ一覧（入居者・設定タブ上段） */
.tags-section {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-small);
}

.tags-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-row {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 4px 8px;
}

.tag-row.invalid {
  background: var(--danger-bg);
  outline: 1px solid var(--danger);
}

.tag-row input[type="color"] {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.tag-name-input {
  width: 80px;
  padding: 4px;
}

.tag-fixed-note {
  font-size: 11px;
  color: var(--muted);
}

.tag-row button {
  border: none;
  background: transparent;
  color: var(--danger);
  cursor: pointer;
  font-size: 12px;
}

.add-tag-btn {
  align-self: flex-start;
  padding: 4px 10px;
  cursor: pointer;
  background: var(--surface);
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 0;
  font-size: var(--fs-small);
}

.add-tag-btn:hover {
  background: var(--primary-soft);
}

.privacy-note {
  font-size: 11px;
  color: var(--warning);
  margin: 2px 0;
}

input.invalid {
  border-color: var(--danger) !important;
  background: var(--danger-bg);
}

.add-resident-btn {
  margin-top: 12px;
  padding: 6px 14px;
  cursor: pointer;
  background: var(--surface);
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 0;
  font-size: var(--fs-small);
}

.add-resident-btn:hover {
  background: var(--primary-soft);
}

.error-banner {
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: 0;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: var(--fs-small);
}

.error-banner ul {
  margin: 0;
  padding-left: 18px;
}

.save-bar {
  margin-top: 16px;
}

/* ---------- 週タブ ---------- */

/* v2.8: 自動保存化に伴い settingsTab.js と同じ .autosave-indicator（右上の小さな
   「保存しました」）を使う。絶対配置の基準にするため position:relative を与える
   （.settings-tab と同じ考え方）。 */
.week-tab {
  position: relative;
}

.week-tab section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 16px;
  margin-bottom: 16px;
}

.week-tab section h3 {
  margin-top: 0;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink);
}

.week-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.week-selector input[type="date"] {
  padding: 6px;
  font-family: var(--font-latin);
}

.week-selector button {
  padding: 6px 12px;
  cursor: pointer;
  border: 1px solid var(--primary);
  border-radius: 0;
  background: var(--surface);
  color: var(--primary);
  font-size: var(--fs-small);
}

.week-selector button:hover {
  background: var(--primary-soft);
}

.week-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  font-size: 12px;
}

.week-list-item {
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  cursor: pointer;
  font-size: 12px;
  font-family: var(--font-latin);
  color: var(--ink);
}

.week-list-item.active {
  background: var(--primary);
  color: var(--primary-ink);
  border-color: var(--primary);
}

.readonly-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--warning-bg);
  border: 1px solid var(--warning);
  color: var(--warning);
  border-radius: 0;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: var(--fs-small);
}

.readonly-banner button {
  padding: 4px 10px;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--warning);
  color: var(--warning);
  border-radius: 0;
}

.config-version-notice {
  background: var(--warning-bg);
  border: 1px solid var(--warning);
  color: var(--warning);
  border-radius: 0;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: var(--fs-small);
}

/* v2.8: 予定入力（旧busyEditor.js）の専用UI（予定タグチップ・予定ポップオーバー・
   終日ボタン等の入浴予定グリッド）は撤去済み。共用モーダル（openRecurringModal・
   recurringForm.js）が今も使うクラス（.event-popover-title/.popover-error/
   .popover-buttons系）だけをここに残す。 */

.event-popover-title {
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--ink);
}

.popover-error {
  color: var(--danger);
  font-size: 12px;
  margin: 4px 0 0;
}

.popover-buttons {
  flex-direction: row;
  flex-wrap: wrap;
}

/* .modal-buttons button（後で定義される「3択モーダル」の共通スタイル）より詳細度を
   上げるため、.popover-buttonsとの2クラス指定にする（単独クラスだと詳細度で負けて
   上書きされてしまうため）。 */
.popover-buttons .popover-ok-btn {
  background: var(--primary);
  color: var(--primary-ink);
  border-color: var(--primary);
}

.popover-buttons .popover-ok-btn:hover {
  background: var(--primary-hover);
}

.popover-buttons .popover-delete-btn {
  color: var(--danger);
  border-color: var(--danger);
}

.popover-buttons .popover-delete-btn:hover {
  background: var(--danger-bg);
}

/* アクションバー */

.week-action-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.week-action-bar button {
  padding: 8px 16px;
  cursor: pointer;
  border: 1px solid var(--primary);
  border-radius: 0;
  background: var(--surface);
  color: var(--primary);
  font-size: var(--fs-small);
  font-weight: 500;
}

.week-action-bar button:hover {
  background: var(--primary-soft);
}

.week-action-bar .generate-btn {
  background: var(--primary);
  color: var(--primary-ink);
  border-color: var(--primary);
}

.week-action-bar .generate-btn:hover {
  background: var(--primary-hover);
}

.integrity-result {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: var(--fs-small);
}

.integrity-result summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
}

.integrity-result ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

/* Task 3: 浴室グリッド表示切替・入居者別表並び替えのトグルボタン群
   （week-list-itemと同じ見た目のパターンを共有する） */

.view-toggle-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.view-toggle-item {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  cursor: pointer;
  font-size: 12px;
  color: var(--ink);
}

.view-toggle-item:hover {
  border-color: var(--primary);
}

.view-toggle-item.active {
  background: var(--primary);
  color: var(--primary-ink);
  border-color: var(--primary);
}

/* 浴室の識別（控えめなカテゴリ色の帯2px）: 「全浴室|浴室A|浴室B|浴室C」の4項目バー
   （weekTab.jsのgridViewBar）にだけ当てる。同じ.view-toggle-itemを使う「部屋番号順|浴室順」
   の2項目バー（sortBar）には一致させたくないが、両者は同じクラス名のみで見分けが付かない
   構造的な特徴（子要素の総数）を nth-child + nth-last-child の組み合わせで検査することで
   区別する（例: nth-child(2)かつnth-last-child(3) は「4個中2番目」を意味し、2個しかない
   sortBarのボタンには決して一致しない）。DOM・JSは無変更。 */
.view-toggle-bar .view-toggle-item:nth-child(2):nth-last-child(3) {
  border-top: 2px solid var(--cat-room); /* 浴室A: 桜鼠 */
}

.view-toggle-bar .view-toggle-item:nth-child(3):nth-last-child(2) {
  border-top: 2px solid var(--cat-access); /* 浴室B: 鴨羽 */
}

.view-toggle-bar .view-toggle-item:nth-child(4):nth-last-child(1) {
  border-top: 2px solid var(--cat-garden); /* 浴室C: 苔 */
}

/* 浴室グリッド（gridView） */

/* v2.8: 3表（浴室グリッド・入居者別表・未割当）の横幅を揃える（Global Constraints
   「週タブ」節）。.resident-table/.unassigned-tableは元々width:100%のため、こちらにも
   揃える（横スクロール自体は.table-scroll(overflow-x:auto)側の責務のまま維持する）。 */
.bath-grid {
  border-collapse: collapse;
  width: 100%;
  font-size: 11px;
  font-family: var(--font-latin);
}

.bath-grid th,
.bath-grid td {
  border: 1px solid var(--line);
  text-align: center;
  white-space: nowrap;
  padding: 3px 6px;
}

.bath-grid th {
  background: var(--surface-alt);
  color: var(--ink);
  font-weight: 700;
}

/* 浴室の識別（控えめなカテゴリ色の帯2px）: 全浴室表示時のA/B/C内訳ヘッダ行
   （gridView.jsのth.bath-label、日ごとにA/B/Cが並ぶ）。個々のthに区別用のクラスは
   付いていないため、位置が3列周期でA→B→C→A...と規則的に繰り返す構造を
   nth-child(3n+2)/nth-child(3n)/nth-child(3n+1)で判定する（先頭は「枠」列の見出しthのため
   ズレる。DOM・JSは無変更）。 */
.bath-grid th.bath-label:nth-child(3n + 2) {
  border-top: 2px solid var(--cat-room); /* A: 桜鼠 */
}

.bath-grid th.bath-label:nth-child(3n) {
  border-top: 2px solid var(--cat-access); /* B: 鴨羽 */
}

.bath-grid th.bath-label:nth-child(3n + 1) {
  border-top: 2px solid var(--cat-garden); /* C: 苔 */
}

.bath-grid th.closed,
.bath-grid td.closed {
  background: var(--surface-alt);
  color: var(--muted);
}

.bath-grid tr.banned-row td,
.bath-grid tr.banned-row th {
  background: var(--surface-alt);
}

.bath-grid td.assigned {
  position: relative;
  background: var(--success-bg);
  font-weight: 700;
  cursor: grab;
  color: var(--ink);
}

.bath-grid td.assigned.manual {
  background: var(--warning-bg);
}

.bath-grid td.assigned.warn {
  outline: 2px solid var(--danger);
  outline-offset: -2px;
}

.bath-grid .warn-badge {
  position: absolute;
  top: 0;
  right: 1px;
  font-size: 10px;
  line-height: 1;
  color: #fff;
  background: var(--danger);
  border-radius: 50%;
  width: 12px;
  height: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.bath-grid td.drop-ok {
  outline: 2px solid var(--success);
  outline-offset: -2px;
  background: var(--success-bg);
}

.bath-grid td.drop-warn {
  outline: 2px solid var(--danger);
  outline-offset: -2px;
  background: var(--danger-bg);
}

/* 移動先が占有セルのとき（入れ替え）: NG一色ではなく「入れ替えます」の専用表示にする
   （OK=success緑・NG=danger赤のどちらとも異なる色相として、グリッド内で未使用のinfoを使う）。
   他の制約違反も併発している場合はdrop-warnも重ねて赤にする（コントローラ裁定2）。 */
.bath-grid td.drop-swap {
  outline: 2px solid var(--info);
  outline-offset: -2px;
  background: var(--info-bg);
}

.bath-grid td.drop-swap.drop-warn {
  outline: 2px solid var(--danger);
  background: var(--danger-bg);
}

.bath-grid td.placeable {
  cursor: pointer;
  background: var(--info-bg);
}

.bath-grid td.placeable:hover {
  background: var(--primary-soft);
}

.bath-grid tfoot td.over {
  background: var(--danger-bg);
  color: var(--danger);
  font-weight: 700;
}

/* 入居者別表（residentTable） */

.resident-table {
  border-collapse: collapse;
  font-size: 12px;
  width: 100%;
  font-family: var(--font-latin);
}

.resident-table th,
.resident-table td {
  border: 1px solid var(--line);
  padding: 5px 8px;
  text-align: center;
  white-space: nowrap;
}

.resident-table th {
  background: var(--surface-alt);
  color: var(--ink);
  font-weight: 700;
}

.resident-table td.under-target {
  color: var(--danger);
  font-weight: 700;
}

/* 未割当リスト（unassignedList） */

.unassigned-table {
  border-collapse: collapse;
  font-size: 12px;
  width: 100%;
}

.unassigned-table th,
.unassigned-table td {
  border: 1px solid var(--line);
  padding: 5px 8px;
  text-align: center;
}

.unassigned-table th {
  background: var(--surface-alt);
  color: var(--ink);
  font-weight: 700;
}

.unassigned-empty {
  color: var(--muted);
}

.unassigned-table tr.placing {
  background: var(--info-bg);
}

.unassigned-table .place-btn {
  padding: 4px 10px;
  cursor: pointer;
  border: 1px solid var(--primary);
  border-radius: 0;
  background: var(--surface);
  color: var(--primary);
  font-size: 12px;
}

.unassigned-table .place-btn.active {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}

/* 配置モード中バナー（未割当リストの「配置」→グリッドの空セルクリック） */

.placing-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--info-bg);
  border: 1px solid var(--info);
  color: var(--info);
  border-radius: 0;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: var(--fs-small);
}

.placing-banner button {
  padding: 4px 10px;
  cursor: pointer;
  border: 1px solid var(--info);
  border-radius: 0;
  background: var(--surface);
  color: var(--info);
}

/* 3択モーダル（手直しを残して再作成 / 全部作り直す / キャンセル） */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(51, 56, 60, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.modal-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 24px;
  max-width: 400px;
}

.modal-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.modal-buttons button {
  padding: 10px;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  font-size: var(--fs-small);
  color: var(--ink);
}

.modal-buttons button:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ---------- 履歴タブ / データタブ（共通の section 見た目） ---------- */

.history-tab section,
.data-tab section,
.left-tab section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 16px;
  margin-bottom: 16px;
}

.history-tab section h3,
.data-tab section h3,
.left-tab section h3 {
  margin-top: 0;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink);
}

.history-weeks-table {
  border-collapse: collapse;
  font-size: 12px;
  width: 100%;
  font-family: var(--font-latin);
}

.history-weeks-table th,
.history-weeks-table td {
  border: 1px solid var(--line);
  padding: 5px 8px;
  text-align: center;
}

.history-weeks-table th {
  background: var(--surface-alt);
  color: var(--ink);
  font-weight: 700;
}

.history-weeks-table button {
  padding: 4px 10px;
  cursor: pointer;
  border: 1px solid var(--primary);
  border-radius: 0;
  background: var(--surface);
  color: var(--primary);
  font-size: 12px;
  font-family: var(--font-body);
}

.history-weeks-table button:hover {
  background: var(--primary-soft);
}

.history-target-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: var(--fs-small);
}

.history-target-selector select {
  padding: 6px;
}

/* ---------- 履歴のまとまり一覧（v2.8） ---------- */

.history-group-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-small);
}

.history-group-item {
  background: var(--surface-alt);
  border-radius: 0;
}

.history-group-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  cursor: pointer;
}

.history-group-header:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.history-group-period {
  flex: none;
  font-family: var(--font-latin);
  color: var(--muted-ink, var(--ink));
  white-space: nowrap;
}

.history-group-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-group-restore {
  flex: none;
  padding: 4px 10px;
  cursor: pointer;
  border: 1px solid var(--primary);
  border-radius: 0;
  background: var(--surface);
  color: var(--primary);
  font-size: 12px;
  white-space: nowrap;
  font-family: var(--font-body);
}

.history-group-restore:hover {
  background: var(--primary-soft);
}

.history-group-lines {
  list-style: none;
  margin: 0;
  padding: 4px 10px 10px 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}

.history-group-lines li {
  list-style: disc;
}

/* ---------- データタブ ---------- */

/* v2.9: 「浴室の名称」セクション。settingsTab.js/week-tabと同じ.autosave-indicator
   （右上絶対配置）を使うため、その基準にするposition:relativeを与える。 */
.data-bathnames {
  position: relative;
}

.bathnames-table {
  border-collapse: collapse;
  font-size: 13px;
}

.bathnames-table th,
.bathnames-table td {
  border: 1px solid var(--line);
  padding: 6px 10px;
  text-align: left;
}

.bathnames-table th {
  background: var(--surface-alt);
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
}

.bathnames-table input[type="text"] {
  padding: 4px;
  font-family: var(--font-latin);
}

.bathnames-table td:nth-child(2) input {
  width: 140px;
}

.bathnames-table td:nth-child(3) input {
  width: 50px;
}

.data-backup-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.data-export-btn {
  padding: 8px 16px;
  cursor: pointer;
  border: 1px solid var(--primary);
  border-radius: 0;
  background: var(--primary);
  color: var(--primary-ink);
  font-size: var(--fs-small);
}

.data-export-btn:hover {
  background: var(--primary-hover);
}

.data-import-label {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  cursor: pointer;
  border: 1px solid var(--primary);
  border-radius: 0;
  background: var(--surface);
  color: var(--primary);
  font-size: var(--fs-small);
}

.data-import-label:hover {
  background: var(--primary-soft);
}

.data-import-label input[type="file"] {
  /* 見た目はlabel側で作るため、inputそのものは視覚的に隠す（クリック領域はlabel全体） */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.data-sample button {
  padding: 8px 16px;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-small);
}

.data-sample button:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.data-help p {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--muted);
}

/* データの初期化（危険操作）: dataTab.jsのbtn.className='data-reset-btn' */
.data-reset-btn {
  padding: 8px 16px;
  cursor: pointer;
  border: 1px solid var(--danger);
  border-radius: 0;
  background: var(--danger);
  color: #fff;
  font-size: var(--fs-small);
}

.data-reset-btn:hover {
  background: var(--danger-hover);
}

/* ---------- v2.3: 繰り返し予定 C-1（カスタム設定式。予定入力ポップオーバー内・
   入居者・設定タブ共通）。採用モック: scratchpad/recurring-ui/C1.dc.html + _pop.css。
   クラス名(.frow/.flabel/.step/.radio/.cal/.calhead/.nextups/.sec/.hint/.preview/.sel)は
   モックのものをそのまま踏襲する。 ---------- */

/* 予定入力ポップオーバー「繰り返す」ボタン欄（v2.4: チェック欄→共用モーダルを開く
   ボタンに変更。openRecurringModal・recurringForm.js） */
.recurring-toggle {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.recurring-open-btn {
  padding: 6px 14px;
  cursor: pointer;
  border: 1px solid var(--primary);
  border-radius: 0;
  background: var(--surface);
  color: var(--primary);
  font-size: var(--fs-small);
  font-family: inherit;
}

.recurring-open-btn:hover {
  background: var(--primary-soft);
}

.recurring-info-text {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

/* v2.4: 「＋追加」/行内チップ/週タブの「繰り返す」が共通で開くモーダル
   （openRecurringModal・recurringForm.js。Global Constraints「登録ウィンドウ（モーダル）」
   節）。中央表示・幅560px固定（狭い画面では94vwまで縮める）で、全幅は使わない。 */
.recurring-modal-box {
  width: 560px;
  max-width: 94vw;
}

.recurring-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.recurring-modal-header .event-popover-title {
  margin: 0;
}

.recurring-modal-close {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  flex-shrink: 0;
}

.recurring-modal-close:hover {
  color: var(--danger);
}

/* recurringForm.js（C-1フォーム本体）: openRecurringModal専用の2カラムレイアウト
   （左: 間隔・単位・詳細・終了・時間/タグ/メモ、右: コンパクトなミニカレンダー＋次回3件。
   モックの.pop-inに相当）。カレンダーを間延びさせない（v2.4のUX改善の核）。 */
.recurring-form {
  display: grid;
  grid-template-columns: 1fr 230px;
  align-items: start;
  gap: 16px;
}

.recurring-form .rf-col-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.recurring-form .rf-col-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---- モック(.pop-in)相当の行・部品 ----
   v2.5フィードバック対応（「時間の開始/終了のインデントが揃っていない・縦横の線が
   凸凹」）: .frowをflexからCSS grid（64px 1fr）に統一。第1列=ラベル(.flabel。ラジオ行等
   ラベルの無い行も空文字で列だけ確保）、第2列=コントロール置き場(.fctl)。
   全行が同じ列から始まるため、時間/単位select・数値ステッパー・ラジオ行・終了条件の
   入力の左端が揃う（recurringForm.js frow()参照）。 ---- */
.recurring-form .frow {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  column-gap: 10px;
  row-gap: 6px;
}

.recurring-form .flabel {
  color: var(--muted);
  font-size: var(--fs-small);
  text-align: right;
}

.recurring-form .fctl {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

/* プレビュー文の行だけはラベル列を持たない全幅ブロック（recurringForm.js側で
   .frowではなく素のdivとして作る） */
.recurring-form .preview-row {
  margin: 0;
}

/* v2.5フィードバック対応: select/input/ステッパー/曜日ボタンの高さを30pxに統一 */
.recurring-form .sel {
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  padding: 4px 8px;
  font-size: var(--fs-body);
  color: var(--ink);
  font-family: inherit;
  box-sizing: border-box;
}

.recurring-form .sel:disabled {
  color: var(--muted);
  background: var(--surface-alt);
}

/* 時間行の開始/終了selectは同幅（88px）で揃える */
.recurring-form .rf-time-sel {
  width: 88px;
}

/* 日付欄（読み取り専用の表示。type="date"のネイティブ入力をやめ、右のミニカレンダーの
   日クリック・矢印キーで変更する表示欄に変更。「日付欄をクリックすると標準カレンダーが
   出て2つになる」への対応） */
.recurring-form .anchor-display {
  display: inline-flex;
  align-items: center;
  cursor: default;
  user-select: none;
}

.recurring-form .anchor-display:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.recurring-form .recurring-memo-input {
  flex: 1;
  min-width: 120px;
}

.recurring-form .hint {
  color: var(--muted);
  font-size: 11px;
}

.recurring-form .sec {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.06em;
}

/* 間隔ステッパー（入力＋上下ボタン一式で他の.sel/選択肢と同じ高さ30pxになるよう、
   入力=30px・上下ボタンは15px×2段で合計30pxにする） */
.recurring-form .step {
  display: inline-flex;
  align-items: center;
  height: 30px;
}

.recurring-form .step input {
  width: 44px;
  height: 30px;
  box-sizing: border-box;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 4px;
  font-size: var(--fs-body);
  font-family: inherit;
}

.recurring-form .step .ud {
  display: flex;
  flex-direction: column;
  margin-left: 2px;
  height: 30px;
}

.recurring-form .step .ud button {
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  width: 18px;
  height: 15px;
  font-size: 8px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  box-sizing: border-box;
}

/* week単位: 曜日7ボタン（高さ30pxに統一。正方形寄りに幅も30pxへ） */
.recurring-form .rf-weekday-row {
  display: flex;
  gap: 2px;
}

.recurring-form .rf-weekday-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 11px;
  line-height: 1;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  cursor: pointer;
  color: var(--muted);
  font-family: var(--font-body);
}

.recurring-form .rf-weekday-btn.on {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-ink);
}

/* month単位: 「日付で固定」「曜日で固定」ラジオ */
.recurring-form .month-detail,
.recurring-form .end-detail {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.recurring-form .radio {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 4px;
  gap: 8px;
  font-size: var(--fs-body);
  cursor: pointer;
}

/* v2.5フィードバック対応でラジオ行を空ラベルのfrow行（左に64px+10pxの余白）でくるんだ
   ぶん、行の実幅が狭くなった（560px固定モーダルの限られた横幅の中で）。ラベル文字
   （「終了日:」等）がその狭い幅に収まりきらず、日本語は空白が無いため1文字ずつ縦に
   割れて表示される不具合が出たため、ラベルは折り返さず(nowrap)、収まらない分は
   .radio自体のflex-wrapで日付/数値入力側を次の行に送る（文字の途中折り返しより
   自然に読める）。 */
.recurring-form .radio .lbl {
  white-space: nowrap;
  flex-shrink: 0;
}

.recurring-form .radio .dot {
  width: 16px;
  height: 16px;
  border: 1px solid var(--muted);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.recurring-form .radio.on .dot {
  border-color: var(--primary);
}

.recurring-form .radio.on .dot::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
}

.recurring-form .radio.off .lbl {
  color: var(--muted);
}

/* ミニカレンダー */
.recurring-form .calhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 2px 4px;
}

.recurring-form .calhead b {
  font-size: 13px;
}

/* v2.5フィードバック対応: 「前月/次月ボタンが中身のない白いボタンに見える」への対応。
   テキストの‹›をやめ、inline SVGシェブロン（16px・stroke currentColor）に差し替え、
   ホバーでprimary-soft背景にする（recurringForm.js createChevronIcon）。 */
.recurring-form .calhead button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  width: 24px;
  height: 24px;
  padding: 0;
  cursor: pointer;
}

.recurring-form .calhead button:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}

.recurring-form .calhead button .rf-icon {
  width: 16px;
  height: 16px;
}

/* v2.4: カレンダーを1セル30px・幅約230pxに固定（コンパクト化。「カレンダーが間延びして
   扱いづらい」というフィードバックへの対応。Global Constraints「登録ウィンドウ（モーダル）」
   節）。table-layout:fixedでtd幅の指定を効かせる。 */
.recurring-form .cal {
  border-collapse: collapse;
  table-layout: fixed;
  width: 210px;
}

.recurring-form .cal th {
  width: 30px;
  font-size: 10px;
  color: var(--muted);
  font-weight: 500;
  padding: 2px 0;
}

.recurring-form .cal td {
  width: 30px;
  height: 30px;
  text-align: center;
  font-size: 11px;
  padding: 0;
  color: var(--ink);
  cursor: pointer;
}

.recurring-form .cal td.dim {
  color: var(--line);
  cursor: default;
}

.recurring-form .cal td.wcol {
  background: var(--primary-soft);
}

.recurring-form .cal td.hit {
  background: var(--primary);
  color: var(--primary-ink);
  font-weight: 700;
}

/* v2.5フィードバック対応: 日付欄が読み取り専用表示になったため、選択日はミニカレンダーの
   日をクリックして変更する。.pick（危険色の枠線）から.selected（藍の2px枠線＋太字）に
   改称し、発生日(.hit＝primary塗り)とは装飾の種類（枠線 vs 塗り）で区別する。
   両方に該当する場合（発生日＝選択日）はhit側の塗りの上にselected側の枠線が乗るよう、
   .hit.selectedだけ枠線色をprimary-ink（白）にして塗りに埋もれず視認できるようにする。
   レビュー指摘（2回目）: outline 2px + outline-offset:-2pxは、.calがborder-collapse:collapse
   のテーブルであるため実機で正しく描画されない（セルの共有ボーダーモデルにoutlineの
   ペイントが埋もれて見えない）。box-shadow: inset ...（内側に描く塗り足し込み）に変更し、
   border-collapseの影響を受けずに常に上から見える2px枠にする。 */
.recurring-form .cal td.selected {
  box-shadow: inset 0 0 0 2px var(--primary);
  font-weight: 700;
}

.recurring-form .cal td.hit.selected {
  box-shadow: inset 0 0 0 2px var(--primary-ink);
}

/* 「次回」チップ */
.recurring-form .nextups {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--fs-small);
}

.recurring-form .nextups .d {
  border: 1px solid var(--line);
  background: var(--surface-alt);
  padding: 2px 8px;
  font-family: "Manrope", inherit;
}

/* プレビュー文 */
.recurring-form .preview {
  border: 1px solid var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  padding: 6px 12px;
  font-size: var(--fs-small);
}

/* v2.5 P-2「チェック展開式」: 「繰り返す」チェック（採用モックscratchpad/recurring-ui/
   P2.dc.html + _modal.css の .chk/.chk .box/.chk.on .box をそのまま踏襲） */
.recurring-form .chk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-body);
  cursor: pointer;
  user-select: none;
}

.recurring-form .chk .box {
  width: 16px;
  height: 16px;
  border: 1px solid var(--muted);
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--primary-ink);
  font-size: 11px;
  line-height: 1;
}

.recurring-form .chk.on .box {
  background: var(--primary);
  border-color: var(--primary);
}

/* 「繰り返す」ON時に展開するC-1設定（間隔・単位・詳細・終了）。左に区切り線を入れて
   チェック直下からインデントする（採用モックの .sub） */
.recurring-form .sub {
  border-left: 2px solid var(--primary-soft);
  padding-left: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.recurring-form .sub[hidden] {
  display: none;
}

/* v2.4: 設定タブ・入居者行内の「繰り返し予定」列（旧: 画面下部の独立セクション。
   Global Constraints「繰り返し予定の表示（設定タブ）」節。一覧性向上のため行内表示に変更） */
.recurring-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  min-width: 160px;
}

.recurring-chip-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
}

.recurring-chip {
  display: block;
  width: 100%;
  text-align: left;
  padding: 3px 8px;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface-alt);
  color: var(--ink);
  font-size: 11px;
  font-family: inherit;
  white-space: normal;
  word-break: break-all;
}

.recurring-chip:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}

/* v2.5: 「予定」列は単一日(once)と繰り返し(recurring)が混在するため、繰り返し側は
   枠線を強調して区別する（採用モックP2.dc.html .chipx.recを踏襲）。 */
.recurring-chip-recurring {
  border-color: var(--primary);
}

/* v2.5フィードバック対応: 「繰り返しアイコンが小さすぎて何かわからない」への対応。
   旧「↻ 」の1文字プレフィックスをやめ、16pxのSVGアイコン（循環矢印）＋文字ラベル
   「繰り返し」を持つ小さなセグメント（settingsTab.js createRepeatIcon）に置き換える。 */
.recurring-chip-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  padding: 1px 6px 1px 4px;
  margin: 0 6px 2px 0;
  font-size: 10px;
  line-height: 1.5;
  vertical-align: middle;
}

.recurring-chip-badge .rf-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.recurring-chip-text {
  vertical-align: middle;
}

/* v2.8: 除外日（「休みにする日」）チップ表示。小さく灰色でチップ本文の下に添える
   （Global Constraints「除外日」節。settingsTab.js exceptionsLabel()参照）。 */
.recurring-chip-exceptions {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: var(--muted);
}

/* 単一日(once)側は.recurring-chipの既定枠線(var(--line))のままでよい（採用モック
   P2.dc.htmlの.chipx＝無印も同じ見た目）。settingsTab.jsが付与するクラスに対応する
   定義として明示しておく（現状の見た目は変えない）。 */
.recurring-chip-once {
  border-color: var(--line);
}

.recurring-chip-empty {
  color: var(--muted);
  font-size: 11px;
}

.recurring-chip-add {
  padding: 2px 10px;
  cursor: pointer;
  border: 1px solid var(--primary);
  border-radius: 0;
  background: var(--surface);
  color: var(--primary);
  font-size: 11px;
  font-family: inherit;
}

.recurring-chip-add:hover {
  background: var(--primary-soft);
}

.recurring-chip-add:disabled {
  cursor: default;
  border-color: var(--line);
  color: var(--muted);
  background: var(--surface-alt);
}

/* v2.4: 週回数(2/3)・介助者数(1/2)の2択トグルボタン（曜日ボタンと同じ見た目。aria-pressed） */
.count-toggle {
  display: flex;
  gap: 2px;
  justify-content: center;
}

.count-toggle-btn {
  min-width: 26px;
  height: 22px;
  padding: 0 4px;
  font-size: 11px;
  line-height: 1;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  cursor: pointer;
  color: var(--muted);
  font-family: var(--font-body);
}

.count-toggle-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-ink);
}