@use '../globals' as *;

// =============================================================================
// International Press Zone - Stat Card Component
// =============================================================================
// Statistics card styles for dashboard
// =============================================================================

$background-white: #ffffff !default;
$border-radius-lg: 8px !default;

.international-stat-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  background: $background-white;
  border-radius: $border-radius-lg;
  padding: 20px;
  border-left: 4px solid transparent;
  transition: border-color 0.2s ease;

  // Icon on left
  &__icon {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
  }

  // Value (number) in middle
  &__value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    transition: color 0.2s ease;
    flex-shrink: 0;
  }

  // Label on right - smaller, medium weight
  &__label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    transition: color 0.2s ease;
  }

  // Color modifiers
  &--red {
    border-left-color: #e53935;

    .international-stat-card__value,
    .international-stat-card__label {
      color: #e53935;
    }
  }

  &--orange {
    border-left-color: #fb8c00;

    .international-stat-card__value,
    .international-stat-card__label {
      color: #fb8c00;
    }
  }

  &--yellow {
    border-left-color: #fdd835;

    .international-stat-card__value,
    .international-stat-card__label {
      color: #fdd835;
    }
  }

  &--blue {
    border-left-color: #42a5f5;

    .international-stat-card__value,
    .international-stat-card__label {
      color: #42a5f5;
    }
  }

  &--green {
    border-left-color: #43a047;

    .international-stat-card__value,
    .international-stat-card__label {
      color: #43a047;
    }
  }

  &--purple {
    border-left-color: #8e24aa;

    .international-stat-card__value,
    .international-stat-card__label {
      color: #8e24aa;
    }
  }

  &--cyan {
    border-left-color: #00acc1;

    .international-stat-card__value,
    .international-stat-card__label {
      color: #00acc1;
    }
  }

  &--brown {
    border-left-color: #6d4c41;

    .international-stat-card__value,
    .international-stat-card__label {
      color: #6d4c41;
    }
  }
}

// Stats grid container
.international-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 24px;
}