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

/* Admin user Strava backfill: Flowbite / browser defaults can strip Tailwind bg on submits */
form.button_to input.admin-strava-backfill-submit[type="submit"],
form.button_to button.admin-strava-backfill-submit[type="submit"] {
  background-color: #0d9488 !important; /* teal-600 */
  color: #ffffff !important;
}

form.button_to input.admin-strava-backfill-submit[type="submit"]:hover,
form.button_to button.admin-strava-backfill-submit[type="submit"]:hover {
  background-color: #0f766e !important; /* teal-700 */
  color: #ffffff !important;
}

html.dark form.button_to input.admin-strava-backfill-submit[type="submit"],
html.dark form.button_to button.admin-strava-backfill-submit[type="submit"] {
  background-color: #0d9488 !important;
  color: #ffffff !important;
}

html.dark form.button_to input.admin-strava-backfill-submit[type="submit"]:hover,
html.dark form.button_to button.admin-strava-backfill-submit[type="submit"]:hover {
  background-color: #0f766e !important;
  color: #ffffff !important;
}

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

/* Activity journal cards are a full-card <a>; nested utility order/inheritance can leave light surfaces
   and badge colors in dark mode — scope !important to these hooks only. */
.dark a.journal-activity-card,
.dark a.journal-activity-card:visited {
  background-color: rgb(15 23 42) !important; /* slate-900 */
  border-color: rgba(30 41 59 / 0.6) !important; /* slate-800/60 */
  color: rgb(241 245 249) !important; /* slate-100 */
}

.dark a.journal-activity-card .journal-card-stat {
  background-color: rgb(2 6 23) !important; /* slate-950 */
}

.dark a.journal-activity-card .journal-card-note {
  background-color: rgb(2 6 23) !important;
  color: rgb(203 213 225) !important; /* slate-300 */
}

.dark a.journal-activity-card h2 {
  color: rgb(241 245 249) !important; /* slate-100 */
}

.dark a.journal-activity-card .text-slate-600 {
  color: rgb(148 163 184) !important; /* slate-400 */
}

.dark a.journal-activity-card .journal-card-stat .text-slate-500 {
  color: rgb(148 163 184) !important; /* slate-400 labels */
}

.dark a.journal-activity-card .journal-card-stat .text-slate-900 {
  color: rgb(241 245 249) !important; /* slate-100 values */
}

.dark a.journal-activity-card .text-slate-500 {
  color: rgb(148 163 184) !important;
}

.dark a.journal-activity-card .text-sky-700 {
  color: rgb(125 211 252) !important; /* sky-300 */
}

.dark a.journal-activity-card .text-primary-600 {
  color: rgb(129 140 248) !important; /* primary-400 */
}

.dark a.journal-activity-card .journal-notable-insights-hint {
  color: rgb(129 140 248) !important; /* indigo-400 — matches personalized pulse link */
}

.dark a.journal-activity-card.group:hover .journal-notable-insights-hint {
  color: rgb(165 180 252) !important; /* indigo-300 */
}

/* Sport + semantic badges: match muted dark treatment from dark: utilities */
.dark a.journal-activity-card .journal-card-badge[class*="bg-slate-100"] {
  background-color: rgb(30 41 59) !important; /* slate-800 */
  color: rgb(203 213 225) !important; /* slate-300 */
}

.dark a.journal-activity-card .journal-card-badge[class*="bg-amber-100"] {
  background-color: rgba(245 158 11 / 0.2) !important;
  color: rgb(252 211 77) !important; /* amber-300 */
}

.dark a.journal-activity-card .journal-card-badge[class*="bg-indigo-100"] {
  background-color: rgba(99 102 241 / 0.2) !important;
  color: rgb(165 180 252) !important; /* indigo-300 */
}

.dark a.journal-activity-card .journal-card-badge[class*="bg-emerald-100"] {
  background-color: rgba(16 185 129 / 0.2) !important;
  color: rgb(110 231 183) !important; /* emerald-300 */
}

.dark a.journal-activity-card .journal-card-badge[class*="bg-slate-800"] {
  background-color: rgb(30 41 59) !important;
  color: rgb(203 213 225) !important;
}

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

/* Scoped markdown typography for converted LLM plan sections */
.markdown-converted-section h2,
.markdown-converted-section h3,
.markdown-converted-section h4 {
  font-weight: 600;
  line-height: 1.35;
  margin-top: 0.5rem;
  margin-bottom: 0.35rem;
}

.markdown-converted-section p {
  margin-bottom: 0.5rem;
  line-height: 1.65;
}

.markdown-converted-section ul,
.markdown-converted-section ol {
  margin-left: 1.25rem;
  margin-bottom: 0.5rem;
  padding-left: 0.25rem;
  list-style-position: outside;
}

.markdown-converted-section ul {
  list-style-type: disc;
}

.markdown-converted-section ol {
  list-style-type: decimal;
}

.markdown-converted-section ul ul {
  list-style-type: circle;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.markdown-converted-section ol ol {
  list-style-type: lower-alpha;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.markdown-converted-section li {
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  line-height: 1.55;
}

/* Collapsible lists (activity chat: splits / intervals / comparisons) */
.markdown-converted-section details.activity-chat-collapsible {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid rgb(226 232 240 / 0.5); /* slate-200 */
  overflow: hidden;
}

html.dark .markdown-converted-section details.activity-chat-collapsible {
  border-color: rgb(30 41 59 / 0.5); /* slate-800 */
}

.markdown-converted-section details.activity-chat-collapsible > summary.activity-chat-collapsible-summary {
  cursor: pointer;
  list-style: none;
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  font-size: 0.8125rem;
  background-color: transparent;
  color: rgb(51 65 85); /* slate-700 */
}

.markdown-converted-section details.activity-chat-collapsible > summary.activity-chat-collapsible-summary::-webkit-details-marker {
  display: none;
}

.markdown-converted-section details.activity-chat-collapsible > summary.activity-chat-collapsible-summary::marker {
  content: "";
}

html.dark .markdown-converted-section details.activity-chat-collapsible > summary.activity-chat-collapsible-summary {
  color: rgb(203 213 225); /* slate-300 */
}

.markdown-converted-section details.activity-chat-collapsible > .activity-chat-collapsible-body {
  border-top: 1px solid rgb(226 232 240 / 0.5);
  padding: 0.5rem 0.75rem 0.65rem;
}

html.dark .markdown-converted-section details.activity-chat-collapsible > .activity-chat-collapsible-body {
  border-top-color: rgb(30 41 59 / 0.5);
}

.markdown-converted-section details.activity-chat-collapsible > .activity-chat-collapsible-body > ul,
.markdown-converted-section details.activity-chat-collapsible > .activity-chat-collapsible-body > ol {
  margin-bottom: 0;
}

/* Highlighted callouts (CTA-style blocks in assistant markdown) */
.markdown-converted-section blockquote {
  border-left: 3px solid rgb(226 232 240 / 0.5);
  padding: 0.65rem 0.85rem;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0.5rem;
  border-radius: 0.375rem;
  background-color: rgb(241 245 249); /* slate-100 */
  color: rgb(51 65 85); /* slate-700 */
}

html.dark .markdown-converted-section blockquote {
  border-left-color: rgb(30 41 59 / 0.5);
  background-color: rgb(30 41 59); /* slate-800 */
  color: rgb(203 213 225); /* slate-300 */
}

.markdown-converted-section pre {
  overflow-x: auto;
  padding: 0.75rem;
  border-radius: 0.5rem;
  background-color: rgb(226 232 240); /* slate-200 */
  margin-bottom: 0.5rem;
}

html.dark .markdown-converted-section pre {
  background-color: rgb(30 41 59); /* slate-800 */
}

.markdown-converted-section code {
  font-size: 0.85em;
  padding: 0.1rem 0.25rem;
  border-radius: 0.25rem;
  background-color: rgb(226 232 240); /* slate-200 */
}

html.dark .markdown-converted-section code {
  background-color: rgb(51 65 85); /* slate-700 */
}

/* Activity chat drawer (mobile): top shadow for bottom sheet. */
@media (max-width: 767px) {
  #activity-chat-drawer {
    box-shadow: 0 -16px 40px -12px rgb(15 23 42 / 0.14);
  }

  html.dark #activity-chat-drawer {
    box-shadow: 0 -18px 44px -12px rgb(0 0 0 / 0.42);
  }
}

/* Activity chat drawer (desktop): left-edge shadow over page — Tailwind arbitrary values were ~invisible at ~6% opacity. */
@media (min-width: 768px) {
  #activity-chat-drawer {
    box-shadow: -16px 0 40px -8px rgb(15 23 42 / 0.14);
  }

  html.dark #activity-chat-drawer {
    box-shadow: -20px 0 44px -6px rgb(0 0 0 / 0.42);
  }
}
/* Today's challenge leads; the remaining days stay compact until expanded. */
#group-challenges .challenge-feature-grid { display: grid; gap: 16px; margin-bottom: 24px; }
#group-challenges .challenge-day,
#group-challenges .challenge-week {
  min-width: 0; padding: 18px; border: 1px solid #e2e8f0; border-radius: 16px;
  background: #fff; display: flex; flex-direction: column;
}
#group-challenges .challenge-day-today {
  padding: 26px; border: 2px solid #f5b942;
  background: linear-gradient(135deg, #fffbeb, #fffdf7);
}
#group-challenges .challenge-week { padding: 24px; background: #f8fafc; }
#group-challenges .challenge-day-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#group-challenges .challenge-day-label,
#group-challenges .challenge-week-heading { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #64748b; }
#group-challenges .challenge-week-heading { margin-bottom: 12px; }
#group-challenges .challenge-day-today .challenge-day-label { color: #a34b08; }
#group-challenges .challenge-date { font-size: 11px; color: #64748b; white-space: nowrap; }
#group-challenges .challenge-day-title { margin-top: 12px; font-size: 15px; font-weight: 700; line-height: 1.4; color: #0f172a; }
#group-challenges .challenge-day-today .challenge-day-title { font-size: 26px; letter-spacing: -.025em; }
#group-challenges .challenge-week .challenge-day-title { font-size: 20px; }
#group-challenges .challenge-description { margin-top: 12px; font-size: 14px; line-height: 1.65; color: #475569; }
#group-challenges .challenge-day-today .challenge-description { font-size: 16px; max-width: 60ch; }
#group-challenges .challenge-target { margin-top: 14px; font-size: 14px; line-height: 1.5; font-weight: 600; color: #334155; }
#group-challenges .challenge-day-today .challenge-target { font-size: 20px; color: #92400e; }
#group-challenges .challenge-day-finishers { margin-top: auto; padding-top: 18px; }
#group-challenges .group-challenge-day-grid { display: grid; align-items: stretch; grid-auto-rows: 1fr; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#group-challenges .challenge-finishers { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 32px; }
#group-challenges .challenge-avatar-stack { display: flex; align-items: center; padding-left: 0; }
#group-challenges .challenge-finisher-avatar {
  position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%; background: #d1fae5; color: #065f46;
  box-shadow: 0 0 0 2px #fff; font-size: 10px; font-weight: 700; transition: transform .15s;
}
#group-challenges .challenge-finisher-avatar + .challenge-finisher-avatar { margin-left: -9px; }
#group-challenges .challenge-finisher-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
#group-challenges .challenge-finisher-avatar:hover,
#group-challenges .challenge-finisher-avatar:focus-visible { z-index: 1; transform: translateY(-2px); }
#group-challenges .challenge-more-finishers { padding: 5px 2px; border-radius: 4px; color: #475569; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
#group-challenges .challenge-finisher-count { font-size: 12px; color: #64748b; }
#group-challenges :is(.challenge-finishers-tooltip, .challenge-description-tooltip) {
  position: fixed; z-index: 9999; width: max-content; max-width: min(280px, calc(100vw - 16px));
  max-height: min(320px, 60vh); overflow-y: auto; padding: 12px 16px; border-radius: 10px;
  background: #0f172a; color: #fff; font-size: 12px; line-height: 1.75; overflow-wrap: anywhere;
  box-shadow: 0 8px 24px rgb(15 23 42 / .18);
}
#group-challenges :is(.challenge-more-finishers, .challenge-finisher-avatar, .challenge-info-button):focus-visible { outline: 2px solid #d97706; outline-offset: 4px; }
@media (min-width: 768px) {
  #group-challenges .challenge-feature-grid-paired { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  #group-challenges .group-challenge-day-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  #group-challenges .group-challenge-day-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
html.dark #group-challenges :is(.challenge-day, .challenge-week) { background: #0f172a; border-color: #334155; }
html.dark #group-challenges .challenge-day-today { background: linear-gradient(135deg, #302413, #1c1b19); border-color: #b7791f; }
html.dark #group-challenges :is(.challenge-day-title, .challenge-target) { color: #f1f5f9; }
html.dark #group-challenges .challenge-description { color: #cbd5e1; }
html.dark #group-challenges :is(.challenge-day-today .challenge-day-label, .challenge-day-today .challenge-target) { color: #fcd34d; }
html.dark #group-challenges :is(.challenge-day-label, .challenge-date, .challenge-week-heading, .challenge-more-finishers, .challenge-finisher-count, .challenge-info-button) { color: #94a3b8; }
html.dark #group-challenges .challenge-finisher-avatar { box-shadow: 0 0 0 2px #0f172a; background: #064e3b; color: #d1fae5; }
html.dark #group-challenges :is(.challenge-finishers-tooltip, .challenge-description-tooltip) { background: #334155; }

/* Give the challenge section its own playful, warm identity. */
#group-challenges {
  padding: 24px; border: 1px solid #fde5a9; border-radius: 24px;
  background: radial-gradient(ellipse at top right, #fff0bc 0, transparent 48%), linear-gradient(140deg, #fffdf5, #f5fbf8);
}
#group-challenges .challenge-section-header { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
#group-challenges .challenge-section-heading { flex: 1; min-width: 180px; }
#group-challenges .challenge-community-wins { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid #a7f3d0; border-radius: 999px; background: #ecfdf5; color: #047857; font-size: 12px; }
#group-challenges .challenge-day-today {
  border-color: #efa91d; box-shadow: 0 4px 20px rgb(217 119 6 / .09);
  background: radial-gradient(circle at top right, #ffe9a2, transparent 55%), #fffcf0;
}
#group-challenges .challenge-day-today .challenge-day-label { display: flex; align-items: center; gap: 7px; }
#group-challenges .challenge-day-today .challenge-day-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #d97706; box-shadow: 0 0 0 4px #fef3c7; }
#group-challenges .challenge-week { border-color: #dcd5f7; background: linear-gradient(140deg, #f8f5ff, #fff); }
#group-challenges .challenge-week .challenge-day-label { color: #7c3aed; }
#group-challenges .challenge-day-expired { background: #f1f3f5; border-color: #dce1e7; box-shadow: none; }
#group-challenges .challenge-day-expired :is(.challenge-day-title, .challenge-target, .challenge-description) { color: #64748b; }
#group-challenges .challenge-day-expired .challenge-avatar-stack { filter: saturate(.35); }
@media (max-width: 639px) {
  #group-challenges { padding: 16px; border-radius: 20px; }
  #group-challenges .challenge-day:not(.challenge-day-today) { padding: 12px; }
}
html.dark #group-challenges { border-color: #55452a; background: radial-gradient(ellipse at top right, #342a17, transparent 48%), #111c20; }
html.dark #group-challenges .challenge-community-wins { background: #123a2c; color: #a7f3d0; border-color: #236549; }
html.dark #group-challenges .challenge-week { background: linear-gradient(140deg, #231c38, #151b2a); border-color: #49385d; }
html.dark #group-challenges .challenge-week .challenge-day-label { color: #c4b5fd; }
html.dark #group-challenges .challenge-day-today { background: radial-gradient(circle at top right, #493517, transparent 60%), #272115; }
html.dark #group-challenges .challenge-day-expired { background: #1c2430; border-color: #364152; }
html.dark #group-challenges .challenge-day-expired :is(.challenge-day-title, .challenge-target, .challenge-description) { color: #94a3b8; }

#group-challenges .challenge-title-row { display: flex; align-items: flex-start; gap: 6px; margin-top: 12px; }
#group-challenges .challenge-title-row .challenge-day-title { margin-top: 0; }
#group-challenges .challenge-info { flex-shrink: 0; }
#group-challenges .challenge-info-button { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: #64748b; cursor: pointer; }
#group-challenges .challenge-info-button:hover { color: #0f172a; background: #e2e8f0; }
#group-challenges .challenge-description-tooltip { font-weight: 400; line-height: 1.6; }
html.dark #group-challenges .challenge-info-button:hover { color: #f1f5f9; background: #334155; }

#group-challenges .challenge-finishers-compact { flex-wrap: nowrap; gap: 6px; min-height: 24px; }
#group-challenges .challenge-finishers-compact .challenge-finisher-avatar { width: 24px; height: 24px; font-size: 9px; }
#group-challenges .challenge-finishers-compact .challenge-finisher-avatar + .challenge-finisher-avatar { margin-left: -7px; }
#group-challenges .challenge-finishers-compact :is(.challenge-more-finishers, .challenge-finisher-count) { font-size: 11px; white-space: nowrap; }