/* プラン詳細（templates/plan_detail.html）のカレンダー専用スタイル。
   templates/partials/plan_calendar.html の <style> をここへ移した。
   月送りは ajax で partial の HTML を差し替えるため、スタイルは
   ページ側の静的ファイルに置いて差し替え後も効くようにしている。
   このファイルは plan_detail.html からのみ読み込む。 */

#calendar-container {
    /* 締切超過日の文字色。地色 #f5f5f6 に対して 6.5:1（AA の 4.5:1 を満たす）。
       もとの #85878a は 3.31:1 だった（Issue #547）。 */
    --fcb-calendar-muted: #55585d;
    /* 日付の数字。もとの本文色 #747579 は 4.22:1 だった（Issue #547）。 */
    --fcb-calendar-day: #343a40;
    padding: 0.25rem 0.5rem 0.5rem;
}

/* --- 月送り・閉じるボタンのタップ領域（Issue #550） --------------------- */

.change-month {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    color: var(--fcb-calendar-day);
}

#calendar-container .btn-close {
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    /* × 記号自体の大きさは従来どおり（枠だけ広げる） */
    background-size: 1em auto;
    opacity: 0.75;
}

/* --- 表のレイアウト（Issue #535） --------------------------------------- */

#calendar-container .table {
    /* セル内の文字の min-content 幅で表が広がらないようにする。
       これを入れないと「受付終了」が 65px の下限幅を作り、
       65px × 7 = 455px となってモーダル（320px 幅で内寸 312px）からはみ出す。 */
    table-layout: fixed;
    width: 100%;
    margin-bottom: 0.5rem;
}

/* theme_style.css の `.table td, .table th { white-space: nowrap }` を打ち消す。
   これがあるとセル内の文字が折り返せず、狭い幅で表からはみ出す。 */
#calendar-container .table td,
#calendar-container .table th {
    white-space: normal;
}

.calendar-cell {
    width: 14.28%; /* 7日間で均等に分割 */
    height: 60px;  /* td の height は最小の高さとして働く */
    vertical-align: top;
    overflow-wrap: anywhere;
}

.calendar-day {
    font-size: 14px;
    margin-bottom: 5px;
    color: var(--fcb-calendar-day);
}

.calendar-seats {
    font-size: 16px;
    font-weight: bold;
}

.select-date {
    cursor: pointer;
}

/* --- コントラスト（Issue #547） ----------------------------------------- */
/* .text-secondary は !important 付きなので同じく !important で上書きする */
#calendar-container .calendar-seats.text-secondary,
#calendar-container .calendar-deadline-notice.text-secondary {
    color: var(--fcb-calendar-muted) !important;
}

/* 「予約済み」「残0人」。当日セル（.table-success = #d1e7dd）の上では
   Danger の既定色 #d6293e が 3.81:1 にしかならないため、
   同じ Danger 系の濃いトークン（--bs-danger-text = #b02a37）を使う。 */
#calendar-container .calendar-seats.text-danger {
    color: var(--bs-danger-text) !important;
}

/* --- スマートフォン幅（320px でも 7 列が収まるように詰める） ------------- */
@media (max-width: 575.98px) {
    #calendar-container {
        padding: 0.25rem 0.25rem 0.5rem;
    }
    #calendar-container .table > :not(caption) > * > * {
        padding: 2px;
    }
    .calendar-day {
        font-size: 12px;
        margin-bottom: 2px;
    }
    .calendar-seats {
        font-size: 12px;
        line-height: 1.25;
    }
    /* 「受付終了」は文言を変えずに「受付／終了」の 2 行へ折り返す。
       幅を 2 文字分に抑えて、「受付終／了」という不自然な位置で切れないようにする。 */
    .calendar-cell.bg-light .calendar-seats .small {
        display: inline-block;
        max-width: 2.4em;
    }
}