/* ===================== osnovne promenljive ===================== */
:root{
  --pozadina:#f2f4f7;
  --povrsina:#ffffff;
  --ivica:#dde1e8;
  --ivica-jaka:#c6ccd8;
  --tekst:#182230;
  --tekst-slab:#667085;
  --primarna:#1d4ed8;
  --primarna-tamna:#1e40af;
  --primarna-svetla:#eff4ff;
  --zelena:#067647;
  --zelena-svetla:#ecfdf3;
  --crvena:#b42318;
  --crvena-svetla:#fef3f2;
  --zuta:#b54708;
  --zuta-svetla:#fffaeb;
  --senka:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --senka-jaka:0 8px 24px rgba(16,24,40,.14);
  --radijus:10px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--pozadina); color:var(--tekst); font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
.skriveno{display:none !important}
a{color:var(--primarna); text-decoration:none}

/* ===================== prijava ===================== */
.prijava-omot{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#1d4ed8 0%,#0f172a 100%); padding:20px;
}
.prijava-kartica{
  background:var(--povrsina); padding:32px; border-radius:14px; width:100%; max-width:380px;
  box-shadow:var(--senka-jaka); display:flex; flex-direction:column; gap:14px;
}
.prijava-logo{text-align:center; line-height:1; display:flex; justify-content:center}
.prijava-kartica h1{margin:0; text-align:center; font-size:24px}
.prijava-podnaslov{margin:0 0 8px; text-align:center; color:var(--tekst-slab); font-size:13px}
.prijava-kartica label{display:flex; flex-direction:column; gap:5px; font-weight:600; font-size:13px}

/* ===================== zaglavlje ===================== */
.zaglavlje{
  background:var(--povrsina); border-bottom:1px solid var(--ivica);
  display:flex; align-items:center; gap:24px; padding:0 20px; height:58px;
  position:sticky; top:0; z-index:50; box-shadow:var(--senka);
}
.brend{font-weight:700; font-size:16px; white-space:nowrap; display:flex; align-items:center; gap:8px}
.meni{display:flex; gap:4px; flex:1; overflow-x:auto}
.meni a{
  padding:8px 14px; border-radius:8px; color:var(--tekst-slab); font-weight:600;
  white-space:nowrap; transition:.12s;
}
.meni a:hover{background:var(--pozadina); color:var(--tekst)}
.meni a.aktivno{background:var(--primarna-svetla); color:var(--primarna)}
.korisnik-blok{display:flex; align-items:center; gap:10px; color:var(--tekst-slab); white-space:nowrap}

/* ===================== traka pretplate ===================== */
.traka-pretplate{
  background:var(--zuta-svetla); color:var(--zuta); border-bottom:1px solid #fedf89;
  padding:9px 20px; font-size:13px; font-weight:600; text-align:center;
}
.traka-pretplate.hitno{background:var(--crvena-svetla); color:var(--crvena); border-bottom-color:#fecdca}

/* ===================== sadržaj ===================== */
main{padding:20px; max-width:1600px; margin:0 auto}
.kartica{
  background:var(--povrsina); border:1px solid var(--ivica); border-radius:var(--radijus);
  box-shadow:var(--senka); margin-bottom:18px; overflow:hidden;
}
.kartica-zaglavlje{
  padding:14px 18px; border-bottom:1px solid var(--ivica);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.kartica-zaglavlje h2{margin:0; font-size:17px; flex:1}
.kartica-telo{padding:18px}
.razmak{flex:1}

/* ===================== dugmad ===================== */
.dugme{
  border:1px solid var(--ivica-jaka); background:var(--povrsina); color:var(--tekst);
  padding:8px 14px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer;
  font-family:inherit; transition:.12s; white-space:nowrap;
}
.dugme:hover{background:#f7f8fa}
.dugme:disabled{opacity:.5; cursor:not-allowed}
.dugme-primarno{background:var(--primarna); border-color:var(--primarna); color:#fff}
.dugme-primarno:hover{background:var(--primarna-tamna)}
.dugme-uspeh{background:var(--zelena); border-color:var(--zelena); color:#fff}
.dugme-uspeh:hover{filter:brightness(.92)}
.dugme-upozorenje{background:var(--zuta); border-color:var(--zuta); color:#fff}
.dugme-upozorenje:hover{filter:brightness(.92)}
.dugme-opasno{background:var(--crvena); border-color:var(--crvena); color:#fff}
.dugme-opasno:hover{filter:brightness(.92)}
.dugme-tiho{background:transparent; border-color:transparent; color:var(--tekst-slab)}
.dugme-tiho:hover{background:var(--pozadina); color:var(--tekst)}
.dugme-malo{padding:4px 9px; font-size:12px}
.dugme-siroko{width:100%; padding:10px; font-size:14px}
.grupa-dugmadi{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
td .grupa-dugmadi{flex-wrap:nowrap}

/* ===================== polja ===================== */
input,select,textarea{
  font-family:inherit; font-size:13px; padding:8px 10px; border:1px solid var(--ivica-jaka);
  border-radius:8px; background:#fff; color:var(--tekst); width:100%;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--primarna); box-shadow:0 0 0 3px var(--primarna-svetla);
}
input[type=checkbox]{width:16px; height:16px; accent-color:var(--primarna); cursor:pointer}
label.polje{display:flex; flex-direction:column; gap:5px; font-weight:600; font-size:13px}
label.polje .pomoc{font-weight:400; color:var(--tekst-slab); font-size:11.5px}
.mreza-forme{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; align-items:end}
.puna-sirina{grid-column:1/-1}
.traka-alata{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end}
.traka-alata label.polje{width:auto; min-width:150px}
.inline-cek{display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; padding-bottom:8px}
.inline-cek input{width:16px}

/* ===================== tabela ===================== */
.tabela-omot{overflow:auto; max-height:calc(100vh - 300px)}
table.tabela{border-collapse:separate; border-spacing:0; width:100%; font-size:13px}
table.tabela th, table.tabela td{padding:8px 10px; text-align:left; border-bottom:1px solid var(--ivica); vertical-align:middle}
table.tabela thead th{
  background:#f8f9fb; position:sticky; top:0; z-index:10; font-size:12px;
  text-transform:uppercase; letter-spacing:.03em; color:var(--tekst-slab);
  border-bottom:1px solid var(--ivica-jaka); white-space:nowrap; user-select:none;
}
table.tabela thead th.sortabilno{cursor:pointer}
table.tabela thead th.sortabilno:hover{color:var(--tekst)}
table.tabela thead tr.red-filtera th{top:34px; padding:5px 6px; background:#fff; z-index:9}
table.tabela thead tr.red-filtera input,
table.tabela thead tr.red-filtera select{padding:5px 7px; font-size:12px; font-weight:400; text-transform:none; letter-spacing:0}
table.tabela tbody tr:hover{background:#f8fafc}
table.tabela tbody tr.izabran{background:var(--primarna-svetla)}
table.tabela tbody tr.izabran:hover{background:#e3ecff}
td.desno, th.desno{text-align:right}
td.centar, th.centar{text-align:center}
td.iznos{font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap}
td.nowrap, th.nowrap{white-space:nowrap}
.prazna-tabela{padding:36px; text-align:center; color:var(--tekst-slab)}

/* redovi po statusu */
tr.red-danas td{background:var(--zuta-svetla)}
tr.red-danas:hover td{background:#fff3d6}
tr.red-kasni td{background:var(--crvena-svetla)}
tr.red-kasni:hover td{background:#fde3e1}
tr.red-unovcen td{color:var(--tekst-slab)}
tr.red-obrisan td{opacity:.55; text-decoration:line-through}

/* ===================== oznake ===================== */
.oznaka{
  display:inline-block; padding:2px 8px; border-radius:999px; font-size:11.5px; font-weight:700;
  white-space:nowrap; border:1px solid transparent;
}
.oznaka-zelena{background:var(--zelena-svetla); color:var(--zelena); border-color:#abefc6}
.oznaka-zuta{background:var(--zuta-svetla); color:var(--zuta); border-color:#fedf89}
.oznaka-crvena{background:var(--crvena-svetla); color:var(--crvena); border-color:#fecdca}
.oznaka-siva{background:#f2f4f7; color:var(--tekst-slab); border-color:var(--ivica)}
.oznaka-plava{background:var(--primarna-svetla); color:var(--primarna); border-color:#c7d7fe}

/* ===================== statistika ===================== */
.mreza-statistike{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:18px}
.stat{background:var(--povrsina); border:1px solid var(--ivica); border-radius:var(--radijus); padding:14px 16px; box-shadow:var(--senka)}
.stat .oznaka-stat{font-size:12px; color:var(--tekst-slab); font-weight:600; text-transform:uppercase; letter-spacing:.03em}
.stat .vrednost{font-size:22px; font-weight:700; margin-top:4px; font-variant-numeric:tabular-nums}
.stat .dodatak{font-size:12px; color:var(--tekst-slab); margin-top:2px}
.stat.naglaseno{border-left:3px solid var(--primarna)}

/* ===================== grafik ===================== */
.grafik-omot{padding:18px; overflow-x:auto}
.grafik-omot svg{display:block; min-width:100%}
.grafik-stubic{fill:var(--primarna); transition:.12s}
.grafik-stubic:hover{fill:var(--primarna-tamna)}
.grafik-stubic.danas{fill:var(--zuta)}
.grafik-stubic.proslo{fill:var(--crvena)}
.grafik-osa{stroke:var(--ivica-jaka); stroke-width:1}
.grafik-mreza{stroke:var(--ivica); stroke-width:1; stroke-dasharray:3 3}
.grafik-tekst{font-size:10.5px; fill:var(--tekst-slab)}
.grafik-vrednost{font-size:10.5px; fill:var(--tekst); font-weight:600}
.legenda{display:flex; gap:16px; flex-wrap:wrap; padding:0 18px 14px; font-size:12px; color:var(--tekst-slab)}
.legenda span{display:flex; align-items:center; gap:6px}
.legenda i{width:11px; height:11px; border-radius:3px; display:inline-block}

/* ===================== modal ===================== */
.modal-omot{
  position:fixed; inset:0; background:rgba(16,24,40,.5); display:flex; align-items:center;
  justify-content:center; z-index:200; padding:20px;
}
.modal{
  background:var(--povrsina); border-radius:12px; width:100%; max-width:520px;
  box-shadow:var(--senka-jaka); max-height:90vh; display:flex; flex-direction:column;
}
.modal.siroki{max-width:820px}
.modal-zaglavlje{padding:16px 18px; border-bottom:1px solid var(--ivica); display:flex; align-items:center}
.modal-zaglavlje h3{margin:0; font-size:16px; flex:1}
.modal-zatvori{background:none; border:none; font-size:24px; cursor:pointer; color:var(--tekst-slab); line-height:1; padding:0 4px}
.modal-telo{padding:18px; overflow:auto}
.modal-podnozje{padding:14px 18px; border-top:1px solid var(--ivica); display:flex; gap:8px; justify-content:flex-end}

/* ===================== poruke ===================== */
.poruka-greska{background:var(--crvena-svetla); color:var(--crvena); padding:9px 12px; border-radius:8px; font-size:13px; border:1px solid #fecdca}
.poruka-info{background:var(--primarna-svetla); color:var(--primarna-tamna); padding:9px 12px; border-radius:8px; font-size:13px; border:1px solid #c7d7fe}
.obavestenje{
  position:fixed; bottom:22px; right:22px; background:#101828; color:#fff; padding:12px 18px;
  border-radius:9px; box-shadow:var(--senka-jaka); z-index:300; font-weight:600; font-size:13px;
  max-width:380px; animation:ulaz .18s ease-out;
}
.obavestenje.uspeh{background:var(--zelena)}
.obavestenje.greska{background:var(--crvena)}
@keyframes ulaz{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

.detalj-mreza{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px 20px}
.detalj-stavka .oznaka-polja{font-size:11.5px; color:var(--tekst-slab); text-transform:uppercase; letter-spacing:.03em; font-weight:600}
.detalj-stavka .vr{font-size:14px; font-weight:600; margin-top:1px}
.podnaslov{font-size:13px; font-weight:700; margin:18px 0 8px; padding-top:14px; border-top:1px solid var(--ivica)}
.stavka-istorije{padding:8px 0; border-bottom:1px dashed var(--ivica); font-size:12.5px}
.stavka-istorije:last-child{border-bottom:none}
.stavka-istorije .vreme{color:var(--tekst-slab); font-size:11.5px}

@media (max-width:900px){
  .zaglavlje{height:auto; flex-wrap:wrap; padding:10px 14px; gap:10px}
  .meni{order:3; flex:0 0 100%; width:100%; padding-bottom:2px}
  .korisnik-blok{margin-left:auto}
  main{padding:14px}
  .tabela-omot{max-height:none}
}
@media print{
  .zaglavlje,.traka-alata,.grupa-dugmadi,.red-filtera,.obavestenje{display:none !important}
  .kartica{box-shadow:none; border:none}
  .tabela-omot{max-height:none; overflow:visible}
}