/* ──────────────────────────────────────────────────────────────
   Javne nabavke · Zahtjev za nabavku — DETALJ (page-local .zd-*)
   PBI #5590. Ported from redesign mock NabavkeZahtjevDetalj.html <style>.
   Scoped under .nbp. RFQ + offer-comparison + prototype role-toggle
   blocks are intentionally omitted (deferred to a later PBI).
   ────────────────────────────────────────────────────────────── */

/* Header */
.nbp .zd-head { background: var(--is-bg-surface-3); border: 1px solid var(--is-border-1); border-radius: var(--is-radius-md); padding: 16px 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.nbp .zd-head__num { font: 600 12px var(--is-font-mono); color: var(--is-fg-3); }
.nbp .zd-head__title { font: 700 24px/1.2 var(--is-font-sans); color: var(--is-fg-1); letter-spacing: -.01em; margin: 4px 0 6px; }
.nbp .zd-head__sub { font: 500 12.5px var(--is-font-sans); color: var(--is-fg-3); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nbp .zd-head__sub b { color: var(--is-fg-1); font-weight: 700; }
.nbp .zd-head__sub .nb-mono { font-family: var(--is-font-mono); }
.nbp .zd-head__right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Stepper */
.nbp .zd-stepwrap { background: var(--is-bg-surface); border: 1px solid var(--is-border-1); border-radius: var(--is-radius-md); box-shadow: var(--is-shadow-1); padding: 20px 24px 16px; margin-bottom: 16px; }
.nbp .zd-stepper { display: flex; }
.nbp .zd-step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; padding: 0 6px; }
.nbp .zd-step::before { content: ""; position: absolute; top: 17px; left: -50%; width: 100%; height: 3px; background: var(--is-border-2); z-index: 0; }
.nbp .zd-step:first-child::before { display: none; }
.nbp .zd-step.line-done::before { background: var(--is-success); }
.nbp .zd-step.line-current::before { background: var(--is-brand-blue); }
.nbp .zd-circle { width: 36px; height: 36px; border-radius: 999px; background: #fff; border: 3px solid var(--is-border-3); display: inline-flex; align-items: center; justify-content: center; font: 700 13px var(--is-font-mono); color: var(--is-fg-3); position: relative; z-index: 1; }
.nbp .zd-circle.is-done { background: var(--is-success); border-color: var(--is-success); color: #fff; }
.nbp .zd-circle.is-current { background: var(--is-brand-blue); border-color: var(--is-brand-blue); color: #fff; animation: zd-pulse 1.8s cubic-bezier(0.4,0,0.2,1) infinite; }
.nbp .zd-circle.is-rejected { background: var(--is-danger); border-color: var(--is-danger); color: #fff; }
@keyframes zd-pulse { 0% { box-shadow: 0 0 0 0 rgba(4,148,218,.40); } 70% { box-shadow: 0 0 0 10px rgba(4,148,218,0); } 100% { box-shadow: 0 0 0 0 rgba(4,148,218,0); } }
@media (prefers-reduced-motion: reduce) { .nbp .zd-circle.is-current { animation: none; } }
.nbp .zd-step__name { font: 700 12px var(--is-font-sans); color: var(--is-fg-1); margin-top: 10px; line-height: 1.3; }
.nbp .zd-step__role { font: 500 11.5px var(--is-font-sans); color: var(--is-fg-2); margin-top: 5px; line-height: 1.3; }
.nbp .zd-step__state { font: 600 10.5px var(--is-font-mono); margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; }
.nbp .zd-step__state.s-done { color: var(--is-success); }
.nbp .zd-step__state.s-current { color: var(--is-brand-blue-700); }
.nbp .zd-step__state.s-future { color: var(--is-fg-muted); }
.nbp .zd-step__state.s-rejected { color: var(--is-danger); }
.nbp .zd-stepnote { text-align: center; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--is-border-1); font: 600 12.5px var(--is-font-sans); color: var(--is-brand-blue-700); display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; }
.nbp .zd-stepnote i { font-size: 12px; }

/* Two-column body */
.nbp .zd-body { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .nbp .zd-body { grid-template-columns: 1fr; } }

/* Content sub-sections */
.nbp .zd-sub { margin-bottom: 16px; }
.nbp .zd-sub:last-child { margin-bottom: 0; }
.nbp .zd-sub__title { font: 700 11px var(--is-font-sans); color: var(--is-fg-3); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.nbp .zd-sub__title i { font-size: 11px; color: var(--is-fg-muted); }

.nbp .zd-def { display: grid; grid-template-columns: 230px 1fr; gap: 0; padding: 9px 0; border-bottom: 1px dashed var(--is-border-1); align-items: baseline; }
.nbp .zd-def:last-child { border-bottom: 0; }
.nbp .zd-def__label { font: 500 12.5px var(--is-font-sans); color: var(--is-fg-3); }
.nbp .zd-def__value { font: 600 13px var(--is-font-sans); color: var(--is-fg-1); }
.nbp .zd-def__value .nb-mono { font-family: var(--is-font-mono); }
.nbp .zd-def__value small { font-weight: 500; color: var(--is-fg-3); }
.nbp .zd-muted { color: var(--is-fg-muted); }

.nbp .zd-itemsum { display: flex; justify-content: flex-end; padding: 10px 12px 0; font: 600 13px var(--is-font-sans); color: var(--is-fg-2); }
.nbp .zd-itemsum b { font: 700 15px var(--is-font-mono); color: var(--is-fg-1); margin-left: 8px; font-variant-numeric: tabular-nums; }

/* Projected-impact info box */
.nbp .zd-impact { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--is-radius-sm); margin-top: 12px; font: 500 12.5px/1.55 var(--is-font-sans); }
.nbp .zd-impact.is-slate { background: var(--is-bg-surface-3); border: 1px solid var(--is-border-1); color: var(--is-fg-2); }
.nbp .zd-impact.is-amber { background: var(--is-warning-bg); border: 1px solid #f0d77a; color: #7a5a00; }
.nbp .zd-impact i { font-size: 13px; margin-top: 2px; flex-shrink: 0; }
.nbp .zd-impact.is-slate i { color: var(--is-info); }
.nbp .zd-impact.is-amber i { color: var(--is-warning); }
.nbp .zd-impact b { font-family: var(--is-font-mono); font-weight: 700; color: inherit; }

/* Decision timeline */
.nbp .zd-decision { position: relative; padding: 0 0 16px 26px; }
.nbp .zd-decision:last-child { padding-bottom: 0; }
.nbp .zd-decision::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: -4px; width: 2px; background: var(--is-border-2); }
.nbp .zd-decision:last-child::before { display: none; }
.nbp .zd-decision__dot { position: absolute; left: 0; top: 2px; width: 12px; height: 12px; border-radius: 999px; background: var(--is-success); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--is-success); }
.nbp .zd-decision__dot.is-create { background: var(--is-brand-blue); box-shadow: 0 0 0 1px var(--is-brand-blue); }
.nbp .zd-decision__dot.is-reject { background: var(--is-danger); box-shadow: 0 0 0 1px var(--is-danger); }
.nbp .zd-decision__dot.is-return { background: var(--is-brand-orange); box-shadow: 0 0 0 1px var(--is-brand-orange); }
.nbp .zd-decision__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.nbp .zd-decision__ts { font: 600 11.5px var(--is-font-mono); color: var(--is-fg-3); }
.nbp .zd-decision__author { font: 700 12.5px var(--is-font-sans); color: var(--is-fg-1); }
.nbp .zd-decision__action { font: 500 12.5px var(--is-font-sans); color: var(--is-fg-2); }
.nbp .zd-decision__action b { color: var(--is-success); font-weight: 700; }
.nbp .zd-decision__korak { font: 600 10.5px var(--is-font-sans); color: var(--is-fg-3); background: var(--is-bg-surface-3); border: 1px solid var(--is-border-1); padding: 1px 7px; border-radius: 999px; }
.nbp .zd-decision__comment { margin-top: 6px; padding: 8px 11px; background: var(--is-bg-surface-3); border: 1px solid var(--is-border-1); border-radius: var(--is-radius-sm); font: 500 12.5px/1.5 var(--is-font-sans); color: var(--is-fg-1); }
.nbp .zd-decision__nocomment { margin-top: 5px; font: 500 11.5px var(--is-font-sans); color: var(--is-fg-muted); font-style: italic; }

/* Sticky action panel */
.nbp .zd-action { position: sticky; top: calc(var(--is-topbar-h) + 16px); background: var(--is-bg-surface); border: 1px solid var(--is-border-1); border-radius: var(--is-radius-md); box-shadow: var(--is-shadow-2); overflow: hidden; }
.nbp .zd-action__head { padding: 13px 16px; border-bottom: 1px solid var(--is-border-1); background: var(--is-brand-blue-100); }
.nbp .zd-action__head h3 { margin: 0; font: 700 14px var(--is-font-sans); color: var(--is-brand-blue-700); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.nbp .zd-action__head small { display: block; font: 600 11.5px var(--is-font-sans); color: var(--is-brand-blue-700); opacity: .8; margin-top: 4px; }
.nbp .zd-action__body { padding: 16px; }
.nbp .zd-action__label { font: 600 12px var(--is-font-sans); color: var(--is-fg-2); display: block; margin-bottom: 6px; }
.nbp .zd-action__ta { width: 100%; min-height: 78px; padding: 9px 11px; border: 1px solid var(--is-border-3); border-radius: var(--is-radius-sm); background: #fff; font: 500 12.5px/1.5 var(--is-font-sans); color: var(--is-fg-1); resize: vertical; }
.nbp .zd-action__ta:focus { outline: none; border-color: var(--is-action-blue); box-shadow: 0 0 0 3px rgba(0,123,255,.15); }
.nbp .zd-action__btns { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.nbp .zd-abtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 42px; border-radius: var(--is-radius-sm); font: 700 13.5px var(--is-font-sans); cursor: pointer; border: 1px solid transparent; transition: background .12s, color .12s, border-color .12s; }
.nbp .zd-abtn:disabled { opacity: .55; cursor: not-allowed; }
.nbp .zd-abtn--approve { background: var(--is-success); color: #fff; border-color: var(--is-success); }
.nbp .zd-abtn--approve:hover { filter: brightness(.94); }
.nbp .zd-abtn--return { background: #fff; color: #9a6b00; border-color: #e6b800; }
.nbp .zd-abtn--return:hover { background: var(--is-warning-bg); }
.nbp .zd-abtn--reject { background: #fff; color: var(--is-danger); border-color: rgba(217,44,44,.45); }
.nbp .zd-abtn--reject:hover { background: var(--is-danger-bg); }
.nbp .zd-action__helper { font: 500 12px/1.5 var(--is-font-sans); color: var(--is-fg-3); margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--is-border-1); }

/* Info-box variants (viewer / approved / rejected) */
.nbp .zd-actioninfo { padding: 16px; }
.nbp .zd-infobox { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--is-radius-sm); }
.nbp .zd-infobox__icon { width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; }
.nbp .zd-infobox--wait { background: var(--is-info-bg); border: 1px solid #b8dff0; }
.nbp .zd-infobox--wait .zd-infobox__icon { background: #fff; color: var(--is-info); border: 1px solid #b8dff0; }
.nbp .zd-infobox--ok { background: var(--is-success-bg); border: 1px solid #b8e3c5; }
.nbp .zd-infobox--ok .zd-infobox__icon { background: #fff; color: var(--is-success); border: 1px solid #b8e3c5; }
.nbp .zd-infobox--reject { background: var(--is-danger-bg); border: 1px solid #f3b8b8; }
.nbp .zd-infobox--reject .zd-infobox__icon { background: #fff; color: var(--is-danger); border: 1px solid #f3b8b8; }
.nbp .zd-infobox__title { font: 700 13.5px var(--is-font-sans); color: var(--is-fg-1); }
.nbp .zd-infobox__text { font: 500 12.5px/1.55 var(--is-font-sans); color: var(--is-fg-2); }
.nbp .zd-infobox__text b { color: var(--is-fg-1); font-weight: 700; }