/* ── horses.css ──────────────────────────────────────────────────────────────
   Page-specific styles for horses.html
   No inline <style> block to extract — this file only fills two class gaps
   that are used in horses.html but not defined in base.css.
   ──────────────────────────────────────────────────────────────────────────── */

/* ── Inline text input (class variant of base.css input[type="text"]) ────── */
/* Used on #r-horse-search in the Add Race modal.                             */
.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 ────────────────────────────────────────────────────── */
/* Used in the Merge Horses modal. base.css has .modal-header and            */
/* .modal-body but no .modal-footer counterpart.                             */
.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;
}

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

@media (max-width: 768px) {
  #view-horses {
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  /* Page heading + data range line */
  #view-horses > 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-horses > div[style*="justify-content:space-between"] > div {
    width: 100% !important;
    min-width: 0 !important;
  }

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

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

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

  /* Dashboard stat cards */
  #view-horses .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-horses .stats-row .stat-card,
  #view-horses .stats-row .stat-card.stat-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  /* Search/filter toolbar */
  #view-horses .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-horses .table-toolbar > * {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #view-horses .table-toolbar .search-box,
  #view-horses .table-toolbar #hf-breed,
  #view-horses .table-toolbar #hf-dist,
  #view-horses .table-toolbar button {
    width: 100% !important;
  }

  #view-horses .table-toolbar > div[style*="gap:4px"] {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
  }

  #view-horses .table-toolbar #hf-dist-op {
    width: 56px !important;
  }

  #view-horses .table-toolbar button[onclick*="openPPHeatmapModal"] {
    white-space: normal !important;
    line-height: 1.25 !important;
    padding: 8px 10px !important;
  }

  /* Keep table scrolling inside the table box, not the whole page */
  #view-horses .table-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

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

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

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

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

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

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

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

  #view-horses .table-toolbar {
    gap: 10px !important;
  }
}

/* ── Mobile horse table containment ───────────────────────────────────────
   Keeps the generated paginated horse table scrolling inside its panel on
   phones/tablets instead of expanding the entire page width.
   Desktop remains unchanged because this is media-query scoped.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

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

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

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

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

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

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

@media (min-width: 769px) and (max-width: 1024px) {
  #view-horses .table-wrap,
  #view-horses #horses-table-body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

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

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

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