/* 空き状況グリッド。横スクロール＋時間列/ヘッダ行の sticky 固定。
   設計: docs.dev/設計書/設計書.md §8。 */

.grid-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #dee2e6;
  max-height: 80vh;
}

.grid-table {
  border-collapse: collapse;
  min-width: max-content;
}

.grid-table th,
.grid-table td {
  border: 1px solid #dee2e6;
  text-align: center;
  white-space: nowrap;
  font-size: .9rem;
}

/* ヘッダ行（日付）を上に固定 */
.grid-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8f9fa;
  padding: 4px 8px;
}

/* 時間列を左に固定 */
.grid-table tbody th.time-col {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #f8f9fa;
  padding: 4px 10px;
  font-weight: 600;
}

/* 左上角（時間ヘッダ）は両方向に固定 */
.grid-table thead th.corner {
  left: 0;
  z-index: 3;
}

.date-col .d { font-weight: 600; }
.date-col .w { font-size: .8em; color: #6c757d; }
/* 日付・曜日の色分け: 祝日・日曜=赤 / 土曜=青（クラスはテンプレ/JS側で排他付与＝祝日と重なる土曜は赤） */
.date-col.is-holiday .d,
.date-col.is-holiday .w,
.date-col.is-sunday .d,
.date-col.is-sunday .w { color: #dc3545; }
.date-col.is-saturday .d,
.date-col.is-saturday .w { color: #0d6efd; }
.date-col.is-closed { color: #adb5bd; background: #f1f3f5; }

.cell {
  width: 66px;
  height: 46px;
  padding: 0;
}

.cell-closed { background: #f1f3f5; }
.cell-full { color: #adb5bd; }
/* 受付不可（―）は背景を付けず、○/△（受付可）と同じ白背景にする（記号のみ灰色） */
.cell-blocked { color: #adb5bd; }

.cell-available .cell-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 5px 2px;
  line-height: 1.1;
  color: #198754;
  text-decoration: none;
}
.cell-available .cell-link:hover { background: #d1e7dd; }
/* セルの記号（○△×―）を大きく表示 */
.cell .mark { font-size: 1.4rem; line-height: 1; }
.cell-available .mark { font-weight: 700; }
/* 残りわずか（残1・定員2以上）の △ は注意色（オレンジ） */
.cell-available .mark-low { color: #fd7e14; }

/* 無人帯の空きセルは色（淡い紫背景＋紫文字）で区別する */
.cell-unstaffed .cell-link { color: #6f42c1; background: #f3e8ff; }
.cell-unstaffed .cell-link:hover { background: #e9d5ff; }

/* 管理グリッドの「確認専用」領域（予約受付期間外＝後半2週間）。
   公開グリッドはこれらのクラスを出力しないため副作用なし。 */
.grid-table td.beyond { background: #fbfbf8; }
.grid-table thead th.date-col.beyond { background: #eeeee8; }
/* 受付可⇔受付外の境界に縦の区切り線 */
.grid-table th.window-edge,
.grid-table td.window-edge { border-left: 2px solid #adb5bd; }
/* 確認専用の空き表示はクリック不可・淡色（手動予約導線でないことを示す） */
.cell-available.beyond .cell-readonly {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 5px 2px;
  line-height: 1.1;
  color: #9bbfa9;
  cursor: default;
}
.cell-available.beyond .mark-low { color: #e0b07a; }
/* 案内文中の確認専用領域を示す色見本 */
.grid-beyond-swatch {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: middle;
  background: #eeeee8;
  border: 1px solid #adb5bd;
  border-radius: 2px;
}

/* 横スクロール誘導（◀▶ボタン＋案内） */
.grid-scroll-btn {
  min-width: 3rem;
  font-size: 1rem;
  line-height: 1;
}

/* 種別ごとの案内文（タブ直下）。改行はそのまま表示（white-space: pre-line）。 */
.type-message {
  white-space: pre-line;
  word-break: break-word;
  background: #fff8e1;
  border: 1px solid #ffe08a;
  border-radius: .375rem;
  padding: .6rem .85rem;
  margin-bottom: .85rem;
  color: #5c4b00;
  font-size: .925rem;
  line-height: 1.5;
}

/* 凡例 */
.grid-legend .lg {
  display: inline-block;
  min-width: 1.4em;
  text-align: center;
  font-weight: 700;
  margin-left: .6em;
}
.grid-legend .lg-available { color: #198754; }
.grid-legend .lg-low { color: #fd7e14; }
.grid-legend .lg-full,
.grid-legend .lg-blocked { color: #adb5bd; }
.grid-legend .lg-closed {
  background: #f1f3f5;
  border: 1px solid #dee2e6;
  min-width: 1.2em;
  height: 1.1em;
  vertical-align: middle;
}
.grid-legend .lg-unstaffed {
  background: #f3e8ff;
  border: 1px solid #d8b4fe;
  min-width: 1.2em;
  height: 1.1em;
  vertical-align: middle;
}

/* 種別タブ（公開グリッド #type-tabs / 管理グリッド共通）。
   Bootstrap の nav-pills に枠を付けて「1タブ＝1ボタン」の境界を分かりやすくする。
   未選択 = 白地＋グレー枠＋通常文字色、選択中 = 塗りつぶし（青背景・白文字）。
   このファイルは公開/管理グリッドのみが読み込むため .nav-pills 直指定で副作用なし。 */
.nav-pills {
  gap: .4rem;   /* 枠付きタブ同士がくっつかないよう間隔をあける */
}
.nav-pills .nav-link {
  background-color: #fff;
  border: 1px solid #ced4da;
  color: #495057;
}
.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus {
  border-color: #adb5bd;
  background-color: #f8f9fa;
  color: #212529;
}
.nav-pills .nav-link.active {
  /* 選択中は枠幅を保ったまま塗りつぶし（未選択⇔選択でレイアウトがずれない） */
  border-color: var(--bs-primary, #0d6efd);
  background-color: var(--bs-primary, #0d6efd);
  color: #fff;
}