/* ==========================================================================
   Supplier Detail (supplier.html) · Marmi Apuani S.r.l., SUP-0101
   Spec: build/po/pages.md §8
   Only what is this page's own: the name and code in the title, the two
   columns a subsection folds into, the Vava network search, the price list
   and the other tables' column shares, the linked-families line, the
   document expiry word, the site boxes and the dialog headings. Everything
   another Purchase Orders page also says (the header, the figure bar, the
   key–value grid, the subsections, readings, timeline, document rows, the
   empty state) is in css/pages/purchase-orders.css. Classes here use the
   `sup-` prefix. Tokens only, radius ≤ 7px, nothing under 10px, no hex.
   ========================================================================== */

/* ---------- Title ----------------------------------------------------------------
   The name is the record; the code after it is the number, in muted ink, so
   the eye reads "Marmi Apuani S.r.l." first and the code as its qualifier. */
.sup-name { margin-right: 10px; }
.sup-code { font-weight: 500; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* ---------- Two columns inside a subsection ----------------------------------------
   Company beside Custom Fields, the network search beside the mapping, the
   terms in two blocks. Each column ends where its content ends (memory.md
   §16); one column under 900. */
.sup-cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 40px; align-items: start;
}
.sup-gap { margin-top: 18px; }
.sup-link { color: var(--color-primary-600); text-decoration: none; }
.sup-link:hover { color: var(--color-primary-700); }
.po-kv dd .subtle { font-size: 12px; }
.po-kv dd .badge { margin-left: 4px; vertical-align: middle; }
.sup-select { width: auto; max-width: 100%; padding-top: 4px; padding-bottom: 4px; font-size: 12px; }

/* A button that reads as a word: Link a Family, Show All, a Last Paid figure,
   Edit Site. Primary ink, no underline (no default underline on clickables),
   no box. */
.sup-textbtn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 500; color: var(--color-primary-600);
}
.sup-textbtn:hover { color: var(--color-primary-700); }
.sup-textbtn svg { width: 13px; height: 13px; flex: none; }
.data-table td .cell-stack .sup-textbtn { font-size: 13px; font-weight: 500; align-self: flex-start; }

/* The masked bank field's reveal: a word, not a button box. */
.sup-reveal {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 8px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--color-text-muted);
}
.sup-reveal:hover { color: var(--color-primary-700); }
.sup-reveal svg { width: 13px; height: 13px; flex: none; }

/* A line of explanation under a block, with its icon. */
.sup-hint {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 12px 0 0; font-size: 12px; color: var(--color-text-subtle); line-height: 1.5;
}
.sup-hint svg { width: 13px; height: 13px; flex: none; margin-top: 2px; }

/* ---------- Vava link ---------------------------------------------------------------
   The search field sized to a company name, its empty answer, and the three
   things a link does, each with its icon. */
.sup-netsearch { display: block; min-width: 0; max-width: 360px; }
.sup-noresult {
  display: flex; align-items: center; gap: 6px;
  margin: 8px 0 12px; font-size: 13px; color: var(--color-text-muted);
}
.sup-noresult svg { width: 14px; height: 14px; flex: none; color: var(--color-text-subtle); }
.sup-explain { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sup-explain li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--color-text); line-height: 1.45; }
.sup-explain svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--color-text-muted); }
.sup-cols .po-sec__h h4 { margin: 0; }

/* ---------- Card header actions ----------------------------------------------------- */
.sup-acts { display: inline-flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Linked material families: a reading line under the price list header,
   on the panel itself (words, not a box). */
.sup-families {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  padding: 0 16px 10px; font-size: 13px;
}
.sup-families__k { font-size: 12px; color: var(--color-text-muted); }

/* ---------- Tables: column shares (table-layout fixed, last column right) -------------- */
.sup-contacts th.col-name   { width: 20%; }
.sup-contacts th.col-role   { width: 18%; }
.sup-contacts th.col-email  { width: 22%; }
.sup-contacts th.col-po     { width: 11%; }
.sup-contacts th.col-cc     { width: 14%; }
.sup-contacts th.col-access { width: 15%; }
.sup-contacts .switch-field { font-size: 12px; }
.sup-row { cursor: pointer; }

.sup-loc th.col-loc  { width: 30%; }
.sup-loc th.col-lead { width: 22%; }
.sup-loc th.col-min  { width: 28%; }
.sup-loc th.col-note { width: 20%; }

.sup-prices th.col-check   { width: 4%; }
.sup-prices th.col-mat     { width: 20%; }
.sup-prices th.col-pack    { width: 13%; }
.sup-prices th.col-min     { width: 7%; }
.sup-prices th.col-lead    { width: 7%; }
.sup-prices th.col-default { width: 11%; }
.sup-prices th.col-other   { width: 13%; }
.sup-prices th.col-last    { width: 10%; }
.sup-prices th.col-price   { width: 15%; }
.sup-prices th.col-check,
.sup-prices td.col-check { text-align: center; }
.sup-prices tbody td.col-check::after { background: var(--row-mark-center); }
.sup-prices td a { color: var(--color-primary-600); text-decoration: none; }
.sup-prices td a:hover { color: var(--color-primary-700); }

.sup-pos th.col-po     { width: 18%; }
.sup-pos th.col-lines  { width: 28%; }
.sup-pos th.col-box    { width: 18%; }
.sup-pos th.col-status { width: 18%; }
.sup-pos th.col-total  { width: 18%; }
.sup-pos td.col-status { white-space: normal; line-height: 1.9; }
.sup-pos td.col-status .subtle { font-size: 12px; }

.sup-pay th.col-rec   { width: 24%; }
.sup-pay th.col-for   { width: 38%; }
.sup-pay th.col-state { width: 18%; }
.sup-pay th.col-amt   { width: 20%; }
.sup-pay td.col-state .subtle { font-size: 12px; margin-left: 4px; }
.sup-pay .sub .po-reading { font-size: 11px; }

.sup-perf th.col-measure { width: 24%; }
.sup-perf th.col-how     { width: 46%; }
.sup-perf th.col-val     { width: 30%; }
.sup-perf td.col-measure { font-weight: 500; }
.sup-perf td.col-how { color: var(--color-text-muted); }
.sup-perf td.col-val .cell-stack { align-items: flex-end; }
.cell-stack .main.sup-warn,
.sup-warn { color: var(--color-warn-ink); font-weight: 600; }

.sup-map th.col-file { width: 40%; }
.sup-map th.col-to   { width: 60%; }
.sup-map__sel { width: auto; max-width: 100%; padding-top: 4px; padding-bottom: 4px; font-size: 12px; }
.sup-preview th.col-mat   { width: 38%; }
.sup-preview th.col-their { width: 20%; }
.sup-preview th.col-sqft  { width: 16%; }
.sup-preview th.col-chg   { width: 26%; }
.sup-preview td.col-chg .po-reading { font-size: 12px; }

/* "5 earlier POs" under the History table. */
.sup-more {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  margin: 10px 0 0; font-size: 12px; color: var(--color-text-muted);
}

/* ---------- Documents ------------------------------------------------------------------
   The name and its line under it take the room; who sees it, then the
   expiry word, sit in columns of their own so the dates line up; the warn
   word is the one inside the reminder window. */
.sup-docs { padding-top: 0; }
.sup-doc-id { flex: 1 1 260px; min-width: 0; }
.sup-doc-id .po-doc__ver { white-space: normal; font-size: 11px; }
.sup-docs .po-doc__vis { width: 170px; }
.sup-exp {
  display: inline-flex; align-items: center; gap: 5px;
  width: 230px; font-size: 12px; color: var(--color-text); white-space: nowrap;
}
.sup-exp svg { width: 13px; height: 13px; flex: none; }
.sup-exp.is-warn { color: var(--color-warn-ink); font-weight: 600; }
.sup-docs .po-doc__acts { margin-left: 0; width: 310px; justify-content: flex-end; }

/* ---------- Sites ------------------------------------------------------------------------
   Three boxes inside the white panel, so on the control ground (memory.md
   §13): the kind icon and the name, the kind words, the address, the POs
   that name it, and its own Edit Site. */
.sup-sites { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sup-site {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px;
  background: var(--color-control);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
}
.sup-site__h { display: flex; align-items: center; gap: 8px; }
.sup-site__h > svg { width: 16px; height: 16px; flex: none; color: var(--color-text-muted); }
.sup-site__name { font-size: 14px; font-weight: 600; color: var(--color-text); }
.sup-site__edit { margin-left: auto; }
.sup-site__kind { font-size: 12px; }
.sup-site__addr,
.sup-site__pos { margin: 0; font-size: 12px; color: var(--color-text-muted); }
.sup-site__pos a { color: var(--color-primary-600); text-decoration: none; }

/* ---------- Dialogs ---------------------------------------------------------------------- */
.sup-dlg-h {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  margin: 20px 0 10px; font-size: 13px; font-weight: 600; color: var(--color-text);
}
.sup-dlg-h:first-child,
.sup-dlg-h--first { margin-top: 0; }
.sup-dlg-h .subtle { font-size: 12px; font-weight: 400; }
.sup-dlg-h .po-reading { font-size: 12px; }
.sup-dlg-lead { margin: 0 0 12px; font-size: 13px; line-height: 1.5; }
.sup-switches { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.slideover-body .po-empty + .sup-dlg-h { margin-top: 18px; }

/* ---------- Narrow screens ----------------------------------------------------------------
   1200: the price list keeps its shares on a fixed-width table and scrolls
   inside .table-wrap. 900: subsections drop to one column, sites to one.
   768 / 480: wider tables scroll; documents stack their columns. */
@media (max-width: 1200px) {
  .sup-prices { min-width: 1180px; }
  .sup-sites { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sup-cols { grid-template-columns: minmax(0, 1fr); }
  .sup-contacts { min-width: 760px; }
  .sup-pos,
  .sup-pay { min-width: 680px; }
}
@media (max-width: 768px) {
  /* A panel's heading takes the line; its actions drop under it rather than
     squeezing the sentence into a column of single words. */
  [data-tab-panel] > .card > .card-header { flex-wrap: wrap; gap: 10px; }
  [data-tab-panel] > .card > .card-header > div:first-child { flex: 1 1 100%; }
  .sup-site__h { flex-wrap: wrap; }
  .sup-sites { grid-template-columns: minmax(0, 1fr); }
  .sup-docs .po-doc__vis,
  .sup-exp { width: auto; }
  .sup-docs .po-doc__acts { width: auto; flex-wrap: wrap; justify-content: flex-start; }
  .sup-netsearch { max-width: none; }
  .sup-textbtn,
  .sup-reveal { min-height: 32px; }
  .sup-perf { min-width: 520px; }
}
@media (max-width: 480px) {
  .sup-name { margin-right: 6px; }
  .sup-loc { min-width: 480px; }
  .sup-preview { min-width: 460px; }
  .sup-doc-id { flex-basis: 100%; }
  /* The footer's line and the pager run past a phone's edge on one row; wrap
     them, the line first, as order-detail.css does. */
  .tab-shell .card-footer { flex-wrap: wrap; gap: 8px; }
  .tab-shell .card-footer > span:first-child { flex-basis: 100%; }
  .tab-shell .card-footer .page-controls { margin-left: 0; flex-wrap: wrap; row-gap: 6px; }
}
.sup-hint--table { margin: 10px 16px 0; }