/* přihlašovací stránka design

:root{
  --bg1: 255 255 255;
  --fg: 20 24 28;
  --muted: 100 116 139;
  --acc: 14 165 233;   /* azurová */
  --acc-2: 99 102 241; /* indigo */
  --card: 255 255 255;
  --ring: 59 130 246;
  --shadow: 24 24 27;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg1: 9 9 11;
    --fg: 240 240 245;
    --muted: 148 163 184;
    --card: 17 17 22;
    --shadow: 0 0 0;
  }
}

*{box-sizing:border-box}
html,body{height:100%}

/* Scéna */
body.auth{
  margin:0;
  color: rgb(var(--fg));
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Noto Sans, Arial;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(var(--acc), .10), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(var(--acc-2), .12), transparent 60%),
    rgb(var(--bg1));
  display:grid; place-items:center;
  overflow:hidden;
}

/* Jemné blob pozadí */
.blobs{ position:fixed; inset:0; pointer-events:none; filter: blur(60px); opacity:.5; }
.blob{ position:absolute; width:36vmax; height:36vmax; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(var(--acc),.35), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(var(--acc-2),.35), transparent 60%);
  animation: float 18s ease-in-out infinite;
}
.blob:nth-child(1){ left:-10vmax; top:-8vmax; animation-delay:-4s }
.blob:nth-child(2){ right:-12vmax; bottom:-10vmax; animation-delay:-10s }
@keyframes float{ 0%,100%{ transform: translateY(0) scale(1)} 50%{ transform: translateY(4%) scale(1.05)} }
@media (prefers-reduced-motion: reduce){ .blob{animation:none} }

/* Wrapper + karta */
.auth-wrap{ width:min(92vw, 440px); padding: 16px; }
.auth-card{
  position:relative; border-radius:20px; padding:28px 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)) rgb(var(--card));
  box-shadow: 0 20px 60px rgba(var(--shadow), .35), inset 0 0 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
  will-change: transform;
}
.auth-card.shake{ animation: shake .35s ease; }
@keyframes shake{
  0%{ transform: translateX(0) } 20%{ transform: translateX(-8px) }
  40%{ transform: translateX(8px) } 60%{ transform: translateX(-6px) }
  80%{ transform: translateX(6px) } 100%{ transform: translateX(0) }
}

/* Brand */
.brand{display:flex; align-items:center; gap:12px; margin-bottom:16px}
.brand .logo{
  width:38px; height:38px; border-radius:10px;
  background: linear-gradient(135deg, rgb(var(--acc)), rgb(var(--acc-2)));
  box-shadow: 0 8px 18px rgba(0,0,0,.25)
}
.brand h1{ font-size: clamp(18px, 2.3vw, 20px); margin:0; letter-spacing:.2px }
.brand span{ color: rgb(var(--muted)); font-size: 13px }

/* Hint / alert */
.hint{ color:rgb(var(--muted)); font-size:13px; margin: 6px 0 18px }
.alert{
  border-radius:12px; padding:12px 14px; margin: 6px 0 16px; font-size:14px;
}
.alert.error{
  background: color-mix(in oklab, rgb(255 0 0) 14%, transparent);
  border: 1px solid color-mix(in oklab, rgb(255 0 0) 30%, transparent);
}

/* Form */
.auth-form{ display:grid; gap:14px }

/* Pole s plovoucím labelem */
.field{ position:relative }
.field input{
  width:100%; border-radius:12px;
  border: 1px solid color-mix(in oklab, rgb(var(--muted)) 22%, transparent);
  padding: 14px 44px 14px 14px; outline: none; font-size:15px;
  background: rgba(255,255,255,.06); color: rgb(var(--fg));
}
.field input:focus{
  box-shadow: 0 0 0 3px rgba(var(--ring), .35); border-color: rgba(var(--ring), .6)
}
.field label{
  position:absolute; left:12px; top:50%; transform: translateY(-50%);
  padding:0 6px; border-radius:8px; color: rgb(var(--muted));
  pointer-events:none; transition: all .15s ease; background: transparent;
}
.field input:not(:placeholder-shown) + label,
.field input:focus + label{
  top:-8px; font-size:11px; background: rgb(var(--card));
}

/* Akční tlačítko v poli (oko) */
.field.has-action .field-action{
  position:absolute; right:8px; top:50%; transform: translateY(-50%);
  border:0; background:transparent; cursor:pointer; font-size:16px; opacity:.75;
}
.field.has-action .field-action:hover{ opacity:1 }

/* Checkbox */
.checkbox{ display:flex; align-items:center; gap:8px; font-size:14px; color: rgb(var(--muted)) }
.checkbox input{ width:16px; height:16px }

/* Primární tlačítko */
.btn-primary{
  appearance:none; border:0; cursor:pointer;
  width:100%; border-radius:12px; padding:12px 16px; font-weight:600; font-size:15px;
  background: linear-gradient(135deg, rgb(var(--acc)), rgb(var(--acc-2)));
  color:black; box-shadow: 0 8px 24px rgba(0,0,0,.25);
  transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary:hover{ filter: brightness(1.03) }
.btn-primary:active{ transform: translateY(1px) }

.small{ font-size:12px; margin-top:14px }
.muted{ color: rgb(var(--muted)) }

/* === LOGIN HOTFIX: přísnější scoping + rozumné mezery === */
body.auth .auth-card,
body.auth .auth-card * { box-sizing: border-box; }

/* Zruš globální dědičnost na nadpisech/labelu uvnitř karty */
body.auth .auth-card h1,
body.auth .auth-card p,
body.auth .auth-card label { margin: 0; }

/* Kompaktnější karta a layout */
body.auth .auth-wrap { width:min(92vw, 440px); padding:16px; }
body.auth .auth-card {
  padding: 22px 20px;
  display: grid;
  grid-auto-rows: max-content;
  gap: 14px;
  border-radius: 18px;
}

/* Zjednodušený „brand bar“ – bez obřích zaoblení a stínu */
body.auth .brand {
  margin: -4px 0 6px;
  padding: 16px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgb(var(--acc)), rgb(var(--acc-2)));
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
body.auth .brand .logo { width:32px; height:32px; border-radius:8px; background:rgba(255,255,255,.18); }
body.auth .brand h1 { font-size: 20px; }
body.auth .brand span { font-size: 12px; opacity:.9; }

/* Hint / alert spacing */
body.auth .hint { margin: 2px 0 10px; font-size: 13px; }

/* Plovoucí labely – robustní vůči globálním label stylům */
body.auth .field { position: relative; margin-top: 6px; }
body.auth .field input {
  width: 100%;
  padding: 14px 44px 14px 14px; /* místo pro „oko“ */
  border-radius: 12px;
}
body.auth .field label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 6px;
  font-size: 14px;
  color: rgb(var(--muted));
  background: rgb(var(--card));
  transition: all .15s ease;
  pointer-events: none;
}
/* Když je pole aktivní/naplněné, zmenši a zvedni štítek */
body.auth .field input:not(:placeholder-shown) + label,
body.auth .field input:focus + label {
  top: -8px;
  font-size: 11px;
  transform: translateY(0);
}

/* Oko u hesla – přesné zarovnání */
body.auth .field.has-action .field-action {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 0; background: transparent; cursor: pointer;
  opacity: .75;
}
body.auth .field.has-action .field-action:hover { opacity: 1; }

/* Checkbox blíž k tlačítku, menší offset */
body.auth .checkbox { gap: 8px; margin-top: 2px; font-size: 14px; }

/* Tlačítko – méně „nafouknuté“ */
body.auth .btn-primary { padding: 11px 14px; border-radius: 12px; }

/* Spodní info pruh: už není „pás“ přes celou šířku */
body.auth .auth-card footer.small {
  margin-top: 8px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  text-align: center;
}

/* Ztišení stínu a zaoblení, ať to nepůsobí jako „nafukovací polštář“ */
@media (min-width: 480px){
  body.auth .auth-card { border-radius: 16px; }
}

/* Když je chyba, jen krátký shake – ale ať neodskočí layout */
body.auth .auth-card.shake { animation: shake .3s ease; }
@keyframes shake{
  0%,100%{ transform: translateX(0) }
  25%{ transform: translateX(-6px) }
  75%{ transform: translateX(6px) }
}

/* ====== 1) ALERT – kompaktní, bez přehnaných rádiusů/stínů ====== */
body.auth .alert {
  margin: 6px 0 10px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  line-height: 1.35;
}
body.auth .alert.error {
  background: #fdeaea !important;
  border: 1px solid #f3b5b5 !important;
  color: #7b2b2b !important;
}

/* ====== 2) TLAČÍTKO – přebít globální .btn styly ====== */
body.auth .btn-primary,
body.auth .auth-card .btn,
body.auth .auth-card button[type="submit"] {
  all: unset;
  display: inline-block;
  width: 100%;
  text-align: center;
  cursor: pointer;
  user-select: none;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  background: linear-gradient(135deg, rgb(var(--acc)), rgb(var(--acc-2)));
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
body.auth .btn-primary:hover { filter: brightness(1.03); }
body.auth .btn-primary:active { transform: translateY(1px); }

/* ====== 3) SPODNÍ FOOTER – žádný „pruh“ ani stín ====== */
body.auth .auth-card footer.small {
  margin-top: 8px !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  text-align: center;
}

/* ====== 4) BRAND – zmenšit „polštářek“ nahoře ====== */
body.auth .brand {
  margin: 0 0 4px !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.12) !important;
}

/* ====== 5) VOLBA LABELŮ ======
   Varianta A (stabilní): klasické labely NAD polem
   Varianta B: plovoucí labely (ponech, pokud je chceš)                     */

/* --- Varianta A: klasické labely NAD polem --- */
body.auth .auth-form .field { margin-top: 10px; }
body.auth .auth-form .field label {
  position: static !important;
  display: block !important;
  margin: 0 0 6px !important;
  font-size: 13px !important;
  color: rgb(var(--muted)) !important;
  background: transparent !important;
  transform: none !important;
}
body.auth .auth-form .field input {
  padding: 12px 44px 12px 12px !important; /* místo pro „oko“ u hesla */
}
/* Zrušíme plovoucí chování, kdyby někde zůstalo */
body.auth .auth-form .field input:not(:placeholder-shown) + label,
body.auth .auth-form .field input:focus + label { top:auto !important; }

/* --- Varianta B: plovoucí labely (NECH jen pokud je chceš) ---
   => Když chceš B, SMAŽ předchozí blok „Varianta A“ a nech tento
body.auth .field { position: relative; margin-top: 6px; }
body.auth .field input{ padding:14px 44px 14px 14px; }
body.auth .field label{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  padding:0 6px; font-size:14px; color:rgb(var(--muted)); background:rgb(var(--card));
  pointer-events:none; transition:all .15s ease;
}
body.auth .field input:not(:placeholder-shown)+label,
body.auth .field input:focus+label{ top:-8px; font-size:11px; transform:none; }
*/

/* ====== 6) IKONA OKA – přesné zarovnání ====== */
body.auth .field.has-action { position: relative; }
body.auth .field.has-action .field-action{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; display:grid; place-items:center;
  border:0; background:transparent; cursor:pointer; opacity:.75;
}
body.auth .field.has-action .field-action:hover{ opacity:1; }

/* ====== 7) „Bílé pilule“ navíc – preventivně vypnout děděné stíny ====== */
body.auth .auth-card *:where(input,button,footer,div,p){ box-shadow: none; }

/* === Jemnější barevné pozadí celé přihlašovací stránky === */
body.auth {
  background: linear-gradient(180deg, #e8ecf2 0%, #d6dae1 100%);
  display: grid;
  place-items: center;
  min-height: 100vh;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* === Karta přihlášení === */
body.auth .auth-card {
  background: #ffffff;
  border: 1px solid #d8dce2;
  border-radius: 14px;
  padding: 28px 24px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* === Nadpis / texty === */
body.auth .brand {
  background: transparent;
  color: #1a1f29;
  box-shadow: none;
}
body.auth .brand h1 {
  color: #1a1f29;
}
body.auth .brand span {
  color: #6b7280;
}

/* === Pole formuláře === */
body.auth .auth-form .field {
  margin-top: 12px;
}
body.auth .auth-form .field input {
  width: 100%;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 15px;
  color: #111827;
  transition: border-color 0.15s, background-color 0.15s;
}
body.auth .auth-form .field input:focus {
  border-color: #2563eb;
  background: #ffffff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Labely nad polem */
body.auth .auth-form .field label {
  display: block;
  font-weight: 500;
  margin-bottom: 6px;
  color: #374151;
  font-size: 14px;
}

/* === Tlačítko === */
body.auth .btn-primary {
  margin-top: 12px;
  background: linear-gradient(90deg, #2563eb, #1e40af);
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  padding: 12px 0;
  transition: background 0.2s, transform 0.1s;
}
body.auth .btn-primary:hover {
  background: linear-gradient(90deg, #1e3a8a, #1d4ed8);
}
body.auth .btn-primary:active {
  transform: scale(0.98);
}

/* === Checkbox === */
body.auth .checkbox {
  margin-top: 8px;
  color: #374151;
}

/* === Footer === */
body.auth footer.small {
  margin-top: 12px;
  font-size: 13px;
  color: #6b7280;
  text-align: center;
}

/* === Oko u hesla === */
body.auth .field.has-action {
  position: relative;
}
body.auth .field.has-action .field-action {
  position: absolute;
  right: 10px;
  top: 34px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 16px;
  opacity: 0.7;
}
body.auth .field.has-action .field-action:hover {
  opacity: 1;
}

/* === Oprava tlačítka Přihlásit === */
body.auth .btn-primary {
  display: inline-block;
  width: 100%;
  padding: 12px 0;
  margin-top: 14px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  border: none;
  border-radius: 8px;
  color: #ffffff;
  background: linear-gradient(90deg, #2563eb 0%, #1e40af 100%);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
}

body.auth .btn-primary:hover {
  background: linear-gradient(90deg, #1e3a8a 0%, #1d4ed8 100%);
  box-shadow: 0 6px 16px rgba(29, 78, 216, 0.35);
  transform: translateY(-1px);
}

body.auth .btn-primary:active {
  transform: scale(0.98);
  box-shadow: 0 3px 8px rgba(29, 78, 216, 0.25);
}
/* === FINÁLNÍ OPRAVA TLAČÍTKA „Přihlásit“ === */
body.auth .auth-card .btn-primary,
body.auth .auth-card button[type="submit"].btn-primary {
  all: unset;                     /* zruš veškeré dědičné nesmysly */
  display: block !important;
  width: 100% !important;
  padding: 12px 16px !important;
  margin-top: 14px !important;
  text-align: center !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  user-select: none !important;

  color: #fff !important;
  background: linear-gradient(90deg,#2563eb 0%,#1e40af 100%) !important;
  border: none !important;
  box-shadow: 0 6px 16px rgba(29,78,216,.25) !important;

  text-indent: 0 !important;
  overflow: visible !important;
  position: relative !important;
}
body.auth .auth-card .btn-primary:hover {
  filter: brightness(1.03) !important;
  transform: translateY(-1px);
}
body.auth .auth-card .btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(29,78,216,.22) !important;
}
body.auth .auth-card .btn-primary::before,
body.auth .auth-card .btn-primary::after { content: none !important; }

/* === Finální zarovnání tlačítka === */
body.auth .auth-card .btn-primary {
  display: block !important;
  width: calc(100% - 2px) !important;   /* přesně zarovná do šířky pole */
  box-sizing: border-box !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 12px 0 !important;
  border-radius: 8px !important;
}

body.auth .btn-primary {
  transition: all 0.25s ease;
  transform-origin: center;
}
body.auth .btn-primary:hover {
  transform: scale(1.03);
  background: linear-gradient(90deg, #1d4ed8, #3b82f6);
  box-shadow: 0 8px 20px rgba(29, 78, 216, 0.35);
}
body.auth .btn-primary:active {
  transform: scale(0.98);
  box-shadow: 0 4px 10px rgba(29, 78, 216, 0.3);
}
body.auth .btn-primary {
  background: linear-gradient(270deg, #2563eb, #1e40af, #2563eb);
  background-size: 200% 200%;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
body.auth .btn-primary:hover {
  background-position: 100% 0;
  box-shadow: 0 8px 20px rgba(29, 78, 216, 0.35);
  transform: translateY(-1px);
}
body.auth .btn-primary:active {
  transform: scale(0.97);
}

/* DEBUG: ověř, že hover opravdu běží (dočasně) */
body.auth .auth-card .btn-primary:hover { outline: 2px dashed #22c55e; }

/* ANIMACE TLAČÍTKA – vysoká specificita + !important tam, kde bývá kolize */
body.auth .auth-card .btn-primary{
  position: relative;
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: 10px;
  font: 600 16px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #fff;
  cursor: pointer;
  z-index: 1;

  background: linear-gradient(270deg, #2563eb, #1e40af, #2563eb) !important;
  background-size: 200% 200% !important;

  transition: transform .25s ease, box-shadow .25s ease, background-position .5s ease !important;
  will-change: transform, box-shadow, background-position;
}
body.auth .auth-card .btn-primary:hover{
  transform: translateY(-1px) scale(1.02) !important;
  background-position: 100% 0 !important;
  box-shadow: 0 8px 20px rgba(29,78,216,.35) !important;
}
body.auth .auth-card .btn-primary:active{
  transform: scale(.98) !important;
  box-shadow: 0 4px 12px rgba(29,78,216,.25) !important;
}

/* Pokud by tlačítko něco překrývalo, vypni události na případném pseudo-overlay rodiče */
body.auth .auth-card::after,
body.auth .auth-card::before{ pointer-events: none !important; }

/* (Volitelné) Efekt „shimmer“ přes pseudo-element – velmi viditelné */
body.auth .auth-card .btn-primary::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.28) 50%, transparent 60%);
  transform: translateX(-120%);
  border-radius: inherit;
  transition: transform .6s ease;
  pointer-events:none;
}
body.auth .auth-card .btn-primary:hover::after{ transform: translateX(120%); }

/* === výrazný hover efekt pro tlačítko Přihlásit === */
body.auth .btn-primary {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  color: #fff;
  background: linear-gradient(90deg, #2563eb, #1e40af);
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.35);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.4s ease;
}

body.auth .btn-primary:hover {
  transform: scale(1.06);
  background: linear-gradient(90deg, #1d4ed8, #3b82f6);
  box-shadow: 0 10px 25px rgba(29, 78, 216, 0.55);
}

body.auth .btn-primary:active {
  transform: scale(0.97);
  box-shadow: 0 4px 10px rgba(29, 78, 216, 0.35);
}

/* Lesklý „shimmer“ při hoveru – viditelnější */
body.auth .btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}

body.auth .btn-primary:hover::after {
  left: 125%;
}


/* Zarovnání nadpisu přihlášení – 100% jistota */


body.auth .auth-card header,
body.auth .auth-card .brand {
  display: flex;
  flex-direction: column;
  align-items: center;     /* zarovná i „dovnitř“ */
  justify-content: center;
  text-align: center;
}

/* Základní jednotný styl tlačítek */
.btn {
    display: inline-block;
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    text-decoration: none;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    color: #111;
    font-weight: 500;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

/* Hover efekt pro všechna .btn */
.btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

/* Speciální barva pro tlačítko "Změnit heslo" */
.btn-password {
    background: #2563eb;           /* modrá */
    border-color: #2563eb;
    color: #fff;
}
.btn-password:hover {
    background: #1e40af;           /* tmavší modrá při najetí */
    border-color: #1e3a8a;
}

/* Styl pro tlačítko Odhlásit */
.btn-logout {
    background: #dc2626;           /* červená */
    border-color: #dc2626;
    color: #fff;
}
.btn-logout:hover {
    background: #b91c1c;
    border-color: #991b1b;
}

/* Umístění tlačítek vpravo v headeru */
.user-info .btn,
.user-info .btn-password,
.user-info .btn-logout {
    margin-left: 0.5rem;
}