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

// ── Block ─────────────────────────────────────────────────────────────────────
.login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, $primary-800 0%, $primary-600 50%, $accent-600 100%);
  padding: $spacing-4;

  // ── Elements ────────────────────────────────────────────────────────────────
  &__card {
    width: 100%;
    max-width: 420px;
    background: var(--clr-surface, #{$color-surface});
    border-radius: $radius-xl;
    box-shadow: $shadow-xl;
    padding: $spacing-10 $spacing-8;
  }

  &__header {
    text-align: center;
    margin-bottom: $spacing-8;
  }

  &__title {
    font-size: $font-size-2xl;
    font-weight: $font-weight-bold;
    color: $primary-700;
    margin-bottom: $spacing-1;
  }

  &__subtitle {
    font-size: $font-size-sm;
    color: var(--clr-text-secondary, #{$color-text-secondary});
  }

  &__form {
    display: flex;
    flex-direction: column;
    gap: $spacing-5;
  }

  &__alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: $spacing-3 $spacing-4;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: $radius-base;
    color: #991b1b;
    font-size: $font-size-sm;
  }

  &__alert-close {
    background: none;
    border: none;
    font-size: $font-size-lg;
    line-height: 1;
    color: #991b1b;
    padding: 0 $spacing-1;
    cursor: pointer;

    &:hover { opacity: 0.7; }
  }

  &__field {
    display: flex;
    flex-direction: column;
    gap: $spacing-1;
  }

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

  &__input {
    width: 100%;
    padding: $spacing-3 $spacing-4;
    border: 1px solid var(--clr-border, #{$color-border});
    border-radius: $radius-base;
    font-size: $font-size-base;
    color: var(--clr-text, #{$color-text-primary});
    background: var(--clr-surface, #{$color-surface});
    transition: border-color $transition-fast, box-shadow $transition-fast;
    outline: none;

    &::placeholder { color: var(--clr-text-muted, #{$color-text-muted}); }

    &:focus {
      border-color: $primary-400;
      box-shadow: 0 0 0 3px rgba($primary-400, 0.2);
    }

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

      &:focus { border-color: $color-error; box-shadow: 0 0 0 3px rgba($color-error, 0.2); }
    }
  }

  &__field-error {
    font-size: $font-size-xs;
    color: $color-error;
    margin-top: $spacing-1;
  }

  &__submit {
    margin-top: $spacing-2;
    width: 100%;
    padding: $spacing-3 $spacing-4;
    background: var(--clr-primary, #{$color-primary});
    color: #fff;
    border: none;
    border-radius: $radius-base;
    font-size: $font-size-base;
    font-weight: $font-weight-semibold;
    font-family: $font-family-base;
    cursor: pointer;
    transition: background $transition-fast, opacity $transition-fast;

    &:hover:not(:disabled) { background: var(--clr-primary-hover, #{$color-primary-hover}); }
    &:disabled { opacity: 0.6; cursor: not-allowed; }
  }

  &__success {
    padding: $spacing-3 $spacing-4;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: $radius-base;
    color: #15803d;
    font-size: $font-size-sm;
    font-weight: $font-weight-medium;
  }

  &__register-link {
    margin-top: $spacing-5;
    text-align: center;
    font-size: $font-size-sm;
    color: var(--clr-text-secondary, #{$color-text-secondary});
  }

  &__link {
    color: var(--clr-primary, #{$color-primary});
    font-weight: $font-weight-medium;
    text-decoration: none;

    &:hover { text-decoration: underline; }
  }

  &__hint {
    margin-top: $spacing-6;
    padding: $spacing-3 $spacing-4;
    background: var(--clr-surface-raised, #{$gray-50});
    border-radius: $radius-base;
    font-size: $font-size-xs;
    color: var(--clr-text-secondary, #{$color-text-secondary});
    line-height: $line-height-relaxed;

    strong { color: var(--clr-text, #{$color-text-primary}); }
  }

  // ── 2FA elements ─────────────────────────────────────────────────────────────
  &__twofa-icon {
    color: $primary-600;
    margin-bottom: $spacing-3;
  }

  &__code-preview {
    margin-bottom: $spacing-6;
    border: 1px solid var(--clr-border);
    border-radius: $radius-lg;
    overflow: hidden;
    font-size: $font-size-sm;
  }

  &__code-bar {
    display: flex;
    align-items: center;
    gap: $spacing-2;
    padding: $spacing-2 $spacing-4;
    background: var(--clr-surface-raised, #{$gray-50});
    border-bottom: 1px solid var(--clr-border);
  }

  &__code-dot {
    width: 10px;
    height: 10px;
    border-radius: $radius-full;
    background: var(--clr-border);
  }

  &__code-bar-label {
    font-size: $font-size-xs;
    color: var(--clr-text-muted);
    margin-left: auto;
  }

  &__code-body {
    padding: $spacing-4;
    color: var(--clr-text-secondary);
    line-height: $line-height-relaxed;
    display: flex;
    flex-direction: column;
    gap: $spacing-2;

    p { margin: 0; }
  }

  &__code-number {
    font-size: $font-size-2xl;
    font-weight: $font-weight-bold;
    letter-spacing: 0.2em;
    color: $primary-600;
    text-align: center;
    padding: $spacing-3 0;
  }

  &__code-note {
    font-size: $font-size-xs;
    color: var(--clr-text-muted);
  }
}
