/*
@config : next999.json
@filename : ${psFileBasename}
@title : 2.カレンダースタイル
@name : 2.カレンダースタイル
@siteIds : 310514
@siteTitles : イオン多摩平シフト希望
@disabled: false
*/

/* グローバルコンテナ */
#custom-calendar-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* カレンダーとコントロールのコンテナ */
#custom-calendar {
    display: flex;
    flex-direction: column;
    /* スマホ表示では縦並び */
    align-items: stretch;
    /* 幅を合わせる */
    width: 100%;
    background: #fff;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 10px;
    margin-left: 0 !important;
    /* 初期値として左マージンをリセット */
}

/* カレンダーテーブルの直接の親div */
#custom-calendar>div:first-child {
    overflow-x: auto;
    /* テーブルがはみ出る場合はスクロール */
    width: 100%;
    margin-bottom: 15px;
    /* ボタンとの間隔 */
}

/* テーブル全体 */
#custom-calendar table {
    border-collapse: collapse;
    width: 100%;
    background: #fff;
    min-width: 300px;
    /* 最小幅を設定 */
}

/* テーブルヘッダーとセル共通 */
#custom-calendar th,
#custom-calendar td {
    border: 1px solid #ccc;
    text-align: center;
    vertical-align: middle;
    height: 40px;
    /* 基本の高さを維持 */
    width: auto;
    /* 幅は自動調整、または特定の列で指定 */
    padding: 5px;
    /* 少しパディングを調整 */
    font-size: 1.2em;
    /* フォントサイズを少し大きく */
}

/* 曜日行 */
#custom-calendar thead th {
    background: #f0f0f0;
    color: #333;
}

/* 日曜日 */
#custom-calendar thead th:first-child,
#custom-calendar tbody td:nth-child(1) {
    background: #e0f0ff;
    color: #0070c0;
}

/* 土曜日 */
#custom-calendar thead th:last-child,
#custom-calendar tbody td:nth-child(7) {
    background: #fff4e0;
    color: #ff8000;
}

/* チェックボックスと日付のラベル */
#custom-calendar label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    cursor: pointer;
}

/* タップしやすくするために td 内の label を block にする */
#custom-calendar td label {
    display: block;
}


/* 操作コントロール（ボタンとタイムバー）のコンテナ */
.controls-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    margin-left: 0 !important;
    /* 初期値として左マージンをリセット */
}

/* 曜日ボタングループ */
.day-toggle-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    /* スマホ表示では中央揃え */
}

/* 曜日ボタン個別 */
.calendar-day-toggle {
    padding: 6px 6px;
    font-size: 0.9em;
}

/* タイムバーコンテナ */
#time-bar {
    width: 100%;
    display: flex;
    margin: 3px 0;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
}

/* タイムスロット */
.time-slot {
    min-width: 25px;
    text-align: center;
    border: 1px solid #ccc;
    font-size: 1.3em !important;
    /* !important は元の指定を尊重 */
    /* font-size: 0.85em; 重複していたため、どちらかを選択または調整 */
}

/* タブレット以上の幅でレイアウト変更 */
@media (min-width: 768px) {
    #custom-calendar {
        flex-direction: row;
        /* 横並びに戻す */
        align-items: flex-start;
        width: fit-content;
        /* 元の指定に近い形に戻す */
        float: left;
        /* 元の指定 */
        margin-left: 121px !important;
        /* 元の指定に戻す */
    }

    #custom-calendar>div:first-child {
        /* カレンダーテーブルのコンテナ */
        width: auto;
        /* 自動幅に戻す */
        margin-bottom: 0;
        margin-right: 15px;
        /* 右側にマージン */
    }

    .controls-container {
        width: auto;
        /* 自動幅に戻す */
        margin-left: 16px !important;
        /* 元のマージンに戻す */
    }

    .day-toggle-buttons {
        justify-content: flex-start;
        /* 左揃えに戻す */
    }
}