/* ============================================================
   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; }

/* 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; }

/* 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; }