/* predictions_specific.css */

/* --- Body Padding Adjustment for Fixed/Sticky Elements on Predictions Page --- */
/* The actual padding-top value will be set by predictions.js */
body.predictions-page {
    /* Default padding, JS will override. Sum of header + page_nav + date_bar + conf_bar heights approx. */
    /* padding-top: 220px; /* Example placeholder */
}

/* Specific styling for page navigation on predictions page if needed */
nav.page-navigation.predictions-page-nav {
    margin-top: 10px; /* Space below fixed header, before date bar */
    /* Styles from main style.css for .page-navigation will apply */
}


/* --- Sticky Date Selector Bar --- */
.date-selector-bar-sticky-wrapper {
    position: sticky;
    /* 'top' value set by JS: header height + page_nav height */
    background-color: #ffffff;
    z-index: 990;
    border-bottom: 1px solid #dee2e6;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.date-selector-bar {
    max-width: 1600px;
    margin: 0 auto;
    padding: 8px 5px;
    display: flex;
    align-items: center;
    overflow-x: hidden;
}
.dates-scroll-container {
    display: flex; flex-grow: 1; flex-wrap: nowrap; gap: 8px;
    overflow-x: auto; -ms-overflow-style: none;  scrollbar-width: none;
    padding: 0 5px; -webkit-overflow-scrolling: touch;
}
.dates-scroll-container::-webkit-scrollbar { display: none; }
.date-button {
    background-color: #e9ecef; color: #2c3e50; border: 1px solid #ced4da;
    padding: 5px 10px; border-radius: 16px; font-size: 0.75em;
    font-weight: 500; text-decoration: none; white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    cursor: pointer; margin: 0;
}
.date-button:hover { background-color: #d1d5db; color: #2c3e50; }
.date-button.selected {
    background-color: #e74c3c; color: #ffffff; border-color: #e74c3c; font-weight: 600;
}
.date-nav-arrow {
    font-size: 1.2em; color: #555555; cursor: pointer; padding: 0 10px;
    user-select: none; display: flex; align-items: center; font-weight: bold;
}
.date-nav-arrow:hover { color: #000000; }
.date-nav-arrow.hidden { visibility: hidden; pointer-events: none; }


/* --- Sticky Conference Filter Bar --- */
.conference-selector-bar-sticky-wrapper {
    position: sticky;
    /* 'top' value set by JS: header height + page_nav height + date_bar height */
    background-color: #f8f9fa;
    padding: 6px 0px; /* Reduced padding */
    border-bottom: 1px solid #dee2e6;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    z-index: 989; /* Below date bar */
}
.conference-selector-bar {
    max-width: 1600px; margin: 0 auto; padding: 0 5px;
    display: flex; align-items: center; overflow-x: hidden;
}
.conferences-scroll-container {
    display: flex; flex-grow: 1; flex-wrap: nowrap; gap: 6px; /* Smaller gap */
    overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none;
    padding: 0 5px; -webkit-overflow-scrolling: touch;
}
.conferences-scroll-container::-webkit-scrollbar { display: none; }
.conf-button {
    background-color: #e0e0e0; color: #333; border: 1px solid #ccc;
    padding: 4px 8px; /* Smaller buttons */
    border-radius: 15px; font-size: 0.7em; /* Smaller font */
    cursor: pointer; white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.conf-button:hover { background-color: #c7c7c7; }
.conf-button.selected {
    background-color: #3498db; /* Blue for selected conference */
    color: #ffffff; border-color: #3498db; font-weight: 500;
}
.conf-nav-arrow {
    font-size: 1.1em; color: #555; cursor: pointer; padding: 0 8px;
    user-select: none; display: flex; align-items: center; font-weight: bold;
}
.conf-nav-arrow.hidden { visibility: hidden; pointer-events: none; }


/* --- Predictions Page Content Area --- */
.predictions-main-content { /* Uses .container for max-width and centering */
    padding-top: 10px; /* Space below sticky bars */
}
.predictions-main-content .page-section-title.predictions-title {
    text-align: center; color: #2c3e50;
    margin-top: 15px; margin-bottom: 20px;
    font-size: 2.0em; font-weight: 600;
}
.predictions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); /* Adjusted min card width */
    gap: 20px;
}
.loading-message {
    text-align: center; padding: 30px 0; font-style: italic; color: #555;
    grid-column: 1 / -1;
}

/* --- Game Card Styling --- */
.game-card {
    background-color: #ffffff; border: 1px solid #e0e0e0;
    border-radius: 6px; padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.07);
    display: flex; flex-direction: column; gap: 10px;
}
.game-card.outlier-pick { /* Style for outlier picks */
    border-left: 5px solid #e74c3c;
    box-shadow: 0 3px 8px rgba(231, 76, 60, 0.15);
}

.game-card .game-meta-info { /* For date, time, venue, network */
    font-size: 1.0em;
    color: #6c757d;
    margin-bottom: 8px;
    text-align: right;
    border-bottom: 1px dashed #eee;
    padding-bottom: 6px;
}

.game-section { padding-bottom: 8px; margin-bottom: 8px; }
.game-section:not(:last-child) { border-bottom: 1px dashed #f1f3f5; }
.game-section:last-child { border-bottom: none; margin-bottom: 0; }

.game-section h4 { /* PREDICTION, MARKET ODDS, MODEL PICKS, RESULT */
    font-size: 1.0em; font-weight: 700; color: #343a40;
    text-transform: uppercase; letter-spacing: 0.05em;
    margin: 0 0 5px 0; padding-bottom: 3px;
}
.game-section p { margin: 2px 0; font-size: 0.85em; color: #495057; }
.game-section p strong { color: #212529; font-weight: 600; }

.teams { /* Container for Home vs Away in card */
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px; padding-bottom: 10px;
    border-bottom: 1px solid #e9ecef;
}
.team-display { /* For logo + name grouping */
    display: flex; flex-direction: column; align-items: center;
    text-align: center; flex-basis: 40%;
}
.team-logo {
    width: 35px; height: 35px; object-fit: contain; margin-bottom: 4px;
}
.team-name { font-weight: 600; font-size: 0.9em; color: #2c3e50; }
.vs { color: #e74c3c; font-weight: 500; font-size: 1.1em; }

.model-picks p { margin: 4px 0; } /* More space for pick lines */
.outcome-win { color: #28a745 !important; font-weight: bold; }
.outcome-loss { color: #dc3545 !important; font-weight: bold; }
.outcome-push { color: #fd7e14 !important; font-weight: bold; }

/* --- Mobile Adjustments for Predictions Page --- */
@media (max-width: 768px) {
    body.predictions-page { /* padding-top will be set by JS */ }
    .date-selector-bar-sticky-wrapper, .conference-selector-bar-sticky-wrapper {
        /* 'top' values will be set by JS */
    }
    .date-button { font-size: 0.7em; padding: 4px 8px; }
    .conf-button { font-size: 0.65em; padding: 3px 6px; }
    .date-nav-arrow, .conf-nav-arrow { font-size: 1em; padding: 0 5px;}

    .predictions-main-content .page-section-title.predictions-title {
        font-size: 1.4em; margin-top:15px; margin-bottom: 15px;
    }
    .predictions-grid { grid-template-columns: 1fr; gap: 12px; }
    .game-card { padding: 12px; }
    .game-card .game-meta-info { font-size: 0.7em; }
    .game-section h4 { font-size: 0.7em; }
    .game-section p { font-size: 0.8em; }
    .team-logo { width: 30px; height: 30px; }
    .team-name { font-size: 0.85em; }
}
@media (max-width: 480px) {
    .date-button { font-size: 0.65em; padding: 3px 6px; }
    .conf-button { font-size: 0.6em; padding: 2px 5px; }
    .predictions-main-content .page-section-title.predictions-title { font-size: 1.2em; }
    .team-logo { width: 25px; height: 25px; }
}