/* ============================================================
   Javne nabavke — Ugovori (lista) page-specific atoms (.ug-*)
   Portano iz design/NabavkeUgovori.html (PBI 5898).
   --is-* tokeni su globalni (colors_and_type.css) — ne redefinisati.
   ============================================================ */

/* ── Filter bar: svi filteri + Reset UVIJEK u jednom redu ──
   Red je nowrap, a kontrole (search + svi dropdown/date pickeri sa .pd-ddl) 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. Isti obrazac kao stranica zahtjeva (redesign-procurement-requests.css).
   Primjenjuje se iznad 600px; ispod globalni stack (flex-direction:column) preuzima. */
.nbp .nb-filterbar__row.ug-filterrow { flex-wrap: nowrap; gap: 6px; }
@media (min-width: 601px) {
  .nbp .nb-filterbar__row.ug-filterrow .nb-search { flex: 2 1 0; min-width: 110px; max-width: none; }
  .nbp .nb-filterbar__row.ug-filterrow .pd-ddl { flex: 1 1 0; min-width: 78px; }
  /* Pill-overlay dropdown host se u filter redu ponaša isto kao .pd-ddl (skuplja se) */
  .nbp .nb-filterbar__row.ug-filterrow .pd-rowms-host { flex: 1 1 0; min-width: 78px; height: 33px; }
  .nbp .nb-filterbar__row.ug-filterrow .nb-btn { flex: 0 0 auto; white-space: nowrap; }
}
/* Mobile ≤600px: globalno pravilo slaže filter red u kolonu — kontrole (koje nose fiksni
   inline Width) forsiramo na punu širinu da red izgleda kao na ostalim V2 stranicama. */
@media (max-width: 600px) {
  .nbp .nb-filterbar__row.ug-filterrow .pd-ddl,
  .nbp .nb-filterbar__row.ug-filterrow .pd-ddl.e-control-wrapper,
  .nbp .nb-filterbar__row.ug-filterrow .pd-rowms-host,
  .nbp .nb-filterbar__row.ug-filterrow .nb-btn { width: 100% !important; }
  .nbp .nb-filterbar__row.ug-filterrow .nb-btn { justify-content: center; }
}

/* Search polje + oba date pickera na 33px (ista visina kao pill dropdowni) */
.nbp .nb-filterbar__row.ug-filterrow .nb-search { height: 33px; box-sizing: border-box; }
.nbp .nb-filterbar__row.ug-filterrow .nb-search input { height: 100%; }
.nbp .nb-filterbar__row.ug-filterrow .pd-ddl.e-input-group,
.nbp .nb-filterbar__row.ug-filterrow .pd-ddl.e-control-wrapper { height: 33px !important; min-height: 33px !important; }

/* Procentualne širine kolona (colgroup) + fiksni layout → kolone se dinamički
   skaliraju sa širinom ekrana (kao ostale procurement/V2 liste), bez horizontalnog skrola. */
table.ug-table { table-layout: fixed; width: 100%; }
.ug-table tbody td { padding-top: 11px; padding-bottom: 11px; vertical-align: middle; }

/* ── Ellipsis + hover tooltip za SVE kolone (naziv kolone i vrijednost) ──
   table-layout:fixed + ove tri osobine → sadržaj koji ne stane u širinu
   kolone dobija „…"; puni tekst je u title atributu (hover). */
.ug-table th, .ug-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Header labela se skraćuje prije sort ikone */
.ug-table thead th .zl-thtxt { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
/* Prazno stanje (colspan) ne smije biti nowrap/clip */
.ug-table td.ug-emptycell { white-space: normal; overflow: visible; text-overflow: clip; }
/* Flex/inline sadržaj — dozvoli skupljanje ispod širine sadržaja */
.ug-broj { max-width: 100%; min-width: 0; }
.ug-broj__num { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ug-period { max-width: 100%; min-width: 0; overflow: hidden; }
/* Tekst unutar badge-a (Vrsta postupka / Status) se skraćuje UNUTAR pilule —
   badge ima svoju max širinu (100% ćelije) i klipuje, a tekst dobija „…"
   (isti recept kao ug-linkchip u koloni Stavke plana). */
.ug-table td .nb-badge { max-width: 100%; overflow: hidden; }
.ug-badge-ell { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Broj ugovora — attachment ikona + mono plavi bold broj (klik → uredi) */
.ug-broj { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; cursor: pointer; }
.ug-broj__num { font: 700 13px var(--is-font-mono); color: var(--is-brand-blue-700); font-variant-numeric: tabular-nums; }
.ug-broj:hover .ug-broj__num { text-decoration: underline; }
.ug-attach { color: var(--is-success); font-size: 12px; }
.ug-attach--no { color: var(--is-fg-3); font-size: 12px; }

.ug-date { font: 500 12.5px var(--is-font-mono); color: var(--is-fg-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Dobavljač + JIB ispod */
.ug-supp { display: block; min-width: 0; font-weight: 600; color: var(--is-fg-1); font-size: 12.5px; }
.ug-supp__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ug-supp small { display: block; font: 500 11px var(--is-font-mono); color: var(--is-fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Period važenja — datum → strelica → datum */
.ug-period { display: inline-flex; align-items: center; gap: 6px; font: 500 12px var(--is-font-mono); color: var(--is-fg-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ug-period i { font-size: 9px; color: var(--is-fg-3); }

/* Top pager (iznad grida) — donji border umjesto gornjeg + page-size select */
.nb-pager--top { border-top: 0; border-bottom: 1px solid var(--is-border-1); }
.nb-pager__pslabel { display: inline-flex; align-items: center; height: 28px; line-height: 1; font: 600 11px var(--is-font-sans); color: var(--is-fg-3); margin: 0 4px 0 0; white-space: nowrap; }
.nb-pager__pssel {
  height: 28px; border-radius: var(--is-radius-sm); border: 1px solid var(--is-border-2); background: #fff;
  padding: 0 6px; margin-right: 8px; font: 600 12px var(--is-font-sans); color: var(--is-fg-2); cursor: pointer;
}
.nb-pager__pssel:focus { outline: none; border-color: var(--is-action-blue); box-shadow: 0 0 0 3px rgba(0,123,255,.15); }

/* ============================================================
   Pill-overlay dropdown (nevidljiv native + custom pill) — .pd-rowms*
   Standard „pill overlay" iz Claude Documentation/design-dropdown-pill.md.
   Native Syncfusion kontrola je opacity:0 ISPOD pill overlay-a; fokus otkriva
   native (search). Scoped na ovaj page (.nbp/.ug-filterrow), --is-* tokeni globalni.
   ============================================================ */
.pd-rowms-host { position: relative; width: 100%; height: 33px; }

/* native Syncfusion kontrola — preko svega, ali NEVIDLJIVA (i dalje klikabilna) */
.pd-rowms-host .e-multiselect.pd-rowms-native,
.pd-rowms-host .pd-rowms-native.e-input-group,
.pd-rowms-host .pd-rowms-native.e-input-group.e-control-wrapper,
.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. */
.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;
}
.pd-rowms-host:hover .pd-rowms { border-color: var(--is-brand-blue-300); background: var(--is-brand-blue-100); }
.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;
}
.pd-rowms__right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.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;
}
.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 */
.pd-rowms__clear { pointer-events: auto; cursor: pointer; font-size: 12px !important; color: var(--is-fg-3); transition: color .12s; }
.pd-rowms__clear:hover { color: var(--is-brand-blue-700); }
.pd-rowms--sel { border-color: var(--is-brand-blue-300); background: var(--is-brand-blue-100); }
.pd-rowms--sel .pd-rowms__txt { color: var(--is-brand-blue-700); font-weight: 700; }

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

/* Vezane stavke plana — chip prve stavke + "+N" chip za ostale */
/* Sve u JEDNOM redu: prva stavka se suzava (…), „+N" chip nikad ne shrink-uje */
.ug-links { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; max-width: 100%; overflow: hidden; }
.ug-linkchip { font: 600 11px var(--is-font-sans); color: var(--is-brand-blue-700); background: var(--is-brand-blue-100); border: 1px solid var(--is-brand-blue); border-radius: 999px; padding: 2px 9px; white-space: nowrap; min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.ug-linkchip--more { background: #fff; color: var(--is-fg-2); border-color: var(--is-border-1); flex: 0 0 auto; overflow: visible; text-overflow: clip; }
.ug-linkchip--none { color: var(--is-fg-muted); }