@use '../variables' as v;
@use '../mixins' as m;
@use 'sass:color';

// Settings tab navigation
.settings-tabs {
  @include m.flex-start;
  gap: 0;
  border-bottom: 2px solid v.$border-color;
  margin-bottom: 24px;
  overflow-x: auto;
  @include m.scrollbar-thin;
}

.settings-tab {
  @include m.flex-start;
  gap: 7px;
  padding: 10px 16px;
  font-size: v.$font-size-sm;
  font-weight: 500;
  color: v.$gray-500;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color v.$transition-base, border-color v.$transition-base;

  svg { width: 15px; height: 15px; }

  &:hover { color: v.$gray-700; }

  &.is-active {
    color: v.$primary;
    border-bottom-color: v.$primary;
  }
}

.settings-panel { display: none; &.is-active { display: block; } }

// Settings section
.settings-section {
  @include m.card-base;
  margin-bottom: 22px;
  overflow: hidden;

  &-header {
    padding: 16px 22px;
    border-bottom: 1px solid v.$border-color;

    h3 {
      font-size: v.$font-size-base;
      font-weight: 600;
      color: v.$gray-800;
    }

    p {
      font-size: v.$font-size-xs;
      color: v.$gray-500;
      margin-top: 3px;
    }
  }

  &-body { padding: 22px; }

  &-footer {
    padding: 14px 22px;
    border-top: 1px solid v.$border-color;
    background: v.$gray-50;
    @include m.flex-between;
  }

  // Danger zone
  &--danger {
    border-color: v.$danger-border;

    .settings-section-header {
      background: v.$danger-light;
      border-color: v.$danger-border;

      h3 { color: v.$danger; }
    }
  }
}

// Team member row
.team-member-row {
  @include m.flex-between;
  padding: 12px 0;
  border-bottom: 1px solid v.$border-color;
  gap: 12px;

  &:last-child { border-bottom: none; }

  &-left { @include m.flex-start; gap: 12px; }

  &-avatar {
    width: 36px;
    height: 36px;
    border-radius: v.$radius-full;
    background: v.$primary-light;
    @include m.flex-center;
    font-size: v.$font-size-sm;
    font-weight: 600;
    color: v.$primary;
    border: 1px solid v.$primary-border;
    flex-shrink: 0;
  }

  &-name  { font-size: v.$font-size-sm; font-weight: 600; color: v.$gray-800; }
  &-email { font-size: v.$font-size-xs; color: v.$gray-400; }

  &-actions { @include m.flex-start; gap: 8px; }
}

// SMTP config card
.smtp-card {
  @include m.card-base;
  overflow: hidden;
  margin-bottom: 16px;

  &-header {
    @include m.flex-between;
    padding: 16px 20px;
    border-bottom: 1px solid v.$border-color;
    background: v.$gray-50;

    &-title {
      font-size: v.$font-size-base;
      font-weight: 600;
      color: v.$gray-800;
    }
  }

  &-body { padding: 20px; }
}

.smtp-test-result {
  @include m.flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: v.$radius;
  font-size: v.$font-size-sm;
  margin-top: 14px;

  &--success { background: v.$success-light; color: color.adjust(v.$success, $lightness: -10%); border: 1px solid v.$success-border; }
  &--error   { background: v.$danger-light;  color: color.adjust(v.$danger, $lightness: -5%);  border: 1px solid v.$danger-border; }

  svg { width: 16px; height: 16px; flex-shrink: 0; }
}
