/* ============================================================
   HORSEPAGE.CSS — Master stylesheet for horse profile page
   
   Sections:
     1. Variables & Reset
     2. Master Layout
     3. Section A: Horse Info (public)
     4. Section B: Owner Defaults (owner-only)
     5. Section C: Past Performances (public)
     6. Section D: Race Finder / RAFI (logged-in only)
     7. Responsive Breakpoints
   
   Naming: All classes prefixed horsepage_ to avoid conflicts
   with existing site CSS (style.css, styleNEW.css, mike.css, 
   responsive.css).
   
   NOTE: This page loads inside a "loadanywhere" window which 
   may have a side menu stealing ~220px. Breakpoints account 
   for this.
   ============================================================ */

/* -------------------------------------------------------
   1. VARIABLES & RESET
   ------------------------------------------------------- */
:root {
  /* Core palette - matches existing site feel */
  --hp-bg:          #f5f5f5;
  --hp-card-bg:     #ffffff;
  --hp-border:      #ddd;
  --hp-border-dark: #bbb;
  --hp-text:        #333;
  --hp-text-muted:  #666;
  --hp-text-light:  #999;
  
  /* Accent colors */
  --hp-green:       #2e8b57;
  --hp-green-dark:  #246d45;
  --hp-blue:        #4a90e2;
  --hp-blue-dark:   #3a72b5;
  --hp-purple:      #6f42c1;
  --hp-red:         #dc3545;
  --hp-red-dark:    #c82333;
  --hp-yellow:      #ffc107;
  
  /* Surface colors (from original) */
  --hp-dirt:        #fff9c4;
  --hp-turf:        #c8e6c9;
  --hp-poly:        #ce93d8;
  --hp-sprint:      #e3f2fd;
  --hp-route:       #fce4ec;
  --hp-off:         #f3e5f5;
  
  /* PP row colors */
  --hp-pp-yellow:   #ffeb3b;
  --hp-pp-purple:   #e1bee7;
  
  /* Badge colors */
  --hp-badge-blue:  #90caf9;
  --hp-badge-green: #81c784;
  --hp-badge-olive: #9e9d24;
  --hp-badge-teal:  #26a69a;
  --hp-badge-brown: #8d6e63;
  --hp-badge-red:   #f44336;
  
  /* Spacing */
  --hp-gap:         16px;
  --hp-gap-sm:      10px;
  --hp-gap-xs:      6px;
  --hp-pad:         16px;
  --hp-pad-sm:      10px;
  --hp-radius:      6px;
  --hp-radius-sm:   4px;
  
  /* Typography */
  --hp-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --hp-font-mono:   'Courier New', monospace;
}

/* -------------------------------------------------------
   2. MASTER LAYOUT
   
   Page stacks vertically:
     [Horse Info + Stats + Dam/Owner Controls]  ← top grid
     [Past Performances]                        ← full width
     [Race Finder]                              ← full width
   ------------------------------------------------------- */
.horsepage_wrapper {
  font-family: var(--hp-font);
  color: var(--hp-text);
  line-height: 1.5;
  padding: 0;
  /* 🍞 BREADCRUMB: Force block layout so horsepage_top / owner / pps / rafi
     sections stack vertically. Without this, a parent flex container causes
     all 4 children to line up side-by-side. */
  display: block !important;
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

.horsepage_wrapper *,
.horsepage_wrapper *::before,
.horsepage_wrapper *::after {
  box-sizing: border-box;
}

/* -------------------------------------------------------
   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);
}

/* --- Left column: horse identity --- */
.horsepage_identity {
  display: flex;
  flex-direction: column;
  gap: var(--hp-gap-sm);
  flex: 0 0 280px;
  width: 280px !important;
  max-width: 280px !important;
  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 {
  font-size: 12px;
  color: var(--hp-green);
  cursor: pointer;
  text-decoration: underline;
  margin-top: 4px;
}

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

.horsepage_pedigree_table.horsepage_show {
  display: block;
}

.horsepage_pedigree_table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.horsepage_pedigree_table td {
  border: 1px solid var(--hp-border);
  padding: 4px 6px;
}

.horsepage_ped_sub {
  font-size: 10px;
  color: #666;
  margin-top: 2px;
}

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

.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 --- */
.horsepage_right_col {
  display: flex;
  flex-direction: column;
  gap: var(--hp-gap-sm);
  flex: 0 0 380px;
  width: 380px !important;
  max-width: 380px !important;
  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;
}

/* -------------------------------------------------------
   4. SECTION B: OWNER DEFAULTS (owner-only)
   
   Shown only when passVars.isOwner is true.
   Contains: riding style controls, entry defaults, save btn
   ------------------------------------------------------- */
.horsepage_owner_section {
  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);
  border-left: 4px solid var(--hp-green);
}

.horsepage_owner_title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--hp-green);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.horsepage_owner_grid {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--hp-gap);
  align-items: end;
}

.horsepage_control_group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.horsepage_control_row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.horsepage_control_label {
  min-width: 90px;
  font-weight: 600;
  font-size: 13px;
}

.horsepage_control_input {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-sm);
  font-size: 13px;
  font-family: var(--hp-font);
}

.horsepage_entry_defaults {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.horsepage_entry_title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 2px;
}

.horsepage_checkbox_row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.horsepage_checkbox_item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  cursor: pointer;
}

.horsepage_checkbox_item input[type="checkbox"] {
  width: 14px;
  height: 14px;
}

.horsepage_save_btn {
  padding: 8px 20px;
  background: var(--hp-green);
  color: white;
  border: none;
  border-radius: var(--hp-radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--hp-font);
  transition: background 0.2s;
  align-self: flex-end;
}

.horsepage_save_btn:hover {
  background: var(--hp-green-dark);
}

/* -------------------------------------------------------
   5. SECTION C: PAST PERFORMANCES (public)
   
   Uses <table> with progressive column hiding via 
   horsepage_hide_XXX utility classes. Expand button reveals
   hidden data on small screens.
   ------------------------------------------------------- */
.horsepage_pps_section {
  background: var(--hp-card-bg);
  border-radius: var(--hp-radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  margin-bottom: var(--hp-gap);
  overflow: hidden;        /* NEVER side scroll */
}

.horsepage_pps_title {
  font-size: 14px;
  font-weight: 700;
  padding: 10px var(--hp-pad);
  border-bottom: 1px solid var(--hp-border);
  color: var(--hp-text);
}

.horsepage_pps_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: auto;     /* Let columns size to content; hide classes handle responsiveness */
}

.horsepage_pps_table thead {
  background: #0c420c !important;
  color: white !important;
  position: sticky;
  top: 0;
  z-index: 10;
}

.horsepage_pps_table th {
  padding: 10px 6px;
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,0.2);
  background: #0c420c !important;
  color: white !important;
}

.horsepage_pps_table th:last-child {
  border-right: none;
}

.horsepage_pps_table td {
  padding: 8px 3px;
  text-align: center;
  border-bottom: 1px solid #e0e0e0;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.horsepage_pps_table tbody tr {
  transition: background 0.15s;
}

.horsepage_pps_table tbody tr:hover {
  filter: brightness(0.96);
}

/* PP row background colors — surface-based striping.
   HTML emits horsepage_pprow_dirt / surf_dirt-mkw etc.
   The old class names (yellow/green/purple) didn't match HTML output.
   Legacy color-name aliases kept at bottom for any old templates. */

/* Dirt fast — light yellow */
.horsepage_pprow_dirt,
.surf_dirt-mkw         { background: #fff9c4 !important; }

/* Dirt off/other — darker yellow */
.horsepage_pprow_dirtoff,
.surf_dirtoff-mkw      { background: #ffe082 !important; }

/* Turf firm — light green */
.horsepage_pprow_turf,
.surf_turf-mkw         { background: #c8e6c9 !important; }

/* Turf off/good/soft — darker green */
.horsepage_pprow_turfoff,
.surf_turfoff-mkw      { background: #81c784 !important; }

/* Turf yielding — peach */
.horsepage_pprow_turfyld,
.surf_turfyld-mkw      { background: #f2d6c1 !important; }

/* Poly — purple */
.horsepage_pprow_poly,
.surf_poly-mkw         { background: #ce93d8 !important; }

/* Poly off — blue */
.horsepage_pprow_polyoff,
.surf_polyoff-mkw      { background: #90caf9 !important; }

/* Legacy color-name aliases (backward compat) */
.horsepage_pprow_yellow     { background: #fff9c4 !important; }
.horsepage_pprow_darkyellow,
.surf_darkyellow-mkw        { background: #ffe082 !important; }
.horsepage_pprow_green,
.surf_green-mkw             { background: #c8e6c9 !important; }
.horsepage_pprow_darkgreen,
.surf_darkgreen-mkw         { background: #81c784 !important; }
.horsepage_pprow_peach,
.surf_peach-mkw             { background: #f2d6c1 !important; }
.horsepage_pprow_purple,
.surf_purple-mkw            { background: #ce93d8 !important; }
.horsepage_pprow_blue,
.surf_blue-mkw              { background: #90caf9 !important; }
.surf_yellow-mkw            { background: #fff9c4 !important; }

/* === PP CELL BADGE COLORS ===
   Individual cells get colored backgrounds for quick visual scanning.
   Applied to <span> elements inside <td>. */

/* Shared badge base styles */
.horsepage_cell_sex_m,
.horsepage_cell_sex_f,
.horsepage_cell_age_2,
.horsepage_cell_age_3,
.horsepage_cell_age_3p,
.horsepage_cell_age_4p,
.horsepage_cell_surf_dfst,
.horsepage_cell_surf_dother,
.horsepage_cell_surf_tfrm,
.horsepage_cell_surf_tyld,
.horsepage_cell_surf_tother,
.horsepage_cell_surf_poly,
.horsepage_cell_rtype_a,
.horsepage_cell_rtype_c,
.horsepage_cell_rtype_mc,
.horsepage_cell_rtype_m,
.horsepage_cell_rtype_s,
.horsepage_cell_rtype_st,
.horsepage_cell_rtype_g1,
.horsepage_cell_rtype_g2,
.horsepage_cell_rtype_g3,
.horsepage_cell_rtype_o {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
  min-width: 18px;
}

/* Sex badges */
.horsepage_cell_sex_m { background: #5b9bd5; color: white; }
.horsepage_cell_sex_f { background: #e57398; color: white; }

/* Age badges */
.horsepage_cell_age_2  { background: #7e57c2; color: white; }
.horsepage_cell_age_3  { background: #26a69a; color: white; }
.horsepage_cell_age_3p { background: #66bb6a; color: #000; }
.horsepage_cell_age_4p { background: #42a5f5; color: white; }

/* Surface/Condition badges */
.horsepage_cell_surf_dfst   { background: #a1887f; color: white; }
.horsepage_cell_surf_dother { background: #6d4c41; color: white; }
.horsepage_cell_surf_tfrm   { background: #81c784; color: #000; }
.horsepage_cell_surf_tyld   { background: #8d6e63; color: white; }
.horsepage_cell_surf_tother { background: #2e7d32; color: white; }
.horsepage_cell_surf_poly   { background: #7e57c2; color: white; }

/* Race Type badges */
.horsepage_cell_rtype_a            { background: #ef5350; color: white; }
.horsepage_cell_rtype_c,
.horsepage_cell_rtype_mc           { background: #8d6e63; color: white; }
.horsepage_cell_rtype_m            { background: #ff7043; color: white; }
.horsepage_cell_rtype_s,
.horsepage_cell_rtype_st           { background: #fdd835; color: #333; }
.horsepage_cell_rtype_g1,
.horsepage_cell_rtype_g2,
.horsepage_cell_rtype_g3           { background: #ab47bc; color: white; }
.horsepage_cell_rtype_o            { background: #26a69a; color: white; }

/* Generic fallbacks (backward compat) */
.horsepage_cell_blue   { background: #5b9bd5; color: white; font-weight: 700; border-radius: 3px; }
.horsepage_cell_green  { background: #66bb6a; color: #000; font-weight: 700; border-radius: 3px; }
.horsepage_cell_teal   { background: #26a69a; color: white; font-weight: 700; border-radius: 3px; }
.horsepage_cell_brown  { background: #8d6e63; color: white; font-weight: 700; border-radius: 3px; }
.horsepage_cell_red    { background: #ef5350; color: white; font-weight: 700; border-radius: 3px; }

/* Superscript in PP cells */
.horsepage_sup {
  font-size: 0.7em;
  vertical-align: super;
  margin-left: 1px;
}

/* PP icons (3D, video, chart) */
.horsepage_pp_icons {
  display: flex;
  gap: 2px;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
}

.horsepage_pp_icon {
  width: 20px;
  height: 20px;
  border: 1px solid #999;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  flex-shrink: 0;
}

.horsepage_pp_icon_3d    { background: linear-gradient(135deg, #4fc3f7 0%, #0288d1 100%); color: white; }
.horsepage_pp_icon_video { background: #666; color: white; }
.horsepage_pp_icon_chart { background: #e0e0e0; color: #333; }

/* Expand/collapse button */
.horsepage_pp_expand_cell {
  width: 40px;
  min-width: 40px;
  padding: 4px !important;
}

.horsepage_pp_expand_btn {
  background: var(--hp-yellow);
  border: none;
  padding: 3px 6px;
  font-weight: 700;
  border-radius: var(--hp-radius-sm);
  cursor: pointer;
  font-size: 11px;
  transition: all 0.2s;
  width: 100%;
}

.horsepage_pp_expand_btn:hover {
  background: #ffcd38;
}

/* Expanded detail row */
.horsepage_pp_detail_row {
  display: none;
  background: #f8f8f0 !important;
}

.horsepage_pp_detail_row.horsepage_show {
  display: table-row;
}

.horsepage_pp_detail_row td {
  padding: 10px 12px !important;
  text-align: left !important;
  border-bottom: 2px solid #ccc;
}

.horsepage_pp_detail_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px;
}

.horsepage_pp_detail_item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px 8px;
  border-left: 3px solid var(--hp-green);
}

.horsepage_pp_detail_label {
  font-weight: 700;
  color: var(--hp-text-muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.horsepage_pp_detail_value {
  font-weight: 600;
  font-size: 13px;
  color: var(--hp-text);
}

/* Color-coded left borders for specific detail cards */
.horsepage_pp_detail_item_track  { border-left-color: #4a90e2; }
.horsepage_pp_detail_item_dist   { border-left-color: #ff9800; }
.horsepage_pp_detail_item_time   { border-left-color: #607d8b; }
.horsepage_pp_detail_item_speed  { border-left-color: #e53935; }
.horsepage_pp_detail_item_odds   { border-left-color: #fdd835; }
.horsepage_pp_detail_item_jockey { border-left-color: #ab47bc; }

/* Detail cards that get FULL colored value badges (matching table cells) */
.horsepage_pp_detail_item_sex    { border-left-color: #5b9bd5; }
.horsepage_pp_detail_item_sex .horsepage_pp_detail_value {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 3px;
  font-size: 12px;
}
.horsepage_pp_detail_item_sex.horsepage_dv_m .horsepage_pp_detail_value {
  background: #5b9bd5; color: white;
}
.horsepage_pp_detail_item_sex.horsepage_dv_f .horsepage_pp_detail_value {
  background: #e57398; color: white;
}

.horsepage_pp_detail_item_age { border-left-color: #26a69a; }
.horsepage_pp_detail_item_age .horsepage_pp_detail_value {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 3px;
  font-size: 12px;
}
.horsepage_pp_detail_item_age.horsepage_dv_2 .horsepage_pp_detail_value   { background: #7e57c2; color: white; }
.horsepage_pp_detail_item_age.horsepage_dv_3 .horsepage_pp_detail_value   { background: #26a69a; color: white; }
.horsepage_pp_detail_item_age.horsepage_dv_3p .horsepage_pp_detail_value  { background: #66bb6a; color: #000; }
.horsepage_pp_detail_item_age.horsepage_dv_4p .horsepage_pp_detail_value  { background: #42a5f5; color: white; }

.horsepage_pp_detail_item_surf { border-left-color: #8d6e63; }
.horsepage_pp_detail_item_surf .horsepage_pp_detail_value {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 3px;
  font-size: 12px;
}
.horsepage_pp_detail_item_surf.horsepage_dv_dfst .horsepage_pp_detail_value   { background: #a1887f; color: white; }
.horsepage_pp_detail_item_surf.horsepage_dv_dother .horsepage_pp_detail_value { background: #6d4c41; color: white; }
.horsepage_pp_detail_item_surf.horsepage_dv_tfrm .horsepage_pp_detail_value   { background: #81c784; color: #000; }
.horsepage_pp_detail_item_surf.horsepage_dv_tyld .horsepage_pp_detail_value   { background: #8d6e63; color: white; }
.horsepage_pp_detail_item_surf.horsepage_dv_tother .horsepage_pp_detail_value { background: #2e7d32; color: white; }
.horsepage_pp_detail_item_surf.horsepage_dv_poly .horsepage_pp_detail_value   { background: #7e57c2; color: white; }

.horsepage_pp_detail_item_rtype { border-left-color: #ef5350; }
.horsepage_pp_detail_item_rtype .horsepage_pp_detail_value {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 3px;
  font-size: 12px;
}
.horsepage_pp_detail_item_rtype.horsepage_dv_a .horsepage_pp_detail_value  { background: #ef5350; color: white; }
.horsepage_pp_detail_item_rtype.horsepage_dv_c .horsepage_pp_detail_value  { background: #8d6e63; color: white; }
.horsepage_pp_detail_item_rtype.horsepage_dv_mc .horsepage_pp_detail_value { background: #8d6e63; color: white; }
.horsepage_pp_detail_item_rtype.horsepage_dv_m .horsepage_pp_detail_value  { background: #ff7043; color: white; }
.horsepage_pp_detail_item_rtype.horsepage_dv_s .horsepage_pp_detail_value  { background: #fdd835; color: #333; }
.horsepage_pp_detail_item_rtype.horsepage_dv_o .horsepage_pp_detail_value  { background: #26a69a; color: white; }
.horsepage_pp_detail_item_rtype.horsepage_dv_g .horsepage_pp_detail_value  { background: #ab47bc; color: white; }

/* -------------------------------------------------------
   6. SECTION D: RACE FINDER / RAFI (logged-in only)
   
   Left panel (filters) + right panel (results).
   Side-by-side at desktop, stacked on mobile.
   ------------------------------------------------------- */
.horsepage_rafi_section {
  background: var(--hp-card-bg);
  border-radius: var(--hp-radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  margin-bottom: var(--hp-gap);
}

.horsepage_rafi_title {
  font-size: 14px;
  font-weight: 700;
  padding: 10px var(--hp-pad);
  border-bottom: 1px solid var(--hp-border);
  color: var(--hp-text);
}

.horsepage_rafi_body {
  display: flex;
  gap: 0;
}

/* RAFI left panel (filters) */
.horsepage_rafi_left {
  min-width: 260px;
  width: 260px;
  background: #e6f3ff;
  border-right: 1px solid var(--hp-border);
  padding: var(--hp-pad-sm);
  flex-shrink: 0;
}

.horsepage_rafi_tabs {
  display: flex;
  margin-bottom: 10px;
  background: #d0e8ff;
  border-radius: 3px;
  overflow: hidden;
}

.horsepage_rafi_tab {
  flex: 1;
  padding: 5px 4px;
  text-align: center;
  font-weight: 700;
  font-size: 11px;
  background: #b8d4f0;
  border: 1px solid #8bb3d9;
  cursor: pointer;
  transition: background 0.2s;
}

.horsepage_rafi_tab:hover {
  background: #a0c4e0;
}

.horsepage_rafi_tab.horsepage_active {
  background: var(--hp-green);
  color: white;
  border-color: var(--hp-green-dark);
}

.horsepage_rafi_panel {
  display: none;
}

.horsepage_rafi_panel.horsepage_active {
  display: block;
}

.horsepage_rafi_panel h4 {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--hp-blue-dark);
}

.horsepage_rafi_section_block {
  margin-bottom: 12px;
}

/* Checkbox groups in RAFI */
.horsepage_rafi_checks {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.horsepage_rafi_checks label {
  display: flex;
  align-items: center;
  font-size: 11px;
  cursor: pointer;
}

.horsepage_rafi_checks input[type="checkbox"] {
  margin-right: 5px;
  width: 13px;
  height: 13px;
}

/* Two-column checkbox layout */
.horsepage_rafi_2col {
  display: flex;
  gap: 10px;
}

.horsepage_rafi_2col .horsepage_rafi_col {
  flex: 1;
  min-width: 0;
}

.horsepage_rafi_col label {
  display: flex;
  align-items: center;
  font-size: 11px;
  margin-bottom: 3px;
  cursor: pointer;
}

/* Select inputs in RAFI */
.horsepage_rafi_select_row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
}

.horsepage_rafi_select_row label {
  font-size: 11px;
  font-weight: 700;
  min-width: 28px;
}

.horsepage_rafi_select_row select {
  flex: 1;
  padding: 2px 4px;
  font-size: 10px;
  border: 1px solid #ccc;
  border-radius: 2px;
}

.horsepage_rafi_select_row span {
  font-size: 10px;
}

/* RAFI buttons */
.horsepage_rafi_buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}

.horsepage_rafi_buttons button {
  padding: 4px 8px;
  font-size: 10px;
  border-radius: 3px;
  border: 1px solid;
  cursor: pointer;
  font-weight: 600;
  font-family: var(--hp-font);
  transition: filter 0.15s;
}

.horsepage_rafi_buttons button:hover {
  filter: brightness(1.1);
}

.horsepage_rafi_btn_save   { background: #28a745; color: white; border-color: #1e7e34; }
.horsepage_rafi_btn_normal { background: #007bff; color: white; border-color: #0056b3; }
.horsepage_rafi_btn_local  { background: #6f42c1; color: white; border-color: #5a32a3; }
.horsepage_rafi_btn_hot    { background: #dc3545; color: white; border-color: #c82333; }

/* RAFI right panel (results) */
.horsepage_rafi_right {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 0;
  overflow: visible;
}

.horsepage_rafi_placeholder {
  color: var(--hp-text-muted);
  font-size: 13px;
  padding: 0;
  text-align: center;
}

/* RAFI results grid header */
/* (horsepage_rafi_results classes removed — template uses .results-header / .results-row) */

.horsepage_rafi_hcell,
.horsepage_rafi_cell {
  padding: 4px 2px;
  text-align: center;
  font-size: 10px;
  border-right: 1px solid rgba(255,255,255,0.15);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.horsepage_rafi_cell {
  font-size: 11px;
  border-right: 1px solid var(--hp-border);
}

/* RAFI result action buttons */
.horsepage_rafi_btn_enter {
  background: #28a745;
  color: white;
  border: 1px solid #1e7e34;
  padding: 2px 6px;
  font-size: 9px;
  border-radius: 2px;
  cursor: pointer;
  min-width: 40px;
  font-family: var(--hp-font);
}

.horsepage_rafi_btn_enter_red {
  background: #a72845;
  color: yellow;
  border: 1px solid #7e1a34;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 700;
  border-radius: 2px;
  cursor: pointer;
  min-width: 40px;
}

.horsepage_rafi_btn_enter_pwd {
  background: #4528a7;
  color: yellow;
  border: 1px solid #341a7e;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 700;
  border-radius: 2px;
  cursor: pointer;
  min-width: 40px;
  font-family: var(--hp-font);
}

/* RAFI detail/expand rows */
.horsepage_rafi_detail_row {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 3px;
  margin: 2px 0;
}

.horsepage_rafi_detail_content {
  padding: 8px 10px;
  font-size: 11px;
}

.horsepage_rafi_detail_item {
  display: inline-block;
  margin-right: 10px;
  font-weight: 700;
}

.horsepage_rafi_detail_value {
  font-weight: 400;
  color: var(--hp-blue);
}

/* -------------------------------------------------------
   7. RESPONSIVE BREAKPOINTS
   
   PP table uses horsepage_hide_XXX utility classes.
   RAFI uses targeted column hiding.
   Top grid reflows at tablet/mobile.
   
   Side menu consideration: actual viewport may be 
   ~220px less than window width.
   ------------------------------------------------------- */

/* --- PP table progressive column visibility ---
   
   STRATEGY: Start with minimal columns, ADD more as space allows.
   This guarantees NO horizontal scroll at any width.
   
   ALWAYS visible: Date, SP#, Fin, Expand (▼) button
   
   Show progressively as viewport widens:
     500px+:  + Track, Race Type
     600px+:  + Surface
     700px+:  + Distance
     800px+:  + C1
     900px+:  + Time
    1000px+:  + Entries (In), PP
    1100px+:  + C2, C3
    1200px+:  + Odds
    1300px+:  + Age, Sex
    1500px+:  + Jockey
    1600px+:  + Icons
*/

/* Hide ALL optional columns by default */
.horsepage_hide_1600,
.horsepage_hide_1500,
.horsepage_hide_1300,
.horsepage_hide_1200,
.horsepage_hide_1100,
.horsepage_hide_1000,
.horsepage_hide_900,
.horsepage_hide_800,
.horsepage_hide_700,
.horsepage_hide_600,
.horsepage_hide_500 { display: none !important; }

/* Progressively SHOW columns as viewport grows.
   Each breakpoint is offset +200px to account for the fixed 200px sidebar,
   so the breakpoint fires when the CONTENT AREA (not viewport) is wide enough.
   e.g. min-width:700px → content area is ~500px, enough for Track/Race cols. */
@media (min-width: 700px)  { .horsepage_hide_500  { display: table-cell !important; } }
@media (min-width: 800px)  { .horsepage_hide_600  { display: table-cell !important; } }
@media (min-width: 900px)  { .horsepage_hide_700  { display: table-cell !important; } }
@media (min-width: 1000px) { .horsepage_hide_800  { display: table-cell !important; } }
@media (min-width: 1100px) { .horsepage_hide_900  { display: table-cell !important; } }
@media (min-width: 1200px) { .horsepage_hide_1000 { display: table-cell !important; } }
@media (min-width: 1300px) { .horsepage_hide_1100 { display: table-cell !important; } }
@media (min-width: 1400px) { .horsepage_hide_1200 { display: table-cell !important; } }
@media (min-width: 1500px) { .horsepage_hide_1300 { display: table-cell !important; } }
@media (min-width: 1700px) { .horsepage_hide_1500 { display: table-cell !important; } }
@media (min-width: 1800px) { .horsepage_hide_1600 { display: table-cell !important; } }

/* Font size scaling */
.horsepage_pps_table { font-size: 11px; }
@media (min-width: 600px)  { .horsepage_pps_table { font-size: 12px; } }
@media (min-width: 900px)  { .horsepage_pps_table { font-size: 13px; } }

/* Tighter padding on small screens */
@media (max-width: 599px) {
  .horsepage_pps_table th,
  .horsepage_pps_table td { padding: 6px 2px; font-size: 10px; }
}
@media (max-width: 399px) {
  .horsepage_pp_detail_grid { grid-template-columns: 1fr 1fr; }
}

/* --- Top grid: 3-col → 2-col → 1-col --- */
@media (max-width: 1100px) {
  .horsepage_top {
    grid-template-columns: 1fr 1fr;
  }
  .horsepage_identity   { grid-column: 1; grid-row: 1; }
  .horsepage_stats_col  { grid-column: 2; grid-row: 1; }
  .horsepage_right_col  { grid-column: 1 / -1; grid-row: 2; }
  
  .horsepage_stat_grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  
  .horsepage_top {
    grid-template-columns: 1fr;
    padding: var(--hp-pad-sm);
  }
  .horsepage_identity   { grid-column: 1; grid-row: 1; }
  .horsepage_right_col  { grid-column: 1; grid-row: 2; }
  .horsepage_stats_col  { grid-column: 1; grid-row: 3; overflow: hidden; }
  
  .horsepage_image_block { flex-direction: column; align-items: center; }
  .horsepage_owner_breeder { width: 100%; }
  
  .horsepage_stat_grid {
    grid-template-columns: 1fr 1fr;
  }
  
  /* Stats table: hide S column first (least important) */
  .horsepage_stats_hide_s { display: none; }
  .horsepage_stats_table { font-size: 12px; }
  .horsepage_stats_table th,
  .horsepage_stats_table td { padding: 4px 4px; }
  
  /* Show expand arrows on stats rows when columns start hiding */
  .horsepage_stats_expand { display: table-cell !important; }
  .horsepage_stats_expand_hdr { display: table-cell !important; }
}

@media (max-width: 480px) {
  /* Stats table: hide P column next */
  .horsepage_stats_hide_p { display: none; }
  .horsepage_stats_table { font-size: 11px; }
  .horsepage_stats_table th,
  .horsepage_stats_table td { padding: 3px 2px; }
}

/* --- Owner section: responsive --- */
@media (max-width: 768px) {
  .horsepage_owner_grid {
    grid-template-columns: 1fr;
  }
  .horsepage_checkbox_row {
    flex-direction: column;
  }
}

/* --- RAFI: side-by-side → stacked --- */
@media (max-width: 900px) {
  .horsepage_rafi_body {
    flex-direction: column;
  }
  .horsepage_rafi_left {
    width: 100%;
    min-width: unset;
    border-right: none;
    border-bottom: 1px solid var(--hp-border);
  }
}

/* ============================================================
   MOBILE: 480px and below
   Everything tightens: fonts, padding, gaps.
   Target: look good at 320px minimum.
   ============================================================ */
@media (max-width: 480px) {
  
  /* Top section — single column, minimal padding */
  .horsepage_top {
    padding: 8px;
    gap: 8px;
  }
  
  /* Horse name — must wrap long names, smaller font */
  .horsepage_horse_name {
    font-size: 16px;
    padding: 8px 6px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    letter-spacing: 0;
  }
  
  /* Description, ID, info lines — compact */
  .horsepage_desc {
    font-size: 12px;
    padding: 5px 6px;
  }
  .horsepage_id_row {
    font-size: 11px;
    padding: 4px 6px;
  }
  .horsepage_info_line {
    font-size: 11px;
    padding: 4px 6px;
  }
  
  /* Horse image — smaller, shrinkable */
  .horsepage_horse_img {
    max-width: 70px;
    width: auto;
  }
  .horsepage_image_block {
    gap: 6px;
  }
  
  /* Pedigree line — smaller, wrap */
  .horsepage_pedigree_line {
    font-size: 11px;
    padding: 5px 6px;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* Stats R/W/P/S/$ table — ultra compact */
  .horsepage_stats_hide_s { display: none; }
  .horsepage_stats_hide_usd { display: none; }
  .horsepage_stats_table { font-size: 10px; }
  .horsepage_stats_table th,
  .horsepage_stats_table td { padding: 3px 2px; }
  .horsepage_stats_table td:first-child { font-size: 10px; }
  
  /* Stat cards — single column, smaller */
  .horsepage_stat_grid {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }
  .horsepage_stat_card {
    padding: 4px 6px;
  }
  .horsepage_stat_card_label {
    font-size: 9px;
  }
  .horsepage_stat_card_value {
    font-size: 13px;
  }
  
  /* Dam section — tighter */
  .horsepage_dam_section {
    padding: 8px;
  }
  .horsepage_dam_name {
    font-size: 14px;
  }
  .horsepage_dam_label {
    font-size: 10px;
  }
  
  /* Owner section — tighter */
  .horsepage_owner_section {
    padding: 8px;
  }
  .horsepage_owner_title {
    font-size: 13px;
    padding: 6px 8px;
  }
  .horsepage_control_label {
    font-size: 11px;
  }
  .horsepage_control_input {
    font-size: 12px;
    padding: 4px;
  }
  
  /* PP table — ultra compact */
  .horsepage_pps_title {
    font-size: 12px;
    padding: 6px 8px;
  }
  .horsepage_pps_table { font-size: 10px; }
  .horsepage_pps_table th { font-size: 9px; padding: 4px 2px; }
  .horsepage_pps_table td { padding: 4px 1px; }
  
  /* PP detail expand cards — smaller grid */
  .horsepage_pp_detail_grid {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }
  .horsepage_pp_detail_item {
    padding: 3px 5px;
  }
  .horsepage_pp_detail_label {
    font-size: 8px;
  }
  .horsepage_pp_detail_value {
    font-size: 11px;
  }
  
  /* PP expand button — smaller */
  .horsepage_pp_expand_cell { width: 28px; min-width: 28px; }
  .horsepage_pp_expand_btn { width: 22px; height: 22px; font-size: 10px; }
  
  /* RAFI — tighter */
  .horsepage_rafi_title {
    font-size: 12px;
    padding: 6px 8px;
  }
}

/* ============================================================
   ULTRA NARROW: 360px and below
   Final squeeze for smallest phones.
   ============================================================ */
@media (max-width: 360px) {
  .horsepage_top { padding: 6px; gap: 6px; }
  
  .horsepage_horse_name { font-size: 14px; padding: 6px 4px; }
  .horsepage_desc { font-size: 11px; padding: 4px; }
  .horsepage_id_row { font-size: 10px; padding: 3px 4px; }
  .horsepage_info_line { font-size: 10px; padding: 3px 4px; }
  
  .horsepage_horse_img { max-width: 50px; width: auto; }
  
  .horsepage_pedigree_line { font-size: 10px; padding: 4px; }
  
  .horsepage_stats_table { font-size: 9px; }
  
  .horsepage_stat_grid { grid-template-columns: 1fr 1fr; gap: 3px; }
  .horsepage_stat_card { padding: 3px 4px; }
  .horsepage_stat_card_label { font-size: 8px; }
  .horsepage_stat_card_value { font-size: 12px; }
  
  .horsepage_dam_name { font-size: 13px; }
  
  .horsepage_pps_table { font-size: 9px; }
  .horsepage_pps_table th { font-size: 8px; padding: 3px 1px; }
  .horsepage_pps_table td { padding: 3px 1px; }
  
  .horsepage_pp_detail_grid { grid-template-columns: 1fr; gap: 3px; }
  .horsepage_pp_detail_value { font-size: 10px; }
  
  .horsepage_pp_expand_cell { width: 24px; min-width: 24px; }
  .horsepage_pp_expand_btn { width: 18px; height: 18px; font-size: 9px; }
}

/* ============================================================
   BACKWARD COMPAT: Old rafi.jinja class names
   
   The RAFI AJAX endpoint may still render the old rafi.jinja 
   which uses .right-section, .results-header, .results-row, 
   .cell, .header-cell. These styles make those work too.
   ============================================================ */

.right-section {
  overflow: hidden;
}

.results-header {
  display: flex;
  width: 100%;
  background: var(--hp-green, #2e8b57);
  color: white;
  font-weight: 700;
  border-radius: 3px;
  margin-bottom: 2px;
  overflow: hidden;
}

.results-row {
  display: flex;
  width: 100%;
  border-bottom: 1px solid #ddd;
  align-items: center;
  overflow: hidden;
}

.header-cell,
.cell {
  flex: 1 1 0;
  min-width: 0;
  padding: 4px 2px;
  text-align: center;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell {
  font-size: 11px;
}


/* PP date: full date shown by default, date_small hidden.
   At narrow widths, swap: hide full date, show date_small (3w/4d). */
.horsepage_pp_date_full { display: inline; }
.horsepage_pp_date_small { display: none; }

@media (max-width: 500px) {
  .horsepage_pp_date_full { display: none !important; }
  .horsepage_pp_date_small { display: inline !important; }
}

/* RAFI progressive column hiding */
@media (max-width: 900px) {
  .trv-col, .epnt-col { display: none; }
}
@media (max-width: 750px) {
  .otp-col, .surf-col { display: none; }
}
@media (max-width: 600px) {
  .sex-col, .age-col { display: none; }
}
@media (max-width: 500px) {
  .trk-col, .details-col { display: none; }
}
@media (max-width: 420px) {
  .cond-col { display: none; }
}

/* Old rafi detail rows */
.details-row {
  background: #f8f9fa;
  border: 1px solid #ddd;
  margin: 2px 0;
  border-radius: 3px;
  overflow: hidden;
}

.details-content {
  padding: 8px 10px;
  font-size: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 6px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px 8px;
  border-left: 3px solid #4a8c5c;
  font-weight: 700;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
  margin-right: 0;
}

.detail-value {
  font-weight: 600;
  font-size: 13px;
  color: #333;
  text-transform: none;
  letter-spacing: normal;
  display: block;
  margin-top: 1px;
}

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

/* Surface-colored detail card borders */
.surf_dfst-detail .detail-item  { border-left-color: #c4a265; }
.surf_dother-detail .detail-item { border-left-color: #8B6914; }
.surf_tfrm-detail .detail-item  { border-left-color: #4caf50; }
.surf_tyld-detail .detail-item  { border-left-color: #2e7d32; }
.surf_tother-detail .detail-item { border-left-color: #1b5e20; }
.surf_poly-detail .detail-item  { border-left-color: #7e57c2; }

/* Color-coded left borders for specific detail card types */
.detail-item-trk   { border-left-color: #4a90e2 !important; }
.detail-item-dist  { border-left-color: #ff9800 !important; }
.detail-item-purse { border-left-color: #fdd835 !important; }
.detail-item-epnt  { border-left-color: #e53935 !important; }
.detail-item-cr    { border-left-color: #607d8b !important; }
.detail-item-name  { border-left-color: #ab47bc !important; }

/* RAFI expand arrow */
.rafi-expand-arrow {
  display: inline-block;
  font-size: 10px;
  color: var(--hp-green, #0c420c);
  transition: transform 0.2s ease;
  cursor: pointer;
}

/* Old rafi button styles */
.btn-enter {
  background: #28a745;
  color: white;
  border: 1px solid #1e7e34;
  padding: 3px 8px;
  font-size: 10px;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 700;
}

.btn-enter-pwd {
  background: #4528a7;
  color: yellow;
  border: 1px solid #341a7e;
  padding: 3px 8px;
  font-size: 10px;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 700;
}

.btn-details {
  background: #6c757d;
  color: white;
  border: none;
  padding: 2px 6px;
  font-size: 10px;
  border-radius: 3px;
  cursor: pointer;
}

/* Old rafi badge classes */
.race-box {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 700;
  font-size: 10px;
  background: #8d6e63;
  color: white;
}

.sex-M-box { display: inline-block; padding: 1px 5px; border-radius: 3px; background: #5b9bd5; color: white; font-weight: 700; font-size: 10px; }
.sex-F-box { display: inline-block; padding: 1px 5px; border-radius: 3px; background: #e57398; color: white; font-weight: 700; font-size: 10px; }
.age-box   { display: inline-block; padding: 1px 5px; border-radius: 3px; background: #42a5f5; color: white; font-weight: 700; font-size: 10px; }

/* Old surf_X-box classes for surface badges in RAFI results */
.surf_yellow-box     { display: inline-block; padding: 1px 5px; border-radius: 3px; background: #a1887f; color: white; font-weight: 700; font-size: 10px; }
.surf_darkyellow-box { display: inline-block; padding: 1px 5px; border-radius: 3px; background: #6d4c41; color: white; font-weight: 700; font-size: 10px; }
.surf_green-box      { display: inline-block; padding: 1px 5px; border-radius: 3px; background: #81c784; color: #000; font-weight: 700; font-size: 10px; }
.surf_darkgreen-box  { display: inline-block; padding: 1px 5px; border-radius: 3px; background: #2e7d32; color: white; font-weight: 700; font-size: 10px; }
.surf_peach-box      { display: inline-block; padding: 1px 5px; border-radius: 3px; background: #8d6e63; color: white; font-weight: 700; font-size: 10px; }
.surf_purple-box     { display: inline-block; padding: 1px 5px; border-radius: 3px; background: #7e57c2; color: white; font-weight: 700; font-size: 10px; }
.surf_blue-box       { display: inline-block; padding: 1px 5px; border-radius: 3px; background: #42a5f5; color: white; font-weight: 700; font-size: 10px; }