:root {
    --bg: #faf7f0; --panel: #fff; --ink: #2b2418; --muted: #7a6f5c; --line: #e8e0cf;
    --accent: #b8790f; --accent-soft: #fbefd6; --ok: #2f7d32; --greska: #c0392b;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--ink); }
header { background: var(--ink); color: #fff; padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.brand { font-weight: 700; font-size: 18px; }
nav { display: flex; flex-wrap: wrap; gap: 4px; }
nav a { color: #e9dfc9; text-decoration: none; padding: 6px 12px; border-radius: 6px; }
nav a:hover { background: #ffffff1a; }
nav a.aktivno { background: var(--accent); color: #fff; }
main { max-width: 1000px; margin: 0 auto; padding: 16px; }
section { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; overflow-x: auto; }
h2 { margin: 0 0 12px; font-size: 17px; }
.broj { font-size: 12px; font-weight: 600; background: var(--accent-soft); color: var(--accent); padding: 1px 8px; border-radius: 99px; vertical-align: middle; }
a { color: var(--accent); }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 600; }
td.r, th.r { text-align: right; width: 1%; white-space: nowrap; }
tr:hover td { background: #fdfaf3; }
tr.izabran td { background: var(--accent-soft); }
td.akcije { white-space: nowrap; text-align: right; width: 1%; }
.prazno { color: var(--muted); text-align: center; padding: 18px; }
.mala { color: var(--muted); font-size: 13px; }

.forma { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.forma label { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); gap: 3px; }
.forma label.siroko { flex: 1 1 220px; }
input, select { font: inherit; padding: 7px 9px; border: 1px solid #cfc4ad; border-radius: 6px; background: #fff; color: var(--ink); }
input:focus, select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.forma label:not(.siroko) input { width: 140px; }
button { font: inherit; background: var(--accent); color: #fff; border: 0; border-radius: 6px; padding: 8px 18px; cursor: pointer; }
button:hover { filter: brightness(1.08); }
.dugme-link { background: none; padding: 0 0 0 10px; color: var(--accent); text-decoration: underline; font-size: 14px; }
.dugme-link.opasno { color: var(--greska); }
.otkazi { align-self: center; }
form.inline { display: inline; }

.naslov-red { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.naslov-red h2 { margin: 0; }
.pretraga input { width: 240px; }

.poruka { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; background: #e6f4e7; color: var(--ok); border: 1px solid #bfe0c1; }
.poruka.greska { background: #fbe9e7; color: var(--greska); border-color: #f0c4be; }

a.dugme { background: var(--accent); color: #fff; text-decoration: none; border-radius: 6px; padding: 7px 14px; }
a.dugme:hover { filter: brightness(1.08); }
.dugme-sekundarno { background: var(--accent-soft); color: var(--accent); padding: 6px 12px; }
.dno { display: flex; gap: 16px; align-items: center; margin-bottom: 24px; }
table.stavke select { width: 100%; min-width: 180px; }
table.stavke input.broj { width: 110px; text-align: right; }
table.stavke td { vertical-align: middle; }
td.vrednost { font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.ukupno td { font-weight: 700; border-top: 2px solid var(--ink); border-bottom: 0; font-variant-numeric: tabular-nums; }
td.sastojci { line-height: 2; }
.sastojak { display: inline-block; background: var(--accent-soft); border-radius: 6px; padding: 0 8px; margin: 2px 4px 2px 0; font-size: 14px; white-space: nowrap; }
tr.minus td { color: var(--greska); }
.forma input.broj { width: 120px; text-align: right; }

.kartice { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { display: block; background: var(--panel); border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px; padding: 10px 14px; text-decoration: none; color: var(--ink); }
.kpi span { display: block; color: var(--muted); font-size: 13px; }
.kpi b { font-size: 19px; font-variant-numeric: tabular-nums; }
.kpi.aktivno { box-shadow: 0 0 0 2px var(--accent); }
.kpi.naplaceno, .opcija.naplaceno { border-left-color: var(--ok); }
.kpi.dug, .opcija.dug { border-left-color: var(--greska); }
.kpi.gratis, .opcija.gratis { border-left-color: #6b58b0; }
.nacini { display: flex; flex-direction: column; gap: 3px; }
.izbor { display: flex; gap: 6px; flex-wrap: wrap; }
.forma .opcija { flex-direction: row; align-items: center; gap: 6px; color: var(--ink); font-size: 14px; border: 1px solid #cfc4ad; border-left-width: 4px; border-radius: 6px; padding: 6px 10px; cursor: pointer; background: #fff; }
.forma label.opcija input[type=radio] { width: auto; margin: 0; }
.opcija:has(input:checked) { background: var(--accent-soft); font-weight: 600; }
.oznaka { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); }
.oznaka.naplaceno { background: #e6f4e7; color: var(--ok); }
.oznaka.dug { background: #fbe9e7; color: var(--greska); }
.oznaka.gratis { background: #ece8f7; color: #5b4a9a; }
button.malo { padding: 3px 10px; font-size: 13px; background: var(--ok); }
.kpi.saldo.plus b { color: var(--ok); }
.kpi.saldo.minus b, td.minus { color: var(--greska); }
td.plus { color: var(--ok); }
.kpi .razlaganje { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.forma b.iznos { display: block; padding: 7px 0; min-width: 100px; text-align: right; color: var(--ink); font-size: 16px; font-variant-numeric: tabular-nums; }
section.filter { padding: 12px 16px; }
.brzo { display: flex; flex-wrap: wrap; gap: 4px; align-self: center; margin-left: auto; }
.brzo a { padding: 5px 10px; border-radius: 6px; text-decoration: none; font-size: 14px; border: 1px solid var(--line); }
.brzo a:hover { background: var(--accent-soft); }
.brzo a.aktivno { background: var(--accent); color: #fff; border-color: var(--accent); }
.period { margin: 10px 0 0; }
h2 .mala { font-weight: 400; }
.odjava { margin-left: auto; display: flex; align-items: center; gap: 10px; color: #e9dfc9; font-size: 14px; }
.odjava button { background: #ffffff1a; padding: 5px 12px; font-size: 14px; }
body.prijava { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.prijava-kartica { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 24px; width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 14px; }
.prijava-kartica .brand { font-size: 20px; text-align: center; margin-bottom: 4px; }
.prijava-kartica label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.prijava-kartica .poruka { margin: 0; }