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

// ── Block ─────────────────────────────────────────────────────────────────────
.profile {
  background: var(--clr-surface, #{$color-surface});
  border: 1px solid var(--clr-border, #{$color-border});
  border-radius: $radius-xl;
  box-shadow: $shadow-sm;
  overflow: hidden;

  // ── Elements ────────────────────────────────────────────────────────────────
  &__banner {
    display: flex;
    align-items: center;
    gap: $spacing-4;
    padding: $spacing-6;
    background: linear-gradient(135deg, $primary-50, $accent-50);
    border-bottom: 1px solid var(--clr-border, #{$color-border});
  }

  &__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid var(--clr-surface, #{$color-surface});
    box-shadow: $shadow-base;
    object-fit: cover;
  }

  &__name {
    font-size: $font-size-lg;
    font-weight: $font-weight-semibold;
    color: var(--clr-text, #{$color-text-primary});
    margin-bottom: $spacing-2;
  }

  &__role-badge {
    display: inline-block;
    padding: 2px $spacing-3;
    border-radius: $radius-full;
    font-size: $font-size-xs;
    font-weight: $font-weight-semibold;
    text-transform: uppercase;
    letter-spacing: 0.05em;

    &--admin  { background: $primary-100; color: $primary-700; }
    &--client { background: $accent-100;  color: $accent-700;  }
  }

  &__list {
    list-style: none;
    padding: $spacing-4 $spacing-6;
    display: flex;
    flex-direction: column;
  }

  &__item {
    display: flex;
    align-items: center;
    gap: $spacing-3;
    padding: $spacing-3 0;
    border-bottom: 1px solid var(--clr-border, #{$gray-100});

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

  &__item-icon  { color: $primary-400; flex-shrink: 0; }

  &__item-label {
    font-size: $font-size-sm;
    color: var(--clr-text-secondary, #{$color-text-secondary});
    min-width: 140px;
  }

  &__item-value {
    font-size: $font-size-sm;
    font-weight: $font-weight-medium;
    color: var(--clr-text, #{$color-text-primary});
  }

  &__footer {
    display: flex;
    align-items: center;
    gap: $spacing-2;
    padding: $spacing-3 $spacing-6;
    font-size: $font-size-xs;
    color: var(--clr-text-muted, #{$color-text-muted});
    background: var(--clr-surface-raised, #{$gray-50});
    border-top: 1px solid var(--clr-border, #{$color-border});
  }

  &__state {
    padding: $spacing-6;
    color: var(--clr-text-secondary, #{$color-text-secondary});
    font-size: $font-size-sm;

    &--error { color: $color-error; }
  }
}
