/* ============================================================
   Restaurantio — strane pre ulaska u program
   ------------------------------------------------------------
   Prijava, zaboravljena lozinka i kapija (izbor lokala). Sve tri
   dele isti raspored: levo znak i objašnjenje, desno radnja.
   Levi deo ostaje mastilo-plav u obe teme — to je boja znaka, a
   ne boja površine, pa se ne obrće sa temom. Na užem ekranu leva
   strana se skuplja u traku, a na telefonu nestaje.

   Učitava se POSLE theme.css, pa koristi iste tokene kao ostatak
   programa (--surface, --border, --sp-*, --fs-*, --dur…).

   Sadržaj
     1. Okvir i levi panel
     2. Desni panel — obrazac (prijava, lozinka)
     3. Desni panel — kapija (izbor lokala)
     4. Prelaz sa prijave na kapiju
     5. Uže površine
   ============================================================ */
.lg-body { margin:0; min-height:100vh; min-height:100dvh; background:var(--bg); }
.lg-shell {
    display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    min-height:100vh; min-height:100dvh;
}

/* ── Levo: znak ─────────────────────────────────────────── */
/* Panel je uvek mastilo-plav, i u svetloj i u tamnoj temi, jer je to boja
   znaka a ne boja površine. Zato njegov tekst ima svoje tokene — semantički
   tokeni bi se obrnuli sa temom i tekst bi nestao na tamnoj podlozi. */
.lg-brand {
    --lg-fg:      #e9eef8;   /* osnovni tekst na mastilu */
    --lg-fg-2:    #cdd7e8;   /* opisi */
    --lg-fg-3:    #a9b7d0;   /* podnaslov */
    --lg-fg-4:    #7d8cab;   /* podnožje */
    --lg-fg-str:  #ffffff;   /* naslovi */
    --lg-tile:    rgba(255, 255, 255, .07);
    --lg-tile-br: rgba(255, 255, 255, .10);

    position:relative; overflow:hidden;
    display:flex; flex-direction:column; justify-content:space-between; gap:var(--sp-8);
    padding:clamp(28px, 5vw, 56px);
    background:linear-gradient(155deg, var(--ink-700) 0%, var(--ink-800) 45%, var(--ink-900) 100%);
    color:var(--lg-fg);
}
/* Zlatni odsjaj — daje dubinu bez slike koja bi se učitavala */
.lg-brand::before {
    content:''; position:absolute; inset:auto auto -20% -15%;
    width:min(680px, 90%); aspect-ratio:1; border-radius:50%;
    background:radial-gradient(circle, color-mix(in srgb, var(--gold-500) 26%, transparent) 0%, transparent 68%);
    pointer-events:none;
}
.lg-brand > * { position:relative; }

.lg-brand-top { display:flex; align-items:center; gap:var(--sp-4); }
.lg-mark {
    display:flex; flex-shrink:0; border-radius:var(--radius-lg); overflow:hidden;
    box-shadow:0 10px 28px rgba(0,0,0,.34);
}
.lg-mark svg { display:block; }
.lg-wordmark {
    font-size:clamp(24px, 3.2vw, 32px); font-weight:700; letter-spacing:-.02em;
    color:var(--lg-fg-str); line-height:1.15;
}
.lg-tagline { margin-top:4px; font-size:var(--fs-md); color:var(--lg-fg-3); }

.lg-points { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-4); }
.lg-points li { display:flex; align-items:flex-start; gap:var(--sp-3);
                font-size:var(--fs-base); line-height:1.5; color:var(--lg-fg-2); }
.lg-points .lg-pt-ico {
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    width:34px; height:34px; border-radius:var(--radius-sm);
    background:var(--lg-tile); border:1px solid var(--lg-tile-br);
    color:var(--gold-400);
}
.lg-points b { display:block; color:var(--lg-fg-str); font-weight:650; }

.lg-brand-foot { font-size:var(--fs-sm); color:var(--lg-fg-4); }
.lg-brand-foot b { color:var(--lg-fg-3); font-weight:650; }

/* ── Desno: obrazac ─────────────────────────────────────── */
.lg-panel { display:flex; align-items:center; justify-content:center;
            padding:clamp(24px, 4vw, 48px); background:var(--surface); }
.lg-form-wrap { width:100%; max-width:390px; }

.lg-mark-sm { display:none; margin-bottom:var(--sp-4); width:max-content; }

.lg-title { margin:0; font-size:var(--fs-2xl); font-weight:700; letter-spacing:-.02em; color:var(--text); }
.lg-lead  { margin:6px 0 var(--sp-6); font-size:var(--fs-base); color:var(--muted); }

.lg-form { display:flex; flex-direction:column; gap:var(--sp-4); }
.lg-field { display:flex; flex-direction:column; gap:6px; }
.lg-label { font-size:var(--fs-sm); font-weight:650; color:var(--text-2); }

/* Polje sa ikonicom u okviru — ikonica je ukras, naziv stoji iznad */
.lg-input { position:relative; display:flex; align-items:center; }
.lg-input > svg { position:absolute; left:12px; color:var(--muted-2); pointer-events:none; }
.lg-input input {
    width:100%; min-height:46px; padding:0 12px 0 40px;
    font-size:var(--fs-md); border-radius:var(--radius-sm);
}
.lg-input.has-toggle input { padding-right:46px; }
.lg-toggle {
    position:absolute; right:4px; display:flex; align-items:center; justify-content:center;
    width:38px; height:38px; padding:0; border:none; background:transparent;
    color:var(--muted-2); border-radius:var(--radius-sm); cursor:pointer;
    transition:color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.lg-toggle:hover { color:var(--text-2); background:var(--surface-hover); }
.lg-toggle:focus-visible { box-shadow:var(--ring); }
/* Precrtano oko = lozinka je trenutno vidljiva */
.lg-toggle.is-on { color:var(--primary); }
.lg-toggle.is-on::after {
    content:''; position:absolute; left:9px; right:9px; top:50%;
    height:1.6px; background:currentColor; transform:rotate(-45deg); border-radius:2px;
}

.lg-caps { display:none; align-items:center; gap:6px;
           font-size:var(--fs-xs); font-weight:650; color:var(--warning); }
.lg-caps.is-on { display:flex; }

.lg-submit { min-height:46px; font-size:var(--fs-md); font-weight:650; margin-top:var(--sp-1); }
.lg-submit[disabled] { opacity:.65; cursor:progress; }

.lg-row { display:flex; align-items:center; justify-content:space-between;
          gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-2); }
.lg-forgot { font-size:var(--fs-sm); color:var(--muted); text-decoration:none; }
.lg-forgot:hover { color:var(--primary); text-decoration:underline; }

.lg-lang { display:inline-flex; gap:2px; padding:3px;
           border:1px solid var(--border); border-radius:var(--radius-pill);
           background:var(--surface-2); }
.lg-lang a { min-width:38px; padding:5px 10px; border-radius:var(--radius-pill);
    font-size:var(--fs-xs); font-weight:700; letter-spacing:.03em; text-align:center;
    color:var(--muted); text-decoration:none;
    transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.lg-lang a:hover { color:var(--text); }
.lg-lang a.active { background:var(--surface); color:var(--text); box-shadow:var(--shadow-xs); }

.lg-form .flash { margin:0 0 var(--sp-2); }

/* Ishod radnje — zahtev poslat i slično */
.lg-done .lg-done-ico {
    display:flex; align-items:center; justify-content:center;
    width:52px; height:52px; margin-bottom:var(--sp-4);
    border-radius:50%; background:var(--success-bg); color:var(--success);
    border:1px solid color-mix(in srgb, var(--success) 30%, transparent);
}
.lg-done .lg-submit { display:inline-flex; align-items:center; justify-content:center;
                      gap:6px; margin-top:var(--sp-2); text-decoration:none; }


/* ============================================================
   3. KAPIJA — IZBOR LOKALA
   ------------------------------------------------------------
   Lokali stoje kao uspravan spisak, a ne kao mreža pločica:
   svaki red je široka meta klika, čita se u jednom potezu i
   podnosi i dva i dvadeset lokala bez prelamanja.
   ============================================================ */
/* Namerno ISTA podela kao na prijavi: mastilo-plav panel tada stoji
   potpuno mirno dok se desna strana menja, pa prelaz čita kao
   „isti okvir, druga radnja". Kapija dobija širinu tako što joj je
   sam sadržaj širi, a ne kolona. */
.lg-shell.is-gate .lg-panel { align-items:center; }
.lg-shell.is-gate .lg-form-wrap { max-width:520px; }

.gt-list { display:flex; flex-direction:column; gap:var(--sp-2); margin:0; padding:0; }

.gt-item {
    display:grid; grid-template-columns:auto minmax(0,1fr) auto auto;
    align-items:center; gap:var(--sp-3);
    width:100%; padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-3);
    text-align:left; font:inherit; cursor:pointer;
    background:var(--surface); color:var(--text);
    border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow-xs);
    transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
               background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.gt-item:hover { border-color:var(--primary); box-shadow:var(--shadow-md); transform:translateY(-1px); }
.gt-item:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.gt-item:active { transform:translateY(0); }
.gt-item.is-current { border-color:var(--primary); background:var(--primary-bg); }

.gt-logo {
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    width:46px; height:46px; overflow:hidden;
    border:1px solid var(--border); border-radius:var(--radius-sm);
    background:var(--surface-2);
}
.gt-logo img { max-width:100%; max-height:100%; object-fit:contain; }
.gt-initial { font-size:19px; font-weight:700; color:var(--muted); }

.gt-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.gt-name { font-size:var(--fs-md); font-weight:650; letter-spacing:-.01em;
           overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gt-sub  { font-size:var(--fs-sm); color:var(--muted);
           overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.gt-badge { flex-shrink:0; padding:2px 9px; border-radius:var(--radius-pill);
    background:var(--primary); color:var(--on-primary);
    font-size:var(--fs-xs); font-weight:700; }

.gt-go { display:flex; flex-shrink:0; color:var(--muted-2);
         transition:color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.gt-item:hover .gt-go { color:var(--primary); transform:translateX(2px); }

/* „Svi restorani" — odvojen od pojedinačnih lokala, jer je druga vrsta izbora */
.gt-sep { display:flex; align-items:center; gap:var(--sp-3);
          margin:var(--sp-4) 0 var(--sp-2);
          font-size:var(--fs-xs); font-weight:700; color:var(--muted-2);
          text-transform:uppercase; letter-spacing:.06em; }
.gt-sep::after { content:''; flex:1; height:1px; background:var(--border); }
.gt-item-all .gt-logo { background:var(--primary-bg); border-color:var(--primary); color:var(--primary); }
.gt-item-all .gt-initial { color:var(--primary); display:flex; }

/* Podnožje sa korisnikom i odjavom — stoji uz izbor, pa je dostupno i na telefonu */
.gt-foot { display:flex; align-items:center; justify-content:space-between;
    gap:var(--sp-3); flex-wrap:wrap;
    margin-top:var(--sp-5); padding-top:var(--sp-4);
    border-top:1px solid var(--border); font-size:var(--fs-sm); }
.gt-who { display:flex; align-items:center; gap:var(--sp-2); min-width:0; color:var(--muted); }
.gt-who b { color:var(--text-2); font-weight:650; }
.gt-acts { display:flex; align-items:center; gap:var(--sp-3); }
.gt-acts a { color:var(--muted); text-decoration:none; }
.gt-acts a:hover { color:var(--primary); text-decoration:underline; }
.gt-acts a.gt-out { color:var(--danger); }

.gt-empty { text-align:center; padding:var(--sp-6) 0; }
.gt-empty .lg-done-ico { margin-inline:auto; background:var(--warning-bg); color:var(--warning);
                         border-color:color-mix(in srgb, var(--warning) 30%, transparent); }


/* ============================================================
   4. PRELAZ SA PRIJAVE NA KAPIJU
   ------------------------------------------------------------
   Prijava i kapija su dve prave strane — između njih stoji
   preusmerenje sa servera. Zato prelaz ima dva sloja:

   a) Neprekidnost okvira — mastilo-plav panel dobija ime, pa ga
      pregledač pri prelasku ne pretapa nego zadrži na mestu.
      Ostatak strane se pretopi. Poruka je „okvir je isti, samo
      je radnja druga", a ne „otvorila se neka nova strana".
      Radi tamo gde postoji View Transitions; gde ga nema,
      prelaz je običan i ništa se ne kvari.

   b) Dolazak sadržaja — naslov i redovi lokala ulaze odozdo,
      jedan za drugim. To radi u svakom pregledaču i samo po
      sebi je dovoljno da se prelaz oseti.

   Sve se gasi kada korisnik traži manje kretanja.
   ============================================================ */
@view-transition { navigation: auto; }

/* Panel sa znakom je isti na obe strane — ne pretapa se, ostaje */
.lg-brand    { view-transition-name: auth-brand; }
.lg-mark-sm  { view-transition-name: auth-mark-sm; }   /* vidljiv samo na telefonu */

/* Pretapanje ostatka: izlaz je kraći od ulaza, da odgovor deluje brz */
::view-transition-old(root) { animation: lg-fade-out 120ms ease-in both; }
::view-transition-new(root) { animation: lg-fade-in  200ms var(--ease, ease-out) both; }

@keyframes lg-fade-out { to   { opacity: 0; } }
@keyframes lg-fade-in  { from { opacity: 0; } }

/* Sadržaj desnog panela ulazi odozdo */
@keyframes lg-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.lg-title { animation: lg-rise 300ms var(--ease) backwards; animation-delay: 20ms; }
.lg-lead  { animation: lg-rise 300ms var(--ease) backwards; animation-delay: 60ms; }

/* Na prijavi se pomera ceo obrazac; na kapiji se pomeraju redovi,
   pa se okvir ne animira da se pokreti ne bi slagali jedan na drugi */
.lg-shell:not(.is-gate) .lg-form {
    animation: lg-rise 300ms var(--ease) backwards; animation-delay: 100ms;
}

/* Lokali stižu jedan za drugim — korak od 45ms je dovoljan da se
   primeti redosled, a prekratak da se čeka */
.gt-item { animation: lg-rise 300ms var(--ease) backwards; }
.gt-item:nth-child(1) { animation-delay: 120ms; }
.gt-item:nth-child(2) { animation-delay: 165ms; }
.gt-item:nth-child(3) { animation-delay: 210ms; }
.gt-item:nth-child(4) { animation-delay: 255ms; }
.gt-item:nth-child(5) { animation-delay: 300ms; }
.gt-item:nth-child(6) { animation-delay: 345ms; }
.gt-item:nth-child(n+7) { animation-delay: 390ms; }   /* dalje se ne čeka */

/* „Svi restorani" dolaze posle spiska lokala, pa i kasne za njim */
.gt-sep                    { animation: lg-rise 300ms var(--ease) backwards; animation-delay: 400ms; }
.gt-sep + .gt-list .gt-item { animation-delay: 440ms; }
.gt-foot                   { animation: lg-rise 300ms var(--ease) backwards; animation-delay: 480ms; }
.gt-empty                  { animation: lg-rise 300ms var(--ease) backwards; animation-delay: 100ms; }

/* Levi panel se pri prvom dolasku takođe smiri na mesto —
   pri prelasku sa prijave ovo se ne primeti, jer panel tada ostaje isti */
.lg-brand-top { animation: lg-rise 380ms var(--ease) backwards; }
.lg-points li { animation: lg-rise 380ms var(--ease) backwards; }
.lg-points li:nth-child(1) { animation-delay:  80ms; }
.lg-points li:nth-child(2) { animation-delay: 140ms; }
.lg-points li:nth-child(3) { animation-delay: 200ms; }

/* Traka koja radi dok prijava putuje — nije lažni napredak nego
   znak da se nešto dešava; gasi se sa novom stranom */
.lg-progress {
    position: absolute; left: 0; right: 0; top: 0; height: 2px;
    overflow: hidden; border-radius: 2px; background: var(--surface-2);
    opacity: 0; transition: opacity var(--dur) var(--ease);
}
.lg-progress.is-on { opacity: 1; }
.lg-progress::after {
    content: ''; position: absolute; inset: 0;
    width: 40%; border-radius: 2px; background: var(--primary);
    animation: lg-slide 1.1s var(--ease) infinite;
}
@keyframes lg-slide {
    from { transform: translateX(-100%); }
    to   { transform: translateX(350%); }
}
.lg-form-wrap { position: relative; }

/* Ko traži manje kretanja — dobija stranu bez ijednog pokreta.
   Bitno: `animation: none` bi ostavio elemente na `opacity` iz
   poslednjeg kadra, pa se vidljivost vraća izričito. */
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }

    .lg-title, .lg-lead, .lg-shell:not(.is-gate) .lg-form,
    .gt-item, .gt-sep, .gt-foot, .gt-empty,
    .lg-brand-top, .lg-points li {
        animation: none !important;
        opacity: 1; transform: none;
    }
    .lg-progress::after { animation: none; width: 100%; opacity: .55; }
}


/* ============================================================
   5. UŽE POVRŠINE
   ============================================================ */
@media (max-width:900px) {
    .lg-shell { grid-template-columns:1fr; min-height:auto; }
    .lg-brand { gap:var(--sp-5); padding:var(--sp-6) var(--sp-5); }
    .lg-points, .lg-brand-foot { display:none; }
    .lg-panel { padding:var(--sp-6) var(--sp-5) var(--sp-8); align-items:flex-start; }
    .lg-form-wrap { max-width:420px; margin:0 auto; }
    .lg-shell.is-gate .lg-form-wrap { max-width:520px; }
}
@media (max-width:480px) {
    .lg-brand { display:none; }
    .lg-panel { min-height:100dvh; align-items:center; }
    .lg-mark-sm { display:flex; }
    .gt-item { gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); }
    .gt-logo { width:40px; height:40px; }
    .gt-go { display:none; }             /* ceo red je meta klika — strelica ne treba */
}

/* Iznenadni pokret nikom ne treba na ovim stranama */
@media (prefers-reduced-motion:reduce) {
    .lg-toggle, .lg-lang a, .lg-forgot, .gt-item, .gt-go { transition:none; }
    .gt-item:hover { transform:none; }
    .gt-item:hover .gt-go { transform:none; }
}