/* SupplyRP · Team 2's pages (indents, collation; later dispatch, invoices, issue, GST). Loads after scm.css and uses its
 * tokens only (the Parkmed look, no teal). Everything sits under .scm and starts with t2-. Long lists: dense rows, phone
 * first, the confirm bar in view. */

/* where a line is: a segmented progress bar, one segment per step, grouped by phase (collate · from stock or buy ·
 * deliver); done, now (ringed), to come; under it the current state with "3 of 11" and its newest document */
.scm .t2-prog { display: flex; gap: 6px; align-items: center; padding: 3px 0; }
.scm .t2-ph { display: flex; gap: 2px; flex: 0 0 auto; }
.scm .t2-ph i { display: block; width: 16px; height: 8px; border-radius: 2px; background: var(--line); flex: 0 0 auto; }
.scm .t2-ph-b i { width: 12px; }   /* the purchase has five steps: narrower, never thinner than this */
.scm .t2-ph i.t2-sd { background: var(--accent); opacity: .45; }
.scm .t2-ph i.t2-sn { background: var(--accent); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent); }
.scm .t2-ph i.t2-sw { background: var(--warn); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--warn); }
.scm .t2-cur { margin-top: 5px; font-size: 13px; line-height: 1.35; color: var(--ink); }
.scm .t2-cur small, .scm table.grid td .t2-cur small { display: inline; color: var(--muted); font-variant-numeric: tabular-nums; }
.scm .t2-docs { color: var(--muted); }

/* who acts next: a short role chip, then the action */
.scm .t2-who { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 700; letter-spacing: .01em;
  border: 1px solid var(--line-strong); color: var(--ink); background: var(--surface); white-space: nowrap; }
.scm .t2-who-buying { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.scm .t2-who-accounts { border-color: var(--ok); color: var(--ok); background: var(--ok-soft); }
.scm .t2-who-coo-or-ceo { border-color: var(--warn); color: var(--warn); background: var(--warn-soft); }
.scm .t2-act { font-size: 13px; color: var(--ink); }

/* the indent's summary: where every line is, as one stacked bar and its legend */
.scm .t2-flow { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; max-width: 520px; background: var(--surface); }
.scm .t2-fb1 { background: var(--line-strong); }   /* to decide */
.scm .t2-fb2 { background: var(--accent); opacity: .55; }   /* from stock */
.scm .t2-fb3 { background: var(--accent); }        /* being bought */
.scm .t2-fb4 { background: var(--ink); }           /* on its way */
.scm .t2-fb5 { background: var(--ok); }            /* closed */
.scm .t2-fb6 { background: var(--warn); }          /* short */
.scm .t2-fb7 { background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn); }   /* bounced */
.scm .t2-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.scm .t2-lg { display: inline-flex; align-items: center; gap: 5px; }
.scm .t2-lg b { color: var(--ink); font-variant-numeric: tabular-nums; }
.scm .t2-lg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }

/* collation: an item's group row, then its indent lines with the decision inputs */
.scm .t2-cgrid tr.t2-grp td { background: var(--sunk); font-weight: 600; color: var(--ink); padding-top: 10px; border-top: 1px solid var(--line-strong); }
.scm .t2-free { margin-left: 10px; font-weight: 600; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.scm .t2-q { width: 76px; height: 36px; padding: 0 8px; text-align: right; font-variant-numeric: tabular-nums;
  border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: 14px var(--font-ui); }
.scm .t2-q:not(:placeholder-shown) { border-color: var(--line-strong); }
.scm .t2-collate select, .scm .t2-note { height: 36px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface);
  color: var(--ink); font: 13px var(--font-ui); max-width: 100%; }
.scm .t2-note { width: 160px; padding: 0 6px; }
.scm .t2-why { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin-top: 4px; }
.scm .t2-why select { width: 180px; }
.scm .t2-store { display: inline-flex; align-items: center; gap: 6px; }
.scm .t2-store span { font-size: 12px; color: var(--muted); font-weight: 600; }

/* the bar with the count and the one action stays in view at the bottom of a long list */
.scm .t2-bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.scm .t2-bar > span { color: var(--muted); font-size: 13px; }

@media (max-width: 720px) {
  /* an indent's lines on a phone: item and asked on top, the bar and state, then who acts next, without column labels */
  .scm table.grid.gstack.t2-lines td[data-th]::before { display: none; }
  .scm table.grid.gstack.t2-lines td.g-kr small { display: block; }
  .scm .t2-q { width: 64px; font-size: 15px; }            /* 15px+ keeps iOS from zooming on focus */
  .scm .t2-note { width: 100%; margin: 4px 0 0; }
  .scm .t2-free { display: block; margin: 2px 0 0; }
  .scm .t2-why select, .scm .t2-note { width: 100%; }
  .scm .t2-bar .btn { flex: 1 1 100%; }
}

/* an invoice's totals, right under its lines */
.scm .t2-tot { display: grid; grid-template-columns: auto minmax(120px, auto); gap: 4px 24px; justify-content: end; margin: 12px 0 4px; font-variant-numeric: tabular-nums; }
.scm .t2-tot span { color: var(--muted); text-align: right; }
.scm .t2-tot b { text-align: right; font-weight: 600; }
.scm .t2-tot .t2-pt { color: var(--ink); font-size: 16px; font-weight: 700; padding-top: 6px; border-top: 1px solid var(--line-strong); }

/* the print view: laid out as the tax invoice; printing shows only it */
.scm .t2-print { max-width: 880px; padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }
.scm .t2-ph-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--accent); padding-bottom: 8px; }
.scm .t2-ph-head h2 { margin: 0; font-size: 24px; }
.scm .t2-ph-head div { text-align: right; } .scm .t2-ph-head b { color: var(--accent); font-size: 15px; } .scm .t2-ph-head small { display: block; color: var(--muted); }
.scm .t2-draftband { background: var(--warn-soft); color: var(--warn); font-weight: 700; padding: 6px 10px; border-radius: 6px; margin: 10px 0 0; }
.scm .t2-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 14px 0; }
.scm .t2-parties section { display: flex; flex-direction: column; gap: 2px; } .scm .t2-parties small { color: var(--muted); font-weight: 700; letter-spacing: .04em; }
.scm .t2-parties span { color: var(--ink); }
.scm .t2-refs { border-top: 1px solid var(--line); padding-top: 8px; }
.scm .t2-ptable { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.scm .t2-ptable th { text-align: left; background: var(--sunk); color: var(--muted); font-weight: 600; padding: 5px 6px; }
.scm .t2-ptable td { padding: 5px 6px; border-bottom: 1px solid var(--line); vertical-align: top; } .scm .t2-ptable td small { display: block; color: var(--muted); }
.scm .t2-ptable .r { text-align: right; }
.scm .t2-ptotals { display: grid; grid-template-columns: auto 140px; gap: 3px 20px; justify-content: end; margin-top: 10px; font-variant-numeric: tabular-nums; }
.scm .t2-ptotals span { text-align: right; color: var(--muted); } .scm .t2-ptotals b { text-align: right; }
.scm .t2-ptotals .t2-pt { color: var(--ink); font-size: 16px; border-top: 2px solid var(--accent); padding-top: 4px; }
.scm .t2-words { font-weight: 700; margin-top: 12px; }
@media print {
  body * { visibility: hidden; }
  .scm .t2-print, .scm .t2-print * { visibility: visible; }
  .scm .t2-print { position: absolute; left: 0; top: 0; border: 0; max-width: none; width: 100%; }
}
@media (max-width: 720px) { .scm .t2-parties { grid-template-columns: 1fr; } .scm .t2-print { padding: 12px; } .scm .t2-ptable { font-size: 11px; } }
/* T2.5-08: the client's order on an invoice */
.scm .t2-order { align-items: flex-end; flex-wrap: wrap; }
.scm .t2-order select { min-width: 260px; }
.scm .t2-order small { flex-basis: 100%; }
.scm td.t2-ol select { max-width: 220px; width: 100%; }
.scm td.t2-ol { min-width: 160px; }
@media (max-width: 720px) { .scm .t2-order select, .scm td.t2-ol select { min-width: 0; max-width: none; width: 100%; } }
/* T2.5-10: the pick list's keyed confirm and the second check */
.scm .t2-key { width: 84px; text-transform: uppercase; font-family: var(--mono, ui-monospace, monospace); }
.scm td.t2-act { white-space: nowrap; }
.scm td.t2-act input + input, .scm td.t2-act input + .btn { margin-left: 4px; }
.scm .t2-wait { color: var(--warn); font-weight: 600; }
.scm .t2-ha { color: var(--bad); letter-spacing: .04em; }
.scm .t2-inline { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; }
.scm .t2-inline input { width: 120px; }
@media (max-width: 720px) {
  .scm td.t2-act { white-space: normal; }
  .scm td.t2-act input { width: calc(50% - 4px); min-height: 44px; font-size: 16px; margin: 0 0 6px 0; }
  .scm td.t2-act .btn { width: 100%; min-height: 44px; }
}
.scm small.t2-part { white-space: normal; }
.scm .t2-keys { display: flex; flex-wrap: wrap; gap: 4px; }
.scm .t2-key::placeholder { text-transform: none; }

/* T2.5-14 GST registers: the month by GSTR-1 table, and a totals row under each register */
.scm .t2-gst-sum { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 14px; }
.scm .t2-gst-k { display: flex; flex-direction: column; gap: 2px; min-width: 150px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.scm .t2-gst-k small, .scm .t2-gst-k span { color: var(--muted); font-size: 12px; }
.scm .t2-gst-k b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.scm .t2-gst .num { font-variant-numeric: tabular-nums; }
.scm table.t2-gst th, .scm table.t2-gst td { padding-left: 8px; padding-right: 8px; }   /* nine columns fit a 700px pane */
.scm tr.t2-gtot td { border-top: 2px solid var(--line-strong); background: var(--sunk); }
@media (max-width: 640px) { .scm .t2-gst-k { flex: 1 1 140px; min-width: 0; } .scm tr.t2-gtot td[colspan] { display: block; } }

/* phone, Collation: each indent line keeps To decide, From stock, Buy and Bounce on one row (an indent of ~100 lines,
   owner 15 Oct); the item's own row spans the width (16 Oct, the 375px walk) */
@media (max-width: 699px) {
  .scm table.grid.gstack.t2-cgrid tbody tr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .scm table.grid.gstack.t2-cgrid tbody tr.t2-grp { grid-template-columns: minmax(0, 1fr); }
  .scm table.grid.gstack.t2-cgrid .t2-q { width: 100%; max-width: 76px; }
}

/* phone, Team 2's pages: Team 1's desktop rule `td:has(> .rowlink.mono) { width: 1% }` outranks the phone rule's width:auto,
   so a key cell that starts with a monospace number shrank to a few pixels (Indents' "Above par" line, 16 Oct). R-032 asks
   Team 1 to reset it in scm.css; until then Team 2's own pages reset it here. */
@media (max-width: 699px) {
  .scm:is([data-page^="ind_"], [data-page^="dsp_"], [data-page^="inv_"], [data-page^="iss_"], [data-page^="gst_"]) table.grid.gstack td:has(> .rowlink.mono) {
    width: auto; white-space: normal;
  }
}

/* Team 2's pages: the APEX theme's own .row (a grid row, margin 0 -8px) also styles SupplyRP's .row, so a header row and
   the buttons in it sat 8 and 16px left of the gutter at 375px (16 Oct). R-034 asks Team 1 to reset it in scm.css. */
.scm:is([data-page^="ind_"], [data-page^="dsp_"], [data-page^="inv_"], [data-page^="iss_"], [data-page^="gst_"]) .row { margin-left: 0; margin-right: 0; }

/* phone, Team 2's pages: a status pill ("Waiting for its check") wraps in its stacked cell instead of running past the
   list's frame (16 Oct, Anita Shah's walk) */
@media (max-width: 699px) {
  .scm:is([data-page^="ind_"], [data-page^="dsp_"], [data-page^="inv_"], [data-page^="iss_"], [data-page^="gst_"]) table.grid.gstack .pill { white-space: normal; }
}

/* phone, Team 2's pages: the decision buttons in a document's header and in the action bar (Checked: issue it, Return it,
   Post, Send...) are at least 44px tall for a thumb (16 Oct, Anita Shah's walk; R-036 asks the same of Approvals) */
@media (max-width: 699px) {
  .scm:is([data-page^="ind_"], [data-page^="dsp_"], [data-page^="inv_"], [data-page^="iss_"], [data-page^="gst_"]) .row.between .btn,
  .scm:is([data-page^="ind_"], [data-page^="dsp_"], [data-page^="inv_"], [data-page^="iss_"], [data-page^="gst_"]) .t2-bar .btn { min-height: 44px; }
}