/* base.css - CSS Variables, Base Elements, Typography, and Utilities */

/* CSS Custom Properties */
:root {
    --bg-primary: #000000;
    --bg-secondary: #111111;
    --text-primary: #ffffff; 
    --text-secondary: #c0c0c0;
    --accent: #333333;
    --accent-light: #666666;
    --border: #333333;
    --favorite: #ffd700;
    --badge-primary: #007bff;
    --btn-channel: #28a745;        /* Green for TV channels */
    --btn-channel-hover: #218838;
    --btn-service: #17a2b8;        /* Teal for streaming services */
    --btn-service-hover: #138496;
    --clock-color: #ffc107; /* Game clock color */
}

/* Base Element Styles */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    margin: 0;
}

.container {
    background-color: transparent;
}

/* Typography */
.text-white {
    color: var(--text-primary) !important;
}

/* Link Styling - White by default */
a {
    color: var(--text-primary);
    text-decoration: none;
}

a:hover {
    color: var(--accent-light);
    text-decoration: none;
}

.text-decoration-none:hover {
    color: var(--accent-light);
}

/* Status Colors */
.text-success { color: #28a745 !important; }
.text-warning { color: #ffc107 !important; }
.text-danger { color: #dc3545 !important; }
.text-info { color: #17a2b8 !important; }
.text-muted { color: var(--text-secondary) !important; }

/* Game Clock Styling */
.game-clock {
    font-weight: bold;
    color: var(--clock-color);
    font-size: 0.95rem;
    white-space: nowrap;
}

.game-clock.static-time {
    animation: none !important;
    transition: color 0.5s;
}

/* Make scores more prominent */
.text-white.fw-bold {
    font-size: 110%;
    letter-spacing: 0.5px;
}

/* Ensure team names are white and readable */
.text-truncate {
    color: var(--text-primary) !important;
}

/* Background Utility Classes */
.custom-bg-primary {
    background-color: var(--bg-primary);
}

.custom-bg-secondary {
    background-color: var(--bg-secondary);
}

/* Keyframe Animations */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.85; }
    100% { opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Utility Classes */
.no-games-message {
    text-align: center;
    color: var(--text-secondary);
    margin: 0;
    padding: 2rem;
    font-style: italic;
}

/* Team Details Specific Styling */
.team-title {
    color: var(--text-primary) !important;
}

.team-meta {
    color: var(--text-secondary) !important;
}

.team-meta a {
    color: var(--text-secondary) !important;
}

.team-meta a:hover {
    color: var(--accent-light) !important;
}

.watch-description, 
.tab-description, 
.option-type, 
.stat-description,
.featured-description {
    color: var(--text-secondary) !important;
}

/* Tab Styling */
.seo-tab-button {
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid var(--border) !important;
}

.seo-tab-button.active {
    background: rgba(255, 255, 255, 0.2) !important;
    color: var(--text-primary) !important;
}

.tile-button {
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.tile-button.active {
    background: rgba(255, 255, 255, 0.2) !important;
}

.watch-tab-btn {
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.watch-tab-btn.active {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Badge Styling */
.badge {
    background: rgba(255, 255, 255, 0.2) !important;
    color: var(--text-primary) !important;
}

.badge-primary {
    background: var(--badge-primary) !important;
    color: var(--text-primary) !important;
}

.option-badge, 
.price-badge, 
.feature-badge {
    background: rgba(255, 255, 255, 0.3) !important;
    color: var(--text-primary) !important;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8em;
}

/* Network and Broadcaster Styling */
.network-name, 
.broadcaster-name {
    color: var(--text-primary) !important;
}

.network-games, 
.broadcaster-games {
    color: var(--text-secondary) !important;
}

.call-sign {
    color: var(--text-secondary) !important;
}

.broadcaster-type, 
.broadcaster-type-badge {
    color: var(--text-secondary) !important;
}

/* Analysis and Stats */
.analysis-stat .stat-number,
.summary-stat .stat-value {
    color: var(--text-primary) !important;
}

.analysis-stat .stat-description,
.summary-stat .stat-label {
    color: var(--text-secondary) !important;
}

/* Game Info */
.next-game-info h3,
.game-matchup {
    color: var(--text-primary) !important;
}

.next-game-date,
.next-game-channels,
.game-date,
.game-datetime {
    color: var(--text-secondary) !important;
}

/* Prime Time Styling */
.prime-time-slots .slot-day,
.prime-time-slots .slot-time,
.prime-time-slots .slot-network {
    color: var(--text-primary) !important;
}

.prime-time-slots .slot-description,
.show-name {
    color: var(--text-secondary) !important;
}

/* Network Badges */
.network-badge {
    padding: 4px 8px;
    border-radius: 4px;
    color: var(--text-primary) !important;
}

.network-badge.espn {
    background: #d32f2f !important;
}

.network-badge.nbc {
    background: #1976d2 !important;
}

.network-badge.amazon {
    background: #ff9800 !important;
}

/* Feature Lists */
.mlb-tv-features h5,
.nfl-plus-features h5 {
    color: var(--text-primary) !important;
}

.mlb-tv-features ul li,
.nfl-plus-features ul li,
.option-features p {
    color: var(--text-secondary) !important;
}

/* Card Headers */
.card h2, 
.card h3, 
.card h4, 
.card h5,
.option-header h4, 
.option-header h5,
.broadcaster-header h4, 
.broadcaster-header h5,
.featured-content h4 {
    color: var(--text-primary) !important;
}

/* Mobile Navigation Horizontal Scrolling */
.navbar-nav-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.navbar-nav-scroll::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.navbar-nav.d-flex.flex-row {
    flex-wrap: nowrap;
    white-space: nowrap;
}

.navbar-nav.d-flex.flex-row .nav-item {
    flex-shrink: 0;
}

.navbar-nav.d-flex.flex-row .nav-link {
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
}