/* ============================================================
   Javne nabavke · Plan-item list (.pd-*) — PBI #5571.
   Copied verbatim from the mock NabavkePlanDetalj.html <style> block.
   ============================================================ */

/* Metadata bar */
.pd-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px;
  padding: 10px 14px; margin-bottom: 12px;
  background: var(--is-bg-surface-3); border: 1px solid var(--is-border-1); border-radius: var(--is-radius-md);
  font: 500 12px var(--is-font-sans); color: var(--is-fg-3);
}
.pd-meta__item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pd-meta__item i { font-size: 11px; color: var(--is-fg-muted); }
.pd-meta__item b { color: var(--is-fg-1); font-weight: 700; }
.pd-meta__item .nb-mono { color: var(--is-fg-1); font-weight: 600; }
.pd-meta__item a { color: var(--is-action-blue); text-decoration: none; font-weight: 600; }
.pd-meta__item a:hover { text-decoration: underline; }
.pd-meta__sep { width: 1px; height: 16px; background: var(--is-border-2); }
.pd-meta__total { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font: 500 12px var(--is-font-sans); color: var(--is-fg-2); }
.pd-meta__total b { font: 700 14px var(--is-font-mono); color: var(--is-fg-1); font-variant-numeric: tabular-nums; }

/* Filter bar — Reset ("Poništi") placement when the row wraps.
   This page has search + 4 dropdowns + a value-range slider, so the shared
   .nb-filterbar__row (flex-wrap) breaks onto two lines at normal widths. The
   shared .nb-spacer (flex:1) sits between the filters and the Reset button; once
   the row wraps, the spacer lands on the second line and grows to fill it, shoving
   "Poništi" to the far right instead of leaving it right after the last filter.
   Scope: only pages that render a .pd-meta bar before the filter bar (this page) —
   the plan-LIST page has no .pd-meta, so its single-row layout is untouched.
   Fix: drop the spacer here so Reset flows immediately after the last filter, and
   add a row-gap so the two wrapped lines don't touch. */
.nbp .pd-meta ~ .nb-filterbar .nb-spacer { display: none; }

/* Svi filteri + Reset UVIJEK u jednom redu: red je nowrap, a kontrole su flex-elementi
   sa flex-basis:0 (pa ignorišu fiksni Width="200px") i malim min-width-om, tako da se
   dinamički skupljaju umjesto da se prelamaju. Reset ostaje pune širine na kraju.
   Primjenjuje se iznad 600px; ispod toga globalni stack (flex-direction:column) preuzima,
   pa se flex-rules na djeci NE primjenjuju (inače bi dijelili vertikalni prostor). */
.nbp .pd-meta ~ .nb-filterbar .nb-filterbar__row { flex-wrap: nowrap; gap: 6px; }
@media (min-width: 601px) {
  .nbp .pd-meta ~ .nb-filterbar .nb-search { flex: 2 1 0; min-width: 110px; max-width: none; }
  .nbp .pd-meta ~ .nb-filterbar .pd-ddl { flex: 1 1 0; min-width: 78px; }
  .nbp .pd-meta ~ .nb-filterbar .nb-range { flex: 1.4 1 0; min-width: 120px; }
  .nbp .pd-meta ~ .nb-filterbar .nb-btn { flex: 0 0 auto; white-space: nowrap; }
}

/* Table: column widths via colgroup; row height compact */
table.pd-table { table-layout: fixed; }
.pd-table tbody td { padding-top: 9px; padding-bottom: 9px; vertical-align: middle; }
.pd-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).
   Tabela je table-layout:fixed (širine iz colgroup-a), pa clip radi pouzdano. */
.nbp .pd-table thead th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ellipsis + tooltip on every column — with table-layout:fixed the cell width is
   locked, so content wider than its column would bleed into the neighbouring cell.
   Clip every body cell and end it with an ellipsis; the full value is exposed via
   the cell's title attribute (hover tooltip) in the markup. */
.pd-table tbody td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Full-width rows (group header, empty-state) span all columns — they must keep
   normal wrapping so multi-line text (empty-state message) isn't clipped to one line. */
.pd-table tbody .pd-grouprow td,
.pd-table tbody td .nb-empty,
.pd-table tbody td .nb-empty * { white-space: normal; }

/* Badges (Tip postupka, Status) are inline-flex pills. Left alone, a long label
   stretches the pill past its column and bleeds into the neighbour. Cap the pill at
   the column width and let an inner text span ellipsize (flex-ellipsis pattern: the
   flex container caps width, the flex child needs min-width:0 + overflow to clip).
   The full label is in the badge's title attribute (hover tooltip). */
.nbp .pd-table tbody td .nb-badge {
  max-width: 100%;
  overflow: hidden;
}
.nbp .pd-table tbody td .nb-badge > .pd-badge-txt {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Group header row */
.pd-grouprow td {
  padding: 0 !important; border-top: 1px solid var(--is-border-1) !important;
  background: var(--is-bg-surface-2);
}
.pd-group {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; user-select: none;
}
.pd-group:hover { background: var(--is-bg-surface-3); }
.pd-group__chev { width: 16px; text-align: center; color: var(--is-fg-3); font-size: 11px; transition: transform .15s; }
.pd-group.is-collapsed .pd-group__chev { transform: rotate(-90deg); }
.pd-group__name { font: 700 12.5px var(--is-font-sans); color: var(--is-fg-1); display: inline-flex; align-items: center; gap: 8px; }
.pd-group__count { font: 600 11px var(--is-font-sans); color: var(--is-fg-2); background: #fff; border: 1px solid var(--is-border-1); padding: 1px 8px; border-radius: 999px; }
.pd-group__sum { margin-left: auto; font: 700 12.5px var(--is-font-mono); color: var(--is-fg-1); font-variant-numeric: tabular-nums; }
.pd-group__sum small { font: 500 10.5px var(--is-font-sans); color: var(--is-fg-3); margin-right: 6px; text-transform: uppercase; letter-spacing: .04em; }

/* Name + CPV cell */
.pd-namecell { min-width: 0; }
.pd-namecell__name { font: 600 12.5px var(--is-font-sans); color: var(--is-brand-blue-700); text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-namecell__name:hover { text-decoration: underline; }
.pd-cpvcell { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pd-cpvcell__code { font: 600 11.5px var(--is-font-mono); color: var(--is-fg-2); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-cpvcell__name { font: 500 10.5px var(--is-font-sans); color: var(--is-fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pd-lot-yes { color: var(--is-success); font-size: 12px; }
.pd-lot-no { color: var(--is-fg-muted); }

/* Realization cell (per-screen color thresholds) */
.pd-real { display: flex; flex-direction: column; gap: 4px; }
.pd-real__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pd-real__amt { font: 600 11px var(--is-font-mono); color: var(--is-fg-2); font-variant-numeric: tabular-nums; }
.pd-real__pct { font: 700 11px var(--is-font-mono); font-variant-numeric: tabular-nums; }
.pd-real__bar { height: 8px; border-radius: 999px; background: var(--is-bg-surface-3); border: 1px solid var(--is-border-1); overflow: hidden; }
.pd-real__bar > div { height: 100%; border-radius: 999px; }
.pd-real.is-low  .pd-real__pct { color: var(--is-success); }
.pd-real.is-low  .pd-real__bar > div { background: linear-gradient(90deg, var(--is-success), #5cc97e); }
.pd-real.is-mid  .pd-real__pct { color: #9a6b00; }
.pd-real.is-mid  .pd-real__bar > div { background: linear-gradient(90deg, var(--is-warning), #f0c040); }
.pd-real.is-over .pd-real__pct { color: var(--is-danger); }
.pd-real.is-over .pd-real__bar > div { background: linear-gradient(90deg, var(--is-danger), #e86a6a); }
.pd-real.is-zero .pd-real__amt { color: var(--is-fg-muted); }

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

/* Filter dropdowns (Syncfusion): force 36px height so they line up with the search box.
   Targets the full rendered class chain (e-ddl e-lib e-input-group e-control-container
   e-control-wrapper pd-ddl) with !important to beat the Syncfusion theme. */
.nbp .pd-ddl.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper,
.nbp .pd-ddl.e-ddl.e-input-group.e-control-wrapper,
.nbp span.pd-ddl.e-input-group {
    height: 36px !important;
    min-height: 36px !important;
    align-items: center;
}
.nbp .pd-ddl.e-input-group .e-input,
.nbp .pd-ddl input.e-input {
    height: 34px !important;
    line-height: 34px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* No horizontal scroll on the plan-items grid — columns are percentage-based (colgroup sums
   to 100%) with table-layout:fixed, so the table always fits its container and scales down
   with the viewport on smaller laptops. */
.nbp .pd-tablewrap { overflow-x: hidden; }
.nbp table.pd-table { width: 100%; }

/* Action column (last col, 9%): compact the three buttons + trim the cell padding so all three
   icons fit inside the percentage width even on a narrow laptop, without ever overflowing /
   getting clipped. Keep nowrap so the row never breaks to a second line. */
.nbp .pd-table tbody td:last-child { padding-left: 4px; padding-right: 6px; }
.nbp .pd-table .nb-rowact { gap: 2px; flex-wrap: nowrap; }
.nbp .pd-table .nb-rowact button { width: 24px; height: 24px; flex: 0 0 auto; }