/* ═══════════════════════════════════════════════════════════════════════════
   SpaceAST — оформление страницы входа Authelia 4.39.

   Подставляется в её HTML модулем replace-response (см. Caddyfile).
   Правится на живую: перезалил файл, обновил страницу Ctrl+F5. Ни пересборки
   образа, ни перезапуска контейнеров не нужно.

   Два факта про Authelia 4.39, из-за которых всё устроено именно так:

   1. Она собрана на Tailwind и держит палитру в CSS-переменных. Поэтому
      основная работа тут — переопределить её токены в :root, а не воевать
      с утилитарными классами. Точечных правил внизу немного.

   2. Она отдаёт строгий Content-Security-Policy. Встроенные <style> он
      блокирует, а внешние стили с того же домена пропускает — этот файл
      как раз такой. Шрифты из Google разрешены отдельной правкой заголовка
      в Caddyfile; если Google почему-то недоступен, страница откатится
      на системные шрифты и останется рабочей.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700&family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap');

/* ── Палитра ──────────────────────────────────────────────────────────── */

:root, html {
  --sa-void:   #0B0A0E;   /* дальний фон */
  --sa-ground: #131219;   /* середина градиента */
  --sa-card:   #1B1A21;
  --sa-text:   #F4F2EF;
  --sa-dim:    #8B8892;
  --sa-hair:   rgba(255,255,255,.10);
  --sa-hair-2: rgba(255,255,255,.17);
  --sa-brand:  #C2410C;   /* фирменный: белый текст на нём читается */
  --sa-flame:  #F0762B;   /* светлее, для акцентов на тёмном */

  /* токены Authelia — от них перестраивается всё остальное */
  --background:           var(--sa-ground);
  --foreground:           var(--sa-text);
  --card:                 var(--sa-card);
  --card-foreground:      var(--sa-text);
  --popover:              var(--sa-card);
  --popover-foreground:   var(--sa-text);
  --primary:              var(--sa-brand);
  --primary-foreground:   #FFFFFF;
  --secondary:            var(--sa-flame);
  --secondary-foreground: #FFFFFF;
  --muted:                #232229;
  --muted-foreground:     var(--sa-dim);
  --accent:               var(--sa-flame);
  --accent-foreground:    var(--sa-text);
  --destructive:          #E0533F;
  --destructive-foreground: #FFFFFF;
  --success:              #4FB07A;
  --border:               var(--sa-hair);
  --input:                var(--sa-hair-2);
  --ring:                 var(--sa-flame);
  --radius:               .75rem;
  --custom-icon:          var(--sa-text);
  --custom-loading-bar:   var(--sa-flame);
  --divider:              var(--sa-hair);
}

/* ── Фон: тёплое свечение за карточкой плюс звёздная пыль ─────────────── */

html, body {
  background: var(--sa-void) !important;
  color: var(--sa-text) !important;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
  margin: 0;
  min-height: 100%;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1000px 700px at 50% 34%, rgba(240,118,43,.20), transparent 58%),
    radial-gradient(1400px 800px at 50% 120%, rgba(120,80,255,.10), transparent 62%),
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.2px 1.2px at 78% 12%, rgba(255,255,255,.60), transparent),
    radial-gradient(1px   1px   at 32% 68%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.4px 1.4px at 91% 41%, rgba(255,255,255,.65), transparent),
    radial-gradient(1px   1px   at 22% 86%, rgba(255,255,255,.40), transparent),
    radial-gradient(1.2px 1.2px at 66% 92%, rgba(255,255,255,.50), transparent),
    radial-gradient(1px   1px   at  8% 52%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px   1px   at 57% 26%, rgba(255,255,255,.30), transparent),
    linear-gradient(180deg, var(--sa-void), var(--sa-ground) 50%, var(--sa-void));
}

#root { position: relative; z-index: 1; }

/* ── Шапка: переключатель языка оставляем, делаем неброским ───────────── */

header { background: transparent !important; }

#language-button {
  color: var(--sa-dim) !important;
  border: 1px solid var(--sa-hair) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  transition: color .15s, border-color .15s;
}
#language-button:hover {
  color: var(--sa-text) !important;
  border-color: var(--sa-hair-2) !important;
  background: transparent !important;
}

/* ── Сцена ────────────────────────────────────────────────────────────── */

#first-factor-stage {
  min-height: 100vh !important;
  padding: 24px 0 !important;
  margin-top: -46px;          /* компенсация высоты шапки, чтобы карточка встала по центру */
}

/* ── Карточка ─────────────────────────────────────────────────────────── */

#first-factor-stage > div > div {
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.008) 46%),
    rgba(27,26,33,.86);
  border: 1px solid var(--sa-hair);
  border-radius: 20px;
  padding: 40px 34px 26px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 30px 70px -20px rgba(0,0,0,.85),
    0 0 120px -40px rgba(240,118,43,.45);
  backdrop-filter: blur(10px);
}

/* ── Вордмарк вместо стандартной иконки пользователя ──────────────────── */
/* Иконку прячем, а её контейнер превращаем в надпись из двух цветов:
   два псевдоэлемента дают то, чего одним текстовым узлом не сделать. */

#UserSvg { display: none !important; }

div:has(> #UserSvg) {
  padding: 0 !important;
  margin: 0 0 9px !important;
  font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -.038em;
}
div:has(> #UserSvg)::before { content: 'Space'; color: var(--sa-text); }
div:has(> #UserSvg)::after  { content: 'AST';   color: var(--sa-flame); }

/* ── Заголовок «Авторизация» превращаем в подпись ─────────────────────── */

#first-factor-stage h5 {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
  letter-spacing: .3em !important;
  text-transform: uppercase !important;
  color: #7E7B86 !important;
  margin: 0 0 30px !important;
  padding-left: .3em;          /* компенсируем разрядку, чтобы текст встал по центру */
}

/* ── Поля ─────────────────────────────────────────────────────────────── */

#username-textfield,
#password-textfield {
  background: rgba(255,255,255,.04) !important;
  border-color: var(--sa-hair-2) !important;
  border-radius: 12px !important;
  color: var(--sa-text) !important;
  font-size: 15px !important;
  height: 3.5rem !important;
  transition: border-color .15s, background .15s, box-shadow .15s !important;
}
#username-textfield:hover,
#password-textfield:hover { border-color: rgba(255,255,255,.28) !important; }

#username-textfield:focus,
#password-textfield:focus {
  background: rgba(255,255,255,.07) !important;
  border-color: var(--sa-flame) !important;
  box-shadow: 0 0 0 3px rgba(240,118,43,.20) !important;
}

#form-login label { color: var(--sa-dim) !important; }
#form-login input:focus ~ label { color: var(--sa-flame) !important; }

/* Глазок «показать пароль» */
#form-login button[type="button"] { color: var(--sa-dim) !important; }
#form-login button[type="button"]:hover { color: var(--sa-text) !important; }

/* Автозаполнение Chrome не должно перекрашивать поле в белый */
#username-textfield:-webkit-autofill,
#password-textfield:-webkit-autofill {
  -webkit-text-fill-color: var(--sa-text) !important;
  -webkit-box-shadow: 0 0 0 1000px #22212A inset !important;
  caret-color: var(--sa-text);
}

/* ── Галочка «Запомнить» ──────────────────────────────────────────────── */

#remember-checkbox {
  border-color: rgba(255,255,255,.20) !important;
  border-radius: 5px !important;
}
#remember-checkbox[data-checked] {
  background: var(--sa-flame) !important;
  border-color: var(--sa-flame) !important;
}
#form-login label[class*="select-none"] {
  color: var(--sa-dim) !important;
  font-size: 13px !important;
}

/* ── Кнопка входа ─────────────────────────────────────────────────────── */

#sign-in-button {
  height: 3.15rem !important;
  border-radius: 12px !important;
  font-family: 'Inter', 'Segoe UI', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  background: linear-gradient(180deg, #E2551A, #BE3E0B) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow:
    0 10px 26px -12px rgba(226,85,26,1),
    0 1px 0 rgba(255,255,255,.18) inset !important;
  transition: filter .18s, box-shadow .18s, transform .1s !important;
  margin-top: 10px !important;
}
#sign-in-button:hover {
  filter: brightness(1.07);
  box-shadow:
    0 14px 34px -12px rgba(226,85,26,1),
    0 1px 0 rgba(255,255,255,.22) inset !important;
}
#sign-in-button:active { transform: translateY(1px); }

/* ── Подпись Authelia внизу — приглушаем, но оставляем ────────────────── */

#first-factor-stage a[href*="authelia"] {
  color: rgba(255,255,255,.17) !important;
  font-size: 10px !important;
  letter-spacing: .05em;
  margin-top: 22px;
  transition: color .15s;
}
#first-factor-stage a[href*="authelia"]:hover { color: rgba(255,255,255,.40) !important; }

/* ── Экран загрузки ───────────────────────────────────────────────────── */

.animate-scale-loader { background: var(--sa-flame) !important; }

/* ── Узкие экраны ─────────────────────────────────────────────────────── */

@media (max-width: 440px) {
  div:has(> #UserSvg) { font-size: 34px; }
  #first-factor-stage > div > div { padding: 30px 22px 20px; border-radius: 16px; }
  #first-factor-stage { margin-top: -30px; }
}

/* ── Уважаем настройку «меньше движения» ──────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}