/* ============================================================
   Građevno — F3 Transparency CSS
   "Plugin" stilovi za rules_source diskriminaciju (ppuo vs generic).

   NE dira core hr-gradjevno.css — samo dodaje nove varijante i
   komponente. Učitava se NAKON hr-gradjevno.css.

   Hook: <link rel="stylesheet" href="/css/transparency.css?v=1">
   ============================================================ */

/* ─── 1. Verdict banner — 4 vizualna stanja (F3 IZMJENA 3) ───
   Postojeći: .yes (zeleno), .no (crveno), .warn (žuto-uvjetno)
   Novi:      .estimate-yes (žuto DA), .estimate-no (žuto NE)
   Mapiranje:
     can_build     → .yes
     cannot_build  → .no
     estimate_yes  → .estimate-yes
     estimate_no   → .estimate-no
   ─────────────────────────────────────────────────────────── */

.gn-verdict.estimate-yes,
.gn-verdict.estimate-no {
  background: linear-gradient(135deg, #FFF8E1, #FFFDF5);
  border-color: var(--gold);
}
.gn-verdict.estimate-yes .gn-verdict-icon,
.gn-verdict.estimate-no .gn-verdict-icon {
  background: rgba(212, 165, 116, 0.20);
}
.gn-verdict.estimate-yes .gn-verdict-title,
.gn-verdict.estimate-no .gn-verdict-title {
  color: #92640C;
}

/* ─── 2. Rules source badge (odmah ispod verdict bannera) ───
   🟢 Službena pravila: PPUO [Općina] (na snazi)   → zelena
   🟠 Okvirna pravila: Zakon o prostornom uređenju  → narančasta
   ─────────────────────────────────────────────────────────── */

.gn-rules-badge {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px; border-radius: 12px; margin-bottom: 18px;
  font-size: 13px; line-height: 1.45;
  border: 1px solid;
}
.gn-rules-badge .gn-rules-badge-icon {
  flex-shrink: 0; font-size: 16px; line-height: 1.3;
}
.gn-rules-badge .gn-rules-badge-body { flex: 1; }
.gn-rules-badge .gn-rules-badge-title {
  font-weight: 700; margin-bottom: 2px;
}
.gn-rules-badge .gn-rules-badge-sub {
  font-size: 11.5px; color: var(--muted); margin-top: 3px;
}
.gn-rules-badge .gn-rules-badge-link {
  color: inherit; text-decoration: underline; text-underline-offset: 2px;
}

/* Zelena varijanta — PPUO (službena) */
.gn-rules-badge.ppuo {
  background: linear-gradient(135deg, #E8F5E9, #F1F8F4);
  border-color: var(--green-light);
  color: var(--green-dark);
}
.gn-rules-badge.ppuo .gn-rules-badge-title { color: var(--green-dark); }

/* Narančasta varijanta — generic (okvirna procjena) */
.gn-rules-badge.generic {
  background: linear-gradient(135deg, #FFF4E6, #FFFBF2);
  border-color: var(--gold);
  color: #7A5418;
}
.gn-rules-badge.generic .gn-rules-badge-title { color: #92640C; }

/* ─── 3. (okvirno) etiketa za generičke brojeve ─────────────
   Dodaje se na .gn-key-card kad je rules_source='generic' za
   polja rules/tlocrt/markica. Površina/KIG/širina ostaju službene.
   ─────────────────────────────────────────────────────────── */

.gn-key-card.gn-estimate {
  border-style: dashed;
  border-color: var(--gold);
}
/* ≈ kao PREFIKS (≈ 794 m²), dodaje se samo kad vrijednost postoji.
   .gn-has-approx klasu postavlja JS markEstimateCards() — preskače vrijednosti
   koje su "—" ili prazne, da se ne prikaže "≈ —". */
.gn-key-card.gn-estimate.gn-has-approx .gn-key-value::before {
  content: '≈ ';
  color: var(--gold);
  font-weight: 700;
}
.gn-estimate-tag {
  display: inline-block;
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--gold);
  background: rgba(212, 165, 116, 0.15);
  padding: 2px 6px; border-radius: 4px;
  margin-left: 6px; vertical-align: middle;
}

/* ─── 4. Disclaimer blokovi ────────────────────────────────
   .gn-disclaimer-source: dodatni disclaimer iz API-ja (generic općine)
                          — prikazuje se IZNAD generičkog bloka
   .gn-disclaimer: postojeći generički blok (core) — ostaje netaknut
   ─────────────────────────────────────────────────────────── */

.gn-disclaimer-source {
  background: linear-gradient(135deg, #FFF4E6, #FFFBF2);
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 16px 0 12px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #7A5418;
}
.gn-disclaimer-source strong {
  display: block;
  font-weight: 700;
  color: #92640C;
  margin-bottom: 4px;
}

/* ─── 5. Dropdown ✅ sufiks za verificirane općine ─────────
   Dodaje se u .gn-ac-item kad općina ima rules_source='ppuo'
   ─────────────────────────────────────────────────────────── */

.gn-ac-item .gn-ac-verified {
  color: var(--green);
  font-weight: 700;
  margin-left: 6px;
}

/* ─── 5b. (okvirno) napomena iznad "Mogući načini gradnje" ───
   Prikazuje se samo za generic općine (rules_source='generic').
   ─────────────────────────────────────────────────────────── */

.gn-bo-okvirno-note {
  font-size: 11.5px;
  line-height: 1.45;
  color: #7A5418;
  background: rgba(212, 165, 116, 0.10);
  border-left: 3px solid var(--gold);
  padding: 7px 11px;
  border-radius: 0 6px 6px 0;
  margin: 0 0 10px 0;
}

/* ─── 6. Mobile prilagodbe ───────────────────────────────── */
@media (max-width: 480px) {
  .gn-rules-badge {
    padding: 10px 12px;
    font-size: 12px;
  }
  .gn-rules-badge .gn-rules-badge-icon { font-size: 14px; }
  .gn-disclaimer-source {
    padding: 12px 14px;
    font-size: 11.5px;
  }
  .gn-coverage { padding: 9px 12px; font-size: 12px; }
}

/* ─── 7. F6 Data coverage indicator (PPUO pokrivenost, issue #44) ───
   Statična traka u form-card: pokazuje koliko KO ima službena
   PPUO pravila vs okvirnu procjenu. Broj se osvježava iz API-ja
   (loadMunicipalities → #grdPpuoCount). Reuse zelenih tokena.
   ─────────────────────────────────────────────────────────── */
.gn-coverage {
  display: flex; align-items: center; gap: 9px;
  margin-top: 16px; padding: 10px 14px;
  background: linear-gradient(135deg, #E8F5E9, #F1F8F4);
  border: 1px solid var(--green-light);
  border-radius: 10px; font-size: 12.5px; line-height: 1.4;
  color: var(--green-dark);
}
.gn-coverage-dot {
  flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--green-dark);
  box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.15);
}
.gn-coverage-text strong { font-weight: 800; }
.gn-coverage-regions { color: var(--muted); font-size: 11.5px; }