/* =====================================================================
   TEMPO - stil
   Tokeni, oblici i mjere doslovno iz ZZ-ovih demo predlozaka
   (tempo-meni-odabir-demo.html, tempo-dionice-demo.html,
   tempo-vrijeme-kroz-dionicu-demo.html, nalog 29.8.2026.).
   Stara Mentorova imena varijabli ostaju kao veze na nove vrijednosti,
   da se ne prepisuje svaki ekran.
   ===================================================================== */

:root{
  /* --- boje: doslovno iz demoa --- */
  --tinta:#2b2b28; --papir:#f5f2ea; --crta:#d9d3c4; --blijedo:#8a8577;
  --teal:#3d8f8a; --zelena:#5d7a3a; --naranca:#c07a2d; --crvena:#a33b2e;
  --karta:#fffdf8;

  /* --- stara imena, vezana na nove boje --- */
  --panel:var(--karta); --panel-tih:#f7f3ea; --okvir:var(--crta);
  --tiha:var(--blijedo); --tipka-glavna:var(--tinta);
  --naglasak:var(--naranca); --naglasak-tlo:#f7efe3;
  --zelena-tlo:#eef1e7; --zuta:var(--naranca); --plava:var(--teal);
  --t-kuca:var(--naranca); --t-stan:var(--teal); --h1:#efeade;
  --m-admin:var(--blijedo);

  /* --- mjere --- */
  --r:6px; --r2:12px; --r3:18px; --radius:5px;
  --r-karta:8px; --r-gumb:6px;
  --sjena:0 10px 30px rgba(43,43,40,.08);
  --sans:"Segoe UI", system-ui, sans-serif;
  --f-oznaka:11px; --f-tijelo:14px; --f-sitno:12.5px;
}

/* Wordmark TEMPO ide u ZZ-ovu logo-tipografiji: Gordon W01 Black
   (Letterbox, dizajn Lan Huang), isti asset koji nosi i MENTOR-ov
   wordmark. Servira se lokalno, bez CDN-a. Koristi se SAMO za natpis
   TEMPO; sucelje ostaje "Segoe UI", system-ui. */
@font-face{font-family:"LogoFont";font-style:normal;font-weight:900;
  font-display:swap;src:url("fonts/LogoFont.woff2") format("woff2")}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--papir);color:var(--tinta);font-family:var(--sans);
  font-size:var(--f-tijelo);display:flex;flex-direction:column;
  background-image:repeating-linear-gradient(45deg,
    rgba(0,0,0,.015) 0 1px, transparent 1px 22px)}

/* --- zaglavlje i znak: bijela traka, donji rub 3px tinta --- */
.prozor-zaglavlje{flex:0 0 auto;background:#fff;border-bottom:3px solid var(--tinta);
  display:flex;align-items:center;justify-content:center;gap:26px;padding:0 28px}
.prozor-zaglavlje.sa-izbornikom{justify-content:flex-start;flex-wrap:wrap}
/* Zaglavlje ide po ISTOM pravilu kao ulaz (presuda ZZ 29.8.2026.): znak
   lijevo, wordmark desno, poravnat s DNOM donjih krugova. Razmak je
   razmjerno manji (10 px uz znak od 26 px, kao 20 px uz znak od 75).
   line-height:1 je nuzan da flex-end pogodi dno SLOVA, a ne dno retka. */
.znak{display:flex;align-items:flex-end;gap:10px;padding:14px 0}
.znak-svg{width:26px;height:26px}
.znak-ime{font-family:"LogoFont","Times New Roman",serif;font-weight:900;
  letter-spacing:5px;font-size:20px;line-height:1;position:relative;top:1px}
a.znak{text-decoration:none;color:inherit}

/* --- glavna navigacija: sve stavke isto pravilo, aktivna je teal --- */
.izbornik{display:flex;gap:4px;align-items:stretch;align-self:stretch;flex-wrap:wrap}
.izbornik a{display:flex;align-items:center;text-decoration:none;color:var(--blijedo);
  font-size:13px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
  padding:20px 14px 17px;border-bottom:3px solid transparent;margin-bottom:-3px;
  transition:color .15s}
.izbornik a:hover{color:var(--tinta)}
.izbornik a.ovdje{color:var(--teal);border-bottom-color:var(--teal)}

.desno{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:13px;
  color:var(--blijedo)}
.tko{font-size:13px;color:var(--blijedo)}
.tko a{color:inherit}

/* --- EN/HR prekidac --- */
.jezik{display:inline-flex;border:1px solid var(--crta);border-radius:var(--r-gumb);
  overflow:hidden;background:#fff}
.jezik button{border:0;background:transparent;font:inherit;font-size:13px;
  color:var(--blijedo);padding:4px 10px;cursor:pointer}
.jezik button.izabran{background:var(--tinta);color:#fff}

/* --- sadrzaj --- */
main{flex:1 1 auto;padding:28px 16px 40px;display:flex;justify-content:center;
  align-items:flex-start}
.ploca{background:var(--karta);border:1px solid var(--crta);box-shadow:var(--sjena);
  border-radius:var(--r-karta);width:min(1180px,100%);padding:28px 24px 34px}
.ploca.uska{width:min(980px,100%);padding:40px 24px 44px}

h1{font-size:19px;margin:0 0 var(--r2);font-weight:700}
h2{font-size:15px;margin:var(--r3) 0 var(--r);font-weight:700}
.podnaslov{color:var(--tiha);margin:0 0 var(--r3)}

.panel{background:var(--karta);border:1px solid var(--crta);
  border-radius:var(--r-karta);padding:16px 18px}
.panel+.panel{margin-top:var(--r2)}
.panel-tih{background:var(--panel-tih)}

.oznaka{display:block;font-size:11px;font-weight:600;letter-spacing:1px;
  text-transform:uppercase;color:var(--blijedo);margin-bottom:4px}
input,select,textarea{width:100%;background:#fff;border:1px solid var(--crta);
  padding:7px 9px;font:inherit;font-size:var(--f-tijelo);color:var(--tinta);
  outline:none;border-radius:var(--radius)}
input:focus,select:focus,textarea:focus{border-color:var(--teal);
  box-shadow:0 0 0 2px rgba(61,143,138,.15)}
input+.oznaka,select+.oznaka{margin-top:12px}

.tipka{display:inline-block;padding:8px 16px;font:inherit;font-size:13px;
  cursor:pointer;border:1px solid var(--tinta);background:#fff;color:var(--tinta);
  border-radius:var(--r-gumb)}
.tipka:hover{opacity:.85}
.tipka-glavna{background:var(--tinta);color:#fff}
.tipka-glavna.puna{width:100%}
.tipka-tiha{background:#fff;color:var(--blijedo);border-color:var(--crta)}

/* --- ULAZNI EKRAN: prijava i dobrodoslica (nalog ZZ 29.8.2026.) ---
   Raspored i mjere iz demoa tempo-ulaz-demo.html; grafika je PRAVA:
   znak iz _znak.html (isti kao favicon), wordmark u LogoFontu, PLAN B
   iz static/plan-b-logo.svg. Gornje trake nema, sve je u sredini. */
.ulaz-ekran main{flex-direction:column;align-items:center;
  justify-content:center;gap:18px;padding:40px 20px 26px}
/* KADENCA (popravak 29.8.2026.): krugovi poskakuju naizmjence, kvadrat
   miruje. Ide CSS animacijom na transformu, kao u ZZ-ovim demoima.
   ZASTO NE VISE JAVASCRIPTOM: prijasnja izvedba je mijenjala atribut cy i
   racunala da ga CSS prijelaz na geometrijskom svojstvu "prenese" - a taj
   se prijelaz guta cim ga preglednik uspori (pozadinska kartica, stednja
   energije), pa se atribut promijeni, a ekran ne pokaze nista. Transforma
   je usto jedino sto svi motori animiraju jednako. */
@keyframes kadenca{
  0%, 55%, 100%{transform:translateY(0)}
  25%{transform:translateY(-2.6px)}      /* 2,6 korisnickih jedinica */
}
.ulaz-ekran .znak-svg circle{animation:kadenca 1.1s ease-in-out infinite}
.ulaz-ekran .znak-svg circle:nth-of-type(2){animation-delay:.19s}
.ulaz-ekran .znak-svg circle:nth-of-type(3){animation-delay:.38s}
@media (prefers-reduced-motion:reduce){
  .ulaz-ekran .znak-svg circle{animation:none}
}

/* RASPORED B (presuda ZZ 29.8.2026., predlozak tempo-logo-raspored.html):
   znak lijevo, wordmark desno od njega, poravnat s DNOM donjih krugova.
   Dno SVG-a je ujedno dno krugova (cy 28 + r 7 = 35 = donji rub viewBoxa),
   pa align-items:flex-end pogadja tocno to; skok krugova ne pomice
   poravnanje jer overflow ne mijenja okvir elementa. */
.ulaz-marka{display:flex;align-items:flex-end;gap:20px}
.ulaz-marka .znak-svg{width:75px;height:75px}     /* demo: 2x34 + 7 razmak */
.ulaz-marka .znak-ime{font-size:56px;letter-spacing:14px;line-height:1;
  padding-left:14px;position:relative;top:2px}    /* odmak za zadnji razmak */
/* Kartica na ulazu stoji na papiru, bez druge kartice oko sebe. */
.ploca.ulaz-ploca{background:none;border:0;box-shadow:none;
  padding:0;width:min(440px,100%)}
/* Mjere kartice iz demoa - iste na prijavi i na dobrodoslici. Pozdrav i
   recenica smiju biti siri od kartice, kartica je uska i u sredini. */
.ulaz-ekran .prijava-omot{max-width:440px}
.ulaz-ekran .pozdrav{margin:0;font-size:19px}
.ulaz-ekran .pozdrav .ime{color:var(--teal)}
.ulaz-ekran .recenica{margin:6px 0 0;text-align:center;
  font-size:13px;color:var(--tiha)}
.ulaz-ekran .greska{max-width:170px;margin:0 auto var(--r2)}
.ulaz-ekran .prijava-card{max-width:170px;margin:18px auto 0;padding:10px 12px}
.ulaz-ekran .prijava-card h2{margin:0 0 6px;font-size:13px}
.ulaz-ekran .prijava-card .oznaka{font-size:9.5px;letter-spacing:.6px;
  margin-bottom:2px}
.ulaz-ekran .prijava-card input,
.ulaz-ekran .prijava-card select{font-size:13px;padding:3px 7px}
.ulaz-ekran .prijava-card input+.oznaka,
.ulaz-ekran .prijava-card select+.oznaka,
.ulaz-ekran .prijava-card .lozinka-omot+.oznaka{margin-top:5px}
.ulaz-ekran .prijava-card p{margin:0}
.ulaz-ekran .prijava-card .tipka-glavna.puna,
.ulaz-ekran .prijava-card .tipka-tiha.puna{font-size:13px;padding:5px;
  margin-top:4px}
.ulaz-ekran .prijava-card .oko{width:27px;height:27px;flex:0 0 27px;
  padding:0;display:grid;place-items:center}
.ulaz-ekran .prijava-card .oko .ikona{width:14px;height:14px}
.ulaz-ekran .pomoc{margin-top:18px}
.ulaz-ekran .jezik button{font-size:11px;padding:3px 10px}
/* Slogan: dio marke, jednojezicno englesko, s crtama lijevo i desno. */
.slogan{display:flex;align-items:center;justify-content:center;gap:16px;
  margin:2px 0 0;font-size:12px;font-weight:600;letter-spacing:9px;
  text-transform:uppercase;color:var(--tinta);opacity:.62;white-space:nowrap}
.slogan::before,.slogan::after{content:"";height:1.5px;width:54px;
  background:currentColor;opacity:.7}

/* --- BIB: prijava je startni broj (demo tempo-bib-kvadrat.html, "s") ---
   Kvadrat 130x130, trake gore i dolje, rupice za pribadace u kutovima,
   e-mail gore (omotnica je pozadina polja), cetiri kucice za PIN, a gumb
   je medalja dolje desno. Mjere su iz demoa; grafika je prava. */
.bib{position:relative;width:130px;height:130px;background:#fff;
  border-radius:3px;overflow:hidden;box-shadow:0 2px 8px rgba(43,43,40,.12);
  display:flex;flex-direction:column;margin:0 auto}
.bib-traka{flex:none;height:9px;background:var(--blijedo)}
.bib-rupa{position:absolute;width:6px;height:6px;border-radius:50%;z-index:4;
  background:var(--papir);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
.bib-rupa.gl{top:1.5px;left:7px} .bib-rupa.gd{top:1.5px;right:7px}
.bib-rupa.dl{bottom:1.5px;left:7px} .bib-rupa.dd{bottom:1.5px;right:7px}
.bib-tijelo{flex:1;padding:7px 8px 6px;display:flex;flex-direction:column;
  justify-content:space-between}
/* E-mail: bez oznake; omotnica je pozadinska slika polja (opacity .24). */
.bib-mail input{width:100%;text-align:center;font:inherit;font-size:13.5px;
  padding:3px 4px;border:1px solid transparent;border-radius:2px;
  color:var(--tinta);background-color:transparent;background-repeat:no-repeat;
  background-position:center;background-size:auto 88%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2b28' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='0.24'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2.5 6.5 12 13l9.5-6.5'/%3E%3C/svg%3E")}
/* Placeholdera nema (presuda ZZ 29.8.2026.) - prazno polje ostaje prazno,
   a kuverta u pozadini kaze cemu sluzi. Pravilo za ::placeholder je zato
   maknuto; ne stoji prazno. */
.bib-mail input:focus{outline:none;border-color:var(--crta);background-color:#fff;
  box-shadow:none}
/* Polje koje je zaustavilo slanje (prazan e-mail, prazna kucica) dobiva
   vidljiv rub - inace odbijenica preglednika prodje neprimijeceno, jer
   e-mail na bibu nema ni oznaku ni placeholder. Klasu vjesa sifra.js. */
.bib-mail input.nevaljano,
.bib-znam input.nevaljano{border-color:var(--naranca);
  box-shadow:0 0 0 2px rgba(217,138,95,.18)}
.bib-mail input.nevaljano{background-color:#fff}
/* Crtkana crta izmedju e-maila i znamenki - kratka, iznad sredine reda. */
.bib-crtica{height:0;width:49px;margin:3px auto 4px;
  border-top:1px dashed var(--crta)}
/* Cetiri kucice; jedna znamenka po kucici. Padding + negativna margina
   povecavaju POGODNU ZONU reda (klik malo iznad, ispod ili u razmak i
   dalje pogadja kucicu, vidi sifra.js), a da se nista ne pomakne. */
.bib-znam{display:flex;gap:3px;justify-content:center;
  padding:4px 5px;margin:-4px -5px}
.bib-znam input{width:23px;height:29px;padding:0;text-align:center;
  font:inherit;font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;
  color:var(--tinta);background:#fff;border:1px solid var(--crta);
  border-radius:2px}
.bib-znam input:focus{outline:none;border-color:var(--teal);
  box-shadow:0 0 0 2px rgba(61,143,138,.18)}
/* Iste kucice na dobrodoslici, samo ulijevo i s razmakom nad njima. */
.bib-znam.uz-kucice{justify-content:flex-start;margin:0 0 4px}
/* Gumb je medalja: vrpca pa zlatni krug sa znakom TEMPO u bijelom.
   Od 29.8.2026. stoji u SREDINI dna, ne desno (presuda ZZ). */
.bib-dno{display:flex;justify-content:center}
.bib-medalja-blok{display:flex;flex-direction:column;align-items:center}
.bib-vrpca{width:9px;height:7px;margin-bottom:-2px;background:var(--blijedo);
  z-index:1;clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%)}
.bib-medalja{position:relative;width:22px;height:22px;padding:0;border:none;
  border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:linear-gradient(145deg,#d9b45c,#b58f36);
  box-shadow:0 2px 5px rgba(43,43,40,.22)}
.bib-medalja::after{content:"";position:absolute;inset:3px;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.bib-medalja:hover{opacity:.9}
.bib-znak{display:grid;grid-template-columns:3px 3px;grid-template-rows:3px 3px;
  gap:1.5px}
.bib-znak i{display:block;width:3px;height:3px;border-radius:50%;background:#fff}
.bib-znak i:first-child{border-radius:1px}
/* Oznaka koja postoji samo za citac ekrana. */
.skriveno{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}

/* =====================================================================
   MALI EKRANI - SAMO ULAZ (prijava i dobrodoslica), prag 480 px.
   Presuda ZZ 29.8.2026. Iznad praga se ne mijenja NISTA, a aplikacija iza
   prijave se ne dira ni ispod njega (svi selektori idu kroz .ulaz-ekran
   ili .bib, kojih ondje nema).
   Bib NARASTE, ne smanjuje se: 23 px kucica je daleko ispod pravila o
   ~44 px meti za prst, pa na telefonu ide 200 px bib s kucicama 40 x 50.
   ===================================================================== */
@media (max-width:480px){
  .ulaz-ekran main{gap:14px;padding:28px 14px 20px}
  .ulaz-marka{gap:16px}
  .ulaz-marka .znak-svg{width:54px;height:54px}
  .ulaz-marka .znak-ime{font-size:36px;letter-spacing:8px;padding-left:8px;
    top:1px}
  /* Crte se skrivaju i nowrap pada: sa crtama i nowrapom slogan je 552 px
     i gura vodoravni skrol na svakom telefonu. */
  .ulaz-ekran .slogan{font-size:10.5px;letter-spacing:5px;gap:10px;
    white-space:normal;text-align:center;line-height:1.6;margin-top:0}
  .ulaz-ekran .slogan::before,
  .ulaz-ekran .slogan::after{display:none}

  .bib{width:200px;height:200px}
  .bib-traka{height:14px}
  .bib-rupa{width:8px;height:8px}
  .bib-rupa.gl,.bib-rupa.gd{top:3px} .bib-rupa.dl,.bib-rupa.dd{bottom:3px}
  .bib-tijelo{padding:11px 12px 9px}
  .bib-mail input{font-size:15px;padding:5px 6px}
  .bib-crtica{width:75px;margin:5px auto 6px}
  .bib-znam{gap:5px}
  .bib-znam input{width:40px;height:50px;font-size:28px}
  .bib-vrpca{width:14px;height:11px}
  .bib-medalja{width:36px;height:36px}
  .bib-znak{grid-template-columns:5px 5px;grid-template-rows:5px 5px;gap:2px}
  .bib-znak i{width:5px;height:5px}

  /* Dobrodoslica: tri retka kucica od 40 px ne stanu u karticu od 170. */
  .ulaz-ekran .prijava-omot{max-width:300px}
  .ulaz-ekran .prijava-card{max-width:300px;padding:12px 14px}
  .ulaz-ekran .prijava-card h2{font-size:15px;margin-bottom:8px}
  .ulaz-ekran .prijava-card .oznaka{font-size:11px;margin-bottom:4px}
  .ulaz-ekran .prijava-card .tipka-glavna.puna,
  .ulaz-ekran .prijava-card .tipka-tiha.puna{font-size:15px;padding:9px}
  .ulaz-ekran .pozdrav{font-size:18px}
  .ulaz-ekran .recenica{font-size:12.5px}

  .ulaz-podnozje{padding:18px 14px 16px}
  .ulaz-podnozje .prijava-plan-b{width:110px}
}

/* --- prijava (doslovno iz etalona) --- */
.prijava-omot{max-width:360px;margin:0 auto}
.prijava-recenica{color:var(--tiha);text-align:center;margin:0 0 var(--r2)}
.prijava-card p{margin:16px 0 0}
.pomoc{font-size:var(--f-sitno);color:var(--tiha);margin:10px 0 0;text-align:center}
.greska{background:var(--naglasak-tlo);border:1px solid var(--naglasak);
  color:var(--tinta);border-radius:var(--radius);padding:9px 11px;
  font-size:var(--f-sitno);margin:0 0 var(--r2)}

/* --- podnozje --- */
.prozor-podnozje{flex:0 0 auto;padding:var(--r) var(--r3) 16px;
  border-top:1px solid var(--okvir);text-align:center;background:var(--papir);
  font-size:var(--f-sitno);color:var(--tiha)}
.prijava-plan-b{display:block;width:118px;height:auto;margin:10px auto 0}
/* Podnozje ulaza: tanka linija (nasljedjuje se) pa PLAN B vecji i u
   sredini. Bez retka s inacicom - izbacen presudom ZZ 29.8.2026. */
.ulaz-podnozje{padding:22px 20px 20px;display:flex;flex-direction:column;
  align-items:center}
.ulaz-podnozje .prijava-plan-b{width:110px;margin:0}   /* 150 -> 110, 29.8.2026. */

/* --- tablice (nalog S, 29.8.2026.) ---
   Brojevi desno i tabularnim znamenkama, tekst lijevo; zaglavlje kao
   oznaka polja; zebra vrlo blaga, hover jaci. */
table.popis{width:100%;border-collapse:collapse;font-size:var(--f-sitno);
  font-variant-numeric:tabular-nums}
table.popis th{text-align:left;font-size:11px;letter-spacing:1px;
  text-transform:uppercase;color:var(--blijedo);font-weight:600;
  border-bottom:2px solid var(--crta);padding:7px 8px}
table.popis td{border-bottom:1px solid var(--crta);padding:7px 8px}
table.popis th.broj,table.popis td.broj{text-align:right}
table.popis tr:nth-child(even) td{background:rgba(43,43,40,.025)}
table.popis tr:hover td{background:rgba(43,43,40,.055)}
/* Sitni hint ispod kartice odabira: jedan po kartici, ne uz svako polje. */
.hint-filtra{margin:8px 0 0;font-size:11.5px;font-weight:300;font-style:italic;
  color:var(--blijedo)}

/* --- prazan ekran (korak 1: sadrzaj jos ne postoji) --- */
.jos-nema{border:1px dashed var(--okvir);border-radius:var(--radius);
  padding:26px 18px;text-align:center;color:var(--tiha);background:var(--panel-tih)}
.jos-nema code{font-size:var(--f-sitno);color:var(--tinta)}

/* --- korak 2: admin --- */
.obavijest{background:var(--zelena-tlo);border:1px solid var(--zelena);
  border-radius:var(--radius);padding:9px 11px;font-size:var(--f-sitno);
  margin:0 0 var(--r2)}
.tiho{color:var(--tiha)}
.mreza{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:var(--r2);align-items:end}
.mreza .na-dnu{display:flex;align-items:flex-end}
form.uz-red{display:inline-flex;gap:6px;align-items:center;margin:0 6px 0 0}
form.uz-red input.usko{width:130px}
form.uz-red select{width:auto;min-width:96px;padding:5px 8px;font-size:var(--f-sitno)}
td.radnje{white-space:nowrap}

/* --- dobrodoslica --- */
.kvacica{display:inline-flex;align-items:center;gap:4px;font-size:var(--f-sitno);color:var(--tiha);white-space:nowrap}
.kvacica input{width:auto}
.prijava-card h2{margin-top:0;font-size:15px}
h1.sredina{text-align:center}
.pomoc.lijevo{text-align:left}

/* =====================================================================
   KORAK 4 - ekran VIDI
   Graf uzima punu sirinu ploce; ploca je na ovom ekranu siroka do ruba.
   Visina crtaceg dijela je 230 px, pa na 1080p stanu filtar i DVA
   prozora bez okomitog skrola, a na 1366x768 isto dva.
   ===================================================================== */
.ploca.siroka{width:min(1900px,100%);padding:0;background:none;
  border:0;box-shadow:none}

.filtar{padding:16px 18px 14px}
.filtar-red{display:flex;flex-wrap:wrap;gap:16px 20px;align-items:end}
.filtar-red label,.filtar-red .polje{display:flex;flex-direction:column;gap:2px}
.filtar-red .oznaka{margin:0 0 4px}
.filtar-red select,.filtar-red input{padding:7px 9px;font-size:var(--f-tijelo);
  min-width:120px}
.filtar-red input[type=date]{min-width:140px}
.filtar-red .usko-polje input,.par input{min-width:70px;width:70px}
.par{display:flex;gap:6px;align-items:center}
.par .crtica{color:var(--blijedo)}
.filtar-gumbi{display:flex;gap:8px;align-items:end;margin-left:auto}
.sitno{font-size:var(--f-sitno)}
/* "Filtar obuhvaca N" ide ispod tanke isprekidane crte */
#filtar-sazetak,.obuhvat{margin:10px 0 0;padding-top:10px;
  border-top:1px dashed var(--crta);font-size:13px;color:var(--blijedo)}
/* Jedna napomena na dnu stranice - ne crveni tekst ispod svakog grafa */
.napomena{font-size:11.5px;font-weight:300;font-style:italic;color:var(--blijedo);
  padding:4px 2px 0;margin:var(--r2) 0 0}

.prozori{display:flex;flex-wrap:wrap;gap:var(--r2);margin-top:var(--r2)}
.prozor{background:var(--karta);border:1px solid var(--crta);
  border-radius:var(--r-karta);padding:16px 18px 10px;flex:1 1 100%;min-width:0}
.prozor.pola{flex:1 1 calc(50% - var(--r2))}
@media (max-width:1100px){.prozor.pola{flex:1 1 100%}}

.prozor-vrh{display:flex;justify-content:space-between;align-items:center;
  gap:10px;flex-wrap:wrap;margin-bottom:4px}
.prozor-metrike{display:flex;gap:12px;flex-wrap:wrap;font-size:14px;font-weight:600}
.legenda{display:inline-flex;align-items:center;gap:7px;color:var(--tinta)}
.legenda i{width:10px;height:10px;border-radius:3px;display:inline-block}
.prozor-alati{display:flex;gap:5px;align-items:center;position:relative}
.prozor-alati .tipka{padding:4px 10px;font-size:12px;
  border-color:var(--crta);color:var(--blijedo);background:#fff}
.prozor-sazetak{margin:4px 0 0}

.graf-omot{width:100%}
svg.graf{width:100%;height:230px;display:block}
svg.graf .os{stroke:var(--tinta);stroke-width:1}
svg.graf .mreza{stroke:#e6e0d2;stroke-width:1}
svg.graf .oznaka-os{font-size:11px;fill:var(--tiha)}
svg.graf .kursor{stroke:var(--naglasak);stroke-width:1;stroke-dasharray:3 3}
svg.graf .kursor-opis{font-size:11px;fill:var(--tinta)}

/* Droplista metrika lebdi PREKO sadrzaja i ne gura raspored. */
.birac{position:relative}
.birac-ploca{position:absolute;right:0;top:calc(100% + 4px);z-index:30;
  background:var(--panel);border:1px solid var(--okvir);
  border-radius:var(--radius);box-shadow:var(--sjena);padding:8px 10px;
  min-width:250px;max-height:60vh;overflow:auto}
.birac-skupina{font-size:var(--f-oznaka);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tiha);margin:8px 0 3px}
.birac-skupina:first-child{margin-top:0}
.birac-stavka{display:flex;align-items:center;gap:6px;font-size:var(--f-sitno);
  padding:2px 0;cursor:pointer}
.birac-stavka input{width:auto}

/* Laptop 1366x768: filtar i dva prozora moraju stati bez okomitog skrola.
   Graf se snizuje, filtar i razmaci se stisnu. Provjereno mjerenjem. */
@media (max-width:1500px){
  .ploca.siroka{padding:12px 12px 14px}
  .ploca.siroka h1{font-size:17px;margin-bottom:8px}
  .filtar{padding:10px 12px}
  .filtar-red{gap:8px 12px}
  .filtar-red select,.filtar-red input{padding:5px 7px;min-width:104px;
    font-size:var(--f-sitno)}
  .filtar-red input[type=date]{min-width:126px}
  .filtar-red .usko-polje input,.par input{min-width:62px;width:62px}
  #filtar-sazetak{margin-top:5px}
  .prozori{gap:8px;margin-top:8px}
  .prozor{padding:10px 12px 6px}
  svg.graf{height:164px}
  .prozor-sazetak{margin-top:2px}
}

/* --- korak 5: USPOREDI, SESIJA, TENISICE --- */
.siroki-izbor{min-width:340px}
i.tocka{width:9px;height:9px;border-radius:50%;display:inline-block;
  margin-right:5px;vertical-align:middle}
tr.hodni-red td{color:var(--tiha);font-style:italic}
.kartice{display:flex;flex-wrap:wrap;gap:var(--r2)}
.kartica{flex:1 1 460px;min-width:0}
.kartica h2{margin-top:0}
.mreza.uz-vrh{margin-top:var(--r2);padding-top:var(--r2);
  border-top:1px solid var(--crta)}
@media (max-width:1500px){.siroki-izbor{min-width:260px}}

/* Oznaka sumnjive sesije: ne skriva podatak, samo ga oznacava. */
.oznaka-sumnjiva{display:inline-block;font-size:var(--f-oznaka);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--crvena);
  background:var(--naglasak-tlo);border:1px solid var(--naglasak);
  border-radius:3px;padding:1px 5px;white-space:nowrap}

/* --- sazetak unosa: prvo ljudska recenica, tablica tek ispod --- */
.sazetak-unosa{border:1px solid var(--okvir);border-radius:var(--radius);
  background:var(--panel);box-shadow:0 6px 18px rgba(46,42,36,.08);
  padding:14px 16px;margin:0 0 var(--r2)}
.sazetak-unosa p{margin:0 0 6px}
.sazetak-unosa p:last-child{margin-bottom:0}
.s-glavno{font-size:15px}
.s-uredu{color:var(--tinta);border-left:3px solid var(--zelena);padding-left:9px}
.s-pozor{color:var(--tinta);border-left:3px solid var(--naglasak);padding-left:9px}

/* --- tijek unosa --- */
#u-tijek{margin-top:var(--r2)}
#u-traka{width:100%;height:14px}
#u-ispis{margin:6px 0 0;font-size:var(--f-sitno);color:var(--tiha)}

/* Filtar na VIDI ide u DVA reda; drugi red je odmaknut crtom. */
.filtar .filtar-red + .filtar-red{margin-top:8px;padding-top:8px;
  border-top:1px solid var(--crta)}

/* --- ekran DIONICE: biraci uz graf, naslov i imena linija u SVG-u --- */
.prozor-birac{display:flex;gap:16px;align-items:end;flex-wrap:wrap}
.prozor-birac .oznaka{margin:0 0 4px}
.prozor-birac select{min-width:150px;padding:6px 8px;font-size:var(--f-tijelo)}
label.uz-graf{display:flex;flex-direction:column}
svg.graf .graf-naslov{font-size:13px;font-weight:600;fill:var(--tinta)}
svg.graf .graf-broj{font-size:13px;font-weight:600;fill:var(--tinta)}
svg.graf .graf-ime{font-size:12px;font-weight:600}
#prozori .prozor .graf{height:260px}
@media (max-width:1500px){#prozori .prozor .graf{height:200px}}

/* --- modalni dijalog (nalog 29.8.2026.): karta, crta, radius 8 --- */
.dijalog-sloj{position:fixed;inset:0;z-index:100;display:flex;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(43,43,40,.35)}
.dijalog{background:var(--karta);border:1px solid var(--crta);
  border-radius:var(--r-karta);box-shadow:var(--sjena);
  padding:20px 22px 16px;max-width:520px;width:100%}
.dijalog-naslov{font-size:16px;font-weight:700;margin:0 0 8px}
.dijalog-tekst{margin:0;line-height:1.5;white-space:pre-line}
.dijalog-gumbi{margin:16px 0 0;display:flex;justify-content:flex-end}

/* --- DIONICE: visi panel i sitna polja uz graf --- */
#prozori .prozor.visok .graf{height:420px}
@media (max-width:1500px){#prozori .prozor.visok .graf{height:340px}}
.prozor-birac input.usko-y{min-width:64px;width:64px;padding:6px 8px}
.prozor-birac .kvacica{white-space:nowrap}
svg.graf .procjena{stroke-dasharray:7 5;opacity:.45}

/* --- gumb s ikonom (nalog T, 29.8.2026.): fotoaparat umjesto natpisa --- */
.tipka-ikona{padding:4px 8px;line-height:0;color:var(--blijedo)}
.tipka-ikona:hover{color:var(--tinta)}
.tipka-ikona .ikona{width:17px;height:17px;display:block;fill:none;
  stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
/* Sitne crtice na x-osi: stoje na svakoj dionici, ispisuju se samo
   odabrane oznake. */
svg.graf .crtica{stroke:#cfc7b6;stroke-width:1}

/* --- plocica s ocitanjem (nalog Y, 29.8.2026.) --- */
.plocica{position:fixed;z-index:120;pointer-events:none;white-space:pre-line;
  background:var(--karta);border:1px solid var(--crta);border-radius:5px;
  box-shadow:0 4px 14px rgba(43,43,40,.14);padding:6px 9px;font-size:13px;
  color:var(--tinta);max-width:280px}

/* --- 2) brojcana polja bez spinner strelica (datalist ih zamjenjuje) --- */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* --- 7) odjeljak spremljenih pogleda, odvojen od filtara --- */
.pogledi{display:flex;align-items:end;gap:8px;margin:10px 0 0;
  padding-top:10px;border-top:1px dashed var(--crta)}
.pogledi .polje{display:flex;flex-direction:column;gap:2px}
.pogledi .oznaka{margin:0 0 4px}

/* --- vlastita ponuda uz polje (zamjena za native datalist) --- */
.ponuda-strelica{border:1px solid var(--crta);background:#fff;color:var(--blijedo);
  border-radius:var(--radius);cursor:pointer;font:inherit;font-size:11px;
  line-height:1;padding:6px 5px;margin-left:-2px}
.ponuda-strelica:hover{color:var(--tinta)}
.ponuda-ploca{position:fixed;z-index:130;background:var(--karta);
  border:1px solid var(--crta);border-radius:var(--radius);
  box-shadow:0 8px 22px rgba(43,43,40,.16);padding:4px;max-height:50vh;
  overflow:auto}
.ponuda-stavka{display:block;width:100%;text-align:left;border:0;
  background:transparent;font:inherit;font-size:13px;color:var(--tinta);
  padding:5px 9px;border-radius:4px;cursor:pointer;white-space:nowrap}
.ponuda-stavka:hover{background:rgba(43,43,40,.06)}

/* --- polja za lozinku: oko i "Generiraj" uz polje --- */
.lozinka-omot{display:flex;align-items:center;gap:6px}
.lozinka-omot input{flex:1 1 auto;min-width:0}
.lozinka-omot .oko.ukljucen{color:var(--teal)}

/* Zadnji backup na ADMIN ekranu (nalog BACKUP-VIDLJIVOST-1, 18.9.2026.).
   Boja je jedini nosilac hitnosti, pa uz nju ide i deblje pismo - da se
   vidi i na zaslonu na kojem se boje slabo razlikuju. */
.backup-redak{margin:.2rem 0 1rem;font-variant-numeric:tabular-nums}
.backup-ok{color:var(--blijedo)}
.backup-star{color:var(--naranca);font-weight:600}
.backup-kritican{color:var(--crvena);font-weight:700}
.backup-nema{color:var(--crvena);font-weight:700}