/* ════════════════════════════════════════════════════
   Tradeup Page Styles
   ════════════════════════════════════════════════════ */

.tradeup-layout {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 68px); /* fills the space below the 68px site header - lets the two columns split whatever's left */
    width: 100%;
    padding: 48px 40px 48px 60px;
    animation: fadeIn 0.2s ease;
}

.tradeup-title,
.tradeup-outcomes {
    flex-shrink: 0; /* keep their natural height - only .tradeup-columns below should shrink/scroll */
}

#tradeupSentinel {
    height: 1px;
}

.tradeup-title {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
    margin-bottom: 24px;
}

/* ── Outcomes summary bar ── */

.tradeup-outcomes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 20px; /* sits below the skin cards/placeholders in .tradeup-right-col, not above the columns */
    padding: 16px 24px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 14px;
}

.tradeup-outcomes-title {
    flex-shrink: 0;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
}

.tradeup-outcomes-stats {
    display: flex;
    flex: 1;
    flex-wrap: nowrap;
    gap: 8px;
    min-width: 0; /* lets the row shrink below its content's natural width instead of overflowing/wrapping */
    overflow-x: auto; /* fallback if the window's too narrow to fit all 7 even at minimum width */
}

.tradeup-outcome-stat {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.tradeup-outcome-label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-sec);
}

.tradeup-outcome-value {
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.tradeup-outcome-value--positive {
    color: #56c98d;
}

.tradeup-outcome-value--negative {
    color: #c93b3b;
}

/* ── Possible outcomes preview - the trade-up's potential results ── */

.tradeup-possible-outcomes {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-top: 20px;
}

.tradeup-outcome-card {
    padding: 12px 10px;
}

/* same pill recipe as .tradeup-price-pill (blurred dark pill), just absolutely positioned into the card's corner
   instead of sitting in normal flow - z-index: 1 needed to clear .skin-card::before/::after's scrim+sheen overlays */
.profit-per-skin {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.66rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.tradeup-outcome-card--positive .profit-per-skin {
    color: #56c98d;
}

.tradeup-outcome-card--negative .profit-per-skin {
    color: #c93b3b;
}

/* same pill as .profit-per-skin, mirrored into the opposite corner */
.probability-per-skin {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.66rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.tradeup-outcome-card .skin-img,
.tradeup-outcome-card .skin-img-placeholder {
    width: 65%;
    margin: 8px auto 10px;
}

.tradeup-outcome-weapon {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--text);
    margin: 0;
}

.tradeup-outcome-skin {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-sec);
    margin: 2px 0 0;
}

.tradeup-outcome-float {
    text-align: center;
    margin-top: 4px;
    color: var(--text-sec);
    font-size: 0.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tradeup-outcome-price {
    text-align: center;
    margin-top: 2px;
    color: var(--text);
    font-size: 0.75rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* compound selector (.skin-card + modifier), not just the modifier alone - explore.css's .skin-card { background:
   var(--card) } loads after this file and would otherwise win on equal specificity, same issue as .tradeup-card above */
.skin-card.tradeup-outcome-card--positive {
    background: rgba(86, 201, 141, 0.14);
    border-color: rgba(86, 201, 141, 0.4);
}

.skin-card.tradeup-outcome-card--negative {
    background: rgba(201, 59, 59, 0.14);
    border-color: rgba(201, 59, 59, 0.4);
}

.tradeup-outcome-card--positive .tradeup-outcome-price {
    color: #56c98d;
}

.tradeup-outcome-card--negative .tradeup-outcome-price {
    color: #c93b3b;
}

/* ── Filter toolbar ── */

.tradeup-toolbar {
    position: sticky;
    top: 0;
    z-index: 30; /* comfortably above .tradeup-card:hover's z-index: 20, so an open dropdown list always wins over a hover-lifted card scrolling beneath it */
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 32px; /* padding, not margin, so the sticky background covers this gap too, not just the toolbar's own row */
}

.tf-field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 160px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 8px 14px;
    transition: border-color 0.2s ease;
}

.tf-field--search {
    flex: 1.4;
}

.tf-field:hover,
.tf-field:focus-within {
    border-color: rgba(168, 85, 247, 0.5);
}

.tf-label {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-sec);
}

.tf-input {
    background: none;
    border: none;
    outline: none;
    padding: 0;
    color: var(--text);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: text;
}

.tf-input::placeholder {
    color: var(--text);
    opacity: 0.45;
    font-weight: 700;
}

/* ── Custom dropdown fields (Rarity/Collection/Sort/Category) - reuses .custom-select-list/.custom-select-opt from Mainstyle.css ── */

.tf-field--select {
    cursor: pointer;
}

/* Rarity gets locked once a skin is sitting in the right panel - a trade-up can't mix rarities */
.tf-field--locked {
    pointer-events: none;
    opacity: 0.55;
}

.tf-select-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: 100%; /* fills the whole field so clicking anywhere in the box - not just the text - opens it */
    background: none;
    border: none;
    padding: 0;
    color: var(--text);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.tf-select-val {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tf-select-btn .select-chevron {
    color: var(--text-sec);
}

.tf-select-btn.open .select-chevron {
    transform: rotate(180deg);
}

/* .custom-select-list positions itself relative to the nearest positioned ancestor - here that's .tf-field instead of .custom-select */
.tf-field .custom-select-list {
    left: -1.5px;
    right: -1.5px;
    width: auto;
}

/* Collection has long option names (full collection titles) - let its list grow past the narrow field instead of
   matching its exact width, so names show in full instead of needing to scroll to read them */
#tfCollection .custom-select-list {
    right: auto;
    width: max-content;
    min-width: calc(100% + 3px);
    max-width: 320px;
}

/* ── Searchable dropdown (Collection): the button swaps for a live-filtering input while the field is open ── */

.tf-select-search {
    display: none;
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    outline: none;
    padding: 0;
    color: var(--text);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    caret-color: var(--accent);
}

.tf-select-search::placeholder {
    color: var(--text);
    opacity: 0.45;
    font-weight: 700;
}

.tf-field--select.open .tf-select-btn {
    display: none;
}

.tf-field--select.open .tf-select-search {
    display: block;
}

.tradeup-columns {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    flex: 1;
    min-height: 0; /* lets this flex child shrink to fit .tradeup-layout instead of overflowing it */
}

.tradeup-left,
.tradeup-right-col {
    flex: 1;
    min-width: 0; /* lets the flex child shrink below its content's natural width instead of overflowing */
    height: 100%;
    overflow-y: auto; /* this column scrolls independently - whichever one the mouse is over catches the wheel scroll */
    /* setting only overflow-y forces the browser to compute overflow-x as non-visible too (it can't stay truly
       "visible" once the other axis scrolls) - without this padding, cards on the left/right edge get clipped by
       that invisible x-boundary the moment they grow slightly on :hover (scale(1.02)) */
    padding: 0 6px;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent; /* Firefox - invisible at rest, revealed on :hover below */
}

.tradeup-left:hover,
.tradeup-right-col:hover {
    scrollbar-color: var(--border) transparent; /* Firefox */
}

.tradeup-left::-webkit-scrollbar,
.tradeup-right-col::-webkit-scrollbar {
    width: 6px;
}

.tradeup-left::-webkit-scrollbar-track,
.tradeup-right-col::-webkit-scrollbar-track {
    background: transparent;
}

.tradeup-left::-webkit-scrollbar-thumb,
.tradeup-right-col::-webkit-scrollbar-thumb {
    background: transparent; /* invisible at rest - only appears while hovering/scrolling this column, see below */
    border-radius: 3px;
    transition: background 0.2s ease;
}

.tradeup-left:hover::-webkit-scrollbar-thumb,
.tradeup-right-col:hover::-webkit-scrollbar-thumb {
    background: var(--border);
}

.tradeup-right-col {
    display: flex;
    flex-direction: column;
}

.tradeup-reset-btn {
    position: sticky;
    top: 0;
    z-index: 30; /* comfortably above .tradeup-card-right/.tradeup-slot-placeholder:hover's z-index: 20 */
    align-self: flex-end; /* compact button, not a full-width bar */
    margin-bottom: 32px; /* matches .tradeup-toolbar's padding-bottom on the left */
    padding: 6px 14px;
    /* the subtle white tint layered over an opaque var(--bg) - one background declaration, not two, so the second
       doesn't just override the first; needs to be fully opaque so scrolling cards don't show through beneath it */
    background: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06)), var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.tradeup-reset-btn:hover {
    background: linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)), var(--bg);
    border-color: rgba(168, 85, 247, 0.5);
}

.tradeup-right {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

/* purely decorative empty spots - no hover/interaction of their own, real cards replace them one at a time.
   Reuses the exact same inner skeleton as a real card (see renderTradeupSlotPlaceholder) so it's exactly the same
   size without guessing an aspect-ratio - the skeleton pieces are just hidden and a dashed border + icon shown instead */
.skin-card.tradeup-slot-placeholder {
    position: relative;
    cursor: default;
    background: rgba(255, 255, 255, 0.02);
    border: 1.5px dashed var(--border);
    box-shadow: none;
}

/* compound selector, not just .tradeup-slot-placeholder:hover - .skin-card:hover (explore.css) loads after this file,
   so a single-class selector here would lose the tie and the lift/glow hover would still show through */
.skin-card.tradeup-slot-placeholder:hover {
    transform: none;
    border-color: var(--border);
    box-shadow: none;
}

.tradeup-slot-placeholder::before,
.tradeup-slot-placeholder::after {
    display: none;
}

.tradeup-slot-placeholder > *:not(.tradeup-slot-icon) {
    visibility: hidden;
}

.tradeup-slot-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tradeup-slot-icon svg {
    width: 28px;
    height: 28px;
    color: var(--text-sec);
    opacity: 0.5;
}

.tradeup-divider {
    align-self: stretch;
    width: 1px;
    background: var(--border);
    flex-shrink: 0;
}

.tradeup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 14px;
}

/* ── Tradeup card overrides (narrower than explore.js's skin-card, 6 to a row) ── */

.tradeup-card {
    padding: 12px 10px 12px;
}

/* .skin-card.overflow:hidden (explore.css) and this rule have equal specificity as single classes, and explore.css
   happens to load after tradeup.css in index.html, so it was silently winning and overriding the line above no matter
   what it said - .skin-card.tradeup-card is a compound selector (higher specificity), so this wins regardless of load order */
.skin-card.tradeup-card,
.skin-card.tradeup-card-right,
.skin-card.tradeup-outcome-card {
    overflow: visible; /* these cards are narrow (6 per row) - a collection-name tooltip is often wider than the card itself */
}

/* .skin-card::before/::after (scrim + sheen overlays) fill the card edge-to-edge with no border-radius of their own -
   overflow: hidden was what clipped them into the card's rounded shape, so now that it's gone they need their own
   matching radius or their square corners poke out past the rounded card background */
.skin-card.tradeup-card::before,
.skin-card.tradeup-card::after,
.skin-card.tradeup-card-right::before,
.skin-card.tradeup-card-right::after,
.skin-card.tradeup-outcome-card::before,
.skin-card.tradeup-outcome-card::after {
    border-radius: inherit;
}

/* .skin-card:hover applies a transform, which creates a new stacking context - without this, a hovered card's escaping
   tooltip can end up underneath a neighboring card instead of on top of it, depending on DOM order */
.tradeup-card:hover,
.tradeup-card-right:hover,
.tradeup-outcome-card:hover {
    z-index: 20;
}

.tradeup-card .skin-img {
    margin-top: 4px;
    margin-bottom: 8px;
}

.tradeup-card .skin-weapon {
    font-size: 0.66rem;
}

.tradeup-card .skin-name {
    font-size: 0.85rem;
}

/* em, not rem - scales relative to whichever .skin-name context it's sitting in (left picker card vs right input
   card have different base sizes) rather than needing a size tuned per context */
.stattrak-badge {
    font-size: 0.6em;
    font-weight: 700;
    color: var(--text-sec);
}

/* ── Price pills, top of the card ── */

.tradeup-price-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 3px; /* real prices need every bit of room they can get to stay on one line */
}

.tradeup-price-pill {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0; /* without this, flex would shrink the pill's own box smaller than its nowrap text needs,
                        pushing the text out past the pill's rounded background instead of the row just overflowing */
    padding: 2px 5px; /* trimmed to fit real prices ("$169.87") on one line */
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text);
    font-size: 0.58rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tradeup-price-sep {
    flex-shrink: 0;
    color: var(--text-sec);
    font-size: 0.7rem;
}

/* hidden by default - editPrice() in tradeup.js just toggles .open, all the show/hide logic lives here */
.tradeup-price-popup {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 15;
    margin-top: 6px;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}

.tradeup-price-popup.open {
    display: flex;
}

.tradeup-price-popup-input {
    width: 110px;
    padding: 5px 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: 6px;
    outline: none;
    color: var(--text);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
}

.tradeup-price-popup-input:focus {
    border-color: rgba(168, 85, 247, 0.5);
}

/* ── Collection badge + shortened wear-bar, below the image ── */

.tradeup-meta-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.tradeup-collection-img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

.tradeup-collection-img--empty {
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed var(--border);
}

.tradeup-collection-wrap {
    /* no position: relative here (unlike .tradeup-wear-bar below) - the badge itself is a small icon flush against
       the card's edge, so a tooltip centered on IT overflows past the card/column almost immediately. Leaving this
       unpositioned lets the absolute tooltip fall through to the next positioned ancestor up the tree instead -
       .skin-card - so it centers on the whole card's width, which actually has room for the text */
    display: inline-flex;
    flex-shrink: 0;
    cursor: default;
}

/* ── Custom hover tooltips (collection badge + wear bar) - same recipe as explore.css's .wear-bar, shows instantly
   on :hover instead of the slow, inconsistent native browser tooltip a `title` attribute gives you ── */

.tradeup-collection-wrap::after,
.tradeup-wear-bar::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: rgba(22, 16, 36, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 10;
}

.tradeup-collection-wrap::before,
.tradeup-wear-bar::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-2px);
    border: 5px solid transparent;
    border-top-color: rgba(22, 16, 36, 0.95);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 10;
}

.tradeup-collection-wrap:hover::after,
.tradeup-wear-bar:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-14px);
}

.tradeup-collection-wrap:hover::before,
.tradeup-wear-bar:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(-6px);
}

.tradeup-wear-bar {
    position: relative;
    flex: 1;
    height: 5px;
    border-radius: 999px;
    cursor: default;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
    background: linear-gradient(
        to right,
        #4b9fe1 0%, #4b9fe1 7%,
        #56c98d 7%, #56c98d 15%,
        #d0c94a 15%, #d0c94a 38%,
        #e0862f 38%, #e0862f 45%,
        #c93b3b 45%, #c93b3b 100%
    );
}

.tradeup-wear-marker {
    position: absolute;
    top: -3px;
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 5px solid var(--text);
    transform: translateX(-50%);
}

.tradeup-name-col {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.tradeup-float-input {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: 10px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: 6px;
    outline: none;
    color: var(--text);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
    appearance: textfield;
    -moz-appearance: textfield; /* Firefox - the two -webkit rules below handle Chrome/Safari/Edge */
    transition: border-color 0.2s ease, background 0.2s ease;
}

.tradeup-float-input:focus {
    border-color: rgba(168, 85, 247, 0.5);
    background: rgba(255, 255, 255, 0.1);
}

.tradeup-float-input::-webkit-outer-spin-button,
.tradeup-float-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* right-aligned row - buttons sit flush against the card's right edge and grow leftward */
.tradeup-card-actions {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 10px;
}

.tradeup-card-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.tradeup-card-btn svg {
    width: 16px;
    height: 16px;
}

.tradeup-edit-btn:hover,
.tradeup-copy-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(168, 85, 247, 0.5);
}

.tradeup-delete-btn {
    background: rgba(201, 59, 59, 0.15);
    border-color: rgba(201, 59, 59, 0.4);
}

.tradeup-delete-btn:hover {
    background: rgba(201, 59, 59, 0.3);
}

/* ── Responsive ── */

@media (max-width: 900px) {
    /* independent per-column scrolling only makes sense side-by-side - once stacked, let the whole page scroll normally instead */
    .tradeup-layout {
        height: auto;
    }

    .tradeup-columns {
        flex-direction: column;
    }

    .tradeup-left,
    .tradeup-right-col {
        height: auto;
        overflow-y: visible;
    }

    .tradeup-toolbar,
    .tradeup-reset-btn {
        position: static;
    }

    .tradeup-divider {
        width: 100%;
        height: 1px;
    }

    .tradeup-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }
}

@media (max-width: 640px) {
    .tradeup-layout {
        padding: 28px 16px;
    }

    .tradeup-title {
        font-size: 1.7rem;
    }

    .tradeup-toolbar {
        flex-direction: column;
    }

    .tf-field,
    .tf-field--search {
        min-width: 0;
        flex: 1 1 auto;
    }
}