/* Stil za stranicu statusa obrade. Mobile-first: tablice se vodoravno skrolaju
   unutar svog okvira, stranica sama nikad ne skrolira vodoravno. */

:root {
  --bg: #0f1115;
  --panel: #171a21;
  --panel-2: #1e222b;
  --line: #2a2f3a;
  --text: #e6e9ef;
  --muted: #98a2b3;
  --accent: #4c8dff;
  --ok: #3fb950;
  --warn: #d29922;
  --bad: #f85149;
  --multi: #a371f7;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* --- topbar --- */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  padding: 12px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.topbar h1 { margin: 0; font-size: 17px; font-weight: 650; }
.topbar-nav { display: flex; flex-wrap: wrap; gap: 12px; }
.topbar-nav a { color: var(--muted); text-decoration: none; font-size: 13px; }
.topbar-nav a:hover { color: var(--accent); }
.topbar-nav-ext { margin-left: auto; opacity: .7; }

main { padding: 16px; max-width: 1400px; margin: 0 auto; }
section { margin-bottom: 20px; }

h2 { font-size: 15px; font-weight: 600; margin: 0 0 10px; }

/* --- "u tijeku sada" traka --- */
/* Same subject as the rest of the page, different time scale: below is what has been
   processed, here is what is processing. Only appears when the local dashboard answers. */
.live {
  background: var(--panel);
  border: 1px solid rgba(63, 185, 80, .35);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.live-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.live-head h2 { margin: 0; font-size: 13px; }
.live-link { margin-left: auto; font-size: 12px; color: var(--accent); text-decoration: none; }
.live-link:hover { text-decoration: underline; }
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 0 rgba(63, 185, 80, .6);
  animation: livePulse 2s infinite;
}
@keyframes livePulse {
  70% { box-shadow: 0 0 0 7px rgba(63, 185, 80, 0); }
  100% { box-shadow: 0 0 0 0 rgba(63, 185, 80, 0); }
}
/* The dot is decoration, not information — never animate for people who asked not to. */
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
  .tools-caret { transition: none; }
}
.live-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.live-idle { color: var(--muted); font-size: 13px; }
.live-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.live-card.stalled { border-color: rgba(210, 153, 34, .5); }
.live-card-head { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.live-card-name { font-weight: 600; }
.live-card-area { color: var(--muted); font-size: 11px; }
.live-card-counts { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); }
.live-card-msg { font-size: 11px; color: var(--muted); margin-top: 4px; min-height: 1em; }
.live-bar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 6px; }
.live-bar > span { display: block; height: 100%; background: var(--ok); }

/* --- summary tiles --- */
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.tile {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.tile .val { font-size: 22px; font-weight: 650; line-height: 1.2; }
.tile .lbl { font-size: 12px; color: var(--muted); margin-top: 2px; }
.tile .sub { font-size: 11px; color: var(--muted); opacity: .8; margin-top: 4px; }
.tile.highlight { border-color: var(--warn); }
.tile.highlight .val { color: var(--warn); }
.loading { color: var(--muted); padding: 20px; }
.error {
  color: var(--bad); background: rgba(248, 81, 73, .08);
  border: 1px solid rgba(248, 81, 73, .3); border-radius: var(--radius); padding: 12px 14px;
}

/* --- controls --- */
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.control-group { display: flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.seg-btn {
  background: var(--panel); color: var(--muted); border: 0;
  padding: 8px 14px; font: inherit; font-size: 13px; cursor: pointer;
}
.seg-btn + .seg-btn { border-left: 1px solid var(--line); }
.seg-btn.active { background: var(--accent); color: #fff; }
.control-check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.control-spacer { flex: 1 1 auto; }
#filter {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--text); padding: 8px 12px; font: inherit; font-size: 13px; min-width: 180px;
}
.ghost-btn {
  background: transparent; border: 1px solid var(--line); border-radius: 8px;
  color: var(--muted); padding: 4px 10px; font: inherit; cursor: pointer;
}
.ghost-btn:hover { color: var(--text); border-color: var(--accent); }

/* --- map --- */
.map-wrap { position: relative; }
/* Zagreb is ~29 km north-south. fitBounds solves for the limiting dimension, so a short
   wide box fits on height and leaves the city as a strip with dead margins either side.
   Roughly 4:3 keeps the built-up area filling the frame. */
#map {
  height: clamp(420px, 58vw, 720px);
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--panel);
}
.leaflet-container { background: #0b0d11; }
.legend {
  position: absolute; right: 12px; bottom: 12px; z-index: 500;
  background: rgba(23, 26, 33, .94); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 12px; max-width: 220px;
}
.legend-title { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.legend-scale { display: flex; height: 10px; border-radius: 3px; overflow: hidden; }
.sw { flex: 1; }
.sw-0 { background: #2a2f3a; }
.sw-1 { background: #1f3f6b; }
.sw-2 { background: #2b5fa8; }
.sw-3 { background: #3f82db; }
.sw-4 { background: #6fb0ff; }
.legend-ends { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); margin-top: 3px; }
.legend-note { font-size: 11px; color: var(--muted); margin-top: 8px; line-height: 1.35; }
.legend-keys { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.legend-keys li { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.legend-keys .key { width: 14px; height: 4px; border-radius: 2px; flex: none; }

/* --- tables --- */
/* Wide tables scroll inside their own box so the page body never scrolls sideways. */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  -webkit-overflow-scrolling: touch;
}
table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
th, td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--line); }
th {
  position: sticky; top: 0; z-index: 1;
  background: var(--panel-2); color: var(--muted);
  font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
}
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--panel-2); }
tbody tr.selected { background: rgba(76, 141, 255, .12); }
.muted { color: var(--muted); }

/* --- progress bar in table --- */
.bar { display: inline-block; width: 90px; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; vertical-align: middle; }
.bar > span { display: block; height: 100%; background: var(--accent); }
.bar.full > span { background: var(--ok); }

/* --- state pills --- */
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; border: 1px solid transparent; }
.pill.none    { color: var(--muted); border-color: var(--line); }
.pill.ready   { color: var(--warn); border-color: rgba(210, 153, 34, .4); background: rgba(210, 153, 34, .1); }
.pill.done    { color: var(--accent); border-color: rgba(76, 141, 255, .4); background: rgba(76, 141, 255, .1); }
.pill.multi   { color: var(--multi); border-color: rgba(163, 113, 247, .4); background: rgba(163, 113, 247, .1); }
.pill.human   { color: var(--ok); border-color: rgba(63, 185, 80, .4); background: rgba(63, 185, 80, .1); }
.pill.empty   { color: #8b98ad; border-color: var(--line); background: rgba(139, 152, 173, .08); }
.pill.nosv    { color: #9b8bb4; border-color: rgba(155, 139, 180, .35); background: rgba(155, 139, 180, .08); }
.pill.failed  { color: var(--bad); border-color: rgba(248, 81, 73, .4); background: rgba(248, 81, 73, .1); }

/* --- detail panel --- */
.detail { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.detail-head h2 { margin: 0; }
.detail-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }
.detail-stats .chip {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 10px; font-size: 12px; color: var(--muted);
}
.detail-stats .chip strong { color: var(--text); }
.detail-hint { font-size: 12px; color: var(--muted); margin: 10px 0 0; line-height: 1.45; }

/* --- pokretanje posla --- */
.submit {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  padding: 10px 12px;
  margin-bottom: 12px;
}
.submit-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.submit-opts { margin-top: 10px; gap: 10px; }
.submit-opts label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 11px; color: var(--muted);
}
/* `display: flex` above beats the [hidden] attribute's own display:none, so hiding these
   from JS silently did nothing — the OpenRouter-only cost and custom-model fields showed
   for every engine. Re-assert it at matching specificity rather than with !important. */
.submit-opts label[hidden] { display: none; }
.submit-opts select, .submit-opts input[type="number"], .submit-opts input[type="text"] {
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  color: var(--text); padding: 5px 7px; font: inherit; font-size: 12px; min-width: 78px;
}
.submit-opts input[type="text"] { min-width: 160px; }
.submit-opts .opt-write { flex-direction: row; align-items: center; gap: 6px; }
.run-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.run-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.run-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.run-btn.primary:hover:not(:disabled) { background: #3d7ae8; color: #fff; }
.run-btn:disabled { opacity: .45; cursor: not-allowed; }
.run-sub { font-size: 10px; font-weight: 600; opacity: .75; text-transform: uppercase; letter-spacing: .04em; }
.run-hint { font-size: 10px; font-weight: 400; opacity: .8; }
.submit-msg { font-size: 12px; color: var(--muted); margin-top: 8px; min-height: 1.2em; }
.submit-msg.ok { color: var(--ok); }
.submit-msg.err { color: var(--bad); }

/* --- poslovi --- */
.jobs .job-id { font-size: 10px; }
.job-actions { display: flex; gap: 6px; }
.ghost-btn.danger { color: var(--bad); border-color: rgba(248, 81, 73, .4); }
.ghost-btn.danger:hover { border-color: var(--bad); }
.job-log {
  margin: 10px 0 0;
  background: #0b0d11; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px; font-size: 11px; line-height: 1.45;
  max-height: 300px; overflow: auto; white-space: pre-wrap; word-break: break-word;
}
.detail .table-wrap { max-height: 360px; overflow-y: auto; }

/* --- popup --- */
.leaflet-popup-content-wrapper { background: var(--panel); color: var(--text); border-radius: var(--radius); }
.leaflet-popup-tip { background: var(--panel); }
.leaflet-popup-content { margin: 10px 12px; font-size: 13px; }
.popup-title { font-weight: 600; margin-bottom: 4px; }
.popup-row { color: var(--muted); font-size: 12px; }
.popup-btn {
  margin-top: 8px; background: var(--accent); color: #fff; border: 0;
  border-radius: 6px; padding: 5px 10px; font: inherit; font-size: 12px; cursor: pointer;
}

@media (max-width: 720px) {
  main { padding: 12px; }
  #map { height: 62vh; max-height: 420px; aspect-ratio: auto; }
  .legend { right: 8px; bottom: 8px; max-width: 160px; padding: 8px 10px; }
  .legend-note { display: none; }
  .parent-col { display: none; }
  .topbar h1 { font-size: 15px; }
  .tile .val { font-size: 18px; }
}

/* The green dot marking an area whose Street View imagery is complete. Same swatch is
   reused in the legend and in the area popup so the map and the text agree. */
.dot-complete {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  border: 1.5px solid #0b0d11;
  flex: none;
  vertical-align: -1px;
  margin-right: 2px;
}

#legend-areas .legend-keys { margin-top: 6px; }

/* Street View quota bar, above the download button. Colours only escalate — the neutral
   state is deliberately quiet so that amber and red mean something when they appear. */
.budget {
  border: 1px solid var(--line, #222834);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.02);
}
.budget-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.budget-title { font-size: 12px; font-weight: 600; }
.budget-num { font-size: 12px; font-variant-numeric: tabular-nums; }
.budget-bar {
  display: block;
  height: 6px;
  margin: 6px 0 5px;
  border-radius: 3px;
  background: #2a2f3a;
  overflow: hidden;
}
.budget-bar > span { display: block; height: 100%; background: #3fb950; transition: width 0.3s ease; }
.budget.warn .budget-bar > span { background: #d29922; }
.budget.over .budget-bar > span { background: #f85149; }
.budget.over .budget-num { color: #f85149; }
.budget-note { font-size: 11px; line-height: 1.35; }

/* The budget sits in the top strip, so it needs the same outer rhythm as .live. */
section.budget { margin-bottom: 14px; }