/*
 * pages.css（「今日」画面と「施設」管理の画面専用）
 *   接頭辞: .today-（today.php） / .fac-（facilities.php・facility_edit.php） / .unit-（unit_edit.php）
 *   base.css の部品（.btn .card .list .fc-N など）の見た目は上書きしない。違う見た目が必要なときは、接頭辞付きのクラスを足す。
 *   色・余白は base.css の CSS 変数だけを使う（16進数を直書きしない）。
 */

/* ================= 今日（today.php） ================= */

/* 日付（タイトルの下）。数字の桁をそろえる */
.today-date { font-variant-numeric: tabular-nums; }

/* 件数カード3枚。375px の画面でも3列のまま（UI_SPEC 6-2） */
.today-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-8);
}
/* 清掃管理が ON のときは4枚。スマホでは2×2（4列にするとラベルが読めない幅になるため） */
.today-counts.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* カード全体がページ内リンク。a.card は右端に「›」が付いて幅が狭くなるため、同じ見た目を自前で作る */
.today-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  min-height: 48px;
  padding: var(--sp-3) var(--sp-1);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  color: var(--c-text);
  text-align: center;
  text-decoration: none;
  transition: box-shadow var(--dur), border-color var(--dur);
}
.today-count:hover { color: var(--c-text); border-color: var(--c-line-strong); box-shadow: var(--sh-md); }

.today-count-icon { width: 24px; height: 24px; }
.today-count-checkin .today-count-icon { color: var(--c-accent); }
.today-count-checkout .today-count-icon { color: var(--c-brown); }
.today-count-staying .today-count-icon { color: var(--c-blue-text); }
.today-count-cleaning .today-count-icon { color: var(--c-green-text); }

.today-count-num {
  font-family: var(--font-round);
  font-size: var(--fs-2xl);
  font-weight: 700;
  font-synthesis: none;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  color: var(--c-brown);
}
.today-count-num.is-zero { color: var(--c-text-sub); }
.today-count-unit { margin-left: 2px; font-size: var(--fs-sm); }

/* ラベルは「チェックイン」「チェックアウト」。ふだんは1行に収め、文字を大きくしたときだけ折り返す */
.today-count-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
  white-space: normal;
  line-break: strict;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* 狭い画面（iPhone SE など）では左右の余白を詰めて、「チェックアウト」の7文字が1行に入るようにする */
@media (max-width: 400px) {
  .today-count { padding-left: 2px; padding-right: 2px; }
}
/* 360px より狭い画面では3列に入りきらないので2列にする（文字は 14px より小さくしない） */
@media (max-width: 359px) {
  .today-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 一覧。スマホは縦に1列 */
.today-lists { display: grid; gap: var(--sp-8); }
.today-section { min-width: 0; }

/* 清掃がまだの部屋（清掃管理が ON の施設だけ） */
.today-clean-list { display: grid; gap: var(--sp-3); }
.today-clean { display: flex; flex-direction: column; gap: var(--sp-3); }
.today-clean-place { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0; }
.today-clean-unit { font-size: var(--fs-md); font-weight: 600; }
.today-clean-facility { font-size: var(--fs-sm); color: var(--c-text-sub); }
.today-clean-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-text-sub);
  font-variant-numeric: tabular-nums;
}
.today-clean-meta .icon { width: 16px; height: 16px; }
.today-clean-body { display: flex; flex-direction: column; gap: 6px; }

@media (min-width: 600px) {
  .today-counts.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .today-counts { grid-template-columns: repeat(3, minmax(0, 240px)); }
  .today-counts.is-four { grid-template-columns: repeat(4, minmax(0, 240px)); }
  .today-count { padding: var(--sp-4); }
  /* PC: チェックインとチェックアウトを2列、宿泊中・清掃はその下に全幅（UI_SPEC 6-2） */
  .today-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--sp-8) var(--sp-6); }
  .today-section-staying, .today-section-cleaning { grid-column: 1 / -1; }
  /* 全幅だとボタンが長くなりすぎるので、清掃の一覧は2列にする */
  .today-clean-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--sp-3) var(--sp-6); }
}

/* ================= 施設一覧（facilities.php） ================= */

/* 「施設を追加する」: スマホは幅いっぱい、600px〜は文字の幅 */
.fac-add { margin: 0 0 var(--sp-6); }
.fac-add-btn { width: 100%; }

/* 施設カードの並び。PC は2列（UI_SPEC 6-5） */
.fac-grid { display: grid; gap: var(--sp-4); }
.fac-group-title { margin: var(--sp-8) 0 var(--sp-3); }

.fac-card { min-width: 0; }
/* 使用停止中の施設: 背景を落ち着いた色に（opacity は使わない。UI_SPEC 8章-17） */
.fac-card.is-paused { background: var(--c-muted); }
.fac-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.fac-card-name { flex: 1 1 8em; min-width: 0; }
/* 「編集する」は見出しの右に控えめに。小さめでも押せる高さは 44px 以上を保つ。
   狭い画面でも施設名が1行に収まるよう、文字は 14px・左右の余白は 10px にして幅を抑える */
.fac-card-edit { flex: none; margin-left: auto; min-height: 44px; padding-left: 10px; padding-right: 10px; font-size: var(--fs-sm); }
.fac-card-edit .icon { width: 18px; height: 18px; }

/* 「お試しデータ」の施設につけるバッジ（base.css に同じ色のバッジが無いので、ここで控えめに定義） */
.fac-demo-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-4); }

/* 住所・電話 */
.fac-info { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-sub); }
.fac-info li { display: flex; align-items: flex-start; gap: var(--sp-2); }
.fac-info .icon { width: 16px; height: 16px; margin-top: 0.25em; }

.fac-unit-name { display: block; font-weight: 600; }
.fac-units-empty { margin-bottom: var(--sp-2); }
/* 部屋・棟の一覧の最後の行が「追加する」。並びの続きなので、矢印は出さずに操作の色にする */
a.fac-unit-add { padding-right: var(--sp-4); color: var(--c-accent); font-weight: 600; }
a.fac-unit-add::after { content: none; }
.fac-unit-add > .icon { color: var(--c-accent); }
.fac-unit-add:hover { color: var(--c-accent-hover); }
.fac-unit-add:hover > .icon { color: var(--c-accent-hover); }

/* 施設0件の案内: 施設 → 部屋・棟 → 予約 の順番 */
.fac-steps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: var(--sp-2) 0;
  text-align: left;
}
.fac-step { display: flex; align-items: center; gap: var(--sp-3); font-weight: 600; color: var(--c-brown); }
.fac-step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: var(--c-sand);
  color: var(--c-brown);
  font-family: var(--font-round);
  font-weight: 700;
  font-synthesis: none;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 600px) {
  .fac-add-btn { width: auto; }
}
@media (min-width: 900px) {
  .fac-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); align-items: start; }
}

/* ================= 施設・部屋の登録・編集（facility_edit.php / unit_edit.php） ================= */

.fac-note, .unit-note { margin-bottom: var(--sp-4); }

/* この施設で使う追加機能（施設の編集だけ。保存ボタンは施設情報と共通） */
.fac-features { margin: var(--sp-6) 0 var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--c-line); }
/* legend は既定だと枠線の上に重なって表示されるので、float で普通の見出しとして並べる */
.fac-features-title { float: left; width: 100%; margin-top: 0; }
.fac-feature { align-items: flex-start; padding: var(--sp-2) 0; }
.fac-feature input[type="checkbox"] { margin-top: 2px; }
.fac-feature-text { flex: 1; min-width: 0; }
.fac-feature-name { display: block; font-weight: 600; }
.fac-feature-help { display: block; font-size: var(--fs-sm); color: var(--c-text-sub); }
/* 注意事項の本文は「注意事項・電子サイン」をオンにしたときだけ出す。
   :has が使えないブラウザでは常に表示されるだけで、保存の動きは変わらない */
.fac-features:has(#feature_house_rules:not(:checked)) .fac-feature-rules { display: none; }
/* 入れた文が長すぎるなど、直してもらう必要があるときは、オフでも本文の欄を出す */
.fac-features:has(#house_rules_text[aria-invalid="true"]) .fac-feature-rules { display: block; }
.fac-feature-rules { margin-top: var(--sp-4); }
.fac-rules-input { min-height: 160px; }
.fac-units-field { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--c-line); }
.fac-cancel, .unit-cancel { margin-top: var(--sp-3); text-align: center; }

/* 使用停止・再開（フォームの下に離して置き、保存ボタンと押し間違えないようにする） */
.fac-active, .unit-active { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-8); }

/* どの施設の部屋・棟かを、画面の上に色の丸 + 施設名で出す */
.unit-facility { display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; color: var(--c-brown); }
.unit-sort-input { max-width: 160px; }

/* 今日「清掃おわり」にした部屋（押し間違いを戻す） */
.today-clean-done { margin-top: var(--sp-3); }
.today-clean-undo { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-1) 0; border-bottom: 1px solid var(--c-line); }
.today-clean-undo:last-child { border-bottom: 0; }
.today-clean-undo-name { font-size: var(--fs-sm); color: var(--c-text-sub); }