/* prihlaseni.css | jedna přihlašovací obrazovka (5.116.0)
 *
 * Patří k frontend/templates/_prihlaseni.html a /static/js/prihlaseni.js.
 * Načítá ji base.html (hlavní appka, Pošta, Electron) I OBĚ mobilní PWA
 * (dochazka-app.html, foto-app.html), které theme.css ani components.css
 * nenačítají. Proto:
 *   · každá barva jde přes token appky S LITERÁLEM jako zálohou — v base.html
 *     platí tokeny theme.css (i tmavý motiv), v PWA záloha (světlá varianta);
 *   · každý selektor nese `.pg-login` — PWA mají globální pravidla pro
 *     `input[type=text]`, `.btn-primary`, `input:focus` (specificita 0,1,1),
 *     tady je vždy aspoň 0,2,0, takže vzhled je všude STEJNÝ;
 *   · pole mají VŽDY 16 px — pod 16 px iOS při klepnutí zazoomuje stránku.
 */

/* ── Podklad přes celou obrazovku ────────────────────────────────────
   Navy značky + geodetický vzor + velký znak produktu jako vodoznak
   (cestu dodává šablona v --login-znak, závisí na brand_logo). Podklad
   je NEPRŮHLEDNÝ — pod závojem prosvítal obsah appky (4. 9. 2026).
   Roluje sám (overflow-y), karta se centruje přes `margin:auto`, ne
   `align-items:center`: vyšší karta než okno (klávesnice telefonu,
   otočený mobil) by se při centrování flexem uřízla nahoře bez možnosti
   se k ní dorolovat. */
.pg-login-podklad {
  position: fixed; inset: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  padding: calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 16px) 16px
           calc(var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 16px);
  background-color: var(--pg-dark, #1E2749);
  background-image:
    var(--login-znak, none),
    url("/static/img/pozadi-vzor-dark.svg"),
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(150,170,205,.08) 39px, rgba(150,170,205,.08) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(150,170,205,.08) 39px, rgba(150,170,205,.08) 40px);
  background-repeat: no-repeat, repeat, repeat, repeat;
  background-size: min(70vh, 70vw) auto, 560px 560px, auto, auto;
  background-position: center, 0 0, 0 0, 0 0;
}
/* Hlavní appka: obal je .modal-overlay (display:none / .open → flex
   z theme.css), ten centruje i svisle — tady se to vrací na margin:auto. */
.modal-overlay.pg-login-podklad { align-items: flex-start; justify-content: center; }
/* PWA: obal ukazuje stránka `style.display = 'flex'` (ukazLogin). */
.pg-login-pwa { z-index: 1000; justify-content: center; align-items: flex-start; }

/* ── Karta ───────────────────────────────────────────────────────── */
.pg-login {
  margin: auto;                    /* svislé i vodorovné centrování */
  width: 100%; max-width: 420px; box-sizing: border-box;
  background: var(--bg-card, #fff); color: var(--text-primary, #141B29);
  border-radius: var(--r-md, 12px); overflow: hidden;
  box-shadow: 0 20px 48px rgba(0,0,0,.35);
  font-family: var(--font-body, 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  font-size: 14px; line-height: 1.4; text-align: left;
}
.pg-login *, .pg-login *::before, .pg-login *::after { box-sizing: border-box; }
.pg-login [hidden] { display: none !important; }

.pg-login .pg-login-hlava {
  background: var(--pg-dark, #1E2749); padding: 24px 28px 20px; text-align: center;
}
/* Logo CELÉ: výška pevná, šířka podle obrázku, `contain` — široké
   zákaznické logo se zmenší, nikdy neořízne. */
.pg-login .pg-login-logo {
  display: block; height: 56px; width: auto; max-width: 100%;
  object-fit: contain; margin: 0 auto 10px;
  background: #fff; border-radius: var(--r-sm, 8px); padding: 4px 10px;
}
.pg-login .pg-login-firma {
  color: #fff; font-size: 16px; font-weight: 700; letter-spacing: .03em;
  overflow-wrap: anywhere;
}
.pg-login .pg-login-aplikace { color: rgba(255,255,255,.62); font-size: 11.5px; margin-top: 2px; }
.pg-login .pg-login-podtitul { color: rgba(255,255,255,.82); font-size: 13px; margin-top: 8px; }

.pg-login .pg-login-telo { padding: 18px 24px 20px; }
.pg-login .pg-login-nadpis {
  font-size: 12.5px; font-weight: 600; color: var(--text-muted, #5e677c);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px;
}

/* ── Pole ── */
.pg-login .pg-login-pole { margin-bottom: 10px; }
.pg-login .pg-login-pole label {
  display: block; margin-bottom: 4px;
  font-size: 12.5px; font-weight: 600; color: var(--text-secondary, #3f4866);
  text-transform: none; letter-spacing: 0;
}
.pg-login .pg-login-pole input {
  display: block; width: 100%; min-height: 42px; margin: 0;
  padding: 9px 12px; font: inherit; font-size: 16px; line-height: 1.3;
  color: var(--text-primary, #141B29); background: var(--bg-input, #fff);
  border: 1px solid var(--border-input, #6E8296); border-radius: var(--r-sm, 8px);
  box-shadow: none; -webkit-appearance: none; appearance: none;
}
.pg-login .pg-login-pole input::placeholder { color: var(--text-muted, #5e677c); opacity: .75; }
.pg-login .pg-login-pole input:focus {
  outline: none; border-color: var(--prstenec, var(--pg-blue, #2F5CA8));
  box-shadow: 0 0 0 3px rgba(47,92,168,.18);
}
/* Oko u hesla (obal .pg-heslo dosazuje pgOkoUHesel z prihlaseni.js) */
.pg-login .pg-heslo { position: relative; display: block; }
.pg-login .pg-heslo > input { padding-right: 44px; }
.pg-login .pg-heslo-oko {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; display: grid; place-items: center; padding: 0;
  background: none; border: none; border-radius: var(--r-xs, 4px);
  color: var(--text-muted, #5e677c); cursor: pointer;
}
.pg-login .pg-heslo-oko:hover { color: var(--text-primary, #141B29); background: var(--bg-hover, #dde4f0); }
.pg-login .pg-heslo-oko:focus-visible { outline: 2px solid var(--pg-blue, #2F5CA8); outline-offset: -2px; }

.pg-login .pg-login-zapamatovat { margin: 2px 0 8px; }
.pg-login .pg-login-zapamatovat label {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12.5px; color: var(--text-secondary, #3f4866);
}

/* ── Tlačítka ── */
.pg-login .pg-login-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; padding: 9px 18px; margin: 0;
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
  border: 1px solid transparent; border-radius: var(--r-sm, 8px);
  cursor: pointer; transition: background .15s, border-color .15s, transform .06s;
}
.pg-login .pg-login-btn:active { transform: translateY(1px); }
/* Pevná bílá na --pg-dark: obojí se NEpřeklápí (past „překlápěcí token
   pod pevnou barvou" z CLAUDE.md) — stejná dvojice jako .btn-primary. */
.pg-login .pg-login-btn-hlavni { background: var(--pg-dark, #1E2749); color: #fff; }
.pg-login .pg-login-btn-hlavni:hover { background: var(--pg-blue, #2F5CA8); }
.pg-login .pg-login-btn-vedlejsi {
  background: var(--bg-card, #fff); color: var(--text-secondary, #3f4866);
  border-color: var(--border-color, #B0BFD0);
}
.pg-login .pg-login-btn-vedlejsi:hover { background: var(--bg-hover, #dde4f0); }
.pg-login .pg-login-btn-klic {
  width: 100%; padding: 11px 12px;
  background: var(--bg-secondary, #E8EDF5); color: var(--text-primary, #141B29);
  border-color: var(--border-color, #B0BFD0);
}
.pg-login .pg-login-btn-klic:hover { background: var(--bg-hover, #dde4f0); }
.pg-login .pg-login-akce { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Texty ── */
.pg-login .pg-login-chyba { color: var(--pg-red, #A32D2D); font-size: 12.5px; margin-top: 8px; }
.pg-login .pg-login-zprava { font-size: 12.5px; margin-top: 8px; color: var(--text-muted, #5e677c); }
.pg-login .pg-login-pozn { font-size: 12px; color: var(--text-muted, #5e677c); margin: -2px 0 10px; }
.pg-login .pg-login-radek { margin-top: 10px; }
.pg-login .pg-login-odkaz { font-size: 12.5px; color: var(--pg-blue-text, var(--pg-blue, #2F5CA8)); }
.pg-login .pg-login-soukromi { font-size: 12px; color: var(--text-muted, #5e677c); }
.pg-login .pg-login-klic { margin-top: 14px; }
.pg-login .pg-login-paticka {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-color, #B0BFD0);
  font-size: 12px; color: var(--text-muted, #5e677c);
}

/* ── Rychlé volby — čipy jmen (5.50.0, znama-jmena.js) ──
   Do 5.115.x měla každá PWA vlastní kopii a theme.css třetí. */
.pg-login .pg-cipy { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pg-login .pg-cip {
  display: inline-flex; align-items: stretch; overflow: hidden;
  border: 1px solid var(--border-color, #B0BFD0); border-radius: 999px;
  background: var(--bg-secondary, #E8EDF5);
}
.pg-login .pg-cip-jmeno, .pg-login .pg-cip-x {
  border: 0; background: none; cursor: pointer; min-height: 34px; margin: 0;
  font: inherit; font-size: 13px; line-height: 1;
}
.pg-login .pg-cip-jmeno { padding: 6px 4px 6px 12px; color: var(--text-primary, #141B29); }
.pg-login .pg-cip-x { padding: 6px 10px 6px 4px; color: var(--text-muted, #5e677c); }
.pg-login .pg-cip:hover { background: var(--bg-hover, #dde4f0); }
.pg-login .pg-cip-x:hover { color: var(--pg-red, #A32D2D); }

/* Telefon (stejná klauzule jako theme.css): užší okraje, ať se karta
   vejde na 402×874 bez rolování a Přihlásit nezajede pod klávesnici. */
@media (max-width:480px), (max-height:480px) and (max-width:1000px) {
  .pg-login .pg-login-hlava { padding: 18px 20px 16px; }
  .pg-login .pg-login-logo { height: 52px; margin-bottom: 8px; }
  .pg-login .pg-login-telo { padding: 16px 18px 18px; }
}