/* Track Stats Page Styles */

.track-stats-header {
    text-align: center;
    margin-bottom: 5px;
}

.track-stats-header .col-sm-6 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.track-stats-logo {
    max-width: 100%;
    height: auto;
    max-height: 80px;
    display: block;
    margin: 10px auto;
}

@media only screen and (max-width: 991px) {
    .track-stats-logo {
        max-height: 60px;
        margin: 5px auto;
    }
}

@media only screen and (max-width: 600px) {
    .track-stats-logo {
        max-height: 50px;
        margin: 3px auto;
    }
}

@media only screen and (min-width: 992px) {
    .track-stats-header {
        text-align: left;
    }

    .track-stats-header .col-sm-6 {
        justify-content: flex-start;
    }

    .track-stats-logo {
        margin: 10px 0;
        max-height: 80px;
    }
}

/* Ensure detail rows render as full-width table rows */
.detail-row { display: none; }
.detail-row.show { display: table-row !important; }
.detail-row > td { display: table-cell !important; width: auto !important; padding: 0 !important; border: none !important; background: transparent !important; }

/* Desktop and base table styles */
.track-stats-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.track-stats-table th, .track-stats-table td { vertical-align: middle; }
.track-stats-table th { font-weight: 700; }
.track-stats-table th.text-center, .track-stats-table td.text-center { text-align: center; }
.track-stats-table .car-cell img { display: inline-block; max-height: 16px; }
.track-stats-table .car-fallback { display: none; }
.track-stats-table .make-cell img { display: inline-block; max-height: 18px; width: auto; }
.track-stats-table .make-fallback { display: none; }

.rr-frame { border: 1px solid #008000; border-radius: 3px; box-shadow: 0 8px 6px -6px black; }
.rr-scroll { padding: 0; overflow-x: auto; }

.track-stats-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 15px; }
.track-stats-filters label { margin: 0; font-weight: bold; }
.year-range-container { display: flex; align-items: center; gap: 10px; }
.track-stats-info { background-color: #f0f8ff; padding: 10px; border-radius: 5px; margin-bottom: 15px; border: 1px solid #006400; }

/* Expandable row styles */
.driver-row { cursor: pointer; transition: background-color 0.2s; border-bottom: 1px solid #ddd; }
.driver-row:hover { background-color: #f5f5f5; }
.driver-row.expanded { background-color: #e8f4f8; border-top: 2px solid #000 !important; border-bottom: none !important; }
.driver-row.after-expanded { border-top: 2px solid #000 !important; }

/* When expanded, keep the detail row visible as a table row */
.driver-row.expanded + .detail-row { display: table-row !important; }

/* Race details container/table */
.race-details-container { padding: 10px; overflow-x: auto; background: white; }
.race-details-container-wrapper { padding: 10px; }
.race-details-table { width: 100%; margin: 0; border-collapse: collapse; background-color: white; table-layout: auto; }
.race-details-table thead { background-color: transparent; color: black; border-bottom: 2px solid #f6d106; }
.race-details-table th, .race-details-table td { padding: 6px 10px; border: none; text-align: left; white-space: normal; font-size: 0.95em; }
.race-details-table th.text-center, .race-details-table td.text-center { text-align: center; }
.race-details-table tbody tr { background-color: #fff; border-bottom: 1px solid #eee; }
.race-details-table tbody tr:nth-child(even) { background-color: #f9f9f9; }

/* Prevent wrapping on desktop for some columns */
#desktop-view .race-details-table th:first-child, #desktop-view .race-details-table td:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#desktop-view .race-details-table th:nth-child(4), #desktop-view .race-details-table td:nth-child(4) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Sort header visuals */
.track-stats-table thead th[data-sort] { user-select: none; }
.sort-indicator { margin-left: 4px; font-size: 0.85em; opacity: 0.3; transition: opacity 0.2s; }

#mobile-view { display: none; }

/* =====================
   Year Filter Modal UI
   ===================== */
.year-filter-modal { display: none; position: fixed; z-index: 3000; inset: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
.year-filter-modal-content { background-color: #fff; margin: 5% auto; border: 2px solid #006400; border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,0.35); width: 90%; max-width: 520px; overflow: hidden; }
.year-filter-modal-header { padding: 12px 16px; background-color: #337ab7; color: #fff; display: flex; justify-content: space-between; align-items: center; }
.year-filter-close { cursor: pointer; font-size: 24px; line-height: 1; }
.year-filter-modal-body { padding: 16px; max-height: 65vh; overflow-y: auto; }
.year-filter-modal-footer { padding: 12px 16px; background: #f5f5f5; display: flex; gap: 10px; justify-content: flex-end; }

/* Lock body scroll when modal open */
body.modal-open { overflow: hidden !important; }

/* Responsive: mobile layout */
@media (max-width: 768px) {
  #desktop-view { display: none; }
  #mobile-view { display: block; }
  .mobile-hide { display: none; }

  /* Use auto layout so remaining visible columns expand */
  #mobile-view .track-stats-table { table-layout: auto !important; }
  /* Reallocate widths (sum 100%) for visible columns */
  #mobile-view thead th[data-sort="driver"] { width: 40% !important; }
  #mobile-view thead th[data-sort="car"] { width: 12% !important; }
  #mobile-view thead th[data-sort="make"] { width: 12% !important; }
  #mobile-view thead th[data-sort="races"] { width: 18% !important; }
  #mobile-view thead th[data-sort="avgfinish"] { width: 18% !important; }
  /* Remove fixed widths from hidden columns so they don't reserve space */
  #mobile-view thead th.mobile-hide { width: 0 !important; }

  /* Ensure body cells follow header widths */
  #mobile-view tbody tr.driver-row td:nth-child(1) { width: 40% !important; }
  #mobile-view tbody tr.driver-row td:nth-child(2) { width: 12% !important; }
  #mobile-view tbody tr.driver-row td:nth-child(3) { width: 12% !important; }
  #mobile-view tbody tr.driver-row td:nth-child(4) { width: 18% !important; }
  #mobile-view tbody tr.driver-row td:nth-child(5) { width: 18% !important; }

  /* Keep detail row/table semantics; toggle visibility on wrapper */
  #mobile-view .race-details-container-wrapper { display: none; }
  #mobile-view .detail-row.show .race-details-container-wrapper { display: block; }

  /* Fit mobile details table to viewport */
  #mobile-view .race-details-table { width: 100%; table-layout: fixed; }
  #mobile-view .race-details-table th, #mobile-view .race-details-table td { padding: 4px 6px; font-size: 0.85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
  #mobile-view .race-details-table th:first-child, #mobile-view .race-details-table td:first-child { text-align: left !important; }

  /* Modal sizing on mobile */
  .year-filter-modal-content { margin: 10% auto; width: 95%; max-width: 520px; }
}