/*
  The supplier network — decisions 0717 and 0725. The page is the
  application's own (tokens.css, app.css); this adds only what the network
  has and the application does not.
*/
[hidden] { display: none !important; }

/* Sign in and accepting an invitation: the app's sign-in page. */
main#welcome .field + .field { margin-top: var(--gap-loose); }

/* Documents (0725): a row opens the invoice. */
.netlist tbody tr { cursor: pointer; }
.netlist tbody tr:hover td { background: var(--surface-2); }
.netlist td.nowrap { white-space: nowrap; }
.empty { padding: 24px; text-align: center; color: var(--text-muted); }
.notice { background: var(--severity-warning-bg); color: var(--severity-warning-text); border: 0.5px solid var(--border-warning); border-radius: var(--radius); padding: 8px 12px; font-size: var(--text-sm); margin-bottom: 14px; }
.linkbutton { background: none; border: 0; padding: 0; min-height: 0; color: var(--text-accent); text-decoration: underline; font: inherit; cursor: pointer; }

/*
 * **Status as the application's pill — decision 0736.** A light tint, a
 * fine edge of the same colour and the colour in the text, as the app's
 * Documents (0520): received and in review neutral, query raised amber,
 * returned accent, approved / sent for payment / paid green, rejected light
 * red, credited an outline.
 */
.status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: var(--text-sm); line-height: 1.5; white-space: nowrap; background: var(--surface-1); color: var(--text-secondary); border: 0.5px solid var(--border-strong); }
.status.in_review { color: var(--text-accent); }
.status.approved, .status.sent_for_payment, .status.paid { background: var(--bg-success); border-color: var(--border-success); color: var(--text-success); font-weight: 600; }
.status.query_raised { background: var(--bg-warning); border-color: var(--border-warning); color: var(--text-warning); font-weight: 600; }
.status.returned { background: var(--bg-accent); border-color: var(--border-accent); color: var(--text-accent); font-weight: 600; }
.status.rejected { background: var(--bg-danger); border-color: var(--border-danger); color: var(--text-danger); font-weight: 600; }
/* Decision 0731: a credit note credited it. */
.status.credited { background: transparent; color: var(--text-secondary); border-color: var(--border-strong); }
/* Decision 0738: a goods receipt's — received green, part returned accent, being checked neutral. */
.status.goods_received { background: var(--bg-success); border-color: var(--border-success); color: var(--text-success); font-weight: 600; }
.status.goods_returned { background: var(--bg-accent); border-color: var(--border-accent); color: var(--text-accent); font-weight: 600; }
/* Decision 0751: a purchase order's. Open neutral; received and invoiced in step, green once done; on hold amber; closed quiet. */
.status.order_part_received, .status.order_part_invoiced { background: var(--bg-accent); border-color: var(--border-accent); color: var(--text-accent); font-weight: 600; }
.status.order_received, .status.order_invoiced { background: var(--bg-success); border-color: var(--border-success); color: var(--text-success); font-weight: 600; }
.status.order_on_hold { background: var(--bg-warning); border-color: var(--border-warning); color: var(--text-warning); font-weight: 600; }
.status.order_closed { opacity: 0.7; }
/* Decision 0762: the supplier confirmed it has the order. */
.status.order_confirmed { background: var(--bg-success); border-color: var(--border-success); color: var(--text-success); font-weight: 600; }
#net-confirm-problem:empty { display: none; }
/* The confirm page (0762): its button below what it says. */
main#confirm button { margin-top: var(--gap-loose); }
main#confirm #confirm-more { margin-top: 0; }
main#confirm #confirm-problem:empty { display: none; }

/* An invoice, opened (0717). */
.popout .head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.popout .head h2 { margin: 0; font-size: var(--text-lg); }
.popout .head > button { margin-left: auto; }
/* Dan: the comment on a returned or rejected invoice in Day's light red, in Night too (0728). */
.comment { border-left: 3px solid var(--border-danger); padding: 8px 12px; background: var(--severity-danger-bg); color: var(--severity-danger-text); margin: 12px 0; }

/* The conversation with a customer — decision 0721. */
.conversation h3 { font-size: var(--text-base); margin: 0 0 6px; }
.msg { border: 0.5px solid var(--border); border-radius: 10px; padding: 9px 12px; font-size: var(--text-sm); flex: 1 1 auto; min-width: 0; }
/*
  Decision 0723: as the application's Timeline / Chat (0675), the messages keep Day's light
  colours in Night too. Theirs light blue with a blue edge, yours a fuller blue, on the right.
*/
.msg {
  --surface-2: #ffffff;
  --text-primary: #121a26;
  --text-muted: #7b8798;
  --bg-accent: #e6f1fb;
  --border-accent: #378add;
  color: var(--text-primary);
  border-color: var(--border-accent);
}
.msg.them { background: color-mix(in srgb, var(--bg-accent) 35%, var(--surface-2)); }
.msg.us { background: var(--bg-accent); }
/*
  Decision 0788: each message beside its writer's initials in a circle, as the application's
  Timeline / Chat (0675). Theirs on the left, yours on the right.
*/
.msgrow { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; }
.msgrow.them { margin-right: 40px; }
.msgrow.us { margin-left: 40px; }
.msgavatar {
  width: 26px; height: 26px; border-radius: 999px; background: var(--bg-accent); color: var(--text-accent);
  display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); font-weight: 600;
  flex: 0 0 auto; margin-top: 4px;
}
.msg .muted { color: var(--text-muted); }
.msg .msgbody { white-space: pre-line; }
/*
  Decision 0788: `.msgwho`, not `.who`. The shared stylesheet hides `.frame.collapsed .who` (the
  menu's signed-in line), which hid every message's name and time while the menu was folded.
*/
.msg .msgwho { font-weight: 700; display: flex; justify-content: space-between; gap: 10px; }
/* Decision 0764: what happened, as a dated line among the messages. */
.sysnote { display: flex; align-items: center; gap: 10px; margin: 12px 0; font-size: var(--text-sm); color: var(--text-muted); text-align: center; }
.sysnote::before, .sysnote::after { content: ""; flex: 1 1 24px; border-top: 0.5px solid var(--border); }
.sysnote .sysnotewhen { white-space: nowrap; }
.reply textarea { width: 100%; min-height: 80px; font: inherit; font-size: var(--text-sm); padding: 8px 10px; border-radius: var(--radius); border: 0.5px solid var(--border-strong); background: var(--surface-1); color: var(--text-primary); resize: vertical; box-sizing: border-box; }
.replybar { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 10px; }
.replybar .problem { margin: 0; }

/* Help (0723), a panel on the right. */
.helppanel { position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 100%); overflow-y: auto; z-index: 20; background: var(--surface-1); border-left: 0.5px solid var(--border); box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18); padding: 16px 22px 28px; font-size: var(--text-sm); box-sizing: border-box; }
.helppanel .helphead { display: flex; align-items: center; justify-content: space-between; }
.helppanel h2 { font-size: var(--text-lg); margin: 0; }
.helppanel h3 { font-size: var(--text-base); margin: 18px 0 6px; }
.helppanel p { color: var(--text-secondary); margin: 6px 0; }
.helpstatuses { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: baseline; margin: 0; }
.helpstatuses dd { margin: 0; color: var(--text-secondary); }

@media (max-width: 640px) { .hide-narrow { display: none; } }

/* Create an invoice — decision 0727, laid out as the app's invoice viewer. */
/* Dan: the three cards the same height (0727). */
.netcreate .row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.netcreate .panel { margin-bottom: 16px; }
.netcreate .row3 .panel { margin-bottom: 0; }
.netcreate .row3 { margin-bottom: 16px; }
.netcreate .cardhead select { width: auto; min-height: 30px; padding: 3px 8px; font-size: var(--text-sm); }
.netcreate .note { font-size: var(--text-sm); color: var(--text-muted); margin: 10px 0 0; }
.netcreate .kf input, .netcreate .kf select { width: 100%; box-sizing: border-box; }
.bisbadge { display: inline-block; margin-left: 10px; vertical-align: middle; font-size: var(--text-sm); font-weight: 500; padding: 2px 9px; border-radius: 10px; background: var(--bg-accent); color: var(--text-accent); border: 0.5px solid var(--border-accent); }
.netlines { table-layout: fixed; width: 100%; }
.netlines input, .netlines select { width: 100%; box-sizing: border-box; min-height: 32px; padding: 4px 8px; font-size: var(--text-sm); }
.netlines input.num { text-align: right; }
/* Dan: a field to put right in Day's light colours in Night too, as the app's own (.kf.danger), not deep red. */
.netlines td.danger input, .netlines td.danger select { border-color: var(--border-danger); background: var(--severity-danger-bg); color: var(--severity-value-text); }
.netvat { display: flex; gap: 4px; align-items: center; }
.netvat select { flex: 1 1 auto; }
.netvat .netrate { width: 52px; flex: 0 0 52px; }
.netfoot { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-top: 10px; }
.nettotals { width: 320px; font-size: var(--text-sm); }
.nettotals div { display: flex; justify-content: space-between; padding: 3px 0; }
.nettotals .grand { font-weight: 700; border-top: 0.5px solid var(--border); margin-top: 4px; padding-top: 6px; font-size: var(--text-base); }
.netcheck { border-radius: var(--radius); padding: 10px 14px; font-size: var(--text-sm); }
.netcheck.good { background: var(--severity-ok-bg); border: 0.5px solid var(--border-success); color: var(--severity-ok-text); }
.netcheck.bad { background: var(--severity-danger-bg); border: 0.5px solid var(--border-danger); color: var(--severity-danger-text); }
.netcheck ul { margin: 6px 0 0; padding-left: 18px; }
.netbuttons { display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; }
/* Decision 0779: in the header card's top right, beside its title. */
.cardhead .netbuttons { margin-top: 0; flex-wrap: wrap; }
.netcreate .panel > .problem:empty { display: none; }
.netbuttons .primary { border: 0.5px solid var(--border-accent); color: var(--text-accent); }
.netbuttons button:disabled { opacity: 0.45; cursor: default; }
.sentnotice { background: var(--severity-ok-bg); border: 0.5px solid var(--border-success); color: var(--severity-ok-text); border-radius: var(--radius); padding: 10px 14px; font-size: var(--text-sm); margin-bottom: 14px; }
.popout.netpos { width: min(640px, 100%); }
.popout.netpos table { width: 100%; }
.popout.netpos tbody tr { cursor: pointer; }
.popout.netpos tbody tr:hover td { background: var(--surface-2); }
/* Decision 0778: which invoice a credit note credits. */
.popout.netpos.cnpick { width: min(760px, 100%); }
.cnpick .cnpicksub { margin: 2px 0 0; }
.cnpick .cnsearch { width: 100%; box-sizing: border-box; margin: 4px 0 10px; min-height: 38px; }
.cnpick th { text-align: left; font-weight: 500; font-size: var(--text-sm); color: var(--text-secondary); padding: 6px 8px; border-bottom: 0.5px solid var(--border); }
.cnpick td { padding: 9px 8px; border-bottom: 0.5px solid var(--border); }
.cnpick .num { text-align: right; }
.cnpick .cnpicknote { margin: 12px 0 0; }
@media (max-width: 1000px) { .netcreate .row3 { grid-template-columns: 1fr; } .netfoot { flex-direction: column; align-items: stretch; } .nettotals { width: auto; } }

/* Messages on an invoice, and the rows waiting on a reply — decision 0728. */
.msgpill { display: inline-block; min-width: 22px; padding: 2px 9px; border-radius: 999px; font-size: var(--text-sm); line-height: 1.5; text-align: center; background: var(--surface-1); color: var(--text-secondary); border: 0.5px solid var(--border); white-space: nowrap; }
/* Decision 0736: as the status pills, the app's light tint. */
.msgpill.new { background: var(--bg-warning); color: var(--text-warning); font-weight: 700; border-color: var(--border-warning); }
.netlist tr.hasnew td { font-weight: 600; }
.netlist tr.hasnew td:first-child { box-shadow: inset 3px 0 0 var(--border-warning); }

/* Dan: every Invoice header field the same height on Create (0727). */
.netcreate .headersummary .kf input,
.netcreate .headersummary .kf select,
.netcreate .headersummary .kf .readonly { height: 42px; min-height: 42px; box-sizing: border-box; }
.netcreate .headersummary .kf .readonly { display: flex; align-items: center; padding-top: 0; padding-bottom: 0; }
.netcreate .headersummary .kf label { min-height: 18px; }

/*
 * An invoice, opened full screen — decision 0729. Create's cards and
 * header on the left; the messages on the right, ending with the header
 * (contain: size leaves the row's height to the cards, and the feed
 * scrolls); the lines below, across the page.
 */
.netview { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: stretch; margin-bottom: 16px; }
.netview .netviewmain > .comment:first-child { margin-top: 0; }
.netview .netviewheader { margin-bottom: 0; }
.netview .netviewchat { display: flex; flex-direction: column; margin: 0; min-height: 0; contain: size; }
.netviewchat .chatfeed { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.netviewchat .msgrow.them { margin-right: 24px; }
.netviewchat .msgrow.us { margin-left: 24px; }
.netviewchat .reply { margin-top: 8px; }
.netinvoiceview .topbar h2 .status { margin-left: 10px; vertical-align: middle; font-size: var(--text-sm); }
.netviewlines table { width: 100%; }
/* Decision 0784: a receipt line with anything rejected or returned, tinted as on its PDF (0773). */
.receiptlines tr.rcpwarn td { background: color-mix(in srgb, var(--bg-warning) 45%, transparent); }
/* An order's page splits 3:2, as the buyer's invoice viewer does, now its
   right side holds the order's Document — decision 0760. */
@media (min-width: 1001px) {
  .netorderview .netview, .netview.netwide { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
@media (max-width: 1000px) {
  .netview { grid-template-columns: 1fr; }
  .netview .netviewchat { contain: none; }
  .netviewchat .chatfeed { max-height: 420px; }
}

/* A credit note in Create — decision 0732. */
.netcreate .cnpanel .cnrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.netcreate .cnpanel .cnrow.cnwhy { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); margin-top: 12px; }
.netcreate .cnpanel .kf .readonly { height: 42px; min-height: 42px; box-sizing: border-box; display: flex; align-items: center; }
.netcreate .cnpanel select { width: 100%; height: 42px; }
.netcreate .cnpanel textarea { width: 100%; box-sizing: border-box; height: 42px; min-height: 42px; resize: vertical; font: inherit; font-size: var(--text-sm); padding: 9px 10px; border-radius: var(--radius); border: 0.5px solid var(--border-strong); background: var(--surface-1); color: var(--text-primary); }
.netlines.cnlines th.chk, .netlines.cnlines td.chk { width: 56px; text-align: center; }
.netlines.cnlines td.chk input { width: 16px; height: 16px; }
.netlines.cnlines tr.off td:not(.chk) { opacity: 0.45; }
@media (max-width: 1000px) { .netcreate .cnpanel .cnrow, .netcreate .cnpanel .cnrow.cnwhy { grid-template-columns: 1fr; } }
/* Documents: a credit note's type and amount (0732). */
.netlist .doctype.cn { color: var(--text-accent); font-weight: 600; }
.netlist .doctype.gr { color: var(--text-accent); font-weight: 600; }
.netlist .doctype.po { color: var(--text-success); font-weight: 600; }
/* A goods receipt, opened (0738). */
.netreceiptview .receiptgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.netreceiptview .receiptgrid .sfield { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.netreceiptview > p.muted { margin: 0 0 12px; }
.netreceiptview .receiptlines { table-layout: auto; }
.netreceiptview .receiptlines th { white-space: nowrap; }
@media (max-width: 900px) { .netreceiptview .receiptgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Documents: pages and columns, as the app's (0736). */
.netlist-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.netlist-controls select { width: auto; min-height: 34px; padding: 4px 8px; }
.netlist-controls .iconbutton svg { width: 16px; height: 16px; }
.netlist-controls .range { white-space: nowrap; font-size: var(--text-sm); color: var(--text-muted); min-width: 7em; text-align: center; }
.netlist-capped { font-size: var(--text-sm); color: var(--text-muted); margin-top: 8px; }
.columnpicker summary svg { width: 16px; height: 16px; }

/* Decision 0760: an order's Messages and Document, as tabs on the right. */
.netsidetabs .receipttabs { align-self: flex-start; margin-bottom: 10px; flex: none; }
.netsidetabs .netsidepane { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.netsidetabs .netsidepane[hidden] { display: none; }
/* Decision 0763: the order's downloads, listed as the application lists files; the row is not a link, its Download is. */
#net-attachments .attachpick { cursor: default; }
#net-attachments .attachpick:hover .attachname { text-decoration: none; }
#net-attachments .attachrow a.actionlink { text-decoration: none; }
#net-attachments .attachrow button.actionlink { flex-direction: row; }

/* Decision 1038: remittance advices among the documents, and on the invoices they paid. */
.netlist .doctype.ra { color: var(--text-success); font-weight: 600; }
.status.remittance_sent { background: var(--bg-success); border-color: var(--border-success); color: var(--text-success); font-weight: 600; }
.status.remittance_withdrawn { background: transparent; color: var(--text-secondary); border-color: var(--border-strong); }
.netremittance { margin-bottom: 14px; font-size: var(--text-sm); }