/**
 * Сторінка входу (lh-login.html) — окремо від канбану
 */

.lh-login-page {
  margin: 0;
  min-height: 100vh;
  isolation: isolate;
  background-color: var(--lh-bg-page);
  font-family: 'Ruberoid', system-ui, -apple-system, sans-serif;
  color: var(--lh-text);
}

.lh-login-page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: var(--lh-bg-page-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  filter: grayscale(1);
  pointer-events: none;
}

.lh-login {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.lh-login__accent {
  display: none;
  width: 4px;
  flex-shrink: 0;
  background: var(--lh-accent);
}

@media (min-width: 600px) {
  .lh-login__accent {
    display: block;
  }
}

.lh-login__shell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}

.lh-login__card {
  width: 100%;
  max-width: 400px;
  background: var(--lh-login-card-bg);
  border: 1px dashed var(--lh-border-dashed);
  border-radius: 12px;
  padding: 32px 28px 36px;
  box-shadow: var(--lh-shadow-login);
}

.lh-login__brand {
  margin: 0 0 6px;
  font-family: 'Ruberoid', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--lh-text);
  letter-spacing: 0.02em;
  text-align: center;
}

.lh-login__subtitle {
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--lh-text-muted);
  text-align: center;
}

.lh-login__errors {
  margin-bottom: 16px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--lh-login-error-bg);
  border: 1px solid var(--lh-border-login-error);
}

.lh-login__error {
  margin: 0;
  font-size: 13px;
  color: var(--lh-text-error);
}

.lh-login__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lh-login__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lh-login__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--lh-text-secondary);
}

.lh-login__input {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--lh-text);
  background: var(--lh-bg-elevated);
  border: 1px solid var(--lh-border-input);
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lh-login__input:hover {
  border-color: var(--lh-border-input-hover);
}

.lh-login__input:focus {
  outline: none;
  border-color: var(--lh-accent);
  box-shadow: 0 0 0 3px var(--lh-focus-ring);
}

.lh-login__field-error {
  margin: 0;
  font-size: 12px;
  color: var(--lh-text-danger);
}

.lh-login__submit {
  margin-top: 8px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  color: var(--lh-text-inverse);
  background: var(--lh-accent);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.lh-login__submit:hover {
  background: var(--lh-login-submit-hover);
}

.lh-login__submit:active {
  transform: scale(0.99);
}