/* ERP hero window: a purchase order through approval, two warehouses and the ledger.
   Shell and tokens (.app, .app__bar, .status, .mod, .post__icon) come from /style.css. */
.erp .app__main { gap: 10px; }
.erp-card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.erp-card__head { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.erp-card__head b { font-weight: 600; }
.erp-item { font-style: normal; }
.erp-card__head span { min-width: 0; margin-left: auto; overflow: hidden; color: var(--muted-fg); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

/* Approval chain: one row per role, pending, working, done */
.erp-appr li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 8px; height: 31px; padding: 0 12px; }
.erp-appr li + li { border-top: 1px solid var(--line); }
.erp-appr b { font-weight: 600; white-space: nowrap; }
.erp-appr .act { color: var(--muted-fg-2); font-size: 12px; white-space: nowrap; }
.erp-appr li:not(.is-done):not(.is-busy) .act { color: var(--muted-fg); }

/* Ledger and stock side by side */
.erp-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; }
.erp .app__main { container-type: inline-size; }
@container (max-width: 480px) { .erp-row { grid-template-columns: minmax(0, 1fr); } } /* journal and stock stack before 'Accounts payable 12.400.000' runs out of room */
.erp-jr { font-variant-numeric: tabular-nums; }
.erp-jr td { white-space: nowrap; }
.erp-jr td:nth-child(2) { width: 100%; padding-left: 0; text-align: left; } /* the account takes the room left by the side and amount columns */
.erp-jr .jr-side { width: 1%; padding-right: 8px; color: var(--muted-fg); font-weight: 600; }
.erp-bal { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 0 7px; height: 20px; border-radius: 6px; border: 1px solid var(--ok-line); background: var(--ok-bg); color: var(--ok); font-size: 11.5px; font-weight: 600; }
.erp-bal svg { width: 11px; height: 11px; stroke-width: 3; }
.erp-stock { display: grid; gap: 8px; padding: 10px 12px; }
.erp-stock p { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; row-gap: 5px; }
.erp-stock small { color: var(--muted-fg-2); font-size: 12px; }
.erp-stock b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.erp-stock i { grid-column: 1 / -1; display: block; height: 6px; border-radius: 3px; background: var(--muted); overflow: hidden; }
.erp-stock i span { display: block; height: 100%; border-radius: inherit; background: var(--coral); transform-origin: left; transform: scaleX(var(--fill)); }

@media (max-width: 600px) {
  .erp-appr .post__icon { grid-area: auto; } /* style.css names this area for the home console's rows */
  .erp .erp-crumb { display: none; } /* the PO number alone leaves the status badge its room */
}
@media (max-width: 440px) {
  .erp-item { display: none; } /* phones keep the amount; the item name would be cut */
}
@media (max-width: 340px) {
  .erp-jr td:nth-child(2) { white-space: normal; } /* 'Accounts payable' wraps at 320 rather than pushing the amount out of the card */
}
@media (max-width: 460px) {
  /* 'Purchasing manager' and 'Approved · 08:51' do not fit one row (measured: they touch at 381-440, where the
     icon rail also takes room): the action drops under the role */
  .erp-appr li { grid-template-columns: 18px minmax(0, 1fr); height: auto; padding: 6px 12px; row-gap: 0; }
  .erp-appr .post__icon { grid-row: 1 / span 2; }
  .erp-appr .act { grid-column: 2; }
}