/* MCM House — AP Automation
   The same design system as mcm-freight-snapshot, deliberately: MCM already use
   that dashboard, and a second tool from us that looks like a different product
   is a second thing to learn. Tokens, app bar, panels, tables, chips, tabs and
   the sign-in screen are carried over unchanged. What is new is at the bottom.  */
:root{
  --page:#F1F2F1; --surface:#FFF; --head:#F6F6F5; --stripe:#FAFAF9;
  --ink:#161513; --ink2:#57564F; --ink3:#8A8A83;
  --line:#C4C7C6; --line-soft:#E1E2DF;
  --blue:#0A6ABF; --blue-d:#08508F; --blue-bg:#E7F0F9;
  --red:#B23122; --red-bg:#FAE9E6;
  --amber:#9C6100; --amber-bg:#FBF0DC;
  --green:#1E6B44; --green-bg:#E4F0E9;
  --mono:"Noto Sans Mono",ui-monospace,Menlo,monospace;
  --sans:"Noto Sans",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--sans);
  font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2{margin:0;font-weight:600;letter-spacing:-.005em}

/* ---- app bar ---- */
.appbar{background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding:0 18px;height:44px}
.brand{font-weight:700;font-size:13.5px;color:var(--blue);letter-spacing:-.01em;
  padding-right:14px;border-right:1px solid var(--line-soft);height:22px;display:flex;align-items:center}
.appbar .app{font-size:13px;font-weight:600}
.appbar .env{font-family:var(--mono);font-size:11px;color:var(--ink3);margin-left:auto}

/* ---- page head ---- */
.pagehead{background:var(--surface);border-bottom:1px solid var(--line);padding:14px 18px;
  display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
.pagehead h1{font-size:17px}
.pagehead .sub{font-size:12.5px;color:var(--ink2);margin-top:2px}
#drop{border:1px dashed var(--line);background:var(--head);padding:7px 14px;cursor:pointer;
  display:flex;align-items:center;gap:12px}
#drop:hover,#drop.hot{border-color:var(--blue);background:var(--blue-bg)}
#drop b{font-size:12.5px;font-weight:600}
#drop .stamp{font-family:var(--mono);font-size:11px;color:var(--ink3);
  padding-left:12px;border-left:1px solid var(--line-soft)}

.body{padding:14px 18px 40px;display:flex;flex-direction:column;gap:12px}

/* ---- kpi strip ---- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  border:1px solid var(--line);background:var(--line-soft);gap:1px}
.kpi{background:var(--surface);padding:10px 14px}
.kpi .k{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.kpi .n{font-family:var(--mono);font-size:25px;font-weight:600;line-height:1.15;margin-top:3px}
.kpi .s{font-size:11.5px;color:var(--ink2)}
.kpi.on{box-shadow:inset 3px 0 0 var(--red)} .kpi.on .n{color:var(--red)}
.kpi.on.w{box-shadow:inset 3px 0 0 var(--amber)} .kpi.on.w .n{color:var(--amber)}
.kpi.g .n{color:var(--green)}

/* ---- toolbar ---- */
.toolbar{background:var(--surface);border:1px solid var(--line);padding:7px 12px;
  display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.toolbar .lb{font-size:11px;font-weight:600;color:var(--ink2);text-transform:uppercase;letter-spacing:.05em}
select,input[type=search]{font-family:var(--sans);font-size:12.5px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);padding:4px 7px;height:27px}
input[type=search]{min-width:170px}
select:focus-visible,input:focus-visible,button:focus-visible,#drop:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.btn{font-family:var(--sans);font-size:12px;font-weight:600;padding:4px 11px;height:27px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.btn:hover{background:var(--head)}
.cnt{font-family:var(--mono);font-size:11.5px;color:var(--ink2);margin-left:auto}

/* ---- panels ---- */
.panel{background:var(--surface);border:1px solid var(--line)}
.panel.ok{border-left:4px solid var(--green)}
.panel.ok .ptitle{background:var(--green-bg);border-bottom-color:#B6D6C4}
.panel.ok .ptitle h2{color:var(--green)}
.panel.ok .ptitle .note,.panel.ok .ptitle .cnt{color:#3D7A5A}
.panel.ok tbody td.po{color:var(--green)}
.ptitle{background:var(--head);border-bottom:1px solid var(--line);padding:7px 12px;
  display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
.ptitle h2{font-size:12.5px;text-transform:uppercase;letter-spacing:.05em}
.ptitle .note{font-size:11.5px;color:var(--ink2)}
/* Scrolls in both directions, with a ceiling. Two reasons it is capped:
   the sticky headers below need a scroll container to stick inside, and a 49-row
   table that scrolls within itself keeps the page short instead of pushing
   everything below it out of reach. Shorter tables are unaffected — max-height
   only bites once the content passes it. */
.scroll{overflow:auto;max-height:70vh}
/* separate, not collapse. A collapsed border belongs to the table rather than to
   the cell, and Chrome and Safari have never positioned a sticky th correctly
   inside one — the heading simply scrolls away. With separate borders each cell
   owns its own edge, so the heading sticks and its rule travels with it. Only
   bottom edges are set, so nothing doubles up. */
table{border-collapse:separate;border-spacing:0;width:100%}
th,td{padding:6px 12px;text-align:left;border-bottom:1px solid var(--line-soft);white-space:nowrap}
thead th{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2);
  background:var(--head);
  /* Stays put while the rows scroll under it. The rule must be inset box-shadow,
     not border-bottom: with border-collapse the collapsed border belongs to the
     table rather than the cell, and scrolls away with it. */
  position:sticky;top:0;z-index:2;box-shadow:inset 0 -1px 0 var(--line)}
tbody td{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums}
tbody td.tx{font-family:var(--sans);font-size:12.5px}
tbody td.po{font-weight:600}
tbody tr.r:hover>td{background:var(--stripe)}
tbody tr:last-child>td{border-bottom:0}
td .miss{color:var(--red);font-weight:600}
td .was{color:var(--ink3);text-decoration:line-through;margin-right:5px}
td .now{color:var(--amber);font-weight:600}

/* ---- chips ---- */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;
  padding:2px 7px;border:1px solid;white-space:nowrap;font-family:var(--sans)}
.chip.good{background:var(--green-bg);color:var(--green);border-color:#B6D6C4}
.chip.warn{background:var(--amber-bg);color:var(--amber);border-color:#E4CB9C}
.chip.crit{background:var(--red-bg);color:var(--red);border-color:#E4B6AE}
.chip.demo{background:var(--head);color:var(--ink3);border-color:var(--line);font-weight:500}
.chips{display:flex;gap:4px;flex-wrap:wrap}

/* ---- action blocks ---- */
.zone{display:flex;flex-direction:column;gap:10px}
.zlabel{display:flex;align-items:baseline;gap:10px;padding:2px 1px}
.zlabel h2{font-size:12.5px;text-transform:uppercase;letter-spacing:.05em}
.zlabel .note{font-size:11.5px;color:var(--ink2)}
.zlabel .n{font-family:var(--mono);font-size:12px;color:var(--ink2);margin-left:auto}

.po{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--line)}
.po.crit{border-left-color:var(--red)}
.po.warn{border-left-color:var(--amber)}
.pohead{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;
  padding:9px 14px;background:var(--head);border-bottom:1px solid var(--line-soft)}
.pohead .num{font-family:var(--mono);font-size:14px;font-weight:600}
.pohead .sup{font-size:12.5px;color:var(--ink2)}
.pohead .right{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--ink3);
  display:flex;gap:14px;flex-wrap:wrap}

.empty{padding:20px 14px;text-align:center;color:var(--ink2);font-size:12.5px}
.empty b{display:block;font-size:13px;color:var(--ink);margin-bottom:3px;font-weight:600}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:11.5px;color:var(--ink2);align-items:center;
  padding:2px 1px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- added for the hosted version ---- */
.userbar{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:12px;color:var(--ink2)}
.userbar form{margin:0}
.banner{background:var(--amber-bg);border:1px solid #E4CB9C;color:var(--amber);
  padding:8px 14px;font-size:12.5px;display:flex;gap:10px;align-items:center}
.banner.err{background:var(--red-bg);border-color:#E4B6AE;color:var(--red)}
.banner b{font-weight:600}
.addnote{display:flex;gap:6px;margin-top:9px}
.addnote input{flex:1;font-family:var(--sans);font-size:12.5px;padding:5px 8px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.spin{font-family:var(--mono);font-size:11.5px;color:var(--ink3)}

/* ---- signed out ---- */
/* The shell is served to anyone; it is what renders this screen. Everything that
   needs a session is hidden until there is one. */
body.signedout .pagehead,
body.signedout .body{display:none}
#signin:empty{display:none}
#signin{padding:14px 18px}
.panel.signin{max-width:440px}
.panel.signin .sbody{padding:14px 12px;display:flex;flex-direction:column;
  align-items:flex-start;gap:12px}
.panel.signin p{margin:0;font-size:12.5px;color:var(--ink2)}
.btn.primary{background:var(--blue);border-color:var(--blue-d);color:#FFF}
.btn.primary:hover{background:var(--blue-d)}
/* Two banners can stack — the standing no-auth warning and whatever else is
   happening today. */
#banner{display:flex;flex-direction:column;gap:8px}
#banner:empty{display:none}

/* ---- PO identity: order date, and the link back to the record ---- */
.pohead .pdate{font-family:var(--mono);font-size:11px;color:var(--ink3);
  padding-left:12px;border-left:1px solid var(--line-soft)}
/* Links stay the PO number's own type — underlined on hover only, so a dense
   table of them does not turn into a wall of blue. */
a.nslink{color:var(--blue);text-decoration:none}
a.nslink:hover{text-decoration:underline}
.pohead a.nslink{font-family:var(--mono);font-size:14px;font-weight:600}
td a.nslink{font-family:var(--mono)}
/* Quiet statement of what is deliberately not on the board. */
.held{font-size:12px;color:var(--ink3)}
.held:empty{display:none}

/* ---- tabs ---- */
.tabs{display:flex;align-items:center;gap:0;border-bottom:1px solid var(--line)}
.tab{font-family:var(--sans);font-size:12.5px;font-weight:600;padding:7px 14px;
  border:1px solid transparent;border-bottom:none;background:none;color:var(--ink2);cursor:pointer}
.tab:hover{color:var(--ink)}
.tab.on{background:var(--surface);border-color:var(--line);color:var(--ink);
  margin-bottom:-1px;padding-bottom:8px}

/* ---- tab counts and sort buttons ---- */
.tab .tn{font-family:var(--mono);font-size:10.5px;color:var(--ink3);
  border:1px solid var(--line-soft);background:var(--head);padding:0 4px;margin-left:5px}
.tab .tn:empty{display:none}
.tab.on .tn{background:var(--blue-bg);border-color:#BBD4EC;color:var(--blue-d)}
.sorts{display:inline-flex;border:1px solid var(--line)}
.sb{font-family:var(--sans);font-size:11.5px;font-weight:500;padding:3px 9px;height:25px;
  border:none;border-right:1px solid var(--line);background:var(--surface);color:var(--ink2);cursor:pointer}
.sb:last-child{border-right:none}
.sb:hover{background:var(--head);color:var(--ink)}
.sb.on{background:var(--blue-bg);color:var(--blue-d);font-weight:600}

/* ---- sortable table headings ---- */
/* No position here. This selector is more specific than `thead th`, so setting
   position:relative for the caret quietly overrode the sticky heading and it
   scrolled away. Sticky is itself a positioned element, so the absolutely
   positioned caret below anchors to it just as well. */
table.sortable thead th[data-k]{cursor:pointer;user-select:none;
  padding-right:15px;white-space:nowrap}
table.sortable thead th[data-k]:hover{color:var(--ink);background:var(--line-soft)}
/* The caret only appears on the sorted column: a row of arrows on every heading
   makes it harder to see which one is actually in force. */
table.sortable thead th.sorted{color:var(--blue-d)}
table.sortable thead th.sorted::after{content:"▲";position:absolute;right:5px;
  font-size:8px;line-height:1;top:50%;transform:translateY(-50%)}
table.sortable thead th.sorted.desc::after{content:"▼"}

/* Remove a note. Deliberately quiet — it only appears on your own notes, and
   deleting chase history should never be the easiest thing on the row. */
.cmt .del{border:none;background:none;color:var(--ink3);cursor:pointer;font-size:14px;
  line-height:1;padding:0 3px;margin-left:6px}
.cmt .del:hover{color:var(--red)}
.cmt .del:disabled{opacity:.4;cursor:default}


/* ---- queue rows ---- */
/* A queue item is a document plus what we know about it, so it reads like the
   PO blocks on the freight board rather than a table row: the name is the thing
   people recognise, and the coding sits under it. */
.qitem{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--line)}
.qitem.pending{border-left-color:var(--amber)}
.qitem.in_review{border-left-color:var(--blue)}
.qitem.held{border-left-color:var(--red)}
.qitem.billed{border-left-color:var(--green)}
.qitem.rejected{border-left-color:var(--ink3)}
.qhead{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;
  padding:9px 14px;background:var(--head);border-bottom:1px solid var(--line-soft)}
.qhead .num{font-family:var(--mono);font-size:13px;font-weight:600;overflow-wrap:anywhere}
.qhead .sup{font-size:12.5px;color:var(--ink2)}
.qhead .right{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--ink3);
  display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.qbody{padding:10px 14px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:flex-start}
.qbody .field{min-width:150px}
.qbody .field .k{font-size:10px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink3)}
.qbody .field .v{font-size:12.5px;margin-top:2px}

/* ---- where an answer came from ---- */
/* Section 6: nothing silently overrides anything further down the chain. This is
   how that promise is kept on screen — every resolved account and approver
   carries the step that decided it, in the same place every time. */
.src{display:inline-flex;align-items:center;font-size:10px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;padding:1px 5px;border:1px solid var(--line-soft);
  background:var(--head);color:var(--ink2)}
.src.line_rule,.src.vendor_override,.src.reassign,.src.delegation{
  background:var(--blue-bg);border-color:#BBD4EC;color:var(--blue-d)}
.src.manual,.src.accounts_queue{background:var(--amber-bg);border-color:#E4CB9C;color:var(--amber)}
.why{font-size:11.5px;color:var(--ink2);margin-top:3px;max-width:60ch}

/* ---- the config tab ---- */
.grid2{display:flex;flex-wrap:wrap;gap:12px}
.grid2>.panel{flex:1 1 420px;min-width:0}
.form{padding:10px 12px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.form input,.form select{font-family:var(--sans);font-size:12.5px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);padding:4px 7px;height:27px}
.form input[type=text]{min-width:130px}
.form .wide{flex:1 1 160px;min-width:0}
/* Destructive, and never the easiest thing on the row. */
.rm{border:none;background:none;color:var(--ink3);cursor:pointer;font-size:14px;line-height:1;padding:0 3px}
.rm:hover{color:var(--red)}

/* ---- the document viewer ---- */
.doc{width:100%;height:70vh;border:1px solid var(--line);background:var(--surface)}
.docnote{font-size:11.5px;color:var(--ink3);padding:5px 1px}