/* DPX konzola -- jedan stil, bez zavisnosti.
   Paleta je uzeta iz brendiranja aplikacije (docs/branding.md): tamnoplava i cijan. */

:root {
  --papir: #f5f7fa; --karta: #ffffff; --mastilo: #131722; --tiho: #5a6273; --jos-tise: #8a92a3;
  --linija: #dfe4ec; --linija-tanka: #eef1f6;
  --plava: #012a6b; --plava-bleda: #eef2f9; --cijan: #0190d4;
  --zelena: #1f8a4c; --zelena-bleda: #edf6f0;
  --crvena: #b23b23; --crvena-bleda: #fbeeea;
  --zuta: #9a6b12; --zuta-bleda: #fdf5e4;
  --f: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--papir); color: var(--mastilo); font: 15px/1.5 var(--f); }
a { color: var(--plava); }
h1 { font-size: 24px; margin: 0 0 4px; }
h2 { font-size: 15px; margin: 32px 0 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--tiho); }
main { max-width: 1080px; margin: 0 auto; padding: 24px 20px 64px; }
.tiho { color: var(--tiho); }
.s { display: block; font-size: 12px; color: var(--jos-tise); }
code { background: var(--plava-bleda); padding: 1px 5px; border-radius: 4px; font-size: 13px; }

/* traka */
.traka { display: flex; align-items: center; gap: 20px; background: var(--plava); color: #fff; padding: 10px 20px; }
.traka .znak { color: #fff; text-decoration: none; font-weight: 700; letter-spacing: .04em; }
.traka .znak span { font-weight: 400; opacity: .75; }
.traka nav { display: flex; gap: 4px; margin-left: 12px; }
.traka nav a { color: #fff; opacity: .75; text-decoration: none; padding: 6px 12px; border-radius: 7px; font-size: 14px; }
.traka nav a:hover { opacity: 1; background: rgba(255,255,255,.1); }
.traka nav a.tekuca { opacity: 1; background: rgba(255,255,255,.18); font-weight: 600; }
.traka .odjava { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.traka .ko { font-size: 13px; opacity: .8; }
.traka button { background: rgba(255,255,255,.15); color: #fff; border: 0; padding: 6px 12px; border-radius: 7px; cursor: pointer; font: inherit; font-size: 13px; }
.traka button:hover { background: rgba(255,255,255,.25); }

/* prijava */
.prijava-strana { min-height: 100vh; display: grid; place-items: center; background: var(--plava); padding: 20px; }
.prijava { background: var(--karta); padding: 28px; border-radius: 12px; width: 100%; max-width: 360px; box-shadow: 0 18px 40px rgba(0,0,0,.2); }
.prijava h1 { color: var(--plava); }
.prijava h1 span { font-weight: 400; opacity: .7; }
.prijava label { display: block; margin: 16px 0 0; font-size: 13px; color: var(--tiho); }
.prijava input { display: block; width: 100%; margin-top: 5px; padding: 10px 12px; border: 1px solid var(--linija); border-radius: 8px; font: inherit; }
.prijava button { width: 100%; margin-top: 20px; }

/* vrh strane */
.vrh { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.vrh .radnje { margin-left: auto; display: flex; gap: 8px; }
.vrh .broj { color: var(--jos-tise); font-weight: 400; }
.nazad { margin: 0 0 6px; font-size: 13px; }

/* ---- gde sam i gde je kraj (07.10.2026) ----
   Do ovog dana nista u konzoli nije bilo lepljivo: posle prvog skrola nestajali su tabovi,
   ime kupca na kartici i nazivi kolona (Dnevnik je 14 ekrana). Sada na sirokom ekranu stoje:
   gornja traka, zaglavlje kartice i zaglavlje tabele. Na telefonu je navigacija ionako dole,
   a lepljivo zaglavlje bi pojelo trecinu ekrana -- tamo se ne lepi nista novo.

   `--traka-v` je visina gornje trake; zaglavlja ispod nje se lepe na tu visinu. */
:root { --traka-v: 62px; }
/* Ispod 900 px traka dobija vece mete (v. blok 900 px) -- izmereno 65 px. */
@media (min-width: 641px) and (max-width: 900px) { :root { --traka-v: 65px; } }
@media (min-width: 641px) {
  .traka { position: sticky; top: 0; z-index: 20; min-height: var(--traka-v); }
  .kartica-glava { position: sticky; top: var(--traka-v); z-index: 15; }
  [id] { scroll-margin-top: calc(var(--traka-v) + 120px); }
}
.kartica-glava { background: var(--papir); margin: -24px -20px 18px; padding: 14px 20px 0;
  border-bottom: 1px solid var(--linija); }
.kartica-naslov { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.kartica-naslov h1 { margin: 0; }
.kartica-naslov .adresa-kartice { font-size: 13px; color: var(--jos-tise); overflow-wrap: anywhere; }
.kartica-naslov .uz-stanje { margin-left: auto; }
.kartica-naslov .uz-stanje button { padding: 6px 12px; font-size: 13px; }
nav.delovi { display: flex; gap: 2px; margin-top: 10px; flex-wrap: wrap; }
nav.delovi a { padding: 8px 12px; color: var(--tiho); text-decoration: none; font-size: 14px;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
nav.delovi a:hover { color: var(--mastilo); }
nav.delovi a.tekuci { color: var(--plava); font-weight: 600; border-bottom-color: var(--plava); }
nav.delovi .broj { color: var(--jos-tise); font-weight: 400; font-size: 12px; }
nav.delovi .tacka { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--zuta); margin-left: 5px; vertical-align: 2px; }
/* AI pomocnik: znak ✦ i JEDNA ljubicasta, ista kao u CRM-u (dashboard
   visits-forms-reminders.css, `.ai-dugme`: #6b4fd8 / #5a3fc4). Dejan 07.10.2026: svuda tako. */
:root { --ai: #6b4fd8; --ai-tamno: #5a3fc4; }
.ai-znak { color: var(--ai); }
h2.ai-naslov { color: var(--ai); }
nav.delovi a.deo-ai { color: var(--ai); }
nav.delovi a.deo-ai:hover { color: var(--ai-tamno); }
nav.delovi a.deo-ai.tekuci { color: var(--ai); border-bottom-color: var(--ai); }
/* Isti tabovi na strani (Naplata: Licence / AI) -- razmak do pretrage ispod. */
nav.delovi-strane { margin: 0 0 14px; border-bottom: 1px solid var(--linija); }
.glavno.ai-dugme { background: var(--ai); border-color: var(--ai); }
.glavno.ai-dugme:hover { background: var(--ai-tamno); border-color: var(--ai-tamno); }
/* AI paket, drugi korak (08.10.2026): zahtev firme za dopunu, spisak dopuna i zakazanih promena
   sa po jednim malim obrascem u redu (prikazi/instalacija.php, radnja `ai-radnja`). */
.poruka.ai-zahtev-blok { background: rgba(107, 79, 216, 0.08); border-left-color: var(--ai); }
.ai-radnja-obrazac { display: inline; margin: 0; }
/* Tab „AI pomoćnik" kao kartica AI pomoći u B2B portalu (13.10.2026): zahtev na vrhu, redovi sa
   svojim dugmetom, mesec sa četiri pločice. Klase prate portal (super-ai-*), bez prefiksa. */
.ai-kljuc { margin-bottom: 12px; }
.ai-zahtev { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px;
  margin-bottom: 12px; padding: 10px 14px; border: 1px solid var(--zuta); border-radius: 9px; background: var(--zuta-bleda); }
.ai-zahtev > span:first-child, .ai-dva > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.ai-zahtev small, .ai-stavka small { font-size: 12.5px; }
.ai-redovi { display: grid; margin-bottom: 14px; background: var(--karta); border: 1px solid var(--linija); border-radius: 10px; padding: 0 16px; }
.ai-stavka { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--linija); font-size: 14px; }
.ai-stavka:last-child { border-bottom: 0; }
.ai-dva { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.ai-dugmad { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.ai-dugmad input[inputmode="decimal"] { width: 90px; text-align: right; }
.ai-dugmad input, .ai-dugmad select { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--linija); border-radius: 6px; }
.ai-mesec-naslov { margin: 6px 0 8px; font-size: 16px; }
.ai-plocice { margin-bottom: 12px; }
.ai-plocice .plocica > .tiho { display: block; font-size: 12.5px; }
.ai-znacka-da { background: rgba(107, 79, 216, 0.12); color: var(--ai); }
.ai-drugi-iznos > summary { cursor: pointer; font-size: 12px; padding: 4px 9px; border: 1px solid var(--linija); border-radius: 8px; list-style: none; }
.ai-drugi-iznos > summary::-webkit-details-marker { display: none; }
.ai-drugi-iznos[open] > summary { margin-bottom: 6px; }
.ai-citanje { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 6px 0 20px; }
.ai-spisak { margin: 0 0 12px; }
.ai-spisak .k { display: block; margin-bottom: 4px; }
.ai-spisak-red { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
  padding: 6px 0; border-bottom: 1px solid var(--linija, #e5e7eb); }
.ai-spisak-red > span { min-width: 0; overflow-wrap: anywhere; }
/* Na šta se troši (21.10.2026): posao i korisnik jedan pored drugog, pa dani. Tabela dana ima
   kolonu po poslu i ume da bude šira od okvira -- zato ZADRŽAVA vodoravni skrol i na velikom
   ekranu (osnovni `.tabela-omot` tamo prelazi na `clip` i odsekao bi kolone), a zaglavlje joj se
   ne lepi: lepljivo zaglavlje u skrolujućem omotaču lepi se za omotač, ne za stranu. */
.ai-trosi-filter input[type="text"] { font: inherit; font-size: 14px; padding: 7px 10px; border: 1px solid var(--linija); border-radius: 8px; }
.ai-trosi-brzo { align-self: center; font-size: 13px; }
.ai-trosi-dve { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin: 8px 0 14px; }
table.ai-trosi td, table.ai-trosi th { padding: 7px 10px; }
table.ai-trosi .ai-iznos { text-align: right; white-space: nowrap; }
table.ai-trosi tr.tekuci td { background: rgba(107, 79, 216, 0.08); }
.ai-trosi-dani { margin: 4px 0 8px; font-size: 14px; }
.tabela-omot.ai-trosi-skrol { overflow-x: auto; margin-bottom: 6px; }
.tabela-omot.ai-trosi-skrol th { position: static; }

/* Dnevnik: filter i strane (07.10.2026). Broj uz naslov je tih, kao na ostalim ekranima. */
h1 .broj { color: var(--jos-tise); font-weight: 400; }
.dnevnik-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin: 0 0 14px; }
.dnevnik-filter label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--tiho);
  min-width: 0; }
.dnevnik-filter select { font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--linija);
  border-radius: 8px; background: var(--karta); color: var(--mastilo); max-width: 320px; min-width: 0; }
.dnevnik-filter .ponisti { font-size: 13px; padding: 8px 0; }
.strane-dnevnika { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; }
.strane-dnevnika .koje { color: var(--tiho); font-size: 13px; margin-right: auto; }

/* Spisak kaze da je gotov. Bez ovoga se kraj tabele ne razlikuje od prekida. */
.kraj-spiska { text-align: center; color: var(--jos-tise); font-size: 13px; margin: 10px 0 0;
  padding-top: 8px; border-top: 1px dashed var(--linija); }

/* dugmad */
button, .dugme { font: inherit; font-size: 14px; padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--linija); background: var(--karta); color: var(--mastilo);
  cursor: pointer; text-decoration: none; display: inline-block; }
button:hover, .dugme:hover { border-color: var(--jos-tise); }
.glavno { background: var(--plava); border-color: var(--plava); color: #fff; font-weight: 600; }
.glavno:hover { background: #023a8f; border-color: #023a8f; }

/* poruke */
/* `overflow-wrap` nije ukras: poruka o gresci nosi ono sto je server rekao, a to ume da
   bude URL bez ijednog razmaka (`file_get_contents(http://.../api/license-activity...)`).
   Takav niz znakova se ne prelama sam, pa je 18.09.2026. na telefonu gurao celu stranu
   14 px preko ivice -- jedini preostali vodoravni skrol posle prelaska na kartice. */
.poruka { background: var(--zelena-bleda); border-left: 3px solid var(--zelena); padding: 10px 14px;
  border-radius: 0 8px 8px 0; margin: 0 0 18px; overflow-wrap: anywhere; }
.poruka.greska { background: var(--crvena-bleda); border-left-color: var(--crvena); }

/* plocice */
.plocice { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 20px; }
.plocica { background: var(--karta); border: 1px solid var(--linija); border-radius: 10px; padding: 12px 14px; }
.plocica .k { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--tiho); }
.plocica .v { display: block; font-size: 26px; font-weight: 700; line-height: 1.2; margin: 2px 0 1px; }
.plocica.pazi { background: var(--zuta-bleda); border-color: var(--zuta); }
.plocica.pazi .v { color: var(--zuta); }
.plocica.lose { background: var(--crvena-bleda); border-color: var(--crvena); }
.plocica.lose .v { color: var(--crvena); }

/* tabele */
.tabela-omot { overflow-x: auto; background: var(--karta); border: 1px solid var(--linija); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; }
/* BEZ `min-width`.
 *
 * Do 12.09.2026. je ovde stajalo `table.spisak { min-width: 1180px }`, a okvir je `main` sa
 * `max-width: 1080px` -- dakle tabela je po konstrukciji bila 140 px sira od prostora koji ima,
 * pa se `.tabela-omot` skrolovao na SVAKOM ekranu, i na 4K monitoru. Veci monitor nije mogao
 * da pomogne jer okvir ne raste.
 *
 * Pravo resenje nije bio siri okvir nego manje kolona: spisak je imao 14 kolona i odgovarao na
 * cetiri pitanja odjednom. Sada su cetiri ekrana sa po najvise 7 kolona i svaki staje.
 * `overflow-x: auto` na omotacu OSTAJE -- kao zastitna mreza za vrlo uzak prozor, ne kao
 * svakodnevno stanje. Branu drzi `tools/konzola-tabovi-test.js`. */
/* LEPLJIVO ZAGLAVLJE TABELE (07.10.2026) -- MORA da stoji POSLE osnovnog `.tabela-omot` iznad.
   Lepljiv element u skrolujucem omotacu se lepi za omotac, ne za stranu. Zato omotac od 1000 px
   prelazi na `overflow-x: clip` (ne pravi skrol, pa `sticky` gleda stranu). Prva verzija je
   stajala IZNAD osnovnog pravila iste specificnosti, pa je `auto` pobedio: zaglavlje se lepilo
   62 px niz omotac i prekrilo prvi red (Naplata, Isporuka na produkciji -- Dejan, 07.10.2026).
   Ispod 1000 px omotac zadrzava `auto` kao zastitnu mrezu. Brana: konzola-tabovi-test. */
@media (min-width: 1000px) {
  .tabela-omot { overflow-x: clip; }
  .tabela-omot th, table.dnevnik th { position: sticky; top: var(--traka-v); z-index: 1;
    background: var(--karta); }
}
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--tiho);
  padding: 10px 12px; border-bottom: 1px solid var(--linija); font-weight: 600; }
td { padding: 11px 12px; border-bottom: 1px solid var(--linija-tanka); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
.naziv { font-weight: 600; text-decoration: none; }
.adresa { display: block; font-size: 12px; color: var(--jos-tise); }
.pazi-tekst { color: var(--zuta); }
/* Veze reda -- ulaz u obrasce iz spiska, ispod naziva. Stoje tise od naziva (to je i dalje
   glavna veza reda), ali su stalno vidljive: veza koja se pokazuje tek na `:hover` na dodirnom
   ekranu ne postoji, a konzola se otvara i sa telefona. */
.veze-reda { display: block; margin-top: 6px; font-size: 12px; }
.veze-reda a { color: var(--tiho); text-decoration: none; border-bottom: 1px solid var(--linija); }
.veze-reda a:hover { color: var(--mastilo); border-bottom-color: currentColor; }
.veze-reda a + a { margin-left: 10px; }

/* oznake */
.oznaka { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--linija); color: var(--tiho); }
.o-aktivna { background: var(--zelena-bleda); border-color: var(--zelena); color: var(--zelena); }
.o-proba { background: var(--zuta-bleda); border-color: var(--zuta); color: var(--zuta); }
.o-pauzirana, .o-ugasena { background: var(--papir); }
.o-lose { background: var(--crvena-bleda); border-color: var(--crvena); color: var(--crvena); }

/* Stanje `.env`-a (16.10.2026). Iste tri boje kao ostale oznake; `prazno`, `iskljuceno` i
   `nije-provereno` ostaju sive (osnovna .oznaka) -- nisu posao. */
.e-ok { background: var(--zelena-bleda); border-color: var(--zelena); color: var(--zelena); }
.e-upozorenje { background: var(--zuta-bleda); border-color: var(--zuta); color: var(--zuta); }
.e-greska { background: var(--crvena-bleda); border-color: var(--crvena); color: var(--crvena); }
a.oznaka.e-greska { text-decoration: none; margin-left: 6px; }
.env-zbir { margin: 8px 0 12px; }
table.env-kljucevi td, table.env-kljucevi th { padding: 6px 8px; border-bottom: 1px solid var(--linija); text-align: left; vertical-align: top; }
table.env-kljucevi tr.env-grupa th, table.env-kljucevi tr.env-grupa td { padding-top: 14px; }
table.env-kljucevi .tiho { margin-left: 6px; }
.env-struktura { margin: 6px 0 0 18px; }

/* Stanje cenovnika. Boja prati POSAO, ne lepotu: zeleno je samo ono gde nema sta da se uradi.
   „Nije poslat" je zuto, a ne sivo -- to je stanje prelaza koje trazi klik, i dok je sivo
   izgleda kao uredna sitnica pa tako i ostane. */
.c-poklapa { background: var(--zelena-bleda); border-color: var(--zelena); color: var(--zelena); }
.c-nije-poslat, .c-zastareo { background: var(--zuta-bleda); border-color: var(--zuta); color: var(--zuta); }
.c-ne-prima, .c-nema-tabele { background: var(--crvena-bleda); border-color: var(--crvena); color: var(--crvena); }
.c-nepoznato { background: var(--papir); }

/* Verzija koda koju instalacija vrti.
   Zeleno je SAMO `develop` -- grana sa koje se deploy-uje demo i na kojoj je sve novo.
   `main` je zuto: nije kvar nego dogovor, ali objasnjava zasto tom kupcu neke stvari fale.
   Bez grane je sivo: ne zna se. */
.v-tekuca { background: var(--zelena-bleda); border-color: var(--zelena); color: var(--zelena); }
.v-sporedna { background: var(--zuta-bleda); border-color: var(--zuta); color: var(--zuta); }
.v-nepoznato { background: var(--papir); }
code.hes { background: transparent; padding: 0; font-size: 11px; color: var(--jos-tise); }

/* Nivo iz cenovnika (START/TEAM/...). Plava, ne zelena: zeleno u ovom redu vec znaci
   „status aktivna" i „cenovnik se poklapa" -- to su zdravlje instalacije, a nivo je cena. */
.o-nivo { background: var(--plava-bleda); border-color: var(--cijan); color: var(--plava);
  font-weight: 700; letter-spacing: .04em; }

/* „jos 1 nalog do TEAM · 17 €/nalog" -- jedina brojka u spisku koja je dobra vest.
   Zeleno SAMO kad cena stvarno pada; kad je sledeci opseg „po dogovoru", ostaje tiho sivo,
   jer se nista o ceni ne moze obecati. */
.s.bolje { color: var(--zelena); font-weight: 600; }

/* Zaglavlje po kom se sortira. Strelica stoji samo na njemu -- strelice na svakoj koloni ne
   kazu nista, a trose sirinu u tabeli koja je vec uska. */
th a.sort { color: inherit; text-decoration: none; display: inline-block; }
th a.sort:hover { color: var(--plava); text-decoration: underline; }
th.sort-aktivna { color: var(--plava); }
th .strelica { font-size: 9px; }

/* Moduli u spisku: tacka pa naziv, jedan ispod drugog.
 *
 * Boja upaljenog je CIJAN, ne zeleno. Zeleno u ovom redu vec znaci „status je aktivna" i
 * „cenovnik se poklapa" -- treca zelena stvar bi ta dva oslabila. Status i cenovnik su
 * zdravlje instalacije; modul je sta je kupljeno. Dve vrste podatka ne dele boju. */
/* Moduli u RED (tab Isporuka), ne u stubac.
 *
 * U spisku su stajali jedan ispod drugog, pa je svaki nov licencni modul produzavao SVAKI red
 * tabele -- visina reda je rasla sa brojem modula, a ne sa sadrzajem kupca. U redu se lome tek
 * kad ih ima previse za sirinu kolone. Tri stanja su ista kao pre (v. nize). */
.moduli-red { display: flex; flex-wrap: wrap; gap: 3px 10px; }

.moduli-stubac { display: flex; flex-direction: column; gap: 3px; }
.spisak-modul { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mastilo); white-space: nowrap; }
.spisak-modul em { font-style: normal; color: var(--jos-tise); font-size: 11px; }
.spisak-modul-tacka { width: 7px; height: 7px; border-radius: 50%; flex: none; }

.spisak-modul.m-on .spisak-modul-tacka { background: var(--cijan); }
/* Ugasen: PUNA siva kontura -- to je odluka koju smo doneli. */
.spisak-modul.m-off { color: var(--jos-tise); }
.spisak-modul.m-off .spisak-modul-tacka { background: transparent; border: 1px solid var(--linija); }
/* Ne zna se: ISPREKIDANA kontura. Trazi „Ocitaj ponovo", ne prekidac. */
.spisak-modul.m-neznam { color: var(--jos-tise); }
.spisak-modul.m-neznam .spisak-modul-tacka { background: transparent; border: 1px dashed var(--tiho); }

/* unos cenovnika */
table.cenovnik-unos { width: 100%; border-collapse: collapse; font-size: 14px; }
table.cenovnik-unos th { text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--tiho); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--linija); }
table.cenovnik-unos td { padding: 5px 8px; border-bottom: 1px solid var(--linija-tanka); }
table.cenovnik-unos input { width: 100%; padding: 8px 10px; border: 1px solid var(--linija);
  border-radius: 8px; font: inherit; color: var(--mastilo); background: #fff; }
/* Tabela koja se trenutno ne cita je prigusena, ali NIJE onemogucena: u nju se unosi pre nego
   sto se osnov prebaci, a `disabled` polja ne stizu u `FormData` pa bi unos tiho nestao. */
table.cenovnik-unos.neaktivna { opacity: .55; }

.cenovnik-stanje { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.cenovnik-slanje { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--karta); border: 1px solid var(--linija); border-radius: 10px; padding: 14px 18px; margin-top: 12px; }
.cenovnik-slanje > div { flex: 1 1 320px; }
.cenovnik-slanje .k { display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .09em; color: var(--tiho); margin-bottom: 3px; }

/* obrasci */
.obrazac { background: var(--karta); border: 1px solid var(--linija); border-radius: 10px; padding: 18px; }
.polja { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 16px; }
.polja label { font-size: 13px; color: var(--tiho); }
.polja label.siroko { grid-column: 1 / -1; }
.polja input, .polja select, .polja textarea { display: block; width: 100%; margin-top: 5px;
  padding: 9px 11px; border: 1px solid var(--linija); border-radius: 8px; font: inherit; color: var(--mastilo); background: #fff; }
.polja small { display: block; margin-top: 4px; font-size: 12px; color: var(--jos-tise); }
.stanje .uz-stanje { margin: -8px 0 8px; }

/* prazno stanje -- nikad prazan ekran bez reci */
.prazno { background: var(--karta); border: 1px dashed var(--linija); border-radius: 10px;
  padding: 32px 20px; text-align: center; color: var(--tiho); }
.prazno b { display: block; font-size: 16px; color: var(--mastilo); margin-bottom: 6px; }

/* dnevnik */
table.dnevnik { background: var(--karta); border: 1px solid var(--linija); border-radius: 10px; font-size: 14px; }
table.dnevnik.siroka { min-width: 720px; }
.dnevnik .kada { white-space: nowrap; color: var(--tiho); font-size: 13px; }
.dnevnik .promena { font-size: 13px; overflow-wrap: anywhere; }  /* dugacka vrednost (JSON, adresa) ne sme da siri stranu */

/* Blok `max-width: 640px` koji je ovde stajao preseljen je na KRAJ fajla, u odeljak
   „telefon" -- konzola ne sme da ima dva media bloka sa istim pragom: razidju se, a onaj
   nizi tiho pobedi. */

/* ---------- cenovnik naspram naplate (kartica instalacije) ----------
   Dve brojke koje se NIKAD ne spajaju. Referentna je prigusena i na sivoj podlozi;
   ona koja se naplacuje je veca i na beloj -- jedina odgovara na pitanje zbog kog se
   konzola otvara. Razlika je treca, i pojavljuje se samo kad ugovor postoji. */
.novac { display: grid; grid-template-columns: 1fr 1fr auto; gap: 1px; background: var(--linija);
  border: 1px solid var(--linija); border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.novac > div { background: var(--plava-bleda); padding: 14px 16px; }
.novac .naplata { background: var(--karta); }
.novac .k { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--tiho); margin-bottom: 7px; }
.novac .v { display: block; font-size: 26px; font-weight: 700; line-height: 1.05;
  font-variant-numeric: tabular-nums; }
.novac .v.prigusen { color: var(--tiho); font-size: 19px; font-weight: 600; }
/* Razlog umesto brojke: mora da se cita kao recenica, ne kao iznos. */
.novac .v.nema { font-size: 15px; font-weight: 600; }
.novac .osnov { display: block; font-size: 12px; color: var(--jos-tise); margin-top: 6px; }
.novac .razlika { min-width: 160px; }
.novac .razlika .v { font-size: 21px; }
.novac .razlika.popust .v { color: var(--zelena); }
.novac .razlika.doplata .v { color: var(--crvena); }

.osnovica { margin: 0 0 20px; padding: 10px 14px; background: var(--plava-bleda);
  border-left: 3px solid var(--cijan); border-radius: 0 7px 7px 0; font-size: 13px; color: var(--tiho); }

/* nalozi: traka je mirna dok ima mesta */
.nalozi { display: grid; grid-template-columns: minmax(200px, 280px) 1fr; gap: 20px;
  align-items: center; padding: 14px 16px; border: 1px solid var(--linija);
  border-radius: 10px; margin-bottom: 20px; }
.nalozi.lose { border-color: var(--crvena); background: var(--crvena-bleda); }
.nalozi .k { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--tiho); margin-bottom: 4px; }
.nalozi .v { display: block; font-size: 26px; font-weight: 700; line-height: 1.2;
  font-variant-numeric: tabular-nums; }
.nalozi .v .od { color: var(--jos-tise); font-weight: 500; font-size: 18px; }
.nalozi .uz-nalog { font-size: 13px; color: var(--tiho); }
.traka-mera { height: 8px; border-radius: 999px; background: var(--linija-tanka);
  overflow: hidden; margin-top: 10px; }
.traka-mera i { display: block; height: 100%; border-radius: 999px; background: var(--cijan); }
.traka-mera.blizu i { background: var(--zuta); }
.traka-mera.preko i { background: var(--crvena); }

/* sta kupac vidi: doslovna recenica, ne naziv rezima */
.kupcev { border: 1px dashed var(--linija); border-radius: 10px; padding: 13px 16px;
  margin-bottom: 20px; background: var(--karta); }
.kupcev .k { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--tiho); margin-bottom: 7px; }
.kupcev-red { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.kupcev-red b { font-weight: 700; font-variant-numeric: tabular-nums; }
.znacka { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; }
.znacka.tiha { background: var(--plava-bleda); color: var(--tiho); border: 1px solid var(--linija); }

/* ---------- spisak: dve kolone novca ---------- */
.spisak td.novac-c { font-variant-numeric: tabular-nums; white-space: nowrap; }
.spisak .razlika-popust { color: var(--zelena); font-weight: 700; }
.spisak .razlika-doplata { color: var(--crvena); font-weight: 700; }

@media (max-width: 760px) {
  .novac { grid-template-columns: 1fr; }
  .nalozi { grid-template-columns: 1fr; align-items: start; }
}

/* Moduli koji se naplacuju -- prekidaci u obrascu licence. */
.moduli-izbor { margin: 6px 0 16px; padding: 12px 14px; border: 1px solid var(--linija);
  border-radius: 10px; background: var(--plava-bleda); }
.moduli-izbor .k { display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .09em; color: var(--tiho); margin-bottom: 8px; }
.modul-red { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 14px; }
.modul-red input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--plava); }
.moduli-izbor small { display: block; margin-top: 8px; font-size: 12px; }

/* ---------- dnevno koriscenje ---------- */
.traka-koriscenje { display: flex; flex-wrap: wrap; align-items: end; gap: 12px;
  margin: 4px 0 18px; padding: 12px 14px; border: 1px solid var(--linija);
  border-radius: 10px; background: var(--plava-bleda); }
.traka-koriscenje label { display: flex; flex-direction: column; gap: 4px; font-size: 12px;
  color: var(--tiho); }
.traka-koriscenje select, .traka-koriscenje input { font: inherit; padding: 6px 8px;
  border: 1px solid var(--linija); border-radius: 7px; background: var(--papir); }

.sazetak { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 14px; font-size: 14px;
  color: var(--tiho); }
.sazetak strong { color: var(--mastilo); font-variant-numeric: tabular-nums; }

/* Stubic meri udeo u VRHU perioda. Sirina se racuna u PHP-u, ovde je samo izgled.
   `min-width` postoji da dan sa jednim nalogom ne izgleda kao dan bez ijednog -- nula i
   „skoro nula" moraju da se razlikuju golim okom.

   IME CELIJE JE `stub-celija`, i to je jedina stvar koja se ovde ne sme preimenovati u nesto
   opste. Do 15.09.2026. je nosila `class="traka"` i time kupila pravilo `.traka` odozgo (gornja
   navigacija, linija ~25): go selektor, `display:flex`, plava pozadina, padding. Celija je
   postajala plav pravougaonik preko svoje pune sirine, stubic u njoj plav na plavom, i dan sa
   dva naloga izgledao je isto kao dan sa jednim. `display:flex` je usput obarao i `width: 40%`
   ispod -- celija je bila 79 px umesto 224 px. */
table.dani td.stub-celija { width: 40%; padding-right: 0; }
table.dani .stub { display: block; height: 10px; min-width: 3px; border-radius: 5px;
  background: var(--plava); }
table.dani td.broj, table.prijave td.broj { text-align: right; font-variant-numeric: tabular-nums; }

table.prijave tr.neaktivan td { color: var(--tiho); }
table.prijave tr.neaktivan td:first-child { text-decoration: line-through; }

p.napomena { margin-top: 18px; padding: 10px 12px; border-left: 3px solid var(--linija);
  background: var(--plava-bleda); border-radius: 0 8px 8px 0; }

/* ---------- spisak: koriscenje i tisina ---------- */
/* 96 px umesto 112: sparkline pokazuje PRAVAC, a ne vrednost koja se cita sa ose, pa mu 16 px
   manje ne oduzima nista -- a u tabeli bez `min-width` svaka kolona placa svoju sirinu. */
.spisak td.koriscenje { min-width: 112px; }
.spisak td.koriscenje .spark { display: block; width: 96px; height: 26px; }
.spisak td.tisina { white-space: nowrap; }
.spisak .tisina-duga { color: var(--crvena); }

/* ---------- red izabran u uporednom spisku (tab Koriscenje) ---------- */
/* Boja, ne ivica: ivica bi pomerila sadrzaj reda za svoju sirinu, pa bi izbor „trzao" tabelu.
   Plava-bleda je ista pozadina koju konzola vec koristi za istaknuto. */
.spisak tr.red-izabran td { background: var(--plava-bleda); }

/* ---------- koriscenje: period i dva panela (12.09.2026) ---------- */
/* Traka perioda: levo sta se gleda, desno cime se menja. Nema vise birac instalacije --
   izbor je klik na red u tabeli iznad. */
.traka-koriscenje .period { font-size: 14px; color: var(--tiho); }
.traka-koriscenje .period strong { color: var(--mastilo); }
.traka-koriscenje .radnje { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* „Izaberi period" kao `details`, ne kao skripta -- konzola nema nijedan `<script>`.
   Otvoren `details` gura obrazac u novi red ispod trake, pa ne pomera dugmad. */
.period-izbor > summary { cursor: pointer; font-size: 14px; padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--linija); background: var(--karta); list-style: none; }
.period-izbor > summary::-webkit-details-marker { display: none; }
.period-izbor[open] > summary { border-color: var(--jos-tise); }
.period-izbor form { position: absolute; margin-top: 8px; display: flex; align-items: end; gap: 10px;
  background: var(--karta); border: 1px solid var(--linija); border-radius: 10px; padding: 12px 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08); z-index: 5; }

/* Dnevno i Prijave jedno pored drugog. Na uskom ekranu se slazu sami -- jedna kolona je tada
   jedini postena mera, a ne stisnuta dva panela. */
/* `minmax(0, 1fr)` i `min-width: 0`, ne golo `1fr`: kolona mreze inace ne sme biti uza od
   najmanje sirine svog sadrzaja, pa siroka tabela tiho gura panel iza desne ivice umesto da
   ga prijavi (16.10.2026, telefon). `overflow-x: auto` je poslednja odbrana -- ako tabela ipak
   ne stane, vidi se skrol u panelu, a ne odsecen panel. */
.dvokolona { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.dvokolona .panel { background: var(--karta); border: 1px solid var(--linija); border-radius: 10px;
  padding: 14px 16px; min-width: 0; overflow-x: auto; }
.dvokolona .panel h4 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tiho); }
.dvokolona .panel > p:last-child { margin-bottom: 0; }
/* U panelu tabela vise nema svoj okvir -- panel ga vec ima. */
.dvokolona .panel table.dani { font-size: 13px; }

@media (max-width: 900px) {
  .dvokolona { grid-template-columns: minmax(0, 1fr); }
}
.stariji-dani > summary { cursor: pointer; font-size: 13px; color: var(--plava); padding: 8px 0 0; }
.stariji-dani table.dani { margin-top: 6px; }

/* ------------------------------------------------------------------ probe --
   Tab „Probe" (13.09.2026). Sve klase su NOVE i scoped -- nijedna postojeca se ne menja,
   jer iste klase (`.oznaka`, `.plocica`, `.spisak`) koriste sva cetiri ranija ekrana. */

/* Istekao rok je svoje stanje, i crveno je -- do 13.09.2026. je stajao kao „proba, za 0 d.",
   dakle isto kao proba koja istice veceras. */
.o-isteklo { background: var(--crvena-bleda); border-color: var(--crvena); color: var(--crvena); }
.lose-tekst { color: var(--crvena); font-weight: 600; }

/* Ishodi. Preuzeta je jedina dobra vest i jedina zelena; „odustali" i „utihnula" se NE boje
   isto, jer su to dva razlicita nalaza za prodaju (rekli ne / nikad se nisu vratili). */
.o-preuzeta { background: var(--zelena-bleda); border-color: var(--zelena); color: var(--zelena); }
.o-odustali { background: var(--crvena-bleda); border-color: var(--crvena); color: var(--crvena); }
.o-utihnula { background: var(--zuta-bleda); border-color: var(--zuta); color: var(--zuta); }

.plocica.lose { background: var(--crvena-bleda); border-color: var(--crvena); }
.plocica.lose .v { color: var(--crvena); }

/* Ugasen domen se precrtava: adresa vise ne postoji i niko je ne treba otvarati. */
.adresa.mrtva { text-decoration: line-through; }

/* Traka toka probe. Ime je `tok-probe`, ne `dani` -- `table.dani` vec postoji na tabu
   Koriscenje i deljena klasa bi se razisla prvog dana kad se jednoj promeni visina. */
.tok-probe { display: block; width: 110px; height: 6px; margin-top: 5px; border-radius: 999px;
  background: var(--linija); overflow: hidden; }
.tok-probe > span { display: block; height: 100%; background: var(--cijan); }
.tok-probe.pazi > span { background: var(--zuta); }
.tok-probe.isteklo > span { background: var(--crvena); }

.podnaslov { margin: 26px 0 6px; font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tiho); }
.mala { font-size: 13px; margin-top: 0; }

/* Dugme u celiji spiska: manje od obicnog, da ne razvuce red. */
button.sitno { font-size: 12px; padding: 4px 9px; }
.uz-oznaku { display: inline-block; margin-top: 4px; }

/* Traka na kartici instalacije koja je na probi. */
.traka-probe { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; background: var(--karta); border: 1px solid var(--linija);
  border-left: 4px solid var(--cijan); border-radius: 10px; padding: 12px 16px; margin: 0 0 16px; }
.traka-probe.pazi { border-left-color: var(--zuta); background: var(--zuta-bleda); }
.traka-probe.isteklo { border-left-color: var(--crvena); background: var(--crvena-bleda); }
.traka-probe .radnje { display: flex; gap: 8px; }

/* Traka za punjenje demo skupa. Pojavljuje se SAMO na `demo*` instalacijama -- kod kupca
   nema sta da trazi. Ista geometrija kao traka probe, druga boja ivice, da se na prvi
   pogled vidi da je druga vrsta radnje. */
.traka-demo { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; background: var(--karta); border: 1px solid var(--linija);
  border-left: 4px solid var(--zelena, #2e7d32); border-radius: 10px; padding: 12px 16px; margin: 0 0 16px; }
/* Dugmad drze SVOJU sirinu dok traje potvrda: natpis „Kopirano" je kraci od „Kopiraj: napuni",
   pa bi se traka bez ovoga trznula pri svakom kliku i vratila posle dve sekunde. */
.traka-demo .radnje { display: flex; gap: 8px; flex-wrap: wrap; }
.traka-demo .radnje .dugme { min-width: 148px; text-align: center; }

/* Dugme koje POKRECE posao stoji u svom obrascu (POST + token), a obrazac je blok element --
   bez ovoga bi svako dugme u traci palo u svoj red i traka bi se razvukla u stubac. */
.traka-demo .radnje form.uredno { margin: 0; display: inline-flex; }

/* Napredak punjenja (16.09.2026). Ispis je jedini deo konzole koji raste dok se gleda, pa ima
   svoju maksimalnu visinu i skrol: bez toga stranica posle 40 redova skoci, a zaglavlje sa
   zakljuckom -- ono zbog cega se i gleda -- ode iznad ivice ekrana. */
.demo-napredak { background: var(--karta); border: 1px solid var(--linija); border-radius: 10px;
  padding: 12px 16px; margin: 0 0 16px; }
.demo-napredak .zaglavlje { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px; }
.demo-napredak .zakljucak { font-weight: 600; }

/* Zavrsen posao: ceo ispis ide pod jedan red koji se otvara kad zatreba. Sam `summary` je
   dugme po ponasanju, pa i izgleda tako -- inace ga covek ne prepozna kao nesto sto se klikce. */
.demo-napredak .ispis-sklopiv > summary { cursor: pointer; color: var(--tiho); font-size: 13px;
  padding: 4px 0; list-style-position: inside; }
.demo-napredak .ispis-sklopiv > summary:hover { color: var(--mastilo); }
.demo-napredak .ispis-sklopiv[open] > summary { margin-bottom: 8px; }
.demo-napredak .ispis { margin: 0; max-height: 260px; overflow: auto; background: var(--papir);
  border: 1px solid var(--linija); border-radius: 8px; padding: 10px 12px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word; }

/* Upozorenje pred nepovratnom radnjom: zuto, ne crveno -- nije greska nego opomena. */
.poruka.upozorenje { background: var(--zuta-bleda); border-left-color: var(--zuta); }

/* Zatvaranje probe: natpis prati izabrani ishod (15.10.2026). Podrazumevano se vidi tekst o
   gasenju; tek kad je izabrano „preuzeta" menja se tekstom da instalacija ostaje. */
.zatvaranje-preuzeta { display: none; }
.obrazac:has(select[name="ishod"] option[value="preuzeta"]:checked) .zatvaranje-gasi { display: none; }
.obrazac:has(select[name="ishod"] option[value="preuzeta"]:checked) .zatvaranje-preuzeta { display: block; }

/* ------------------------------------------------- nalozi i prijave (14.09.2026) --
   Panel „Nalozi i prijave" na tabu Koriscenje. Sve klase su NOVE i koriste se samo tamo --
   `.panel`, `.sazetak` i `.plocica` dele cetiri ranija ekrana, pa se ne diraju.

   Zamenjen je prikaz od tri sirova broja u dva siva pasusa. Racun je u
   `konzola_prijave_stanja()`; ovde je samo izgled. */

/* Recenica-zakljucak: jedino mesto na panelu koje ne meri nego TVRDI, pa je jedino i obojeno.
   Boja je stanje, ne ukras: zeleno = svi rade, zuto = ima tisine, crveno = bar polovina naloga
   se nikad nije prijavila (placa se a ne koristi). */
.panel .zakljucak { margin: 0 0 12px; padding: 9px 12px; border-radius: 8px; font-size: 15px;
  font-weight: 600; border: 1px solid var(--zuta); background: var(--zuta-bleda); color: var(--zuta); }
.panel .zakljucak.mir { border-color: var(--zelena); background: var(--zelena-bleda); color: var(--zelena); }
.panel .zakljucak.lose { border-color: var(--crvena); background: var(--crvena-bleda); color: var(--crvena); }

/* Traka: udeo svakog stanja u UKUPNOM broju naloga. Sirina dolazi iz `flex-grow` koji PHP
   upisuje kao broj naloga, pa odnos ostaje tacan i kad se skup promeni.

   `flex-basis: auto` uz `min-width` postoji zato sto jedan nalog od cetrdeset ima 2,5 % sirine
   -- bez najmanje sirine to je linija u kojoj broj ne stane, a broj je ono zbog cega traka i
   postoji. Cifra se skriva tek ispod 22 px, gde bi izlazila iz svog segmenta. */
.stanja-traka { display: flex; height: 28px; margin: 0 0 10px; border-radius: 8px;
  overflow: hidden; border: 1px solid var(--linija); }
.stanja-traka .deo { display: flex; align-items: center; justify-content: center; min-width: 22px;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; overflow: hidden; }
.stanja-traka .deo.radi { background: var(--plava); color: #fff; }
.stanja-traka .deo.gleda { background: var(--cijan); color: #fff; }
/* Zuta i crvena iz palete su TEKST boje -- kao pozadina bi cifra na njima pala ispod
   citljivog odnosa, pa ova dva segmenta imaju svetlu pozadinu i tamnu cifru. */
.stanja-traka .deo.ne-dolazi { background: #f0dcae; color: #5a4408; }
.stanja-traka .deo.nikad { background: #ecd8d1; color: var(--crvena); }

/* Legenda nosi ZNACENJE (traka je `aria-hidden`), pa je tekst i cita se sama za sebe:
   naziv stanja levo, broj desno, poravnat po ivici panela. */
.stanja-legenda { list-style: none; margin: 0; padding: 0; }
.stanja-legenda li { display: flex; align-items: baseline; gap: 9px; padding: 5px 0;
  border-bottom: 1px solid var(--linija-tanka); font-size: 13.5px; }
.stanja-legenda li:last-child { border-bottom: 0; }
.stanja-legenda .kvadrat { width: 12px; height: 12px; border-radius: 4px; flex: none;
  align-self: center; border: 1px solid var(--linija); }
.stanja-legenda .kvadrat.radi { background: var(--plava); border-color: var(--plava); }
.stanja-legenda .kvadrat.gleda { background: var(--cijan); border-color: var(--cijan); }
.stanja-legenda .kvadrat.ne-dolazi { background: #f0dcae; border-color: var(--zuta); }
.stanja-legenda .kvadrat.nikad { background: #ecd8d1; border-color: var(--crvena); }
.stanja-legenda .naziv { flex: 1; }
.stanja-legenda .opis { display: block; font-size: 12px; color: var(--jos-tise); }
.stanja-legenda b { font-variant-numeric: tabular-nums; font-size: 16px; }
/* Stanje sa nulom OSTAJE u spisku: „niko samo ne gleda" je podatak, a red koji nestane tera
   coveka da se pita da li je izmeren ili ga nema. Prigusen je, ne uklonjen. */
.stanja-legenda li.nula { color: var(--jos-tise); }
.stanja-legenda li.nula .kvadrat { background: var(--papir); border-color: var(--linija); }
.stanja-legenda li.nula b { font-weight: 400; }

/* Doktrina i ograde: citaju se jednom, pa stoje jedan klik dalje. Do 14.09.2026. su stajale
   IZNAD brojeva, gde ih je posle treceg gledanja svako preskakao -- pa su se preskakale i kad
   su bile potrebne. */
.panel details.doktrina { margin: 12px 0 0; font-size: 13px; }
.panel details.doktrina > summary { cursor: pointer; color: var(--plava); }
.panel details.doktrina p { color: var(--tiho); margin: 8px 0 0; }

/* --------------------------------------------- sklopiv spisak kupaca (14.09.2026) --
   Tab Koriscenje: spisak se sklapa cim je kupac izabran, da detalj ne bi pocinjao ispod
   cele tabele. Izmereno na 1280x800 pre izmene: detalj je poticao na 614 px kod sest redova
   i na 1069 px kod sesnaest -- dakle van ekrana, u oba pravca.

   `details`, ne skripta: konzola nema nijedan `<script>`, a stanje ionako nosi adresa
   (v. `$spisakOtvoren` u prikazu). */
.spisak-omot { margin: 0 0 18px; }
.spisak-omot > summary { display: flex; align-items: baseline; gap: 12px; cursor: pointer;
  padding: 11px 14px; background: var(--karta); border: 1px solid var(--linija); border-radius: 10px;
  list-style: none; }
.spisak-omot > summary::-webkit-details-marker { display: none; }
.spisak-omot > summary:hover { border-color: var(--jos-tise); }
.spisak-omot[open] > summary { border-radius: 10px 10px 0 0; border-bottom-color: transparent; }
.spisak-omot > summary .ime { font-weight: 600; }
/* Broj kupaca stoji uz naslov kao tiha oznaka -- podatak, ali ne i vest. */
.spisak-omot > summary .koliko { color: var(--jos-tise); font-weight: 400; margin-left: 6px;
  font-variant-numeric: tabular-nums; }
/* Vest zbog koje se ovaj ekran otvara mora da ostane vidljiva i kad je spisak sklopljen --
   inace sklapanje sakriva bas ono zbog cega je spisak i stavljen iznad detalja. */
.spisak-omot > summary .tisina-duga { font-size: 16px; font-variant-numeric: tabular-nums; }
.spisak-omot > summary .uputstvo { margin-left: auto; color: var(--plava); }
.spisak-omot > summary .uputstvo::before { content: "▸ "; }
.spisak-omot > summary .uputstvo::after { content: "prikaži spisak"; }
.spisak-omot[open] > summary .uputstvo::before { content: "▾ "; }
.spisak-omot[open] > summary .uputstvo::after { content: "sakrij spisak"; }
/* Otvoren spisak se nastavlja na svoje zaglavlje, pa gornje ivice nema -- inace se vide dve
   linije jedna uz drugu i izgleda kao dva odvojena okvira. */
.spisak-omot[open] .tabela-omot { border-radius: 0 0 10px 10px; border-top: 0; }

/* ------------------------------------------ ugasene instalacije (15.09.2026) --
   Spisak prikazuje zive; ugasene stoje ispod, sklopljene. Razlog je isti kao kod plocice
   „Ne javljaju se": gasenje je redovan dogadjaj, pa bi kroz godinu dana spisak bio groblje
   sa pet zivih redova na vrhu.

   Isti vizuelni jezik kao `.spisak-omot` na tabu Koriscenje -- jedan obrazac sklapanja u
   celoj konzoli, i nijedan `<script>`. */
.ugasene-omot { margin: 18px 0 0; }
.ugasene-omot > summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer;
  padding: 10px 14px; background: var(--karta); border: 1px solid var(--linija); border-radius: 10px;
  list-style: none; color: var(--tiho); }
.ugasene-omot > summary::-webkit-details-marker { display: none; }
.ugasene-omot > summary:hover { border-color: var(--jos-tise); }
.ugasene-omot[open] > summary { border-radius: 10px 10px 0 0; border-bottom-color: transparent; }
.ugasene-omot > summary .ime { font-weight: 600; color: var(--tiho); }
.ugasene-omot > summary .koliko { color: var(--jos-tise); font-variant-numeric: tabular-nums; }
.ugasene-omot > summary .uputstvo { margin-left: auto; color: var(--plava); }
.ugasene-omot > summary .uputstvo::before { content: "▸ "; }
.ugasene-omot > summary .uputstvo::after { content: "prikaži"; }
.ugasene-omot[open] > summary .uputstvo::before { content: "▾ "; }
.ugasene-omot[open] > summary .uputstvo::after { content: "sakrij"; }
.ugasene-omot[open] .tabela-omot { border-radius: 0 0 10px 10px; border-top: 0; }

/* ------------------------------------- izbor instalacije uz probu (15.09.2026) --
   Tri nacina da proba dobije instalaciju: nova (podrazumevano), postojeca, nijedna.

   `.polja input` je `display:block; width:100%` -- sto radio dugme razvuce preko celog reda i
   gurne tekst u sledeci. Zato se ovde vraca na svoju velicinu. */
.polja .izbor-veze { grid-column: 1 / -1; margin: 0; padding: 8px 12px 10px;
  border: 1px solid var(--linija); border-radius: 8px; }
.polja .izbor-veze legend { font-size: 13px; color: var(--tiho); padding: 0 4px; }
.red-izbora { display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: start;
  padding: 7px 0; font-size: 13px; color: var(--mastilo); }
.red-izbora + .red-izbora { border-top: 1px solid var(--linija); }
.polja .red-izbora input[type="radio"] { display: inline-block; width: auto; margin: 2px 0 0; padding: 0; }
.polja .red-izbora select { margin-top: 6px; }

/* --------------------------------------- vidljivost iznosa kod kupca (18.09.2026) --
   Cekboks stoji u mrezi `.polja`, uz polje „Iznos". Ista zamka kao kod radio dugmeta iznad:
   `.polja input` je `display:block; width:100%`, pa bi se kvadratic razvukao preko celog reda
   i tekst pao ispod njega. Zato se vraca na svoju velicinu.

   Visina reda je poravnata sa susednim poljima (`margin-top: 5px`, kao `.polja input`), da
   kvadratic ne visi iznad linije unosa pored koje stoji. */
.polja .vidljivost-iznosa .red { display: flex; align-items: center; gap: 8px;
  margin-top: 5px; min-height: 34px; font-size: 14px; color: var(--mastilo); }
.polja .vidljivost-iznosa input[type="checkbox"] { display: inline-block; width: 16px;
  height: 16px; margin: 0; padding: 0; accent-color: var(--plava); }

/* ------------------------------------------- zahtevi za probu (16.09.2026) --
   Red zahteva nosi do tri radnje, a svaka je POST obrazac sa tokenom -- link ovde ne moze.
   Obrazac je blok element, pa bi bez `inline` svaka radnja pala u svoj red i naziv kupca bi
   se odvojio od dugmadi za tri linije. Klasa je SVOJA (ne `.veze-reda`): ta ista klasa nosi
   veze kod proba i instalacija, a ovde se stilizuju dugmad, ne linkovi. */
.zahtev-radnje { display: block; margin-top: 6px; font-size: 12px; }
.zahtev-radnje form { display: inline; margin: 0; }
.zahtev-radnje form + form { margin-left: 10px; }

/* Dugme koje izgleda kao veza -- red spiska nije mesto za tri prava dugmeta, a radnja mora da
   ide kroz POST. Meta dodira ostaje cela visina reda, jer je `padding` u celiji. */
.zahtev-radnje button { font: inherit; font-size: 12px; padding: 0; border: 0;
  border-bottom: 1px solid var(--linija); border-radius: 0; background: none;
  color: var(--tiho); cursor: pointer; }
.zahtev-radnje button:hover { color: var(--mastilo); border-bottom-color: currentColor; }

/* Stanja zahteva. Boja prati POSAO, ne lepotu: zeleno je samo ono gde nema sta da se uradi.
   `pusteno` je plavo jer nista ne trazi -- posao je predat pokretacu; `preuzet` je zut jer je
   u toku; `pao` je crven jer dok stoji, pokretac NE RADI nista. */
.z-ceka { background: var(--papir); }
.z-pusteno { background: var(--plava-bleda); border-color: var(--plava); color: var(--plava); }
.z-preuzet { background: var(--zuta-bleda); border-color: var(--zuta); color: var(--zuta); }
.z-pao { background: var(--crvena-bleda); border-color: var(--crvena); color: var(--crvena); }

/* Razlog pada: kraj ispisa alata, dakle vise redova teksta iz terminala. Prelama se po
   praznim mestima (`pre-wrap` bi razvukao tabelu), i tise je od napomene iznad -- napomena je
   ono sto je covek napisao, ovo je ono sto je masina prijavila. */
.zahtev-greska { display: block; margin-top: 6px; font-size: 12px; line-height: 1.45;
  color: var(--crvena); word-break: break-word; }

/* Uputstvo na ekranu Probe (17.09.2026). Sklopljeno, jer se ekran otvara zbog rokova a ne zbog
   uputstva -- ali stoji BAS TU, jer se proba otvara jednom u nekoliko nedelja i koraci se
   zaborave. Isti obrazac kao `.period-izbor`: `details`, bez ijedne skripte. */
details.uputstvo-probe { margin: 0 0 18px; border: 1px solid var(--linija); border-radius: 10px;
  background: var(--povrsina); }
details.uputstvo-probe > summary { cursor: pointer; padding: 10px 14px; font-weight: 600;
  font-size: 14px; color: var(--plava); }
details.uputstvo-probe > summary::-webkit-details-marker { display: none; }
details.uputstvo-probe > summary::before { content: "?"; display: inline-block; width: 18px;
  height: 18px; margin-right: 8px; border: 1px solid var(--plava); border-radius: 50%;
  text-align: center; line-height: 17px; font-size: 12px; }
details.uputstvo-probe[open] > summary { border-bottom: 1px solid var(--linija); }
details.uputstvo-probe > p, details.uputstvo-probe > ol { margin: 12px 14px; font-size: 14px;
  line-height: 1.55; }
details.uputstvo-probe > ol { padding-left: 22px; }
details.uputstvo-probe > ol > li { margin-bottom: 8px; }
details.uputstvo-probe code { font-size: 13px; }

/* ------------------------------------------------------------ listic ------
   Listic za predaju probne instalacije (`?strana=listic`). Sve klase su NOVE i nose
   prefiks `listic-` -- postojeci ekrani dele `.polja`, `.oznaka` i `.spisak`, pa bi
   svako prosirenje tih klasa promenilo pet drugih strana.

   STAMPA JE OVDE GLAVNI PRIKAZ, ne dodatak. Zato print blok stoji na KRAJU fajla:
   konzola ima tri `max-width` bloka (640, 760, 900 px), a A4 se lomi na ~710 px --
   dakle mobilna pravila vaze i na papiru. Kaskada resava to bez diranja tih blokova.  */

.listic { background: var(--karta); border: 1px solid var(--linija); border-radius: 12px;
  padding: 24px 26px; margin: 0 0 18px; max-width: 820px; }
.listic h3.listic-pod { font-size: 16px; margin: 22px 0 6px; text-transform: none;
  letter-spacing: 0; color: var(--mastilo); }
.listic p { margin: 0 0 10px; }

.listic-zaglavlje { font-size: 20px; font-weight: 700; margin: 0 0 14px !important;
  padding-bottom: 12px; border-bottom: 2px solid var(--mastilo); }
.listic-oznaka { display: inline-block; vertical-align: 2px; margin-right: 10px;
  background: var(--plava); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.listic-uvod { font-size: 15px; }

/* Koraci: kvadratic se CRTA ivicom, ne pise znakom -- `&#9744;` na delu stampaca ispadne
   prazno mesto, a kvadratic koji se ne vidi je kvadratic koji se ne stiklira. */
.listic-koraci { list-style: none; padding: 0; margin: 14px 0 6px; counter-reset: k; }
.listic-koraci > li { position: relative; padding-left: 50px; margin-bottom: 13px; min-height: 24px; }
.listic-koraci > li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px;
  height: 16px; border: 1.5px solid var(--tiho); border-radius: 3px; }
.listic-koraci > li::after { counter-increment: k; content: counter(k); position: absolute;
  left: 26px; top: 0; font-weight: 700; color: var(--plava); }
.listic-koraci .zasto { display: block; color: var(--tiho); font-size: 13.5px; margin-top: 2px; }

.listic-redosled { margin: 8px 0 10px; padding-left: 22px; }
.listic-redosled > li { margin-bottom: 6px; }

.listic-upozorenje { background: var(--crvena-bleda); border-left: 3px solid var(--crvena);
  padding: 11px 14px; margin: 14px 0 !important; font-size: 14px; }
.listic-savet { background: var(--plava-bleda); border-left: 3px solid var(--plava);
  padding: 11px 14px; margin: 14px 0 !important; font-size: 14px; }

/* Prazna polja za rukopis: linija je donja ivica, da se pise PO njoj. */
.listic-polja { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px; margin: 14px 0 4px; }
.listic-polje { border-bottom: 1.4px solid var(--tiho); padding-bottom: 3px; min-height: 36px;
  display: flex; align-items: flex-end; gap: 10px; }
.listic-polje.sirok { grid-column: 1 / -1; }
.listic-polje .k { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tiho); font-weight: 600; white-space: nowrap; }
.listic-polje .u { font-size: 15px; }

.listic-nalozi { width: 100%; border-collapse: collapse; margin: 10px 0 14px; font-size: 14px; }
.listic-nalozi th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tiho); border-bottom: 1.5px solid var(--linija); padding: 6px 8px; }
.listic-nalozi td { border-bottom: 1px solid var(--linija-tanka); padding: 6px 8px; }

.listic-potpis { margin-top: 16px !important; padding-top: 10px; border-top: 1px solid var(--linija);
  font-size: 13px; color: var(--tiho); }

/* ------------------------------------------------- „Danas" (18.09.2026) --
   Polazni ekran: ono sto trazi potez, pa dve brojke. Red je VEZA ka mestu gde se posao
   radi -- ne dugme: klik vodi na drugi ekran, a to je navigacija.

   Boja nosi HITNOST, ne vrstu: crveno je ono sto gori danas (ne javlja se, istekao rok,
   pao zahtev), zuto ono sto gori ove nedelje (rok blizu, tisina), plavo ono sto ceka na
   nas ali ne propada (zahtev za probu). Ivica levo je ista sirina kao kod traka na kartici
   -- jedan vizuelni jezik za „ovo trazi paznju" u celoj konzoli. */
.potezi { display: flex; flex-direction: column; gap: 8px; margin: 0 0 6px; }
.potez { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 12px;
  align-items: center; padding: 12px 15px; background: var(--karta);
  border: 1px solid var(--linija); border-left: 4px solid var(--zuta); border-radius: 10px;
  text-decoration: none; color: var(--mastilo); }
.potez:hover { border-color: var(--jos-tise); border-left-color: var(--zuta); }
.potez.lose { border-left-color: var(--crvena); }
.potez.lose:hover { border-left-color: var(--crvena); }
.potez.plavo { border-left-color: var(--cijan); }
.potez.plavo:hover { border-left-color: var(--cijan); }
.potez .ik { grid-column: 1; grid-row: 1 / -1; width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center; font-size: 15px; font-weight: 700;
  background: var(--zuta-bleda); color: var(--zuta); }
.potez.lose .ik { background: var(--crvena-bleda); color: var(--crvena); }
.potez.plavo .ik { background: var(--plava-bleda); color: var(--cijan); }
.potez .nm { grid-column: 2; grid-row: 1; font-weight: 700; font-size: 14.5px; line-height: 1.25;
  overflow-wrap: anywhere; }
.potez .zs { grid-column: 2; grid-row: 2; font-size: 13px; color: var(--tiho); }
.potez.lose .zs { color: var(--crvena); }
.potez .go { grid-column: 3; grid-row: 1 / -1; color: var(--jos-tise); font-size: 19px; }

/* Prazno je ovde DOBRA vest, pa je i zeleno -- svuda drugde prazno stanje znaci da nesto
   fali, a na „Danas" znaci da ne fali nista. */
.mirno { padding: 22px 16px; text-align: center; border: 1px solid var(--zelena);
  background: var(--zelena-bleda); border-radius: 10px; color: var(--tiho); }
.mirno b { display: block; font-size: 16px; color: var(--zelena); margin-bottom: 4px; }

/* ---------------------------------------- donja navigacija (18.09.2026) --
   Isti `<nav>` sluzi na oba ekrana. Na sirokom je sve kao i do sada: sedam tabova u traci,
   bez ikona i bez ulaza „Jos". Telefon ga premesta na dno i svodi na pet -- blok nize.

   `.samo-usko` i `.samo-sirok` su par: jedno je vidljivo tacno tamo gde drugo nije, pa se
   nijedno odrediste ne moze izgubiti tako sto bi obe klase istovremeno bile skrivene. */
.traka nav .i { display: none; }
.traka nav a.samo-usko { display: none; }
/* SREDNJA SIRINA (641-1000 px, 07.10.2026). Sa devet tabova (Politika od 06.10.) traka ne staje
   ispod ~960 px: izmereno 940 px sadrzaja u prozoru od 900, „Odjava" iza desne ivice, na svakom
   ekranu. Ovde vazi isti par kao na telefonu -- glavni tabovi plus „Jos" -- samo u gornjoj traci. */
@media (min-width: 641px) and (max-width: 1000px) {
  .traka nav a.samo-sirok { display: none; }
  .traka nav a.samo-usko { display: inline-block; }
}

/* ---------------------------------------------- ekran „Jos" (18.09.2026) --
   Spisak ekrana koji na telefonu ne staju u traku od pet ulaza. Red je VEZA, ne dugme --
   vodi na drugi ekran, a to je navigacija. */
.jos-spisak { display: flex; flex-direction: column; gap: 8px; margin: 0 0 8px; }
.jos-red { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px;
  align-items: center; padding: 13px 15px; background: var(--karta);
  border: 1px solid var(--linija); border-radius: 10px; text-decoration: none;
  color: var(--mastilo); }
a.jos-red:hover { border-color: var(--jos-tise); }
.jos-red .nm { grid-column: 1; grid-row: 1; font-weight: 700; font-size: 15px; }
.jos-red .zs { grid-column: 1; grid-row: 2; font-size: 13px; color: var(--tiho); }
.jos-red .go { grid-column: 2; grid-row: 1 / -1; color: var(--jos-tise); font-size: 20px; }
/* Red bez veze (ko je prijavljen) ne sme da izgleda kao da se klikce. */
.jos-red.bez-veze { background: var(--plava-bleda); cursor: default; }
/* Ekran „Politika" (06.10.2026): isti red kao „Jos", ispod njega Otvori i Preuzmi, pa
   slanje mejlom u obicnom obrascu konzole (`.obrazac` + `.polja`). */
.politika-fajl .nm { overflow-wrap: anywhere; }
.politika-dugmad { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }
.politika-dugmad .dugme { text-decoration: none; color: var(--mastilo); min-height: 44px;
  display: inline-flex; align-items: center; }
.politika-mejl { max-width: 560px; margin-top: 12px; }
/* Dugmad politike (06.10.2026): ista visina i oblik za vezu, dugme i oznaku za fajl. */
.politika-dugmad .dugme, .politika-dugmad button { min-height: 44px; display: inline-flex;
  align-items: center; gap: 7px; }
.politika-dugmad .ikona { width: 18px; height: 18px; flex: 0 0 auto; }
/* „Pošalji mejlom" dok je obrazac otvoren -- isti par boja kao istaknut tab. */
.politika-dugmad .dugme.tekuce { border-color: var(--plava); background: var(--plava-bleda); color: var(--plava); }
.politika-obrazac { position: relative; align-items: center; }
/* Skriveno polje za fajl: ne `display: none`, da ga oznaka otvara i da ostane tastaturi. */
.politika-obrazac .politika-fajl-polje { position: absolute; top: 0; left: 0; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; }
.politika-fajl-polje:focus-visible + .dugme { outline: 2px solid var(--plava); outline-offset: 2px; }
.politika-izabran { font-size: 13px; color: var(--tiho); overflow-wrap: anywhere; }
.politika-obrazac .tiho { flex-basis: 100%; margin: 0; font-size: 13px; }
.jos-odjava { margin: 0; }
.jos-odjava button { width: 100%; min-height: 46px; }

/* ------------------------------------------ rok i kontakt (18.09.2026) --
   Traka odmah ispod naslova kartice. Nosi dva podatka koja su do danas bila na dnu strane,
   u formi: rok („vazi do") i kontakt. Oba se traze telefonom, dok razgovor traje.

   Geometrija je ista kao kod trake probe iznad -- namerno: dve trake ispod istog naslova
   koje se razlicito ponasaju izgledaju kao dva razlicita ekrana. */
.traka-kontakt { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; background: var(--karta); border: 1px solid var(--linija);
  border-left: 4px solid var(--linija); border-radius: 10px; padding: 12px 16px; margin: 0 0 16px; }
.traka-kontakt.pazi { border-left-color: var(--zuta); background: var(--zuta-bleda); }
.traka-kontakt.isteklo { border-left-color: var(--crvena); background: var(--crvena-bleda); }
.traka-kontakt .sta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.traka-kontakt .k { font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--tiho); }
.traka-kontakt .v { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Recenica umesto datuma -- pise se manje, da se ne cita kao izmerena vrednost. */
.traka-kontakt .v.nema { font-size: 15px; font-weight: 600; color: var(--tiho); }
.traka-kontakt .radnje { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.traka-kontakt .ko { font-size: 13px; color: var(--tiho); }
.traka-kontakt .s { display: inline; }

/* ------------------------------------------- sazetak reda (18.09.2026) --
   Jedan red koji na TELEFONU zamenjuje sest kolona spiska (v. `konzola_sazetak_kupca()`).
   Na sirokom ekranu se ne crta: tamo tabela ima mesta za sve kolone, pa bi sazetak bio isti
   podatak dvaput. Pravilo je zato ovde, u osnovnom delu fajla, a ne u bloku za telefon --
   podrazumevano stanje je „ne prikazuj", a telefon ga pali.

   IME JE `red-sazetak`, ne `sazetak`. Klasa `.sazetak` je VEC ZAUZETA -- nosi je panel sa
   zbirovima na tabu Koriscenje (`koriscenje.php`), pa bi `display: none` nad njom ugasio
   tudji ekran. Ista klasa greske koju CLAUDE.md vec opisuje za deljene klase prikaza. */
.red-sazetak { display: none; }

/* --------------------------------------- otvarac reda na Probama (18.09.2026) --
   Isto pravilo kao za sazetak iznad, iz istog razloga: na sirokom ekranu red probe ima svih
   pet kolona i sva tri dugmeta, pa otvarac nema sta da otvori. Podrazumevano je „ne prikazuj";
   pali ga blok za telefon. */
.red-otvarac { display: none; }
/* Poddomen i kontakt su dva spana (probe.php) -- na sirokom stoje u istom redu, pa razdvojnu
   tacku crta CSS. Na telefonu je kontakt skriven dok je kartica sklopljena, i tada tacke
   nema jer nema ni suseda. */
.adresa-dom + .adresa-kontakt::before { content: " · "; }

/* ------------------------------------------ koriscenje na kartici (18.09.2026) --
   Kartica do ovog datuma nije imala nijedan podatak o koriscenju -- puls, prosek i tisina
   ziveli su samo kao kolone spiska. Klik na kupca je dakle ODUZIMAO podatak koji je stajao u
   redu iz kog se kliknulo.

   Geometrija je ista kao kod bloka novca iznad (tri polja u redu, jedna kolona na uskom) --
   namerno: covek koji je dosao iz spiska treba da prepozna isti raspored, ne nov. */
.koriscenje-kartica { margin: 0 0 20px; }
/* `auto-fit` umesto tri kolone: blok je 18.09.2026. dobio „Udeo naloga" i „Najcesci modul",
  background: var(--linija); border: 1px solid var(--linija); border-radius: 10px; overflow: hidden; }
.koriscenje-mera > div { background: var(--karta); padding: 13px 15px; }
.koriscenje-mera .k { display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .09em; color: var(--tiho); margin-bottom: 6px; }
.koriscenje-mera .v { display: block; font-size: 23px; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; }
.koriscenje-mera .v .od { color: var(--jos-tise); font-weight: 500; font-size: 15px; }
/* „Ne zna se" je RECENICA, ne broj -- pise se manje, da se ne cita kao izmerena vrednost. */
.koriscenje-mera .v .nema { font-size: 15px; font-weight: 600; color: var(--tiho); }
.koriscenje-mera .osnov { display: block; font-size: 12px; color: var(--jos-tise); margin-top: 5px; }
.koriscenje-mera > div.lose { background: var(--crvena-bleda); }
.koriscenje-mera > div.lose .v { color: var(--crvena); }

.koriscenje-crtez { display: flex; align-items: center; gap: 12px; margin-top: 10px;
  padding: 10px 15px; background: var(--karta); border: 1px solid var(--linija); border-radius: 10px; }
.koriscenje-crtez .spark { display: block; width: 100%; max-width: 260px; height: 32px; }
.koriscenje-crtez .s { white-space: nowrap; }
.koriscenje-kartica .mala { margin-top: 8px; }

/* ------------------------------------------------------ pretraga kupaca (18.09.2026) --
   Konzola do ovog datuma nije imala nijedno polje za pretragu. Na telefonu je to znacilo
   osam ekrana skrola do kupca koji zove (mereno, 14 instalacija na 390x844); na racunaru
   isti problem ceka na broju kupaca koji jos nije dostignut.

   Polje je  i stoji IZNAD plocica, ne pored naslova: na telefonu bi u redu sa
   naslovom imalo 120 px, a u njega se kuca ime firme. */
.pretraga { display: flex; gap: 8px; margin: 0 0 14px; }
.pretraga input[type="search"] { flex: 1 1 320px; min-width: 0; max-width: 460px;
  padding: 9px 12px; border: 1px solid var(--linija); border-radius: 9px; font: inherit;
  color: var(--mastilo); background: var(--karta); }
.pretraga input[type="search"]:focus { outline: 2px solid var(--cijan); outline-offset: 1px;
  border-color: var(--cijan); }
.pretraga button { flex: none; }

/* Red ispod polja: koliko je nadjeno i izlaz nazad. „Ponisti" je VEZA, ne dugme -- vraca na
   isti ekran bez upita, dakle navigacija. */
.pretraga-rezultat { margin: -6px 0 14px; font-size: 13px; color: var(--tiho); }
.pretraga-rezultat b { color: var(--mastilo); font-variant-numeric: tabular-nums; }
.pretraga-rezultat .ponisti { margin-left: 10px; }

/* ------------------------------------------- obaveze i uplate (05.11.2026) ----
   Mokap `docs/mokap-konzola-uplate.html`. Svoje klase (`saldo-`), jer `.panel`, `.plocica` i
   `.spisak` dele ostali ekrani. Saldo: 0 zeleno, dug zuto, preplata plavo, „ne zna se" sivo. */
.salda { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.saldo-blok { background: var(--karta); border: 1px solid var(--linija); border-radius: 10px; padding: 14px 16px; min-width: 0; }
.saldo-blok h3 { margin: 0 0 6px; font-size: 17px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.saldo-blok h3 .s { font-weight: 400; }
.saldo-podnaslov { margin: 12px 0 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--tiho); font-weight: 600; }
.saldo-red { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0;
  border-bottom: 1px solid var(--linija-tanka); font-size: 14px; }
.saldo-red .ime { color: var(--tiho); min-width: 0; overflow-wrap: anywhere; }
.saldo-red .ime small { display: block; color: var(--jos-tise); font-size: 12px; }
.saldo-red .iznos { white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.saldo-red.nepoznato .iznos { color: var(--zuta); font-style: italic; }
.saldo-red .obrisi-uplatu { margin: 0; }
.saldo-red .obrisi-uplatu button { padding: 0 8px; min-width: 30px; min-height: 30px; line-height: 1; font-size: 18px; color: var(--crvena); background: transparent; }
.saldo-zbir { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; padding: 7px 0 2px;
  border-top: 1.5px solid var(--mastilo); margin-top: 2px; font-size: 14.5px; }
.saldo-stanje { margin-top: 12px; padding: 8px 10px; border-radius: 7px; display: flex; justify-content: space-between;
  gap: 10px; font-weight: 700; font-size: 15px; background: var(--papir); color: var(--tiho); }
.saldo-stanje small { font-weight: 400; }
.saldo-stanje.s-izmireno { background: var(--zelena-bleda); color: var(--zelena); }
.saldo-stanje.s-duguje { background: var(--zuta-bleda); color: var(--zuta); }
.saldo-stanje.s-plus { background: var(--plava-bleda); color: var(--plava); }
details.upisi-uplatu { margin: 4px 0 18px; }
details.upisi-uplatu > summary { list-style: none; display: inline-block; cursor: pointer; }
details.upisi-uplatu > summary::-webkit-details-marker { display: none; }
details.upisi-uplatu[open] > summary { margin-bottom: 10px; }
details.upisi-uplatu .obrazac .dugme { margin-left: 6px; }
.polja .izbor-vrste { margin: 0; padding: 6px 12px 8px; border: 1px solid var(--linija); border-radius: 8px;
  display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; }
.polja .izbor-vrste legend { font-size: 13px; color: var(--tiho); padding: 0 4px; }
.polja .izbor-vrste label { display: inline-flex; align-items: center; gap: 6px; color: var(--mastilo); font-size: 14px; }
.polja .izbor-vrste input[type="radio"] { display: inline-block; width: auto; margin: 0; padding: 0; }
.uvodjenje-obrazac .polja { grid-template-columns: minmax(0, 360px); }
/* Salda na Naplati: dug je glavna brojka reda. */
.salda-tabela .saldo-iznos { text-align: right; white-space: nowrap; }
.salda-tabela .dug { color: var(--zuta); font-weight: 700; }
.salda-tabela .izmireno { color: var(--zelena); font-weight: 700; }
.salda-tabela .plus { color: var(--plava); font-weight: 700; }

/* ====================================================== telefon (18.09.2026) ======
   Konzola se otvara i sa telefona. Do ove izmene je SVAKI njen ekran imao vodoravni
   skrol -- mereno na 390x844: dokument 594 px na svakom tabu (traka sa sedam tabova u
   jednom redu je 562 px i ne prelama se), a Dnevnik 803 px (`table.dnevnik.siroka` ima
   `min-width: 720px`). Uz to je svaki spisak skrolovao i u svom omotacu, 537-893 px
   sadrzaja u 360 px okvira.

   Vodoravni skrol na telefonu nije samo ruzan: kolone iza ivice se ne vide, a covek ne
   zna da ih ima -- isto kao tab iza ivice skrola.

   PRAG JE 640 px, ne 760. A4 je ~710 px, pa mobilna pravila sa sirim pragom upadaju u
   stampu (v. komentar uz `.listic` i `@media print` na kraju fajla). Print blok OSTAJE
   poslednji u fajlu i nadjacava sve odavde.

   Dve odluke nose ceo blok:

     1. RED TABELE POSTAJE KARTICA. Spisak od sedam kolona se u 360 px ne moze suziti --
        moze samo da se okrene: red postaje kartica, celija red „LABELA  vrednost".
        Labela dolazi iz `data-labela` na `<td>`, dakle iz istog izvora kao zaglavlje
        kolone. CSS NE prepisuje nazive kolona: prepis bi se razisao od zaglavlja prvog
        dana kad se kolona preimenuje, i to tiho.

     2. NIJEDAN ULAZ SE NE SKRIVA. Traka se prelama u dva reda umesto da skroluje
        vodoravno. Tab iza ivice skrola je tab za koji se ne zna da postoji, a ta klasa
        greske se u ovom repou vec vracala (CLAUDE.md, odeljak „Navigacija"). Iz istog
        razloga se nijedna kolona spiska ne sakriva -- sve postaju redovi kartice.

   Ovde su i cetiri pravila koja su do 18.09.2026. stajala u svom `@media (max-width: 640px)`
   bloku iznad (traka, `main`, `.vrh .radnje`). Spojena su da konzola ne bi imala dva bloka
   sa istim pragom -- dva bloka se razidju, i onaj nizi tiho pobedi. */

@media (max-width: 640px) {
  /* ---- okvir strane ---- */
  main { padding: 16px 14px 56px; }
  h1 { font-size: 21px; }
  h2 { margin: 26px 0 8px; }

  /* ---- navigacija ide DOLE, pod palac ----
     Gornja traka sa sedam tabova bila je na 390 px visoka 169 px -- petina ekrana, na
     SVAKOM ekranu, i to na vrhu, gde palac ne stize. Sada gore ostaju samo znak i odjava,
     a navigacija je fiksirana na dnu: cetiri odredista i „Jos".

     `position: fixed` trazi da sadrzaj dobije donji razmak -- inace poslednji red spiska
     zavrsi ISPOD trake, i to se ne primeti dok se ne skroluje do kraja. Brana to meri.

     `env(safe-area-inset-bottom)` je zbog telefona bez donjeg dugmeta: tamo poslednjih
     ~34 px pripada sistemskoj crti, pa bi traka bez toga bila delom ispod nje. */
  .traka { flex-wrap: wrap; gap: 10px 12px; padding: 10px 14px; }
  .traka .znak { order: 1; }
  .traka .odjava { order: 2; margin-left: auto; width: auto; }
  .traka button { min-height: 44px; }

  .traka nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; width: auto; margin: 0;
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    background: var(--karta); border-top: 1px solid var(--linija);
    box-shadow: 0 -6px 18px rgba(19,35,63,.07); }
  .traka nav a { display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; min-height: 58px; padding: 7px 2px; border-radius: 0;
    opacity: 1; color: var(--tiho); font-size: 11px; line-height: 1.15; text-align: center; }
  .traka nav a .i { display: block; font-size: 17px; line-height: 1; }
  /* Tekuci ulaz se vidi bojom I linijom -- boja sama na 11 px ne nosi dovoljno. */
  .traka nav a.tekuca { background: none; color: var(--plava); font-weight: 700;
    box-shadow: inset 0 2px 0 var(--cijan); }
  .traka nav a:hover { background: none; }
  .traka nav a.samo-sirok { display: none; }
  .traka nav a.samo-usko { display: flex; }
  /* Sadrzaj mora da prodje ISPOD trake, ne iza nje. */
  main { padding-bottom: 86px; }

  /* ---- pretraga ----
     Polje ide preko cele sirine i dobija svoju metu; 16 px iz istog razloga kao kod ostalih
     polja (ispod toga Safari zumira stranu na fokus). Dugme „Nadji" ostaje uz polje --
     tastatura telefona ionako nudi „Idi", ali dugme mora da postoji za onog ko je ne koristi. */
  .pretraga { gap: 8px; margin-bottom: 12px; }
  .pretraga input[type="search"] { flex: 1 1 auto; max-width: none; min-height: 46px; font-size: 16px; }
  .pretraga button { min-height: 46px; }
  .pretraga-rezultat { margin: -4px 0 12px; }
  .pretraga-rezultat .ponisti { display: inline-block; padding: 8px 0; margin-left: 12px; }

  /* ---- „Danas" ---- */
  .potez { padding: 11px 13px; gap: 2px 10px; }
  .potez .ik { width: 30px; height: 30px; }

  /* ---- plocice: dve u redu ----
     `auto-fit, minmax(180px, ...)` na 362 px daje jednu kolonu, pa je cetvoro plocica
     visoko 380 px -- ceo prvi ekran ode na zaglavlje. */
  .plocice { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
  .plocica { padding: 10px 12px; }
  .plocica .v { font-size: 21px; }
  .plocica .k { font-size: 10px; letter-spacing: .07em; }

  /* ---- vrh strane i dugmad ---- */
  .vrh { gap: 10px; margin-bottom: 14px; }
  .vrh .radnje { margin-left: 0; width: 100%; }
  .vrh .radnje > * { flex: 1 1 0; text-align: center; }
  button, .dugme { min-height: 44px; padding: 10px 14px; }

  /* ---- spiskovi i dnevnik: red postaje kartica ----
     Omotac gubi okvir i skrol: okvir sada nosi svaka kartica, a skrola nema sta da bude. */
  .tabela-omot { overflow-x: visible; background: none; border: 0; border-radius: 0; }
  table.spisak, table.dnevnik { display: block; background: none; border: 0; font-size: 14px; }
  table.dnevnik.siroka { min-width: 0; }
  table.spisak tbody, table.dnevnik tbody { display: block; }
  /* `flex` a ne `block` -- samo tako naziv kupca sme da bude prvi i kad je u tabeli druga
     kolona (Dnevnik: Kada, Kupac, ...). */
  table.spisak tr, table.dnevnik tr { display: flex; flex-direction: column;
    background: var(--karta); border: 1px solid var(--linija); border-radius: 10px;
    padding: 12px 14px; margin-bottom: 10px; }
  /* Zaglavlje kolona nestaje -- njegov tekst sada nosi svaka celija kroz `data-labela`. */
  table.spisak tr:first-child, table.dnevnik tr:first-child { display: none; }
  table.spisak th, table.dnevnik th { display: none; }
  table.spisak td, table.dnevnik td { display: block; padding: 0; border: 0; }
  table.spisak tr:last-child td, table.dnevnik tr:last-child td { border-bottom: 0; }
  /* Ivica ide na CELIJU SA LABELOM, ne na `td + td`: u Dnevniku je naziv kupca druga
     celija a prvi red kartice, pa bi `td + td` ostavio ivicu iznad naslova. */
  table.spisak td[data-labela], table.dnevnik td[data-labela] {
    margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--linija-tanka); }
  table.spisak td[data-labela]::before, table.dnevnik td[data-labela]::before {
    content: attr(data-labela); display: inline-block; min-width: 112px; padding-right: 10px;
    font-size: 11px; text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
    color: var(--tiho); vertical-align: baseline; }
  /* Naziv kupca je naslov kartice: prvi, veci, bez labele i bez ivice. */
  table.spisak td.c-kupac, table.dnevnik td.c-kupac { order: -1; font-size: 15px;
    margin: 0; padding: 0; border: 0; }
  table.spisak td.c-kupac::before, table.dnevnik td.c-kupac::before { content: none; }
  /* Naziv kupca je i JEDINA veza na karticu instalacije, pa mora da bude meta za prst:
     go `<a>` je visok 20 px. Padding ide gore-dole, a kartica odozgo gubi isto toliko
     razmaka da naslov ne bi visio. */
  table.spisak tr, table.dnevnik tr { padding-top: 2px; }
  table.spisak td.c-kupac .naziv, table.dnevnik td.c-kupac .naziv,
  /* `:not(.red-sazetak)` -- ovo pravilo je pisano za NASLOV kartice, ali hvata svaki `<a>`
     u celiji kupca. Kad je sazetak dobio svoju vezu, i on je postao visok 44 px, pa je
     kartica rasla za punu metu dvaput. Naslov ostaje meta, sazetak je prati. */
  table.spisak td.c-kupac > a:not(.red-sazetak),
  table.dnevnik td.c-kupac > a:not(.red-sazetak) {
    display: flex; align-items: center; min-height: 44px; line-height: 1.35; }
  .traka .znak { padding: 11px 0; }
  /* Sirine pisane za kolone u kartici nemaju smisla. */
  .spisak td.koriscenje { min-width: 0; }
  .spisak td.koriscenje .spark { width: 100%; max-width: 220px; height: 30px; }
  .spisak td.novac-c, .spisak td.tisina { white-space: normal; }
  /* Izabran red: boji se cela kartica, ne celija -- celija je sada ceo red kartice. */
  .spisak tr.red-izabran { border-color: var(--cijan); background: var(--plava-bleda); }
  .spisak tr.red-izabran td { background: none; }
  /* Veze u kartici kupca su jedini ulaz u obrasce sa ovog ekrana -- dobijaju svoju metu. */
  /* Veze reda su na telefonu jedini ulaz u obrasce (Izmeni, Zatvori probu, Listic za
     predaju), a kao goli linkovi su visoki 19 px. U kartici ima mesta, pa dobijaju oblik
     dugmeta: podvucena rec sa razmakom od 12 px do podvlake izgleda kao greska u prelomu,
     a i dalje je meta koju palac promasi. */
  .veze-reda { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .veze-reda a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px;
    border: 1px solid var(--linija); border-radius: 8px; background: var(--karta); font-size: 13px; }
  .veze-reda a + a { margin-left: 0; }
  .zahtev-radnje { margin-top: 8px; }
  /* Radnje nad zahtevom su POST obrasci, pa su dugmad -- na siroko im je dat izgled veze
     da ne razvuku red tabele. U kartici reda nema, pa se vracaju u dugmad: „Otkazi" kao
     veza je meta od 34x19 px. */
  .zahtev-radnje { display: flex; flex-wrap: wrap; gap: 8px; }
  .zahtev-radnje form + form { margin-left: 0; }
  .zahtev-radnje button { min-height: 44px; padding: 10px 14px; font-size: 13px;
    border: 1px solid var(--linija); border-radius: 8px; background: var(--karta); }

  /* ---- spisak Instalacija: tri reda po kupcu ----
     POVOD. Posle prelaska na kartice (PR #1125) jedan kupac je bio visok 352-432 px -- pola
     ekrana -- pa je spisak od 14 kupaca bio 6 778 px, osam ekrana. Kartica je bila OKRENUTA
     TABELA: svih sedam kolona, uvek, i kad su prazne.

     Sada su tri reda: naziv, adresa, sazetak. Sest kolona se ne crta, ali se NE GUBI --
     svaka od njih stoji na kartici instalacije (Nalozi, Licenca, Cenovnik, Koriscenje,
     Verzija), a i naslov i sazetak su veze ka njoj. Brana `konzola-spisak-sazetak-test.js`
     to i tvrdi; bez te tvrdnje bi ovo bilo skrivanje, ne sazimanje.

     Vazi SAMO uz klasu `sazeto`, koju nosi tab Instalacije. Ostala tri taba imaju kolone
     koje kartica jos ne pokriva, pa tamo kartica i dalje nosi svih sedam redova. */
  table.spisak.sazeto td[data-labela] { display: none; }
  table.spisak.sazeto tr { padding: 0 14px 9px; margin-bottom: 8px; }
  table.spisak.sazeto .adresa { margin-bottom: 2px; }
  table.spisak.sazeto .red-sazetak { display: flex; align-items: baseline; flex-wrap: wrap;
    gap: 0 6px; padding: 5px 0 1px; font-size: 13.5px;
    color: var(--mastilo); text-decoration: none; }
  /* Tacka razdvajanja je tisa od svega sto razdvaja -- inace se cita kao sadrzaj. */
  table.spisak.sazeto .red-sazetak > i { font-style: normal; color: var(--linija); }
  table.spisak.sazeto .red-sazetak .tiho { color: var(--tiho); }
  /* Strelica kaze da se red OTVARA. Stoji uz desnu ivicu, gde je i palac. */
  table.spisak.sazeto .red-sazetak .ka-kartici { margin-left: auto; align-self: center;
    color: var(--jos-tise); font-size: 19px; line-height: 1; }
  /* Red koji nesto trazi ima svoju ivicu -- boja u sazetku se vidi tek kad se procita.

     ARGUMENT SELEKTORA MORA DA POCNE OD SAZETKA. Prva verzija je glasila `tr:has(.pazi-tekst)`
     i bojila je SVAKU karticu: iste klase nose i celije kolona koje su ovde `display: none`,
     a `:has()` ne mari za vidljivost -- element je i dalje u dokumentu. Mereno na snimku:
     sedam od sedam kartica sa zutom ivicom, ukljucujuci one kojima ne fali nista. */
  table.spisak.sazeto tr:has(.red-sazetak .lose-tekst) { border-left: 4px solid var(--crvena); }
  table.spisak.sazeto tr:has(.red-sazetak .pazi-tekst) { border-left: 4px solid var(--zuta); }
  table.spisak.sazeto tr:has(.red-sazetak .tisina-duga) { border-left: 4px solid var(--crvena); }

  /* ---- Probe u toku: red se SIRI NA MESTU ----
     POVOD. Red probe u toku je bio 482 px -- najvisi red u celoj konzoli -- jer nosi sest
     kolona i tri dugmeta. Tri probe su 1 446 px, skoro dva ekrana.

     RAZLIKA OD OSTALIH TABOVA. Tamo se sazeti red sklanja u vezu ka kartici kupca, jer sve
     sklonjeno stoji na toj kartici. Ovde ne stoji: dan probe, puls i tisina su podaci o
     PROBI, a proba je red u svojoj tabeli. Zato se ovde nista ne salje na drugi ekran nego
     se red otvara na mestu: tap vraca svih pet kolona i sva tri dugmeta, tu gde si stao.

     ZASTO NE „dugmad na karticu kupca". Prebrojani ulazi pre izmene: „Zatvori probu" ima dva
     (Probe, kartica instalacije), „Izmeni probu" dva (Probe, listic), a „Listic za predaju"
     SAMO JEDAN -- ovaj red. Sklanjanje dugmadi bi ostavilo listic bez ijednog ulaza, a to je
     ekran koji se stampa i predaje kupcu. Ista klasa greske se na ovom tabu vec desila: do
     15.09.2026. je „Zatvori probu" postojalo samo na kartici instalacije, pa se proba upisana
     unazad nije mogla zatvoriti nikako.

     Bez ijedne skripte -- `details` drzi stanje, `:has()` vraca celije koje su van njega. */
  table.spisak.probe-sire .red-otvarac { display: block; }
  table.spisak.probe-sire summary { display: flex; align-items: center; gap: 8px;
    min-height: 44px; cursor: pointer; list-style: none; }
  table.spisak.probe-sire summary::-webkit-details-marker { display: none; }
  table.spisak.probe-sire .sire-znak { margin-left: auto; color: var(--jos-tise);
    font-size: 19px; line-height: 1; }
  table.spisak.probe-sire .sire-znak::before { content: "\2304"; }
  table.spisak.probe-sire .red-otvarac[open] .sire-znak::before { content: "\2303"; }
  /* Otvoren red: sazeta linija se povlaci -- isti podatak stoji razlozen po kolonama ispod.
     Strelica ostaje i sama je meta za sklapanje. */
  table.spisak.probe-sire .red-otvarac[open] .red-sazetak { display: none; }
  /* Bez ovoga otvoren red ima prazan pojas: traka od 44 px u kojoj je ostala sama
     strelica. Meta ostaje dovoljna (36 px puna sirina reda), a praznina nestaje. */
  table.spisak.probe-sire .red-otvarac[open] summary { min-height: 36px; margin-top: -8px; }
  /* Celije i veze su VAN `details`, pa ih vraca `:has()` sa reda. Argument pocinje od
     `.red-otvarac[open]`, dakle od stanja, a ne od klase koju nose i sakrivene celije. */
  table.spisak.probe-sire tr:has(.red-otvarac[open]) td[data-labela] { display: block; }
  table.spisak.probe-sire .veze-reda { display: none; }
  table.spisak.probe-sire tr:has(.red-otvarac[open]) .veze-reda { display: flex; }
  /* Kontakt se cita tek kad se kartica otvori; sklopljena nosi samo poddomen, po kom se
     proba prepoznaje. */
  table.spisak.probe-sire .adresa-kontakt { display: none; }
  table.spisak.probe-sire tr:has(.red-otvarac[open]) .adresa-kontakt { display: inline; }

  /* ---- sklopivi spiskovi (Koriscenje, Ugasene) ----
     Ispod otvorenog zaglavlja vise ne stoji tabela sa svojom ivicom nego kartice, pa
     zaglavlje vraca svoju donju ivicu -- inace visi u vazduhu. */
  .spisak-omot > summary, .ugasene-omot > summary { flex-wrap: wrap; gap: 8px; min-height: 44px; }
  .spisak-omot[open] > summary, .ugasene-omot[open] > summary {
    border-radius: 10px; border-bottom-color: var(--linija); margin-bottom: 10px; }
  .spisak-omot[open] .tabela-omot, .ugasene-omot[open] .tabela-omot { border-top: 0; }
  .spisak-omot > summary .uputstvo, .ugasene-omot > summary .uputstvo { margin-left: 0; }

  /* ---- obrasci ----
     16 px na poljima nije estetika: ispod toga Safari na iPhone-u zumira stranu na fokus
     i vise se ne vraca, pa covek ostatak obrasca popunjava u uvecanom prikazu. */
  .obrazac { padding: 14px; }
  /* Dugme i objasnjenje uz njega stoje na sirokom ekranu u istom redu. U 360 px tekst
     tece OKO dugmeta i izgleda kao greska u prelomu, pa ide u svoj red ispod. */
  .obrazac > button[type="submit"] { width: 100%; }
  .obrazac > button[type="submit"] + .tiho { display: block; margin-top: 8px; font-size: 13px; }
  .polja { grid-template-columns: 1fr; gap: 12px; }
  .polja input, .polja select, .polja textarea { min-height: 44px; font-size: 16px; }
  .prijava input { min-height: 44px; font-size: 16px; }
  .prijava { padding: 22px 18px; }

  /* ---- unos cenovnika ----
     Cetiri polja za unos u 360 px ne mogu jedno pored drugog. Labela ovde stoji IZNAD
     polja, ne pored: polje je pune sirine, pa pored njega nema mesta ni za sta. */
  table.cenovnik-unos { display: block; font-size: 14px; }
  table.cenovnik-unos tbody { display: block; }
  table.cenovnik-unos tr { display: block; background: var(--karta);
    border: 1px solid var(--linija); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
  table.cenovnik-unos tr:first-child { display: none; }
  table.cenovnik-unos th { display: none; }
  table.cenovnik-unos td { display: block; padding: 6px 0; border: 0; }
  table.cenovnik-unos td::before { content: attr(data-labela); display: block; margin-bottom: 4px;
    font-size: 11px; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; color: var(--tiho); }
  table.cenovnik-unos input { min-height: 44px; font-size: 16px; }
  .cenovnik-slanje { padding: 12px 14px; }
  .cenovnik-slanje > div { flex: 1 1 100%; }

  /* ---- Koriscenje: traka perioda ----
     Obrazac „Izaberi period" je na sirokom ekranu `position: absolute` i lebdi ispod
     dugmeta. U 360 px bi izasao iz ekrana desnom ivicom, pa ovde ulazi u tok strane. */
  .traka-koriscenje { flex-direction: column; align-items: stretch; gap: 10px; }
  .traka-koriscenje .radnje { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .period-izbor { width: 100%; }
  .period-izbor > summary { min-height: 44px; display: flex; align-items: center; }
  .period-izbor form { position: static; width: 100%; flex-wrap: wrap; box-shadow: none; }
  .period-izbor form label { flex: 1 1 140px; }
  .period-izbor form input { min-height: 44px; font-size: 16px; }
  .dvokolona .panel { padding: 12px 14px; }
  table.dani { font-size: 12.5px; }
  table.dani td, table.dani th { padding: 8px 6px; }
  table.dani td.stub-celija { width: 28%; }

  /* ---- trake radnji (proba, demo skup) ---- */
  .traka-probe, .traka-demo { flex-direction: column; align-items: stretch; gap: 10px; }
  .traka-probe .radnje, .traka-demo .radnje { flex-wrap: wrap; }
  .traka-probe .radnje > *, .traka-demo .radnje > * { flex: 1 1 140px; }
  .traka-demo .radnje .dugme { min-width: 0; }
  .demo-napredak .ispis { font-size: 11px; max-height: 200px; }

  /* ---- kartica instalacije ---- */
  /* Rok levo, dugmad desno ne staje u 360 px -- idu jedno ispod drugog, a „Pozovi" preko
     cele sirine: to je dugme zbog kog se ova traka i otvara sa telefona. */
  .traka-kontakt { flex-direction: column; align-items: stretch; gap: 10px; }
  .traka-kontakt .radnje { width: 100%; }
  .traka-kontakt .radnje .dugme { flex: 1 1 140px; text-align: center; }
  .traka-kontakt .ko { flex-basis: 100%; }
  .koriscenje-mera { grid-template-columns: 1fr; }
  .koriscenje-crtez { flex-direction: column; align-items: stretch; gap: 8px; }
  .koriscenje-crtez .spark { max-width: none; }
  .novac .razlika { min-width: 0; }
  .osnovica { margin-bottom: 16px; }
  .moduli-izbor .modul-red { padding: 8px 0; min-height: 44px; }
  /* Izbor instalacije uz probu: tri radio reda. Meta je cela `<label>`, ne kvadratic. */
  .polja .red-izbora { min-height: 44px; align-items: center; padding: 9px 0; }
  /* Veza „Nazad" je jedini izlaz iz detalja i obrazaca -- kao go link visoka je 17 px. */
  .nazad { margin: 0 0 2px; }
  .nazad a { display: inline-block; padding: 13px 10px 13px 0; }

  /* ---- listic za predaju ----
     Na papiru ostaje dvokolonski (print blok na kraju fajla vraca `repeat(2, 1fr)`);
     ovde se prazna polja za rukopis slazu jedno ispod drugog. */
  .listic { padding: 18px 16px; }
  .listic-zaglavlje { font-size: 17px; }
  .listic-polja { grid-template-columns: 1fr; }
  .listic-koraci > li { padding-left: 44px; }
  .listic-koraci > li::after { left: 22px; }
  .listic-nalozi { font-size: 13px; }
  .listic-nalozi th, .listic-nalozi td { padding: 6px 5px; }

  /* ---- uputstvo na ekranu Probe ---- */
  details.uputstvo-probe > summary { min-height: 44px; display: flex; align-items: center; }
  details.uputstvo-probe > p, details.uputstvo-probe > ol { margin: 12px; }

  /* ---- zaglavlje kartice ----
     Delovi se prelamaju u dva reda umesto da beze iza desne ivice (brana konzola-mobilni
     meri svaki element). Mete su 44 px. */
  .kartica-glava { margin: -16px -14px 14px; padding: 12px 14px 0; }
  .kartica-naslov .uz-stanje { margin-left: 0; }
  .kartica-naslov .uz-stanje button { min-height: 44px; }
  nav.delovi a { min-height: 44px; display: flex; align-items: center; padding: 6px 10px; }

  /* ---- Dnevnik: filter preko cele sirine, mete 44 ---- */
  .dnevnik-filter label { flex: 1 1 100%; }
  .dnevnik-filter select { max-width: none; width: 100%; min-height: 44px; font-size: 16px; }
  .dnevnik-filter button, .strane-dnevnika .dugme { min-height: 44px; }
  .strane-dnevnika .koje { flex: 1 1 100%; }

  /* ---- Koriscenje: Detalj (16.10.2026) ----
     Kolona „Promoterke" je dnevnu tabelu podigla na 346 px najmanje sirine (pet kolona po
     24 px paddinga), a panel na 360 px telefonu ima 300 px unutra. Tabela je gurala panel,
     panel kolonu mreze, i oba panela su bezala iza desne ivice -- stubici „Naloga u danu" i
     pola legende prijava se nisu videli. Uzi padding celija vraca tabelu u panel; ostatak
     (manji padding panela) je rezerva za dug datum i trocifren broj radnji. */
  .dvokolona .panel { padding: 12px; }
  .dvokolona .panel table.dani th, .dvokolona .panel table.dani td { padding: 8px 5px; }
  .dvokolona .panel table.dani th { font-size: 10px; letter-spacing: .02em; }

  /* ---- Obaveze i uplate (05.11.2026): blokovi jedan ispod drugog, mete 44 ---- */
  .salda { grid-template-columns: 1fr; }
  .saldo-blok { padding: 12px; }
  .saldo-red .obrisi-uplatu button { min-width: 44px; min-height: 44px; }
  details.upisi-uplatu > summary { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .izbor-vrste label { min-height: 44px; }
  .salda-tabela .saldo-iznos { text-align: left; }
  .salda-tabela .saldo-vr { display: inline-block; vertical-align: top; }

  /* ---- Saveti (10.11.2026): kartica saveta u dva reda, ne u pet ----
     Opsta kartica daje svakoj celiji svoj red sa labelom (~190 px po savetu). Savet ima tri
     kratka podatka (stanje, za koga, koliko ceka), pa idu u JEDAN red ispod naslova, bez
     labela; „Čeka" nosi rec ispred broja, jer bez nje goli broj nista ne kaze. */
  table.spisak.saveti-spisak tr { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding-bottom: 10px; }
  table.spisak.saveti-spisak td.c-kupac { flex: 1 0 100%; }
  table.spisak.saveti-spisak td[data-labela] { margin: 0; padding: 0; border: 0; font-size: 13px; }
  table.spisak.saveti-spisak td[data-labela]::before { content: none; }
  table.spisak.saveti-spisak td[data-labela="Za"] { order: 2; }
  table.spisak.saveti-spisak td.broj-kol { order: 3; text-align: left; color: var(--tiho); }
  table.spisak.saveti-spisak td.broj-kol::before { content: "čeka "; display: inline; min-width: 0; padding: 0;
    font: inherit; text-transform: none; letter-spacing: 0; }
  table.spisak.saveti-spisak tr.izabran td { background: none; box-shadow: none; }
}

@media print {
  .traka, .ne-stampa, .poruka { display: none !important; }
  body { background: #fff; }
  main { max-width: none; padding: 0; }
  .listic { border: 0; border-radius: 0; padding: 0; margin: 0; max-width: none; font-size: 11pt; }
  /* Drugi list je onaj koji se predaje -- mora da pocne na svom papiru, inace se preda i
     polovina nase pripreme. */
  .listic-kupcu { break-before: page; padding-top: 4mm; }
  .listic-koraci > li, .listic-polja, .listic-nalozi, .listic-upozorenje, .listic-savet { break-inside: avoid; }
  .listic-polja { grid-template-columns: repeat(2, 1fr); }
  a[href]::after { content: ""; }
}

/* ---- Klijenti sa vise proizvoda (09.11.2026, prikazi/klijenti.php i klijent.php) ---- */
.plocica .v small { font-size: 13px; font-weight: 400; }
.klijent-proizvodi { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 20px; }
.klijent-proizvod h2 { margin: 0 0 10px; font-size: 17px; }
.klijent-instanca { border-top: 1px solid var(--linija); padding-top: 10px; margin-top: 10px; }
.klijent-instanca:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.klijent-instanca-glava { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; }
dl.klijent-licenca { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0 0 8px; font-size: 14px; }
dl.klijent-licenca dt { color: var(--tiho); }
dl.klijent-licenca dd { margin: 0; }
code.pravo { display: inline-block; font-size: 12px; padding: 1px 6px; margin: 0 4px 4px 0; border-radius: 6px;
  background: var(--plava-bleda); border: 1px solid var(--linija); }
.klijent-izvor { font-size: 12px; margin: 0 0 8px; }
.klijent-portal-stanje { font-size: 13px; margin: 0 0 8px; }
.klijent-isteklo { color: var(--crvena); font-weight: 700; }
.klijent-instanca .radnje { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
form.u-redu { display: inline; margin: 0; }
.klijent-prava { border: 1px solid var(--linija); border-radius: 8px; padding: 8px 12px; }
.klijent-prava .red-izbora { display: block; margin: 4px 0; color: var(--mastilo); }
.klijent-prava .red-izbora input { width: auto; display: inline-block; margin: 0 6px 0 0; }

/* ---- Saveti: spisak + bocni panel (10.11.2026, prikazi/saveti.php) ----
   Mokap `docs/saveti-spisak-mokap.html`. Do ovog dana je uz svaki savet stajala cela tabela
   instalacija (2 saveta = 2289 px). Sada jedan red po savetu, a sve ostalo u panelu izabranog.
   Svoje klase (`saveti-`, `savet-`): `.plocica`, `.spisak`, `.oznaka` dele svi ekrani konzole.

   Strana sa otvorenim panelom dobija siri `main` (1280 umesto 1080), da spisku ostane ~800 px.
   Panel je lepljiv i skroluje se sam, pa je slanje uvek na ekranu dok se spisak lista. */
main:has(.saveti-raspored.ima-panel) { max-width: 1280px; }
.saveti-raspored.ima-panel { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 18px; align-items: start; }
.saveti-uvod { margin-top: 0; }
.saveti-pretraga select { flex: none; padding: 9px 10px; border: 1px solid var(--linija); border-radius: 9px;
  font: inherit; background: var(--karta); color: var(--mastilo); }
.saveti-filteri { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.saveti-filteri .cip { border: 1px solid var(--linija); background: var(--karta); border-radius: 999px;
  padding: 5px 12px; font-size: 13px; color: var(--tiho); text-decoration: none; white-space: nowrap; }
.saveti-filteri .cip span { opacity: .7; margin-left: 2px; font-variant-numeric: tabular-nums; }
.saveti-filteri .cip:hover { border-color: var(--jos-tise); }
.saveti-filteri .cip.ukljucen { background: var(--plava); border-color: var(--plava); color: #fff; }
.saveti-spisak td { vertical-align: middle; }
.saveti-spisak td.c-kupac a { font-weight: 600; }
.saveti-spisak tr.izabran td { background: var(--plava-bleda); }
.saveti-spisak tr.izabran td:first-child { box-shadow: inset 3px 0 0 var(--plava); }
.saveti-spisak .broj-kol, .saveti-spisak th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.savet-znak.pazi { background: var(--zuta-bleda); border-color: var(--zuta); color: var(--zuta); }
.savet-znak.lose { background: var(--crvena-bleda); border-color: var(--crvena); color: var(--crvena); }
.savet-znak.dobro { background: var(--zelena-bleda); border-color: var(--zelena); color: var(--zelena); }
.savet-znak.plavo { background: var(--plava-bleda); border-color: var(--plava); color: var(--plava); }
.savet-traka { display: inline-block; width: 64px; height: 6px; border-radius: 3px; background: var(--linija-tanka);
  vertical-align: middle; margin-right: 6px; overflow: hidden; }
.savet-traka i { display: block; height: 100%; background: var(--zelena); }
.saveti-napomena { font-size: 12.5px; margin: 8px 0 0; }
.saveti-bez-brojeva { margin-top: 18px; }
.saveti-bez-brojeva summary, .savet-sklopljeno summary { cursor: pointer; font-size: 14px; }
.saveti-bez-brojeva .tabela-omot { margin-top: 8px; }

.savet-panel { position: sticky; top: calc(var(--traka-v) + 12px); max-height: calc(100vh - var(--traka-v) - 24px);
  overflow: auto; background: var(--karta); border: 1px solid var(--linija); border-radius: 12px; padding: 16px 18px;
  box-shadow: 0 6px 18px rgba(1, 42, 107, .06); }
.savet-panel .nazad { display: none; }
.savet-zatvori { position: absolute; top: 10px; right: 14px; font-size: 18px; color: var(--jos-tise); text-decoration: none; }
.savet-zatvori:hover { color: var(--mastilo); }
.savet-panel .savet-naslov { font-size: 17px; text-transform: none; letter-spacing: 0; color: var(--mastilo);
  margin: 0 26px 4px 0; line-height: 1.3; }
.savet-za, .savet-meta { margin: 0; font-size: 13px; }
.plocice.savet-plocice { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 12px 0; }
.savet-plocice .plocica { padding: 7px 9px; }
.savet-plocice .plocica .v { font-size: 19px; }
.savet-radnje { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.savet-radnje form { margin: 0; }
.savet-radnje .dugme { text-decoration: none; color: var(--plava); }
.savet-pre { font-size: 12.5px; margin: 6px 0 0; }
.savet-po-ulozi { font-size: 13.5px; margin: 12px 0 0; }
.savet-panel .savet-podnaslov { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--tiho);
  margin: 18px 0 8px; }
/* Lepljivo zaglavlje tabele je racunato na traku strane; u panelu koji se sam skroluje
   ostalo bi visiti `--traka-v` ispod vrha panela. */
.savet-panel .tabela-omot th { position: static; }
.savet-instalacije td { font-size: 14px; }
.savet-instalacije .oznaka { white-space: nowrap; }
.savet-red-radnje form { display: inline; margin: 0 0 0 6px; }
.savet-sklopljeno { margin: 8px 0 0; font-size: 13.5px; }
.savet-sklopljeno ul { margin: 6px 0 0; padding-left: 18px; }
.savet-proba { padding: 12px; }
.savet-proba .polja { grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }

/* Telefon i usko: panel ZAMENJUJE spisak (isti `&savet=`), sa „← Saveti" umesto ✕. `screen`,
   da se blok ne upali u stampi (A4 ~710 px). */
@media screen and (max-width: 900px) {
  .saveti-raspored.ima-panel { display: block; }
  .saveti-raspored.ima-panel .saveti-lista { display: none; }
  .savet-panel { position: static; max-height: none; overflow: visible; border: 0; box-shadow: none; padding: 0; background: none; }
  .savet-panel .nazad { display: block; }
  .savet-zatvori { display: none; }
  .savet-panel .savet-naslov { margin-right: 0; font-size: 19px; }
  .plocice.savet-plocice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}