/* ============================================================
   Essex Global — Design System (Xero-inspired)
   Light, airy, professional. White sidebar, teal/blue accent,
   generous whitespace. One stylesheet drives every page.
   ============================================================ */

/* Inter — vendored locally, no external dependency */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/inter-latin-800-normal.woff2') format('woff2'); }

:root {
  /* Xero-style palette */
  --teal-500: #13b5ea;     /* Xero signature blue */
  --teal-600: #0e9fd0;
  --teal-700: #0a82ad;
  --teal-50:  #e7f7fd;     /* active nav tint */
  --teal-100: #d0eefb;

  --ink-900: #1f2733;      /* near-black text */
  --ink-700: #4a5263;
  --ink-500: #6b7280;
  --ink-400: #98a0ad;
  --ink-300: #c3c9d2;

  --paper:   #f7f9fb;      /* app background, very light */
  --surface: #ffffff;
  --line:    #eceff3;      /* hairline dividers */
  --line-strong: #dde2e8;

  /* Status (soft, Xero-like) */
  --ok-bg: #e3f6ec;   --ok-fg: #1a8a4f;
  --warn-bg: #fdf3e0; --warn-fg: #a9700d;
  --bad-bg: #fdecec;  --bad-fg: #c23b39;
  --info-bg: #e7f1fd; --info-fg: #2566c7;
  --mute-bg: #eef1f5; --mute-fg: #5e6675;

  /* Layout constants — never vary per page */
  --sidebar-w: 248px;
  --header-h: 64px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(31, 39, 51, .04);
  --shadow: 0 1px 3px rgba(31, 39, 51, .06), 0 1px 2px rgba(31, 39, 51, .04);
  --shadow-pop: 0 4px 12px rgba(31, 39, 51, .10), 0 16px 40px rgba(31, 39, 51, .12);

  --font: "Inter", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

button, input, select, textarea { font-family: var(--font); }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-900);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- App shell ---------- */
.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

/* Sidebar — white, Xero-style */
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.sidebar__brand {
  height: var(--header-h);
  display: flex; align-items: center; gap: 11px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
}
.sidebar__brand-mark {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--teal-500); color: #fff;
  font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: -.5px;
}
.sidebar__brand-name { color: var(--ink-900); font-weight: 700; font-size: 15px; letter-spacing: -.1px; }
.sidebar__brand-sub  { display: block; color: var(--ink-400); font-size: 10.5px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; margin-top: 1px; }

.nav { padding: 14px 12px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.nav__item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  color: var(--ink-700); text-decoration: none;
  border-radius: var(--radius);
  font-weight: 500; font-size: 14px;
  transition: background .12s ease, color .12s ease;
}
.nav__item svg { width: 18px; height: 18px; flex: none; color: var(--ink-400); }
.nav__item:hover { background: var(--paper); color: var(--ink-900); }
.nav__item:hover svg { color: var(--ink-700); }
.nav__item.is-active {
  background: var(--teal-50);
  color: var(--teal-700);
  font-weight: 600;
}
.nav__item.is-active svg { color: var(--teal-600); }

.sidebar__foot {
  margin-top: auto; padding: 16px 20px;
  border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--ink-400);
}

/* ---------- Header ---------- */
.main { display: flex; flex-direction: column; min-width: 0; }
.header {
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 18px;
  padding: 0 28px;
  position: sticky; top: 0; z-index: 40;
}
.header__title { font-size: 18px; font-weight: 700; margin: 0; letter-spacing: -.2px; }
.header__search { flex: 1; max-width: 520px; margin-left: auto; position: relative; }
.header__search input {
  width: 100%; height: 38px;
  padding: 0 14px 0 38px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--paper); font-size: 14px; font-family: inherit;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.header__search input:focus { outline: none; background: var(--surface); border-color: var(--teal-500); box-shadow: 0 0 0 3px var(--teal-50); }
.header__search svg { position: absolute; left: 12px; top: 11px; width: 16px; height: 16px; color: var(--ink-400); }
.header__user { display: flex; align-items: center; gap: 11px; font-size: 14px; color: var(--ink-700); }
.header__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--teal-500); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}

/* Gear dropdown — click-to-open, stays open until click-away/Escape */
.gear { position: relative; }
.gear__btn {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-500); cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.gear__btn:hover { background: var(--paper); color: var(--ink-900); }
.gear__btn svg { width: 19px; height: 19px; }
.gear__btn[aria-expanded="true"] { background: var(--teal-50); color: var(--teal-700); border-color: var(--teal-100); }
.gear__menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: 7px;
  z-index: 60;
}
.gear__heading {
  padding: 9px 12px 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .7px;
  text-transform: uppercase; color: var(--ink-400);
}
.gear__menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  color: var(--ink-900); text-decoration: none;
  border-radius: var(--radius); font-size: 14px;
}
.gear__menu a:hover { background: var(--paper); }
.gear__sep { height: 1px; background: var(--line); margin: 7px 4px; }

/* ---------- Page content ---------- */
.page { padding: 32px; max-width: none; width: 100%; }
.page-header { display: flex; align-items: center; gap: 16px; margin: 0 0 24px; }
.page-header h1 { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -.3px; }
.page-header .actions { margin-left: auto; display: flex; gap: 10px; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card__head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
}
.card__head h2 { font-size: 15px; font-weight: 700; margin: 0; letter-spacing: -.1px; }
.card__head .actions { margin-left: auto; display: flex; gap: 8px; }
.card__body { padding: 22px; }

.stat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-bottom: 24px; }
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 4px; min-height: 98px;
}
.stat__label { font-size: 12.5px; color: var(--ink-500); font-weight: 600; }
.stat__value { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.5px; margin-top: 2px; }
.stat__hint  { font-size: 12px; color: var(--ink-400); }
.stat--accent { box-shadow: var(--shadow-sm), inset 3px 0 0 var(--teal-500); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th {
  text-align: left; padding: 11px 16px;
  font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--ink-400);
  border-bottom: 1px solid var(--line-strong);
  background: var(--surface);
  white-space: nowrap;
}
table.data td {
  padding: 0 16px; height: 52px;            /* airy fixed row height */
  border-bottom: 1px solid var(--line);
  vertical-align: middle; white-space: nowrap;
  color: var(--ink-700);
}
table.data tr:last-child td { border-bottom: none; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
table.data th.num { text-align: right; }
table.data td strong { color: var(--ink-900); font-weight: 600; }
tr.row-link { cursor: pointer; transition: background .1s ease; }
tr.row-link:hover { background: var(--paper); }

/* ---------- Status pills ---------- */
.pill {
  display: inline-flex; align-items: center;
  padding: 3px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .1px;
  white-space: nowrap;
}
.pill--ok   { background: var(--ok-bg);   color: var(--ok-fg); }
.pill--warn { background: var(--warn-bg); color: var(--warn-fg); }
.pill--bad  { background: var(--bad-bg);  color: var(--bad-fg); }
.pill--info { background: var(--info-bg); color: var(--info-fg); }
.pill--mute { background: var(--mute-bg); color: var(--mute-fg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 18px;
  border-radius: var(--radius);
  font-size: 14px; font-weight: 600; font-family: inherit;
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn svg { width: 16px; height: 16px; }
.btn--primary { background: var(--teal-500); color: #fff; }
.btn--primary:hover { background: var(--teal-600); }
.btn--accent { background: var(--teal-500); color: #fff; }
.btn--accent:hover { background: var(--teal-600); }
.btn--ghost { background: var(--surface); color: var(--ink-700); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--paper); color: var(--ink-900); }
.btn--danger { background: var(--surface); color: var(--bad-fg); border-color: #f0cdcc; }
.btn--danger:hover { background: var(--bad-bg); }
.btn--sm { height: 32px; padding: 0 13px; font-size: 13px; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink-700); }
.field .req { color: var(--bad-fg); }
.field input, .field select, .field textarea {
  height: 38px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-size: 14px; font-family: inherit; background: var(--surface); color: var(--ink-900);
}
.field textarea { height: auto; padding: 10px 12px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--teal-500);
  box-shadow: 0 0 0 3px var(--teal-50);
}
.field .error { font-size: 12.5px; color: var(--bad-fg); }
.field.has-error input, .field.has-error select { border-color: var(--bad-fg); }
.form-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  padding-top: 18px; border-top: 1px solid var(--line); margin-top: 10px;
}

/* ---------- Empty state ---------- */
.empty {
  padding: 44px 20px; text-align: center; color: var(--ink-500);
}
.empty svg { width: 36px; height: 36px; color: var(--ink-300); margin-bottom: 10px; }
.empty p { margin: 0 0 4px; font-weight: 600; color: var(--ink-700); }
.empty small { font-size: 13px; }

/* ---------- Money ---------- */
.money { font-variant-numeric: tabular-nums; }
.money--in  { color: var(--ok-fg); }
.money--out { color: var(--bad-fg); }

/* ---------- Login ---------- */
.login-wall {
  min-height: 100vh; display: grid; place-items: center;
  background: var(--paper);
}
.login-card {
  width: 400px; background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 34px;
}
.login-card .sidebar__brand-mark { width: 44px; height: 44px; font-size: 20px; margin-bottom: 18px; }
.login-card h1 { font-size: 19px; margin: 0 0 3px; letter-spacing: -.2px; }
.login-card .sub { color: var(--ink-500); font-size: 13.5px; margin: 0 0 24px; }
.login-logo { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto 20px; }
.login-baseline {
  margin-top: 20px; text-align: center;
  font-size: 12px; color: var(--ink-400);
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) { .stat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: -270px; width: 270px; z-index: 80; transition: left .18s ease; }
  .sidebar.is-open { left: 0; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .page { padding: 20px; }
}

/* ---------- Print: hide chrome ---------- */
@media print {
  .sidebar, .header, .form-actions, .btn { display: none !important; }
  .shell { display: block; }
  body { background: #fff; }
}

/* ---------- Step 5: sales order foundation ---------- */
.filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.filter-bar .field { margin: 0; }
.filter-bar__search { flex: 1; min-width: 260px; }
.table-subline {
  display: block;
  margin-top: 2px;
  color: var(--ink-400);
  font-size: 12px;
  white-space: normal;
}
.pagination-wrap { margin-top: 18px; }
.eyebrow {
  color: var(--teal-700);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .75px;
  text-transform: uppercase;
}
.page-subtitle { color: var(--ink-500); font-size: 13px; margin-top: 3px; }
.section-help { color: var(--ink-500); font-size: 13px; margin: 0 0 16px; }

.notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.notice strong { flex: none; }
.notice span { color: var(--ink-700); }
.notice--warn { border-color: #efd6a5; background: var(--warn-bg); color: var(--warn-fg); }
.notice--bad { border-color: #efc7c6; background: var(--bad-bg); color: var(--bad-fg); }
.notice--info { border-color: #c8ddf8; background: var(--info-bg); color: var(--info-fg); }

.form-grid { display: grid; gap: 0 16px; }
.form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-grid__span-2 { grid-column: span 2; }

.order-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 18px;
  align-items: start;
}
.order-layout__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.order-layout__side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--header-h) + 20px); }
.order-lines-card .card__body { padding: 18px 0 0; }
.order-lines-card .section-help { padding: 0 22px; }
.order-lines-table th:first-child,
.order-lines-table td:first-child { padding-left: 22px; }
.order-lines-table th:last-child,
.order-lines-table td:last-child { padding-right: 18px; }
.order-line-number { width: 42px; color: var(--ink-400); }
.order-product-cell { min-width: 330px; white-space: normal !important; }
.order-product-search,
.order-line-note,
.order-number-input,
.money-input input {
  width: 100%;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-900);
  font: inherit;
}
.order-product-search { padding: 0 10px; font-weight: 600; }
.order-line-note { height: 30px; padding: 0 9px; margin-top: 7px; font-size: 12.5px; color: var(--ink-700); }
.order-number-input { max-width: 100px; padding: 0 9px; text-align: right; font-variant-numeric: tabular-nums; }
.order-product-search:focus,
.order-line-note:focus,
.order-number-input:focus,
.money-input input:focus {
  outline: none;
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px var(--teal-50);
}
.order-line-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 5px;
  color: var(--ink-400);
  font-size: 11.5px;
}
.money-input {
  display: inline-flex;
  align-items: center;
  max-width: 128px;
  position: relative;
}
.money-input span { position: absolute; left: 9px; color: var(--ink-500); z-index: 1; }
.money-input input { padding: 0 8px 0 23px; text-align: right; font-variant-numeric: tabular-nums; }
.icon-button {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-400);
  font: inherit;
  font-size: 20px;
  cursor: pointer;
}
.icon-button:hover { background: var(--bad-bg); color: var(--bad-fg); }

.order-summary-card { box-shadow: var(--shadow); }
.summary-list { margin: 0; }
.summary-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.summary-list > div:last-child { border-bottom: 0; }
.summary-list dt { color: var(--ink-500); }
.summary-list dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.summary-list__total { padding-top: 14px !important; }
.summary-list__total dt,
.summary-list__total dd { color: var(--ink-900); font-size: 17px; font-weight: 750; }
.summary-note { margin: 14px 0 0; color: var(--ink-500); font-size: 12px; line-height: 1.55; }
.workflow-steps { display: flex; flex-direction: column; gap: 14px; }
.workflow-step { display: flex; gap: 11px; align-items: flex-start; color: var(--ink-500); }
.workflow-step > span {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--mute-bg);
  color: var(--mute-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 12px;
  font-weight: 700;
}
.workflow-step.is-current > span { background: var(--teal-500); color: #fff; }
.workflow-step strong { display: block; color: var(--ink-900); font-size: 13px; }
.workflow-step small { display: block; margin-top: 1px; }
.sticky-actions {
  position: sticky;
  bottom: 0;
  z-index: 25;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 18px -32px -32px;
  padding: 14px 32px;
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(31, 39, 51, .06);
  backdrop-filter: blur(8px);
}

.order-page-header { align-items: flex-end; }
.order-page-header h1 { margin: 2px 0 0; }
.order-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}
.order-detail-grid__main,
.order-detail-grid__side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.order-detail-grid__side { position: sticky; top: calc(var(--header-h) + 20px); }
.order-header-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(5, minmax(105px, 1fr));
  gap: 18px;
  align-items: center;
}
.order-customer-link { display: flex; flex-direction: column; gap: 2px; color: var(--teal-700); }
.order-customer-link span { color: var(--ink-700); }
.detail-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.detail-columns > div > span { display: block; margin-bottom: 5px; color: var(--ink-500); font-size: 12px; font-weight: 600; }
.detail-columns p { margin: 0; white-space: pre-line; color: var(--ink-700); }
.event-list { display: flex; flex-direction: column; gap: 15px; }
.event-list__item { display: flex; gap: 10px; align-items: flex-start; }
.event-list__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal-500); margin-top: 6px; flex: none; }
.event-list__item strong { display: block; font-size: 13px; }
.event-list__item small { display: block; color: var(--ink-400); margin-top: 2px; }

@media (max-width: 1180px) {
  .order-layout,
  .order-detail-grid { grid-template-columns: 1fr; }
  .order-layout__side,
  .order-detail-grid__side { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .order-header-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .form-grid--2,
  .form-grid--4,
  .detail-columns,
  .order-layout__side,
  .order-detail-grid__side { grid-template-columns: 1fr; }
  .form-grid__span-2 { grid-column: auto; }
  .order-header-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sticky-actions { margin-left: -20px; margin-right: -20px; margin-bottom: -20px; padding: 12px 20px; }
}

/* ---------- Step 6: picking workflow ---------- */
.picking-page-header { align-items: flex-end; }
.picking-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.picking-stat-grid .stat { text-decoration: none; color: inherit; transition: border-color .12s, box-shadow .12s; }
.picking-stat-grid .stat:hover { border-color: var(--teal-100); box-shadow: var(--shadow); }
.check-cell { width: 46px; text-align: center !important; padding-left: 12px !important; padding-right: 8px !important; }
.check-cell input { width: 16px; height: 16px; accent-color: var(--teal-500); cursor: pointer; }
.check-placeholder { color: var(--ink-300); }
.picking-board-table td { height: 58px; }
.bulk-action-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin: 18px -22px -22px;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.bulk-action-bar span { margin-right: auto; color: var(--ink-500); font-size: 13px; }
.bulk-action-bar .btn:disabled { opacity: .45; cursor: not-allowed; }

.picking-order-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.picking-order-summary > div { padding: 15px 18px; border-right: 1px solid var(--line); }
.picking-order-summary > div:last-child { border-right: 0; }
.picking-order-summary span:not(.pill) { display: block; margin-bottom: 3px; color: var(--ink-500); font-size: 11.5px; font-weight: 600; }
.picking-order-summary strong { color: var(--ink-900); }
.picking-lines-card .card__body { padding: 18px 0 0; }
.picking-lines-card .section-help { padding: 0 22px; }
.picking-lines-table th:first-child,
.picking-lines-table td:first-child { padding-left: 22px; }
.picking-lines-table th:last-child,
.picking-lines-table td:last-child { padding-right: 22px; }
.picking-lines-table td { height: 70px; }
.picking-product-cell { min-width: 180px; white-space: normal !important; }
.picking-line--weight { background: #fffdf8; }
.pick-input,
.pick-reason {
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-900);
  font: inherit;
}
.pick-input { width: 96px; padding: 0 8px; text-align: right; font-variant-numeric: tabular-nums; }
.pick-input--weight { border-color: #e7c77d; background: #fffef9; }
.pick-reason { min-width: 210px; width: 100%; padding: 0 10px; }
.pick-input:focus,
.pick-reason:focus { outline: none; border-color: var(--teal-500); box-shadow: 0 0 0 3px var(--teal-50); }
.picking-footer-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 18px; margin-top: 18px; }
.shortage-confirm { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid #efd6a5; border-radius: var(--radius); background: var(--warn-bg); cursor: pointer; }
.shortage-confirm input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--warn-fg); }
.shortage-confirm strong { display: block; color: var(--warn-fg); font-size: 13px; }
.shortage-confirm small { display: block; color: var(--ink-500); margin-top: 2px; }
.warehouse-notes { margin: 0; white-space: pre-line; color: var(--ink-700); }

@media (max-width: 1100px) {
  .picking-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .picking-order-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .picking-order-summary > div:nth-child(3) { border-right: 0; }
  .picking-order-summary > div:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .picking-stat-grid,
  .picking-footer-grid,
  .picking-order-summary { grid-template-columns: 1fr; }
  .picking-order-summary > div { border-right: 0; border-top: 1px solid var(--line); }
  .picking-order-summary > div:first-child { border-top: 0; }
  .bulk-action-bar { align-items: stretch; flex-direction: column; }
  .bulk-action-bar span { margin-right: 0; }
}

/* ---------- Step 7: invoice production and print finality ---------- */
.btn--block { width: 100%; }
.optional { color: var(--ink-400); font-weight: 500; font-size: 12px; }
.invoice-production-header { align-items: flex-end; }
.invoice-production-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.invoice-ready-card .card__body { padding-bottom: 0; }
.invoice-ready-table td { height: 60px; }
.invoice-run-builder {
  display: grid;
  grid-template-columns: 180px minmax(280px, 1fr) auto auto;
  gap: 16px;
  align-items: end;
  margin: 18px -22px 0;
  padding: 16px 22px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.invoice-run-builder .field { margin: 0; }
.invoice-run-builder input { width: 100%; }
.invoice-run-selection { min-width: 150px; text-align: right; }
.invoice-run-selection strong,
.invoice-run-selection span { display: block; }
.invoice-run-selection strong { font-size: 13px; }
.invoice-run-selection span { margin-top: 3px; color: var(--ink-500); font-variant-numeric: tabular-nums; }
.invoice-run-page-header { align-items: flex-end; }
.invoice-run-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.invoice-run-summary > div { padding: 15px 18px; border-right: 1px solid var(--line); }
.invoice-run-summary > div:last-child { border-right: 0; }
.invoice-run-summary span:not(.pill) { display: block; margin-bottom: 4px; color: var(--ink-500); font-size: 11.5px; font-weight: 600; }
.invoice-run-summary strong { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.invoice-run-layout,
.invoice-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}
.invoice-run-layout__main,
.invoice-run-layout__side,
.invoice-detail-grid__main,
.invoice-detail-grid__side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.invoice-run-layout__side,
.invoice-detail-grid__side { position: sticky; top: calc(var(--header-h) + 20px); }
.invoice-run-documents tfoot th { padding: 14px 16px; border-top: 2px solid var(--line-strong); background: var(--paper); }
.run-note { margin: 0; white-space: pre-line; }
.finality-confirm {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid var(--teal-100);
  border-radius: var(--radius);
  background: var(--teal-50);
  cursor: pointer;
}
.finality-confirm--danger { border-color: #f0cdcc; background: var(--bad-bg); }
.finality-confirm input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--teal-500); }
.finality-confirm--danger input { accent-color: var(--bad-fg); }
.finality-confirm strong { display: block; font-size: 13px; }
.finality-confirm small { display: block; margin-top: 3px; color: var(--ink-500); line-height: 1.4; }
.invoice-detail-header { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.invoice-detail-header > div > span:not(.pill) { display: block; margin-bottom: 5px; color: var(--ink-500); font-size: 11.5px; font-weight: 600; }
.invoice-address { color: var(--ink-700); font-style: normal; line-height: 1.65; }

/* Screen and physical print pack. Fixed-pitch output suits continuous stationery. */
.print-pack-page { margin: 0; background: #dfe4ea; color: #111; font-family: Inter, Arial, sans-serif; }
.print-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 20px;
  background: #fff;
  border-bottom: 1px solid #cfd6df;
  box-shadow: 0 4px 18px rgba(31, 39, 51, .12);
}
.print-toolbar > div:first-child strong,
.print-toolbar > div:first-child span { display: block; }
.print-toolbar > div:first-child span { margin-top: 3px; color: #64748b; font-size: 12px; }
.print-toolbar__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.print-pack { padding: 24px; }
.print-document {
  position: relative;
  width: var(--print-page-width, 210mm);
  min-height: var(--print-page-height, 297mm);
  margin: 0 auto 24px;
  padding: calc(12mm + var(--print-margin-top, 0mm)) 12mm 10mm calc(12mm + var(--print-margin-left, 0mm));
  background: #fff;
  box-shadow: 0 10px 36px rgba(31, 39, 51, .18);
  overflow: hidden;
  font-family: "Courier New", Courier, monospace;
  font-size: var(--print-font-size, 10.5pt);
  line-height: var(--print-line-height, 1.25);
  letter-spacing: var(--print-letter-spacing, 0mm);
  page-break-after: always;
}
.print-document:last-child { page-break-after: auto; }
.print-watermark {
  position: absolute;
  top: 43%;
  left: 10%;
  right: 10%;
  z-index: 0;
  transform: rotate(-25deg);
  color: rgba(185, 122, 0, .12);
  font: 700 58pt/1 Arial, sans-serif;
  letter-spacing: 5px;
  text-align: center;
  pointer-events: none;
}
.print-watermark--cancelled { color: rgba(180, 25, 25, .12); }
.print-document__header,
.print-document__meta,
.print-lines,
.print-document__footer,
.print-footer-line { position: relative; z-index: 1; }
.print-document__header { display: flex; justify-content: space-between; gap: 20mm; min-height: 25mm; border-bottom: 1px solid #111; padding-bottom: 4mm; }
.print-company strong,
.print-company span { display: block; }
.print-company strong { font-size: 15pt; }
.print-company span { margin-top: 2mm; font-size: 9pt; }
.print-document__identity { min-width: 58mm; text-align: right; }
.print-document__type { margin-bottom: 2mm; font-size: 11pt; font-weight: 700; letter-spacing: 1px; }
.print-document__identity strong { font-size: 15pt; }
.print-document__meta { display: grid; grid-template-columns: minmax(0, 1fr) 72mm; gap: 10mm; min-height: 52mm; padding: 5mm 0; }
.print-label { display: block; margin-bottom: 2mm; font-size: 8.5pt; font-weight: 700; text-transform: uppercase; }
.print-address-box strong,
.print-address-box span { display: block; }
.print-address-box strong { margin-bottom: 2mm; }
.print-meta-list { margin: 0; }
.print-meta-list > div { display: grid; grid-template-columns: 25mm 1fr; gap: 3mm; border-bottom: 1px dotted #777; padding: 1.2mm 0; }
.print-meta-list dt,
.print-meta-list dd { margin: 0; }
.print-meta-list dt { font-weight: 700; }
.print-meta-list dd { text-align: right; }
.print-lines { width: 100%; border-collapse: collapse; table-layout: fixed; }
.print-lines th,
.print-lines td { padding: 2.2mm 1.5mm; border-bottom: 1px solid #777; vertical-align: top; }
.print-lines th { font-size: 8.5pt; text-align: left; border-top: 1px solid #111; border-bottom: 1px solid #111; }
.print-lines th:nth-child(1), .print-lines td:nth-child(1) { width: 20mm; }
.print-lines th:nth-child(2), .print-lines td:nth-child(2) { width: auto; }
.print-lines th:nth-child(3), .print-lines td:nth-child(3) { width: 16mm; }
.print-lines th:nth-child(4), .print-lines td:nth-child(4) { width: 21mm; }
.print-lines th:nth-child(5), .print-lines td:nth-child(5) { width: 14mm; }
.print-lines th:nth-child(6), .print-lines td:nth-child(6) { width: 22mm; }
.print-lines th:nth-child(7), .print-lines td:nth-child(7) { width: 14mm; }
.print-lines th:nth-child(8), .print-lines td:nth-child(8) { width: 23mm; }
.print-lines .num { text-align: right; font-variant-numeric: tabular-nums; }
.print-document__footer { display: grid; grid-template-columns: minmax(0, 1fr) 65mm; gap: 12mm; margin-top: 6mm; }
.print-notes p { min-height: 18mm; margin: 0; white-space: pre-line; }
.cash-message { display: block; margin-top: 3mm; font-size: 11pt; }
.print-totals { margin: 0; }
.print-totals > div { display: flex; justify-content: space-between; gap: 10mm; padding: 1.5mm 0; border-bottom: 1px solid #777; }
.print-totals dt,
.print-totals dd { margin: 0; }
.print-totals dd { margin-left: auto; font-variant-numeric: tabular-nums; }
.print-totals__gross { border-top: 2px solid #111; font-size: 12pt; font-weight: 700; }
.print-document__header,
.print-document__meta,
.print-lines,
.print-document__footer,
.print-footer-line {
  transform: translate(var(--print-offset-x, 0mm), var(--print-offset-y, 0mm));
  transform-origin: top left;
}
.print-footer-line { position: absolute; left: 12mm; right: 12mm; bottom: 7mm; display: flex; justify-content: space-between; font-size: 8pt; }
.print-pack--preprinted .static-only { visibility: hidden !important; }
.print-pack--preprinted .print-document { box-shadow: none; }
.print-pack--preprinted .print-document__header,
.print-pack--preprinted .print-lines th,
.print-pack--preprinted .print-lines td,
.print-pack--preprinted .print-meta-list > div,
.print-pack--preprinted .print-totals > div { border-color: transparent; }

@media (max-width: 1100px) {
  .invoice-production-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invoice-run-builder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invoice-run-layout,
  .invoice-detail-grid { grid-template-columns: 1fr; }
  .invoice-run-layout__side,
  .invoice-detail-grid__side { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invoice-run-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .invoice-run-summary > div:nth-child(3) { border-right: 0; }
  .invoice-run-summary > div:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .invoice-production-stats,
  .invoice-run-builder,
  .invoice-run-layout__side,
  .invoice-detail-grid__side,
  .invoice-detail-header,
  .invoice-run-summary { grid-template-columns: 1fr; }
  .invoice-run-summary > div { border-right: 0; border-top: 1px solid var(--line); }
  .invoice-run-summary > div:first-child { border-top: 0; }
  .print-toolbar { align-items: flex-start; flex-direction: column; }
  .print-document { width: 100%; min-height: auto; }
}

@media print {
  @page { size: A4 portrait; margin: 0; }
  .no-print { display: none !important; }
  .print-pack-page { background: #fff; }
  .print-pack { padding: 0; }
  .print-document {
    width: var(--print-page-width, 210mm);
    height: var(--print-page-height, 297mm);
    min-height: var(--print-page-height, 297mm);
    margin: 0;
    padding: calc(12mm + var(--print-margin-top, 0mm)) 12mm 10mm calc(12mm + var(--print-margin-left, 0mm));
    box-shadow: none;
  }
}

/* ---------- Step 8: spacing stabilisation + payments ---------- */
/* Vertical rhythm is deliberately centralised here so operational pages do not drift. */
.page-header { min-height: 48px; }
.field--no-margin { margin-bottom: 0; }
.filter-bar--aligned { align-items: center; }
.filter-bar--aligned .field input,
.filter-bar--aligned .field select,
.filter-bar--aligned .btn { height: 38px; }

/* Compact, balanced empty states. Prevent large blank panels on wide screens. */
.empty {
  min-height: 132px;
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.empty svg { width: 31px; height: 31px; margin-bottom: 8px; }
.invoice-ready-card,
.recent-runs-card { margin-bottom: 18px; }
.invoice-ready-card .card__body,
.recent-runs-card .card__body { padding: 20px 22px; }
.invoice-ready-card .filter-bar { margin-bottom: 16px; }
.invoice-ready-card .table-wrap { border: 1px solid var(--line); border-radius: var(--radius); }
.invoice-ready-card .invoice-run-builder { margin-left: 0; margin-right: 0; margin-bottom: 0; border: 1px solid var(--line); border-top: 0; }

/* Order entry lines: content determines row height; controls never collide with the next row. */
.order-lines-card .card__body { padding: 18px 0 0; }
.order-lines-table { table-layout: fixed; min-width: 1040px; }
.order-lines-table th { padding-top: 12px; padding-bottom: 12px; }
.order-lines-table td {
  height: auto;
  min-height: 104px;
  padding-top: 14px;
  padding-bottom: 14px;
  vertical-align: top;
  overflow: visible;
}
.order-lines-table td:not(.order-product-cell) { vertical-align: middle; }
.order-product-cell { min-width: 330px; width: 34%; }
.order-product-search { display: block; }
.order-line-meta { min-height: 18px; margin: 7px 0 8px; line-height: 1.35; }
.order-line-note { display: block; margin-top: 0; }
.order-number-input,
.money-input { margin-top: 0; }
.order-lines-table .pill { white-space: nowrap; }

.payment-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.payment-entry-grid,
.payment-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 18px;
  align-items: start;
}
.payment-entry-grid__main,
.payment-detail-grid__main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.payment-entry-grid__main > .card,
.payment-detail-grid__main > .card { margin-top: 0; }
.payment-entry-grid__side,
.payment-detail-grid__side { position: sticky; top: calc(var(--header-h) + 20px); display: flex; flex-direction: column; gap: 18px; }
.payment-entry-grid__side > .card,
.payment-detail-grid__side > .card { margin-top: 0; }
.customer-loader-card { margin-bottom: 18px; }
.customer-loader-card .card__body { padding-top: 16px; padding-bottom: 16px; }
.customer-loader { display: grid; grid-template-columns: minmax(320px, 620px) auto; gap: 12px; align-items: end; }
.customer-loader .field { margin: 0; }
.customer-payment-summary,
.payment-detail-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  margin-bottom: 20px;
}
.customer-payment-summary > div,
.payment-detail-summary > div { padding: 14px 16px; border-right: 1px solid var(--line); min-width: 0; }
.customer-payment-summary > div:last-child,
.payment-detail-summary > div:last-child { border-right: 0; }
.customer-payment-summary span,
.payment-detail-summary span:not(.pill) { display: block; margin-bottom: 4px; color: var(--ink-500); font-size: 11.5px; font-weight: 600; }
.customer-payment-summary strong,
.payment-detail-summary strong { display: block; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.payment-detail-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }
.payment-detail-fields .field { margin-bottom: 0; }
.payment-split-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.payment-method-card { border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: 18px; background: var(--paper); }
.payment-method-card--cash { box-shadow: inset 3px 0 0 var(--ok-fg); }
.payment-method-card--bank { box-shadow: inset 3px 0 0 var(--info-fg); }
.payment-method-card__title { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 14px; }
.payment-method-card__title span { font-weight: 700; font-size: 15px; }
.payment-method-card__title small { color: var(--ink-500); }
.money-field { position: relative; display: flex; align-items: center; }
.money-field > span { position: absolute; left: 13px; color: var(--ink-500); font-weight: 600; }
.money-field input { width: 100%; height: 44px; padding: 0 12px 0 30px; border: 1px solid var(--line-strong); border-radius: var(--radius); font: inherit; font-size: 18px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.money-field input:focus { outline: none; border-color: var(--teal-500); box-shadow: 0 0 0 3px var(--teal-50); }
.compact-field { margin: 13px 0 0; }
.payment-total-strip { display: flex; align-items: center; justify-content: space-between; margin: 18px -22px -22px; padding: 15px 22px; border-top: 1px solid var(--line); background: var(--paper); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.payment-total-strip span { color: var(--ink-500); font-weight: 600; }
.payment-total-strip strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.allocation-toolbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.allocation-toolbar--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice-card { display: flex; align-items: flex-start; gap: 10px; padding: 13px; border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer; background: var(--surface); }
.choice-card:has(input:checked) { border-color: var(--teal-500); background: var(--teal-50); box-shadow: 0 0 0 2px var(--teal-50); }
.choice-card input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--teal-500); flex: none; }
.choice-card strong, .choice-card small { display: block; }
.choice-card strong { font-size: 13px; }
.choice-card small { margin-top: 2px; color: var(--ink-500); line-height: 1.4; }
.allocation-card .card__body { padding-bottom: 20px; }
.allocation-table-wrap { border: 1px solid var(--line); border-radius: var(--radius); }
.allocation-table td { height: 60px; }
.allocation-input { width: 120px; }
.allocation-input input:disabled { background: var(--mute-bg); color: var(--ink-400); cursor: not-allowed; }
.payment-summary-card { box-shadow: var(--shadow); }
.card-action-row { display: flex; justify-content: flex-end; margin: 16px -22px -20px; padding: 14px 22px 0; border-top: 1px solid var(--line); }
.is-muted-row { opacity: .58; background: var(--paper); }
.ledger-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }

@media (max-width: 1180px) {
  .payment-entry-grid,
  .payment-detail-grid { grid-template-columns: 1fr; }
  .payment-entry-grid__side,
  .payment-detail-grid__side { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payment-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payment-detail-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .payment-detail-summary > div:nth-child(3) { border-right: 0; }
}
@media (max-width: 760px) {
  .payment-stat-grid,
  .ledger-stat-grid,
  .payment-split-grid,
  .allocation-toolbar,
  .allocation-toolbar--compact,
  .customer-payment-summary,
  .payment-detail-summary,
  .payment-entry-grid__side,
  .payment-detail-grid__side { grid-template-columns: 1fr; }
  .customer-loader { grid-template-columns: 1fr; }
  .customer-payment-summary > div,
  .payment-detail-summary > div { border-right: 0; border-top: 1px solid var(--line); }
  .customer-payment-summary > div:first-child,
  .payment-detail-summary > div:first-child { border-top: 0; }
}
.order-lines-table th:nth-child(1), .order-lines-table td:nth-child(1) { width: 46px; }
.order-lines-table th:nth-child(3), .order-lines-table td:nth-child(3),
.order-lines-table th:nth-child(4), .order-lines-table td:nth-child(4) { width: 116px; }
.order-lines-table th:nth-child(5), .order-lines-table td:nth-child(5) { width: 142px; }
.order-lines-table th:nth-child(6), .order-lines-table td:nth-child(6) { width: 106px; }
.order-lines-table th:nth-child(7), .order-lines-table td:nth-child(7) { width: 122px; }
.order-lines-table th:nth-child(8), .order-lines-table td:nth-child(8) { width: 52px; }

/* ---------- Step 9: credit notes, statements and weekly aged debt ---------- */
.credit-source-picker {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
  gap: 16px;
  align-items: end;
}
.credit-entry-grid,
.credit-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}
.credit-entry-grid__main,
.credit-detail-grid__main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.credit-entry-grid__side,
.credit-detail-grid__side {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.credit-lines-card .card__body { padding: 18px 0 0; }
.credit-lines-card .section-help { padding: 0 22px; margin-bottom: 16px; }
.credit-lines-table { min-width: 1180px; table-layout: fixed; }
.credit-lines-table th { padding-top: 12px; padding-bottom: 12px; }
.credit-lines-table td {
  height: auto;
  min-height: 92px;
  padding-top: 13px;
  padding-bottom: 13px;
  vertical-align: middle;
}
.credit-lines-table th:first-child,
.credit-lines-table td:first-child { width: 44px; padding-left: 22px; }
.credit-lines-table th:nth-child(2),
.credit-lines-table td:nth-child(2) { width: 330px; }
.credit-lines-table th:nth-child(3),
.credit-lines-table td:nth-child(3) { width: 90px; }
.credit-lines-table th:nth-child(4),
.credit-lines-table td:nth-child(4),
.credit-lines-table th:nth-child(5),
.credit-lines-table td:nth-child(5) { width: 105px; }
.credit-lines-table th:nth-child(6),
.credit-lines-table td:nth-child(6) { width: 130px; }
.credit-lines-table th:nth-child(7),
.credit-lines-table td:nth-child(7) { width: 90px; }
.credit-lines-table th:nth-child(8),
.credit-lines-table td:nth-child(8) { width: 112px; }
.credit-lines-table th:nth-child(9),
.credit-lines-table td:nth-child(9) { width: 110px; }
.credit-lines-table th:last-child,
.credit-lines-table td:last-child { width: 48px; padding-right: 18px; }
.credit-description-cell { white-space: normal !important; }
.credit-product-select,
.credit-description-input,
.credit-unit,
.credit-number {
  width: 100%;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-900);
  font: inherit;
  padding: 0 9px;
}
.credit-description-input { margin-top: 8px; }
.credit-number { text-align: right; font-variant-numeric: tabular-nums; }
.credit-product-select:focus,
.credit-description-input:focus,
.credit-unit:focus,
.credit-number:focus {
  outline: none;
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px var(--teal-50);
}
.credit-lines-actions {
  display: flex;
  justify-content: flex-start;
  padding: 16px 22px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.switch-check { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-700); }
.switch-check input { width: 16px; height: 16px; accent-color: var(--teal-500); }
.allocation-choice-stack,
.stack-actions { display: flex; flex-direction: column; gap: 10px; }
.credit-detail-summary,
.statement-summary,
.aged-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.credit-detail-summary > div,
.statement-summary > div,
.aged-summary > div {
  padding: 15px 17px;
  border-right: 1px solid var(--line);
  min-width: 0;
}
.credit-detail-summary > div:last-child,
.statement-summary > div:last-child,
.aged-summary > div:last-child { border-right: 0; }
.credit-detail-summary span,
.statement-summary span,
.aged-summary span {
  display: block;
  margin-bottom: 4px;
  color: var(--ink-500);
  font-size: 11.5px;
  font-weight: 600;
}
.credit-detail-summary strong,
.statement-summary strong,
.aged-summary strong { display: block; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.statement-summary { margin-bottom: 18px; }
.statement-table-wrap,
.allocation-table-wrap { border: 1px solid var(--line); border-radius: var(--radius); }
.statement-opening { background: var(--paper); }
.statement-opening td { height: 46px; }
.report-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.report-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-height: 150px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  color: var(--ink-900);
  text-decoration: none;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.report-card:hover { border-color: var(--teal-100); box-shadow: var(--shadow); transform: translateY(-1px); }
.report-card__icon {
  width: 42px; height: 42px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--teal-50); color: var(--teal-700); font-weight: 800; flex: none;
}
.report-card strong { display: block; font-size: 16px; margin-bottom: 6px; }
.report-card p { margin: 0; color: var(--ink-500); line-height: 1.55; }
.report-card--disabled { opacity: .62; cursor: default; }
.report-card--disabled:hover { transform: none; border-color: var(--line); box-shadow: var(--shadow-sm); }
.aged-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 18px; }
.aged-table { min-width: 1280px; }
.aged-table th { white-space: normal; line-height: 1.3; vertical-align: bottom; }
.aged-table tfoot th { padding: 13px 16px; border-top: 2px solid var(--line-strong); background: var(--paper); }

@media (max-width: 1180px) {
  .credit-entry-grid,
  .credit-detail-grid { grid-template-columns: 1fr; }
  .credit-entry-grid__side,
  .credit-detail-grid__side { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .credit-source-picker,
  .credit-entry-grid__side,
  .credit-detail-grid__side,
  .credit-detail-summary,
  .statement-summary,
  .aged-summary,
  .report-grid { grid-template-columns: 1fr; }
  .credit-detail-summary > div,
  .statement-summary > div,
  .aged-summary > div { border-right: 0; border-top: 1px solid var(--line); }
  .credit-detail-summary > div:first-child,
  .statement-summary > div:first-child,
  .aged-summary > div:first-child { border-top: 0; }
}

@media print {
  .aged-filter { display: none !important; }
  .report-grid { display: block; }
  .aged-table { min-width: 0; font-size: 9px; }
  .aged-table th, .aged-table td { padding: 4px 5px; }
}

/* ---------- Step 10: cash-up, bank reconciliation and alignment hardening ---------- */
/* Buttons align to the input control baseline, not the combined label + control box. */
.filter-bar--aligned { align-items: flex-end; }
.filter-bar--aligned > .btn,
.filter-bar--aligned > a.btn { align-self: flex-end; flex: none; }
.filter-bar--aligned .field { justify-content: flex-end; }
.filter-bar--aligned .field input,
.filter-bar--aligned .field select,
.filter-bar--aligned .btn { min-height: 38px; }
.control-filter .filter-bar__search { min-width: 230px; }

button:disabled,
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

.control-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.control-summary {
  display: grid;
  margin-bottom: 18px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.control-summary--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.control-summary--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.control-summary > div {
  min-width: 0;
  padding: 15px 18px;
  border-right: 1px solid var(--line);
}
.control-summary > div:last-child { border-right: 0; }
.control-summary span,
.reconciliation-detail-grid span {
  display: block;
  margin-bottom: 4px;
  color: var(--ink-500);
  font-size: 11.5px;
  font-weight: 600;
}
.control-summary strong,
.reconciliation-detail-grid strong {
  display: block;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.control-table .check-cell { width: 46px; text-align: center; }
.selection-footer {
  min-height: 64px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.selection-footer span { color: var(--ink-500); }
.selection-footer strong { color: var(--ink-900); }

.cashup-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(330px, .7fr);
  align-items: start;
  gap: 18px;
  margin-bottom: 18px;
}
.cashup-side { display: grid; gap: 18px; }
.denomination-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.denomination-row {
  min-height: 46px;
  display: grid;
  grid-template-columns: 58px 88px minmax(80px, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.denomination-row label { font-weight: 700; color: var(--ink-700); }
.denomination-row input {
  width: 88px;
  height: 36px;
  padding: 0 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font: inherit;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.denomination-row input:focus { outline: none; border-color: var(--teal-500); box-shadow: 0 0 0 3px var(--teal-50); }
.denomination-total { text-align: right; font-variant-numeric: tabular-nums; }
.count-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding: 15px 16px;
  border-radius: var(--radius);
  background: var(--teal-50);
  color: var(--teal-700);
}
.count-total strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.cash-check-line {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.cash-check-line span { color: var(--ink-500); }
.cash-check-line strong { font-variant-numeric: tabular-nums; }
.cashup-actions { display: flex; justify-content: flex-end; gap: 10px; }
.danger-action { display: flex; justify-content: flex-end; margin: -2px 0 18px; }

.statement-equation {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 4px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
}
.statement-equation > div { padding: 13px 16px; background: var(--paper); }
.statement-equation span { display: block; color: var(--ink-500); font-size: 12px; margin-bottom: 3px; }
.statement-equation strong { display: block; font-variant-numeric: tabular-nums; }
.statement-entry-table { min-width: 1040px; }
.statement-entry-table td { height: auto; min-height: 58px; padding-top: 10px; padding-bottom: 10px; }
.statement-entry-table input,
.statement-entry-table select,
.manual-match select {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-900);
  font: inherit;
}
.statement-entry-table td:nth-child(1) { width: 150px; }
.statement-entry-table td:nth-child(2) { min-width: 280px; }
.statement-entry-table td:nth-child(3) { min-width: 220px; }
.statement-entry-table td:nth-child(4) { width: 120px; }
.statement-entry-table td:nth-child(5) { width: 150px; }
.statement-entry-table td:last-child { width: 52px; padding-left: 6px; padding-right: 12px; }
.table-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 18px;
}
.reconciliation-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.reconciliation-toolbar__right { display: flex; gap: 10px; align-items: center; }
.reconciliation-toolbar form { margin: 0; }
.reconciliation-table { min-width: 1120px; }
.reconciliation-table td { height: auto; min-height: 64px; padding-top: 11px; padding-bottom: 11px; white-space: normal; }
.reconciliation-table td:last-child { min-width: 430px; }
.match-result,
.manual-match,
.manual-match form {
  display: flex;
  align-items: center;
  gap: 9px;
}
.match-result { justify-content: space-between; }
.match-result > div { min-width: 0; }
.match-result strong,
.match-result span { display: block; }
.match-result strong { margin-top: 5px; color: var(--ink-900); }
.match-result span { color: var(--ink-500); font-size: 12px; }
.manual-match { flex-wrap: wrap; }
.manual-match form:first-child { flex: 1; min-width: 290px; }
.manual-match select { min-width: 260px; }
.reconciliation-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.reconciliation-detail-grid > div { padding: 4px 18px; border-right: 1px solid var(--line); }
.reconciliation-detail-grid > div:first-child { padding-left: 0; }
.reconciliation-detail-grid > div:last-child { border-right: 0; padding-right: 0; }

@media (max-width: 1220px) {
  .control-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .control-summary--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .control-summary--6 > div:nth-child(3) { border-right: 0; }
  .control-summary--6 > div:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .cashup-layout { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .control-stat-grid,
  .control-summary--5,
  .control-summary--6,
  .statement-equation,
  .reconciliation-detail-grid { grid-template-columns: 1fr; }
  .control-summary > div,
  .reconciliation-detail-grid > div { border-right: 0; border-bottom: 1px solid var(--line); padding: 13px 16px; }
  .control-summary > div:last-child,
  .reconciliation-detail-grid > div:last-child { border-bottom: 0; }
  .denomination-grid { grid-template-columns: 1fr; }
  .reconciliation-toolbar,
  .table-actions { align-items: stretch; flex-direction: column; }
  .reconciliation-toolbar__right { flex-wrap: wrap; }
}

/* ---------- Step 11: centralised Tally printing and final spacing pass ---------- */
.cashup-filter-grid {
  display: grid;
  grid-template-columns: 142px 112px minmax(240px, 360px) auto auto;
  align-items: end;
  justify-content: start;
  gap: 10px;
  margin-bottom: 18px;
}
.cashup-filter-grid .field { margin: 0; min-width: 0; }
.cashup-filter-grid .field input,
.cashup-filter-grid .field select,
.cashup-filter-grid .btn { width: 100%; min-height: 38px; }
.cashup-filter-grid > .btn { width: auto; align-self: end; }
.cashup-filter-grid__collector { width: 100%; }

.printing-settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  gap: 18px;
}
.printing-settings-main,
.printing-settings-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.printing-settings-side { position: sticky; top: calc(var(--header-h) + 20px); }
.printing-settings-main > .card,
.printing-settings-side > .card { margin: 0; }
.settings-form-grid { display: grid; gap: 16px; }
.settings-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.settings-form-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.print-dimensions-row { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.settings-help { margin: 16px 0 0; color: var(--ink-500); font-size: 12.5px; line-height: 1.55; }
.calibration-table-wrap { border: 1px solid var(--line); border-radius: var(--radius); }
.calibration-table { min-width: 900px; }
.calibration-table td { height: 64px; }
.table-control,
.table-number-control {
  height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-900);
  font: inherit;
}
.table-control { min-width: 170px; padding: 0 10px; }
.table-number-control { width: 112px; padding: 0 10px; text-align: right; font-variant-numeric: tabular-nums; }
.table-number-control--copies { width: 76px; }
.table-control:focus,
.table-number-control:focus { outline: none; border-color: var(--teal-500); box-shadow: 0 0 0 3px var(--teal-50); }
.settings-summary-list { margin: 0; }
.settings-summary-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.settings-summary-list > div:first-child { padding-top: 0; }
.settings-summary-list > div:last-child { padding-bottom: 0; border-bottom: 0; }
.settings-summary-list dt { color: var(--ink-500); }
.settings-summary-list dd { margin: 0; text-align: right; font-weight: 700; }
.calibration-steps { margin: 0; padding-left: 20px; color: var(--ink-600); font-size: 13px; line-height: 1.55; }
.calibration-steps li + li { margin-top: 8px; }
.settings-warning { padding: 16px 17px; border: 1px solid var(--warn-border, #ecd7a6); border-radius: var(--radius-lg); background: var(--warn-bg); color: var(--warn-fg); }
.settings-warning strong,
.settings-warning span { display: block; }
.settings-warning span { margin-top: 5px; font-size: 12.5px; line-height: 1.5; }
.printing-settings-actions { margin-top: 20px; }

@media (max-width: 1180px) {
  .printing-settings-layout { grid-template-columns: 1fr; }
  .printing-settings-side { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-form-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cashup-filter-grid { grid-template-columns: 142px 112px minmax(220px, 1fr) auto auto; }
}
@media (max-width: 760px) {
  .cashup-filter-grid,
  .settings-form-grid--3,
  .settings-form-grid--4,
  .printing-settings-side { grid-template-columns: 1fr; }
  .cashup-filter-grid > .btn { width: 100%; }
}

/* ---------- Step 11.1: cash-up spacing correction ---------- */
.cashup-card-stack {
  display: grid;
  gap: 18px;
}
.cashup-card-stack > .card { margin: 0; }

/* Keep the cash-up filter controls on one aligned row at normal desktop widths. */
.cashup-filter-grid {
  display: flex !important;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.cashup-filter-grid > .field { margin: 0; min-width: 0; }
.cashup-filter-grid > .field:nth-child(1) { flex: 0 0 142px; }
.cashup-filter-grid > .field:nth-child(2) { flex: 0 0 112px; }
.cashup-filter-grid > .cashup-filter-grid__collector { flex: 0 1 360px; }
.cashup-filter-grid > .btn,
.cashup-filter-grid > a.btn {
  flex: 0 0 auto;
  width: auto;
  align-self: flex-end;
}

@media (max-width: 760px) {
  .cashup-filter-grid { align-items: stretch; }
  .cashup-filter-grid > .field:nth-child(1),
  .cashup-filter-grid > .field:nth-child(2),
  .cashup-filter-grid > .cashup-filter-grid__collector,
  .cashup-filter-grid > .btn,
  .cashup-filter-grid > a.btn {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* ---------- Step 12: purchasing, goods receipt and creditor control ---------- */
.control-stat-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.control-stat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.control-stat-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.purchase-filter-bar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.purchase-filter-bar .field { margin: 0; min-width: 0; }
.purchase-filter-bar .filter-bar__search { flex: 1 1 320px; }
.purchase-filter-status { flex: 0 0 170px; }
.purchase-filter-supplier { flex: 0 1 300px; }
.purchase-date-field { flex: 0 0 155px; }
.purchase-filter-bar .btn { flex: 0 0 auto; align-self: flex-end; }

.purchase-master-form,
.purchase-card-stack,
.purchase-order-layout__main,
.purchase-order-layout__side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.purchase-master-form > .card,
.purchase-card-stack > .card,
.purchase-order-layout__main > .card,
.purchase-order-layout__side > .card { margin: 0; }

.purchase-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.purchase-card-grid > .card { margin: 0; }
.purchase-address-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.purchase-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.checkbox-line {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  color: var(--ink-700);
  font-weight: 600;
  cursor: pointer;
}
.checkbox-line input { width: 16px; height: 16px; margin: 0; accent-color: var(--teal-500); }
.checkbox-line--compact { min-height: 30px; font-size: 12.5px; font-weight: 500; }

.purchase-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.purchase-detail-grid > .card { margin: 0; }
.detail-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0; }
.detail-list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.detail-list > div {
  min-width: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.detail-list dt { margin: 0 0 4px; color: var(--ink-500); font-size: 11.5px; font-weight: 600; }
.detail-list dd { margin: 0; color: var(--ink-900); font-weight: 650; overflow-wrap: anywhere; }

.purchase-order-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 18px;
  align-items: start;
}
.purchase-order-layout__side { position: sticky; top: calc(var(--header-h) + 20px); }
.purchase-order-header-grid {
  grid-template-columns: minmax(260px, 1.55fr) repeat(3, minmax(135px, .65fr));
  align-items: end;
}
.purchase-header-reference { grid-column: span 2; }
.purchase-lines-card .card__body,
.goods-receipt-lines-card .card__body { padding: 0; }
.purchase-lines-help {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-500);
  font-size: 12.5px;
}
.purchase-lines-help .btn { flex: none; }
.purchase-lines-table { min-width: 1180px; table-layout: fixed; }
.purchase-lines-table th,
.purchase-lines-table td { vertical-align: top; }
.purchase-lines-table th:nth-child(1), .purchase-lines-table td:nth-child(1) { width: 42px; }
.purchase-lines-table th:nth-child(2), .purchase-lines-table td:nth-child(2) { width: 350px; }
.purchase-lines-table th:nth-child(3), .purchase-lines-table td:nth-child(3),
.purchase-lines-table th:nth-child(4), .purchase-lines-table td:nth-child(4),
.purchase-lines-table th:nth-child(5), .purchase-lines-table td:nth-child(5) { width: 100px; }
.purchase-lines-table th:nth-child(6), .purchase-lines-table td:nth-child(6) { width: 135px; }
.purchase-lines-table th:nth-child(7), .purchase-lines-table td:nth-child(7) { width: 145px; }
.purchase-lines-table th:nth-child(8), .purchase-lines-table td:nth-child(8) { width: 100px; }
.purchase-lines-table th:nth-child(9), .purchase-lines-table td:nth-child(9) { width: 48px; }
.purchase-line-row td { min-height: 142px; padding-top: 12px; padding-bottom: 12px; }
.purchase-line-number { padding-top: 22px !important; font-weight: 700; color: var(--ink-500); }
.purchase-product-cell { display: grid; gap: 7px; }
.purchase-product-select,
.purchase-line-description,
.purchase-line-note,
.purchase-number,
.purchase-lines-table .vat,
.receipt-number,
.receipt-line-note,
.supplier-document-lines input,
.supplier-document-lines select {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-900);
  font: inherit;
}
.purchase-product-select:focus,
.purchase-line-description:focus,
.purchase-line-note:focus,
.purchase-number:focus,
.purchase-lines-table .vat:focus,
.receipt-number:focus,
.receipt-line-note:focus,
.supplier-document-lines input:focus,
.supplier-document-lines select:focus {
  outline: none;
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px var(--teal-50);
}
.purchase-line-note,
.receipt-line-note { color: var(--ink-600); font-size: 12px; }
.purchase-number,
.receipt-number { text-align: right; font-variant-numeric: tabular-nums; }
.purchase-number:disabled,
.receipt-number:disabled { background: var(--mute-bg); color: var(--ink-400); cursor: not-allowed; }
.purchase-unit-hint { min-height: 16px; color: var(--ink-500); font-size: 11.5px; }
.purchase-remove-line {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  margin-top: 4px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-400);
  font-size: 20px;
  cursor: pointer;
}
.purchase-remove-line:hover { background: var(--bad-bg); color: var(--bad-fg); }
.money-input { position: relative; display: flex; align-items: center; }
.money-input > span { position: absolute; left: 11px; color: var(--ink-500); font-weight: 600; pointer-events: none; }
.money-input input { padding-left: 28px !important; text-align: right; font-variant-numeric: tabular-nums; }

.purchase-total-list { display: grid; gap: 0; }
.purchase-total-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.purchase-total-list > div:first-child { padding-top: 0; }
.purchase-total-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.purchase-total-list span { color: var(--ink-500); }
.purchase-total-list strong { font-variant-numeric: tabular-nums; }
.purchase-total-list__gross { margin-top: 3px; color: var(--ink-900); font-size: 16px; }
.purchase-total-list__gross strong { font-size: 21px; }

.purchase-summary { margin-bottom: 18px; }
.purchase-action-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.purchase-control-links { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.purchase-cancel-form { margin: 0; }

.goods-receipt-header-grid { grid-template-columns: 155px minmax(220px, .75fr) minmax(320px, 1.5fr); }
.goods-receipt-table { min-width: 1200px; }
.goods-receipt-table td { min-height: 72px; vertical-align: top; padding-top: 11px; padding-bottom: 11px; }
.goods-receipt-table td:first-child { min-width: 300px; }
.goods-receipt-table .receipt-line-note { margin-top: 8px; }
.goods-receipt-table td:nth-child(n+6):nth-child(-n+8) { width: 125px; }
.receipt-over-cell { width: 100px; }
.section-help { margin: 0; padding: 13px 20px; border-bottom: 1px solid var(--line); color: var(--ink-500); font-size: 12.5px; line-height: 1.5; }

.supplier-selector-form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.supplier-selector-form .field { flex: 1 1 340px; margin: 0; }
.supplier-selector-form .btn { flex: 0 0 auto; }
.supplier-document-heading { margin-bottom: 18px; }
.supplier-document-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.supplier-document-notes { grid-column: 1 / -1; }
.supplier-document-lines { min-width: 1050px; table-layout: fixed; }
.supplier-document-lines td { min-height: 118px; vertical-align: top; padding-top: 11px; padding-bottom: 11px; }
.supplier-document-lines th:nth-child(1), .supplier-document-lines td:nth-child(1) { width: 310px; }
.supplier-document-lines th:nth-child(2), .supplier-document-lines td:nth-child(2) { width: 90px; }
.supplier-document-lines th:nth-child(3), .supplier-document-lines td:nth-child(3) { width: 115px; }
.supplier-document-lines th:nth-child(4), .supplier-document-lines td:nth-child(4) { width: 135px; }
.supplier-document-lines th:nth-child(5), .supplier-document-lines td:nth-child(5) { width: 145px; }
.supplier-document-lines th:nth-child(6), .supplier-document-lines td:nth-child(6) { width: 100px; }
.supplier-product-cell { display: grid; gap: 7px; }
.field-hint { display: block; margin-top: 5px; color: var(--ink-500); font-size: 11.5px; line-height: 1.45; }
.supplier-credit-allocation[hidden] { display: none !important; }
.supplier-credit-allocation { margin-top: 18px; }
.supplier-payment-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.supplier-payment-reference { grid-column: span 2; }
.supplier-payment-notes { grid-column: 1 / -1; }

.aged-creditors-table { min-width: 1080px; }
.aged-creditors-table tfoot td { font-weight: 800; background: var(--paper); border-top: 2px solid var(--line-strong); }

@media (max-width: 1220px) {
  .purchase-order-layout { grid-template-columns: 1fr; }
  .purchase-order-layout__side { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .purchase-order-header-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .purchase-header-reference { grid-column: auto; }
  .detail-list--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .control-stat-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .control-stat-grid--2,
  .control-stat-grid--3,
  .control-stat-grid--4,
  .purchase-card-grid,
  .purchase-detail-grid,
  .purchase-order-layout__side,
  .purchase-address-grid,
  .purchase-order-header-grid,
  .supplier-document-grid,
  .supplier-payment-grid,
  .detail-list,
  .detail-list--4 { grid-template-columns: 1fr; }
  .supplier-payment-reference,
  .supplier-document-notes { grid-column: auto; }
  .purchase-action-strip,
  .purchase-form-actions { align-items: stretch; flex-direction: column; }
  .purchase-control-links { width: 100%; }
  .purchase-form-actions .btn { width: 100%; }
}

@media (max-width: 680px) {
  .purchase-filter-bar,
  .supplier-selector-form { align-items: stretch; flex-direction: column; }
  .purchase-filter-bar .field,
  .purchase-filter-bar .filter-bar__search,
  .purchase-filter-status,
  .purchase-filter-supplier,
  .purchase-date-field,
  .purchase-filter-bar .btn,
  .supplier-selector-form .field,
  .supplier-selector-form .btn { width: 100%; flex: 1 1 auto; }
}
.detail-list > div > span {
  display: block;
  margin-bottom: 4px;
  color: var(--ink-500);
  font-size: 11.5px;
  font-weight: 600;
}
.detail-list > div > strong {
  display: block;
  color: var(--ink-900);
  overflow-wrap: anywhere;
}

/* ---------- Step 13: Essex Global branding and grouped navigation ---------- */
.sidebar__brand {
  height: var(--header-h);
  min-height: var(--header-h);
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  overflow: hidden;
}
.sidebar__brand-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 44px;
  object-fit: contain;
}

.nav {
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}
.nav__item--main { min-height: 40px; }

.nav-group {
  border-radius: var(--radius);
}
.nav-group > summary {
  list-style: none;
}
.nav-group > summary::-webkit-details-marker {
  display: none;
}
.nav-group__toggle {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px 9px 12px;
  border-radius: var(--radius);
  color: var(--ink-700);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background .12s ease, color .12s ease;
}
.nav-group__toggle:hover {
  background: var(--paper);
  color: var(--ink-900);
}
.nav-group__title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-group__title > svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--ink-400);
}
.nav-group__chevron {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--ink-400);
  transition: transform .14s ease;
}
.nav-group[open] .nav-group__chevron {
  transform: rotate(90deg);
}
.nav-group.is-active > .nav-group__toggle {
  color: var(--teal-700);
}
.nav-group.is-active > .nav-group__toggle .nav-group__title > svg {
  color: var(--teal-600);
}

.nav-group__children {
  display: grid;
  gap: 2px;
  margin: 3px 0 6px;
  padding-left: 30px;
}
.nav__child {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 7px;
  color: var(--ink-500);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  transition: background .12s ease, color .12s ease;
}
.nav__child:hover {
  background: var(--paper);
  color: var(--ink-900);
}
.nav__child.is-active {
  background: var(--teal-50);
  color: var(--teal-700);
  font-weight: 600;
}
.nav__child-marker {
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--ink-300);
}
.nav__child.is-active .nav__child-marker {
  background: var(--teal-600);
}
.nav__currency-icon {
  width: 16px;
  height: 16px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--ink-400);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}
.nav__child:hover .nav__currency-icon,
.nav__child.is-active .nav__currency-icon {
  color: currentColor;
}

@media (max-width: 860px) {
  .sidebar__brand-logo { max-height: 42px; }
}

/* ---------- Step 14: operational reports and VAT control ---------- */
.report-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.report-grid--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.report-card--vat { border-color: var(--teal-100); box-shadow: var(--shadow-sm), inset 3px 0 0 var(--teal-500); }
.report-card__meta { display: block; margin-top: 8px; color: var(--teal-700); font-size: 12px; font-weight: 650; }

.report-filter-grid {
  display: grid;
  grid-template-columns: 156px 156px minmax(210px, 320px) auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 20px;
}
.report-filter-grid .field { margin: 0; min-width: 0; }
.report-filter-grid .btn { justify-self: start; }
.report-filter-grid--dates { grid-template-columns: 156px 156px max-content; }
.report-filter-grid--search { grid-template-columns: minmax(280px, 1fr) 190px auto; }
.report-filter-grid__search { min-width: 0; }
.report-filter-grid__group { min-width: 210px; }

.report-summary-strip,
.vat-period-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.report-summary-strip--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.report-summary-strip--outside { margin-bottom: 24px; }
.report-summary-strip > div,
.vat-period-summary > div {
  min-width: 0;
  padding: 15px 18px;
  border-right: 1px solid var(--line);
}
.report-summary-strip > div:last-child,
.vat-period-summary > div:last-child { border-right: 0; }
.report-summary-strip span,
.vat-period-summary > div > span {
  display: block;
  margin-bottom: 4px;
  color: var(--ink-500);
  font-size: 11.5px;
  font-weight: 600;
}
.report-summary-strip strong,
.vat-period-summary strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--ink-900);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.report-table { min-width: 820px; }
.report-table tfoot th { padding: 13px 16px; border-top: 1px solid var(--line-strong); background: var(--paper); }
.report-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.report-register-stack {
  display: grid;
  gap: 20px;
  margin-top: 20px;
}

.vat-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);
  gap: 20px;
  margin-bottom: 20px;
}
.vat-preview-grid { align-items: stretch; }
.vat-preview-grid > .card { height: 100%; }
.vat-preview-grid > .card .card__body { display: flex; flex-direction: column; }
.equal-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.equal-cards > .card { height: 100%; }
@media (max-width: 820px) { .equal-cards { grid-template-columns: 1fr; } }
.vat-box-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.vat-box-grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vat-box-grid--compact > div,
.vat-box {
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.vat-box-grid span,
.vat-box span { display: block; color: var(--ink-500); font-size: 11.5px; font-weight: 700; }
.vat-box-grid strong,
.vat-box strong { display: block; margin-top: 4px; color: var(--ink-900); font-size: 20px; font-variant-numeric: tabular-nums; }
.vat-box small { display: block; margin-top: 7px; color: var(--ink-500); line-height: 1.4; }
.vat-box--key { border-color: var(--teal-500); background: var(--teal-50); }
.vat-position {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--ink-900);
  color: #fff;
}
.vat-position span { color: rgba(255,255,255,.72); font-size: 12px; font-weight: 650; }
.vat-position strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.vat-control-actions { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.vat-control-actions form { margin: 0; }
.vat-control-actions form:not(.vat-reopen-form) { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vat-reopen-form { width: min(620px, 100%); }
.vat-reopen-form .field { margin-bottom: 12px; }
.check-line { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-700); font-size: 13px; }
.check-line input { width: 16px; height: 16px; }
.form-grid { display: grid; gap: 14px; }
.form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1180px) {
  .report-kpi-grid,
  .report-grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vat-preview-grid { grid-template-columns: 1fr; }
  .report-summary-strip--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .report-summary-strip--5 > div:nth-child(3) { border-right: 0; }
  .report-summary-strip--5 > div:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 820px) {
  .report-filter-grid,
  .report-filter-grid--dates,
  .report-filter-grid--search { grid-template-columns: 1fr; }
  .report-filter-grid .btn { width: 100%; }
  .report-summary-strip,
  .report-summary-strip--5,
  .vat-period-summary,
  .report-two-column,
  .vat-box-grid,
  .vat-box-grid--compact,
  .form-grid--2 { grid-template-columns: 1fr; }
  .report-summary-strip > div,
  .vat-period-summary > div {
    border-right: 0;
    border-top: 1px solid var(--line);
  }
  .report-summary-strip > div:first-child,
  .vat-period-summary > div:first-child { border-top: 0; }
}

/* ---------- Step 15: permissions, audit and child navigation icons ---------- */
.nav__child-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--ink-400);
  transition: color .12s ease;
}
.nav__child:hover .nav__child-icon,
.nav__child.is-active .nav__child-icon { color: currentColor; }

.security-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.security-filter-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 190px 160px auto auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 20px;
}
.security-filter-grid__search { min-width: 0; }
.security-filter-grid .btn { justify-self: start; }
.security-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 20px;
  margin-bottom: 20px;
}
.security-form-grid > .card { margin: 0; }
.security-toggle-field { justify-content: flex-end; }
.switch-line {
  display: inline-flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--ink-700);
  font-size: 13px;
  line-height: 1.45;
  cursor: pointer;
}
.switch-line input {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin: 1px 0 0;
  accent-color: var(--teal-600);
}
.switch-line--compact { align-items: center; white-space: nowrap; }
.security-meta-list {
  display: grid;
  gap: 7px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--ink-500);
  font-size: 12.5px;
}
.security-meta-list span { display: flex; justify-content: space-between; gap: 16px; }
.security-meta-list strong { color: var(--ink-900); font-weight: 650; }
.security-permission-card { margin-bottom: 20px; }
.security-default-note { margin-bottom: 18px; }
.permission-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.permission-group {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.permission-group h3 {
  margin: 0;
  padding: 12px 14px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  color: var(--ink-700);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .02em;
}
.permission-list { display: grid; }
.permission-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .12s ease, opacity .12s ease;
}
.permission-option:last-child { border-bottom: 0; }
.permission-option:hover { background: var(--paper); }
.permission-option.is-disabled { cursor: default; opacity: .72; }
.permission-option input {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--teal-600);
}
.permission-option strong { display: block; color: var(--ink-900); font-size: 13px; font-weight: 600; }
.permission-option small { display: block; margin-top: 2px; color: var(--ink-400); font-size: 10.5px; overflow-wrap: anywhere; }
.security-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 20px; }
.security-danger-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.security-danger-grid > .card { margin: 0; }
.security-card-copy { margin: 0 0 16px; color: var(--ink-500); font-size: 13px; line-height: 1.55; }

.permission-matrix-wrap { max-height: 72vh; }
.permission-matrix thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); }
.permission-matrix__role { min-width: 112px; text-align: center !important; }
.permission-matrix__group td {
  padding: 10px 14px !important;
  background: var(--paper);
  color: var(--ink-700);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.permission-matrix__check { text-align: center; }
.permission-tick {
  width: 23px;
  height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ok-bg);
  color: var(--ok-fg);
  font-weight: 800;
}
.permission-dash { color: var(--ink-300); }

.audit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: 20px;
}
.audit-layout > .card { margin: 0; }
.audit-note-card { position: sticky; top: calc(var(--header-h) + 24px); }
.audit-filter-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 180px 150px 142px 142px auto auto;
  align-items: end;
  gap: 10px;
  margin-bottom: 20px;
}
.audit-filter-grid__search { min-width: 0; }
.audit-filter-grid .btn { justify-self: start; }
.audit-table td { vertical-align: top; }
.audit-action {
  display: inline-block;
  max-width: 230px;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
  color: var(--ink-700);
  font-family: var(--mono);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.audit-detail-grid {
  display: grid;
  grid-template-columns: minmax(320px, .75fr) minmax(0, 1.25fr);
  gap: 20px;
  margin-bottom: 20px;
}
.audit-detail-grid > .card { margin: 0; }
.security-detail-list { margin: 0; display: grid; }
.security-detail-list > div {
  display: grid;
  grid-template-columns: 135px minmax(0, 1fr);
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.security-detail-list > div:last-child { border-bottom: 0; }
.security-detail-list dt { color: var(--ink-500); font-size: 12px; font-weight: 600; }
.security-detail-list dd { margin: 0; color: var(--ink-900); overflow-wrap: anywhere; }
.audit-json {
  max-height: 520px;
  margin: 0;
  padding: 14px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #111827;
  color: #dbeafe;
  font: 11.5px/1.55 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.password-change-wrap { width: min(620px, 100%); margin: 30px auto 0; }
.password-change-copy { margin-bottom: 18px; }

@media (max-width: 1260px) {
  .security-form-grid,
  .audit-layout,
  .audit-detail-grid { grid-template-columns: 1fr; }
  .audit-note-card { position: static; }
  .audit-filter-grid { grid-template-columns: minmax(240px, 1fr) 180px 150px auto; }
  .audit-filter-grid .field:nth-of-type(4),
  .audit-filter-grid .field:nth-of-type(5) { grid-row: 2; }
}
@media (max-width: 960px) {
  .security-stat-grid,
  .permission-groups,
  .security-danger-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .security-filter-grid { grid-template-columns: 1fr 1fr; }
  .security-filter-grid__search { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .security-stat-grid,
  .permission-groups,
  .security-danger-grid,
  .security-filter-grid,
  .audit-filter-grid { grid-template-columns: 1fr; }
  .security-filter-grid__search { grid-column: auto; }
  .security-filter-grid .btn,
  .audit-filter-grid .btn { width: 100%; }
  .security-form-actions { flex-direction: column-reverse; }
  .security-form-actions .btn { width: 100%; }
  .security-detail-list > div { grid-template-columns: 1fr; gap: 3px; }
}

/* Step 16 — controlled test-data lifecycle */
.test-data-stack { display: grid; gap: 18px; }
.test-data-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 20px; align-items: start; }
.test-data-grid > .card { margin: 0; }
.test-data-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.test-data-count {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.test-data-count span { display: block; color: var(--ink-500); font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.test-data-count strong { display: block; margin-top: 5px; color: var(--ink-900); font-size: 22px; font-variant-numeric: tabular-nums; }
.test-data-mode {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.test-data-mode--empty { background: var(--paper); color: var(--ink-600); border: 1px solid var(--line); }
.test-data-mode--test { background: var(--warn-bg); color: var(--warn-fg); }
.test-data-mode--live { background: var(--ok-bg); color: var(--ok-fg); }
.test-data-form { display: grid; gap: 14px; }
.test-data-warning {
  padding: 14px 16px;
  border: 1px solid #efc3c3;
  border-radius: var(--radius);
  background: #fff7f7;
  color: #7f1d1d;
}
.test-data-warning strong { display: block; margin-bottom: 4px; }
.test-data-summary-list { margin: 0; display: grid; gap: 8px; }
.test-data-summary-list > div { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.test-data-summary-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.test-data-summary-list dt { color: var(--ink-500); }
.test-data-summary-list dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.test-data-preserve-list { margin: 0; padding-left: 18px; color: var(--ink-700); }
.test-data-preserve-list li + li { margin-top: 5px; }
@media (max-width: 1100px) {
  .test-data-grid { grid-template-columns: 1fr; }
  .test-data-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .test-data-counts { grid-template-columns: 1fr; }
}

.data-mode-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 34px;
  padding: 7px 24px;
  border-bottom: 1px solid #e7c777;
  background: #fff4cf;
  color: #76530b;
  font-size: 12.5px;
  line-height: 1.35;
  text-align: center;
}
.data-mode-banner strong { font-size: 11px; letter-spacing: .06em; }
@media (max-width: 700px) {
  .data-mode-banner { align-items: flex-start; flex-direction: column; gap: 2px; text-align: left; }
}

/* ---------- Step 16 UI polish: order entry, picking, reconciliation and global search ---------- */

/* Order entry: make the repeated product lookup controls feel like a deliberate search component. */
.order-product-cell {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
.order-product-search {
  height: 40px;
  padding: 0 12px 0 36px;
  border-color: #d6dde6;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2398a0ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px 50%;
  font-weight: 600;
  box-shadow: 0 1px 1px rgba(31, 39, 51, .02);
}
.order-product-search::placeholder { color: var(--ink-500); opacity: 1; }
.order-product-search:hover { border-color: #c6cfda; }
.order-line-meta {
  min-height: 16px;
  margin: 6px 2px 7px;
  gap: 7px;
  align-items: center;
  color: var(--ink-500);
  font-size: 11.5px;
  line-height: 1.3;
}
.order-line-meta::before {
  content: '';
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: var(--ink-300);
}
.order-line-note {
  height: 32px;
  border-color: #e0e5eb;
  background: #fbfcfd;
  color: var(--ink-700);
}
.order-line-note::placeholder { color: var(--ink-400); opacity: 1; }

/* Picking: keep the code and description together, with pack information as a quiet subline. */
.picking-product-cell {
  min-width: 310px;
  line-height: 1.3;
}
.picking-product-cell > strong {
  display: inline;
  margin-right: 8px;
  color: var(--ink-900);
  font-weight: 700;
}
.picking-product-cell > .table-subline:first-of-type,
.picking-product-cell > strong + span {
  display: inline;
  margin: 0;
  color: var(--ink-700);
  font-size: 13px;
}
.picking-product-cell > .table-subline:nth-of-type(n+2),
.picking-product-cell > span + span {
  display: block;
  margin: 4px 0 0;
  color: var(--ink-400);
  font-size: 11.5px;
}
.picking-lines-table td { padding-top: 12px; padding-bottom: 12px; }

/* Customer forms: checkbox and label stay on one baseline. */
.field > label:has(input[type="checkbox"]),
.field label:has(> input[type="checkbox"]),
label.checkbox-line,
.checkbox-line {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start;
  width: max-content;
  gap: 9px;
  min-height: 32px;
  line-height: 1.2;
}
.field label:has(input[type="checkbox"]) input[type="checkbox"],
.checkbox-line input[type="checkbox"] {
  flex: 0 0 16px;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Reconciliation: give the matched ledger record a clear hierarchy and restore the action column. */
.reconciliation-table {
  table-layout: fixed;
  min-width: 1180px;
}
.reconciliation-table th:nth-child(1),
.reconciliation-table td:nth-child(1) { width: 120px; }
.reconciliation-table th:nth-child(2),
.reconciliation-table td:nth-child(2) { width: 275px; }
.reconciliation-table th:nth-child(3),
.reconciliation-table td:nth-child(3) { width: 175px; }
.reconciliation-table th:nth-child(4),
.reconciliation-table td:nth-child(4) { width: 105px; }
.reconciliation-table th:nth-child(5),
.reconciliation-table td:nth-child(5) { width: 125px; }
.reconciliation-table th:nth-child(6),
.reconciliation-table td:nth-child(6) { width: 350px; }
.reconciliation-table th:last-child,
.reconciliation-table td:last-child {
  width: 110px;
  min-width: 110px;
  text-align: right;
  padding-left: 12px;
  padding-right: 16px;
}
.match-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.match-result > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.match-result .pill {
  width: auto;
  min-width: 84px;
  justify-content: center;
  padding: 3px 10px;
}
.match-result strong {
  margin-top: 2px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  line-height: 1.25;
}
.match-result span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  line-height: 1.25;
}
.match-result form { margin: 0; }
.match-result .btn { min-width: 86px; }

/* Specific vertical rhythm fixes for the card pairs reported during testing. */
.card:has(.reconciliation-table) + .card,
.card:has(.detail-columns) + .card,
.card:has(.detail-list) + .card,
.card:has(.customer-payment-summary) + .card,
.customer-card-stack > .card + .card,
.customer-detail-page > .card + .card {
  margin-top: 18px;
}

/* Working header search and results page. */
.header__search { display: flex; align-items: center; }
.header__search input { padding-right: 42px; }
.header__search-submit {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-400);
  cursor: pointer;
}
.header__search-submit:hover,
.header__search-submit:focus-visible {
  background: var(--teal-50);
  color: var(--teal-700);
}
.header__search-submit svg { position: static; width: 15px; height: 15px; }
.search-summary { margin: -12px 0 20px; color: var(--ink-500); }
.search-results-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.search-result-card { min-width: 0; }
.search-result-card .card__body { padding: 0; }
.search-result-list { margin: 0; padding: 0; list-style: none; }
.search-result-list li + li { border-top: 1px solid var(--line); }
.search-result-link {
  display: block;
  padding: 14px 18px;
  color: inherit;
  text-decoration: none;
  transition: background .12s ease;
}
.search-result-link:hover { background: var(--paper); }
.search-result-link strong {
  display: block;
  color: var(--ink-900);
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-result-link span {
  display: block;
  margin-top: 3px;
  color: var(--ink-500);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-result-empty { padding: 22px 18px; color: var(--ink-500); font-size: 13px; }
.search-result-count {
  margin-left: auto;
  color: var(--ink-400);
  font-size: 12px;
  font-weight: 600;
}

@media (max-width: 1100px) {
  .search-results-grid { grid-template-columns: 1fr; }
  .reconciliation-table th:nth-child(6),
  .reconciliation-table td:nth-child(6) { width: 320px; }
}

/* Top-level operational cards should never visually touch each other. */
main.page > .card + .card { margin-top: 18px; }

/* ---------- Step 16 v5: reconciliation width and remaining card spacing ---------- */
/* The status / ledger match cell is the sixth AND final column. Keep it wide enough
   for the matched transaction details and the Unmatch action to sit side-by-side. */
.reconciliation-table {
  table-layout: fixed;
  min-width: 1180px;
}
.reconciliation-table th:nth-child(1),
.reconciliation-table td:nth-child(1) { width: 130px; }
.reconciliation-table th:nth-child(2),
.reconciliation-table td:nth-child(2) { width: 300px; }
.reconciliation-table th:nth-child(3),
.reconciliation-table td:nth-child(3) { width: 190px; }
.reconciliation-table th:nth-child(4),
.reconciliation-table td:nth-child(4) { width: 110px; }
.reconciliation-table th:nth-child(5),
.reconciliation-table td:nth-child(5) { width: 135px; }
.reconciliation-table th:nth-child(6),
.reconciliation-table td:nth-child(6),
.reconciliation-table th:last-child,
.reconciliation-table td:last-child {
  width: 390px;
  min-width: 390px;
  padding-left: 18px;
  padding-right: 18px;
  text-align: left;
}
.reconciliation-table .match-result {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.reconciliation-table .match-result > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.reconciliation-table .match-result .pill {
  width: auto;
  min-width: 84px;
  max-width: 100%;
  justify-content: center;
}
.reconciliation-table .match-result strong,
.reconciliation-table .match-result span:not(.pill) {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reconciliation-table .match-result form,
.reconciliation-table .match-result .btn {
  flex: none;
  margin: 0;
}
.reconciliation-table .match-result .btn { min-width: 88px; }

/* Explicit spacing for the two remaining page-specific card pairs. */
.card:has(.reconciliation-table) {
  margin-bottom: 18px !important;
}
.card:has(.reconciliation-table) + .card {
  margin-top: 18px !important;
}
.card:has(a[href*="/suppliers/"][href$="/edit"]) {
  margin-bottom: 18px !important;
}
.card:has(a[href*="/suppliers/"][href$="/edit"]) + .card {
  margin-top: 18px !important;
}

@media (max-width: 900px) {
  .reconciliation-table th:nth-child(6),
  .reconciliation-table td:nth-child(6),
  .reconciliation-table th:last-child,
  .reconciliation-table td:last-child {
    width: 350px;
    min-width: 350px;
  }
}

/* ---------- Step 16 v9: purchasing form layout overhaul ---------- */
/*
   Editable transaction lines contain several controls and must not be compressed
   like report-only tables. These rules give the product editor first priority,
   keep each line visually self-contained and preserve horizontal scrolling only
   as a last resort on smaller screens.
*/

/* Purchase order create/edit */
.purchase-order-layout {
  grid-template-columns: minmax(0, 1fr) 286px;
  gap: 20px;
}
.purchase-order-layout__main,
.purchase-order-layout__side,
.purchase-master-form { gap: 20px; }
.purchase-lines-card,
.purchase-lines-card .card__body,
.purchase-lines-card .table-wrap { min-width: 0; }
.purchase-lines-card .table-wrap {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}
.purchase-lines-table {
  width: 100%;
  min-width: 970px;
  table-layout: fixed;
}
.purchase-lines-table th {
  padding: 11px 9px;
  font-size: 10.5px;
  letter-spacing: .35px;
}
.purchase-lines-table td {
  height: auto;
  min-height: 0;
  padding: 14px 9px 16px;
  vertical-align: top;
  overflow: visible;
}
.purchase-lines-table th:nth-child(1),
.purchase-lines-table td:nth-child(1) { width: 42px; padding-left: 16px; }
.purchase-lines-table th:nth-child(2),
.purchase-lines-table td:nth-child(2) { width: 292px; }
.purchase-lines-table th:nth-child(3),
.purchase-lines-table td:nth-child(3) { width: 76px; }
.purchase-lines-table th:nth-child(4),
.purchase-lines-table td:nth-child(4) { width: 76px; }
.purchase-lines-table th:nth-child(5),
.purchase-lines-table td:nth-child(5) { width: 88px; }
.purchase-lines-table th:nth-child(6),
.purchase-lines-table td:nth-child(6) { width: 112px; }
.purchase-lines-table th:nth-child(7),
.purchase-lines-table td:nth-child(7) { width: 118px; }
.purchase-lines-table th:nth-child(8),
.purchase-lines-table td:nth-child(8) { width: 94px; }
.purchase-lines-table th:nth-child(9),
.purchase-lines-table td:nth-child(9) { width: 46px; padding-right: 14px; }
.purchase-line-row + .purchase-line-row td {
  border-top: 1px solid var(--line-strong);
}
.purchase-line-number {
  padding-top: 24px !important;
  color: var(--ink-500);
  font-weight: 700;
}
.purchase-product-cell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  white-space: normal !important;
}
.purchase-product-select,
.purchase-line-description,
.purchase-line-note {
  display: block;
  width: 100%;
  min-width: 0;
  height: 40px;
}
.purchase-product-select { font-weight: 600; }
.purchase-line-description { background: #fbfcfd; }
.purchase-line-note {
  background: #fbfcfd;
  color: var(--ink-700);
}
.purchase-unit-hint {
  display: block;
  min-height: 18px;
  padding: 0 2px;
  color: var(--ink-500);
  font-size: 11px;
  line-height: 1.35;
  white-space: normal;
}
.purchase-number,
.purchase-lines-table .vat,
.purchase-lines-table .money-input,
.purchase-lines-table .money-input input {
  width: 100%;
  min-width: 0;
}
.purchase-number,
.purchase-lines-table .vat,
.purchase-lines-table .money-input input { height: 40px; }
.purchase-number,
.purchase-lines-table .money-input input {
  padding-left: 8px;
  padding-right: 8px;
  font-size: 13px;
}
.purchase-lines-table .money-input > span { left: 9px; }
.purchase-lines-table .money-input input { padding-left: 24px !important; }
.purchase-number::-webkit-inner-spin-button,
.purchase-number::-webkit-outer-spin-button,
.supplier-document-lines input[type="number"]::-webkit-inner-spin-button,
.supplier-document-lines input[type="number"]::-webkit-outer-spin-button,
.allocation-input input[type="number"]::-webkit-inner-spin-button,
.allocation-input input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.purchase-number,
.supplier-document-lines input[type="number"],
.allocation-input input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.purchase-remove-line {
  margin-top: 5px;
  width: 32px;
  height: 32px;
}
.purchase-lines-help {
  min-height: 58px;
  padding: 12px 18px;
}
.purchase-form-actions {
  margin-top: 0;
  padding-top: 18px;
}

/* Supplier invoice / credit document lines. The previous widths were shifted one
   column to the left, leaving the line number column enormous and crushing the
   actual product editor. */
.supplier-document-lines {
  width: 100%;
  min-width: 930px;
  table-layout: fixed;
}
.supplier-document-lines th {
  padding: 11px 8px;
  font-size: 10.5px;
  letter-spacing: .35px;
}
.supplier-document-lines td {
  height: auto;
  min-height: 0;
  padding: 14px 8px 16px;
  vertical-align: top;
  overflow: visible;
}
.supplier-document-lines th:nth-child(1),
.supplier-document-lines td:nth-child(1) { width: 42px; padding-left: 16px; }
.supplier-document-lines th:nth-child(2),
.supplier-document-lines td:nth-child(2) { width: 292px; }
.supplier-document-lines th:nth-child(3),
.supplier-document-lines td:nth-child(3) { width: 90px; }
.supplier-document-lines th:nth-child(4),
.supplier-document-lines td:nth-child(4) { width: 100px; }
.supplier-document-lines th:nth-child(5),
.supplier-document-lines td:nth-child(5) { width: 120px; }
.supplier-document-lines th:nth-child(6),
.supplier-document-lines td:nth-child(6) { width: 112px; }
.supplier-document-lines th:nth-child(7),
.supplier-document-lines td:nth-child(7) { width: 96px; }
.supplier-document-lines th:nth-child(8),
.supplier-document-lines td:nth-child(8) { width: 44px; padding-right: 14px; }
.supplier-document-lines tbody tr + tr td { border-top: 1px solid var(--line-strong); }
.supplier-product-cell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  white-space: normal !important;
}
.supplier-document-lines input,
.supplier-document-lines select {
  display: block;
  width: 100%;
  min-width: 0;
  height: 40px;
  padding-left: 9px;
  padding-right: 9px;
}
.supplier-product-cell select { font-weight: 600; }
.supplier-product-cell input { background: #fbfcfd; }
.supplier-document-lines .money-input { width: 100%; min-width: 0; }
.supplier-document-lines .money-input input { padding-left: 24px !important; }
.supplier-document-lines .money-input > span { left: 9px; }
.supplier-document-lines td:last-child { text-align: center; }

/* Supplier payment: give the payment fields balanced widths and turn allocation
   modes into three clearly separated choices rather than one run-on sentence. */
.payment-entry-grid { grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; }
.supplier-payment-grid {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 16px;
}
.supplier-payment-reference,
.supplier-payment-notes { grid-column: 1 / -1; }
.allocation-card .card__body > *:has(> label:has(input[type="radio"])),
.allocation-card .card__body > *:has(> .choice-card) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}
.allocation-card label:has(input[type="radio"]),
.allocation-card .choice-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 3px;
  align-items: start;
  min-width: 0;
  min-height: 76px;
  margin: 0;
  padding: 13px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink-900);
  cursor: pointer;
  line-height: 1.35;
}
.allocation-card label:has(input[type="radio"]):has(input:checked),
.allocation-card .choice-card:has(input:checked) {
  border-color: var(--teal-500);
  background: var(--teal-50);
  box-shadow: 0 0 0 2px rgba(19, 181, 234, .10);
}
.allocation-card label:has(input[type="radio"]) input[type="radio"],
.allocation-card .choice-card input[type="radio"] {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--teal-500);
}
.allocation-card label:has(input[type="radio"]) strong,
.allocation-card .choice-card strong {
  grid-column: 2;
  grid-row: 1;
  display: block;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
}
.allocation-card label:has(input[type="radio"]) small,
.allocation-card label:has(input[type="radio"]) span,
.allocation-card .choice-card small,
.allocation-card .choice-card span {
  grid-column: 2;
  grid-row: 2;
  display: block;
  min-width: 0;
  margin: 0;
  color: var(--ink-500);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.4;
  white-space: normal;
}
.allocation-table-wrap { overflow-x: auto; }
.allocation-table { min-width: 720px; }
.allocation-table th,
.allocation-table td { padding-left: 14px; padding-right: 14px; }
.allocation-table td { height: 62px; }
.allocation-input { width: 142px; }
.allocation-input input { width: 100%; min-width: 0; }

/* Improve the supplier selection line even when the older view has no dedicated
   class and places the label, selected supplier and Change action together. */
.payment-entry-grid__main .card:first-child .card__body > div:has(> a.btn):has(strong),
.payment-entry-grid__main .card:first-child .card__body > div:has(> button.btn):has(strong) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 18px;
}
.payment-entry-grid__main .card:first-child .card__body > div:has(> a.btn):has(strong) > strong,
.payment-entry-grid__main .card:first-child .card__body > div:has(> button.btn):has(strong) > strong {
  margin-left: 2px;
}

/* Bank reconciliation: make one coherent matched-record block, with the action
   aligned beside it instead of colliding with the date/reference text. */
.reconciliation-table {
  width: 100%;
  min-width: 1080px;
  table-layout: fixed;
}
.reconciliation-table th,
.reconciliation-table td { padding-left: 12px; padding-right: 12px; }
.reconciliation-table td { height: auto; min-height: 66px; padding-top: 11px; padding-bottom: 11px; }
.reconciliation-table th:nth-child(1),
.reconciliation-table td:nth-child(1) { width: 120px; }
.reconciliation-table th:nth-child(2),
.reconciliation-table td:nth-child(2) { width: 260px; }
.reconciliation-table th:nth-child(3),
.reconciliation-table td:nth-child(3) { width: 170px; }
.reconciliation-table th:nth-child(4),
.reconciliation-table td:nth-child(4) { width: 100px; }
.reconciliation-table th:nth-child(5),
.reconciliation-table td:nth-child(5) { width: 120px; }
.reconciliation-table th:nth-child(6),
.reconciliation-table td:nth-child(6),
.reconciliation-table th:last-child,
.reconciliation-table td:last-child {
  width: 360px;
  min-width: 360px;
  text-align: left;
}
.reconciliation-table .match-result {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.reconciliation-table .match-result > div {
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid #dceee5;
  border-radius: 8px;
  background: #f7fcf9;
}
.reconciliation-table .match-result .pill {
  min-width: 76px;
  padding: 2px 9px;
  font-size: 11px;
}
.reconciliation-table .match-result strong {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.3;
}
.reconciliation-table .match-result span:not(.pill) {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.3;
}
.reconciliation-table .match-result .btn {
  min-width: 82px;
  height: 34px;
  padding: 0 12px;
  font-size: 12.5px;
}

/* General form/card rhythm on the purchasing screens. */
.purchase-order-layout .card,
.payment-entry-grid .card { overflow: hidden; }
.purchase-order-layout__main > .card + .card,
.payment-entry-grid__main > .card + .card,
.purchase-card-stack > .card + .card { margin-top: 0; }
.purchase-order-layout__side .notice,
.payment-entry-grid__side .notice {
  line-height: 1.5;
}

@media (max-width: 1480px) {
  .purchase-order-layout,
  .payment-entry-grid { grid-template-columns: 1fr; }
  .purchase-order-layout__side,
  .payment-entry-grid__side {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  .purchase-lines-table { min-width: 960px; }
}

@media (max-width: 980px) {
  .allocation-card .card__body > *:has(> label:has(input[type="radio"])),
  .allocation-card .card__body > *:has(> .choice-card) {
    grid-template-columns: 1fr;
  }
  .supplier-payment-grid,
  .purchase-order-layout__side,
  .payment-entry-grid__side { grid-template-columns: 1fr; }
}

/* ---------- Step 16 v10: definitive editable-line grid repair ---------- */
/*
   Editable purchasing rows are not report tables.  Rendering their <tr> elements
   as CSS grids removes the browser table-row height constraint that caused the
   description/note controls to overflow, overlap or disappear.
*/

/* Do not clip controls that legitimately make an editable row taller. */
.purchase-order-layout .card,
.purchase-lines-card,
.purchase-lines-card .card__body,
.purchase-lines-card .table-wrap {
  overflow: visible;
}
.purchase-lines-card .table-wrap {
  max-height: none !important;
  overflow-x: auto;
  overflow-y: visible !important;
  padding-bottom: 2px;
}

/* Supplier / selected-record headings need actual spacing between label, value
   and Change action. */
.supplier-document-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-height: 40px;
  margin-bottom: 18px;
}
.supplier-document-heading > strong,
.supplier-document-heading > b {
  margin: 0;
}
.supplier-document-heading > .btn,
.supplier-document-heading > a,
.supplier-document-heading > button {
  flex: none;
}

/* ---------------- Purchase-order line editor ---------------- */
.purchase-lines-table {
  display: block;
  width: 100%;
  min-width: 870px;
  border-collapse: separate;
  border-spacing: 0;
}
.purchase-lines-table thead,
.purchase-lines-table tbody {
  display: block;
  width: 100%;
}
.purchase-lines-table thead tr,
.purchase-lines-table tbody tr {
  display: grid;
  grid-template-columns:
    34px
    minmax(250px, 1fr)
    66px
    66px
    76px
    104px
    108px
    86px
    34px;
  column-gap: 10px;
  width: 100%;
  min-width: 870px;
  padding-left: 14px;
  padding-right: 14px;
  box-sizing: border-box;
}
.purchase-lines-table thead tr {
  align-items: end;
  border-bottom: 1px solid var(--line-strong);
}
.purchase-lines-table tbody tr {
  position: relative;
  align-items: start;
  min-height: 154px;
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.purchase-lines-table tbody tr:last-child { border-bottom: 0; }
.purchase-lines-table th,
.purchase-lines-table td,
.purchase-lines-table th:nth-child(n),
.purchase-lines-table td:nth-child(n) {
  display: block;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  overflow: visible;
  white-space: normal;
  box-sizing: border-box;
}
.purchase-lines-table th {
  padding: 11px 0;
  font-size: 10.5px;
  line-height: 1.2;
}
.purchase-lines-table th.num { text-align: right; }
.purchase-lines-table td {
  align-self: start;
}
.purchase-lines-table td:not(:nth-child(2)) {
  padding-top: 7px;
}
.purchase-lines-table .purchase-line-number {
  padding-top: 17px !important;
  text-align: left;
}
.purchase-product-cell {
  display: flex !important;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  min-width: 0;
}
.purchase-product-select,
.purchase-line-description,
.purchase-line-note {
  display: block;
  width: 100%;
  min-width: 0;
  height: 38px;
  flex: none;
}
.purchase-line-description,
.purchase-line-note { margin: 0; }
.purchase-unit-hint {
  display: block;
  min-height: 15px;
  margin: 0;
  padding: 0 2px;
  overflow: visible;
  line-height: 1.3;
  white-space: normal;
}
.purchase-lines-table .purchase-number,
.purchase-lines-table .vat,
.purchase-lines-table .money-input,
.purchase-lines-table .money-input input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.purchase-lines-table td.num {
  padding-top: 17px;
  text-align: right;
  white-space: nowrap;
}
.purchase-lines-table td:last-child {
  padding-top: 10px;
  text-align: center;
}
.purchase-remove-line {
  display: inline-grid;
  margin: 0;
}

/* ---------------- Supplier document line editor ---------------- */
.supplier-document-lines {
  display: block;
  width: 100%;
  min-width: 820px;
  border-collapse: separate;
  border-spacing: 0;
}
.supplier-document-lines thead,
.supplier-document-lines tbody {
  display: block;
  width: 100%;
}
.supplier-document-lines thead tr,
.supplier-document-lines tbody tr {
  display: grid;
  grid-template-columns:
    34px
    minmax(250px, 1fr)
    76px
    86px
    108px
    96px
    86px
    34px;
  column-gap: 10px;
  width: 100%;
  min-width: 820px;
  padding-left: 14px;
  padding-right: 14px;
  box-sizing: border-box;
}
.supplier-document-lines thead tr {
  align-items: end;
  border-bottom: 1px solid var(--line-strong);
}
.supplier-document-lines tbody tr {
  align-items: start;
  min-height: 148px;
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.supplier-document-lines tbody tr:last-child { border-bottom: 0; }
.supplier-document-lines th,
.supplier-document-lines td,
.supplier-document-lines th:nth-child(n),
.supplier-document-lines td:nth-child(n) {
  display: block;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  overflow: visible;
  white-space: normal;
  box-sizing: border-box;
}
.supplier-document-lines th {
  padding: 11px 0;
  font-size: 10.5px;
  line-height: 1.2;
}
.supplier-document-lines th.num { text-align: right; }
.supplier-document-lines td:not(:nth-child(2)) { padding-top: 7px; }
.supplier-document-lines td:first-child {
  padding-top: 17px;
  font-weight: 700;
}
.supplier-product-cell {
  display: flex !important;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  min-width: 0;
}
.supplier-product-cell input,
.supplier-product-cell select {
  display: block;
  width: 100%;
  min-width: 0;
  height: 38px;
  flex: none;
  margin: 0;
}
.supplier-document-lines input,
.supplier-document-lines select,
.supplier-document-lines .money-input,
.supplier-document-lines .money-input input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.supplier-document-lines td.num {
  padding-top: 17px;
  text-align: right;
  white-space: nowrap;
}
.supplier-document-lines td:last-child {
  padding-top: 10px;
  text-align: center;
}

/* Keep the side panels useful without starving the editable line grid. */
.purchase-order-layout {
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
}
.purchase-order-layout__main { min-width: 0; }
.purchase-order-layout__side { min-width: 0; }

/* The page action row should follow the content rather than appearing to float
   against a clipped line card. */
.purchase-form-actions {
  position: static;
  clear: both;
  margin-top: 18px;
}

@media (max-width: 1420px) {
  .purchase-order-layout { grid-template-columns: 1fr; }
  .purchase-order-layout__side {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

@media (max-width: 930px) {
  .purchase-lines-table,
  .purchase-lines-table thead tr,
  .purchase-lines-table tbody tr { min-width: 850px; }
  .supplier-document-lines,
  .supplier-document-lines thead tr,
  .supplier-document-lines tbody tr { min-width: 800px; }
}

@media (max-width: 760px) {
  .purchase-order-layout__side { grid-template-columns: 1fr; }
}

/* Parent-level safeguards for views that do not add the purchase-lines-card class. */
.card:has(.purchase-lines-table),
.card:has(.supplier-document-lines),
.card:has(.purchase-lines-table) .card__body,
.card:has(.supplier-document-lines) .card__body {
  overflow: visible !important;
}
.table-wrap:has(.purchase-lines-table),
.table-wrap:has(.supplier-document-lines) {
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}


/* ---------- Step 16 v11: read-only tables and final purchasing polish ---------- */

/* Column headings should not be boxed between two horizontal rules. */
.purchase-lines-help,
.card:has(.supplier-document-lines) .purchase-lines-help {
  border-bottom: 0 !important;
}
.purchase-lines-table thead tr,
.supplier-document-lines thead tr {
  border-top: 0 !important;
  border-bottom: 0 !important;
}
.purchase-lines-table thead,
.supplier-document-lines thead {
  border: 0 !important;
}
.purchase-lines-table th,
.supplier-document-lines th {
  background: #fbfcfd;
}

/* v10 deliberately converts editable rows to grids. Read-only order lines must
   remain a compact report table; otherwise every row inherits editor height. */
table.purchase-lines-table--readonly {
  display: table !important;
  width: 100% !important;
  min-width: 900px !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}
table.purchase-lines-table--readonly thead {
  display: table-header-group !important;
}
table.purchase-lines-table--readonly tbody {
  display: table-row-group !important;
}
table.purchase-lines-table--readonly tr,
table.purchase-lines-table--readonly thead tr,
table.purchase-lines-table--readonly tbody tr {
  display: table-row !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
table.purchase-lines-table--readonly th,
table.purchase-lines-table--readonly td,
table.purchase-lines-table--readonly th:nth-child(n),
table.purchase-lines-table--readonly td:nth-child(n) {
  display: table-cell !important;
  width: auto;
  min-width: 0;
  height: auto !important;
  min-height: 0 !important;
  padding: 12px 10px !important;
  overflow: visible;
  vertical-align: middle !important;
  white-space: nowrap;
  border: 0 !important;
}
table.purchase-lines-table--readonly thead th {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
table.purchase-lines-table--readonly tbody tr + tr td {
  border-top: 1px solid var(--line) !important;
}
table.purchase-lines-table--readonly th:nth-child(1),
table.purchase-lines-table--readonly td:nth-child(1) { width: 42px; text-align: left; }
table.purchase-lines-table--readonly th:nth-child(2),
table.purchase-lines-table--readonly td:nth-child(2) { width: auto; white-space: normal; }
table.purchase-lines-table--readonly th:nth-child(3),
table.purchase-lines-table--readonly td:nth-child(3) { width: 76px; }
table.purchase-lines-table--readonly th:nth-child(4),
table.purchase-lines-table--readonly td:nth-child(4) { width: 86px; }
table.purchase-lines-table--readonly th:nth-child(5),
table.purchase-lines-table--readonly td:nth-child(5) { width: 86px; }
table.purchase-lines-table--readonly th:nth-child(6),
table.purchase-lines-table--readonly td:nth-child(6) { width: 100px; }
table.purchase-lines-table--readonly th:nth-child(7),
table.purchase-lines-table--readonly td:nth-child(7) { width: 64px; }
table.purchase-lines-table--readonly th:nth-child(8),
table.purchase-lines-table--readonly td:nth-child(8),
table.purchase-lines-table--readonly th:nth-child(9),
table.purchase-lines-table--readonly td:nth-child(9) { width: 92px; }
table.purchase-lines-table--readonly .table-subline {
  margin-top: 4px;
  color: var(--ink-400);
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
}

/* Keep the read-only card compact and prevent inherited editor overflow rules
   from producing a large empty canvas. */
.purchase-order-show .purchase-lines-card .table-wrap {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding-bottom: 0;
}
.purchase-order-show .purchase-lines-card .card__body { padding: 0; }
.purchase-order-show .purchase-card-stack { gap: 20px; }
.purchase-order-show .page-header .actions { align-items: center; flex-wrap: wrap; }
.purchase-order-show .page-header .actions .btn--ghost {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink-700);
}
.purchase-order-show .page-header .actions .btn--ghost:hover {
  background: var(--paper);
  color: var(--ink-900);
}

/* Supplier selection headings: retain every control but separate the label,
   selected supplier and Change button clearly. */
.supplier-document-heading,
.purchase-order-layout__main > .card:first-child .card__body > div:first-child:has(> strong):has(.btn),
.purchase-order-layout__main > .card:first-child .card__body > div:first-child:has(> b):has(.btn) {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.supplier-document-heading > strong,
.supplier-document-heading > b,
.purchase-order-layout__main > .card:first-child .card__body > div:first-child:has(.btn) > strong,
.purchase-order-layout__main > .card:first-child .card__body > div:first-child:has(.btn) > b {
  margin-left: 4px !important;
}

/* Editable rows keep their functionality, but use a clean header and consistent
   row separation without clipping descriptions or notes. */
.purchase-lines-table:not(.purchase-lines-table--readonly) tbody tr,
.supplier-document-lines tbody tr {
  border-bottom-color: var(--line) !important;
}
.purchase-lines-table:not(.purchase-lines-table--readonly) tbody tr:last-child,
.supplier-document-lines tbody tr:last-child {
  border-bottom: 0 !important;
}

/* Supplier account cards should keep a deliberate gap and not visually merge. */
main.page > .card:has(a[href*="/suppliers/"][href$="/edit"]) + .card,
.card:has(a[href*="/suppliers/"][href$="/edit"]) + .card {
  margin-top: 20px !important;
}

@media (max-width: 760px) {
  .purchase-order-show .page-header { align-items: flex-start; }
  .purchase-order-show .page-header .actions { width: 100%; margin-left: 0; }
}

/* ---------- Step 16 v12: final purchasing presentation repair ---------- */

/* Read-only purchase-order lines are operational records, not form controls.
   Give each line a deliberate, card-like row while retaining every value. */
.purchase-lines-card--readonly .card__body {
  padding: 0 !important;
  overflow: hidden !important;
}
.purchase-readonly-lines {
  width: 100%;
  overflow-x: auto;
  background: var(--surface);
}
.purchase-readonly-lines__header,
.purchase-readonly-line {
  display: grid;
  grid-template-columns:
    38px
    minmax(260px, 1fr)
    70px
    82px
    84px
    98px
    62px
    92px
    96px;
  column-gap: 14px;
  align-items: center;
  min-width: 980px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
.purchase-readonly-lines__header {
  min-height: 44px;
  color: var(--ink-400);
  background: #f8fafc;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.purchase-readonly-lines__header .num,
.purchase-readonly-line .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.purchase-readonly-line {
  min-height: 78px;
  padding-top: 14px;
  padding-bottom: 14px;
  border-top: 1px solid var(--line);
  color: var(--ink-700);
  transition: background-color .12s ease;
}
.purchase-readonly-line:hover { background: #fbfdff; }
.purchase-readonly-line__number {
  color: var(--ink-500);
  font-weight: 700;
}
.purchase-readonly-line__product {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}
.purchase-readonly-line__product strong {
  color: var(--ink-900);
  font-size: 13.5px;
  line-height: 1.25;
}
.purchase-readonly-line__product span {
  color: var(--ink-400);
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
}
.purchase-readonly-line__vat {
  display: inline-flex;
  width: max-content;
  min-width: 34px;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-600);
  font-size: 11px;
  font-weight: 700;
}
.purchase-readonly-line__net,
.purchase-readonly-line__gross {
  color: var(--ink-900);
  font-weight: 700;
}
.purchase-readonly-line__gross { font-size: 13.5px; }

/* Supplier account: make the edit action a proper card footer and preserve the
   deliberate gap before Recent purchase orders. */
.card:has(a[href*="/suppliers/"][href$="/edit"]) {
  overflow: hidden;
}
.card:has(a[href*="/suppliers/"][href$="/edit"]) .card__body {
  padding-bottom: 16px;
}
.card:has(a[href*="/suppliers/"][href$="/edit"]) .card__footer,
.card:has(a[href*="/suppliers/"][href$="/edit"]) .card-action-row,
.card:has(a[href*="/suppliers/"][href$="/edit"]) > div:last-child:has(> a[href*="/suppliers/"][href$="/edit"]) {
  display: flex !important;
  min-height: 62px;
  align-items: center !important;
  justify-content: flex-end !important;
  margin: 0 !important;
  padding: 13px 20px !important;
  border-top: 1px solid var(--line) !important;
  background: #fbfcfd !important;
  box-sizing: border-box;
}
.card:has(a[href*="/suppliers/"][href$="/edit"]) a[href*="/suppliers/"][href$="/edit"] {
  display: inline-flex;
  min-width: 122px;
  height: 38px;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
}
.card:has(a[href*="/suppliers/"][href$="/edit"]) + .card {
  margin-top: 20px !important;
}

/* Supplier payment: the selected supplier must read as label, value and action,
   not one joined string. This selector is deliberately tolerant of legacy markup. */
.payment-entry-grid__main > .card:first-child .card__body > div:first-child,
.payment-entry-grid__main > .card:first-child .card__body > p:first-child {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-height: 40px;
  margin-bottom: 18px;
  line-height: 1.4;
}
.payment-entry-grid__main > .card:first-child .card__body > div:first-child strong,
.payment-entry-grid__main > .card:first-child .card__body > p:first-child strong {
  display: inline-block;
  margin-left: 8px !important;
  color: var(--ink-900);
}
.payment-entry-grid__main > .card:first-child .card__body > div:first-child .btn,
.payment-entry-grid__main > .card:first-child .card__body > p:first-child .btn {
  margin-left: 4px;
}

/* Invoice allocation: work with both current and older DOM structures. The
   options become separate selectable panels and the invoice table remains full width. */
.payment-entry-grid__main > .card:has(input[type="radio"]) .card__body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
  padding-top: 18px;
}
.payment-entry-grid__main > .card:has(input[type="radio"]) .card__body > :has(input[type="radio"]):not(label) {
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px !important;
  margin: 0 0 4px !important;
}
.payment-entry-grid__main > .card:has(input[type="radio"]) label:has(input[type="radio"]) {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 4px;
  min-width: 0;
  min-height: 82px;
  align-content: center;
  align-items: start;
  margin: 0 !important;
  padding: 14px 15px !important;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink-900);
  cursor: pointer;
  box-sizing: border-box;
}
.payment-entry-grid__main > .card:has(input[type="radio"]) label:has(input[type="radio"]):has(input:checked) {
  border-color: var(--teal-500);
  background: var(--teal-50);
  box-shadow: 0 0 0 2px rgba(19, 181, 234, .10);
}
.payment-entry-grid__main > .card:has(input[type="radio"]) label:has(input[type="radio"]) input[type="radio"] {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--teal-500);
}
.payment-entry-grid__main > .card:has(input[type="radio"]) label:has(input[type="radio"]) strong,
.payment-entry-grid__main > .card:has(input[type="radio"]) label:has(input[type="radio"]) b {
  grid-column: 2;
  grid-row: 1;
  display: block;
  margin: 0 !important;
  color: var(--ink-900);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}
.payment-entry-grid__main > .card:has(input[type="radio"]) label:has(input[type="radio"]) small,
.payment-entry-grid__main > .card:has(input[type="radio"]) label:has(input[type="radio"]) span {
  grid-column: 2;
  grid-row: 2;
  display: block;
  margin: 0 !important;
  color: var(--ink-500);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.4;
  white-space: normal;
}
.payment-entry-grid__main > .card:has(input[type="radio"]) .table-wrap,
.payment-entry-grid__main > .card:has(input[type="radio"]) .allocation-table-wrap,
.payment-entry-grid__main > .card:has(input[type="radio"]) table {
  grid-column: 1 / -1;
}
.payment-entry-grid__main > .card:has(input[type="radio"]) .allocation-table-wrap {
  margin-top: 4px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.payment-entry-grid__main > .card:has(input[type="radio"]) .allocation-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}
.payment-entry-grid__main > .card:has(input[type="radio"]) .allocation-table th {
  background: #f8fafc;
}
.payment-entry-grid__main > .card:has(input[type="radio"]) .allocation-table th,
.payment-entry-grid__main > .card:has(input[type="radio"]) .allocation-table td {
  padding: 13px 14px;
  vertical-align: middle;
}
.payment-entry-grid__main > .card:has(input[type="radio"]) .allocation-input {
  width: 150px;
}
.payment-entry-grid__main > .card:has(input[type="radio"]) .allocation-input input {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  text-align: right;
}

@media (max-width: 980px) {
  .payment-entry-grid__main > .card:has(input[type="radio"]) .card__body,
  .payment-entry-grid__main > .card:has(input[type="radio"]) .card__body > :has(input[type="radio"]):not(label) {
    grid-template-columns: 1fr;
  }
}

/* ---------- Step 16 v13: supplier payment DOM-backed layout ---------- */
body.supplier-payment-create-page .supplier-payment-details-card .card__body {
  padding-top: 20px;
}

body.supplier-payment-create-page .supplier-selection {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 10px 14px !important;
  min-height: 44px;
  margin: 0 0 22px !important;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfe;
  line-height: 1.35;
}

body.supplier-payment-create-page .supplier-selection__label {
  flex: 0 0 auto;
  color: var(--ink-500);
  font-size: 12px;
  font-weight: 700;
}

body.supplier-payment-create-page .supplier-selection__value {
  display: inline-block !important;
  margin: 0 !important;
  color: var(--ink-900);
  font-size: 14px;
  font-weight: 700;
}

body.supplier-payment-create-page .supplier-selection__change {
  flex: 0 0 auto;
  margin: 0 0 0 auto !important;
}

body.supplier-payment-create-page .supplier-payment-allocation-card .card__body {
  padding-top: 20px;
}

body.supplier-payment-create-page .allocation-choice-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px !important;
  width: 100%;
  margin: 0 0 20px !important;
}

body.supplier-payment-create-page .allocation-choice {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 11px;
  row-gap: 5px;
  min-width: 0;
  min-height: 92px;
  align-content: center;
  margin: 0 !important;
  padding: 15px 16px !important;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

body.supplier-payment-create-page .allocation-choice:hover {
  border-color: #b8c7d4;
  background: #fbfdff;
}

body.supplier-payment-create-page .allocation-choice:has(input:checked) {
  border-color: var(--teal-500);
  background: var(--teal-50);
  box-shadow: 0 0 0 2px rgba(19, 181, 234, .10);
}

body.supplier-payment-create-page .allocation-choice input[type="radio"] {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--teal-500);
}

body.supplier-payment-create-page .allocation-choice__title {
  grid-column: 2;
  grid-row: 1;
  display: block;
  color: var(--ink-900);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
}

body.supplier-payment-create-page .allocation-choice__description {
  grid-column: 2;
  grid-row: 2;
  display: block;
  color: var(--ink-500);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
}

body.supplier-payment-create-page .supplier-payment-allocation-card .allocation-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

body.supplier-payment-create-page .supplier-payment-allocation-card .allocation-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

body.supplier-payment-create-page .supplier-payment-allocation-card .allocation-table thead th {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
  color: var(--ink-400);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: left;
}

body.supplier-payment-create-page .supplier-payment-allocation-card .allocation-table tbody td {
  height: 62px;
  padding: 13px 14px;
  border-bottom: 0;
  vertical-align: middle;
}

body.supplier-payment-create-page .supplier-payment-allocation-card .allocation-table td:nth-last-child(-n+3),
body.supplier-payment-create-page .supplier-payment-allocation-card .allocation-table th:nth-last-child(-n+3) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

body.supplier-payment-create-page .supplier-payment-allocation-card .allocation-input {
  width: 150px;
  margin-left: auto;
}

body.supplier-payment-create-page .supplier-payment-allocation-card .allocation-input input {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 10px;
  text-align: right;
}

@media (max-width: 980px) {
  body.supplier-payment-create-page .allocation-choice-grid {
    grid-template-columns: 1fr;
  }

  body.supplier-payment-create-page .supplier-selection__change {
    margin-left: 0 !important;
  }
}

.picking-lines-table.data th, .picking-lines-table.data td { padding-left: 10px; padding-right: 10px; }
.picking-lines-table.data th:first-child, .picking-lines-table.data td:first-child { padding-left: 22px; }
.picking-lines-table.data th:last-child, .picking-lines-table.data td:last-child { padding-right: 22px; }

/* Step 17 order-entry workflow and UI hardening */
.customer-credit-panel {
  display: grid;
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  gap: 12px;
}
.customer-credit-panel > div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 10px 12px;
}
.customer-credit-panel span {
  display: block;
  margin-bottom: 3px;
  color: var(--ink-500);
  font-size: 12px;
}
.customer-credit-panel strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--ink-900);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.notice[hidden] { display: none !important; }

.customer-products-card .card__body { padding: 18px 22px 20px; }
.customer-history-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
.customer-history-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fbfcfd;
  padding: 15px;
  font-family: var(--font);
}
.customer-history-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.customer-history-panel__head h3 {
  margin: 0 0 3px;
  color: var(--ink-900);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.05px;
}
.customer-history-panel__head p {
  margin: 0;
  color: var(--ink-500);
  font-family: var(--font);
  font-size: 11.5px;
  line-height: 1.45;
}
.customer-product-favourites {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-height: 42px;
}
.favourite-product-chip {
  appearance: none;
  width: 100%;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 10px 11px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  color: var(--ink-900);
  font-family: var(--font);
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease, transform .12s ease;
}
.favourite-product-chip:hover {
  border-color: var(--teal-100);
  background: var(--teal-50);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.favourite-product-chip:active { transform: translateY(0); }
.favourite-product-chip__code {
  color: var(--teal-700);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1px;
}
.favourite-product-chip__name {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-900);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.favourite-product-chip__meta {
  color: var(--ink-500);
  font-size: 10.5px;
  font-weight: 500;
}
.customer-recent-orders {
  display: grid;
  gap: 8px;
  min-height: 42px;
}
.recent-order-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 10px 11px;
  font-family: var(--font);
}
.recent-order-card__main {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.recent-order-card__main strong { color: var(--ink-900); font-size: 11.5px; font-weight: 700; }
.recent-order-card__main span { color: var(--ink-700); font-size: 10.5px; }
.recent-order-card__main small {
  overflow: hidden;
  color: var(--ink-500);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-order-card__actions { display: flex; gap: 6px; flex: none; }
.empty-inline { color: var(--ink-500); font-family: var(--font); font-size: 12px; }
.empty-inline--error { color: var(--bad-fg); }

.order-lines-card { container-type: inline-size; }
.order-lines-card .card__body { padding: 18px 22px 20px; }
.order-lines-card .section-help { margin: 0 0 14px; padding: 0; }
.order-line-list { display: grid; gap: 10px; }
.order-line-card {
  --order-control-h: 40px;
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(220px, 2fr) 82px 82px 112px 122px 96px 34px;
  column-gap: 10px;
  row-gap: 8px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.order-line-card:focus-within {
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px var(--teal-50);
}
.order-line-card__number {
  grid-column: 1;
  grid-row: 1;
  width: 28px;
  height: 28px;
  margin-top: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink-500);
  font-size: 11px;
  font-weight: 800;
}
.order-line-field {
  min-width: 0;
  margin: 0;
  display: grid;
  grid-template-rows: 16px var(--order-control-h);
  row-gap: 6px;
  align-content: start;
}
.order-line-field > label {
  height: 16px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  color: var(--ink-700);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 16px;
  white-space: nowrap;
}
.order-line-field > label span { color: var(--ink-400); font-weight: 500; }
.order-line-card input,
.order-line-card select,
.order-line-card .money-input {
  width: 100%;
  min-width: 0;
  max-width: none;
  height: var(--order-control-h);
  margin: 0;
  font-family: var(--font);
}
.order-line-card input,
.order-line-card select {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-900);
  font-size: 12px;
}
.order-line-card input { padding: 0 10px; }
.order-line-card select { padding: 0 30px 0 10px; }
.order-line-card input:focus,
.order-line-card select:focus {
  outline: none;
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px var(--teal-50);
}
.order-line-card input:disabled {
  background: var(--paper);
  color: var(--ink-400);
  cursor: not-allowed;
}
.order-line-card .money-input { position: relative; display: flex; align-items: center; }
.order-line-card .money-input > span {
  position: absolute;
  left: 10px;
  z-index: 1;
  color: var(--ink-500);
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
}
.order-line-card .money-input input {
  height: var(--order-control-h);
  padding: 0 8px 0 25px !important;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.order-line-field--net strong {
  height: var(--order-control-h);
  display: flex;
  align-items: center;
  color: var(--ink-900);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.order-line-field--net strong.is-pending {
  color: var(--warn-fg);
  font-size: 11px;
  font-weight: 700;
}
.order-line-card__remove {
  grid-column: 8;
  grid-row: 1;
  width: 32px;
  height: 32px;
  margin-top: 26px;
  align-self: start;
  justify-self: end;
  font-family: var(--font);
}
.order-line-card__support {
  grid-column: 2 / 8;
  grid-row: 2;
  min-width: 0;
  min-height: 22px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.order-line-card .order-line-meta {
  min-width: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-500);
  font-size: 10.5px;
  line-height: 1.35;
}
.order-line-card .order-line-meta span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.order-line-card .order-line-meta span + span::before {
  content: '•';
  margin-right: 8px;
  color: var(--ink-300);
}
.order-line-card__support .pill {
  flex: none;
  padding: 2px 8px;
  font-size: 9.5px;
}
.order-line-field--note {
  grid-column: 2 / 8;
  grid-row: 3;
  grid-template-rows: 16px 36px;
}
.order-line-card .order-line-note { height: 36px; }
.order-lines-footer {
  display: flex;
  justify-content: flex-start;
  padding-top: 12px;
}
.order-layout__side .order-summary-card,
.order-layout__side .settlement-summary-card { box-shadow: var(--shadow-sm); }

@container (max-width: 900px) {
  .order-line-card {
    grid-template-columns: 30px repeat(4, minmax(0, 1fr)) 34px;
    column-gap: 8px;
  }
  .order-line-field--product { grid-column: 2 / 5; grid-row: 1; }
  .order-line-field--qty { grid-column: 5; grid-row: 1; }
  .order-line-field--weight { grid-column: 2; grid-row: 2; }
  .order-line-field--price { grid-column: 3; grid-row: 2; }
  .order-line-field--payment { grid-column: 4; grid-row: 2; }
  .order-line-field--net { grid-column: 5; grid-row: 2; }
  .order-line-card__remove { grid-column: 6; grid-row: 1; }
  .order-line-card__support { grid-column: 2 / 6; grid-row: 3; }
  .order-line-field--note { grid-column: 2 / 6; grid-row: 4; }
}
@container (max-width: 600px) {
  .order-line-card { grid-template-columns: 28px minmax(0, 1fr) 34px; }
  .order-line-card__number { grid-column: 1; grid-row: 1; }
  .order-line-card__remove { grid-column: 3; grid-row: 1; }
  .order-line-field--product,
  .order-line-field--qty,
  .order-line-field--weight,
  .order-line-field--price,
  .order-line-field--payment,
  .order-line-field--net,
  .order-line-card__support,
  .order-line-field--note {
    grid-column: 2 / 3;
    grid-row: auto;
  }
  .order-line-card__support { align-items: flex-start; flex-direction: column; gap: 6px; }
  .order-line-card .order-line-meta { flex-wrap: wrap; }
}
@media (max-width: 1180px) {
  .customer-credit-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .customer-history-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .customer-credit-panel,
  .customer-product-favourites { grid-template-columns: 1fr; }
  .recent-order-card { align-items: flex-start; flex-direction: column; }
}

/* ============================================================
   Step 18 — fluid application shell and general ledger
   ============================================================ */
.page {
  width: 100%;
  max-width: none;
  padding: clamp(22px, 2vw, 34px);
}
.main { width: 100%; }
.stat-grid { grid-template-columns: repeat(6, minmax(150px, 1fr)); }
@media (max-width: 1500px) { .stat-grid { grid-template-columns: repeat(3, minmax(180px, 1fr)); } }
@media (max-width: 820px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .stat-grid { grid-template-columns: 1fr; } }

.ledger-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  gap: 16px;
  margin: 18px 0 24px;
}
.ledger-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(360px, .75fr);
  gap: 20px;
  align-items: start;
}
.ledger-account-groups { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px 28px; }
.ledger-account-groups section { min-width: 0; }
.ledger-account-groups h3,
.financial-group h3 {
  margin: 0 0 8px;
  color: var(--ink-500);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
}
.ledger-account-row,
.ledger-journal-row,
.financial-group a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 44px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-900);
  text-decoration: none;
}
.ledger-account-row:hover,
.ledger-journal-row:hover,
.financial-group a:hover { color: var(--teal-700); background: linear-gradient(90deg, transparent, var(--teal-50)); }
.ledger-account-row > span,
.ledger-journal-row > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ledger-account-row strong { display: inline; margin-right: 6px; font-variant-numeric: tabular-nums; }
.ledger-account-row small,
.ledger-journal-row small { color: var(--ink-400); font-size: 10.5px; font-weight: 500; }
.ledger-account-row b,
.ledger-journal-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger-journal-row .num { align-items: flex-end; }

.report-toolbar {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.report-toolbar label { display: grid; gap: 5px; color: var(--ink-500); font-size: 11px; font-weight: 700; }
.report-toolbar input,
.report-toolbar select { min-width: 160px; height: 38px; }

.financial-report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.financial-report-grid > div { display: grid; gap: 20px; }
.financial-group + .financial-group { margin-top: 20px; }
.financial-group a { min-height: 38px; padding: 6px 0; }
.financial-group a b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.financial-total,
.financial-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 2px solid var(--ink-900);
  font-weight: 800;
}
.financial-result {
  margin-top: 20px;
  padding: 18px 22px;
  border: 1px solid var(--ok-bg);
  border-radius: var(--radius-lg);
  background: var(--ok-bg);
  color: var(--ok-fg);
  font-size: 18px;
}
.financial-result.is-loss { border-color: var(--bad-bg); background: var(--bad-bg); color: var(--bad-fg); }
.manual-journal-table select,
.manual-journal-table input { width: 100%; min-width: 140px; }
.manual-journal-table td:nth-child(1) { min-width: 280px; }
.manual-journal-table td:nth-child(2) { min-width: 240px; }
.table-summary { background: var(--paper); font-weight: 700; }
.document-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.document-meta-grid > div {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.document-meta-grid span { color: var(--ink-400); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .55px; }
.document-meta-grid strong { font-size: 13px; }

@media (max-width: 1250px) {
  .ledger-stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ledger-dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .ledger-account-groups,
  .financial-report-grid { grid-template-columns: 1fr; }
  .document-meta-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .page { padding: 18px 14px; }
  .ledger-stat-grid,
  .document-meta-grid { grid-template-columns: 1fr; }
  .report-toolbar { align-items: stretch; }
  .report-toolbar label,
  .report-toolbar input,
  .report-toolbar select,
  .report-toolbar .btn { width: 100%; }
}
.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-3 { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .form-grid .span-2,
  .form-grid .span-3 { grid-column: auto; }
}

/* Step 18 - chart of accounts and supplier nominal coding */
.supplier-product-cell .supplier-nominal {
  width: 100%;
  margin-top: 6px;
  border-color: var(--teal-100);
  background: var(--teal-50);
  color: var(--ink-700);
  font-family: inherit;
}
.supplier-product-cell .supplier-nominal.is-hidden { display: none; }
.account-list-table td { vertical-align: middle; }
.account-list-table td:first-child { width: 92px; font-variant-numeric: tabular-nums; }
.account-list-table td:nth-child(3),
.account-list-table td:nth-child(5),
.account-list-table td:nth-child(6),
.account-list-table td:nth-child(7) { white-space: nowrap; }
.account-list-table .table-actions { justify-content: flex-end; }
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.check-card {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-height: 82px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  cursor: pointer;
}
.check-card:hover { border-color: var(--teal-100); background: var(--teal-50); }
.check-card input { margin-top: 3px; flex: none; }
.check-card span { display: grid; gap: 3px; }
.check-card strong { font-size: 13px; color: var(--ink-900); }
.check-card small { color: var(--ink-500); font-size: 11.5px; line-height: 1.45; }
@media (max-width: 760px) {
  .checkbox-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Step 18.1 — accounting UI hardening
   ============================================================ */
.accounting-filter-card {
  margin-bottom: 20px;
}
.accounting-filter-card .card__body {
  padding: 14px 16px;
}
.accounting-filter-bar {
  width: 100%;
  margin: 0;
}
.accounting-filter-bar .field {
  min-width: 0;
}
.accounting-filter-bar .field input,
.accounting-filter-bar .field select {
  width: 100%;
  min-width: 0;
}
.accounting-filter-bar .filter-bar__search {
  flex: 1 1 360px;
  min-width: 280px;
}
.accounting-filter-bar__select {
  flex: 0 1 190px;
  min-width: 170px !important;
}
.accounting-filter-bar__source {
  flex: 0 1 250px;
  min-width: 220px !important;
}
.accounting-filter-bar--dates .field {
  flex: 0 0 180px;
}
.accounting-filter-bar .btn {
  min-width: 88px;
}

.form-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.manual-journal-table input,
.manual-journal-table select {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-900);
  font-family: inherit;
  font-size: 14px;
}
.manual-journal-table input:focus,
.manual-journal-table select:focus {
  outline: none;
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px var(--teal-50);
}
.manual-journal-table input.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.accounting-periods-table form {
  margin: 0;
}
.accounting-periods-table .actions-cell {
  width: 112px;
  text-align: right;
}
.ledger-group-empty {
  padding: 12px 0;
  color: var(--ink-400);
  font-size: 12px;
}
.financial-report-stack {
  display: grid;
  gap: 20px;
}
.financial-static-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 38px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-900);
}
.financial-static-row b {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .form-grid--3 {
    grid-template-columns: 1fr;
  }
  .accounting-filter-bar .filter-bar__search,
  .accounting-filter-bar__select,
  .accounting-filter-bar__source,
  .accounting-filter-bar--dates .field {
    flex: 1 1 220px;
    min-width: 180px !important;
  }
}
@media (max-width: 600px) {
  .accounting-filter-card .card__body {
    padding: 14px;
  }
  .accounting-filter-bar .filter-bar__search,
  .accounting-filter-bar__select,
  .accounting-filter-bar__source,
  .accounting-filter-bar--dates .field,
  .accounting-filter-bar .btn {
    width: 100%;
    min-width: 0 !important;
    flex: 1 1 100%;
  }
}

/* ============================================================
   Step 18.2 — Role-aware operational dashboard
   ============================================================ */
.dashboard-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 132px;
  padding: 26px 28px;
  margin-bottom: 24px;
  border: 1px solid var(--teal-100);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 92% 10%, rgba(19, 181, 234, .13), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #f4fbfe 100%);
  box-shadow: var(--shadow-sm);
}
.dashboard-hero__copy { min-width: 0; }
.dashboard-hero__copy h1 {
  margin: 2px 0 5px;
  font-size: clamp(25px, 2vw, 32px);
  line-height: 1.15;
  letter-spacing: -.6px;
}
.dashboard-hero__copy p { margin: 0; color: var(--ink-500); font-size: 13.5px; }
.dashboard-hero__primary {
  min-height: 46px;
  padding-inline: 19px;
  gap: 10px;
  flex: none;
  box-shadow: 0 7px 18px rgba(14, 159, 208, .18);
}
.dashboard-hero__primary .quick-action__icon {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: currentColor;
}
.dashboard-hero__primary .quick-action__icon svg { width: 21px; height: 21px; }

.dashboard-section { margin-bottom: 24px; }
.dashboard-section__heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}
.dashboard-section__heading h2 { margin: 0; font-size: 15px; letter-spacing: -.1px; }
.dashboard-section__heading p { margin: 3px 0 0; color: var(--ink-500); font-size: 12.5px; }

.quick-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
.quick-action {
  min-width: 0;
  min-height: 92px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 16px;
  color: var(--ink-900);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.quick-action:hover {
  border-color: var(--teal-100);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.quick-action__icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 10px;
  background: var(--teal-50);
  color: var(--teal-700);
  flex: none;
}
.quick-action__icon svg { width: 22px; height: 22px; display: block; }
.quick-action__copy { min-width: 0; }
.quick-action__copy strong { display: block; margin-bottom: 3px; font-size: 13.5px; }
.quick-action__copy small { display: block; color: var(--ink-500); font-size: 11.5px; line-height: 1.4; }
.quick-action__arrow { color: var(--ink-300); font-size: 18px; transition: transform .14s, color .14s; }
.quick-action:hover .quick-action__arrow { color: var(--teal-600); transform: translateX(2px); }

.dashboard-stat-grid { margin-bottom: 24px; }
.dashboard-stat-grid .stat {
  color: inherit;
  text-decoration: none;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.dashboard-stat-grid .stat:hover {
  border-color: var(--teal-100);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}


.dashboard-workflow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.dashboard-workflow__step {
  position: relative;
  min-width: 0;
  min-height: 94px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  padding: 16px;
  color: var(--ink-900);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease, background .14s ease;
}
.dashboard-workflow__step::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--ink-300);
}
.dashboard-workflow__step:hover {
  border-color: var(--teal-100);
  background: var(--paper);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.dashboard-workflow__step--ok::before { background: var(--ok-fg); }
.dashboard-workflow__step--warn::before { background: var(--warn-fg); }
.dashboard-workflow__step--bad::before { background: var(--bad-fg); }
.dashboard-workflow__step--info::before { background: var(--info-fg); }
.dashboard-workflow__count {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--mute-bg);
  color: var(--ink-700);
  font-size: 13px;
  font-weight: 750;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dashboard-workflow__copy {
  min-width: 0;
  display: block;
}
.dashboard-workflow__copy strong {
  display: block;
  color: var(--ink-900);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  word-break: normal;
  overflow-wrap: normal;
}
.dashboard-workflow__copy small {
  display: block;
  margin-top: 4px;
  color: var(--ink-500);
  font-size: 11.25px;
  line-height: 1.35;
  word-break: normal;
  overflow-wrap: normal;
}
.dashboard-workflow__arrow {
  color: var(--ink-300);
  font-size: 17px;
  line-height: 1;
  transition: color .14s ease, transform .14s ease;
}
.dashboard-workflow__step:hover .dashboard-workflow__arrow {
  color: var(--teal-600);
  transform: translateX(2px);
}

.dashboard-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(340px, .75fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 24px;
}
.dashboard-main-grid > .card { min-width: 0; }
.card__subtitle { margin: 3px 0 0; color: var(--ink-500); font-size: 11.5px; font-weight: 400; }
.dashboard-delivery-card .card__head > div,
.dashboard-attention-card .card__head > div { min-width: 0; }

.delivery-round-list { display: grid; gap: 8px; }
.delivery-round {
  min-width: 0;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  color: var(--ink-900);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: border-color .14s, background .14s;
}
.delivery-round:hover { border-color: var(--teal-100); background: var(--teal-50); }
.delivery-round__marker { width: 8px; height: 8px; border-radius: 50%; background: var(--teal-500); }
.delivery-round__copy { min-width: 0; }
.delivery-round__copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.delivery-round__copy small { display: block; margin-top: 2px; color: var(--ink-500); font-size: 11.5px; }
.delivery-round__amount { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }

.attention-list { display: grid; gap: 8px; }
.attention-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  color: var(--ink-900);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .14s, background .14s;
}
.attention-item:hover { background: var(--paper); border-color: var(--line-strong); }
.attention-item__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-300); }
.attention-item--ok .attention-item__dot { background: var(--ok-fg); }
.attention-item--warn .attention-item__dot { background: var(--warn-fg); }
.attention-item--bad .attention-item__dot { background: var(--bad-fg); }
.attention-item--info .attention-item__dot { background: var(--info-fg); }
.attention-item__copy { min-width: 0; }
.attention-item__copy strong { display: block; font-size: 12.5px; line-height: 1.35; }
.attention-item__copy small { display: block; margin-top: 3px; color: var(--ink-500); font-size: 11px; line-height: 1.4; }
.attention-item__arrow { color: var(--ink-300); font-size: 16px; }
.attention-clear {
  min-height: 126px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  text-align: left;
}
.attention-clear__icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ok-bg);
  color: var(--ok-fg);
  font-weight: 800;
}
.attention-clear strong { display: block; font-size: 13px; }
.attention-clear p { margin: 3px 0 0; color: var(--ink-500); font-size: 11.5px; }

.dashboard-activity-card { margin-bottom: 0; }
.dashboard-activity-table th:first-child,
.dashboard-activity-table td:first-child { width: 72px; }
.dashboard-activity-table th:nth-child(2),
.dashboard-activity-table td:nth-child(2) { width: 122px; }

@media (max-width: 1400px) {
  .dashboard-workflow {
    grid-template-columns: repeat(5, minmax(180px, 1fr));
    overflow-x: auto;
    padding-bottom: 3px;
  }
  .dashboard-main-grid { grid-template-columns: minmax(0, 1.25fr) minmax(310px, .75fr); }
}

@media (max-width: 1080px) {
  .dashboard-main-grid { grid-template-columns: 1fr; }
  .dashboard-workflow { grid-template-columns: repeat(3, minmax(220px, 1fr)); }
}

@media (max-width: 760px) {
  .dashboard-hero { align-items: stretch; flex-direction: column; padding: 22px; }
  .dashboard-hero__primary { width: 100%; justify-content: center; }
  .dashboard-section__heading { align-items: flex-start; flex-direction: column; }
  .quick-action-grid { grid-template-columns: 1fr; }
  .dashboard-workflow { grid-template-columns: 1fr; overflow: visible; }
  .dashboard-workflow__step { min-height: 82px; }
  .delivery-round { grid-template-columns: 10px minmax(0, 1fr); }
  .delivery-round__amount { grid-column: 2; }
}

.active-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -6px 0 16px;
}
.active-filter-row__clear { color: var(--teal-700); font-size: 11.5px; font-weight: 600; text-decoration: none; }
.active-filter-row__clear:hover { text-decoration: underline; }

/* Step 20 — correction and reversal workflows */
.notice--compact { margin: 14px 0; }
.notice-list { margin: 8px 0 0 18px; padding: 0; }
.notice-list li { margin: 4px 0; line-height: 1.45; }

/* Step 20 — bank Suspense correction workflow */
.suspense-classification {
  display: grid;
  gap: .85rem;
  margin-top: .8rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.suspense-classification--posted {
  border-color: #b9dfca;
  background: var(--ok-bg);
}
.suspense-classification__heading,
.suspense-classification--posted > div:first-child {
  display: grid;
  gap: .2rem;
}
.suspense-classification__heading span,
.suspense-classification small {
  color: var(--ink-500);
  font-size: .82rem;
  line-height: 1.45;
}
.suspense-classification__label {
  color: var(--ok-fg);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.correction-grid {
  display: grid;
  grid-template-columns: minmax(190px, 1.25fr) minmax(145px, .7fr) minmax(210px, 1.4fr) auto;
  gap: .75rem;
  align-items: end;
}
.correction-disclosure {
  border-top: 1px solid var(--line);
  padding-top: .7rem;
}
.correction-disclosure summary {
  color: var(--bad-fg);
  cursor: pointer;
  font-size: .82rem;
  font-weight: 700;
}
.correction-disclosure form { margin-top: .75rem; }
@media (max-width: 1100px) {
  .correction-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .correction-grid { grid-template-columns: 1fr; }
  .correction-grid .btn { width: 100%; }
}

/* Step 20.1 — role matrix parity */
.role-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 22px;
}
.role-summary-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.role-summary-card strong { font-size: 14px; color: var(--text); }
.role-summary-card span { font-size: 12px; line-height: 1.45; color: var(--muted); }
.role-summary-card small { margin-top: auto; font-size: 11px; font-weight: 700; color: var(--brand); }
@media (max-width: 1180px) { .role-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .role-summary-grid { grid-template-columns: 1fr; } }

/* Step 20.1 — controlled UAT data parity */
.test-data-form--spaced { margin-top: 16px; }
.test-data-action-field { align-self: end; }