/* Inventory: the stock ledger. Screen prefix py-inv-.
   No proposal draws these screens: they are drawn with the design system's paper
   (py.css) in the Talonario's language. The branch's stock is the ledger, ruled in
   the inventory's green; an item is its kardex card, its figures on top and its lines
   below; what is below its minimum or due is flagged as a late work order is; a
   purchase order is the supplier's order form, in the remisión's anatomy; the shopping
   list is the canary pad. Every rule is scoped to the screen element. */

.py-screen.py-inv { --py-inv-green: oklch(0.78 0.09 160); --py-cols-side: 23rem; }

/* ---------- The page: the ledger, and the sheets that move it ---------- */
/* The columns, the parts, the forms, the folds and the empty pages are the shell's
   components (shell.css); the ledger's side is a little narrower, its sheets closer. */
.py-screen.py-inv .py-cols-side { gap: var(--py-3); }
@media (max-width: 60rem) {
  .py-screen.py-inv .py-inv-acts { order: -1; } /* in one column, an item's forms come before its lines */
}

/* The inventory's other screens, beside the title */
.py-screen.py-inv .py-inv-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--py-2); }

/* The mark of what is below its minimum: a word in the danger tag, never a color alone */
.py-screen.py-inv .py-inv-low { justify-self: start; align-self: center; }

/* An item's forms, each folded under its heading until it is wanted, on its own sheet. */
.py-screen.py-inv .py-fold { background: var(--py-paper); border-radius: var(--py-r-sheet); box-shadow: var(--py-shadow-sheet); }
.py-screen.py-inv .py-fold > summary { min-height: 3rem; font-weight: 700; }
.py-screen.py-inv .py-fold > summary::before { color: var(--py-ink-soft); }
.py-screen.py-inv .py-fold > summary:hover { background: var(--py-paper-2); }
.py-screen.py-inv .py-fold > form { padding: 0 var(--py-4) var(--py-4); box-shadow: none; }

/* ---------- The ledger: the branch's stock, an item's lots and movements ---------- */
.py-screen.py-inv .py-inv-ledger { padding: var(--py-2) var(--py-4) var(--py-4); border-top: 4px solid var(--py-inv-green); overflow-x: auto; }
.py-screen.py-inv .py-inv-ledger .py-table th.py-r, .py-screen.py-inv .py-inv-ledger .py-table td.py-r { text-align: end; white-space: nowrap; }
.py-screen.py-inv .py-inv-ledger .py-table td:first-child { font-weight: 650; }
.py-screen.py-inv .py-inv-ledger .py-table .py-inv-held { font-family: var(--py-f-display); font-stretch: 75%; font-weight: 750; font-size: var(--py-s-1); }
.py-screen.py-inv .py-inv-ledger .py-table tr.py-is-low td { background: color-mix(in oklch, var(--py-danger-bg) 70%, transparent); }
.py-screen.py-inv .py-inv-ledger .py-table tr.py-is-low td:first-child { box-shadow: inset 4px 0 0 var(--py-danger); }
.py-screen.py-inv .py-inv-ledger .py-table tr.py-is-low .py-inv-held { color: var(--py-danger); }
.py-screen.py-inv .py-inv-fine .py-table { font-size: var(--py-s--1); }
.py-screen.py-inv .py-inv-fine .py-table td { padding-block: var(--py-2); }
.py-screen.py-inv .py-inv-fine .py-table td:first-child { font-weight: 450; white-space: nowrap; }
.py-screen.py-inv .py-inv-ledger .py-inv-note { --py-casl: 1; color: var(--py-ink-soft); }

/* ---------- An item: its kardex card's figures, on top ---------- */
.py-screen.py-inv .py-inv-sum {
  margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: var(--py-4);
  padding: var(--py-4) var(--py-5);
  background: var(--py-paper-2); border-radius: var(--py-r-sheet);
  border-inline-start: 4px solid var(--py-inv-green);
}
.py-screen.py-inv .py-inv-sum div { display: grid; gap: 2px; align-content: start; }
.py-screen.py-inv .py-inv-sum dt { font-size: var(--py-s--1); color: var(--py-print); font-weight: 600; }
.py-screen.py-inv .py-inv-sum dd { margin: 0; font-family: var(--py-f-display); font-stretch: 70%; font-weight: 750; font-size: var(--py-s-2); line-height: 1; font-variant-numeric: tabular-nums; }
.py-screen.py-inv .py-inv-sum .py-inv-unit dd { font-family: var(--py-f-ui); font-stretch: 100%; font-weight: 600; font-size: var(--py-s-0); line-height: 1.6; }
.py-screen.py-inv .py-inv-sum.py-is-low { border-inline-start-color: var(--py-danger); }
.py-screen.py-inv .py-inv-sum.py-is-low .py-inv-onhand dd { color: var(--py-danger); }

/* Stock set aside: one slip per reservation, with its *Liberar* */
.py-screen.py-inv .py-inv-slips { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--py-2); }
.py-screen.py-inv .py-inv-slips li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--py-1) var(--py-4); padding: var(--py-3) var(--py-4); background: var(--py-paper); border-radius: var(--py-r-sheet); border: 1.5px dashed var(--py-rule); }
.py-screen.py-inv .py-inv-slips b { font-weight: 650; }
.py-screen.py-inv .py-inv-slips .py-num { font-weight: 700; }
.py-screen.py-inv .py-inv-slips span { color: var(--py-ink-soft); font-size: var(--py-s--1); }
.py-screen.py-inv .py-inv-slips form { margin-inline-start: auto; }

/* ---------- Alerts: each open alert flagged as a late work order is ---------- */
.py-screen.py-inv .py-inv-flags { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--py-3); }
.py-screen.py-inv .py-inv-flags > li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--py-1) var(--py-4); align-items: center;
  padding: var(--py-3) var(--py-4); background: var(--py-paper); border-radius: var(--py-r-sheet);
  box-shadow: var(--py-shadow-sheet); border-inline-start: 4px solid var(--py-rule);
}
.py-screen.py-inv .py-inv-flags > li.py-is-high { outline: 2px solid var(--py-danger); outline-offset: 2px; border-inline-start-color: var(--py-danger); }
.py-screen.py-inv .py-inv-flags > li.py-is-normal { border-inline-start-color: var(--py-warn); }
.py-screen.py-inv .py-inv-flags b { font-weight: 700; font-size: var(--py-s-1); }
.py-screen.py-inv .py-inv-flags p { color: var(--py-ink-soft); font-size: var(--py-s--1); display: flex; flex-wrap: wrap; gap: var(--py-1) var(--py-3); grid-column: 1; }
.py-screen.py-inv .py-inv-flags .py-tag { grid-row: 1 / span 2; grid-column: 2; }
.py-screen.py-inv .py-inv-rules { list-style: none; margin: 0; padding: 0; display: grid; }
.py-screen.py-inv .py-inv-rules li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--py-1) var(--py-3); padding: var(--py-3) 0; border-bottom: 1px solid var(--py-ruling); }
.py-screen.py-inv .py-inv-rules li > b { font-weight: 650; }
.py-screen.py-inv .py-inv-rules li > span { color: var(--py-ink-soft); font-size: var(--py-s--1); }
.py-screen.py-inv .py-inv-rules form { margin-inline-start: auto; }

/* ---------- Purchase orders: a stamp for where each stands ---------- */
.py-screen.py-inv .py-inv-orders .py-stamp { font-size: var(--py-s--2); padding: 0.25em 0.5em 0.2em; }
.py-screen.py-inv .py-inv-orders td { vertical-align: middle; }

/* The order itself: the supplier's order form, in the remisión's anatomy */
.py-screen.py-inv .py-inv-order { display: grid; gap: var(--py-4); align-content: start; border-top: 4px solid var(--py-print); }
.py-screen.py-inv .py-inv-order > h2 { font-family: var(--py-f-display); font-stretch: 112%; font-weight: 750; font-size: var(--py-s-0); color: var(--py-print); }
.py-screen.py-inv .py-inv-who { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--py-1) var(--py-3); font-size: var(--py-s--1); }
.py-screen.py-inv .py-inv-who dt { color: var(--py-print); font-weight: 600; }
.py-screen.py-inv .py-inv-who dd { margin: 0; font-weight: 600; border-bottom: 1px solid var(--py-ruling); }
.py-screen.py-inv .py-inv-memo { --py-casl: 1; font-size: var(--py-s-1); font-weight: 560; }
.py-screen.py-inv .py-inv-lines { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.py-screen.py-inv .py-inv-lines th { text-align: start; color: var(--py-print); font-family: var(--py-f-display); font-stretch: 80%; font-weight: 650; font-size: var(--py-s--1); border-bottom: 1.5px solid var(--py-print); padding: var(--py-2) var(--py-2); }
.py-screen.py-inv .py-inv-lines td { padding: var(--py-2); border-bottom: 1px solid var(--py-ruling); vertical-align: middle; }
.py-screen.py-inv .py-inv-lines .py-r { text-align: end; }
.py-screen.py-inv .py-inv-lines td.py-r { font-weight: 700; }
.py-screen.py-inv .py-inv-place { display: grid; gap: var(--py-2); }
.py-screen.py-inv .py-inv-items { display: grid; gap: var(--py-3); } /* a refused change above the lines */
.py-screen.py-inv .py-inv-place .py-btn { justify-self: start; }

/* ---------- The shopping list: the canary pad ---------- */
.py-screen.py-inv .py-inv-pad { padding: var(--py-3) var(--py-4) var(--py-5); border-top: 0.9rem solid color-mix(in oklch, var(--py-canary-ink) 30%, var(--py-canary)); overflow-x: auto; }
.py-screen.py-inv .py-inv-pad .py-table th { color: var(--py-canary-ink); border-bottom-color: color-mix(in oklch, var(--py-canary-ink) 35%, transparent); }
.py-screen.py-inv .py-inv-pad .py-table td { border-bottom-color: color-mix(in oklch, var(--py-canary-ink) 18%, transparent); }
.py-screen.py-inv .py-inv-pad .py-table .py-r { text-align: end; }
.py-screen.py-inv .py-inv-pad .py-inv-buy { font-family: var(--py-f-display); font-stretch: 75%; font-weight: 750; font-size: var(--py-s-1); }

/* An upright tablet: the ledger's eight columns in a smaller hand */
@media (max-width: 60rem) {
  .py-screen.py-inv .py-inv-ledger .py-table { font-size: var(--py-s--1); }
  .py-screen.py-inv .py-inv-ledger .py-table :is(td, th) { padding-inline: var(--py-2); }
  .py-screen.py-inv .py-inv-ledger .py-table .py-inv-held { font-size: var(--py-s-0); }
}
@media (max-width: 47.99rem) {
  .py-screen.py-inv .py-inv-ledger, .py-screen.py-inv .py-inv-pad { padding-inline: var(--py-2); }
  .py-screen.py-inv :is(.py-inv-ledger, .py-inv-pad) .py-table :is(td, th) { padding-inline: var(--py-2); }
}