/* ============================================================
   Javne nabavke — Metapodaci plana nabavki / forma (V2). PBI #5573.
   Ported from the NabavkePlanForma mock (zf-* form scaffolding +
   pf-* plan-form atoms), page-scoped under .nbp. The shared nb-*
   base atoms (pagehead, badge, btn, avatar, mono) come from
   redesign-procurement-plan.css (loaded globally).
   ============================================================ */

/* ── Form scaffolding (.zf-*) ──────────────────────────────── */
.nbp .zf-wrap { max-width: 880px; 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); }
.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: 16px 28px; }
/* Identifikacija plana: Godina + Broj plana + Datum usvajanja in a single row. */
.nbp .zf-grid--3 { grid-template-columns: repeat(3, 1fr); }
.nbp .zf-span2-md { grid-column: 1 / -1; }

.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-hint { font: 500 11px var(--is-font-sans); color: var(--is-fg-3); display: inline-flex; align-items: center; gap: 5px; }
.nbp .zf-input, .nbp .zf-select { 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); }
.nbp .zf-input:focus, .nbp .zf-select:focus { outline: none; border-color: var(--is-action-blue); box-shadow: 0 0 0 3px rgba(0,123,255,.15); }
.nbp .zf-input::placeholder { color: var(--is-fg-muted); }
.nbp .zf-input.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; }
.nbp .zf-mono-in { font-family: var(--is-font-mono); font-variant-numeric: tabular-nums; }

/* Footer */
.nbp .zf-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 2px 8px; }
.nbp .zf-footer__left { display: flex; align-items: center; gap: 6px; }
.nbp .zf-footer__right { display: flex; align-items: center; gap: 10px; }
.nbp .zf-cancel { background: transparent; border: 0; font: 600 13px var(--is-font-sans); color: var(--is-fg-3); cursor: pointer; padding: 8px 6px; text-decoration: none; }
.nbp .zf-cancel:hover { color: var(--is-fg-1); text-decoration: underline; }
.nbp .zf-delete { background: transparent; border: 1px solid transparent; font: 600 13px var(--is-font-sans); color: var(--is-danger); cursor: pointer; padding: 8px 12px; border-radius: var(--is-radius-sm); display: inline-flex; align-items: center; gap: 7px; }
.nbp .zf-delete:hover { background: var(--is-danger-bg); border-color: rgba(217,44,44,.25); }
.nbp .zf-cta { height: 42px; padding: 0 22px; font-size: 14px; }

/* ── Plan-form atoms (.pf-*) ───────────────────────────────── */
.nbp .pf-company { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--is-border-1); border-radius: var(--is-radius-md); background: linear-gradient(90deg, var(--is-brand-blue-100), var(--is-bg-surface-2)); }
.nbp .pf-company__mark { width: 40px; height: 40px; flex: none; border-radius: 9px; background: var(--is-brand-blue); color: #fff; display: grid; place-items: center; font: 800 15px var(--is-font-sans); }
.nbp .pf-company__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nbp .pf-company__label { font: 700 9.5px var(--is-font-sans); color: var(--is-brand-blue-700); text-transform: uppercase; letter-spacing: .07em; display: inline-flex; align-items: center; gap: 5px; }
.nbp .pf-company__txt b { font: 700 14.5px var(--is-font-sans); color: var(--is-fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nbp .pf-company__txt small { font: 500 11.5px var(--is-font-mono); color: var(--is-fg-3); }
.nbp .pf-company__lock { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 600 11px var(--is-font-sans); color: var(--is-fg-3); white-space: nowrap; }
.nbp .pf-company__lock i { font-size: 10px; color: var(--is-fg-muted); }

.nbp .pf-lifecycle { font: 600 11px var(--is-font-sans); color: var(--is-fg-3); display: inline-flex; align-items: center; gap: 8px; }
.nbp .pf-lifecycle i { color: var(--is-fg-muted); font-size: 10px; }

.nbp .pf-statuscards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.nbp .pf-statuscard { position: relative; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 9px; padding: 14px 14px 13px; border: 1.5px solid var(--is-border-3); border-radius: var(--is-radius-md); background: #fff; transition: border-color .12s, box-shadow .12s, background .12s; }
.nbp .pf-statuscard:hover { border-color: var(--is-fg-muted); background: var(--is-bg-surface-2); }
.nbp .pf-statuscard__radio { position: absolute; top: 12px; right: 12px; color: var(--is-border-3); font-size: 15px; }
.nbp .pf-statuscard.is-on .pf-statuscard__radio { color: var(--is-brand-blue); }
.nbp .pf-statuscard__icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; }
.nbp .pf-statuscard__icon--gray { background: var(--is-bg-surface-3); color: var(--is-fg-3); }
.nbp .pf-statuscard__icon--green { background: var(--is-success-bg); color: var(--is-success); }
.nbp .pf-statuscard__icon--purple { background: #efeafc; color: #7b51d8; }
.nbp .pf-statuscard__body { display: flex; flex-direction: column; gap: 3px; }
.nbp .pf-statuscard__title { font: 700 13.5px var(--is-font-sans); color: var(--is-fg-1); }
.nbp .pf-statuscard__desc { font: 500 11.5px var(--is-font-sans); color: var(--is-fg-3); line-height: 1.45; }
.nbp .pf-statuscard.is-on { box-shadow: 0 0 0 3px rgba(0,123,255,.12); }
.nbp .pf-statuscard--green { border-color: var(--is-success); box-shadow: 0 0 0 3px rgba(46,160,87,.14); }
.nbp .pf-statuscard--gray { border-color: var(--is-fg-muted); box-shadow: 0 0 0 3px rgba(118,118,126,.12); }
.nbp .pf-statuscard--purple { border-color: #7b51d8; box-shadow: 0 0 0 3px rgba(123,81,216,.14); }

.nbp .pf-pubchip { display: inline-flex; align-items: center; gap: 6px; font: 700 11px var(--is-font-sans); color: var(--is-fg-3); padding: 4px 10px; border-radius: 999px; background: var(--is-bg-surface); border: 1px solid var(--is-border-2); }
.nbp .pf-pubchip i { font-size: 11px; color: var(--is-fg-muted); }
.nbp .pf-pubchip.is-pub { color: var(--is-success); background: var(--is-success-bg); border-color: rgba(46,160,87,.3); }
.nbp .pf-pubchip.is-pub i { color: var(--is-success); }

.nbp .pf-note { display: flex; gap: 9px; padding: 11px 13px; border-radius: var(--is-radius-sm); background: var(--is-brand-blue-100); border: 1px solid rgba(0,123,255,.18); font: 500 12px var(--is-font-sans); color: var(--is-fg-2); line-height: 1.5; }
.nbp .pf-note i { color: var(--is-action-blue); margin-top: 2px; font-size: 12px; }
.nbp .pf-note b { color: var(--is-fg-1); font-weight: 700; }

.nbp .pf-urlrow { display: flex; gap: 10px; align-items: stretch; }
.nbp .pf-urlinput { position: relative; flex: 1; min-width: 0; }
.nbp .pf-urlinput i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--is-fg-muted); font-size: 12px; pointer-events: none; }
.nbp .pf-urlinput input { padding-left: 32px; font-family: var(--is-font-mono); font-size: 12px; }
.nbp .pf-urlrow .nb-btn { height: 38px; white-space: nowrap; }

/* SfDateTimePicker time popup — the list items already paint white, but the popup
   container / scroll area renders transparent in this theme, so the page shows
   through behind the scrollbar. Force a white background. The popup is rendered at
   <body> level (NOT inside .nbp), scoped via the picker's CssClass "pf-dtpopup". */
.e-popup.pf-dtpopup,
.e-popup.pf-dtpopup .e-content,
.e-popup.pf-dtpopup .e-list-parent {
    background-color: #fff !important;
}

.nbp .pf-auditbody { display: flex; flex-direction: column; }
.nbp .pf-audit { display: flex; align-items: center; gap: 16px; padding: 4px 0; }
.nbp .pf-audit__label { width: 120px; flex: none; font: 600 12px var(--is-font-sans); color: var(--is-fg-3); }
.nbp .pf-audit__who { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.nbp .pf-audit__meta { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.nbp .pf-audit__meta b { font: 700 12.5px var(--is-font-sans); color: var(--is-fg-1); white-space: nowrap; }
.nbp .pf-audit__when { display: inline-flex; align-items: center; gap: 6px; font: 500 12px var(--is-font-mono); color: var(--is-fg-2); white-space: nowrap; }
.nbp .pf-audit__when i { color: var(--is-fg-muted); font-size: 11px; }
.nbp .pf-audit__sep { height: 1px; background: var(--is-border-1); margin: 10px 0; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 760px) {
    .nbp .zf-grid { grid-template-columns: 1fr; }
    .nbp .pf-statuscards { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .nbp .pf-urlrow { flex-direction: column; }
    .nbp .pf-urlrow .nb-btn { justify-content: center; }
    .nbp .zf-footer { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
    .nbp .zf-footer__right { flex-direction: column-reverse; align-items: stretch; }
    .nbp .zf-footer__right .zf-cta { width: 100%; justify-content: center; }
}