/* Infografike (T13). Dopuna komponente.css (T12: .grafikon, g-osa, g-mreza, g-podatak, g-akcenat…).
   Samo tokeni iz style.css, bez ijedne druge boje. Uključuje se na stranama sa grafikonima: css: ['grafikoni.css'].
   Svaki grafikon sam uključuje ovaj fajl (<link> u .grafikon__slika, scripts/grafikoni/index.mjs); strana ga može
   uključiti i u <head> preko css: ['grafikoni.css'], dupli link ne smeta. */

/* ── Dve širine: uska (telefon) i široka; bira se po širini okvira grafikona, ne ekrana ─────────────────────── */
.grafikon__slika { container-type: inline-size; }
.grafikon__slika .g-oblici .g-sir { display: none; }
.g-oblici .g-uz { max-width: 26rem; }
@container (min-width: 36rem) {
  .grafikon__slika .g-oblici .g-uz { display: none; }
  .grafikon__slika .g-oblici .g-sir { display: block; }
}

/* ── Tekst u SVG-u (T12 daje osnovu: 13 jedinica, --sivo) ───────────────────────────────────────────────── */
.grafikon__slika svg .g-veliko, .g-svg .g-veliko { font-size: 20px; font-weight: 600; fill: var(--mastilo); }
.grafikon__slika svg .g-obicno, .g-svg .g-obicno { font-size: 14px; font-weight: 400; fill: var(--sivo); }
.grafikon__slika svg .g-naslov-panela, .g-svg .g-naslov-panela { font-size: 14px; }
.grafikon__slika svg .g-oreol, .g-svg .g-oreol { paint-order: stroke; stroke: var(--list); stroke-width: 4px; stroke-linejoin: round; }

/* ── Oblici ─────────────────────────────────────────────────────────────────────────────────────────────── */
.g-prazno-jako { fill: var(--list); stroke: var(--mastilo); stroke-width: 1.75; }
.g-plocica { fill: var(--list); stroke: var(--tanko); }
.g-plocica-link:hover .g-plocica { stroke: var(--mastilo); }
.g-mapa-granica { fill: var(--papir); stroke: var(--okvir); stroke-width: 1; stroke-linejoin: round; }
.g-mapa-granica--kim { stroke-dasharray: 3 3; }
.g-mapa-reka { stroke: var(--tanko); stroke-width: 1; fill: none; }
.g-mapa-reka--zariste { stroke: var(--mastilo); stroke-width: 1.75; }
.g-mapa-tacka { stroke: var(--list); stroke-width: 1.5; }

/* ── Interakcija: oznake na vremenskoj osi, ćelije matrice ──────────────────────────────────────────────── */
.g-tacka { cursor: pointer; }
.g-tacka:hover .g-podatak-svetlo, .g-tacka.g-izabrano .g-podatak-svetlo { fill: var(--mastilo); }
.g-tacka.g-izabrano rect.g-hit { stroke: var(--akcenat); stroke-width: 2; }
.g-celija { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; margin: calc(-1 * var(--r-2)) 0; color: inherit; text-decoration: none; }
.g-celija:hover { background: var(--magla); }
.g-celija.g-izabrano { outline: 2px solid var(--akcenat); outline-offset: -2px; }

/* ── Matrica: „nije provereno“ i ono što fali u Srbiji ──────────────────────────────────────────────────── */
.g-matrica { margin-top: 0; border: 0; }
.grafikon__slika .matrica__simbol { display: inline-block; width: 1rem; height: 1rem; } /* T12: .grafikon__slika svg { width: 100% } bi ih razvukao */
.g-matrica .matrica__legenda { padding-left: 0; padding-right: 0; }
.g-nije-provereno .matrica__simbol { color: var(--okvir); }
.g-fali .matrica__simbol, .g-legenda-fali .matrica__simbol { color: var(--akcenat); }

/* ── Panel sa izabranim redom (grafikoni.js) ────────────────────────────────────────────────────────────── */
.g-panel { margin-top: var(--r-4); padding: var(--r-3) var(--r-4); border-left: 3px solid var(--akcenat); background: var(--papir); font-size: var(--t-malo); }
.g-panel:focus { outline: none; }
.g-panel:focus-visible { outline: var(--fokus); }
.g-panel dl { margin: 0; display: grid; grid-template-columns: minmax(6rem, max-content) 1fr; gap: var(--r-1) var(--r-3); }
.g-panel dt { color: var(--sivo); }
.g-panel dd { margin: 0; }
.g-panel__zatvori { margin-top: var(--r-2); min-height: 2.75rem; padding: 0 var(--r-3); font: inherit; color: var(--mastilo); background: var(--list); border: 1px solid var(--okvir); border-radius: var(--zaobljenje); cursor: pointer; }
@media (max-width: 30em) { .g-panel dl { grid-template-columns: 1fr; } .g-panel dt { margin-top: var(--r-2); } }

/* ── Ostalo ─────────────────────────────────────────────────────────────────────────────────────────────── */
.g-napomena { margin-top: var(--r-3); color: var(--sivo); font-size: var(--t-sitno); max-width: var(--mera); }
.g-sparkline { display: block; width: 120px; height: 36px; margin-top: var(--r-2); }
.g-ceo-red { font-size: var(--t-sitno); white-space: nowrap; }
.grafikon__tabela tr[data-g-id].g-izabrano td { background: var(--akcenat-bledo); }
@media print { .grafikon__slika .g-oblici .g-uz { display: none; } .grafikon__slika .g-oblici .g-sir { display: block; } .g-panel { display: none; } }