/*
 * reservation.css（予約の追加・編集・詳細。クラスは .rsv- だけ）
 *   base.css の部品（.btn .card .field .chip .badge …）は上書きしない。
 *   デザイン仕様: docs/UI_SPEC.md 5-13（重複警告）/ 6-3（予約追加）/ 6-4（予約詳細）
 */

/* ================= 予約フォーム ================= */

/* スマホは地のまま。PC は白いカードの中に置く（UI_SPEC 6-3） */
@media (min-width: 900px) {
  .rsv-form {
    padding: var(--sp-8);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
  }
}

/* 日程（重複警告の「日付や部屋・棟を変える」の移動先。画面の上に隠れないよう余白をとる） */
.rsv-dates { scroll-margin-top: calc(var(--header-h) + var(--safe-top) + var(--sp-4)); }
.rsv-dates:focus { outline: none; } /* リンクで移動したときの受け皿。操作する部品ではない */

/* 狭い画面では日付欄が2列で窮屈になり、日付の文字とカレンダーのアイコンが近づく。
   左右の余白を詰めてアイコンを端に寄せ、文字との間を広げる */
.rsv-dates input[type="date"].input::-webkit-calendar-picker-indicator { margin-left: var(--sp-3); }
@media (max-width: 400px) {
  .rsv-dates input[type="date"].input { padding-right: 8px; padding-left: 10px; }
}

/* 日付の下の「9月12日(土)〜9月14日(月)」（泊数はすぐ下のステッパーに出す） */
.rsv-period {
  min-height: 1.6em;
  margin: calc(var(--sp-3) * -1) 0 var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-text-sub);
}
.rsv-period.is-invalid { color: var(--c-danger); font-weight: 600; }

/* 泊数のステッパー（送信はしない補助の入力。JS がないと動かせないので隠す） */
html:not(.js) .rsv-nights { display: none; }

/* 部屋・棟: 施設ごとの見出し + チップ */
.rsv-units { scroll-margin-top: calc(var(--header-h) + var(--safe-top) + var(--sp-4)); }
.rsv-units:focus { outline: none; } /* リンクで移動したときの受け皿。操作する部品ではない */
.rsv-unit-group + .rsv-unit-group { margin-top: var(--sp-4); }
.rsv-facility {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  font-weight: 600;
  color: var(--c-brown);
}

/* やさしい注意（定員・使用停止中・空き状況の取得失敗）。保存は止めない */
.rsv-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--c-warn-soft);
  color: var(--c-warn-text);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.6;
}
.rsv-note .icon { width: 20px; height: 20px; }
.rsv-note[hidden] { display: none; }
.rsv-units > .rsv-note:first-of-type { margin: 0 0 var(--sp-3); }

.rsv-more { margin-bottom: var(--sp-6); }
.rsv-submit { display: flex; flex-direction: column; gap: var(--sp-2); }

/* ================= 重複警告（partials/conflicts.php） ================= */
.rsv-conflict {
  margin-bottom: var(--sp-5);
  padding: var(--sp-4);
  background: var(--c-danger-soft);
  border: 1.5px solid var(--c-danger);
  border-radius: var(--r-lg);
}
/* 表示したときに JS がフォーカスを移すだけの箱。赤い枠自体が目立つのでフォーカスの枠は出さない */
.rsv-conflict:focus { outline: none; }
.rsv-conflict-title {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--c-danger);
}
.rsv-conflict-title .icon { margin-top: 1px; }
.rsv-conflict-target { margin-top: var(--sp-1); font-weight: 600; }
.rsv-conflict-list { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-3) 0; }
.rsv-conflict-item {
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.rsv-conflict-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-weight: 600; }
.rsv-conflict-meta { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--c-text-sub); }
.rsv-conflict-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-sm);
  font-weight: 600;
}
.rsv-conflict-guide { font-weight: 700; }
/* 勧める操作（主ボタン）→ 補足 → 「それでも登録する」（副ボタン）の順に置く */
.rsv-conflict-fix { margin-top: var(--sp-3); }
.rsv-conflict-help { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-sm); }

/* ================= 予約詳細 ================= */
.rsv-flash { margin-bottom: var(--sp-4); }

/* スマホ: 1列 ／ PC: 左 60%（名前・日程・操作）＋ 右 40%（詳細・状態を直す・キャンセル・削除） */
.rsv-detail { display: flex; flex-direction: column; gap: var(--sp-4); }
.rsv-col { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
@media (min-width: 900px) {
  .rsv-detail {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--sp-6);
    align-items: start;
  }
}

.rsv-name { font-size: var(--fs-xl); line-height: 1.35; }
.rsv-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-2); }
.rsv-place { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); font-weight: 600; }
.rsv-subnote {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--c-text-sub);
}
.rsv-subnote .icon { width: 16px; height: 16px; }

/* 日程ブロック: チェックイン ／ ◯泊 ／ チェックアウト */
.rsv-stay {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding: var(--sp-3);
  background: var(--c-surface-2);
  border-radius: var(--r-md);
}
.rsv-stay-out { text-align: right; }
.rsv-stay-label { display: block; font-size: var(--fs-sm); color: var(--c-text-sub); }
.rsv-stay-date, .rsv-stay-nights {
  font-family: var(--font-round);
  font-weight: 700;
  font-synthesis: none;
  font-variant-numeric: tabular-nums;
  color: var(--c-brown);
}
.rsv-stay-date { display: block; font-size: var(--fs-base); }
.rsv-stay-nights {
  padding: 2px var(--sp-3);
  background: var(--c-surface);
  border-radius: var(--r-full);
}

.rsv-guests { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); }
.rsv-guests .icon { color: var(--c-text-sub); }
.rsv-guests strong { font-family: var(--font-round); font-synthesis: none; font-size: var(--fs-md); color: var(--c-brown); }

.rsv-actions { display: flex; flex-direction: column; gap: var(--sp-3); }

/* 詳細の情報（スマホ: ラベルが上・値が下 ／ 600px〜: 横に並べる） */
.rsv-info { margin: 0; }
.rsv-info-row { padding: var(--sp-3) 0; }
.rsv-info-row:first-child { padding-top: 0; }
.rsv-info-row:last-child { padding-bottom: 0; }
.rsv-info-row + .rsv-info-row { border-top: 1px solid var(--c-line); }
.rsv-info dt { font-size: var(--fs-sm); color: var(--c-text-sub); }
.rsv-info dd { margin: 0; }
.rsv-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-2); }
.rsv-contact .btn { margin-left: calc(var(--sp-3) * -1); }
.rsv-contact > span:first-child { margin-right: var(--sp-4); }
.rsv-memo { white-space: normal; }
@media (min-width: 600px) and (max-width: 899px) {
  .rsv-info-row { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: var(--sp-3); align-items: baseline; }
  .rsv-contact .btn { margin-left: 0; }
}

/* 削除は一番下に目立たなく */
.rsv-delete { margin-top: var(--sp-4); padding-top: var(--sp-2); border-top: 1px solid var(--c-line); }
.rsv-delete .subhead { margin-top: var(--sp-3); }
.rsv-delete-help { margin-bottom: var(--sp-1); font-size: var(--fs-sm); color: var(--c-text-sub); }
.rsv-delete .btn { margin-left: calc(var(--sp-3) * -1); }