:root {
  color-scheme: light;
  --sig-dobar: #11632a; --sig-srednji: #8a5a00; --sig-slab: #b3261e;
  --boja: #1d4e89; --link: #1d4e89; --traka: #1d4e89; --svetla: #f4f6f9; --povrsina: #fff; --ivica: #d8dde5;
  --tekst: #1b1f24; --prigusen: #5a6270; --siva-dugme: #6b7380; --znak: #e4e7ec;
  --zelena-poz: #d7f5dd; --zelena: #11632a; --zuta-poz: #fff1c2; --zuta: #7a5a00;
  --narandz-poz: #ffe0c2; --narandz: #8a4300; --crvena-poz: #fbd5d2; --crvena: #8c1d18;
  --plava-poz: #e7f0fb; --isteklo: #fdecea; --storno: #b3261e;
}
/* Tamna tema: isti izbor kao u Podešavanjima (localStorage "theme": auto/light/dark). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --sig-dobar: #8fe0a6; --sig-srednji: #f2d27a; --sig-slab: #f4a19b;
  --boja: #2f6db5; --link: #8ab8f0; --traka: #16304f; --svetla: #12161c; --povrsina: #1c222b; --ivica: #333c48;
  --tekst: #e3e7ed; --prigusen: #9aa4b2; --siva-dugme: #4f5866; --znak: #2c3440;
  --zelena-poz: #173d24; --zelena: #8fe0a6; --zuta-poz: #3d3212; --zuta: #f2d27a;
  --narandz-poz: #42290f; --narandz: #f5b77a; --crvena-poz: #45191a; --crvena: #f4a19b;
  --plava-poz: #1b2d44; --isteklo: #3a1d1f; --storno: #f07b72;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sig-dobar: #8fe0a6; --sig-srednji: #f2d27a; --sig-slab: #f4a19b;
    --boja: #2f6db5; --link: #8ab8f0; --traka: #16304f; --svetla: #12161c; --povrsina: #1c222b; --ivica: #333c48;
    --tekst: #e3e7ed; --prigusen: #9aa4b2; --siva-dugme: #4f5866; --znak: #2c3440;
    --zelena-poz: #173d24; --zelena: #8fe0a6; --zuta-poz: #3d3212; --zuta: #f2d27a;
    --narandz-poz: #42290f; --narandz: #f5b77a; --crvena-poz: #45191a; --crvena: #f4a19b;
    --plava-poz: #1b2d44; --isteklo: #3a1d1f; --storno: #f07b72;
  }
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--tekst); background: var(--svetla); }
a { color: var(--link); }
main { max-width: 1100px; margin: 0 auto; padding: 16px; }
.podnozje { max-width: 1100px; margin: 0 auto; padding: 8px 16px 20px; text-align: right; font-size: .8em; color: var(--prigusen); }
.baner-test { background: #b3261e; color: #fff; text-align: center; font-weight: 700; padding: 4px; }
.baner-sms { background: #b45309; }
.traka { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; background: var(--traka); padding: 10px 16px; }
.traka a, .traka .link { color: #fff; text-decoration: none; }
.traka nav { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.logo { font-weight: 700; }
.inline { display: inline; }
button, .dugme { background: var(--boja); color: #fff; border: 0; border-radius: 6px; padding: 8px 14px; font: inherit; cursor: pointer; text-decoration: none; display: inline-block; }
button.sekundarno { background: var(--siva-dugme); }
button.link { background: none; padding: 0; }
input, select, textarea { font: inherit; padding: 7px 9px; border: 1px solid var(--ivica); border-radius: 6px; width: 100%; max-width: 420px; background: var(--povrsina); color: var(--tekst); }
input[type=checkbox] { width: auto; }
.kartica { background: var(--povrsina); border: 1px solid var(--ivica); border-radius: 10px; padding: 14px 18px; margin-bottom: 16px; }
.uska { max-width: 380px; margin: 40px auto; }
.mreza { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.red-naslov { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.pretraga { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pretraga input { flex: 1 1 220px; }
.pretraga select { flex: 0 1 180px; }
.tabela { width: 100%; border-collapse: collapse; background: var(--povrsina); }
.tabela th, .tabela td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--ivica); vertical-align: top; }
.tabela tr.isteklo { background: var(--isteklo); }
.podaci { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; }
.podaci dt { color: var(--prigusen); }
.podaci dd { margin: 0; }
.znak { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 13px; background: var(--znak); }
.s-online { background: var(--zelena-poz); color: var(--zelena); }
.s-uskoro { background: var(--zuta-poz); color: var(--zuta); }
.s-ceka_uplatu { background: var(--narandz-poz); color: var(--narandz); }
.s-istekao, .s-iskljucen { background: var(--crvena-poz); color: var(--crvena); }
.poruka { padding: 9px 12px; border-radius: 6px; margin-bottom: 12px; background: var(--plava-poz); }
.poruka.error { background: var(--crvena-poz); }
.poruka.success { background: var(--zelena-poz); }
.poruka.warning { background: var(--zuta-poz); }
.napomena { color: var(--prigusen); font-size: 13px; }
.napomene { list-style: none; padding: 0; }
.napomene li { border-top: 1px solid var(--ivica); padding: 6px 0; }
@media (max-width: 700px) {
  .tabela thead { display: none; }
  .tabela tr { display: block; border-bottom: 2px solid var(--ivica); padding: 6px 0; }
  .tabela td { display: flex; gap: 10px; border: 0; padding: 3px 4px; }
  .tabela td[data-l]::before { content: attr(data-l); min-width: 90px; color: var(--prigusen); }
}
/* forme: oznaka iznad polja */
.kartica form p { margin: 0 0 12px; }
.kartica form p > label { display: block; font-weight: 600; margin-bottom: 3px; }
.kartica form p > label:has(+ input[type=checkbox]) { display: inline; }
.kartica form .helptext { display: block; color: var(--prigusen); font-size: 13px; }
.errorlist { color: var(--crvena); margin: 0 0 4px; padding-left: 18px; }
/* brojači u meniju */
.bedz { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: #fff; color: var(--traka); font-size: 12px; font-weight: 700; text-align: center; line-height: 20px; }
.bedz.crveni { background: #e5322d; color: #fff; }
.traka a.hitno { background: #e5322d; border-radius: 6px; padding: 3px 8px; animation: puls 1.4s ease-in-out infinite; }
.traka a.hitno .bedz.crveni { background: #fff; color: #e5322d; }
@keyframes puls { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .traka a.hitno { animation: none; } }
/* izveštaji */
.dugmad { display: flex; gap: 8px; }
.filteri label { display: flex; flex-direction: column; font-size: 13px; color: var(--prigusen); flex: 1 1 150px; }
.filteri select { max-width: none; flex: none; }
.filteri button { align-self: flex-end; }
.tabela tr.ukupno td { font-weight: 700; border-top: 2px solid var(--tekst); }
.tabela.zbir td:not(:first-child), .tabela.zbir th:not(:first-child) { text-align: right; }
/* lista korisnika na telefonu: jedan red po korisniku */
.lista-mob { display: none; list-style: none; margin: 0; padding: 0; background: var(--povrsina); border: 1px solid var(--ivica); border-radius: 10px; }
.lista-mob li + li { border-top: 1px solid var(--ivica); }
.lista-mob a { display: block; padding: 10px 12px; color: inherit; text-decoration: none; }
.lista-mob a:active { background: var(--svetla); }
.lista-mob .red1, .lista-mob .red2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lista-mob .red1 strong { color: var(--link); overflow-wrap: anywhere; }
.lista-mob .statusi { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; flex-shrink: 0; }
.lista-mob .red2 { color: var(--prigusen); font-size: 14px; margin-top: 2px; }
.lista-mob .red3 { display: block; color: var(--prigusen); font-size: 13px; margin-top: 2px; }
.lista-mob .prazno { padding: 12px; }
@media (max-width: 700px) {
  .lista-mob { display: block; }
  .tabela-korisnici { display: none; }
  main { padding: 12px; }
  h1 { font-size: 24px; margin: 8px 0; }
  .traka { padding: 8px 12px; gap: 4px 12px; }
  .traka nav { gap: 6px 14px; font-size: 15px; }
}
/* sklopive sekcije kartice */
.sklopivo > summary { cursor: pointer; font-weight: 700; font-size: 17px; padding: 2px 0; }
.sklopivo[open] > summary { margin-bottom: 10px; }
.sklopivo h3 { margin: 6px 0 8px; font-size: 16px; }
.kartica h2 { margin: 4px 0 12px; font-size: 20px; }
@media (max-width: 700px) {
  .kartica { padding: 12px 14px; margin-bottom: 12px; }
  .mreza { gap: 12px; }
}
/* obavezna polja */
.obavezno > label::after, .zvezdica { color: var(--storno); }
.obavezno > label::after { content: " *"; }
a.dugme.sekundarno { background: var(--siva-dugme); padding: 5px 12px; font-size: 14px; }
/* podela na strane */
.strane { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: center; margin: 14px 0; }
.strane a { padding: 6px 12px; border: 1px solid var(--ivica); border-radius: 6px; background: var(--povrsina); text-decoration: none; }
.link-dugme { background: none; color: var(--link); padding: 0 0 0 8px; text-decoration: underline; font-size: 14px; }
.u-redu { display: inline; margin: 0; }
#lozinka { font-family: ui-monospace, Menlo, Consolas, monospace; }
/* sve što se otvara na klik ima ruku kao pokazivač */
summary { cursor: pointer; }
/* malo dugme (npr. Storno u knjizi uplata) */
.dugme-mali { display: inline-block; list-style: none; padding: 3px 10px; border: 1px solid var(--storno); border-radius: 6px; color: var(--storno); background: var(--povrsina); font-size: 13px; white-space: nowrap; user-select: none; }
.dugme-mali::-webkit-details-marker { display: none; }
.dugme-mali:hover { background: #b3261e; border-color: #b3261e; color: #fff; }
details.storno[open] > .dugme-mali { background: #b3261e; border-color: #b3261e; color: #fff; margin-bottom: 8px; }
details.storno form { min-width: 220px; }
/* dugme za temu u meniju */
.traka .tema { display: inline-flex; align-items: center; padding: 2px; color: #fff; }
.tema .ikona { display: none; width: 20px; height: 20px; }
:root:not([data-theme="light"]):not([data-theme="dark"]) .tema .i-auto,
:root[data-theme="light"] .tema .i-light,
:root[data-theme="dark"] .tema .i-dark { display: block; }
/* sortiranje klikom na naslov kolone */
.tabela th a.sort { color: inherit; text-decoration: none; white-space: nowrap; }
.tabela th a.sort:hover { text-decoration: underline; }
.tabela th a.sort.aktivno { color: var(--link); }
.samo-mob { display: none; }
@media (max-width: 700px) { .pretraga select.samo-mob { display: block; } }
/* signal antene */
.sig-dobar { color: var(--sig-dobar); font-weight: 600; }
.sig-srednji { color: var(--sig-srednji); font-weight: 600; }
.sig-slab { color: var(--sig-slab); font-weight: 600; }
.nowrap { white-space: nowrap; }