/* ──────────────────────────────────────────────────────────────
   Javne nabavke · Zahtjevi za nabavku — LISTA (page-local .zl-*)
   PBI #5590. Ported from redesign mock NabavkeZahtjevi.html <style>.
   Scoped under .nbp (shared module wrapper); shared .nb-* atoms live
   in redesign-procurement-*.css.
   ────────────────────────────────────────────────────────────── */

.nbp table.zl-table { table-layout: fixed; width: 100%; }

/* Sve ćelije osim zadnje (Akcije): odsijeci sadržaj elipsisom kad ne stane u širinu
   kolone; puni tekst je u title atributu (tooltip na hover). */
.nbp .zl-table tbody td:not(:last-child) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status badge: cijeli badge (oba zaobljena kraja) ostaje vidljiv, a samo TEKST
   unutar badge-a se skraćuje elipsisom kad ne stane. */
.nbp .zl-statusbadge { max-width: 100%; overflow: hidden; }
.nbp .zl-statusbadge .zl-badgetext {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nbp .zl-table thead th { position: sticky; top: 0; z-index: 4; }
/* Header: naziv koji ne stane u širinu kolone → ellipsis (…); pun tekst na hover (title atribut).
   Labela je u <span class="zl-thtxt"> pa se skraćuje ona, a sort-ikonica ostaje vidljiva kad ima mjesta. */
.nbp .zl-table thead th { overflow: hidden; }
.nbp .zl-table thead th .zl-thtxt { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.nbp .zl-table tbody td { padding-top: 9px; padding-bottom: 9px; vertical-align: middle; }

.nbp .zl-draftbroj { font: 600 11.5px var(--is-font-sans); color: var(--is-fg-3); display: inline-flex; align-items: center; gap: 5px; }
.nbp .zl-draftbroj i { font-size: 9px; }
.nbp .zl-nodate { color: var(--is-fg-muted); font-style: italic; font-size: 11.5px; }

/* Inline workflow mini-stepper */
.nbp .zl-stepper { display: flex; align-items: center; min-width: 120px; }
.nbp .zl-step { display: flex; align-items: center; flex: 0 0 auto; }
.nbp .zl-step__dot {
  width: 14px; height: 14px; border-radius: 999px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--is-border-3); background: #fff; font-size: 7px; color: #fff;
}
.nbp .zl-step__dot.is-done { background: var(--is-success); border-color: var(--is-success); }
.nbp .zl-step__dot.is-current { background: var(--is-brand-blue); border-color: var(--is-brand-blue); box-shadow: 0 0 0 3px rgba(4,148,218,.16); }
.nbp .zl-step__dot.is-vraceno { background: var(--is-brand-orange); border-color: var(--is-brand-orange); box-shadow: 0 0 0 3px rgba(245,158,44,.18); }
.nbp .zl-step__dot.is-rejected { background: var(--is-danger); border-color: var(--is-danger); }
.nbp .zl-step__line { width: 16px; height: 2px; background: var(--is-border-2); flex-shrink: 0; }
.nbp .zl-step__line.is-done { background: var(--is-success); }
.nbp .zl-stepper__txt { margin-left: 9px; font: 600 11px var(--is-font-mono); color: var(--is-fg-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* "Čeka mene" toggle — primary pill */
.nbp .zl-mepill {
  display: inline-flex; align-items: center; gap: 7px; height: 33px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--is-brand-blue); background: #fff; color: var(--is-brand-blue-700);
  font: 700 12.5px var(--is-font-sans); cursor: pointer; white-space: nowrap; transition: background .12s, color .12s;
}
.nbp .zl-mepill i { font-size: 12px; }
.nbp .zl-mepill:hover { background: var(--is-brand-blue-100); }
.nbp .zl-mepill.is-on { background: var(--is-brand-blue); color: #fff; border-color: var(--is-brand-blue); }
.nbp .zl-mepill__count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--is-brand-blue-100); color: var(--is-brand-blue-700); font: 700 10.5px var(--is-font-sans); }
.nbp .zl-mepill.is-on .zl-mepill__count { background: rgba(255,255,255,.25); color: #fff; }

/* Date range */
.nbp .zl-daterange { display: inline-flex; flex-direction: column; gap: 3px; }
.nbp .zl-daterange__label { font: 600 9.5px var(--is-font-sans); color: var(--is-fg-3); text-transform: uppercase; letter-spacing: .05em; padding-left: 2px; }
.nbp .zl-daterange__row { display: inline-flex; align-items: center; gap: 6px; }
.nbp .zl-dateinput { height: 36px; padding: 0 8px; border: 1px solid var(--is-border-3); border-radius: var(--is-radius-sm); background: #fff; font: 500 12px var(--is-font-mono); color: var(--is-fg-1); }
.nbp .zl-dateinput:focus { outline: none; border-color: var(--is-action-blue); box-shadow: 0 0 0 3px rgba(0,123,255,.15); }
.nbp .zl-daterange__sep { color: var(--is-fg-3); font-size: 11px; }

.nbp .zl-filteractive { color: var(--is-brand-blue-700); font-weight: 700; }

/* Syncfusion date-range picker — 33px filter height (poravnat sa search/pill/„Čeka mene"). */
.nbp .rq-drp.e-control-wrapper,
.nbp .rq-drp.e-date-range-wrapper,
.nbp span.rq-drp.e-input-group {
  height: 33px !important;
  min-height: 33px !important;
  align-items: center;
}
.nbp .rq-drp .e-input,
.nbp .rq-drp input.e-input {
  height: 31px !important;
  line-height: 31px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font: 500 12px var(--is-font-mono) !important;
}

/* Search polje na 33px (poravnato sa ostalim filterima) */
.nbp .nb-filterbar__row .nb-search { height: 33px; box-sizing: border-box; }
.nbp .nb-filterbar__row .nb-search input { height: 100%; }

/* Sortable column headers */
.nbp .zl-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.nbp .zl-sortable:hover { color: var(--is-fg-1); }

/* Svi filteri + "Čeka mene" pill + Reset UVIJEK u jednom redu: red je nowrap, a kontrole su
   flex-elementi sa flex-basis:0 (pa ignorišu fiksni Width) i malim min-width-om, tako da se
   dinamički skupljaju umjesto da se prelamaju. Scope: samo filter red koji sadrži .zl-mepill
   (tj. ova stranica zahtjeva), preko :has(). Primjenjuje se iznad 600px; ispod globalni stack
   (flex-direction:column) preuzima, pa se flex-rules na djeci ne primjenjuju. */
.nbp .nb-filterbar__row:has(.zl-mepill) { flex-wrap: nowrap; gap: 6px; }
@media (min-width: 601px) {
  .nbp .nb-filterbar__row:has(.zl-mepill) .nb-search { flex: 2 1 0; min-width: 110px; max-width: none; }
  .nbp .nb-filterbar__row:has(.zl-mepill) .zl-mepill { flex: 0 0 auto; }
  .nbp .nb-filterbar__row:has(.zl-mepill) .pd-rowms-host { flex: 1 1 0; min-width: 78px; }
  .nbp .nb-filterbar__row:has(.zl-mepill) .rq-drp { flex: 1.3 1 0; min-width: 120px; }
  .nbp .nb-filterbar__row:has(.zl-mepill) .nb-btn { flex: 0 0 auto; white-space: nowrap; }
}

/* ──────────────────────────────────────────────────────────────
   "Pill overlay" dropdown (invisible native + custom pill) — pd- namespace.
   Standard technika (vidi Claude Documentation/design-dropdown-pill.md):
   nevidljiv native (opacity:0) ispod pill overlay-a; fokus otkriva native.
   Filter-bar single-select filteri; svaki nosi count badge kao multi-select.
   ────────────────────────────────────────────────────────────── */
.nbp .pd-rowms-host { position: relative; width: 100%; height: 33px; }

/* native Syncfusion kontrola — preko svega, ali NEVIDLJIVA (i dalje klikabilna) */
.nbp .pd-rowms-host .e-multiselect.pd-rowms-native,
.nbp .pd-rowms-host .pd-rowms-native.e-input-group,
.nbp .pd-rowms-host .pd-rowms-native.e-input-group.e-control-wrapper,
.nbp .pd-rowms-host .e-ddl.pd-rowms-native {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 33px !important;
  min-height: 33px !important;
  opacity: 0 !important;
}

/* pill overlay — ono što korisnik vidi.
   z-index:1 diže overlay IZNAD nevidljivog native-a (opacity:0) da bi X (pointer-events:auto)
   hvatao klik; pill i dalje ima pointer-events:none pa klik na njega otvara dropdown ispod. */
.nbp .pd-rowms {
  position: absolute; inset: 0; z-index: 1;
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 7px; padding: 0 11px;
  border: 1px solid var(--is-border-2);
  border-radius: var(--is-radius-sm);
  background: #fff;
  pointer-events: none;
  overflow: hidden;
  transition: background .12s, border-color .12s;
}
.nbp .pd-rowms-host:hover .pd-rowms { border-color: var(--is-brand-blue-300); background: var(--is-brand-blue-100); }

/* tekst: JEDAN red + ellipsis → nikad prelamanje */
.nbp .pd-rowms__txt {
  font: 500 13px var(--is-font-sans);
  color: var(--is-fg-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.nbp .pd-rowms__right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.nbp .pd-rowms__cnt {
  display: inline-flex; align-items: center; height: 17px; padding: 0 6px;
  border-radius: 999px;
  background: var(--is-brand-blue-100); color: var(--is-brand-blue-700);
  font: 700 10px var(--is-font-mono); flex-shrink: 0;
}
.nbp .pd-rowms i { font-size: 10px; color: var(--is-fg-3); flex-shrink: 0; }
/* Clear (X) — overlay je pointer-events:none, pa klik re-enable-ujemo samo na X */
.nbp .pd-rowms__clear { pointer-events: auto; cursor: pointer; font-size: 12px !important; color: var(--is-fg-3); transition: color .12s; }
.nbp .pd-rowms__clear:hover { color: var(--is-brand-blue-700); }

/* ima odabira → plavi highlight + bold tekst */
.nbp .pd-rowms--sel { border-color: var(--is-brand-blue-300); background: var(--is-brand-blue-100); }
.nbp .pd-rowms--sel .pd-rowms__txt { color: var(--is-brand-blue-700); font-weight: 700; }

/* FOKUS: otkrij pravo polje (search) i sakrij pill */
.nbp .pd-rowms-host:focus-within .e-multiselect.pd-rowms-native,
.nbp .pd-rowms-host:focus-within .e-ddl.pd-rowms-native { opacity: 1 !important; z-index: 2; }
.nbp .pd-rowms-host:focus-within .pd-rowms { display: none !important; }