/* Styles specific to the vrtići report (on top of prihodi-i-rashodi.css):
   KPI tiles, two-column blocks, sortable table headers, coverage notes. */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 10px;
}
.kpi {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}
.kpi .kpi-value {
  display: block;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.kpi.accent .kpi-value { color: var(--accent); }
.kpi.teal .kpi-value { color: #0e7490; }
.kpi .kpi-label {
  display: block;
  margin-top: 4px;
  font-size: .85rem;
  color: var(--muted);
}
.kpi .kpi-sub {
  display: block;
  margin-top: 2px;
  font-size: .78rem;
  color: var(--muted);
}

.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 26px;
  margin-top: 14px;
}
.struct-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 18px 26px;
  align-items: start;
}
.chart-box.short { height: 220px; }

.table-scroll {
  overflow-x: auto;
  margin: 14px 0;
  -webkit-overflow-scrolling: touch;
}
.table-scroll table { min-width: 560px; }

th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
th.sortable::after {
  content: "↕";
  margin-left: 5px;
  opacity: .4;
  font-size: .75rem;
}
th.sortable[aria-sort="ascending"]::after { content: "↑"; opacity: 1; color: var(--accent); }
th.sortable[aria-sort="descending"]::after { content: "↓"; opacity: 1; color: var(--accent); }

.cov-note {
  margin: 6px 0 0;
  padding: 8px 12px;
  border-left: 3px solid #0e7490;
  background: var(--soft);
  font-size: .9rem;
  color: var(--muted);
}
.method-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--soft);
  border: 1px solid var(--border);
}
.method-badge.table { color: #0e7490; }
.method-badge.llm { color: #7c3aed; }
.method-badge.web { color: #92400e; }
td .src-link { color: var(--accent); text-decoration: none; }
td .src-link:hover { text-decoration: underline; }
tr.no-children td { color: var(--muted); }

.legend-box li, .events-list li { margin: 4px 0; }
.events-list li strong { color: var(--fg); }

@media (max-width: 880px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two-col, .struct-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .kpi .kpi-value { font-size: 1.3rem; }
  .chart-box.tall { height: 420px; }
}

/* Emphasis on this page is teal, not the site-wide alarm red: the story is a
   policy gap, not a scandal box. Charts keep red only as a data colour. */
.finding-box {
  border-left-color: #0e7490;
  background: #e8f3f5;
}
.finding-box strong { color: #0e7490; }
.kpi.accent .kpi-value { color: #0e7490; }
th.sortable[aria-sort="ascending"]::after,
th.sortable[aria-sort="descending"]::after { color: #0e7490; }
td .src-link { color: #0e7490; }

/* Jedna mjera za sav tekući tekst — ista kao .lede (760 px, ~72 znaka po
   retku); grafovi, kartice i tablice ostaju pune širine. Na mobitelu su
   svi ionako 100 %. */
.finding-box, .section-intro, .chart-hint, .cov-note, .legend-box,
main p.small, .methodology-summary { max-width: 760px; }

/* Sklopivi odjeljci s poveznicom (#) na naslovu. */
main > section > h2.section-toggle {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-left: 24px;
}
h2.section-toggle::before {
  content: "▾";
  position: absolute;
  left: 0;
  color: var(--muted);
  font-size: .8em;
  top: .25em;
}
section.collapsed > h2.section-toggle::before { content: "▸"; }
section.collapsed > .section-body { display: none; }
h2 .anchor {
  margin-left: 8px;
  color: var(--muted);
  font-weight: 400;
  text-decoration: none;
  opacity: 0;
  transition: opacity .12s;
}
h2.section-toggle:hover .anchor, h2.section-toggle:focus .anchor { opacity: .75; }
h2 .anchor:hover { color: #0e7490; opacity: 1; }