/* ============================================================
   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;
  
  /* 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;
  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 {
  display: grid;
  grid-template-columns: 280px 1fr 380px;
  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);
}

.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;
}

/* --- Center column: pedigree line + stats table --- */
.horsepage_stats_col {
  display: flex;
  flex-direction: column;
  gap: var(--hp-gap-sm);
}

.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 tr.horsepage_row_dirt { background: var(--hp-dirt); }
.horsepage_stats_table tr.horsepage_row_turf { background: var(--hp-turf); }
.horsepage_stats_table tr.horsepage_row_poly { background: var(--hp-poly); }

/* --- Right column: dam + stat cards --- */
.horsepage_right_col {
  display: flex;
  flex-direction: column;
  gap: var(--hp-gap-sm);
}

.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: fixed;    /* FORCE columns to stay within container */
}

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

.horsepage_pps_table th {
  padding: 10px 6px;
  text-align: center;
  font-weight: 600;
  font-size: 11px;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,0.1);
}

.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 — based on race_surf_bg from SQL
   calc_fn_race_surf_bg returns surface codes for row striping.
   Also support the surf_X-mkw classes from existing site CSS. */

/* Dirt rows */
.horsepage_pprow_yellow,
.surf_yellow-mkw  { background: #fff9c4 !important; }  /* D-fst: light yellow */
.horsepage_pprow_darkyellow,
.surf_darkyellow-mkw { background: #ffe082 !important; } /* D-other: darker yellow */

/* Turf rows */
.horsepage_pprow_green,
.surf_green-mkw   { background: #c8e6c9 !important; }  /* T-frm: light green */
.horsepage_pprow_darkgreen,
.surf_darkgreen-mkw { background: #81c784 !important; } /* T-gd/sft: dark green */
.horsepage_pprow_peach,
.surf_peach-mkw   { background: #f2d6c1 !important; }  /* T-yld: peach/brown */

/* Poly rows */
.horsepage_pprow_purple,
.surf_purple-mkw  { background: #ce93d8 !important; }  /* Poly: purple */
.horsepage_pprow_blue,
.surf_blue-mkw    { background: #90caf9 !important; }  /* Poly alt: blue */

/* === 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;
  padding: var(--hp-pad-sm);
  overflow: hidden;
}

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

/* RAFI results grid header */
.horsepage_rafi_results_header {
  display: grid;
  grid-template-columns: 
    minmax(30px,1fr) minmax(30px,1fr) minmax(35px,1fr) minmax(35px,1fr) 
    minmax(25px,0.7fr) minmax(30px,0.8fr) minmax(25px,0.7fr) minmax(30px,1fr) 
    minmax(40px,1fr) minmax(25px,0.7fr) minmax(40px,1fr) 
    minmax(20px,0.5fr) minmax(20px,0.5fr) minmax(50px,1.5fr);
  background: var(--hp-green);
  color: white;
  font-weight: 700;
  border-radius: 3px;
  margin-bottom: 2px;
  overflow: hidden;
}

.horsepage_rafi_results_row {
  display: grid;
  grid-template-columns: 
    minmax(30px,1fr) minmax(30px,1fr) minmax(35px,1fr) minmax(35px,1fr) 
    minmax(25px,0.7fr) minmax(30px,0.8fr) minmax(25px,0.7fr) minmax(30px,1fr) 
    minmax(40px,1fr) minmax(25px,0.7fr) minmax(40px,1fr) 
    minmax(20px,0.5fr) minmax(20px,0.5fr) minmax(50px,1.5fr);
  border-bottom: 1px solid var(--hp-border);
  align-items: center;
  overflow: hidden;
}

.horsepage_rafi_results_row:nth-child(even) {
  background: #f9f9f9;
}

.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 */
@media (min-width: 500px)  { .horsepage_hide_500  { display: table-cell !important; } }
@media (min-width: 600px)  { .horsepage_hide_600  { display: table-cell !important; } }
@media (min-width: 700px)  { .horsepage_hide_700  { display: table-cell !important; } }
@media (min-width: 800px)  { .horsepage_hide_800  { display: table-cell !important; } }
@media (min-width: 900px)  { .horsepage_hide_900  { display: table-cell !important; } }
@media (min-width: 1000px) { .horsepage_hide_1000 { display: table-cell !important; } }
@media (min-width: 1100px) { .horsepage_hide_1100 { display: table-cell !important; } }
@media (min-width: 1200px) { .horsepage_hide_1200 { display: table-cell !important; } }
@media (min-width: 1300px) { .horsepage_hide_1300 { display: table-cell !important; } }
@media (min-width: 1500px) { .horsepage_hide_1500 { display: table-cell !important; } }
@media (min-width: 1600px) { .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, tighten up */
  .horsepage_stats_hide_s { display: none; }
  .horsepage_stats_table { font-size: 12px; }
  .horsepage_stats_table th,
  .horsepage_stats_table td { padding: 4px 4px; }
}

@media (max-width: 480px) {
  /* Stats table: hide $ column too at very narrow */
  .horsepage_stats_hide_usd { 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);
  }
}

/* --- RAFI results: progressive column hiding --- 
   Hide columns via display:none; grid handles the remaining space automatically */
@media (max-width: 1200px) {
  .horsepage_rafi_purse_col { display: none; }
}

@media (max-width: 1100px) {
  .horsepage_rafi_trv_col { display: none; }
}

@media (max-width: 1000px) {
  .horsepage_rafi_surf_col { display: none; }
  .horsepage_rafi_age_col  { display: none; }
}

@media (max-width: 800px) {
  .horsepage_rafi_trk_col { display: none; }
  .horsepage_rafi_sex_col { display: none; }
  .horsepage_rafi_epnt_col { display: none; }
}

@media (max-width: 600px) {
  .horsepage_rafi_cond_col { display: none; }
  .horsepage_rafi_otp_col  { display: none; }
  .horsepage_rafi_cr_col   { display: none; }
}

/* ============================================================
   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: grid;
  grid-template-columns: 
    minmax(30px,1fr) minmax(30px,1fr) minmax(35px,1fr) minmax(35px,1fr) 
    minmax(25px,0.7fr) minmax(30px,0.8fr) minmax(25px,0.7fr) minmax(30px,1fr) 
    minmax(40px,1fr) minmax(25px,0.7fr) minmax(40px,1fr) 
    minmax(20px,0.5fr) minmax(20px,0.5fr) minmax(50px,1.5fr);
  background: var(--hp-green, #2e8b57);
  color: white;
  font-weight: 700;
  border-radius: 3px;
  margin-bottom: 2px;
  overflow: hidden;
}

.results-row {
  display: grid;
  grid-template-columns: 
    minmax(30px,1fr) minmax(30px,1fr) minmax(35px,1fr) minmax(35px,1fr) 
    minmax(25px,0.7fr) minmax(30px,0.8fr) minmax(25px,0.7fr) minmax(30px,1fr) 
    minmax(40px,1fr) minmax(25px,0.7fr) minmax(40px,1fr) 
    minmax(20px,0.5fr) minmax(20px,0.5fr) minmax(50px,1.5fr);
  border-bottom: 1px solid #ddd;
  align-items: center;
  overflow: hidden;
}

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

.cell {
  font-size: 11px;
}

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

.details-content {
  padding: 8px 10px;
  font-size: 11px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

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

.detail-value {
  font-weight: 400;
  color: var(--hp-blue, #4a90e2);
}

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