/* =========================================================
   2S DEVELOPMENT — Network Agent Vendor Network ("na-*"/"an-*"
   components, network/agent/index.html).

   Legacy /agent UI/UX PORT (Sep 2026): the Vendor Network screens in
   this portal now reproduce css/agent.css's actual design verbatim,
   via css/agent-port.css (a full, unmodified copy of that file,
   loaded on this page ahead of this one — see its own header
   comment). This file's role narrowed accordingly: it holds ONLY the
   genuinely new, portal-specific surfaces that have no legacy /agent
   equivalent at all (the ownership badges .na-own-badge/.na-shared-
   note, the preset-chip .an-chip* form variant used by vendor forms,
   and a couple of small responsive overrides) — every class that DOES
   have a legacy equivalent (.ag-vendor-card, .ag-profile-grid,
   .ag-fact-row, .ag-tab-nav, etc.) now comes from css/agent-port.css,
   not from here. Some selectors below (.na-vendor-grid/.na-vendor-
   card/.na-vc-*/.na-filter-bar/.na-profile-head/.na-product-row) are
   LEFTOVER from the pre-port implementation and are being phased out
   screen-by-screen as each one is ported onto the .ag-* equivalents —
   do not assume every class still declared here is still in active
   use; check which screen actually renders it in
   js/network-agent-vendor-port.js before treating it as load-bearing.
   Still deliberately does NOT touch css/agent.css itself.
   ========================================================= */

/* ---------------- filters ---------------- */
.na-filter-bar{ display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; }
.na-filter-bar input, .na-filter-bar select{
  font:13px var(--sans); padding:10px 14px; border:1px solid var(--line); border-radius:3px; background:var(--ivory); color:var(--ink);
}
.na-filter-bar input{ flex:1; min-width:220px; }
.na-filter-bar select{ min-width:170px; }
.na-result-count{ margin-top:18px; font:11px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--sage); }

/* ---------------- vendor cards / grid ---------------- */
.na-vendor-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:16px; margin-top:16px; }
.na-vendor-card{
  border:1px solid var(--line); border-radius:4px; overflow:hidden; background:var(--ivory);
  display:flex; flex-direction:column; transition:border-color .2s; cursor:pointer;
}
.na-vendor-card:hover{ border-color:var(--ink); }
.na-vc-figure{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--clay); }
.na-vc-figure img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.na-vc-figure-empty{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:400 40px var(--serif); color:var(--sage); }
.na-vc-body{ padding:16px; display:flex; flex-direction:column; gap:5px; }
.na-vc-name{ font:400 18px var(--serif); letter-spacing:-.01em; }
.na-vc-meta{ font:11px var(--sans); color:var(--sage); }
.na-vc-foot{ margin-top:6px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.na-own-badge{
  display:inline-block; font:9px var(--mono); text-transform:uppercase; letter-spacing:.06em;
  color:var(--sage-deep); background:var(--clay); padding:4px 9px; border-radius:20px;
}
.na-shared-note{ display:block; margin-top:10px; font:11px var(--sans); color:var(--sage); max-width:44ch; }

/* ---------------- chip pickers (Add/Edit/Import Vendor forms) ---------------- */
/* .cp-field (css/portal.css) supplies its own margin-bottom:20px, but
   an-chip-row is a SIBLING placed right after each field's div, not a
   child of it — so without its own bottom margin here, nothing
   separated the end of a (possibly multi-row, wrapped) chip row from
   the next field's label, and they visually ran together. Matches
   .cp-field's own 20px rhythm rather than an arbitrary value. */
.an-chip-row{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; margin-bottom:20px; }
.an-chip{
  font:11px var(--sans); padding:6px 12px; border:1px solid var(--line); border-radius:20px;
  background:var(--ivory); color:var(--ink); cursor:pointer; transition:background .15s, color .15s, border-color .15s;
}
.an-chip:hover{ border-color:var(--ink); }
.an-chip:focus-visible{ outline:2px solid var(--ink); outline-offset:1px; }
.an-chip.is-selected{ background:var(--ink); border-color:var(--ink); color:var(--ivory); }

/* ---------------- vendor profile ---------------- */
.na-profile-head{ display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; }
.na-profile-figure{ flex:0 0 160px; width:160px; height:160px; border-radius:4px; overflow:hidden; background:var(--clay); }
.na-profile-figure img{ width:100%; height:100%; object-fit:cover; }

/* UI/UX port update (Sep 2026): the hand-copied .ag-profile-grid/.ag-
   profile-col/.ag-fact-row/.ag-tag-list/.ag-tag/.ag-profile-actions
   subset that used to live here (a stand-in for agent.css never being
   loaded on this page) has been removed — css/agent-port.css (a full,
   verbatim copy of every class in css/agent.css) is now loaded on
   this page instead, ahead of this file, and supplies these classes
   directly. See network/agent/index.html's <head> and css/agent-
   port.css's own header comment. */

/* ---------------- products ---------------- */
.na-product-row{
  display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--line);
}
.na-product-thumb{ flex:0 0 52px; width:52px; height:52px; border-radius:3px; overflow:hidden; background:var(--clay); }
.na-product-thumb img{ width:100%; height:100%; object-fit:cover; }
.na-product-thumb-empty{ background:var(--clay); }
.na-product-body{ flex:1; min-width:0; }
.na-product-remove{ flex:0 0 auto; }

.pe-btn.is-danger{ border-color:#9c5b3e; color:#9c5b3e; align-self:flex-start; justify-self:start; }
.pe-btn.is-danger:hover{ background:#9c5b3e; color:var(--ivory); }
.pe-btn.is-danger:focus-visible{ outline:2px solid #9c5b3e; outline-offset:2px; }

/* Vendor card hierarchy — the ported .ag-vc-body's 6px gap (from
   css/agent-port.css/css/agent.css, both unmodified here) reads fine
   for legacy /agent's denser staff-tool layout, but the same tight
   spacing made name/category/city read as one run-on block in this
   portal's slightly larger type context. A bit more room between
   lines, not a redesign — dimensions, grid, and legacy /agent are
   untouched. */
.ag-vendor-card .ag-vc-body{ gap:9px; }
.ag-vendor-card .ag-vc-name{ margin-top:3px; }
.ag-vendor-card .ag-vc-meta{ line-height:1.4; }

@media (max-width:760px){
  .na-vendor-grid{ grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); }
  .na-profile-figure{ flex-basis:100%; width:100%; height:200px; }
}

/* Screen-header subtitle spacing — a .studio-head (eyebrow + .h-display
   heading, e.g. "VENDORS.") has no bottom margin, and the .cp-welcome-
   sub paragraph that follows it (Vendors, Products, etc.) has no top
   margin either, so the two sat with zero gap between them. Matches
   .studio-head p's own existing 20px rhythm (css/studio.css) rather
   than an arbitrary value; scoped to this adjacency only so it can't
   affect .cp-welcome-sub anywhere it isn't directly preceded by a
   .studio-head (e.g. the Client Portal dashboard's tighter, deliberate
   .cp-welcome/.cp-welcome-sub spacing is untouched). */
.studio-head + .cp-welcome-sub{ margin-top:20px; }