/*
  FullCalendar 親ルーム・子ルーム 表示調整用CSS
  - dayGrid (月表示): 親子イベントを横並びで表示
  - timeGrid (週・日表示): 親イベントを背景に、子イベントを手前に重ねて表示
*/

/* =================================== */
/* dayGrid (月表示) のスタイル          */
/* =================================== */
.fc .fc-daygrid-event.evt-parent {
    width: 100% !important;
}

.fc .fc-daygrid-event.evt-child {
    /* 子イベントの数に応じて幅を分割 */
    width: calc(100% / var(--child-count, 1)) !important;
    margin-right: 2px;
}


/* =================================== */
/* timeGrid (週・日表示) のスタイル     */
/* =================================== */

/* --- イベント本体のスタイル調整 --- */
.fc-timegrid-event.evt-parent {
    opacity: 0.6;
}
.fc-timegrid-event.evt-child {
    box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

/* 親イベントを含むコンテナのスタイル */
.fc-timegrid-event-harness:has(> .evt-parent) {
    width: 100% !important;
    left: 0 !important;
    z-index: 1 !important; /* 奥に配置 */
}

/* 子イベントを含むコンテナのスタイル */
.fc-timegrid-event-harness:has(> .evt-child) {
    left: 0 !important;
    z-index: 2 !important;    /* 手前に配置 */

}

/* 左側に固定するイベント (幅50%) */
.fc-timegrid-event.event-position-left {
    width: 50% !important;   /* 幅を強制的に50%に設定 */
    left: 0 !important;       /* 左端に配置 */
    right: auto !important;   /* rightの自動計算を無効化 */
    padding-right: 2px;       /* 右側に少し余白を持たせる */
}

/* 右側に固定するイベント (幅50%) */
.fc-timegrid-event.event-position-right {
    width: 50% !important;   /* 幅を強制的に50%に設定 */
    left: 50% !important;      /* 左から50%の位置に配置 */
    right: auto !important;   /* rightの自動計算を無効化 */
    padding-left: 2px;        /* 左側に少し余白を持たせる */
}
/* 予約不可の日付セルのスタイル */
.fc-day-unavailable {
    background-color: #f0f0f0; /* 薄いグレー */
    /* pointer-events: none;  // クリックも無効化したい場合 */
}

/* 「今日」のセルが予約不可だった場合に、背景色を優先する */
.fc-day-today.fc-day-unavailable {
    background-color: #f0f0f0 !important;
}