/* My-Sports-Challenge - base styles */

:root {
  color-scheme: light;
}

:root[data-msc-theme="dark"] {
  color-scheme: dark;
}

.hero {
  background: #fff;
  min-height: 60vh;
  padding: 3rem 1rem;
}

.hero-logo {
  width: 196px;
  height: 196px;
  background-color: #fff;
  border-radius: 50%;
  padding: 12px;
}

.landing-feature-highlight {
  border: 2px solid #0d6efd;
  border-radius: 0.5rem;
  background-color: rgba(13, 110, 253, 0.08);
}

[data-msc-theme="dark"] .landing-feature-highlight {
  background-color: rgba(13, 110, 253, 0.18);
}

[data-msc-theme="dark"] .hero {
  background: #212529;
}

[data-msc-theme="dark"] .hero.text-dark {
  color: #f8f9fa !important;
}

[data-msc-theme="dark"] .hero .btn-outline-dark {
  color: #f8f9fa;
  border-color: #f8f9fa;
}

[data-msc-theme="dark"] .hero .btn-outline-dark:hover,
[data-msc-theme="dark"] .hero .btn-outline-dark:focus-visible {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

[data-msc-theme="dark"] .bg-white {
  background-color: #212529 !important;
}

[data-msc-theme="dark"] .bg-light {
  background-color: #343a40 !important;
  color: #f8f9fa;
}

[data-msc-theme="dark"] .border {
  border-color: #495057 !important;
}

[data-msc-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: #dee2e6;
  --bs-table-border-color: #495057;
}

[data-msc-theme="dark"] .table-hover > tbody > tr:hover > * {
  --bs-table-hover-bg: #343a40;
  --bs-table-hover-color: #fff;
}

.msc-current-user-row > * {
  --bs-table-bg: #e4eef9;
  --bs-table-color: #1d344d;
  --bs-table-border-color: #b9cde1;
}

.msc-team-member-row > * {
  --bs-table-bg: #d6e2ee;
  --bs-table-color: #243746;
  --bs-table-border-color: #aec1d2;
}

.msc-route-map {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  background: #dbe7ef;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.msc-route-google-map {
  width: 100%;
  min-height: 320px;
  height: min(70vh, 540px);
}

.msc-route-display-map {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 260px;
  overflow: hidden;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.375rem;
  background: var(--bs-tertiary-bg);
}

.msc-route-display-map svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

.msc-route-google-map-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-height: 260px;
}

.msc-route-endpoint-marker {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  transform: translate(-50%, -100%);
  white-space: nowrap;
}

.msc-route-map-choice {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.msc-route-map-swatch {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  flex: 0 0 auto;
}

.msc-google-route-overlay {
  position: absolute;
  left: 0;
  top: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.msc-google-route-overlay svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.msc-route-map.is-dragging {
  cursor: grabbing;
}

.msc-route-map-canvas {
  position: absolute;
  inset: 0;
  transform-origin: center;
  transition: transform 120ms ease-out;
}

.msc-route-map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.msc-route-map-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.msc-route-map-controls {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  display: flex;
  gap: 0.25rem;
}

[data-msc-theme="dark"] .msc-current-user-row > * {
  --bs-table-bg: #344b61;
  --bs-table-color: #f8f9fa;
  --bs-table-border-color: #536b82;
}

[data-msc-theme="dark"] .msc-team-member-row > * {
  --bs-table-bg: #293d4d;
  --bs-table-color: #f8f9fa;
  --bs-table-border-color: #465d6e;
}

.msc-current-user-entry {
  background-color: #e4eef9 !important;
  color: #1d344d;
}

.msc-team-member-entry {
  background-color: #d6e2ee !important;
  color: #243746;
}

[data-msc-theme="dark"] .msc-current-user-entry {
  background-color: #344b61 !important;
  color: #f8f9fa;
}

[data-msc-theme="dark"] .msc-team-member-entry {
  background-color: #293d4d !important;
  color: #f8f9fa;
}

.msc-stream-metric-badge {
  background-color: #f8f9fa;
  color: #212529;
  border-color: #adb5bd !important;
}

.msc-stream-objective-metric {
  border-color: #0d6efd !important;
  box-shadow: inset 0 -2px 0 #0d6efd;
  font-weight: 600;
}

.msc-objective-progress {
  height: 0.35rem;
  min-width: 5rem;
}

.msc-personal-objective-progress {
  height: 0.75rem;
  min-width: 8rem;
}

.msc-race-hero {
  background: linear-gradient(135deg, rgba(13, 110, 253, 0.08), rgba(25, 135, 84, 0.08));
}

.msc-race-hero-time {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.msc-stream-group-badge {
  background-color: #cff4fc;
  color: #055160;
  border-color: #9eeaf9 !important;
}

.msc-stream-group-points {
  color: #055160;
}

[data-msc-theme="dark"] .msc-stream-metric-badge {
  background-color: #343a40;
  color: #f8f9fa;
  border-color: #6c757d !important;
}

[data-msc-theme="dark"] .msc-stream-objective-metric {
  border-color: #6ea8fe !important;
  box-shadow: inset 0 -2px 0 #6ea8fe;
}

[data-msc-theme="dark"] .msc-stream-group-badge {
  background-color: #254b5b;
  color: #d8f3ff;
  border-color: #4b8ba3 !important;
}

[data-msc-theme="dark"] .msc-stream-group-points {
  color: #9eeaf9;
}

#notificationPrefsTable tbody tr[data-notification-row] > th {
  font-weight: 400;
}

[data-msc-theme="dark"] .msc-calendar-grid {
  background-color: #495057;
  border-color: #495057;
}

[data-msc-theme="dark"] .msc-calendar-weekday,
[data-msc-theme="dark"] .msc-calendar-day-outside {
  background-color: #343a40;
}

[data-msc-theme="dark"] .msc-calendar-day {
  background-color: #212529;
}

[data-msc-theme="dark"] .msc-challenge-text-body pre,
[data-msc-theme="dark"] .msc-challenge-text-body code {
  background-color: #343a40;
  color: #f8f9fa;
}

/* Space for the fixed bottom icon nav so page content isn't hidden behind it */
.pb-footer-nav {
  padding-bottom: 96px;
}

.msc-pwa-install-control {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1040;
}

@media (max-width: 767.98px) {
  .msc-pwa-install-control {
    bottom: 5.25rem;
  }
}

/* Fixed bottom icon navigation bar */
.footer-nav {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0;
  z-index: 1030;
}

.footer-legal-links {
  min-height: 32px;
  line-height: 32px;
}

.footer-legal-links a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}

.footer-legal-links a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-nav-list {
  height: 64px;
}

.footer-nav-item {
  flex: 1 1 0;
  text-align: center;
}

.footer-nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 64px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 0.7rem;
  transition: color 0.15s ease-in-out;
}

.footer-nav-link i {
  font-size: 1.2rem;
}

.footer-nav-link:hover {
  color: #fff;
}

.footer-nav-item.active .footer-nav-link {
  color: #fff;
}

.stream-item-new {
  background-color: var(--bs-success-bg-subtle);
  box-shadow: inset 0.3rem 0 var(--bs-success);
  animation: stream-item-new-arrival 1.2s ease-out;
}

.msc-page-loading {
  animation: msc-page-loading-pulse 1.1s ease-in-out infinite;
  transform-origin: center;
}

.stream-entry-content,
.stream-entry-meta {
  min-width: 0;
}

.stream-team-link {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
}

.stream-team-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msc-strava-badge {
  background-color: #fc4c02;
  color: #fff;
}

.msc-wahoo-badge {
  background-color: #087ea4;
  color: #fff;
}

.msc-strava-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: #fc4c02;
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.msc-strava-link:hover,
.msc-strava-link:focus-visible {
  color: #c83d00;
  text-decoration: underline;
}

.msc-chart-scroll {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}

.msc-statistics-chart {
  position: relative;
  width: 100%;
  height: 15rem;
  min-width: 0;
}

.msc-statistics-chart canvas {
  display: block;
}

.msc-monitoring-overview-chart {
  height: 24rem;
}

@media (max-width: 767.98px) {
  .msc-statistics-chart {
    height: 14rem;
  }

  .msc-monitoring-overview-chart {
    height: 20rem;
  }
}

@keyframes stream-item-new-arrival {
  from {
    background-color: var(--bs-success-border-subtle);
  }
  to {
    background-color: var(--bs-success-bg-subtle);
  }
}

@keyframes msc-page-loading-pulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stream-item-new,
  .msc-page-loading {
    animation: none;
  }
}

/* Compact activity tables on narrow screens. The surrounding
   `.table-responsive` wrappers retain horizontal scrolling for wide tables. */
.dt-paging .pagination {
  margin-bottom: 0;
}

.dt-paging .page-link,
.dt-length select {
  padding: 0.2rem 0.45rem;
  font-size: 0.75rem;
}

#individualLeaderboardTable_wrapper .dt-layout-full,
#teamLeaderboardTable_wrapper .dt-layout-full {
  padding-left: 0;
  padding-right: 0;
}

#individualLeaderboardTable_wrapper table,
#teamLeaderboardTable_wrapper table {
  table-layout: fixed;
  width: 100% !important;
}

#individualLeaderboardTable col:nth-child(1),
#individualLeaderboardTable thead th:nth-child(1),
#teamLeaderboardTable col:nth-child(1),
#teamLeaderboardTable thead th:nth-child(1) {
  width: 6% !important;
}

#individualLeaderboardTable col:nth-child(2),
#individualLeaderboardTable thead th:nth-child(2) {
  width: 30% !important;
}

#individualLeaderboardTable col:nth-child(3),
#individualLeaderboardTable thead th:nth-child(3) {
  width: 18% !important;
}

#teamLeaderboardTable col:nth-child(2),
#teamLeaderboardTable thead th:nth-child(2) {
  width: 34% !important;
}

#individualLeaderboardTable:not(.msc-show-team-column) col:nth-child(3),
#individualLeaderboardTable:not(.msc-show-uncapped-column) col:nth-child(6),
#individualLeaderboardTable:not(.msc-show-group-column) col:nth-child(7),
#individualLeaderboardTable:not(.msc-show-specials-column) col:nth-child(8),
#teamLeaderboardTable:not(.msc-show-uncapped-column) col:nth-child(5),
#teamLeaderboardTable:not(.msc-show-group-column) col:nth-child(6),
#teamLeaderboardTable:not(.msc-show-specials-column) col:nth-child(7),
#teamLeaderboardTable:not(.msc-show-total-column) col:nth-child(8),
#teamLeaderboardTable:not(.msc-show-uncapped-total-column) col:nth-child(9) {
  display: none;
}

@media (max-width: 767.98px) {
  #activitiesTable_wrapper,
  #myActivitiesTable_wrapper,
  #trainingsTable_wrapper,
  #participantsTable_wrapper,
  #usersTable_wrapper,
  #adminUsersTable_wrapper,
  #adminChallengesTable_wrapper,
  #individualLeaderboardTable_wrapper,
  #teamLeaderboardTable_wrapper,
  #activityTypeStatsTable_wrapper,
  #teamStatsTable_wrapper,
  #statsActivityTypeLeaderboardTable_wrapper {
    font-size: 0.75rem;
  }

  #activitiesTable_wrapper .dt-layout-row,
  #myActivitiesTable_wrapper .dt-layout-row,
  #trainingsTable_wrapper .dt-layout-row,
  #participantsTable_wrapper .dt-layout-row,
  #usersTable_wrapper .dt-layout-row,
  #adminUsersTable_wrapper .dt-layout-row,
  #adminChallengesTable_wrapper .dt-layout-row,
  #individualLeaderboardTable_wrapper .dt-layout-row,
  #teamLeaderboardTable_wrapper .dt-layout-row,
  #activityTypeStatsTable_wrapper .dt-layout-row,
  #teamStatsTable_wrapper .dt-layout-row,
  #statsActivityTypeLeaderboardTable_wrapper .dt-layout-row {
    margin-top: 0.35rem;
    margin-bottom: 0.35rem;
    gap: 0.25rem;
  }

  #activitiesTable_wrapper .dt-layout-cell,
  #myActivitiesTable_wrapper .dt-layout-cell,
  #trainingsTable_wrapper .dt-layout-cell,
  #participantsTable_wrapper .dt-layout-cell,
  #usersTable_wrapper .dt-layout-cell,
  #adminUsersTable_wrapper .dt-layout-cell,
  #adminChallengesTable_wrapper .dt-layout-cell,
  #individualLeaderboardTable_wrapper .dt-layout-cell,
  #teamLeaderboardTable_wrapper .dt-layout-cell,
  #activityTypeStatsTable_wrapper .dt-layout-cell,
  #teamStatsTable_wrapper .dt-layout-cell,
  #statsActivityTypeLeaderboardTable_wrapper .dt-layout-cell {
    padding: 0.1rem 0;
  }

  #activitiesTable_wrapper .dt-length select,
  #myActivitiesTable_wrapper .dt-length select,
  #trainingsTable_wrapper .dt-length select,
  #participantsTable_wrapper .dt-length select,
  #usersTable_wrapper .dt-length select,
  #adminUsersTable_wrapper .dt-length select,
  #adminChallengesTable_wrapper .dt-length select,
  #individualLeaderboardTable_wrapper .dt-length select,
  #teamLeaderboardTable_wrapper .dt-length select,
  #activityTypeStatsTable_wrapper .dt-length select,
  #teamStatsTable_wrapper .dt-length select,
  #statsActivityTypeLeaderboardTable_wrapper .dt-length select,
  #activitiesTable_wrapper .dt-search input,
  #myActivitiesTable_wrapper .dt-search input,
  #trainingsTable_wrapper .dt-search input,
  #participantsTable_wrapper .dt-search input,
  #usersTable_wrapper .dt-search input,
  #adminUsersTable_wrapper .dt-search input,
  #adminChallengesTable_wrapper .dt-search input,
  #individualLeaderboardTable_wrapper .dt-search input,
  #teamLeaderboardTable_wrapper .dt-search input,
  #activityTypeStatsTable_wrapper .dt-search input,
  #teamStatsTable_wrapper .dt-search input,
  #statsActivityTypeLeaderboardTable_wrapper .dt-search input {
    min-height: 1.75rem;
    padding: 0.15rem 0.35rem;
    font-size: 0.75rem;
  }

  #activitiesTable_wrapper table th,
  #activitiesTable_wrapper table td,
  #myActivitiesTable_wrapper table th,
  #myActivitiesTable_wrapper table td,
  #trainingsTable_wrapper table th,
  #trainingsTable_wrapper table td,
  #participantsTable_wrapper table th,
  #participantsTable_wrapper table td,
  #usersTable_wrapper table th,
  #usersTable_wrapper table td,
  #adminUsersTable_wrapper table th,
  #adminUsersTable_wrapper table td,
  #adminChallengesTable_wrapper table th,
  #adminChallengesTable_wrapper table td,
  #individualLeaderboardTable_wrapper table th,
  #individualLeaderboardTable_wrapper table td,
  #teamLeaderboardTable_wrapper table th,
  #teamLeaderboardTable_wrapper table td,
  #activityTypeStatsTable_wrapper table th,
  #activityTypeStatsTable_wrapper table td,
  #teamStatsTable_wrapper table th,
  #teamStatsTable_wrapper table td,
  #statsActivityTypeLeaderboardTable_wrapper table th,
  #statsActivityTypeLeaderboardTable_wrapper table td {
    padding: 0.25rem 0.35rem;
  }

  #activitiesTable_wrapper .dt-paging .page-link,
  #myActivitiesTable_wrapper .dt-paging .page-link,
  #trainingsTable_wrapper .dt-paging .page-link,
  #participantsTable_wrapper .dt-paging .page-link,
  #usersTable_wrapper .dt-paging .page-link,
  #adminUsersTable_wrapper .dt-paging .page-link,
  #adminChallengesTable_wrapper .dt-paging .page-link,
  #individualLeaderboardTable_wrapper .dt-paging .page-link,
  #teamLeaderboardTable_wrapper .dt-paging .page-link,
  #activityTypeStatsTable_wrapper .dt-paging .page-link,
  #teamStatsTable_wrapper .dt-paging .page-link,
  #statsActivityTypeLeaderboardTable_wrapper .dt-paging .page-link {
    padding: 0.2rem 0.4rem;
    font-size: 0.7rem;
  }
}

/* Challenge-scoped header/footer nav links, disabled when the user has no
  current challenge. */
.nav-link.disabled,
.footer-nav-link.disabled {
  opacity: 0.45;
  pointer-events: none;
}

[data-msc-page="intro-rules-faq.html"] {
  white-space: nowrap;
}

/* Shared calendar month grid (calendar.html) */
.msc-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background-color: #dee2e6;
  border: 1px solid #dee2e6;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.msc-calendar-weekday {
  background-color: #f8f9fa;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  overflow: hidden;
}

.msc-calendar-day {
  background-color: #fff;
  min-height: 5.5rem;
  min-width: 0;
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  overflow: hidden;
}

.msc-calendar-day-outside {
  background-color: #f8f9fa;
  color: #adb5bd;
}

.msc-calendar-day-number {
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.msc-calendar-add-day {
  border: none;
  background: none;
  color: #6c757d;
  padding: 0;
  line-height: 1;
}

.msc-calendar-entry {
  font-size: 0.7rem;
  padding: 0.05rem 0.35rem;
  border-radius: 0.25rem;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.msc-color-swatch {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid #ccc;
  padding: 0;
}

.msc-challenge-text-card {
  border-top: 4px solid transparent !important;
}

.msc-challenge-text-card-intro {
  border-top-color: #0d6efd !important;
}

.msc-challenge-text-card-rules {
  border-top-color: #198754 !important;
}

.msc-challenge-text-card-faq {
  border-top-color: #ffc107 !important;
}

.msc-challenge-text-icon {
  font-size: 1.15rem;
  width: 1.5rem;
  text-align: center;
}

.msc-challenge-text-body {
  overflow-wrap: anywhere;
}

.msc-challenge-text-body > :first-child {
  margin-top: 0;
}

.msc-challenge-text-body > :last-child {
  margin-bottom: 0;
}

.msc-challenge-text-body h1,
.msc-challenge-text-body h2,
.msc-challenge-text-body h3,
.msc-challenge-text-body h4,
.msc-challenge-text-body h5,
.msc-challenge-text-body h6 {
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.msc-challenge-text-body ul,
.msc-challenge-text-body ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.msc-challenge-text-body blockquote {
  border-left: 0.25rem solid #dee2e6;
  color: #6c757d;
  margin: 0 0 1rem;
  padding: 0.25rem 0 0.25rem 1rem;
}

.msc-challenge-text-body pre {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  padding: 0.75rem;
  overflow-x: auto;
}

.msc-challenge-text-body code {
  color: #6f42c1;
}

.msc-challenge-text-body pre code {
  color: inherit;
}

/* Smaller screens: tighten padding/font sizes so 7 columns keep fitting instead of
  forcing the grid wider than its container. */
@media (max-width: 575.98px) {
  .msc-calendar-day {
    min-height: 4rem;
    padding: 0.15rem;
  }

  .msc-calendar-weekday {
    padding: 0.2rem 0.15rem;
    font-size: 0.65rem;
  }

  .msc-calendar-day-number {
    font-size: 0.7rem;
  }

  .msc-calendar-entry {
    font-size: 0.6rem;
    padding: 0.05rem 0.2rem;
  }
}



/* Sortable table column headers (assets/js/sortable-table.js) */
.msc-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.msc-sortable::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f0dc"; /* fa-sort */
  margin-left: 0.35rem;
  opacity: 0.35;
  font-size: 0.75em;
}

.msc-sortable.msc-sort-asc::after {
  content: "\f0de"; /* fa-sort-up */
  opacity: 1;
}

.msc-sortable.msc-sort-desc::after {
  content: "\f0dd"; /* fa-sort-down */
  opacity: 1;
}