/**
 * 圖鑑頁面套組選擇樣式
 * Catalog Set Selection Styles
 */

/* ===== 套組篩選 scrollbar ===== */
#setsListContainer {
    scrollbar-width: thin;
    scrollbar-color: rgba(140, 140, 140, 0.55) transparent;
    padding-right: 6px;
}

.sets-list-container {
    overflow-y: auto;
    overflow-x: hidden;
}

#setsListContainer::-webkit-scrollbar {
    width: 8px;
}

#setsListContainer::-webkit-scrollbar-track {
    background: transparent;
}

#setsListContainer::-webkit-scrollbar-thumb {
    background-color: rgba(140, 140, 140, 0.55);
    border-radius: 999px;
}

#setsListContainer::-webkit-scrollbar-thumb:hover {
    background-color: rgba(140, 140, 140, 0.75);
}

/* ===== 套組篩選 modal 卡片（版面與 catalog-set-card.css 橫向套組卡一致）===== */
#setFilterModal label.set-logo-item {
    cursor: pointer;
    margin: 0;
}

#setFilterModal label.set-logo-item.active,
#setFilterModal label.set-logo-item.active:hover {
    border-color: #ffcc00;
    box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.6), 0 0 10px rgba(255, 204, 0, 0.35);
    background: rgba(255, 204, 0, 0.08);
    color: var(--text-main);
}

.set-icon-item {
    min-height: 44px;
}

.set-icon-item.active {
    background-color: rgba(255, 204, 0, 0.12);
    border-color: #ffcc00;
    box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.6), 0 0 10px rgba(255, 204, 0, 0.35);
}

.set-logo-radio {
    display: none;
}

/* ===== 手機版 ===== */
@media (max-width: 768px) {
    #setFilterModal .modal-dialog-scrollable .modal-body {
        max-height: calc(100dvh - 160px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #setsListContainer {
        max-height: none;
        overflow: visible;
        padding-bottom: calc(110px + env(safe-area-inset-bottom));
    }
}

/* ===== 桌面版 ===== */
@media (min-width: 992px) {
    #setFilterModal .modal-dialog {
        max-width: 1400px;
    }

    /* 固定 set 卡片寬度 */
    #setFilterModal {
        --set-card-width: calc((1100px - 2rem) / 4 - 1rem);
    }

    #setFilterModal .set-logo-grid {
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
        gap: 0.5rem 1rem;
    }

    #setFilterModal .set-logo-grid > .set-logo-col {
        flex: 0 0 var(--set-card-width);
        max-width: var(--set-card-width);
        padding: 0;
    }

    #setFilterModal .modal-content {
        min-height: calc(100vh - 160px);
    }

    #setFilterModal .modal-dialog-scrollable .modal-content {
        height: auto;
    }

    #setFilterModal .modal-dialog-scrollable .modal-body {
        max-height: calc(100vh - 260px);
        display: flex;
        flex-direction: column;
    }

    #setFilterModal .modal-body > .row {
        flex: 1 1 auto;
        min-height: 0;
    }

    /* 桌面版：保留 set 區塊左右留白 */
    #setFilterModal #setsListContainer {
        padding-left: 24px;
        padding-right: 24px;
    }

    #setsListContainer {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        height: 100%;
    }

    #setFilterModal #setsListContainer {
        overflow: visible;
        height: auto;
    }

    /* setFilterModal：右側欄位滾動，tabs sticky 固定 */
    #setFilterModal .sets-list-container {
        position: relative;
    }
}

.series-sticky-bar {
    background-color: var(--bs-modal-bg);
}