/* ============================================================================
   NITTiket
   Copyright (c) 2026 NIT Software Solutions. Sva prava zadrzana.

   Ovaj izvorni kod je vlasnistvo NIT Software Solutions i predstavlja poslovnu
   tajnu. Umnozavanje, distribucija ili koriscenje bilo kog dela bez pisane
   saglasnosti vlasnika nisu dozvoljeni.
   ============================================================================

   STRANA PRIJAVE (raspored P1, izbor vlasnika 04.09.2026.)

   Makete: docs/makete/prijava.html

   ----------------------------------------------------------------------------
   ZASTO OVA STRANA NE KORISTI TOKEN --ac, JEDINA U APLIKACIJI

   --ac (indigo / teal / amber / rose) je AKCENAT FIRME. Cita se iz naloga, i to
   TEK POSLE prijave: na ovoj strani korisnika jos nema, pa je akcenat uvek
   podrazumevani indigo #4f46e5. Indigo pored plavog logotipa (#1D4ED8 -> #38BDF8)
   izgleda kao greska u stampi, a ne kao izbor.

   Zato cela strana koristi paletu BRENDA, istu svima. Vrednosti su prepisane iz
   NIT-logo-paket_2/README.txt, ne izmisljene.

   ----------------------------------------------------------------------------
   ZASTO NE PRATI NI TEMU KORISNIKA

   Isti razlog: tema se cita sa naloga. Ova strana je uvek tamna, jer je tamna
   podloga (#0E1013) deo brenda i jer je logotip u tamnoj verziji citljiviji na
   njoj nego bilo koja svetla varijanta na promenljivoj pozadini.

   Posledica koju treba znati: ovde ne rade prekidac teme ni akcenat, i to nije
   propust nego jedino stanje u kom strana moze da izgleda isto svakome ko je
   otvori.
   ============================================================================ */

.prijava-strana {
    /* Boje brenda. NISU tokeni teme i ne menjaju se sa akcentom firme.
       Drze se lokalno, na korenu strane: van ove strane nemaju sta da rade, a
       u nittiket.css bi izgledale kao jos jedan skup koji neko sme da koristi. */
    --brend-1: #1D4ED8;
    --brend-2: #38BDF8;
    --brend-1-t: #3B82F6;
    --brend-2-t: #7DD3FC;
    --brend-mrak: #0E1013;
    --brend-tekst: #E8ECF2;
    --brend-tih: #8A929C;
    --brend-linija: rgba(255, 255, 255, .12);
    --brend-povrsina: rgba(255, 255, 255, .05);
    --brend-dugme: #2563EB;
    --brend-dugme-h: #3B82F6;

    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.12fr 1fr;
    background: var(--brend-mrak);
    color: var(--brend-tekst);
}

/* --- leva kolona: logotip na vrhu, poruka po sredini --------------------- */
/*
   Dva reda, ne flex sa justify-content: logotip mora da stoji GORE, a poruka da
   ostane po sredini visine. Sa jednim tokom oba bi se pomerala zajedno cim
   poruka poraste - a poruka je tekst koji se menja, dok je logotip fiksan.
*/
.prijava-levo {
    position: relative;
    overflow: hidden;
    padding: 48px 56px 56px;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 32px;
    background:
        linear-gradient(135deg, var(--brend-1) 0%, #2563EB 52%, var(--brend-2) 100%);
    color: #fff;
}

.prijava-poruka {
    align-self: center;
}

/*
    Kod-tekstura iz brend-paketa, ispod preliva.

    Ide kao pozadina PSEUDO-elementa, ne kao <img>: slika ovde nista ne znaci -
    citac ekrana nema sta da procita, a alt tekst bi bio izmisljen opis sare.
    Ista slika kao <img> trazila bi alt="" pa i dalje zavrsila u stablu.
*/
.prijava-levo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../slike/pozadina-kod-tamna.png") center / cover no-repeat;
    opacity: .09;
    mix-blend-mode: soft-light;
    pointer-events: none;
}

.prijava-levo::after {
    content: "";
    position: absolute;
    right: -110px;
    bottom: -140px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    pointer-events: none;
}

.prijava-levo > * {
    position: relative;
}

.prijava-poruka-naslov {
    margin: 0 0 14px;
    font-size: 31px;
    line-height: 1.22;
    letter-spacing: -.025em;
    font-weight: 600;
    max-width: 15ch;
}

.prijava-poruka-telo {
    margin: 0 0 30px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .88);
    max-width: 40ch;
}

.prijava-stavke {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.prijava-stavke li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-size: 14.5px;
}

.prijava-stavke svg {
    flex: 0 0 auto;
    margin-top: 2px;
    opacity: .92;
}

/*
   ZADAJE SE SIRINA, NE VISINA - i to je izmereno na ekranu, ne procenjeno.

   Prva verzija je imala height: 36px. viewBox logotipa je 420x195, pa je to
   dalo sirinu od svega ~78px: potpis „SOFTWARE SOLUTIONS" pretvorio se u sivu
   crtu. Pravila upotrebe iz brend-paketa traze najmanje ~120px za punu verziju
   sa godinom i potpisom, a ispod toga skraceni znak.

   clamp, a ne jedna vrednost: logotip sada stoji u levoj koloni, cija se sirina
   menja sa prozorom. Fiksnih 340px bi na 1100px sirokom ekranu pojelo pola
   kolone, a 200px bi na sirokom monitoru izgledalo izgubljeno.
*/
.prijava-logo {
    width: clamp(200px, 21vw, 340px);
    height: auto;
    display: block;
}

/* --- desna kolona: obrazac po sredini ------------------------------------ */
/*
   Tri reda: jezik gore, obrazac po SREDINI, potpis dole. Obrazac je poravnat i
   vodoravno, pa stoji u sredistu tamne povrsine - izbor vlasnika 04.09.2026.

   Sa flex tokom i automatskim marginama obrazac je stajao nize od sredine, jer
   su ga zaglavlje i potpis gurali nejednako. Ovde sredisnji red uzima svu
   preostalu visinu, pa je sredina zaista sredina - i ostaje sredina kad se
   pojavi polje drugog faktora ili poruka o gresci.
*/
.prijava-desno {
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 34px 48px 40px;
    background: var(--brend-mrak);
}

.prijava-desno > .izbor-jezika {
    justify-self: end;
}

.prijava-obrazac {
    width: 100%;
    max-width: 352px;
    justify-self: center;
    align-self: center;
}

.prijava-obrazac h1 {
    margin: 0 0 4px;
    font-size: 23px;
    letter-spacing: -.02em;
    font-weight: 600;
    color: var(--brend-tekst);
}

.prijava-podnaslov {
    margin: 0 0 26px;
    font-size: 13.5px;
    color: var(--brend-tih);
}

.prijava-obrazac p {
    margin: 0 0 14px;
}

.prijava-obrazac label {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--brend-tih);
    margin-bottom: 5px;
}

.prijava-obrazac input {
    width: 100%;
    padding: 10px 12px;
    font: 14px var(--pismo);
    color: var(--brend-tekst);
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--brend-linija);
    border-radius: 8px;
    outline: none;
}

.prijava-obrazac input:focus {
    border-color: var(--brend-1-t);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .22);
}

/*
    Ispravljanje boje koju pretrazivac sam upisuje kad ponudi zapamcenu lozinku.
    Bez ovoga Chrome polje oboji svetlo plavom sa crnim tekstom - na tamnoj
    strani to izgleda kao kvar, i to bas onome ko ima zapamcenu lozinku, dakle
    najcescem posetiocu.
*/
.prijava-obrazac input:-webkit-autofill,
.prijava-obrazac input:-webkit-autofill:hover,
.prijava-obrazac input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--brend-tekst);
    -webkit-box-shadow: 0 0 0 1000px #1a1f27 inset;
    caret-color: var(--brend-tekst);
    transition: background-color 9999s ease-out;
}

.prijava-obrazac .pomoc {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: var(--brend-tih);
}

.prijava-obrazac button[type="submit"] {
    width: 100%;
    margin-top: 6px;
    padding: 11px 14px;
    font: 600 14.5px var(--pismo);
    color: #fff;
    background: var(--brend-dugme);
    border: 1px solid var(--brend-dugme);
    border-radius: 8px;
    cursor: pointer;
}

.prijava-obrazac button[type="submit"]:hover {
    background: var(--brend-dugme-h);
    border-color: var(--brend-dugme-h);
}

.prijava-veza {
    margin: 16px 0 0;
    font-size: 13px;
}

.prijava-veza a {
    color: var(--brend-2-t);
    text-decoration: none;
}

.prijava-veza a:hover {
    text-decoration: underline;
}

.prijava-podnozje {
    margin: 32px 0 0;
    font-size: 12px;
    color: var(--brend-tih);
    align-self: end;
}

/* --- demo -----------------------------------------------------------------
   Strane /demo i /demo/potvrda dele CEO raspored sa prijavom - isti izgled, isti
   stub, isti obrazac. Zato ovde stoji samo ono cega na prijavi nema.
   -------------------------------------------------------------------------- */

/*
   Veza ka demou stoji ODVOJENO od veze za zaboravljenu lozinku, iznad crte:
   one gledaju dve razlicite osobe. „Zaboravljena lozinka" je za naseg korisnika
   koji je zapeo; „probaj demo" je za nekoga ko jos nije nas korisnik.
*/
.prijava-demo {
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--brend-linija);
    font-size: 13px;
}

.prijava-demo a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--brend-linija);
    border-radius: 8px;
    color: var(--brend-tekst);
    text-decoration: none;
    font-weight: 500;
}

.prijava-demo a:hover {
    border-color: var(--brend-1-t);
    background: rgba(59, 130, 246, .10);
}

/* Ime i prezime u istom redu: dva kratka polja jedno ispod drugog nepotrebno
   izduzuju obrazac, a on je na demou i inace duzi nego na prijavi. */
.demo-par {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;

    /* Razmak ISPOD para mora da postoji, i to je nadjeno na ekranu: unutrasnji <p>
       gube svoju marginu (inace bi se sabirala sa razmakom mreze), pa bi bez ovoga
       „Adresa e-poste" stajala odmah uz polja iznad - jedini red u obrascu koji ne
       dise kao ostali. */
    margin-bottom: 14px;
}

.demo-par > p {
    margin-bottom: 0;
}

.demo-sitno {
    margin: 14px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--brend-tih);
}

/* Znak potvrde u stanju „proveri postu". Zelena je ista kao tacka LPFR-a iz
   brend-paketa (#34D399) - ne uzima se --ok iz teme, jer ova strana temu ne prati. */
.demo-znak-ok {
    width: 46px;
    height: 46px;
    margin: 0 0 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #34D399;
    background: rgba(52, 211, 153, .14);
    border: 1px solid rgba(52, 211, 153, .4);
}

@media (max-width: 900px) {
    .demo-par {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .demo-par > p {
        margin-bottom: 14px;
    }
}

/* --- poruka o gresci ----------------------------------------------------- */
/*
    Ne koristi --dg-bg iz teme: ta pozadina je skoro bela i na crnoj strani bi
    bila najsvetliji element na ekranu - jaca od dugmeta i od logotipa.
*/
.prijava-obrazac .poruka-greske {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin: 0 0 16px;
    padding: 9px 12px;
    font-size: 13px;
    color: #fca5a5;
    background: rgba(220, 38, 38, .12);
    border: 1px solid rgba(220, 38, 38, .38);
    border-radius: 8px;
}

.prijava-obrazac .poruka-greske svg {
    flex: 0 0 auto;
    margin-top: 1px;
}

/* --- izbor jezika -------------------------------------------------------- */
/*
    Premoscava .izbor-jezika iz nittiket.css: ta pravila su pisana za svetlu
    stranu. Selektor je namerno slozeniji od njihovog, pa ne zavisi od redosleda
    ucitavanja fajlova.
*/
.prijava-strana .izbor-jezika {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    font-size: 12.5px;
    white-space: nowrap;
}

.prijava-strana .izbor-jezika a {
    color: var(--brend-tih);
    text-decoration: none;
    padding: 3px 8px;
    border-radius: 5px;
}

.prijava-strana .izbor-jezika a:hover {
    color: var(--brend-tekst);
    background: rgba(255, 255, 255, .07);
}

.prijava-strana .izbor-jezika-tekuci {
    padding: 3px 8px;
    border-radius: 5px;
    color: var(--brend-2-t);
    font-weight: 600;
}

.prijava-jezik-crta {
    color: rgba(255, 255, 255, .2);
}

/* --- uzak ekran ---------------------------------------------------------- */
/*
    NA UZANOM EKRANU SE LEVA KOLONA NE GASI NEGO SKUPLJA U TRAKU SA LOGOTIPOM.

    Poruka o proizvodu nestaje - na telefonu je obrazac jedini razlog dolaska, a
    tekst iznad njega gurnuo bi polja ispod prevoja, pa bi svaka prijava pocinjala
    skrolovanjem.

    Logotip OSTAJE, jer je jedino sto kaze gde si se to prijavio. Zato traka, a ne
    display:none na celoj koloni: druga kopija logotipa u desnoj koloni bila bi
    drugo mesto koje se pri svakoj izmeni mora menjati zajedno.
*/
@media (max-width: 900px) {
    .prijava-strana {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .prijava-levo {
        padding: 22px;
        gap: 0;
        grid-template-rows: auto;
    }

    /* Krug je ukras za visoku kolonu; u traci od stotinak piksela postaje mrlja. */
    .prijava-levo::after {
        display: none;
    }

    .prijava-poruka {
        display: none;
    }

    .prijava-logo {
        width: 148px;
    }

    .prijava-desno {
        padding: 24px 22px 32px;
    }

    .prijava-obrazac {
        max-width: none;
    }
}