/* =========================================================
   PACKS PAGE
   ========================================================= */

.page-packs {
    display: block;

    width: 100%;
    min-width: 0;
    min-height: 100%;

    padding: 0.7rem;

    box-sizing: border-box;
}


/* =========================================================
   MAIN LAYOUT
   LEFT = PACK LIST
   RIGHT = PACK DETAILS
   ========================================================= */

.page-packs .packs-layout {
    display: grid;

    grid-template-columns:
        minmax(15rem, 30%)
        minmax(0, 1fr);

    width: 100%;
    min-width: 0;

    height: calc(100vh - 5rem);
    min-height: 32rem;

    gap: 0.7rem;

    box-sizing: border-box;
}


/* =========================================================
   LEFT SIDEBAR
   ========================================================= */

.page-packs .packs-sidebar {
    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;
    min-height: 0;

    background:
        color-mix(
            in srgb,
            var(--color-on-background) 2%,
            var(--color-background)
        );

    border: 1px solid
        color-mix(
            in srgb,
            var(--color-on-background) 8%,
            transparent
        );

    border-radius: 0.75rem;

    overflow: hidden;

    box-sizing: border-box;
}


/* =========================================================
   SIDEBAR HEADER
   ========================================================= */

.page-packs .packs-sidebar-header {
    display: flex;

    align-items: center;

    flex: 0 0 auto;

    min-height: 3.2rem;

    padding: 0.65rem 0.85rem;

    border-bottom: 1px solid
        color-mix(
            in srgb,
            var(--color-on-background) 7%,
            transparent
        );

    box-sizing: border-box;
}


.page-packs .packs-sidebar-header h1 {
    margin: 0;

    color: var(--color-on-background);

    font-size: 1.15rem;
    font-weight: 850;

    line-height: 1.1;
}


.page-packs .packs-sidebar-header p {
    margin: 0.12rem 0 0;

    color: var(--color-on-background);

    font-size: 0.62rem;
    font-weight: 600;

    opacity: 0.4;
}


/* =========================================================
   PACK LIST
   ========================================================= */

.page-packs .packs-list {
    display: flex;
    flex-direction: column;

    flex: 1 1 auto;

    width: 100%;
    min-width: 0;
    min-height: 0;

    padding: 0.4rem;

    gap: 0.18rem;

    overflow-y: auto;
    overflow-x: hidden;

    box-sizing: border-box;

    scrollbar-width: thin;

    scrollbar-color:
        color-mix(
            in srgb,
            var(--color-on-background) 20%,
            transparent
        )
        transparent;
}


.page-packs .packs-list::-webkit-scrollbar {
    width: 4px;
}


.page-packs .packs-list::-webkit-scrollbar-track {
    background: transparent;
}


.page-packs .packs-list::-webkit-scrollbar-thumb {
    background:
        color-mix(
            in srgb,
            var(--color-on-background) 20%,
            transparent
        );

    border-radius: 999px;
}


/* =========================================================
   PACK ITEM
   ========================================================= */

.page-packs .pack-item {
    display: flex;

    align-items: center;

    width: 100%;
    min-width: 0;

    min-height: 2.45rem;

    padding: 0.35rem 0.5rem;

    gap: 0.55rem;

    background: transparent;

    border: 1px solid transparent;

    border-radius: 0.42rem;

    color: var(--color-on-background);

    font-family: inherit;

    text-align: left;

    cursor: pointer;

    box-sizing: border-box;

    transition:
        background 0.12s ease,
        border-color 0.12s ease,
        transform 0.12s ease;
}


.page-packs .pack-item:hover {
    background:
        color-mix(
            in srgb,
            var(--pack-color) 6%,
            transparent
        );

    border-color:
        color-mix(
            in srgb,
            var(--pack-color) 14%,
            transparent
        );
}


.page-packs .pack-item.active {
    background:
        color-mix(
            in srgb,
            var(--pack-color) 11%,
            transparent
        );

    border-color:
        color-mix(
            in srgb,
            var(--pack-color) 30%,
            transparent
        );

    box-shadow:
        inset 3px 0 0 var(--pack-color);
}


/* =========================================================
   PACK COLOR DOT
   ========================================================= */

.page-packs .pack-item-color {
    display: block;

    width: 0.48rem;
    height: 0.48rem;

    flex: 0 0 auto;

    border-radius: 50%;

    background: var(--pack-color);

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--pack-color) 10%,
            transparent
        );
}


/* =========================================================
   PACK ITEM INFO
   ========================================================= */

.page-packs .pack-item-info {
    display: flex;
    flex-direction: column;

    flex: 1 1 auto;

    width: 0;
    min-width: 0;

    gap: 0.08rem;
}


.page-packs .pack-item-name {
    display: block;

    width: 100%;
    min-width: 0;

    color: var(--color-on-background);

    font-size: 0.68rem;
    font-weight: 750;

    line-height: 1.15;

    white-space: nowrap;

    overflow: hidden;
    text-overflow: ellipsis;
}


.page-packs .pack-item-count {
    color: var(--color-on-background);

    font-size: 0.53rem;
    font-weight: 600;

    opacity: 0.4;
}


.page-packs .pack-item-progress {
    flex: 0 0 auto;

    color: var(--pack-color);

    font-size: 0.56rem;
    font-weight: 800;
}


/* =========================================================
   RIGHT PACK DETAIL
   ========================================================= */

.page-packs .pack-detail {
    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;
    min-height: 0;

    padding: 0.9rem 1rem;

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--pack-color) 3%,
                var(--color-background)
            ),
            var(--color-background)
        );

    border: 1px solid
        color-mix(
            in srgb,
            var(--pack-color) 13%,
            transparent
        );

    border-radius: 0.75rem;

    box-sizing: border-box;

    overflow: hidden;
}


/* =========================================================
   RIGHT HEADER
   ========================================================= */

.page-packs .pack-detail-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    width: 100%;
    min-width: 0;

    flex: 0 0 auto;

    margin-bottom: 0.45rem;

    gap: 1rem;
}


.page-packs .pack-detail-title {
    display: flex;

    align-items: center;

    min-width: 0;

    gap: 0.55rem;
}


.page-packs .pack-detail-dot {
    width: 0.6rem;
    height: 0.6rem;

    flex: 0 0 auto;

    border-radius: 50%;

    background: var(--pack-color);

    box-shadow:
        0 0 0 4px
        color-mix(
            in srgb,
            var(--pack-color) 10%,
            transparent
        ),
        0 0 10px
        color-mix(
            in srgb,
            var(--pack-color) 22%,
            transparent
        );
}


.page-packs .pack-detail-title > div:last-child {
    min-width: 0;
}


.page-packs .pack-detail-header h1 {
    display: block;

    margin: 0;

    max-width: 100%;

    color: var(--color-on-background);

    font-size: 1.15rem;
    font-weight: 850;

    line-height: 1.15;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.page-packs .pack-detail-header p {
    margin: 0.12rem 0 0;

    color: var(--color-on-background);

    font-size: 0.62rem;
    font-weight: 600;

    opacity: 0.4;
}


/* =========================================================
   COMPLETION
   ========================================================= */

.page-packs .pack-detail-completion {
    display: flex;

    align-items: baseline;

    flex: 0 0 auto;

    white-space: nowrap;

    color: var(--color-on-background);

    font-size: 0.6rem;

    opacity: 0.45;
}


.page-packs .pack-detail-completion strong {
    color: var(--pack-color);

    font-size: 0.7rem;
    font-weight: 850;
}


/* =========================================================
   PROGRESS BAR
   ========================================================= */

.page-packs .pack-progress {
    flex: 0 0 auto;

    width: 100%;
    height: 0.22rem;

    margin-bottom: 0.75rem;

    background:
        color-mix(
            in srgb,
            var(--color-on-background) 8%,
            transparent
        );

    border-radius: 999px;

    overflow: hidden;
}


.page-packs .pack-progress-fill {
    height: 100%;

    background: var(--pack-color);

    border-radius: inherit;

    transition: width 0.2s ease;
}


/* =========================================================
   SECTION TITLE
   ========================================================= */

.page-packs .section-title {
    display: flex;

    align-items: center;

    gap: 0.35rem;

    margin-bottom: 0.4rem;
}


.page-packs .section-title h2 {
    margin: 0;

    color: var(--color-on-background);

    font-size: 0.9rem;
    font-weight: 850;

    line-height: 1.1;
}


.page-packs .section-title span {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 1rem;
    height: 1rem;

    padding: 0 0.22rem;

    color: var(--pack-color);

    background:
        color-mix(
            in srgb,
            var(--pack-color) 9%,
            transparent
        );

    border-radius: 999px;

    font-size: 0.5rem;
    font-weight: 800;
}


/* =========================================================
   LEVEL SECTION
   ========================================================= */

.page-packs .pack-level-section {
    flex: 0 0 auto;

    width: 100%;
    min-width: 0;
}


/* =========================================================
   LEVEL LIST
   ========================================================= */

.page-packs .pack-levels {
    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;

    gap: 0.3rem;

    /*
     * IMPORTANT:
     * Levels never scroll.
     */

    overflow: hidden;
}


/* =========================================================
   LEVEL
   ========================================================= */

.page-packs .pack-level {
    display: grid;

    grid-template-columns:
        3rem
        minmax(0, 1fr)
        auto;

    align-items: center;

    width: 100%;
    min-width: 0;

    height: 2.3rem;

    padding: 0 0.65rem;

    gap: 0.5rem;

    background:
        color-mix(
            in srgb,
            var(--pack-color) 3%,
            var(--color-background)
        );

    border: 1px solid
        color-mix(
            in srgb,
            var(--pack-color) 14%,
            transparent
        );

    border-radius: 0.45rem;

    color: var(--color-on-background);

    font-family: inherit;

    text-align: left;

    cursor: pointer;

    box-sizing: border-box;

    transition:
        background 0.12s ease,
        border-color 0.12s ease,
        transform 0.12s ease;
}


.page-packs .pack-level:hover {
    background:
        color-mix(
            in srgb,
            var(--pack-color) 8%,
            var(--color-background)
        );

    border-color:
        color-mix(
            in srgb,
            var(--pack-color) 35%,
            transparent
        );

    transform: translateX(2px);
}


/* =========================================================
   LEVEL RANK
   ========================================================= */

.page-packs .pack-level-rank {
    color: var(--pack-color);

    font-size: 0.62rem;
    font-weight: 850;

    white-space: nowrap;
}


/* =========================================================
   LEVEL NAME
   ========================================================= */

.page-packs .pack-level-name {
    display: block;

    min-width: 0;

    color: var(--color-on-background);

    font-size: 0.68rem;
    font-weight: 750;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   DIFFICULTY
   ========================================================= */

.page-packs .pack-level-difficulty {
    display: block;

    min-width: 3.8rem;

    color: var(--pack-color);

    font-size: 0.58rem;
    font-weight: 800;

    text-align: right;

    white-space: nowrap;

    opacity: 0.75;
}


/* =========================================================
   ARROW
   ========================================================= */

.page-packs .pack-level-arrow {
    display: none;
}


/* =========================================================
   VICTORS SECTION
   ========================================================= */

.page-packs .pack-victors-section {
    display: flex;
    flex-direction: column;

    flex: 1 1 auto;

    width: 100%;
    min-width: 0;
    min-height: 0;

    margin-top: 0.85rem;
}


/* =========================================================
   VICTOR LIST
   ========================================================= */

.page-packs .pack-completed-players {
    display: flex;
    flex-direction: column;

    flex: 1 1 auto;

    width: 100%;
    min-width: 0;
    min-height: 0;

    gap: 0.18rem;

    padding-right: 0.25rem;

    overflow-y: auto;
    overflow-x: hidden;

    box-sizing: border-box;

    scrollbar-width: thin;

    scrollbar-color:
        color-mix(
            in srgb,
            var(--pack-color) 35%,
            transparent
        )
        transparent;
}


.page-packs .pack-completed-players::-webkit-scrollbar {
    width: 4px;
}


.page-packs .pack-completed-players::-webkit-scrollbar-track {
    background: transparent;
}


.page-packs .pack-completed-players::-webkit-scrollbar-thumb {
    background:
        color-mix(
            in srgb,
            var(--pack-color) 35%,
            transparent
        );

    border-radius: 999px;
}


/* =========================================================
   VICTOR
   ========================================================= */

.page-packs .pack-completed-player {
    display: flex;

    align-items: center;

    width: 100%;
    min-width: 0;

    min-height: 2rem;

    padding: 0.3rem 0.55rem;

    background:
        color-mix(
            in srgb,
            var(--color-on-background) 2.5%,
            transparent
        );

    border: 1px solid
        color-mix(
            in srgb,
            var(--color-on-background) 4%,
            transparent
        );

    border-radius: 0.4rem;

    color: var(--color-on-background);

    font-size: 0.65rem;
    font-weight: 650;

    box-sizing: border-box;

    transition:
        background 0.12s ease,
        border-color 0.12s ease;
}


.page-packs .pack-completed-player:hover {
    background:
        color-mix(
            in srgb,
            var(--pack-color) 5%,
            transparent
        );

    border-color:
        color-mix(
            in srgb,
            var(--pack-color) 14%,
            transparent
        );
}


/* =========================================================
   NO PROFILE IMAGE
   Just name
   ========================================================= */

.page-packs .victor-avatar {
    display: none;
}


.page-packs .victor-name {
    display: block;

    width: 100%;
    min-width: 0;

    color: var(--color-on-background);

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   NO VICTORS
   ========================================================= */

.page-packs .pack-no-victors {
    display: flex;

    align-items: center;
    justify-content: flex-start;

    flex: 1;

    min-height: 3rem;

    color: var(--color-on-background);

    font-size: 0.65rem;

    opacity: 0.35;
}


/* =========================================================
   NO PACKS
   ========================================================= */

.page-packs .no-packs {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    flex: 1;

    padding: 2rem;

    text-align: center;
}


.page-packs .no-packs h2 {
    margin: 0 0 0.25rem;

    color: var(--color-on-background);

    font-size: 1rem;
}


.page-packs .no-packs p {
    margin: 0;

    color: var(--color-on-background);

    font-size: 0.68rem;

    opacity: 0.4;
}


/* =========================================================
   EMPTY DETAIL
   ========================================================= */

.page-packs .empty-detail {
    display: flex;

    align-items: center;
    justify-content: center;

    text-align: center;
}


.page-packs .empty-detail h2 {
    margin: 0 0 0.25rem;

    color: var(--color-on-background);

    font-size: 1rem;
}


.page-packs .empty-detail p {
    margin: 0;

    color: var(--color-on-background);

    font-size: 0.68rem;

    opacity: 0.4;
}


/* =========================================================
   DARK MODE
   ========================================================= */

.dark .page-packs .packs-sidebar,
.dark .page-packs .pack-detail {
    box-shadow:
        0 4px 18px
        color-mix(
            in srgb,
            #000 20%,
            transparent
        );
}


/* =========================================================
   LARGE SCREENS
   ========================================================= */

@media (min-width: 1200px) {

    .page-packs .packs-layout {
        grid-template-columns:
            minmax(18rem, 29%)
            minmax(0, 1fr);
    }

}


/* =========================================================
   MEDIUM
   ========================================================= */

@media (max-width: 900px) {

    .page-packs .packs-layout {
        grid-template-columns:
            minmax(14rem, 34%)
            minmax(0, 1fr);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .page-packs {
        padding: 0.45rem;
    }


    .page-packs .packs-layout {
        display: flex;
        flex-direction: column;

        height: auto;
        min-height: 0;

        gap: 0.55rem;
    }


    .page-packs .packs-sidebar {
        height: 15rem;
        max-height: 15rem;
    }


    .page-packs .pack-detail {
        min-height: 30rem;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 450px) {

    .page-packs .pack-detail {
        padding: 0.7rem;
    }


    .page-packs .pack-detail-header h1 {
        font-size: 1rem;
    }


    .page-packs .pack-level {
        grid-template-columns:
            2.5rem
            minmax(0, 1fr)
            auto;

        height: 2.15rem;

        padding-inline: 0.5rem;
    }


    .page-packs .pack-level-name {
        font-size: 0.62rem;
    }


    .page-packs .pack-level-difficulty {
        min-width: 3rem;

        font-size: 0.53rem;
    }

}