/* =========================================================
   Javni pregled u ljusci aplikacije (plan §3A)
   /pretraga, /oglas/{id}, /posao/{id}, /uslugodavac/{id} i
   strane naloga pod /app. Ostali app-*.css su iz dizajna
   (app-design/kod) i ne menjaju se ovde; ovde je samo ono
   što SSR bez JavaScript-a radi drugačije od WASM ekrana:
   linkovi umesto dugmadi, :target umesto stanja, modal.
   ========================================================= */

@font-face { font-family: "Outfit"; font-weight: 400; font-style: normal; font-display: swap; src: url("../../fonts/Outfit-Regular.woff2")  format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 500; font-style: normal; font-display: swap; src: url("../../fonts/Outfit-Medium.woff2")   format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 600; font-style: normal; font-display: swap; src: url("../../fonts/Outfit-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 700; font-style: normal; font-display: swap; src: url("../../fonts/Outfit-Bold.woff2")     format("woff2"); }

/* Ljuska drži ceo prozor; skroluje .glavno, ne strana. dvh zbog trake
   pregledača na telefonu, koja se skuplja i širi. */
html, body { height: 100%; margin: 0; }
body { background: var(--us-bg); color: var(--us-fg); font-family: var(--us-font); }
body > .app { height: 100dvh; }

/* Klase iz dizajna postavljaju display i tako bi pregazile atribut hidden. */
[hidden] { display: none !important; }

.lnk { padding: 0; border: 0; background: none; color: var(--us-accent); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.lnk:hover { text-decoration: underline; text-underline-offset: 3px; }
.dugme-blok { display: flex; flex-wrap: wrap; gap: 8px; }
a.dugme { text-decoration: none; }

/* ---------- Ljuska u gost režimu ---------- */
.traka-dno .traka-nalog { margin-top: 6px; }
.app[data-traka="skupljena"] .traka-nalog { display: none; }
.app[data-traka="skupljena"] .traka-dno .korisnik-info { display: none; }
.traka-dno .korisnik { text-decoration: none; color: inherit; }
/* Prijavljen korisnik na javnoj strani: katanci nestaju, stavke vode u /app */
[data-sesija="clan"] .stavka-zak { display: none; }
.dno-nav a.dno-stavka { text-decoration: none; }

/* Glavna radnja u vrhu (Postavi oglas, Objavi posao): puno dugme sa senkom
   u boji svoje strane, da se vidi i pored polja za pretragu. */
.vrh-radnja { gap: 8px; padding-inline: 18px; box-shadow: 0 8px 22px rgba(47, 107, 255, .32); }
.vrh-radnja.dugme-posao { box-shadow: 0 8px 22px rgba(192, 38, 211, .3); }
.vrh-radnja:hover { transform: translateY(-1px); }

/* ---------- Pretraga ---------- */
/* Usluge/Poslovi su linkovi (Enter u polju ne sme da promeni vrstu). */
.seg a { position: relative; z-index: 1; display: inline-grid; place-items: center; min-width: 96px; min-height: 36px; padding: 0 14px; color: var(--us-fg-muted); font: 600 14px/1 var(--us-font); text-decoration: none; transition: color var(--us-t-stanje) var(--us-ease); }
.seg a[aria-current="page"] { color: #FFFFFF; }

a.pt-oblast { text-decoration: none; }
.pt-oblast[aria-current="page"] { background: var(--us-tint); color: var(--us-accent); font-weight: 600; }
.pt-posao .pt-oblast[aria-current="page"] { background: var(--us-posao-tint); color: var(--us-posao); }
.pt-zatvori { display: none; margin-left: 8px; }

/* Uzak sadržaj: panel filtera se otvara preko rezultata kad je adresa #filteri */
@container sadrzaj (max-width: 899px) {
  .pt-filteri:target {
    display: flex; position: fixed; inset: auto 0 0 0; z-index: 20;
    max-height: 80dvh; overflow-y: auto; border-radius: 22px 22px 0 0;
    box-shadow: var(--us-shadow-md);
    animation: us-modal-ulaz var(--us-t-ulaz) var(--us-ease) both;
  }
  .pt-filteri:target .pt-zatvori { display: inline-grid; }
}

.strane { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 28px 0 8px; }
.strana { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--us-border); border-radius: 12px; background: var(--us-surface); color: var(--us-fg-muted); font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
.strana:hover { color: var(--us-fg); border-color: var(--us-accent); }
.strana[aria-current="page"] { background: var(--us-accent-cta); border-color: var(--us-accent-cta); color: #FFFFFF; }
.pt-posao .strana[aria-current="page"] { background: var(--us-posao-jak); border-color: var(--us-posao-jak); }

.lc-bez-slike { display: grid; place-items: center; width: 100%; height: 100%; color: var(--us-fg-subtle); }
.lc a.lc-omiljeni { text-decoration: none; }

/* ---------- Galerija (Galerija.razor, app-pretraga.js) ----------
   Traka koja se lista prstom, jedna slika po ekranu. Slika se ne seče:
   contain u okviru, pa je visoka koliko okvir (uspravna i kvadratna) ili
   široka koliko okvir (položena). Klik otvara pregled preko celog ekrana. */
.galerija-glavna { background: var(--us-surface2); }
.galerija-traka {
  display: flex; height: 100%; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; outline-offset: -3px;
}
.galerija-traka::-webkit-scrollbar { display: none; }
.galerija-slika { position: relative; flex: 0 0 100%; height: 100%; display: block; overflow: hidden; scroll-snap-align: center; scroll-snap-stop: always; cursor: zoom-in; }
/* Pruge pored slike koja ne popunjava okvir: ista slika, zamućena i tamnija */
.galerija-slika::before { content: ""; position: absolute; inset: -24px; background: var(--slika) center / cover no-repeat; filter: blur(22px) brightness(.55); }
.galerija-glavna .galerija-slika img { position: relative; width: 100%; height: 100%; object-fit: contain; display: block; animation: none; }
.galerija-strelica {
  position: absolute; top: 50%; left: 12px; z-index: 2; transform: translateY(-50%);
  display: none; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(11,18,32,.62); color: #FFFFFF; cursor: pointer;
}
.galerija-strelica-desno { left: auto; right: 12px; }
.galerija-strelica:disabled { opacity: 0; pointer-events: none; }
@media (hover: hover) { .galerija-strelica { display: grid; } }
.galerija-brojac { z-index: 2; }
[data-kopirano] { color: var(--us-ok-fg); }
.galerija > a { padding: 0; border: 2px solid transparent; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; }
.galerija > a[aria-pressed="true"] { border-color: var(--us-accent); }
.galerija > a img { width: 100%; height: 100%; object-fit: cover; display: block; }
@container sadrzaj (max-width: 559px) { .galerija > a { display: none; } }

/* Pregled preko celog ekrana: zatamnjena pozadina, slika cela (contain),
   X gore desno. Otvara ga skripta (data-otvoren), a bez nje :target. */
.galerija-pregled { display: none; position: fixed; inset: 0; z-index: 100; background: rgba(7, 11, 20, .92); }
.galerija-pregled[data-otvoren], .galerija-pregled:has(:target) { display: block; animation: us-bledi-ulaz var(--us-t-mikro) var(--us-ease) both; }
.galerija-pregled-traka {
  display: flex; height: 100%; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none;
}
.galerija-pregled-traka::-webkit-scrollbar { display: none; }
/* Flex, ne grid: u gridu red raste sa slikom, pa max-height: 100% nema
   prema čemu da se meri i visoka slika izađe iz ekrana. */
.galerija-pregled-slika {
  flex: 0 0 100%; height: 100%; box-sizing: border-box; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  padding: max(60px, env(safe-area-inset-top)) 12px max(60px, env(safe-area-inset-bottom));
  scroll-snap-align: center; scroll-snap-stop: always; cursor: zoom-out;
}
.galerija-pregled-slika img {
  max-width: 100%; max-height: 100%; min-height: 0; width: auto; height: auto;
  max-height: min(100%, calc(100dvh - 120px));
  object-fit: contain; display: block; border-radius: 8px; cursor: default;
}
@media (max-width: 559px) { .galerija-pregled-slika { padding-left: 0; padding-right: 0; } .galerija-pregled-slika img { border-radius: 0; } }
.galerija-zatvori {
  position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 101;
  width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.14); color: #FFFFFF;
}
.galerija-zatvori:hover { background: rgba(255,255,255,.24); }
.galerija-pregled-brojac { position: fixed; left: 50%; right: auto; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); }

/* ---------- Detalji ---------- */
.dt-uslugodavac { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: var(--us-fg); text-decoration: none; }
.dt-uslugodavac:hover { border-color: var(--us-accent); }
.dt-radnja a.dugme, .dt-cta-tel a.dugme { justify-content: center; }
img.avatar { object-fit: cover; padding: 0; }

/* ---------- Ocene ---------- */
.zvezda-prazna { opacity: .28; }
.zbir-ocena { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.zbir-broj { font-size: 44px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.zbir-raspodela { display: flex; flex-direction: column; gap: 4px; flex: 1 1 200px; min-width: 180px; }
.zbir-red { display: grid; grid-template-columns: 12px minmax(0, 1fr) 28px; gap: 8px; align-items: center; font-size: 12px; }
.zbir-traka { height: 6px; border-radius: 999px; background: var(--us-surface2); overflow: hidden; }
.zbir-traka i { display: block; height: 100%; border-radius: inherit; background: var(--us-accent-cta); }

/* ---------- Obrasci naloga (modal i /app/login) ---------- */
.nalog-forma { display: flex; flex-direction: column; gap: 14px; }
.nalog-forma label { display: flex; flex-direction: column; gap: 0; }
.nalog-forma .polje { width: 100%; }
.nalog-forma .sitno { margin-top: 4px; }
.nalog-saglasnost { flex-direction: row !important; align-items: flex-start; gap: 10px !important; font-size: 13.5px; line-height: 1.45; }
.nalog-saglasnost input { margin-top: 2px; flex: none; }
.nalog-modal { position: fixed; padding: 24px; border-color: color-mix(in srgb, var(--us-accent) 35%, var(--us-border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--us-accent) 18%, transparent), 0 30px 80px rgba(2, 8, 23, .55); }
.nalog-modal h2 { padding-right: 36px; }
.nalog-modal[open] { display: block; }
.nalog-modal::backdrop { background: rgba(7, 11, 20, .72); backdrop-filter: blur(3px); }

/* Tabovi prijava/nalog: izabrani je pun plavi klizač, kao segment Usluge/Poslovi.
   Klizač je ::before na traci i pomera se jednim pokretom (data-tab-aktivan). */
.nalog-tabovi { position: relative; padding: 4px; border: 1px solid var(--us-border); border-radius: 14px; }
.nalog-tabovi::before {
  content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: 10px; background: var(--us-accent-cta); box-shadow: 0 6px 16px rgba(47, 107, 255, .35);
  transition: transform var(--us-t-stanje) var(--us-ease);
}
.nalog-modal[data-tab-aktivan="registracija"] .nalog-tabovi::before { transform: translateX(100%); }
.nalog-tabovi [role="tab"] { position: relative; z-index: 1; height: 40px; border-radius: 10px; font-size: 14.5px; transition: color var(--us-t-stanje) var(--us-ease); }
.nalog-tabovi [role="tab"]:hover { color: var(--us-fg); }
.nalog-tabovi [role="tab"][aria-selected="true"] { background: transparent; box-shadow: none; color: #FFFFFF; }
.nalog-tabovi [role="tab"]:focus-visible { outline: 2px solid var(--us-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .nalog-tabovi::before { transition: none; } }

/* Google: bela kartica sa znakom, kao u Google-ovim smernicama za dugme */
.nalog-google { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; border: 1px solid var(--us-border); border-radius: 12px; background: #FFFFFF; color: #1F1F1F; font: 600 14.5px/1 var(--us-font); text-decoration: none; }
.nalog-google:hover { box-shadow: 0 4px 14px rgba(2, 8, 23, .25); }
.nalog-google svg { width: 18px; height: 18px; flex: none; }

/* Strana prijave bez ljuske */
.auth-okvir { height: 100dvh; }
.auth-desno .traka-znak { margin: 0 0 8px; padding: 0; }
.nalog-spoljno { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.nalog-spoljno:empty { display: none; }
/* ---------- Izbor grada (GradIzbor.razor, app-pretraga.js) ----------
   Port CityPicker.razor iz aplikacije: lista ispod polja, preko cele širine
   polja, do 8 gradova, svaki red sa tankom linijom. Boje su tokeni dizajna. */
.pt-grad, .grad-polje { position: relative; }
.grad-lista {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50;
  max-height: 220px; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--us-border-soft); border-radius: 14px;
  background: var(--us-surface); box-shadow: var(--us-shadow-md);
}
.grad-stavka {
  display: block; width: 100%; padding: 11px 14px;
  border: 0; border-bottom: 1px solid var(--us-border-soft); background: none;
  color: var(--us-fg); font: 500 13px/1.3 var(--us-font); text-align: left; cursor: pointer;
}
.grad-stavka:last-child { border-bottom: 0; }
.grad-stavka:hover, .grad-stavka[aria-selected="true"] { background: var(--us-surface2); }
/* ---------- Dopune obrazaca u /app (ObjaviPosao i ostali .ob) ----------
   Dizajn crta samo sliku i polje „Dodaj"; ovde je dugme za uklanjanje
   preko slike i plava (obaveštajna) varijanta trake .greska. */
a.tab { text-decoration: none; }
/* Poruke: u dizajnu je .po odmah ispod vrha, bez .sadrzaj; ovde .sadrzaj
   ostaje (ljuska je ista za sve ekrane), pa se za ovaj ekran širi do ivica
   i drži visinu prozora, da polje za poruku bude uvek vidljivo. */
.sadrzaj:has(.po) { max-width: none; padding: 0; height: calc(100% - var(--us-vrh-visina)); }
.app[data-traka="telefon"] .sadrzaj:has(.po) { height: 100%; }
.sadrzaj .po { height: 100%; }
/* „Ana piše" ispod poslednje poruke (demo-app ms.kuca) */
.pisem { align-self: flex-start; font-size: 12.5px; color: var(--us-fg-subtle); }
a.po-oglas:hover { border-color: var(--us-accent); }
.ob-slika { position: relative; }
.ob-slika img { width: 100%; aspect-ratio: 1; border-radius: 12px; object-fit: cover; display: block; }
.ob-slika-x { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; background: var(--us-surface); box-shadow: var(--us-shadow-sm); }
label.ob-dodaj { position: relative; }
/* Redosled slika oglasa: strelice preko slike, oznaka naslovne */
.ob-slika-pomeri { position: absolute; left: 6px; bottom: 6px; display: flex; gap: 4px; }
.ob-slika-pomeri .ikon-dugme { width: 28px; height: 28px; background: var(--us-surface); box-shadow: var(--us-shadow-sm); }
.ob-slika-oznaka { position: absolute; top: 6px; left: 6px; }
.ob-slika[aria-busy="true"] img { opacity: .55; }
.ob-dodaj[aria-busy="true"] { cursor: progress; opacity: .7; }
.greska[data-vrsta="info"] { background: var(--us-tint); border-color: color-mix(in srgb, var(--us-accent) 30%, transparent); }
.greska[data-vrsta="info"] > .ik { color: var(--us-accent); }
.nalog-uspeh { padding: 10px 12px; border-radius: var(--us-radius-sm); background: var(--us-ok-bg); color: var(--us-ok-fg); font-size: 13.5px; }