:root {
  color-scheme: light;
  --bg: #eef0f2;
  --panel: #ffffff;
  --text: #001b3f;
  --muted: #5d6878;
  --border: #c9d0d8;
  --accent: #0078c8;
  --accent-strong: #0062a5;
  --accent-dark: #005a9c;
  --nav: #0078c8;
  --nav-strong: #006bb6;
  --error: #c13f3f;
  --success: #28724f;
  --shadow: 0 1px 2px rgba(0, 31, 63, 0.08);
  /* R25: shared 3D button face (accent blue, white text) used by every button in OMS. */
  --btn-border: #005a9c;
  --btn-face: linear-gradient(180deg, #3399d6 0%, #0078c8 100%);
  --btn-face-hover: linear-gradient(180deg, #45a4dc 0%, #0682d4 100%);
  --btn-face-active: linear-gradient(180deg, #0068b0 0%, #1585cd 100%);
  --btn-text: #ffffff;
  --btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 31, 63, 0.18);
  --btn-shadow-pressed: inset 0 1px 3px rgba(0, 27, 63, 0.35);
  /* R27: how tall a lengthy table's card may grow before it scrolls itself.
     Leaves room for the nav band, the tabs strip and the hint under the card.
     A page with a taller chrome (a toolbar, pagination) overrides it. */
  --table-card-max: calc(100vh - 210px);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
}

main {
  width: min(720px, calc(100% - 32px));
  margin: 48px auto;
}

.workspace {
  width: min(1500px, calc(100% - 28px));
  margin-top: 0;
  margin-bottom: 32px;
}

/* Settings pages (Admin) hold sparse content: keep the standard workspace (so the
   header stays aligned) but cap each content section to a compact width, left-aligned.
   The left edge still matches the header and every other page; only the empty right
   side shrinks. */
.settings-page.workspace > section:not(.result) {
  max-width: 1120px;
}

.page-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.page-header p {
  margin-bottom: 0;
}

/* R27: the strap's subject line — which record the screen is showing.
   Rendered by the subject_line macro in _strap.html; see it for the rule. */
.subject-line {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 700;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* R25: identical metrics to button/.button — every button in OMS is the
   same size and style (primary nav and References tabs are scoped). */
nav a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--btn-border);
  border-radius: 3px;
  background: var(--btn-face);
  box-shadow: var(--btn-shadow);
  color: var(--btn-text);
  text-decoration: none;
}

nav a:hover {
  background: var(--btn-face-hover);
  text-decoration: none;
}

nav a.active,
nav a[aria-current="page"] {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

.secondary-actions {
  justify-content: flex-end;
  margin: -12px 0 18px;
}

/* R12: Match Order displays left of Save, but Save stays first in the DOM so
   pressing Enter in a field still submits a plain save. */
.secondary-actions .match-order {
  order: -1;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1 {
  margin: 0 0 8px;
  font-size: 2rem;
  line-height: 1.2;
}

p {
  margin: 0 0 24px;
  color: var(--muted);
}

form {
  display: grid;
  gap: 16px;
  padding: 24px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  box-shadow: var(--shadow);
}

.filters {
  grid-template-columns: minmax(220px, 1fr) minmax(96px, 140px) auto;
  align-items: end;
}

/* Invoice search carries four R13 fields: customer, season, order #, shipment #. */
.filters.filters-wide {
  grid-template-columns:
    minmax(200px, 1fr) minmax(110px, 150px) minmax(110px, 160px) minmax(110px, 160px) auto;
}

.document-actions {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(320px, 0.55fr);
  gap: 12px;
  align-items: stretch;
}

.document-actions .filters {
  margin: 0;
}

.inline-upload {
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
  padding: 14px;
}

.inline-upload label {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.8rem;
  text-transform: uppercase;
}

.inline-upload input[type="file"] {
  min-height: 44px;
  padding: 9px 10px;
}

.filters label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

input[type="search"],
input[name="season"] {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #ffffff;
  color: var(--text);
}

/* R27: form controls never keep the browser-default font — they always use
   the page font, same as the data tables (search boxes included). */
input,
select,
textarea {
  outline-color: var(--accent);
  font-family: inherit;
  font-size: 1rem;
}

label {
  font-weight: 700;
}

input[type="file"] {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #ffffff;
}

button {
  justify-self: start;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--btn-border);
  border-radius: 3px;
  background: var(--btn-face);
  box-shadow: var(--btn-shadow);
  color: var(--btn-text);
  /* Native buttons don't inherit the page font; force it so buttons and body text match. */
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
}

button:hover {
  background: var(--btn-face-hover);
}

button:active {
  background: var(--btn-face-active);
  box-shadow: var(--btn-shadow-pressed);
}

.button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--btn-border);
  border-radius: 3px;
  background: var(--btn-face);
  box-shadow: var(--btn-shadow);
  color: var(--btn-text);
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  background: var(--btn-face-hover);
  text-decoration: none;
}

.button:active {
  background: var(--btn-face-active);
  box-shadow: var(--btn-shadow-pressed);
}

/* No pointer-events: none here — it would suppress the title-attribute
   tooltip that names the blockers (R06S3, R11S2); the span is inert anyway. */
.button.disabled {
  border-color: var(--border);
  background: #f2f4f6;
  box-shadow: none;
  color: var(--muted);
  cursor: not-allowed;
}

/* Destructive actions: same 3D face in the error red. */
button.danger {
  border-color: #96302e;
  background: linear-gradient(180deg, #d45a5a 0%, #c13f3f 100%);
  color: var(--btn-text);
}

button.danger:hover {
  background: linear-gradient(180deg, #dc6a6a 0%, #cc4b4b 100%);
}

.auth-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  margin: 0 auto;
}

.auth-card {
  width: min(520px, calc(100vw - 32px));
  padding: 38px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(22, 36, 51, 0.08);
}

.auth-card h1 {
  font-size: 2.2rem;
}

.auth-button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  margin-top: 4px;
  padding: 0 14px;
  border: 1px solid var(--btn-border);
  border-radius: 3px;
  background: var(--btn-face);
  box-shadow: var(--btn-shadow);
  color: var(--btn-text);
  font-weight: 400;
  text-decoration: none;
}

.auth-button:hover {
  background: var(--btn-face-hover);
}

.auth-alert {
  margin: 18px 0;
  padding: 12px 14px;
  border: 1px solid #dba4a4;
  border-radius: 3px;
  background: #fff8f8;
  color: #5c1e1e;
}

.auth-footnote {
  margin: 24px 0 0;
  font-size: 0.9rem;
}

.result {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 3px;
  background: #ffffff;
  border: 1px solid var(--border);
}

.result.success {
  border-color: var(--success);
}

.result.error {
  border-color: var(--error);
}

.result.warning {
  border-color: #d8a742;
}

/* R15/R27: results are compact bottom-right toasts sized to their text, so they
   no longer sit as a persistent 520px panel over the last table row / edit line.
   The level reads from a 3px colored edge; _result_toast.html fades plain
   success confirmations out after ~5 s and adds the ✕ dismiss control. */
.payment-terms-page > .result {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 20;
  width: fit-content;
  max-width: min(520px, calc(100% - 48px));
  max-height: 60vh;
  overflow-y: auto;
  margin: 0;
  padding-right: 40px;
  border-color: var(--border);
  border-left: 3px solid var(--muted);
  box-shadow: 0 18px 40px rgba(32, 36, 42, 0.16);
}

.payment-terms-page > .result.success {
  border-left-color: var(--success);
}

.payment-terms-page > .result.error {
  border-left-color: var(--error);
}

.payment-terms-page > .result.warning {
  border-left-color: #d8a742;
}

/* One small, quiet dismiss control in the toast corner (same idiom as .refs-x). */
.result .result-x {
  position: absolute;
  top: 6px;
  right: 6px;
  min-height: 24px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 0.9rem;
}

.result .result-x:hover {
  background: transparent;
  color: var(--text);
}

.payment-terms-page > .result.toast-hide {
  opacity: 0;
  transition: opacity 0.4s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .payment-terms-page > .result {
    animation: toast-in 0.18s ease-out;
  }
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* R28S6: per-email outcome lines under the Read Email banner. */
.result .email-result {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-weight: 400;
}

.result .email-result div {
  margin-top: 2px;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.table-wrap {
  margin-top: 18px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

/* R11S6: Shipment Details carries four header cards (Shipment, Bill To, Ship To,
   Manufacturer). The default three-column grid stranded Manufacturer alone on a
   second row; this puts all four side by side so they occupy the upper part
   compactly. align-items: stretch (the grid default) makes every card the height
   of the tallest, so their bottom edges line up across the row. */
.summary-grid--compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.summary-grid > div,
.warnings,
.instruction-band {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

/* R06/R11: the email instruction as a full-width band under the header cards. */
.instruction-band {
  margin-top: 18px;
}

.instruction-band p {
  margin: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* R07/R12/R27: Edit Order / Edit Shipment forms — Xero-like field rows.
   Each field is a lined row: label left, control in an aligned right column;
   one font for labels, inputs, selects and textareas. */
.edit-form {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.edit-form label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 7px 0;
  border-bottom: 1px solid #e4e9ee;
  color: var(--muted);
  font-weight: 400;
  font-size: 0.95rem;
}

.edit-form input:not([type="checkbox"]),
.edit-form select,
.edit-form textarea {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
}

/* Controls form one aligned column on the right of each card. */
.edit-form label > input,
.edit-form label > select,
.edit-form label > textarea {
  flex: 0 0 62%;
  min-width: 0;
  max-width: 62%;
  margin-left: auto;
}

.edit-form textarea {
  width: 100%;
  padding: 8px 10px;
  resize: vertical;
}

.edit-form .muted {
  margin: 0;
  padding: 7px 0;
  border-bottom: 1px solid #e4e9ee;
  font-size: 0.9rem;
}

/* R19/R27: one Xero mirror card — status left, an even row of four count
   tiles, the Sync button on the right. */
.xero-sync-panel {
  display: grid;
  grid-template-columns: minmax(180px, auto) 1fr auto;
  gap: 20px;
  align-items: center;
  margin-bottom: 18px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.xero-sync-panel h2,
.xero-sync-panel p {
  margin: 0;
}

.xero-sync-panel h2 {
  margin-bottom: 4px;
}

/* R19: Shipment matching card — description left, button right, same card
   styling as the Xero mirror panel above it. */
.admin-match-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  margin-bottom: 18px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.admin-match-panel h2 {
  margin: 0 0 4px;
}

.admin-match-panel p {
  margin: 0;
}

.xero-sync-counts {
  display: grid;
  grid-template-columns: repeat(6, minmax(96px, 1fr));
  gap: 8px;
}

.xero-sync-counts div {
  padding: 10px 12px;
  border: 1px solid #dfe5e9;
  border-radius: 3px;
  background: #f8fafc;
}

.xero-sync-counts strong,
.xero-sync-counts span {
  display: block;
}

.xero-sync-counts strong {
  font-size: 1.3rem;
  line-height: 1.1;
}

.xero-sync-counts span {
  color: var(--muted);
  font-size: 0.82rem;
}

/* R19: the Users table follows the References editable-table pattern
   (refs-table); only the column widths are set here. */
.admin-users table {
  table-layout: fixed;
}

.admin-users th:nth-child(1) {
  width: 34%;
}

.admin-users th:nth-child(2) {
  width: 34%;
}

.admin-users th:nth-child(3) {
  width: 12%;
}

.card-link {
  font-weight: 700;
}

.field-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
}

.compact-form {
  gap: 12px;
}

.inline-form {
  display: contents;
}

/* R35: two Xero-matching buttons share the panel's action cell, side by side. */
.admin-panel-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.hidden-form {
  display: none;
  padding: 0;
  margin: 0;
  border: 0;
}

.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
}

.compact-number {
  width: 58px;
  max-width: 100%;
  text-align: right;
}

.muted {
  color: var(--muted);
}

.section-title {
  margin-top: 28px;
}

h2 {
  margin: 0 0 12px;
  font-size: 1rem;
}

dl {
  display: grid;
  grid-template-columns: minmax(88px, auto) 1fr;
  gap: 6px 12px;
  margin: 0;
}

dt {
  color: var(--muted);
}

dd {
  margin: 0;
}

/* R11S7: a detail card's values can be long spaceless strings (a Doc # or a
   Source file name). Let the value column shrink below its content and break
   such strings so they wrap inside the card instead of spilling past its edge. */
.summary-grid dl {
  grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
}
.summary-grid dd {
  min-width: 0;
  overflow-wrap: anywhere;
}

pre {
  margin: 0;
  white-space: pre-wrap;
  font: inherit;
}

.warnings {
  margin-bottom: 18px;
  border-color: #d8a742;
}

.warnings p {
  margin: 0;
}

.warnings p + p {
  margin-top: 8px;
}

/* R11S3: an unmatched shipment line — the row that warns and blocks full
   invoicing. Quiet amber badge, the same warning hue as the .warnings band, so
   it reads as "needs attention" without shouting. A matched line needs no
   badge: its order-line link already says it is matched. */
.match-unmatched {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid #d8a742;
  border-radius: 10px;
  font-size: 0.85rem;
  color: #8a6516;
  background: #fbf3e0;
  white-space: nowrap;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 780px;
}

caption {
  padding: 14px 16px;
  text-align: left;
  font-weight: 800;
  color: var(--text);
}

th,
td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

th {
  background: #f7f9fb;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
  text-transform: none;
}

/* R07: Order vs Xero comparison panels on the Order Edit form. */
.xero-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

/* Long unbroken values (emails, URLs) must not force a column wider than the
   card: columns may shrink below their content width, panels wrap anywhere. */
.xero-compare > div {
  min-width: 0;
}

.xero-compare-caption {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.82rem;
}

.xero-compare-panel {
  min-height: 108px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 3px;
  background: #f2f4f6;
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.xero-compare-panel.empty {
  color: var(--muted);
}

/* R25: standard button size; only the right alignment is specific. */
.xero-compare .xero-copy {
  display: block;
  margin: 8px 0 0 auto;
}

.xero-compare .xero-copy:disabled {
  opacity: 0.5;
  cursor: default;
  box-shadow: none;
}

/* The Order column keeps the lined label rows but lets controls use the width. */
.xero-compare label > input {
  flex: 1 1 55%;
  max-width: none;
}

/* R27: in-page confirmation dialog — native confirm() cannot use the OMS font. */
dialog.confirm-dialog {
  min-width: 340px;
  max-width: 480px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 18px 48px rgba(22, 36, 51, 0.25);
}

dialog.confirm-dialog::backdrop {
  background: rgba(0, 27, 63, 0.35);
}

.confirm-dialog p {
  margin: 0 0 16px;
  color: var(--text);
  font-size: 1rem;
}

.confirm-dialog-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* R07.2: propagate-match confirmation page. */
.propagate-card {
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.propagate-card h2 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.propagate-card p {
  margin: 0 0 10px;
}

.propagate-apply {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* R07/R12: Xero contact autocomplete — a text box backed by /api/contacts
   instead of a 5000-option select. */
.contact-picker {
  position: relative;
  display: flex;
}

.contact-picker input[type="text"] {
  width: 100%;
}

.edit-form label > .contact-picker {
  flex: 0 0 62%;
  min-width: 0;
  max-width: 62%;
  margin-left: auto;
}

.contact-picker-list {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 30;
  max-height: 260px;
  margin: 2px 0 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(0, 31, 63, 0.15);
}

.contact-picker-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  cursor: pointer;
  font-size: 0.95rem;
}

.contact-picker-list li.active,
.contact-picker-list li:hover {
  background: #eaf4fc;
}

.contact-picker-code {
  color: var(--muted);
  font-size: 0.85rem;
}

/* R06: related documents at the bottom of Order Details. All group tables use
   the same fixed column grid so Date, Units, Total and Paid align vertically. */
.related-docs {
  margin-top: 24px;
}

.related-docs table {
  table-layout: fixed;
}

.related-docs col.rd-number {
  width: 300px;
}

.related-docs col.rd-date {
  width: 140px;
}

.related-docs col.rd-status {
  width: 160px;
}

.related-docs col.rd-units {
  width: 110px;
}

.related-docs col.rd-amount {
  width: 170px;
}

.related-docs h3 {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* R26: sortable column headers look like headers, not links. */
th .sort-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
}

th .sort-link:hover {
  color: var(--accent);
  text-decoration: none;
}

.sort-arrow {
  font-size: 0.65rem;
  line-height: 1;
}

tbody tr:hover {
  background: #f8fbfd;
}

tr:last-child td {
  border-bottom: 0;
}

.number {
  text-align: right;
  white-space: nowrap;
}

.empty {
  color: var(--muted);
  text-align: center;
}

.admin-surface {
  background: var(--bg);
}

.payment-terms-page {
  width: min(1500px, calc(100% - 28px));
  margin-top: 0;
}

.admin-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  width: 100vw;
  margin: 0 0 18px calc(50% - 50vw);
  padding: 0;
  background: transparent;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.admin-hero > div {
  order: 2;
  padding: 17px max(14px, calc((100vw - 1500px) / 2 + 14px)) 16px;
  border-bottom: 1px solid #c7cdd5;
  background: #ffffff;
  box-shadow: 0 1px 1px rgba(0, 31, 63, 0.08);
}

.admin-hero > div h1 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 2px;
  color: #001b3f;
  font-size: 1.18rem;
  font-weight: 700;
}

.admin-hero > div p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.admin-hero nav.primary-nav {
  order: 1;
  display: flex;
  min-height: 56px;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0 max(14px, calc((100vw - 1500px) / 2 + 14px));
  background: var(--nav);
  box-shadow: 0 1px 0 rgba(0, 64, 112, 0.38);
}

/* R25: the OMS wordmark. Real markup rather than ::before content, so it is
   selectable and can link home. Tracked caps at a weight the nav links do not
   share: weight is what stops the identity reading as another menu item. The
   hairline rule separates the brand zone from the navigation, and padding-right
   sits short of the 22px gap to absorb the trailing letter-space after the S. */
.admin-hero nav.primary-nav a.brand {
  display: flex;
  align-items: center;
  min-height: 56px;
  margin-right: 22px;
  padding: 0 17px 0 0;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1;
}

.admin-hero nav.primary-nav a.brand:hover {
  background: transparent;
  text-decoration: none;
}

.admin-hero nav.primary-nav a {
  min-height: 56px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #ffffff;
  font-weight: 400;
}

.admin-hero nav.primary-nav a:hover {
  background: var(--nav-strong);
  text-decoration: none;
}

.admin-hero nav.primary-nav a.active,
.admin-hero nav.primary-nav a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 -4px 0 #8bd4ff;
  color: #ffffff;
}

/* R25: signed-in user sits in the nav bar, pushing Sign out to the right edge. */
.admin-hero nav.primary-nav .nav-user {
  display: flex;
  align-items: center;
  margin-left: auto;
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.85);
}

/* R25: compact single-line toolbar shared by the Summary screens —
   search + filters on the left, document actions on the right. */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.toolbar form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.toolbar-search {
  flex: 1 1 480px;
}

.toolbar-search > label:not(.checkbox-inline) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.toolbar input[type="search"] {
  flex: 1 1 240px;
  width: auto;
  min-height: 36px;
}

.toolbar .toolbar-field {
  width: 130px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #ffffff;
  color: var(--text);
}

.toolbar .checkbox-inline {
  white-space: nowrap;
  color: var(--muted);
}

.toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* R25: buttons share one global size; toolbars only reset grid alignment. */
.toolbar button,
.toolbar .button {
  justify-self: auto;
}

.file-button input[type="file"] {
  display: none;
}

/* R15: References submenu tabs + compact reference CRUD forms (R16-R18). */
.refs-main {
  max-width: 1260px;
}

/* Narrow reference tables should not stretch across the page. */
.refs-main.refs-narrow {
  max-width: 620px;
}

.refs-main.refs-medium {
  max-width: 860px;
}

/* R27: a wide reference table takes the width its columns need. Payment Terms'
   nine columns want 1300px; the default 1260px hid 42px of them, clipping the
   Add/Update button itself. This is a modifier on the page that needs it, like
   refs-narrow/refs-medium — a `.payment-terms-page ...` selector would out-rank
   those two and stretch every reference form, since they all share that class. */
.refs-main.refs-wide {
  max-width: 1360px;
}

.refs-tabs {
  display: flex;
  gap: 2px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--border);
}

/* R15: the References header strip carries the tabs — no duplicate page title,
   no second tabs row. Tabs span the strip so the active underline sits on its
   bottom border, echoing the top nav's active state. */
.admin-hero > div.refs-hero {
  padding-top: 0;
  padding-bottom: 0;
}

.refs-hero .refs-tabs {
  margin: 0;
  border-bottom: 0;
}

.refs-hero .refs-tabs a {
  min-height: 54px;
}

.refs-tabs a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-weight: 400;
  text-decoration: none;
}

.refs-tabs a:hover {
  background: transparent;
  color: var(--accent);
}

.refs-tabs a.active,
.refs-tabs a[aria-current="page"] {
  border: 0;
  background: transparent;
  color: var(--accent);
  font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--accent);
}

/* R27 lengthy-table frame: once a table is long enough to push its own controls
   past the fold, the CARD scrolls rather than the page, and the column header
   pins to the card's top — 40 rows of look-alike figures are unreadable once
   their headers scroll away.
   The card (not the page) has to be the scroll container: `position: sticky`
   resolves against the nearest scrolling ancestor, and .table-wrap's
   overflow-x already makes that the card. Scrolling the page instead would mean
   dropping overflow-x and letting wide tables burst their card border (R30.1).
   Short tables never reach the height, so this is inert on them. */
.refs-table,
.table-wrap.tall-table {
  max-height: var(--table-card-max);
  overflow: auto;
}

/* Sticky goes on the cells, never the row: sticky <tr> is unreliable across
   browsers. The header needs its own background or rows show through it. */
.refs-table thead th,
.table-wrap.tall-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f7f9fb;
  box-shadow: 0 1px 0 var(--border);
}

/* R15: the edit line pins to the card's foot, so clicking any row puts the edit
   line and the highlighted row it would overwrite on screen together. It is
   still the last row of the table, still aligned to the columns — presentation
   only. Without this the highlight is invisible from the edit line on a long
   table, and the highlight is what says WHICH row Update overwrites. */
.refs-edit-row td {
  position: sticky;
  bottom: 0;
  z-index: 2;
  box-shadow: 0 -1px 0 var(--border);
}

.refs-table table {
  min-width: 0;
}

.refs-table th,
.refs-table td {
  padding: 8px 10px;
  vertical-align: middle;
}

/* Rows are plain text in the table font; clicking one loads it into the edit row. */
.refs-table tbody tr[data-row] {
  cursor: pointer;
}

.refs-table tbody tr[data-row]:hover td {
  background: #f2f7fb;
}

/* The last table row is the create/edit line, aligned with the columns above. */
.refs-edit-row td {
  background: #f7f9fb;
}

/* The row that Update would overwrite (key matches the edit line). */
.refs-table tbody tr.refs-match td {
  background: #eaf4fc;
}

.refs-table input:not([type="checkbox"]) {
  width: 100%;
  /* Do not let a populated edit-line input grow its column: keep column widths
     driven by the data/header rows so selecting a row does not reflow the table. */
  min-width: 0;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
}

.refs-table input[name="description"] {
  min-width: 110px;
}

/* Plain numeric boxes: no spinner arrows in the edit line; digits align right
   like the numeric columns above. */
.refs-table input[type="number"] {
  width: 72px;
  appearance: textfield;
  -moz-appearance: textfield;
  text-align: right;
}

.refs-table input[type="number"]::-webkit-outer-spin-button,
.refs-table input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Payment term names like "30% DEPOSIT / 70% PRE SHIPMENT" stay on one line. */
.refs-table th.refs-term-col {
  min-width: 310px;
}

/* Descriptions stay on one line too. */
.refs-table th.refs-desc-col {
  min-width: 360px;
}

td.refs-actions {
  white-space: nowrap;
}

.refs-table button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 0.88rem;
}

/* "Add" and "Update" render at the same width, so switching between them does not
   reflow the table columns (which would otherwise wrap a long Description). */
.refs-edit-row button {
  min-width: 72px;
}

/* Inline-edit reference tables (Seasons, Payment/Shipment Terms) keep each row on one
   line, so selecting a row can never shrink/wrap a long Description. Manufacturers is
   excluded — it intentionally wraps its Address/Contact to fit the standard width. */
.payment-terms-page:not(.manufacturers-page) .refs-table td {
  white-space: nowrap;
}

/* One small, quiet delete control per row. */
.refs-table button.refs-x {
  min-height: 24px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 0.9rem;
}

.refs-table button.refs-x:hover {
  background: transparent;
  color: var(--error);
}

.refs-hint {
  margin: 8px 2px 0;
  color: var(--muted);
  font-size: 0.82rem;
}

/* R13: Xero-mirrored invoice lines — descriptions keep their newlines
   ("STELLA SLIPPER" over "Style #: STE-SUE-SIE", like the Xero UI). */
.invoice-doc td.prelines {
  white-space: pre-line;
}

/* R13: the "Amounts are tax ..." note sits right-aligned above the lines. */
.invoice-doc .tax-note {
  margin: 14px 2px 0;
  color: var(--muted);
  font-size: 0.88rem;
  text-align: right;
}

/* R30.1: Products catalog. Attribute columns left, then basis+currency price
   groups; a light rule before each group keeps the wide matrix readable. */
.products-table td {
  vertical-align: middle;
}

.products-table thead th {
  white-space: nowrap;
}

.products-table th.price-group {
  text-align: center;
}

.products-table th.price-group,
.products-table th.price-group-start,
.products-table td.price-group-start {
  border-left: 1px solid var(--border);
}

/* Identity cells (Item, Style, Season) never wrap — names top out at ~30
   characters, so the row stays one line tall next to its picture. */
.products-table td.code {
  white-space: nowrap;
}

/* An amount never breaks between its symbol and its digits (R27): "€ 170.14"
   split over two lines stops reading as a number at all. Kept left-aligned —
   detail-form line tables align left (R27), so this is not .number. The width
   an amount insists on is taken from the prose columns beside it, which wrap
   happily. Applies wherever a money cell is marked .amount — the Order Details
   product grid and the Shipment Details lines table (R11S4). */
td.amount {
  white-space: nowrap;
}

.products-table td.product-pic {
  padding: 4px 10px;
}

/* Item stacked over its style code (compact layout, R30.1). */
.products-table td.product-id .product-style {
  color: var(--muted);
  font-size: 0.88rem;
}

/* R12S7: the Edit form stacks EDITABLE Item over Style in the product-id cell
   (New shows them read-only). The two inputs sit one above the other; the Style
   input is the muted, smaller one, matching the read-only stack. */
.products-table td.product-id input {
  display: block;
  width: 100%;
}
.products-table td.product-id input + input {
  margin-top: 3px;
}
.products-table td.product-id input.product-style-input {
  color: var(--muted);
  font-size: 0.88rem;
}
/* R12S10: the Style is picked from items — its input is wrapped in a positioned
   .style-picker so the suggestion list (reusing .contact-picker-list) drops
   under it. */
.products-table td.product-id .style-picker {
  position: relative;
  display: block;
  margin-top: 3px;
}
.products-table td.product-id .style-picker input {
  margin-top: 0;
}

.products-table td.product-pic img {
  display: block;
  height: 84px;
  width: auto;
  border-radius: 2px;
}

.terms-command-panel {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}

.terms-search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-color: #cfd7dd;
  box-shadow: 0 12px 26px rgba(32, 36, 42, 0.06);
}

.terms-search label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.customer-search {
  grid-template-columns: minmax(320px, 1fr) 86px auto;
}

.customer-search label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.customer-search select,
.customer-input,
.target-search-form input,
.target-search-form select,
.archived-customer-panel select {
  width: 100%;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid #c8d1d8;
  border-radius: 5px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
}

.terms-search input,
.term-create-form input,
.shipment-create-form input,
.terms-row input {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid #c8d1d8;
  border-radius: 5px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
}

.term-create-form input[type="number"],
.shipment-create-form input[type="number"],
.terms-row input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.term-create-form input[type="number"]::-webkit-outer-spin-button,
.term-create-form input[type="number"]::-webkit-inner-spin-button,
.shipment-create-form input[type="number"]::-webkit-outer-spin-button,
.shipment-create-form input[type="number"]::-webkit-inner-spin-button,
.terms-row input[type="number"]::-webkit-outer-spin-button,
.terms-row input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.terms-row input[type="checkbox"],
.terms-row input[type="radio"],
.term-create-form input[type="checkbox"],
.shipment-create-form input[type="checkbox"] {
  width: auto;
  min-height: auto;
  padding: 0;
}

.create-term-panel {
  gap: 14px;
  margin-top: 18px;
  padding: 18px;
  border-color: #cfd7dd;
  box-shadow: 0 12px 26px rgba(32, 36, 42, 0.05);
}

.term-create-form {
  grid-template-columns: minmax(280px, 1.5fr) repeat(4, minmax(104px, 0.55fr)) minmax(74px, auto) auto;
  gap: 10px;
  align-items: end;
  padding: 0;
  border: 0;
}

.shipment-create-form {
  grid-template-columns: minmax(280px, 1fr) minmax(74px, auto) auto;
  gap: 10px;
  align-items: end;
  padding: 0;
  border: 0;
}

.term-create-form label,
.shipment-create-form label {
  display: grid;
  gap: 5px;
  color: #414a55;
  font-size: 0.78rem;
}

.term-active-toggle {
  min-height: 38px;
  justify-content: center;
}

.terms-list-panel {
  overflow: hidden;
  border: 1px solid #cfd7dd;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(32, 36, 42, 0.07);
}

.terms-panel-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 10px;
  border-bottom: 1px solid #e2e7eb;
}

.terms-panel-heading p {
  max-width: 560px;
  margin: 0;
}

.terms-panel-heading h2 {
  margin-bottom: 0;
}

.terms-merge-form {
  display: grid;
  gap: 0;
}

.merge-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 20px;
  border-bottom: 1px solid #dfe5e9;
  background: #f8fafb;
  color: var(--muted);
  font-size: 0.9rem;
}

.bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.terms-table {
  overflow-x: auto;
}

.terms-row {
  display: grid;
  grid-template-columns: 82px minmax(320px, 1.8fr) 180px 180px 58px minmax(260px, 1.25fr);
  gap: 10px;
  align-items: start;
  font-size: 0.95rem;
  min-width: 980px;
  padding: 10px 14px;
  border-bottom: 1px solid #e2e7eb;
}

.shipment-terms-page .terms-row {
  grid-template-columns: 82px minmax(360px, 1.7fr) 58px minmax(300px, 1.3fr);
  min-width: 760px;
}

.terms-row-head {
  padding-top: 10px;
  padding-bottom: 10px;
  background: #eef3f5;
  color: #53606d;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.terms-row:not(.terms-row-head):hover {
  background: #fbfcfc;
}

.terms-row.merge-main-row {
  background: #eef8f2;
  box-shadow: inset 4px 0 0 #2f7357;
}

.terms-row.merge-synonym-row {
  background: #fff8e8;
  box-shadow: inset 4px 0 0 #d8a742;
}

.terms-row.changed-row {
  background: #f4f8fc;
  box-shadow: inset 4px 0 0 #176b87;
}

.terms-row.merge-main-row:hover {
  background: #e8f5ee;
}

.terms-row.merge-synonym-row:hover {
  background: #fff4da;
}

.terms-row.changed-row:hover {
  background: #edf5fa;
}

.merge-cell {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px;
  align-items: center;
  padding-top: 5px;
}

.merge-role {
  min-height: 22px;
  color: #53606d;
  font-size: inherit;
  font-weight: 800;
  line-height: 22px;
}

.term-name-cell input {
  font-weight: 400;
}

.active-checkbox {
  display: block;
  margin: 10px auto 0;
}

.term-money-cell {
  display: grid;
  grid-template-columns: 62px auto 52px auto;
  gap: 5px;
  align-items: center;
  color: #6b7682;
  font-size: inherit;
  white-space: nowrap;
}

.percent-number {
  width: 62px;
  max-width: 100%;
  text-align: right;
}

.synonym-stack {
  display: grid;
  gap: 2px;
  padding-top: 7px;
  color: var(--text);
  font-size: inherit;
}

.synonym-stack span {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: inherit;
}

.term-actions button,
.merge-toolbar button,
.term-create-form button,
.shipment-create-form button,
.terms-search button {
  min-height: 38px;
}

.terms-empty {
  padding: 28px;
  color: var(--muted);
  text-align: center;
}

.customer-list-panel,
.archived-customer-panel {
  margin-top: 18px;
}

.customer-pager {
  position: static;
}

.button-link {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--btn-border);
  border-radius: 3px;
  background: var(--btn-face);
  box-shadow: var(--btn-shadow);
  color: var(--btn-text);
  font-weight: 400;
  text-decoration: none;
}

.button-link:hover {
  background: var(--btn-face-hover);
  text-decoration: none;
}

.customer-table {
  overflow-x: auto;
}

.customer-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.3fr) minmax(260px, 1fr) 150px 120px minmax(230px, 1fr) 76px;
  gap: 10px;
  align-items: center;
  min-width: 1140px;
  padding: 8px 14px;
  border-bottom: 1px solid #e2e7eb;
  font-size: 0.92rem;
}

.customer-row-head {
  background: #eef3f5;
  color: #53606d;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.customer-row:not(.customer-row-head):hover {
  background: #fbfcfc;
}

.customer-name-cell,
.customer-usage {
  display: grid;
  gap: 2px;
}

.customer-row button,
.target-search-form button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 5px;
}

.customer-active {
  margin-top: 6px;
}

.target-search-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 8px;
  width: min(420px, 100%);
  padding: 0;
  border: 0;
}

.target-search-form label {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.78rem;
}

.embedded-table {
  margin-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
}

@media (max-width: 720px) {
  .page-header {
    display: block;
  }

  body:not(.admin-surface) nav {
    margin-top: 16px;
  }

  .admin-hero {
    margin-bottom: 14px;
  }

  /* OMS is a desktop tool (a PC workstation); narrow widths are not a design
     target. This only keeps the bar usable: the wordmark is a normal flex item
     now, so it needs no reserved band above it. */
  .admin-hero nav.primary-nav {
    min-height: 0;
    padding: 0 10px;
    overflow-x: auto;
  }

  .admin-hero nav.primary-nav a.brand {
    min-height: 42px;
    font-size: 1.2rem;
  }

  .admin-hero nav.primary-nav a {
    min-height: 42px;
    flex: 0 0 auto;
    padding: 0 12px;
    font-size: 0.92rem;
  }

  .admin-hero > div {
    padding: 14px;
  }

  .filters {
    grid-template-columns: 1fr;
  }

  .document-actions,
  .inline-upload,
  .xero-sync-panel {
    grid-template-columns: 1fr;
  }

  .xero-sync-counts {
    grid-template-columns: 1fr;
  }

  .summary-grid,
  .summary-grid--compact {
    grid-template-columns: 1fr;
  }

  .admin-grid {
    grid-template-columns: 1fr;
  }

  .payment-terms-page {
    width: min(100% - 24px, 1440px);
  }

  .terms-search,
  .customer-search,
  .term-create-form,
  .shipment-create-form,
  .admin-user-create-form {
    grid-template-columns: 1fr;
  }

  .terms-panel-heading {
    display: block;
  }

  .merge-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
}

/* --- Xero-styled invoice screens (R13) ------------------------------------ */

.breadcrumbs {
  margin: 0 0 6px;
  font-size: 0.85rem;
  color: var(--muted);
}

.breadcrumbs a {
  color: var(--accent);
}

.status-chip {
  display: inline-block;
  margin-left: 12px;
  padding: 1px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #f2f4f6;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  vertical-align: middle;
  white-space: nowrap;
}

.button-primary {
  background: var(--btn-face);
  border: 1px solid var(--btn-border);
  box-shadow: var(--btn-shadow);
  color: var(--btn-text) !important;
}

nav a.button-primary:hover {
  background: var(--btn-face-hover);
  text-decoration: none;
}

.invoice-doc {
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.invoice-doc-header {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 44px;
  margin-bottom: 26px;
}

.invoice-doc-header .field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}

.invoice-doc-header .field-value {
  color: var(--text);
}

.invoice-doc-header .field-value.stacked p {
  margin: 0;
  color: var(--text);
}

.invoice-doc .table-wrap {
  margin-top: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow-x: auto;
}

.invoice-doc table {
  min-width: 640px;
}

.invoice-doc th {
  border-top: 1px solid var(--border);
}

.invoice-totals {
  width: min(360px, 100%);
  margin: 20px 0 0 auto;
}

.invoice-totals .total-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 7px 0;
}

.invoice-totals .total-row.indent {
  padding: 0 0 7px 18px;
  font-size: 0.9rem;
  color: var(--muted);
}

.invoice-totals .total-row.rule {
  border-top: 1px solid var(--border);
  font-weight: 700;
}

.invoice-totals .total-row.due {
  border-top: 2px solid var(--muted);
  font-size: 1.12rem;
  font-weight: 800;
}

.invoice-totals .total-row .amount {
  white-space: nowrap;
}

.xero-list th {
  color: var(--accent);
}

/* R13: long values may wrap to a new line; the Reference column is reserved
   at least 40% of the table width. Amounts (.number) and dates stay one line. */
.xero-list td.nowrap {
  white-space: nowrap;
}

.xero-list td.wrap {
  width: 40%;
  /* pre-line keeps the newlines of multi-line Xero descriptions
     (Item / Style # / NET COST / LANDED FEE, R05.4) while still wrapping. */
  white-space: pre-line;
}

.pager {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  justify-content: flex-end;
}

.amount-currency {
  margin-left: 6px;
  color: var(--muted);
  font-size: 0.82rem;
}

/* R12S4: the New Shipment per-size editor. A wrapping grid of small size boxes,
   each a size label over its quantity input, and a running Qty-to-ship total
   that turns red when the sizes sum above the remaining quantity. */
.ship-sizes .size-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ship-sizes .size-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.78rem;
  color: var(--muted);
}
.ship-sizes .size-box input {
  width: 3.2em;
  text-align: center;
  margin-top: 2px;
}
.ship-sizes .size-total {
  margin: 6px 0 0;
  font-size: 0.9rem;
}
.ship-sizes .size-total output {
  font-weight: 600;
}
.ship-sizes.size-over .size-total output {
  color: var(--error);
}

/* R12S9: the per-line customs editor — compact by default (a <details>
   expander), opening to the four CI-only attributes stacked small. */
.customs-cell {
  vertical-align: top;
}
.line-customs > summary {
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
}
.line-customs[open] > summary {
  margin-bottom: 4px;
}
.line-customs label {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 3px;
}
.line-customs label input {
  display: block;
  width: 9em;
  margin-top: 1px;
}

/* -----------------------------------------------------------------------------
   Manufacturers reference form (References -> Manufacturers).
   Standard reference-page shell — same workspace, alignment and table style as
   Seasons/Payment Terms. The list auto-sizes to its content (no fixed widths, no
   per-page workspace hacks) and keeps one line per row, above two field panels.
   ----------------------------------------------------------------------------- */
.manufacturers-page .refs-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.manufacturers-page .refs-table {
  margin: 0;
}
/* Fill the standard workspace and let the long Address/Contact wrap, so the table
   fits without a horizontal scrollbar and stays aligned like the other reference
   pages (no per-page workspace widening). */
.manufacturers-page .refs-table table {
  width: 100%;
}

.manufacturers-page .man-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}
.manufacturers-page #refs-save-btn {
  align-self: flex-start;
}

/* Two balanced, equal-height field panels. */
.manufacturers-page .man-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.manufacturers-page .man-cols > section {
  padding: 6px 16px 10px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #ffffff;
  box-shadow: var(--shadow);
}
.manufacturers-page .man-cols h2 {
  margin: 0;
  padding: 8px 0;
  font-size: 0.95rem;
  border-bottom: 1px solid #e4e9ee;
}
.manufacturers-page .man-cols label {
  padding: 5px 0;
  font-size: 0.9rem;
}
/* Active: checkbox sits directly left of centre, next to its label, not in the
   right-aligned control column. */
.manufacturers-page .man-check > input {
  flex: none;
  max-width: none;
  margin-left: 0;
}

@media (max-width: 720px) {
  .manufacturers-page .man-cols {
    grid-template-columns: minmax(0, 1fr);
  }
}