/* ========================================================================
  カレンダー共通スタイル
  ======================================================================== */

  /* ステータス凡例のストライプ表示 */
  .legend-striped {
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
    background-size: 4px 4px;
    border-left-width: 0;
  }

  .fc-event {
    border-width: 0;
    border-left-width: 4px;
    padding: 0 5px;
    word-break: break-all;
  }

  .fc-event:hover {
    filter: brightness(1.05);
  }

  /* タイトルサイズ調整 */
  .fc-toolbar-title {
    font-size: 24px;
  }

  /* ボタンスタイルを btn-white に合わせて調整 */
  .fc-button {
    background-color: white !important;
    border: 1px solid var(--color-gray-400) !important;
    color: var(--color-gray-600) !important;
    border-radius: 0.375rem; /* rounded-md */
    padding: 0.5rem 0.75rem; /* px-3 py-2 */
    font-weight: 500 !important; /* font-medium */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; /* shadow-sm */
    font-size: 14px !important;

    &:hover {
      background-color: var(--color-gray-100) !important;
      color: var(--color-gray-800) !important;
    }

    &:disabled {
      opacity: 0.5 !important;
      cursor: not-allowed !important;
    }
  }

  /* ボタングループ内の隣接ボタンの枠線重なりを防ぐ */
  .fc-button-group {
    .fc-button {
      &:not(:first-child) {
        margin-left: -1px;
        border-radius: 0;
      }

      &:first-child {
        border-radius: 0.375rem 0 0 0.375rem;
      }

      &:last-child {
        border-radius: 0 0.375rem 0.375rem 0;
        margin-right: 0;
      }
    }
  }

/* ========================================================================
  行程カレンダー専用スタイル
  ======================================================================== */

#itinerary-calendar {
  /* タイトルを全体の中央に配置 */
  .fc-header-toolbar {
    display: flex;
    align-items: center;
  }

  .fc-toolbar-chunk {
    flex: 1;
    display: flex;
    justify-content: center;
  }

  .fc-toolbar-chunk:first-child {
    justify-content: flex-start;
  }

  .fc-toolbar-chunk:last-child {
    justify-content: flex-end;
  }

  /* イベント本体の背景に、対応中のものはストライプをかぶせる */
  .fc-event.in-progress {
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
    background-size: 3rem 3rem;
  }

  /* 日付、ツアータイトル、日付情報を表示するセルを全幅表示する設定 */
  .fc-col-header-cell-cushion {
    width: 100%;
    padding-right: 0 !important;
    padding-left: 0 !important;
    color: #000;
  }

  /* 無効化された日付列の設定 */
  .fc-disabled-resource {
    cursor: not-allowed !important;
    border-left-width: 0 !important;
  }

  /* 列の右側に余白を残す */
  .fc-timegrid-col-frame {
    margin-right: 7px;
  }

  /* 無効化されたリソースが含まれるtimegrid-col-frameのmarginを無くす */
  .fc-timegrid-col-frame:has(.fc-disabled-resource) {
    margin-right: 0 !important;
  }

  /* 30分以下の予定でも通常と同じフォントサイズで表示 */
  .fc-timegrid-event-short .fc-event-title {
    font-size: 11.9px;
  }

  /* FIXME: RedHatが等幅じゃないので時刻列だけ表示崩れないようにフォント変えてる */
  .fc-timegrid-axis-chunk {
    font-family: "Noto Sans JP", sans;
  }

  /* 今日の日付の背景色を無効化 */
  .fc-day-today {
    background-color: transparent !important;
  }

  /* ハイライト時は表示順を上げる */
  .fc-timegrid-col-bg:has(.fc-highlight) {
    z-index: 5;
  }
}


/* ========================================================================
  ガイドカレンダー専用スタイル
  ======================================================================== */

#guide-calendar {
  /* 取消中ステータスのストライプ表示 */
  .fc-event.striped {
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
    background-size: 8px 8px;
    border-left-width: 0;
  }

  /* 日付を黒字に設定 */
  .fc-timeline-slot-cushion {
    color: var(--color-black);
  }

  /* タイトルサイズ調整 */
  .fc-toolbar-title {
    font-size: 24px;
  }


  /* この位置に凡例を表示するために幅を確保 */
  .fc-toolbar-chunk:first-child {
    width: 320px;
  }
}

/* ========================================================================
  ガイド側画面のスケジュール専用スタイル
  ======================================================================== */

#guide-view-calendar {
  /* ヘッダーツールバーを非表示 */
  .fc-header-toolbar {
    display: none;
  }

  /* 取消中ステータスのストライプ表示 */
  .fc-event.striped {
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
    background-size: 8px 8px;
    border-left-width: 0;
  }

  /* 日付セルの高さを調整 */
  .fc-daygrid-day-frame {
    min-height: 80px !important;
  }

  /* 日付番号のスタイル */
  .fc-daygrid-day-number {
    font-size: 12px;
    padding: 2px 4px;
    font-weight: 700;
    color: var(--color-gray-800) !important;
  }

  /* 日付番号を左寄せ */
  .fc-daygrid-day-top {
    flex-direction: row !important;
  }

  /* 今日の背景色を無効化 */
  .fc-day-today {
    background-color: transparent !important;
  }

  .fc-event-title {
    padding: 0 !important;
  }

  /* もっと見るリンクのスタイル */
  .fc-daygrid-more-link {
    font-size: 11px;
    color: #6b7280;
    padding: 2px 4px;
  }

  /* 曜日ヘッダーのスタイル */
  .fc-col-header-cell {
    font-weight: 600;
    font-size: 12px;
    background-color: var(--color-gray-100) !important;
  }

  /* 平日の色（黒） */
  .fc-col-header-cell-cushion {
    color: var(--color-gray-800) !important;
  }

  /* 日曜日の色（赤） */
  .fc-day-sun .fc-col-header-cell-cushion {
    color: var(--color-red-600) !important;
  }
  
  /* 日曜日の日付番号の色 */
  .fc-day-sun .fc-daygrid-day-number {
    color: var(--color-red-600) !important;
  }

  /* 土曜日の色（赤） */
  .fc-day-sat .fc-col-header-cell-cushion {
    color: var(--color-red-600) !important;
  }

  /* 土曜日の日付番号の色 */
  .fc-day-sat .fc-daygrid-day-number {
    color: var(--color-red-600) !important;
  }

  /* 今日の日付を青丸で囲み文字は白色にする */
  .fc-day-today .fc-daygrid-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--color-blue-500) !important;
    color: white !important;
    font-weight: 700;
  }

  /* PCのみ: 曜日ヘッダーと日付番号を大きく表示 */
  @media (min-width: 768px) {
    .fc-col-header-cell {
      font-size: 14px;
    }

    .fc-daygrid-day-number {
      font-size: 14px;
    }
  }

  /* PCのみ: 日付セルホバー時に薄い背景色 */
  @media (hover: hover) {
    .fc-daygrid-day:hover {
      background-color: var(--color-gray-50) !important;
      cursor: pointer;
    }
  }
}