/* ──────────────────────────────────────────────────────────────
   Javne nabavke · Zahtjev za nabavku — FORMA (page-local .zf-*)
   PBI #5590. Ported from redesign mock NabavkeZahtjevForma.html <style>.
   Scoped under .nbp.
   ────────────────────────────────────────────────────────────── */

.nbp .zf-wrap { max-width: 1024px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }

.nbp .zf-sec { background: var(--is-bg-surface); border: 1px solid var(--is-border-1); border-radius: var(--is-radius-md); box-shadow: var(--is-shadow-1); overflow: visible; }
.nbp .zf-sec__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--is-border-1); background: var(--is-bg-surface-3); border-radius: var(--is-radius-md) var(--is-radius-md) 0 0; }
.nbp .zf-sec__title { font: 700 14px var(--is-font-sans); color: var(--is-fg-1); display: inline-flex; align-items: center; gap: 8px; }
.nbp .zf-sec__title i { color: var(--is-fg-3); font-size: 13px; }
.nbp .zf-sec__body { padding: 18px; }

.nbp .zf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
@media (max-width: 820px) { .nbp .zf-grid { grid-template-columns: 1fr; } }
.nbp .zf-col { display: flex; flex-direction: column; gap: 14px; }

.nbp .zf-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.nbp .zf-label { font: 600 12px var(--is-font-sans); color: var(--is-fg-2); display: inline-flex; align-items: center; gap: 5px; }
.nbp .zf-req { color: var(--is-danger); font-weight: 700; }
.nbp .zf-help-ico { color: var(--is-fg-muted); font-size: 11px; cursor: help; }
.nbp .zf-input, .nbp .zf-select, .nbp .zf-textarea {
  width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--is-border-3); border-radius: var(--is-radius-sm);
  background: #fff; font: 500 13px var(--is-font-sans); color: var(--is-fg-1); appearance: none;
}
.nbp .zf-textarea { height: auto; min-height: 76px; padding: 9px 12px; resize: vertical; line-height: 1.5; }
.nbp .zf-select {
  padding-right: 30px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 5l3 3 3-3' stroke='%2376767E' fill='none' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 9px center;
}
.nbp .zf-input:focus, .nbp .zf-select:focus, .nbp .zf-textarea:focus { outline: none; border-color: var(--is-action-blue); box-shadow: 0 0 0 3px rgba(0,123,255,.15); }
.nbp .zf-input::placeholder, .nbp .zf-textarea::placeholder { color: var(--is-fg-muted); }
.nbp .zf-input.is-error, .nbp .zf-textarea.is-error { border-color: var(--is-danger); box-shadow: 0 0 0 3px rgba(217,44,44,.12); }
.nbp .zf-err { font: 600 11.5px var(--is-font-sans); color: var(--is-danger); display: inline-flex; align-items: center; gap: 5px; }
.nbp .zf-err i { font-size: 10px; }

/* Currency suffix input */
.nbp .zf-money { position: relative; }
.nbp .zf-money input { padding-right: 42px; font-family: var(--is-font-mono); font-variant-numeric: tabular-nums; }
.nbp .zf-money__suf { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 600 12px var(--is-font-sans); color: var(--is-fg-3); pointer-events: none; }

/* Radio group (Hitnost) */
.nbp .zf-radios { display: flex; gap: 8px; }
.nbp .zf-radio { flex: 1; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--is-border-3); border-radius: var(--is-radius-sm); background: #fff; font: 600 13px var(--is-font-sans); color: var(--is-fg-2); cursor: pointer; transition: all .12s; margin-bottom: 0px !important; }
.nbp .zf-radio:hover { background: var(--is-bg-surface-3); }
.nbp .zf-radio input { accent-color: var(--is-brand-blue); margin: 0; }
.nbp .zf-radio.is-on { border-color: var(--is-brand-blue); background: var(--is-brand-blue-100); color: var(--is-brand-blue-700); }
.nbp .zf-radio.is-on-danger { border-color: var(--is-danger); background: var(--is-danger-bg); color: #a31e1e; }

/* Items table */
.nbp .zf-itemtable { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.nbp .zf-itemtable thead th { font: 600 10px var(--is-font-sans); color: var(--is-fg-3); text-transform: uppercase; letter-spacing: .05em; text-align: left; padding: 0 8px 8px; white-space: nowrap; }
.nbp .zf-itemtable thead th.zf-num { text-align: right; }
.nbp .zf-itemtable tbody td { padding: 5px 8px; vertical-align: top; }
.nbp .zf-itemtable tbody td:first-child { padding-left: 0; }
/* Items rows: zero hover reaction (matches the mock). The global site.css rule
   `table tbody tr:hover` adds bg + colour + glow box-shadow — neutralize all of it. */
.nbp .zf-itemtable tbody tr:hover,
.nbp .zf-itemtable tbody tr:hover > td {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  text-shadow: none !important;
}
.nbp .zf-rownum { font: 700 12px var(--is-font-mono); color: var(--is-fg-3); padding-top: 14px !important; text-align: center; }
.nbp .zf-cellinput { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--is-border-3); border-radius: var(--is-radius-sm); background: #fff; font: 500 12.5px var(--is-font-sans); color: var(--is-fg-1); }
.nbp .zf-cellinput:focus { outline: none; border-color: var(--is-action-blue); box-shadow: 0 0 0 3px rgba(0,123,255,.15); }
.nbp .zf-cellinput.zf-rt { text-align: right; font-family: var(--is-font-mono); font-variant-numeric: tabular-nums; }
.nbp .zf-cellselect { cursor: pointer; appearance: none; padding-right: 26px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 5l3 3 3-3' stroke='%2376767E' fill='none' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 7px center; }
/* Unit-of-measure cell dropdown (Syncfusion) — match the 38px cell-input height. */
.nbp .zf-celldd.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper,
.nbp .zf-celldd.e-ddl.e-input-group.e-control-wrapper,
.nbp span.zf-celldd.e-input-group {
  height: 38px !important;
  min-height: 38px !important;
  align-items: center;
}
.nbp .zf-celldd.e-input-group .e-input,
.nbp .zf-celldd input.e-input {
  height: 36px !important;
  line-height: 36px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.nbp .zf-delbtn { width: 34px; height: 38px; border: 1px solid transparent; background: transparent; color: var(--is-fg-3); border-radius: var(--is-radius-sm); cursor: pointer; font-size: 12px; }
.nbp .zf-delbtn:hover { background: var(--is-danger-bg); color: var(--is-danger); border-color: rgba(217,44,44,.25); }
.nbp .zf-delbtn:disabled { opacity: .4; cursor: not-allowed; }

/* Inline searchable picker (Veza sa stavkom plana) */
.nbp .zf-picker { position: relative; }
.nbp .zf-picker__trigger { width: 100%; min-height: 38px; padding: 4px 28px 4px 8px; border: 1px solid var(--is-border-3); border-radius: var(--is-radius-sm); background: #fff; cursor: pointer; display: flex; align-items: center; gap: 6px; font: 500 12.5px var(--is-font-sans); color: var(--is-fg-1); position: relative; text-align: left; }
.nbp .zf-picker__trigger:hover { border-color: var(--is-border-2); }
.nbp .zf-picker.is-open .zf-picker__trigger { border-color: var(--is-action-blue); box-shadow: 0 0 0 3px rgba(0,123,255,.15); }
.nbp .zf-picker__placeholder { color: var(--is-fg-muted); }
.nbp .zf-picker__chev { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--is-fg-3); }
.nbp .zf-pchip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 4px 2px 9px; background: var(--is-brand-blue-100); color: var(--is-brand-blue-700); border: 1px solid #cfe4f4; border-radius: 999px; font: 600 11.5px var(--is-font-sans); }
.nbp .zf-pchip__txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nbp .zf-pchip__x { width: 17px; height: 17px; border: 0; background: transparent; color: inherit; cursor: pointer; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; flex-shrink: 0; }
.nbp .zf-pchip__x:hover { background: rgba(6,104,148,.16); }

.nbp .zf-pop { position: absolute; top: calc(100% + -2px); left: 0; width: 300px; min-width: 300px; background: #fff; border: 1px solid var(--is-border-1); border-radius: var(--is-radius-md); box-shadow: 0 12px 34px rgba(20,28,50,.16); z-index: 60; overflow: hidden; }
.nbp .zf-pop__search { padding: 8px; border-bottom: 1px solid var(--is-border-1); position: relative; }
.nbp .zf-pop__search i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--is-fg-3); font-size: 12px; }
.nbp .zf-pop__search input { width: 100%; height: 34px; padding: 0 10px 0 32px; border: 1px solid var(--is-border-3); border-radius: var(--is-radius-sm); font: 500 12.5px var(--is-font-sans); color: var(--is-fg-1); }
.nbp .zf-pop__search input:focus { outline: none; border-color: var(--is-action-blue); box-shadow: 0 0 0 3px rgba(0,123,255,.15); }
.nbp .zf-pop__list { max-height: 240px; overflow-y: auto; padding: 5px; }
.nbp .zf-pop__opt { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 6px; cursor: pointer; font: 500 12.5px var(--is-font-sans); color: var(--is-fg-1); }
.nbp .zf-pop__opt:hover { background: var(--is-bg-surface-3); }
.nbp .zf-pop__opt.is-sel { background: var(--is-brand-blue-100); color: var(--is-brand-blue-700); font-weight: 600; }
.nbp .zf-pop__opt-num { font: 700 11px var(--is-font-mono); color: var(--is-fg-3); min-width: 22px; }
.nbp .zf-pop__opt.is-sel .zf-pop__opt-num { color: var(--is-brand-blue-700); }
.nbp .zf-pop__opt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nbp .zf-pop__opt-val { font: 600 11px var(--is-font-mono); color: var(--is-fg-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nbp .zf-pop__opt.is-sel .zf-pop__opt-val { color: var(--is-brand-blue-700); }
.nbp .zf-pop__opt-check { color: var(--is-brand-blue); font-size: 11px; }
.nbp .zf-pop__empty { padding: 18px; text-align: center; font: 500 12px var(--is-font-sans); color: var(--is-fg-3); }
.nbp .zf-pop-backdrop { position: fixed; inset: 0; z-index: 55; }

/* Add row + sum */
.nbp .zf-additem { margin-top: 12px; }
.nbp .zf-sumrow { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--is-border-1); }
.nbp .zf-sum { font: 500 13px var(--is-font-sans); color: var(--is-fg-2); }
.nbp .zf-sum b { font: 700 16px var(--is-font-mono); color: var(--is-fg-1); font-variant-numeric: tabular-nums; margin-left: 8px; }
.nbp .zf-mismatch { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--is-warning-bg); border: 1px solid #f0d77a; border-radius: var(--is-radius-sm); font: 500 12px var(--is-font-sans); color: #7a5a00; max-width: 520px; text-align: left; }
.nbp .zf-mismatch i { color: var(--is-warning); flex-shrink: 0; }
.nbp .zf-mismatch b { font-family: var(--is-font-mono); font-weight: 700; }

/* Footer */
.nbp .zf-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 2px 8px; }
.nbp .zf-cancel { background: transparent; border: 0; font: 600 13px var(--is-font-sans); color: var(--is-fg-3); cursor: pointer; padding: 8px 6px; }
.nbp .zf-cancel:hover { color: var(--is-fg-1); text-decoration: underline; }
.nbp .zf-footer__right { display: flex; gap: 10px; }
.nbp .zf-cta { height: 42px; padding: 0 22px; font-size: 14px; }