/* ==========================================================================
   共通のデザインスタイル
   ========================================================================== */
body {
    font-family: system-ui, Arial, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
    overflow-x: hidden; 
}

.section {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-group label {
    font-weight: bold;
}

.form-group input,
.form-group select {
    border-radius: 4px;
}

.btn-submit {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-submit:hover {
    background-color: #0056b3;
}

.btn-delete {
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 5px 10px;
}
.btn-delete:hover {
    background-color: #c82333;
}

/* ==========================================================================
   ログインページ (`login.html`) のデザイン
   ========================================================================== */
#login-page .container {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

#login-page h1 {
    color: #333;
    font-size: 28px;
}

#login-page .error {
    color: #dc3545;
    font-size: 14px;
    font-weight: bold;
}

/* ==========================================================================
   管理ページ (`admin.html`) のデザイン
   ========================================================================== */
#admin-page .header h1 {
    font-size: 28px;
}

#admin-page .logout-btn {
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#admin-page .logout-btn:hover {
    background-color: #5a6268;
}

#admin-page th {
    background-color: #f2f2f2;
}

/* --- 予約カレンダー --- */
.timeline-header {
    font-weight: bold;
    color: #555;
}
.timeline-corner, .date-label {
    font-weight: bold;
}
.date-label {
    color: #333;
}
.hour-label {
    font-size: 12px;
}

.reservation-block {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    font-size: 12px;
    padding: 2px 4px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    z-index: 10;
    cursor: grab;
}

.timeline-row.is-closed {
    background-color: #f0f0f0;
    position: relative;
}
.timeline-row.is-closed::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(230, 230, 230, 0.5);
    z-index: 50;
    cursor: not-allowed;
}
.custom-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    cursor: e-resize;
    z-index: 20;
}
.grid-cell.is-disabled {
    background-color: #f0f0f0;
    cursor: not-allowed;
}

.reservation-block.invalid-drop {
    background-color: rgba(220, 53, 69, 0.7) !important;
    border-color: #dc3545 !important;
    cursor: no-drop !important;
}

/* --- 予約追加・編集モーダル --- */
.modal-content {
    background-color: #ffffff !important;
    color: #333333 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
    z-index: 1001;
}
.btn-cancel {
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}
.btn-cancel:hover {
    background-color: #5a6268;
}
#edit-modal .modal-content {
    width: 90%;
    max-width: 350px;
}
#edit-modal .form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
}
#edit-modal .form-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --- 休業日管理カレンダー --- */
#closed-day-datepicker .ui-datepicker {
    width: 100% !important;
}
.ui-datepicker-multi .ui-datepicker-group {
    flex: 1;
}
.ui-datepicker-multi .ui-datepicker-group .ui-datepicker-calendar {
    width: 100%;
}
#closed-day-datepicker .ui-state-active {
    background: #dc3545 !important;
    color: #e9ecef !important;
    border-color: #c82333 !important;
}
#closed-day-datepicker .ui-datepicker-calendar tbody td:hover a {
    background: #007bff !important;
    color: white !important;
    border-color: #0056b3 !important;
}

/* --- キャンセル待ちリスト --- */
.send-message-btn {
    background-color: #00B900;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 5px 10px;
}
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  vertical-align: middle;
}
.switch input { display:none; }
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}
input:checked + .slider { background-color: #2196F3; }
input:checked + .slider:before { transform: translateX(26px); }
.slider.round { border-radius: 24px; }
.slider.round:before { border-radius: 50%; }
.mode-text {
    display: inline-block;
    width: 30px;
    text-align: center;
    font-weight: bold;
}

/* ==========================================================================
   キャンセル待ちページ (`index.html`) のデザイン
   ========================================================================== */
body#index-page { background-color: #1a1a1a; color: #cccccc; font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif; line-height: 1.7; }
#index-page .container { background-color: #262626; border-radius: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); border: 1px solid #444; }
#index-page h1, #index-page h2, #index-page h3 { font-family: 'Playfair Display', serif; color: #ffffff; font-weight: 700; }
#index-page h1 { font-size: 2.5em; border-bottom: 2px solid #c5a576; padding-bottom: 15px; margin-bottom: 25px; text-align: center; }
#index-page .form-group label { font-weight: bold; color: #c5a576; font-size: 0.9em; text-transform: uppercase; }
#index-page .form-group input, #index-page .form-group select { background-color: #1a1a1a; border: 1px solid #555; color: #cccccc; border-radius: 3px; padding: 12px; font-size: 16px; }
#index-page .form-group input:focus, #index-page .form-group select:focus { outline: none; border-color: #c5a576; }
#index-page .btn-submit { background-color: #c5a576; color: #1a1a1a; font-size: 16px; font-weight: bold; text-transform: uppercase; padding: 15px; }
#index-page .btn-submit:hover { background-color: #d9b88a; transform: translateY(-2px); }
#index-page #line-add-friend-btn, #index-page #line-login-button { display: flex; align-items: center; justify-content: center; height: 52px; box-sizing: border-box; padding: 0 15px; font-size: 16px; font-weight: bold; text-transform: uppercase; text-decoration: none; background-color: #c5a576 !important; color: #1a1a1a !important; border: none; border-radius: 3px; transition: background-color 0.3s, transform 0.2s; }
#index-page #line-add-friend-btn:hover, #index-page #line-login-button:hover { background-color: #d9b88a !important; transform: translateY(-2px); }
#index-page #line-login-button { margin-top: 15px; }
#index-page .info-box { background-color: rgba(0, 0, 0, 0.2); border-left: 4px solid #c5a576; border-radius: 0; padding: 20px; margin-bottom: 30px; }
#index-page #form-message.success { background-color: #38594f; color: #a7e0c5; border-radius: 3px; }
#index-page #form-message.error { background-color: #5d2a2a; color: #f5c6cb; border-radius: 3px; }
#index-page .closed-dates-list { list-style-type: none; padding-left: 0; }
#index-page .month-title { color: #c5a576; font-size: 1.1em; border-bottom: 1px solid #444; padding-bottom: 5px; margin-top: 20px; }

/* ==========================================================================
   レスポンシブ対応
   ========================================================================== */
@media (max-width: 991px) {
    .modal-overlay {
        background: rgba(0, 0, 0, 0.8);
    }
    #admin-page .container-fluid { 
        padding-left: 0; 
        padding-right: 0;
    } 
    .section { padding: 15px; }
    #admin-page th, #admin-page td { padding: 8px; }

    /* --- 予約カレンダー (横スクロールあり) --- */
    .timeline-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin-top: 10px;
        padding-bottom: 8px;
    }
    #custom-calendar .timeline-header, 
    #custom-calendar .timeline-body { 
        min-width: 1200px; 
    }
    
    /* --- 休業日カレンダー (スクロールなし) --- */
    #closed-day-datepicker {
        width: 100% !important;
        overflow-x: hidden !important;
    }
    #closed-day-datepicker .ui-datepicker,
    #closed-day-datepicker .ui-datepicker-group,
    #closed-day-datepicker .ui-datepicker-multi {
        display: block !important;
        width: 100% !important;
        float: none !important;
        margin: 0 0 15px 0 !important;
        box-sizing: border-box !important;
    }
    #closed-day-datepicker table.ui-datepicker-calendar {
        display: table !important;
        width: 100% !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
        border-spacing: 0 !important;
    }
    #closed-day-datepicker .ui-datepicker-calendar th,
    #closed-day-datepicker .ui-datepicker-calendar td {
        width: 14.2857% !important;
        padding: 2px 0 !important;
        box-sizing: border-box !important;
        border: none !important;
        text-align: center !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
    }
    #closed-day-datepicker .ui-datepicker-calendar th span,
    #closed-day-datepicker .ui-datepicker-calendar td a,
    #closed-day-datepicker .ui-datepicker-calendar td span {
        display: block !important;
        width: 100% !important;
        height: 32px !important;
        line-height: 32px !important;
        font-size: 12px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* --- キャンセル待ちリスト (スクロールなし) --- */
    #admin-page .table-container.cancel-list {
        overflow-x: hidden !important; /* 横スクロールなし */
        border: none;
    }
    #admin-page .table-container.cancel-list table {
        width: 100%; /* 幅を100%に */
        min-width: unset; /* 最小幅解除 */
        table-layout: auto; /* 列幅自動 */
    }
    .desktop-action-cell {
        display: none !important;
    }
    #waiting-list-table tbody tr {
        cursor: pointer;
    }
    #waiting-list-table tbody tr:hover {
        background-color: #f5f5f5;
    }
    
    /* --- コース管理テーブル (スクロールなし) --- */
    #admin-page .table-container:has(#courses-table) {
        overflow-x: hidden; /* 横スクロールを無効に */
        border: none; /* ボーダーも不要なら削除 */
        width: 100%; /* コンテナ幅を100%に */
    }
    #admin-page #courses-table {
        width: 100%;        /* テーブル幅をコンテナに合わせる */
        table-layout: auto; /* 列幅を自動調整 */
        min-width: unset;   /* 最小幅設定を解除 */
        margin-bottom: 0;
    }
    #admin-page #courses-table th,
    #admin-page #courses-table td {
        word-wrap: break-word;     /* 長い単語を折り返す */
        overflow-wrap: break-word; /* 長い単語を折り返す (word-wrapの代替) */
        white-space: normal !important; /* 強制的に折り返しを有効にする */
    }
}
/* design.css の一番下 */

/* ★★★ iPhone/Safariでプルダウンが操作できない問題の対策 ★★★ */
body#index-page .form-group select {
    -webkit-appearance: menulist !important;
    appearance: menulist !important;
}
/* ========================================================================== 
   Gmail通知エリア
   ========================================================================== */
/* ▼▼▼ 修正: ヘッダー内に配置するためスタイル調整 ▼▼▼ */
#gmail-alert-container {
    width: auto; /* 幅自動 */
    z-index: 1050; 
    box-shadow: none; /* ヘッダー内では不要 */
    margin-bottom: 0; /* ヘッダー内では不要 */
    position: relative; /* バッジの位置基準用 */
}

/* 通知がある場合のボタンスタイル */
#gmail-alert-container button#toggle-alerts-btn {
    padding: 6px 10px; /* 少し小さめに */
    line-height: 1; 
}
/* 通知がない場合のアイコンスタイル */
#gmail-alert-container > i.fa-bell {
    font-size: 1.2em; /* アイコンサイズ調整 */
    padding: 6px;
}
/* ▲▲▲ 修正ここまで ▲▲▲ */

/* 通知カード (SweetAlert2を使うので不要) */
/* .gmail-alert { ... } */

/* 通知内のボタン (SweetAlert2を使うので不要) */
/* .gmail-alert button { ... } */
/* .gmail-alert button:hover { ... } */

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

.header-left h1 {
    margin: 0;
}

.header-right {
    display: flex;
    align-items: center;
    /* ▼▼▼ gap を少し小さくする (例: 10px) ▼▼▼ */
    gap: 10px; /* 通知とログアウトの間の隙間 */
    /* ▲▲▲ 修正ここまで ▲▲▲ */
}

.gmail-alert-area {
    display: flex;
    align-items: center;
}

/* 通知バッジのスタイル (ボタン内に移動したので不要かも) */
/* .gmail-alert { ... } */

.logout-btn {
    font-weight: bold;
    padding: 8px 12px; /* ボタンサイズ調整 */
    line-height: 1;
}
/* design.css の一番下に追加 */

/* ========================================================================== 
   LINE履歴モーダル
   ========================================================================== */
.history-modal-content {
    width: 90%;
    max-width: 800px; /* 幅を広げる */
    height: 80%; /* 高さを出す */
    display: flex;
    flex-direction: column;
}

.history-table-container {
    flex-grow: 1; /* テーブル部分が残りの高さをすべて使う */
    overflow-y: auto; /* テーブルが縦にスクロールできるように */
    border: 1px solid #ddd;
}

.history-table-container table {
    width: 100%;
    border-collapse: collapse;
}

.history-table-container th,
.history-table-container td {
    padding: 8px 12px;
    border: 1px solid #ddd;
    text-align: left;
    font-size: 14px;
    vertical-align: top;
}

.history-table-container th {
    background-color: #f2f2f2;
    position: sticky;
    top: 0; /* スクロールしてもヘッダー固定 */
}

/* 詳細列の幅を調整 */
.history-table-container td.history-details {
    word-break: break-all;
    min-width: 200px;
}

/* ステータスバッジ（Bootstrap5） */
.badge {
    display: inline-block;
    padding: .35em .65em;
    font-size: .75em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
}
.bg-success { background-color: #198754 !important; }
.bg-danger { background-color: #dc3545 !important; }

/* スマホ表示 */
@media (max-width: 767px) {
    .history-modal-content {
        padding: 10px;
    }
    .history-table-container th,
    .history-table-container td {
        padding: 6px;
        font-size: 12px;
    }
}
/* ▼▼▼ PWAインストールガイド (index.html用) の新スタイル ▼▼▼ */
#ios-install-prompt {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 380px;
    background-color: #262626; /* サイトのテーマに合わせる */
    color: #cccccc;
    border: 1px solid #555;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 2000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    font-size: 14px;
    line-height: 1.4;
}
#close-install-prompt {
    position: absolute;
    top: 5px;
    right: 10px;
    background: none;
    border: none;
    color: #888; /* 色調整 */
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 5px;
}
#close-install-prompt:hover {
    color: #fff;
}
.prompt-icon {
    flex-shrink: 0;
}
.prompt-icon .fa-share-square {
    font-size: 28px;
    color: #007aff; /* iOSの共有アイコンの色 */
}
.prompt-text {
    flex-grow: 1;
    font-weight: bold;
    color: #fff; /* 文字色を明るく */
}
.prompt-text small {
    display: block;
    font-weight: normal;
    color: #ccc;
    font-size: 12px;
    margin-top: 2px;
}
/* ▲▲▲ 追加ここまで ▲▲▲ */
/* ==========================================================================
   満席日リスト表示用スタイル
   ========================================================================== */

/* 満席日リストのスタイル */
.full-day-list {
    list-style: none;
    padding-left: 0;
    margin-top: 10px;
    display: flex; /* 横並びにするためにflexを使用 */
    flex-wrap: wrap;
    gap: 8px; /* 要素間の隙間 */
}
.full-day-list li {
    background-color: #f8d7da; /* 薄い赤色 */
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1;
}
/* design.css の既存の満席日リストスタイル (full-day-list) の下などに追加 */

/* design.css の末尾に追記 */

/* ==========================================================================
   モーダル化後の満席日リストスタイル
   ========================================================================== */

/* ヘッダー内の満席日ボタンのスタイル */
.header-full-day-btn {
    /* 他のヘッダーボタンと揃える */
    font-size: 14px;
    padding: 5px 10px;
    line-height: 1;
    margin-right: 5px; /* 右側のボタンとの間隔 */
}

/* モーダル内のリストコンテナ */
#full-days-display-modal {
    max-height: 300px; /* モーダルが高くなりすぎないように */
    overflow-y: auto;
    padding: 0 10px;
}

/* モーダル内の満席日リストの項目 */
#fullDaysModal .full-day-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* リスト項目の間隔 */
    padding: 0;
    margin: 0;
    list-style: none;
}

#fullDaysModal .full-day-list li {
    background-color: #dc3545; /* 赤色 */
    color: white;
    border: 1px solid #c82333;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
}
/* ========================================================================== 
   「本日」ボタン
   ========================================================================== */
.btn-today {
    background-color: #6c757d; /* グレー */
    color: white;
    border: none;
    border-radius: 4px;
    padding: 5px 12px;
    margin: 0 10px; /* 前後の隙間 */
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
}

.btn-today:hover {
    background-color: #5a6268; /* ホバー時は少し濃く */
}

/* カレンダーナビゲーションのレイアウト調整 */
.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: center; /* 中央寄せ */
    gap: 10px; /* ボタン間の隙間 */
    flex-wrap: wrap; /* 画面が狭いときに折り返し */
}

#current-month-year {
    margin: 0 10px; /* 年月の左右に余白 */
    white-space: nowrap; /* 年月で改行しない */
}