/* assets/tables.css - DataTable and table-related styles */

/* DatePickerRange styling */
.date-picker-wrapper {
    width: 100%;
    /* max-width: 350px; */ /* Removed to allow full width */
}

/* Force soccer first goals date picker to use full width */
#soccer_first_goals-date-picker {
    width: 75% !important;
    display: block !important;
}

/* Penalty date picker column positioning - target the entire date range column */
.filter-container .col-lg-4.col-md-3.col-sm-6.col-12 {
    transform: translateY(-15%) !important;
}

/* Fix penalty date picker width consistency */
#penalty-date-picker {
    border: none !important;
    background-color: transparent !important;
    padding: 0 !important;
    height: auto !important;
    width: 80% !important;
}

#penalty-date-picker .DateRangePicker {
    width: 100% !important;
}

#penalty-date-picker .DateRangePickerInput {
    width: 100% !important;
    border: 1px solid rgb(206, 212, 218) !important;
    background-color: rgb(255, 255, 255) !important;
    border-radius: 4px !important;
}

#soccer_first_goals-date-picker .DateRangePicker,
#soccer_first_goals-date-picker .DateRangePickerInput {
    width: 100% !important;
    display: flex !important;
}

#soccer_first_goals-date-picker .DateInput {
    flex: 1 !important;
}

#soccer_first_goals-date-picker .DateRangePickerInput_arrow {
    padding: 0 3px !important;
}

.date-picker-container {
    width: 100%;
}

/* Make the DatePickerRange container invisible but let content size it */
.DateRangePickerInput {
    /* width: 100%; */
    /* REMOVED */
    /* width: 100% !important; */
    /* REMOVED */
    display: inline-flex;
    /* KEEP - allows shrink-wrapping based on content */
    /* Make border and background transparent */
    border-radius: 4px;
    /* Keep for potential spacing consistency */
    border: 1px solid transparent !important;
    /* Make border invisible */
    background-color: transparent !important;
    /* Make background invisible */
    /* Ensure box-sizing is appropriate if padding is added here, but likely not needed */
    /* box-sizing: border-box; */
    /* Remove padding if it was on this element, apply to inputs if needed */
    padding: 0 !important;
    /* Remove padding from the container itself */

}

/* Keep internal styles for the date boxes */
.DateInput {
    flex: 1;
    /* Add some spacing between the two inputs perhaps? */
    /* Or rely on the arrow's padding */
}

/* Keep internal styles for the actual input fields */
/* We might need to add a border BACK here if the inputs look bad now */
.DateInput_input {
    font-size: 14px !important;
    padding: 8px 10px !important;
    /* Keep padding for input text */
    height: 38px !important;
    /* Keep consistent height */
    border: 1px solid var(--border-color, #ced4da) !important;
    /* ADD a border back to the input */
    /* border: none !important; */
    /* REMOVE this line */
    width: 100% !important;
    /* Keep this */
    box-sizing: border-box;
    /* Keep this */
    border-radius: 0;
    /* Remove radius if applied, let outer container handle it if needed*/
    /* Ensure inputs have a background */
    background-color: var(--bs-body-bg, #fff);
    /* Use theme background */
}

/* Main container: Make it transparent and size to content */
.DateRangePickerInput {
    display: inline-flex;
    /* Allow shrink-wrapping */
    border: none !important;
    /* No border for the main container */
    background-color: transparent !important;
    /* No background for the main container */
    padding: 0 !important;
    /* Remove container padding */
    border-radius: 0;
    /* Remove container radius */
    vertical-align: middle;
    /* Align with adjacent elements if needed */
}

/* Styles for the arrow separator */
.DateRangePickerInput_arrow {
    display: flex;
    /* Keep using flexbox for alignment */
    align-items: center;
    /* Keep vertical centering */
    padding: 0 5px;
    /* Keep horizontal spacing */

    /* --- NEW --- */
    /* Match the background of the main container */
    background-color: var(--bs-body-bg, #fff);

    /* Nudge down slightly - Adjust the px value as needed */
    padding-top: 2px;
    /* Try 2px or 3px first */

    /* Ensure no unwanted border */
    border: none !important;
}

/* Optional: Style the arrow SVG icon itself if needed */
.DateRangePickerInput_arrow svg {
    fill: #545e67;
    height: 38px !important;
    /* Example color for the arrow icon */
}

/* --- Ensure other datepicker styles are correct --- */

.DateRangePickerInput {
    width: auto; /* Let it size to content instead of 100% */
    display: inline-flex; /* Use inline-flex to shrink to content */
    border-radius: 4px;
    border: 1px solid var(--border-color, #ced4da);
    /* Visible border */
    background-color: var(--bs-body-bg, #fff);
    /* Visible background */
    align-items: center;
    /* Align inputs/arrow vertically */
}

.DateInput {
    flex: 1;
}

.DateInput_input {
    font-size: 14px !important;
    padding: 8px 10px !important;
    height: 38px !important;
    border: none !important;
    /* Inputs are borderless */
    width: 100% !important;
    box-sizing: border-box;
    background-color: transparent !important;
    /* Inputs blend into container */
    color: var(--bs-body-color, #212529);
}

.DateInput_input::placeholder {
    color: #6c757d;
    opacity: 1;
}


.DateRangePickerInput_clearDates {
    display: flex;
    align-items: center;
    padding-right: 5px;
    /* Adjust spacing */
    background-color: var(--bs-body-bg, #fff);
    /* Match container background */
    border: none !important;
    height: 38px;
    /* Match input height */
}

.DateRangePickerInput_clearDates svg {
    fill: #888;
    cursor: pointer;
}
/* --- End DatePickerRange Styles --- */

/* Ensure consistent heights for filter components */
.filter-item .Select-control,
.filter-item .DateInput_input {
    height: 38px !important;
    min-height: 38px !important;
}

/* Ensure date picker container has proper alignment */
.date-picker-container {
    width: 100%;
}

/* Pagination Styling */
.dash-table-container .previous-next-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
}

.dash-table-container .page-number {
    margin: 0 5px;
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--text-color);
}

.dash-table-container .previous-page,
.dash-table-container .next-page,
.dash-table-container .first-page,
.dash-table-container .last-page {
    background-color: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    margin: 0 2px;
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.dash-table-container .previous-page:hover,
.dash-table-container .next-page:hover,
.dash-table-container .first-page:hover,
.dash-table-container .last-page:hover {
    background-color: var(--primary-color);
    color: white;
}

/* Fix for DataTable in Dash 2.15 */
.dash-table-container {
    width: 100% !important;
    max-width: 100% !important;
}

.dash-spreadsheet {
    width: 100% !important;
    max-width: 100% !important;
}

.dash-spreadsheet-container {
    width: 100% !important;
    max-width: 100% !important;
}

/* Selected page number styling */
.dash-table-container .current-page {
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
}

/* Pagination position container */
.dash-table-container .pageCount {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 8px;
}

/* MLB Barrels Table Specific Overrides */
#barrels-table-container {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    min-width: 100% !important;
}

#barrels-data-table {
    width: 100% !important;
    min-width: 100% !important;
}

#barrels-data-table .dash-spreadsheet,
#barrels-data-table .dash-table-container {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    overflow-x: auto !important;
}

/* Ensure DataTable confidence colors are properly displayed */
.dash-table-container .dash-spreadsheet-container .cell {
    /* Ensure inline styles from style_data_conditional override any other styles */
    font-weight: inherit !important;
}

/* Make sure confidence colors in tables are prominent */
.dash-table-container tr[style*="background"] {
    /* Boost confidence background colors in table rows */
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1) !important;
}

/*
  CSS Override to hide the "Show Filters" toggle switch row for tables
  on the MLB Daily Barrels page.
  This targets the specific Bootstrap row structure used in create_data_table.py
  for the filter toggle.
*/

/* Scope the rule to your specific page container to avoid unintended effects elsewhere */
#mlb_daily_barrels_page_wrapper div.row.mt-2.mb-2.justify-content-end,
.mlb_daily_barrels_main_container div.row.mt-2.mb-2.justify-content-end {
    display: none !important;
}

/* Hide filter toggle for MLB First Pitch tables */
#mlb_firstpitch_page_wrapper div.row.mt-2.mb-2.justify-content-end,
.mlb_firstpitch_main_container div.row.mt-2.mb-2.justify-content-end {
    display: none !important;
}

/* Hide filter toggle for Soccer Penalty tables */
#soccer_daily_penalty_page_wrapper div.row.mt-2.mb-2.justify-content-end,
.soccer_daily_penalty_main_container div.row.mt-2.mb-2.justify-content-end,
#penalty_tab div.row.mt-2.mb-2.justify-content-end,
#soccer_daily_games_penalty_table_container div.row.mt-2.mb-2,
#soccer_daily_games_penalty_content div.row.mt-2.mb-2,
#penalty-details-table-filter-toggle,
div:has(> #penalty-details-table-filter-toggle) {
    display: none !important;
}

/*
 Date picker container and portal positioning fixes
*/
.date-picker-container {
    position: relative;
    z-index: 1;
  }
  
  /* Portal-based calendar positioning - this should work with with_portal=True */
  .DatePickerSingle_picker,
  .SingleDatePicker_picker {
    z-index: 9999 !important;
    position: fixed !important;
  }

  /* Ensure the portal container has highest z-index */
  .react-portal {
    z-index: 9999 !important;
  }

  /* Alternative positioning for non-portal calendars */
  .DateRangePicker_picker {
    z-index: 9999 !important;
    position: absolute !important;
  }

  /* Make sure tab content doesn't interfere */
  .nav-tabs {
    z-index: 1000;
  }

  .tab-content {
    z-index: 1001;
  }

/* NBA First Baskets page - fix date picker wrapper width */
#nba_first_baskets_player-date-picker {
    width: auto !important;
    max-width: none !important;
}

#nba_first_baskets_player-date-picker .date-picker-wrapper {
    width: auto !important;
    max-width: none !important;
}

/* Also target the filter item container for NBA First Baskets */
.filter-item:has(#nba_first_baskets_player-date-picker) {
    flex: 0 0 auto !important;
    width: auto !important;
    transform: translateY(-3px) !important;
}

/* Enhanced DataTable page size for more opportunities */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet {
    max-height: 600px; /* Allow more rows to be visible */
}

/* Preview Table Styling */
.preview-table {
    margin-bottom: 0;
}

.preview-table thead th {
    background-color: rgba(0, 0, 0, 0.03);
    font-weight: 600;
    border-bottom-width: 2px;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* === MLB BATTER LINEUP TABLE STYLING === */
/* Custom styling for the batter lineup cards to match other table themes */
.batter-lineup-card {
    transition: all 0.2s ease-in-out;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--radius-sm, 4px);
    margin-bottom: 0.5rem;
}

.batter-lineup-card:hover {
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(0,0,0,0.1));
    transform: translateY(-1px);
}

/* Header styling to match table headers */
.batter-lineup-header {
    background-color: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid var(--border-color, #dee2e6);
    font-weight: 600;
    color: var(--text-color, #212529);
}

/* Player row styling */
.batter-lineup-row {
    transition: background-color 0.15s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.batter-lineup-row:hover {
    background-color: rgba(25, 118, 210, 0.05);
}

.batter-lineup-row:last-child {
    border-bottom: none;
}

/* Expand button styling */
.batter-expand-btn {
    transition: all 0.2s ease;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.batter-expand-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Collapsible content styling */
.batter-detail-content {
    background-color: rgba(0, 0, 0, 0.02);
    border-top: 1px solid var(--border-color, #dee2e6);
}

.batter-detail-content .card-body {
    padding: 1rem;
}

/* Stats text alignment and formatting */
.batter-stat-value {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.batter-stat-na {
    color: var(--muted-text-color, #6c757d);
    font-style: italic;
}

/* Player name styling */
.batter-player-name {
    font-weight: 600;
    color: var(--text-color, #212529);
}

/* Order number styling */
.batter-order-number {
    font-weight: 700;
    color: var(--primary-color, #1976D2);
    font-size: 1.1em;
}