/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Leaflet map styles */
.leaflet-container {
  height: 100%;
  width: 100%;
  z-index: 1;
}

.leaflet-control-zoom {
  display: none;
}

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

/* Ensure page background changes with dark mode - Tailwind classes handle this, but adding as fallback */
html {
  background-color: #ffffff;
}

html.dark {
  background-color: #0f172a; /* slate-900 */
}

body {
  min-height: 100vh;
  background-color: #ffffff;
  transition: background-color 0.2s ease-in-out;
  overflow-x: hidden;
}

html.dark body {
  background-color: #0f172a; /* slate-900 */
}

/* Flash messages (login, public pages) - dark mode so they're always readable */
html.dark .flash-alert {
  background-color: rgba(127, 29, 29, 0.3); /* red-900/30 */
  border-color: #991b1b; /* red-800 */
  color: #fecaca; /* red-200 */
}

html.dark .flash-alert a,
html.dark .flash-alert button,
html.dark .flash-alert input[type="submit"] {
  color: #f87171; /* red-400 */
}

html.dark .flash-alert a:hover,
html.dark .flash-alert button:hover,
html.dark .flash-alert input[type="submit"]:hover {
  color: #fca5a5; /* red-300 */
}

html.dark .flash-notice {
  background-color: rgba(20, 83, 45, 0.3); /* green-900/30 */
  border-color: #166534; /* green-800 */
  color: #bbf7d0; /* green-200 */
}

/* Impersonation banner button - force black text so it's always readable on white */
.impersonation-banner-button,
.impersonation-banner-button:hover {
  color: #000000 !important;
}

html.dark .impersonation-banner-button,
html.dark .impersonation-banner-button:hover {
  color: rgb(241 245 249) !important; /* slate-100 */
}

/* Custom tooltip styles for smaller, better positioned tooltips */
.tooltip {
  max-width: none;
}

/* Ensure tooltip positioning context */
[data-tooltip-target] {
  position: relative;
}

/* Scroll margin offset for sections to account for sticky toolbar */
#latest-pulses-section,
#weekly-leaderboard,
#photo-album-section,
#weekly-highlights-section,
#profile-highlights-section {
  scroll-margin-top: 6rem;
}

/* iOS Safe Area Insets for native app */
.safe-area-inset-top {
  padding-top: env(safe-area-inset-top);
}

.safe-area-inset-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

.safe-area-inset-left {
  padding-left: env(safe-area-inset-left);
}

.safe-area-inset-right {
  padding-right: env(safe-area-inset-right);
}

/* Force border-slate-200 to render as slate-700 in dark mode */
.dark .border-slate-200,
.dark .border-r.border-slate-200,
.dark .border-t.border-slate-200,
.dark .border-b.border-slate-200,
.dark .border-s.border-slate-200 {
  border-color: var(--color-slate-700) !important;
}

/* Force divide-slate-200 to render as slate-700 in dark mode for table row dividers */
.dark .divide-y.divide-slate-200 > * + * {
  border-top-color: var(--color-slate-700) !important;
}

/* Ensure indicator dots have proper background colors */
.indicator-dot[data-active="false"] {
  background-color: rgb(203 213 225) !important; /* slate-300 for light mode */
}

.dark .indicator-dot[data-active="false"] {
  background-color: rgb(148 163 184) !important; /* slate-400 for dark mode */
}

.indicator-dot[data-active="true"] {
  background-color: rgb(79 70 229) !important; /* indigo-600 for light mode */
}

.dark .indicator-dot[data-active="true"] {
  background-color: rgb(129 140 248) !important; /* indigo-400 for dark mode */
}

/* Force modal backgrounds to be dark in dark mode */
.dark [role="dialog"] .bg-white,
.dark [aria-modal="true"] .bg-white,
.dark [role="dialog"] div[class*="bg-white"],
.dark [aria-modal="true"] div[class*="bg-white"],
.dark [data-leaderboard-help-modal-target="modal"] div[class*="bg-white"],
.dark [data-week-calendar-target="modal"] div[class*="bg-white"],
.dark [data-notification-preferences-target="modal"] div[class*="bg-white"],
.dark [data-waitlist-modal-target="modal"] div[class*="bg-white"],
.dark [data-json-modal-target="modal"] div[class*="bg-white"],
.dark [data-highlight-photo-gallery-target="modal"] div[class*="bg-white"] {
  background-color: rgb(30 41 59) !important; /* slate-800 */
}

/* Force input backgrounds to be dark in dark mode */
.dark input[type="text"].bg-white,
.dark input[type="text"][class*="bg-white"],
.dark input[type="email"].bg-white,
.dark input[type="email"][class*="bg-white"],
.dark input[type="password"].bg-white,
.dark input[type="password"][class*="bg-white"],
.dark input[type="date"].bg-white,
.dark input[type="date"][class*="bg-white"],
.dark input[type="number"].bg-white,
.dark input[type="number"][class*="bg-white"],
.dark textarea.bg-white,
.dark textarea[class*="bg-white"],
.dark select.bg-white,
.dark select[class*="bg-white"] {
  background-color: rgb(15 23 42) !important; /* slate-900 */
}

/* Force inputs with dark:bg-slate-900 to actually be slate-900 (override autofill and any gray backgrounds) */
.dark input[type="text"][class*="dark:bg-slate-900"],
.dark input[type="email"][class*="dark:bg-slate-900"],
.dark input[type="password"][class*="dark:bg-slate-900"],
.dark input[type="date"][class*="dark:bg-slate-900"],
.dark input[type="number"][class*="dark:bg-slate-900"],
.dark input[type="url"][class*="dark:bg-slate-900"],
.dark textarea[class*="dark:bg-slate-900"],
.dark select[class*="dark:bg-slate-900"] {
  background-color: rgb(15 23 42) !important; /* slate-900 */
  border-color: rgb(30 41 59) !important; /* slate-800 */
  color: rgb(241 245 249) !important; /* slate-100 */
}

/* Override any gray backgrounds in dark mode for form inputs */
.dark input[type="text"][class*="bg-gray"],
.dark input[type="email"][class*="bg-gray"],
.dark input[type="password"][class*="bg-gray"],
.dark input[type="date"][class*="bg-gray"],
.dark input[type="number"][class*="bg-gray"],
.dark input[type="url"][class*="bg-gray"],
.dark textarea[class*="bg-gray"],
.dark select[class*="bg-gray"] {
  background-color: rgb(15 23 42) !important; /* slate-900 */
  color: rgb(241 245 249) !important; /* slate-100 */
}

/* Override any gray borders in dark mode for form inputs */
.dark input[type="text"][class*="border-gray"],
.dark input[type="email"][class*="border-gray"],
.dark input[type="password"][class*="border-gray"],
.dark input[type="date"][class*="border-gray"],
.dark input[type="number"][class*="border-gray"],
.dark input[type="url"][class*="border-gray"],
.dark textarea[class*="border-gray"],
.dark select[class*="border-gray"] {
  border-color: rgb(30 41 59) !important; /* slate-800 */
}

/* Override text-gray-900 in dark mode for form inputs to use slate-100 */
.dark input[type="text"][class*="text-gray-900"],
.dark input[type="email"][class*="text-gray-900"],
.dark input[type="password"][class*="text-gray-900"],
.dark input[type="date"][class*="text-gray-900"],
.dark input[type="number"][class*="text-gray-900"],
.dark input[type="url"][class*="text-gray-900"],
.dark textarea[class*="text-gray-900"],
.dark select[class*="text-gray-900"] {
  color: rgb(241 245 249) !important; /* slate-100 */
}

/* Force all form inputs in dark mode to use slate-100 text color */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="date"],
.dark input[type="number"],
.dark input[type="url"],
.dark input[type="tel"],
.dark input[type="search"],
.dark textarea,
.dark select {
  color: rgb(241 245 249) !important; /* slate-100 */
}

/* Override browser autofill styles in dark mode */
.dark input:-webkit-autofill,
.dark input:-webkit-autofill:hover,
.dark input:-webkit-autofill:focus,
.dark input:-webkit-autofill:active,
.dark textarea:-webkit-autofill,
.dark textarea:-webkit-autofill:hover,
.dark textarea:-webkit-autofill:focus,
.dark textarea:-webkit-autofill:active,
.dark select:-webkit-autofill,
.dark select:-webkit-autofill:hover,
.dark select:-webkit-autofill:focus,
.dark select:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px rgb(15 23 42) inset !important; /* slate-900 */
  -webkit-text-fill-color: rgb(241 245 249) !important; /* slate-100 */
  box-shadow: 0 0 0 1000px rgb(15 23 42) inset !important; /* slate-900 */
  background-color: rgb(15 23 42) !important; /* slate-900 */
}

/* Force placeholder text to be slate-500 in dark mode for all inputs */
.dark input::placeholder,
.dark textarea::placeholder,
.dark input::-webkit-input-placeholder,
.dark textarea::-webkit-input-placeholder,
.dark input::-moz-placeholder,
.dark textarea::-moz-placeholder,
.dark input:-ms-input-placeholder,
.dark textarea:-ms-input-placeholder {
  color: rgb(100 116 139) !important; /* slate-500 */
  opacity: 1 !important;
}

/* Override any gray placeholder colors in dark mode */
.dark input[class*="placeholder-gray"]::placeholder,
.dark textarea[class*="placeholder-gray"]::placeholder,
.dark input[class*="placeholder-gray"]::-webkit-input-placeholder,
.dark textarea[class*="placeholder-gray"]::-webkit-input-placeholder,
.dark input[class*="placeholder-gray"]::-moz-placeholder,
.dark textarea[class*="placeholder-gray"]::-moz-placeholder,
.dark input[class*="placeholder-gray"]:-ms-input-placeholder,
.dark textarea[class*="placeholder-gray"]:-ms-input-placeholder {
  color: rgb(100 116 139) !important; /* slate-500 */
  opacity: 1 !important;
}

/* Force form labels to use slate-300 in dark mode */
.dark label[for],
.dark label[class*="font-medium"],
.dark form label {
  color: rgb(203 213 225) !important; /* slate-300 */
}

/* Override any gray or white label colors in dark mode */
.dark label[class*="text-gray"],
.dark label[class*="text-white"] {
  color: rgb(203 213 225) !important; /* slate-300 */
}

/* Remember me checkbox styling in dark mode */
.dark input[type="checkbox"] {
  border-color: rgb(51 65 85) !important; /* slate-700 */
  background-color: rgb(15 23 42) !important; /* slate-900 */
}

.dark input[type="checkbox"]:checked {
  background-color: rgb(79 70 229) !important; /* indigo-600 */
  border-color: rgb(79 70 229) !important; /* indigo-600 */
  color: rgb(79 70 229) !important; /* indigo-600 */
}

/* Force remember me label to use slate-300 */
.dark label[for*="remember"] {
  color: rgb(203 213 225) !important; /* slate-300 */
}

/* Force radar chart background to be transparent in dark mode */
.dark [data-sport-type-radar-chart-target="chart"] .apexcharts-canvas,
.dark [data-sport-type-radar-chart-target="chart"] svg {
  background-color: transparent !important;
}

/* Force dark mode background colors to override light mode when both classes are present */
.dark [class*="bg-white"][class*="dark:bg-slate-900"],
.dark [class*="bg-white"].dark\:bg-slate-900,
.dark div[class*="bg-white"][class*="dark:bg-slate-900"] {
  background-color: rgb(15 23 42) !important; /* slate-900 */
}

/* Force dark mode text colors for mobile nav buttons and hamburger icon */
.dark button[class*="text-gray-600"][class*="dark:text-slate-400"],
.dark a[class*="text-gray-600"][class*="dark:text-slate-400"],
.dark button[class*="text-gray-500"][class*="dark:text-slate-400"],
.dark
  [data-drawer-target][class*="text-gray-600"][class*="dark:text-slate-400"] {
  color: rgb(148 163 184) !important; /* slate-400 */
}

/* Fix dark mode hover states for mobile nav buttons - ensure text is light on dark background */
.dark button[class*="text-gray-600"][class*="dark:text-slate-400"]:hover,
.dark a[class*="text-gray-600"][class*="dark:text-slate-400"]:hover,
.dark button[class*="text-gray-500"][class*="dark:text-slate-400"]:hover,
.dark
  [data-drawer-target][class*="text-gray-600"][class*="dark:text-slate-400"]:hover,
.dark
  a[href*="settings"][class*="text-gray-600"][class*="dark:text-slate-400"]:hover,
.dark
  a[href*="admin"][class*="text-gray-600"][class*="dark:text-slate-400"]:hover,
.dark
  a[href*="sign_out"][class*="text-gray-600"][class*="dark:text-slate-400"]:hover,
.dark
  a[href*="settings"][class*="hover:text-gray-900"][class*="dark:hover:text-slate-100"]:hover,
.dark
  a[href*="admin"][class*="hover:text-gray-900"][class*="dark:hover:text-slate-100"]:hover,
.dark
  a[href*="sign_out"][class*="hover:text-gray-900"][class*="dark:hover:text-slate-100"]:hover {
  color: rgb(241 245 249) !important; /* slate-100 */
  background-color: rgb(51 65 85) !important; /* slate-700 */
}

/* Override hover text color for mobile nav links in dark mode - target elements with hover:text-gray-900 */
.dark a[href*="settings"]:hover,
.dark a[href*="admin"]:hover,
.dark a[href*="sign_out"]:hover {
  color: rgb(241 245 249) !important; /* slate-100 - light text */
  background-color: rgb(51 65 85) !important; /* slate-700 - dark background */
}

/* Override hover background for mobile nav links - ensure dark background in dark mode */
.dark a[href*="settings"][class*="hover:bg-gray-50"]:hover,
.dark a[href*="admin"][class*="hover:bg-gray-50"]:hover,
.dark a[href*="sign_out"][class*="hover:bg-gray-50"]:hover {
  background-color: rgb(51 65 85) !important; /* slate-700 */
}