:root {
  --bg: #f6f7f9; --panel: #fff; --ink: #1d2330; --muted: #6b7482; --line: #e3e6eb; --accent: #2f6fde;
  --accent-soft: #e8effc; --danger: #c93b2b; --ok: #1b7f3b;
  --p-potvrdjeno: #1b7f3b; --p-visoka: #4caf50; --p-srednja: #f2b81c; --p-niska: #e0533d; --p-nepoznata: #8e99a8; --p-nema: #c9ced6;
  font-size: 13px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--bg); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 4px 9px; }
button:hover { border-color: #b9c0cb; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover { background: #245bc0; }
button.danger { color: var(--danger); }
button.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
button.small { padding: 2px 6px; font-size: 12px; }
button:disabled { opacity: .5; cursor: default; }
input, select, textarea { border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; background: #fff; min-width: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
textarea { resize: vertical; width: 100%; }
a { color: var(--accent); }

#app { display: grid; grid-template-rows: auto 1fr; height: 100vh; }
header { display: flex; gap: 6px; align-items: center; padding: 6px 10px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
header .logo { font-weight: 700; margin-right: 6px; }
header .grow { flex: 1; }
header input[type=search] { width: 190px; }
header select { max-width: 170px; }
main { display: grid; grid-template-columns: 340px 1fr auto; min-height: 0; }
#left { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.tabs { display: flex; border-bottom: 1px solid var(--line); }
.tabs button { flex: 1; border: 0; border-radius: 0; border-bottom: 2px solid transparent; padding: 8px 2px; background: none; }
.tabs button.active { border-bottom-color: var(--accent); color: var(--accent); font-weight: 600; }
.tabpane { flex: 1; overflow: auto; min-height: 0; }
.bar { display: flex; gap: 6px; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 2; flex-wrap: wrap; }
.bar .grow { flex: 1; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

.list-item { padding: 6px 10px; border-bottom: 1px solid #f0f1f4; cursor: pointer; display: flex; gap: 8px; align-items: flex-start; }
.list-item:hover { background: #f7f9fc; }
.list-item.sel { background: var(--accent-soft); }
.list-item .t { font-weight: 500; }
.list-item .s { color: var(--muted); font-size: 12px; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 3px; border: 1px solid rgba(0,0,0,.15); }
.sw { width: 14px; height: 14px; border-radius: 3px; flex: none; margin-top: 1px; }
.badge { display: inline-block; padding: 0 6px; border-radius: 9px; font-size: 11px; background: #eef0f3; color: #4a5260; margin-left: 4px; white-space: nowrap; }
.badge.p-potvrdjeno { background: var(--p-potvrdjeno); color: #fff; } .badge.p-visoka { background: var(--p-visoka); color: #fff; }
.badge.p-srednja { background: var(--p-srednja); } .badge.p-niska { background: var(--p-niska); color: #fff; }
.badge.p-nepoznata { background: var(--p-nepoznata); color: #fff; } .badge.p-nema { background: var(--p-nema); }
.badge.st-ok { background: #dff3e4; color: var(--ok); } .badge.st-nesigurno { background: #fff1c7; color: #7a5a00; }
.badge.rev-potvrdjeno { background: #dff3e4; color: var(--ok); }
.badge.rev-centar_naselja { background: #e7eefc; color: #245bc0; }
.badge.rev-sumnjivo { background: #fff1c7; color: #7a5a00; }
.badge.rev-netacno, .badge.rev-nema_lokacije { background: #fde2de; color: var(--danger); }
.badge.st-nema, .badge.st-greska { background: #fde2de; color: var(--danger); } .badge.st-novi { background: var(--accent-soft); color: var(--accent); }

#map { position: relative; min-height: 0; }
#map.pick { cursor: crosshair; }
#map.pick .leaflet-interactive { cursor: crosshair; }
#modebar { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 1000; background: #1d2330; color: #fff; padding: 6px 12px; border-radius: 8px; display: none; gap: 8px; align-items: center; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
#modebar button { background: #fff; color: var(--ink); }
#legend { position: absolute; bottom: 18px; left: 10px; z-index: 900; background: rgba(255,255,255,.95); border-radius: 8px; padding: 6px 9px; box-shadow: 0 1px 5px rgba(0,0,0,.2); font-size: 12px; max-width: 220px; }
#legend div { display: flex; gap: 6px; align-items: center; }
.bm-label { background: rgba(255,255,255,.85); border: 0; box-shadow: none; padding: 0 3px; font-size: 11px; font-weight: 600; border-radius: 3px; }
.bm-label::before { display: none; }
.zone-label { background: rgba(255,255,255,.9); font-weight: 600; }
.kand-icon { border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.kand-icon.akt { border-color: #111; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #111; }

#right { width: 400px; background: var(--panel); border-left: 1px solid var(--line); overflow: auto; display: none; }
#right.open { display: block; }
.ph { padding: 10px 12px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 5; }
.ph .top { display: flex; gap: 6px; align-items: center; }
.ph h2 { font-size: 15px; margin: 4px 0 0; }
.sec { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.sec h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.sec h3 .grow { flex: 1; }
.form { display: grid; grid-template-columns: 96px 1fr; gap: 5px 8px; align-items: center; }
.form label { color: var(--muted); font-size: 12px; }
.form .full { grid-column: 1 / -1; }
.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.row .grow { flex: 1; }
.kand { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; }
.kand.akt { border-color: var(--accent); background: #f7faff; }
.kand .meta { font-size: 12px; color: var(--muted); word-break: break-word; }
.photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.photo { position: relative; border-radius: 6px; overflow: hidden; background: #eee; aspect-ratio: 1; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo .ops { position: absolute; bottom: 0; left: 0; right: 0; display: flex; gap: 2px; padding: 3px; background: linear-gradient(transparent, rgba(0,0,0,.6)); }
.photo .ops button { padding: 0 4px; font-size: 11px; }
.hist { font-size: 12px; border-left: 2px solid var(--line); padding: 2px 0 6px 8px; }
.hist .f { color: var(--muted); word-break: break-word; }
.dirty { box-shadow: inset 3px 0 0 var(--p-srednja); }

table.t { border-collapse: collapse; width: 100%; font-size: 12px; }
table.t th, table.t td { border-bottom: 1px solid #eef0f3; padding: 4px 6px; text-align: left; vertical-align: top; }
table.t th { position: sticky; top: 0; background: #fafbfc; z-index: 1; }
table.t tr.clk { cursor: pointer; } table.t tr.clk:hover { background: #f7f9fc; }
.stack { display: flex; height: 8px; border-radius: 4px; overflow: hidden; min-width: 80px; background: #eee; }
.stack span { display: block; height: 100%; }

.modal-bg { position: fixed; inset: 0; background: rgba(20,25,35,.45); z-index: 3000; display: flex; align-items: center; justify-content: center; }
.modal { background: #fff; border-radius: 12px; width: min(1200px, 96vw); max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.modal.narrow { width: min(560px, 96vw); }
.modal .mh { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.modal .mh h2 { margin: 0; font-size: 16px; flex: 1; }
.modal .mb { padding: 12px 16px; overflow: auto; flex: 1; }
.modal .mf { padding: 10px 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.grid-preview { overflow: auto; max-height: 45vh; border: 1px solid var(--line); border-radius: 8px; }
.grid-preview table { border-collapse: collapse; font-size: 12px; }
.grid-preview td, .grid-preview th { border: 1px solid #eef0f3; padding: 3px 5px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid-preview tr.hdr td { background: #fff6d6; font-weight: 600; }
.grid-preview th select { width: 150px; }
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin: 12px 0; }
.opt { border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.opt b { display: block; margin-bottom: 4px; }
.opt label { display: block; margin: 2px 0; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.exp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.exp-grid button { text-align: left; padding: 8px 10px; }
.exp-grid button small { display: block; color: var(--muted); }

#toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: #1d2330; color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 5000; display: none; max-width: 80vw; }
#toast.err { background: var(--danger); }
.qa-group summary { padding: 7px 10px; cursor: pointer; border-bottom: 1px solid #f0f1f4; display: flex; gap: 6px; }
.qa-group summary .grow { flex: 1; }
.empty { padding: 20px; text-align: center; color: var(--muted); }
kbd { background: #eef0f3; border-radius: 3px; padding: 0 4px; font-size: 11px; }

@media (max-width: 1150px) {
  main { grid-template-columns: 280px 1fr; position: relative; }
  #right { position: absolute; right: 0; top: 0; bottom: 0; z-index: 1500; box-shadow: -4px 0 16px rgba(0,0,0,.15); width: min(400px, 70vw); }
}

.ro .w, .nadm .adm { display: none !important; }

#izbor-bar { border-top: 2px solid #7a3cff; background: #f6f2ff; padding: 8px 10px; }
#map.lasso, #map.lasso .leaflet-interactive { cursor: crosshair; }
.list-item .izb { margin: 2px 0 0; flex: none; }