/* ============================================================
   Javne nabavke — Ugovor (forma) page-specific atoms (.uf-* / .cf-*)
   Portano iz design/NabavkeUgovorForma.html (PBI 5898).
   zf-*, pf-note, zf-hint, zf-mono-in su već globalni (plan-form css).
   --is-* tokeni globalni; mapirani na postojeće (--is-border → --is-border-1,
   --is-border-strong → --is-border-3, --is-surface-2 → --is-bg-surface-2).
   ============================================================ */

.nbp .zf-span2-md { grid-column: 1 / -1; }

/* Kompaktna visina za tekst inpute "Broj ugovora" i "Ugovoreni iznos" (poravnanje sa ostalim kontrolama). */
.nbp .zf-input.uf-h33 { height: 33px !important; }

/* Snimi dugme (edit mode): sivo i ne-klikabilno dok nema nijedne promjene (dirty-state). */
.nbp .zf-cta:disabled,
.nbp .zf-cta:disabled:hover { opacity: .5; cursor: not-allowed; }

/* „Dobavljač nije u registru" toggle (na dnu sekcije) */
.nbp .uf-suptoggle { display: inline-flex; align-items: center; gap: 8px; font: 500 12px var(--is-font-sans); color: var(--is-fg-2); margin-top: 12px; cursor: pointer; }
.nbp .uf-suptoggle input { width: 15px; height: 15px; accent-color: var(--is-action-blue); cursor: pointer; }

/* Status chip (naslov forme + Period header) */
.nbp .uf-statuschip { display: inline-flex; align-items: center; gap: 6px; font: 700 11px var(--is-font-sans); padding: 3px 10px; border-radius: 999px; height: 24px; }
.nbp .uf-statuschip i { font-size: 11px; }
.nbp .uf-statuschip--active { background: var(--is-success-bg); color: #1a7a3a; border: 1px solid var(--is-success); }
.nbp .uf-statuschip--expired { background: var(--is-bg-surface-2); color: var(--is-fg-2); border: 1px solid var(--is-border-2); }

/* Skenirani ugovor — upload zona 1:1 iz dizajna */
.nbp .uf-upload { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1.5px dashed var(--is-border-3); border-radius: 12px; background: var(--is-bg-surface-2); text-align: left; }
.nbp .uf-upload__ico { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; background: var(--is-brand-blue-100); color: var(--is-brand-blue-700); font-size: 17px; flex: none; }
.nbp .uf-upload__txt { flex: 1; min-width: 0; }
.nbp .uf-upload__txt b { font-size: 13px; color: var(--is-fg-1); }
.nbp .uf-upload__txt small { display: block; color: var(--is-fg-muted); font-size: 11.5px; margin-top: 2px; }
.nbp .uf-upload .nb-btn { position: relative; overflow: hidden; flex: none; }
.nbp .uf-upload .nb-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }

.nbp .uf-file { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--is-border-1); border-radius: 10px; background: #fff; margin-top: 10px; }
.nbp .uf-file i.doc { color: var(--is-danger); font-size: 18px; }
.nbp .uf-file__meta { flex: 1; min-width: 0; }
.nbp .uf-file__meta b { font-size: 12.5px; color: var(--is-fg-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.nbp .uf-file__meta small { display: block; font: 500 11px var(--is-font-mono); color: var(--is-fg-muted); }
.nbp .uf-file__x { color: var(--is-fg-3); cursor: pointer; background: none; border: none; padding: 4px; }
.nbp .uf-file__x:hover { color: var(--is-danger); }
/* Download dugme: plavi hover (za razliku od crvenog X/delete). */
.nbp .uf-file__x--download:hover { color: var(--is-action-blue); }

/* ── Vezane stavke plana — SfMultiSelect chip: BABY BLUE (svijetloplavi) ──
   Svijetloplava pozadina + tamnoplavi tekst i X (kao ug-linkchip na listi).
   Syncfusion theme koristi !important + -webkit-text-fill-color + text-shadow;
   override po CLAUDE.md receptu (visoka specifičnost tag.class lanac). */
html body .nbp .cf-planitems .e-multi-select-wrapper span.e-chips-collection span.e-chips {
  background: var(--is-brand-blue-100) !important;
  border: 1px solid var(--is-brand-blue) !important;
}
html body .nbp .cf-planitems .e-multi-select-wrapper span.e-chips-collection span.e-chips span.e-chipcontent {
  color: var(--is-brand-blue-700) !important;
  -webkit-text-fill-color: var(--is-brand-blue-700) !important;
  text-shadow: none !important;
}
html body .nbp .cf-planitems .e-multi-select-wrapper span.e-chips-collection span.e-chips span.e-chips-close,
html body .nbp .cf-planitems .e-multi-select-wrapper span.e-chips-collection span.e-chips span.e-chips-close::before {
  color: var(--is-brand-blue-700) !important;
  -webkit-text-fill-color: var(--is-brand-blue-700) !important;
}

/* ── Validaciona greška (is-error) — crveni placeholder + crveni okvir ──
   Tekst inputi: crveni placeholder (okvir daje globalni .zf-input.is-error). */
.nbp .zf-input.is-error::placeholder { color: var(--is-danger); opacity: 1; }

/* Syncfusion date picker / dropdown / multiselect (CssClass="is-error"):
   okvir je na .e-input-group; is-error dolazi na wrapper (ancestor) ili direktno na grupu. */
.nbp .is-error .e-input-group,
.nbp .is-error.e-input-group,
.nbp .e-input-group.is-error,
.nbp .is-error .e-multi-select-wrapper,
.nbp .is-error.e-multi-select-wrapper {
  border-color: var(--is-danger) !important;
  box-shadow: 0 0 0 3px rgba(217,44,44,.12) !important;
}
/* crveni placeholder unutar tih kontrola */
.nbp .is-error .e-input::placeholder,
.nbp .is-error.e-input-group .e-input::placeholder,
.nbp .e-input-group.is-error .e-input::placeholder {
  color: var(--is-danger) !important;
  -webkit-text-fill-color: var(--is-danger) !important;
  opacity: 1;
}