@use '../../styles/variables' as *;
@use '../../styles/mixins' as *;

.stats-dashboard {
  padding: $spacing-md;
}

// ── Controls ──────────────────────────────────────────────

.stats-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: $spacing-md;
  margin-bottom: $spacing-lg;
}

.preset-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: $spacing-xs;
}

.preset-btn {
  background: $neutral-white;
  border: 1px solid $neutral-light;
  border-radius: $radius-md;
  padding: $spacing-xs $spacing-md;
  font-size: 0.85rem;
  font-weight: 600;
  color: $neutral-dark;
  cursor: pointer;
  transition: all $transition-fast;

  &:hover {
    border-color: $primary-blue-muted;
    color: $primary-blue;
  }

  &.active {
    background: $primary-blue;
    border-color: $primary-blue;
    color: $neutral-white;
  }
}

.custom-dates {
  display: flex;
  gap: $spacing-sm;
  align-items: center;

  label {
    font-size: 0.85rem;
    color: $neutral-medium;
    display: flex;
    align-items: center;
    gap: $spacing-xs;
  }

  input[type="date"] {
    padding: $spacing-xs $spacing-sm;
    border: 1px solid $neutral-light;
    border-radius: $radius-sm;
    font-size: 0.85rem;
  }
}

.btn-parse {
  @include button-style($success-green, $neutral-white, darken($success-green, 8%));
  margin-left: auto;
}

.parse-progress {
  background: rgba($info-blue, 0.1);
  color: $info-blue;
  padding: $spacing-sm $spacing-md;
  border-radius: $radius-md;
  font-size: 0.85rem;
  margin-bottom: $spacing-md;
}

.error-message {
  background: rgba(#d32f2f, 0.1);
  color: #d32f2f;
  padding: $spacing-sm $spacing-md;
  border-radius: $radius-md;
  font-size: 0.85rem;
  margin-bottom: $spacing-md;
}

// ── Summary cards ─────────────────────────────────────────

.stats-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: $spacing-md;
  margin-bottom: $spacing-lg;
}

.stat-card {
  @include card-style;
  padding: $spacing-lg;
  text-align: center;

  .stat-value {
    font-family: $font-heading;
    font-size: 2rem;
    color: $primary-blue;
    margin-bottom: $spacing-xs;
  }

  .stat-label {
    font-size: 0.85rem;
    color: $neutral-medium;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
}

// ── Map ───────────────────────────────────────────────────

.map-section {
  @include card-style;
  padding: $spacing-lg;
  margin-bottom: $spacing-lg;

  h3 {
    font-family: $font-heading;
    color: $primary-blue;
    margin: 0 0 $spacing-md;
  }
}

.map-container {
  height: 400px;
  border-radius: $radius-md;
  overflow: hidden;
  position: relative;

  .map-leaflet {
    width: 100%;
    height: 100%;
  }
}

// ── Chart ─────────────────────────────────────────────────

.chart-section {
  @include card-style;
  padding: $spacing-lg;
  margin-bottom: $spacing-lg;

  h3 {
    font-family: $font-heading;
    color: $primary-blue;
    margin: 0 0 $spacing-md;
  }
}

.chart-container {
  height: 300px;
  position: relative;
}

// ── Geo table ─────────────────────────────────────────────

.geo-table-section {
  @include card-style;
  padding: $spacing-lg;

  h3 {
    font-family: $font-heading;
    color: $primary-blue;
    margin: 0 0 $spacing-md;
  }
}

// ── Responsive ────────────────────────────────────────────

@include responsive(md) {
  .stats-controls {
    flex-direction: column;
    align-items: flex-start;
  }

  .btn-parse {
    margin-left: 0;
  }

  .map-container {
    height: 280px;
  }

  .chart-container {
    height: 220px;
  }
}