/* Auth puslapių stiliai (E2.a.4).
 *
 * Remiasi `shared.css` kintamaisiais ir klasėmis (`.card`, `.btn`, `.form-group`,
 * `.form-label`, `.form-input`, `.hidden`) — nauja dizaino sistema nekuriama.
 *
 * Jokio inline `<style>` ir jokio inline `style="…"`: CSP `style-src` dar turi
 * `'unsafe-inline'` dėl senų įrankių, bet naujas kodas jo NENAUDOJA, kad ateityje tą
 * direktyvą būtų galima sugriežtinti be Auth perrašymo.
 *
 * Klaidos būsena perteikiama TRIMIS būdais (ne vien spalva): tekstu, ikonos simboliu prieš
 * tekstą ir kairiuoju rėmeliu. Spalva viena neveikia nei daltonikams, nei aukšto kontrasto
 * režime.
 */

.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-base);
}

.auth-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}

.auth-header-logo {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  text-decoration: none;
}

.auth-header-spacer { flex: 1; }

/* Ženklo piešinys yra DEKORATYVUS ir laikomas ATSKIRAI nuo nuorodos: matomas ženklas
   privalo likti grynas tekstas, kitaip prieinamas vardas būtų užterštas SVG turiniu. */
.auth-header-mark {
  display: inline-flex;
  flex: none;
  color: var(--text-primary);
}

/* Temos jungiklis Auth puslapiuose (D1). Iki šiol jo čia nebuvo vienintelio produkto
   paviršiaus: naudotojas, atėjęs iš tamsaus viešo puslapio, prisijungimo lange staiga
   nebeturėdavo kuo temą perjungti. Modulis ir `app-theme` raktas perpanaudojami — naujo
   kontrakto neatsiranda. */
.auth-theme-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h);
  height: var(--control-h);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
}

.auth-theme-icon { display: none; }
.auth-theme-icon-moon { display: block; }
body.dark .auth-theme-icon-moon { display: none; }
body.dark .auth-theme-icon-sun { display: block; }

.auth-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Apatinė įtrauka didesnė už viršutinę: optinis centras yra ŠIEK TIEK aukščiau
     geometrinio, todėl lygiai centruota kortelė atrodo nusėdusi. */
  padding: 2.5rem 1.25rem 4.5rem;
}

.auth-card {
  width: 100%;
  max-width: 25rem;
  padding: 1.75rem;
}

.auth-title {
  margin: 0 0 0.4rem;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.2;
  color: var(--text-primary);
}

.auth-subtitle {
  margin: 0 0 1.35rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ── Statuso regionas ────────────────────────────────────────────────────── */

.auth-status {
  margin: 0 0 1rem;
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius-md);
  border-left: 3px solid var(--border-mid);
  background: var(--bg-overlay);
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* NEUTRALI ≠ NEAKTYVI (D1).
 *
 * Užpildytas plotas su apvaliais kampais Auth kortelėje atrodo lygiai kaip neaktyvus
 * įvesties laukas, todėl neutralus pranešimas („cloud sluoksnis išjungtas") skaitėsi kaip
 * sugedęs valdiklis. Dabar neutralią būseną neša TIK kairysis rėmelis, o užpildą pasilieka
 * tik tos rūšys, kurios reikalauja dėmesio. Rišama prie `.auth-page`, nes tą patį mazgą
 * naudoja ir darbo sritis. */
.auth-page .auth-status { background: none; }

.auth-page .auth-status-error,
.auth-page .auth-status-ok { background: var(--bg-overlay); }

/* Fokusas matomas: į šį regioną fokusas nukeliamas programiškai po klaidos. */
.auth-status:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.auth-status-error {
  border-left-color: var(--danger);
  color: var(--text-primary);
}

/* Simbolis prieš tekstą — informacija be spalvos. */
.auth-status-error::before {
  content: '⚠ ';
  font-weight: 700;
  color: var(--danger);
}

.auth-status-ok {
  border-left-color: var(--success);
}

.auth-status-ok::before {
  content: '✓ ';
  font-weight: 700;
  color: var(--success);
}

/* ── Forma ──────────────────────────────────────────────────────────────── */

/* `:not([hidden])` NĖRA kosmetika — tai klaidos pataisymas (E2.c PA3).
 *
 * Registracijos valdiklis antrą žingsnį atidaro taip: `setAttr(form, 'hidden', true)`. Bet
 * naršyklės `[hidden] { display: none }` yra UA sluoksnio taisyklė, o `.auth-form` — autoriaus,
 * ir autoriaus sluoksnis kaskadoje visada stipresnis. Todėl `display: block` nugalėdavo, ir po
 * sėkmingos registracijos forma LIKDAVO matoma po patvirtinimo tekstu: naudotojas matydavo
 * „Patikrinkite el. paštą" ir tuo pačiu metu vėl siunčiamą registracijos formą.
 *
 * Kodėl to nebuvo matyti anksčiau: greta esantis `#register-alt` slepiasi teisingai, nes
 * `.auth-alt` savo `display` nenustato — skirtumą lėmė būtent ši viena eilutė.
 *
 * Deklaracija paliekama (autoriaus ketinimas užrašytas aiškiai), tik nebetaikoma paslėptam
 * elementui. Tas pats spąstas galioja bet kuriai būsimai `.auth-*` taisyklei su `display`. */
.auth-form:not([hidden]) { display: block; }

/* Užimtos formos metu žymeklis rodo, kad veiksmas vyksta. */
.auth-form-busy { cursor: progress; }

.auth-form .form-group { margin-bottom: 0.9rem; }

/* Netinkamas laukas — rėmelis PLUS `aria-invalid` (jį nustato authForms.js). */
.auth-form .form-input[aria-invalid='true'] {
  border-color: var(--danger);
}

.auth-submit {
  width: 100%;
  margin-top: 0.35rem;
}

/* ── NEPRIEINAMA ≠ VYKSTA (E2.c PA3) ─────────────────────────────────────────
 *
 * Anksčiau čia buvo `cursor: progress` ant BET KOKIO neaktyvaus mygtuko. Tačiau Auth
 * puslapiuose `disabled` daug dažniau reiškia „dar/visai neprieinama" nei „vyksta":
 * išjungtas cloud sluoksnis, dar nepatvirtinta atkūrimo nuoroda, persiuntimo pauzė. Visais
 * tais atvejais laukimo žymeklis žadėjo procesą, kurio nėra — naudotojas laukė nieko.
 *
 * Dabar neaktyvumas atrodo kaip neaktyvumas, o laukimo signalą duoda TIK `aria-busy` (žr.
 * žemiau). Dėl to nebereikia ir buvusio `.auth-confirm .auth-submit[disabled]` išimties:
 * ji egzistavo vien tam, kad atšauktų šią klaidingą numatytąją reikšmę. */
.auth-submit[disabled] {
  /* Pritemdytas akcentinis užpildas vis tiek šaukia „paspausk mane". Neaktyvus valdiklis
     turi turėti neutralų paviršių; `opacity` lieka kaip antras, ne vienintelis signalas. */
  opacity: 0.9;
  background: var(--bg-overlay);
  border-color: var(--border);
  color: var(--text-muted);
}

/* Vykdomo veiksmo žymuo — tas pats kontraktas kaip darbo srityje (P2D): semantinis
 * autoritetas lieka `aria-busy`, kurį valdikliai jau nustato patys (`createSubmitLock`,
 * persiuntimo būsena). CSS tik parodo tai, kas prieinamumo medžiui jau pasakyta — jokios
 * naujos būsenos, jokio `MutationObserver`, jokio JS.
 *
 * `::after` yra dekoratyvus ir į prieinamumo medį nepatenka, todėl ekrano skaitytojas nieko
 * nedubliuoja. Mygtuko UŽRAŠAS LIEKA nepakitęs: žiedas atsiranda šalia jo, o ne vietoje jo —
 * „Prisijungti" netampa „Jungiamasi…", todėl išdėstymas nešokteli.
 *
 * Reikšmės sutampa su `app.css` iki paskutinio pikselio: viena judesio kalba dviejose
 * srityse, o ne du panašūs, bet nevienodi žiedai. */
.auth-page .btn[aria-busy='true'] {
  cursor: progress;
}

.auth-page .btn[aria-busy='true']::after {
  content: '';
  flex: none;
  width: 0.85em;
  height: 0.85em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: auth-spin 650ms linear infinite;
}

@keyframes auth-spin {
  to { transform: rotate(1turn); }
}

/* ── Slaptažodžio rodymo jungiklis (E2.c PA3) ────────────────────────────────
 *
 * Wrapper, o ne absoliutus perdengimas: perdengtas mygtukas gula ant įvesto teksto, o
 * lietimo ekrane dar ir ant vietos, kurioje naudotojas taiko į patį lauką. Eilutė su
 * `align-items: stretch` reiškia, kad mygtukas savaime gauna to paties aukščio taikinį
 * (44px iš `--control-h`), ir nieko nereikia derinti rankomis. */
.auth-password {
  display: flex;
  align-items: stretch;
  gap: 0;
}

/* Laukas užima visą likusį plotį. `min-width: 0` būtinas: be jo flex elementas neleidžia
   sau susitraukti žemiau turinio pločio, ir siaurame ekrane eilutė išsikištų. */
.auth-password .form-input {
  flex: 1 1 auto;
  min-width: 0;
}

/* Tylus tekstinis valdiklis: jis padeda, bet nekonkuruoja nei su lauku, nei su pagrindiniu
   mygtuku. Ikonos sąmoningai nėra — akies piešinys reiškia ir „rodyti", ir „slėpti", todėl
   be užrašo lieka spėlionė, o dviejų žodžių lietuviškas tekstas jos nepalieka. */
.auth-password-toggle {
  flex: none;
  min-height: var(--control-h);
  padding: 0 0.75rem;
  /* Jungiklis ir laukas sudaro VIENĄ valdiklį: bendras kraštas, viena suapvalinimo linija.
     Anksčiau 0.4rem tarpas darė formos dešinįjį kraštą dantytą — vienintelė eilutė, kuri
     nesilygiavo su visomis kitomis. */
  border: 1px solid var(--border);
  border-left: 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--bg-overlay);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.auth-password .form-input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.auth-password-toggle:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.auth-hint {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ── Beta pastaba ir teisinės nuorodos (M3) ────────────────────────────────
 *
 * Abu blokai yra KONTEKSTAS, o ne veiksmas: jie neturi konkuruoti su pirminiu mygtuku.
 * Todėl dydis meta lygio, spalva antrinė, o pabraukimas paliekamas tik nuorodoms.
 *
 * `.auth-legal a` gauna pirštų ribą iš `--control-h` — to paties tokeno, kurį naudoja
 * laukai ir mygtukai. Literalaus 44px čia neatsiranda, o `.auth-page` prefiksas reiškia,
 * kad tokenas tikrai apibrėžtas (jis gyvena `.auth-page` srityje).
 */
.auth-note {
  margin: 0 0 1rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.auth-legal {
  margin: 1rem 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}

.auth-page .auth-legal a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  color: var(--accent);
}

.auth-alt {
  margin: 1.15rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

.auth-alt a { color: var(--accent); }

.auth-links {
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
  text-align: center;
}

 /* Viena nuorodų kalba: „Pamiršote slaptažodį?" ir „Registruokitės" yra vienodo svorio
    keliai, todėl ir atrodo vienodai. Anksčiau pirmoji buvo pilka, antroji — akcentinė. */
.auth-links a { color: var(--accent); }

/* ── El. pašto patvirtinimo būsena (E2.a.5) ──────────────────────────────── */
/*
 * Rodoma toje pačioje kortelėje kaip forma — naujo puslapio nėra. Paslėpimą tvarko `.hidden`
 * (`shared.css`, `display: none !important`), todėl čia jokio `display` ant `.auth-confirm`
 * nenustatoma: kitaip klasė nebeturėtų viršenybės ir sekcija liktų matoma.
 */

.auth-confirm-title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
}

.auth-confirm-text {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Adresas išskiriamas, bet `word-break` — kad ilgas el. paštas neišplėstų kortelės. */
.auth-confirm-email {
  margin: 0 0 1rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-md);
  background: var(--bg-overlay);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  word-break: break-all;
}

/* Antras registracijos žingsnis atsiranda, o ne šokteli (CLAUDE.md animacijų taisyklė).
 *
 * Judesio kalba paimta esama — ta pati trukmė ir kreivė kaip darbo srities panelėse
 * (`app-panel-in`); naujo žodyno nekuriama. Keyframe vardas atskiras tik todėl, kad Auth
 * puslapiai `app.css` neįkelia.
 *
 * `animation`, o ne `transition`: paslėpimą tvarko `.hidden` (`display: none`), per kurį
 * `transition` neveikia. Jokio `display` čia nenustatoma — kitaip `.hidden` prarastų
 * viršenybę ir sekcija liktų matoma nuo pat pradžių.
 *
 * TIK įeinantis žingsnis. Išeinančio choreografijos nėra sąmoningai: forma jau nebeaktuali,
 * o jos „išlydėjimas" tik atidėtų tai, ko naudotojas laukia. */
.auth-confirm {
  animation: auth-panel-in 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes auth-panel-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* Skaitiklis („Siųsti dar kartą po 43 s") keičiasi kas sekundę. Su proporciniais skaitmenimis
   „1" siauresnis už „8", todėl užrašas kas sekundę vos pastumdavo save — mirgėjimas, kurio
   priežastis nematoma. Lentelinės figūros duoda visiems skaitmenims vienodą plotį. */
.auth-resend {
  font-variant-numeric: tabular-nums;
}

/* ── Karkasiniai puslapiai (/app/, reset-password, new-password) ─────────── */

.auth-placeholder {
  max-width: 32rem;
  padding: 1.5rem;
  text-align: center;
}

/* ── Kvietimo kortelė (/app/invite/, E2.b.4 Phase E-D) ────────────────────── */
/*
 * Sąmoningai `auth.css`, o ne `app.css`: kvietimo puslapis yra Auth apvalkalas ir įkelia tik
 * `shared.css` + `auth.css`. Viso darbo srities stiliaus užtraukimas dėl kelių kortelių būtų
 * didesnė rizika (klasių susidūrimai) nei šios kelios taisyklės.
 */

.auth-invite-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
}

.auth-invite-list-title {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  color: var(--text-secondary);
}

.auth-invite {
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-overlay);
  text-align: left;
}

/* Ilgas įmonės pavadinimas be tarpų negali išstumti kortelės už ekrano ribų. */
.auth-invite-name {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.auth-invite-meta,
.auth-invite-state,
.auth-invite-confirm-text {
  margin: 0.2rem 0 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

/* Veiksmai laužomi į kitą eilutę, todėl siauras ekranas neduoda horizontalaus slinkimo. */
.auth-invite-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
}

.auth-invite-confirm {
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
}

/* Antrinis veiksmas: matomas, bet nekonkuruoja su pagrindiniu mygtuku. */
.auth-invite-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

/* ── Auth bazė: taikiniai, fokusas, būsenos pasirodymas (E2.c PA1A) ───────────
 *
 * Viskas rišama prie `.auth-page`, o ne prie bendrų `shared.css` klasių, SĄMONINGAI:
 * `.form-input` naudoja ir skardos lankstinių įrankis, o `.auth-status` — darbo sritis
 * (`/app/`, P2 užrakinta). Siauras selektorius reiškia, kad nė vienas iš jų šių taisyklių
 * negauna: praplečiamas tik Auth paviršius.
 *
 * Reikšmės tyčia tos pačios kaip darbo srityje (`app.css`): 44px pirštų riba ir 2px+2px
 * fokuso žiedas. Naujos dizaino kalbos nekuriama — esama tik pratęsiama į Auth. */
.auth-page {
  --control-h: 44px;
  --focus-ring: 2px solid var(--accent);
  --focus-ring-offset: 2px;
}

/* Pirštų taikinys. `.btn` 44px jau turi iš `shared.css`; laukams jo nebuvo — su 0.45rem
   įtrauka jie likdavo ~36px, t. y. žemiau CLAUDE.md ribos. */
.auth-page .form-input {
  min-height: var(--control-h);
}

/* Klaviatūros fokusas. `shared.css` `.form-input:focus` nuima kontūrą ir palieka tik rėmelio
   spalvą — to nepakanka. Čia PRIDEDAMAS žiedas (UA numatytojo niekur nenaikiname), o
   `:focus-visible` reiškia, kad pelės paspaudimas jo negauna, klaviatūra — visada.
   `outline` seka `border-radius` ir nedalyvauja išdėstyme, todėl nieko nepastumia. */
.auth-page a:focus-visible,
.auth-page button:focus-visible,
.auth-page input:focus-visible,
.auth-page select:focus-visible,
.auth-page textarea:focus-visible,
.auth-page [tabindex]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Didesnis specifiškumas nei `shared.css` `.form-input:focus` (0,2,0) — kitaip klaviatūros
   fokusas liktų be žiedo. */
.auth-page .form-input:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Būsenos pasirodymas: 120 ms permatomumo perėjimas, kad pranešimas neatsirastų trūktelėjimu.
 *
 * `animation`, o ne `transition`: paslėpimą tvarko `.hidden` (`display: none`), o `transition`
 * per display lygio pokytį neveikia. Turinys nupiešiamas iš karto — animuojamas TIK
 * permatomumas, todėl nei tekstas, nei klaidos fokusas (jį perkelia JS) nevėluoja. */
.auth-page .auth-status {
  animation: auth-status-in 120ms ease-out both;
}

@keyframes auth-status-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Mobilus: kortelė per visą plotį, bet su oru pakraščiuose. */
@media (max-width: 30rem) {
  .auth-main { padding: 1.25rem 0.9rem 2rem; }
  .auth-card { padding: 1.15rem; }
  /* Siaurame ekrane mygtukai stackinasi per visą plotį — pirštui lengviau pataikyti. */
  .auth-invite-actions .btn { flex: 1 1 100%; }
}

/* ── Sumažintas judesys (E2.c PA1A) ──────────────────────────────────────────
 *
 * Ta pati filosofija kaip darbo srityje (`app.css`), bet apribota `.auth-page`: išjungiamos
 * VISOS įėjimo animacijos — ir dabartinė būsenos fade, ir bet kuri būsima, todėl sąrašo,
 * kuris tyliai sensta, čia nėra.
 *
 * SĄMONINGAI lieka spalvų ir rėmelių perėjimai: jie neturi erdvinio judesio, o yra būsenos
 * grįžtamasis ryšys — jų išjungimas sumažintų informaciją, o ne judesio jautrumą.
 * `outline-color` į sąrašą NEĮTRAUKTAS: fokuso žiedas privalo atsirasti akimirksniu būtent
 * tame režime, kuriame naudotojas prašo mažiau judesio. */
@media (prefers-reduced-motion: reduce) {
  .auth-page,
  .auth-page *,
  .auth-page *::before,
  .auth-page *::after {
    animation: none !important;
    transition-property: background-color, border-color, color, box-shadow, opacity !important;
  }
}