/* ─────────────────────────────────────────────────────────────────────────────
 * purchasing/purchasing-agent.css — layout for js/purchasing-agent.js
 * (Procurement → Purchasing Agent)
 *
 * LAYOUT ONLY, and every rule is scoped under #tab-purchasing-agent so nothing here can
 * restyle another screen. Colours are --ds-* tokens; STATUS colour never comes from this
 * file — it comes from dsBadge / the .ds-badge--<tone> classes (docs/design-system.md).
 * ──────────────────────────────────────────────────────────────────────────── */

/* ⚠️ THE PAGE PAINTS ITS OWN SURFACE. #content is a literal light background in both themes,
   so --ds-text written straight onto it is invisible in dark mode (the FinanceAgent finding,
   10/01/2026). The page sits on --ds-bg0 instead. */
#tab-purchasing-agent .pa-page{display:flex;flex-direction:column;gap:var(--ds-sp3);padding:var(--ds-sp4);min-width:0;
  background:var(--ds-bg0);color:var(--ds-text);border-radius:var(--ds-radius-lg)}
#tab-purchasing-agent .pa-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--ds-sp4);flex-wrap:wrap}
#tab-purchasing-agent .pa-head-text{min-width:0;flex:1 1 420px}
#tab-purchasing-agent .pa-title{margin:0;font-size:20px;font-weight:700;color:var(--ds-text)}
#tab-purchasing-agent .pa-sub{font-size:13px;color:var(--ds-text-muted);margin-top:3px;max-width:760px}
#tab-purchasing-agent .pa-run{font-size:12px;color:var(--ds-text-muted);margin-top:6px}
#tab-purchasing-agent .pa-head-actions{display:flex;gap:var(--ds-sp2);align-items:center;flex-wrap:wrap}
#tab-purchasing-agent .pa-tabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--ds-border);padding-bottom:4px}
#tab-purchasing-agent .pa-tab{padding:6px 12px;color:var(--ds-text-muted)}
#tab-purchasing-agent .pa-tab.is-on{background:var(--ds-blue-dim);color:var(--ds-blue);font-weight:600}
#tab-purchasing-agent .pa-view{display:flex;flex-direction:column;gap:var(--ds-sp3);min-width:0}

/* Utilities */
#tab-purchasing-agent .pa-gap{margin-top:var(--ds-sp2)}
#tab-purchasing-agent .pa-row{display:flex;gap:var(--ds-sp2);align-items:center;flex-wrap:wrap}
#tab-purchasing-agent .pa-small{font-size:12px;color:var(--ds-text-muted)}
#tab-purchasing-agent .pa-muted{color:var(--ds-text-dim)}
#tab-purchasing-agent .pa-warn{color:var(--ds-amber);font-weight:600}
#tab-purchasing-agent .pa-k{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ds-text-muted);margin-right:4px}
#tab-purchasing-agent .pa-r{text-align:right}
#tab-purchasing-agent .pa-h3{margin:var(--ds-sp3) 0 0;font-size:16px;color:var(--ds-text)}
#tab-purchasing-agent .pa-scroll{overflow-x:auto;max-width:100%}
#tab-purchasing-agent .pa-ul{margin:0;padding-left:18px;font-size:13px;line-height:1.7}
#tab-purchasing-agent .pa-mono{font-family:var(--ds-mono);font-size:12px;word-break:break-word}

/* Chips rendered as <button class="ds-btn ds-chip">: the chip shape wins over the button's. */
#tab-purchasing-agent .ds-btn.ds-chip{padding:4px 12px;border-radius:var(--ds-radius-full);font-size:12px}

/* Tiles */
#tab-purchasing-agent .pa-tiles{display:flex;gap:var(--ds-sp2);flex-wrap:wrap}
#tab-purchasing-agent .pa-tiles .ds-tile{flex:1 1 150px}

/* Queue items, proposals, drafts */
#tab-purchasing-agent .pa-list{display:flex;flex-direction:column;gap:var(--ds-sp2)}
#tab-purchasing-agent .pa-item{gap:var(--ds-sp2)}
#tab-purchasing-agent .pa-item-head{display:flex;align-items:baseline;gap:var(--ds-sp2);flex-wrap:wrap}
#tab-purchasing-agent .pa-rank{font-family:var(--ds-mono);font-weight:700;color:var(--ds-text-muted);min-width:34px}
#tab-purchasing-agent .pa-type{font-weight:600;color:var(--ds-text)}
#tab-purchasing-agent .pa-dollars{font-family:var(--ds-mono);font-weight:700;font-size:15px;color:var(--ds-text)}
#tab-purchasing-agent .pa-meta{font-size:12px;color:var(--ds-text-dim)}
#tab-purchasing-agent .pa-reason{font-size:13px;line-height:1.5;color:var(--ds-text)}
#tab-purchasing-agent .pa-evid,#tab-purchasing-agent .pa-prop{font-size:12px;line-height:1.6}
#tab-purchasing-agent .pa-actions{display:flex;gap:var(--ds-sp2);flex-wrap:wrap;align-items:center}
#tab-purchasing-agent .pa-panel{display:flex;flex-direction:column;gap:6px;padding:var(--ds-sp3);border:1px solid var(--ds-border);
  border-left:3px solid var(--ds-blue);border-radius:var(--ds-radius-sm);background:var(--ds-bg2)}
#tab-purchasing-agent .pa-panel-title{font-weight:600;font-size:14px;color:var(--ds-text)}
#tab-purchasing-agent .pa-fields{display:flex;flex-direction:column;gap:6px}
#tab-purchasing-agent .pa-fields .ds-input{max-width:420px}
#tab-purchasing-agent .pa-lbl{font-size:11px;color:var(--ds-text-dim);display:block;margin-top:4px}
#tab-purchasing-agent .pa-wide{width:100%;max-width:720px}
#tab-purchasing-agent .pa-radios{display:flex;flex-direction:column;gap:4px}
#tab-purchasing-agent .pa-radio{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ds-text);cursor:pointer}
#tab-purchasing-agent .pa-subject{font-weight:600;font-size:14px;color:var(--ds-text)}
#tab-purchasing-agent .pa-body{font-size:13px;line-height:1.55;white-space:pre-wrap;color:var(--ds-text);
  padding:var(--ds-sp2) var(--ds-sp3);background:var(--ds-bg2);border-radius:var(--ds-radius-sm);max-height:280px;overflow:auto}

/* In-screen links are <button class="ds-btn ds-link pa-link">: strip the button chrome so they
   read inline, and keep a visible focus ring for keyboard users. */
#tab-purchasing-agent .ds-btn.pa-link{display:inline;padding:0;margin:0;border:0;background:none;box-shadow:none;
  min-height:0;height:auto;font:inherit;font-weight:600;line-height:inherit;color:var(--ds-blue);
  text-align:left;vertical-align:baseline;cursor:pointer;white-space:normal}
#tab-purchasing-agent .ds-btn.pa-link:hover{text-decoration:underline;background:none}
#tab-purchasing-agent .ds-btn.pa-link:focus-visible{outline:2px solid var(--ds-blue);outline-offset:2px;border-radius:2px}

@media (max-width:640px){
  #tab-purchasing-agent .pa-page{padding:var(--ds-sp3)}
  #tab-purchasing-agent .pa-head-text{flex-basis:100%}
}