/* ****************************************************** */
/* CONTAINER PRINCIPAL
/* ****************************************************** */

.page-app_login {
  /* Le formulaire garde Bootstrap */

  .login-form-card {
    border: none;
    border-radius: 1rem;
    box-shadow: var(--box-shadow);

    &:hover {
      box-shadow: var(--box-shadow--hover);
    }
  }

  .login-form-header {
    border: none;

    h1 {
      font-weight: 500;
      margin: 0 0 0.5rem 0;
      text-transform: uppercase;
      letter-spacing: -1px;
    }
  }

  .login-form-label {
    font-weight: 600;
    color: var(--color-grass-11);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .login-form-input {
    border: 2px solid var(--color-grass-4);
    border-radius: 1rem;
    background-color: var(--color-grass-1);

    &:focus {
      border-color: var(--color-grass-10);
      box-shadow: 0 0 0 0.2rem rgba(62, 155, 79, 0.25);
      background-color: #fff;
    }
  }

  .login-form-button {
    background-color: var(--color-grass-11);
    border-color: var(--color-grass-11);
    border-radius: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    &:hover {
      background-color: var(--color-grass-10);
      border-color: var(--color-grass-10);
      transform: translateY(-2px);
      box-shadow: var(--box-shadow--hover);
    }
  }

  .login-form-check {
    &:checked {
      background-color: var(--color-grass-11);
      border-color: var(--color-grass-11);
    }

    &:focus {
      border-color: var(--color-grass-10);
      box-shadow: 0 0 0 0.2rem rgba(62, 155, 79, 0.25);
    }
  }

  .login-form-footer {
    background-color: var(--color-grass-2);
    border-top: 1px solid var(--color-grass-4);

    small {
      color: var(--color-grass-11);
    }
  }
}

/* ****************************************************** */
/* Astérisques pour les champs obligatoires */
/* ****************************************************** */
.page-app_login {
  .required {
    color: #dc3545;
    font-weight: bold;
    margin-left: 0.125rem;
  }

  /* Styles de validation d'erreur */
  .login-form-input.error {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
  }

  .login-form-check.error {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
  }

  .error-message {
    color: #dc3545;
    font-size: 0.8rem;
    margin-top: 0.25rem;
    display: block;
  }
}