/* ── jockeys.css ─────────────────────────────────────────────────────────────
   Page-specific styles for jockeys.html
   ──────────────────────────────────────────────────────────────────────────── */

/* Large stat value inside the top cards */
.jk-stat-value {
  font-family: 'Oxanium', Arial, sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #C8DFF0;
  margin-top: 6px;
  letter-spacing: 0.02em;
}

/* Small inline qualifier text in stat label, e.g. "(min 10 starts)" */
.jk-stat-sub {
  font-size: 0.9rem;
  color: #8BAFD4;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
}

/* ── Inline text input ───────────────────────────────────────────────────── */
.form-input {
  width: 100%;
  box-sizing: border-box;
  background: #0D1B2A;
  border: 1px solid #2C3E52;
  color: #C8DFF0;
  font-family: 'Oxanium', Arial, sans-serif;
  font-size: 0.96rem;
  padding: 9px 11px;
  border-radius: 3px;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.form-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(232,184,75,0.18);
}

/* ── Modal footer bar ────────────────────────────────────────────────────── */
.modal-footer {
  padding: 14px 26px;
  border-top: 1px solid var(--sand);
  background: var(--cream);
  flex-shrink: 0;
}

/* Light theme overrides */
body[data-theme="light"] .form-input {
  background: #FFFFFF;
  color: #0D1B2A;
  border-color: #A8B8C8;
}
body[data-theme="light"] .form-input:focus {
  border-color: #1A3A5C;
  box-shadow: 0 0 0 2px rgba(26,58,92,0.15);
}
body[data-theme="light"] .modal-footer {
  background: #F2F5F8;
  border-top-color: #C8D4DE;
}

/* ── Jockeys page mobile/tablet layout fixes ───────────────────────────────
   Desktop stays untouched. These rules only override inline desktop layout
   on smaller screens where the header, cards, and table can overflow.       */

@media (max-width: 768px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  main,
  #view-jockeys {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #view-jockeys {
    overflow-x: hidden;
  }

  /* Page heading + data range line */
  #view-jockeys > div[style*="justify-content:space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 20px !important;
  }

  #view-jockeys > div[style*="justify-content:space-between"] > div {
    width: 100% !important;
    min-width: 0 !important;
  }

  #view-jockeys > div[style*="justify-content:space-between"] > div[style*="gap:20px"] {
    display: block !important;
  }

  #view-jockeys .page-subtitle[style*="white-space:nowrap"] {
    white-space: normal !important;
    max-width: 100% !important;
    line-height: 1.45 !important;
    margin-top: 2px !important;
  }

  #view-jockeys .page-subtitle[style*="white-space:nowrap"] span[onclick*="openDataSettingsModal"] {
    display: inline-block;
    white-space: nowrap;
  }

  /* Dashboard stat cards */
  #view-jockeys .stats-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 18px !important;
  }

  #view-jockeys .stats-row .stat-card,
  #view-jockeys .stats-row .stat-card.stat-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  #view-jockeys .stats-row .stat-label {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }

  #view-jockeys .stats-row .stat-label select {
    max-width: 100% !important;
    margin-left: 0 !important;
    font-size: 0.78rem !important;
  }

  /* Search toolbar */
  #view-jockeys .table-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 8px !important;
    padding: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #view-jockeys .table-toolbar > *,
  #view-jockeys .table-toolbar .search-box {
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Keep generated table scrolling inside its panel, not the whole page */
  #view-jockeys .table-wrap,
  #view-jockeys #jockeys-table-body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #view-jockeys .table-wrap {
    display: block !important;
    overflow: hidden !important;
  }

  #view-jockeys #jockeys-table-body {
    display: block !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  #view-jockeys #jockeys-table-body table,
  #view-jockeys #jockeys-table-body .sg-table {
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
  }

  #view-jockeys #jockeys-table-body th,
  #view-jockeys #jockeys-table-body td {
    padding: 7px 8px !important;
    font-size: 0.78rem !important;
    white-space: nowrap !important;
  }

  #view-jockeys #jockeys-table-body .btn,
  #view-jockeys #jockeys-table-body button {
    padding: 5px 8px !important;
    font-size: 0.76rem !important;
    white-space: nowrap !important;
  }

  /* Pagination should not push the page wider */
  #jockeys-pagination {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  #jockeys-pagination > div {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
  }

  #jockeys-pagination button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  #view-jockeys > div[style*="justify-content:space-between"] {
    gap: 18px !important;
  }

  #view-jockeys .page-subtitle[style*="white-space:nowrap"] {
    white-space: normal !important;
    text-align: right;
    line-height: 1.45 !important;
  }

  #view-jockeys .stats-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  #view-jockeys .stats-row .stat-card,
  #view-jockeys .stats-row .stat-card.stat-table {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    flex: none !important;
  }

  #view-jockeys .stats-row .stat-label {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: normal !important;
  }

  #view-jockeys .stats-row .stat-label select {
    margin-left: 0 !important;
  }

  #view-jockeys .table-wrap,
  #view-jockeys #jockeys-table-body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #view-jockeys .table-wrap {
    overflow: hidden !important;
  }

  #view-jockeys #jockeys-table-body {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #view-jockeys #jockeys-table-body table,
  #view-jockeys #jockeys-table-body .sg-table {
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
  }
}