/* カレンダーコンテナのスタイル */
.cs-calendar-admin, .cs-calendar-frontend {
    max-width: 1300px;
    margin: 20px auto;
}

/* ★追加: FullCalendarのボタンが押せるようにz-indexを調整 */
.fc-toolbar {
    position: relative;
    z-index: 1;
}

.fc-toolbar button {
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* FullCalendarのデフォルトイベント表示を隠す */
.fc-event {
    display: none !important;
}

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

/* 3枠表示用のコンテナ */
.cs-day-slots {
    display: flex;
    flex-direction: column;
    height: 90px;
    margin-top: 5px;
    gap: 2px;
    /* ★修正: クリック可能を強制 (親要素も) */
    pointer-events: auto !important;
}

/* 各枠のスタイル */
.cs-slot {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    border: 1px solid #ddd;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    /* ★修正: クリック可能を強制 */
    pointer-events: auto !important; 
}

/* 管理画面でのホバー効果 */
.cs-calendar-admin .cs-slot:hover {
    background-color: #f0f0f0;
    border-color: #999;
}

/* 予約確定（赤） */
.cs-slot-reserved {
    background-color: #E84A5F !important;
    color: #fff !important;
    border-color: #E84A5F !important;
}

/* 仮予約（水色） */
.cs-slot-tentative {
    background-color: #3B97B5 !important;
    color: #fff !important;
    border-color: #3B97B5 !important;
}

/* 保守点検日（灰色） */
.cs-slot-maintenance {
    background-color: #AAAAAA !important;
    color: #fff !important;
    border-color: #AAAAAA !important;
}

/* フロントエンド（閲覧専用）での操作無効化 */
.cs-calendar-frontend .cs-slot {
    cursor: default !important;
    pointer-events: none !important;
}

.cs-calendar-frontend .cs-slot:hover {
    background-color: inherit;
    border-color: #ddd;
}

/* ポップアップ（モーダル）のスタイル */
.cs-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

.cs-modal-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    width: 400px;
    max-width: 90%;
}

.cs-modal-content h3 {
    margin-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.cs-modal-content label {
    display: block;
    margin-top: 15px;
    font-weight: bold;
}

.cs-modal-content input[type="text"],
.cs-modal-content input[type="date"],
.cs-modal-content select {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.cs-modal-buttons {
    margin-top: 30px;
    text-align: right;
}

.cs-modal-buttons button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 10px;
    font-weight: bold;
}

.cs-btn-save {
    background-color: #0073aa;
    color: #fff;
}

.cs-btn-save:hover {
    background-color: #005177;
}

.cs-btn-cancel {
    background-color: #eee;
    color: #333;
}

.cs-btn-cancel:hover {
    background-color: #ddd;
}

.cs-btn-delete {
    background-color: #d63638;
    color: #fff;
}

.cs-btn-delete:hover {
    background-color: #b02a2c;
}

/* 日付番号のコンテナ（.fc-daygrid-day-top）にも中央寄せを適用 */
.fc-daygrid-day-top {
    /* 親要素に対し中央寄せを適用 */
    text-align: center !important; 
}

/* 日付番号の調整 */
.fc-daygrid-day-number {
    padding: 4px;
    font-weight: bold;
    /* FullCalendarのデフォルトfloat: rightを解除し、幅を確保し、中央寄せを強制 */
    float: none !important;
    display: block !important;
    width: 100%; 
    text-align: center !important;
}

/* 過去の日付を少し暗く */
.fc-day-past .cs-slot {
    opacity: 0.6;
}

/* ---------------------------------------------------------------------- */
/* 曜日ヘッダーと日付の色付け */
/* ---------------------------------------------------------------------- */

/* 1. カレンダーヘッダー（曜日表記）の色付け */

/* 全ての曜日の子孫要素に対し、デフォルトを黒に設定 (平日を黒に強制) */
.fc-col-header-cell * {
    color: #333333 !important; /* 黒 */
}

/* 日曜日: 赤色 (黒設定を上書き) */
.fc-col-header-cell.fc-day-sun * {
    color: #D63638 !important; /* 赤 */
}

/* 土曜日: 青色 (黒設定を上書き) */
.fc-col-header-cell.fc-day-sat * {
    color: #3B97B5 !important; /* 青 */
}


/* 2. カレンダー本体（日付番号）の色付け */

/* 平日（月〜金）の列: 日付番号を黒色 (デフォルト) */
.fc-daygrid-day-number {
    color: #333333; 
}

/* 日曜日の列: 日付番号を赤色 */
.fc-day-sun .fc-daygrid-day-number {
    color: #D63638 !important; /* 赤 */
}

/* 土曜日の列: 日付番号を青色 */
.fc-day-sat .fc-daygrid-day-number {
    color: #3B97B5 !important; /* 青 */
}

/* 月を跨いだ日付の色を薄い灰色に設定（オプション：デフォルトスタイルを維持） */
.fc-day-other .fc-daygrid-day-number {
    color: #bbbbbb; 
}