timetracking/httpdocs/assets/styles/components/_login.scss

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

// ─── Login Page ───────────────────────────────────────────────────────────────
.login-body {
  min-height: 100vh;
  background: $color-bg;
  display: flex;
  align-items: center;
  justify-content: center;
}

// ─── Card ─────────────────────────────────────────────────────────────────────
.login-card {
  background: $color-card-white;
  border-radius: $radius-xl;
  padding: $space-10 $space-12;
  width: 100%;
  max-width: 540px;
  box-shadow: $shadow-card;
}

.login-card__title {
  font-size: $font-size-xl;
  font-weight: $font-weight-bold;
  color: $color-text-dark;
  text-align: center;
  margin-bottom: $space-8;
}

.login-card__error {
  background: rgba(200, 50, 50, 0.08);
  border: 1px solid rgba(200, 50, 50, 0.25);
  border-radius: $radius-sm;
  color: #c83232;
  font-size: $font-size-sm;
  padding: $space-3 $space-4;
  margin-bottom: $space-6;
}

// ─── Form Grid ────────────────────────────────────────────────────────────────
.login-form__grid {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: $space-5 $space-4;
  align-items: center;
  margin-bottom: $space-5;
}

.login-form__label {
  font-size: $font-size-base;
  color: $color-text-muted;
  text-align: right;
  padding-right: $space-2;
}

.login-form__field {
  display: flex;
  align-items: center;
  gap: $space-3;
}

.login-form__field--password {
  // Platz für "vergessen?" Link, falls später hinzukommt
}

// ─── "Angemeldet bleiben" ─────────────────────────────────────────────────────
.login-form__remember {
  display: flex;
  justify-content: center;
  margin-bottom: $space-6;
}

.login-form__remember-label {
  display: flex;
  align-items: center;
  gap: $space-2;
  cursor: pointer;
  font-size: $font-size-base;
  color: $color-text-base;

  input[type='checkbox'] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: $color-primary;
  }
}

// ─── Submit ───────────────────────────────────────────────────────────────────
.login-form__actions {
  display: flex;
  justify-content: center;
}

.login-form__submit {
  padding: $space-3 $space-10;
  font-size: $font-size-md;
}