/* ==================================== */
/* 1. 基本設定とヘッダー */
/* ==================================== */
body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f3f5; /* LINEの背景色に近い色 */
}

h1 {
    text-align: center;
    padding-top: 15px;
    color: #333;
}

/* selectタグの共通スタイル */
select {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 20px;
    border: 2px solid #ccc;
    border-radius: 8px;
    background-color: #fcfcfc;
    font-size: 1em;
    cursor: pointer;
    appearance: none; /* デフォルトの矢印を非表示 */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007bff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-24.8%200L146.2%20205.2%2030.3%2069.4a17.6%2017.6%200%200%200-24.8%2024.8l130.4%20130.5c6.8%206.8%2017.8%206.8%2024.6%200l130.4-130.5a17.6%2017.6%200%200%200%200-24.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 12px;
}

/* disabled状態のselect */
select:disabled {
    background-color: #e9ecef;
    border-color: #adb5bd;
    color: #6c757d;
    cursor: not-allowed;
    background-image: none; /* 矢印も非表示 */
}

/* フォーカス時の強調表示 */
select:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    outline: none;
}

/* ==================================== */
/* 予約画面トップに表示するユーザ情報
/* ==================================== */
#userClassInfo {
    background-color: #e9f7ff; /* 非常に薄い青の背景 */
    padding: 5px;
    border-radius: 8px;
    margin-bottom: 10px;
    border-left: 5px solid #007bff; /* メインカラーのアクセントライン */
}

/* ユーザー名 (より目立たせる) */
#userName {
    font-size: 0.8em;
    font-weight: bold;
    color: #343A40; /* 濃いグレー/黒 */
    margin-bottom: 5px;
}

/* クラス名 (ブランドカラーで表示) */
#userClassName {
    font-size: 0.8em;
    color: #343A40; /* メインカラーの青 */
    font-weight: 600;
}

/* ==================================== */
/* クラス・回数選択エリア */
/* ==================================== */
#user-select {
    max-width: 400px;
    margin: 20px auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* 見出し */
#user-select h3 {
    font-size: 1.2em;
    color: #007bff; /* メインカラー */
    margin-top: 25px;
    margin-bottom: 10px;
    font-weight: 600;
    border-bottom: 2px solid #e0f7ff;
    padding-bottom: 5px;
}

/* ------------------------------------- */
/* フォーム要素 (select, button) */
/* ------------------------------------- */



/* ボタンのスタイル */
#classSubmitBtn {
    width: 100%;
    padding: 15px;
    font-size: 1.1em;
    font-weight: bold;
    color: #ffffff;
    background-color: #28a745; /* 成功・登録を表す緑色 */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 10px;
}

/* ボタンのホバー/タップ時のスタイル */
#classSubmitBtn:hover {
    background-color: #218838;
}

/* ==================================== */
/* 予約リストエリア */
/* ==================================== */
.reservation-item { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    background-color: white; 
    padding: 15px; 
    border-bottom: 1px solid #e0e0e0; 
}

.date-time { 
    font-size: 17px; 
    font-weight: bold; 
    color: #333; 
}

.lesson-name { 
    font-size: 14px; 
    color: #555; 
    margin-top: 4px; 
}

.cancel-area { 
    text-align: right; 
    margin-left: 10px; 
}

.cancel-button { 
    background: none; 
    border: 1px solid #ccc; 
    color: #e53935; /* 赤色 */ 
    padding: 6px 10px; 
    border-radius: 5px; 
    cursor: pointer; 
    font-size: 13px; 
    font-weight: bold; 
}

.cancel-limit { 
    font-size: 10px; 
    color: #888; 
    margin-top: 4px; 
    display: block; 
}

.cancelled-item { 
    opacity: 0.5; 
}

/* 選択された日付セルのスタイル */
.day-cell.selected-day {
    /* 選択状態を強調するスタイル */
    background-color: #5b9edb; /* 青などの強調色 */
    color: white; /* 文字色を白に */
    border: 2px solid #3a75a8;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/* フィルタリング可能な日付のカーソルを変更 */
.day-cell {
    cursor: pointer; 
}

/* ==================================== */
/* 4. カスタムモーダル */
/* ==================================== */
.modal-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, 0.6); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    z-index: 1000; 
}

.modal-content { 
    background-color: white; 
    border-radius: 8px; 
    padding: 25px; 
    width: 85%; 
    max-width: 380px; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 
    text-align: center; 
}

.modal-title { 
    font-size: 18px; 
    font-weight: bold; 
    color: #333; 
    margin-bottom: 15px; 
}

.modal-message { 
    font-size: 15px; 
    color: #555; 
    line-height: 1.5; 
    margin-bottom: 25px; 
}

.modal-actions { 
    display: flex; 
    justify-content: space-around; 
    gap: 10px; 
}

.modal-button { 
    flex: 1; 
    padding: 12px 15px; 
    border: none; 
    border-radius: 6px; 
    font-size: 16px; 
    cursor: pointer; 
    font-weight: bold; 
}

.modal-button.modal-cancel { 
    background-color: #e0e0e0; 
    color: #555; 
}

.modal-button.modal-confirm { 
    background-color: #00b900; 
    color: white; 
}

/* ==================================== */
/* 予約画面 (reservationArea) の基本設定 */
/* ==================================== */
#reservationArea {
    padding: 15px;
    background-color: #f8f9fa; /* やや明るい背景色 */
    border-radius: 8px;
    max-width: 600px; /* PC/タブレットでの表示幅を制限 */
    margin: 0 auto;
}

#reservationArea.hidden {
    display: none;
}

#reservationArea h2 {
    color: #007bff; /* メインカラー */
    border-bottom: 2px solid #007bff;
    padding-bottom: 5px;
    margin-bottom: 20px;
}

/* ==================================== */
/* カレンダーヘッダー (月移動部分) */
/* ==================================== */
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 5px 0;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-weight: bold;
    font-size: 18px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

#current-month-res {
    flex-grow: 1;
    text-align: center;
    color: #333;
}

.calendar-header button {
    background-color: transparent;
    border: none;
    color: #007bff;
    font-size: 24px;
    cursor: pointer;
    padding: 0 15px;
    transition: color 0.2s;
}

.calendar-header button:hover {
    color: #0056b3;
}

/* ==================================== */
/* カレンダー本体 (日付部分) */
/* ==================================== */
.calendar {
    width: 100%;
    /* 7列のグリッドレイアウト */
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background-color: white; /* グリッドの線として機能 */
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden; /* 角丸を適用 */
}

/* 曜日ヘッダー */
.calendar-day-header {
    background-color: #e9ecef;
    text-align: center;
    padding: 8px 0;
    font-weight: bold;
    font-size: 14px;
}

/* 日曜日 (赤字) */
.calendar-day-header:nth-child(1) {
    color: #dc3545; /* 赤 */
}

/* 土曜日 (青字) */
.calendar-day-header:nth-child(7) {
    color: #007bff; /* 青 */
}

/* 個々の日付セル */
.calendar-cell {
    background-color: #fff;
    height: 40px; /* セルの高さを確保 */
    padding: 5px;
    text-align: right;
    font-size: 16px;
    cursor: default;
    position: relative;
    transition: background-color 0.2s;
    user-select: none;
}

/* 非アクティブな日 (先月/来月の日付) */
.calendar-cell.inactive {
    color: #aaa;
    background-color: #f4f4f4;
    cursor: default;
}

/* 予約可能な日 (クリック可能な日) */
.calendar-cell.available {
    cursor: pointer;
    border-bottom: 3px solid #28a745; /* 緑の線で予約可能を示す */
}

.calendar-cell.available:hover {
    background-color: #e2f0e7; /* ホバーで薄い緑 */
}

/* 選択中の日 */
.calendar-cell.selected {
    background-color: #ffc107; /* 黄色で選択中を示す */
    font-weight: bold;
}

/* 予約枠を示すインジケーター */
.capacity-indicator {
    position: absolute;
    bottom: 3px;
    left: 3px;
    font-size: 8px;
    font-weight: bold;
    color: #28a745; /* 緑色 */
}

/* 満席の日 */
.calendar-cell.full {
    border-bottom: 3px solid #dc3545; /* 赤の線で満席を示す */
    color: #dc3545;
}

/* ==================================== */
/* 選択詳細エリア (selectionDetails) */
/* ==================================== */
.selection-details {
    margin-top: 25px;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

#selectedDateText {
    color: #333;
    margin-bottom: 10px;
    font-size: 1.1em;
}

#availableClassesList {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 予約枠ボタン */
.class-slot-btn {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #17a2b8; /* インフォメーションブルー */
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s, opacity 0.2s;
}

.class-slot-btn:hover:not(:disabled) {
    background-color: #138496;
}

.class-slot-btn:disabled {
    background-color: #6c757d; /* グレーアウト */
    cursor: not-allowed;
    opacity: 0.6;
}

/* ==================================== */
/* 授業なしの日 (提案色：薄い灰色) */
/* ==================================== */
.calendar-cell.no-lesson {
    background-color: #f9f9f9; /* わずかに灰色 */
    color: #bbb; /* 文字を薄く */
    cursor: default;
    border-bottom: none; /* 下線を削除 */
}

/* ==================================== */
/* 受講済みの日
/* ==================================== */

/* 受講済みマークのバッジ */
.my-attended-badge {
    position: absolute;
    top: 3px;
    left: 3px;
    background-color: #6c757d; /* グレー */
    color: white;
    font-size: 8px;
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: bold;
    line-height: 1;
    z-index: 10; /* 他の要素より手前に表示 */
}

/* ==================================== */
/* 予約済みの日の強調 (一覧画面と同じ青) */
/* ==================================== */

/* 予約済みのセルに適用 */
.calendar-cell.my-reserved {
    /* 予約済みの日は他の色を上書きして薄い水色にする */
    background-color: #e6f7ff; /* 薄い水色 */
    border-top: 2px solid #4AC3FF; /* LINEブルーで上部に線 */
    /* 予約可/満席の下線と共存させるため、border-bottomはそのまま残す */
}

/* 予約済みマークのバッジ */
.my-reserved-badge {
    position: absolute;
    top: 3px;
    left: 3px;
    background-color: #4AC3FF; /* LINEブルー */
    color: white;
    font-size: 8px;
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: bold;
    line-height: 1;
    z-index: 10; /* 他の要素より手前に表示 */
}

/* 日付の数字を囲むspan（JSで追加） */
.calendar-cell .date-number {
    display: block; /* 日付を独立させ、右寄せを維持 */
}

/* 予約済みの日の日付番号を強調 */
.calendar-cell.my-reserved .date-number {
    color: #007bff; /* 青文字 */
    font-weight: bold;
}

/* ==================================== */
/* 既存のクラスの再確認 (色の役割) */
/* ==================================== */

/* 空席あり：緑 */
.calendar-cell.available {
    cursor: pointer;
    border-bottom: 2px solid #28a745; /* 緑の線 */
}

/* 満席：赤 */
.calendar-cell.full {
    border-bottom: 2px solid #dc3545; /* 赤の線 */
    color: #333; /* 文字色は黒を維持（見やすさのため）*/
}

/* 予約枠を示すインジケーター（残席数や「満席」の文字） */
.capacity-indicator {
    /* ... 既存のスタイル ... */
    font-weight: bold;
    /* 満席の場合は文字色を赤にする */
    color: #28a745; /* デフォルトは緑 */
}

.calendar-cell.full .capacity-indicator {
    color: #dc3545; /* 満席の日は赤 */
}