/* ============================================================
   Javne nabavke — Planovi nabavki (V2). PBI #5573.
   Ported from the NabavkePlanovi mock (nb-* shell + pl-* atoms),
   page-scoped under .nbp so it never leaks to other screens.
   Design tokens (--is-*) and fonts (Plus Jakarta Sans / JetBrains
   Mono) are already global via insync-tokens.css / colors_and_type.css.

   NOTE: this file also defines the shared .nbp nb-* base atoms
   (pagehead, buttons, badges, avatar, filterbar, table, pager) that
   the form page (redesign-procurement-plan-form.css) reuses — every
   redesign-*.css is loaded globally, so they resolve there too.
   ============================================================ */

.nbp { font-family: var(--is-font-sans); color: var(--is-fg-1); }
.nbp *, .nbp *::before, .nbp *::after { box-sizing: border-box; }

/* Full-width, left-aligned (override cc-screen's max-width:1680 + margin:auto
   centering) so the page hugs the left like clients-list-v2 / project-statuses-v2.
   Keeps cc-screen's top/side padding for the standard V2 spacing. */
.cc-screen.nbp { max-width: none; margin: 0; }

/* ── Page header ───────────────────────────────────────────── */
.nbp .nb-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.nbp .nb-pagehead__left { min-width: 0; }
.nbp .nb-pagehead__crumb { display: flex; gap: 6px; align-items: center; font: 500 12px var(--is-font-sans); color: var(--is-fg-3); margin-bottom: 4px; }
.nbp .nb-pagehead__crumb a { color: var(--is-fg-3); text-decoration: none; }
.nbp .nb-pagehead__crumb a:hover { color: var(--is-brand-blue); }
.nbp .nb-pagehead__crumb i { font-size: 9px; }
.nbp .nb-pagehead h1 { font: 700 26px/1.15 var(--is-font-sans); letter-spacing: -.01em; color: var(--is-fg-1); margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nbp .nb-pagehead__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.nbp .nb-newchip { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 2px 9px; border-radius: 999px; background: var(--is-brand-blue-100); color: var(--is-brand-blue-700); border: 1px solid #cfe4f4; font: 700 10px var(--is-font-sans); letter-spacing: .05em; text-transform: uppercase; line-height: 1; }
.nbp .nb-newchip i { font-size: 9px; }

.nbp .nb-loadchip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--is-bg-surface-3); border: 1px solid var(--is-border-1); font: 600 11px var(--is-font-mono); color: var(--is-fg-3); cursor: default; user-select: none; }
.nbp .nb-loadchip i { font-size: 9px; color: var(--is-fg-3); }
.nbp .nb-loadchip b { color: var(--is-fg-2); font-weight: 600; }
.nbp .nb-loadchip__sep { color: #aab1ba; font-weight: 400; padding: 0 1px; }

/* ── Buttons ───────────────────────────────────────────────── */
.nbp .nb-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--is-radius-sm); border: 1px solid transparent; font: 600 13px var(--is-font-sans); cursor: pointer; white-space: nowrap; transition: background .12s, color .12s, border-color .12s; text-decoration: none; }
.nbp .nb-btn i { font-size: 12px; }
.nbp .nb-btn--primary { background: var(--is-brand-blue); color: #fff; border-color: var(--is-brand-blue); }
.nbp .nb-btn--primary:hover { background: var(--is-brand-blue-700); border-color: var(--is-brand-blue-700); }
.nbp .nb-btn--ghost { background: #fff; color: var(--is-fg-2); border-color: var(--is-border-3); }
.nbp .nb-btn--ghost:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); }
.nbp .nb-btn--sm { height: 30px; padding: 0 10px; font-size: 12px; }
.nbp .nb-btn.is-disabled { opacity: .45; pointer-events: none; }

/* ── Avatar ────────────────────────────────────────────────── */
.nbp .nb-avatar { border-radius: 999px; background: linear-gradient(135deg, var(--is-brand-blue) 0%, var(--is-brand-purple) 100%); color: #fff; font-family: var(--is-font-sans); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: -.01em; width: 28px; height: 28px; font-size: 11px; }

/* ── Badges ────────────────────────────────────────────────── */
.nbp .nb-badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 999px; font: 600 11px var(--is-font-sans); white-space: nowrap; line-height: 1; }
.nbp .nb-badge--blue { background: var(--is-brand-blue-100); color: var(--is-brand-blue-700); border: 1px solid #cfe4f4; }
.nbp .nb-badge--gray { background: var(--is-bg-surface-3); color: var(--is-fg-2); border: 1px solid var(--is-border-1); }
.nbp .nb-badge--green { background: var(--is-success-bg); color: #1a7a3a; border: 1px solid #b8e3c5; }
.nbp .nb-badge--red { background: var(--is-danger-bg); color: #a31e1e; border: 1px solid #f3b8b8; }
.nbp .nb-badge--amber { background: var(--is-warning-bg); color: #7a5a00; border: 1px solid #f0d77a; }
.nbp .nb-badge--purple { background: #efe6f5; color: #5c1a73; border: 1px solid #d9c5e5; }

/* ── Filter bar ────────────────────────────────────────────── */
.nbp .nb-filterbar { 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: 12px 14px; margin-bottom: 12px; }
.nbp .nb-filterbar__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nbp .nb-search { position: relative; flex: 1 1 390px; min-width: 286px; max-width: 546px; }
.nbp .nb-search > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--is-fg-3); font-size: 13px; }
.nbp .nb-search input { width: 100%; height: 36px; padding: 0 30px 0 34px; border: 1px solid var(--is-border-3); border-radius: var(--is-radius-sm); background: #fff; font: 400 13.5px var(--is-font-sans); color: var(--is-fg-1); }
.nbp .nb-search input:focus { outline: none; border-color: var(--is-action-blue); box-shadow: 0 0 0 3px rgba(0,123,255,.15); }
.nbp .nb-search input::placeholder { color: var(--is-fg-muted); }
.nbp .nb-search__clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: 0; background: transparent; color: var(--is-fg-3); cursor: pointer; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.nbp .nb-search__clear:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); }
.nbp .nb-selfield { display: inline-flex; flex-direction: column; gap: 3px; min-width: 0; }
.nbp .nb-selfield__label { font: 600 9.5px var(--is-font-sans); color: var(--is-fg-3); text-transform: uppercase; letter-spacing: .05em; padding-left: 2px; }
.nbp .nb-select { height: 36px; padding: 0 30px 0 11px; border: 1px solid var(--is-border-3); border-radius: var(--is-radius-sm); background-color: #fff; font: 600 12.5px var(--is-font-sans); color: var(--is-fg-1); cursor: pointer; appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 5l3 3 3-3' stroke='%2376767E' fill='none' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 9px center; }
.nbp .nb-select:hover { background-color: var(--is-bg-surface-3); }
.nbp .nb-select:focus { outline: none; border-color: var(--is-action-blue); box-shadow: 0 0 0 3px rgba(0,123,255,.15); }
.nbp .nb-select.is-set { border-color: var(--is-brand-blue-300); color: var(--is-brand-blue-700); background-color: var(--is-brand-blue-100); }
.nbp .nb-spacer { flex: 1; }
.nbp .nb-resetlink { background: transparent; border: 0; font: 600 12.5px var(--is-font-sans); color: var(--is-action-blue); cursor: pointer; padding: 4px 6px; display: inline-flex; align-items: center; gap: 5px; }
.nbp .nb-resetlink:hover { text-decoration: underline; }
.nbp .nb-resetlink i { font-size: 10px; }
.nbp .nb-filtercount { font: 500 12px var(--is-font-sans); color: var(--is-fg-3); white-space: nowrap; }
.nbp .nb-filtercount b { color: var(--is-fg-1); font-weight: 700; }

/* ── Panel ─────────────────────────────────────────────────── */
.nbp .nb-panel { background: var(--is-bg-surface); border: 1px solid var(--is-border-1); border-radius: var(--is-radius-md); box-shadow: var(--is-shadow-1); overflow: clip; display: flex; flex-direction: column; }
.nbp .nb-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--is-border-1); flex-wrap: wrap; }

/* ── Table ─────────────────────────────────────────────────── */
/* overflow-y: hidden is intentional — CSS computes a `visible` axis to `auto`
   when the other axis is `auto`, which spawns a phantom vertical scrollbar on
   the grid. The desktop table only renders >=1200px (cards take over below) and
   is sized to fit, so vertical scroll here is never wanted; keep horizontal as a safety valve. */
.nbp .nb-tablewrap { overflow-x: auto; overflow-y: hidden; }
.nbp table.nb-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.nbp .nb-table thead th { background: var(--is-bg-surface-3); font: 600 10.5px var(--is-font-sans); color: var(--is-fg-3); text-transform: uppercase; letter-spacing: .05em; padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--is-border-1); white-space: nowrap; user-select: none; }
.nbp .nb-table thead th.nb-num, .nbp .nb-table tbody td.nb-num { text-align: right; }
.nbp .nb-table tbody td { padding: 8px 12px; vertical-align: middle; font: 500 12.5px var(--is-font-sans); color: var(--is-fg-1); }
.nbp .nb-table tbody tr + tr td { border-top: 1px solid var(--is-border-1); }
.nbp .nb-table tbody tr { transition: background .12s; }
.nbp .nb-table tbody tr:hover { background: rgba(0,123,255,.04); }
.nbp .nb-mono { font-family: var(--is-font-mono); font-variant-numeric: tabular-nums; }
.nbp .nb-money { font-family: var(--is-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Row actions ───────────────────────────────────────────── */
.nbp .nb-rowact { display: inline-flex; gap: 2px; justify-content: flex-end; }
.nbp .nb-rowact a, .nbp .nb-rowact button { width: 26px; height: 26px; border-radius: var(--is-radius-sm); border: 1px solid transparent; background: transparent; color: var(--is-fg-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; transition: all .12s; text-decoration: none; }
.nbp .nb-rowact a:hover, .nbp .nb-rowact button:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); border-color: var(--is-border-1); }
.nbp .nb-rowact .is-danger:hover { background: rgba(217,44,44,.08); color: var(--is-danger); border-color: rgba(217,44,44,.20); }

/* ── Empty state ───────────────────────────────────────────── */
.nbp .nb-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 38px 24px; gap: 4px; }
.nbp .nb-empty__icon { width: 48px; height: 48px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 8px; }
.nbp .nb-empty__icon--neutral { background: var(--is-bg-surface-3); color: var(--is-fg-3); border: 1px solid var(--is-border-1); }
.nbp .nb-empty__title { font: 700 13.5px var(--is-font-sans); color: var(--is-fg-1); }
.nbp .nb-empty__text { font: 500 12.5px/1.5 var(--is-font-sans); color: var(--is-fg-3); max-width: 320px; }

/* ── Pager ─────────────────────────────────────────────────── */
.nbp .nb-pager { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-top: 1px solid var(--is-border-1); background: var(--is-bg-surface); gap: 16px; flex-wrap: wrap; }
.nbp .nb-pager__info { font: 500 12px var(--is-font-sans); color: var(--is-fg-3); }
.nbp .nb-pager__info b { color: var(--is-fg-1); font-weight: 700; }
.nbp .nb-pager__pages { display: inline-flex; gap: 3px; align-items: center; }
.nbp .nb-pager__ellipsis { padding: 0 4px; color: var(--is-fg-3); }
.nbp .nb-pager button { height: 28px; min-width: 28px; padding: 0 8px; border-radius: var(--is-radius-sm); border: 1px solid var(--is-border-2); background: #fff; font: 600 12px var(--is-font-sans); color: var(--is-fg-2); cursor: pointer; }
.nbp .nb-pager button:hover:not(:disabled) { background: var(--is-bg-surface-3); color: var(--is-fg-1); }
.nbp .nb-pager button.is-active { background: var(--is-brand-blue); border-color: var(--is-brand-blue); color: #fff; }
.nbp .nb-pager button:disabled { opacity: .35; cursor: not-allowed; }

/* ── Plans-list specifics (.pl-*) ──────────────────────────── */
.nbp table.pl-table { min-width: 1000px; }
.nbp .pl-table tbody td { padding-top: 11px; padding-bottom: 11px; vertical-align: middle; }
.nbp .pl-row--current { background: var(--is-brand-blue-100); }
.nbp .pl-row--current:hover { background: var(--is-brand-blue-100); }
.nbp .pl-year { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.nbp .pl-year__num { font: 800 19px var(--is-font-mono); color: var(--is-brand-blue-700); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.nbp .pl-year__tag { font: 700 9px var(--is-font-sans); text-transform: uppercase; letter-spacing: .06em; color: var(--is-brand-blue-700); background: #fff; border: 1px solid var(--is-brand-blue); padding: 2px 7px; border-radius: 999px; }
.nbp .pl-broj { font-size: 12.5px; color: var(--is-fg-1); font-weight: 600; }
.nbp .pl-date { font: 500 12.5px var(--is-font-mono); color: var(--is-fg-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nbp .pl-empty { color: var(--is-fg-muted); font-style: italic; font-size: 12px; }
.nbp .pl-count { font: 700 13px var(--is-font-mono); color: var(--is-fg-1); font-variant-numeric: tabular-nums; }
.nbp .pl-pub { display: inline-flex; align-items: center; gap: 7px; font: 600 12px var(--is-font-sans); color: var(--is-fg-2); }
.nbp .pl-pub > i { font-size: 12px; color: var(--is-success); }
.nbp .pl-publink { color: var(--is-action-blue); font-size: 11px; text-decoration: none; }
.nbp .pl-publink:hover { color: var(--is-brand-blue-700); }
.nbp .pl-pub--no { color: var(--is-fg-muted); font-weight: 500; }
.nbp .pl-pub--no > i { color: var(--is-fg-muted); }
.nbp .pl-edit { display: inline-flex; align-items: center; gap: 8px; }

/* ── Mobile / tablet card stack ────────────────────────────── */
.nbp .nbp-cards { display: none; flex-direction: column; gap: 10px; padding: 12px; }
.nbp .nbp-card { border: 1px solid var(--is-border-1); border-radius: var(--is-radius-md); background: var(--is-bg-surface); box-shadow: var(--is-shadow-1); padding: 12px 14px; }
.nbp .nbp-card--current { border-color: var(--is-brand-blue-300); background: var(--is-brand-blue-100); }
.nbp .nbp-card__head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.nbp .nbp-card__meta { display: flex; flex-direction: column; gap: 6px; }
.nbp .nbp-card__field { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.nbp .nbp-card__label { font: 600 11px var(--is-font-sans); color: var(--is-fg-3); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.nbp .nbp-card__value { font: 600 12.5px var(--is-font-sans); color: var(--is-fg-1); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nbp .nbp-card__foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* ── Responsive (matches the V2 standard, MobileLayoutStandards.md) ──────────
   Tablet ≤1199px: grid → stacked cards (no horizontal scroll).
   Mobile ≤600px: header actions + filter controls become full-width stacked. */
@media (max-width: 1199px) {
    .nbp .nbp-desktop { display: none; }
    .nbp .nbp-cards { display: flex; }
}

@media (max-width: 600px) {
    /* Page header: title above, action buttons stacked full-width. */
    .nbp .nb-pagehead { align-items: stretch; }
    .nbp .nb-pagehead__actions { width: 100%; display: grid; grid-template-columns: 1fr; gap: 8px; }
    .nbp .nb-pagehead__actions .nb-btn { width: 100%; justify-content: center; }

    /* Filter bar: each control on its own full-width row. */
    .nbp .nb-filterbar__row { flex-direction: column; align-items: stretch; }
    .nbp .nb-search { max-width: none; min-width: 0; width: 100%; flex: 1 1 auto; }
    .nbp .nb-spacer { display: none; }
    .nbp .cc-pill,
    .nbp .cc-sf-pill { width: 100%; height: 40px; justify-content: center; }
    .nbp .cc-sf-pill .e-ddl,
    .nbp .cc-sf-pill .e-input-group { min-height: 40px !important; height: 40px !important; }
    .nbp .nb-resetlink { width: 100%; justify-content: center; height: 36px; }

    /* Pager wraps to its own centered row. */
    .nbp .nb-pager { justify-content: center; }
}