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

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

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

/* -------------------------------------------------
   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: 0.92rem !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;
}

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

/* Dark mode semantic overrides */
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 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 */
html[data-bs-theme="dark"] .text-muted,
html[data-bs-theme="dark"] .text-body-secondary {
  color: #9ca3af !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.22rem 0.32rem !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 {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: white !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 *!*/
/*tr.is-hidden {*/
/*    opacity: 0.35;*/
/*    filter: grayscale(100%);*/
/*}*/

/*!* Prevent popovers & accidental clicks *!*/
/*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;*/
/*}*/

/*tr.is-hidden td:first-child::after {*/
/*    content: " (hidden)";*/
/*    font-size: 0.7em;*/
/*    color: #999;*/
/*}*/

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

.bt-saddle-wrap {
  position: relative;
  display: inline-block;
  text-align: center;
  margin-right: 0.25rem;
}

/* Saddle (main number) */
.bt-saddle {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  position: relative;
  top: 1px;
}

/* Draw (positioned beside/above-ish as you like) */
.bt-draw {
  position: absolute;
  left: 100%;
  transform: translate(2px, 2px);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.bt-draw:hover,
.bt-draw:focus {
  text-decoration: none;
}

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

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

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

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

/* 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);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

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

/* -------------------------------------------------
   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.75rem;
  line-height: 1;
  transition: background-color 0.15s ease-in-out;
}

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

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

.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.125rem;
  align-items: center;
}

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

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

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