/* ==========================================================================
   Purchase Orders — Suppliers (suppliers.html)

   Spec: build/po/pages.md §7

   Only what is this page's own: the directory's column shares, the supplier
   cell with its contacts and row menu, the Vava words as a button, the KPI
   tiles as links, the dialog pieces (Vava link, import, export, new
   supplier) and how the page folds at 1200 / 768 / 480. Everything another
   Purchase Orders page also says (the hub strip, the view switch, the
   readings, the gear dialogs) is in css/pages/purchase-orders.css. Classes
   here use the `po-sup-` prefix.
   ========================================================================== */

/* ---------- Columns -----------------------------------------------------------
   Nine columns take shares of the table under `table-layout: fixed`, so they
   resize with the browser and never with the data. The supplier cell holds
   the name, code, country, contacts and the row menu, so it takes the widest
   share; Terms is next because payment terms are sentences. The spend sits
   last and is right-aligned by `.data-table`'s own last-column rule. */
.po-sup-table { table-layout: fixed; }
.po-sup-table th.col-sup    { width: 17%; }
.po-sup-table th.col-type   { width: 9%; }
.po-sup-table th.col-terms  { width: 14%; }
.po-sup-table th.col-lead   { width: 7%; }
.po-sup-table th.col-vava   { width: 10%; }
.po-sup-table th.col-perf   { width: 10%; }
.po-sup-table th.col-open   { width: 12%; }
.po-sup-table th.col-status { width: 10%; }
.po-sup-table th.col-spend  { width: 11%; }
.po-sup-table td { white-space: normal; }
.po-sup-table td .cell-stack .main,
.po-sup-table td .cell-stack .sub { overflow-wrap: anywhere; }
/* A status cell's sub-line ("Bank details not verified") keeps the row's own
   leading, not the 1.9 the shared rule gives a badge-and-flag cell. */
.po-sup-table td.col-status .cell-stack .sub { line-height: 1.4; }

/* A flag word under an open-PO figure ("1 Late · 1 Unconfirmed"): the danger
   ink and weight a reading takes when it is urgent (memory.md §19, words not
   chips). */
.po-sup-flag { color: var(--color-danger-ink); font-weight: 600; }

/* ---------- The supplier cell -------------------------------------------------
   The identity (name, code · country · city, contacts, an act when one is
   owed) takes the cell; the row menu's button stands at its top right, a
   28px target that does not push the name onto a second line. */
.po-sup-id { display: flex; align-items: flex-start; gap: 6px; }
.po-sup-id__main { flex: 1 1 auto; min-width: 0; }
.po-sup-more { width: 28px; height: 28px; flex: none; margin-top: -3px; color: var(--color-text-subtle); }
.po-sup-more svg { width: 16px; height: 16px; }
.po-sup-more:hover { color: var(--color-text); }
.po-sup-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* The Vava words for a linked supplier are a button (they open what the link
   carries), drawn as the words they are: no box, no fill, no underline. Hover
   is colour and weight only. */
.po-sup-vava {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600;
}
.po-sup-vava:hover { color: var(--color-success); }
.po-sup-vava:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 3px; }

/* ---------- The row menu -------------------------------------------------------
   One menu for every row, outside the table: `.table-wrap` clips anything that
   hangs out of a cell. The page script places it beside its button. */
.po-sup-rowmenu { position: static; }
.po-sup-rowmenu .dropdown-menu { position: fixed; top: 0; left: 0; right: auto; min-width: 220px; }

/* ---------- KPI tiles as links ---------------------------------------------------
   Each tile opens the list behind it, so it is an <a>; it keeps the tile's own
   ink and loses the link underline. */
a.po-sup-kpi,
a.po-sup-kpi:hover { color: inherit; text-decoration: none; }
a.po-sup-kpi { cursor: pointer; }
a.po-sup-kpi:hover { border-color: var(--color-border-strong); }

/* ---------- Dialog pieces --------------------------------------------------------- */
.po-sup-dlg-h { margin: 18px 0 8px; font-size: 13px; font-weight: 600; color: var(--color-text); }
.po-sup-dlg-h .subtle { font-size: 12px; font-weight: 400; }
.po-sup-lead { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-text); }
.po-sup-gap { margin-top: 14px; }
.po-sup-danger { color: var(--color-danger-ink); }
.po-sup-danger:hover { color: var(--color-danger-ink); border-color: var(--color-danger); }
.po-sup-note {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 0 0 12px; font-size: 12px; line-height: 1.5; color: var(--color-text-muted);
}
.po-sup-note svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--color-text-subtle); }
.po-kv dd a,
.po-sup-note a { color: var(--color-primary-600); text-decoration: none; }
.po-kv dd a:hover { color: var(--color-primary-700); }
.po-sup-btnrow { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.po-sup-file {
  display: flex; align-items: center; gap: 6px;
  margin: 10px 0 0; font-size: 13px; color: var(--color-text);
}
.po-sup-file svg { width: 15px; height: 15px; flex: none; color: var(--color-success-ink); }
.po-sup-file .subtle { font-size: 12px; }
/* Switch rows stacked with the house gap between them (memory.md §5: switch
   first, label regular weight). */
.po-sup-switches { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 16px; }
.po-sup-switches .switch-field { color: var(--color-text); line-height: 1.45; }

/* The network search at the top of New Supplier: a box on the control ground
   (a nested panel, memory.md §13) holding the search and its one sentence. */
.po-sup-netsearch {
  padding: 12px 14px; margin-bottom: 18px;
  background: var(--color-control);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
}
.po-sup-netsearch .po-dialog-note { margin-top: 8px; }
.po-sup-netsearch__box { max-width: none; width: 100%; min-width: 0; }
/* A field on a tinted box inverts back to white (memory.md §17). */
.po-sup-netsearch__box .input { background: var(--color-surface); }

/* The dialog tables: the Vava material map, the import's column map and its
   preview. Shares of each table; the last column right-aligned. */
.po-sup-map,
.po-sup-colmap,
.po-sup-preview { table-layout: fixed; }
.po-sup-map th.col-code { width: 22%; }
.po-sup-map th.col-name { width: 40%; }
.po-sup-map th.col-ours { width: 38%; }
.po-sup-colmap th.col-file { width: 40%; }
.po-sup-colmap th.col-to   { width: 60%; }
.po-sup-preview th.col-row { width: 10%; }
.po-sup-preview th.col-sup { width: 46%; }
.po-sup-preview th.col-ccy { width: 18%; }
.po-sup-preview th.col-res { width: 26%; }
.po-sup-preview td { white-space: normal; }
.po-sup-preview td.col-res .po-reading { font-size: 12px; }
.po-sup-preview .subtle { font-size: 11px; }
.po-sup-sel { width: auto; max-width: 100%; padding-top: 4px; padding-bottom: 4px; font-size: 12px; }

/* ---------- Narrow screens -------------------------------------------------------
   Below 1200 the nine columns fight: the directory keeps its shares on a
   1080px table and scrolls sideways inside `.table-wrap` (the house pattern)
   rather than folding nine readings into sixty-pixel columns. */
@media (max-width: 1200px) {
  .po-sup-table { min-width: 1160px; }
  /* Four tiles fold two by two, every tile the same size. */
  .kpi-summary .kpi-summary__cards > .kpi { flex: 1 1 calc(50% - 8px); }
}
@media (max-width: 768px) {
  .po-sup-more { width: 36px; height: 36px; margin-top: -6px; }
  .po-sup-acts .btn { min-height: 44px; }
  .po-sup-preview { min-width: 520px; }
}
@media (max-width: 640px) {
  .kpi-summary .kpi-summary__cards > .kpi { flex-basis: 100%; }
}
@media (max-width: 480px) {
  /* The header actions take a line of their own and wrap on it. */
  .page-header .page-actions { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; }
  /* The footer count and the pager each take a line. */
  .tab-shell .card-footer { flex-wrap: wrap; gap: 8px; }
  .tab-shell .card-footer .page-controls { margin-left: 0; flex-wrap: wrap; row-gap: 6px; }
  .po-sup-map { min-width: 420px; }
}