/**
 * NBA HOUSE - Professional Design System v2
 * =========================================
 * Better contrast, fixed projection sections, ESPN quality
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
    /* Brighter dark theme - more contrast */
    --color-bg-base: #0f1318;
    --color-bg-primary: #151a21;
    --color-bg-secondary: #1a2029;
    --color-bg-tertiary: #212833;
    --color-bg-card: #1e252e;
    --color-bg-card-hover: #262f3a;
    --color-bg-elevated: #2a3441;
    --color-bg-input: #232b36;
    
    /* Brighter borders for contrast */
    --color-border-subtle: #2d3848;
    --color-border-default: #3a4556;
    --color-border-strong: #4a5568;
    --color-border-accent: #5a6b7a;
    
    /* Brighter text for readability */
    --color-text-primary: #f0f4f8;
    --color-text-secondary: #b8c4d0;
    --color-text-tertiary: #8a9bb0;
    --color-text-muted: #6b7c90;
    
    /* Vibrant accent colors */
    --color-accent-red: #e53e3e;
    --color-accent-gold: #f6ad55;
    --color-accent-yellow: #fbd38d;
    --color-accent-green: #48bb78;
    --color-accent-blue: #4299e1;
    
    /* Status colors */
    --color-win: #48bb78;
    --color-loss: #fc8181;
    --color-over: #48bb78;
    --color-under: #fc8181;
    
    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    
    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    
    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.35);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.4);
    --shadow-xl: 0 16px 40px rgba(0,0,0,0.5);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
}

/* ============================================
   GLOBAL BASE
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

html body,
body {
    font-family: var(--font-family) !important;
    background: var(--color-bg-base) !important;
    background-image: none !important;
    animation: none !important;
    color: var(--color-text-primary) !important;
    line-height: 1.6 !important;
    min-height: 100vh;
    padding-top: 88px !important;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family) !important;
    font-weight: 700 !important;
    color: var(--color-text-primary) !important;
    line-height: 1.25 !important;
    margin-bottom: var(--space-md) !important;
}

h1 { font-size: 2.25rem !important; font-weight: 800 !important; }
h2 { font-size: 1.75rem !important; }
h3 { font-size: 1.25rem !important; }
h4, h5 { font-size: 1rem !important; }

p {
    margin-bottom: var(--space-md) !important;
    color: var(--color-text-secondary) !important;
}

a {
    color: var(--color-accent-gold) !important;
    text-decoration: none !important;
    transition: color var(--transition-fast) !important;
}

a:hover {
    color: var(--color-accent-yellow) !important;
}

/* ============================================
   NAVBAR
   ============================================ */
nav.navbar,
.navbar {
    background: linear-gradient(180deg, var(--color-bg-primary) 0%, rgba(21, 26, 33, 0.98) 100%) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    padding: var(--space-sm) 0 !important;
    border-bottom: 1px solid var(--color-border-subtle) !important;
    box-shadow: var(--shadow-lg) !important;
}

.navbar-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 var(--space-lg) !important;
}

.navbar-logo img {
    height: 56px !important;
    width: auto !important;
}

.navbar-links a,
.navbar-links li a {
    color: var(--color-text-secondary) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    padding: var(--space-sm) var(--space-md) !important;
    border-radius: var(--radius-md) !important;
    transition: all var(--transition-fast) !important;
}

.navbar-links a:hover {
    color: var(--color-text-primary) !important;
    background: var(--color-bg-elevated) !important;
}

.navbar-links a.active {
    color: var(--color-accent-gold) !important;
    background: rgba(246, 173, 85, 0.12) !important;
}

/* Search */
.navbar-search input {
    background: var(--color-bg-input) !important;
    border: 1px solid var(--color-border-default) !important;
    color: var(--color-text-primary) !important;
    border-radius: var(--radius-full) !important;
    padding: var(--space-sm) var(--space-lg) !important;
}

.navbar-search input:focus {
    border-color: var(--color-accent-gold) !important;
    box-shadow: 0 0 0 3px rgba(246, 173, 85, 0.2) !important;
}

.navbar-search button {
    background: var(--color-accent-red) !important;
    border-radius: var(--radius-full) !important;
}

/* Auth buttons */
.btn-signin,
.user-dropdown-btn {
    background: var(--color-accent-red) !important;
    color: white !important;
    border-radius: var(--radius-full) !important;
    font-weight: 600 !important;
}

.user-dropdown-menu {
    background: var(--color-bg-tertiary) !important;
    border: 1px solid var(--color-border-default) !important;
    border-radius: var(--radius-lg) !important;
}

.user-dropdown-menu a {
    color: var(--color-text-secondary) !important;
}

.user-dropdown-menu a:hover {
    background: var(--color-bg-elevated) !important;
    color: var(--color-accent-gold) !important;
}

/* Mobile */
.mobile-toggle {
    background: var(--color-bg-elevated) !important;
    border: 1px solid var(--color-border-default) !important;
}

.mobile-toggle span {
    background: var(--color-accent-gold) !important;
}

.mobile-menu {
    background: var(--color-bg-primary) !important;
    border-bottom: 1px solid var(--color-border-default) !important;
    top: 88px !important;
}

.mobile-menu a {
    color: var(--color-text-secondary) !important;
}

.mobile-menu a:hover {
    background: var(--color-bg-elevated) !important;
    color: var(--color-accent-gold) !important;
}

/* ============================================
   LAYOUT
   ============================================ */
.container {
    max-width: 1400px !important;
    padding-left: var(--space-xl) !important;
    padding-right: var(--space-xl) !important;
}

.container.py-4 {
    padding-top: var(--space-2xl) !important;
    padding-bottom: var(--space-2xl) !important;
}

.row {
    margin-left: calc(var(--space-md) * -1) !important;
    margin-right: calc(var(--space-md) * -1) !important;
    row-gap: var(--space-xl) !important;
}

.row > [class*="col"] {
    padding-left: var(--space-md) !important;
    padding-right: var(--space-md) !important;
}

/* ============================================
   CARDS
   ============================================ */
.match-card,
.player-card,
.card,
.stats-card,
.content-area {
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border-subtle) !important;
    border-radius: var(--radius-xl) !important;
    padding: var(--space-xl) !important;
    margin-bottom: var(--space-lg) !important;
    transition: all var(--transition-base) !important;
    box-shadow: var(--shadow-md) !important;
}

.match-card:hover,
.player-card:hover,
.card:hover {
    border-color: var(--color-border-strong) !important;
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-xl) !important;
}

.match-card .d-flex {
    gap: var(--space-xl) !important;
}

.match-card h5 {
    font-size: 1rem !important;
    color: var(--color-text-primary) !important;
    margin: var(--space-md) 0 var(--space-sm) !important;
}

.match-card p {
    margin: var(--space-sm) 0 !important;
    padding: var(--space-xs) var(--space-sm) !important;
    font-size: 0.85rem !important;
    color: var(--color-text-secondary) !important;
    border-radius: var(--radius-sm) !important;
    transition: all var(--transition-fast) !important;
    transform: none !important;
    text-shadow: none !important;
}

.match-card p:hover {
    background: var(--color-bg-elevated) !important;
    color: var(--color-accent-gold) !important;
    transform: translateX(4px) !important;
    text-shadow: none !important;
}

.vs-text {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: var(--color-text-muted) !important;
    padding: 0 var(--space-lg) !important;
}

.team-logo {
    width: 75px !important;
    height: 75px !important;
    object-fit: contain !important;
    margin-bottom: var(--space-sm) !important;
}

/* ============================================
   SCORE DISPLAY
   ============================================ */
.score-display {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: var(--space-md) !important;
    padding: var(--space-lg) var(--space-xl) !important;
    margin-bottom: var(--space-lg) !important;
    background: linear-gradient(135deg, rgba(229, 62, 62, 0.12) 0%, rgba(246, 173, 85, 0.12) 100%) !important;
    border-radius: var(--radius-xl) !important;
    border: 1px solid var(--color-border-default) !important;
}

.team-score {
    font-size: 2.5rem !important;
    font-weight: 900 !important;
    min-width: 70px !important;
    text-align: center !important;
}

.team-score.winner {
    color: var(--color-win) !important;
}

.team-score.loser {
    color: var(--color-text-tertiary) !important;
}

.score-separator {
    color: var(--color-text-muted) !important;
    font-size: 2rem !important;
}

.final-badge {
    position: absolute !important;
    top: -10px !important;
    right: var(--space-lg) !important;
    background: var(--color-win) !important;
    color: var(--color-bg-base) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    padding: var(--space-xs) var(--space-md) !important;
    border-radius: var(--radius-full) !important;
}

/* ============================================
   PROJECTION STATS CONTAINER - FIX WHITE BOX
   ============================================ */
.stats-container {
    background: var(--color-bg-tertiary) !important;
    border: 1px solid var(--color-border-default) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-lg) var(--space-xl) !important;
    box-shadow: var(--shadow-md) !important;
}

.stat-block {
    text-align: center !important;
}

.stat-block .label {
    font-size: 0.75rem !important;
    color: var(--color-text-tertiary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: var(--space-xs) !important;
    font-weight: 600 !important;
}

.stat-block .value {
    font-size: 1.25rem !important;
    color: var(--color-text-primary) !important;
    font-weight: 700 !important;
}

.stat-block .value span {
    color: var(--color-text-secondary) !important;
}

/* Divider between stats */
.divider {
    width: 1px !important;
    height: 50px !important;
    background: var(--color-border-default) !important;
}

/* Status icons */
.status-value {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-sm) !important;
}

.status-icon.success {
    background: var(--color-win) !important;
}

.status-icon.error {
    background: var(--color-loss) !important;
}

.status-icon.unknown {
    background: var(--color-text-muted) !important;
}

/* ============================================
   BUTTONS
   ============================================ */
button,
.btn {
    font-family: var(--font-family) !important;
    font-weight: 600 !important;
    border-radius: var(--radius-md) !important;
    transition: all var(--transition-fast) !important;
}

.btn-primary {
    background: var(--color-accent-red) !important;
    color: white !important;
    border: none !important;
}

.btn-primary:hover {
    background: #c53030 !important;
}

.btn-secondary,
.btn-outline-secondary {
    background: transparent !important;
    color: var(--color-accent-gold) !important;
    border: 2px solid var(--color-accent-gold) !important;
}

.btn-outline-secondary:hover {
    background: var(--color-accent-gold) !important;
    color: var(--color-bg-base) !important;
}

.game-details-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--space-sm) !important;
    background: var(--color-bg-elevated) !important;
    border: 2px solid var(--color-accent-gold) !important;
    color: var(--color-accent-gold) !important;
    padding: var(--space-sm) var(--space-xl) !important;
    border-radius: var(--radius-full) !important;
    font-weight: 600 !important;
}

.game-details-btn:hover {
    background: var(--color-accent-gold) !important;
    color: var(--color-bg-base) !important;
}

.match-card-footer {
    text-align: center !important;
    border-top: 1px solid var(--color-border-subtle) !important;
    padding-top: var(--space-lg) !important;
    margin-top: var(--space-lg) !important;
}

/* Graph buttons */
.graph-container button,
.projbutt button {
    background: var(--color-bg-elevated) !important;
    color: var(--color-text-secondary) !important;
    border: 1px solid var(--color-border-default) !important;
    padding: var(--space-sm) var(--space-md) !important;
    margin: var(--space-xs) !important;
    border-radius: var(--radius-full) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
}

.graph-container button:hover,
.projbutt button:hover {
    background: var(--color-accent-gold) !important;
    color: var(--color-bg-base) !important;
    border-color: var(--color-accent-gold) !important;
}

/* ============================================
   FORMS & INPUTS
   ============================================ */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
    background: var(--color-bg-input) !important;
    border: 1px solid var(--color-border-default) !important;
    color: var(--color-text-primary) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-sm) var(--space-md) !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-accent-gold) !important;
    box-shadow: 0 0 0 3px rgba(246, 173, 85, 0.2) !important;
    background: var(--color-bg-elevated) !important;
}

/* Range slider */
input[type="range"] {
    -webkit-appearance: none !important;
    height: 6px !important;
    background: var(--color-bg-elevated) !important;
    border-radius: var(--radius-full) !important;
    border: none !important;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    background: var(--color-accent-gold) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
}

#alt-line-value {
    color: var(--color-accent-gold) !important;
    font-weight: 700 !important;
}

/* ============================================
   TABLES
   ============================================ */
table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: 0.9rem !important;
}

th {
    background: var(--color-bg-secondary) !important;
    color: var(--color-text-tertiary) !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    padding: var(--space-md) !important;
    border-bottom: 2px solid var(--color-border-strong) !important;
}

td {
    padding: var(--space-md) !important;
    border-bottom: 1px solid var(--color-border-subtle) !important;
    color: var(--color-text-primary) !important;
    background: var(--color-bg-card) !important;
}

tbody tr:hover td {
    background: var(--color-bg-elevated) !important;
}

.table-responsive {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--color-border-subtle) !important;
}

/* ============================================
   MODALS - FIX CLOSE BUTTON
   ============================================ */
.modal-content {
    background: var(--color-bg-tertiary) !important;
    border: 1px solid var(--color-border-default) !important;
    border-radius: var(--radius-xl) !important;
    color: var(--color-text-primary) !important;
}

.modal-header {
    background: var(--color-bg-secondary) !important;
    border-bottom: 1px solid var(--color-border-subtle) !important;
    padding: var(--space-lg) !important;
}

.modal-title {
    color: var(--color-text-primary) !important;
    font-weight: 700 !important;
}

.modal-body {
    padding: var(--space-xl) !important;
}

.modal-footer {
    background: var(--color-bg-secondary) !important;
    border-top: 1px solid var(--color-border-subtle) !important;
    padding: var(--space-lg) !important;
}

/* Fix close button visibility */
.btn-close {
    filter: invert(1) brightness(0.8) !important;
    opacity: 0.7 !important;
    padding: var(--space-sm) !important;
    background-size: 1rem !important;
}

.btn-close:hover {
    opacity: 1 !important;
}

/* Modal tabs */
.modal-content .nav-tabs {
    border-bottom: 1px solid var(--color-border-subtle) !important;
}

.modal-content .nav-tabs .nav-link {
    color: var(--color-text-tertiary) !important;
    border: none !important;
    background: transparent !important;
}

.modal-content .nav-tabs .nav-link.active {
    color: var(--color-accent-gold) !important;
    border-bottom: 2px solid var(--color-accent-gold) !important;
}

/* Fix btn-secondary in modals */
.modal-content .btn-secondary,
.modal-footer .btn-secondary {
    background: var(--color-bg-elevated) !important;
    color: var(--color-text-primary) !important;
    border: 1px solid var(--color-border-default) !important;
}

.modal-content .btn-secondary:hover,
.modal-footer .btn-secondary:hover {
    background: var(--color-bg-card-hover) !important;
    border-color: var(--color-border-strong) !important;
}

/* ============================================
   GRAPH CONTAINER
   ============================================ */
.graph-container {
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border-subtle) !important;
    border-radius: var(--radius-xl) !important;
    padding: var(--space-xl) !important;
}

.graph-container h3 {
    font-size: 1.25rem !important;
    margin-bottom: var(--space-lg) !important;
}

.graph-container label {
    color: var(--color-text-secondary) !important;
    font-size: 0.9rem !important;
}

/* Loader */
.loader {
    padding: var(--space-2xl) !important;
}

.loader span {
    width: 14px !important;
    height: 14px !important;
    background: var(--color-accent-gold) !important;
    border-radius: 50% !important;
}

/* ============================================
   PLAYER HEADER
   ============================================ */
.player-header {
    background: linear-gradient(135deg, var(--color-bg-card) 0%, var(--color-bg-secondary) 100%) !important;
    border-radius: var(--radius-2xl) !important;
    border: 1px solid var(--color-border-subtle) !important;
    padding: var(--space-2xl) !important;
    margin-bottom: var(--space-xl) !important;
}

.player-portrait img {
    width: 140px !important;
    height: 140px !important;
    border-radius: var(--radius-xl) !important;
    border: 3px solid var(--color-border-strong) !important;
}

/* ============================================
   PROJECTION STATUS BADGES
   ============================================ */
.status-over,
.projection-status.over {
    background: rgba(72, 187, 120, 0.15) !important;
    color: var(--color-over) !important;
    border: 1px solid rgba(72, 187, 120, 0.3) !important;
    padding: var(--space-xs) var(--space-md) !important;
    border-radius: var(--radius-full) !important;
    font-weight: 700 !important;
}

.status-under,
.projection-status.under {
    background: rgba(252, 129, 129, 0.15) !important;
    color: var(--color-under) !important;
    border: 1px solid rgba(252, 129, 129, 0.3) !important;
    padding: var(--space-xs) var(--space-md) !important;
    border-radius: var(--radius-full) !important;
    font-weight: 700 !important;
}

/* ============================================
   SIMILAR PLAYERS SCROLL
   ============================================ */
.scroll-container {
    display: flex !important;
    gap: var(--space-lg) !important;
    overflow-x: auto !important;
    padding: var(--space-md) 0 !important;
}

.scroll-container::-webkit-scrollbar {
    height: 6px !important;
}

.scroll-container::-webkit-scrollbar-track {
    background: var(--color-bg-elevated) !important;
    border-radius: var(--radius-full) !important;
}

.scroll-container::-webkit-scrollbar-thumb {
    background: var(--color-border-strong) !important;
    border-radius: var(--radius-full) !important;
}

.card-item {
    flex: 0 0 auto !important;
    width: 140px !important;
    text-align: center !important;
}

.card-photo {
    border-radius: var(--radius-lg) !important;
    border: 2px solid var(--color-border-subtle) !important;
}

.card-item:hover .card-photo {
    border-color: var(--color-accent-gold) !important;
}

.card-button {
    background: var(--color-bg-elevated) !important;
    color: var(--color-text-secondary) !important;
    border-radius: var(--radius-md) !important;
}

.card-button:hover {
    background: var(--color-accent-gold) !important;
    color: var(--color-bg-base) !important;
}

/* ============================================
   SHARE BUTTON & FAVOURITES
   ============================================ */
.share-button {
    background: var(--color-bg-elevated) !important;
    border: 1px solid var(--color-border-default) !important;
    border-radius: var(--radius-md) !important;
}

.share-button svg path {
    fill: var(--color-text-primary) !important;
}

.share-button:hover {
    border-color: var(--color-accent-gold) !important;
}

.star-icon,
.favourite-btn,
.fav-star {
    cursor: pointer !important;
    transition: all var(--transition-fast) !important;
    color: var(--color-text-muted) !important;
}

.star-icon.full,
.favourite-btn.full,
.fav-star.full {
    color: var(--color-accent-gold) !important;
}

/* ============================================
   FOOTER
   ============================================ */
footer,
.footer {
    background: var(--color-bg-primary) !important;
    border-top: 1px solid var(--color-border-subtle) !important;
    padding: var(--space-3xl) var(--space-xl) var(--space-2xl) !important;
    margin-top: var(--space-3xl) !important;
}

footer a {
    color: var(--color-text-secondary) !important;
}

footer a:hover {
    color: var(--color-accent-gold) !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 991px) {
    .navbar-links,
    .navbar-account {
        display: none !important;
    }
    
    .mobile-toggle {
        display: flex !important;
    }
    
    body {
        padding-top: 80px !important;
    }
}

@media (max-width: 768px) {
    .container {
        padding-left: var(--space-md) !important;
        padding-right: var(--space-md) !important;
    }
    
    .player-header {
        flex-direction: column !important;
        text-align: center !important;
        padding: var(--space-xl) !important;
    }
    
    .player-portrait img {
        width: 100px !important;
        height: 100px !important;
    }
    
    .match-card .d-flex {
        gap: var(--space-md) !important;
    }
    
    .team-logo {
        width: 55px !important;
        height: 55px !important;
    }
    
    .vs-text {
        font-size: 1rem !important;
        padding: 0 var(--space-sm) !important;
    }
    
    .team-score {
        font-size: 1.75rem !important;
    }
    
    .stats-container {
        flex-wrap: wrap !important;
        gap: var(--space-md) !important;
    }
    
    .divider {
        display: none !important;
    }
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.match-card,
.stats-card,
.player-card {
    animation: fadeInUp 0.4s ease forwards !important;
}

/* Stagger */
.row > [class*="col"]:nth-child(1) .match-card { animation-delay: 0s !important; }
.row > [class*="col"]:nth-child(2) .match-card { animation-delay: 0.06s !important; }
.row > [class*="col"]:nth-child(3) .match-card { animation-delay: 0.12s !important; }
.row > [class*="col"]:nth-child(4) .match-card { animation-delay: 0.18s !important; }
.row > [class*="col"]:nth-child(5) .match-card { animation-delay: 0.24s !important; }
.row > [class*="col"]:nth-child(6) .match-card { animation-delay: 0.3s !important; }