/*
 * rooms.css（部屋別表示 rooms.php 専用。接頭辞 .rooms- だけを使う）
 *   仕様: docs/UI_SPEC.md（色・余白・文字）。base の部品（.btn .badge .fc-N など）は上書きしない。
 *   .fc-N を付けた帯には background / color を書かない（施設色が消えるため）。
 *
 *   表の組み立て:
 *     1行（見出しの行・部屋・棟の行）は、どれも同じ列の幅で作った grid。
 *       1列目 = 部屋・棟の名前（幅 --rooms-name）／2〜8列目 = 日付7日分
 *     日付のセル（.rooms-cell）は行の高さいっぱいに敷き、その上に予約の帯（.rooms-bar）を重ねる。
 *     空いているセルだけがリンク（＋ 予約を追加）。予約のあるセルは帯がリンクなので、押せる場所を重ねない。
 *   横スクロールを出さないため、日付は7列に固定し、列は minmax(0, 1fr) で画面幅に合わせて縮める。
 */

.rooms {
  --rooms-name: 64px;   /* 部屋・棟の名前の列（スマホでは狭く。375px でも7列が入るように） */
  --rooms-lane: 26px;   /* 帯1段ぶんの高さ（押しやすさのため24px以上を確保） */
  --rooms-bar: 24px;    /* 帯の高さ */
}

/* ---------- 上部: 7日の切り替え ---------- */
.rooms-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2);
  min-height: 56px;
  margin-bottom: var(--sp-3);
}
.rooms-nav { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; flex-wrap: wrap; }
.rooms-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--r-full);
  color: var(--c-brown);
  transition: background-color var(--dur);
}
.rooms-nav-btn:hover { background: var(--c-surface-2); color: var(--c-brown); }
.rooms-range {
  min-width: 0;
  padding: 0 var(--sp-1);
  font-size: var(--fs-md);
  line-height: 1.25;
}
.rooms-range-year {
  display: block;
  font-family: var(--font-base);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--c-text-sub);
}
.rooms-range-days { display: block; overflow-wrap: anywhere; }
.rooms-head-actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; margin-left: auto; }

.rooms-empty { margin-top: var(--sp-4); }

/* ---------- 表 ---------- */
.rooms-board {
  margin: 0 calc(var(--sp-2) * -1); /* スマホは左右の余白を 8px にして、日付の列を広く取る */
  margin-top: var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;                 /* 角の丸みからはみ出さない */
}

.rooms-headrow,
.rooms-row {
  display: grid;
  grid-template-columns: var(--rooms-name) repeat(7, minmax(0, 1fr));
}

/* 日付の見出し */
.rooms-headrow { border-bottom: 1px solid var(--c-line); background: var(--c-bg); }
.rooms-corner {
  display: flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-sub);
}
.rooms-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  padding: var(--sp-1) 2px;
  border-left: 1px solid var(--c-line);
  color: var(--c-text-sub);
}
.rooms-date-wd {
  font-family: var(--font-round);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-synthesis: none;
  line-height: 1;
}
.rooms-date-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  min-height: 1.5em;
  padding: 2px 6px;
  border-radius: var(--r-full);
  font-family: var(--font-round);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-synthesis: none;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--c-text);
  white-space: nowrap;
}
.rooms-date.is-sun, .rooms-date.is-sun .rooms-date-num { color: var(--c-danger); }
.rooms-date.is-sat, .rooms-date.is-sat .rooms-date-num { color: var(--c-blue-text); }
.rooms-date.is-today .rooms-date-num { background: var(--c-accent); color: #fff; }

/* 施設の見出し（縦の並びの中で、どの施設の部屋かが分かるように） */
.rooms-facility {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--c-line);
  background: var(--c-bg);
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.rooms-headrow + .rooms-facility { border-top: 0; }
.rooms-facility-name { min-width: 0; overflow-wrap: anywhere; }

/* 部屋・棟の行 */
.rooms-row { border-top: 1px solid var(--c-line); }
.rooms-lanes-1 { grid-template-rows: minmax(44px, auto); }
.rooms-lanes-2 { grid-template-rows: repeat(2, minmax(var(--rooms-lane), auto)); }
.rooms-lanes-3 { grid-template-rows: repeat(3, minmax(var(--rooms-lane), auto)); }
.rooms-has-more { grid-template-rows: repeat(3, var(--rooms-lane)) minmax(24px, auto); }

.rooms-unit {
  grid-column: 1;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-sm);
  line-height: 1.3;
}
.rooms-unit-name {
  font-weight: 600;
  color: var(--c-text);
  overflow-wrap: anywhere;
}
.rooms-unit-paused { font-size: var(--fs-sm); color: var(--c-text-sub); }

/* 日付のセル（行の高さいっぱいに敷く。空いているセルだけリンク） */
.rooms-cell {
  grid-row: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  border-left: 1px solid var(--c-line);
  color: var(--c-line-strong);
  text-decoration: none;
  transition: background-color var(--dur);
}
.rooms-cell.is-today { background: var(--c-surface-2); box-shadow: inset 1px 0 0 var(--c-accent), inset -1px 0 0 var(--c-accent); }
.rooms-cell.is-busy { align-items: flex-end; }
a.rooms-cell:hover { background: var(--c-surface-2); color: var(--c-accent); }
a.rooms-cell:focus-visible { outline-offset: -3px; }
.rooms-plus { width: 16px; height: 16px; }
.rooms-more {
  grid-row: -2 / -1;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 2px;
  font-family: var(--font-round);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-synthesis: none;
  line-height: 1.2;
  color: var(--c-brown);
  text-decoration: underline;
  white-space: nowrap;
}
.rooms-more:hover { color: var(--c-accent); }
.rooms-more:focus-visible { outline-offset: -2px; }

/* ---------- 予約の帯（連泊は横につながって見えるように、両端だけ丸める） ---------- */
.rooms-bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  align-self: center;
  min-width: 0;
  height: var(--rooms-bar);
  margin: 0 2px;
  padding: 0 5px;
  border-radius: var(--r-xs);
  font-family: var(--font-round);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-synthesis: none;
  line-height: 1;
  text-decoration: none;
}
.rooms-bar:hover { text-decoration: underline; }
.rooms-bar:focus-visible { outline-offset: 1px; z-index: 2; }
.rooms-bar-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rooms-bar-icon { width: 12px; height: 12px; stroke-width: 3; }

/* 表示している7日の外へ続く側: 端を四角にして、小さな三角で「続き」を示す */
.rooms-bar.rooms-cont-l { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: 3px; }
.rooms-bar.rooms-cont-r { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: 3px; }
.rooms-bar.rooms-cont-l::before,
.rooms-bar.rooms-cont-r::after {
  content: "";
  flex: none;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
}
.rooms-bar.rooms-cont-l::before { border-width: 4px 4px 4px 0; border-right-color: currentColor; margin-right: 1px; }
.rooms-bar.rooms-cont-r::after { border-width: 4px 0 4px 4px; border-left-color: currentColor; margin-left: 1px; }

/* 位置の class（サーバーで計算して付ける。1列目は部屋・棟の名前なので +1 する） */
.rooms-s-1 { grid-column-start: 2; } .rooms-s-2 { grid-column-start: 3; } .rooms-s-3 { grid-column-start: 4; }
.rooms-s-4 { grid-column-start: 5; } .rooms-s-5 { grid-column-start: 6; } .rooms-s-6 { grid-column-start: 7; }
.rooms-s-7 { grid-column-start: 8; }
.rooms-w-1 { grid-column-end: span 1; } .rooms-w-2 { grid-column-end: span 2; } .rooms-w-3 { grid-column-end: span 3; }
.rooms-w-4 { grid-column-end: span 4; } .rooms-w-5 { grid-column-end: span 5; } .rooms-w-6 { grid-column-end: span 6; }
.rooms-w-7 { grid-column-end: span 7; }
.rooms-l-1 { grid-row: 1; } .rooms-l-2 { grid-row: 2; } .rooms-l-3 { grid-row: 3; }

/* ---------- タブレット（600px〜） ---------- */
@media (min-width: 600px) {
  .rooms { --rooms-name: 120px; --rooms-lane: 26px; --rooms-bar: 22px; }
  .rooms-board { margin-left: 0; margin-right: 0; }
  .rooms-lanes-1 { grid-template-rows: minmax(48px, auto); }
  .rooms-range { font-size: var(--fs-lg); }
  .rooms-facility { font-size: var(--fs-base); padding: var(--sp-2) var(--sp-4); }
  .rooms-unit { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-base); }
}

/* ---------- PC（900px〜）: 同じ7日をゆったり見せる ---------- */
@media (min-width: 900px) {
  .rooms { --rooms-name: 160px; --rooms-lane: 30px; --rooms-bar: 24px; }
  .rooms-lanes-1 { grid-template-rows: minmax(56px, auto); }
  .rooms-bar { font-size: var(--fs-sm); padding: 0 8px; }
  .rooms-bar-icon { width: 14px; height: 14px; }
  .rooms-date-num { font-size: var(--fs-base); min-width: 1.6em; min-height: 1.6em; }
  .rooms-date.is-today .rooms-date-num { min-height: 1.7em; }
  .rooms-date-wd { font-size: var(--fs-sm); }
  .rooms-more { font-size: var(--fs-sm); line-height: 16px; }
  .rooms-has-more { grid-template-rows: repeat(3, var(--rooms-lane)) 20px; }
}