/* Sales page layout: keep all key panels visible and make the cart independently scroll.
   This file is intentionally page-scoped via `.respawn-sales-layout`.
*/

.respawn-sales-layout {
    /* Use a stable viewport unit to prevent inconsistent sizing across browsers/displays. */
    height: calc(var(--respawn-vh, 1vh) * 100 - var(--respawn-header-height) - var(--respawn-footer-height));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.respawn-sales-layout .respawn-sales-header {
    flex: 0 0 auto;
    padding: .8rem .95rem;
    border: 1px solid var(--respawn-border);
    border-radius: var(--respawn-radius);
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--respawn-ui-accent) 14%, transparent), transparent 28%),
        linear-gradient(135deg, color-mix(in srgb, var(--respawn-surface) 96%, #fff), color-mix(in srgb, var(--respawn-surface-2) 96%, #fff));
    box-shadow: var(--respawn-shadow-sm);
}

.respawn-sales-layout .respawn-sales-body {
    flex: 1 1 auto;
    min-height: 0; /* critical for nested scroll areas */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.respawn-sales-layout .respawn-sales-top {
    flex: 0 0 auto;
    min-height: 0;
}

.respawn-sales-layout .respawn-sales-mid {
    flex: 0 0 auto;
    min-height: 0;
}

.respawn-sales-layout .respawn-sales-cart {
    flex: 1 1 auto;
    /* Always keep some cart visible on 1080p displays */
    min-height: clamp(220px, 32vh, 420px);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.respawn-sales-layout .respawn-sales-cart .card-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Tighter vertical spacing on this page */
.respawn-sales-layout .respawn-card .card-body {
    padding: 0.6rem 0.75rem;
}

.respawn-sales-layout .respawn-sales-header h3 {
    font-size: 1.25rem;
}

.respawn-sales-layout .respawn-sales-header .text-muted.small {
    line-height: 1.15;
}

.respawn-sales-layout .respawn-sales-top {
    margin-bottom: 0 !important;
}

.respawn-sales-layout .respawn-sales-mid {
    margin-bottom: 0 !important;
}

.respawn-sales-layout .respawn-sales-mid .card {
    margin-bottom: 0 !important;
}

.respawn-sales-layout .respawn-sales-mid .mb-2,
.respawn-sales-layout .respawn-sales-mid .mb-3,
.respawn-sales-layout .respawn-sales-top .mb-2,
.respawn-sales-layout .respawn-sales-top .mb-3 {
    margin-bottom: 0.5rem !important;
}

.respawn-sales-layout .card-header {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.respawn-sales-layout .form-label {
    margin-bottom: 0.25rem;
}

.respawn-sales-layout .input-group-lg > .form-control,
.respawn-sales-layout .input-group-lg > .form-select,
.respawn-sales-layout .input-group-lg > .input-group-text {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    font-size: 1rem;
}

/* Sales search results dropdown: keep it usable inside the fixed-height sales layout.
   Without an internal scroll, extra results get clipped by the page's overflow rules. */
.respawn-sales-layout #product-search-results {
    max-height: min(45vh, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Prevent the last element on the page from creating an extra scroll pixel */
.respawn-sales-layout > :last-child {
    margin-bottom: 0 !important;
}

@media (max-height: 900px) {
    /* 1080p-class displays (and smaller) need extra vertical compaction */
    .respawn-sales-layout .respawn-sales-header {
        margin-bottom: 0.4rem !important;
    }

    .respawn-sales-layout .respawn-sales-header .text-muted.small {
        display: none;
    }

    .respawn-sales-layout .respawn-sales-top .row.g-2 {
        --bs-gutter-y: 0.35rem;
        --bs-gutter-x: 0.5rem;
    }

    .respawn-sales-layout .respawn-sales-top .respawn-card .card-body {
        padding: 0.5rem 0.65rem;
    }

    /* Checkout panel: tighten typography */
    .respawn-sales-layout #detail-grand-total {
        font-size: 1.15rem !important;
    }

    .respawn-sales-layout .respawn-total {
        padding: 0.55rem !important;
    }

    /* Transaction button bar + search */
    .respawn-sales-layout .respawn-sales-mid {
        margin-top: 0;
    }

    .respawn-sales-layout .respawn-sales-mid .card-body {
        padding: 0.5rem 0.65rem;
    }

    .respawn-sales-layout .input-group-lg > .form-control {
        padding-top: 0.48rem;
        padding-bottom: 0.48rem;
        font-size: 0.95rem;
    }

    /* Make the transaction type bar wrap instead of being clipped */
    .respawn-sales-layout .respawn-sales-mid .mb-2 {
        margin-bottom: 0.25rem !important;
    }

    .respawn-sales-layout .respawn-sales-mid .mb-2 > * {
        overflow: visible;
    }

    /* Cart can be a bit shorter on 1080p so buttons remain visible */
    .respawn-sales-layout .respawn-sales-cart {
        min-height: clamp(190px, 28vh, 360px);
    }

    .respawn-sales-layout .respawn-sales-mid .btn {
        --bs-btn-padding-y: 0.32rem;
        --bs-btn-padding-x: 0.55rem;
        font-size: 0.86rem;
    }

    .respawn-sales-layout .respawn-sales-mid .d-flex.flex-wrap.gap-2 {
        gap: 0.35rem !important;
    }
}

@media (max-height: 820px) {
    .respawn-sales-layout .respawn-sales-body {
        gap: 0.35rem;
    }

    .respawn-sales-layout .respawn-sales-header h3 {
        font-size: 1.1rem;
    }

    .respawn-sales-layout .respawn-chip {
        font-size: 0.78rem;
        padding: 0.18rem 0.4rem;
    }
}

@media (max-height: 720px) {
    .respawn-sales-layout .respawn-sales-header h3 {
        font-size: 1.1rem;
    }

    .respawn-sales-layout .respawn-chip {
        font-size: 0.8rem;
        padding: 0.2rem 0.45rem;
    }

    .respawn-sales-layout .respawn-sales-body {
        gap: 0.4rem;
    }
}

@media (min-height: 721px) {
    /* Desktop density tweaks */
    .respawn-sales-layout .respawn-sales-top .respawn-card .card-body {
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
    }

    .respawn-sales-layout #salesPaymentBtn {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .respawn-sales-layout #salesHoldBtn,
    .respawn-sales-layout #salesRetrieveBtn,
    .respawn-sales-layout #salesResetBtn {
        padding-top: 0.45rem;
        padding-bottom: 0.45rem;
    }

    .respawn-sales-layout .respawn-sales-mid .mb-2 {
        margin-bottom: 0.35rem !important;
    }
}

/* If top panels become too tall for the viewport, allow them to scroll internally
   rather than covering other sections.

   IMPORTANT: Checkout should not scroll; keep it fully visible.
*/
.respawn-sales-layout .respawn-sales-top > [class*="col-"] > .respawn-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Apply clamped height + internal scrolling to non-checkout top cards */
.respawn-sales-layout .respawn-sales-top > [class*="col-"]:not(:first-child) > .respawn-card {
    max-height: clamp(200px, 22vh, 320px);
}

.respawn-sales-layout .respawn-sales-top > [class*="col-"]:not(:first-child) > .respawn-card > .card-body {
    overflow: auto;
    min-height: 0;
}

.respawn-sales-headerbtn {
    font-weight: 700;
}

.respawn-sales-summarycard,
.respawn-sales-customercard,
.respawn-sales-searchcard {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--respawn-ui-accent) 10%, transparent), transparent 60%),
        linear-gradient(180deg, color-mix(in srgb, var(--respawn-surface) 98%, #fff), color-mix(in srgb, var(--respawn-surface-2) 96%, #fff));
}

.respawn-sales-typebar {
    align-items: center;
}

.respawn-sales-typebtn {
    border-radius: .95rem;
    font-weight: 800;
    letter-spacing: .01em;
    box-shadow: var(--respawn-shadow-sm);
}

.respawn-sales-typebtn--quick {
    --bs-btn-color: #fff;
    --bs-btn-bg: #3157d5;
    --bs-btn-border-color: #2444a8;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2849b5;
    --bs-btn-hover-border-color: #1f398d;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #223f9f;
    --bs-btn-active-border-color: #1b327e;
    background-color: #3157d5;
    background-image: linear-gradient(135deg, rgba(255,255,255,.10), rgba(0,0,0,.08));
    border-width: 1px;
    border-style: solid;
    border-color: #2444a8;
    color: #fff;
    box-shadow: 0 12px 24px rgba(49, 87, 213, 0.28);
}

.respawn-sales-typebar .respawn-sales-typebtn--quick,
.respawn-sales-typebar .respawn-sales-typebtn--quick:hover,
.respawn-sales-typebar .respawn-sales-typebtn--quick:focus,
.respawn-sales-typebar .respawn-sales-typebtn--quick:active {
    color: #fff !important;
    background-color: #3157d5 !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,.10), rgba(0,0,0,.08)) !important;
    border-color: #2444a8 !important;
    box-shadow:
        0 12px 24px rgba(49, 87, 213, 0.28),
        inset 0 1px 0 rgba(255,255,255,.14) !important;
}

.respawn-sales-typebar .respawn-sales-typebtn--quick:hover,
.respawn-sales-typebar .respawn-sales-typebtn--quick:focus,
.respawn-sales-typebar .respawn-sales-typebtn--quick:active {
    background-color: #2849b5 !important;
    border-color: #1f398d !important;
}

.respawn-sales-typebar__payments {
    margin-left: auto;
}

.respawn-sales-searchbar__label,
.respawn-sales-customerpanel__title,
.respawn-sales-customerpanel__sectiontitle {
    color: var(--respawn-ink);
    font-weight: 800;
}

.respawn-sales-searchresults {
    border: 1px solid var(--respawn-border);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: var(--respawn-shadow);
    background: linear-gradient(180deg, color-mix(in srgb, var(--respawn-surface) 98%, #fff), color-mix(in srgb, var(--respawn-surface-2) 96%, #fff));
}

.respawn-sales-searchresults .list-group-item {
    border-left: 0;
    border-right: 0;
}

.respawn-sales-checkoutpanel__total {
    background: linear-gradient(135deg, color-mix(in srgb, var(--respawn-ui-accent) 14%, transparent), transparent 55%), color-mix(in srgb, var(--respawn-surface) 98%, #fff);
}

.respawn-sales-checkoutpanel__paybtn,
.respawn-sales-checkoutpanel__utilitybtn,
.respawn-sales-checkoutpanel__resetbtn {
    font-weight: 800;
    box-shadow: var(--respawn-shadow-sm);
}

.respawn-sales-cart-empty {
    border: 1px dashed color-mix(in srgb, var(--respawn-ui-accent) 40%, var(--respawn-border));
    border-radius: 1rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--respawn-ui-accent) 10%, transparent), transparent 52%), linear-gradient(180deg, color-mix(in srgb, var(--respawn-surface) 98%, #fff), color-mix(in srgb, var(--respawn-surface-2) 96%, #fff));
}

.respawn-sales-cart-table thead th {
    white-space: nowrap;
}

.respawn-sales-cart-table .badge {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

.quickadd-tile {
    height: 100%;
}

.quickadd-mainbtn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 96px;
    padding: .9rem 3.35rem .9rem 1rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--quickadd-tint, var(--bs-primary)) 44%, var(--respawn-border));
    background: linear-gradient(135deg, color-mix(in srgb, var(--quickadd-tint, var(--bs-primary)) 16%, transparent), transparent 58%), linear-gradient(180deg, color-mix(in srgb, var(--respawn-surface) 98%, #fff), color-mix(in srgb, var(--respawn-surface-2) 96%, #fff));
    color: var(--respawn-ink);
    box-shadow: var(--respawn-shadow-sm);
}

.quickadd-mainbtn:hover,
.quickadd-mainbtn:focus {
    color: var(--respawn-ink);
    border-color: color-mix(in srgb, var(--quickadd-tint, var(--bs-primary)) 72%, var(--respawn-ui-accent));
    background: linear-gradient(135deg, color-mix(in srgb, var(--quickadd-tint, var(--bs-primary)) 24%, transparent), transparent 58%), linear-gradient(180deg, color-mix(in srgb, var(--respawn-surface) 98%, #fff), color-mix(in srgb, var(--respawn-surface-2) 96%, #fff));
    transform: translateY(-1px);
}

.quickadd-mainbtn .fw-semibold {
    color: var(--respawn-ink);
}

.quickadd-mainbtn .small {
    color: color-mix(in srgb, var(--respawn-ink) 72%, transparent) !important;
}

#quickAddOpenCreateBtn,
#quickAddCreateBtn,
#quickAddEditBtn {
    box-shadow: var(--respawn-shadow-sm);
    font-weight: 700;
}

#quickColor,
#quickEditColor {
    width: 100%;
    max-width: 84px;
    padding: .2rem;
}

#quickAddOpenCreateBtn {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: color-mix(in srgb, var(--bs-primary) 76%, var(--respawn-ui-accent));
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 90%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 82%, var(--respawn-ui-accent));
    background: linear-gradient(135deg, var(--bs-primary), color-mix(in srgb, var(--bs-primary) 78%, var(--respawn-ui-accent)));
    border-width: 1px;
    border-style: solid;
    color: #fff;
}

/* Shared sales modal system ----------------------------------------------- */
.respawn-sales-modal-dialog {
    margin-top: .75rem;
    margin-bottom: .75rem;
}

.respawn-sales-modal-content {
    border: 1px solid color-mix(in srgb, var(--bs-primary) 16%, var(--respawn-border));
    border-radius: 1.25rem;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--bs-primary) 12%, transparent), transparent 32%),
        linear-gradient(180deg, color-mix(in srgb, var(--respawn-surface) 94%, #fff), color-mix(in srgb, var(--respawn-surface-2) 96%, #fff));
    box-shadow: var(--respawn-shadow);
}

.respawn-sales-modal-header {
    border-bottom: 1px solid var(--respawn-border);
    padding: 1rem 1.15rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--respawn-surface) 98%, #fff), color-mix(in srgb, var(--respawn-surface-2) 100%, #fff));
}

.respawn-sales-modal-kicker {
    color: var(--bs-primary);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: .15rem;
}

.respawn-sales-modal-title {
    margin-bottom: 0;
    color: var(--respawn-ink);
    font-size: 1.35rem;
    font-weight: 800;
}

.respawn-sales-modal-subtitle {
    margin-top: .2rem;
    color: color-mix(in srgb, var(--respawn-ink) 68%, transparent);
    font-size: .88rem;
}

.respawn-sales-modal-body {
    padding: 1rem 1.15rem;
    background: color-mix(in srgb, var(--respawn-surface) 99%, #fff);
}

.respawn-sales-modal-body .card:not(.respawn-card) {
    border: 1px solid var(--respawn-border);
    border-radius: 1rem;
    box-shadow: var(--respawn-shadow-sm);
    background: linear-gradient(180deg, color-mix(in srgb, var(--respawn-surface) 98%, #fff), color-mix(in srgb, var(--respawn-surface-2) 96%, #fff));
}

.respawn-sales-modal-body .card:not(.respawn-card) .card-header {
    border-bottom: 1px solid var(--respawn-border);
    background: linear-gradient(90deg, color-mix(in srgb, var(--respawn-ui-accent) 22%, transparent), transparent 42%);
    font-weight: 700;
}

.respawn-sales-modal-footer {
    border-top: 1px solid var(--respawn-border);
    padding: .9rem 1.15rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--respawn-surface) 99%, #fff), color-mix(in srgb, var(--respawn-surface-2) 100%, #fff));
}

.respawn-sales-customer-modal-card {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--respawn-ui-accent) 10%, transparent), transparent 58%),
        linear-gradient(180deg, color-mix(in srgb, var(--respawn-surface) 98%, #fff), color-mix(in srgb, var(--respawn-surface-2) 96%, #fff));
}

.respawn-sales-customer-results,
#repairsReadyList,
#repairsOpenList,
#salesPreOrderActiveList,
#salesPreOrderResults {
    border: 1px solid var(--respawn-border);
    border-radius: 1rem;
    overflow: hidden;
    background: linear-gradient(180deg, color-mix(in srgb, var(--respawn-surface) 98%, #fff), color-mix(in srgb, var(--respawn-surface-2) 96%, #fff));
    box-shadow: var(--respawn-shadow-sm);
}

.respawn-sales-customer-results table,
#salesPreOrderActiveList,
#salesPreOrderResults {
    margin-bottom: 0;
}

.respawn-sales-repair-createpanel,
.respawn-sales-customer-createform {
    padding: 1rem;
    border: 1px solid var(--respawn-border);
    border-radius: 1rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--respawn-surface) 98%, #fff), color-mix(in srgb, var(--respawn-surface-2) 96%, #fff));
    box-shadow: var(--respawn-shadow-sm);
}

.respawn-sales-preorder-tabcontent {
    min-height: 0;
}

.respawn-sales-preorder-tabcontent .tab-pane {
    background: transparent;
}

.respawn-sales-receipt-footer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.respawn-sales-receipt-btn {
    min-height: 52px;
    font-weight: 700;
    box-shadow: var(--respawn-shadow-sm);
}

.respawn-sales-payment-duebar {
    padding: .9rem 1rem;
    border: 1px solid var(--respawn-border);
    border-radius: 1rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--respawn-ui-accent) 12%, transparent), transparent 52%), linear-gradient(180deg, color-mix(in srgb, var(--respawn-surface) 98%, #fff), color-mix(in srgb, var(--respawn-surface-2) 96%, #fff));
}

.respawn-sales-payment-tabs {
    gap: .45rem;
    border-bottom: 0;
}

.respawn-sales-payment-tabs .nav-link {
    border-radius: .9rem .9rem 0 0;
    border: 1px solid var(--respawn-border);
    color: color-mix(in srgb, var(--respawn-ink) 82%, transparent);
    background: color-mix(in srgb, var(--respawn-surface) 96%, #fff);
    font-weight: 700;
}

.respawn-sales-payment-tabs .nav-link.active {
    color: #101214;
    background: linear-gradient(135deg, var(--respawn-accent), var(--respawn-accent-2));
    border-color: var(--respawn-accent-2);
}

.respawn-sales-payment-tabcontent {
    border-color: var(--respawn-border) !important;
    border-radius: 0 1rem 1rem 1rem !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--respawn-surface) 98%, #fff), color-mix(in srgb, var(--respawn-surface-2) 96%, #fff));
}

#salesQuickAddModal #quickAddButtons > .text-muted {
    padding: .75rem;
}

#salesReturnModal .table,
#salesRetrieveModal .table,
#paymentModal .table {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .respawn-sales-layout .respawn-sales-header {
        padding: .75rem .8rem;
    }

    .respawn-sales-modal-header,
    .respawn-sales-modal-body,
    .respawn-sales-modal-footer {
        padding-left: .9rem;
        padding-right: .9rem;
    }

    .respawn-sales-payment-tabs {
        flex-wrap: wrap;
    }

    .respawn-sales-receipt-footer {
        grid-template-columns: 1fr;
    }
}

@media (max-height: 900px) {
    /* Slightly tighter non-checkout top cards when the viewport is short */
    .respawn-sales-layout .respawn-sales-top > [class*="col-"]:not(:first-child) > .respawn-card {
        max-height: clamp(180px, 20vh, 280px);
    }
}

/* Trade / Catalog category dropdown region headers */
select optgroup.respawn-category-optgroup {
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

select optgroup.respawn-category-optgroup-jp {
    color: #cfe8ff;
}

select optgroup.respawn-category-optgroup-pal {
    color: #ffe6c7;
}

#salesTradeModal .modal-dialog {
    max-width: min(1320px, calc(100vw - 2rem));
}

.respawn-trade-modal-content {
    max-height: calc(100vh - 2.5rem);
    border: 1px solid rgba(90, 72, 177, 0.18);
    border-radius: 1.25rem;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(95, 82, 189, 0.18), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,249,255,0.98));
    box-shadow: 0 24px 70px rgba(34, 23, 84, 0.22);
}

.respawn-trade-form {
    min-height: 0;
    height: 100%;
}

.respawn-trade-header {
    border-bottom: 1px solid rgba(90, 72, 177, 0.14);
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(245,243,255,0.95));
}

.respawn-trade-header__eyebrow {
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #6b5fd4;
    font-weight: 800;
    margin-bottom: .15rem;
}

.respawn-trade-header__title {
    margin-bottom: 0;
    font-size: 1.45rem;
    font-weight: 800;
    color: #23195a;
}

.respawn-trade-header__subtitle {
    margin-top: .15rem;
    font-size: .88rem;
    color: #6c6f85;
}

.respawn-trade-body {
    padding: 0;
    min-height: 0;
    overflow: hidden;
}

.respawn-trade-layout {
    display: grid;
    grid-template-columns: minmax(290px, 360px) minmax(0, 1fr);
    min-height: 0;
    height: 100%;
}

.respawn-trade-sidebar {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
    background:
        linear-gradient(180deg, rgba(44, 29, 118, 0.98), rgba(77, 46, 164, 0.96));
    color: #f7f4ff;
    border-right: 1px solid rgba(255,255,255,0.08);
}

.respawn-trade-main {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
    background:
        radial-gradient(circle at top, rgba(87, 70, 191, 0.08), transparent 25%),
        linear-gradient(180deg, rgba(251,251,255,0.98), rgba(246,247,252,0.98));
}

.respawn-trade-card {
    border-radius: 1rem;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 12px 32px rgba(17, 10, 45, 0.14);
    padding: 1rem;
    margin-bottom: 1rem;
}

.respawn-trade-sidebar .respawn-trade-card {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(8px);
}

.respawn-trade-main .respawn-trade-card {
    background: rgba(255,255,255,0.92);
    border-color: rgba(87, 70, 191, 0.10);
    box-shadow: 0 16px 34px rgba(56, 42, 122, 0.08);
}

.respawn-trade-card__header {
    margin-bottom: .9rem;
}

.respawn-trade-card__header--split {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.respawn-trade-card__kicker {
    display: inline-block;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 800;
    opacity: .9;
    color: inherit;
    margin-bottom: .2rem;
}

.respawn-trade-main .respawn-trade-card__kicker {
    color: #6b5fd4;
}

.respawn-trade-card__title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.respawn-trade-fieldstack {
    display: grid;
    gap: .85rem;
}

.respawn-trade-label {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .86;
}

.respawn-trade-sidebar .respawn-trade-label {
    color: rgba(255,255,255,0.8);
}

.respawn-trade-sidebar .form-control,
.respawn-trade-sidebar .form-select {
    border-color: rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.96);
}

.respawn-trade-ghostbtn {
    border-radius: .85rem;
    border-color: rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-weight: 700;
}

.respawn-trade-ghostbtn:hover,
.respawn-trade-ghostbtn:focus {
    background: rgba(255,255,255,0.2);
    color: #fff;
    border-color: rgba(255,255,255,0.32);
}

.respawn-trade-searchresults {
    max-height: 320px;
    overflow: auto;
    border-radius: .85rem;
}

.respawn-trade-selected-title {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.15;
}

.respawn-trade-selected-subtitle {
    margin-top: .25rem;
    color: rgba(255,255,255,0.78);
    font-size: .92rem;
}

.respawn-trade-qualitylist {
    border-radius: .9rem;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,0.10);
}

.respawn-trade-qualityitem {
    background: transparent;
    color: #f7f4ff;
    border-color: rgba(255,255,255,0.08);
    font-weight: 600;
}

.respawn-trade-qualityitem:hover,
.respawn-trade-qualityitem:focus {
    background: rgba(255,255,255,0.10);
    color: #fff;
}

.respawn-trade-qualityitem.active,
.respawn-trade-qualityitem[aria-pressed="true"] {
    background: linear-gradient(90deg, #28c76f, #16a34a);
    color: #fff;
    border-color: rgba(255,255,255,0.08);
}

.respawn-trade-network {
    border-radius: .9rem;
    padding: .9rem;
    background: rgba(18, 10, 54, 0.28);
    border: 1px solid rgba(255,255,255,0.08);
}

.respawn-trade-network__title {
    font-size: .86rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 800;
    color: rgba(255,255,255,0.78);
    margin-bottom: .75rem;
}

.respawn-trade-network__grid {
    display: grid;
    gap: .65rem;
}

.respawn-trade-network__item {
    border-radius: .8rem;
    padding: .75rem .85rem;
    background: rgba(255,255,255,0.08);
}

.respawn-trade-network__item--primary {
    background: linear-gradient(135deg, rgba(255,205,68,0.22), rgba(255,255,255,0.08));
}

.respawn-trade-network__label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: rgba(255,255,255,0.72);
    margin-bottom: .2rem;
}

.respawn-trade-network__value {
    font-size: 1rem;
    font-weight: 800;
}

.respawn-trade-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(240,239,255,0.95));
    border: 1px solid rgba(87, 70, 191, 0.12);
    box-shadow: 0 14px 30px rgba(55, 42, 117, 0.08);
}

.respawn-trade-hero__kicker {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .11em;
    font-weight: 800;
    color: #6b5fd4;
    margin-bottom: .2rem;
}

.respawn-trade-hero__title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #22194f;
}

.respawn-trade-statpills {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .55rem;
}

.respawn-trade-pill {
    min-width: 120px;
    padding: .6rem .8rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(87, 70, 191, 0.12);
    box-shadow: 0 10px 20px rgba(77, 59, 162, 0.07);
}

.respawn-trade-pill__label {
    display: block;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #72778d;
    margin-bottom: .12rem;
}

.respawn-trade-pill__value {
    font-weight: 800;
    color: #2a2357;
}

.respawn-trade-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.respawn-trade-field--full {
    grid-column: 1 / -1;
}

.respawn-trade-field--toggle {
    display: flex;
    align-items: end;
}

.respawn-trade-researchbtn {
    border-radius: .9rem;
    padding: .75rem 1rem;
    color: #fff;
    border: 0;
    font-weight: 700;
    background: linear-gradient(135deg, #2d88ec, #1e63d4);
    box-shadow: 0 14px 26px rgba(35, 102, 214, 0.24);
}

.respawn-trade-researchbtn:hover,
.respawn-trade-researchbtn:focus {
    color: #fff;
    transform: translateY(-1px);
}

.respawn-trade-moneyinput {
    font-size: 1.05rem;
    font-weight: 700;
}

.respawn-trade-togglewrap {
    width: 100%;
    margin-bottom: .3rem;
    padding: .8rem .9rem;
    border-radius: .9rem;
    background: rgba(106, 95, 212, 0.08);
    border: 1px solid rgba(106, 95, 212, 0.12);
}

.respawn-trade-notes {
    resize: vertical;
    min-height: 116px;
}

.respawn-trade-offerwrap {
    border-radius: .95rem;
    overflow: hidden;
    border: 1px solid rgba(87, 70, 191, 0.10);
}

.respawn-trade-offertable thead th {
    background: linear-gradient(90deg, #2a215d, #3f2f8f);
    color: #fff;
    border-bottom: 0;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 800;
    padding-top: .8rem;
    padding-bottom: .8rem;
}

.respawn-trade-offerrow td {
    padding-top: .95rem;
    padding-bottom: .95rem;
    border-color: rgba(87, 70, 191, 0.08);
}

.respawn-trade-offerrow.trade-offer-row {
    cursor: pointer;
}

.respawn-trade-offerrow.trade-offer-row:hover {
    background: rgba(106, 95, 212, 0.05);
}

.respawn-trade-offerrow--featured {
    background: linear-gradient(90deg, rgba(106, 95, 212, 0.07), rgba(49, 190, 123, 0.06));
}

.respawn-trade-offerrow__title {
    font-weight: 700;
    color: #282451;
}

.respawn-trade-offerrow__sub {
    font-size: .77rem;
    color: #7a7f93;
    margin-top: .15rem;
}

.respawn-trade-offerchip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    padding: .42rem .7rem;
    border-radius: 999px;
    font-weight: 800;
    background: rgba(117, 124, 146, 0.12);
    color: #52576b;
}

.respawn-trade-offerchip--trade {
    background: linear-gradient(135deg, rgba(121, 93, 255, 0.16), rgba(121, 93, 255, 0.28));
    color: #4d37c9;
}

.respawn-trade-offerchip--cash {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.14), rgba(34, 197, 94, 0.24));
    color: #15803d;
}

.respawn-trade-offerhint {
    margin-top: .85rem;
    font-size: .82rem;
    color: #70758c;
}

.respawn-trade-footer {
    position: sticky;
    bottom: 0;
    z-index: 1;
    border-top: 1px solid rgba(87, 70, 191, 0.12);
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,247,252,0.98));
    padding: .9rem 1.25rem;
}

.respawn-trade-submitbtn {
    min-width: 180px;
    border: 0;
    border-radius: .9rem;
    font-weight: 800;
    background: linear-gradient(135deg, #19a663, #16c172);
    box-shadow: 0 14px 24px rgba(24, 161, 98, 0.22);
}

.respawn-trade-submitbtn:disabled {
    background: linear-gradient(135deg, #9eb6ac, #b4c4bd);
    box-shadow: none;
}

@media (max-width: 991.98px) {
    .respawn-trade-layout {
        grid-template-columns: 1fr;
    }

    .respawn-trade-sidebar {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .respawn-trade-hero {
        flex-direction: column;
    }

    .respawn-trade-statpills {
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .respawn-trade-editor-grid {
        grid-template-columns: 1fr;
    }

    .respawn-trade-card__header--split {
        flex-direction: column;
    }

    .respawn-trade-researchbtn,
    .respawn-trade-submitbtn {
        width: 100%;
    }
}

/* Trade modal refinement pass ------------------------------------------------ */

.respawn-trade-modal-content {
    height: calc(100vh - 1rem);
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--bs-primary) 12%, transparent), transparent 32%),
        linear-gradient(180deg, color-mix(in srgb, var(--respawn-surface) 94%, #fff), color-mix(in srgb, var(--respawn-surface-2) 96%, #fff));
    border-color: color-mix(in srgb, var(--bs-primary) 16%, var(--respawn-border));
    box-shadow: var(--respawn-shadow);
}

#salesTradeModal .modal-dialog {
    margin-top: .5rem;
    margin-bottom: .5rem;
}

.respawn-trade-header {
    background: linear-gradient(135deg, color-mix(in srgb, var(--respawn-surface) 92%, #fff), color-mix(in srgb, var(--respawn-surface-2) 94%, #fff));
    border-bottom-color: var(--respawn-border);
}

.respawn-trade-header__eyebrow,
.respawn-trade-main .respawn-trade-card__kicker,
.respawn-trade-hero__kicker {
    color: var(--bs-primary);
}

.respawn-trade-header__title,
.respawn-trade-hero__title,
.respawn-trade-card__title,
.respawn-trade-offerrow__title,
.respawn-trade-pill__value {
    color: var(--respawn-ink);
}

.respawn-trade-header__subtitle,
.respawn-trade-offerhint,
.respawn-trade-offerrow__sub,
.respawn-trade-pill__label {
    color: color-mix(in srgb, var(--respawn-ink) 68%, transparent);
}

.respawn-trade-body {
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--respawn-surface) 96%, #fff);
}

.respawn-trade-topbar {
    flex: 0 0 auto;
    padding: 1rem 1rem 0;
}

.respawn-trade-topbar__grid {
    display: grid;
    grid-template-columns: 180px 180px 220px minmax(320px, 1fr);
    gap: .9rem;
    align-items: start;
    padding: 1rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--respawn-surface) 92%, #fff), color-mix(in srgb, var(--respawn-surface-2) 96%, #fff));
    border: 1px solid var(--respawn-border);
    box-shadow: var(--respawn-shadow-sm);
}

.respawn-trade-topbar__searchwrap {
    min-width: 0;
    position: relative;
}

.respawn-trade-topbar__searchrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
}

.respawn-trade-addnewbtn {
    border-radius: .85rem;
    white-space: nowrap;
    font-weight: 700;
}

.respawn-trade-layout {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
    padding: 1rem;
    padding-top: .85rem;
    gap: 1rem;
}

.respawn-trade-sidebar {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bs-primary) 8%, var(--respawn-surface)), color-mix(in srgb, var(--respawn-ui-accent) 6%, var(--respawn-surface-2)));
    color: var(--respawn-ink);
    border: 1px solid var(--respawn-border);
    border-radius: 1rem;
    box-shadow: var(--respawn-shadow-sm);
}

.respawn-trade-sidebar .respawn-trade-card,
.respawn-trade-main .respawn-trade-card,
.respawn-trade-hero {
    border-color: var(--respawn-border);
}

.respawn-trade-sidebar .respawn-trade-card {
    background: color-mix(in srgb, var(--respawn-surface) 88%, transparent);
    backdrop-filter: none;
    box-shadow: none;
}

.respawn-trade-main {
    padding: 0;
    background: transparent;
}

.respawn-trade-main .respawn-trade-card {
    background: color-mix(in srgb, var(--respawn-surface) 94%, #fff);
}

.respawn-trade-sidebar .respawn-trade-label {
    color: color-mix(in srgb, var(--respawn-ink) 72%, transparent);
}

.respawn-trade-selected-title {
    margin-top: .9rem;
    color: var(--respawn-ink);
}

.respawn-trade-selected-subtitle {
    color: color-mix(in srgb, var(--respawn-ink) 68%, transparent);
}

.respawn-trade-coverart {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    border-radius: 1rem;
    overflow: hidden;
    background: linear-gradient(135deg, color-mix(in srgb, var(--bs-primary) 10%, var(--respawn-surface-2)), color-mix(in srgb, var(--respawn-ui-accent) 10%, var(--respawn-surface)));
    border: 1px solid var(--respawn-border);
}

.respawn-trade-coverart__img {
    width: 100%;
    height: 240px;
    object-fit: cover;
}

.respawn-trade-coverart__placeholder {
    padding: 1rem;
    text-align: center;
    font-weight: 600;
    color: color-mix(in srgb, var(--respawn-ink) 65%, transparent);
}

.respawn-trade-qualitylist {
    max-height: min(34vh, 320px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.respawn-trade-qualityitem {
    background: color-mix(in srgb, var(--respawn-surface) 90%, transparent);
    color: var(--respawn-ink);
    border-color: var(--respawn-border);
    border-left: 4px solid transparent;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.respawn-trade-qualityitem:hover,
.respawn-trade-qualityitem:focus {
    background: color-mix(in srgb, var(--bs-primary) 10%, var(--respawn-surface));
    color: var(--respawn-ink);
}

.respawn-trade-qualityitem.active,
.respawn-trade-qualityitem[aria-pressed="true"] {
    background: linear-gradient(90deg, color-mix(in srgb, var(--bs-primary) 18%, var(--respawn-surface)), color-mix(in srgb, var(--respawn-ui-accent) 20%, var(--respawn-surface)));
    color: var(--respawn-ink);
    border-color: color-mix(in srgb, var(--bs-primary) 45%, var(--respawn-border));
    border-left-color: var(--respawn-ui-accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bs-primary) 30%, transparent), 0 0 0 1px color-mix(in srgb, var(--respawn-ui-accent) 22%, transparent);
    font-weight: 800;
    transform: translateX(1px);
}

.respawn-trade-network {
    background: color-mix(in srgb, var(--respawn-surface-2) 82%, transparent);
    border-color: var(--respawn-border);
}

.respawn-trade-network__title,
.respawn-trade-network__label {
    color: color-mix(in srgb, var(--respawn-ink) 68%, transparent);
}

.respawn-trade-network__value {
    color: var(--respawn-ink);
}

.respawn-trade-network__item,
.respawn-trade-network__item--primary,
.respawn-trade-pill,
.respawn-trade-togglewrap {
    border-color: var(--respawn-border);
}

.respawn-trade-network__item,
.respawn-trade-pill {
    background: color-mix(in srgb, var(--respawn-surface) 94%, #fff);
}

.respawn-trade-network__item--primary {
    background: linear-gradient(135deg, color-mix(in srgb, var(--respawn-ui-accent) 16%, var(--respawn-surface)), color-mix(in srgb, var(--bs-primary) 8%, var(--respawn-surface)));
}

.respawn-trade-network--offer {
    margin-top: 1rem;
}

.respawn-trade-network__grid--offer {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.respawn-trade-statpills--footer {
    justify-content: stretch;
}

.respawn-trade-statpills--footer .respawn-trade-pill {
    flex: 1 1 0;
    min-width: 0;
}

.respawn-trade-researchbtn {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: color-mix(in srgb, var(--bs-primary) 72%, var(--respawn-ui-accent));
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 90%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 82%, var(--respawn-ui-accent));
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 84%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 76%, var(--respawn-ui-accent));
    background: linear-gradient(135deg, var(--bs-primary), color-mix(in srgb, var(--bs-primary) 78%, var(--respawn-ui-accent)));
    border-width: 1px;
    border-style: solid;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--bs-primary) 22%, transparent);
    color: #fff;
    font-weight: 700;
}

.respawn-trade-moneyinput {
    font-variant-numeric: tabular-nums;
}

.respawn-trade-offertable thead th {
    background: linear-gradient(90deg, color-mix(in srgb, var(--bs-primary) 78%, #000), color-mix(in srgb, var(--respawn-ui-accent) 45%, var(--bs-primary)));
}

.respawn-trade-offerrow.trade-offer-row:hover {
    background: color-mix(in srgb, var(--bs-primary) 8%, transparent);
}

.respawn-trade-offerrow--featured {
    background: linear-gradient(90deg, color-mix(in srgb, var(--bs-primary) 7%, transparent), color-mix(in srgb, var(--respawn-ui-accent) 8%, transparent));
}

.respawn-trade-offerchip {
    background: color-mix(in srgb, var(--respawn-ink) 8%, transparent);
    color: color-mix(in srgb, var(--respawn-ink) 72%, transparent);
}

.respawn-trade-offerchip--trade {
    background: color-mix(in srgb, var(--bs-primary) 20%, transparent);
    color: color-mix(in srgb, var(--bs-primary) 82%, #1f174e);
}

.respawn-trade-offerchip--cash {
    background: color-mix(in srgb, #22c55e 18%, transparent);
    color: color-mix(in srgb, #15803d 82%, #fff);
}

.respawn-trade-footer {
    border-top-color: var(--respawn-border);
    background: linear-gradient(180deg, color-mix(in srgb, var(--respawn-surface) 94%, #fff), color-mix(in srgb, var(--respawn-surface-2) 96%, #fff));
}

.respawn-trade-submitbtn {
    background: linear-gradient(135deg, color-mix(in srgb, #16a34a 92%, #fff), color-mix(in srgb, #22c55e 86%, #fff));
}

html[data-bs-theme="dark"] .respawn-trade-modal-content {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--bs-primary) 12%, transparent), transparent 32%),
        linear-gradient(180deg, color-mix(in srgb, var(--respawn-surface) 98%, #12151a), color-mix(in srgb, var(--respawn-surface-2) 96%, #0f1218));
}

html[data-bs-theme="dark"] .respawn-trade-topbar__grid,
html[data-bs-theme="dark"] .respawn-trade-main .respawn-trade-card,
html[data-bs-theme="dark"] .respawn-trade-hero,
html[data-bs-theme="dark"] .respawn-trade-network__item,
html[data-bs-theme="dark"] .respawn-trade-pill,
html[data-bs-theme="dark"] .respawn-trade-qualityitem,
html[data-bs-theme="dark"] .respawn-trade-sidebar .respawn-trade-card,
html[data-bs-theme="dark"] .respawn-trade-searchresults {
    background: color-mix(in srgb, var(--respawn-surface) 92%, #171b22);
}

html[data-bs-theme="dark"] .respawn-trade-sidebar {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bs-primary) 10%, #151823), color-mix(in srgb, var(--respawn-ui-accent) 8%, #12161f));
}

@media (max-width: 1199.98px) {
    .respawn-trade-topbar__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .respawn-trade-topbar__searchwrap {
        grid-column: 1 / -1;
    }
}

@media (max-width: 991.98px) {
    .respawn-trade-modal-content {
        height: calc(100vh - 1rem);
    }

    .respawn-trade-topbar__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .respawn-trade-layout {
        padding-top: 1rem;
    }

    .respawn-trade-network__grid--offer {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .respawn-trade-topbar {
        padding: .75rem .75rem 0;
    }

    .respawn-trade-topbar__grid,
    .respawn-trade-topbar__searchrow {
        grid-template-columns: 1fr;
    }

    .respawn-trade-layout {
        padding: .75rem;
    }

    .respawn-trade-sidebar,
    .respawn-trade-main {
        overflow: visible;
    }

    .respawn-trade-coverart {
        min-height: 180px;
    }

    .respawn-trade-coverart__img {
        height: 180px;
    }

    .respawn-trade-qualitylist {
        max-height: 220px;
    }

    .respawn-trade-searchresults {
        position: static;
        max-height: 260px;
        margin-top: .75rem;
    }
}