/* ============================================================================
   VRstudio — dizajn-sistem
   ----------------------------------------------------------------------------
   Jedan alat koji se koristi 45 minuta svakog radnog dana. Zato: miran,
   gust, visoke citljivosti. Boja nosi ZNACENJE (ocena, tezina, status),
   nikad ukras.

   PRAVILA OVOG FAJLA — ne krsiti:
   1. Svaka klasa se definise TACNO JEDNOM. Nema dopisivanja na dno.
   2. Nema magicnih brojeva. Sve mere dolaze iz tokena ispod.
   3. Komponenta zna sva svoja stanja: mirno / lebdi / fokus / aktivno /
      onemoguceno / prazno / u toku / greska.
   4. Brojevi su uvek tabularni — kolone moraju da se poklapaju.

   SADRZAJ
     1. Tokeni
     2. Osnova
     3. Raspored
     4. Tipografija
     5. Karta
     6. Brojke
     7. Dugmad
     8. Polja
     9. Tabele
    10. Oznake i tezine
    11. Poruke (info/uspeh/pazi/greska)
    12. Prazna stanja
    13. Napredak i merac
    14. Koraci
    15. Ocene (krug, tacka, oblasti)
    16. Nalazi
    17. Razgovor
    18. Snimci ekrana
    19. Ekran za unos kontakata
    20. Ekran za odobravanje mejlova
    21. Kontrolni skup
    22. Pomocno
    23. Uzi ekrani
   ========================================================================== */

/* ─────────────────────────── 1. TOKENI ─────────────────────────── */
:root{
  /* --- neutralna skala --- */
  --n0:#ffffff;
  --n25:#fafbfc;
  --n50:#f5f6f8;
  --n100:#eceef1;
  --n200:#dfe3e8;
  --n300:#c9cfd7;
  --n400:#9aa3af;
  --n500:#6b7480;
  --n600:#4d5661;
  --n700:#374049;
  --n800:#232a32;
  --n900:#141a20;

  /* --- tamna strana (levi meni) --- */
  --meni-poz:#0f1621;
  --meni-linija:#1e2833;
  --meni-tekst:#a9b4c2;
  --meni-jako:#ffffff;
  --meni-grupa:#5d6b7d;
  --meni-lebdi:#1a2432;

  /* --- znacenjske boje --- */
  --plava:#2563eb;      --plava-jaka:#1d4ed8;  --plava-bleda:#eff4ff;  --plava-linija:#c3d7fe;
  --zelena:#15803d;     --zelena-jaka:#166534; --zelena-bleda:#effaf3; --zelena-linija:#bce7cd;
  --zuta:#b45309;       --zuta-jaka:#92400e;   --zuta-bleda:#fff8ec;   --zuta-linija:#f4dcae;
  --crvena:#b91c1c;     --crvena-jaka:#991b1b; --crvena-bleda:#fef4f4; --crvena-linija:#f3c9c9;

  /* --- semanticke uloge --- */
  --tekst:var(--n900);
  --tekst-tih:var(--n500);
  --tekst-tisi:var(--n400);
  --linija:var(--n200);
  --linija-tanka:var(--n100);
  --pozadina:var(--n50);
  --povrsina:var(--n0);
  --povrsina-tiha:var(--n25);

  /* --- razmaci (jedina dozvoljena skala) --- */
  --r1:4px; --r2:8px; --r3:12px; --r4:16px; --r5:24px; --r6:32px; --r7:48px;

  /* --- tipografija --- */
  --pismo:"Segoe UI",-apple-system,system-ui,Roboto,Arial,sans-serif;
  --pismo-kod:"Cascadia Mono",Consolas,"Courier New",monospace;
  --t-xs:11px; --t-s:12px; --t-m:13px; --t-b:14px; --t-v:16px;
  --t-n3:18px; --t-n2:22px; --t-n1:26px; --t-broj:30px;

  /* --- oblik --- */
  --ug-s:6px; --ug-m:8px; --ug-v:12px; --ug-pun:999px;

  /* --- dubina --- */
  --senka-1:0 1px 2px rgba(16,24,40,.05);
  --senka-2:0 4px 12px -2px rgba(16,24,40,.10), 0 2px 4px -2px rgba(16,24,40,.06);
  --senka-3:0 12px 28px -6px rgba(16,24,40,.16);
  --prsten:0 0 0 3px rgba(37,99,235,.18);

  /* --- mere rasporeda --- */
  --meni-sirina:236px;
  --radno-max:1160px;
}

/* ─────────────────────────── 2. OSNOVA ─────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--pismo);
  font-size:var(--t-b);
  line-height:1.55;
  color:var(--tekst);
  background:var(--pozadina);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--plava);text-underline-offset:2px;}
a:hover{color:var(--plava-jaka);}
img{max-width:100%;}
code{
  font-family:var(--pismo-kod);font-size:.92em;
  background:var(--n100);color:var(--n700);
  padding:1px 5px;border-radius:var(--ug-s);
}
:focus-visible{outline:2px solid var(--plava);outline-offset:2px;}
::selection{background:#bfd4fd;}

/* Brojevi se uvek poravnavaju u kolonu. `td.broj` je pokriven sa `.broj`. */
.broj,.brojka b,.merac-tekst,.ocena-znak{font-variant-numeric:tabular-nums;}

/* ────────────────────────── 3. RASPORED ────────────────────────── */
.aplikacija{display:flex;min-height:100vh;align-items:stretch;}

.meni{
  width:var(--meni-sirina);flex:0 0 var(--meni-sirina);
  background:var(--meni-poz);color:var(--meni-tekst);
  padding:var(--r5) 0 var(--r6);
  display:flex;flex-direction:column;gap:2px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.meni .logo{
  padding:0 var(--r5) var(--r4);margin-bottom:var(--r3);
  border-bottom:1px solid var(--meni-linija);
  color:var(--meni-jako);font-size:var(--t-v);font-weight:650;letter-spacing:-.01em;
}
.meni .logo small{
  display:block;margin-top:3px;
  font-size:var(--t-xs);font-weight:400;color:var(--meni-grupa);letter-spacing:0;
}
.meni .grupa{
  padding:var(--r4) var(--r5) var(--r1);
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--meni-grupa);
}
.meni a{
  display:flex;align-items:center;justify-content:space-between;gap:var(--r2);
  margin:0 var(--r3);padding:7px var(--r3);
  color:var(--meni-tekst);text-decoration:none;
  font-size:var(--t-m);border-radius:var(--ug-s);
  transition:background .12s,color .12s;
}
.meni a:hover{background:var(--meni-lebdi);color:var(--meni-jako);}
.meni a.aktivan{background:var(--plava);color:#fff;font-weight:600;}
.meni a b{
  min-width:20px;text-align:center;
  background:var(--meni-lebdi);color:var(--meni-tekst);
  border-radius:var(--ug-pun);padding:0 6px;font-size:var(--t-xs);font-weight:600;
}
.meni a.aktivan b{background:rgba(255,255,255,.22);color:#fff;}

.radno{
  flex:1;min-width:0;
  padding:var(--r5) var(--r6) var(--r7);
  max-width:var(--radno-max);
}

/* zaglavlje strane */
.vrh{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:var(--r5);margin-bottom:var(--r5);
}
.vrh-desno{flex:0 0 auto;text-align:right;}

/* lebdeca traka na dnu ekrana */
.lebdi{
  position:sticky;bottom:0;z-index:5;
  margin:var(--r5) calc(-1 * var(--r6)) calc(-1 * var(--r7));
  padding:var(--r3) var(--r6);
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border-top:1px solid var(--linija);
  display:flex;justify-content:space-between;align-items:center;gap:var(--r4);
}

/* ───────────────────────── 4. TIPOGRAFIJA ───────────────────────── */
h1{font-size:var(--t-n1);font-weight:650;letter-spacing:-.02em;margin:0 0 var(--r1);line-height:1.2;}
h2{font-size:var(--t-n3);font-weight:650;letter-spacing:-.01em;margin:0 0 var(--r3);line-height:1.3;}
h3{font-size:var(--t-v);font-weight:650;margin:0 0 var(--r2);}
p{margin:0 0 var(--r3);}
p:last-child{margin-bottom:0;}

.podnaslov{color:var(--tekst-tih);font-size:var(--t-b);max-width:78ch;}
.sitno{color:var(--tekst-tih);font-size:var(--t-m);}
.jos-sitnije{color:var(--tekst-tisi);font-size:var(--t-s);}

/* Naslov odeljka IZNAD tabele ili grupe. Namerno se razlikuje od
   zaglavlja kolone (`th`) — ranije su izgledali isto pa se nije videlo
   sta je naslov a sta kolona. */
.odeljak{
  display:flex;align-items:baseline;gap:var(--r2);
  margin:var(--r6) 0 var(--r3);
}
.odeljak h2{margin:0;}
.odeljak .sitno{margin-left:auto;}
.odeljak-prvi{margin-top:var(--r5);}

kbd{
  display:inline-block;min-width:20px;text-align:center;
  font-family:var(--pismo);font-size:var(--t-s);font-weight:650;line-height:18px;
  color:var(--n700);background:var(--n0);
  border:1px solid var(--n300);border-bottom-width:2px;border-radius:var(--ug-s);
  padding:0 5px;
}

/* ─────────────────────────── 5. KARTA ─────────────────────────── */
.karta{
  background:var(--povrsina);
  border:1px solid var(--linija);
  border-radius:var(--ug-v);
  box-shadow:var(--senka-1);
  padding:var(--r4) var(--r5);
  margin-bottom:var(--r4);
}
.karta:last-child{margin-bottom:0;}
.karta-tesna{padding:var(--r3) var(--r4);}
.karta-prazna{padding:0;overflow:hidden;}   /* kad karta sadrzi samo tabelu */

/* karta sa radnjom desno */
.karta-red{
  display:flex;align-items:center;justify-content:space-between;gap:var(--r5);
}
.karta-red>div:first-child{min-width:0;}

/* istaknuta karta — poziv na sledeci korak */
.karta-poziv{
  border-color:var(--plava-linija);
  background:linear-gradient(180deg,var(--plava-bleda),var(--povrsina) 70%);
}

/* ────────────────────────── 6. BROJKE ────────────────────────── */
.redovi2,.redovi3,.redovi4{display:grid;gap:var(--r3);margin-bottom:var(--r4);}
.redovi2{grid-template-columns:repeat(2,1fr);}
.redovi3{grid-template-columns:repeat(3,1fr);}
.redovi4{grid-template-columns:repeat(4,1fr);}

.brojka{
  background:var(--povrsina);border:1px solid var(--linija);
  border-radius:var(--ug-v);box-shadow:var(--senka-1);
  padding:var(--r4) var(--r4) var(--r3);
}
.brojka b{
  display:block;
  font-size:var(--t-broj);font-weight:650;line-height:1.1;letter-spacing:-.02em;
  color:var(--tekst);
}
.brojka span{
  display:block;margin-top:var(--r1);
  font-size:var(--t-m);color:var(--tekst-tih);
}
/* jedinica stoji U REDU sa brojem — `.brojka span` je blok, pa se mora vratiti */
.brojka b .jedinica{
  display:inline;font-size:var(--t-n3);font-weight:600;color:var(--tekst-tih);
}
.brojka.nema b{color:var(--n400);}
.brojka.dobro b{color:var(--zelena);}
.brojka.pazi  b{color:var(--zuta);}
.brojka.lose  b{color:var(--crvena);}

/* ────────────────────────── 7. DUGMAD ────────────────────────── */
.dugme{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:var(--pismo);font-size:var(--t-m);font-weight:600;line-height:1;
  padding:9px var(--r4);min-height:36px;
  border:1px solid transparent;border-radius:var(--ug-m);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .12s,border-color .12s,box-shadow .12s,color .12s;
}
.dugme:hover{text-decoration:none;}
.dugme:active{transform:translateY(.5px);}
.dugme:disabled,.dugme[disabled],.dugme[aria-disabled="true"]{
  opacity:.45;cursor:not-allowed;transform:none;
}

/* glavno — jedno po ekranu */
.d-glavno{background:var(--plava);color:#fff;box-shadow:var(--senka-1);}
.d-glavno:hover{background:var(--plava-jaka);color:#fff;}

/* potvrda / odobravanje */
.d-zeleno{background:var(--zelena);color:#fff;box-shadow:var(--senka-1);}
.d-zeleno:hover{background:var(--zelena-jaka);color:#fff;}

/* nepovratno */
.d-crveno{background:var(--crvena);color:#fff;box-shadow:var(--senka-1);}
.d-crveno:hover{background:var(--crvena-jaka);color:#fff;}

/* sporedno */
.d-belo{background:var(--povrsina);color:var(--n700);border-color:var(--n300);box-shadow:var(--senka-1);}
.d-belo:hover{background:var(--n50);border-color:var(--n400);color:var(--n800);}

/* trece po redu */
.d-tiho{background:transparent;color:var(--tekst-tih);}
.d-tiho:hover{background:var(--n100);color:var(--n800);}

/* velicine */
.d-veliko{font-size:var(--t-v);padding:13px var(--r5);min-height:46px;border-radius:var(--ug-v);}
.d-malo{font-size:var(--t-s);padding:5px 10px;min-height:28px;border-radius:var(--ug-s);}

.dugmici{display:flex;flex-wrap:wrap;gap:var(--r2);align-items:center;}
.dugmici form{margin:0;}

/* cip — filter ili predlog, nikad glavna radnja */
.cip-dugme{
  display:inline-flex;align-items:center;
  background:var(--n0);border:1px solid var(--n300);color:var(--n600);
  border-radius:var(--ug-pun);padding:4px 12px;
  font-family:var(--pismo);font-size:var(--t-s);font-weight:500;
  cursor:pointer;transition:background .12s,border-color .12s,color .12s;
}
.cip-dugme:hover{background:var(--n50);border-color:var(--n400);color:var(--n800);}

/* ─────────────────────────── 8. POLJA ─────────────────────────── */
.polje{
  width:100%;font-family:var(--pismo);font-size:var(--t-b);line-height:1.5;
  color:var(--tekst);background:var(--povrsina);
  padding:8px var(--r3);
  border:1px solid var(--n300);border-radius:var(--ug-m);
  transition:border-color .12s,box-shadow .12s;
}
.polje::placeholder{color:var(--tekst-tisi);}
.polje:hover{border-color:var(--n400);}
.polje:focus{outline:none;border-color:var(--plava);box-shadow:var(--prsten);}
.polje:disabled{background:var(--n50);color:var(--tekst-tisi);cursor:not-allowed;}
textarea.polje{font-family:var(--pismo);resize:vertical;min-height:96px;}

.natpis{
  display:block;margin-bottom:var(--r1);
  font-size:var(--t-s);font-weight:600;color:var(--n600);
}
.natpis .uz{font-weight:400;color:var(--tekst-tisi);}
.pomoc{margin-top:var(--r1);font-size:var(--t-s);color:var(--tekst-tih);}
.polje-greska{border-color:var(--crvena);}
.polje-greska:focus{box-shadow:0 0 0 3px rgba(185,28,28,.15);}
.greska-polja{margin-top:var(--r1);font-size:var(--t-s);color:var(--crvena);font-weight:500;}

/* red forme: polja + dugme u istoj liniji, dugme se ne lomi */
.forma-red{display:flex;flex-wrap:wrap;gap:var(--r2);align-items:flex-start;}
.forma-red .polje{flex:1;min-width:180px;width:auto;}
.forma-red .dugme{flex:0 0 auto;}

/* ────────────────────────── 9. TABELE ────────────────────────── */
.okvir-tabele{
  background:var(--povrsina);border:1px solid var(--linija);
  border-radius:var(--ug-v);box-shadow:var(--senka-1);
  overflow:hidden;margin-bottom:var(--r4);
}
.okvir-tabele>table{margin:0;}
.okvir-prelom{overflow-x:auto;}

table{width:100%;border-collapse:collapse;font-size:var(--t-m);}
th{
  text-align:left;vertical-align:bottom;
  padding:10px var(--r4) 9px;
  background:var(--povrsina-tiha);border-bottom:1px solid var(--linija);
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tekst-tisi);white-space:nowrap;
}
td{
  padding:11px var(--r4);vertical-align:middle;
  border-top:1px solid var(--linija-tanka);
}
tbody tr:first-child td{border-top:0;}
th:first-child,td:first-child{padding-left:var(--r5);}
th:last-child,td:last-child{padding-right:var(--r5);}

/* red koji vodi negde */
tbody tr.klik:hover td{background:var(--povrsina-tiha);}

/* red-naslov grupe unutar tabele */
tr.grupa td{
  background:var(--n100);border-top:1px solid var(--linija);
  padding:6px var(--r5);
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--n600);
}

/* broj u celiji — NIKAD .brojka (to je velika kartica) */
td.broj{font-variant-numeric:tabular-nums;font-weight:650;color:var(--tekst);white-space:nowrap;}
td.desno,th.desno{text-align:right;}

/* Dugacak naziv se skracuje trotackom, ne secenjem u sablonu.
   `.skrati` radi samo ako je celija OGRANICENA. U tabeli sa automatskim
   rasporedom celija raste do sirine teksta i tabela pobegne izvan okvira —
   zato `.stisni` (max-width:0) ili `table-layout:fixed`. */
.naziv{font-weight:600;color:var(--tekst);}
.skrati{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
td.stisni{max-width:0;}

/* Red bez podataka. NAMERNO se ne zove `.prazno` — to je blok-komponenta
   (odeljak 12) i unutar celije bi nacrtala okvir preko tabele. */
td.prazno-red{
  padding:var(--r5);text-align:center;
  color:var(--tekst-tih);font-size:var(--t-m);
}

/* ─────────────────── 10. OZNAKE I TEZINE ─────────────────── */
.oznaka{
  display:inline-flex;align-items:center;
  border-radius:var(--ug-s);padding:2px 8px;
  font-size:var(--t-s);font-weight:600;line-height:18px;white-space:nowrap;
  background:var(--n100);color:var(--n600);
}
.o-plava {background:var(--plava-bleda); color:var(--plava-jaka);}
.o-zelena{background:var(--zelena-bleda);color:var(--zelena-jaka);}
.o-zuta  {background:var(--zuta-bleda);  color:var(--zuta-jaka);}
.o-crvena{background:var(--crvena-bleda);color:var(--crvena-jaka);}
.o-siva  {background:var(--n100);        color:var(--n600);}
.o-obris {background:transparent;border:1px solid var(--n300);color:var(--n600);}

/* tezina nalaza: 3 ozbiljno · 2 primetno · 1 sitnica · 0 pohvala */
.tez{
  flex:0 0 auto;border-radius:var(--ug-s);padding:1px 7px;
  font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  white-space:nowrap;line-height:18px;
}
.t3{background:var(--crvena-bleda);color:var(--crvena-jaka);}
.t2{background:var(--zuta-bleda);  color:var(--zuta-jaka);}
.t1{background:var(--n100);        color:var(--n600);}
.t0{background:var(--zelena-bleda);color:var(--zelena-jaka);}

/* ────────────────────── 11. PORUKE ────────────────────── */
/* Jedna komponenta, cetiri tona. Zamenjuje raniji .info/.napomena/
   .greska-red/.radi-traka koji su se medjusobno gazili. */
.poruka{
  display:flex;gap:var(--r3);align-items:flex-start;
  border:1px solid var(--linija);border-left-width:3px;
  border-radius:var(--ug-m);
  padding:var(--r3) var(--r4);
  margin-bottom:var(--r4);
  font-size:var(--t-m);line-height:1.6;
  background:var(--povrsina-tiha);color:var(--n700);
}
.poruka p{margin-bottom:var(--r2);}
.poruka>.znak{flex:0 0 auto;font-size:var(--t-v);line-height:1.35;}
.poruka>div{min-width:0;}
.poruka .dugmici{margin-top:var(--r2);}

.p-info {background:var(--plava-bleda); border-color:var(--plava-linija); color:#1e3a8a;}
.p-uspeh{background:var(--zelena-bleda);border-color:var(--zelena-linija);color:var(--zelena-jaka);}
.p-pazi {background:var(--zuta-bleda);  border-color:var(--zuta-linija);  color:var(--zuta-jaka);}
.p-greska{background:var(--crvena-bleda);border-color:var(--crvena-linija);color:var(--crvena-jaka);}
.p-info code,.p-pazi code,.p-greska code,.p-uspeh code{background:rgba(255,255,255,.7);}

/* traka „posao radi" */
.p-radi{background:var(--plava-bleda);border-color:var(--plava-linija);color:#1e3a8a;}
.p-radi .znak{
  width:16px;height:16px;margin-top:3px;border-radius:50%;
  border:2px solid var(--plava-linija);border-top-color:var(--plava);
  animation:vrti .7s linear infinite;
}
@keyframes vrti{to{transform:rotate(360deg);}}

/* ──────────────────── 12. PRAZNA STANJA ──────────────────── */
.prazno{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--r2);
  background:var(--povrsina);border:1px dashed var(--n300);
  border-radius:var(--ug-v);
  padding:var(--r7) var(--r5);
  margin-bottom:var(--r4);
}
.prazno .znak{
  width:44px;height:44px;margin-bottom:var(--r1);
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--n100);color:var(--n400);font-size:var(--t-n2);
}
.prazno h2{margin:0;font-size:var(--t-v);}
.prazno p{max-width:52ch;color:var(--tekst-tih);font-size:var(--t-m);margin:0;}
.prazno .dugmici{margin-top:var(--r3);justify-content:center;}

/* gotovo — posao je zavrsen, nije greska */
.prazno-gotovo{border-style:solid;border-color:var(--zelena-linija);background:var(--zelena-bleda);}
.prazno-gotovo .znak{background:#d6f0e0;color:var(--zelena);}
.prazno-gotovo p{color:var(--zelena-jaka);}

/* ─────────────────── 13. NAPREDAK I MERAC ─────────────────── */
.traka{
  height:6px;background:var(--n200);border-radius:var(--ug-pun);
  overflow:hidden;min-width:160px;
}
.traka i{display:block;height:100%;background:var(--zelena);border-radius:var(--ug-pun);
  transition:width .3s ease;}
.traka.plava i{background:var(--plava);}

.merac{display:flex;gap:var(--r3);align-items:center;}
.merac .traka{flex:1;}
.merac-tekst{font-size:var(--t-m);color:var(--tekst-tih);white-space:nowrap;}
.merac-tekst b{color:var(--tekst);}
.merac.pazi .traka i{background:var(--zuta);}
.merac.opasno .traka i{background:var(--crvena);}

/* ────────────────────────── 14. KORACI ────────────────────────── */
.koraci{
  display:flex;flex-wrap:wrap;gap:var(--r1);align-items:center;
  margin-bottom:var(--r4);
}
.koraci span{
  padding:4px 12px;border-radius:var(--ug-pun);
  font-size:var(--t-s);font-weight:500;color:var(--tekst-tih);
  background:var(--n100);white-space:nowrap;
}
.koraci span.zavrsen{background:var(--zelena-bleda);color:var(--zelena-jaka);}
.koraci span.sad{background:var(--plava);color:#fff;font-weight:650;}

/* ────────────────────────── 15. OCENE ────────────────────────── */
.krug{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;flex:0 0 auto;
  font-size:var(--t-n2);font-weight:700;color:#fff;
  font-variant-numeric:tabular-nums;
}
.tacka{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  font-size:var(--t-s);font-weight:700;color:#fff;
  font-variant-numeric:tabular-nums;
}
.k-dobro  {background:var(--zelena);}
.k-srednje{background:var(--zuta);}
.k-lose   {background:var(--crvena);}
.k-nema   {background:var(--n200);color:var(--n500);}

/* ocene po oblastima */
.oblasti{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--r3) var(--r5);margin-top:var(--r4);
}
.oblast{font-size:var(--t-s);color:var(--tekst-tih);}
.oblast .ime{
  display:flex;justify-content:space-between;gap:var(--r2);margin-bottom:3px;
}
.oblast .ime b{color:var(--tekst);font-variant-numeric:tabular-nums;}

/* ────────────────────────── 16. NALAZI ────────────────────────── */
.nalaz{
  display:flex;gap:var(--r3);align-items:flex-start;
  padding:var(--r3) 0;border-top:1px solid var(--linija-tanka);
  font-size:var(--t-m);
}
.nalaz:first-of-type{border-top:0;padding-top:var(--r1);}
.nalaz>div{min-width:0;}
.nalaz .opis{font-weight:600;color:var(--tekst);}
.nalaz .dokaz{display:block;margin-top:2px;color:var(--tekst-tih);font-size:var(--t-s);}
.nalaz .preporuka{display:block;margin-top:2px;color:var(--plava-jaka);font-size:var(--t-s);}

details{margin-top:var(--r4);border-top:1px solid var(--linija-tanka);padding-top:var(--r3);}
summary{cursor:pointer;font-size:var(--t-m);color:var(--tekst-tih);}
summary:hover{color:var(--tekst);}
details[open] summary{margin-bottom:var(--r2);}

/* ───────────────────────── 17. RAZGOVOR ───────────────────────── */
.razgovor{display:flex;flex-direction:column;gap:var(--r3);margin-bottom:var(--r4);}
.mehur{
  max-width:82%;padding:10px var(--r4);
  border-radius:var(--ug-v);font-size:var(--t-m);line-height:1.6;
}
.mehur.ja{
  align-self:flex-end;background:var(--plava);color:#fff;
  border-bottom-right-radius:var(--ug-s);
}
.mehur.sistem{
  align-self:flex-start;max-width:92%;
  background:var(--povrsina-tiha);border:1px solid var(--linija);
  border-bottom-left-radius:var(--ug-s);
}
.mehur-vrh{display:flex;gap:var(--r2);align-items:center;margin-bottom:var(--r2);}
.mehur-tekst{white-space:pre-wrap;}
.mehur.kuca{color:var(--tekst-tih);font-style:italic;background:transparent;border-style:dashed;}
/* uputstvo bez odgovora — sitna sistemska beleska, ne prazan mehur */
.beleska{
  align-self:center;font-size:var(--t-s);color:var(--tekst-tisi);
  background:var(--n100);border-radius:var(--ug-pun);padding:2px 12px;
}

.predlozi{display:flex;flex-wrap:wrap;gap:var(--r1);margin-top:var(--r2);}

/* ──────────────────── 18. SNIMCI EKRANA ──────────────────── */
.snimci{display:flex;gap:var(--r4);align-items:flex-start;flex-wrap:wrap;}
.snimci figure{margin:0;flex:1 1 320px;min-width:0;}
.snimci figure.telefon{flex:0 0 220px;}
.snimci img{
  width:100%;display:block;
  border:1px solid var(--linija);border-radius:var(--ug-m);
  max-height:440px;object-fit:cover;object-position:top;
  background:var(--n100);
}
.snimci figcaption{margin-top:var(--r2);font-size:var(--t-s);color:var(--tekst-tih);}

/* ─────────────── 19. EKRAN ZA UNOS KONTAKATA ─────────────── */
/* Fiksni raspored: kolone drze zadatu sirinu, a naziv firme se skracuje
   trotackom umesto da razvuce tabelu izvan okvira. */
.tabela-unos{table-layout:fixed;}
.tabela-unos td{padding:9px var(--r3);}
.tabela-unos th{padding:10px var(--r3) 9px;}
.tabela-unos th:first-child,.tabela-unos td:first-child{padding-left:var(--r4);}
.tabela-unos th:last-child,.tabela-unos td:last-child{padding-right:var(--r4);}

tr.red td{transition:background .12s;}
tr.red.aktivan td{background:var(--plava-bleda);}
tr.red.aktivan td:first-child{box-shadow:inset 3px 0 0 var(--plava);}
tr.red.gotov td,tr.red.preskocen td{color:var(--tekst-tih);background:var(--povrsina-tiha);}
tr.red.gotov .naziv,tr.red.preskocen .naziv{font-weight:500;color:var(--tekst-tih);}

.c-oznaka{width:26px;text-align:center;color:var(--zelena);font-weight:700;}
tr.red.preskocen .c-oznaka{color:var(--tekst-tisi);}
.c-ocena{width:54px;}
.c-trazi{width:74px;white-space:nowrap;}
.c-email{width:270px;}
.c-sajt{width:224px;}
.c-email .polje{font-size:var(--t-m);padding:7px 10px;}

.detalj{display:none;margin-top:2px;font-size:var(--t-s);color:var(--tekst-tih);}
tr.red.aktivan .detalj{display:block;}

.ocena-znak{
  display:inline-block;min-width:30px;text-align:center;
  background:var(--n800);color:#fff;border-radius:var(--ug-s);
  padding:2px 7px;font-size:var(--t-s);font-weight:700;
}
.ikonica{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;
  border:1px solid var(--n300);background:var(--povrsina);border-radius:var(--ug-s);
  text-decoration:none;font-size:var(--t-m);cursor:pointer;color:var(--n600);
}
.ikonica:hover{background:var(--n50);border-color:var(--n400);color:var(--n800);}
.ikonica svg{
  width:15px;height:15px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}

.predlog{font-size:var(--t-s);color:var(--tekst-tih);line-height:1.45;display:block;}
.predlog b{color:var(--tekst);}
.predlog em{font-style:normal;color:var(--plava-jaka);font-weight:600;}
.predlog.ima b{color:var(--zelena-jaka);}
.predlog.nema b{color:var(--crvena-jaka);}

.izbor{display:flex;gap:var(--r1);margin-top:var(--r1);}
.izbor .dugme{padding:5px 9px;min-height:28px;font-size:var(--t-s);}
.b-nema{background:var(--zelena);color:#fff;}
.b-nema:hover{background:var(--zelena-jaka);color:#fff;}
.b-ima{background:var(--plava);color:#fff;}
.b-ima:hover{background:var(--plava-jaka);color:#fff;}
.b-presk{background:var(--n100);color:var(--n600);}
.b-presk:hover{background:var(--n200);color:var(--n800);}
.izbor .dugme.predlozen{box-shadow:0 0 0 3px rgba(37,99,235,.35);}

.cip{
  display:inline-block;margin-top:var(--r1);
  background:var(--n100);color:var(--n600);border-radius:var(--ug-s);
  padding:1px 7px;font-size:var(--t-s);
}
.precice{
  display:flex;flex-wrap:wrap;gap:var(--r1) var(--r3);align-items:center;
  color:var(--tekst-tih);font-size:var(--t-s);
}
.precice-dno{
  margin:0;padding:var(--r3) var(--r5);
  border-top:1px solid var(--linija-tanka);background:var(--povrsina-tiha);
}

/* ──────────── 20. EKRAN ZA ODOBRAVANJE MEJLOVA ──────────── */
.mejl{
  display:grid;grid-template-columns:minmax(0,1fr) 340px;
  gap:0;
  background:var(--povrsina);border:1px solid var(--linija);
  border-radius:var(--ug-v);box-shadow:var(--senka-2);
  /* `clip` a NE `hidden`: `hidden` pravi okvir za skrolovanje i time gasi
     `position:sticky` na traci sa dugmadima ispod. Secenje uglova je isto. */
  overflow:clip;
}
.mejl-glava{
  grid-column:1 / -1;
  display:flex;justify-content:space-between;align-items:flex-start;gap:var(--r4);
  padding:var(--r4) var(--r5);
  border-bottom:1px solid var(--linija);background:var(--povrsina-tiha);
}
.mejl-telo{padding:var(--r5);min-width:0;}
.mejl-telo .natpis{margin-top:var(--r4);}
.mejl-telo .natpis:first-child{margin-top:0;}
.mejl-telo textarea.polje{min-height:190px;font-size:var(--t-b);line-height:1.65;}
.mejl-dokaz{
  padding:var(--r5) var(--r5) var(--r5) var(--r4);
  background:var(--povrsina-tiha);border-left:1px solid var(--linija);
  min-width:0;
}
/* Traka sa odlukom je zalepljena za dno ekrana dok je kartica visa od njega.
   Bez toga dugmad A/E/R/S padnu ispod donje ivice kod duzeg mejla, a to je
   jedina radnja zbog koje se ovaj ekran uopste otvara. */
.mejl-dno{
  grid-column:1 / -1;
  position:sticky;bottom:0;z-index:5;
  display:flex;flex-wrap:wrap;gap:var(--r2);align-items:center;
  padding:var(--r3) var(--r5);
  border-top:1px solid var(--linija);background:var(--povrsina-tiha);
}
.mejl-dno .razmak{margin-left:auto;}
.razlozi{
  grid-column:1 / -1;
  display:flex;flex-wrap:wrap;gap:var(--r2);align-items:center;
  padding:var(--r3) var(--r5);
  background:var(--crvena-bleda);border-top:1px solid var(--crvena-linija);
}
.razlozi>.sitno{color:var(--crvena-jaka);font-weight:600;width:100%;}
.snimak-mali{
  width:100%;max-width:150px;display:block;margin-top:var(--r2);
  border:1px solid var(--linija);border-radius:var(--ug-s);
}

/* Traka iznad mejla: zasto ovo nije prva verzija. Stoji preko cele sirine,
   izmedju zaglavlja i teksta, jer se cita PRE nego sto se odlucuje. */
.trag{
  grid-column:1 / -1;
  display:flex;flex-wrap:wrap;gap:var(--r2);align-items:center;
  padding:var(--r2) var(--r5);
  background:var(--zuta-bleda);border-bottom:1px solid var(--zuta-linija);
  font-size:var(--t-m);color:var(--zuta-jaka);
}

/* ─────────── 20b. RANIJE VERZIJE MEJLA I EKRAN ODBIJENIH ─────────── */
/* Stara verzija se prikazuje kao citat: uzi red, tisi ton, tekst kakav
   jeste (bez preloma u sablonu). Ista komponenta sluzi i pored mejla u
   odobravanju i na ekranu odbijenih — jedno mesto, jedan izgled. */
.stara{
  margin-top:var(--r3);padding:var(--r3) var(--r4);
  background:var(--povrsina-tiha);border:1px solid var(--linija-tanka);
  border-radius:var(--ug-m);
}
.stara-vrh{
  display:flex;flex-wrap:wrap;gap:var(--r2);align-items:center;
  margin-bottom:var(--r2);font-size:var(--t-m);color:var(--tekst-tih);
}
.stara-tekst{
  white-space:pre-wrap;font-size:var(--t-m);line-height:1.6;
  color:var(--tekst-tih);
}

.odbijen{border-left:3px solid var(--crvena);}
.odbijen-vrh{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:var(--r4);flex-wrap:wrap;margin-bottom:var(--r3);
}
.odbijen-vrh>div:first-child{min-width:0;flex:1 1 260px;}

/* ────────────────────── 21. KONTROLNI SKUP ────────────────────── */
.varijante{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--r3);margin-top:var(--r3);}
.varijanta{
  display:flex;flex-direction:column;gap:var(--r2);
  border:1px solid var(--linija);border-radius:var(--ug-m);
  padding:var(--r4);background:var(--povrsina-tiha);
}
.varijanta.zlatna{border-color:var(--zelena-linija);background:var(--zelena-bleda);}
.varijanta p{font-size:var(--t-m);line-height:1.6;white-space:pre-wrap;flex:1;margin:0;}
.varijanta form{margin-top:auto;}

/* ────────────────────────── 22. POMOCNO ────────────────────────── */
.htmx-indicator{display:none;}
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{display:inline-flex;}
[hidden]{display:none !important;}
.samo-citac{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}

/* ───────────────────────── 23. UZI EKRANI ───────────────────────── */
@media (max-width:1180px){
  /* Tabela unosa je `table-layout:fixed` i na užem prozoru gnječi kolonu sa
     imenom firme u jednu reč po redu („Ostali / završni / radovi / , / 667,9M").
     Nađeno gledanjem ekrana na 800 px. Umesto gnječenja, tabela zadržava
     najmanju upotrebljivu širinu i pomera se unutar svog okvira — sadržaj
     ostaje čitljiv, a stranica se ne pomera vodoravno. */
  .okvir-tabele{overflow-x:auto;}
  .tabela-unos{min-width:900px;}
  .mejl{grid-template-columns:1fr;}
  .mejl-dokaz{border-left:0;border-top:1px solid var(--linija);}
  .varijante{grid-template-columns:1fr;}
  .redovi4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  .aplikacija{flex-direction:column;}
  .meni{width:auto;flex:0 0 auto;height:auto;position:static;
    flex-direction:row;flex-wrap:wrap;padding:var(--r3);}
  .meni .logo,.meni .grupa{display:none;}
  .radno{padding:var(--r4) var(--r4) var(--r6);}
  .lebdi{margin-left:calc(-1 * var(--r4));margin-right:calc(-1 * var(--r4));
    padding-left:var(--r4);padding-right:var(--r4);}
  .redovi3,.redovi4{grid-template-columns:repeat(2,1fr);}
}

/* ── PRIJAVA ─────────────────────────────────────────────────────────
   Jedina strana bez bočnog menija: dok se čovek ne prijavi, ne sme da vidi
   ni brojače, jer i oni odaju stanje posla. */
.prijava-ekran{min-height:100vh;display:flex;align-items:center;
  justify-content:center;padding:var(--r4);background:var(--pozadina);}
.prijava-karta{width:100%;max-width:360px;display:flex;flex-direction:column;
  gap:var(--r3);text-align:center;}
.prijava-karta h1{margin:0;}
.prijava-karta .dugme{justify-content:center;}

/* ── TELEFON ─────────────────────────────────────────────────────────
   Odobravanje mejlova je jedini posao koji se stvarno radi sa telefona:
   deset minuta dnevno, dva dugmeta, palcem. Zato na uskom ekranu red sa
   radnjama ide na dno prozora i ostaje tamo dok se čita mejl — inače se
   posle svakog mejla mora skrolovati do kraja da bi se stiglo do dugmadi.

   Odobri i Odbaci zauzimaju po pola širine i visoki su 52 px: to je mera
   koju palac pogađa bez gledanja. Sačuvaj izmenu i Preskoči idu u drugi
   red, jer se sa telefona koriste retko. */
@media (max-width:640px){
  .redovi3,.redovi4{grid-template-columns:1fr;}
  /* Legenda tastaturnih prečica nema smisla na telefonu, a gura naslov u
     kolonu od jedne reči. Nađeno gledanjem ekrana na 375 px, ne u kodu. */
  .precice,.precice-dno{display:none;}
  /* Kartica mejla je na računaru dvokolonska (tekst + bočni panel „na čemu
     mejl stoji"), sa fiksnih 340 px za panel. Na telefonu ta druga kolona
     gura karticu preko ekrana i seče tekst mejla s desne strane — nađeno
     gledanjem ekrana na 375 px. Na telefonu ide jedna ispod druge. */
  .mejl{grid-template-columns:minmax(0,1fr);max-width:100%;}
  /* NAPOMENA (06.08.2026): tabela unosa se na telefonu pomera vodoravno i ime
     firme sklizne van ekrana. Pokušaj da se prva kolona zalepi uz levu ivicu
     je PROBAN I VRAĆEN — ime nije u prvoj ćeliji, pa je zalepljena kolona
     ostajala prazna, što je gore od pomeranja.
     Unos kontakata je posao za računar (tastatura, lepljenje adresa); telefon
     služi za odobravanje mejlova, koje je prilagođeno. Ako unos ikad zatreba
     na telefonu, rešenje nije zalepljena kolona nego drugi raspored: jedna
     firma po kartici umesto reda u tabeli. */
  .vrh{flex-direction:column;align-items:flex-start;gap:var(--r2);}
  .vrh-desno{text-align:left;}
  .mejl-dno{position:sticky;bottom:0;z-index:5;
    display:grid;grid-template-columns:1fr 1fr;gap:var(--r2);
    /* Bez negativnih margina: sa njima traka bude šira od ekrana i pravi
       vodoravno pomeranje, što je na telefonu najgori mogući kvar. */
    padding:var(--r3) 0;margin:0;box-sizing:border-box;max-width:100%;
    background:var(--pozadina);border-top:1px solid var(--ivica);}
  .mejl-dno .dugme{min-height:52px;font-size:1rem;justify-content:center;}
  .mejl-dno .dugme kbd{display:none;}   /* tastatura ne postoji na telefonu */
  .mejl-dno .razmak{margin:0;}
}