/* Single-day statistics enhancements. Scoped to the statistics overview. */
.stats-overview-page .stats-metric-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.stats-date-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 92px;
  gap: 20px;
}

.stats-date-copy {
  min-width: 250px;
}

.stats-date-copy h3 {
  margin: 0 0 3px;
  color: var(--ui-text, #18364f);
  font-size: 18px;
}

.stats-date-copy p:last-child {
  margin: 0;
}

.stats-date-controls {
  display: grid;
  grid-template-columns: minmax(250px, 290px) auto;
  align-items: end;
  justify-content: end;
  gap: 8px 12px;
}

.stats-date-field {
  display: grid;
  grid-template-columns: 72px minmax(160px, 1fr);
  align-items: center;
  gap: 8px;
}

.stats-date-field > span {
  padding: 0;
  text-align: right;
}

.stats-date-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stats-date-shortcuts .is-active {
  color: var(--ui-primary-strong, #1879b2);
  background: var(--ui-primary-soft, #e8f5fc);
  border-color: #91caff;
}

.stats-date-status {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ui-primary, #278fca);
  font-size: 12px;
  text-align: right;
}

.stats-date-status.is-error {
  color: var(--ui-danger, #b85b60);
}

.stats-overview-page.is-loading > :not(.stats-date-toolbar) {
  opacity: 0.58;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.ranking-name {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ranking-crown {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: #d89614;
}

.ranking-crown svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 820px) {
  .stats-date-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .stats-date-controls {
    grid-template-columns: minmax(240px, 1fr) auto;
    justify-content: stretch;
  }
}

@media (max-width: 560px) {
  .stats-date-controls,
  .stats-date-field {
    grid-template-columns: 1fr;
  }

  .stats-date-field > span,
  .stats-date-status {
    text-align: left;
  }

  .stats-date-shortcuts .ghost-button {
    flex: 1 1 calc(50% - 8px);
  }
}