/*
 * タナカ内装 コミュニティスペース予約システム ベーススタイル
 * 本格的な画面別スタイルは後フェーズで追加する。ここでは共通土台のみ。
 */

:root {
  --reserve-color-accent: #513739;
  --reserve-color-text: #444;
  --reserve-color-bg: #F4F1EC;
  --reserve-color-sub: #908781;
  --reserve-color-border: #E8E6E2;
  --reserve-font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

/* ── リセット(最小限) ───────────────────────────── */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--reserve-font);
  color: var(--reserve-color-text);
  background-color: var(--reserve-color-bg);
  line-height: 1.7;
  font-size: 16px;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--reserve-color-accent);
}

ul,
ol {
  padding-left: 1.5em;
}

/* ── レイアウト ────────────────────────────────── */
.reserve-header {
  background-color: #fff;
  border-bottom: 1px solid var(--reserve-color-border);
  padding: 16px 20px;
}

.reserve-header__inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.reserve-header__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--reserve-color-accent);
}

.reserve-header__user {
  margin: 0;
  font-size: 0.85rem;
  color: var(--reserve-color-sub);
}

.reserve-header__user a {
  margin-left: 8px;
}

.reserve-main {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}

.reserve-header__nav {
  background-color: var(--reserve-color-bg);
  border-bottom: 1px solid var(--reserve-color-border);
}

.reserve-header__nav-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 8px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.reserve-header__nav-inner a {
  display: inline-block;
  padding: 4px 2px;
  font-size: 0.85rem;
  white-space: nowrap;
  text-decoration: none;
}

.reserve-header__nav-inner a:hover {
  text-decoration: underline;
}

.reserve-header__nav-inner a.is-current {
  font-weight: bold;
  border-bottom: 2px solid var(--reserve-color-accent);
}

.reserve-footer {
  text-align: center;
  padding: 20px;
  color: var(--reserve-color-sub);
  font-size: 0.8rem;
}

.reserve-footer__copy {
  margin: 0;
}

.reserve-demo-banner {
  background-color: var(--reserve-color-accent);
  color: #fff;
  text-align: center;
  padding: 6px 10px;
  font-size: 0.85rem;
}

/* ── ボタン ────────────────────────────────────── */
/* タップターゲット44px確保のため min-height を追加し、inline-flexで縦横中央寄せにする。 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  min-height: 44px;
  border-radius: 4px;
  border: 1px solid var(--reserve-color-accent);
  background-color: var(--reserve-color-accent);
  color: #fff;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  opacity: 0.85;
}

.btn--sub {
  background-color: #fff;
  color: var(--reserve-color-accent);
}

.btn--danger {
  background-color: #a94442;
  border-color: #a94442;
}

/* ── フォーム ───────────────────────────────────── */
.form-row {
  margin-bottom: 16px;
}

.form-row label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
}

.form-row input[type="text"],
.form-row input[type="tel"],
.form-row input[type="email"],
.form-row input[type="password"],
.form-row input[type="number"],
.form-row input[type="date"],
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--reserve-color-border);
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
  background-color: #fff;
}

/* iOS Safari等でネイティブ装飾が独自の見た目になるため、appearanceを解除して
   他のinputと統一する(タップターゲット確保のためmin-heightも指定)。 */
.form-row input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
}

.form-row .required {
  color: #a94442;
  font-size: 0.8rem;
  margin-left: 4px;
}

.form-error {
  color: #a94442;
  font-size: 0.85rem;
  margin-top: 4px;
}

.form-note {
  color: var(--reserve-color-sub);
  font-size: 0.85rem;
}

/* ── テーブル ───────────────────────────────────── */
table.reserve-table {
  width: 100%;
  border-collapse: collapse;
}

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

table.reserve-table th {
  background-color: var(--reserve-color-bg);
}

/* ── アラート ───────────────────────────────────── */
.alert {
  padding: 12px 16px;
  border-radius: 4px;
  margin-bottom: 16px;
}

.alert--error {
  background-color: #fbeaea;
  color: #a94442;
  border: 1px solid #e0b4b4;
}

.alert--info {
  background-color: #eef2f5;
  color: var(--reserve-color-accent);
  border: 1px solid var(--reserve-color-border);
}

/* ── リード文 ───────────────────────────────────── */
.reserve-lead {
  background-color: #fff;
  border: 1px solid var(--reserve-color-border);
  border-radius: 4px;
  padding: 14px 16px;
  margin-bottom: 20px;
}

/* ── カレンダー共通(凡例・ナビ) ───────────────────────── */
.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 12px;
  font-size: 0.9rem;
}

.calendar-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.calendar-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 3px;
  font-weight: bold;
  background-color: #fff;
  border: 1px solid var(--reserve-color-border);
}

.calendar-symbol.is-free {
  color: #2e7d32;
  border-color: #2e7d32;
}

.calendar-symbol.is-partial {
  color: #b8860b;
  border-color: #b8860b;
}

.calendar-symbol.is-full {
  color: #a94442;
  border-color: #a94442;
}

.calendar-symbol.is-closed {
  color: #fff;
  background-color: var(--reserve-color-sub);
  border-color: var(--reserve-color-sub);
  font-size: 0.75rem;
}

/* 休日設定カレンダー(A5)の「休」「定休」ラベル。
   小さな正方形の calendar-symbol だと2文字が潰れて読めないため、
   文字幅に合わせて広がるピル型ラベルにする。 */
.holiday-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  background-color: var(--reserve-color-accent);
  color: #fff;
  font-size: 0.78rem;
  font-weight: bold;
  line-height: 1.5;
  white-space: nowrap;
}

.holiday-badge--weekly {
  background-color: var(--reserve-color-sub);
}

/* 月カレンダー凡例の補足注記(index.php / admin/calendar.php で使用)。
   エリア別凡例(旧 .calendar-area-legend 系)は統合記号方式への移行に伴い
   PHP側のマークアップごと削除されたため、対応するCSSも削除済み。 */
.calendar-legend__note {
  margin: 0 0 16px;
  font-size: 0.85rem;
  color: var(--reserve-color-sub);
}

.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.calendar-nav__current {
  margin: 0;
  font-weight: bold;
  font-size: 1.1rem;
  color: var(--reserve-color-accent);
}

/* day.php: 表示中の日付が今日以下で「前日」が過去日付になる場合の非活性表示。
   .btn--subの見た目を踏襲しつつ、グレーアウト+クリック不可にする。 */
.calendar-nav__disabled {
  border-color: var(--reserve-color-sub);
  color: var(--reserve-color-sub);
  cursor: default;
}

/* ── 月カレンダーテーブル(U1) ───────────────────────── */
/* 375px幅でも7列(日〜土)が横スクロールなしで収まるよう、
   table-layout: fixed で列幅を均等割りにする(旧 min-width: 720px は撤廃)。 */
.calendar-table-wrap {
  margin-bottom: 16px;
}

table.calendar-table {
  table-layout: fixed;
  width: 100%;
}

table.calendar-table th.is-sun,
table.calendar-table td.is-sun {
  color: #a94442;
}

table.calendar-table th.is-sat,
table.calendar-table td.is-sat {
  color: #2a5a8a;
}

/* セルは統合記号1個+日付の縦積み表示のみになったため、固定高さではなく
   内容に応じた高さ(auto)+最小限のpaddingにする。 */
.calendar-cell {
  vertical-align: top;
  padding: 2px;
  height: auto;
}

.calendar-cell--empty {
  background-color: #fafaf8;
}

.calendar-cell--holiday {
  background-color: #f5f0ee;
}

/* 過去日付セル。.calendar-cell--emptyと同系色にしつつ、日付文字はグレーで
   「選択できない日」であることを視覚的に示す(リンクなしの.calendar-cell__link--past)。 */
.calendar-cell--past {
  background-color: #fafaf8;
}

.calendar-cell__link--past {
  color: var(--reserve-color-sub);
}

/* 過去日付セルにも記号と同寸法の非表示プレースホルダーを置き、レイアウト上の高さだけ
   確保することで、記号を表示する行と行の高さ・日付数字の位置を完全に揃える。 */
.calendar-symbol--placeholder {
  visibility: hidden;
}

.calendar-cell__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 52px;
  text-decoration: none;
  color: inherit;
  padding: 4px;
  border-radius: 3px;
}

.calendar-cell__link:hover {
  background-color: var(--reserve-color-bg);
}

.calendar-cell__day {
  font-weight: bold;
  font-size: 0.8rem;
}

/* 統合記号(○/△/×/休)。凡例側の.calendar-symbolより一回り大きく表示する。 */
.calendar-cell__link .calendar-symbol {
  width: 1.5em;
  height: 1.5em;
  font-size: 0.95rem;
}

/* ── 日別詳細グリッド(U2) ─────────────────────────── */
/* 利用者側は table-layout: fixed で横スクロール不要にする(fixed時ははみ出さないので
   overflow-x: auto を付けたままでも実害はない)。
   管理側(day-grid--admin、予約者名を表示するため列幅が必要)は
   下の「管理カレンダー」セクションで min-width: 480px + table-layout: auto に上書きし、
   ここで付けた overflow-x: auto によって横スクロールを許容する。 */
.day-grid-wrap {
  overflow-x: auto;
  margin-bottom: 16px;
}

table.day-grid {
  table-layout: fixed;
  width: 100%;
}

.day-grid__time-head {
  white-space: nowrap;
}

.day-grid__cell {
  font-size: 0.85rem;
  cursor: default;
  padding: 4px;
}

.day-grid__cell.is-free {
  color: #2e7d32;
  background-color: #f2f8f2;
}

/* コントラスト改善: 旧配色(文字#908781/背景#f2f0ee)は視認性が低いため、
   背景を塗りつぶし白文字にする。day-grid--admin(予約者名表示)にも
   同じクラスが使われるため、白文字での可読性はここで担保する。 */
.day-grid__cell.is-occupied {
  color: #fff;
  background-color: var(--reserve-color-sub);
}

.day-grid__cell.is-selected {
  background-color: #fdeaa7 !important;
  color: #7a5b00 !important;
  font-weight: bold;
  box-shadow: inset 0 0 0 2px #b8860b;
}

/* 空きセルのタップ可能ボタン(day.php / assets/js/day-select.js)。
   セル全体をタップ領域にするため display: block + 44px以上の高さを確保する。 */
.day-grid__slot {
  display: block;
  width: 100%;
  min-height: 44px;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.day-grid-swatch {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  border-radius: 3px;
  vertical-align: middle;
  border: 1px solid var(--reserve-color-border);
}

.day-grid-swatch.is-free {
  background-color: #f2f8f2;
}

.day-grid-swatch.is-occupied {
  background-color: var(--reserve-color-sub);
}

.day-grid-swatch.is-selected {
  background-color: #fdeaa7;
  box-shadow: inset 0 0 0 2px #b8860b;
}

/* ── 日別: タップ選択のサマリーバー・警告(day.php / day-select.js) ────────── */
/* 画面下部固定。安全領域(ホームインジケータ等)を考慮したpadding-bottomを確保する。 */
.day-summary-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #fff;
  border-top: 1px solid var(--reserve-color-border);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}

.day-summary-bar__info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.85rem;
}

.day-summary-bar__date {
  font-weight: bold;
  color: var(--reserve-color-accent);
}

.day-summary-bar__detail {
  color: var(--reserve-color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.day-summary-bar__clear {
  flex: 0 0 auto;
  padding: 8px 12px;
  font-size: 0.85rem;
}

.day-summary-bar__submit {
  flex: 0 0 auto;
  padding: 10px 16px;
  font-size: 0.9rem;
}

.day-summary-bar__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* サマリーバー表示中は本文末尾がバーに隠れないよう余白を確保する(body.has-summary-barはJSが付け外し)。 */
body.has-summary-bar .reserve-main {
  padding-bottom: 110px;
}

/* 範囲拡張・エリア追加がエリアをまたいで予約済みと衝突した場合の警告(alert--errorに準拠)。 */
.day-tap-notice {
  padding: 12px 16px;
  border-radius: 4px;
  margin-bottom: 16px;
  background-color: #fbeaea;
  color: #a94442;
  border: 1px solid #e0b4b4;
  font-size: 0.9rem;
}

/* ── 日別: エリア・時間選択フォーム(JS無効時のフォールバック) ──────────────── */
.day-select-form {
  background-color: #fff;
  border: 1px solid var(--reserve-color-border);
  border-radius: 4px;
  padding: 16px;
  margin-top: 8px;
}

.day-select-form h2 {
  margin-top: 0;
  font-size: 1.05rem;
}

.day-select-form__areas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}

/* カード風のタップ領域(min-height 44px)。チェックボックス自体も20px角に拡大する。
   実マークアップは .form-row の子孫の<label>のため、.form-row label(display:block;
   font-weight:bold)より詳細度を上げて確実に上書きする。 */
.form-row label.day-select-form__area-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: normal;
  padding: 10px 12px;
  border: 1px solid var(--reserve-color-border);
  border-radius: 4px;
  background-color: #fff;
  min-height: 44px;
}

.day-select-form__area-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

.day-select-form__time-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* 140px下限を撤廃し、狭い画面でも2カラムが均等に収まるようにする。 */
.day-select-form__time-row > div {
  flex: 1 1 0;
  min-width: 0;
}

/* ── 申請フォーム(U3) ─────────────────────────────── */
.confirm-table th {
  width: 9em;
  white-space: nowrap;
}

.confirm-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* 単一ボタンの送信行(「確認画面へ」等)・完了画面の戻るリンクを中央配置にする */
.form-actions {
  margin-top: 20px;
  text-align: center;
}

/* 「« ◯◯に戻る」等、前の画面へのテキストリンク */
.reserve-back-link {
  margin-bottom: 16px;
}

/* honeypot: bot対策のダミー入力欄。通常利用者には見えない位置に飛ばす(display:noneはbotに
   無視されやすいため、画面外配置+視覚的非表示の併用にする)。 */
.hp-field-wrap {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── 管理画面: 一覧フィルタ・テーブル・ステータスバッジ・承認操作(P4) ────────── */
.admin-filter-form {
  background-color: #fff;
  border: 1px solid var(--reserve-color-border);
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 20px;
}

.admin-filter-form__row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.admin-filter-form__row .form-row {
  margin-bottom: 0;
}

.admin-filter-form__submit {
  align-self: flex-end;
}

.admin-table-wrap {
  overflow-x: auto;
}

/* history.php が引き続き使用するテーブル型一覧(admin/index.phpはカード型に移行済み)。 */
table.admin-list-table {
  min-width: 720px;
}

table.admin-list-table th,
table.admin-list-table td {
  text-align: left;
  white-space: nowrap;
}

/* ── 管理一覧: カードリスト(A1) ───────────────────────── */
/* モバイルは縦積み、769px以上はgridで2〜3列に自動折り返し。 */
.admin-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-card {
  border: 1px solid var(--reserve-color-border);
  border-left: 4px solid var(--reserve-color-border);
  border-radius: 6px;
  background-color: #fff;
}

/* ステータス修飾クラスは reserve_admin_status_class() の戻り値(is-pending/is-approved/is-rejected)。
   status-badge の配色と揃える。 */
.admin-card.is-pending {
  border-left-color: #b8860b;
}

.admin-card.is-approved {
  border-left-color: #2e7d32;
}

.admin-card.is-rejected {
  border-left-color: #a94442;
}

.admin-card__link {
  display: block;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
}

.admin-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.admin-card__code {
  font-size: 0.85rem;
  color: var(--reserve-color-sub);
}

.admin-card__datetime {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: bold;
  color: var(--reserve-color-text);
}

.admin-card__sub {
  margin: 0 0 4px;
  font-size: 0.95rem;
  color: var(--reserve-color-text);
}

.admin-card__meta {
  margin: 0;
  font-size: 0.8rem;
  color: var(--reserve-color-sub);
}

@media (min-width: 769px) {
  .admin-card-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
  }
}

/* ── 管理一覧: ステータスセグメント・詳細条件(A1) ───────────────────── */
.admin-status-seg {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.admin-status-seg__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--reserve-color-border);
  background-color: #fff;
  color: var(--reserve-color-text);
  text-decoration: none;
  font-size: 0.9rem;
}

.admin-status-seg__item.is-active {
  background-color: var(--reserve-color-accent);
  border-color: var(--reserve-color-accent);
  color: #fff;
}

.admin-status-seg__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  padding: 1px 6px;
  border-radius: 999px;
  background-color: var(--reserve-color-bg);
  color: var(--reserve-color-text);
  font-size: 0.75rem;
  font-weight: bold;
}

.admin-status-seg__item.is-active .admin-status-seg__count {
  background-color: #fff;
  color: var(--reserve-color-accent);
}

.admin-filter-details {
  margin-bottom: 16px;
}

.admin-filter-details summary {
  cursor: pointer;
  color: var(--reserve-color-accent);
  font-size: 0.9rem;
  padding: 4px 0;
}

.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 3px;
  font-size: 0.8rem;
  font-weight: bold;
  background-color: var(--reserve-color-bg);
  color: var(--reserve-color-text);
  border: 1px solid var(--reserve-color-border);
}

.status-badge.is-pending {
  color: #b8860b;
  border-color: #b8860b;
  background-color: #fdf6e3;
}

.status-badge.is-approved {
  color: #2e7d32;
  border-color: #2e7d32;
  background-color: #f2f8f2;
}

.status-badge.is-rejected {
  color: #a94442;
  border-color: #a94442;
  background-color: #fbeaea;
}

.admin-action-section {
  background-color: #fff;
  border: 1px solid var(--reserve-color-border);
  border-radius: 4px;
  padding: 16px;
  margin-top: 20px;
}

.admin-action-form {
  margin-bottom: 16px;
}

.admin-action-form--reject textarea {
  max-width: 480px;
}

/* 管理画面の補足説明文(CSV出力・申込履歴・メール再送画面など) */
.admin-help-text,
.admin-note,
.admin-hint {
  color: var(--reserve-color-sub);
  font-size: 0.85rem;
}

/* 各種設定(A6)フォーム全体のコンテナ。admin-action-section を複数並べるだけなので
   横幅制御のみ持たせる(中身は既存の form-row 等を流用)。 */
.admin-settings-form {
  max-width: 640px;
}

/* メール再送(A9)のメール本文プレビュー。長い変更・削除URLが折り返されず
   画面をはみ出さないよう pre-wrap + word-break で必ず折り返す。 */
.admin-mail-preview {
  white-space: pre-wrap;
  word-break: break-all;
  font-family: inherit;
  font-size: 0.9rem;
  margin: 0;
  text-align: left;
}

/* チェックボックス+説明文のラベル(手動予約登録のメール送信有無など)。
   .form-row label の display:block/font-weight:bold を打ち消し、
   チェックボックスとテキストを1行に並べる。 */
.admin-checkbox-label {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-weight: normal !important;
  cursor: pointer;
}

/* ── 変更申請の差分表示(admin/detail.php、変更前後の比較テーブル) ──────────── */
/* .diff-old/.diff-new はspan(日時・エリア)とdiv(利用目的・コメント、複数行)の
   両方で使われるため、要素種別を問わないセレクタにする。 */
.diff-old {
  color: var(--reserve-color-sub);
  text-decoration: line-through;
}

.diff-new {
  display: inline-block;
  font-weight: bold;
  background-color: #fdeaa7;
  padding: 2px 6px;
  border-radius: 3px;
}

.diff-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background-color: var(--reserve-color-accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: bold;
  line-height: 1.5;
  white-space: nowrap;
}

.diff-arrow {
  color: var(--reserve-color-sub);
}

.diff-nochange {
  margin-left: 6px;
  color: var(--reserve-color-sub);
  font-size: 0.85rem;
}

/* 利用目的・コメントはdiv縦積みのため、矢印は独立行として中央寄せの見た目にする。 */
div.diff-old,
div.diff-new {
  display: block;
  margin-bottom: 4px;
}

div.diff-arrow {
  margin-bottom: 4px;
}

/* ── 競合警告カード(detail.php / manual.php、承認・手動登録時の重複予約表示) ──── */
.conflict-list__title {
  margin: 0 0 4px;
  font-weight: bold;
  color: #a94442;
}

.conflict-card {
  border: 1px solid var(--reserve-color-border);
  border-radius: 4px;
  padding: 10px 12px;
  margin-top: 8px;
  background-color: #fff;
}

.conflict-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.conflict-card__code {
  font-size: 0.85rem;
  color: var(--reserve-color-sub);
}

.conflict-card__datetime {
  margin: 0 0 8px;
  font-size: 0.95rem;
}

.conflict-card__link {
  display: inline-flex;
}

/* ── 管理カレンダー(A3): 日別グリッドの予約済みセルリンク(P6) ────────── */
.admin-calendar-cell-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.admin-calendar-cell-link:hover {
  text-decoration: underline;
}

/* 管理側日別グリッド(予約者名表示のため列幅が必要 = 利用者側と逆に横スクロール許容)。
   .day-grid-wrap は常時 overflow-x: auto のため、table-layout: auto + min-width で
   このテーブルだけ横スクロールが発生する。 */
table.day-grid--admin {
  min-width: 480px;
  table-layout: auto;
}

/* is-occupiedの背景が濃色になったため、管理側の予約者名(白文字)は太字にして
   可読性を補う(色自体は.day-grid__cell.is-occupiedと統一)。 */
table.day-grid--admin td.day-grid__cell.is-occupied {
  font-weight: bold;
}

/* 管理カレンダー月表示で選択中の日付セル(既存マークアップにCSSが欠落していたため追加)。 */
.calendar-cell--selected {
  outline: 2px solid var(--reserve-color-accent);
}

/* ── レスポンシブ ─────────────────────────────────── */
@media (max-width: 768px) {
  .reserve-main {
    padding: 16px 12px 48px;
  }

  .reserve-header {
    padding: 12px 16px;
  }

  /* 5-3: 管理ナビを横スクロールのチップ型に(layout_admin.phpのscrollIntoViewと連動)。
     利用者側ヘッダーナビは現状項目が少ないため折り返しのままで問題なく、
     このセレクタは .reserve-header__nav-inner 全体に効くが実害はない。 */
  .reserve-header__nav-inner {
    padding: 6px 12px;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .reserve-header__nav-inner a {
    flex: 0 0 auto;
    padding: 10px 14px;
    font-size: 0.8rem;
    border: 1px solid var(--reserve-color-border);
    border-radius: 999px;
    background-color: #fff;
  }

  .reserve-header__nav-inner a.is-current {
    background-color: var(--reserve-color-accent);
    color: #fff;
    border-color: var(--reserve-color-accent);
    border-bottom: 1px solid var(--reserve-color-accent);
  }

  /* 5-5: 本文フォントサイズの縮小(15px)を撤回し、bodyのデフォルト(16px)を維持する。 */

  /* 月カレンダー: セルは統合記号方式でheight:autoにしたため、モバイル専用の固定高さ調整は不要。
     記号ボックスは基本サイズ(.calendar-cell__link .calendar-symbol)のまま維持する。 */
  .calendar-cell__day {
    font-size: 0.75rem;
  }

  .calendar-nav__current {
    font-size: 1rem;
  }

  /* サマリーバーをスマホでは2段組みにする(1段目:情報全幅、2段目:クリア+申請ボタン横並び)。
     390px幅だと横一列では文字とボタンが重なるため。 */
  .day-summary-bar {
    flex-wrap: wrap;
  }

  .day-summary-bar__info {
    flex: 1 1 100%;
  }

  .day-summary-bar__clear {
    flex: 0 0 auto;
  }

  .day-summary-bar__submit {
    flex: 1 1 auto;
  }

  /* 2段になった分、本文末尾がバーに隠れないよう余白を増やす(110px→150px)。 */
  body.has-summary-bar .reserve-main {
    padding-bottom: 150px;
  }

  /* 日別グリッド(利用者側): table-layout: fixed で画面内に収まるため、
     sticky時刻列・min-width指定は管理側(day-grid--admin)専用に限定する。 */
  table.day-grid--admin th.day-grid__time-head,
  table.day-grid--admin td.day-grid__time-head {
    position: sticky;
    left: 0;
    background-color: var(--reserve-color-bg);
    z-index: 1;
  }

  table.day-grid--admin td.day-grid__cell {
    min-width: 70px;
  }

  /* 5-2: エリアチェックボックスをスマホでは1行1エリアの縦積みにする。 */
  .day-select-form__areas {
    flex-direction: column;
  }

  /* 5-4: 管理フィルタフォームの行をスマホでは縦積みにする。 */
  .admin-filter-form__row {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-filter-form__submit .btn {
    width: 100%;
  }

  /* 5-2: 承認・却下・キャンセル等の管理操作ボタンをスマホでは全幅・大きめにする。 */
  .admin-action-form .btn {
    width: 100%;
    padding: 14px;
  }

  /* 5-6: 申請内容確認テーブル(form確認/complete/manage系/admin detail/resendの計9箇所)を
     th/td縦積みにする。実マークアップは全箇所 <table class="reserve-table confirm-table"> の
     組み合わせのため、table.reserve-table th/td(詳細度が高い既存ルール)を上書きできるよう
     table.confirm-table th/td の形でセレクタの詳細度を揃える。 */
  table.confirm-table,
  table.confirm-table tbody,
  table.confirm-table tr,
  table.confirm-table th,
  table.confirm-table td {
    display: block;
    width: 100%;
  }

  table.confirm-table th {
    text-align: left;
    padding: 6px 10px 2px;
    font-size: 0.85rem;
    color: var(--reserve-color-sub);
    white-space: normal;
    border-top: none;
    border-bottom: none;
  }

  table.confirm-table td {
    padding: 2px 10px 10px;
    border-top: none;
  }

  /* 変更申請の差分表示(span版=日時・エリア行)は横幅が狭いと重なるため、
     縦積みにして矢印も見出しなしの独立行にする。div版(利用目的・コメント)は
     元々ブロック要素で縦積みのため影響なし。 */
  span.diff-old,
  span.diff-new,
  span.diff-arrow {
    display: block;
    margin-bottom: 4px;
  }
}

/* ── トップの利用者向け案内文(管理画面「各種設定 > 利用者向け案内文」site_note) ── */
.site-note {
  margin: 4px 0 20px;
  padding: 14px 18px;
  background: #FFFFFF;
  border: 1px solid var(--reserve-color-border);
  border-left: 4px solid var(--reserve-color-accent);
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-wrap; /* 管理画面の改行をそのまま反映 */
}