/* styles.css (Final Professional Version - La Liga DARK THEME) */
:root { 
    /* ✅ THEME: New Dark Theme Color Palette */
    --primary-bg: #121212; /* Very dark main background */
    --surface-bg: #1e1e1e; /* Lighter grey for cards and rows */
    --header-bg: #1e1e1e; /* Matching header background */
    --header-text: #ffffff; 
    --primary-text: #e0e0e0; /* Off-white for main text */
    --secondary-text: #9e9e9e; /* Muted grey for secondary text */
    --accent-color: #fbc02d; /* Vibrant yellow for accents */
    --selected-odd-bg: var(--accent-color); /* Selected odds are now yellow */
    --border-color: #424242; /* Dark border color */
    --shadow-color: rgba(0, 0, 0, 0.2); 
    --status-won: #4caf50; 
    --status-lost: #f44336; 
    --status-pending: #ff9800; 
    --success-bg: #2e7d32; 
    --error-bg: #c62828; 
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: var(--primary-bg); color: var(--primary-text); font-size: 14px; }
.container { max-width: 800px; margin: 0 auto; padding-bottom: 70px; }
.header { background-color: var(--header-bg); color: var(--header-text); padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--border-color); }
.header-logo-time { display: flex; align-items: center; gap: 12px; }
.league-logo { height: 28px; }
.liga-specific-logo { height: 32px; }
.countdown-timer { font-size: 1.1rem; font-weight: 700; }
.header-info { font-size: 0.9rem; text-align: right; }
#balance-display { font-weight: bold; }
#real-balance-display { font-size: 0.8em; color: #ccc; margin-top: 4px; }
.header-info strong { color: var(--accent-color); }
.main-nav { display: flex; background-color: var(--primary-bg); padding: 4px; gap: 4px; }
/* ✅ THEME: Updated nav buttons for dark theme */
.nav-btn { flex: 1; padding: 8px; border: 1px solid var(--border-color); background-color: var(--surface-bg); border-radius: 4px; font-weight: 600; color: var(--primary-text); cursor: pointer; }
/* ✅ THEME: Updated banner for dark theme */
#round-id-banner { text-align: center; padding: 6px; background-color: #2c2c2c; color: var(--secondary-text); font-weight: 600; font-size: 0.8rem; }
.market-nav { display: flex; overflow-x: auto; background-color: var(--surface-bg); border-bottom: 1px solid var(--border-color); }
.market-tab { white-space: nowrap; padding: 8px 12px; border: none; background: none; cursor: pointer; font-weight: 600; color: var(--secondary-text); border-bottom: 3px solid transparent; }
.market-tab.active { color: var(--accent-color); border-bottom-color: var(--accent-color); }
.market-header { display: flex; font-weight: 600; font-size: 0.7rem; padding: 8px 12px; color: var(--secondary-text); background-color: #2c2c2c; }
.market-header-cell.teams { flex: 1.2; }
.market-header-cell.outcomes { flex: 1; display: flex; justify-content: space-around; }
.match-row { display: flex; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border-color); background-color: var(--surface-bg); }
.match-info { flex: 1.2; display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.9rem; }
.team-logo { width: 18px; height: 18px; }
.odds-container { flex: 1; display: flex; justify-content: space-around; gap: 4px; }
/* ✅ THEME: New odds buttons for dark theme */
.odd-button { 
    flex: 1; 
    background-color: #2c2c2c; /* Dark grey background */
    border: 1px solid var(--border-color); 
    border-radius: 6px; 
    padding: 10px 4px; 
    text-align: center; 
    cursor: pointer; 
    font-weight: 700; 
    font-size: 0.9rem; 
    color: var(--accent-color); /* Yellow text */
    transition: background-color 0.2s, color 0.2s; 
}
/* ✅ THEME: New selected odds style */
.odd-button.selected { 
    background-color: var(--selected-odd-bg); /* Yellow background */
    color: #121212; /* Dark text for contrast */
    border-color: var(--accent-color);
}
.odd-button:disabled { cursor: not-allowed; opacity: 0.6; }
.live-view-header { display:flex; justify-content: space-between; align-items: center; background-color: #2c2c2c; padding: 8px 12px; }
.live-timer { color: var(--accent-color); font-size: 1.1rem; font-weight: 700; }
.live-match-row { display: flex; align-items: center; padding: 10px 12px; background-color: var(--surface-bg); border-bottom: 1px solid var(--border-color); font-weight: 600; }
.live-match-teams { flex: 1; display: flex; align-items: center; gap: 6px; }
.live-match-score { font-size: 1.1rem; font-weight: 700; color: var(--primary-text); }
.bet-slip-container { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 101; }
.bet-slip { background-color: #2a2a2a; border-top: 1px solid var(--border-color); box-shadow: 0 -4px 12px var(--shadow-color); padding: 10px; }
.bet-slip-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.slip-controls { display: flex; gap: 8px; }
.slip-control-btn { background: #424242; border: 1px solid #616161; color: var(--primary-text); border-radius: 4px; padding: 4px 8px; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
#slip-content-wrapper { display: none; }
.bet-slip-container:not(.collapsed) #slip-content-wrapper { display: block; }
.summary-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.stake-input-wrapper { position: relative; display: flex; align-items: center; }
#total-stake { padding: 6px 20px 6px 6px; border: 1px solid var(--border-color); border-radius: 4px; width: 120px; text-align: right; background-color: #333; color: var(--primary-text); }
.clear-stake-btn { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 1.2rem; color: var(--secondary-text); cursor: pointer; line-height: 1; }
.stake-buttons { display: flex; gap: 4px; margin-bottom: 10px; }
.stake-btn { flex: 1; padding: 6px; font-size: 0.8rem; font-weight: 600; background-color: #424242; border: 1px solid #616161; color: var(--primary-text); border-radius: 4px; cursor: pointer; }
#place-bet-btn { width: 100%; padding: 10px; background-color: #27ae60; color: white; border: none; border-radius: 6px; font-size: 1rem; font-weight: 700; cursor: pointer; }
#place-bet-btn:disabled { background-color: #555; color: #9e9e9e; cursor: not-allowed; }
.loader { text-align: center; padding: 40px; font-size: 1rem; color: var(--secondary-text); }
/* MODAL STYLES */
.modal-container-hidden { display: none; }
.modal-container-visible { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); z-index: 200; display: flex; justify-content: center; align-items: center; }
.modal-content { background-color: var(--primary-bg); width: 100%; height: 100%; max-width: 800px; max-height: 100vh; display: flex; flex-direction: column; }
.modal-header { background-color: var(--header-bg); color: var(--header-text); padding: 12px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); }
.modal-close-btn { background: none; border: none; color: white; font-size: 2rem; cursor: pointer; line-height: 1; }
.modal-body { overflow-y: auto; flex-grow: 1; padding: 10px; }

#bet-detail-popup.modal-container-visible { z-index: 201; }
.bet-detail-popup-content { background-color: var(--primary-bg); max-width: 500px; max-height: 90vh; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
#bet-detail-popup-body .bet-information,
#bet-detail-popup-body .bet-detail-header { background-color: var(--surface-bg); padding: 12px; border-radius: 6px; }
#bet-detail-popup-body .bet-detail-header { margin-bottom: 10px; }
#bet-detail-popup-body .bet-information { margin-top: 10px; }

/* Session modal already has a dark theme, so it fits perfectly */
.session-modal-content { max-width: 90%; width: 384px; max-height: fit-content; background-color: #1e293b; color: white; text-align: center; padding: 2rem; border-radius: 0.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.5); }
.session-modal-content h2 { font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem; color: #facc15; }
.session-modal-content p { margin-bottom: 1.5rem; }
.session-buttons { display: flex; justify-content: center; gap: 1rem; }
.session-buttons button { padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: bold; width: 50%; border: none; cursor: pointer; transition: transform 0.2s; }
.session-btn-real { background-color: #2563eb; color: white; }
.session-btn-bonus { background-color: #16a34a; color: white; }

.history-round { margin-bottom: 15px; }
.history-round-title { font-size: 1rem; font-weight: 700; padding: 8px; background-color: #2c2c2c; border-radius: 4px; margin-bottom: 5px; }
.history-match { display: flex; justify-content: space-between; padding: 8px; background-color: var(--surface-bg); border-bottom: 1px solid var(--border-color); }
.bet-detail-header-row { display: flex; justify-content: space-between; align-items: center; }
.bet-detail-title { font-size: 1.1rem; font-weight: 700; }
.bet-detail-leg-count { font-size: 0.9rem; color: var(--primary-text); background-color: #2c2c2c; padding: 2px 6px; border-radius: 4px; }
.bet-detail-leg { display: flex; align-items: center; background-color: var(--surface-bg); padding: 12px 8px; border-left: 4px solid; margin-bottom: 2px; }
.bet-detail-leg.status-WON { border-left-color: var(--status-won); }
.bet-detail-leg.status-LOST { border-left-color: var(--status-lost); }
.bet-detail-leg.status-PENDING { border-left-color: var(--status-pending); }
.leg-status-icon { margin-right: 8px; width: 20px; height: 20px; }
.leg-info { flex-grow: 1; }
.leg-info > div:first-child { font-weight: 600; margin-bottom: 4px; }
.leg-info > div:last-child { font-size: 0.8rem; color: var(--secondary-text); }
.leg-outcome { font-weight: 700; text-align: right; }
.leg-odds { color: var(--accent-color); font-weight: 700; }
.leg-score { font-size: 0.8rem; color: var(--secondary-text); }
.info-title { font-weight: 700; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; margin-bottom: 8px; }
.info-row { display: flex; justify-content: space-between; padding: 4px 0; }
.my-bets-list { display: grid; gap: 8px; }
.my-bets-list-item { display: flex; justify-content: space-between; align-items: center; padding: 12px; background-color: var(--surface-bg); border-radius: 6px; cursor: pointer; border: 1px solid var(--border-color); transition: border-color 0.2s, box-shadow 0.2s; }
.my-bets-list-item:hover { border-color: var(--accent-color); }
.bet-item-summary-text { font-size: 0.8rem; color: var(--secondary-text); }
.bet-item-status { font-weight: 700; padding: 4px 8px; border-radius: 12px; color: white; font-size: 0.8rem; text-transform: capitalize; }
.bet-item-status-won { background-color: var(--status-won); }
.bet-item-status-lost { background-color: var(--status-lost); }
.bet-item-status-pending { background-color: var(--status-pending); }
#toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; }
.toast { padding: 12px 18px; color: white; border-radius: 6px; margin-bottom: 10px; font-size: 0.9rem; box-shadow: 0 4px 12px rgba(0,0,0,0.15); opacity: 0; transform: translateX(100%); animation: slideIn 0.5s forwards, fadeOut 0.5s 2.5s forwards; }
.toast.success { background-color: var(--success-bg); }
.toast.error { background-color: var(--error-bg); }
@keyframes slideIn { to { opacity: 1; transform: translateX(0); } }
@keyframes fadeOut { to { opacity: 0; transform: translateX(100%); } }
.hidden { display: none !important; }
.bonus-badge { display: inline-block; background-color: var(--status-pending); color: #121212; font-size: 0.7rem; font-weight: 700; padding: 2px 6px; border-radius: 8px; margin-left: 8px; vertical-align: middle; }