/* Shared login-page layout primitives.
   Pages preserve their current look by overriding the variables below. */

:root {
  --login-card-width: auto;
  --login-card-max-width: none;
  --login-brand-gap: 12px;
  --login-brand-justify: flex-start;
  --login-brand-text-align: left;
  --login-brand-logo-size: 44px;
  --login-brand-logo-radius: 12px;
  --login-brand-logo-padding: 0;
  --login-brand-logo-bg: rgba(255,255,255,0.12);
  --login-brand-logo-border: 1px solid rgba(255,255,255,0.25);
  --login-title-size: 22px;
  --login-hint-size: 13px;
  --login-hint-color: #cbd5f5;
  --login-hint-margin: 0 0 16px 0;
  --login-status-align: center;
  --login-status-color: #e2e8f0;
  --login-status-size: 13px;
  --login-status-margin-top: 10px;
  --login-support-justify: center;
  --login-support-margin-top: 14px;
  --login-ghost-padding: 10px 16px;
  --login-ghost-radius: 12px;
  --login-ghost-border: 1px solid rgba(255, 255, 255, 0.35);
  --login-ghost-bg: rgba(255, 255, 255, 0.08);
  --login-ghost-color: #e8eefc;
  --login-ghost-shadow: 0 10px 24px rgba(5, 9, 20, 0.35);
  --login-ghost-shadow-hover: 0 12px 28px rgba(5, 9, 20, 0.4);
  --login-home-width: 100%;
  --login-home-max-width: 360px;
  --login-home-margin-top: 14px;
  --login-home-text-shadow: none;
  --login-remember-color: #cbd5f5;
  --login-right-pad: 0px;
  --login-top-pad: 0px;
  --login-card-mobile-width: min(360px, calc(100vw - 32px));
}

.card.login-card {
  width: var(--login-card-width);
  max-width: var(--login-card-max-width);
}

.brand-row {
  display: flex;
  align-items: center;
  justify-content: var(--login-brand-justify);
  gap: var(--login-brand-gap);
  margin-bottom: 12px;
}

.brand-row > div {
  text-align: var(--login-brand-text-align);
}

.brand-row img {
  width: var(--login-brand-logo-size);
  height: var(--login-brand-logo-size);
  border-radius: var(--login-brand-logo-radius);
  object-fit: cover;
  border: var(--login-brand-logo-border);
  background: var(--login-brand-logo-bg);
  padding: var(--login-brand-logo-padding);
}

.brand-row h1 {
  margin: 0;
  font-size: var(--login-title-size);
}

.hint {
  font-size: var(--login-hint-size);
  color: var(--login-hint-color);
  margin: var(--login-hint-margin);
}

.status {
  margin-top: var(--login-status-margin-top);
  font-size: var(--login-status-size);
  color: var(--login-status-color);
  text-align: var(--login-status-align);
}

.status.error {
  color: #fca5a5;
}

.status.success {
  color: #a7f3d0;
}

.support-row {
  display: flex;
  justify-content: var(--login-support-justify);
  margin-top: var(--login-support-margin-top);
}

.ghost,
.home-button {
  padding: var(--login-ghost-padding);
  border-radius: var(--login-ghost-radius);
  border: var(--login-ghost-border);
  background: var(--login-ghost-bg);
  color: var(--login-ghost-color);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--login-ghost-shadow);
  text-decoration: none;
}

.ghost:hover,
.home-button:hover {
  box-shadow: var(--login-ghost-shadow-hover);
}

.home-button {
  margin-top: var(--login-home-margin-top);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--login-home-width);
  max-width: var(--login-home-max-width);
  text-shadow: var(--login-home-text-shadow);
}

.remember-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--login-remember-color);
  margin-top: 6px;
  user-select: none;
}

.remember-row input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 14px rgba(5, 9, 20, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  display: inline-grid;
  place-content: center;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  cursor: pointer;
}

.remember-row input[type="checkbox"]::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: linear-gradient(120deg, #7DEBCB 0%, #6EB0F5 100%);
  box-shadow: 0 2px 6px rgba(90, 196, 255, 0.45);
  transform: scale(0);
  transition: transform 0.12s ease;
}

.remember-row input[type="checkbox"]:checked::after {
  transform: scale(1);
}

.remember-row input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(110, 168, 255, 0.3), 0 6px 14px rgba(5, 9, 20, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

html[data-align-right] body {
  width: 100%;
  align-items: flex-end;
  justify-content: flex-start;
  padding-top: calc(20px + var(--login-top-pad, 0px));
  padding-right: calc(20px + var(--login-right-pad, 0px));
}

@media (max-width: 720px) {
  html[data-align-right] body {
    padding-top: 96px;
    padding-right: 32px;
  }

  html[data-align-right] body .card.login-card {
    width: var(--login-card-mobile-width);
    max-width: var(--login-card-mobile-width);
  }
}