@charset "UTF-8";

/**
 * custom.css
 *
*/

/* ==========================================================================
   # 共通
============================================================================= */
/* メインコンテンツラッパー */
.container {
  max-width: 1320px !important;
}

.sr-content {
  padding: 28px;
  background-color: #fff;
  border-radius: 10px;
  min-width: 1320px;
}

/* ユーザーアイコン */
.user-icon .organizer-icon,
.user-icon .default-icon,
.col-organizer .organizer-icon,
.col-organizer .default-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%; /* 円形にする */
  object-fit: cover;  /* 画像のアスペクト比を保ちつつ、要素にフィットさせる */
  display: block;
}

.col-organizer .default-icon {
  font-size: 32px; /* Font Awesomeアイコンのサイズ調整 */
  color: #888;
  line-height: 1;
}

/* #テーブル関連
-------------------------------------------------------------------- */
.sr-pagination {
  display: flex;
  justify-content: center;
}

.sr-page-counter {
  display: flex;
  justify-content: end;
}

th a.asc::after,
th a.desc::after {
  display: inline-block;
  margin-left: 0.3em;
  font-family: "Font Awesome 6 Free", sans-serif; /* Font Awesome 6 の場合 */
  /* font-family: "Font Awesome 5 Free"; */ /* Font Awesome 5 の場合 */
  font-weight: bold; /* Solidスタイルを使う場合 */
  /* または他のスタイルに合わせて font-weight を調整 */
}

th a.asc::after {
  content: "\f0de"; /* Font Awesome の fa-sort-up (上向き矢印) のUnicode */
}

th a.desc::after {
  content: "\f0dd"; /* Font Awesome の fa-sort-down (下向き矢印) のUnicode */
}

.page-header {
  margin-bottom: 20px;
  display: flex;
  gap: 20px;
  align-items: flex-end;
}

.page-title {
  font-size: 1.5rem; /* 24px相当 */
  font-weight: bold;
  margin: 0;
}

.last-updated {
  font-size: 0.875rem; /* 14px相当 */
  color: #6c757d; /* グレー系の文字色 */
  margin: 0;
}

/* ==========================================================================
   # ログイン画面
============================================================================= */
.login-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh; /* ★ビューポートの高さ100%を確保 */
  background-color: #f4f7f9;
  padding: 20px;
}

/* ログインカード本体 */
.login-card {
  max-width: 400px;
  margin: 0 auto; /* 中央寄せ */
  padding: 40px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  text-align: center;
}

/* ロゴ画像 */
.login-logo-image {
  margin-bottom: 16px;
}

/* タイトル (SMART RESERVE) */
.login-title {
  font-size: 1.75rem;
  font-weight: bold;
  color: #333;
  margin: 0 0 8px 0;
}

/* サブタイトル (会議室予約システム) */
.login-subtitle {
  font-size: 1rem;
  color: #6c757d;
  margin: 0 0 32px 0;
}

/* ボタンのラッパー */
.login-button-wrapper {
  margin-top: 24px;
}

/* Googleサインインボタン */
.google-signin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background-color: #fff;
  color: #344054;
  font-size: 1rem;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.google-signin-btn:hover {
  background-color: #f9fafb;
  border-color: #b0b8c4;
}

.google-signin-btn img {
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   # 会議室予約画面
============================================================================= */
.l-reservation {
  display: flex;
  gap: 24px;
}

/* # 会議室選択部分
-------------------------------------------------------------------- */
.space-select-wrapper {
  flex-basis: 20%;
  padding-right: 24px;
  border-right: 1px solid var(--sr-light-grey);
}

.space-select-wrapper .bol {
  font-size: 0.9rem;
  font-weight: bold;
  color: #868e96;
  padding-left: 10px;
  margin-bottom: 12px;
  display: block;
}

.space-select-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.space-select-nav li a {
  display: block;
  padding: 10px 15px;
  color: #495057;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.2s ease-in-out;
}

.space-select-nav li a:hover {
  background-color: #f8f9fa;
  color: #212529;
  transform: translateX(4px); /* ホバー時、少し右に動く */
}

/* ★★★ 選択されている会議室のスタイル ★★★ */
.space-select-nav li.active a {
  background-color: #0d6efd; /* 濃いグレー */
  color: #ffffff;           /* 白い文字 */
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(13, 110, 253, 0.2);
}

/* # カレンダー・タイムライン表示部
-------------------------------------------------------------------- */
.calendar-timeline-wrapper {
  flex-basis: 85%;
  padding-left: 20px;
}

.calendar-top {
  display: flex;
  justify-content: space-between;
  padding-left: 20px;
}

.calendar-top .calendar-date {
  font-size: 28px;
}

.calendar-top .calendar-month-move {
}

.calendar-timeline-wrapper {
  display: flex;
}

/* 「前の月へ」ボタン */
.btn-month-nav.prev {
  background-color: #ffffff; /* 背景色 */
  color: #212529; /* 文字色 */
  border: 1px solid var(--sr-light-grey);
}

.btn-month-nav.prev:hover {
  background-color: #e2e6ea;
}

/* 「次の月へ」ボタン */
.btn-month-nav.next {
  background-color: #ffffff; /* 背景色 */
  color: #212529; /* 文字色 */
  border: 1px solid var(--sr-light-grey);
}

.btn-month-nav.next:hover {
  background-color: #f8f9fa;
}

/* Font Awesomeアイコンのサイズ調整 */
.btn-month-nav .fa-solid {
  font-size: 0.8em;
}

/* ★月移動ボタンの非活性スタイル */
.btn-month-nav.disabled {
  color: #adb5bd;          /* 薄いグレーの文字色 */
  background-color: #f8f9fa; /* 背景色 */
  border-color: #dee2e6;
  opacity: 0.65;
  pointer-events: none;     /* マウスイベントを無効化 */
  cursor: not-allowed;      /* カーソルを禁止マークに */
}

/* カレンダー
----------------------- */
/* カレンダー全体を囲むコンテナ */
.calendar-container {
  width: 100%;
  max-width: 600px; /* カレンダーの最大幅を指定 */
  margin-top: 20px;
  padding: 30px;
  background-color: white;
  border-radius: 8px;
  /*box-shadow: 0 4px 12px rgba(0,0,0,0.1);*/
}

/* --- グリッドレイアウト設定 --- */
.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background-color: #ddd;
  border: 1px solid #ddd;
}

/* --- ヘッダーとセルの共通スタイル --- */
.day-header {
  padding: 8px 4px;
  text-align: center;
  background-color: #f7f7f7;
  font-weight: bold;
}

.day-cell,
.day-cell-link {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直中央揃え */
  align-items: center;
  gap: 4px;
  min-height: 70px;
  padding: 8px 4px;
  text-align: center;
  background-color: #fff;
  text-decoration: none; /* aタグのアンダーラインを消す */
  color: inherit; /* aタグの文字色を親から継承 */
  transition: background-color 0.2s; /* ホバー時のアニメーション */
}

.day-cell-link:hover {
  background-color: #f0f8ff; /* 薄い青色 */
  cursor: pointer;
}

/* ★アクセス不可の日のスタイルを追加 */
.day-cell.disabled {
  background-color: #f8f9fa; /* 背景を薄いグレーに */
  color: #adb5bd;          /* 文字色をさらに薄いグレーに */
  pointer-events: none;     /* マウスイベントを無効化（念のため） */
}

/* disabledな日のステータス情報 */
.day-cell.disabled .status-info {
  color: #ced4da;
}

/* 曜日ヘッダーのスタイル */
.day-header {
  font-weight: bold;
  background-color: #f7f7f7;
}

/* 各日付セルのスタイル */
.day-cell {
  min-height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
/* 日付の数字部分 */
.date-number {
  font-size: 1em;
  font-weight: bold;
}
/* 予約状況のテキスト（午前: ✕ など） */
.status-info {
  font-size: 0.75em;
  margin-top: 4px;
  color: #555;
}

/* SVG画像アイコンのスタイル */
.status-icon {
  width: 12px;
  height: 12px;
  vertical-align: middle;
}

/* --- 状態に応じたスタイル --- */
/* 前後月の日付（グレーアウト） */
.other-month {
  background-color: #f0f0f0;
  color: #aaa;
}
.other-month .date-number {
  font-weight: normal;
}

/* 選択されている日付のスタイル */
.day-cell.selected .date-number {
  background-color: #0d6efd; /* 青系の背景色 (Bootstrapのprimaryカラーに近い色) */
  color: white;             /* 文字色を白に */
  border-radius: 50%;       /* 円形にする */
  width: 2em;               /* 円の幅 */
  height: 2em;              /* 円の高さ */
  line-height: 2em;         /* 文字を円の中央に配置（上下） */
  display: inline-block;    /* widthとheightを有効にするため */
  text-align: center;       /* 文字を円の中央に配置（左右） */
  font-weight: bold;        /* 文字を太字に */
}

/* 一部予約可能 (黄色) */
.partially-available {
  background-color: #fffacd; /* レモン色 */
}

/* 一部予約済み (黄色背景の黒バツ) */
.partially-booked {
  background-color: #fffacd; /* レモン色 */
}

/* 予約不可 (赤色) */
.fully-booked {
  background-color: #ffdddd; /* 薄い赤色 */
}
.fully-booked .status-info {
  color: #c00;
}

/* 午前/午後で分割されているセル (27日) */
.status-split {
  display: flex;
  width: 100%;
  margin-top: 4px;
  font-size: 0.8em;
  font-weight: bold;
  border-radius: 4px;
  overflow: hidden; /* 角丸を適用するため */
}

.status-part {
  flex: 1; /* 2つの要素が均等に幅を取る */
  padding: 2px 0;
}

.half-available {
  background-color: #fffacd; /* レモン色 */
  color: #555;
}

.half-booked {
  background-color: #ffdddd; /* 薄い赤色 */
  color: #c00;
}

/* タイムライン
----------------------- */
.signage-timeline-wrapper {
  /*display: flex;*/
  width: 100%;
  /*flex-direction: column;*/
}

.signage-btn-wrapper {
  display: flex;
  gap: 16px;
  justify-content: right;
}

.btn-signage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #dee2e6;
  background-color: #fff;
  color: #495057;
  font-size: 1.1rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-signage:hover {
  background-color: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 8px rgba(13, 110, 253, 0.3);
}

/* --- 全体のコンテナ --- */
.timeline-container {
  display: flex; /* 時間軸と本体を横に並べる */
  width: 100%;
  margin-top: 60px;
  background-color: white;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

/* --- 左側の時間軸 --- */
.time-axis {
  padding: 0 10px;
  font-size: 0.8em;
  color: #888;
  text-align: right;
}
.time-axis div {
  /* ★変更: 1時間あたりの高さを48pxに設定 */
  height: 48px;
  position: relative;
}
.time-axis span {
  position: relative;
  top: -0.6em;
  background-color: #fff;
  padding: 0 4px;
}
.time-axis div:first-child span {
  top: 0;
}

/* --- タイムライン本体（罫線と予約ブロックの親） --- */
.timeline-body {
  flex-grow: 1;
  position: relative;
  border-left: 1px solid #f1f3f5;
  cursor: pointer;
}

.timeline-body .loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8); /* 半透明の白い背景 */
  z-index: 25; /* 予約ブロックより手前に表示 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 8px; /* 親要素の角丸に合わせる */

  /* 初期状態では非表示 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.timeline-body .loading-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.timeline-body .loading-overlay .spinner-border {
  width: 2rem;
  height: 2rem;
}

.timeline-body .loading-overlay .loading-text {
  font-weight: 500;
  color: #495057;
}

/* 背景の罫線 */
.grid-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.hour-line {
  /* ★変更: 1時間あたりの高さを48pxに設定 */
  height: 48px;
  border-top: 1px solid #f1f3f5;
}
.hour-line:first-child {
  border-top: none;
}

/* 予約ブロックを配置するエリア */
.reservations-area {
  position: relative;
  z-index: 10;
}

/* --- 現在の時刻ラインのスタイル --- */
.current-time-indicator {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px; /* 線の太さ */
  background-color: #ea4335; /* Google風の赤色 */
  z-index: 20; /* 予約ブロックよりも手前に表示 */
  pointer-events: none; /* ラインがクリックの邪魔をしないように */
  opacity: 0; /* 初期状態では非表示にしておく */
  transition: top 1s linear; /* 位置更新を滑らかにする（任意） */
}

/* ラインの先端に丸い点を付ける */
.current-time-indicator::before {
  content: '';
  position: absolute;
  top: -4px; /* 線の中心に配置 */
  left: -5px; /* 時間軸の線に重なるように調整 */
  width: 10px;
  height: 10px;
  background-color: #ea4335;
  border-radius: 50%;
}

/* --- 予約ブロックのスタイル --- */
.reservation-block {
  position: absolute;
  left: 10px;
  right: 10px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  transition: all 0.2s ease;
}

.reservation-block:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 15;
}

.reservation-content {
  display: flex;
  align-items: center;
  gap: 15px;
}

.details {
  display: flex;
  flex-direction: column;
}

.user-icon {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0; /* ユーザー情報エリアは縮まない */
}
.user-icon .organizer-icon,
.user-icon .default-icon {
  width: 24px;
  height: 24px;
  font-size: 24px;
}
/* is-shortでない場合は、名前を非表示 */
.user-icon .organizer-name-short {
  display: none;
}

.details .title {
  font-weight: bold;
  color: #343a40;
}

.details .time {
  font-size: 0.8em;
  color: #868e96;
}

/* --- 短い予約ブロックのスタイル --- */
/* is-shortクラスが付いた予約ブロック */
.reservation-block.is-short {
  padding: 4px 8px; /* さらにpaddingを詰める */
}

/* is-short内のコンテンツは横並びにする */
.reservation-block.is-short .reservation-content {
  flex-direction: row;
  justify-content: flex-start; /* 左寄せ */
  align-items: center;
  gap: 8px; /* 各要素の間隔 */
}

/* is-short内のdetailsも横並びにする */
.reservation-block.is-short .details {
  flex-direction: row;
  align-items: baseline; /* テキストのベースラインを揃える */
  gap: 8px;
  overflow: hidden; /* はみ出し防止 */
}

.reservation-block.is-short .details .title {
  font-size: 0.85em;
  flex-shrink: 1; /* タイトルが長い場合に縮むようにする */
}

.reservation-block.is-short .details .time {
  flex-shrink: 0; /* 時間は縮まないようにする */
  white-space: nowrap;
}

.reservation-block.is-short .category {
  font-size: 0.7em;
  padding: 2px 6px;
}

/* is-shortの場合だけ、名前を表示 */
.reservation-block.is-short .user-icon .organizer-name-short {
  display: inline;
  font-size: 0.8em;
  font-weight: bold;
}

/* is-shortではカテゴリと主催者アイコンは非表示にする */
.reservation-block.is-short .user-icon .organizer-icon,
.reservation-block.is-short .user-icon .default-icon {
  display: none;
}

/* カテゴリタグ */
.category {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.75em;
  font-weight: 500;
  border: 1px solid;
}
.category-visitor {
  background-color: #ffcccc;
  border-color: #ff9999;
  color: #b30000;
}
.category-internal {
  background-color: #ccffcc;
  border-color: #99ff99;
  color: #006600;
}
.category-recruit {
  background-color: #fff6cc;
  border-color: #ffec99;
  color: #8c6d00;
}

/* ユーザーアイコン */
.user-icon {
  color: #888;
}

/* モーダル関連
----------------------- */
/* モーダル関連のスタイル */
.reservation-modal-content {
  border-radius: 12px;
  border: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.modal-body {
  padding: 8px 32px 32px 32px;
}
/* フォームコントロールの設定 */
.modal-body .form-label.fw-bold {
  font-size: 1rem;
  font-weight: bold !important; /* 太さを調整 */
  color: #495057;
  margin-bottom: 12px; /* 入力欄との余白を広げる */
}
.modal-body .form-label i {
  color: #868e96;
  margin-right: 8px;
}
.modal-body .form-control, .select2-container .select2-selection {
  border-radius: 8px !important; /* 角丸を大きく */
  border-color: #ced4da !important;
  padding: 10px 14px !important; /* 少し高さを出す */
  font-size: 1rem;
}
.modal-body .form-control:focus, .select2-container--open .select2-selection {
  border-color: #86b7fe !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}
/* フォームの設定 */
.form-section {
  padding: 12px 0;
}
/* ---フォームヘッダー--- */
.space-info-header {
  display: flex;
  position: relative;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e9ecef;
}
.space-image-placeholder,
.modal-space-image {
  width: 180px;
  height: 120px;
}
.modal-space-image {
  object-fit: cover; /* アスペクト比を保ったまま要素を埋める */
  border-radius: 0.5rem; /* 親要素の角丸に合わせる */
}
.space-image-placeholder {
  background-color: #e9ecef; /* 画像の代わりの背景色 */
  border-radius: 0.5rem;
  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  color: #adb5bd;
  font-weight: bold;
  font-size: 1.2rem;
}
.space-details h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.5rem;
  font-weight: bold;
  color: #212529;
}
.delete-btn {
  position: absolute;
  top: 0;
  right: 0;
}
/* 設備リストのコンテナ */
.equipments-list {
  display: flex;
  flex-wrap: wrap; /* 項目が多ければ折り返す */
  gap: 8px; /* ★各バッジの間の隙間を調整 */
}
/* 設備1つ1つのスタイル（バッジ本体） */
.equipment-item {
  display: inline-flex; /* アイコンとテキストを横並びにする */
  align-items: center;  /* アイコンとテキストを垂直方向に中央揃え */
  gap: 8px;             /* アイコンとテキストの間の隙間 */
  background-color: #f1f3f5; /* ★背景色 (薄いグレー) */
  color: #343a40;           /* ★文字色 (濃いグレー) */
  padding: 6px 12px;        /* ★内側の余白 */
  border-radius: 20px;      /* ★角を丸くしてピル形状にする */
  font-size: 0.875rem;      /* 文字サイズを少し調整 */
  font-weight: bold;         /* 文字の太さを少し太く */
  transition: background-color 0.2s; /* ホバー時のアニメーション */
}
/* 設備アイコンのスタイル */
.equipment-item i {
  color: #495057;
  font-size: 1em;
}
/* 設備なしの場合のスタイル */
.equipment-item.no-equipment {
  background-color: transparent; /* 背景色なし */
  color: #868e96; /* 文字色を薄くする */
  font-weight: normal;
  padding: 6px 0; /* 余白を調整 */
}
/* --- ラジオボタン --- */
/* 利用時間ラジオボタンのラッパー */
#duration-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* 元のラジオボタンを隠す */
#duration-options .form-check-input {
  display: none;
}
/* 新しいラベルのスタイル */
#duration-options .form-check-label {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #ced4da;
  border-radius: 20px; /* ピル形状 */
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s ease;
}
/* ホバー時のスタイル */
#duration-options .form-check-label:hover {
  background-color: #f8f9fa;
  border-color: #868e96;
}
/* 選択された時のスタイル */
#duration-options .form-check-input:checked + .form-check-label {
  background-color: #0d6efd;
  color: #fff;
  border-color: #0d6efd;
  box-shadow: 0 2px 4px rgba(13, 110, 253, 0.2);
}
/* ---参加者リスト--- */
.participant-list,
.participant-list-title {
  font-size: 0.9rem;
  font-weight: bold;
  color: #6c757d;
  margin-top: 0;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e9ecef;
}
.participant-item {
  display: flex;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid #f8f9fa;
  border-radius: 8px;
  transition: background-color 0.2s;
}
.participant-item:hover {
  background-color: #f8f9fa;
}
.participant-item:last-child {
  border-bottom: none;
}
/* 主催者行のスタイル */
.participant-item.organizer {
  background-color: #f1f3f5;
  font-weight: bold;
}
.participant-item.organizer:hover {
  background-color: #e9ecef;
}
.participant-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 12px;
  object-fit: cover;
  flex-shrink: 0;
}
.participant-icon.default {
  font-size: 32px;
  color: #adb5bd;
  line-height: 1;
}
/* ゲストの削除ボタン */
.participant-item .remove-guest {
  margin-left: auto; /* 右端に配置 */
  padding: 0 8px;
  cursor: pointer;
  color: #6c757d;
  font-weight: bold;
}
.participant-item .remove-guest:hover {
  color: #c92a2a;
  transform: scale(1.2); /* 少し大きくしてクリックしやすく */
  transition: all 0.2s;
}

.save-reservation {
  font-size: 1rem;
  font-weight: bold;
  padding: 10px 24px;
  border-radius: 8px;
}

/* ==========================================================================
   # 現在の利用状況画面
============================================================================= */
.filter-switch .form-check-input {
  margin-top: 7px;
}

.l-current-status {
  padding: 20px;
}

.carousel-control.disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none; /* クリックイベントを無効化 */
}

.status-carousel-wrapper {
  position: relative;
  margin: 0 -20px; /* 左右のボタンを配置するスペースを確保 */
}

.status-carousel {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth; /* スムーズスクロール */
  padding: 20px 60px;
  -ms-overflow-style: none;
  scrollbar-width: none;

  min-height: 494px;
}
.status-carousel::-webkit-scrollbar {
  display: none;
}

.status-card {
  flex: 0 0 320px; /* カードの幅を固定 */
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  background-color: #fff;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 角丸を子要素にも適用 */
}

.status-card.hidden-by-filter {
  display: none;
}

/* --- カード上部 --- */
.card-image-section {
  position: relative;
  height: 180px;
  background-color: #f0f0f0;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* アスペクト比を保ったまま要素を埋める*/
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.card-image-placeholder {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  font-weight: bold;
  font-size: 1.5rem;
}

.card-header-overlay {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.space-name {
  background-color: #ffffff;
  color: var(--sr-black);
  padding: 6px 14px;
  border-radius: 5px;
  border: 1px solid var(--sr-black);
  font-weight: bold;
  font-size: 1rem;
}
.status-badge-used, .status-badge-vacant {
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 0.9rem;
}
.status-badge-used { background-color: #dc3545; }
.status-badge-vacant { background-color: #198754; }

.equipments-overlay {
  position: absolute;
  bottom: 12px; /* 画像の下端からの距離 */
  left: 12px;   /* 画像の左端からの距離 */
  display: flex;
  gap: 6px;
}

.equipment-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;  /* 円の直径を少し大きく */
  height: 30px; /* 円の直径を少し大きく */
  background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒 (0.5 = 50%の透明度) */
  color: white;
  border-radius: 50%; /* 完全な円にする */
  font-size: 1rem;    /* アイコンのサイズを少し大きく */
  /*cursor: help; !* ツールチップ表示のためのカーソル *!*/
}

/* --- カード下部 --- */
.card-body {
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.info-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.info-row i.fas {
  color: #6c757d;
  width: 16px;
  text-align: center;
}
.remaining-time {
  font-weight: bold;
  font-size: 1.1rem;
}
.reservation-info {
  margin-top: 16px;
  border-top: 1px solid #f0f0f0;
  padding-top: 16px;
}
.info-title {
  font-size: 0.8em;
  color: #888;
  margin-bottom: 8px;
  font-weight: bold;
}
.category-badge {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.8em;
  font-weight: bold;
  margin-left: auto; /* 右寄せにする */
}
.guest-icon-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.guest-icons .user-icon .organizer-icon,
.guest-icons .user-icon .default-icon {
  width: 28px;  /* カード内では少し小さめに */
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.quick-reserve-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.next-reservation {
  color: #666;
  font-size: 0.9em;
  margin-top: auto; /* 空室の場合に下寄せにする */
}

.card-footer {
  padding: 12px 20px;
  border-top: 1px solid #f0f0f0;
  text-align: right;
  font-size: 0.85em;
}
.card-footer a { color: #666; text-decoration: none; }
.card-footer a:hover { text-decoration: underline; }

/* --- カルーセルボタン --- */
.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255,255,255,0.9);
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  cursor: pointer;
  z-index: 10;
  font-size: 1.5rem;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: background-color 0.2s;
}
.carousel-control:hover {
  background-color: #fff;
}
.carousel-control.prev { left: 0; }
.carousel-control.next { right: 0; }

/* ==========================================================================
   # マイ予約一覧画面
============================================================================= */
/* マイ予約一覧 */
.search-filter-form {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
}
.filter-row {
  display: flex;
  align-items: center;
  gap: 20px;
}
.date-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.date-filter-group .form-control {
  width: 150px;
}
.flatpickr-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  color: #6c757d;
  cursor: pointer;
  pointer-events: none;
}
.date-separator {
  color: #6c757d;
}
.filter-radios .form-check {
  display: inline-block;
  margin-right: 15px;
}
.reservation-list {
  font-size: 0.9rem;
}
.list-header, .reservation-item {
  display: grid;
  grid-template-columns: 80px 140px 100px 1fr 1fr 1fr 60px;
  align-items: center;
  gap: 15px;
  padding: 15px;
}
.list-header {
  color: #6c757d;
  font-weight: bold;
  border-bottom: 2px solid #dee2e6;
}
.reservation-item {
  background-color: #fff;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.col-organizer .organizer-info {
  display: inline-block;
  vertical-align: middle;
}

.col-organizer {
  text-align: center;
  padding-right: 8px;
}

.col-organizer .organizer-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.col-organizer .organizer-icon,
.col-organizer .default-icon {
  width: 40px;
  height: 40px;
}

.col-organizer .default-icon {
  font-size: 40px;
  line-height: 1;
}

.col-organizer .organizer-name {
  display: block; /* ブロック要素にして改行させる */
  font-weight: bold;
  color: #6c757d; /* 少し薄い色に */
  font-size: 0.75em; /* 小さな文字に */
}

.col-datetime .date-label { font-weight: bold; display: block; }
.col-datetime .time-label { color: #6c757d; }
.col-link .btn-icon { font-size: 1.2em; color: #0d6efd; }

.col-status {
  font-size: 0.8rem;
  color: #6c757d;
  line-height: 1.4;
}
.status-detail {
  display: flex;
}
.status-label {
  width: 25px; /* 「前：」「後：」の幅を揃える */
}
.status-time {
  font-weight: bold;
}

/* ==========================================================================
   # マニュアル画面
============================================================================= */
/* マニュアル表示用コンテンツ */
.manual-content {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.8;
  color: #343a40;
}
.manual-content h1,
.manual-content h2,
.manual-content h3,
.manual-content h4,
.manual-content h5,
.manual-content h6 {
  font-weight: bold;
  line-height: 1.4;
  margin-top: 2.5em;
  margin-bottom: 1em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid #e9ecef;
}
.manual-content h1 { font-size: 1.8rem; }
.manual-content h2 { font-size: 1.5rem; }
.manual-content h3 { font-size: 1.25rem; }
.manual-content h4 { font-size: 1.1rem; }
.manual-content h5, .manual-content h6 { font-size: 1.0rem; }
.manual-content strong {
  font-weight: bold;
}
.manual-content table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.95rem;
}
.manual-content th,
.manual-content td {
  border: 1px solid #dee2e6;
  padding: 10px 14px;
  line-height: 1.6;
}
.manual-content th {
  background-color: #f8f9fa;
  font-weight: bold;
  text-align: left;
}
.manual-content tbody tr:nth-child(odd) {
  background-color: #f8f9fa;
}

.manual-content tbody tr:hover {
  background-color: #e9ecef; /* 行にマウスオーバーした時の背景色 */
}
.manual-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 20px 0;
}
.manual-content p {
  margin-bottom: 1.25em;
}
/* ul (順序なしリスト) と ol (順序ありリスト) の共通スタイル */
.manual-content ul, .manual-content ol,
.editor-preview ul, .editor-preview ol {
  padding-left: 2em;
  margin-bottom: 1.25em;
}

/* li (リスト項目) の共通スタイル */
.manual-content li,
.editor-preview li {
  margin-bottom: 0.5em;
  padding-left: 0.5em;
}

/* --- 順序なしリスト (ul) のスタイル --- */
.manual-content ul,
.editor-preview ul {
  list-style-type: disc;
}

/* ★★★ ネストされたリストのセレクタをより強力なものに修正 ★★★ */
/* 2階層目のul */
.manual-content ul li > ul,
.editor-preview ul li > ul {
  list-style-type: circle;
}

/* 3階層目のul */
.manual-content ul ul li > ul,
.editor-preview ul ul li > ul {
  list-style-type: square;
}

/* --- 順序ありリスト (ol) のスタイル --- */
.manual-content ol,
.editor-preview ol {
  list-style-type: decimal;
}

/* ★★★ ネストされたリストのセレクタをより強力なものに修正 ★★★ */
/* 2階層目のol */
.manual-content ol li > ol,
.editor-preview ol li > ol {
  list-style-type: lower-alpha; /* a, b, c... */
}

/* 3階層目のol */
.manual-content ol ol li > ol,
.editor-preview ol ol li > ol {
  list-style-type: lower-roman; /* i, ii, iii... */
}
/* --- リスト内の段落のマージン調整 --- */
.manual-content li p,
.editor-preview li p {
  margin-bottom: 0.5em; /* リスト内のpタグの余白を少し詰める */
}
.manual-content blockquote {
  border-left: 4px solid #ced4da;
  padding-left: 1.5em;
  margin: 1.5em 0;
  color: #6c757d;
}
.manual-content code {
  background-color: #f0f0f0;
  padding: 2px 4px;
  border-radius: 4px;
}
.manual-content pre {
  background-color: #212529;
  color: #f8f9fa;
  padding: 1.2em;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 0.9em;
}
.manual-content pre code {
  background-color: transparent;
  color: inherit;
  padding: 0;
}
.manual-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #dee2e6;
}
.manual-title-area h3 {
  font-size: 2rem; /* タイトルを大きく */
  font-weight: 700;
  color: #212529;
  margin-bottom: 0.75rem;
}
.manual-meta {
  font-size: 0.875rem;
  color: #6c757d;
  margin: 0;
}
.manual-content {
  line-height: 1.8;
}
.editor-info {
  display: flex;
  align-items: center;
  gap: 12px; /* アイコンとテキストの間の隙間 */
}
.editor-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0; /* アイコンが縮まないようにする */
}
.editor-icon.default {
  font-size: 32px;
  color: #adb5bd;
  line-height: 1;
}
.editor-details {
  display: flex;
  flex-direction: column;
}
.editor-name {
  font-weight: bold;
  color: #212529;
}
.update-date {
  font-size: 0.8rem;
  color: #6c757d;
}
/* 目次スタイル */
.manual-content .table-of-contents {
  list-style: none; /* デフォルトの黒丸を消す */
  padding: 24px 30px;
  margin: 0 0 2.5rem 0; /* 下にだけマージン */
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  position: relative; /* 「目次」タイトルを配置する基準点 */
}

/* ::before疑似要素を使って「目次」というタイトルをCSSで挿入 */
.manual-content .table-of-contents::before {
  content: '目次'; /* 表示したいテキスト */
  display: block;
  font-size: 1.2rem;
  font-weight: bold;
  color: #212529;
  padding-bottom: 10px;
  margin-bottom: 15px;
  border-bottom: 1px solid #dee2e6;
}

/* 目次の各項目（li）のスタイル */
.manual-content .table-of-contents li {
  padding: 4px 0;
}

/* 目次のリンク（a）のスタイル */
.manual-content .table-of-contents a {
  text-decoration: none; /* アンダーラインを常に非表示 */
  color: #212529;       /* 文字色を黒に */
  transition: color 0.2s;
}
.manual-content .table-of-contents a:hover {
  text-decoration: underline; /* ホバー時だけアンダーラインを表示 */
  color: #0d6efd;
}

/* 階層ごとのインデント */
.manual-content .table-of-contents ul {
  list-style: none;
  padding-left: 20px; /* サブリストのインデント */
  margin-top: 10px;
}

/* CodeMirrorのラッパー要素 */
.EasyMDEContainer .CodeMirror {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem; /* 基本のフォントサイズを統一 */
  color: #212529;
}

/* 見出し(h1, h2, ...)などのスタイルをリセット */
.EasyMDEContainer .CodeMirror .cm-header {
  font-size: 1em !important; /* 親要素と同じフォントサイズにする */
  font-weight: normal !important; /* 太字を解除 */
  line-height: inherit !important; /* 行の高さを親に合わせる */
}

/* 各レベルの見出しも個別にリセット */
.EasyMDEContainer .CodeMirror .cm-header-1,
.EasyMDEContainer .CodeMirror .cm-header-2,
.EasyMDEContainer .CodeMirror .cm-header-3,
.EasyMDEContainer .CodeMirror .cm-header-4,
.EasyMDEContainer .CodeMirror .cm-header-5,
.EasyMDEContainer .CodeMirror .cm-header-6 {
  font-size: 1em !important;
  font-weight: normal !important;
}
.editor-preview img,
.manual-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.form-buttons {
  display: flex;
  gap: 10px; /* ボタン間の隙間を10pxに設定 */
}

/* プレビューエリア全体の基本フォントサイズを小さくする */
.editor-preview {
  font-size: 12px; /* お好みで調整してください */
  line-height: 1.6;
}

/* プレビューエリア内の見出しのスタイル */
.editor-preview h1,
.editor-preview h2,
.editor-preview h3,
.editor-preview h4,
.editor-preview h5,
.editor-preview h6 {
  margin-top: 1.5em;
  margin-bottom: 0.8em;
  border-bottom: 1px solid #eee;
  padding-bottom: 0.4em;
}

/* 各見出しのフォントサイズをプレビュー用に調整 */
.editor-preview h1 { font-size: 1.8em; } /* 14px * 1.8 = 25.2px */
.editor-preview h2 { font-size: 1.5em; } /* 14px * 1.5 = 21px */
.editor-preview h3 { font-size: 1.2em; } /* 14px * 1.2 = 16.8px */

/* プレビューエリア内の画像スタイルも調整 */
.editor-preview img {
  max-width: 100%;
  height: auto;
  margin: 1em 0;
  border-radius: 4px;
  box-shadow: none;
}

/* プレビューエリア内の段落 */
.editor-preview p {
  margin-bottom: 0.8em;
}

.editor-preview strong {
  font-weight: bold;
}

/* 引用 */
.editor-preview blockquote {
  border-left: 4px solid #ced4da;
  padding-left: 1.5em;
  margin: 1.5em 0;
  color: #6c757d;
}