/* vendor-management.css — additions on top of ap-kpi.css for the Vendor Management page.
   Everything else (cards, tiles, tablewrap, filters, login card, phone breakpoint) already comes
   from ap-kpi.css — this file only adds what that shared sheet does not cover. Moved out of
   ap-kpi.css onto its own page per EISSMANN-VENDOR-MASTER-2026-09-23/01-PORTAL-ADDENDUM.md
   (Steve: vendor work moves to its own page, out of ap-kpi). */

/* Vendor accounts editor (Steve 2026-09-23: terms / credit limit / priority per company code) */
.acctcell { line-height:1.5; }
.acctcell div { white-space:nowrap; }
.acct-editor { margin:6px 0 4px; }
.acct-editor select, .acct-editor input[type=number] { background:var(--page); border:1px solid var(--ring); border-radius:6px; padding:5px 7px; font:inherit; color:var(--ink); }
.acct-editor input[type=number] { width:110px; }
.acct-editor select { min-width:100px; }
.acct-status { font-size:11.5px; margin-left:8px; color:var(--muted); }
.acct-status.ok { color:var(--good); }
.acct-status.bad { color:var(--critical); }
.reload-link { color:inherit; text-decoration:underline; cursor:pointer; }
.notset { font-size:10.5px; color:var(--muted); font-weight:400; text-transform:uppercase; letter-spacing:.3px; }
/* G-065 fix lane round 2: the old inline "type a code, get a blank row" box (.acct-add/.addcc/
   .addbtn/.addmsg) is gone — replaced by the dlgAddCompany <dialog> (.vm-dialog, index.html), which
   needs no page-specific rules of its own. */

/* Monitor column (directory) + per-vendor Monitor/Cushion/Status/Priority strip (fix round, Steve
   2026-09-23; formrow layout added fix lane round 2, G-043/G-045/G-047 — matched to the demo's own
   vendorConditionsBlock, 07-VENDOR-MANAGEMENT-DEMO.html). */
.monitorcell { text-align:center; color:var(--good); font-weight:700; }
.vendor-strip { display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding-bottom:12px; margin-bottom:10px; border-bottom:1px solid var(--grid); }
.vendor-strip .hint { flex-basis:100%; margin:0; }
/* Each row (Status/Monitor/Cushion days/Priority) is its own full-width line inside the
   .vendor-strip flex-wrap container — same trick .r13hint below already used. */
.vendor-strip .formrow { flex-basis:100%; display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink2); }
.vendor-strip .formrow label { min-width:110px; }
.vendor-strip .formrow input[type=number] { background:var(--page); border:1px solid var(--ring); border-radius:6px; padding:5px 7px; font:inherit; color:var(--ink); width:80px; }
/* R13 client hint (08-ROUND4.md "R13"): shown only while the Monitor checkbox is disabled because
   the vendor has no effective (active assignment on an active catalogue condition) condition. */
.r13hint { flex-basis:100%; font-size:12px; color:var(--serious); }

/* R22b/R22c Active/Inactive (05-SLIDE-LAYOUT.md, Steve 2026-09-24) — the Status row's own value
   text; the row itself is a plain .formrow, and the inactive note is a plain .hint (fix lane round 2). */
.vstrip-active-value { color:var(--ink); font-weight:700; }
/* Directory row: greyed with an "Inactive" tag (R22c). */
tr.vrow.inactive { opacity:.6; }
.inactive-tag { font-size:10px; text-transform:uppercase; letter-spacing:.3px; color:var(--critical); border:1px solid var(--critical); border-radius:4px; padding:1px 5px; margin-left:6px; }

/* Codex verifier fix #7 (2026-09-25): the header Back button reuses .hbtn (page-nav.css's own
   comment above explains why page-nav.css itself never targets .hbtn — this page's dark header
   theme owns that class) — ".hbtn { ... }" alone let "&larr; Back" wrap onto two lines on narrow
   screens. Scoped to [data-nav-back] so it touches only the Back button, not Portal/Vendor Admin/
   Log out. */
[data-nav-back].hbtn { white-space: nowrap; }

/* Vendor lists admin panel (isAdmin only) */
.listspanel { border-top:1px solid var(--grid); margin-top:4px; padding-top:12px; }
.listsgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin-bottom:10px; }
.listsgrid label { font-size:12.5px; color:var(--ink2); display:flex; flex-direction:column; gap:4px; }
.listsgrid input[type=text] { background:var(--page); border:1px solid var(--ring); border-radius:7px; padding:9px 10px; font:inherit; color:var(--ink); }

/* Sub-nav (Monitor · Directory only — Conditions/Lists/assignment moved to the admin-only page,
   05-SLIDE-LAYOUT.md R3, Steve 2026-09-23) + tab panels */
.subnav { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.subnav-tab { background:var(--surface); border:1px solid var(--ring); border-radius:8px; padding:8px 16px; font:inherit; font-size:13px; font-weight:600; color:var(--ink2); cursor:pointer; }
.subnav-tab:hover { color:var(--ink); border-color:var(--seq450); }
.subnav-tab.active { background:var(--seq450); color:#fff; border-color:var(--seq450); }
.tabpanel[hidden] { display:none; }

/* Monitor compliance board — Steve's slide layout (05-SLIDE-LAYOUT.md): Vendor / Requirements /
   Current / Status. Status is a SOLID COLOUR cell with no visible text (R5) — the label lives only
   in aria-label/title. */
/* Steve 2026-09-23 fix round: status lines were nowrap but the condition-name divs were not, so a
   long name wrapping to two lines pushed columns 2/3 out of row-for-row alignment. Give the name
   line the same nowrap+ellipsis treatment (with a title attribute the JS could add) and anchor
   both cells to the top of the row so a wrap in one column cannot shift the other. */
#mdt td, .vdetail-summary td { vertical-align:top; }
#mdt tbody tr.vrow, .vdetail-summary tbody tr.vrow { cursor:pointer; }
.vidsmall { font-size:11px; color:var(--muted); margin-top:2px; }
/* Steve 2026-10-12 ("i dont want to have to scroll at all"): one "Out of compliance" column now, so
   its lines WRAP instead of nowrap+ellipsis — nothing to misalign against, and the board never
   overflows the card sideways. The page container is also wider than ap-kpi.css's 1180px. */
.wrap { max-width:1600px; }
.mcondline { white-space:normal; }
.mstatusline { white-space:normal; overflow-wrap:anywhere; }
#mdt td, .vdetail-summary td { padding:6px 10px; }
#mdt th:first-child, .vdetail-summary th:first-child { width:26%; }
#mdt th:last-child, .vdetail-summary th:last-child { width:70px; }
.mdot { width:7px; height:7px; border-radius:50%; background:var(--critical); display:inline-block; flex:0 0 auto; }
/* R5: colour-only status cell — a fixed-size solid block, no text node inside it. */
.flagcell { display:inline-block; width:34px; height:20px; border-radius:6px; }
.flagcell.green { background:var(--good); }
.flagcell.red { background:var(--critical); }
.flagcell.grey { background:var(--muted); }
.mdetail { padding:6px 4px 4px; }
.mdetail h4, .mdetail .mcondname { font-size:12px; color:var(--ink2); margin:12px 0 4px; text-transform:uppercase; letter-spacing:.3px; }
.mdetail h4:first-child, .mdetail .mcondname:first-child { margin-top:2px; }
.mnotes { margin:2px 0 4px 18px; font-size:12px; color:var(--ink2); }
.mnotes li { margin:2px 0; }
/* R11 reasons, rendered under their own condition heading above Made/Missed (round-3 re-check MED). */
.mreasons-lbl { font-size:11px; color:var(--critical); text-transform:uppercase; letter-spacing:.3px; margin:2px 0 2px; }
.mreasons { margin:0 0 6px 18px; font-size:12px; color:var(--ink2); }
.mreasons li { margin:2px 0; }

/* Vendor-details route (#/vendor/<id>) — 05-SLIDE-LAYOUT.md: "the same four-column summary for
   this vendor at the top, then per requirement the Made / Missed invoice tables ... then notes." */
#monitorDetailView { margin-top:12px; }
.vdetail-summary { margin-bottom:14px; }
/* R16b "Edit vendor" block (Monitor board vendor-details view) — same vendor-strip/cond-checklist
   components as the Directory panel, wrapped in a .card for visual separation from the summary. */
.vdetail-edit { margin-bottom:14px; }
.vdetail-edit h3 { font-size:13px; font-weight:700; margin-bottom:8px; }


/* Exceptions tab (R15) */
#exceptionsBanner { margin:6px 0; }

/* Remove-with-reason dialog — same <dialog> pattern as public/pph/index.html's .pk-dialog (the
   only prior precedent in this codebase), renamed .vm-dialog since it is shared by this page and
   the Vendor Admin page's Rate-correction dialog (08-ROUND4.md "UI cleanup"). */
.vm-dialog { margin:auto; border:1px solid var(--ring); border-radius:10px; padding:18px 20px; max-width:480px; width:calc(100% - 32px); background:var(--surface); color:var(--ink); }
.vm-dialog::backdrop { background:rgba(0,0,0,.45); }
.vm-dialog h3 { margin:0 0 6px; }
.dlg-label { display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--ink2); margin:10px 0; }
.dlg-label textarea, .dlg-label input { background:var(--page); border:1px solid var(--ring); border-radius:7px; padding:8px 10px; font:inherit; color:var(--ink); resize:vertical; }
.pk-dialog-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; margin-top:14px; }

/* Conditions catalogue form (admin) */
.cond-form { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin:12px 0 4px; }
.cond-form label { font-size:12.5px; color:var(--ink2); display:flex; flex-direction:column; gap:4px; }
.cond-form input[type=text], .cond-form input[type=number], .cond-form select { background:var(--page); border:1px solid var(--ring); border-radius:7px; padding:8px 10px; font:inherit; color:var(--ink); }
.cond-form input[type=text] { width:190px; }
.cond-form input#condDescription { width:280px; }
.cond-form .checklist-name { flex-direction:row; align-items:center; gap:6px; }
#condParamsWrap { display:flex; }

/* Directory expanded panel: Conditions-monitored checklist */
.cond-checklist { margin-top:14px; padding-top:12px; border-top:1px solid var(--grid); }
/* G-043/G-045/G-047 fix lane round 2: heading is now an h2 (matched to the demo), same visual weight
   as before. */
.cond-checklist h2 { font-size:12px; color:var(--ink2); text-transform:uppercase; letter-spacing:.3px; margin-bottom:8px; }
.checklist-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:6px 0; border-bottom:1px solid var(--grid); font-size:13px; }
.checklist-row:last-child { border-bottom:none; }
.checklist-name { display:flex; align-items:center; gap:6px; min-width:220px; }
.checklist-param { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink2); }
.checklist-param input[type=number] { background:var(--page); border:1px solid var(--ring); border-radius:6px; padding:5px 7px; font:inherit; color:var(--ink); width:80px; }
.override-badge { font-size:10px; text-transform:uppercase; letter-spacing:.3px; color:var(--seq450); border:1px solid var(--seq450); border-radius:4px; padding:1px 5px; }

/* Steve 2026-09-23 R4 fix round (round-3 recheck LOW: "export controls can't be reached by
   keyboard") — "Download Excel"/"Recommend payments" were <span class=linkish>, not focusable and
   with no button role. Now real <button type=button class="ctl linkish"> — reset to keep the same
   plain-text look instead of the browser's default button chrome. */
button.ctl.linkish { background:none; border:none; padding:0; margin:0; font:inherit; color:var(--seq450); text-decoration:underline; }

/* ==================================================================================================
   Package P3 (2026-09-28 build, EISSMANN-VM-MATCH-DEMO-PLAN-2026-09-28.md) — demo-match additions.
   header nav a / header nav a.active (colour, active underline) already come from ap-kpi.css — a
   plain <nav> inside <header> — so .vm-nav/.vm-navlink need no new rule of their own for that.
   ================================================================================================== */

/* Found live (browser harness check): ap-kpi.css's "header nav a { ... display:flex; ... }" is an
   AUTHOR rule, and author rules beat the user-agent's own "[hidden] { display:none }" regardless of
   selector specificity (origin precedence, not specificity, decides between the two) — so the bare
   `hidden` attribute on navMonitor/navDirectory/navExceptions/adminLink (G-118: hidden until
   sign-in) was silently defeated and every one of them stayed visible while signed out. A more
   specific AUTHOR rule for the same elements is required. */
.vm-nav a[hidden] { display: none; }

/* G-026 count line: swatch markers between text segments — no colour WORD anywhere in the text (R5). */
.swatch { display:inline-block; width:10px; height:10px; border-radius:3px; margin:0 2px -1px; }
.swatch.red { background:var(--critical); }
.swatch.green { background:var(--good); }
.swatch.grey { background:var(--muted); }

/* A1 addendum: one line per stale company code, above the board. */
.stalenotice { color:var(--serious); }

/* G-042 vendor-details fact strip (Vendor / Priority / Monitor / Cushion) — same "label over value"
   column shape as .vsummary/.scol/.slabel/.sval names in the client demo. */
.vsummary { display:flex; flex-wrap:wrap; gap:22px; margin:10px 0 16px; }
.scol { display:flex; flex-direction:column; gap:2px; }
.slabel { font-size:11px; text-transform:uppercase; letter-spacing:.3px; color:var(--muted); }
.sval { font-size:14px; color:var(--ink); }

/* G-048 one card per condition: name + Pass/Fail badge, requirement — current line. */
.mconditioncard { margin-bottom:14px; }
.mcondhead { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mcondhead .mcondname { margin:0; }
.mcondbadge { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; border-radius:4px; padding:2px 8px; flex:0 0 auto; }
.mcondbadge.pass { background:color-mix(in srgb, var(--good) 18%, transparent); color:var(--good); }
.mcondbadge.fail { background:color-mix(in srgb, var(--critical) 18%, transparent); color:var(--critical); }
.mcondreqline { font-size:12.5px; color:var(--ink2); margin:2px 0 8px; }

/* C13/G-054/G-110 Notes box — "<invoice> removed by admin: <reason>" and the engine's own
   per-condition notes[] alike. */
.notesbox { background:var(--surface); border:1px solid var(--grid); border-radius:8px; padding:8px 10px; margin:8px 0; font-size:12px; color:var(--ink2); }
.notesbox strong { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.3px; color:var(--muted); margin-bottom:4px; }
.noteline { margin:2px 0; }

/* G-062 collapsed-row inline Activate control (Directory Status column). */
.inline-activate { margin-left:8px; }

/* G-091 Recommend payments preview dialog — wider than the default .vm-dialog max-width. */
.vm-dialog-wide { max-width:760px; }

/* G-016 saved-change toast stack — fixed bottom-right, max 3 stacked, matched against the demo's
   own #toastHost/.toast/.toastlink/.toastx (visual shape only; the demo's own CSS was not ported
   verbatim). */
.toast-stack { position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; z-index:40; max-width:360px; }
.toast { display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--ring); border-radius:8px; padding:10px 12px; font-size:13px; color:var(--ink); box-shadow:0 4px 16px rgba(0,0,0,.25); }
.toast span { flex:1 1 auto; }
.toastlink { color:var(--seq450); text-decoration:underline; white-space:nowrap; }
.toastx { background:none; border:none; color:var(--muted); font-size:16px; line-height:1; cursor:pointer; padding:0 2px; }
.toastx:hover { color:var(--ink); }

/* LOW fix (integration fixer round 2, G-075) — Exceptions "Removed" list: one plain line per
   removal (no table, no header row), matched against the demo's own .removedrow rule
   (demo-stripped.html 195: font-size:12.5px; color:var(--ink2); margin:4px 0; display:flex;
   gap:10px; align-items:center;). */
.removedrow { font-size:12.5px; color:var(--ink2); margin:4px 0; display:flex; gap:10px; align-items:center; }

/* Aging tab (Steve 2026-10-10 vendor AP aging) — CSP-safe classes only, no inline styles. */
#panelAging h2 { font-size:12px; color:var(--ink2); text-transform:uppercase; letter-spacing:.3px; margin:16px 0 6px; }
.aging-controls { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; }
.aging-controls input[type=search] { font:inherit; padding:3px 6px; border:1px solid var(--ring); border-radius:6px; background:var(--page); color:var(--ink); }
.aging-notes div { color:var(--serious); margin:2px 0; }
#agct tr.ag-total td { font-weight:700; border-top:2px solid var(--axis); }
#agvt tr.ag-vendor td { font-weight:600; }
#agvt tr.ag-company td { color:var(--ink2); font-size:12px; }
#agvt tr.ag-company td.ag-indent { padding-left:26px; }
#agct td.ag-zero, #agvt td.ag-zero { color:var(--muted); }
#agct td.ag-late, #agvt td.ag-late { color:var(--critical); }
/* Column filters + sort (Steve 2026-10-26). */
#agvt th.ag-sort { cursor:pointer; user-select:none; }
#agvt th.ag-sort[data-dir=asc]::after { content:" ▲"; }
#agvt th.ag-sort[data-dir=desc]::after { content:" ▼"; }
#agvt tr.ag-filter-row th { padding:4px 6px; text-transform:none; letter-spacing:0; }
#agvt input.ag-min { width:90px; font:inherit; font-size:12px; text-align:right; padding:2px 4px; border:1px solid var(--ring); border-radius:4px; background:var(--page); color:var(--ink); }
#agvt input.ag-min.ag-min-bad { border-color:var(--critical); }
#agvt tfoot td { font-weight:700; border-top:2px solid var(--axis); }

/* Cash Plan tab (Steve 2026-10-10 treasury phase 1) — CSP-safe classes only, no inline styles. */
#panelCash h2 { font-size:12px; color:var(--ink2); text-transform:uppercase; letter-spacing:.3px; margin:18px 0 6px; }
.cash-controls, .cash-upload, .cash-add, .cash-settings { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; }
.cash-add input[type=text] { min-width:220px; }
.cash-add input, .cash-add select, .cash-settings input, #cpo input { font:inherit; padding:3px 6px; border:1px solid var(--ring); border-radius:6px; background:var(--page); color:var(--ink); }
.cash-notes div { color:var(--serious); margin:2px 0; }
.cash-table { font-size:12px; }
.cash-table th, .cash-table td { white-space:nowrap; padding:6px 8px; }
.cash-table tr.cash-opening td, .cash-table tr.cash-ending td { font-weight:700; }
.cash-table tr.cash-total td { font-weight:600; border-top:1px solid var(--axis); }
.cash-table tr.cash-ending td { border-top:2px solid var(--axis); }
.cash-table td.cash-neg { color:var(--critical); }
input.cash-num { width:140px; text-align:right; }
.cash-save-status { margin-left:8px; }