/* ==========================================================================
   Prihlásenie a registrácia – OrgBoard
   Vizuálny redizajn: gradientové pozadie, presvetlená karta, jemné animácie.
   Všetky štýly sú tu (žiadne inline), tabuľa (orgboard.css) zostáva nedotknutá.
   ========================================================================== */

:root{
  --auth-accent:#0f766e;
  --auth-accent-2:#14b8a6;
  --auth-ink:#1a1d24;
  --auth-muted:#6b7280;
  --auth-line:#e5e7eb;
}

/* Celoplošné pozadie – tmavý gradient s jemnými svetelnými škvrnami. */
#login{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:
    radial-gradient(1100px 620px at 12% -10%, rgba(20,184,166,.28), transparent 60%),
    radial-gradient(900px 560px at 108% 118%, rgba(15,118,110,.30), transparent 55%),
    linear-gradient(160deg, #0b1220 0%, #0f172a 55%, #0c1a1c 100%);
  overflow:auto;
}

/* Karta. */
#login .box{
  position:relative;
  background:rgba(255,255,255,.98);
  border:1px solid rgba(255,255,255,.6);
  border-radius:20px;
  padding:34px 32px 28px;
  width:100%;
  max-width:420px;
  box-shadow:0 24px 60px -18px rgba(2,6,23,.65), 0 2px 6px rgba(2,6,23,.25);
  animation:auth-in .45s cubic-bezier(.21,.94,.42,1) both;
}

/* Farebný pásik navrchu karty. */
#login .box::before{
  content:""; position:absolute; left:0; right:0; top:0; height:5px;
  border-radius:20px 20px 0 0;
  background:linear-gradient(90deg, var(--auth-accent), var(--auth-accent-2));
}

@keyframes auth-in{
  from{opacity:0; transform:translateY(14px) scale(.985);}
  to{opacity:1; transform:none;}
}

/* Značka – ikonka + názov. */
.auth-brand{
  display:flex; align-items:center; gap:12px; margin-bottom:18px;
}
.auth-brand .mark{
  width:46px; height:46px; flex:0 0 46px;
  display:flex; align-items:center; justify-content:center;
  border-radius:13px; color:#fff;
  background:linear-gradient(135deg, var(--auth-accent), var(--auth-accent-2));
  box-shadow:0 6px 16px -4px rgba(15,118,110,.6);
}
.auth-brand .mark svg{width:26px; height:26px;}
.auth-brand .name{font-size:1.15rem; font-weight:700; color:var(--auth-ink); letter-spacing:-.01em;}
.auth-brand .name span{color:var(--auth-accent);}

#login h2{font-size:1.15rem; font-weight:700; color:var(--auth-ink); margin-bottom:4px; letter-spacing:-.01em;}
#login p{font-size:.82rem; color:var(--auth-muted); margin-bottom:18px; line-height:1.5;}

#login label{
  display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--auth-muted); font-weight:600; margin:14px 0 5px;
}

#login input{
  width:100%; margin:0;
  border:1px solid var(--auth-line); border-radius:10px;
  padding:11px 13px; font:inherit; font-size:.9rem; color:var(--auth-ink);
  background:#fff; transition:border-color .15s, box-shadow .15s;
}
#login input::placeholder{color:#9ca3af;}
#login input:hover{border-color:#cbd5e1;}
#login input:focus{
  outline:none; border-color:var(--auth-accent);
  box-shadow:0 0 0 3px rgba(20,184,166,.18);
}

/* Tlačidlo na celú šírku – s gradientom a jemným zdvihom pri hoveri. */
.auth-btn-full{
  width:100%; margin-top:22px;
  border:none; border-radius:10px; cursor:pointer;
  padding:12px 16px; font-size:.92rem; font-weight:600; color:#fff;
  background:linear-gradient(135deg, var(--auth-accent), var(--auth-accent-2));
  box-shadow:0 8px 18px -6px rgba(15,118,110,.6);
  transition:transform .12s, box-shadow .15s, filter .15s;
}
.auth-btn-full:hover{filter:brightness(1.05); box-shadow:0 10px 22px -6px rgba(15,118,110,.7);}
.auth-btn-full:active{transform:translateY(1px);}
.auth-btn-full:focus-visible{outline:2px solid var(--auth-accent-2); outline-offset:2px;}

/* Chybová hláška. */
.auth-err{
  display:flex; align-items:flex-start; gap:8px;
  color:#b91c1c; font-size:.8rem; line-height:1.4;
  background:#fef2f2; border:1px solid #fecaca; border-radius:10px;
  padding:10px 12px; margin-top:14px;
}

/* Odkaz na druhú obrazovku. */
.auth-alt{
  border-top:1px solid var(--auth-line); margin-top:20px; padding-top:16px;
  font-size:.82rem; color:var(--auth-muted); text-align:center;
}
.auth-alt a{color:var(--auth-accent); font-weight:600; text-decoration:none;}
.auth-alt a:hover{text-decoration:underline;}

@media (max-width:480px){
  #login .box{padding:26px 20px 22px;}
}