/* ============================================================
   Login page — per-page styles (scoped under the `.login` root)

   Loaded globally from index.html, but every rule is scoped under `.login`,
   so it effectively applies only on the login screen. Don't put general /
   reusable rules here — those belong in themes/core/components.css.

   Identity: a "grid + glow" backdrop (dark void + 64px grid + dual radial
   glow) with NO frame — the form sits directly on the grid. The light theme
   gets an analogous light backdrop (light grid + soft tinted glow) via the
   body[data-theme-base="light"] overrides at the bottom of this file
   (по базе темы, а не по id — новые светлые темы подхватят автоматически).
   Tokens: themes/core/variables.css (--login-*).
   ============================================================ */

.login {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  overflow: hidden;
}

/* Backdrop: base fill + two soft radial glows + a subtle 64px grid */
.login__background {
  position: absolute;
  inset: 0;
  background-color: var(--login-bg);
  background-image:
    radial-gradient(circle at 22% 18%, var(--login-glow-1) 0%, transparent 55%),
    radial-gradient(circle at 82% 85%, var(--login-glow-2) 0%, transparent 55%),
    linear-gradient(var(--login-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--login-grid-line) 1px, transparent 1px);
  background-size:
    100% 100%,
    100% 100%,
    var(--login-grid-size) var(--login-grid-size),
    var(--login-grid-size) var(--login-grid-size);
  animation: loginGlowDrift 24s ease-in-out infinite;
}

/* Very slow, subtle glow drift (grid layers stay fixed) — calm, not flashy */
@keyframes loginGlowDrift {
  0%, 100% { background-position: 0% 0%, 100% 100%, 0 0, 0 0; }
  50%      { background-position: 6% 4%, 94% 96%, 0 0, 0 0; }
}

.login__theme-selector {
  position: absolute;
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  z-index: var(--z-header);
}

/* No rectangular frame — the login is a dim glowing CIRCLE enclosing the form
   (only the thin ring is visible). Being the form's container, it reacts to the
   mouse across the whole disc — border-radius makes the hit-test circular, and
   the inputs inside keep it "hovered" while you type. */
.login__card {
  position: relative;
  z-index: var(--z-base);
  width: var(--login-ring-size);
  height: var(--login-ring-size);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* extra bottom padding lifts the optically bottom-heavy stack up to the
     circle's optical centre (the counterpart of the old ring offset) */
  padding-bottom: calc(var(--login-ring-offset-y) * 2);
  /*border: 1px solid var(--login-ring-border);*/
  border-radius: 50%;
  background: radial-gradient(circle at 50% 48%, var(--login-ring-fill) 0%, transparent 68%);
  box-shadow:
    0 0 90px 6px var(--login-ring-glow),
    inset 0 0 60px var(--login-ring-fill);
  transition: border-color 0.25s ease, box-shadow 0.3s ease, background 0.3s ease;
  animation: loginCardFadeIn 0.6s ease-out;
}

/* Mouse inside the circle — the ring wakes up: brighter edge, deeper glow */
.login__card:hover {
  border-color: var(--login-ring-border-hover);
  background: radial-gradient(circle at 50% 48%, var(--login-ring-fill-hover) 0%, transparent 70%);
  box-shadow:
    0 0 120px 12px var(--login-ring-glow-hover),
    inset 0 0 74px var(--login-ring-fill-hover);
}

/* Gentle tactile "press" while clicking anywhere within the circle */
.login__card:active {
  box-shadow:
    0 0 90px 6px var(--login-ring-glow-hover),
    inset 0 0 96px var(--login-ring-fill-hover);
}

/* Inner content column — kept to the inputs' width, centred in the disc */
.login__header,
.login__form,
.login__error {
  width: 100%;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

/* Технические работы: строка видна всем и до всякого входа — отказ «503» без
   объяснения человек читает как поломку. Полосой поверху, а не внутри круга:
   круг задан фиксированным размером (--login-ring-size), и лишний текст внутри
   вылез бы за него. Тон предупреждения, не ошибки: это не сбой пользователя. */
.login__maintenance {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  display: flex;
  justify-content: center;
  padding: 10px var(--spacing-lg);
  border-bottom: 1px solid var(--warning-box-border);
  background: var(--warning-box-bg);
  color: var(--warning-box-text-color);
}

/* Полосе отдана вся ширина экрана: сообщение должно уместиться в одну строку. */
.login__maintenance .maintenance-line {
  max-width: 100%;
}

/* Переключатель темы висит в том же верхнем правом углу — при полосе он
   уезжает под неё, иначе они наложатся. */
.login--maintenance .login__theme-selector {
  top: 64px;
}

@keyframes loginCardFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .login__card { animation: none; transition: none; }
}

.login__header {
  text-align: center;
  /* Matches the button gap below the fields (~40px) so the field pair is framed
     symmetrically top and bottom. */
  margin-bottom: var(--spacing-2xl);
  margin-top: 20px;
}

.login__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-md);
}

.login__logo img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.login__title {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: 28px;
  font-weight: 700;
  color: var(--login-card-fg);
  letter-spacing: -0.5px;
}

.login__subtitle {
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--login-card-fg-muted);
  font-weight: 500;
}

.login__form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.login__error {
  margin-bottom: var(--spacing-lg);
}

.login__form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.login__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--login-card-fg-muted);
}

/* Inputs are pinned to a dark-glass look on the dark backdrop regardless of the
   active app theme; the light theme re-styles them at the bottom of this file. */
.login .form__input {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--login-card-fg);
}

.login .form__input::placeholder {
  color: rgba(250, 250, 250, 0.40);
}

.login .form__input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.20);
}

/* Compact button, sized to roughly match the "Integrator" title word */
.login__button {
  width: var(--login-button-width);
  margin-top: 40px;
}

.login__footer {
  display: flex;
  justify-content: center;
  /* Form's own 24px gap + this = ~40px: sets the action apart without a rift. */
  margin-top: var(--spacing-md);
}

.login__footer-text {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--login-card-fg-muted);
  line-height: 1.5;
}

/* Responsive — the circle shrinks with the viewport via --login-ring-size */
@media (max-width: 640px) {
  .login__title {
    font-size: 24px;
  }
}

/* ============================================================
   Light theme — same "grid + glow" identity, frameless, inverted to light.
   Only overrides; everything else inherits the base rules above.
   ============================================================ */
body[data-theme-base="light"] {
  --login-bg: #eef1f5;
  --login-grid-line: rgba(20, 30, 45, 0.045); /* faint dark grid on light ground */
  --login-glow-1: rgba(37, 99, 235, 0.08);    /* soft blue */
  --login-glow-2: rgba(124, 58, 237, 0.05);   /* soft violet */
  --login-card-fg: #1f2937;
  --login-card-fg-muted: #6b7280;
  --login-ring-border: rgba(20, 30, 45, 0.10); /* dim contour on light ground */
  --login-ring-glow: rgba(37, 99, 235, 0.10);  /* soft blue halo */
  --login-ring-fill: rgba(37, 99, 235, 0.045); /* faint central lift */
  --login-ring-border-hover: rgba(20, 30, 45, 0.20);
  --login-ring-glow-hover: rgba(37, 99, 235, 0.16);
  --login-ring-fill-hover: rgba(37, 99, 235, 0.07);
}

/* Light inputs — override the dark-glass pinning from the base rules */
body[data-theme-base="light"] .login .form__input {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--form-input-border);
  color: var(--color-text-primary);
}

body[data-theme-base="light"] .login .form__input::placeholder {
  color: var(--form-placeholder);
}

body[data-theme-base="light"] .login .form__input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}