/* -------------------------------------------------------
   3. SECTION A: HORSE INFO (public)
   
   3-column grid at desktop:
     Left:   horse image, name, owner, breeder, foaled
     Center: pedigree + stats table
     Right:  dam section + stat cards
   ------------------------------------------------------- */
.horsepage_top {
  /* 🍞 BREADCRUMB: Was display:grid (280px 1fr 380px). Changed to flex because
     style_more.css forces width:100% !important on ALL descendant divs inside
     the stable detail cell — grid children collapse when that fires. Flex
     children with explicit flex-basis + !important width fight it and win. */
  display: flex;
  flex-wrap: wrap;
  gap: var(--hp-gap);
  background: var(--hp-card-bg);
  padding: var(--hp-pad);
  border-radius: var(--hp-radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  margin-bottom: var(--hp-gap);
}

/* -------------------------------------------------------
   HP_INFO_GRID — 4-column CSS grid container
   
   Replaces the old horsepage_top flex layout.
   Columns: identity | pedigree+dam | stats | stat cards
   ------------------------------------------------------- */
.hp_info_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--hp-gap);
  background: var(--hp-card-bg);
  padding: var(--hp-pad);
  border-radius: var(--hp-radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  margin-bottom: var(--hp-gap);
}

/* 2x2 at medium widths */
@media (max-width: 1099px) and (min-width: 600px) {
  .hp_info_grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Reset old horsepage_top grid-column/row assignments that bleed in */
  .hp_info_grid > .horsepage_identity,
  .hp_info_grid > .horsepage_pedigree_col,
  .hp_info_grid > .horsepage_stats_col,
  .hp_info_grid > .horsepage_right_col {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

/* Single column on mobile */
@media (max-width: 599px) {
  .hp_info_grid {
    grid-template-columns: 1fr;
    padding: var(--hp-pad-sm);
    gap: var(--hp-gap-sm);
  }
  /* Reset any grid-column/row assignments from old horsepage_top rules
     so all 4 columns stack cleanly in order */
  .hp_info_grid > .horsepage_identity,
  .hp_info_grid > .horsepage_pedigree_col,
  .hp_info_grid > .horsepage_stats_col,
  .hp_info_grid > .horsepage_right_col {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* --- Left column: horse identity --- */
/* 🍞 BREADCRUMB: OLD had flex:0 0 280px + width:280px !important.
   Worked for horsepage_top (flex layout). New hp_info_grid (CSS grid)
   ignores flex but width/max-width still capped the column at 280px,
   leaving dead whitespace. Fixed: remove fixed sizing, let grid handle. */
.horsepage_identity {
  display: flex;
  flex-direction: column;
  gap: var(--hp-gap-sm);
  min-width: 0;
}

.horsepage_horse_name {
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  padding: 12px;
  background: #f0f0f0;
  border-radius: var(--hp-radius);
  border: 2px solid var(--hp-border);
  letter-spacing: 0.5px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.horsepage_desc {
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-sm);
}

.horsepage_id_row {
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-sm);
}

.horsepage_id_row .horsepage_label {
  font-weight: 700;
  margin-right: 8px;
}

.horsepage_image_block {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.horsepage_horse_img {
  width: 100%;
  max-width: 110px;
  aspect-ratio: 1;
  background: #000;
  border-radius: var(--hp-radius);
  overflow: hidden;
  flex-shrink: 1;          /* ALLOW shrinking */
}

.horsepage_horse_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Empty/broken image fallback */
.horsepage_horse_img img[src=""],
.horsepage_horse_img img:not([src]) {
  display: none;
}

.horsepage_owner_breeder {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.horsepage_info_line {
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-sm);
}

.horsepage_label {
  font-weight: 700;
  margin-right: 6px;
}

/* Pedigree toggle (hidden by default) */
.horsepage_pedigree_toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hp-green);
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid var(--hp-green);
  border-radius: 4px;
  background: #f0f8f0;
  transition: background 0.15s ease, color 0.15s ease;
  user-select: none;
  margin-top: 4px;
}

.horsepage_pedigree_toggle:hover {
  background: var(--hp-green);
  color: #fff;
}

.horsepage_pedigree_toggle .hp_ped_arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.horsepage_pedigree_toggle_open .hp_ped_arrow {
  transform: rotate(90deg);
}

.horsepage_pedigree_table {
  display: none;
  margin-top: 8px;
}

.horsepage_pedigree_table.horsepage_show {
  display: block;
}

/* Flex row of cards — centered, wraps on narrow screens */
.horsepage_pedigree_table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  padding-bottom: 10px;
}

/* thead/tbody/tr become invisible wrappers so TDs flex correctly */
.horsepage_pedigree_table thead,
.horsepage_pedigree_table tbody,
.horsepage_pedigree_table tr {
  display: contents;
}

/* Each sire = a flex card */
.horsepage_pedigree_table td {
  display: flex;
  flex-direction: column;
  flex: 1 1 160px;
  min-width: 140px;
  max-width: 220px;
  border: 1px solid var(--hp-border);
  border-radius: 4px;
  padding: 8px 10px;
  background: #fff;
}

.horsepage_pedigree_table td > strong {
  font-size: 15px;
  display: block;
  margin-bottom: 4px;
}

.horsepage_ped_sub {
  font-size: 11px;
  color: #555;
  margin-top: 3px;
  font-weight: bold;
}

.horsepage_ped_ss {
  font-weight: normal;
  color: #444;
  margin-top: 3px;
}

/* Stack to single column at 768px, bump fonts */
@media (max-width: 768px) {
  .horsepage_pedigree_table td {
    flex: 1 1 100%;
    max-width: 100%;
    font-size: 14px;
  }
  .horsepage_pedigree_table td > strong {
    font-size: 17px;
  }
  .horsepage_ped_sub {
    font-size: 13px;
  }
}

/* --- Col 2: pedigree + dam + offspring (new 4-column layout) --- */
.horsepage_pedigree_col {
  display: flex;
  flex-direction: column;
  gap: var(--hp-gap-sm);
  min-width: 0;
}

/* Full-width pedigree banner — sits above the 3 columns in horsepage_top.
   flex: 0 0 100% forces its own row in the flex container at all widths. */
.horsepage_pedigree_banner {
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--hp-gap-xs);
  min-width: 0;
}

/* --- Center column: stats table (pedigree moved to banner above) --- */
.horsepage_stats_col {
  display: flex;
  flex-direction: column;
  gap: var(--hp-gap-sm);
  flex: 1 1 300px;
  width: auto !important;
  min-width: 0;
}

/* Pedigree line as direct grid child spans all columns at every breakpoint */
.hp_info_grid > .horsepage_pedigree_line {
  grid-column: 1 / -1;
}

.horsepage_pedigree_line {
  font-size: 13px;
  padding: 8px 10px;
  background: #f9f9f9;
  border-radius: var(--hp-radius-sm);
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.3px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.horsepage_stats_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.horsepage_stats_table th,
.horsepage_stats_table td {
  padding: 6px 6px;
  text-align: center;
  border: 1px solid var(--hp-border);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.horsepage_stats_table th {
  background: #f0f0f0;
  font-weight: 700;
  font-size: 11px;
}

.horsepage_stats_table td:first-child {
  text-align: left;
  font-weight: 600;
}

/* S column can hide early to save space */
.horsepage_stats_table .horsepage_stats_hide_s { }
.horsepage_stats_table .horsepage_stats_hide_p { }

/* Stats row expand arrow — hidden on desktop, shown when columns hide */
.horsepage_stats_expand {
  display: none;
  cursor: pointer;
  color: var(--hp-green, #0c420c);
  font-size: 10px;
  padding: 0 4px;
  text-align: center;
  border-left: none !important;
}

/* Header cell for expand column — hidden on desktop too */
.horsepage_stats_expand_hdr {
  display: none;
  border: none !important;
  background: inherit !important;
}

/* Stats row hidden detail — shows P, S, $ as inline cards */
.horsepage_stats_detail_row { display: none; }
.horsepage_stats_detail_row.horsepage_stats_detail_show { display: table-row; }

.horsepage_stats_detail_cell {
  padding: 4px 8px !important;
  text-align: left !important;
}

.horsepage_stats_detail_cards {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.horsepage_stats_detail_card {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 4px 8px;
  border-left: 3px solid #4a8c5c;
  min-width: 50px;
}

.horsepage_stats_detail_card_label {
  font-weight: 700;
  font-size: 9px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.horsepage_stats_detail_card_value {
  font-weight: 600;
  font-size: 13px;
  color: #333;
}

/* Inherit surface color on stats detail rows */
.horsepage_row_dirt .horsepage_stats_detail_card { border-left-color: #c4a265; }
.horsepage_row_turf .horsepage_stats_detail_card { border-left-color: #4caf50; }
.horsepage_row_poly .horsepage_stats_detail_card { border-left-color: #7e57c2; }
.horsepage_row_sprint .horsepage_stats_detail_card { border-left-color: #64b5f6; }
.horsepage_row_route .horsepage_stats_detail_card { border-left-color: #ef9a9a; }
.horsepage_row_off .horsepage_stats_detail_card { border-left-color: #ba68c8; }

/* Detail rows inherit surface background */
.horsepage_stats_detail_row.horsepage_row_dirt { background: var(--hp-dirt); }
.horsepage_stats_detail_row.horsepage_row_turf { background: var(--hp-turf); }
.horsepage_stats_detail_row.horsepage_row_poly { background: var(--hp-poly); }
.horsepage_stats_detail_row.horsepage_row_sprint { background: var(--hp-sprint); }
.horsepage_stats_detail_row.horsepage_row_route { background: var(--hp-route); }
.horsepage_stats_detail_row.horsepage_row_off { background: var(--hp-off); }

.horsepage_stats_table tr.horsepage_row_dirt { background: var(--hp-dirt) !important; }
.horsepage_stats_table tr.horsepage_row_turf { background: var(--hp-turf) !important; }
.horsepage_stats_table tr.horsepage_row_poly { background: var(--hp-poly) !important; }
.horsepage_stats_table tr.horsepage_row_sprint { background: var(--hp-sprint) !important; }
.horsepage_stats_table tr.horsepage_row_route { background: var(--hp-route) !important; }
.horsepage_stats_table tr.horsepage_row_off { background: var(--hp-off) !important; }

/* --- Compact stats view (mobile only) --- */
.horsepage_stats_compact { display: none; }

.horsepage_stats_compact_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f0f0f0;
  padding: 10px 12px;
  border: 1px solid var(--hp-border);
  border-radius: 4px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
}

.horsepage_stats_compact_arrow {
  font-size: 10px;
  color: var(--hp-green);
  transition: transform 0.2s ease;
}

.horsepage_stats_compact_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 8px 0;
}

.horsepage_stats_compact_card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 6px 8px;
  border-left: 3px solid #4a8c5c;
}

.horsepage_stats_compact_card.horsepage_row_dirt { border-left-color: #c4a265; background: var(--hp-dirt); }
.horsepage_stats_compact_card.horsepage_row_turf { border-left-color: #4caf50; background: var(--hp-turf); }
.horsepage_stats_compact_card.horsepage_row_poly { border-left-color: #7e57c2; background: var(--hp-poly); }
.horsepage_stats_compact_card.horsepage_row_sprint { border-left-color: #64b5f6; background: var(--hp-sprint); }
.horsepage_stats_compact_card.horsepage_row_route { border-left-color: #ef9a9a; background: var(--hp-route); }
.horsepage_stats_compact_card.horsepage_row_off { border-left-color: #ba68c8; background: var(--hp-off); }

.horsepage_stats_compact_label {
  font-weight: 700;
  font-size: 9px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.horsepage_stats_compact_value {
  font-weight: 600;
  font-size: 13px;
  color: #333;
}

/* On mobile: hide full table, show compact */
@media (max-width: 500px) {
  .horsepage_stats_full { display: none !important; }
  .horsepage_stats_compact { display: block !important; }
}

/* --- Right column: dam + stat cards --- */
/* 🍞 BREADCRUMB: OLD had flex:0 0 380px + width:380px !important.
   Same problem as horsepage_identity — fixed px width capped column in
   hp_info_grid (CSS grid). Fixed: remove fixed sizing, let grid handle. */
.horsepage_right_col {
  display: flex;
  flex-direction: column;
  gap: var(--hp-gap-sm);
  min-width: 0;
}

.horsepage_dam_section {
  padding: 12px;
  border: 2px solid var(--hp-border);
  border-radius: var(--hp-radius);
}

.horsepage_dam_header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.horsepage_dam_label {
  font-size: 11px;
  color: var(--hp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.horsepage_dam_name {
  font-size: 18px;
  font-weight: 700;
  margin-top: 2px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.horsepage_badges {
  display: flex;
  gap: 6px;
}

.horsepage_badge {
  padding: 3px 8px;
  border-radius: var(--hp-radius-sm);
  font-weight: 700;
  color: white;
  font-size: 11px;
}

.horsepage_badge_main { background: #9c27b0; }
.horsepage_badge_alt  { background: #d32f2f; }

/* Stat cards grid */
.horsepage_stat_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.horsepage_stat_card {
  padding: 8px 10px;
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-sm);
}

.horsepage_stat_card_label {
  font-size: 11px;
  color: var(--hp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

.horsepage_stat_card_value {
  font-size: 15px;
  font-weight: 700;
}

/* Full-width stat card (for Wins Within) */
.horsepage_stat_card_full {
  grid-column: 1 / -1;
}

/* === DELTA: stable action cards + always-visible expand toggle === */

/* Always show the expand toggle regardless of viewport width */
.stable_horse_list_expand_toggle {
    display: inline-block !important;
}

/* Action cards row — sits above the info cards */
.shl_action_cards {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.shl_action_card {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: #fff;
    border: 1px solid #aac8b2;
    border-left: 3px solid #4a8c5c;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.shl_action_card:hover {
    background: #eef5f1;
}

.shl_action_card_label {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #4a8c5c;
}

/* Hidden action panel */
.shl_action_panel {
    display: none;
    background: #f0f5f2;
    border: 1px solid #aac8b2;
    border-left: 3px solid #4a8c5c;
    border-radius: 4px;
    padding: 10px 14px;
    margin-bottom: 8px;
}

.shl_action_panel.shl_panel_open {
    display: block;
}

.shl_action_panel_content {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.shl_action_confirm {
    padding: 4px 14px;
    font-size: 12px;
    font-weight: 700;
    background: #4a8c5c;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.shl_action_confirm:hover {
    background: #3a7049;
}