/* ========================================
   BlazoredModal OVERRIDES
   Simple dark modal card with glass style + light backdrop blur.
   ======================================== */

/* Center the modal both horizontally and vertically and apply a subtle
   2px blur to the page behind the modal. */
.bm-container {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* The modal card itself: solid-feeling dark glass. */
.blazored-modal {
    border-radius: var(--bs-border-radius-xl) !important;
    padding: 1.5rem !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(20, 25, 35, 0.85) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    margin: 0 !important;
}

.blazored-modal .bm-header {
    padding: 0 0 1rem 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    align-items: center;
    margin-bottom: 1rem;
}

.blazored-modal .bm-header h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: #fff;
}

/* Inline header used inside modal body when HideHeader = true. */
.modal-header-modern {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0 0 0.75rem 0;
    margin-bottom: 1rem;
}

.modal-footer-modern {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.75rem 0 0 0;
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Form controls inside Blazored modals. */
.blazored-modal .form-control,
.blazored-modal .form-select {
    background: rgba(15, 22, 33, 0.7);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.blazored-modal .form-control:focus,
.blazored-modal .form-select:focus {
    background: rgba(15, 22, 33, 0.85);
    border-color: rgba(13, 202, 240, 0.6);
    box-shadow: 0 0 0 3px rgba(13, 202, 240, 0.12);
    color: #fff;
}

/* Case items modal: cap grid height and scroll inside the modal */
.case-items-modal-scroll {
    max-height: min(70vh, 640px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Keep any Blazored modal within the viewport; scroll body if it overflows. */
.blazored-modal {
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    overflow-x: hidden;
}

/* All-sponsors modal.
   Robust layout that does NOT depend on the outer .blazored-modal having
   a fixed height. The shell is normal flow; the scrollable body uses a
   viewport-relative max-height so it scrolls inside the modal regardless
   of how Blazored sizes the outer container. */

/* Ensure the Large-size sponsor modal is actually wide enough for grid
   layout. Blazored's default size-large max-width is 800px but width is
   auto — force a sensible width so the inner grid has room to flow. */
.bm-container .blazored-modal.all-sponsors-modal {
    width: min(92vw, 900px) !important;
    max-width: min(92vw, 900px) !important;
}

.all-sponsors-shell {
    display: flex;
    flex-direction: column;
}

.all-sponsors-shell .modal-header-modern,
.all-sponsors-shell .modal-footer-modern {
    flex: 0 0 auto;
}

.all-sponsors-body {
    /* Reserve ~12rem for modal padding + header + footer, then cap so the
       modal never exceeds the viewport. The outer .blazored-modal already
       has max-height: calc(100vh - 3rem) and overflow:auto, but capping
       here keeps content scrolling inside the body instead of pushing the
       footer below the modal edge. */
    max-height: calc(100vh - 14rem);
    overflow-y: auto;
    overflow-x: hidden;
    margin-right: -0.5rem;
    padding-right: 0.5rem;
}

/* Card grid: minimum card width = 120px so cards have more presence
   while still flowing into multiple columns even in narrow modals. */
.sponsor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.625rem;
}

.sponsor-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 0.75rem 0.5rem;
    border-radius: 0.625rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    min-width: 0;
}

.sponsor-card:hover {
    transform: translateY(-2px);
}

.sponsor-card-avatar-wrapper {
    position: relative;
    line-height: 0;
}

.sponsor-card-avatar {
    width: 56px;
    height: 56px;
    object-fit: cover;
    padding: 2px;
    background-color: rgba(255, 255, 255, 0.08);
}

.sponsor-card-tier-badge {
    position: absolute;
    top: -2px;
    left: -2px;
    font-size: 1rem;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.sponsor-card-amount {
    color: #0dcaf0;
}

.sponsor-tier-count {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-weight: 600;
}

/* ===== Tier-themed surfaces =====
   Section backgrounds + card accents match the sponsor badge color scheme. */

/* Diamond — icy light blue */
.sponsor-tier-diamond {
    background: linear-gradient(135deg, rgba(168, 220, 255, 0.10), rgba(126, 200, 255, 0.04));
    border: 1px solid rgba(168, 220, 255, 0.28);
    box-shadow: 0 0 18px rgba(126, 200, 255, 0.10) inset;
}
.sponsor-card-diamond {
    background: rgba(168, 220, 255, 0.06);
    border-color: rgba(168, 220, 255, 0.22);
}
.sponsor-card-diamond:hover {
    background: rgba(168, 220, 255, 0.14);
    border-color: rgba(168, 220, 255, 0.55);
    box-shadow: 0 6px 18px rgba(126, 200, 255, 0.25);
}
.sponsor-card-diamond .sponsor-card-amount {
    color: #d6efff;
}

/* Platinum — teal/violet blend */
.sponsor-tier-platinum {
    background: linear-gradient(135deg, rgba(158, 201, 217, 0.10), rgba(108, 78, 179, 0.05));
    border: 1px solid rgba(140, 180, 220, 0.30);
}
.sponsor-card-platinum {
    background: rgba(140, 180, 220, 0.06);
    border-color: rgba(140, 180, 220, 0.22);
}
.sponsor-card-platinum:hover {
    background: rgba(140, 180, 220, 0.16);
    border-color: rgba(140, 180, 220, 0.55);
    box-shadow: 0 6px 18px rgba(108, 78, 179, 0.25);
}
.sponsor-card-platinum .sponsor-card-amount {
    color: #9ec9d9;
}

/* Golden — warm amber */
.sponsor-tier-golden {
    background: linear-gradient(135deg, rgba(217, 169, 59, 0.12), rgba(138, 99, 16, 0.05));
    border: 1px solid rgba(220, 180, 80, 0.35);
}
.sponsor-card-golden {
    background: rgba(217, 169, 59, 0.07);
    border-color: rgba(220, 180, 80, 0.25);
}
.sponsor-card-golden:hover {
    background: rgba(217, 169, 59, 0.18);
    border-color: rgba(220, 180, 80, 0.6);
    box-shadow: 0 6px 18px rgba(214, 165, 50, 0.3);
}
.sponsor-card-golden .sponsor-card-amount {
    color: #f0c861;
}

/* Silver — neutral metallic */
.sponsor-tier-silver {
    background: linear-gradient(135deg, rgba(168, 168, 168, 0.10), rgba(94, 94, 94, 0.05));
    border: 1px solid rgba(200, 200, 200, 0.25);
}
.sponsor-card-silver {
    background: rgba(168, 168, 168, 0.06);
    border-color: rgba(200, 200, 200, 0.20);
}
.sponsor-card-silver:hover {
    background: rgba(168, 168, 168, 0.16);
    border-color: rgba(200, 200, 200, 0.5);
    box-shadow: 0 6px 18px rgba(160, 160, 160, 0.25);
}
.sponsor-card-silver .sponsor-card-amount {
    color: #d8d8d8;
}

/* None — site info-cyan accent */
.sponsor-tier-none {
    background: linear-gradient(135deg, rgba(13, 202, 240, 0.08), rgba(13, 202, 240, 0.02));
    border: 1px solid rgba(13, 202, 240, 0.22);
}
.sponsor-card-none {
    background: rgba(13, 202, 240, 0.04);
    border-color: rgba(13, 202, 240, 0.15);
}
.sponsor-card-none:hover {
    background: rgba(13, 202, 240, 0.12);
    border-color: rgba(13, 202, 240, 0.45);
    box-shadow: 0 6px 18px rgba(13, 202, 240, 0.2);
}
.sponsor-card-none .sponsor-card-amount {
    color: #0dcaf0;
}

/* Bulk sell modal: cap the item list height so the modal stays within viewport. */
.bulk-sell-list {
    max-height: min(45vh, 360px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.25rem;
}

/* Sticker / Keychain pickers use ModalSize.ExtraLarge.
   Default cap is 1140px which still leaves the filter row and card grid
   crammed. Stretch toward the viewport edge on every breakpoint and lift
   the absolute cap on xxl monitors. */
@media (max-width: 1399.98px) {
    .bm-container .blazored-modal.size-extra-large {
        max-width: 95vw !important;
        width: 95vw !important;
    }
}

@media (min-width: 1400px) {
    .bm-container .blazored-modal.size-extra-large {
        max-width: min(92vw, 1600px) !important;
        width: 92vw !important;
    }
}