/* Race Manager Custom CSS Overrides */
/* Primary brand color: #2aa197 */

[data-bs-theme="light"] {
  --tblr-body-color: #212121;
} 

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

/* Apply Roboto Condensed as the primary font */
body {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1rem !important; /* Slightly larger base font size for condensed font */
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto Condensed', sans-serif !important;
}

/* Standard badge styling - white text for all badges */
.badge {
  color: white !important;
}

.navbar-brand, .logo-text {
  font-family: 'Roboto Condensed', sans-serif !important;
}

.btn {
  font-family: 'Roboto Condensed', sans-serif !important;
  font-size: 0.95rem !important; /* Slightly larger for buttons */
}

.form-control, .form-select {
  font-family: 'Roboto Condensed', sans-serif !important;
  font-size: 0.95rem !important; /* Slightly larger for form inputs */
}

.card, .alert, .dropdown-menu, .table {
  font-family: 'Roboto Condensed', sans-serif !important;
}

.nav-link, .sidebar-nav, .breadcrumb {
  font-family: 'Roboto Condensed', sans-serif !important;
  font-size: 0.9rem !important; /* Slightly larger for navigation */
}

.navbar-nav .nav-link {
  font-size: 0.95rem !important; /* Better size for main navigation */
}

.dropdown-item {
  font-size: 0.9rem !important; /* Slightly larger for dropdown items */
}

/* Apply Roboto Condensed font */
body, .navbar, .nav-link, .dropdown-item, .btn, .card, .page-header, .page-title, .page-subtitle {
  font-family: 'Roboto Condensed', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Ensure the logo text uses the font */
.logo-text {
  font-family: 'Roboto Condensed', sans-serif !important;
  font-weight: 700;
}

.demo-banner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.avatar-federation {
  background: var(--tblr-primary);
  color: white;
  font-weight: 600;
}

/* Layout improvements */
.layout-fluid .container-fluid,
.layout-fluid .container-xl {
  max-width: none;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Vertical navigation improvements */
.navbar-vertical .navbar-nav .nav-item .nav-link {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  margin: 0.125rem 0.5rem;
}

.navbar-vertical .navbar-nav .nav-item .nav-link:hover {
  background-color: rgba(var(--tblr-primary-rgb), 0.1);
}

.navbar-vertical .navbar-nav .nav-item .nav-link.active {
  background-color: var(--tblr-primary);
  color: white;
}

/* Dropdown improvements in vertical nav */
.navbar-vertical .dropdown-menu {
  position: static;
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
}

.navbar-vertical .dropdown-item {
  padding: 0.375rem 1rem 0.375rem 2.5rem;
  border-radius: 0.25rem;
  margin: 0.125rem 0.5rem;
}

.navbar-vertical .dropdown-item:hover {
  background-color: rgba(var(--tblr-primary-rgb), 0.05);
}

/* Collapsible sidebar menu improvements */
.navbar-vertical .nav-item.has-submenu > .nav-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-vertical .nav-item.has-submenu > .nav-link::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 0.35em solid;
  border-right: 0.35em solid transparent;
  border-bottom: 0.35em solid transparent;
  border-top: 0.35em solid transparent;
  transition: transform 0.15s ease;
  margin-left: auto;
  margin-right: 0.5rem;
}

.navbar-vertical .nav-item.has-submenu > .nav-link.collapsed::after {
  transform: rotate(-90deg);
}

.navbar-vertical .nav-item.has-submenu > .nav-link:not(.collapsed)::after {
  transform: rotate(0deg);
}

      .navbar-vertical .collapse-menu {
  transition: all 0.15s ease-in-out;
}

.navbar-vertical .dropdown-item {
  padding: 0.375rem 1rem 0.375rem 2.5rem;
  border-radius: 0.25rem;
  margin: 0.125rem 0 0.5rem 0.75rem;
}

/* Ensure top header dropdowns have proper styling in all layouts */
.page header.navbar .dropdown-menu,
.page .navbar-expand-md .dropdown-menu {
  background-color: var(--tblr-bg-surface) !important;
  border: var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color) !important;
  border-radius: var(--tblr-border-radius) !important;
  box-shadow: var(--tblr-box-shadow-dropdown) !important;
  position: absolute !important;
  z-index: 1060 !important;
  min-width: 10rem !important;
  padding: 0.5rem 0 !important;
  margin: 0 !important;
}


/* FORCE ALL DROPDOWNS TO APPEAR ON TOP */
.dropdown-menu {
  z-index: 9999 !important;
  position: fixed !important;
}

/* Specifically target header dropdowns */
header .dropdown-menu,
.navbar .dropdown-menu {
  z-index: 9999 !important;
  position: fixed !important;
}



.page header.navbar .dropdown-item,
.page .navbar-expand-md .dropdown-item {
  padding: 0.375rem 1rem !important;
  margin: 0 !important;
  border-radius: 0 !important;
  color: var(--tblr-body-color) !important;
  background-color: transparent !important;
}

.page header.navbar .dropdown-item:hover,
.page header.navbar .dropdown-item:focus,
.page .navbar-expand-md .dropdown-item:hover,
.page .navbar-expand-md .dropdown-item:focus {
  background-color: var(--tblr-bg-surface-secondary) !important;
  color: var(--tblr-body-color) !important;
}

/* Ensure horizontal navbar content dropdowns also work */
.page:not(.navbar-vertical) .navbar-nav .dropdown-menu {
  background-color: var(--tblr-bg-surface);
  border: var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  box-shadow: var(--tblr-box-shadow-dropdown);
  position: absolute !important;
  z-index: 1000;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0;
}

/* Hide main header logo in vertical layout to avoid duplication on desktop */
@media (min-width: 992px) {
  .page.navbar-vertical header.navbar .navbar-brand {
      display: none;
  }
  
  /* Push navbar controls to the right in vertical layout on desktop */
  .page.navbar-vertical header.navbar .container-fluid {
      justify-content: flex-end;
  }
  
  .page.navbar-vertical header.navbar .navbar-nav {
      margin-left: auto;
  }
}

/* Mobile navigation menu styling - pushes content down */
#mobile-sidebar-menu {
  background: var(--tblr-bg-surface);
  border-bottom: var(--tblr-border-width) solid var(--tblr-border-color);
  padding: 0.5rem 0;
}

#mobile-sidebar-menu .navbar-nav {
  flex-direction: column;
  padding-left: 0;
  width: 100%;
}

#mobile-sidebar-menu .nav-item {
  margin: 0;
  width: 100%;
}

#mobile-sidebar-menu .nav-link {
  padding: 0.75rem 1rem;
  color: var(--tblr-body-color);
  border-radius: 0.375rem;
  margin: 0.125rem 0.5rem;
  display: flex;
  align-items: center;
}

#mobile-sidebar-menu .nav-link:hover {
  background-color: rgba(var(--tblr-primary-rgb), 0.1);
}

#mobile-sidebar-menu .nav-link-icon {
  margin-right: 0.5rem;
  width: 1.5rem;
  text-align: center;
}

#mobile-sidebar-menu .dropdown-item {
  padding: 0.5rem 1rem 0.5rem 3rem;
  margin: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  color: var(--tblr-body-color);
}

#mobile-sidebar-menu .dropdown-item:hover {
  background-color: rgba(var(--tblr-primary-rgb), 0.05);
}

/* Collapsible submenu styling for mobile */
#mobile-sidebar-menu .collapse-menu {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}

#mobile-sidebar-menu .has-submenu > .nav-link::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 0.35em solid;
  border-right: 0.35em solid transparent;
  border-bottom: 0.35em solid transparent;
  border-top: 0.35em solid transparent;
  transition: transform 0.15s ease;
  margin-left: auto;
  margin-right: 0.5rem;
}

#mobile-sidebar-menu .has-submenu > .nav-link.collapsed::after {
  transform: rotate(-90deg);
}

#mobile-sidebar-menu .has-submenu > .nav-link:not(.collapsed)::after {
  transform: rotate(0deg);
}

/* Hide mobile sidebar on desktop */
@media (min-width: 768px) {
  #mobile-sidebar-menu {
      display: none !important;
  }
}

/* Hide horizontal navbar on mobile for both layouts */
@media (max-width: 767.98px) {
  .horizontal-navbar {
      display: none !important;
  }
}

/* Hide horizontal navbar on desktop in vertical layout only */
@media (min-width: 768px) {
  .page.navbar-vertical .horizontal-navbar {
      display: none !important;
  }
}

/* Always show sidebar menu content on desktop in vertical layout */
@media (min-width: 992px) {
  .page.navbar-vertical #sidebar-menu {
      display: block !important;
  }
}

/* Mobile responsive behavior - same for both layouts */
@media (max-width: 767.98px) {
  /* Always show main header logo on mobile */
  .page header.navbar .navbar-brand {
      display: block !important;
      flex: 1;
  }
  
  /* Hide vertical sidebar completely on mobile */
  .page.navbar-vertical .navbar-vertical {
      display: none !important;
  }
  
  /* Ensure proper mobile header layout */
  .page header.navbar .container-fluid {
      justify-content: space-between !important;
      padding-left: 1rem;
      padding-right: 1rem;
  }
  
  /* Ensure proper spacing for mobile header elements */
  .page header.navbar .navbar-nav {
      margin-left: 0;
      flex-direction: row;
      align-items: center;
  }
}

/* Always keep container-md boxed regardless of layout mode */
.container-md {
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* Force login pages to stay centered and boxed - target specific login structure */
.page-center .container-tight,
.page-center .container,
.layout-fluid .page-center .container-tight,
.layout-fluid .page-center .container {
  max-width: 448px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* Force boxed layout for any auth/login related containers */
body[class*="login"] .container-fluid,
body[class*="auth"] .container-fluid,
.auth-page .container-fluid,
.login-page .container-fluid,
.page-body:has(form[action*="login"]) .container-fluid,
.page-body:has(form[action*="auth"]) .container-fluid {
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* Override any layout-fluid effects for auth pages */
.layout-fluid body[class*="login"] .container-fluid,
.layout-fluid body[class*="auth"] .container-fluid,
.layout-fluid .auth-page .container-fluid,
.layout-fluid .login-page .container-fluid {
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Strong selector for login forms - highest specificity */
.layout-fluid .page-wrapper .page-body .container-md,
.layout-fluid .page-body:has(form[action*="login"]) .container-md,
.layout-fluid .page-body:has(form[action*="auth"]) .container-md {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* Ensure consistent vertical positioning for login pages */
.page-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: calc(100vh - 120px) !important; /* Account for header height */
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.layout-fluid .page-center {
  max-width: none !important;
  min-height: calc(100vh - 120px) !important; /* Same height calculation */
}

/* Ensure smooth transitions and proper spacing */
.navbar-vertical .nav-item.has-submenu > .nav-link {
  position: relative;
}

.navbar-vertical .collapse-menu {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}

.navbar-vertical .collapse-menu .nav-item {
  margin: 0;
}

/* Visual indicator for expanded state */
.navbar-vertical .nav-item.has-submenu > .nav-link:not(.collapsed) {
  background-color: rgba(var(--tblr-primary-rgb), 0.05);
}

/* Active layout indicator */
.nav-switch.active,
.width-switch.active {
  background-color: var(--tblr-primary);
  color: white;
}

/* Horizontal navigation full width fixes */
.page:not(.navbar-vertical) .navbar .container-fluid {
  max-width: none !important;
  width: 100% !important;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Ensure navbar stretches full width on horizontal layout */
.page:not(.navbar-vertical) .navbar {
  width: 100%;
}

/* Override any container width restrictions for horizontal nav */
.navbar .container-fluid {
  max-width: none !important;
}

/* Force full width for all navbar containers in horizontal mode */
.page:not(.navbar-vertical) header.navbar .container-fluid,
.page:not(.navbar-vertical) .navbar-expand-md .container-fluid {
  max-width: 100vw !important;
  width: 100vw !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* Ensure the navbar itself takes full viewport width */
.page:not(.navbar-vertical) header.navbar {
  width: 100vw !important;
  max-width: 100vw !important;
  left: 0;
  right: 0;
  margin: 0 !important;
}

/* Override Bootstrap container max-width for horizontal layout */
.page:not(.navbar-vertical) .container-fluid {
  max-width: none !important;
}

/* Target both header navbars specifically */
.page:not(.navbar-vertical) header.navbar-expand-md .container-fluid {
  max-width: 100vw !important;
  width: 100vw !important;
}

/* Remove any margin constraints */
.page:not(.navbar-vertical) .navbar {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Force override Bootstrap container responsive breakpoints */
@media (min-width: 576px) {
  .page:not(.navbar-vertical) .container-fluid {
      max-width: none !important;
      width: 100% !important;
  }
}

@media (min-width: 768px) {
  .page:not(.navbar-vertical) .container-fluid {
      max-width: none !important;
      width: 100% !important;
  }
}

@media (min-width: 992px) {
  .page:not(.navbar-vertical) .container-fluid {
      max-width: none !important;
      width: 100% !important;
  }
}

@media (min-width: 1200px) {
  .page:not(.navbar-vertical) .container-fluid {
      max-width: none !important;
      width: 100% !important;
  }
}

@media (min-width: 1400px) {
  .page:not(.navbar-vertical) .container-fluid {
      max-width: none !important;
      width: 100% !important;
  }
}

/* Dark theme sticky header */
[data-bs-theme="dark"] .navbar.sticky-header {
  background-color: rgba(26, 32, 44, 0.95) !important;
}

/* Demo banner adjustments for sticky header */
.demo-banner + .page .navbar.sticky-header {
  top: 0; /* Demo banner will be above the sticky header */
}

/* Ensure proper spacing for main content when header is sticky */
.navbar.sticky-header + .navbar.sticky-header {
  top: 56px; /* Adjust based on first navbar height */
  z-index: 1025; /* Lower z-index for second header */
}

/* Fix dropdown menu z-index to appear above second header */
.navbar .dropdown-menu {
  z-index: 1035 !important; /* Higher than both headers */
}

/* Ensure dropdown arrow also has proper z-index */
.navbar .dropdown-menu.dropdown-menu-arrow::before {
  z-index: 1036 !important;
}

/* Additional dropdown positioning fixes */
.navbar .nav-item.dropdown {
  position: relative;
}

.navbar .dropdown-menu.show {
  z-index: 1035 !important;
  position: absolute !important;
}

/* Ensure dropdown works on mobile devices */
@media (max-width: 768px) {
  .navbar .dropdown-menu {
    z-index: 1040 !important; /* Even higher on mobile */
    position: absolute !important;
  }
}

/* Platform landing specific adjustments */
.platform-landing .navbar.sticky-header {
  background-color: rgba(255, 255, 255, 0.95) !important;
}

[data-bs-theme="dark"] .platform-landing .navbar.sticky-header {
  background-color: rgba(26, 32, 44, 0.95) !important;
}

/* Anchor links offset for sticky header */
.anchor-offset {
  scroll-margin-top: 50px; /* Adjust for sticky header height */
  padding-top: 0 !important;
}

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* Target sections for platform landing anchors */
#demo,
#pricing,
#features {
  scroll-margin-top: 50px; /* Account for both navbars in sticky header */
}

:root {
  /* Primary color and variations */
  --bs-primary: #2aa197;
  --bs-primary-rgb: 42, 161, 151;
  
  /* Color variations */
  --bs-primary-dark: #248a80;
  --bs-primary-darker: #1e7169;
  --bs-primary-light: #3db3a8;
  --bs-primary-lighter: #50c5bb;
  
  /* Light theme variations */
  --bs-primary-50: #f0fbfa;
  --bs-primary-100: #ccf2ef;
  --bs-primary-200: #99e6df;
  --bs-primary-300: #66d9cf;
  --bs-primary-400: #33ccbf;
  --bs-primary-500: #2aa197;
  --bs-primary-600: #248a80;
  --bs-primary-700: #1e7169;
  --bs-primary-800: #185951;
  --bs-primary-900: #12403a;
  
  /* Tabler specific CSS variables */
  --tblr-primary: #2aa197;
  --tblr-primary-rgb: 42, 161, 151;
  --tblr-primary-fg: #ffffff;
  --tblr-primary-lt: rgba(42, 161, 151, 0.1);
  --tblr-primary-lt-rgb: 42, 161, 151;
  
  /* Override green with our teal brand color */
  --bs-green: #2aa197;
  --bs-green-rgb: 42, 161, 151;
  --tblr-green: #2aa197;
  --tblr-green-rgb: 42, 161, 151;
}

/* Green color overrides - use our teal brand color */
.bg-green {
  background-color: #2aa197 !important;
  color: #ffffff !important;
}

.bg-green-lt,
.bg-green-light {
  background-color: rgba(42, 161, 151, 0.1) !important;
  color: #2aa197 !important;
}

.text-green {
  color: #2aa197 !important;
}

.border-green {
  border-color: #2aa197 !important;
}

.btn-green {
  background-color: #2aa197 !important;
  border-color: #2aa197 !important;
  color: #ffffff !important;
}

.btn-green:hover,
.btn-green:focus {
  background-color: #248a80 !important;
  border-color: #248a80 !important;
  color: #ffffff !important;
}

.btn-green:active,
.btn-green.active {
  background-color: #1e7169 !important;
  border-color: #1e7169 !important;
  color: #ffffff !important;
}

.btn-outline-green {
  color: #2aa197 !important;
  border-color: #2aa197 !important;
}

.btn-outline-green:hover,
.btn-outline-green:focus {
  background-color: #2aa197 !important;
  border-color: #2aa197 !important;
  color: #ffffff !important;
}

.alert-title {
  color: #2aa197 !important;
}

.alert-success {
  --tblr-alert-color: #2aa197 !important;
}

.alert-green {
  color: #185951 !important;
  background-color: #ccf2ef !important;
  border-color: #99e6df !important;
}

.badge.bg-green {
  background-color: #2aa197 !important;
  color: #ffffff !important;
}

.badge.bg-green-lt {
  background-color: rgba(42, 161, 151, 0.1) !important;
  color: #2aa197 !important;
}

.avatar.bg-green,
.avatar.bg-green-lt {
  background-color: rgba(42, 161, 151, 0.1) !important;
  color: #2aa197 !important;
}

.status.bg-green {
  background-color: #2aa197 !important;
}

.ribbon.bg-green {
  background-color: #2aa197 !important;
}

.progress-bar.bg-green {
  background-color: #2aa197 !important;
}

/* Icon colors */
.icon.text-green {
  color: #2aa197 !important;
}

/* Dark mode green adjustments */
[data-bs-theme="dark"] {
  --bs-green: #3db3a8;
  --bs-green-rgb: 61, 179, 168;
  --tblr-green: #3db3a8;
  --tblr-green-rgb: 61, 179, 168;
}

[data-bs-theme="dark"] .bg-green {
  background-color: #3db3a8 !important;
}

[data-bs-theme="dark"] .text-green {
  color: #3db3a8 !important;
}

[data-bs-theme="dark"] .border-green {
  border-color: #3db3a8 !important;
}

[data-bs-theme="dark"] .btn-green {
  background-color: #3db3a8 !important;
  border-color: #3db3a8 !important;
}

[data-bs-theme="dark"] .btn-green:hover,
[data-bs-theme="dark"] .btn-green:focus {
  background-color: #2aa197 !important;
  border-color: #2aa197 !important;
}

/* Button Primary */
.btn-primary {
  background-color: #2aa197 !important;
  border-color: #2aa197 !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #248a80 !important;
  border-color: #248a80 !important;
  color: #ffffff !important;
}

.btn-primary:active,
.btn-primary.active {
  background-color: #1e7169 !important;
  border-color: #1e7169 !important;
  color: #ffffff !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
  background-color: #2aa197 !important;
  border-color: #2aa197 !important;
  opacity: 0.65;
}

/* Button Outline Primary */
.btn-outline-primary {
  color: #2aa197 !important;
  border-color: #2aa197 !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: #2aa197 !important;
  border-color: #2aa197 !important;
  color: #ffffff !important;
}

.btn-outline-primary:active,
.btn-outline-primary.active {
  background-color: #2aa197 !important;
  border-color: #2aa197 !important;
  color: #ffffff !important;
}

/* Links */
.link-primary {
  color: #2aa197 !important;
}

.link-primary:hover,
.link-primary:focus {
  color: #248a80 !important;
}

/* Text Colors */
.text-primary {
  color: #2aa197 !important;
}

/* Background Colors */
.bg-primary {
  background-color: #2aa197 !important;
  color: #ffffff !important;
}

.bg-primary-lt,
.bg-primary-light {
  background-color: rgba(42, 161, 151, 0.1) !important;
  color: #2aa197 !important;
}

/* Border Colors */
.border-primary {
  border-color: #2aa197 !important;
}

.btn-outline-success {
  color: #2aa197 !important;
  border-color: #2aa197 !important;
}

.btn-outline-success:hover {
  color: #ffffff !important;
  background-color: #2aa197 !important;
  border-color: #2aa197 !important;
}

/* Alerts */
.alert-primary {
  color: #185951 !important;
  background-color: #ccf2ef !important;
  border-color: #99e6df !important;
}

.alert-primary .alert-link {
  color: #12403a !important;
}

/* Badges */
.badge.bg-primary {
  background-color: #2aa197 !important;
  color: #ffffff !important;
}

.badge.bg-primary-lt {
  background-color: rgba(42, 161, 151, 0.1) !important;
  color: #2aa197 !important;
}

/* Progress Bars */
.progress-bar {
  background-color: #2aa197 !important;
}

.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
}

/* Form Controls */
.form-control:focus {
  border-color: rgba(42, 161, 151, 0.5) !important;
  box-shadow: 0 0 0 0.25rem rgba(42, 161, 151, 0.25) !important;
}

.form-select:focus {
  border-color: rgba(42, 161, 151, 0.5) !important;
  box-shadow: 0 0 0 0.25rem rgba(42, 161, 151, 0.25) !important;
}

.form-check-input:checked {
  background-color: #2aa197 !important;
  border-color: #2aa197 !important;
}

.form-check-input:focus {
  border-color: rgba(42, 161, 151, 0.5) !important;
  box-shadow: 0 0 0 0.25rem rgba(42, 161, 151, 0.25) !important;
}

/* Navigation */
.navbar-brand {
  color: #2aa197 !important;
}

.nav-link.active {
  color: #2aa197 !important;
}

.nav-pills .nav-link.active {
  background-color: #2aa197 !important;
  color: #ffffff !important;
}

/* Pagination */
.page-link {
  color: #2aa197 !important;
}

.page-link:hover {
  color: #248a80 !important;
  background-color: rgba(42, 161, 151, 0.1) !important;
  border-color: #2aa197 !important;
}

.page-item.active .page-link {
  background-color: #2aa197 !important;
  border-color: #2aa197 !important;
  color: #ffffff !important;
}

/* Tables */
.table-primary {
  --bs-table-bg: rgba(42, 161, 151, 0.1) !important;
  --bs-table-striped-bg: rgba(42, 161, 151, 0.05) !important;
  --bs-table-hover-bg: rgba(42, 161, 151, 0.15) !important;
  --bs-table-active-bg: rgba(42, 161, 151, 0.15) !important;
  color: #185951 !important;
}

/* Dropdowns */
.dropdown-item.active,
.dropdown-item:active {
  background-color: #2aa197 !important;
  color: #ffffff !important;
}

/* List Groups */
.list-group-item.active {
  background-color: #2aa197 !important;
  border-color: #2aa197 !important;
  color: #ffffff !important;
}

/* Cards */
.card-header.bg-primary {
  background-color: #2aa197 !important;
  border-color: #2aa197 !important;
  color: #ffffff !important;
}

/* Tabler Specific Overrides */
.navbar-brand-autodark {
  color: #2aa197 !important;
}


.status.bg-primary {
  background-color: #2aa197 !important;
}

.ribbon.bg-primary {
  background-color: #2aa197 !important;
}

/* Dark mode adjustments */
[data-bs-theme="dark"] {
  --bs-primary: #3db3a8;
  --bs-primary-rgb: 61, 179, 168;
  --tblr-primary: #3db3a8;
  --tblr-primary-rgb: 61, 179, 168;
}

[data-bs-theme="dark"] .btn-primary {
  background-color: #3db3a8 !important;
  border-color: #3db3a8 !important;
}

[data-bs-theme="dark"] .btn-primary:hover,
[data-bs-theme="dark"] .btn-primary:focus {
  background-color: #2aa197 !important;
  border-color: #2aa197 !important;
}

[data-bs-theme="dark"] .text-primary {
  color: #3db3a8 !important;
}

[data-bs-theme="dark"] .bg-primary {
  background-color: #3db3a8 !important;
}

[data-bs-theme="dark"] .border-primary {
  border-color: #3db3a8 !important;
}

/* Custom gradient backgrounds using the brand color */
.bg-gradient-primary {
  background: linear-gradient(135deg, #2aa197 0%, #248a80 100%) !important;
  color: #ffffff !important;
}

.bg-gradient-green {
  background: linear-gradient(135deg, #2aa197 0%, #248a80 100%) !important;
  color: #ffffff !important;
}

/* Special Race Manager branding */
.logo-text {
  color: var(--tblr-body-color) !important;
  font-weight: 300;
  font-size: 1.1rem;
  text-decoration: none!important;
}

.navbar-brand a {
  text-decoration: none!important;
}

/* Dark theme logo text */
[data-bs-theme="dark"] .logo-text {
  color: var(--tblr-body-color) !important;
}

/* Custom Logo Styling */
.navbar-logo {
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.2s ease-in-out;
}

.navbar-logo:hover {
  transform: scale(1.05);
}

/* Ensure logo maintains aspect ratio */
.navbar-brand img {
  max-height: 32px;
  width: auto;
  height: auto;
}

/* Dark mode logo adjustments */
[data-bs-theme="dark"] .navbar-logo {
  filter: brightness(1.1);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .navbar-logo {
    width: 28px;
    height: 28px;
  }
  
  .navbar-brand img {
    max-height: 28px;
  }
}

/* Platform landing page specific overrides */
.hero-gradient {
  background: linear-gradient(135deg, #2aa197 0%, #248a80 100%) !important;
}

/* Loading spinners */
.spinner-border.text-primary {
  color: #2aa197 !important;
}

.spinner-border.text-green {
  color: #2aa197 !important;
}

/* Icons with primary color */
.icon.text-primary {
  color: #2aa197 !important;
}

/* Success states - keep green but adjust to work well with our primary */
.btn-success {
  background-color: #2aa197 !important;
  border-color: #2aa197 !important;
}

.btn-success:hover {
  background-color: #248a80 !important;
  border-color: #248a80 !important;
}

/* Make sure our brand color works well with existing design */
.card.border-primary {
  border-color: #2aa197 !important;
}

.card.border-primary .card-header {
  background-color: rgba(42, 161, 151, 0.1) !important;
  border-bottom-color: #2aa197 !important;
  color: #2aa197 !important;
}

/* Ensure proper contrast for accessibility */
.bg-primary .text-muted {
  color: rgba(255, 255, 255, 0.7) !important;
}

.bg-primary .opacity-75 {
  opacity: 0.75 !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

.bg-green .text-muted {
  color: rgba(255, 255, 255, 0.7) !important;
}

.bg-green .opacity-75 {
  opacity: 0.75 !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Platform Landing Background Styles */
.platform-landing {
  /* Subtle background with light blob effect */
  background: 
    radial-gradient(circle at 80% 20%, rgba(42, 161, 151, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(42, 161, 151, 0.05) 0%, transparent 50%),
    #f8f9fa;
  min-height: 100vh;
}

/* Container positioning */
.platform-landing .container-xl {
  position: relative;
  z-index: 1;
}

/* Hero section styling */
.platform-landing .hero-content {
  background: transparent;
  border-radius: 0;
  padding: 0;
  backdrop-filter: none;
  box-shadow: none;
  margin: 2rem 0;
}

.hero-content h1 {
  color: var(--tblr-body-color) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hero-content .lead {
  color: #4a4a4a;
}

.platform-landing .hero-content .small {
  color: #6a6a6a;
}

.platform-landing .hero-content .small a {
  color: #2aa197;
  text-decoration: none;
}

.platform-landing .hero-content .small a:hover {
  color: #248a80;
  text-decoration: underline;
}

a {
  color: #2aa197;
  text-decoration: none;
}

/* Clean card styling for platform landing */
.platform-landing .card {
  background: #fff;
  backdrop-filter: none;
  border: 1px solid rgba(0, 0, 0, 0.125);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.platform-landing .bg-gradient-primary {
  background: rgba(42, 161, 151, 0.95) !important;
  backdrop-filter: blur(10px);
}

.platform-landing .navbar {
  background: #fff !important;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.platform-landing .page-header {
  background: transparent;
}

.platform-landing .page-header .page-title,
.platform-landing .page-header .page-pretitle {
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Text contrast improvements */
.platform-landing .hero-section h1,
.platform-landing .hero-section .lead {
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Dark mode adjustments for platform landing */
[data-bs-theme="dark"] .platform-landing {
  /* Subtle background with darker blob effect for dark theme */
  background: 
    radial-gradient(circle at 80% 20%, rgba(42, 161, 151, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(42, 161, 151, 0.08) 0%, transparent 50%),
    var(--tblr-dark) !important;
}

[data-bs-theme="dark"] .platform-landing .card {
  background: rgba(26, 32, 44, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .platform-landing .navbar {
  background: rgba(26, 32, 44, 0.95) !important;
}

[data-bs-theme="dark"] .platform-landing .hero-content {
  background: rgba(26, 32, 44, 0.95);
  color: #ffffff;
}

[data-bs-theme="dark"] .platform-landing .hero-content h1 {
  color: #ffffff;
}

[data-bs-theme="dark"] .platform-landing .hero-content .lead {
  color: #e2e8f0;
}

[data-bs-theme="dark"] .platform-landing .hero-content .small {
  color: #a0aec0;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .platform-landing {
    background-attachment: scroll, scroll, scroll;
  }
  
  .platform-landing .card {
    backdrop-filter: blur(5px);
  }
  
  .platform-landing .hero-content {
    padding: 2rem;
    margin: 1rem 0;
  }
}

.avatar {
  color: var(--tblr-body-color) !important;
}

/* Custom Icon Animations & Enhancements */
.avatar .icon {
  transition: all 0.3s ease;
}

.avatar:hover .icon {
  transform: scale(1.1);
}

/* Sport-specific icon colors */
.bg-sport-athletics {
  background-color: #e74c3c !important;
}

.bg-sport-swimming {
  background-color: #3498db !important;
}

.bg-sport-cycling {
  background-color: #f39c12 !important;
}

.bg-sport-running {
  background-color: #27ae60 !important;
}

/* Enhanced card hover effects */
.card:hover {
  transform: translateY(-2px);
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Custom button enhancements */
.btn-primary {
  background: linear-gradient(135deg, #2aa197, #229688);
  border: none;
  box-shadow: 0 4px 15px rgba(42, 161, 151, 0.3);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #229688, #1e7b6f);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(42, 161, 151, 0.4);
}

/* Loading animations */
@keyframes pulse-icon {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.loading .icon {
  animation: pulse-icon 1.5s ease-in-out infinite;
}

/* Enhanced text contrast for platform landing */
.platform-landing h1,
.platform-landing h2,
.platform-landing h3,
.platform-landing .h1,
.platform-landing .h2,
.platform-landing .h3 {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  color: #2c3e50;
}

.platform-landing .text-muted {
  color: #6c757d !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}