:root { --zaglavlje: #1f4e79; --boja: #1f4e79; --siva: #f3f5f7; --ivica: #d5dae0; --tekst: #1d2733; }
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--tekst); background: #fff; }
main { padding: 1rem 1.25rem 3rem; max-width: 1600px; margin: 0 auto; }
h1 { margin: .4rem 0 1rem; font-size: 1.5rem; }
h1 small { color: #66717f; font-weight: 400; }
a { color: var(--boja); }

.traka { display: flex; align-items: center; background: var(--zaglavlje); color: #fff; padding: .5rem 1.25rem; gap: 1rem; flex-wrap: wrap; }
.traka .marka { font-size: 1.05rem; white-space: nowrap; display: inline-flex; align-items: center; gap: .5rem; }
.traka .marka img { border-radius: 6px; display: block; }
.traka-meni { display: flex; gap: .15rem; flex: 1 1 auto; flex-wrap: wrap; }
.traka-meni a { color: #fff; text-decoration: none; padding: .4rem .7rem; border-radius: 6px; opacity: .95; white-space: nowrap; }
.traka-meni a:hover { background: rgba(0, 0, 0, .15); }
.traka-meni a.aktivan { background: rgba(0, 0, 0, .25); font-weight: 600; }
.traka-desno { display: flex; align-items: center; gap: 1rem; }
.meni-dugme { display: none; }

form.inline { display: inline; margin: 0; }
button, .dugme { font: inherit; background: var(--boja); color: #fff; border: 0; border-radius: 6px; padding: .5rem .9rem; cursor: pointer; text-decoration: none; display: inline-block; }
button:hover, .dugme:hover { filter: brightness(1.12); }
.dugme.sekundarno { background: #fff; color: var(--boja); border: 1px solid var(--boja); }
button.link { background: none; color: inherit; padding: 0; text-decoration: underline; }
.traka button.link { color: #fff; }
button.opasno { color: #b3261e; }

input, select, textarea { font: inherit; padding: .45rem .6rem; border: 1px solid var(--ivica); border-radius: 6px; background: #fff; color: inherit; }
label { display: block; font-weight: 600; font-size: .9rem; }
label input, label textarea, label select { display: block; width: 100%; margin-top: .25rem; font-weight: 400; }
.kvacice label { display: inline-flex; align-items: center; gap: .4rem; margin-right: 1.5rem; }
.kvacice input { width: auto; margin: 0; }

.naslov-red { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; }
.filteri { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filteri input[type=search] { flex: 1 1 260px; }

.tabela-omot { overflow-x: auto; border: 1px solid var(--ivica); border-radius: 8px; }
.tabela { border-collapse: collapse; width: 100%; font-size: .9rem; }
.tabela th, .tabela td { padding: .5rem .65rem; border-bottom: 1px solid var(--ivica); text-align: left; vertical-align: top; }
.tabela th { background: var(--siva); white-space: nowrap; position: sticky; top: 0; }
.tabela th a { color: inherit; text-decoration: none; }
.tabela tbody tr:nth-child(even) { background: #fafbfc; }
.tabela td.broj { text-align: right; white-space: nowrap; }
.tabela td.akcije { white-space: nowrap; }
.tabela td.json { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; max-width: 320px; word-break: break-word; }
.prazno { text-align: center; color: #66717f; padding: 2rem; }

.strane { display: flex; gap: 1rem; justify-content: center; align-items: center; margin-top: 1rem; }

.forma { max-width: 900px; display: grid; gap: 1rem; }
.mreza { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.dugmad { display: flex; gap: .6rem; }

.greska { background: #fdecea; color: #8a1c14; border: 1px solid #f5c2be; padding: .6rem .8rem; border-radius: 6px; }
.ok { background: #e8f5e9; color: #1b5e20; border: 1px solid #b7dfb9; padding: .6rem .8rem; border-radius: 6px; }

body.prijava { background: var(--siva); display: grid; place-items: center; min-height: 100vh; }
.kartica { background: #fff; padding: 2rem; border-radius: 12px; width: min(400px, 92vw); box-shadow: 0 6px 24px rgba(0, 0, 0, .08); }
.kartica form { display: grid; gap: 1rem; }

.samo-stampa { display: none; }

@page { size: A4 portrait; margin: 10mm 10mm 12mm; @bottom-center { content: "Strana " counter(page) " / " counter(pages); font-size: 8pt; color: #555; } }
.stampa-lista { max-width: 640px; }
.stampa-mesto { margin: 1rem 0 .25rem; font-size: 1rem; background: var(--siva); padding: .2rem .4rem; }
.stampa-red { display: flex; justify-content: space-between; margin: 0; padding: .1rem .4rem; border-bottom: 1px dotted var(--ivica); }
@media print {
  .no-print { display: none !important; }
  .samo-stampa { display: block; margin: 0 0 .6rem; font-size: 14pt; }
  .aktivni-filteri.samo-stampa { font-size: 10pt; margin: 0 0 .4rem; }
  .zbir { background: none; border: 1px solid #999; border-radius: 0; padding: 4px 8px; margin: 0 0 8px; font-size: 11pt; }
  .zbir strong { font-size: 12pt; }
  .tabela td small { color: #333; }
  body { font-size: 9pt; }
  main { padding: 0; max-width: none; }
  .tabela-omot { border: 0; overflow: visible; }
  .tabela th { position: static; background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tabela th, .tabela td { padding: 3px 5px; border: 1px solid #999; }
  .tabela tbody tr { page-break-inside: avoid; }
  .tabela thead { display: table-header-group; }
  /* štampa: dve kolone, jedan red po glasaču, grupisano po biračkom mestu */
  .stampa-lista { max-width: none; column-count: 2; column-gap: 8mm; column-rule: 1px solid #bbb; font-size: 8.5pt; line-height: 1.25; }
  .stampa-mesto { font-size: 9pt; margin: 5px 0 2px; padding: 1px 3px; background: #e6e6e6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;
                  break-after: avoid; break-inside: avoid; }
  .stampa-mesto span { font-weight: 400; }
  .stampa-red { display: flex; justify-content: space-between; gap: 6px; margin: 0; padding: 1px 3px; border-bottom: 1px dotted #aaa; break-inside: avoid; }
  .stampa-red .s-datum { white-space: nowrap; }
  main .zbir { font-size: 10pt; padding: 2px 8px; margin: 0 0 6px; border-radius: 0; gap: 1.5rem; }
  .samo-stampa { margin-bottom: .3rem; font-size: 12pt; }
}

/* --- v2: mesta i uvoz --- */
.siroko { flex: 1 1 280px; }
.kartica-forma { background: var(--siva); padding: .75rem; border-radius: 8px; align-items: center; }
.dve-kolone { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.25rem; margin-top: 1rem; }
.panel { border: 1px solid var(--ivica); border-radius: 10px; padding: 1rem 1.25rem; }
.panel h2 { margin-top: 0; font-size: 1.15rem; }
.panel p { margin: .5rem 0; }
details.lista-greske, details.lista-upozorenja { margin: .75rem 0; padding: .5rem .8rem; border-radius: 6px; }
details.lista-greske { background: #fdecea; border: 1px solid #f5c2be; }
details.lista-upozorenja { background: #fff8e1; border: 1px solid #f0dd9a; }
details summary { cursor: pointer; font-weight: 600; }
details ul { margin: .5rem 0 0; padding-left: 1.2rem; max-height: 260px; overflow: auto; font-size: .9rem; }
.tabela td.datum { white-space: nowrap; }

/* --- v3: combobox, polja, korisnici --- */
.polje { display: block; }
.polje > label { display: block; font-weight: 600; font-size: .9rem; }
.pomoc { display: block; margin-top: .3rem; color: #66717f; font-weight: 400; }

.combo { position: relative; margin-top: .25rem; }
.combo-input { width: 100%; padding-right: 2rem; }
.combo-x { position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); background: none; color: #66717f; border: 0; padding: .2rem .5rem; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.combo-x:hover { color: #b3261e; filter: none; }
.combo-lista { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 2px); margin: 0; padding: .25rem 0; list-style: none; background: #fff; border: 1px solid var(--ivica); border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); max-height: 280px; overflow-y: auto; }
.combo-lista[hidden] { display: none; }
.combo-lista li { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem .7rem; cursor: pointer; font-weight: 400; }
.combo-lista li small { color: #66717f; white-space: nowrap; }
.combo-lista li.aktivna { background: var(--boja); color: #fff; }
.combo-lista li.aktivna small { color: #dbe6f2; }
.combo-lista li.prazno { color: #66717f; cursor: default; justify-content: flex-start; }
.filteri .combo { flex: 1 1 240px; min-width: 220px; margin-top: 0; }

.kvacice { display: flex; flex-wrap: wrap; gap: .4rem 0; }
[hidden] { display: none !important; }

.zbir { display: flex; flex-wrap: wrap; gap: .5rem 2rem; background: var(--siva); border-radius: 8px; padding: .6rem 1rem; margin: 0 0 1rem; font-size: 1rem; }
.zbir strong { font-size: 1.15rem; }
.aktivni-filteri { color: #3d4856; margin: .25rem 0 .5rem; font-size: .9rem; }
.tabela td small { display: block; color: #66717f; }
.uloga-oznaka { display: inline-block; padding: .1rem .5rem; border-radius: 999px; background: var(--siva); font-size: .85rem; }
.forma-red { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; }
.forma-red label { flex: 1 1 200px; }
.upozorenje { background: #fff8e1; border: 1px solid #f0dd9a; padding: .6rem .8rem; border-radius: 6px; }

.mreza.uzak { grid-template-columns: minmax(200px, 290px); }

/* --- v4: pretraga, sklopivi filteri, telefon --- */
.filter-gore { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.filter-gore input[type=search] { flex: 1 1 260px; min-width: 0; }
details.vise-filtera { margin-bottom: 1rem; }
details.vise-filtera > summary { cursor: pointer; font-weight: 600; padding: .35rem 0; color: var(--boja); }
details.vise-filtera .filteri { margin: .5rem 0 0; }
.samo-mobilni { display: none; }
.pomoc-pretraga { color: #66717f; font-size: .85rem; margin: 0 0 .75rem; }

@media screen and (max-width: 760px) {
  body { font-size: 16px; }
  main { padding: .75rem .75rem 2.5rem; }
  h1 { font-size: 1.3rem; margin: .25rem 0 .75rem; }

  /* zaglavlje: naziv + korisnik gore, meni u jednom redu koji se pomera prstom */
  .traka { padding: .5rem .75rem; gap: .4rem .75rem; }
  .traka .marka { order: 1; flex: 1 1 auto; }
  .traka-desno { order: 2; gap: .6rem; font-size: .85rem; }
  .traka-desno > span { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .meni-dugme { display: block; order: 3; flex: 1 1 100%; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.45); color: #fff; border-radius: 8px; padding: .6rem; font-size: 1rem; }
  .traka:not(.otvoren) .traka-meni { display: none; }
  .traka-meni { order: 4; flex: 1 1 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; margin: .25rem 0 .1rem; }
  .traka-meni a { padding: .65rem .4rem; text-align: center; white-space: nowrap; font-size: .95rem;
                  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px; }
  .traka-meni a.aktivan { background: #fff; color: var(--zaglavlje); border-color: #fff; font-weight: 700; }
  .traka button.link { padding: .5rem 0; }

  /* veće površine za dodir; 16px sprečava automatsko zumiranje na iPhone-u */
  button, .dugme { min-height: 44px; padding: .6rem 1rem; display: inline-flex; align-items: center; justify-content: center; }
  button.link { min-height: 0; }
  input, select, textarea { font-size: 16px; min-height: 44px; padding: .55rem .7rem; }
  input[type=checkbox] { min-height: 0; width: 22px; height: 22px; }
  .kvacice { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1rem; }
  .kvacice label { margin-right: 0; min-height: 44px; }

  .naslov-red { align-items: stretch; }
  .naslov-red > div { display: flex; gap: .5rem; width: 100%; }
  .naslov-red > div > .dugme { flex: 1; }

  .filter-gore .dugme, .filter-gore button { flex: 1 1 auto; }
  .filteri > *, .filteri .combo { flex: 1 1 100%; min-width: 0; }
  .filteri select:not([name=mesto]) { flex: 1 1 calc(50% - .25rem); }
  .filteri .dugme, .filteri button { flex: 1 1 calc(50% - .25rem); }
  .naslov-red { gap: .75rem; }
  .naslov-red > div { display: flex; gap: .6rem; width: 100%; margin-bottom: .6rem; }
  .naslov-red > div .dugme { flex: 1 1 0; }
  .filter-gore { margin-top: .6rem; gap: .6rem; }
  .samo-mobilni { display: block; margin: 0 0 .75rem; }
  .samo-mobilni select { margin-top: .25rem; }

  .zbir { flex-direction: column; gap: .15rem; padding: .6rem .8rem; }
  .forma-red label { flex: 1 1 100%; }
  .dve-kolone { grid-template-columns: 1fr; }
  .mreza, .mreza.uzak { grid-template-columns: 1fr; }
  .dugmad { flex-wrap: wrap; }
  .dugmad > * { flex: 1 1 auto; }
  .kartica { padding: 1.25rem; }
  .strane { justify-content: space-between; }
  .strane a { padding: .6rem .8rem; border: 1px solid var(--ivica); border-radius: 6px; text-decoration: none; }

  /* tabela -> kartice (JS dodaje data-label i data-gotovo) */
  .tabela-omot { border: 0; overflow: visible; border-radius: 0; }
  table.tabela-kartice[data-gotovo], table.tabela-kartice[data-gotovo] tbody { display: block; }
  table.tabela-kartice[data-gotovo] thead { display: none; }
  table.tabela-kartice[data-gotovo] tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .25rem .75rem; border: 1px solid var(--ivica); border-radius: 10px; padding: .6rem .8rem; margin-bottom: .7rem; background: #fff; }
  table.tabela-kartice[data-gotovo] tbody tr:nth-child(even) { background: #fff; }
  table.tabela-kartice[data-gotovo] td { border: 0; padding: .1rem 0; text-align: left; white-space: normal; overflow-wrap: anywhere; font-size: .95rem; }
  table.tabela-kartice[data-gotovo] td::before { content: attr(data-label); display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: #66717f; }
  table.tabela-kartice[data-gotovo] td.prazno-polje { display: none; }
  table.tabela-kartice[data-gotovo] td.prazno { grid-column: 1 / -1; text-align: center; }
  table.tabela-kartice[data-gotovo] td.prazno::before { display: none; }
  table.tabela-kartice[data-gotovo] td.broj { text-align: left; }
  table.tabela-kartice[data-gotovo] td[data-kolona="napomena"],
  table.tabela-kartice[data-gotovo] td[data-kolona="biracko_mesto"],
  table.tabela-kartice[data-gotovo] td[data-kolona="aktivista_kontakt"],
  table.tabela-kartice[data-gotovo] td[data-kolona="prikaz_u_listi"],
  table.tabela-kartice[data-gotovo] td[data-kolona="korisnicko_ime"],
  table.tabela-kartice[data-gotovo] td[data-kolona="akcije"] { grid-column: 1 / -1; }
  /* glasači: prezime i ime kao naslov kartice */
  table.tabela-glasaci[data-gotovo] td[data-kolona="prezime"],
  table.tabela-glasaci[data-gotovo] td[data-kolona="ime"] { font-size: 1.1rem; font-weight: 700; padding-bottom: .35rem; border-bottom: 1px solid var(--ivica); margin-bottom: .25rem; }
  table.tabela-glasaci[data-gotovo] td[data-kolona="prezime"]::before,
  table.tabela-glasaci[data-gotovo] td[data-kolona="ime"]::before { display: none; }
  table.tabela-kartice[data-gotovo] td.akcije { display: flex; gap: .6rem; padding-top: .4rem; }
  table.tabela-kartice[data-gotovo] td.akcije::before { display: none; }
  table.tabela-kartice[data-gotovo] td.akcije a, table.tabela-kartice[data-gotovo] td.akcije button.link { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--ivica); border-radius: 8px; text-decoration: none; background: var(--siva); }
  table.tabela-kartice[data-gotovo] td.akcije form.inline { flex: 1; display: flex; }
  table.tabela-kartice[data-gotovo] td.akcije form.inline button.link { width: 100%; }
}

/* --- v5: isplate --- */
.tabela td small.isplaceno { color: #1d7a3a; font-weight: 600; }
.isplata-kvacica { margin: .25rem 0 0; }

/* --- v6: lista glasača: izbor, brze kvačice --- */
/* Traka za grupnu isplatu: skrivena dok ništa nije izabrano, a onda sitna traka pri dnu ekrana */
.grupna-traka { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: #fff; border-top: 1px solid var(--ivica); box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
                padding: .45rem .75rem calc(.45rem + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; justify-content: center; }
.grupna-traka[hidden] { display: none; }
.grupna-red { display: flex; align-items: center; gap: .5rem .9rem; flex-wrap: wrap; }
.grupna-dugmad { gap: .5rem; }
.grupna-traka button { padding: .45rem .9rem; }
.grupna-traka button.sekundarno { background: #fff; color: var(--boja); border: 1px solid var(--boja); }
.grupna-traka button.link { background: none; border: 0; color: #66717f; padding: .2rem .5rem; font-size: 1.1rem; }
.grupna-traka .grupna-sve { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; margin: 0; }
body.ima-grupnu-traku main { padding-bottom: 7rem; }
.tabela td.izbor, .tabela th.izbor { width: 2rem; text-align: center; }
.tabela td.izbor input, .tabela th.izbor input { width: 1.1rem; height: 1.1rem; }
label.brza { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; margin: 0; }
label.brza input { width: 1.1rem; height: 1.1rem; margin: 0; }
@media (max-width: 760px) {
  .grupna-red { width: 100%; justify-content: space-between; flex-wrap: nowrap; }
  .grupna-dugmad button { flex: 1 1 0; }
  /* kartica: kvačica za izbor u gornjem desnom uglu, ne zauzima poseban red */
  table.tabela-glasaci[data-gotovo] tr { position: relative; }
  table.tabela-kartice[data-gotovo] td.izbor { position: absolute; top: .55rem; right: .7rem; padding: 0; width: auto; grid-column: auto; }
  table.tabela-kartice[data-gotovo] td.izbor::before { display: none; }
  table.tabela-kartice[data-gotovo] td.izbor input { width: 1.5rem; height: 1.5rem; }
  table.tabela-glasaci[data-gotovo] td[data-kolona="ime"] { padding-right: 2.2rem; }
  label.brza { min-height: 36px; }
  label.brza input { width: 1.4rem; height: 1.4rem; }
}
@media print { .grupna-traka, .izbor { display: none !important; } }
.prijava-ikona { display: block; margin: 0 auto .75rem; border-radius: 20px; }

/* --- v6: zbirovi i pregled --- */
details.zbirovi { margin: 0 0 1rem; }
details.zbirovi > summary { cursor: pointer; font-weight: 600; color: var(--boja); padding: .35rem 0; }
.zbirovi-mreza { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; align-items: start; margin-top: .5rem; }
.tabela.mala th, .tabela.mala td { padding: .35rem .6rem; font-size: .9rem; }
@media (max-width: 760px) { .zbirovi-mreza { grid-template-columns: 1fr; } }