/* Custom skins grid column — denser packing on very large displays.
   Standard Bootstrap col-xxl-2 = 6/row at ≥1400px. We want 8/row at xxl
   and 10/row on ultrawide (≥1800px). Apply alongside lower-breakpoint
   col-* classes for graceful fallback. */
@media (min-width: 1400px) {
    .col-xxl-skin {
        flex: 0 0 auto;
        width: 12.5%; /* 8 per row */
    }
}

@media (min-width: 1800px) {
    .col-xxl-skin {
        width: 10%; /* 10 per row */
    }
}

/* Common transition and hover transform for all rarity classes */
/* Class names match enum values in SkinsEnums.cs (SkinRarity, AgentRarity,
   StickerRarity, KeychainRarity) so they line up with the JSON-serialized
   string form returned by the API and the .ToString() form of the enums. */
.rarity-ConsumerGrade,
.rarity-Consumer,
.rarity-IndustrialGrade,
.rarity-Industrial,
.rarity-MilSpecGrade,
.rarity-MilSpec,
.rarity-Mil-Spec,
.rarity-Restricted,
.rarity-Classified,
.rarity-Covert,
.rarity-Extraordinary,
.rarity-Contraband,
.rarity-Distinguished,
.rarity-Exceptional,
.rarity-Superior,
.rarity-Master,
.rarity-Default,
.rarity-HighGrade,
.rarity-High,
.rarity-Remarkable,
.rarity-Exotic {
    transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
}

    .rarity-ConsumerGrade:hover,
    .rarity-IndustrialGrade:hover,
    .rarity-MilSpecGrade:hover,
    .rarity-Restricted:hover,
    .rarity-Classified:hover,
    .rarity-Covert:hover,
    .rarity-Extraordinary:hover,
    .rarity-Contraband:hover,
    .rarity-Distinguished:hover,
    .rarity-Exceptional:hover,
    .rarity-Superior:hover,
    .rarity-Master:hover,
    .rarity-Default:hover,
    .rarity-HighGrade:hover,
    .rarity-Remarkable:hover,
    .rarity-Exotic:hover {
        transform: scale(1.05);
    }

/* Gray — Consumer Grade (common) */
.rarity-Default,
.rarity-ConsumerGrade,
.rarity-Consumer {
    border-color: rgba(176, 195, 217, 0.8);
    background: linear-gradient(-45deg, rgba(176, 195, 217,0.2) 20%, transparent 90%);
}

    .rarity-Default:hover,
    .rarity-ConsumerGrade:hover,
    .rarity-Consumer:hover {
        border-color: rgba(176, 195, 217, 1);
        background-color: rgba(176, 195, 217, 0.1) !important;
    }

/* Light blue — Industrial Grade */
.rarity-IndustrialGrade,
.rarity-Industrial {
    border-color: rgba(94, 152, 217, 0.8);
    background: linear-gradient(-45deg, rgba(94, 152, 217,0.2) 20%, transparent 90%);
}

    .rarity-IndustrialGrade:hover,
    .rarity-Industrial:hover {
        border-color: rgba(94, 152, 217, 1);
        background-color: rgba(94, 152, 217, 0.1) !important;
    }

/* Medium blue — Mil-Spec / High Grade / Distinguished */
.rarity-MilSpecGrade,
.rarity-Mil-Spec,
.rarity-MilSpec,
.rarity-HighGrade,
.rarity-High,
.rarity-Distinguished {
    border-color: rgba(75, 105, 255, 0.8);
    background: linear-gradient(-45deg, rgba(75, 105, 255,0.2) 20%, transparent 90%);
}

    .rarity-MilSpecGrade:hover,
    .rarity-Mil-Spec:hover,
    .rarity-MilSpec:hover,
    .rarity-HighGrade:hover,
    .rarity-High:hover,
    .rarity-Distinguished:hover {
        border-color: rgba(75, 105, 255, 1);
        background-color: rgba(75, 105, 255, 0.1) !important;
    }

/* Purple */
.rarity-Restricted,
.rarity-Remarkable,
.rarity-Exceptional {
    border-color: rgba(136, 71, 255, 0.8);
    background: linear-gradient(-45deg, rgba(136, 71, 255,0.2) 20%, transparent 90%);
}

    .rarity-Restricted:hover,
    .rarity-Remarkable:hover,
    .rarity-Exceptional:hover {
        border-color: rgba(136, 71, 255, 1);
        background-color: rgba(136, 71, 255, 0.1) !important;
    }

/* Pink */
.rarity-Classified,
.rarity-Exotic,
.rarity-Superior {
    border-color: rgba(211, 44, 230, 0.8);
    background: linear-gradient(-45deg, rgba(211, 44, 230,0.2) 20%, transparent 90%);
}

    .rarity-Classified:hover,
    .rarity-Exotic:hover,
    .rarity-Superior:hover {
        border-color: rgba(211, 44, 230, 1);
        background-color: rgba(211, 44, 230, 0.1) !important;
    }

/* Red */
.rarity-Covert,
.rarity-Extraordinary,
.rarity-Master {
    border-color: rgba(235, 75, 75, 0.8);
    background: linear-gradient(-45deg, rgba(235, 75, 75,0.2) 20%, transparent 90%);
}

    .rarity-Covert:hover,
    .rarity-Extraordinary:hover,
    .rarity-Master:hover {
        border-color: rgba(235, 75, 75, 1);
        background-color: rgba(235, 75, 75, 0.1) !important;
    }

/* Gold — Contraband (knives, special) */
.rarity-Contraband {
    border-color: rgba(228, 174, 57, 0.8);
    background: linear-gradient(-45deg, rgba(228, 174, 57,0.2) 20%, transparent 90%);
}

    .rarity-Contraband:hover {
        border-color: rgba(228, 174, 57, 1);
        background-color: rgba(228, 174, 57, 0.1) !important;
    }

/* Weapon category divider */
.weapon-category-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0 1rem;
    padding: 0 0.5rem;
}

.weapon-category-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
}

.weapon-category-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}

.weapon-category-icon {
    display: inline-flex;
    align-items: center;
    opacity: 0.7;
}

    .weapon-category-icon svg {
        width: auto;
        height: 24px;
    }

/* ========================================
   Item collection bar
   ======================================== */

/* Collection (or, when the identity belongs to none, the case) an item is shown
   under. Sits in flow at the top of the card rather than in an absolutely
   positioned header, so it can share its row with a trailing chip instead of
   overlapping it. Owns no radius — the card clips it. Shared by the
   .inv-showcase-card and .weapon-card families. */
.item-collection-bar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 1.75rem;
    padding: 0.3rem 0.5rem;
    background: rgba(0, 0, 0, 0.45);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.item-collection-icon {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    object-fit: contain;
}

/* A flex item defaults to min-width:auto, which stops .text-truncate ever firing. */
.item-collection-name {
    min-width: 0;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}

.item-collection-trailing {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.25rem;
}

/* Weapon card */
.weapon-card {
    border-radius: 0.5rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.2s ease, border-color 0.3s, box-shadow 0.3s;
}

    .weapon-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    }

.weapon-card-img {
    aspect-ratio: 4 / 3;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.25);
}

    /* Force small-resolution source images to fill the slot so all cards
       render at the same visual size regardless of native image dimensions. */
    .weapon-card-img .skin-image {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.weapon-card-body {
    padding: 0.375rem 0.5rem;
    min-width: 0;
    background: rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.weapon-card-name {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.3;
}

.weapon-card-paint {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.3;
}

/* Override global rarity scale on weapon cards */
.weapon-card.rarity-ConsumerGrade:hover,
.weapon-card.rarity-IndustrialGrade:hover,
.weapon-card.rarity-MilSpecGrade:hover,
.weapon-card.rarity-Restricted:hover,
.weapon-card.rarity-Classified:hover,
.weapon-card.rarity-Covert:hover,
.weapon-card.rarity-Extraordinary:hover,
.weapon-card.rarity-Contraband:hover,
.weapon-card.rarity-Distinguished:hover,
.weapon-card.rarity-Exceptional:hover,
.weapon-card.rarity-Superior:hover,
.weapon-card.rarity-Master:hover,
.weapon-card.rarity-Default:hover,
.weapon-card.rarity-HighGrade:hover,
.weapon-card.rarity-Remarkable:hover,
.weapon-card.rarity-Exotic:hover {
    transform: translateY(-3px);
}

/* ========================================
   Case Cards
   ======================================== */

.case-card {
    border-radius: 0.5rem;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, border-color 0.3s, box-shadow 0.3s, opacity 0.3s;
}

    .case-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
        border-color: rgba(255, 255, 255, 0.15);
    }

.case-card-img {
    aspect-ratio: 4 / 3;
    background: rgba(0, 0, 0, 0.25);
}

    /* Normalize image rendering across cases — smaller-resolution images
       are scaled up to fill the slot so all cards look the same size. */
    .case-card-img .skin-image {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        padding: 0.5rem;
    }

.case-card-count {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.125rem 0.4rem;
    border-radius: 0.25rem;
    background: rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
    line-height: 1.4;
}

.case-card-body {
    min-width: 0;
    background: rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.case-card-name {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.3;
}

.case-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 1rem;
    gap: 0.2rem;
    line-height: 1.4;
}

.case-badge--unopened {
    background: rgba(13, 202, 240, 0.15);
    color: #0dcaf0;
    border: 1px solid rgba(13, 202, 240, 0.3);
}

.case-badge--opened {
    background: rgba(108, 117, 125, 0.12);
    color: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(108, 117, 125, 0.2);
}

.case-badge--price {
    background: rgba(228, 174, 57, 0.12);
    color: rgba(228, 174, 57, 0.9);
    border: 1px solid rgba(228, 174, 57, 0.25);
}

/* Unopened accent */
.case-card--has-unopened {
    border-color: rgba(13, 202, 240, 0.2);
}

    .case-card--has-unopened:hover {
        border-color: rgba(13, 202, 240, 0.4);
        box-shadow: 0 6px 20px rgba(13, 202, 240, 0.08);
    }

/* Dim fully-opened cards */
.case-card--all-opened {
    opacity: 0.55;
}

    .case-card--all-opened:hover {
        opacity: 0.85;
    }

/* ── Case opening roll strip items ──
   Background + border come from .rarity-* classes on the same element. */
.case-roll-item {
    width: 140px;
    height: 160px;
    margin: 0 0.25rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.case-roll-item-img {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

    .case-roll-item-img img {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3));
    }

.case-roll-item-name {
    width: 100%;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 0.25rem;
    line-height: 1.2;
}

/* ── Skin filter bar (search input) ── */
.skins-filter-input {
    background: rgba(13, 202, 240, 0.08);
    border: 1px solid rgba(13, 202, 240, 0.3);
    border-radius: 0.5rem;
    color: #fff;
    transition: all 0.2s ease;
}

    .skins-filter-input::placeholder {
        color: rgba(255, 255, 255, 0.35);
    }

    .skins-filter-input:hover {
        background: rgba(13, 202, 240, 0.15);
        border-color: #0dcaf0;
    }

    .skins-filter-input:focus {
        background: rgba(13, 202, 240, 0.15);
        border-color: #0dcaf0;
        box-shadow: 0 0 0 3px rgba(13, 202, 240, 0.12);
        color: #fff;
        outline: none;
    }

/* Highlight ring for currently selected skin card across all variants */
.weapon-card.current-skin {
    outline: 2px solid rgba(13, 202, 240, 0.85);
    outline-offset: -2px;
}