/* ============================================================================
   TEMA: Classic (javni frontend) — izvorni izgled ekstrahiran u tokene.
   Bez vizualnih promjena; nova frontend tema = novi file + zapis u registry.json.
   ========================================================================== */

:root, [data-theme="classic"] {
  /* primitivni brand tokeni */
  --navy: #003366;
  --navy-tamna: #00264d;
  --gold: #b59410;
  --jade: #00A859;
  --jade-tamna: #047857;

  /* semantički tokeni (isti set kao backoffice teme) */
  --bg-canvas: #f1f5f9;
  --bg-surface: #ffffff;
  --bg-surface-2: #f8fafc;
  --border: #e2e8f0;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
  --heading: var(--navy);
  --accent: var(--navy);
  --accent-fg: #ffffff;
  --accent-soft: #e8edf3;
  --link: var(--navy);
  --positive: #00A859;
  --positive-soft: #e6f7ef;
  --warning: #f59e0b;
  --warning-soft: #fffbeb;
  --destructive: #dc2626;
  --destructive-soft: #fef2f2;
  --info: #0284c7;
  --info-soft: #e0f2fe;
  --tamni: #1e293b;
  --radius-sm: .375rem;
  --radius-md: .5rem;
  --radius-lg: .75rem;
  --radius-xl: 1rem;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.1);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --font-sans: "Plus Jakarta Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --space-unit: 4px;
  --motion-fast: 150ms;
  --motion-base: 220ms;
  --motion-ease: cubic-bezier(.2,.8,.2,1);
}

/* ── osnovno ── */
body.fe-body { font-family: var(--font-sans); background: var(--bg-canvas); color: var(--text-primary); }

/* ── header ── */
.fe-header { background: var(--navy); color: #fff; box-shadow: var(--shadow-md); }
.fe-header .pod { color: #cbd5e1; }
.fe-header-gumb { font-size: .75rem; font-weight: 600; background: rgba(255,255,255,.1);
  padding: .5rem .75rem; border-radius: var(--radius-md); color: #fff; }
.fe-header-gumb:hover { background: rgba(255,255,255,.2); }

/* ── tekst ── */
.t-naslov { color: var(--heading); }
.t-sekundarno { color: var(--text-secondary); }
.t-prigusen { color: var(--text-muted); }
.t-iznos { color: var(--gold); }
.t-pozitivno { color: var(--positive); }
.t-greska { color: var(--destructive); }
.link { color: var(--link); text-decoration: underline; }

/* ── kartice ── */
.card { background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.panel-info { background: var(--bg-surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); }

/* ── forme (javni obrazac) ── */
.lbl { display: block; font-size: .8rem; font-weight: 600; color: var(--heading); margin-bottom: .25rem; }
.inp { width: 100%; border: 1px solid #cbd5e1; border-radius: var(--radius-md);
  padding: .6rem .75rem; font-size: .9rem; background: var(--bg-surface); color: var(--text-primary); }
.inp:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.err { color: var(--destructive); font-size: .75rem; margin-top: .25rem; }
.obavezno { color: var(--destructive); }

/* ── gumbi ── */
.btn-posalji { width: 100%; background: var(--jade); color: #fff; font-weight: 700;
  padding: .75rem; border-radius: var(--radius-md); border: 0; cursor: pointer;
  transition: background var(--motion-fast); }
.btn-posalji:hover { background: var(--jade-tamna); }
.btn-posalji:disabled { opacity: .5; }
.btn-primary { background: var(--jade); color: #fff; font-weight: 700; border: 0;
  border-radius: var(--radius-md); padding: .6rem 1rem; cursor: pointer; }
.btn-pill-promijeni { background: var(--accent-soft); color: var(--navy); font-weight: 700;
  font-size: .75rem; border: 1px solid var(--navy); border-radius: 9999px;
  padding: .3rem .8rem; cursor: pointer; white-space: nowrap;
  transition: background var(--motion-fast), color var(--motion-fast); }
.btn-pill-promijeni:hover { background: var(--navy); color: #fff; }

/* ── koraci (step pills) ── */
.step-pill { display: flex; align-items: center; gap: .4rem; padding: .35rem .8rem;
  border-radius: 9999px; font-size: .75rem; font-weight: 600;
  background: var(--accent-soft); color: var(--text-secondary); }
.step-pill.aktivan { background: var(--navy); color: #fff; }
.step-pill.gotov { background: var(--jade); color: #fff; }

/* ── Leaflet markeri: pill oblik sa strelicom prema točnoj koordinati ──
   Anatomija: .marker-pin (pill) + ::after (trokut-pointer na dnu, po sredini).
   Boja po tipu parkirališta: zatvorena → navy, otvorena → zlatna, T1S → navy dashed. */
.marker-pin { position: relative; display: flex; align-items: center; justify-content: center;
  min-width: 34px; height: 22px; padding: 4px 10px; border-radius: 10px;
  color: #fff; font-weight: 800; font-size: 12px; line-height: 1; white-space: nowrap;
  background: var(--navy); border: 1.5px solid #fff;
  box-shadow: 0 2px 8px rgb(0 0 0 / .25);
  transition: transform 180ms var(--motion-ease, ease), box-shadow 180ms var(--motion-ease, ease),
    opacity 180ms var(--motion-ease, ease); }
.marker-pin::after { content: ""; position: absolute; left: 50%; bottom: -6px;
  width: 0; height: 0; transform: translateX(-50%);
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 6px solid #fff; }
.marker-pin.marker-otvoreno { background: var(--gold); }
.marker-pin.stanari { background: var(--navy); border: 2px dashed #fff; }

.marker-pin:hover { transform: translateY(-3px) scale(1.06);
  box-shadow: 0 6px 16px rgb(0 0 0 / .35); z-index: 1000; }
.marker-pin.odabran { transform: scale(1.15);
  box-shadow: 0 2px 8px rgb(0 0 0 / .25), 0 0 0 3px var(--positive, #00A859); z-index: 1000; }
.marker-pin.prigusen { opacity: .55; }

@media (prefers-reduced-motion: no-preference) {
  .marker-pin.odabran { animation: marker-pulzira 2s infinite; }
  @keyframes marker-pulzira {
    0%, 100% { box-shadow: 0 2px 8px rgb(0 0 0 / .25), 0 0 0 3px var(--positive, #00A859); }
    50%      { box-shadow: 0 2px 8px rgb(0 0 0 / .25), 0 0 0 6px rgb(0 168 89 / .35); }
  }
  .marker-ulaz { animation: marker-pada 260ms var(--motion-ease, ease) both; }
  @keyframes marker-pada {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* Leaflet tooltip — tamna pozadina, usklađeno s ostatkom aplikacije */
.leaflet-tooltip.karta-tooltip { background: var(--tamni, #1e293b); color: #fff;
  border: 0; border-radius: 8px; font-size: 12px; font-weight: 600;
  padding: .35rem .6rem; box-shadow: 0 4px 12px rgb(0 0 0 / .25); }
.leaflet-tooltip.karta-tooltip::before { display: none; }

/* ── atribucija karte (bez Leaflet watermarka) ── */
.leaflet-control-attribution { font-size: 10px; line-height: 1.35; padding: 2px 6px;
  background: rgba(255,255,255,.85) !important; color: var(--text-muted); }
.leaflet-control-attribution a { color: var(--text-secondary); text-decoration: none; }
.leaflet-control-attribution a:hover { color: var(--navy); text-decoration: underline; }

/* ── info panel na karti (donji lijevi kut) ── */
.map-info-bubble { position: absolute; left: 1.25rem; bottom: 1.25rem; z-index: 1000;
  width: min(18.5rem, calc(100% - 2.5rem)); background: var(--bg-surface); border-radius: 16px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08);
  padding: 1.15rem 1.2rem; pointer-events: none; }
.map-info-bubble__hdr { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.map-info-bubble__icon { display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 1.25rem; height: 1.25rem; color: var(--navy); }
.map-info-bubble__title { font-size: .9rem; font-weight: 700; color: var(--navy); line-height: 1.3; }
.map-info-bubble__text { font-size: .78rem; line-height: 1.45; color: var(--text-secondary); margin: 0; }
.map-info-bubble__legenda { margin-top: .6rem; padding-top: .55rem;
  border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: .35rem; }
.map-info-bubble__legenda-red { display: flex; align-items: center; gap: .45rem;
  font-size: .7rem; line-height: 1.3; color: var(--text-secondary); }
.map-info-bubble__uzorak { flex-shrink: 0; width: 26px; height: 16px; border-radius: 8px;
  border: 1.5px solid #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .2); }
.map-info-bubble__uzorak.zatvoreno { background: var(--navy); }
.map-info-bubble__uzorak.otvoreno { background: var(--gold); }
.map-info-bubble__uzorak.stanari { background: var(--navy); border: 2px dashed #fff; }

/* ── statusne pilule (moj_zahtjev) ── */
.st-pilula { color: #fff; font-size: .875rem; font-weight: 700; padding: .375rem 1rem;
  border-radius: 9999px; background: var(--text-muted); }
.st-NEVERIFICIRAN { background: var(--text-muted); }
.st-NOVI          { background: var(--info); }
.st-U_OBRADI      { background: var(--navy); }
.st-POTREBNA_DOPUNA { background: var(--warning); }
.st-CEKA_ODOBRENJE  { background: #4f46e5; }
.st-CEKA_UPLATU     { background: var(--gold); }
.st-AKTIVNO         { background: var(--jade); }
.st-ISTEKLO         { background: var(--text-secondary); }
.st-ODBIJENO        { background: var(--destructive); }
.st-EKSPIRIRAO      { background: #f87171; }
.st-STORNIRANO      { background: #991b1b; }

/* ── okviri upozorenja/odbijanja (moj_zahtjev) ── */
.okvir-dopuna { background: var(--warning-soft); border: 1px solid var(--warning);
  border-radius: var(--radius-lg); }
.okvir-dopuna h2 { color: #92400e; }
.okvir-dopuna blockquote { background: var(--bg-surface); border-left: 4px solid var(--warning);
  padding: .75rem; border-radius: var(--radius-sm); font-size: .875rem; }
.okvir-odbijeno { background: var(--destructive-soft); border: 1px solid var(--destructive);
  border-radius: var(--radius-lg); }
.okvir-odbijeno h2 { color: #b91c1c; }
.okvir-odbijeno blockquote { background: var(--bg-surface); border-left: 4px solid var(--destructive);
  padding: .75rem; border-radius: var(--radius-sm); font-size: .875rem; }

/* ── v_dozvola (QR provjera — mora ostati brza i čitljiva) ── */
.kartica { width: 100%; max-width: 460px; border-radius: var(--radius-xl);
  padding: 36px 28px; text-align: center; color: #fff; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.kartica.VALJANA { background: var(--positive); }
.kartica.ISTEKLA { background: #d97706; }
.kartica.STORNIRANA { background: var(--destructive); }
.kartica.NEPOSTOJECA { background: #4b5563; }

/* ── poruka.html ── */
.poruka-okvir { background: var(--bg-surface); border-radius: 14px; padding: 36px;
  max-width: 480px; text-align: center; box-shadow: 0 6px 24px rgba(0,0,0,.12); }
.poruka-okvir h1 { color: var(--heading); font-size: 22px; margin-bottom: 12px; }
.poruka-okvir p { color: #444; line-height: 1.6; }
.poruka-okvir a { display: inline-block; margin-top: 18px; color: var(--link); font-weight: 700; }

/* ── sitni kontrolni elementi (generira ih public.js) ── */
.radio-akcent { accent-color: var(--accent); }
.gumb-datoteka { flex-shrink: 0; font-size: .75rem; background: var(--navy); color: #fff;
  border-radius: .25rem; padding: .375rem .75rem; }

/* ── pristupačnost ── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}