/* ============================================================================
   Prihlasovacia obrazovka na LVNI design systéme
   ----------------------------------------------------------------------------
   Prevzaté z Public-webu, kde má táto obrazovka predlohu:
     - tokeny        backend/public/admin-assets/design-system/tokens.css
     - geometria     backend/public/admin-assets/design-system/components.css,
                     sekcia 2.9 `.lvnig-auth` (namerané, nie odhadnuté)
     - šablona       backend/templates/admin/login.html.twig

   Poradie v súbore je zámerne rovnaké ako v DS: najprv písmo a farby, za nimi
   rozmery. Geometria vie rozbiť layout a musí ísť odpojiť vymazaním jednej
   sekcie bez toho, aby zmizli farby.
   ========================================================================== */


/* ============================================================================
   1. PÍSMO
   ----------------------------------------------------------------------------
   Geist Variable, self-hostovaný — rovnaké súbory ako v Public-webe, nie CDN.
   `latin-ext` je pre češtinu povinný (ě š č ř ž ů), inak by diakritika spadla
   na náhradné písmo a nadpis by mal iné metriky než zvyšok riadku.
   Kurzíva sa nenačítava, na tejto obrazovke sa nevyskytuje.
   ========================================================================== */

@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/geist-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/geist-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}


/* ============================================================================
   2. TOKENY
   ----------------------------------------------------------------------------
   Hodnoty sú skopírované z `tokens.css` v Public-webe, hodnotu po hodnote.
   Nič sa neprepočítava.

   SVETLÝ REŽIM JE VÝCHODZÍ, pretože taký je design systém — a predloha tejto
   obrazovky beží na `--ui-bg-subtle` / `--ui-bg`, teda svetlom podklade.

   Svetlý režim je východzí. Tmavá vetva ide cez triedu `scheme-dark`
   na `<html>`, ktorú pred vykreslením nasadí skript z `_color_scheme_head`.
   Nie cez `prefers-color-scheme`: media query by prebila používateľovu voľbu
   v prepínači. Systémovú predvoľbu rieši ten skript v režime `auto`.
   Je to ten istý mechanizmus, aký má Public-web.
   ========================================================================== */

:root {
  color-scheme: light;

  --ui-bg: #ffffff;
  --ui-bg-subtle: #f4fafa;
  --ui-bg-inverted: #0c1012;
  --ui-text: #2f3739;
  --ui-text-muted: #697476;
  --ui-text-highlighted: #0c1012;
  --ui-border: #e5e9ea;
  --ui-border-accented: #c5d0d1;
  --ui-primary: #06b781;
  --ui-primary-25: #06b78140;

  /* Akcent pre TEXT, nie pre plochu. Vedomá odchýlka od styleguide, prevzatá
     z admin tokenov: brand-500 `#06b781` má proti bielej 2,59:1, čo malý text
     neunesie. brand-700 má 5,45:1. V tmavom režime problém nie je a vracia sa
     brand-500. Týka sa to nadpisu nad titulkom. */
  --ui-accent: #00785f;

  --ui-danger-surface: #fad9d9;
  --ui-danger-text: #8a2828;

  --ui-card-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

:root.scheme-dark {
  color-scheme: dark;

  --ui-bg: #0c1012;
  --ui-bg-subtle: #161b1c;
  --ui-bg-inverted: #ffffff;
  --ui-text: #cccccc;
  --ui-text-muted: #95a1a2;
  --ui-text-highlighted: #ffffff;
  --ui-border: #1a2122;
  --ui-border-accented: #2f3739;
  --ui-primary: #06b781;
  --ui-primary-25: #06b78140;

  --ui-accent: #06b781;              /* brand-500 · 7,37:1 na tmavej */

  --ui-danger-surface: #2e0d0d;
  --ui-danger-text: #fad9d9;

  /* V tme sa tieň ruší — na tmavej ploche nemá čo oddeľovať a karta
     už má obrys. Rovnako to má `pages.css` aj token vrstva SPA;
     tu bol doteraz natvrdo, takže prihlasovacia karta bola jediná,
     ktorá v tmavom režime tieň mala. */
  --ui-card-shadow: none;
}


/* ============================================================================
   3. GEOMETRIA
   ----------------------------------------------------------------------------
   Hodnoty zo sekcie 2.9 `components.css`. Sú namerané na styleguide, nie
   odhadnuté — preto sa nezaokrúhľujú ani „nedolaďujú".
   ========================================================================== */

/* Základ 14/20 je zámer, rovnako ako v predlohe: DS stavia škálu na štrnástke
   a `body` na šestnástke by rozhodilo všetky odvodené riadkovania. */
body.ocr-login {
  margin: 0;
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  font-family: 'Geist Variable', Geist, system-ui, sans-serif;
  font-size: 14px;
  line-height: 20px;
  background: var(--ui-bg-subtle);
  color: var(--ui-text);
  -webkit-font-smoothing: antialiased;
}

/* Karta: padding 24, obrys 1 px, rádius 0, `shadow-sm`.
   Tieň sa NERUŠÍ — DS ho pre kartu má, v oboch režimoch rovnaký. */
.ocr-login__card {
  width: 100%;
  max-width: 380px;
  padding: 24px;
  box-sizing: border-box;
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-radius: 0;
  box-shadow: var(--ui-card-shadow);
}

/* Nadpis nad titulkom. Škála DS: 12/600/16, verzálky, prostrkanie +1,44 px.
   Farba je `--ui-accent`, nie `--ui-primary` — dôvod je pri tokene vyššie. */
.ocr-login__eyebrow {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  color: var(--ui-accent);
}

/* H1 zo škály: 36/700/40, prostrkanie −0,9 px. V predlohe je zmerané, že sa
   pri 380 px širokej karte zmestí na jeden riadok. Naše „Přihlášení" je
   kratšie než ich „LVNIG · Admin", takže tým skôr. */
.ocr-login__title {
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -0.9px;
  color: var(--ui-text-highlighted);
}

/* Popisná veta pod nadpisom — „menší text (muted)" zo škály, 14/400/20.
   Spodný odstup 24 px je medzera nadpisového bloku od formulára, tú má
   v predlohe `h1 { margin: 0 0 24px }`. */
.ocr-login__subtitle {
  margin: 4px 0 24px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--ui-text-muted);
}

/* Popisok poľa: 14/500/20, odstup 16 px zhora a 4 px zdola.
   Šestnástka je vedomá — styleguide stavia formulár na `gap-4`. */
.ocr-login__label {
  display: block;
  margin: 16px 0 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--ui-text);
}

/* Pole: výška 40, padding 0/12, rádius 0. */
.ocr-login__input {
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  border: 1px solid var(--ui-border-accented);
  border-radius: 0;
  background: var(--ui-bg);
  color: var(--ui-text);
  transition: color .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), border-color .15s cubic-bezier(.4, 0, .2, 1), box-shadow .15s cubic-bezier(.4, 0, .2, 1);
}

.ocr-login__input:focus {
  outline: none;
  border-color: var(--ui-primary);
  box-shadow: 0 0 0 2px var(--ui-primary-25);
}

/* Chrome kreslí predvyplneným poliam vlastné pozadie, ktoré tokeny ignoruje.
   Farbu autofillu meniť nejde, dá sa len prebiť vnútorným tieňom. Prevzaté
   z predlohy — bez tohto je pole po obnovení hesla žlté. */
.ocr-login__input:-webkit-autofill,
.ocr-login__input:-webkit-autofill:hover,
.ocr-login__input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--ui-bg) inset;
  -webkit-text-fill-color: var(--ui-text);
  caret-color: var(--ui-text);
  transition: background-color 9999s ease-in-out 0s;
}

/* Tlačidlo. Veľkosť `md`, plocha `--ui-bg-inverted` — teda vysoký kontrast,
   nie brand zelená. Tak to má predloha aj `.btn-primary` v design systéme:
   v svetlom režime tmavé, v tmavom svetlé. */
.ocr-login__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  margin-top: 16px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  border: 0;
  border-radius: 0;
  background: var(--ui-bg-inverted);
  color: var(--ui-bg);
  cursor: pointer;
  transition: color .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), border-color .15s cubic-bezier(.4, 0, .2, 1), box-shadow .15s cubic-bezier(.4, 0, .2, 1);
}

/* Hover rieši DS priehľadnosťou, nie zmenou plochy. */
.ocr-login__submit:hover {
  opacity: 0.9;
}

.ocr-login__submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ui-bg), 0 0 0 4px var(--ui-primary-25);
}

/* Chybová hláška: 14/400/20, padding 12, odstup 16 zhora.
   Obrys je `--ui-border` zámerne — rovnako ho má alert v celej administrácii
   Public-webu (`--alert-danger-border-color`), nie farbu stavu. */
.ocr-login__error {
  margin: 16px 0 0;
  padding: 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  border: 1px solid var(--ui-border);
  border-radius: 0;
  background: var(--ui-danger-surface);
  color: var(--ui-danger-text);
}