/*
 * Copyright (c) Mere Digital Limited 2026. All rights reserved.
 *
 * betturtle-base.css
 * - Consolidated (removed duplicated blocks)
 * - Mobile-first form toggle button
 * - Saddle/Draw layout helpers
 * - DataTables density + sort icon handling
 * - Caret rotation driven by .is-open class (Bootstrap collapse events)
 */

/* -------------------------------------------------
   Mobile scroll performance — prevent Safari tile drops
   ------------------------------------------------- */

/* Navbar: sticky positioning is from Hyper theme (app.min.css).
   Tested: NOT the cause of Safari blank flash — was stale cache. */

/* -------------------------------------------------
   Misc / global tweaks
   ------------------------------------------------- */

.card-pricing-recommended .card-pricing-plan-tag {
  background-color: rgba(16, 196, 105, 0.2);
  color: #10c469;
}

.popover {
  max-width: none;
  font-weight: normal;
  font-size: 0.92rem;
}

/* Popover tables and content - use body font size */
.popover .table,
.popover .table th,
.popover .table td,
.popover .small,
.popover .table-sm,
.popover .table-sm th,
.popover .table-sm td {
  font-size: 0.92rem !important;
}

/* Hide Compact button in popovers */
.popover .btn-compact-toggle {
  display: none !important;
}

/* -------------------------------------------------
   CSS-only tooltips for use inside popovers
   Avoids Bootstrap tooltip JS conflicts
   Usage: <span class="bt-tip" data-bt-tip="Tooltip text">Content</span>
   ------------------------------------------------- */
.bt-tip {
  position: relative;
  cursor: help;
  -webkit-user-select: none;
  user-select: none;
}

.bt-tip::after {
  content: attr(data-bt-tip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  padding: 6px 10px;
  background: #313a46;
  color: #fff;
  font-family: var(--ct-font-sans-serif);
  font-size: 0.8125rem;
  font-weight: normal;
  line-height: 1.4;
  white-space: nowrap;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
  z-index: 1080;
  pointer-events: none;
}

/* Dark mode: invert tooltip colors for contrast */
html[data-bs-theme="dark"] .bt-tip::after {
  background: #e9ecef;
  color: #313a46;
}

.bt-tip:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Allow multi-line tooltips with max-width */
.bt-tip-wrap::after {
  white-space: normal;
  max-width: 400px;
  text-align: left;
}

/* Tooltip below: use inside overflow:auto containers (popovers, modals)
   where the default upward ::after gets clipped */
.bt-tip-below .bt-tip::after {
  bottom: auto;
  top: 100%;
  transform: translateX(-50%) translateY(4px);
}

/* Navbar icon links with labels underneath */
.bt-nav-icon-link {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  position: relative;
  top: -8px;
}

/* Menu toggle - larger icon adjustment */
/* Bootstrap gives `.navbar-toggler` its own grey, so the one control in this bar that opens
   the whole menu was the only one not taking the bar's ink: 4.09:1 against its neighbours'
   14.16:1, and the first thing a phone reader looks for. Its neighbours are <a> and take a
   link colour; this is a <button> and never did, so `inherit` only picked the same grey up
   from its parent. The theme's ink, falling back to the body colour where the turtle tokens
   are not defined -- so it is right in the classic shell and in both themes. */
.navbar-toggler.bt-nav-icon-link {
  margin-left: -200%;
  font-weight: bold;
  color: var(--fc-ink, var(--bs-body-color, #212529));
}

.navbar-toggler.bt-nav-icon-link i {
  position: relative;
  top: -10px;
  font-weight: bold;
}

.navbar-toggler.bt-nav-icon-link .bt-nav-label {
  margin-top: 4px;
  font-weight: bold;
}

.bt-nav-label {
  font-size: 0.65rem;
  line-height: 1;
  margin-top: 2px;
}

/* Align topbar containers at bottom on mobile */
@media (max-width: 991.98px) {
  .topbar {
    align-items: flex-end !important;
  }
  .topbar-menu {
    align-items: flex-end !important;
  }
}

/* Race Analysis - larger text */
[id^="raceAnalysisContent"] {
  font-size: 0.95rem;
  line-height: 1.5;
}

html[data-layout="topnav"] .container,
html[data-layout="topnav"] .container-lg,
html[data-layout="topnav"] .container-md,
html[data-layout="topnav"] .container-sm,
html[data-layout="topnav"] .container-xl,
html[data-layout="topnav"] .container-xxl,
html[data-layout="topnav"] .container-fluid {
  max-width: 100% !important;
}

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

.logo-topbar .logo-lg {
  height: 75px;
}

.logo-topbar .logo-sm {
  height: 50px;
}

.logo-topbar img.logo-img {
  height: 100%;
  width: auto;
}

/* Keeps vertical metrics, removes horizontal space */
.bt-icon-ghost {
  display: inline-block;
  width: 0 !important;
  overflow: hidden;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none;
  line-height: inherit;
  font-size: inherit;
  vertical-align: middle;
}

/* -------------------------------------------------
   Logo: swap light / dark SVG based on theme
   ------------------------------------------------- */
.bt-logo-dark  { display: none !important; }
html[data-bs-theme="dark"] .bt-logo-light { display: none !important; }
@media (min-width: 992px) {
    html[data-bs-theme="dark"] .bt-logo-dark  { display: inline-block !important; }
}

/* -------------------------------------------------
   Typography (Inter, compact)
   Override Hyper's Nunito default with Inter
   ------------------------------------------------- */

:root {
  --ct-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ct-body-font-family: var(--ct-font-sans-serif);
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 420 !important;
  line-height: 1.48 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 650 !important;
  letter-spacing: -0.008em;
}

.text-muted,
.text-body-secondary {
  opacity: 1;
}

.table,
table {
  font-weight: 460;
}

.price,
.odds,
.stat,
.number {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.navbar,
.nav-link {
  font-weight: 520;
}

/* -------------------------------------------------
   Mobile: Larger body font (15% increase) and navbar icons (25% increase)
   ------------------------------------------------- */
@media (max-width: 767.98px) {
  body {
    font-size: 1.15rem;
  }

  /* Add horizontal margin to race card */
  .card,
  #cardtop {
    margin-left: 1px;
    margin-right: 1px;
  }

  /* Prevent stats collapse content from bleeding outside container */
  .bt-stats-collapse-content {
    overflow-x: scroll;
    /* removed: -webkit-overflow-scrolling is default since iOS 13, extra layers hurt perf */
    max-width: calc(100vw - 32px);
    width: 100%;
    padding-left: 24px;
    margin-left: 8px;
  }

  /* Constrain all parent elements */
  [id^="hide"] {
    overflow-x: hidden;
    max-width: 100%;
  }

  [id^="liked-"] {
    overflow-x: hidden;
    max-width: 100%;
  }

  .bt-stats-collapse-content table {
    font-size: 0.8rem;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .topbar-menu .nav-link i,
  .topbar-menu .nav-link .mdi,
  .topbar-menu .nav-link .fas,
  .topbar-menu .nav-link .fa,
  .navbar-custom .button-toggle-menu i,
  .navbar-custom .navbar-toggle .lines {
    font-size: 1.5rem;
  }

  /* Hamburger menu lines */
  .navbar-custom .navbar-toggle .lines span {
    height: 2.5px;
    width: 22px;
  }
}

/* -------------------------------------------------
   WCAG: Links in body text must be distinguishable by more than colour alone
   Underline links inside content areas (excludes navbars, buttons, badges).
   .btn-link is a button drawn as a link — popover and toggle triggers carry it,
   so it is excluded alongside .btn.
   ------------------------------------------------- */
.content a:not(.btn):not(.btn-link):not(.nav-link):not(.badge):not(.dropdown-item):not(.social-list-item):not(.topnav-logo):not([class*="text-decoration-none"]) {
  text-decoration: underline;
}

/* Pure icon anchor links — suppress underline so it doesn't render as trailing _.
   :has() targets any <a> whose only child is a FA <i> (no visible text).
   Named classes cover known patterns for older browser fallback. */
.content a:has(> i:only-child),
.bt-stats-icon,
.bt-mobile-action,
.bt-share-button {
  text-decoration: none !important;
}

/* -------------------------------------------------
   Semantic colours
   Light mode: Use framework defaults with subtle emphasis
   Dark mode: Override for contrast on dark backgrounds
   ------------------------------------------------- */

.text-warning,
.text-danger,
.text-success {
  font-weight: 535;
}

/* Light mode semantic overrides - deeper than Hyper defaults for readability */
html .text-warning { color: #eda000 !important; }  /* Rich amber */
html .text-danger  { color: #e02858 !important; }  /* Cool crimson: 4.6:1 PASS AA */
html .text-success { color: #048560 !important; }  /* Deep emerald: 4.6:1 PASS AA */

/* Light mode: darken text-muted from #6c757d (4.17:1) to pass WCAG AA 4.5:1 */
html .text-muted { color: #5f666d !important; }  /* 4.9:1 on white - PASS AA */

/* Light mode: darken btn-success from Hyper's #0acf97 (2.02:1) to pass WCAG AA */
html .btn-success {
  background-color: #146c43 !important;  /* White text 5.5:1 - PASS AA */
  border-color: #146c43 !important;
}
html .btn-success:hover {
  background-color: #115c39 !important;
  border-color: #115c39 !important;
}
html .badge.bg-success {
  background-color: #146c43 !important;  /* Match btn-success for AA compliance */
}

/* Saddle/cloth number: neutral dark for both modes */
.bt-saddle {
  color: #333333;
}

/* "Other ways to access" section background */
.bt-other-access {
  background: linear-gradient(135deg, #f0f4ff 0%, #f5f0ff 100%);
}
html[data-bs-theme="dark"] .bt-other-access {
  background: linear-gradient(135deg, #1a1d2e 0%, #1e1a2e 100%);
}

/* Dark mode semantic overrides */
html[data-bs-theme="dark"] .bt-saddle {
  color: #E8E8E8;
}

html[data-bs-theme="dark"] body {
  font-weight: 420;
}

html[data-bs-theme="dark"] .alert-success {
  color: #bbf7d0;
}

html[data-bs-theme="dark"] .alert-warning {
  color: #fde68a;
}

html[data-bs-theme="dark"] .alert-danger {
  color: #fecaca;
}

/* Dark mode semantic text colors - lighter for dark backgrounds */
html[data-bs-theme="dark"] .text-danger {
  color: #f87171 !important;  /* Lighter red for dark mode */
}

html[data-bs-theme="dark"] .text-warning {
  color: #fbbf24 !important;  /* Lighter amber for dark mode */
}

html[data-bs-theme="dark"] .text-success {
  color: #4ade80 !important;  /* Lighter green for dark mode */
}

/* Dark mode: revert btn-success to Hyper theme default (light mode override above) */
html[data-bs-theme="dark"] .btn-success {
  background-color: #0acf97 !important;
  border-color: #0acf97 !important;
}
html[data-bs-theme="dark"] .btn-success:hover {
  background-color: #09b886 !important;
  border-color: #09b886 !important;
}

/* -------------------------------------------------
   Dark mode text contrast improvements
   Addresses customer feedback: "Blue text VERY difficult to read"
   Target: WCAG AA 4.5:1 contrast ratio
   ------------------------------------------------- */

html[data-bs-theme="dark"] {
  --ct-body-color: #E8E8E8;
  --ct-heading-color: #F5F5F5;
  --ct-link-color: #93c5fd;
  --ct-link-hover-color: #bfdbfe;
  --ct-text-muted: #9ca3af;
}

html[data-bs-theme="dark"] body {
  color: #E8E8E8;
}

html[data-bs-theme="dark"] h1,
html[data-bs-theme="dark"] h2,
html[data-bs-theme="dark"] h3,
html[data-bs-theme="dark"] h4,
html[data-bs-theme="dark"] h5,
html[data-bs-theme="dark"] h6 {
  color: #F5F5F5;
}

/* Links - lighter blue for better contrast */
html[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item) {
  color: #93c5fd;
}

html[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
  color: #bfdbfe;
}

/* Table text */
html[data-bs-theme="dark"] .table,
html[data-bs-theme="dark"] table {
  color: #E8E8E8;
}

html[data-bs-theme="dark"] .table thead th,
html[data-bs-theme="dark"] table thead th {
  color: #F5F5F5;
}

/* Muted text - ensure readable.

   #9ca3af did not: measured against the dark grounds it actually sits on it ran 3.27-4.15:1,
   under AA on every one, and this is not decoration -- it carries prize money and class on the
   race card, the day-pass description on the pricing page and the tips disclaimer. The comment
   claimed the outcome rather than the value delivering it.

   #bcc4cf is the lightest value that clears 4.5:1 on ALL FIVE grounds in use (4.72 on the
   palest, 7.17 on the darkest), so it stays quieter than the body ink at #E8E8E8 and is
   legible everywhere rather than in the places somebody happened to look. */
html[data-bs-theme="dark"] .text-muted,
html[data-bs-theme="dark"] .text-body-secondary {
  color: #bcc4cf !important;
}

/* Card text */
html[data-bs-theme="dark"] .card {
  color: #E8E8E8;
}

html[data-bs-theme="dark"] .card-header {
  color: #F5F5F5;
}

/* -------------------------------------------------
   DataTables (Bootstrap feel, dense)
   ------------------------------------------------- */

/* Kill legacy v1 arrows (v2 uses .dt-column-order) */
table.dataTable thead > tr > th.sorting::before,
table.dataTable thead > tr > th.sorting::after,
table.dataTable thead > tr > th.sorting_asc::before,
table.dataTable thead > tr > th.sorting_asc::after,
table.dataTable thead > tr > th.sorting_desc::before,
table.dataTable thead > tr > th.sorting_desc::after,
table.dataTable thead > tr > th.sorting_asc_disabled::before,
table.dataTable thead > tr > th.sorting_asc_disabled::after,
table.dataTable thead > tr > th.sorting_desc_disabled::before,
table.dataTable thead > tr > th.sorting_desc_disabled::after {
  content: none !important;
  display: none !important;
}

/* Table padding - balanced for readability */
table.dataTable thead th,
table.dataTable tbody td {
  padding: 0.26rem 0.38rem !important;
  white-space: nowrap;
}

/* Header text tighter */
table.dataTable thead th {
  font-size: 0.78rem !important;
  line-height: 1 !important;
  position: relative;
  padding-right: 0.55rem !important; /* reserve minimal overlay room */
}

/* Header wrapper compact */
table.dataTable thead th .dt-column-header {
  display: inline-flex;
  align-items: center;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto;
  max-width: 100%;
}

/* Truncate titles rather than widen */
table.dataTable thead th .dt-column-title {
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Overlay sort control so it doesn't widen columns */
table.dataTable thead th .dt-column-order {
  width: 6px !important;
  min-width: 6px !important;
  position: absolute;
  right: 1px !important;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 120ms ease-in-out;
}

table.dataTable thead th:hover .dt-column-order,
table.dataTable thead th[aria-sort] .dt-column-order {
  opacity: 0.9;
}

table.dataTable {
  letter-spacing: -0.01em;
}

table.dataTable td,
table.dataTable th {
  font-variant-numeric: tabular-nums;
}

/* Compact DT controls (if shown) */
div.dt-container .dt-search input,
div.dt-container .dt-length select {
  padding: 0.12rem 0.28rem !important;
  font-size: 0.82em !important;
  line-height: 1.1 !important;
}

/* DataTables: prevent sorting when clicking grouped header row (colspan headings) */
table.dataTable thead tr.bt-dt-grouphead th {
  pointer-events: none;
  cursor: default;
  user-select: none;
}

/* Hide DataTables sort UI on grouped header row */
#briefcard thead tr.bt-dt-grouphead th .dt-column-order,
#briefcard thead tr.bt-dt-grouphead th::before,
#briefcard thead tr.bt-dt-grouphead th::after {
  display: none !important;
  content: none !important;
}

#briefcard thead tr.bt-dt-grouphead th {
  font-weight: 600;
  letter-spacing: 0.02em;
  background: transparent;
}

/* Hide DataTables search UI for briefcard (DT v1 + v2) */
#briefcard_wrapper .dataTables_filter,
#briefcard_wrapper .dt-search,
#briefcard_wrapper div.dt-search,
#briefcard_wrapper .dataTables_length,
#briefcard_wrapper .dt-length {
  display: none !important;
}

/* -------------------------------------------------
   Mobile table compression
   ------------------------------------------------- */

@media (max-width: 575.98px) {
  /* Tighter padding on tables - use lower specificity to not break responsive utilities */
  .table:not(.table-responsive) th,
  .table:not(.table-responsive) td {
    padding: 0.15rem 0.2rem;
    font-size: 0.85rem;
  }

  /* Even tighter for table-sm */
  .table-sm th,
  .table-sm td {
    padding: 0.1rem 0.15rem;
    font-size: 0.8rem;
  }

  /* Popover tables - keep body font size on mobile */
  .popover .table th,
  .popover .table td {
    padding: 0.2rem 0.3rem;
    font-size: 0.92rem !important;
  }

  /* Compact flex gaps in popovers */
  .popover .d-flex.gap-2 {
    gap: 0.35rem !important;
  }

  /* Popover badges - keep body font size */
  .popover .badge {
    padding: 0.25rem 0.4rem;
    font-size: 0.92rem !important;
  }

  /* DataTables mobile compression */
  table.dataTable thead th,
  table.dataTable tbody td {
    padding: 0.12rem 0.18rem !important;
    font-size: 0.75rem;
  }

  table.dataTable thead th {
    font-size: 0.7rem !important;
    padding-right: 0.4rem !important;
  }

  /* DataTables wrapper - remove extra spacing */
  .dataTables_wrapper,
  div.dt-container {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* DataTables info text */
  .dataTables_info,
  div.dt-info {
    font-size: 0.68rem;
    padding: 0.2rem 0 !important;
  }

  /* DataTables pagination */
  .dataTables_paginate,
  div.dt-paging {
    font-size: 0.68rem;
    padding: 0.2rem 0 !important;
  }

  .dataTables_paginate .paginate_button,
  div.dt-paging .dt-paging-button {
    padding: 0.15rem 0.35rem !important;
    font-size: 0.68rem;
    min-width: 0 !important;
  }

  /* DataTables length selector */
  .dataTables_length,
  div.dt-length {
    font-size: 0.7rem;
  }

  .dataTables_length select,
  div.dt-length select {
    padding: 0.1rem 0.2rem;
    font-size: 0.7rem;
  }

  /* DataTables search */
  .dataTables_filter,
  div.dt-search {
    font-size: 0.7rem;
  }

  .dataTables_filter input,
  div.dt-search input {
    padding: 0.15rem 0.3rem;
    font-size: 0.7rem;
  }

  /* Collapse panel DataTables - extra tight */
  .collapse table.dataTable thead th,
  .collapse table.dataTable tbody td {
    padding: 0.1rem 0.15rem !important;
    font-size: 0.72rem;
  }

  /* DataTables header sort icon - smaller on mobile */
  table.dataTable thead th .dt-column-order {
    width: 5px !important;
    min-width: 5px !important;
  }
}

/* -------------------------------------------------
   DataTables Compact Mode Toggle
   ------------------------------------------------- */

/* Compact mode via wrapper class (toggle button) */
.dt-compact table thead th,
.dt-compact table tbody td {
  padding: 0.1rem 0.15rem !important;
  font-size: 0.72rem;
}

.dt-compact table thead th {
  font-size: 0.68rem !important;
}

.dt-compact .dataTables_info,
.dt-compact div.dt-info {
  font-size: 0.65rem;
}

.dt-compact .dataTables_paginate,
.dt-compact div.dt-paging {
  font-size: 0.65rem;
}

/* Compact mode via body class (user preference) */
body.bt-compact-stats [id^="trainerstats-"] table thead th,
body.bt-compact-stats [id^="trainerstats-"] table tbody td,
body.bt-compact-stats [id^="jockeystats-"] table thead th,
body.bt-compact-stats [id^="jockeystats-"] table tbody td,
body.bt-compact-stats [id^="sirestats-"] table thead th,
body.bt-compact-stats [id^="sirestats-"] table tbody td,
body.bt-compact-stats [id^="ownerstats-"] table thead th,
body.bt-compact-stats [id^="ownerstats-"] table tbody td,
body.bt-compact-stats [id^="infohorsestats-"] thead th,
body.bt-compact-stats [id^="infohorsestats-"] tbody td,
body.bt-compact-stats [id^="summarybrief-"] table thead th,
body.bt-compact-stats [id^="summarybrief-"] table tbody td {
  padding: 0.1rem 0.15rem !important;
  font-size: 0.72rem;
}

body.bt-compact-stats [id^="trainerstats-"] table thead th,
body.bt-compact-stats [id^="jockeystats-"] table thead th,
body.bt-compact-stats [id^="sirestats-"] table thead th,
body.bt-compact-stats [id^="ownerstats-"] table thead th,
body.bt-compact-stats [id^="infohorsestats-"] thead th,
body.bt-compact-stats [id^="summarybrief-"] table thead th {
  font-size: 0.68rem !important;
}

/* Compact mode for pointer tables */
body.bt-compact-stats table#pointers thead th,
body.bt-compact-stats table#pointers tbody td,
body.bt-compact-stats table#customertips thead th,
body.bt-compact-stats table#customertips tbody td,
body.bt-compact-stats table.bt-pointer-table thead th,
body.bt-compact-stats table.bt-pointer-table tbody td {
  padding: 0.1rem 0.15rem !important;
  font-size: 0.72rem;
}

body.bt-compact-stats table#pointers thead th,
body.bt-compact-stats table#customertips thead th,
body.bt-compact-stats table.bt-pointer-table thead th {
  font-size: 0.68rem !important;
}

/* Compact toggle button - active state */
.btn-compact-toggle.active,
.btn-compact-toggle.active:hover,
.btn-compact-toggle.active:focus {
  background-color: var(--ct-primary, #727cf5) !important;
  border-color: var(--ct-primary, #727cf5) !important;
  color: #fff !important;
}

/* -------------------------------------------------
   Contain HTMX-injected content
   ------------------------------------------------- */

.collapse .card-body {
  max-width: 100%;
  overflow-x: auto;
}

.collapse .card-body .table,
.collapse .card-body table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

/*!* Hidden / binned runners *!*/
/* Hidden runners in Summary Stats table — greyed out at bottom */
tr.is-hidden {
    opacity: 0.35;
}

/* Prevent popovers & accidental clicks on hidden rows */
tr.is-hidden td {
    pointer-events: none;
}

/* BUT allow the hide/unhide control itself */
tr.is-hidden .hide,
tr.is-hidden .hide * {
    pointer-events: auto;
}

/* -------------------------------------------------
   Saddle + Draw layout (racecards)
   ------------------------------------------------- */

/* Saddle (main number) */
.bt-saddle {
  font-size: 1.15rem;
  font-weight: 700;
}

/* -------------------------------------------------
   FORM toggle button (mobile-first)
   ------------------------------------------------- */

.btn-form-toggle {
  font-size: 0.85rem;
  padding: 0.15rem 0.45rem;
  margin-bottom: 0.50rem;
  line-height: 1.1;
}

.btn-form-toggle .spinner-border {
  width: 0.6rem;
  height: 0.6rem;
  border-width: 0.1em;
}

.btn-form-toggle .bt-caret,
.btn-form-toggle svg.bt-caret {
  margin-left: 0.25rem;
}

/* WCAG 2.5.8: Minimum 44px touch targets for small buttons on mobile */
@media (max-width: 767.98px) {
  .btn-sm {
    min-height: 2.75rem;  /* 44px */
    min-width: 2.75rem;
  }
}

@media (max-width: 767.98px) {
  .btn-form-toggle {
    padding: 0.3rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
  }

  .btn-form-toggle .spinner-border {
    width: 0.75rem;
    height: 0.75rem;
  }
}

/* -------------------------------------------------
   Caret rotation (Bootstrap collapse driven)
   Works even if FontAwesome replaces <i> with <svg>
   ------------------------------------------------- */

/* Wrap caret so we can rotate both <i> and/or <svg> reliably */
.bt-toggle .bt-caret-wrap {
  display: inline-flex;
  align-items: center;
}

/* Target either the <i> or a generated svg inside the wrap */
.bt-toggle .bt-caret-wrap .bt-caret,
.bt-toggle .bt-caret-wrap svg {
  display: inline-block;
  transition: transform 140ms ease-in-out;
  transform-origin: 50% 50%;
}

.bt-toggle.is-open .bt-caret-wrap .bt-caret,
.bt-toggle.is-open .bt-caret-wrap svg {
  transform: rotate(180deg);
}

/* All Horses button: fill blue when toggled on mobile */
@media (max-width: 991.98px) {
  #showallhorses.is-open {
    background-color: #0dcaf0 !important;
    border-color: #0dcaf0 !important;
    color: #fff !important;
  }

  /* Hide carets on all action bar buttons on mobile */
  .bt-action-btn .bt-caret-wrap {
    display: none !important;
  }
}

/* Adding some colour improvements */
/* Improve popover definition */
.popover {
  border: 1px solid rgba(84, 110, 229, 0.35);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.popover[data-popper-placement^="top"] > .popover-arrow::before,
.popover[data-popper-placement^="bottom"] > .popover-arrow::before,
.popover[data-popper-placement^="left"] > .popover-arrow::before,
.popover[data-popper-placement^="right"] > .popover-arrow::before {
  border-color: rgba(84, 110, 229, 0.35);
}

.card {
  border: 1px solid rgba(84, 110, 229, 0.18);
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease;
}

.card-header {
  border-bottom: 1px solid rgba(84, 110, 229, 0.2);
  font-weight: 600;
}

.card-footer {
  border-top: 1px solid rgba(84, 110, 229, 0.15);
}

.card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
}

/* -------------------------------------------------
   DataTables Column Visibility Dropdown
   ------------------------------------------------- */

/* Keep DataTables buttons inline and equal width */
.dt-buttons {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  gap: 0.5rem;
  width: auto !important;
}

/* Ensure consistent styling for all DataTables buttons */
.dt-buttons .dt-button {
  font-size: 0.875rem !important;
  padding: 0.25rem 0.5rem !important;
  line-height: 1.5 !important;
  flex: 0 0 auto !important;
  width: auto !important;
}

/* Smaller buttons on mobile */
@media (max-width: 767.98px) {
  .dt-buttons .dt-button {
    font-size: 0.5rem !important;
    padding: 0.1rem 0.2rem !important;
  }
}

/* Ensure dropdown doesn't extend off-screen to the right */
.dt-button-collection {
  position: absolute !important;
  left: auto !important;
  right: auto !important;
}

/* Keep dropdown positioned near button but ensure it's visible */
.dt-buttons .dt-button-collection {
  max-height: 400px;
  overflow-y: auto;
}

/* Make sure dropdown appears below button and is scrollable if needed */
div.dt-button-collection {
  width: auto !important;
  max-width: 300px;
}

/* -------------------------------------------------
   Popover content - force readable text in dark mode
   ------------------------------------------------- */

html[data-bs-theme="dark"] .popover .bg-white {
  color: #495057 !important;
}

html[data-bs-theme="dark"] .popover .bg-white .table {
  --bs-table-color: #495057;
}

html[data-bs-theme="dark"] .popover .bg-white .table th,
html[data-bs-theme="dark"] .popover .bg-white .table td {
  color: #495057 !important;
}

/* Preserve semantic colors in popovers - must override td color */
html[data-bs-theme="dark"] .popover .bg-white td.text-success,
html[data-bs-theme="dark"] .popover .bg-white .table td.text-success {
  color: #198754 !important;
}

html[data-bs-theme="dark"] .popover .bg-white td.text-danger,
html[data-bs-theme="dark"] .popover .bg-white .table td.text-danger {
  color: #dc3545 !important;
}

html[data-bs-theme="dark"] .popover .bg-white td.text-warning,
html[data-bs-theme="dark"] .popover .bg-white .table td.text-warning {
  color: #fd7e14 !important;
}

/* Popover header (title) - ensure readable text in dark mode */
html[data-bs-theme="dark"] .popover-header {
  --ct-popover-header-color: #e9ecef !important;
  color: #e9ecef !important;
}

/* Wider Bootstrap tooltips for race comments */
.tooltip-inner {
  --ct-tooltip-max-width: 400px !important;
  max-width: 400px !important;
  text-align: left !important;
}

/* -------------------------------------------------
   Stats toggle button (lazy-loaded stats icons)
   ------------------------------------------------- */
.bt-stats-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.bt-stats-btn,
.bt-form-btn {
  font-size: 0.8rem;
  line-height: 1;
  padding: 0.1rem 0.5rem !important;
  border-radius: 1rem;
  transition: background-color 0.15s ease-in-out;
}

/* Mobile: icon-only action toolbar on trainer/jockey row */
.bt-mobile-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.bt-mobile-action {
  color: var(--ct-secondary-color, #8b9299);
  font-size: 1.25rem;
  padding: 0.35rem;
  cursor: pointer;
  text-decoration: none;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bt-mobile-action:active {
  color: var(--ct-primary, #3e60d5);
}

/* Larger Stats/Form buttons on desktop */
@media (min-width: 992px) {
  .bt-stats-btn,
  .bt-form-btn {
    font-size: 0.85rem;
    padding: 0.2rem 0.5rem !important;
  }
}

.bt-stats-btn {
  position: relative;
  margin-top: 2px;
}

.bt-stats-btn.active,
.bt-stats-btn.active:hover,
.bt-stats-btn.active:focus {
  background-color: #0d6efd !important;
  color: #fff !important;
  border-color: #0d6efd !important;
}

.bt-stats-icons-content {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: center;
}

/* Suppress underline on anchor-based stat icon links */
.bt-stats-icon {
  text-decoration: none !important;
}

/* Tighter spacing for popover icon buttons */
.bt-popover-icons .btn-link {
  padding: 0 0.05rem !important;
  margin: 0 !important;
  min-width: 0 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

.bt-popover-icons .btn-link:hover,
.bt-popover-icons .btn-link:focus {
  text-decoration: none !important;
}

.bt-popover-icons .btn-link i {
  margin: 0 !important;
  padding: 0 !important;
}

/* Fixed icons buttons - inline display */
.bt-fixed-icons-buttons {
  display: inline;
}
.bt-fixed-icons-buttons a {
  text-decoration: none;
}

/* Uniform icon bar spacing (heart, notebook, future, gear, etc.) */
.bt-icon-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: nowrap;
}

.bt-icon-bar .btn {
  min-height: auto !important;
  min-width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Stats collapse content - external container below card row */
.bt-stats-collapse-content:not(:empty) {
  padding: 0.5rem 0;
}

/* -------------------------------------------------
   Action buttons (consistent style for racecard toggles)
   ------------------------------------------------- */
.bt-action-btn {
  padding: 0.125rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 0.375rem;
  transition: all 0.15s ease-in-out;
}

.bt-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.bt-action-btn i {
  margin-right: 0.125rem;
}

.bt-action-btn .bt-caret,
.bt-action-btn > i.fa-caret-down,
.bt-action-btn > i.fa-caret-up {
  margin-left: 0.125rem;
  margin-right: 0;
}

/* Larger padding on medium+ screens */
@media (min-width: 768px) {
  .bt-action-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
  }

  .bt-action-btn i {
    margin-right: 0.25rem;
  }

  .bt-action-btn .bt-caret,
  .bt-action-btn > i.fa-caret-down,
  .bt-action-btn > i.fa-caret-up {
    margin-left: 0.25rem;
  }
}

/* Larger version for primary actions */
.bt-action-btn-lg {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
}

/* Pill variant (for soft buttons) */
.bt-action-btn.rounded-pill {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* -------------------------------------------------
   Trainer/Jockey entity icons (ticons/jicons)
   ------------------------------------------------- */
/* Mobile: inline display (original behavior) */
.bt-entity-icons {
  display: inline;
}

.bt-entity-icon {
  font-size: 0.65rem;
  line-height: 1;
}

.bt-entity-icon-img {
  height: 0.75rem;
  width: auto;
}

/* Larger screens: flex block below name */
@media (min-width: 992px) {
  .bt-entity-icons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.125rem;
  }
}

/* Horse name emphasis */
.bt-col-horse {
  font-weight: 600;
  font-size: 1.05rem;
}

/* Horse name in card view — flex-grow fills remaining space.
   Smaller font at lg (iPad portrait ~1024px) to fit long names. */
.bt-horse-name {
  white-space: nowrap;
}

/* Suppress underline on horse name popover links */
.bt-horse-name a {
  text-decoration: none !important;
}

/* xl band: name column is at its narrowest — smaller font fits more
   characters before the ellipsis (same approach as the lg band). */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .bt-horse-name {
    font-size: 0.9rem;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .bt-horse-name {
    font-size: 0.9rem;
    white-space: normal;
    overflow: hidden;
    padding-right: 0 !important;
  }
  /* Compact trainer/jockey on iPad portrait to free space for horse name */
  .bt-connections {
    font-size: 0.78rem;
    padding-left: 1rem !important;
  }
  .bt-connections .mdi {
    font-size: 0.85rem;
  }
  /* Smaller odds on iPad to prevent column overflow */
  .bt-odds {
    font-size: 0.82rem;
  }
}

/* Table column widths for larger screens */
@media (min-width: 992px) {
  .bt-col-horse {
    min-width: 12rem;
    white-space: nowrap;
  }
  .bt-col-trainer,
  .bt-col-jockey {
    min-width: 10rem;
    white-space: nowrap;
  }
}

@media (min-width: 1200px) {
  .bt-col-horse {
    min-width: 14rem;
  }
  .bt-col-trainer,
  .bt-col-jockey {
    min-width: 12rem;
  }
}

/* -------------------------------------------------
   Compact runner card spacing
   Reduces vertical space per runner so more fit on screen.
   Scoped to [data-bt-card] to avoid affecting other layouts.
   ------------------------------------------------- */

/* Tighter line-height within runner cards (default 1.5 → 1.3) */
[data-bt-card] {
  line-height: 1.3;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  border-left: 4px solid transparent;
  border-radius: 8px;
  margin-bottom: 0.375rem;
  position: relative;
}

/* Runner row hover — blue left border + shadow lift */
[data-bt-card]:hover {
  background: rgba(62, 96, 213, 0.06) !important;
  border-left-color: var(--ct-primary, #3e60d5);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Dark mode runner hover */
html[data-bs-theme="dark"] [data-bt-card]:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

/* Mobile: slightly more breathing room between runner cards */
@media (max-width: 991.98px) {
  [data-bt-card] {
    margin-bottom: 0.5rem;
    padding-bottom: 0.15rem;
  }
  /* Space below heart/icon row and above buttons row */
  .bt-row-icons {
    margin-bottom: 0.35rem;
  }
  .bt-row-below-horseshoes {
    margin-top: 0.35rem !important;
  }
}

/* Desktop only: subtle lift on hover (causes jank on mobile touch) */
@media (min-width: 992px) {
  [data-bt-card]:hover {
    transform: translateY(-2px);
  }
}

/* Collapse vertical gaps between stacked sections within each card */
[data-bt-card] > div > .row + .row,
[data-bt-card] > div > .row + .d-flex,
[data-bt-card] > div > .d-flex + .row {
  margin-top: -0.2rem;
}

/* Reduce gutter on the horse-name nested row */
[data-bt-card] .row.g-2 {
  --bs-gutter-y: 0;
}

/* Match pick number size to horseshoe icons on desktop */
@media (min-width: 992px) {
  .row.bg-light > .col-2.fs-5 {
    font-size: 1rem !important;
  }
}

/* Compact horseshoes on mobile — tighter gutters so icons + pick fit */
.bt-horseshoes-compact {
  width: 46%;
  padding: 0 !important;
}

.bt-horseshoes-compact .row {
  --bs-gutter-x: 0;
  margin: 0 !important;
}

/* -------------------------------------------------
   Bootstrap Datepicker Plus / Tempus Dominus Styles
   Improved visibility for calendar icon and dates
   ------------------------------------------------- */

/* "Set Racing Date" link calendar icon */
a[data-bs-target="#setdate"] .fa-calendar,
a[data-bs-target="#setdate"] .fas.fa-calendar {
  color: var(--ct-primary, #3e60d5);
}

/* Calendar icon in datepicker input group */
#setdate .input-group-text,
.input-group-text:has(.fa-calendar),
.input-group-text:has(.fas.fa-calendar) {
  background-color: var(--ct-primary, #3e60d5);
  border-color: var(--ct-primary, #3e60d5);
  color: #fff;
}

.input-group-text .fa-calendar,
.input-group-text .fas.fa-calendar {
  color: #fff;
}

/* Tempus Dominus datepicker dropdown - force dark text */
.tempus-dominus-widget,
.tempus-dominus-widget * {
  color: #000 !important;
}

.tempus-dominus-widget {
  background-color: #fff !important;
  border: 1px solid #333 !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3) !important;
}

/* Calendar header (month/year navigation) */
.tempus-dominus-widget .picker-switch,
.tempus-dominus-widget .picker-switch td,
.tempus-dominus-widget .picker-switch span,
.tempus-dominus-widget .datepicker-days thead th,
.tempus-dominus-widget .datepicker-months thead th,
.tempus-dominus-widget .datepicker-years thead th,
.tempus-dominus-widget button,
.tempus-dominus-widget .btn {
  color: #000 !important;
  font-weight: 700 !important;
}

/* Day of week headers */
.tempus-dominus-widget .dow,
.tempus-dominus-widget .datepicker-days thead tr:last-child th,
.tempus-dominus-widget div.dow {
  color: #000 !important;
  font-weight: 700 !important;
}

/* Calendar day cells - dark black text */
.tempus-dominus-widget .day,
.tempus-dominus-widget td.day,
.tempus-dominus-widget div.day,
.tempus-dominus-widget [data-action="selectDay"],
.tempus-dominus-widget .date-container-days div {
  color: #000 !important;
  font-weight: 600 !important;
}

/* Old/New month days (greyed out) - darker gray */
.tempus-dominus-widget .old.day,
.tempus-dominus-widget .new.day,
.tempus-dominus-widget td.old,
.tempus-dominus-widget td.new,
.tempus-dominus-widget .old,
.tempus-dominus-widget .new {
  color: #555 !important;
}

/* Today's date */
.tempus-dominus-widget .today,
.tempus-dominus-widget td.today,
.tempus-dominus-widget div.today {
  background-color: rgba(62, 96, 213, 0.25) !important;
  color: #000 !important;
  font-weight: 700 !important;
}

/* Selected/Active date */
.tempus-dominus-widget .active.day,
.tempus-dominus-widget td.active,
.tempus-dominus-widget div.active,
.tempus-dominus-widget .active {
  background-color: #3e60d5 !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* Hover state */
.tempus-dominus-widget .day:hover,
.tempus-dominus-widget td.day:hover,
.tempus-dominus-widget div.day:hover {
  background-color: #ddd !important;
  color: #000 !important;
}

/* Disabled dates */
.tempus-dominus-widget .disabled.day,
.tempus-dominus-widget td.disabled,
.tempus-dominus-widget .disabled {
  color: #888 !important;
  cursor: not-allowed;
}

/* Navigation arrows */
.tempus-dominus-widget .prev,
.tempus-dominus-widget .next,
.tempus-dominus-widget th.prev,
.tempus-dominus-widget th.next,
.tempus-dominus-widget [data-action="previous"],
.tempus-dominus-widget [data-action="next"],
.tempus-dominus-widget [title="Previous Month"],
.tempus-dominus-widget [title="Next Month"] {
  color: #000 !important;
}

.tempus-dominus-widget .prev:hover,
.tempus-dominus-widget .next:hover {
  background-color: #ddd !important;
}

/* Month and Year picker views */
.tempus-dominus-widget .month,
.tempus-dominus-widget .year,
.tempus-dominus-widget span.month,
.tempus-dominus-widget span.year,
.tempus-dominus-widget div.month,
.tempus-dominus-widget div.year {
  color: #000 !important;
  font-weight: 600 !important;
}

.tempus-dominus-widget .month:hover,
.tempus-dominus-widget .year:hover {
  background-color: #ddd !important;
}

/* -------------------------------------------------
   Dark Mode Calendar Styles
   Ultra-aggressive selectors to ensure white text
   ------------------------------------------------- */

/* Force ALL text in datepicker to white in dark mode */
[data-bs-theme="dark"] .tempus-dominus-widget,
[data-bs-theme="dark"] .tempus-dominus-widget *,
[data-bs-theme="dark"] .tempus-dominus-widget *::before,
[data-bs-theme="dark"] .tempus-dominus-widget *::after,
[data-bs-theme="dark"] .bootstrap-datetimepicker-widget,
[data-bs-theme="dark"] .bootstrap-datetimepicker-widget *,
[data-bs-theme="dark"] .datepicker,
[data-bs-theme="dark"] .datepicker *,
[data-bs-theme="dark"] .datepicker-dropdown,
[data-bs-theme="dark"] .datepicker-dropdown *,
[data-bs-theme="dark"] [class*="datepicker"],
[data-bs-theme="dark"] [class*="datepicker"] *,
[data-bs-theme="dark"] [class*="picker"] td,
[data-bs-theme="dark"] [class*="picker"] th,
[data-bs-theme="dark"] [class*="picker"] span,
[data-bs-theme="dark"] [class*="picker"] div {
  color: #fff !important;
}

[data-bs-theme="dark"] .tempus-dominus-widget,
[data-bs-theme="dark"] .bootstrap-datetimepicker-widget,
[data-bs-theme="dark"] .datepicker,
[data-bs-theme="dark"] .datepicker-dropdown {
  background-color: #1e2228 !important;
  border: 2px solid #3e60d5 !important;
}

/* Dark mode: Table cells */
[data-bs-theme="dark"] .tempus-dominus-widget table,
[data-bs-theme="dark"] .tempus-dominus-widget table td,
[data-bs-theme="dark"] .tempus-dominus-widget table th,
[data-bs-theme="dark"] .bootstrap-datetimepicker-widget table,
[data-bs-theme="dark"] .bootstrap-datetimepicker-widget table td,
[data-bs-theme="dark"] .bootstrap-datetimepicker-widget table th,
[data-bs-theme="dark"] .datepicker table,
[data-bs-theme="dark"] .datepicker table td,
[data-bs-theme="dark"] .datepicker table th {
  color: #fff !important;
  font-weight: 600 !important;
  background-color: transparent !important;
}

/* Dark mode: Day cells specifically */
[data-bs-theme="dark"] .tempus-dominus-widget .day,
[data-bs-theme="dark"] .bootstrap-datetimepicker-widget .day,
[data-bs-theme="dark"] .datepicker .day,
[data-bs-theme="dark"] .datepicker td,
[data-bs-theme="dark"] .datepicker-days td {
  color: #fff !important;
  font-weight: 600 !important;
}

/* Dark mode: Old/New month days - lighter gray */
[data-bs-theme="dark"] .tempus-dominus-widget .old,
[data-bs-theme="dark"] .tempus-dominus-widget .new,
[data-bs-theme="dark"] .bootstrap-datetimepicker-widget .old,
[data-bs-theme="dark"] .bootstrap-datetimepicker-widget .new,
[data-bs-theme="dark"] .datepicker .old,
[data-bs-theme="dark"] .datepicker .new {
  color: #999 !important;
}

/* Dark mode: Today */
[data-bs-theme="dark"] .tempus-dominus-widget .today,
[data-bs-theme="dark"] .bootstrap-datetimepicker-widget .today,
[data-bs-theme="dark"] .datepicker .today {
  background-color: #3e60d5 !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* Dark mode: Active/Selected */
[data-bs-theme="dark"] .tempus-dominus-widget .active,
[data-bs-theme="dark"] .bootstrap-datetimepicker-widget .active,
[data-bs-theme="dark"] .datepicker .active {
  background-color: #5a7fe0 !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* Dark mode: Hover */
[data-bs-theme="dark"] .tempus-dominus-widget td:hover,
[data-bs-theme="dark"] .tempus-dominus-widget .day:hover,
[data-bs-theme="dark"] .bootstrap-datetimepicker-widget td:hover,
[data-bs-theme="dark"] .datepicker td:hover,
[data-bs-theme="dark"] .datepicker .day:hover {
  background-color: #3a3f47 !important;
  color: #fff !important;
}

/* Dark mode: Disabled */
[data-bs-theme="dark"] .tempus-dominus-widget .disabled,
[data-bs-theme="dark"] .bootstrap-datetimepicker-widget .disabled,
[data-bs-theme="dark"] .datepicker .disabled {
  color: #555 !important;
}

/* Dark mode: Navigation buttons/arrows */
[data-bs-theme="dark"] .tempus-dominus-widget .prev,
[data-bs-theme="dark"] .tempus-dominus-widget .next,
[data-bs-theme="dark"] .tempus-dominus-widget .picker-switch,
[data-bs-theme="dark"] .tempus-dominus-widget button,
[data-bs-theme="dark"] .bootstrap-datetimepicker-widget .prev,
[data-bs-theme="dark"] .bootstrap-datetimepicker-widget .next,
[data-bs-theme="dark"] .bootstrap-datetimepicker-widget .picker-switch,
[data-bs-theme="dark"] .datepicker .prev,
[data-bs-theme="dark"] .datepicker .next,
[data-bs-theme="dark"] .datepicker .datepicker-switch {
  color: #fff !important;
  font-weight: 700 !important;
}

/* Dark mode: Month/Year views */
[data-bs-theme="dark"] .tempus-dominus-widget .month,
[data-bs-theme="dark"] .tempus-dominus-widget .year,
[data-bs-theme="dark"] .bootstrap-datetimepicker-widget .month,
[data-bs-theme="dark"] .bootstrap-datetimepicker-widget .year,
[data-bs-theme="dark"] .datepicker .month,
[data-bs-theme="dark"] .datepicker .year {
  color: #fff !important;
  font-weight: 600 !important;
}

/* Dark mode: Dow (day of week) headers */
[data-bs-theme="dark"] .tempus-dominus-widget .dow,
[data-bs-theme="dark"] .bootstrap-datetimepicker-widget .dow,
[data-bs-theme="dark"] .datepicker .dow {
  color: #fff !important;
  font-weight: 700 !important;
}

/* Input field styling */
#setdate input.form-control,
.bootstrap-datetimepicker-widget input {
  border-color: #ced4da;
}

#setdate input.form-control:focus {
  border-color: var(--ct-primary, #3e60d5);
  box-shadow: 0 0 0 0.2rem rgba(62, 96, 213, 0.25);
}

/* -------------------------------------------------
   Form Comments & Insights - Normal Body Font Size
   Override ALL text to use body font (0.92rem)
   ------------------------------------------------- */
.bt-formcomments,
.bt-formcomments *,
.bt-comments,
.bt-comments * {
  font-size: 0.92rem !important;
}

/* Ensure tables inherit body font */
.bt-formcomments table,
.bt-formcomments .table,
.bt-formcomments .table-sm,
.bt-comments table,
.bt-comments .table,
.bt-comments .table-sm {
  font-size: 0.92rem !important;
}

.bt-formcomments th,
.bt-formcomments td,
.bt-comments th,
.bt-comments td {
  font-size: 0.92rem !important;
  padding: 0.4rem 0.5rem !important;
}

/* Override Bootstrap .small class */
.bt-formcomments .small,
.bt-formcomments .alert.small,
.bt-formcomments .card.small,
.bt-formcomments .card-body.small,
.bt-comments .small,
.bt-comments .alert.small,
.bt-comments .card.small,
.bt-comments .card-body.small {
  font-size: 0.92rem !important;
}

/* Override table-sm font size */
.bt-formcomments .table-sm th,
.bt-formcomments .table-sm td,
.bt-comments .table-sm th,
.bt-comments .table-sm td {
  font-size: 0.92rem !important;
}

/* Paragraphs and text elements */
.bt-formcomments p,
.bt-formcomments span,
.bt-formcomments a,
.bt-formcomments div,
.bt-comments p,
.bt-comments span,
.bt-comments a,
.bt-comments div {
  font-size: 0.92rem !important;
}

/* Badges can stay smaller for visual distinction */
.bt-formcomments .badge,
.bt-comments .badge {
  font-size: 0.8rem !important;
}

/* -------------------------------------------------
   Phase 1: Visual polish — smooth scroll
   ------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

/* -------------------------------------------------
   Phase 1: Container breathing room on desktop
   ------------------------------------------------- */
@media (min-width: 992px) {
  .container-fluid {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* -------------------------------------------------
   Phase 4: Top Pick highlighting
   #1 ranked horse gets gold left border + subtle gradient
   ------------------------------------------------- */
[data-bt-card][data-bt-top-pick] {
  border-left-color: #f9c851;
  background: linear-gradient(90deg, rgba(249, 200, 81, 0.08) 0%, transparent 30%) !important;
}

[data-bt-card][data-bt-top-pick]:hover {
  background: linear-gradient(90deg, rgba(249, 200, 81, 0.15) 0%, rgba(62, 96, 213, 0.06) 30%) !important;
  box-shadow: 0 4px 20px rgba(249, 200, 81, 0.25);
}

html[data-bs-theme="dark"] [data-bt-card][data-bt-top-pick] {
  background: linear-gradient(90deg, rgba(249, 200, 81, 0.1) 0%, transparent 30%) !important;
}

html[data-bs-theme="dark"] [data-bt-card][data-bt-top-pick]:hover {
  background: linear-gradient(90deg, rgba(249, 200, 81, 0.18) 0%, rgba(255, 255, 255, 0.06) 30%) !important;
  box-shadow: 0 4px 20px rgba(249, 200, 81, 0.3);
}

/* -------------------------------------------------
   Formlist table: compact columns, CSS-only scroll
   ------------------------------------------------- */
table.formlist,
table.dataTable.formlist {
  width: 1px !important;
}
/* Shrink the DataTables wrapper so it doesn't stretch to 100% */
.dataTables_wrapper:has(table.formlist) {
  width: fit-content !important;
}
table.formlist thead th {
  padding: 0.2rem 0.4rem !important;
}
table.formlist td {
  padding-top: 0.2rem !important;
  padding-bottom: 0.2rem !important;
}

/* -------------------------------------------------
   Mobile: full-width popovers (prevent off-screen)
   ------------------------------------------------- */
@media (max-width: 767.98px) {
  .popover {
    left: 0.25rem !important;
    width: calc(100vw - 0.5rem) !important;
    max-width: calc(100vw - 0.5rem) !important;
  }
  /* Hide the arrow on mobile - not meaningful when full-width */
  .popover .popover-arrow {
    display: none !important;
  }
  /* Scrollable body if content is tall */
  .popover .popover-body {
    max-height: 70vh;
    overflow-y: auto;
    /* removed: -webkit-overflow-scrolling is default since iOS 13, extra layers hurt perf */
  }
}

/* -------------------------------------------------
   Accessibility: respect reduced-motion preference
   ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* -------------------------------------------------
   Simple mobile card layout
   ------------------------------------------------- */
.bt-simple-icons-row {
  margin-top: 2px;
  margin-bottom: 2px;
}

.bt-simple-info-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  padding: 2px 0;
  line-height: 1.4;
}

.bt-simple-info-line > span:not(:last-child)::after {
  content: "\00a0|\00a0";
  color: #aaa;
}

.bt-simple-comment {
  padding: 4px 0;
  line-height: 1.5;
  color: #444;
  font-size: 0.9rem;
}
html[data-bs-theme="dark"] .bt-simple-comment {
  color: #E8E8E8;
}

.bt-simple-row-bottom {
  display: flex;
  align-items: center;
  padding: 4px 0 2px;
  gap: 8px;
}

.bt-simple-row-bottom .fa-horseshoe {
  font-size: 1.1rem;
}

.bt-simple-row-bottom .bt-pick-rank {
  font-size: 1.1rem !important;
}

/* Pick rank: fs-5 on desktop, fs-6 on mobile to prevent wrapping */
.bt-pick-rank {
  font-size: 1.25rem; /* fs-5 */
}
@media (max-width: 991.98px) {
  .bt-pick-rank {
    font-size: 1rem; /* fs-6 */
  }
}

/* AI analysis expand panel — collapsible horseshoe reasons */
.bt-ai-explain {
  font-size: 0.85rem;
  line-height: 1.4;
}
.bt-ai-explain .fa-horseshoe {
  font-size: 0.7rem;
  width: 1rem;
  text-align: center;
}
.bt-ai-factors > div {
  padding: 2px 0;
}
/* Rotate caret when AI panel is open */
.bt-ai-btn[aria-expanded="true"] .bt-ai-caret {
  transform: rotate(180deg);
}
.bt-ai-caret {
  transition: transform 0.2s ease;
}

/* ==================================================================
/* Race Profile popover: fits the screen on phones, scrolls when long */
.popover.bt-raceprofile-popover {
    max-width: min(95vw, 30rem);
}
.popover.bt-raceprofile-popover .popover-body {
    max-height: 70vh;
    overflow-y: auto;
}


/* The repeated signup ask on the signed-out home page. Quiet by design: it appears four
   times, so it has to read as an offer rather than a banner. */
.bt-signup-prompt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin: 28px auto 0; padding: 14px 18px; max-width: 760px;
  border: 1px solid rgba(28, 107, 51, .28); border-radius: 10px;
  background: rgba(28, 107, 51, .05); }
.bt-signup-prompt-text { margin: 0; flex: 1 1 260px; font-size: .95rem; }
.bt-signup-prompt-alt { font-size: .85rem; }
@media (max-width: 575px) {
  .bt-signup-prompt { flex-direction: column; align-items: stretch; text-align: center; }
  .bt-signup-prompt .btn { width: 100%; }
}


/* Hero: what the product does (signed out) and what is off next (signed in). */
.hero-benefits li { color: rgba(255,255,255,.92); font-size: .98rem; padding: 4px 0;
  display: flex; align-items: baseline; gap: 10px; }
.hero-benefits i { color: #86efac; width: 1.1em; flex: 0 0 auto; }
.hero-next { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
/* Inherits its ink: this sits on the classic hero (dark blue) and on the turtle one (light),
   and hard-coding white made it invisible on the second. */
.hero-next-label { color: inherit; opacity: .75; font-size: .82rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; }
.hero-next-time { display: flex; flex-direction: column; align-items: center; line-height: 1.15;
  padding: 5px 10px; border-radius: 7px; text-decoration: none;
  color: inherit; background: rgba(127,127,127,.12); border: 1px solid currentColor; }
.hero-next-time b { color: inherit; font-size: .95rem; }
.hero-next-time span { color: inherit; opacity: .78; font-size: .72rem; }
.hero-next-time:hover { background: rgba(127,127,127,.22); }


/* The member home page. Inherits its ink so it works on the classic shell and the turtle one. */
.member-home { padding: 26px 0 8px; }
/* Title left, Customise right: where somebody looking for a settings control looks. */
.member-home-top { display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: 8px 16px; }
.member-home-title { font-size: calc(1.7rem * var(--fc-scale, 1)); font-weight: 700; margin: 0; }
/* No opacity on text. Fading it is how the same three labels came back at 2.9-3.6:1;
   the hierarchy is size and weight, and the muted ink is a real colour. */
.member-home-sub { margin: 2px 0 16px; color: var(--mh-ink-3); font-size: calc(.95rem * var(--fc-scale, 1)); }
.member-next { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.member-next-label { color: var(--mh-ink-3); font-size: calc(.8rem * var(--fc-scale, 1)); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; }
.member-next-time { display: flex; flex-direction: column; align-items: center; line-height: 1.15;
  padding: 6px 11px; border-radius: 8px; text-decoration: none; color: inherit;
  border: 1px solid rgba(127,127,127,.35); }
.member-next-time b { font-size: calc(.98rem * var(--fc-scale, 1)); }
.member-next-time span { font-size: calc(.74rem * var(--fc-scale, 1)); color: var(--mh-ink-3); }
.member-next-time:hover { border-color: var(--mh-accent-ink); color: inherit; }
.member-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px; margin-bottom: 16px; }
.member-tile { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px;
  border: 1px solid rgba(127,127,127,.3); border-radius: 10px; text-decoration: none;
  color: inherit; }
.member-tile:hover { border-color: var(--mh-accent-ink); color: inherit; }
.member-tile-n { font-size: calc(1.9rem * var(--fc-scale, 1)); font-weight: 700; line-height: 1; }
.member-tile-l { font-size: calc(.88rem * var(--fc-scale, 1)); color: var(--mh-ink-2); }
.member-links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: calc(.92rem * var(--fc-scale, 1)); }
.member-tile-empty { justify-content: center; }
.member-tile-empty .member-tile-l { font-size: calc(.95rem * var(--fc-scale, 1)); }

/* Member home panels. No opacity on text -- muted ink is a colour. */
/* align-items:start, or the grid stretches every panel to the tallest and a short list sits
   in a box of white space. */
/* Three, not four. The same argument that took it from five to four: a horse's name is the
   one thing on the row worth reading, and once a row carries a finishing position as well as
   a price the 286px panel had 110px left for the name and cut nineteen of thirty-two
   meetings. At 398px that is three names and six meetings, and the page grows 95px. */
.member-cols { columns: 3 320px; column-gap: 16px; }
.member-cols > * { break-inside: avoid; margin-bottom: 16px; }
.member-links-label { font-size: calc(.74rem * var(--fc-scale, 1)); font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--mh-ink-3); }

/* Drag to re-arrange. The heading is the handle, so a drag cannot start on a link. */
.member-slot { break-inside: avoid; }
/* A panel with nothing to say renders nothing, leaving its slot an empty 16px gap in the
   column. :empty will not match — the include leaves whitespace — so match on the absence of
   the panel itself. */
.member-slot:not(:has(.member-panel)) { display: none; margin: 0; }
/* Ask for help sits outside the columns entirely. column-span: all keeps it in the multicol
   container, and growing it there re-balances every column above -- 13 panels moved. */
.member-slot-wide { margin-bottom: 16px; }
.member-slot-wide .member-panel { max-width: 780px; }
/* No text selection from the handle: a drag begins with a press, and a press on a heading
   selected the words under it -- the move worked, it just looked like a mistake on the way.
   `touch-action:none` already stops the page scrolling; this stops the highlight. */
.member-slot .member-panel-h { cursor: grab; touch-action: none;
  -webkit-user-select: none; user-select: none; }
/* While a panel is actually moving, nothing anywhere is selectable: the pointer passes over
   other panels on its way and would select their text instead. */
body:has(.is-dragging) { -webkit-user-select: none; user-select: none; }
.member-slot .member-panel-h:focus-visible { outline: 2px solid #1c6b33; outline-offset: 3px; }
.member-slot.is-dragging { opacity: .45; }
.member-slot.is-over .member-panel { outline: 2px dashed #1c6b33; outline-offset: 2px; }
.member-panel { display: inline-block; width: 100%; border: 1px solid rgba(127,127,127,.3); border-radius: 10px; padding: 14px 16px; }
.member-panel-h { font-size: calc(1rem * var(--fc-scale, 1)); font-weight: 700; margin: 0 0 6px; }
.member-panel-lead { font-size: calc(.9rem * var(--fc-scale, 1)); color: var(--mh-ink-2); margin: 0 0 8px; }
.member-list { list-style: none; margin: 0 0 8px; padding: 0; }
.member-list li + li { border-top: 1px solid rgba(127,127,127,.18); }
/* Four columns, so a price starts at the same place on every line instead of wherever the
   horse's name happened to end (Kenny, 31 Aug). Column 1 is empty on the panels that carry no
   position or move, and column 3 is empty on the ones that carry no price, so one template
   serves every panel. */
.member-list a { display: grid;
  /* Every track a stated size, because each row is its OWN grid: leave the name or the
     meeting on `auto` and the price starts at a different x on every line, which is the
     ragged column this replaced. */
  /* The name is weighted and the meeting gives way, because "a horse's name is the one thing
     on the row worth reading" -- the same reason the column count is 4 at 265px and not 5.
     A fixed meeting track squeezed the name to "Port..." the moment a position badge
     appeared beside it. */
  /* saddle | horse | result | price | meeting. The result sits to the LEFT of the price in
     a column of its own, so it lines up down the list like everything else. */
  grid-template-columns: auto minmax(72px, 1.4fr) auto 54px minmax(0, 1fr);
  align-items: baseline; gap: 2px 8px;
  padding: 5px 0; text-decoration: none; color: inherit; }
.member-list a > .member-pos,
.member-list a > .member-saddle,
.member-list a > .member-lead,
.member-list a > .member-move { grid-column: 1; }
/* A move and a cloth number are one cell, not two: given a column each they were handed the
   same one and stacked, which put the percentage above the number. */
.member-lead { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
/* How many subscribers marked it. Quiet: it ranks the row, it is not the row's subject. */
/* Named by its mark, not left as a bare number: beside the cloth number two plain digits are
   indistinguishable, which is the confusion the cloth number itself just came out of. */
.member-count { display: inline-flex; align-items: baseline; gap: 2px;
  font-size: calc(.76rem * var(--fc-scale, 1)); font-weight: 700; color: var(--mh-accent-ink);
  font-variant-numeric: tabular-nums; }
.member-count.is-binned { color: var(--mh-ink-3); }
.member-count i { font-size: calc(.68rem * var(--fc-scale, 1)); }
/* `member-pos` keeps column 1 because on the league panel it IS a rank. */
.member-list a > .member-result { grid-column: 3; justify-self: start; }
.member-list a > .member-price { grid-column: 4; justify-self: start; }
.member-list a > .member-when { grid-column: 5; }
.member-list a > .member-horse { grid-column: 2; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
/* `justify-self`, not a width: the price keeps its own box and simply starts at the track's
   left edge, so a short price is not a stretched green bar. */
.member-list a > .member-when { text-align: right; overflow: hidden; text-overflow: ellipsis; }
.member-list a:hover .member-horse { text-decoration: underline; }
.member-horse { font-weight: 600; font-size: calc(.93rem * var(--fc-scale, 1)); }
.member-when { font-size: calc(.8rem * var(--fc-scale, 1)); color: var(--mh-ink-3); white-space: nowrap; }
.member-pos { display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; height: 1.5rem; border-radius: 5px; font-size: calc(.8rem * var(--fc-scale, 1)); font-weight: 700;
  border: 1px solid rgba(127,127,127,.35); }
.member-pos.is-win { background: #1c6b33; color: #fff; border-color: var(--mh-accent-ink); }
/* The race card's format: a rosette for the first three, the ordinal alone after that. No box
   -- the rosette is the mark, and a box around it made two badges on one row. */
.member-result { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
  font-size: calc(.78rem * var(--fc-scale, 1)); font-weight: 700; color: var(--mh-ink-3); font-variant-numeric: tabular-nums; }
.member-result.is-1 { color: var(--mh-accent-ink); }
.member-rosette { width: 15px; height: 15px; object-fit: contain; }
/* The cloth number is the quiet one: it identifies the horse, it does not report anything. */
.member-saddle { display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.35rem; font-size: calc(.78rem * var(--fc-scale, 1)); font-weight: 600; color: var(--mh-ink-3);
  font-variant-numeric: tabular-nums; }
/* The same reading the card gives a move: accent for money coming, muted for money leaving. */
.member-move { flex: 0 0 auto; min-width: 42px; font-size: calc(.76rem * var(--fc-scale, 1)); font-weight: 700;
  font-variant-numeric: tabular-nums; }
.member-move.is-in { color: var(--mh-accent-ink); }
/* Red drifting, green shortening -- the card's convention, so a price means the same
   thing wherever it is read. The sign carries the direction as well as the colour. */
.member-move.is-out { color: var(--mh-move-out); }
/* The race card's own price box, so a price reads the same wherever it appears. Inside the
   turtle shell it takes the chip tokens; these values are what those tokens hold in light. */
.member-price { display: inline-block; padding: 0 7px; border-radius: 3px;
  border: 2px solid #0b4522; background: #0f5a2c; color: #fff; font-weight: 600;
  font-size: calc(.78rem * var(--fc-scale, 1)); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Quick links above the panels on a phone, and the jump control.

   The container becomes a column so `order` can move one child; on a wide screen the order is
   the source order, which is where the links belong. Ordered rather than moved in the markup,
   so the reading order a screen reader follows on desktop is untouched. */
@media (max-width: 767px) {
  .member-home .container { display: flex; flex-direction: column; }
  /* Three next races, so the strip is one line rather than two wrapped rows (Kenny, 1 Sep).
     The rest are a tap away on Today's racing, which is the first quick link. */
  .member-next .member-next-time:nth-of-type(n+4) { display: none; }
  /* Under the title, above everything else. Not first on the page: "Your day" is what the
     page IS, and a list of shortcuts before its own name reads as a menu. */
  .member-home .member-home-top { order: 1; }
  .member-home .member-links { order: 2; margin: 6px 0 12px; }
  .member-home .member-linkpicker { order: 3; }
  .member-home [data-bt-homelive] { order: 4; }
}

/* A way down a long page and back. Fixed, out of the way, and hidden until there is something
   to scroll to -- a jump button on a page that fits is a control that does nothing. */
.member-updown { position: fixed; right: 16px; bottom: 20px; z-index: 1030;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(127,127,127,.35); background: var(--mh-surface); color: var(--mh-accent-ink);
  box-shadow: 0 2px 8px rgba(0,0,0,.18); opacity: .85; }
.member-updown:hover, .member-updown:focus-visible { opacity: 1; border-color: var(--mh-accent-ink); }
@media print { .member-updown { display: none !important; } }

/* The one line that says the panels move, and the grip each heading carries so the sentence
   has something to point at. Quiet: it is an instruction read once, not part of the day. */
.member-home-hint { display: flex; align-items: center; gap: 6px; margin: 4px 0 0;
  font-size: calc(.8rem * var(--fc-scale, 1)); color: var(--mh-ink-3); }
.member-home-hint i { opacity: .75; }
/* Named only where they can be pressed. A width would get a large tablet wrong; the pointer
   is the thing actually being asked about. */
@media (pointer: coarse) { .member-hint-keys { display: none; } }
.member-hint-x { border: 0; background: none; color: var(--mh-ink-3); font-size: calc(1rem * var(--fc-scale, 1));
  line-height: 1; padding: 0 2px; cursor: pointer; }
.member-hint-x:hover { color: var(--mh-accent-ink); }
.member-grip { margin-right: 6px; opacity: .35; font-size: .8em; cursor: grab; }
.member-panel-h:hover .member-grip { opacity: .7; }

/* What's new: the name and its date on one line, the sentence under them. Grid rather than
   flex so the date keeps its own column and a long name wraps under itself instead of
   pushing the date off the tile. */
.member-benefits li { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 8px; padding: 5px 0; }
.member-benefits li + li { border-top: 1px solid rgba(127,127,127,.18); }
.member-feat-head { font-weight: 600; font-size: calc(.9rem * var(--fc-scale, 1)); }
.member-feat-when { font-size: calc(.76rem * var(--fc-scale, 1)); color: var(--mh-ink-3); white-space: nowrap; }
.member-feat-detail { grid-column: 1 / -1; font-size: calc(.82rem * var(--fc-scale, 1)); color: var(--mh-ink-2); line-height: 1.35; }

/* Four small figures reading as one row, rather than four sentences. */
.member-figures { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 2px 0 10px; }
.member-figures div { display: flex; flex-direction: column; line-height: 1.15; }
.member-figures b { font-size: calc(1.35rem * var(--fc-scale, 1)); font-variant-numeric: tabular-nums; }
.member-figures span { font-size: calc(.76rem * var(--fc-scale, 1)); color: var(--mh-ink-3); }
.member-panelpick { margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(127,127,127,.25); }
/* Grid, not columns: Safari reserves height for a multicol box whose children avoid breaks,
   which left a tall empty band under this list. A grid lays out identically everywhere. */
.member-panelpick { display: block; }
.member-panelpick .member-linkopts { display: grid; gap: 2px 22px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.member-panelpick label { display: block; }
.member-quicklinks-h { margin-top: 4px; }
.member-more { font-size: calc(.85rem * var(--fc-scale, 1)); }
.member-benefits li { display: block; padding: 4px 0; font-size: calc(.88rem * var(--fc-scale, 1)); color: var(--mh-ink-2); }
.member-benefits li + li { border-top: 1px solid rgba(127,127,127,.18); }
.member-upgrade { border-color: rgba(28,107,51,.4); }
.member-editlinks { display: inline-flex; align-items: center; gap: 6px; font: inherit;
  padding: 3px 12px; border: 1px solid rgba(28,107,51,.45); border-radius: 999px;
  background: rgba(28,107,51,.07); color: var(--mh-accent-ink); font-weight: 600; }
.member-editlinks:hover { background: rgba(28,107,51,.14); }
.member-editlinks i { font-size: .92em; }
.member-linkpicker { margin: 0 0 16px; padding: 12px 14px; border: 1px solid rgba(127,127,127,.3);
  border-radius: 10px; }
/* Each category is a block and the BLOCKS flow, rather than every category laying out its
   own seven-column grid -- that left a one-item group stranded across the full width and
   nothing lined up with anything. */
/* Columns, not a grid: a grid gives every row the height of its tallest block, so the
   ten-item Pages block left four short categories sitting in white space. Column flow packs
   them, and break-inside keeps a category whole. */
.member-linkgroups { columns: 5 200px; column-gap: 22px; margin-bottom: 10px; }
.member-linkgroup { break-inside: avoid; display: inline-block; width: 100%;
  margin-bottom: 12px; }
.member-linkopts { display: flex; flex-direction: column; gap: 2px; }
.member-linkgroup-h { display: block; font-size: calc(.74rem * var(--fc-scale, 1)); text-transform: uppercase;
  letter-spacing: .05em; color: var(--mh-ink-3); margin-bottom: 3px;
  border-bottom: 1px solid rgba(127,127,127,.22); padding-bottom: 2px; }
.member-linkpicker { max-height: 52vh; overflow-y: auto; }
.member-linkopts label { display: flex; align-items: center; gap: 7px; font-size: calc(.9rem * var(--fc-scale, 1)); }
.member-linksaved { margin-left: 10px; font-size: calc(.85rem * var(--fc-scale, 1)); color: var(--mh-accent-ink); }

/* Five identical boxes read as a form. A mark on each heading and a rule of colour at the top
   of the panel give them a shape without turning the page into a paint chart -- one accent,
   used the same way five times. */
.member-panel { position: relative; overflow: hidden; }
.member-panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: #1c6b33; opacity: .75; }
.member-panel-h { display: flex; align-items: center; gap: 7px; }
.member-panel-h i { color: var(--mh-accent-ink); font-size: .92em; }
.member-panel-sub { margin: 10px 0 2px; font-size: calc(.74rem * var(--fc-scale, 1)); text-transform: uppercase;
  letter-spacing: .05em; color: var(--mh-ink-3); }
.member-panel-sub:first-of-type { margin-top: 2px; }
.member-upgrade::before { background: #9a6b00; opacity: .9; }

/* The way back to Your day, on the pages a member reaches from it. */
.bt-homecrumb { margin: 8px 0 2px; }
.bt-homecrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  list-style: none; margin: 0; padding: 0; font-size: .85rem; }
.bt-homecrumb li + li::before { content: "/"; margin-right: 8px; color: var(--mh-dim); }
.bt-homecrumb a { color: var(--mh-accent-ink); font-weight: 600; text-decoration: none; }
.bt-homecrumb a:hover { text-decoration: underline; }
.bt-homecrumb li[aria-current] { color: var(--mh-ink-2); }

/* Ask for help. */
.help-form { display: flex; gap: 8px; margin: 2px 0 8px; }
.help-form input { flex: 1 1 auto; min-width: 0; padding: 5px 10px; font-size: calc(.9rem * var(--fc-scale, 1));
  border: 1px solid rgba(127,127,127,.4); border-radius: 6px; background: transparent;
  color: inherit; }
.help-form input:focus-visible { outline: 2px solid #1c6b33; outline-offset: 1px; }
.help-asked { margin: 0 0 4px; font-size: calc(.85rem * var(--fc-scale, 1)); font-weight: 600; }
.help-said { margin: 0 0 6px; font-size: calc(.9rem * var(--fc-scale, 1)); white-space: pre-line; }
.help-note { margin: 6px 0 0; font-size: calc(.76rem * var(--fc-scale, 1)); color: var(--mh-ink-3); }
.help-more { margin: 8px 0 0; }
.help-more .member-panel-sub { margin: 6px 0 1px; }
.help-links { list-style: none; margin: 0; padding: 0; font-size: calc(.88rem * var(--fc-scale, 1)); }
.help-links li { padding: 1px 0; }
/* htmx adds .htmx-request to the indicator while the request is in flight. */
.help-waiting { display: none; margin: 0 0 6px; font-size: calc(.85rem * var(--fc-scale, 1)); color: var(--mh-ink-3); }
.help-waiting.htmx-request { display: block; }
.help-answer-refused .help-said, .help-answer-escalate .help-said { color: var(--mh-ink-2); }

/* Chart text.

   Hyper paints every axis label, title and subtitle with `--ct-secondary-color`, a mid grey
   chosen to sit quietly. On the grounds our charts are actually drawn on that is 3.28:1 on the
   classic shell -- failing AA in both its themes, on every chart on the site, since the charts
   were built. Kenny reported it on the new design; the old one was only marginally better.

   A stylesheet rule beats the `fill` attribute ApexCharts writes from its `foreColor` option,
   so this is the owner of chart ink and there is no JS setting it. The body colour follows the
   theme, so one declaration serves both. */
.apexcharts-title-text,
.apexcharts-subtitle-text,
.apexcharts-xaxis text,
.apexcharts-yaxis text,
.apexcharts-yaxis-title text,
.apexcharts-xaxis-title text{ fill:var(--ct-body-color); }
/* The legend is HTML, not SVG, and carries an inline colour from `foreColor`. */
.apexcharts-legend-text{ color:var(--ct-body-color) !important; }

/* The chart's own export menu. ApexCharts ships it white-on-white until something paints it:
   the app stylesheet only styles the HOVER state, so at rest "Download SVG" sat at 1:1 in both
   themes -- present, clickable, and invisible. It is hidden behind the hamburger, which is why
   an audit only sees it with --expand. */
.apexcharts-menu{ background:var(--ct-secondary-bg); border:1px solid var(--ct-border-color); }
.apexcharts-menu-item{ color:var(--ct-body-color); }

/* Topbar readability in dark mode.

   Hyper paints topbar links with `--ct-secondary-color`, a mid grey chosen to read as
   secondary. On the dark topbar ground that is 3.09:1, and the labels under the icons are
   10.4px -- so "Logout", "Profile" and their neighbours have been under AA for every customer
   using dark mode. Light mode measures 4.50-4.69 and is left alone.

   These are the lightest values that clear 4.5:1 on that ground (4.98 and 4.77), so the
   hierarchy the grey was chosen for survives: the links stay quieter than the page ink, they
   are simply legible now. Hierarchy by way of unreadable text is not hierarchy. */
html[data-bs-theme="dark"] .topbar-menu .nav-link{ color:#aeb9c4; }
/* Bootstrap's indigo is chosen against white, so the tier badge is white at 3.55:1 -- in BOTH
   themes. Darkened here only; the same pair is used elsewhere on the site and repainting
   `bg-primary` everywhere is a wider decision than this one. */
.topbar-menu .badge.bg-primary{ background-color:#5a63d8 !important; }

/* The top menu reads as one row of words, so it has to sit on one line.

   Two things stopped it. Hyper zeroes the first item's left padding
   (`.topnav .navbar-nav .nav-item:first-of-type .nav-link{padding-left:0}`), so HOME sat
   flush against the edge while every other item was inset 20px. And the items WITH a dropdown
   caret are 4px taller than the two without, so with `align-items:center` their text centred
   2px lower — HOME and BLOG at 128.7, the other seven at 130.7.

   The height is equalised rather than the caret removed: the caret is Hyper's and the boxes
   are what differ, not the type. */
.topnav .navbar-nav .nav-item:first-of-type .nav-link { padding-left: 20px; }
/* A fixed height, not a minimum: the plain links are SHORTER than the caret ones on the
   turtle shell (42 vs 46) and TALLER on the classic one (48 vs 46), so a floor fixes one and
   not the other. Only where the menu is a row -- below lg it collapses into a stack. */
@media (min-width: 992px) {
    .topnav .navbar-nav > .nav-item > .nav-link { height: 46px; }
}

/* Day choice on Search Horse Races -- the classic side. The words are labels now, so they
   need a resting style here as well as in the turtle sheet. */
.bt-daypick { display: inline-flex; gap: 4px; }
.bt-daypick-opt { display: inline-flex; align-items: center; gap: 7px; margin: 0;
    padding: 4px 10px; border: 1px solid var(--ct-border-color); border-radius: 6px;
    cursor: pointer; color: var(--ct-body-color); }
.bt-daypick-opt:hover { background: var(--ct-tertiary-bg); }

/* Your day: the four inks the panels use, so the dark shell is not the light one's colours
   on a dark ground. Light values are exactly what the literals were, so light is unchanged.
   The floor is 4.5:1 on Bootstrap's dark card (#343a40), which is what these clear. */
:root {
  --mh-ink-2: #3c4a41;      /* body text inside a panel */
  --mh-ink-3: #4a5b50;      /* labels, times, counts */
  --mh-accent-ink: #1c6b33; /* the green when it is TEXT, not a ground */
  --mh-dim: #616f66;        /* a drift, stated quietly -- 5.1:1, was 4.33 and short of AA */
  --mh-move-out: #d10011;   /* drifting, the same red the card uses */
  --mh-surface: #fff;       /* the small round controls */
}
[data-bs-theme="dark"] {
  --mh-ink-2: #c9d6cd;
  --mh-ink-3: #a8b8ad;
  --mh-accent-ink: #7ec98f;
  --mh-dim: #b0bdb4;
  --mh-move-out: #ff7f75;
  --mh-surface: #2b3035;
}

/* Quick Settings: which card a toggle reaches. */
.qs-surf{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px;
          padding:8px 10px; border:1px solid var(--bs-border-color, #dee2e6);
          border-radius:6px; }
.qs-surf-lbl{ font-weight:600; }
.qs-surf label{ display:inline-flex; align-items:center; gap:5px; margin:0;
                cursor:pointer; white-space:nowrap; }
.qs-surf input{ margin:0; }