/**
 * PHASE 6 — FINAL POLISH + PRODUCTION QA
 * Targeted fixes for identified issues
 * DO NOT redesign - only polish and fix proven problems
 */

/* ============================================
   CRITICAL FIX: Mode Bar Height Consistency
   ============================================ */

/* Ensure mode bar is exactly 44px at all breakpoints */
.bc-sb-mode-bar {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
}

@media (max-width: 1023px) {
    .bc-sb-mode-bar {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
    }
}

/* ============================================
   CRITICAL FIX: Header Height Consistency
   ============================================ */

/* Desktop: 56px */
@media (min-width: 1024px) {
    .bc-sb-header {
        height: 56px !important;
        min-height: 56px !important;
        max-height: 56px !important;
    }
}

/* Mobile: 52px + safe area */
@media (max-width: 1023px) {
    .bc-sb-header {
        height: auto !important;
        min-height: 52px !important;
        max-height: 52px !important;
        padding-top: max(env(safe-area-inset-top), 12px) !important;
    }
}

/* ============================================
   CRITICAL FIX: Sports Nav Height Consistency
   ============================================ */

.bc-sb-sports-nav {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
}

@media (max-width: 1023px) {
    .bc-sb-sports-nav {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
    }
}

/* ============================================
   FIX: Z-Index Hierarchy Optimization
   ============================================ */

/* Coherent z-index layers */
.bc-sb-header {
    z-index: 100 !important;
}

.bc-sb-sports-nav {
    z-index: 99 !important;
}

.bc-sb-mode-bar {
    z-index: 98 !important;
}

.bc-sb-floating-betslip {
    z-index: 1000 !important;
}

.bc-sb-mobile-betslip {
    z-index: 2000 !important;
}

.bc-sb-mobile-nav {
    z-index: 2500 !important;
}

.bc-sb-match-center-mobile {
    z-index: 3000 !important;
}

.bc-sb-search-modal {
    z-index: 2500 !important;
}

/* ============================================
   FIX: Duplicate ID Issue Prevention
   ============================================ */

/* Since duplicate IDs exist (bcSbSportsPanel, bcSbHubTabBadgeBetslip, bcSbHubTabBadgeMyBets),
   ensure both instances have correct styling */

#bcSbSportsPanel {
    /* Both desktop and mobile sports panels */
}

#bcSbHubTabBadgeBetslip,
#bcSbHubTabBadgeMyBets {
    /* Both desktop and mobile badge instances */
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ============================================
   POLISH: Visual Hierarchy Consistency
   ============================================ */

/* Date separator: exactly 32px mobile */
@media (max-width: 1023px) {
    .bc-sb-date-separator {
        height: 32px !important;
        min-height: 32px !important;
        padding: 8px 16px !important;
    }
}

/* League header: exactly 38px mobile */
@media (max-width: 1023px) {
    .bc-sb-league-header {
        height: 38px !important;
        min-height: 38px !important;
        padding: 10px 16px !important;
    }
}

/* Match cards: 72px minimum mobile */
@media (max-width: 1023px) {
    .bc-sb-match-card {
        min-height: 72px !important;
    }
}

/* ============================================
   POLISH: Odds Button Touch Targets
   ============================================ */

@media (max-width: 1023px) {
    .bc-sb-odds-btn {
        min-width: 54px !important;
        min-height: 44px !important;
    }
}

/* ============================================
   POLISH: Top League/Country Rows
   ============================================ */

@media (max-width: 1023px) {
    .bc-sb-top-league-item,
    .bc-sb-top-country-item {
        min-height: 44px !important;
    }
}

/* ============================================
   POLISH: BetSlip CTA Consistency
   ============================================ */

@media (max-width: 1023px) {
    .bc-sb-stake__input {
        height: 44px !important;
        min-height: 44px !important;
    }
    
    .bc-sb-place-btn {
        height: 48px !important;
        min-height: 48px !important;
    }
    
    .bc-sb-booking-btn {
        height: 44px !important;
        min-height: 44px !important;
    }
}

/* ============================================
   POLISH: Selection Card Consistency
   ============================================ */

@media (max-width: 1023px) {
    .bc-sb-selection {
        min-height: 70px !important;
    }
}

/* ============================================
   POLISH: Floating BetSlip Touch Target
   ============================================ */

@media (max-width: 1023px) {
    .bc-sb-floating-betslip {
        min-width: 56px !important;
        min-height: 56px !important;
    }
}

/* ============================================
   POLISH: Typography Consistency
   ============================================ */

/* Prevent text clipping/overlap */
.bc-sb-match-card__team,
.bc-sb-top-league-item__name,
.bc-sb-top-country-item__name,
.bc-sb-league-header__name {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* ============================================
   POLISH: Border Radius Consistency
   ============================================ */

/* Standard radius: 6px */
.bc-sb-odds-btn,
.bc-sb-selection,
.bc-sb-mode-btn,
.bc-sb-search-trigger,
.bc-sb-favorites-trigger,
.bc-sb-stake__input,
.bc-sb-place-btn,
.bc-sb-booking-btn {
    border-radius: 6px !important;
}

/* Pill radius: 18px-28px */
.bc-sb-sports-nav__item {
    border-radius: 18px !important;
}

.bc-sb-floating-betslip {
    border-radius: 28px !important;
}

/* ============================================
   POLISH: Color Contrast Improvements
   ============================================ */

/* Ensure readable text on dark backgrounds */
.bc-sb-match-card__team {
    color: #f5f7fa !important;
}

.bc-sb-match-card__time {
    color: #9ca3af !important;
}

.bc-sb-odds-btn__label {
    color: #9ca3af !important;
}

.bc-sb-odds-btn__value {
    color: #f5f7fa !important;
}

/* ============================================
   POLISH: Spacing Consistency
   ============================================ */

/* Standard gaps: 8px, 12px, 16px, 20px */
@media (max-width: 1023px) {
    .bc-sb-match-card__odds {
        gap: 6px !important;
    }
    
    .bc-sb-match-card__header {
        gap: 12px !important;
    }
}

/* ============================================
   POLISH: Animation Performance
   ============================================ */

/* Ensure smooth transitions */
.bc-sb-odds-btn,
.bc-sb-mode-btn,
.bc-sb-sports-nav__item,
.bc-sb-top-league-item,
.bc-sb-top-country-item {
    transition: all 0.15s ease !important;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .bc-sb-odds-btn,
    .bc-sb-mode-btn,
    .bc-sb-sports-nav__item,
    .bc-sb-top-league-item,
    .bc-sb-top-country-item,
    .bc-sb-mobile-betslip {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================
   POLISH: Scroll Performance
   ============================================ */

/* GPU acceleration for smooth scrolling */
.bc-sb-sports-nav,
.bc-sb-main-content,
.bc-sb-sidebar__content,
.bc-sb-betslip__content,
.bc-sb-mobile-betslip__content {
    -webkit-overflow-scrolling: touch !important;
    will-change: scroll-position !important;
}

/* ============================================
   POLISH: Active State Consistency
   ============================================ */

/* Ensure active states are visually distinct */
.bc-sb-sports-nav__item--active {
    background: rgba(255, 215, 0, 0.12) !important;
    border-color: rgba(255, 215, 0, 0.3) !important;
    color: #FFD700 !important;
}

.bc-sb-mode-btn--active {
    background: rgba(255, 215, 0, 0.12) !important;
    border-color: rgba(255, 215, 0, 0.3) !important;
    color: #FFD700 !important;
}

.bc-sb-hub-tab--active {
    color: #FFD700 !important;
}

.bc-sb-odds-btn--selected {
    background: rgba(255, 215, 0, 0.12) !important;
    border-color: rgba(255, 215, 0, 0.3) !important;
}

/* ============================================
   POLISH: Suspended/Disabled States
   ============================================ */

.bc-sb-odds-btn--suspended {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.bc-sb-selection--suspended {
    opacity: 0.5 !important;
    background: rgba(239, 68, 68, 0.08) !important;
}

/* ============================================
   POLISH: LIVE Badge Consistency
   ============================================ */

.bc-sb-match-card__live,
.bc-sb-selection__live {
    background: #ef4444 !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    padding: 3px 6px !important;
    border-radius: 3px !important;
}

.bc-sb-mode-btn--live .bc-sb-mode-btn__indicator {
    background: #ef4444 !important;
    animation: pulse-live 1.5s ease-in-out infinite !important;
}

@keyframes pulse-live {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ============================================
   POLISH: Empty State Consistency
   ============================================ */

.bc-sb-empty {
    text-align: center !important;
    padding: 40px 20px !important;
}

.bc-sb-empty__title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #9ca3af !important;
    margin-bottom: 8px !important;
}

.bc-sb-empty__text {
    font-size: 13px !important;
    color: #6b7280 !important;
}

/* ============================================
   POLISH: Safe Area Final Pass
   ============================================ */

@media (max-width: 1023px) {
    /* Header */
    .bc-sb-header {
        padding-top: max(env(safe-area-inset-top), 12px) !important;
    }
    
    /* Floating BetSlip */
    .bc-sb-floating-betslip {
        bottom: max(env(safe-area-inset-bottom), 16px) !important;
        right: max(env(safe-area-inset-right), 16px) !important;
    }
    
    /* Mobile drawer */
    .bc-sb-mobile-betslip {
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
    
    /* Match Center */
    .bc-sb-match-center-mobile {
        padding-top: env(safe-area-inset-top) !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
}

/* ============================================
   POLISH: Horizontal Overflow Prevention
   ============================================ */

/* Final overflow prevention at shell level */
@media (max-width: 1023px) {
    .bc-sb-app {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    .bc-sb-container {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    /* Allow sports nav to scroll horizontally */
    .bc-sb-sports-nav {
        overflow-x: auto !important;
    }
    
    /* Prevent content from causing horizontal scroll */
    .bc-sb-main-content,
    .bc-sb-match-card,
    .bc-sb-league-header,
    .bc-sb-date-separator {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

/* ============================================
   POLISH: Focus Visible States (Accessibility)
   ============================================ */

.bc-sb-odds-btn:focus-visible,
.bc-sb-mode-btn:focus-visible,
.bc-sb-sports-nav__item:focus-visible,
.bc-sb-hub-tab:focus-visible,
.bc-sb-place-btn:focus-visible,
.bc-sb-booking-btn:focus-visible {
    outline: 2px solid #FFD700 !important;
    outline-offset: 2px !important;
}

/* ============================================
   POLISH: Loading State Consistency
   ============================================ */

.bc-sb-odds-btn--loading {
    opacity: 0.6 !important;
    cursor: wait !important;
}

.bc-sb-odds-btn--loading .bc-sb-odds-btn__value {
    color: #6b7280 !important;
}

/* ============================================
   END PHASE 6 FINAL POLISH
   ============================================ */