@use '../variables' as v;
@use '../mixins' as m;

// Settings tab navigation
.settings-tabs {
  @include m.flex-start;
  gap: 0;
  border-bottom: 2px solid var(--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: var(--text-secondary);
  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: var(--text-primary); }

  &.is-active {
    color: var(--active-text);
    border-bottom-color: var(--active-text);
  }
}

.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 var(--border-color);

    h3 {
      font-size: v.$font-size-base;
      font-weight: 600;
      color: var(--text-primary);
    }

    p {
      font-size: v.$font-size-xs;
      color: var(--text-secondary);
      margin-top: 3px;
    }
  }

  &-body { padding: 22px; }

  &-footer {
    padding: 14px 22px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-hover);
    @include m.flex-between;
  }

  // Danger zone
  &--danger {
    border-color: var(--danger-border);

    .settings-section-header {
      background: var(--danger-light);
      border-color: var(--danger-border);

      h3 { color: var(--danger); }
    }
  }
}

// Team member row
.team-member-row {
  @include m.flex-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--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: var(--active-bg);
    @include m.flex-center;
    font-size: v.$font-size-sm;
    font-weight: 600;
    color: var(--active-text);
    border: 1px solid var(--border-color);
    flex-shrink: 0;
  }

  &-name  { font-size: v.$font-size-sm; font-weight: 600; color: var(--text-primary); }
  &-email { font-size: v.$font-size-xs; color: var(--text-muted); }

  &-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 var(--border-color);
    background: var(--bg-hover);

    &-title {
      font-size: v.$font-size-base;
      font-weight: 600;
      color: var(--text-primary);
    }
  }

  &-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: var(--success-light); color: var(--success); border: 1px solid var(--success-border); }
  &--error   { background: var(--danger-light);  color: var(--danger);  border: 1px solid var(--danger-border); }

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