/* CYBERNETIC DARK THEME - DEEP GRAY/ELECTRIC BLUE/WHITE */
/*
  File: styles.css
  Description: Main stylesheet for the application.
  This file defines the visual appearance, including the dark theme,
  layout, component styles, responsive behavior, and animations.
  It uses CSS custom properties (variables) for easy theme management.
*/


/* --- BASE STYLES & CONFIGURATION --- */
/*
  Core setup: Defines color palette, fonts, and global element styles.
  This ensures a consistent look and feel across the entire application.
*/
:root {
    --color-bg-primary: #101014;
    --color-bg-surface: #1C1C21;
    --color-bg-surface-hover: #282830;
    --color-text-primary: #FFFFFF;
    --color-text-secondary: #A0A0B0;
    --color-accent-primary: #0091FF; /* Electric Blue Accent */
    --color-accent-hover: #40C4FF;
    --color-border: #353540;
    --color-success: #4CAF50;
    --color-warning: #FFC107;
    --color-error: #F44336;

    --font-primary: 'Inter', sans-serif;
    --font-data: 'Source Code Pro', monospace;
}

* {
    box-sizing: border-box;
    border-radius: 4px;
}

html, body {
    height: 100%;
}

body {
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    font-family: var(--font-primary);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- TYPOGRAPHY --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.font-data {
    font-family: var(--font-data);
}

/* --- SCROLLBARS --- */
/* Custom scrollbar styling for a more integrated theme appearance */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-surface);
}

::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent-primary);
}

/* --- CORE UI COMPONENTS --- */
/* Reusable components like cards, buttons, and form inputs. */

.card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    border-radius: 8px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.2rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    border: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--font-data);
    border-radius: 4px;
}

.action-btn {
    background: var(--color-accent-primary);
    color: var(--color-bg-primary);
}

.action-btn:hover {
    background: var(--color-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 145, 255, 0.4);
}

.action-btn:active {
    transform: translateY(0);
}

.secondary-action-btn {
    width: auto;
    background-color: transparent;
    color: var(--color-accent-primary);
    border: 1px solid var(--color-accent-primary);
}

.secondary-action-btn:hover {
    background-color: rgba(0, 145, 255, 0.1);
    color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

.destroy-cache-button {
    width: 100%;
    padding: 1rem 1.5rem;
    background-color: var(--color-error);
    color: white;
    border: none;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    border-radius: 8px;
}

.destroy-cache-button:hover {
    background-color: #d32f2f;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(244, 67, 54, 0.4);
}

/* Star button for "My Picks" functionality */
.star-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.star-btn:hover {
    background-color: rgba(0, 145, 255, 0.1);
}

.star-btn svg {
    width: 20px;
    height: 20px;
    color: var(--color-border);
    transition: color 0.3s ease, transform 0.3s ease;
}

.star-btn.starred svg {
    color: var(--color-warning);
    transform: scale(1.1);
}

/* Clickable names for opening player modals */
.pitcher-name-btn, .player-name-btn {
    text-decoration: none;
    cursor: pointer;
    color: var(--color-text-primary);
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
    font: inherit;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease, background-color 0.2s ease;
    font-weight: 600;
    border-radius: 4px;
}

.pitcher-name-btn:hover, .player-name-btn:hover {
    color: var(--color-accent-hover);
    background-color: rgba(0, 145, 255, 0.1);
}

/* Form inputs and select dropdowns */
input[type="text"], input[type="search"], select {
    width: 100%;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    padding: 0.75rem 1rem;
    color: var(--color-text-primary);
    font-size: 0.875rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    border-radius: 4px;
}

input[type="text"]:focus, input[type="search"]:focus, select:focus {
    outline: none;
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 2px rgba(0, 145, 255, 0.3);
}

input::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.6;
}

select {
    appearance: none;
    -webkit-appearance: none;
    /* Custom SVG arrow for select dropdowns */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23A0A0B0' %3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
    padding-right: 2.5rem;
}


/* --- DATA TABLES --- */
/* Styles for presenting tabular data, including headers, rows, and sorting indicators. */
.overflow-x-auto {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.table-header th {
    background-color: var(--color-bg-primary);
    color: var(--color-accent-primary);
    font-weight: 600;
    border-bottom: 2px solid var(--color-accent-primary);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem;
    font-family: var(--font-data);
}

.player-row td {
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
}

.player-row {
    transition: background-color 0.15s ease;
}

.player-row:hover {
    background-color: var(--color-bg-surface-hover);
}

.player-name-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Styles for sortable table headers */
.sortable {
    cursor: pointer;
    user-select: none;
}

.sortable:hover {
    background-color: var(--color-bg-surface-hover);
}

.sort-asc::after {
    content: ' ▲';
    font-size: 0.7em;
}

.sort-desc::after {
    content: ' ▼';
    font-size: 0.7em;
}

/* Stat Color Coding for visual cues (hot/warm/cool) */
.stat-hot, .stat-color-high {
    color: var(--color-success);
    font-weight: 700;
}

.stat-warm, .stat-color-medium {
    color: var(--color-warning);
    font-weight: 600;
}

.stat-cool, .stat-color-low {
    color: var(--color-error);
    font-weight: 600;
}

.low-data {
    color: var(--color-text-secondary);
    font-style: italic;
    opacity: 0.7;
}

.batter-streak {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-left: 0.5rem;
    font-family: var(--font-data);
}

/* NEW: Style for directly displayed emojis */
.status-emojis {
    font-size: 1rem;
    line-height: 1;
    margin-left: 0.25rem;
    vertical-align: middle;
}

/* NEW: Status Badge for Player Names */
.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background-color: var(--color-accent-primary);
    color: var(--color-bg-primary);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: var(--font-data);
    cursor: help;
    user-select: none;
    flex-shrink: 0;
}

/* --- LAYOUT & MAIN NAVIGATION --- */
/* Defines the primary layout structure: header, containers, and tab navigation. */
.main-header {
    padding: 1rem;
    background: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 30;
}

.header-content {
    max-width: 1536px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* New Balanced Header Layout */
.header-content > .logo-container,
.header-content > .header-actions {
    flex: 1 0 0;
}

.header-content > nav.desktop-nav {
    flex: 2 0 auto;
}

.header-content > .header-actions {
    display: flex;
    justify-content: flex-end;
}


.main-container {
    max-width: 1536px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

#dashboard-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

#dashboard-main-col {
    grid-row: 2; /* On mobile, main content is below side column */
}

#dashboard-side-col {
    grid-row: 1; /* On mobile, side column is on top */
}

/* Tab bar with sliding indicator */
#sports-tab-bar {
    max-width: 400px;
    margin: 0 auto;
}

.tab-bar-container {
    position: relative;
    display: flex;
    background-color: var(--color-bg-surface);
    padding: 4px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border);
}

.tab-item {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    transition: color 0.3s;
    cursor: pointer;
    border-radius: 6px;
    flex-grow: 1;
    white-space: nowrap;
}

.tab-item.active {
    color: var(--color-bg-primary);
}

.tab-item:hover:not(.active) {
    color: var(--color-text-primary);
}

.tab-bar-slider {
    position: absolute;
    top: 4px;
    bottom: 4px;
    background-color: var(--color-accent-primary);
    /* Spring-like transition for the slider */
    transition: left 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), width 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    border-radius: 6px;
    display: none; /* Hidden until JS calculates its position */
}

/* Secondary Navigation for Sport Views */
.secondary-nav {
    background: var(--color-bg-primary);
    padding: 0.5rem 1rem 0 1rem;
    border-bottom: 1px solid var(--color-border);
}

.secondary-nav .tab-bar-container {
    max-width: 600px;
    margin: 0 auto;
    box-shadow: none;
    border: none;
    background-color: transparent;
}

.secondary-nav .tab-item {
    font-size: 0.8rem;
}

.section-title {
    font-size: clamp(1.1rem, 2.5vw, 1.25rem); /* Fluid font size for responsiveness */
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-accent-primary);
    display: inline-block;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Pill for displaying last data update time */
.update-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-bg-surface);
    color: var(--color-text-secondary);
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    border: 1px solid var(--color-border);
    font-family: var(--font-data);
    border-radius: 999px;
}

#overview-last-updated-time {
    color: var(--color-accent-primary);
    font-weight: 600;
}

.mobile-sport-switcher {
    display: none;
}

/* --- DASHBOARD VIEW --- */
/* Specific components for the main dashboard screen. */
.dashboard-pill {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-bg-primary);
    padding: 1rem;
    border: 1px solid var(--color-border);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    border-radius: 4px;
}

.dashboard-pill:hover {
    background: var(--color-bg-surface-hover);
    border-color: var(--color-accent-primary);
}

.dashboard-pill .player-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.dashboard-pill .rank {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-accent-primary);
    font-family: var(--font-data);
    width: 30px;
    text-align: center;
}

.dashboard-pill .player-name {
    font-weight: 600;
    color: var(--color-text-primary);
}

.dashboard-pill .secondary-info {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.dashboard-pill .stat-value {
    font-size: 1.125rem;
    font-weight: 700;
    text-align: right;
    min-width: 80px;
    font-family: var(--font-data);
}

/* --- GAME VIEWS (Ticker & Grid) --- */

/* Horizontal scrolling game ticker */
#game-ticker-container {
    overflow-x: auto;
    white-space: nowrap;
    padding: 0.5rem 0;
    cursor: grab;
    background: var(--color-bg-surface);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

#game-ticker-wrapper {
    display: inline-flex;
    padding: 0 1rem;
    gap: 1rem;
}

.ticker-item {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 0.75rem;
    background-color: var(--color-bg-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--color-border);
    min-width: 140px;
    user-select: none;
    border-radius: 4px;
}

.ticker-item:hover {
    border-color: var(--color-accent-primary);
    background-color: var(--color-bg-surface-hover);
}

.ticker-item.high-park-factor {
    border-color: var(--color-success);
    background-color: rgba(76, 175, 80, 0.1);
}

.ticker-logo {
    width: 30px;
    height: 30px;
    object-fit: contain;
    background-color: white;
    padding: 3px;
    border-radius: 50%;
}

/* Grid view for all games */
#game-list-view {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem 0;
}

.game-card-item {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-radius: 8px;
}

.game-card-item:hover {
    transform: translateY(-4px);
    border-color: var(--color-accent-primary);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}

.game-card-item.high-park-factor {
    border-left: 4px solid var(--color-success);
}

.game-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.team-display {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.team-display:last-child {
    justify-content: flex-end;
}

.team-logo-small {
    width: 36px;
    height: 36px;
    object-fit: contain;
    background-color: white;
    padding: 3px;
    border-radius: 50%;
}

.team-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.game-separator {
    color: var(--color-text-secondary);
}

.game-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.game-time {
    font-family: var(--font-data);
}

.park-info.high-park-factor-text strong {
    color: var(--color-success);
    font-weight: 700;
}

/* --- FOCUS VIEW (Specific Game Details) --- */
/* Styles for the detailed view of a single game. */
.game-header {
    background: linear-gradient(90deg, var(--color-bg-surface), var(--color-bg-surface-hover));
    color: var(--color-text-primary);
    border-bottom: 3px solid var(--color-accent-primary);
    padding: 1.5rem;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.team-logo {
    background-color: white;
    padding: 5px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--color-accent-primary);
}

.focus-player-card {
    background: var(--color-bg-surface-hover);
    border: 1px solid var(--color-border);
    padding: 1rem;
    margin-bottom: 1rem;
    border-left: 4px solid var(--color-accent-primary);
    border-radius: 4px;
}

.focus-player-card:hover {
    background: var(--color-bg-surface);
}

.focus-player-card-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.focus-player-card-stats {
    display: grid;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.focus-player-card-stats .stat-item {
    text-align: center;
}

.focus-player-card-stats .stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.focus-player-card-stats .stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    font-family: var(--font-data);
}

/* Initially hide mobile-specific card layouts */
.focus-mobile-cards {
    display: none;
}

/* --- BATTERS VIEW (Notebooks, Demons, Insights) --- */

.analytics-view-toggle-container {
    display: flex;
    background: var(--color-bg-surface);
    border-radius: 8px;
    padding: 4px;
    border: 1px solid var(--color-border);
}

.analytics-view-toggle-btn {
    flex-grow: 1;
    padding: 0.5rem 1rem;
    border: none;
    background-color: transparent;
    color: var(--color-text-secondary);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border-radius: 6px;
}

.analytics-view-toggle-btn.active {
    background-color: var(--color-accent-primary);
    color: var(--color-bg-primary);
}

.analytics-view-toggle-btn:hover:not(.active) {
    background-color: var(--color-bg-surface-hover);
    color: var(--color-text-primary);
}

/* Filter controls for batter tables */
#notebook-filters, #all-notebook-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    margin-bottom: 1.5rem;
    border-radius: 8px;
}

/* MODIFIED: Cleaned up filter bar layout */
#notebook-filters {
    justify-content: space-between;
}

.filter-group {
    flex: 1 1 200px;
}

/* MODIFIED: Allow search to take more space */
.filter-group.filter-group-search {
    flex-grow: 2; /* Give more space to search bar */
    min-width: 250px;
}


.filter-group label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-accent-primary);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filter-group-sort, .filter-group-specials {
    flex-basis: auto;
    flex-grow: 0;
}

.sort-control {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.sort-control .sort-btn, .emoji-filter-btn {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.sort-control .sort-btn:hover, .emoji-filter-btn:hover {
    background: var(--color-bg-surface-hover);
    border-color: var(--color-accent-primary);
}

.sort-control .sort-btn.active, .emoji-filter-btn.active {
    background: var(--color-accent-primary);
    color: var(--color-bg-primary);
    border-color: var(--color-accent-primary);
}

.emoji-filter-btn {
    padding: 0.75rem;
    font-size: 1.2rem;
    min-width: 48px;
}

/* Mobile-specific card layout for batter notebooks */
.notebook-mobile-cards {
    display: none;
    flex-direction: column;
    gap: 1rem;
}

.notebook-player-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    padding: 1rem;
    border-radius: 8px;
}

.notebook-player-card:hover {
    background: var(--color-bg-surface-hover);
}

.notebook-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.notebook-card-game-info {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.notebook-card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.notebook-card-stats.four-cols {
    grid-template-columns: repeat(4, 1fr);
}

.notebook-stat-item {
    text-align: center;
}

.notebook-stat-label {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
}

.notebook-stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    font-family: var(--font-data);
}

/* "Demons at Bat" view specific styles */
.demons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.demon-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: all 0.2s ease-in-out;
    border-left: 4px solid var(--color-error); /* Red accent for Demons */
    border-radius: 8px;
}

.demon-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(244, 67, 54, 0.2);
    border-color: var(--color-error);
}

.demon-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.demon-card-body {
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
}

.demon-card-body .demon-reason-item {
    margin-top: 0.75rem;
    padding-left: 1rem;
    border-left: 2px solid var(--color-accent-primary);
}

.demon-card-body .demon-reason-pitch {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.demon-card-body .demon-reason-text {
    list-style-type: disc;
    padding-left: 1rem;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

/* --- PITCHERS VIEW --- */
/* Styles for pitcher-related data, including K-prediction cards and charts. */
.k-preds-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.k-pred-card {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.2s ease-in-out;
    border-radius: 8px;
}

.k-pred-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-accent-primary);
    box-shadow: 0 8px 16px rgba(0, 145, 255, 0.2);
}

.k-pred-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.k-pred-card-body {
    text-align: center;
    margin-bottom: 1.5rem;
}

.k-pred-value {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-accent-primary);
    line-height: 1;
    font-family: var(--font-data);
}

.k-pred-label {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-top: 0.5rem;
    text-transform: uppercase;
}

.k-pred-card-footer {
    display: flex;
    justify-content: center;
}

/* Styles for K2 prediction card insights list */
.k-pred-card-insights {
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
    margin-top: 1.5rem;
    text-align: left;
}

.k-pred-card-insights ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.k-pred-card-insights li {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    padding: 0.25rem 0.5rem;
    margin-bottom: 0.25rem;
    border-left: 2px solid var(--color-accent-primary);
}

/* Pitcher Chart Styles (D3.js) */
.tooltip {
    position: absolute;
    text-align: left;
    padding: 12px;
    font-size: 13px;
    background: rgba(16, 16, 20, 0.95);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    backdrop-filter: blur(5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    z-index: 100;
    border-radius: 4px;
}

/* D3 axis and gridline styling */
.axis-label, .tick text {
    fill: var(--color-text-secondary);
}

.domain {
    stroke: var(--color-border);
}

.grid .tick line {
    stroke-dasharray: 4,4;
    stroke: var(--color-border);
    opacity: 0.5;
}

.grid .domain {
    stroke: none;
}

/* --- MODALS & OVERLAYS --- */
/* Global styles for all modal dialogs. */
#modal-container, #stadium-modal, #k-rate-modal, #emoji-info-modal, #pitch-mix-modal, #nfl-game-modal, #simple-disclaimer-modal, #nfl-player-modal {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 250;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out;
}

#modal-container.is-open, #stadium-modal.is-open, #k-rate-modal.is-open, #emoji-info-modal.is-open, #pitch-mix-modal.is-open, #nfl-game-modal.is-open, #simple-disclaimer-modal.is-open, #nfl-player-modal.is-open {
    opacity: 1;
    visibility: visible;
}

#batter-stats-modal, #pitcher-stats-modal, #stadium-modal > div, #k-rate-modal > div, #emoji-info-modal > div, #pitch-mix-modal > div, #nfl-game-modal > div {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    width: 100%;
    max-width: 56rem;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    border-radius: 8px;
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s ease-out;
}

#stadium-modal > div, #k-rate-modal > div, #emoji-info-modal > div, #pitch-mix-modal > div {
    max-width: 48rem; /* Adjusted for modals with tables */
}

/* Entrance animation for modal content */
#modal-container.is-open #batter-stats-modal,
#modal-container.is-open #pitcher-stats-modal,
#stadium-modal.is-open > div,
#k-rate-modal.is-open > div,
#emoji-info-modal.is-open > div,
#pitch-mix-modal.is-open > div,
#nfl-game-modal.is-open > div {
    transform: translateY(0) scale(1);
}

.modal-header {
    padding: 1.25rem;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-bg-primary);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 700;
}

.modal-close-btn, #my-picks-close-btn {
    color: var(--color-text-secondary);
    font-size: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    width: 40px;
    height: 40px;
}

.modal-close-btn:hover, #my-picks-close-btn:hover {
    color: var(--color-text-primary);
}

#batter-stats-content, #pitcher-stats-content, #stadium-modal-content, #k-rate-modal-content, #emoji-info-content, #my-picks-slideout-content, #pitch-mix-modal-content, #nfl-game-modal-content {
    padding: 1.5rem;
    overflow-y: auto;
    flex-grow: 1;
}

/* Tab controls within modals */
.modal-tab-group {
    display: flex;
    gap: 4px;
    padding: 4px;
    background-color: var(--color-bg-primary);
    border-radius: 6px;
    border: 1px solid var(--color-border);
}

.modal-tab {
    flex-grow: 1;
    padding: 0.5rem 1rem;
    border: none;
    background-color: transparent;
    color: var(--color-text-secondary);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
    text-align: center;
}

.modal-tab:hover:not(.active) {
    background-color: var(--color-bg-surface-hover);
}

.modal-tab.active {
    background-color: var(--color-accent-primary);
    color: var(--color-bg-primary);
}

/* Pitch Mix Modal Specific Styles */
#pitch-mix-modal-header {
    gap: 1rem;
}
#pitch-mix-modal-header .modal-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.pitch-mix-table-container table {
    font-size: 0.8rem;
}
.pitch-mix-table-container th, .pitch-mix-table-container td {
    padding: 0.6rem 0.75rem;
    text-align: right;
    vertical-align: middle;
}
.pitch-mix-table-container th:first-child, .pitch-mix-table-container td:first-child {
    text-align: left;
    font-weight: 600;
}
.matchup-highlight {
    font-size: 1.25rem;
    text-align: center !important;
}
.player-row.matchup-hot {
    background-color: rgba(244, 67, 54, 0.15); /* Favorable batter matchup */
}
.player-row.matchup-cold {
    background-color: rgba(0, 145, 255, 0.1); /* Favorable pitcher matchup */
}
.batter-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

/* --- "MY PICKS" SLIDEOUT & BADGE STYLING --- */

.my-picks-badge.hidden {
    display: none !important;
}

/* Badge on desktop "My Picks" button */
#desktop-my-picks-btn .my-picks-badge {
    margin-left: 0.5rem;
    background-color: var(--color-bg-primary);
    color: var(--color-accent-primary);
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: bold;
    border: 1px solid var(--color-accent-primary);
}

/* Slideout panel for managing picks */
#my-picks-slideout {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color: var(--color-bg-surface);
    z-index: 100;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    border-left: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    max-width: 400px;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
}

#my-picks-slideout.open {
    transform: translateX(0);
}

#slideout-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.7);
    z-index: 99;
    transition: opacity 0.3s ease-in-out;
}

/* --- ANIMATIONS & UTILITY CLASSES --- */
.fade-in-up {
    animation: fadeInUp 0.5s ease-out both;
}

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

.card-cascade {
    animation: cascadeIn 0.5s cubic-bezier(0.25, 1, 0.5, 1) both;
}

@keyframes cascadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* General purpose utility class to hide elements */
.hidden {
    display: none !important;
}

/* --- MOBILE NAVIGATION --- */
/* Bottom navigation bar for small screens */
#mobile-bottom-nav,
#mobile-bottom-nav-football {
    display: none; /* Hidden by default, shown via media query or JS */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(65px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--color-bg-surface);
    border-top: 1px solid var(--color-border);
    justify-content: space-around;
    align-items: stretch;
    z-index: 50;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.3);
}

.mobile-nav-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--color-text-secondary);
    font-size: 0.65rem;
    font-weight: 500;
    transition: color 0.2s ease;
    flex-grow: 1;
    height: 100%;
    padding: 4px 0;
}

.mobile-nav-icon-wrapper {
    position: relative;
}

/* Badge on mobile navigation button */
.mobile-nav-icon-wrapper .my-picks-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    background-color: var(--color-error);
    color: white;
    font-size: 0.65rem;
    font-weight: bold;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--color-bg-surface);
}


.mobile-nav-btn svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.5;
}

.mobile-nav-btn:hover {
    color: var(--color-text-primary);
}

.mobile-nav-btn.active {
    color: var(--color-accent-primary);
}

/* --- RESPONSIVE OPTIMIZATIONS --- */
/* Media queries to adjust the layout for different screen sizes. */

/* Medium screens and up (Tablets) */
@media (min-width: 768px) {
    /* Switch from mobile cards to desktop tables */
    .focus-desktop-table { display: block; }
    .focus-mobile-cards { display: none; }
    .notebook-desktop-table { display: block !important; }
    .notebook-mobile-cards { display: none !important; }
    .desktop-nav { display: flex; }
    #mobile-bottom-nav,
    #mobile-bottom-nav-football {
        display: none !important;
    }
}

/* Large screens and up (Desktops) */
@media (min-width: 1024px) {
    #dashboard-container {
        grid-template-columns: 1fr 380px; /* Main content and a sidebar */
    }
    #dashboard-main-col {
        grid-column: 1 / 2;
        grid-row: 1; /* Reset row order for desktop */
    }
    #dashboard-side-col {
        grid-column: 2 / 3;
        grid-row: 1; /* Reset row order for desktop */
        position: sticky;
        top: 145px; /* Adjust based on header heights */
    }
}

/* Small screens (Mobile) */
@media (max-width: 767px) {
    body {
        /* Add padding to prevent content from being hidden behind the bottom nav */
        padding-bottom: 65px;
    }
    
    /* Hide desktop header and show mobile nav bar */
    .main-header {
        display: none;
    }
    
    .desktop-nav {
        display: none;
    }

    .mobile-sport-switcher {
        display: block;
    }

    #mobile-bottom-nav,
    #mobile-bottom-nav-football {
        display: flex !important;
    }
    
    /* Switch from desktop tables to mobile cards */
    .focus-desktop-table { display: none; }
    .focus-mobile-cards { display: block; }

    .notebook-desktop-table { display: none !important; }
    .notebook-mobile-cards { display: flex; }
    #notebook-table-container,
    #all-notebook-table-container {
        background: transparent;
        border: none;
        box-shadow: none;
    }

    /* Stack filters vertically on mobile */
    #notebook-filters, #all-notebook-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 1rem;
    }

	#my-picks-slideout {
        max-width: 100%;
        border-left: none;
    }
}

/* --- LOGIN SCREEN STYLES --- */
#login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    position: fixed;
    inset: 0;
    z-index: 200;
    background-color: var(--color-bg-primary);
}

.ring {
    position: relative;
    width: 500px;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ring i {
    position: absolute;
    inset: 0;
    border: 2px solid var(--color-border);
    transition: 0.5s;
}

/* Animated, morphing rings for visual effect */
.ring i:nth-child(1) {
    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
    animation: animate 6s linear infinite;
    border-color: var(--color-accent-primary);
}

.ring i:nth-child(2) {
    border-radius: 41% 44% 56% 59%/38% 62% 63% 37%;
    animation: animate 4s linear infinite;
    border-color: var(--color-text-primary);
}

.ring i:nth-child(3) {
    border-radius: 41% 44% 56% 59%/38% 62% 63% 37%;
    animation: animate2 10s linear infinite;
    border-color: var(--color-accent-primary);
}

.ring:hover i {
    border-width: 6px;
}
.ring:hover i:nth-child(1) {
    filter: drop-shadow(0 0 20px var(--color-accent-primary));
}
.ring:hover i:nth-child(2) {
    filter: drop-shadow(0 0 20px var(--color-text-primary));
}
.ring:hover i:nth-child(3) {
    filter: drop-shadow(0 0 20px var(--color-accent-primary));
}


@keyframes animate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes animate2 {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}

.login {
    position: absolute;
    width: 300px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}

.login h2 {
    font-size: 2em;
    color: var(--color-text-primary);
}

.login .inputBx {
    position: relative;
    width: 100%;
}

.login .inputBx input {
    position: relative;
    width: 100%;
    padding: 12px 20px;
    background: transparent;
    border: 2px solid var(--color-border);
    border-radius: 40px;
    font-size: 1.2em;
    color: var(--color-text-primary);
    font-family: var(--font-primary);
    box-shadow: none;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.login .inputBx input:focus {
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 3px rgba(0, 145, 255, 0.4);
}

.login .inputBx input[type="submit"] {
    width: 100%;
    background: var(--color-accent-primary);
    border: none;
    cursor: pointer;
    color: var(--color-bg-primary);
    font-weight: 700;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.login .inputBx input[type="submit"]:hover {
    background: var(--color-accent-hover);
    transform: translateY(-2px);
}

.login .inputBx input::placeholder {
    color: var(--color-text-secondary);
}

/* --- Simple Disclaimer Modal --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* --- Top Insights View Styles --- */

.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.insight-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: all 0.2s ease-in-out;
    border-left: 4px solid var(--color-accent-primary); /* Blue accent for Insights */
    border-radius: 8px;
}

.insight-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 145, 255, 0.2);
    border-color: var(--color-accent-primary);
}

.insight-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.insight-card-header .player-name-btn {
    font-size: 1.1rem;
    padding-left: 0;
    padding-right: 0;
    font-weight: 700;
}

.hr-score {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-top: 0.25rem;
}

.insight-card-body {
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
}

.insight-list {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.insight-list li {
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Color coding for different insight types */
.insight-list li.insight-positive {
    color: var(--color-success);
    font-weight: 600;
}
.insight-list li.insight-special {
    color: var(--color-accent-hover);
    font-weight: 600;
}
.insight-list li.insight-note {
    color: var(--color-error);
    font-style: italic;
}

/* NEW: Class for negative insights */
.insight-list li.insight-negative {
    color: var(--color-error);
    font-weight: 600;
}

.insight-list li.insight-prime {
    color: var(--color-accent-primary);
    font-weight: 600;
}

.insight-card-footer {
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
    margin-top: auto; /* Pushes footer to the bottom of the card */
    font-size: 0.8rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.insight-footer-item {
    background-color: var(--color-bg-primary);
    padding: 0.5rem;
    border-radius: 4px;
}

.insight-footer-item strong {
    color: var(--color-text-primary);
}
/* --- PITCH MIX COLUMN SELECTOR --- */
/* Styles for the dynamic column visibility feature in pitch mix tables. */

.column-selector-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.column-selector-container {
    position: relative;
    display: inline-block;
}

.column-selector-btn {
    padding: 0.5rem 1rem !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.02em;
}

.column-selector-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    width: 300px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: 20;
    padding: 1rem;
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.column-selector-dropdown.visible {
    display: grid;
    animation: fadeInDropdown 0.2s ease-out;
}

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

.column-selector-label {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.column-selector-label:hover {
    background-color: var(--color-bg-surface-hover);
    color: var(--color-text-primary);
}

.column-selector-label input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent-primary);
}
/* NEW: Container for positioning the custom tooltip */
.status-badge-container {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* MODIFIED: Status Badge for Player Names */
.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background-color: var(--color-accent-primary);
    color: var(--color-bg-primary);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: var(--font-data);
    cursor: pointer; /* Changed from help to pointer */
    user-select: none;
    flex-shrink: 0;
    z-index: 2; /* Ensure it's above other elements */
}

/* NEW: Custom Tooltip Styles */
.status-tooltip {
    position: absolute;
    bottom: 140%; /* Position above the badge */
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 1.25rem; /* Make emojis larger */
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
    z-index: 10;
    
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* NEW: Tooltip Arrow */
.status-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: var(--color-bg-primary) transparent transparent transparent;
}

/* Show tooltip on hover (desktop) or when it has the .visible class (mobile) */
.status-badge-container:hover .status-tooltip,
.status-tooltip.visible {
    opacity: 1;
    visibility: visible;
}
/* Add the following at the end of your styles.css file */

/* --- PROFILE PREFERENCES STYLES (in Modal) --- */

.profile-column-selector {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
    padding: 1rem;
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

.profile-column-selector .column-selector-label {
    gap: 0.75rem;
}

/* --- NEW: MINIMALIST MODAL TABLE STYLES --- */
.minimalist-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.minimalist-table th, 
.minimalist-table td {
    padding: 0.8rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
    vertical-align: middle;
}

.minimalist-table th {
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: none;
    border-bottom-width: 2px;
}

.minimalist-table .player-row:hover {
    background-color: transparent; /* Remove row hover effect */
}

.minimalist-table td.font-data {
    font-size: 0.875rem; /* Ensure data font is consistent */
    text-align: right;
}

/* --- NEW: EXPANDED VIEW STYLES --- */

/* This modal is for the 3-column desktop view */
#expanded-view-modal {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out;
}

#expanded-view-modal.is-open {
    opacity: 1;
    visibility: visible;
}

#expanded-view-container {
    display: flex;
    gap: 1rem;
    width: 100%;
    max-width: 90vw;
    height: 90vh;
    background-color: var(--color-bg-primary);
    border-radius: 8px;
    border: 1px solid var(--color-border);
    overflow: hidden;
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s ease-out;
}

#expanded-view-modal.is-open #expanded-view-container {
    transform: translateY(0) scale(1);
}

.expanded-modal-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-surface);
    border-right: 1px solid var(--color-border);
    overflow: hidden; /* Prevent parent from scrolling */
}

.expanded-modal-column:last-child {
    border-right: none;
}

.expanded-modal-header {
    padding: 1.25rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-primary);
    flex-shrink: 0; /* Header should not shrink */
}

.expanded-modal-header .modal-title {
    font-size: 1.1rem;
}

.expanded-modal-content {
    padding: 1.5rem;
    overflow-y: auto;
    flex-grow: 1; /* Content area should grow and scroll */
}

/* Ensure expanded view is not shown on smaller screens */
@media (max-width: 1023px) {
    #expanded-view-modal {
        display: none !important;
    }
}


/* --- NEW: FOOTBALL STYLES --- */
.nfl-games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.nfl-game-card {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.nfl-game-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-accent-primary);
    box-shadow: 0 8px 16px rgba(0, 145, 255, 0.2);
}

.nfl-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color: var(--color-bg-primary);
    font-size: 0.8rem;
    font-weight: 600;
}

.nfl-card-day {
    color: var(--color-accent-primary);
}

.nfl-card-time {
    font-family: var(--font-data);
}

.nfl-card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    gap: 1rem;
}

.nfl-team-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
    flex: 1;
}

.nfl-team-logo {
    width: 50px; /* Constrains the logo size */
    height: 50px; /* Constrains the logo size */
    object-fit: contain;
}

.nfl-team-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.nfl-team-record {
    font-size: 0.8rem;
}

.nfl-game-separator {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-accent-primary);
}

.nfl-card-footer {
    display: flex;
    justify-content: space-around;
    padding: 0.75rem;
    background-color: var(--color-bg-primary);
    border-top: 1px solid var(--color-border);
    font-size: 0.8rem;
    font-family: var(--font-data);
}

/* NFL Depth Chart Modal */
#nfl-game-modal > div {
    max-width: 72rem; /* Wider modal for two columns */
}

.depth-chart-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}

.depth-chart-team {
    border-right: 1px solid var(--color-border);
    padding-right: 2.5rem;
}
.depth-chart-team:last-child {
    border-right: none;
    padding-right: 0;
}

.depth-chart-team-title {
    font-size: 1.5rem;
    text-align: center;
    color: var(--color-accent-primary);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-accent-primary);
    position: sticky;
    top: -24px;
    background: var(--color-bg-surface);
    z-index: 10;
}

.depth-chart-unit-title {
    font-size: 1rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    margin-top: 2rem;
}

.depth-chart-position-group {
    margin-bottom: 1.5rem;
}

.depth-chart-position-title {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    padding: 0.4rem 0.75rem;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 0.75rem;
}

.depth-chart-player-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
}

.depth-chart-player-list li {
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid var(--color-border);
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.depth-chart-player-list li:hover {
    background-color: var(--color-bg-surface-hover);
}

.depth-chart-player-list li.starter {
    font-weight: 700;
    color: var(--color-text-primary);
    border-left: 3px solid var(--color-accent-primary);
    padding-left: 0.75rem;
}

.depth-chart-player-list li.backup {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    opacity: 0.9;
}

.depth-chart-player-list li:last-child {
    border-bottom: none;
}

.depth-chart-player-list .player-rank {
    font-weight: 700;
    color: var(--color-accent-primary);
    width: 20px;
    text-align: right;
    font-family: var(--font-data);
    flex-shrink: 0;
}

li.backup .player-rank {
    color: var(--color-text-secondary);
    opacity: 0.7;
}

.nfl-player-headshot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--color-bg-primary);
}

.nfl-player-headshot-sm {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--color-bg-primary);
    flex-shrink: 0;
}

.nfl-player-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

@media (max-width: 767px) {
    .depth-chart-container {
        grid-template-columns: 1fr;
    }
    .depth-chart-team {
        border-right: none;
        padding-right: 0;
    }
}


/* --- SCROLL LOCK FOR MODALS --- */
html.body-no-scroll,
body.body-no-scroll {
  overflow: hidden !important;
}

#football-app-container .desktop-nav {
    justify-self: center;
}

#football-app-container .header-actions {
    justify-self: end;
}
/* --- SCROLL LOCK FOR MODALS --- */
/* This class is added to the <html> and <body> tags via JavaScript
  whenever a modal or slideout is opened. It prevents the background
  page from scrolling.
*/
html.body-no-scroll,
body.body-no-scroll {
  overflow: hidden !important;
}

/* --- NEW: NFL Dashboard Top Players --- */
.nfl-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.nfl-top-player-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* --- NEW: NFL Player Modal --- */
#nfl-player-modal-content dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem 2rem; /* row-gap column-gap */
}

#nfl-player-modal-content dt {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    text-transform: capitalize;
}

#nfl-player-modal-content dd {
    margin: 0;
    font-weight: 600;
    font-family: var(--font-data);
    font-size: 1rem;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.5rem;
}
/* --- Football UI Refresh (Based on Mockup) --- */

/* == Navigation Styling == */

/* Make the secondary nav bar blend into the page background */
#football-app-container .secondary-nav {
    background: transparent;
    border-bottom: none;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Restyle the view tabs container to look like the mockup's switcher */
#football-app-container #tab-bar-container-football {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    box-shadow: none;
    max-width: 500px;
}

/* Adjust tab text styles */
#football-app-container #tab-bar-container-football .tab-item {
    color: var(--color-text-secondary);
    font-weight: 600;
    font-size: 0.875rem;
}

/* Ensure the active tab text is bright for contrast against the blue slider */
#football-app-container #tab-bar-container-football .tab-item.active {
    color: var(--color-text-primary);
}


/* == Dashboard Styling == */

/* Style the main "Top Players by Position" title */
#football-dashboard-container > .section-title {
    border-bottom: none; /* Remove the blue line */
    font-size: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 0;
    text-align: left;
}

/* Make the cards for each position group darker and cleaner */
#football-dashboard-container .card {
    background-color: #121217; /* A very dark gray, almost black */
    border: 1px solid var(--color-border);
}

/* Style the titles inside each card (e.g., "Top 5 Quarterbacks") */
#football-dashboard-container .card h4 {
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

/* Remove default padding from the list container */
#football-dashboard-container .nfl-top-player-list {
    gap: 0;
}

/* Override the default dashboard pill style specifically for the football dashboard */
#football-dashboard-container .dashboard-pill {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--color-border);
    padding: 1rem 0.5rem;
    border-radius: 0;
    align-items: center; /* Vertically align all items */
}

#football-dashboard-container .dashboard-pill:hover {
    background-color: var(--color-bg-surface-hover);
    border-color: var(--color-border); /* Keep border color consistent on hover */
}

/* Remove the border from the last player in each list */
#football-dashboard-container .nfl-top-player-list > .dashboard-pill:last-child {
    border-bottom: none;
}

/* Container for all player info to the left of the score */
#football-dashboard-container .dashboard-pill .player-info {
    gap: 1rem; /* Adjust gap between rank, headshot, and text */
    flex-grow: 1; /* Allow this to take up available space */
}

/* Style the rank number (#1, #2, etc.) */
#football-dashboard-container .dashboard-pill .rank {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-accent-primary);
    width: 24px; /* Give it a fixed width for alignment */
    text-align: center;
}

/* Style the player name */
#football-dashboard-container .dashboard-pill .player-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* Style the matchup text (e.g., "BUF vs NYJ") */
#football-dashboard-container .dashboard-pill .secondary-info {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* Style the TD Score value on the right */
#football-dashboard-container .dashboard-pill .stat-value {
    font-size: 1.1rem;
    color: var(--color-accent-primary);
    font-weight: 700;
    min-width: 60px; /* Give it some space */
    text-align: right;
}
/* --- Football Data Table Refresh --- */

/* Style the container card and search bar */
#football-data-container .card {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0; 
}

#football-data-container #nfl-prediction-search {
    background-color: var(--color-bg-surface);
    border-color: var(--color-border);
    margin: 1.5rem;
    width: calc(100% - 3rem);
}

/* Hide the table and card containers until they are placed */
.nfl-data-desktop-table, .nfl-data-mobile-cards {
    margin-top: 1.5rem;
}

/* Desktop Table Styles */
#nfl-prediction-table th {
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-align: left;
    padding-left: 1.5rem;
    background-color: #121217;
}

#nfl-prediction-table th:first-child {
    border-top-left-radius: 8px;
}
#nfl-prediction-table th:last-child {
    border-top-right-radius: 8px;
}

#nfl-prediction-table td {
    color: var(--color-text-primary);
    font-weight: 500;
    padding: 1rem 1.5rem;
    text-align: left;
    border-color: var(--color-border);
    background-color: #121217;
}

#nfl-prediction-table .nfl-player-cell {
    font-weight: 600;
}

#nfl-prediction-table tr:last-child td:first-child {
    border-bottom-left-radius: 8px;
}
#nfl-prediction-table tr:last-child td:last-child {
    border-bottom-right-radius: 8px;
}

/* Mobile Card View Styles */
.nfl-data-mobile-cards {
    display: none; /* Hidden by default on desktop */
    flex-direction: column;
    gap: 0.75rem;
    padding: 0 1.5rem 1.5rem 1.5rem;
}

.nfl-player-card {
    background-color: #121217;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1rem;
    cursor: pointer;
}

.nfl-player-card:hover {
    background-color: var(--color-bg-surface);
    border-color: var(--color-accent-primary);
}

.nfl-player-card .nfl-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.nfl-player-card .player-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.nfl-player-card .secondary-info {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.nfl-player-card .nfl-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding-top: 1rem;
}

.nfl-player-card .stat-item {
    display: flex;
    flex-direction: column;
}

.nfl-player-card .stat-item .label {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.nfl-player-card .stat-item .value {
    font-size: 1.1rem;
    font-weight: 600;
    font-family: var(--font-data);
    color: var(--color-text-primary);
}


/* === IMPORTANT: Media Query to switch between table and cards === */
@media (max-width: 767px) {
    .nfl-data-desktop-table {
        display: none; /* This hides the desktop table on mobile */
    }
    .nfl-data-mobile-cards {
        display: flex; /* This shows the mobile cards on mobile */
    }
}
/* Style for new containers in NFL player modal */
.player-stats-container, .opponent-stats-container {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.player-stats-container h3, .opponent-stats-container h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-accent-primary);
    margin-bottom: 1.5rem;
}