/* Warehouse Genie UI foundation tokens.
   Brand primitives are implementation values; components consume semantic
   roles so a surface can evolve without ambiguous literal replacement. */
:root {
  /* Brand primitives */
  --brand-navy: #07143D;
  --brand-blue: #1457EE;
  --brand-blue-deep: #0A38B5;
  --brand-divider: #AFC2FF;
  --brand-navy-soft: #45506E;
  --brand-blue-soft: #E7EDFF;
  --brand-blue-wash: #F5F7FF;
  --brand-divider-soft: #D7E1FF;
  --brand-blue-glow: rgba(20, 87, 238, .24);
  --brand-blue-ring: rgba(20, 87, 238, .14);
  --brand-navy-glass: rgba(7, 20, 61, .46);
  --brand-navy-shadow: rgba(7, 20, 61, .16);
  --brand-navy-shadow-soft: rgba(7, 20, 61, .06);

  /* Semantic layer: application-wide brand intent */
  --surface-app: var(--brand-blue-wash);
  --surface-panel: #fff;
  --surface-subtle: #eef2ff;
  --surface-hover: #f0f4ff;
  --surface-info: var(--brand-blue-soft);
  --surface-danger: #fff1f0;
  --surface-success: #edf8f1;
  --surface-warning: #fff8e5;
  --surface-row-alt: #fbfcff;
  --surface-section: #fcfdff;
  --text: #17213c;
  --text-heading: var(--brand-navy);
  --text-muted: var(--brand-navy-soft);
  --text-subtle: #66758d;
  --text-on-action: #fff;
  --border: var(--brand-divider-soft);
  --border-control: #b8c5e8;
  --border-strong: var(--brand-divider);
  --border-warning: #c98900;
  --action: var(--brand-blue);
  --action-hover: var(--brand-blue-deep);
  --action-neutral: #5f6b7d;
  --link: var(--brand-blue-deep);
  --link-hover: #062b8e;
  --focus-ring: var(--brand-blue-glow);
  --danger: #a93632;
  --danger-hover: #852925;
  --danger-border: #e3aaa7;
  --warning: #8a5200;
  --success: #216e45;
  --success-border: #9dcfb2;
  --info-border: var(--brand-divider);
  --table-header: #edf1ff;
  --table-header-highlight: #f4f6ff;
  --row-hover: #f2f5ff;
  --shadow-soft: 0 8px 24px var(--brand-navy-shadow-soft);
  --shadow-dialog: 0 24px 72px rgba(7, 20, 61, .28);

  /* Site-wide density and typography scale. Components consume these values
     so page templates do not invent local sizes or spacing. */
  --type-content: .8125rem;
  --type-section: 1rem;
  --type-card: 1.375rem;
  --type-page: 1.5rem;
  --line-content: 1.35;
  --section-rule: #526079;
  --control-height: 30px;
  --field-label-width: 8.75rem;
  --space-row: .3rem;
  --space-field: .75rem;
  --space-section: .65rem;
}

/* Warehouse Genie minimal styles */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  margin: 0;
  background: var(--surface-app);
}
/* Background-scroll lock while a modal is open. Deliberately a function of the
   LIVE DOM rather than of close-handler bookkeeping: htmx swaps away the region
   that owns the receipt dialogs, so an open dialog is destroyed without close()
   ever running and a class-based lock outlived it — the page stayed
   scroll-locked with no modal on screen until a refresh. :has() cannot go
   stale. The .modal-open class is still maintained as a state hook. */
body:has(dialog[data-modal-card][open]) { overflow: hidden; }
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.icon-sprite { position:absolute; width:0; height:0; overflow:hidden; }
.icon { width:1em; height:1em; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

body > nav {
  background: var(--brand-navy);
  color: var(--text-on-action);
  padding: 0 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 48px;
}

body > nav a { color: var(--brand-divider-soft); text-decoration: none; }
body > nav a:hover { color: var(--text-on-action); }
body > nav .brand { font-weight: 700; font-size: 1.1em; color: var(--text-on-action); }
body > nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.75rem; flex: 1; }
body > nav .user-info { flex:0 0 auto; font-size:12px; color:var(--brand-divider); display:flex; align-items:center; gap:.45rem; white-space:nowrap; }
/* The one item in .user-info allowed to give ground. It keeps the default `flex:0 1 auto`
   with min-width:0, so wherever .user-info is genuinely constrained (the max-width:175px
   cap in the <=1050px block) this collapses — to zero if it has to — before the indicators.
   It is NOT, however, a shrink budget the indicators can lean on: by <=1050px it is already
   computed to width 0, so any further deficit is taken as viewport overflow, and above
   1050px .user-info is content-sized so nothing inside it is squeezed at all. The email's
   real lever is therefore its max-width steps (12rem / 7rem <=1500px), which is why those
   carry the cost of the indicator labels — see the note there. Losing characters here is
   harmless; the address is in the title, and the nav-bar copy of it is an identity
   reminder, not a control. */
body > nav .nav-identity-email { display:inline-block; min-width:0; max-width:12rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body > nav .nav-version { color:var(--brand-divider); font-size:.78rem; white-space:nowrap; align-self:center; margin-left:auto; }
body > nav a.nav-version { text-decoration:none; }
body > nav a.nav-version:hover { color:var(--text-on-nav, #fff); text-decoration:underline; }

/* Inventory nav group — pure-CSS hover dropdown (no JS) */
body > nav .nav-group { position: relative; }
body > nav .nav-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  flex-direction: column;
  gap: 0;
  min-width: 150px;
  padding: 0.25rem 0;
  background: var(--brand-navy);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  z-index: 100;
}
body > nav .nav-group:hover .nav-submenu { display: flex; }
body > nav .nav-submenu li { padding: 0; }
body > nav .nav-submenu a { display: block; padding: 0.4rem 0.9rem; white-space: nowrap; }
body > nav .nav-submenu a:hover { background: var(--action-hover); }

main { max-width: 1240px; margin: 2rem auto; padding: 0 1.25rem; }
main > :where(:not([data-viewport-list])) { margin-inline: auto; }

h1, h2 { color: var(--text-heading); margin-top: 0; letter-spacing:-.02em; }

.app-table { width: 100%; border-collapse: separate; border-spacing:0; background: var(--surface-panel); box-shadow: var(--shadow-soft); }
.app-table th, .app-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.app-table th { background: var(--table-header); color:var(--text-heading); font-size:12px; font-weight:750; letter-spacing:.025em; }
.app-table th a { color: var(--text-heading); text-decoration: none; }
.app-table th a:hover { color:var(--action); text-decoration:none; }
.app-table tbody tr > td { transition:background .14s ease; }
.app-table tbody tr:hover > td { background: var(--row-hover); }

.list-controls { margin-bottom: 1rem; display: flex; gap: 0.5rem; align-items: center; }
.list-controls input[type=text] { width:250px; padding:8px 10px; border:1px solid var(--border-control); border-radius:7px; font:inherit; font-size:14px; }
.list-controls button, .list-controls a { display:inline-flex; align-items:center; justify-content:center; padding:8px 14px; background:var(--action); color:var(--text-on-action); border:1px solid var(--action); border-radius:8px; cursor:pointer; text-decoration:none; }
.list-controls a { background:var(--action-neutral); border-color:var(--action-neutral); }

.flash { max-width:1240px; padding:12px 16px; margin:1rem auto; border:1px solid; border-left-width:4px; border-radius:10px; background:var(--surface-panel); box-shadow:var(--shadow-soft); }
.flash-error { background: var(--surface-danger); border-color:var(--danger-border); color:var(--danger); }
.htmx-error-flash { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.htmx-error-flash .btn { flex:0 0 auto; }
.wms-toast-region {
  position: fixed;
  top: calc(48px + .65rem);
  right: .75rem;
  z-index: 2147483000;
  width: min(34rem, calc(100vw - 1.5rem));
  pointer-events: none;
}
.wms-toast-region > .htmx-error-flash {
  width: 100%;
  margin: 0;
  pointer-events: auto;
}
.flash-success { background: var(--surface-success); border-color:var(--success-border); color:var(--success); }
.flash-info { background: var(--surface-info); border: 1px solid var(--info-border); color: var(--text-heading); }
.flash-warning { background: var(--surface-warning); border-color:var(--border-warning); color:var(--warning); }

.detail-card { background: var(--surface-panel); padding: 1.5rem; border:1px solid var(--border); box-shadow: var(--shadow-soft); border-radius: 12px; }
.detail-card h2 { border-bottom:2px solid var(--border); padding-bottom:.5rem; }
.page-actions { display: flex; gap: 0.5rem; align-items: center; }
.btn { min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:.42rem; padding:8px 14px; background:var(--action); color:var(--text-on-action); border:1px solid var(--action); border-radius:8px; box-shadow:0 3px 10px var(--brand-blue-ring); cursor:pointer; text-decoration:none; font:inherit; font-size:14px; font-weight:700; line-height:1.2; transition:background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.btn:hover { background:var(--action-hover); border-color:var(--action-hover); box-shadow:0 5px 14px rgba(20,87,238,.2); color:var(--text-on-action); transform:translateY(-1px); }
.btn:focus-visible { outline:3px solid var(--focus-ring); outline-offset:2px; }
.btn:active { transform:translateY(0); }
.btn-muted { background: var(--surface-panel); color: var(--text-heading); border-color: var(--border-strong); }
.btn-muted:hover { background: var(--surface-info); border-color:var(--brand-blue); color: var(--text-heading); }
.btn[disabled], .btn[aria-disabled=true] { opacity:.48; pointer-events:none; box-shadow:none; }
.btn-link, button.btn-link { background:transparent; color:var(--link); border:0; padding:0; cursor:pointer; text-decoration:underline; font:inherit; }
.btn-icon, button.btn-icon { width:40px; height:40px; padding:0; border-radius:8px; }
.field-group { display: grid; grid-template-columns: 200px 1fr; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.field-label { font-weight:600; color:var(--text-muted); padding-top:4px; }
.field-value { padding: 4px 0; }
.field-hint { margin:4px 0 0; color:var(--text-subtle); font-size:12px; }
.entity-subsection { margin: 0 0 1.25rem; }
.entity-subsection-title {
  margin: 0 0 .75rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.entity-subsection .field-group:last-child { margin-bottom: 0; }
.field-pair-hint { grid-column: 1 / -1; margin-top: -.15rem; }
.choice-stack { display: flex; flex-direction: column; gap: .35rem; }
.choice-row, .check-row { display:inline-flex; align-items:center; gap:.45rem; width:max-content; max-width:100%; margin:0; font-weight:600; }
.choice-row input, .check-row input { width: auto; margin: 0; flex: 0 0 auto; }
.rule-item-picker .filter-add { max-width: 620px; }
.rule-item-picker .filter-tags { min-height: 30px; }
.recurring-rule-row { display: contents; }

:where(form) .form-group { margin-bottom:1rem; }
:where(form) label { display:block; font-weight:600; margin-bottom:4px; color:var(--text-muted); }
:where(form) :where(input, select, textarea) { width:100%; min-height:40px; padding:8px 10px; border:1px solid var(--border-control); border-radius:7px; background:var(--surface-panel); color:var(--text); font:inherit; font-size:14px; transition:border-color .15s ease, box-shadow .15s ease; }
:where(form) :where(input, select, textarea):hover { border-color:var(--border-strong); }
:where(form) :where(input, select, textarea):focus { border-color:var(--action); box-shadow:0 0 0 3px var(--brand-blue-ring); outline:0; }
:where(form) :where(input[type=checkbox], input[type=radio]) { width:18px; min-height:18px; height:18px; padding:0; accent-color:var(--action); box-shadow:none; }
.searchable-select-panel {
  position: fixed;
  z-index: 10000;
  padding: 6px;
  background: var(--surface-panel);
  border: 1px solid var(--border-control);
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(13,43,71,0.22);
}
.searchable-select-input {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--border-control);
  border-radius: 5px;
  font-size: 14px;
  background: var(--surface-row-alt);
}
.searchable-select-header { display:flex; align-items:center; gap:.4rem; padding:.45rem; }
.searchable-select-error {
  margin:.25rem;
  padding:.45rem .55rem;
  border:1px solid var(--border-warning);
  border-radius:5px;
  background:var(--surface-warning);
  color:var(--text);
  font-size:12px;
  line-height:1.35;
}
.searchable-select-header .searchable-select-input { flex:1; min-width:0; }
.searchable-select-create { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; flex:0 0 40px; border:1px solid currentColor; border-radius:50%; background:var(--surface, var(--surface-panel)); color:var(--accent, var(--success)); font-size:1.35rem; line-height:0; cursor:pointer; }
.searchable-select-create:disabled { opacity:.45; cursor:not-allowed; }
.form-error { color:var(--danger); border:1px solid var(--danger); padding:.5rem; border-radius:7px; background:var(--surface-danger); }
.receipt-header-warning { display:block; margin:.3rem 0 0; color:var(--text-muted); font-size:.85rem; }
.receipt-header-warning-caution { padding:.35rem .55rem; color:#7a4b00; border:1px solid #f0c36d; border-left-width:4px; border-radius:.3rem; background:#fff7e0; }
.searchable-select-current { display:none; }
@media (max-width:640px) {
  .scaffold-card-field .searchable-select-current:not([hidden]) {
    display:block;
    white-space:normal;
    overflow-wrap:anywhere;
    margin:0;
    color:var(--text-muted);
  }
}
.searchable-select-options { margin-top: 5px; overflow-y: auto; }
.searchable-select-option {
  display: block;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 4px;
  background: var(--surface-panel);
  color: var(--text);
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  font: inherit;
  cursor: pointer;
}
.searchable-select-option:hover,
.searchable-select-option.selected {
  background: var(--surface-hover);
  color: var(--text-heading);
}
.searchable-select-empty { padding:8px; color:var(--text-subtle); font-size:13px; }
.searchable-select-group { padding:6px 8px 2px; color:var(--text-subtle); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.invoice-zero-notice { color:var(--warning); border-left:3px solid var(--warning); padding:.35rem .55rem; font-weight:600; }
.invoice-detail-dialog { width:min(1100px, calc(100vw - 2rem)); max-height:calc(100vh - 2rem); }
.invoice-detail-dialog .modal-body { overflow:auto; }
.btn-secondary { background:var(--action-neutral); border-color:var(--action-neutral); }
.btn-danger { background: var(--danger); border-color: var(--danger); box-shadow:none; }
.btn-danger:hover { background:var(--danger-hover); border-color:var(--danger-hover); }

.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--surface-app); }
.login-box { width:360px; padding:2rem; border:1px solid var(--border); border-radius:12px; background:var(--surface-panel); box-shadow:var(--shadow-dialog); }
.login-box h1 { text-align: center; margin-bottom: 0.25rem; }
.login-box h2 { text-align:center; font-weight:normal; color:var(--text-muted); margin-top:0; margin-bottom:1.5rem; }
.login-box label { display: block; font-weight: 600; margin-bottom: 0.75rem; }
.login-box input { display:block; width:100%; margin-top:4px; padding:8px 10px; border:1px solid var(--border-control); border-radius:7px; font-size:14px; }
.login-tools { text-align:center; margin:1rem 0 0; font-size:13px; }
.login-box button { display: block; width: 100%; padding: 10px; background: var(--action); color: var(--text-on-action); border: none; border-radius: 4px; cursor: pointer; font-size: 15px; margin-top: 1rem; }

a { color: var(--link); }
a:hover { color: var(--link-hover); }

.back-link { display:inline-flex; align-items:center; gap:.3rem; margin-bottom:1rem; }

.section-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.15rem; }
.section-header h1 { margin-bottom:0; font-size:1.75rem; }
.section-divider { border:0; border-top:2px solid var(--border); margin:1.75rem 0; }
.badge { display:inline-flex; align-items:center; padding:3px 9px; border:1px solid transparent; border-radius:999px; font-size:11px; font-weight:750; letter-spacing:.025em; line-height:1.25; }
.badge-yes { background:var(--surface-success); border-color:var(--success-border); color:var(--success); }
.badge-no { background:var(--surface-danger); border-color:var(--danger-border); color:var(--danger); }
.badge-muted { background:var(--surface-subtle); border-color:var(--border); color:var(--text-muted); }
/* A receipt of kind Return: goods back from a delivery, not new stock. */
.badge-return { background:var(--surface-warning); border-color:var(--border-warning); color:var(--warning); }
.receipt-list-create { display:inline-flex; flex-wrap:wrap; gap:.5rem; }
.badge-warn { background:var(--surface-warning); border-color:var(--border-warning); color:var(--warning); }
/* Historical operator-import lines (source='operator-import'): billed from the Camelot
   charges archive for demo completeness, NOT editable and NOT live-captured. Distinct
   from the green live badges and the red editable-operator badge. */
.badge-import { background: #ede7f6; color: #4527a0; }

/* QBO configuration hub: compact operator facts and actions above the existing item map. */
.qbo-config-section { margin-bottom: 1.5rem; }
.qbo-card-heading { display: flex; align-items: center; gap: .65rem; margin-bottom: 1rem; }
.qbo-card-heading h2, .qbo-config-section > h2 { margin-bottom: 0; }
.qbo-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1.5rem; margin: 0; }
.qbo-facts > div { min-width: 0; }
.qbo-facts dt { color: #68798d; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.qbo-facts dd { margin: .15rem 0 0; font-weight: 600; }
.qbo-value-wrap { overflow-wrap: anywhere; }
.qbo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.25rem; }
.qbo-actions form { margin: 0; }
.qbo-btn-disabled { background: #aab3bd; border-color: #aab3bd; cursor: not-allowed; opacity: .75; }
.qbo-locked-control { display: inline-flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.qbo-locked-control button[disabled] { cursor: not-allowed; opacity: .62; }
.qbo-locked-control small { color: #65758a; max-width: 22rem; }
.qbo-config-warning { color: #8a4b00; font-weight: 600; }
.qbo-actions button:disabled { cursor: not-allowed; opacity: .5; }
#qbo-test-result .flash { margin: 1rem 0 0; }

@media (max-width: 700px) {
  .qbo-facts { grid-template-columns: 1fr; }
}

/* Centered setup edit dialogs. */
.modal-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: min(840px, calc(100vh - 32px));
  padding: 0;
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand-blue);
  border-radius: 16px;
  background: var(--surface-panel);
  box-shadow: var(--shadow-dialog);
  overflow: visible;
}
.modal-dialog::backdrop { background:var(--brand-navy-glass); backdrop-filter:blur(3px); }
/* modal_stack.js: only the first modal dims the page; later ones dim the
   cards beneath them with the same glass. */
dialog[data-modal-stacked]::backdrop { background:transparent; backdrop-filter:none; }
dialog[data-modal-covered]::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:20;
  border-radius:inherit;
  background:var(--brand-navy-glass);
  backdrop-filter:blur(3px);
  pointer-events:none;
}
.modal-dialog[data-modal-covered]::after { inset:-3px -1px -1px; }
.modal-card { background:var(--surface-panel); display:flex; flex-direction:column; max-height:inherit; overflow:hidden; border-radius:0 0 14px 14px; }
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-panel);
}
.modal-title { margin:0; color:var(--text-heading); font-size:1.08rem; letter-spacing:-.01em; }
.modal-actions { display: flex; align-items: center; gap: 0.45rem; }
.card-copy-feedback { position:fixed; z-index:1200; padding:5px 9px; border:1px solid var(--border); border-radius:5px; background:var(--surface-panel); color:var(--text); box-shadow:var(--shadow-dialog); font-size:.82rem; font-weight:650; line-height:1.2; pointer-events:none; }
[data-card-share][data-copied="1"] { color:var(--success); }
.modal-body { padding:1.25rem 1.4rem; overflow-y:auto; overscroll-behavior:contain; }
.modal-footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 1.25rem; border-top:1px solid var(--border); background:var(--brand-blue-wash); }
.modal-footer-note { color:var(--text-muted); font-size:12px; }
.modal-card .field-group { grid-template-columns: 170px 1fr; }
.modal-card .form-actions { margin: 0; }
.table-action { white-space: nowrap; width: 1%; }

/* Declarative CRUD scaffold: dashboard language at operations density. */
[data-scaffold-list], [data-row-motion-root] { position:relative; }
.scaffold-total { display:inline-flex; vertical-align:middle; padding:3px 8px; border-radius:999px; background:var(--brand-blue-soft); color:var(--brand-blue-deep); font-size:.42em; font-weight:750; letter-spacing:0; }
.receipt-scope-indicator { margin-left:.25rem; color:var(--text-muted); font-size:.48em; font-weight:650; letter-spacing:0; white-space:nowrap; }
.stat-card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(175px, 1fr)); gap:.75rem; margin:0 0 .9rem; }
.stat-card { position:relative; min-height:94px; display:grid; align-content:center; gap:.1rem; padding:1rem 1rem 1rem 1.15rem; overflow:hidden; border:1px solid var(--border); border-radius:12px; background:var(--surface-panel); box-shadow:var(--shadow-soft); transition:transform .16s ease, box-shadow .16s ease; }
.stat-card::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--brand-divider); }
.stat-card:hover { box-shadow:0 12px 28px var(--brand-navy-shadow-soft); transform:translateY(-2px); }
.stat-card-primary::before { background:var(--brand-blue); }
.stat-card-success::before { background:var(--success); }
.stat-card-warning::before { background:var(--warning); }
.stat-card-neutral::before { background:var(--brand-divider); }
.stat-card-label { color:var(--text-muted); font-size:11px; font-weight:750; letter-spacing:.07em; text-transform:uppercase; }
.stat-card-value { color:var(--text-heading); font-size:1.55rem; font-variant-numeric:tabular-nums; line-height:1.15; }
.stat-card-detail { color:var(--text-muted); font-size:11px; }
.scaffold-toolbar { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.75rem; padding:.75rem; border:1px solid var(--border); border-radius:12px; background:var(--surface-panel); box-shadow:var(--shadow-soft); }
.scaffold-toolbar form { display:flex; align-items:center; flex:1 1 auto; flex-wrap:wrap; gap:.5rem; margin:0; }
.scaffold-toolbar form > label { margin:0; }
.scaffold-toolbar input, .scaffold-toolbar select { width:auto; }
.scaffold-toolbar select[data-searchable-select] { min-width:180px; }
.scaffold-toolbar select[data-stable-width] {
  width:240px;
  min-width:240px;
  max-width:240px;
}
.scaffold-toolbar input[type=search] { width:180px; }
.scaffold-toolbar .btn { padding:8px 12px; }
.scaffold-toolbar > .btn { flex:0 0 auto; white-space:nowrap; }
.scaffold-search { position:relative; display:inline-flex; align-items:center; margin:0; }
.scaffold-search input[type=search] { padding-left:2.2rem; }
.scaffold-search > .icon { position:absolute; left:.72rem; z-index:1; width:15px; height:15px; color:var(--text-muted); pointer-events:none; }
.scaffold-date-filter, .scaffold-page-size { display:flex; align-items:center; gap:.35rem; margin:0; color:var(--text-muted); font-size:12px; font-weight:650; }
.scaffold-count { margin-left:auto; padding:0 .35rem; color:var(--text-muted); white-space:nowrap; font-size:12px; font-variant-numeric:tabular-nums; }
.scaffold-filter-chips { display:flex; align-items:center; flex-wrap:wrap; gap:.45rem; margin:0 0 .75rem; }
.scaffold-filter-chip { display:inline-flex; align-items:center; gap:.25rem; padding:0 0 0 .75rem; border:1px solid var(--border); border-radius:999px; background:var(--surface-info); color:var(--text-heading); font-size:12px; font-weight:650; }
.scaffold-filter-chip a { display:inline-grid; place-items:center; color:inherit; border-radius:50%; text-decoration:none; }
.scaffold-filter-chip a.chip-action { display:inline-flex; width:auto; height:auto; min-width:0; padding:0 .65rem; border-radius:999px; white-space:nowrap; }
.scaffold-filter-chip a:hover { background:rgba(20,87,238,.12); }
.scaffold-filter-chip .icon { width:13px; height:13px; }
.scaffold-clear-filters { display:inline-flex; align-items:center; margin-left:.2rem; padding:0 .5rem; font-size:12px; }
.scaffold-table-frame { position:relative; min-width:0; }
.scaffold-table-scroll { position:relative; max-width:100%; overflow:auto; border:1px solid var(--border); border-radius:0; background:var(--surface-panel); box-shadow:var(--shadow-soft); }
.scaffold-table-scroll[data-sticky-header] { max-height:min(66vh, 720px); }
.scaffold-table { margin:0; box-shadow:none; }
.scaffold-table thead th { height:42px; padding-top:0; padding-bottom:0; border-bottom:1px solid var(--border-strong); background:linear-gradient(180deg, var(--table-header-highlight) 0%, var(--table-header) 100%); white-space:nowrap; }
.scaffold-table-scroll[data-sticky-header] .scaffold-table thead th { position:sticky; top:0; z-index:2; box-shadow:0 1px 0 var(--brand-divider); }

/* Exception Center: compact queue-state controls and category markers.  Every
   category retains text and a distinct glyph, so color is never the only cue. */
/* Exceptions: tiers of one-line types; each opens into its cases. */
.exceptions-page { display:grid; gap:1rem; max-width:72rem; }
.exception-tier { display:grid; gap:.45rem; }
.exception-tier-title { display:flex; align-items:center; gap:.4rem; margin:0; font-size:var(--type-section); font-weight:800; color:var(--text-heading); }
.exception-tier-title small { color:var(--text-muted); font-weight:600; font-size:var(--type-content); }
.exception-types { display:grid; gap:.35rem; margin:0; padding:0; list-style:none; }
.exception-type-line { border:1px solid var(--border); border-left-width:4px; border-radius:.5rem; background:var(--surface-panel); box-shadow:var(--shadow-soft); }
.exception-type-line > summary { display:flex; align-items:center; gap:.5rem; min-height:44px; padding:.45rem .75rem; cursor:pointer; list-style:none; font-size:var(--type-section); }
.exception-type-line > summary::-webkit-details-marker { display:none; }
.exception-type-name { font-weight:800; color:var(--text-heading); }
.exception-type-count { color:var(--text-muted); font-weight:700; font-variant-numeric:tabular-nums; }
.exception-tier--attention .exception-tier-title { color:var(--danger); }
.exception-tier--attention .exception-type-line { border-left-color:var(--danger); }
.exception-tier--attention .exception-type-count { color:var(--danger); }
.exception-tier--check .exception-tier-title { color:var(--warning); }
.exception-tier--check .exception-type-line { border-left-color:var(--border-warning); }
.exception-tier--check .exception-type-count { color:var(--warning); }
.exception-tier--setup .exception-type-line,
.exception-tier--cleanup .exception-type-line { border-left-color:var(--text-subtle); box-shadow:none; }
.exception-tier--setup .exception-tier-title,
.exception-tier--cleanup .exception-tier-title { color:var(--text-muted); }
.exception-tier--cleanup > summary { cursor:pointer; list-style:none; min-height:44px; }
.exception-tier--cleanup > summary::-webkit-details-marker { display:none; }
.exception-tier-empty { display:flex; align-items:center; gap:.4rem; margin:0; padding:.55rem .75rem; border:1px dashed var(--border); border-radius:.5rem; color:var(--text-muted); }
.exception-tier-empty .icon { width:1rem; height:1rem; color:var(--success); }
.exception-cases { padding:0 .75rem .6rem 2.25rem; }
.exception-cases-loading { margin:.2rem 0; color:var(--text-muted); }
.exception-cases-list { display:grid; margin:0; padding:0; list-style:none; }
.exception-case { display:flex; align-items:center; justify-content:space-between; gap:.5rem 1rem; padding:.5rem 0; border-top:1px solid var(--border); }
.exception-case-text { display:grid; gap:.1rem; min-width:0; }
.exception-case-text p { margin:0; }
.exception-case-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:.15rem .55rem; }
.exception-case-entity { font-weight:750; }
.exception-case-client { color:var(--text-muted); font-weight:650; }
.exception-case-owner { padding:.05rem .45rem; border-radius:999px; background:var(--surface-subtle); color:var(--text-heading); font-size:var(--type-content); font-weight:700; }
.exception-case-sentence { color:var(--text); }
.exception-case-note { color:var(--text-muted); font-size:var(--type-content); }
.exception-case-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.35rem; flex:0 0 auto; }
.exception-case-actions .btn { white-space:nowrap; }
.exception-inline-form { display:inline; margin:0; }
.exception-cases-more { margin-top:.4rem; }
.exceptions-snoozed-link { margin:0; }
.exceptions-area-note { margin:0 0 1rem; color:var(--text-muted); }
.exceptions-snoozed-link a { color:var(--text-muted); }
.exception-assign-dialog { width:min(560px, calc(100vw - 32px)); }
.exception-assign-body { display:grid; gap:.75rem; }
.exception-assign-body p { margin:0; }
.exception-assign-field { display:grid; gap:.25rem; }
.exception-assign-field label { font-weight:700; color:var(--text-heading); }
.exception-assign-field select,
.exception-assign-field input,
.exception-assign-field textarea { width:100%; max-width:24rem; }
.document-charge-choices { display:grid; gap:.4rem; max-width:30rem; margin:.75rem 0; }
.document-charge-choice { display:grid; grid-template-columns:minmax(7rem, 1fr) auto auto; align-items:center; gap:1rem; padding:.55rem .75rem; border:1px solid var(--border); border-radius:.5rem; background:var(--surface-panel); }
.document-charge-choices .document-charge-choice label { display:inline-flex; align-self:center; align-items:center; gap:.35rem; min-height:32px; margin:0; padding:0; cursor:pointer; font-weight:600; }
.document-charge-choice input[type=radio] { margin:0; }
.home-line-tier-attention strong { color:var(--danger); }
.home-line-tier-check strong { color:var(--warning); }
.home-line-tier-setup strong { color:var(--text-muted); }
@media (max-width:760px) {
  .exception-case { flex-direction:column; align-items:stretch; }
  .exception-case-actions { justify-content:flex-start; }
  .exception-cases { padding-left:.75rem; }
}
.scaffold-table th a { min-height:40px; display:inline-flex; align-items:center; gap:.28rem; margin:0 -12px; padding:0 12px; }
.scaffold-table .sort-icon { width:14px; height:14px; color:var(--brand-blue); }
.scaffold-table tbody tr:nth-child(even) > td { background:var(--surface-row-alt); }
.scaffold-table tbody tr:hover > td { background:var(--row-hover); }
.scaffold-table tbody tr:focus { outline:0; }
.scaffold-table tbody tr:focus > td { background:var(--surface-info); }
.scaffold-table .align-right { text-align:right; font-variant-numeric:tabular-nums; }
.scaffold-table tfoot th, .scaffold-table tfoot td { border-top:2px solid var(--brand-divider); border-bottom:0; background:var(--brand-blue-wash); font-weight:750; }
.scaffold-table tr[data-scaffold-row] { outline:none; }
.scaffold-table tr.scaffold-row-focused td { background:var(--surface-info); box-shadow:inset 0 1px var(--brand-divider), inset 0 -1px var(--brand-divider); }
.scaffold-row-link, .scaffold-ref-link { display:flex; align-items:center; width:calc(100% + 24px); margin:-9px -12px; padding:9px 12px; text-decoration:none; }
.scaffold-ref-link { gap:.28rem; font-weight:650; }
/* Entity cell for a row with no reachable detail route (e.g. an unattributed
   object a scoped user may see listed but not open). Deliberately NOT styled
   like .scaffold-ref-link: normal weight and body colour, so it never reads as
   a link that would silently 404. */
.scaffold-ref-label { display:inline-flex; align-items:center; gap:.28rem; }
.scaffold-table .table-action { padding-top:0; padding-bottom:0; }
.scaffold-ref-link .icon { width:12px; height:12px; opacity:.55; transition:opacity .15s ease, transform .15s ease; }
.scaffold-ref-link:hover .icon { opacity:1; transform:translate(1px,-1px); }
.scaffold-pagination { display:flex; justify-content:center; align-items:center; gap:.8rem; margin:1rem 0 0; color:var(--text-muted); font-size:12px; }
.scaffold-pagination .btn { min-width:112px; box-shadow:none; text-align:center; }
.scaffold-pagination > span:not(.btn) { min-width:90px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; }
.scaffold-pagination span[aria-disabled=true] { color:var(--text-muted); }
.scaffold-empty-row:hover td { background:var(--surface-panel); }
.scaffold-empty-state { min-height:230px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.45rem; padding:2rem; color:var(--text-muted); text-align:center; }
.scaffold-empty-state > .icon { width:38px; height:38px; margin-bottom:.3rem; color:var(--brand-divider); stroke-width:1.5; }
.scaffold-empty-state strong { color:var(--text-heading); font-size:1rem; }
.scaffold-empty-state .btn { margin-top:.65rem; }
.scaffold-card-dialog { width:min(1040px, calc(100vw - 32px)); }
.scaffold-card-dialog[data-card-loading] .modal-body,
.scaffold-card-dialog[data-card-loading] .modal-footer {
  display:none;
}
.scaffold-card-dialog[data-card-loading] .modal-card::after {
  content:"";
  min-height:220px;
  margin:1.25rem 1.4rem;
  border-radius:10px;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent),
    repeating-linear-gradient(
      180deg,
      var(--brand-blue-wash) 0 18px,
      transparent 18px 38px
    );
  background-size:45% 100%, 100% 100%;
  animation:card-skeleton-sweep 1.1s ease-in-out infinite;
}
@keyframes card-skeleton-sweep {
  from { background-position:-80% 0, 0 0; }
  to { background-position:180% 0, 0 0; }
}
.scaffold-card-heading { min-width:0; display:flex; align-items:center; gap:.6rem; }
.scaffold-card-heading .modal-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scaffold-card-neighbors { display:flex; gap:.25rem; }
.scaffold-card-key-hint { color:var(--text-muted); font-size:11px; white-space:nowrap; }
.scaffold-conflict { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin:0 0 1rem; padding:.75rem; border:1px solid var(--border-warning); border-left-width:4px; border-radius:8px; background:var(--surface-warning); color:var(--warning); }
.scaffold-action-refusal { margin-bottom:1rem; }
.scaffold-actions { display:flex; flex-wrap:wrap; gap:.5rem; padding-top:.75rem; border-top:1px solid var(--border); }
.modal-card .scaffold-field-grid {
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.9rem 1.25rem;
}
.scaffold-card-field {
  min-width:0;
  display:grid;
  align-content:start;
  gap:.25rem;
}
[data-scaffold-condition][hidden] { display:none !important; }
[data-scaffold-condition-mode="disabled_clear"][data-scaffold-condition-active="0"] {
  opacity:.58;
}
[data-scaffold-condition-mode="disabled_clear"][data-scaffold-condition-active="0"]
  :where(.scaffold-card-section-title, .scaffold-field-label-row, .field-grid-control) {
  color:var(--text-muted);
}
.scaffold-condition-inactive-help {
  grid-column:1 / -1;
  margin:.25rem 0 .2rem;
  padding:.55rem .7rem;
  border-left:3px solid var(--border-strong);
  background:var(--surface-info);
  color:var(--text-muted);
}
.scaffold-field-label-row {
  position:relative;
  min-height:40px;
  display:flex;
  align-items:center;
  gap:.25rem;
  overflow:visible;
}
.scaffold-field-label-row .field-label {
  min-width:0;
  flex:1 1 auto;
  margin:0;
  padding:0;
}
.scaffold-card-field .field-value {
  box-sizing:border-box;
  display:block;
  min-height:40px;
  padding:8px 10px;
  border:1px solid transparent;
  overflow-wrap:anywhere;
}
.scaffold-multichoice {
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  min-height:40px;
  align-items:center;
  padding:4px 0;
}
.scaffold-chip-picker {
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
.scaffold-chip-any {
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:max-content;
  min-height:30px;
  cursor:pointer;
}
.scaffold-chip-editor {
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
.scaffold-chip-list {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
}
.scaffold-chip {
  display:inline-flex;
  align-items:center;
  gap:4px;
  max-width:100%;
  padding:2px 4px 2px 10px;
  border:1px solid var(--border-control);
  border-radius:999px;
  background:var(--surface-subtle);
  overflow-wrap:anywhere;
}
.scaffold-chip-remove {
  display:inline-grid;
  place-items:center;
  width:22px;
  height:22px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--text-muted);
  font-size:16px;
  line-height:1;
  cursor:pointer;
}
.scaffold-chip-remove:hover,
.scaffold-chip-remove:focus-visible {
  background:var(--surface-hover);
  color:var(--action);
}
.scaffold-multichoice-option {
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
}
.scaffold-field-help-label {
  flex:0 1 auto !important;
  width:max-content;
  max-width:100%;
  cursor:help;
  text-decoration:underline dotted var(--border-strong);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.scaffold-title-help {
  cursor:help;
  text-decoration:underline dotted var(--border-strong);
  text-decoration-thickness:1px;
  text-underline-offset:4px;
}
.scaffold-title-help:focus-visible,
.scaffold-field-help-label:focus-visible {
  border-radius:3px;
  outline:2px solid var(--focus-ring);
  outline-offset:2px;
}
.scaffold-field-help-toggle {
  width:40px;
  height:40px;
  flex:0 0 40px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--text-muted);
  cursor:pointer;
}
.scaffold-field-help-toggle > span {
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  border:1px solid var(--border-strong);
  border-radius:50%;
  background:var(--surface-panel);
  font-size:12px;
  font-weight:800;
  line-height:1;
}
.scaffold-field-help-toggle:hover {
  background:var(--surface-hover);
  color:var(--text-heading);
}
.scaffold-field-help-toggle:focus-visible {
  outline:3px solid var(--focus-ring);
  outline-offset:1px;
}
.scaffold-field-help {
  position:fixed;
  top:0;
  left:0;
  right:auto;
  z-index:2147483000;
  width:max-content;
  max-width:min(22rem, calc(100vw - 3rem));
  margin:0;
  padding:.55rem .65rem;
  border:1px solid var(--border-strong);
  border-radius:7px;
  background:var(--surface-panel);
  box-shadow:var(--shadow-soft);
  color:var(--text);
  font-size:12px;
  font-weight:500;
  line-height:1.4;
  letter-spacing:0;
  text-transform:none;
  opacity:0;
  visibility:hidden;
  transform:translateY(-.2rem);
  transition:opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
  pointer-events:none;
}
[data-field-help-toggle]:hover + .scaffold-field-help,
[data-field-help-toggle]:focus-visible + .scaffold-field-help,
[data-field-help-toggle][aria-expanded=true] + .scaffold-field-help,
.scaffold-field-help[data-viewport-visible] {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition-delay:0s;
}
.scaffold-field-help[data-placement=above] {
  transform:translateY(.2rem);
}
[data-field-help-toggle]:hover + .scaffold-field-help[data-placement=above],
[data-field-help-toggle]:focus-visible + .scaffold-field-help[data-placement=above],
[data-field-help-toggle][aria-expanded=true] + .scaffold-field-help[data-placement=above] {
  transform:translateY(0);
}
.scaffold-field-help[data-viewport-visible][data-placement=above] { transform:translateY(0); }

/* Site disclosure convention, opt-in during rollout: one solid triangle on
   the left, with no browser marker or redundant right chevron. */
[data-solid-left-disclosure] .scaffold-card-section-collapsible > summary,
details[data-solid-left-disclosure] > summary {
  display:flex;
  align-items:center;
  gap:.35rem;
  list-style:none;
  justify-content:flex-start;
}
[data-solid-left-disclosure] .scaffold-card-section-collapsible > .scaffold-card-section-title {
  gap:.35rem;
}
[data-solid-left-disclosure] .scaffold-card-section-collapsible > summary::-webkit-details-marker,
details[data-solid-left-disclosure] > summary::-webkit-details-marker { display:none; }
[data-solid-left-disclosure] .scaffold-card-section-collapsible > summary::before,
details[data-solid-left-disclosure] > summary::before {
  content:"";
  width:0;
  height:0;
  flex:0 0 auto;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-left:7px solid currentColor;
  transform-origin:38% 50%;
  transition:transform .14s ease;
}
[data-solid-left-disclosure] .scaffold-card-section-collapsible[open] > summary::before,
details[data-solid-left-disclosure][open] > summary::before { transform:rotate(90deg); }
[data-solid-left-disclosure] .scaffold-card-section-collapsible > summary > span,
details[data-solid-left-disclosure] > summary > span { flex:1 1 auto; }
.scaffold-card-dialog .modal-body { scroll-padding-block:.75rem 6rem; }
/* The Client's title, with its Inactive badge, always shows in
   full; its actions take their own row when both do not fit on one. */
.scaffold-card-dialog[data-card-resource=clients] .modal-head { flex-wrap:wrap; row-gap:.55rem; }
.scaffold-card-dialog[data-card-resource=clients] .modal-head > .scaffold-card-heading { flex:1 0 auto; max-width:100%; }
.scaffold-card-dialog[data-card-resource=clients] .modal-head > .modal-actions {
  min-width:0;
  max-width:100%;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-inline-start:auto;
  white-space:nowrap;
}
.scaffold-card-dialog[data-card-resource=clients] .modal-head > .modal-actions > * { flex:0 0 auto; }
.client-cadence-manage .field-grid-control,
.client-billing-management-link { margin-top:.95rem; display:flex; flex-wrap:wrap; gap:.5rem; }
.client-invoice-schedule-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.client-cadence-manage {
  /* No label row above this button (unlike a normal field), so it no longer
     shares a grid row with — and doesn't need to vertically align beside —
     whichever cadence field (weekday/month-day) happens to be visible; give
     it the full row instead. */
  grid-column:1 / -1;
}
.client-cadence-manage .field-grid-control {
  min-height:40px;
  display:flex;
  align-items:center;
}
.scaffold-card-section {
  margin:0 0 1.1rem;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}
.scaffold-card-section-title {
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin:0;
  padding:.3rem 0 .4rem;
  border:0;
  border-bottom:1px solid var(--section-rule);
  color:var(--text-heading);
  font-size:.95rem;
  font-weight:760;
  cursor:pointer;
  list-style:none;
}
.scaffold-card-section-title::-webkit-details-marker { display:none; }
.scaffold-card-section-title small {
  display:block;
  margin-top:.15rem;
  color:var(--text-muted);
  font-size:11px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
}
section.scaffold-card-section > .scaffold-card-section-title { cursor:default; }
.scaffold-card-section-content { padding:.85rem 0 .1rem; }
.scaffold-card-section .field-group { margin:0; }
.scaffold-card-section-children {
  margin-top:.95rem;
  padding-left:1.1rem;
}
.scaffold-card-subsection { margin-bottom:.75rem; }
.scaffold-progress { position:absolute; top:-.45rem; left:0; right:0; z-index:20; height:3px; overflow:hidden; border-radius:999px; background:linear-gradient(90deg, transparent, var(--brand-blue), transparent); opacity:0; pointer-events:none; transform:scaleX(.2); transform-origin:left; }
.htmx-request .scaffold-progress, .htmx-request.scaffold-progress { opacity:1; animation:scaffold-progress 1s ease-in-out infinite; }
@keyframes scaffold-progress {
  0% { transform:translateX(-55%) scaleX(.28); }
  55% { transform:translateX(25%) scaleX(.48); }
  100% { transform:translateX(110%) scaleX(.22); }
}
.scaffold-skeleton-overlay { position:absolute; inset:0; z-index:6; min-height:240px; padding-top:42px; overflow:hidden; visibility:hidden; border:1px solid var(--border); border-radius:0; background:var(--surface-panel); box-shadow:var(--shadow-soft); opacity:0; pointer-events:none; transition:opacity .12s ease, visibility 0s linear .12s; }
.scaffold-skeleton-overlay.htmx-request { visibility:visible; opacity:1; transition-delay:0s; }
.scaffold-skeleton-grid { width:100%; background:var(--surface-panel); }
.scaffold-skeleton-row { height:44px; display:grid; grid-template-columns:repeat(var(--skeleton-columns), minmax(0, 1fr)); border-bottom:1px solid var(--border); }
.scaffold-skeleton-row > span { display:block; height:12px; margin:16px 12px; border-radius:999px; background:linear-gradient(90deg, var(--surface-app), var(--surface-info), var(--surface-app)); background-size:200% 100%; animation:scaffold-skeleton 1.2s ease-in-out infinite; }
.scaffold-skeleton-row:nth-child(2n) > span { width:72%; }
.scaffold-skeleton-row:nth-child(3n) > span { width:88%; }
@keyframes scaffold-skeleton { to { background-position:-200% 0; } }
/* Lists render together; do not hide rows while waiting for JavaScript. */

#receipts-list-region .list-controls,
#scheduled-inbounds-list-region .list-controls,
#customer-orders-list-region .list-controls,
#shipments-list-region .list-controls,
#adjustments-list-region .list-controls,
#counts-list-region .list-controls,
#kit-builds-list-region .list-controls,
#stock-moves-list-region .list-controls { display:flex; align-items:center; gap:.75rem; min-width:0; max-width:100%; margin-bottom:.75rem; padding:.75rem; border:1px solid var(--border); border-radius:12px; background:var(--surface-panel); box-shadow:var(--shadow-soft); }
#receipts-list-region .list-controls :where(form, label, .field-grid-control),
#scheduled-inbounds-list-region .list-controls :where(form, label, .field-grid-control),
#customer-orders-list-region .list-controls :where(form, label, .field-grid-control),
#shipments-list-region .list-controls :where(form, label, .field-grid-control),
#adjustments-list-region .list-controls :where(form, label, .field-grid-control),
#counts-list-region .list-controls :where(form, label, .field-grid-control),
#kit-builds-list-region .list-controls :where(form, label, .field-grid-control),
#stock-moves-list-region .list-controls :where(form, label, .field-grid-control) { min-width:0; max-width:100%; }
#receipts-list-region .list-controls :where(input, select, textarea),
#scheduled-inbounds-list-region .list-controls :where(input, select, textarea),
#customer-orders-list-region .list-controls :where(input, select, textarea),
#shipments-list-region .list-controls :where(input, select, textarea),
#adjustments-list-region .list-controls :where(input, select, textarea),
#counts-list-region .list-controls :where(input, select, textarea),
#kit-builds-list-region .list-controls :where(input, select, textarea),
#stock-moves-list-region .list-controls :where(input, select, textarea) { width:100%; min-width:0; max-width:100%; }
#receipt-filters,
#scheduled-inbound-filters,
#shipment-filters,
#adjustment-filters,
#count-filters,
#kit-build-filters,
#stock-move-filters { display:grid; grid-template-columns:.8fr 1.15fr 1.05fr .85fr .85fr 1.15fr auto auto; align-items:center; gap:.5rem; min-width:0; flex:1 1 auto; }
/* Kit Builds add a kit filter after the warehouse. */
#kit-build-filters { grid-template-columns:.8fr 1.15fr 1.05fr 1.05fr .85fr .85fr 1.15fr auto auto; }
/* Receipts add a kind filter (receipts and returns) beside the status. */
#receipt-filters { grid-template-columns:.8fr .9fr 1.15fr 1.05fr .85fr .85fr 1.15fr auto auto; }
.receipt-list-number .scaffold-row-link { gap:.4rem; white-space:nowrap; }
/* The same filters as the other lists, without a warehouse (an order has none until it ships). */
#customer-order-filters { display:grid; grid-template-columns:.8fr 1.15fr .85fr .85fr 1.15fr auto auto; align-items:center; gap:.5rem; min-width:0; flex:1 1 auto; }
#receipt-filters > input, #receipt-filters > select, #receipt-filters > label,
#scheduled-inbound-filters > input, #scheduled-inbound-filters > select, #scheduled-inbound-filters > label,
#customer-order-filters > input, #customer-order-filters > select, #customer-order-filters > label,
#shipment-filters > input, #shipment-filters > select, #shipment-filters > label,
#adjustment-filters > input, #adjustment-filters > select, #adjustment-filters > label,
#count-filters > input, #count-filters > select, #count-filters > label,
#kit-build-filters > input, #kit-build-filters > select, #kit-build-filters > label,
#stock-move-filters > input, #stock-move-filters > select, #stock-move-filters > label { width:100%; min-width:0; margin:0; }
#receipt-filters .scaffold-page-size,
#scheduled-inbound-filters .scaffold-page-size,
#customer-order-filters .scaffold-page-size,
#shipment-filters .scaffold-page-size,
#adjustment-filters .scaffold-page-size,
#count-filters .scaffold-page-size,
#kit-build-filters .scaffold-page-size,
#stock-move-filters .scaffold-page-size { display:grid; grid-template-columns:auto minmax(58px, 1fr); }
#receipt-filters > a,
#scheduled-inbound-filters > a,
#customer-order-filters > a,
#shipment-filters > a,
#adjustment-filters > a,
#count-filters > a,
#kit-build-filters > a,
#stock-move-filters > a { display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border:1px solid var(--border-strong); border-radius:8px; background:var(--surface-panel); color:var(--text-heading); font-weight:700; }

@media (max-width: 700px) {
  body > nav { width:100%; max-width:100vw; gap:.4rem; padding:0 .5rem; overflow:hidden; }
  body > nav .brand-mark { width:88px; max-width:88px; height:auto; }
  body > nav .primary-nav { min-width:0; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; }
  body > nav .primary-nav::-webkit-scrollbar { display:none; }
  body > nav .primary-nav > li { flex:0 0 auto; }
  body > nav .primary-nav > li > a { padding:0 .45rem; }
  body > nav .user-info { flex:0 0 auto; font-size:0; }
  body > nav .user-info button.nav-logout { font-size:12px; }
  body > nav .nav-version { display:none; }
  main { margin:1.25rem auto; padding:0 .75rem; }
  .section-header { align-items:flex-start; flex-direction:column; }
  .stat-card-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .scaffold-toolbar { align-items:stretch; flex-direction:column; }
  .scaffold-toolbar form, .scaffold-toolbar input[type=search] { width:100%; }
  .scaffold-toolbar input, .scaffold-toolbar select, .scaffold-toolbar .scaffold-search { flex:1 1 150px; }
  .scaffold-toolbar select[data-stable-width] {
    width:100%;
    min-width:0;
    max-width:100%;
  }
  .scaffold-count { margin-left:0; }
  .scaffold-table { min-width:900px; }
  #receipts-list-region .scaffold-table,
  #scheduled-inbounds-list-region .scaffold-table,
  #customer-orders-list-region .scaffold-table,
  #shipments-list-region .scaffold-table,
  #adjustments-list-region .scaffold-table,
  #counts-list-region .scaffold-table,
  #kit-builds-list-region .scaffold-table,
  #stock-moves-list-region .scaffold-table { min-width:1080px; }
  .modal-footer { align-items:stretch; flex-direction:column; }
  .modal-footer .modal-actions { justify-content:flex-end; }
  .modal-card .scaffold-field-grid { grid-template-columns:1fr; }
  .scaffold-card-key-hint { display:none; }
  #receipts-list-region .list-controls,
  #scheduled-inbounds-list-region .list-controls,
  #customer-orders-list-region .list-controls,
  #shipments-list-region .list-controls,
  #adjustments-list-region .list-controls,
  #counts-list-region .list-controls,
  #kit-builds-list-region .list-controls,
  #stock-moves-list-region .list-controls { align-items:stretch; flex-direction:column; }
  #receipt-filters,
  #scheduled-inbound-filters,
  #customer-order-filters,
  #shipment-filters,
  #adjustment-filters,
  #count-filters,
  #kit-build-filters,
  #stock-move-filters { display:grid; grid-template-columns:1fr; width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-row-motion-root][data-row-motion="enter"] [data-row-motion-item],
  html:not(.js) [data-row-motion-root][data-row-motion="enter"] [data-row-motion-item] {
    opacity:1;
    transform:none;
    animation:none;
  }
  .row-motion-entering [data-row-motion-item],
  .scaffold-skeleton-row > span,
  .htmx-request .scaffold-progress,
  .htmx-request.scaffold-progress { animation:none; }
  .btn, .stat-card, .scaffold-ref-link .icon, .scaffold-skeleton-overlay { transition:none; }
}

/* Client card side reference: additive Camelot-style companion pane. */
.client-card-workspace {
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  max-height:inherit;
  overflow:hidden;
}
.scaffold-card-dialog[data-card-resource="clients"][data-client-drawer-open] {
  width:min(1400px, calc(100vw - 32px));
}
.scaffold-card-dialog[data-card-resource="clients"][data-client-drawer-open] .client-card-workspace {
  grid-template-columns:minmax(0, 1fr) minmax(320px, 360px);
}
/* Placed explicitly: the card's hidden helper forms are grid items too, and
   auto-placement once pushed the drawer into an empty second row (height 0). */
.client-card-workspace > .modal-card { min-width:0; grid-area:1 / 1; }
.client-reference-drawer {
  grid-area:1 / 2;
  position:relative;
  min-width:0;
  height:0;
  min-height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-left:1px solid var(--border-strong);
  background:var(--surface-panel);
}
.client-reference-drawer[hidden] { display:none; }
.client-reference-head {
  min-height:59px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  padding:.65rem .75rem;
  border-bottom:1px solid var(--border);
  background:var(--brand-blue-wash);
}
.client-reference-head h3 {
  margin:.08rem 0 0;
  color:var(--text-heading);
  font-size:1rem;
}
.client-reference-head h3:focus { outline:none; }
.client-reference-head h3:focus-visible {
  border-radius:4px;
  outline:2px solid var(--brand-blue);
  outline-offset:2px;
}
.client-reference-eyebrow {
  display:block;
  color:var(--text-muted);
  font-size:10px;
  font-weight:750;
  letter-spacing:.08em;
  line-height:1;
  text-transform:uppercase;
}
.client-reference-body {
  min-height:0;
  flex:1 1 auto;
  padding:.65rem .75rem;
  overflow:auto;
  overscroll-behavior:contain;
}
.client-reference-loading {
  position:absolute;
  inset:59px 0 auto;
  z-index:2;
  /* Invisible between loads; it must not swallow clicks on Go to page beneath. */
  pointer-events:none;
  padding:.35rem .75rem;
  background:var(--surface-info);
  color:var(--text-muted);
  font-size:11px;
  font-weight:700;
}
.client-reference-footer {
  padding:.48rem .75rem;
  border-top:1px solid var(--border);
  color:var(--text-muted);
  font-size:10px;
}
.client-reference-summary {
  margin:0;
  color:var(--text-muted);
  font-size:11px;
}
.client-reference-panel-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.5rem;
  margin:0 0 .55rem;
}
.client-reference-full-link {
  flex:0 0 auto;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}
.client-reference-empty {
  margin:.6rem 0;
  color:var(--text-muted);
  font-size:12px;
}
.client-reference-table-scroll {
  max-width:100%;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:0;
}
.client-reference-table { min-width:100%; margin:0; box-shadow:none; }
.client-reference-table th,
.client-reference-table td { padding:.42rem .48rem; font-size:11px; vertical-align:top; }
.client-reference-table td small {
  display:block;
  margin-top:.08rem;
  color:var(--text-muted);
  font-size:10px;
  white-space:nowrap;
}
.client-reference-addresses { display:grid; gap:.5rem; }
.client-reference-address {
  padding:.58rem .65rem;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-app);
  font-size:11px;
}
.client-reference-address header,
.client-reference-address footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
}
.client-reference-address address {
  display:grid;
  gap:.06rem;
  margin:.32rem 0 0;
  color:var(--text);
  font-style:normal;
}
.client-reference-address footer {
  align-items:flex-start;
  flex-direction:column;
  margin-top:.35rem;
  padding-top:.35rem;
  border-top:1px solid var(--border);
  color:var(--text-muted);
}
.portal-users-invite { display:grid; gap:.45rem; margin:0 0 .75rem; padding:.6rem .65rem; border:1px solid var(--border); border-radius:8px; background:var(--surface-app); font-size:12px; }
.portal-users-invite label { display:grid; gap:.15rem; margin:0; font-weight:700; }
.portal-users-invite .btn { justify-self:start; }
.portal-users-invite .field-hint { margin:0; font-size:11px; }
.portal-users-setup-link { margin:0 0 .75rem; padding:.6rem .65rem; border:1px solid var(--border-warning); border-radius:8px; background:var(--surface-warning); font-size:12px; }
.portal-users-setup-link p { margin:0 0 .4rem; }
.portal-users-setup-link-row { display:flex; gap:.4rem; }
.portal-users-setup-link-row input { min-width:0; flex:1 1 auto; font-family:monospace; font-size:11px; }
.portal-users-list { display:grid; gap:.5rem; margin:0; padding:0; list-style:none; }
.portal-users-person { padding:.58rem .65rem; border:1px solid var(--border); border-radius:8px; background:var(--surface-app); font-size:12px; }
.portal-users-person-head { display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; }
.portal-users-person-name { min-width:0; display:grid; overflow-wrap:anywhere; }
.portal-users-person-meta { display:flex; flex-wrap:wrap; gap:.15rem .75rem; margin-top:.3rem; font-size:11px; }
.portal-users-person-actions { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.45rem; }
.portal-users-person-actions form { margin:0; }
.settings-page.portal-users-page { max-width:44rem; }
.portal-users-page .portal-users-panel { margin-top:1rem; }
.portal-users-page .client-reference-summary { font-size:13px; }
.client-quick-links [data-client-drawer-trigger].is-active {
  border-color:var(--brand-blue);
  background:var(--surface-info);
  color:var(--brand-blue-deep);
}
/* Client card Quick Links: grouped buttons to the client's data elsewhere. */
.client-quick-link-groups {
  display:grid;
  grid-template-columns:minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr);
  gap:.75rem 1.25rem;
}
@media (max-width: 900px) {
  .client-quick-link-groups { grid-template-columns:minmax(0, 1fr); }
}
.client-quick-link-group h4 {
  margin:0 0 .4rem;
  color:var(--text-muted);
  font-size:11px;
  font-weight:750;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.client-quick-link-group .field-hint { margin:.35rem 0 0; }
.client-quick-link-buttons {
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
}
.client-reference-table td.align-right small { white-space:nowrap; }

@media (max-width: 900px) {
  .scaffold-card-dialog[data-card-resource="clients"][data-client-drawer-open] {
    width:calc(100vw - 16px);
  }
  .scaffold-card-dialog[data-card-resource="clients"][data-client-drawer-open] .client-card-workspace {
    grid-template-columns:minmax(0, 1fr);
    grid-template-rows:minmax(280px, 56vh) minmax(220px, 36vh);
  }
  .client-reference-drawer {
    grid-area:2 / 1;
    width:100%;
    height:auto;
    min-height:0;
    border-top:1px solid var(--border-strong);
    border-left:0;
  }
}

/* Client account page: the client's billing home. */
.client-account-head { align-items:flex-start; gap:1rem; flex-wrap:wrap; }
.client-account-status {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
  margin:.35rem 0 0;
}
.client-account-section { margin-top:1.25rem; }
.client-account-section > .section-header { align-items:flex-start; gap:.75rem; flex-wrap:wrap; }
.client-account-section .form-actions { margin-top:.75rem; }
.client-account-suspensions { margin:.75rem 0 0; }
.client-account-suspensions > summary {
  cursor:pointer;
  color:var(--text-heading);
  font-weight:700;
}
.client-account-suspensions > summary small {
  margin-left:.5rem;
  color:var(--text-muted);
  font-size:11px;
  font-weight:400;
}
.client-account-suspensions > .card { margin-top:.5rem; }
.modal-dialog.client-suspend-dialog,
body.ui-density .modal-dialog.client-suspend-dialog { width:min(560px, calc(100vw - 32px)); }
.client-account-head .page-actions { flex-wrap:wrap; }
.client-account-section .table-wrap { max-width:100%; overflow-x:auto; }
@media (max-width: 700px) {
  .client-account-head { flex-direction:column; align-items:stretch; }
}

/* ============================ Invoice Hub ============================ */
/* First polished product surface. Dense-but-scannable operations screen,
   built on semantic heading/action roles + white-card language. htmx / fetch only. */
.hub { max-width: 1360px; }
.hub-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 0.75rem; }
.hub-title h1 { margin: 0; font-size: 1.6rem; }
/* One quiet line: billing cases waiting on Exceptions. */
.hub-exceptions-line { margin: -0.25rem 0 0.75rem; font-size: 13px; }
.hub-exceptions-line a { color: var(--text-muted); text-decoration: none; }
.hub-exceptions-line a:hover { color: var(--brand-blue-deep); text-decoration: underline; }
/* "Last automatic billing run" under the hub title and on Charges > Pending. */
.automatic-billing-line { margin: .25rem 0 0; }
.automatic-billing-failed { color: var(--danger); }
.automatic-billing-settings h2 { margin-top: 1.75rem; }
.hub-sub { color: #7a8aa0; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.hub-monthbar select { padding:6px 10px; border:1px solid var(--border-control); border-radius:6px; font-size:15px; font-weight:600; color:var(--text-heading); background:var(--surface-panel); margin-left:4px; }

.hub-toggles { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.9rem; }
.seg { display: inline-flex; align-items: center; background: #eef2f7; border-radius: 8px; padding: 3px; gap: 2px; }
.seg-label { font-size: 0.75rem; color: #7a8aa0; padding: 0 8px; }
.seg-btn { padding: 5px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; color: #4a5b70; text-decoration: none; }
.seg-btn:hover { color:var(--action); }
.seg-btn.active { background:var(--action); color:var(--text-on-action); }

/* Top strip — the live "Kate email" */
.kate-strip { background: linear-gradient(180deg,#fff,#f7f9fc); border: 1px solid #e0e8f0; border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: 1rem; box-shadow: 0 1px 4px rgba(26,58,92,0.08); }
.kate-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.kate-title { font-weight:700; color:var(--text-heading); font-size:1.05rem; }
.kate-grand { margin-left: auto; color: #4a5b70; font-size: 0.95rem; }
.kate-grand strong { color: #0d2b47; font-size: 1.2rem; }
.kate-baseline { color: #4a5b70; font-size: 0.88rem; }

/* v3 item #4: unconfirmed indicator — a muted, secondary badge. */
.kate-unconfirmed { color: #5a6b80; font-weight: 600; background: #eef2f7; border: 1px solid #dbe3ee; padding: 2px 10px; border-radius: 12px; font-size: 0.82rem; text-decoration: none; cursor: pointer; }
.kate-unconfirmed:hover { background:var(--surface-hover); color:var(--text-heading); }
.kate-groups { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.kate-card { flex: 1 1 160px; min-width: 150px; background: #fff; border: 1px solid #e5ecf3; border-radius: 8px; padding: 0.6rem 0.8rem; }
.kate-card-label { font-weight:700; color:var(--text-heading); font-size:.85rem; }
.kate-card-total { font-size: 1.35rem; font-weight: 700; color: #0d2b47; margin: 2px 0; }
.kate-card-meta { font-size: 0.75rem; color: #8090a4; display: flex; gap: 6px; align-items: center; }
.kate-empty { color: #8090a4; font-style: italic; }

/* Status chips */
.chips { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 16px; background: #fff; border: 1px solid #d3dced; color: #4a5b70; text-decoration: none; font-size: 13px; font-weight: 600; }
.chip:hover { border-color:var(--action); color:var(--action); }
.chip.active { background:var(--action); color:var(--text-on-action); border-color:var(--action); }
.chip-count { background: rgba(0,0,0,0.08); border-radius: 10px; padding: 0 7px; font-size: 11px; }
.chip.active .chip-count { background: rgba(255,255,255,0.22); }
.chip-warn { background: #fff3e0; color: #a8500a; border-radius: 10px; padding: 0 7px; font-size: 11px; font-weight: 700; }

/* Filter tokens */
.hub-filters { display: flex; flex-direction: column; gap: 0.5rem; align-items: stretch; margin-bottom: 1rem; padding: 0.6rem 0.8rem; background: #fff; border: 1px solid #e5ecf3; border-radius: 8px; }
.tok { padding: 5px 9px; border: 1px solid #cbd5e3; border-radius: 6px; font-size: 13px; }
.tok-wide { width: 220px; }
.tok-clear { color: #6c757d; font-size: 13px; text-decoration: none; }
.filter-note { color: #a8500a; font-size: 12px; font-style: italic; }

/* Filter LISTS (v3 item #7) — faceted tag lists (Client / Charge Category / Source) */
.fl { display: flex; align-items: baseline; gap: 8px; }
.fl-label { font-size: 12px; font-weight: 700; color: #5a6b80; text-transform: uppercase; letter-spacing: 0.02em; min-width: 118px; flex: 0 0 auto; padding-top: 3px; }
/* Tags grow HORIZONTALLY first, wrap to a new row only at the card wall (item #7). */
.fl-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: 1 1 auto; }
.fl-tag { display:inline-flex; align-items:center; gap:5px; background:var(--surface-info); border:1px solid var(--border); color:var(--text-heading); border-radius:14px; padding:2px 6px 2px 10px; font-size:13px; font-weight:600; white-space:nowrap; }
.fl-x { color: #a8500a; cursor: pointer; text-decoration: none; font-weight: 700; font-size: 14px; line-height: 1; padding: 0 2px; }
.fl-x:hover { color: #c0392b; }
.fl-add-wrap { position: relative; display: inline-flex; }
.fl-add { width:24px; height:24px; padding:0; line-height:1; border-radius:12px; background:var(--surface-panel); color:var(--text-heading); border:1px dashed var(--border-control); font-size:16px; font-weight:700; cursor:pointer; }
.fl-add:hover:not([disabled]) { background: #eef4fb; border-color: #2e6da4; }
.fl-add[disabled] { opacity: 0.4; cursor: default; }
.fl-menu { position: absolute; top: 100%; left: 0; margin-top: 4px; background: #fff; border: 1px solid #d3dced; border-radius: 8px; box-shadow: 0 6px 20px rgba(13,43,71,0.18); padding: 6px; z-index: 140; min-width: 220px; }
.fl-search { width: 100%; padding: 6px 8px; border: 1px solid #cbd5e3; border-radius: 6px; font-size: 13px; margin-bottom: 6px; box-sizing: border-box; }
.fl-options { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; }
.fl-option { padding: 5px 10px; border-radius: 6px; text-decoration: none; color: #4a5b70; font-size: 13px; cursor: pointer; }
.fl-option:hover { background:var(--surface-hover); color:var(--text-heading); }
.fl-empty { padding: 5px 10px; font-size: 13px; }
.fl-search-box { align-items: center; gap: 10px; }

/* v3 item #6 + polish item #3: column sort affordances. Polish #3b: the WHOLE column title is
   the click target (title + glyph wrapped in one <a>). Polish #3a: desc-first cycle
   (↕ unsorted → ▼ desc → ▲ asc → clear). */
.sort-aff { text-decoration: none; cursor: pointer; font-size: inherit; user-select: none;
            display: inline; color: inherit; }
.sort-aff:hover .sort-title { text-decoration: underline; }
.sort-aff .sort-glyph { font-size: 11px; margin-left: 3px; }
.sort-aff.unsorted .sort-glyph { color: #b9c6da; }
.sort-aff.unsorted:hover .sort-glyph { color: #2e6da4; }
.sort-aff.sorted .sort-glyph { color:var(--action); font-weight:700; }

/* Polish item #3c: per-client invoice-list sort bar (the middle drill level). */
.inv-sortbar { display: flex; align-items: center; gap: 10px; margin: 2px 0 8px;
               font-size: 12px; color: #5a6b80; }
.inv-sortbar-label { font-weight: 600; }
.inv-sortbar .sort-aff .sort-title { color: #2e6da4; }

/* Read-only Camelot operational archive. */
.archive-note { display: inline-block; margin: 0 0 1rem; padding: .4rem .65rem;
  border: 1px solid #d7a84a; border-radius: 5px; background: #fff8e6; color: #704d08; font-size: .9rem; }
.archive-filters { display: flex; flex-wrap: wrap; align-items: end; gap: .65rem; margin-bottom: 1rem; }
.archive-filters label { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; font-weight: 600; }
.archive-piece-filters input { width: 8.5rem; }
.archive-summary, .archive-card { margin: 0 0 1rem; padding: .75rem; border: 1px solid #d9e1ea;
  border-radius: 6px; background: #f8fafc; }
.archive-card dl { display: flex; flex-wrap: wrap; gap: .8rem 2rem; margin: 0; }
.archive-card dl div { min-width: 9rem; }
.archive-card dt { color: #607080; font-size: .75rem; text-transform: uppercase; }
.archive-card dd { margin: .2rem 0 0; }
.table-scroll { max-width: 100%; overflow-x: auto; }
.camelot-table { white-space: nowrap; }
.archive-total { display: inline-block; margin-right: 1rem; font-weight: 700; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1rem 0; }

/* Client table + drill */
.hub-table { border-radius: 0; overflow: hidden; }
.hub-table th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: #5a6b80; }
.hub-table .num { text-align: right; }
.hub-table .money { font-variant-numeric: tabular-nums; font-weight: 600; }
.client-row { cursor: pointer; }
.client-row:hover td { background: #f2f7fc; }
.drill-toggle { color: #7a8aa0; width: 26px; text-align: center; }
.client-name .muted { color: #8090a4; font-weight: 400; }
.muted { color: #9aa7b8; }
/* Revenue semantics (feedback C#8): up = more revenue = GREEN, down = RED.
   v1 had these swapped (up rendered red). */
.delta-up { color: #1a7a3a; font-weight: 600; }
.delta-down { color: #c0392b; font-weight: 600; }
.co-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; color: #fff; background: #4a6fa5; }
.co-1 { background: #2e6da4; } .co-2 { background: #6a4fa0; } .co-3 { background: #8a8a8a; }
/* Deterministic company palette (feedback A#4): co-c0..co-c7 via md5(code)%8. */
.co-c0 { background: #2e6da4; } .co-c1 { background: #6a4fa0; } .co-c2 { background: #1a7a3a; }
.co-c3 { background: #a8500a; } .co-c4 { background: #b03a5b; } .co-c5 { background: #0d7d8a; }
.co-c6 { background: #5a6b1a; } .co-c7 { background: #7a4a2a; }

/* Status badges (lifecycle) */
.status-draft { background: #fdecea; color: #b23c17; }
.status-needs-review { background: #fff3e0; color: #a8500a; }
.status-confirmed { background: #e3f0ff; color: #1a5fa8; }
.status-sent { background: #e6f6ec; color: #1a7a3a; }
.status-unpaid { background: #fbeaea; color: #b3261e; }
.status-paid { background: #eef7ec; color: #2e7d32; }

/* Drill: invoice + category + line tables */
.drill-container > td { background: #f7f9fc; padding: 0.5rem 0.75rem 0.9rem; }
.invoice-block { background: #fff; border: 1px solid #e5ecf3; border-radius: 8px; margin-bottom: 0.6rem; padding: 0.6rem 0.8rem; }
/* Polish item #6: yellow flash outline on a just-created invoice card; settles after ~3s. */
.invoice-block.invoice-flash { animation: invoiceFlash 3s ease-out 1; }
@keyframes invoiceFlash {
  0%   { outline: 3px solid #f5c518; outline-offset: 2px; background: #fff8dd; box-shadow: 0 0 0 4px rgba(245,197,24,0.35); }
  70%  { outline: 3px solid #f5c518; outline-offset: 2px; background: #fffceb; box-shadow: 0 0 0 4px rgba(245,197,24,0.18); }
  100% { outline: 3px solid transparent; outline-offset: 2px; background: #fff; box-shadow: 0 0 0 4px rgba(245,197,24,0); }
}
.invoice-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.inv-id { font-weight:700; color:var(--text-heading); }
.inv-total { margin-left: auto; font-weight: 700; color: #0d2b47; }
.inv-actions { display: inline-flex; gap: 4px; }
/* Round 3 item #2: the ONLY styling for the revert expand — pin the Edit/charges button to the
   mini-button intrinsic height so it keeps its box (matching Mark sent) when a sibling revert
   <details> expands the row. Round-3 reversed the round-2 polish (absolute-positioned reason
   form, flex-start stretch overrides) per Nimmy — this one declaration is all he wanted. */
.inv-actions > button.edit-charges { align-self: center; height: 26px; }
/* Lifecycle buttons are wrapped in forms, so center the flex item that owns the button. */
.inv-actions > form { align-self: center; height: 26px; }
.invoice-print { align-self: center; text-decoration: none; height: 26px; box-sizing: border-box; }
.invoice-line-preview { display: flex; flex-wrap: wrap; gap: 5px; margin: -0.2rem 0 0.45rem; }
.invoice-line-pill { display: inline-flex; gap: 5px; align-items: baseline; max-width: 520px; padding: 3px 8px; border: 1px solid #dbe5ef; border-radius: 6px; background: #f8fafc; color: #31445a; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invoice-line-pill strong { color:var(--text-heading); }
.invoice-line-pill small { color: #526782; font-size: 11px; }
.invoice-line-pill em { color: #6a7a90; font-style: normal; font-variant-numeric: tabular-nums; }
.invoice-line-more { padding: 3px 8px; border-radius: 6px; background: #eef2f7; color: #5a6b80; font-size: 12px; font-weight: 700; }
.correction-line-reversal { background:#fff4f2; }
.correction-line-replacement { background:#f1f8f4; }
.correction-leg-label { display:inline-block; margin-right:.25rem; font-size:.72rem; letter-spacing:.02em; text-transform:uppercase; }
.line-submeta { margin-top: 2px; color: #6a7a90; font-size: 11px; }
button.mini { padding:3px 10px; font-size:12px; background:var(--surface-subtle); color:var(--text-heading); border:1px solid var(--border-control); border-radius:5px; cursor:pointer; }
button.mini:hover { background: #dde6f1; }
.cat-table { box-shadow: none; margin: 0; }
.cat-table th { background: #eef2f7; font-size: 11px; }
.cat-row { cursor: pointer; }
.cat-row:hover td { background: #eef4fb; }
.type-tag { font-size: 11px; color: #6a7a90; background: #eef2f7; padding: 1px 7px; border-radius: 8px; }
.line-table { box-shadow: none; margin: 0.3rem 0; background: #fbfcfe; }
.line-table th { background: #f4f7fa; font-size: 11px; }
.line-table td { font-size: 13px; }
.notes { color: #8090a4; font-size: 11px; }

/* Provenance chips */
.prov-chip { font-size: 11px; padding: 1px 8px; border-radius: 8px; font-weight: 600; }
.prov-auto { background: #e3f0ff; color: #1a5fa8; }
.prov-archive, .prov-operator-import { background: #ede7f6; color: #4527a0; }
.prov-operator { background: #fff3e0; color: #a8500a; }
.prov-derived-pallets { background: #e3f0ff; color: #1a5fa8; }
.prov-manual { background: #e6f6ec; color: #1a7a3a; }
.prov-simulation { background: #fff4d6; color: #7a4b00; }
.hub-empty, .hub-table .hub-empty { text-align: center; color: #8090a4; padding: 1.5rem; font-style: italic; }

/* Close ceremony */
.dismiss { font-size: 13px; color: #a8500a; }

/* Slide-over side panel */
.panel-overlay { position: fixed; inset: 0; background: rgba(13,43,71,0.35); opacity: 0; pointer-events: none; transition: opacity 0.18s; z-index: 200; }
.panel-overlay.open { opacity: 1; pointer-events: auto; }
.side-panel { position: fixed; top: 0; right: 0; height: 100vh; width: 420px; max-width: 92vw; background: #fff; box-shadow: -3px 0 16px rgba(13,43,71,0.2); transform: translateX(100%); transition: transform 0.2s ease; z-index: 201; padding: 1rem 1.1rem; overflow-y: auto; }
.side-panel.open { transform: translateX(0); }
.side-panel:not(.open) { width:0; max-width:0; padding-left:0; padding-right:0; overflow:hidden; visibility:hidden; }
.panel-head { display:flex; justify-content:space-between; align-items:center; font-weight:700; color:var(--text-heading); font-size:1.1rem; border-bottom:2px solid var(--border); padding-bottom:.5rem; margin-bottom:.75rem; }
.mp-sub { color: #6a7a90; font-size: 13px; }
.mp-table { box-shadow: none; }
.mp-table th { background: #f4f7fa; font-size: 11px; }
.mp-add { margin-top: 1rem; border-top: 1px solid #eee; padding-top: 0.75rem; }
.mp-add h4 { margin:0 0 .5rem; color:var(--text-heading); }
.mp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin-bottom: 0.4rem; }
.mp-grid input, .mp-note { padding: 6px 9px; border: 1px solid #cbd5e3; border-radius: 6px; font-size: 13px; width: 100%; }
.mp-note { margin-bottom: 0.5rem; }
.mp-add button { padding:8px 18px; background:var(--action); color:var(--text-on-action); border:none; border-radius:6px; cursor:pointer; }
/* v3 item #5: inline direct-edit of manual lines + saved-state feedback + Done footer */
.mp-editrow input.mp-num { width: 72px; padding: 4px 6px; border: 1px solid #cbd5e3; border-radius: 5px; font-size: 13px; text-align: right; }
.mp-editrow input.mp-unit { width: 60px; padding: 4px 6px; border: 1px solid #cbd5e3; border-radius: 5px; font-size: 13px; }
.mp-editrow input.mp-desc { display: block; margin-top: 3px; width: 96%; padding: 4px 6px; border: 1px solid #cbd5e3; border-radius: 5px; font-size: 12px; }
.mp-rowactions { white-space: nowrap; display: flex; gap: 4px; }
.mp-saved { background: #e6f6ec; color: #1a7a3a; border-radius: 10px; padding: 1px 8px; font-size: 11px; font-weight: 700; margin-left: 8px; }

.receipt-charge-table td { vertical-align: middle; }
.receipt-charge-description-cell { min-width: 12rem; white-space: normal; }
.receipt-charge-description-cell > input { width: 100%; min-width: 12rem; }
.receipt-charge-description-cell > input[readonly] {
  background: var(--surface-section);
  color: var(--text-muted);
}
.receipt-charge-table .money { white-space: nowrap; font-weight: 700; }
.receipt-charge-quantity { display: flex; align-items: center; gap: .35rem; }
.receipt-charge-quantity input[type="number"] { width: 6.5rem; min-width: 6.5rem; }
.receipt-charge-quantity .computed-qty { color: var(--text-muted); white-space: nowrap; }
/* An automatic charge row nests its Qty input inside .receipt-charge-quantity,
   and that costs it twice:
     - the shared grid's control rule (body.ui-density .line-entry-grid-table
       :where(input, select), further down this file) sets width:100% and
       min-width:0. It carries the same specificity as the 6.5rem floor above
       and comes later in source order, so it wins and the input is left with
       no width of its own.
     - the grid's column-width rule uses a CHILD combinator
       (td:has(> input[type=number])), which cannot see an input one level
       deeper, so this column alone is never pinned.
   Together the column collapsed to whatever the neighbouring pinned columns
   left over (~96px) and the number input rendered ~21px wide, while the nowrap
   "Computed: N" caption beside it kept its full width. Restoring a real floor
   is enough: the table is width:max-content, so the column then sizes to its
   own content, including the wider "Overridden - use N" caption. */
body.ui-density .receipt-charge-table .receipt-charge-quantity input[type="number"] {
  flex: 0 0 6rem;
  width: 6rem;
  min-width: 6rem;
}
body.ui-density .receipt-charge-table td:has(> .receipt-charge-quantity) {
  min-width: 10.5rem;
}
.receipt-charge-skip { display: inline-flex; align-items: center; gap: .35rem; margin: 0; }
body.ui-density .receipt-charge-table .receipt-charge-skip input[type="checkbox"] {
  width: 1rem;
  min-width: 1rem;
  height: 1rem;
  min-height: 1rem;
  padding: 0;
}
.receipt-charge-actions { display: flex; gap: .5rem; margin-top: 1rem; }
.receipt-charge-confirmation { border-left-color: #1a7a3a; background: #f1faf4; }
.receipt-charge-error { color: #b00020; border: 1px solid #b00020; padding: .5rem; border-radius: 4px; }
.receipt-operator-charge-table { min-width: 90rem; }
body.ui-density .receipt-operator-charge-table td:has(> select[name="service_code_id"]) { width: 14rem; min-width: 14rem; }
body.ui-density .receipt-operator-charge-table td:has(> select[name="rate_group"]) { width: 11rem; min-width: 11rem; }
body.ui-density .receipt-operator-charge-table .receipt-operator-charge-rate { width: 22rem; min-width: 22rem; }
body.ui-density .receipt-operator-charge-rate-controls { display: flex; align-items: center; gap: 3px; }
body.ui-density .receipt-operator-charge-rate-controls > select { flex: 1 1 12rem; width: 12rem; }
body.ui-density .receipt-operator-charge-rate-controls > [data-manual-custom-rate] { flex: 0 0 8rem; width: 8rem; }
body.ui-density .receipt-operator-charge-table td:has(> input[name="description"]) { width: 18rem; min-width: 18rem; }
body.ui-density .receipt-operator-charge-table td:has(> input[name="unit"]) { width: 7rem; min-width: 7rem; }
.receipt-operator-charge-actions { margin-top: .5rem; }
.receipt-charge-total-row > th,
.receipt-charge-total-row > td { border-top: 2px solid var(--border-strong); }
.receipt-charge-total-row > th { text-align: right; }
.receipt-document-page,
.ops-document-page {
  width: min(1520px, calc(100vw - 2rem));
  margin-left: 50%;
  transform: translateX(-50%);
}
.receipt-document-header,
.ops-document-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: .75rem 0 1rem;
}
.receipt-document-header h1,
.ops-document-header h1 { margin: 0; font-size: 2rem; }
.document-kicker {
  margin: 0 0 .15rem;
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.receipt-document-actions, .ops-document-actions, .receipt-lifecycle-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}
.receipt-document-actions form, .ops-document-actions form, .receipt-lifecycle-actions form { margin: 0; }
.receipt-document-section,
.ops-document-section {
  margin: 0 0 1rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid #dbe3ec;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  overflow-x: auto;
}
.receipt-document-section:has(.line-entry-grid-scroll),
.ops-document-section:has(.line-entry-grid-scroll) { overflow-x:visible; }
.receipt-document-section > h2,
.receipt-document-section > .section-header h2,
.ops-document-section > h2,
.ops-document-section > .section-header h2 {
  margin: 0 0 1rem;
  font-size: 1.15rem;
}
details.receipt-document-section > summary,
details.ops-document-section > summary {
  cursor: pointer;
  color: var(--text-heading);
}
details.receipt-document-section[open] > summary,
details.ops-document-section[open] > summary { margin-bottom: 1rem; }
details.receipt-document-section > summary > .section-title,
details.ops-document-section > summary > .section-title { margin: 0; font-size: 1.15rem; }
.receipt-form-error {
  padding: .65rem .8rem;
  border: 1px solid #b00020;
  border-radius: 5px;
  color: #8f0019;
  background: #fff5f6;
}
.receipt-charge-empty { margin: .75rem 0 0; color: #68798d; }
.receipt-charge-stale {
  margin: .5rem 0 .75rem;
  padding: .5rem .7rem;
  border-left: 4px solid var(--warning);
  background: var(--surface-warning);
  color: var(--text-heading);
}
.receipt-charge-stale strong { display: block; }
.receipt-page-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
}
.receipt-page-action-buttons { margin: 0; }
/* The same spacing between Save Draft, Post and Discard as on the other documents. */
.receipt-page-actions .receipt-page-action-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
/* Save Draft / Post / Discard sit between a document's sections: keep the
   same gap below them as between the sections. */
.ops-document-actions[data-operation-page-actions] { flex-wrap: wrap; margin: 0 0 1rem; }
/* Transient "saved" acknowledgement beside Save Draft. A page-top flash reads
   poorly on a screen this long — the operator is looking at the button they
   just pressed, so the confirmation belongs there. It fades on its own; the
   element is re-created by each swap, so the animation replays every save. */
.receipt-save-confirmation {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .55rem;
  border: 1px solid var(--success-border);
  border-radius: 999px;
  background: var(--surface-success);
  color: var(--success);
  font-size: .82rem;
  font-weight: 650;
  line-height: 1.3;
  animation: receipt-save-confirmation-fade .35s ease 3.4s forwards;
}
.receipt-save-confirmation::before { content: "\2713"; font-weight: 700; }
@keyframes receipt-save-confirmation-fade {
  to { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .receipt-save-confirmation { animation-duration: .01ms; }
}
.receipt-amendment-banner {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) minmax(34rem, 1.7fr);
  align-items: center;
  gap: .7rem 1rem;
  margin: 0 0 1rem;
  padding: .8rem 1rem;
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--brand-blue);
  border-radius: 8px;
  background: var(--surface-info);
}
.receipt-amendment-banner-copy h2 {
  margin: 0;
  color: var(--text-heading);
  font-size: var(--type-card);
}
.receipt-amendment-banner-copy > p:last-child { margin: .2rem 0 0; color: var(--text-muted); }
.receipt-amendment-reason-grid {
  display: grid;
  grid-template-columns: minmax(12rem, .8fr) minmax(16rem, 1.4fr) max-content;
  align-items: center;
  gap: .45rem .65rem;
}
.receipt-amendment-reason-grid label {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: .35rem;
  margin: 0;
}
.receipt-amendment-reason-grid label > span {
  color: var(--text-muted);
  font-size: .75rem;
  font-weight: 700;
}
.receipt-amendment-reason-grid :where(input, select) { width: 100%; min-width: 0; }
.receipt-amendment-banner > .read-only-note { grid-column: 2; margin: -.25rem 0 0; }
.receipt-lifecycle-actions { justify-content: flex-end; margin: 1rem 0 2rem; }
/* Beside the status at the top, Amend and Reverse take no extra space. */
.receipt-document-header .receipt-lifecycle-actions,
.ops-document-header .receipt-lifecycle-actions { margin: 0; }
.receipt-correction-dialog { width: min(800px, calc(100vw - 32px)); }
.receipt-correction-dialog .modal-head h2 { margin: 0; font-size: var(--type-card); }
/* The Amend card asks two questions, one under the other. */
body.ui-density .modal-dialog.amendment-card-dialog { width: min(560px, calc(100vw - 32px)); }
body.ui-density .amendment-card-dialog .field-grid { grid-template-columns: var(--field-label-width) minmax(0, 1fr); }
.receipt-correction-warning {
  margin: 0 0 .8rem;
  padding: .65rem .75rem;
  border-left: 4px solid var(--warning);
  background: var(--surface-warning);
}
.receipt-correction-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
  margin: .7rem 0;
}
.receipt-correction-summary > span {
  display: grid;
  gap: .05rem;
  padding: .55rem .65rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-section);
}
.receipt-correction-summary strong { color: var(--text-heading); font-size: var(--type-section); }
.receipt-correction-summary small { color: var(--text-muted); font-size: .74rem; }
.receipt-routing-choices { display: grid; gap: .4rem; margin: .75rem 0 0; padding: 0; border: 0; }
.receipt-routing-choices legend { margin-bottom: .35rem; color: var(--text-heading); font-size: var(--type-section); font-weight: 750; }
.receipt-routing-choices label {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: start;
  gap: .55rem;
  margin: 0;
  padding: .5rem .65rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-panel);
}
.receipt-routing-choices input { margin-top: .15rem; }
.receipt-routing-choices span { display: grid; gap: .08rem; }
.receipt-routing-choices small { color: var(--text-muted); font-size: .76rem; }
.receipt-reversal-credit-table { overflow-x: auto; }
.receipt-reversal-effects { display: grid; gap: .35rem; margin: .65rem 0; padding-left: 1.25rem; }
.correction-review-page {
  width: min(920px, 100%);
  margin: 0 auto 1.5rem;
}
.correction-reason-grid {
  display: grid;
  grid-template-columns: minmax(13rem, .8fr) minmax(18rem, 1.4fr);
  gap: .45rem .7rem;
  align-items: center;
}
.correction-reason-grid label {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: .4rem;
  align-items: center;
  margin: 0;
}
.correction-reason-grid label > span {
  color: var(--text-muted);
  font-size: .75rem;
  font-weight: 700;
}
.correction-reason-grid :where(input, select) { width: 100%; min-width: 0; }
.correction-delta-table { overflow-x: auto; }
.correction-delta-table table { width: 100%; margin: .35rem 0; }
.correction-delta-table :where(th, td) { padding: .32rem .45rem; vertical-align: top; }
@media (max-width: 900px) {
  .receipt-amendment-banner { grid-template-columns: minmax(0, 1fr); }
  .receipt-amendment-banner > .read-only-note { grid-column: auto; }
  .receipt-amendment-reason-grid { grid-template-columns: minmax(0, 1fr); }
  .correction-reason-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .receipt-correction-summary { grid-template-columns: minmax(0, 1fr); }
}
/* Site action-blue is the plain .btn; this modifier states the intent at the
   call site so a future muted default cannot silently demote these two. */
.btn-action { background: var(--action); border-color: var(--action); color: var(--text-on-action); }
.btn-action:hover { background: var(--action-hover); border-color: var(--action-hover); }
.document-attachment-staged .field-hint { grid-column: 2; margin: 0; }
.operation-card-status { display:flex; justify-content:flex-end; margin-bottom:.6rem; }
.operation-card-attachment-list { margin: .25rem 0 0; padding-left: 1.1rem; }
.operation-card-attachment-list li { margin: .15rem 0; }
.operation-card-attachment-meta { margin-left: .4rem; color: var(--text-muted); font-size: .78rem; }
.receipt-posting-facts { margin-bottom: .6rem; }
.receipt-charge-table .computed-qty { display: block; margin-top: .2rem; color: #68798d; white-space: nowrap; }
.receipt-charge-skipped td { opacity: .58; }
.receipt-charge-skipped td:last-child { opacity: 1; }
.ops-list-row,
.receipt-list-row { cursor:pointer; }
.ops-list-row:focus,
.receipt-list-row:focus { outline:2px solid var(--action); outline-offset:-2px; }
.receipt-document-page .btn-danger,
.ops-document-page .btn-danger,
.outman-document-page .btn-danger { background:var(--surface-panel); color:var(--danger); border-color:var(--danger-border); }
.receipt-document-page .btn-danger:hover,
.ops-document-page .btn-danger:hover,
.outman-document-page .btn-danger:hover { background:var(--surface-danger); color:var(--danger-hover); }
/* Outbound order holds: the reason banner, the hold form and the list's reason line. */
.outman-document-page > .flash.order-problem-banner { display:flex; align-items:center; justify-content:space-between; gap:1rem; max-width:none; margin:.25rem 0 .5rem; }
.order-problem-banner form { margin:0; flex:0 0 auto; }
.order-problem-form { display:flex; flex-wrap:wrap; align-items:flex-end; gap:.6rem 1rem; }
.order-problem-form label { display:flex; flex-direction:column; gap:.25rem; }
.order-problem-note { flex:1 1 22rem; }
.order-problem-actions { display:flex; gap:.5rem; }
.order-problem-reason { display:block; margin-top:.15rem; color:var(--text-subtle); font-size:.75rem; }
/* Ship from beside Release (and Create Shipment Draft): one line, buttons keep their height. */
.outman-ship-from { display:inline-flex; align-items:center; gap:.5rem; align-self:center; font-weight:600; }
.outman-ship-from select { width:auto; min-width:14rem; }
.portal-order-problem { max-width:none; margin:0 0 1rem; }
.mp-just-saved td { animation: mp-saveflash 1.4s ease; }
@keyframes mp-saveflash { 0% { background: #d7f0df; } 100% { background: transparent; } }
.mp-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; border-top: 1px solid #eee; padding-top: 0.7rem; }
.mp-foot-hint { font-size: 12px; }
.mp-done { padding: 8px 20px; }

/* Close summary one-pager */
.kate-onepager h3.cs-group { color:var(--text-heading); margin-top:1.2rem; border-bottom:1px solid var(--border); padding-bottom:4px; }

/* ============================================================= */
/* AI Chat Agent v1 — drawer-first analyst chat (navy house style) */
/* ============================================================= */
/* ui-literal-allowlist:start ai-chat-internals
   The embedded analyst transcript deliberately retains its established
   message/provenance palette. Foundation work must not expand this scope. */
.ai-launch { position: fixed; right: 20px; bottom: 20px; z-index: 150; background: #1a3a5c; color: #fff; border: none; border-radius: 24px; padding: 11px 20px; font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: 0 4px 14px rgba(13,43,71,0.3); }
.ai-launch:hover { background: #0d2b47; }
.ai-drawer { display: flex; flex-direction: column; padding: 0; width: 460px; overflow: hidden; }
.ai-drawer .ai-panel, .ai-msg-flow, .ai-msg-artifacts, .ai-result { min-width: 0; max-width: 100%; }
.ai-drawer #ai-drawer-body, .ai-drawer .ai-panel { height: 100%; }
.ai-loading { padding: 2rem; color: #7a8aa0; }

/* Scope 8 — full-page chat uses (nearly) the whole viewport width, minimal fixed padding. */
.ai-fullpage { max-width: 1400px; margin: 0.4rem auto; padding: 0 0.6rem; height: calc(100vh - 96px); }
.ai-fullpage .ai-panel { height: 100%; border: 1px solid #e0e8f0; border-radius: 10px; overflow: hidden; }

.ai-panel { display: flex; flex-direction: column; height: 100%; background: #fff; }
.ai-panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; padding: 0.7rem 0.9rem; border-bottom: 2px solid #e0e8f0; }
.ai-title { font-weight: 700; color: #1a3a5c; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.ai-dot { width: 9px; height: 9px; border-radius: 50%; background: #1a7a3a; display: inline-block; }
.ai-model { font-size: 11px; font-weight: 500; color: #7a8aa0; background: #eef2f7; padding: 2px 7px; border-radius: 10px; white-space: nowrap; }
.ai-head-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ai-name { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
/* The drawer's Full page link, drawn like the small buttons beside it. */
.ai-mini-link { background: #eef2f7; color: #1a3a5c; border: 1px solid #d3dced; border-radius: 6px; padding: 4px 10px; font-size: 12px; white-space: nowrap; text-decoration: none; }
.ai-mini-link:hover { background: #e0e8f0; }
.ai-meter { font-size: 12px; color: #4a5b70; background: #f4f7fa; border: 1px solid #e5ecf3; border-radius: 10px; padding: 2px 9px; white-space: nowrap; }
.ai-meter-off { color: #6a7a90; }

.ai-controls { display: flex; gap: 6px; align-items: center; padding: 0.5rem 0.9rem; border-bottom: 1px solid #eef2f7; flex-wrap: wrap; }
.ai-controls .ai-newtopic-form { margin: 0; }
.ai-select, .ai-search { padding: 5px 9px; border: 1px solid #cbd5e3; border-radius: 6px; font-size: 13px; }
.ai-search { flex: 1; min-width: 120px; }

/* Scope 1 — denser bubbles: tighter padding, smaller gaps, wider column. */
/* Polish round #7 — wrapper hosts the scroll area + the floating jump-to-bottom button. */
.ai-stream-wrap { flex: 1; position: relative; display: flex; min-height: 0; }
.ai-stream { flex: 1; overflow-y: auto; padding: 0.5rem 0.7rem; display: flex; flex-direction: column; gap: 0.3rem; }
.ai-jump-bottom { position: absolute; right: 14px; bottom: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #d3dced; background: #1a3a5c; color: #fff; font-size: 17px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(13,43,71,0.25); z-index: 5; display: flex; align-items: center; justify-content: center; }
.ai-jump-bottom:hover { background: #0d2b47; }
.ai-msg { max-width: 92%; padding: 5px 10px; border-radius: 10px; font-size: 14px; line-height: 1.4; word-wrap: break-word; overflow-wrap: anywhere; }
.ai-msg-user { align-self: flex-end; background: #1a3a5c; color: #fff; border-bottom-right-radius: 4px; }
.ai-msg-assistant { align-self: flex-start; width: 92%; box-sizing: border-box; background: #f4f7fa; color: #22303f; border: 1px solid #e5ecf3; border-bottom-left-radius: 4px; }
/* Plain (non-markdown) bodies keep author newlines; markdown bodies are block HTML. */
.ai-msg-body:not(.ai-md) { white-space: pre-wrap; }

/* Scope 6 — rendered markdown inside assistant bubbles. */
.ai-md > :first-child { margin-top: 0; }
.ai-md > :last-child { margin-bottom: 0; }
.ai-md p { margin: 0.3rem 0; }
.ai-md h1, .ai-md h2, .ai-md h3, .ai-md h4 { margin: 0.5rem 0 0.3rem; line-height: 1.25; }
.ai-md h1 { font-size: 1.15em; } .ai-md h2 { font-size: 1.08em; } .ai-md h3 { font-size: 1em; } .ai-md h4 { font-size: 0.95em; }
.ai-md ul, .ai-md ol { margin: 0.3rem 0; padding-left: 1.3rem; }
.ai-md li { margin: 0.1rem 0; }
.ai-md code { background: #e7edf4; border-radius: 4px; padding: 0 4px; font-size: 0.9em; font-family: ui-monospace, monospace; }
.ai-md pre { background: #0d2b47; color: #dfe8f6; padding: 8px 10px; border-radius: 6px; overflow-x: auto; margin: 0.4rem 0; }
.ai-md pre code { background: none; color: inherit; padding: 0; }
.ai-md blockquote { margin: 0.4rem 0; padding: 2px 10px; border-left: 3px solid #cbd5e3; color: #4a5b70; }
.ai-md a { color: #1a5bbf; }
/* Polish round #3 — table shrinks to content (width: max-content) so a narrow table no longer
   leaves a full-bubble-width block with a mismatched background beside it; the wrapper stays
   scrollable for wide tables. background: transparent lets the bubble colour show through the
   empty gutter instead of a white box. */
.ai-md-table { border-collapse: collapse; margin: 0.4rem 0; font-size: 0.92em; display: block; overflow-x: auto; max-width: 100%; width: max-content; background: transparent; }
.ai-md-table th, .ai-md-table td { border: 1px solid #d3dced; padding: 3px 8px; text-align: left; vertical-align: top; }
.ai-md-table th { background: #eef2f7; font-weight: 700; }
/* Polish round #4 — horizontal rule / thematic break spanning the bubble width. */
.ai-md hr { border: none; border-top: 1px solid #d3dced; margin: 0.6rem 0; height: 0; }

/* Scope 7 — search-term highlight. */
.ai-msg mark { background: #ffe27a; color: inherit; padding: 0 1px; border-radius: 2px; }

/* Scope 2 — unmistakable "New topic" divider. */
.ai-boundary { text-align: center; margin: 8px 0 4px; position: relative; }
.ai-boundary::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid #d3dced; }
.ai-boundary-pill { position: relative; z-index: 1; background: #1a3a5c; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 2px 12px; border-radius: 12px; }

/* Scope 4 — one folded transparency expander per assistant turn. */
.ai-tools-expander { margin-top: 5px; font-size: 12px; }
.ai-tools-summary { cursor: pointer; color: #1a3a5c; font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 5px; padding: 2px 6px; border: 1px solid #d3dced; border-radius: 12px; background: #fff; }
.ai-tools-summary::-webkit-details-marker { display: none; }
.ai-expander-caret { transition: transform 0.12s ease; font-size: 10px; color: #7a8aa0; }
.ai-tools-expander[open] .ai-expander-caret { transform: rotate(90deg); }
.ai-tools { margin-top: 5px; display: flex; flex-direction: column; gap: 4px; }
.ai-tool { font-size: 12px; border: 1px solid #e0e8f0; border-radius: 6px; background: #fff; padding: 5px 7px; }
.ai-tool-err { border-color: #f0c2c2; background: #fff6f6; }
.ai-tool-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 3px; }
.ai-tool-name { font-weight: 700; color: #1a3a5c; }
.ai-tool-err .ai-tool-name { color: #a11; }
.ai-tool-summary { color: #6a7a90; }
.ai-tool-input { background: #0d2b47; color: #dfe8f6; padding: 8px; border-radius: 5px; overflow-x: auto; font-size: 11px; margin: 0 0 4px; white-space: pre-wrap; }
.ai-tool-meta { color: #7a8aa0; font-size: 11px; }

/* Chat fix round 2 / Item 2 — charts + export downloads as first-class in-message blocks. */
.ai-msg-artifacts { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.ai-msg-flow > .ai-msg-body + .ai-msg-body,
.ai-msg-flow > .ai-msg-artifacts + .ai-msg-body { margin-top: 8px; }
.ai-msg-chart { background: #fff; border: 1px solid #e5ecf3; border-radius: 8px; padding: 6px; overflow-x: auto; }
.ai-msg-chart svg { display: block; max-width: 100%; height: auto; }
.ai-msg-export { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; text-decoration: none; font-size: 13px; font-weight: 600; color: #16405f; background: #eaf3fb; border: 1px solid #cfe0f2; border-radius: 8px; padding: 6px 12px; transition: background 0.12s; }
.ai-msg-export:hover { background: #dcecfa; }
.ai-msg-export-icon { font-size: 14px; }
/* show_table — the query's own rows, formatted like the screens, with downloads. */
.ai-result { margin: 0; background: #fff; border: 1px solid #e5ecf3; border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.ai-result-title { font-weight: 700; color: #1a3a5c; font-size: 14px; }
.ai-result-note { margin: 0; font-size: 12px; color: #6a7a90; }
.ai-result-scope { white-space: nowrap; }
.ai-result-scroll { max-width: 100%; max-height: 420px; overflow: auto; border: 1px solid #e5ecf3; border-radius: 6px; align-self: flex-start; }
.ai-result-table { border-collapse: collapse; font-size: 13px; width: max-content; min-width: 50%; }
.ai-result-table th, .ai-result-table td { padding: 4px 10px; border-bottom: 1px solid #eef2f7; text-align: left; white-space: nowrap; }
.ai-result-table th { position: sticky; top: 0; background: #eef2f7; color: #1a3a5c; font-weight: 700; }
.ai-result-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ai-result-table tbody tr:nth-child(even) td { background: #fafbfd; }
.ai-result .ai-msg-chart { align-self: flex-start; max-width: 100%; }
.ai-result-empty { margin: 0; font-size: 13px; color: #6a7a90; }
.ai-result-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: #6a7a90; }
.ai-result-foot span { margin-right: auto; }
.ai-result-foot .ai-msg-export { padding: 4px 10px; font-size: 12px; }

/* Empty conversation: what to ask. */
.ai-empty { margin: auto 0; padding: 1.5rem 0.5rem; text-align: center; color: #4a5b70; }
.ai-empty-title { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: #1a3a5c; }
.ai-empty-sub { margin: 0 0 14px; font-size: 13px; }
.ai-empty-examples { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 640px; margin: 0 auto; }
.ai-example { background: #fff; border: 1px solid #cfe0f2; color: #16405f; border-radius: 16px; padding: 7px 14px; font-size: 13px; cursor: pointer; text-align: left; }
.ai-example:hover { background: #eaf3fb; }
/* First-sign-in welcome (chat/_welcome_message.html): an assistant bubble; before consent,
   the notice line and Get started sit where the message box will be. */
.ai-welcome .ai-welcome-examples { justify-content: flex-start; margin: 8px 0 0; }
.ai-welcome-try { list-style: none; padding-left: 0.4rem; color: #4a5b70; }
.ai-welcome-consent { border-top: 1px solid #e5ecf3; padding: 10px 14px 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 13px; color: #4a5b70; }
.ai-welcome-consent p { margin: 0; }
.ai-welcome-consent a { color: #1a5bbf; font-weight: 600; }
/* Header: model + the user's data scope; not-connected state. */
.ai-scope { font-size: 11px; font-weight: 500; color: #4a5b70; background: #f4f7fa; border: 1px solid #e5ecf3; padding: 1px 7px; border-radius: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.ai-dot.ai-dot-off { background: #b0412e; }
.ai-setup-notice { margin: 0.5rem 0.9rem 0; padding: 8px 12px; border-radius: 8px; background: #fff6e5; border: 1px solid #f1d39a; color: #6b4a00; font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.ai-setup-notice a { color: #1a5bbf; font-weight: 600; }
/* Earlier topics: one entry per "New topic". */
.ai-topics { position: relative; }
.ai-topics > summary { list-style: none; cursor: pointer; }
.ai-topics > summary::-webkit-details-marker { display: none; }
.ai-topics-list { position: absolute; z-index: 20; top: calc(100% + 4px); right: 0; width: min(360px, 80vw); max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid #d3dced; border-radius: 8px; box-shadow: 0 6px 18px rgba(13,43,71,0.15); padding: 4px; }
.ai-topic { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; background: none; border: none; border-radius: 6px; padding: 6px 8px; cursor: pointer; text-align: left; }
.ai-topic:hover { background: #eef2f7; }
.ai-topic-title { font-size: 13px; color: #1a3a5c; }
.ai-topic-when { font-size: 11px; color: #7a8aa0; }
.ai-topic-banner { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; margin-bottom: 4px; background: #eef2f7; border-radius: 8px; font-size: 12px; color: #4a5b70; }

/* Scope 3 — optimistic bubble working indicator + streaming activity lines. */
.ai-msg-pending { opacity: 0.96; }
/* Bubble width is owned by .ai-msg-assistant above. Do not reserve a blank text line before
   the first delta (or after a live chart); the activity indicator should start at the top. */
.ai-msg-pending .ai-msg-body { line-height: 1.4; }
.ai-msg-pending .ai-msg-body:empty { display: none; }
.ai-msg-body.ai-live { line-height: 1.4; }
.ai-typing { display: inline-flex; gap: 4px; align-items: center; }
.ai-typing span { width: 6px; height: 6px; border-radius: 50%; background: #9aa8bc; animation: ai-blink 1.2s infinite ease-in-out both; }
.ai-typing span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ai-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.ai-activity { margin-top: 4px; font-size: 12px; color: #6a7a90; font-style: italic; display: flex; align-items: center; gap: 6px; }
.ai-activity::before { content: '⚙'; font-style: normal; }
.ai-msg-error { align-self: flex-start; background: #fff6f6; border: 1px solid #f0c2c2; color: #a11; }

/* Scope 8 — per-user transcript text size. */
.ai-stream.ai-size-small .ai-msg { font-size: 12.5px; }
.ai-stream.ai-size-large .ai-msg { font-size: 16px; }
.ai-size-select { font-size: 12px; padding: 4px 6px; border: 1px solid #cbd5e3; border-radius: 6px; color: #4a5b70; }
/* Polish round #8 — visible labels for the text-size / thinking-effort header controls. */
.ai-ctl-label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #4a5b70; white-space: nowrap; }

/* Chat UI v2 — Batch 2: extended thinking effort control + collapsed thinking block. */
.ai-effort-select { font-size: 12px; padding: 4px 6px; border: 1px solid #cbd5e3; border-radius: 6px; color: #4a5b70; }
.ai-thinking { margin: 0 0 5px; font-size: 12.5px; }
.ai-thinking-summary { cursor: pointer; color: #6a5a80; font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border: 1px dashed #cbc0dd; border-radius: 12px; background: #f7f4fb; }
.ai-thinking-summary::-webkit-details-marker { display: none; }
.ai-thinking-caret { transition: transform 0.12s ease; font-size: 10px; color: #9a8ab0; }
.ai-thinking[open] .ai-thinking-caret { transform: rotate(90deg); }
/* Polish round #1 — trim thinking-block whitespace to chat-bubble density. The body renders
   markdown (block <p>), so drop the pre-wrap (the live textContent view keeps pre-wrap via the
   .ai-thinking-live rule below) and collapse the inner first/last paragraph margins that were
   padding out the top and bottom. Tighter padding matches the bubbles. */
.ai-thinking-body { margin-top: 4px; padding: 5px 9px; border-left: 3px solid #d6cae8; background: #faf8fd; color: #5a5270; border-radius: 4px; }
.ai-thinking-body.ai-md .ai-thinking-seg > :first-child { margin-top: 0; }
.ai-thinking-body.ai-md .ai-thinking-seg > :last-child { margin-bottom: 0; }
/* Live streaming view is raw textContent (not markdown), so keep author newlines. */
.ai-thinking-live { white-space: pre-wrap; }
/* Same for the live answer bubble before the first progressive-markdown swap (review P3). */
.ai-msg-body.ai-live { white-space: pre-wrap; }
.ai-thinking-seg + .ai-thinking-seg { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #e2d9ee; }

/* Scope 2/10 — transient toast (New topic feedback) + auto-grow textarea. */
.ai-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(12px); background: #1a3a5c; color: #fff; font-size: 13px; padding: 9px 16px; border-radius: 8px; box-shadow: 0 4px 14px rgba(13,43,71,0.3); opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 400; pointer-events: none; }
.ai-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.ai-composer { display: flex; align-items: flex-end; gap: 6px; padding: 0.7rem 0.9rem; border-top: 2px solid #e0e8f0; }
.ai-input { flex: 1; min-width: 0; resize: none; padding: 8px 10px; border: 1px solid #cbd5e3; border-radius: 8px; font-size: 14px; font-family: inherit; max-height: 136px; line-height: 20px; }
.ai-send { background: #1a3a5c; color: #fff; border: none; border-radius: 8px; padding: 8px 18px; font-weight: 700; cursor: pointer; }
.ai-send:hover { background: #0d2b47; }
.ai-attach {
  flex: 0 0 38px;
  width: 38px;
  min-height: 38px;
  padding: 7px;
  border: 1px solid #b9c7da;
  border-radius: 8px;
  background: #f4f7fa;
  color: #1a3a5c;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ai-attach:hover { border-color: #1a6ab8; background: #eaf2fb; color: #0d4f8c; }
.ai-attach:focus-visible { outline: 3px solid rgba(20,87,238,.25); outline-offset: 2px; }
.ai-attach svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Files picked with the paperclip, listed above the composer until the message is sent. */
.ai-attachments { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0.9rem 0; }
.ai-attachments[hidden] { display: none; }
.ai-attachment { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 4px 3px 10px; border: 1px solid #b9c7da; border-radius: 999px; background: #f4f7fa; color: #1a3a5c; font-size: 12px; }
.ai-attachment > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-attachment-busy { padding-right: 10px; color: #66758d; }
.ai-attachment-remove { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #53627a; cursor: pointer; line-height: 1; }
.ai-attachment-remove:hover { background: #e0e8f0; }
.ai-mini { background: #eef2f7; color: #1a3a5c; border: 1px solid #d3dced; border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.ai-newtopic-button { min-width: 6.5rem; }
.ai-mini:hover { background: #e0e8f0; }
/* Chat fix round 2 / Item 7 — New-topic loading state (inline spinner + disabled). */
.ai-mini:disabled { cursor: default; opacity: 0.8; }
.ai-mini-loading { position: relative; padding-left: 24px; }
.ai-mini-loading::before { content: ''; position: absolute; left: 8px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border: 2px solid #9aa8bc; border-top-color: transparent; border-radius: 50%; animation: ai-spin 0.7s linear infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-danger { background: #fdeaea; color: #a11; border-color: #f0c2c2; }
.ai-load-older { text-align: center; margin-bottom: 4px; }

/* Consent + admin */
.ai-consent, .ai-admin { max-width: 820px; margin: 1.5rem auto; }
.ai-consent-box { background: #f9fafb; border: 1px solid #e0e8f0; border-radius: 8px; padding: 1rem 1.2rem; margin: 1rem 0; }
.ai-consent-ver { color: #9aa8bc; font-size: 12px; margin-top: 0.5rem; }
.ai-admin-form { margin: 1rem 0; }
.ai-admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 0.75rem 0; }
.ai-admin-grid label, .ai-admin-form label { display: block; font-size: 13px; color: #4a5b70; }
.ai-admin-grid input, .ai-admin-form input, .ai-admin-form select, .ai-memory-text { width: 100%; padding: 7px 9px; border: 1px solid #cbd5e3; border-radius: 6px; font-family: inherit; font-size: 13px; }
.ai-switch { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #1a3a5c; }
.ai-admin-form .ai-switch input, .ai-admin-table .ai-switch input { width: auto; margin: 0; }
.ai-admin-table .ai-switch { font-weight: 500; font-size: 13px; }
.ai-admin-tabs { display: flex; gap: 4px; border-bottom: 2px solid #e0e8f0; margin: 0.25rem 0 1rem; }
.ai-admin-tabs a { padding: 6px 12px; font-size: 13px; font-weight: 600; color: #4a5b70; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.ai-admin-tabs a:hover { color: #1a3a5c; }
.ai-admin-tabs a.active { color: #1a3a5c; border-bottom-color: #1a3a5c; }
.ai-admin-status { display: flex; align-items: center; gap: 8px; margin: 0 0 0.75rem; font-size: 13px; color: #4a5b70; }
.ai-admin-help { margin: 0.25rem 0 0.5rem; font-size: 13px; color: #4a5b70; }
.ai-admin-status.flash { display: block; }
.ai-admin-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.ai-admin-table th { background: #f4f7fa; text-align: left; font-size: 12px; padding: 6px 8px; border-bottom: 2px solid #e0e8f0; }
.ai-admin-table td { padding: 6px 8px; border-bottom: 1px solid #eef2f7; font-size: 13px; vertical-align: top; }
.ai-dict-edit textarea { width: 100%; font-family: inherit; font-size: 12px; border: 1px solid #cbd5e3; border-radius: 5px; padding: 5px; }
.ai-badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.ai-badge-baseline { background: #dfe8f6; color: #1a3a5c; }
.ai-badge-agent_note { background: #ede7f6; color: #4527a0; }
.ai-memory-text { font-family: ui-monospace, monospace; font-size: 12px; }
/* ui-literal-allowlist:end ai-chat-internals */

/* ============================================================= */
/* Invoice Hub v2 — command center, center modal, attention queue */
/* ============================================================= */
.hub-header { align-items: center; }
.hub-manage { display: flex; gap: 6px; }
.hub-manage .mini { background:var(--surface-subtle); color:var(--text-heading); border:1px solid var(--border); border-radius:6px; padding:6px 12px; font-size:13px; font-weight:600; cursor:pointer; }
.hub-manage .mini:hover { background: #e0e8f0; }
.hub-manage a.mini { text-decoration: none; display: inline-block; }

.param-controls { display: grid; grid-template-columns: 150px 110px minmax(280px, 1fr) auto; gap: 0.75rem; align-items: end; margin-bottom: 1rem; }
.param-controls label { margin: 0; font-size: 12px; color: #5a6b80; text-transform: uppercase; letter-spacing: 0.03em; }
.param-controls select { margin-top: 4px; }
.param-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 0.85rem; }
.param-summary > div { background: #fff; border: 1px solid #e0e8f0; border-radius: 8px; padding: 0.75rem 0.9rem; min-width: 0; }
.param-summary span:first-child { display: block; color: #7a8aa0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
.param-summary strong { color: #0d2b47; }
.param-count { color: #5a6b80; font-size: 13px; margin: 0.35rem 0 0.6rem; }
.param-table th { white-space: nowrap; }
.param-table td { vertical-align: top; }
.param-table td:nth-child(1) { min-width: 240px; }
.param-muted { color: #7a8aa0; font-size: 12px; overflow-wrap: anywhere; }
.param-chip { display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 700; background: #eef2f7; color: #36506a; }
.param-chip-warn { background: #fff3e0; color: #8a5200; }
.param-missing { color: #a8500a; font-weight: 700; }

@media (max-width: 900px) {
  .param-controls { grid-template-columns: 1fr 1fr; }
  .param-summary { grid-template-columns: 1fr; }
}

/* Command-center overview title (feedback A#1; v3 item #1 two-row layout) */
.cc-title { margin: 0.25rem 0 1rem; color: #0d2b47; }
.cc-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cc-row-month { font-size: 1.55rem; font-weight: 800; margin-bottom: 0.35rem; align-items: center; }
.cc-month-label { font-weight: 700; color: #0d2b47; }
/* Month picker (hubs review 1): the month sits centred between its arrows and reads larger.
   The arrows are square buttons, not dashed text, so nothing tips the label off-centre. */
.cc-row-month .cc-seg.cc-month { font-size: 1.85rem; line-height: 1.15; }
.cc-row-month .cc-seg-wrap { align-items: center; }
.cc-row-month a.cc-seg-sm { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--border-control); border-radius: 8px; font-size: 1.25rem; text-decoration: none; }
.cc-row-month a.cc-seg-sm:hover { border-color: #2e6da4; background: var(--surface-hover); }
.cc-row-scope { font-size: 1.05rem; font-weight: 700; gap: 12px; }
.cc-seg-sm { font-size: 1rem; }
.cc-seg-wrap { position: relative; display: inline-flex; align-items: baseline; gap: 6px; }
.cc-seg { font:inherit; font-weight:800; color:var(--text-heading); background:none; border:none; border-bottom:2px dashed var(--border-control); cursor:pointer; padding:0 2px 1px; }
.cc-seg:hover { color: #2e6da4; border-bottom-color: #2e6da4; }
.cc-seg-label { font-size: 0.68rem; font-weight: 600; color: #8090a4; text-transform: uppercase; letter-spacing: 0.03em; }
.cc-dot { color: #b9c6da; font-weight: 400; }
.cc-menu { position: absolute; top: 100%; left: 0; margin-top: 6px; background: #fff; border: 1px solid #d3dced; border-radius: 8px; box-shadow: 0 6px 20px rgba(13,43,71,0.18); padding: 6px; z-index: 120; min-width: 200px; max-height: 340px; overflow-y: auto; }
.cc-mi { display: block; padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 600; color: #4a5b70; text-decoration: none; cursor: pointer; }
.cc-mi:hover { background:var(--surface-hover); color:var(--text-heading); }
.cc-mi.active { background:var(--action); color:var(--text-on-action); }
.cc-menu-year { font-size: 11px; color: #9aa8bc; padding: 4px 8px 2px; text-transform: uppercase; }
.cc-menu-months { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; margin-bottom: 4px; }
.cc-menu-months .cc-mi { text-align: center; padding: 5px 4px; }
.cc-spinner { margin-left: auto; font-size: 1rem; color: #2e6da4; }
.htmx-indicator { opacity: 0; transition: opacity 0.15s; }
.htmx-request .htmx-indicator, .htmx-indicator.htmx-request { opacity: 1; }
.cc-spinner.htmx-request { animation: cc-spin 0.7s linear infinite; }
@keyframes cc-spin { to { transform: rotate(360deg); } }

/* Billing Hub Expected panel (hubs review 1) */
.hub-expected { margin: 0 0 1rem; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-panel); box-shadow: var(--shadow-soft); }
.hub-expected-loading { margin: 0; }
.hub-expected-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.hub-expected-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text-muted); }
.hub-expected-total { margin: .1rem 0 0; font-size: 2.1rem; font-weight: 800; line-height: 1.1; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.hub-expected-split { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.hub-expected-split > div { min-width: 150px; padding: .55rem .85rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-subtle); cursor: help; }
.hub-expected-split dt { color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.hub-expected-split dd { margin: .15rem 0 0; color: var(--text-heading); font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.hub-expected-note { margin: .65rem 0; color: var(--text-muted); font-size: 13px; }
.hub-expected-scroll { max-height: 330px; }
.hub-expected-scroll thead th { position: sticky; top: 0; z-index: 2; }
.hub-expected-empty { margin: .25rem 0 0; }
.hub-expected-gaps { margin-top: .75rem; padding: .6rem .85rem; border-left: 4px solid var(--border-warning); border-radius: 6px; background: var(--surface-warning); font-size: 13px; }
.hub-expected-gaps ul { margin: .3rem 0 0; padding-left: 1.1rem; }

/* Group cards as filters (feedback A#2) */
.kate-card { cursor: pointer; text-decoration: none; transition: border-color 0.12s, box-shadow 0.12s; }
.kate-card:hover { border-color: #b9c6da; }
.kate-card.selected { border-color:var(--action); box-shadow:0 0 0 2px var(--brand-blue-ring); }
.showing-crumb { margin: -0.4rem 0 0.75rem; font-size: 13px; color: #4a5b70; background: #eef4fb; border: 1px solid #d3e0f0; border-radius: 16px; padding: 4px 12px; display: inline-block; }
.showing-crumb strong { color:var(--text-heading); }
.crumb-clear { margin-left: 8px; color: #a8500a; text-decoration: none; font-weight: 700; cursor: pointer; }

/* Scale dropdown (feedback A#4) */
.kate-overflow { display: flex; flex-direction: column; gap: 6px; }
.group-options { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
.group-option { padding: 6px 10px; border-radius: 6px; text-decoration: none; color: #4a5b70; font-size: 13px; cursor: pointer; }
.group-option:hover { background: #eef4fb; }
.group-option.active { background:var(--action); color:var(--text-on-action); }

/* WARN visual treatment (feedback B#6) — left border tint + icon, restrained */
.warn-row td { background: #fffaf3; }
.client-row.warn-row:hover td { background: #fffaf3; }
.warn-row td:first-child { box-shadow: inset 3px 0 0 #e8a54a; }
.warn-ico { color: #a8500a; }
.warn-invoice { border-left: 3px solid #e8a54a; }
.warn-cat td { background: #fff6ec; }
.warn-line td { background: #fff6ec; }
.warn-jump { text-decoration: none; cursor: pointer; }
.warn-flash td { animation: warn-pulse 1.6s ease; }
@keyframes warn-pulse { 0%,100% { background: #fff6ec; } 30% { background: #ffe0b8; } }
.inv-name { font-weight:700; color:var(--text-heading); }
.inv-id { color: #9aa8bc; font-size: 12px; }

/* Finance UX primitives are intentionally additive so established shared cards keep
   their current layout. Drawers use viewport geometry supplied by finance_ui.js to
   match the visible height of the card/container that launched them. */
.finance-status-badge { display: inline-flex; align-items: center; min-height: 1.35rem; padding: .12rem .42rem; border: 1px solid transparent; border-radius: 999px; font-size: var(--type-content); font-weight: 700; line-height: 1.1; white-space: nowrap; }
.finance-status-badge--success { border-color: #7caf91; background: #e7f4eb; color: #1e6839; }
.finance-status-badge--warning { border-color: #d5a548; background: #fff4d6; color: #75500b; }
.finance-status-badge--neutral { border-color: var(--border-strong); background: var(--surface-section); color: var(--text-muted); }
.finance-status-badge--danger { border-color: #d38888; background: #fbeaea; color: #8b2727; }
.finance-status-badge--info { border-color: #7fa9d6; background: #e8f2fb; color: #245e96; }
.finance-drawer-overlay { position: fixed; z-index: 1290; top: var(--finance-drawer-top, 0); left: var(--finance-drawer-left, 0); width: var(--finance-drawer-width, 100vw); height: var(--finance-drawer-height, 100vh); background: rgb(18 31 48 / 18%); }
.finance-side-drawer { position: fixed; z-index: 1300; top: var(--finance-drawer-top, 0); right: var(--finance-drawer-right, 0); display: flex; width: min(52rem, var(--finance-drawer-max-width, 100vw), calc(100vw - 1rem)); height: var(--finance-drawer-height, 100vh); max-height: var(--finance-drawer-height, 100vh); flex-direction: column; overflow: hidden; border: 1px solid var(--border-strong); background: var(--surface-panel); box-shadow: var(--shadow-soft); }
.finance-side-drawer[hidden], .finance-drawer-overlay[hidden] { display: none; }
.finance-side-drawer__header { display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: .7rem .8rem; border-bottom: 1px solid var(--border-strong); background: var(--surface-section); }
.finance-side-drawer__header h2 { margin: .08rem 0 0; }
.finance-side-drawer__eyebrow { color: var(--text-muted); font-size: var(--type-content); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.finance-side-drawer__close { flex: 0 0 auto; }
.finance-side-drawer__body { min-height: 0; flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; padding: .75rem; }
.finance-side-drawer__body:focus { outline: none; }
.finance-side-drawer__loading { margin: 0; color: var(--text-muted); }
@media (max-width: 760px) { .finance-side-drawer { width: min(100vw, var(--finance-drawer-max-width, 100vw)); } }
.finance-rate-card-drawer--attached { position: fixed; top: var(--finance-drawer-top, 0); right: var(--finance-drawer-right, 0); left: auto; width: min(40rem, var(--finance-drawer-max-width, 100vw), calc(100vw - 1rem)); height: var(--finance-drawer-height, 100vh); max-height: var(--finance-drawer-height, 100vh); margin: 0; overflow: hidden; }
.finance-rate-card-drawer--attached > .modal-card, .finance-rate-card-drawer--attached > form.modal-card { display: flex; height: 100%; max-height: 100%; flex-direction: column; overflow: hidden; }
.finance-rate-card-drawer--attached .modal-body { min-height: 0; flex: 1 1 auto; overflow: auto; padding-top: .85rem; }

/* Per-line provenance expand (feedback C#10) */
.line-exp span { cursor: pointer; }
.prov-detail { background: #f7f9fc; font-size: 12px; }
.prov-kv { color: #6a7a90; margin-left: 10px; }

/* Center modal (feedback E) */
.modal-overlay { position: fixed; inset: 0; background: rgba(13,43,71,0.45); opacity: 0; pointer-events: none; transition: opacity 0.16s; z-index: 300; }
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.center-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-48%) scale(0.98); opacity: 0; visibility: hidden; pointer-events: none; width: 560px; max-width: 94vw; max-height: 88vh; overflow-y: auto; background: #fff; border-radius: 12px; box-shadow: 0 18px 50px rgba(13,43,71,0.32); z-index: 301; padding: 1.1rem 1.3rem; transition: opacity 0.16s, transform 0.16s, visibility 0s linear 0.16s; }
.center-modal.small { width: 440px; }
.center-modal.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%,-50%) scale(1); transition-delay: 0s; }
.center-modal .modal-head { display:flex; justify-content:space-between; align-items:center; font-weight:800; color:var(--text-heading); font-size:1.1rem; border-bottom:2px solid var(--border); padding-bottom:.55rem; margin-bottom:.85rem; }
.center-modal .primary, .ni-actions .primary { background:var(--action); color:var(--text-on-action); border:none; border-radius:6px; padding:8px 18px; font-weight:700; cursor:pointer; }
.center-modal .mini { background:var(--surface-subtle); color:var(--text-heading); border:1px solid var(--border); border-radius:6px; padding:6px 12px; font-size:13px; cursor:pointer; }

.mini-link { color: #2e6da4; cursor: pointer; text-decoration: none; font-size: 13px; }

/* New invoice modal */
.ni-sub { color: #6a7a90; font-size: 13px; }
.ni-label { display: block; font-size: 13px; color: #4a5b70; margin: 0.6rem 0; }
.ni-label select { width: 100%; margin-top: 4px; }
.ni-actions { display: flex; gap: 8px; margin-top: 0.6rem; }

.invoice-list-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.invoice-list-links { margin: .25rem 0 0; color: var(--text-muted, #4a5b70); }
.invoice-create-dialog { width: min(1120px, calc(100vw - 40px)); max-height: min(860px, calc(100vh - 40px)); overflow: auto; padding: 0; }
.invoice-create-dialog .modal-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid #e0e8f0; }
.invoice-create-dialog .modal-head h3 { margin: 0; }
.invoice-create-dialog .modal-body { padding: 1.5rem; }
.invoice-client-row { display: grid; grid-template-columns: 120px minmax(240px, 1fr); align-items: center; gap: .55rem; }
.invoice-date-row, .invoice-text-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: .85rem; }
.invoice-text-row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.invoice-date-row input, .invoice-text-row input { width: 100%; box-sizing: border-box; }
.invoice-filter-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; margin-top: .85rem; }
/* A filter label sits beside its picker, not centered on the picker and its chips. */
.invoice-filter-grid .filter-tags:empty { display: none; }
.invoice-filter-grid .filter-list > .field-label { align-self: start; display: flex; align-items: center; min-height: var(--control-height, 30px); }
.filter-add { display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; align-items: center; }
.filter-tags { display: flex; flex-wrap: wrap; gap: .35rem; min-height: 28px; padding-top: .35rem; }
.filter-tag { border:1px solid var(--border-control); background:var(--surface-info); color:var(--text-heading); border-radius:14px; padding:3px 9px; font-size:12px; line-height:1.3; }
.filter-tag.filter-tag-muted { background: #e5e7eb; border-color: #d1d5db; color: #7a8089; cursor: not-allowed; opacity: 1; }
.invoice-preview-summary { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin: .95rem 0 .45rem; color: #4a5b70; }
.invoice-preview-summary strong { color: #0d2b47; font-size: 1.15rem; }
.invoice-warning { color: #8a5200; font-weight: 700; }
.invoice-preview-table { max-height: 320px; overflow: auto; border: 1px solid #e0e8f0; border-radius: 0; }
.invoice-preview-table table { margin: 0; box-shadow: none; }
.invoice-draft-actions { margin: .75rem 0; }
.invoice-detail-card { max-width: 820px; margin: 0 auto 1.5rem; }
/* Inside its card the Invoice is the card: no second frame or repeated title,
   and each section keeps the gap the other cards have between sections. */
.invoice-detail-dialog .invoice-detail-card { max-width: none; margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent; }
.invoice-detail-dialog .invoice-detail-card > .section-header .card-title { display: none; }
.invoice-card-section { margin: 0 0 1.1rem; }
.invoice-card-section > .section-title { margin-bottom: .6rem; }
.invoice-subtotal-row { display:flex; justify-content:space-between; gap:1rem; padding:.5rem 0; border-top:1px solid var(--border); }
@media (max-width: 900px) {
  .invoice-list-head { align-items: stretch; flex-direction: column; }
  .invoice-client-row, .invoice-date-row, .invoice-text-row, .invoice-filter-grid { grid-template-columns: 1fr; }
}

/* ================= Nav rework + unified audit feed (nav-audit-v1) ================= */
body > nav { min-height: 54px; height: auto; }
body > nav .brand { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
body > nav .brand-mark { width: auto; height: 28px; display: block; }
body > nav .primary-nav { align-items: stretch; align-self: stretch; gap: 0.25rem; }
body > nav .primary-nav > li { display: flex; align-items: stretch; }
body > nav .primary-nav > li > a { display:flex; align-items:center; padding:0 .65rem; border-bottom:3px solid transparent; white-space:nowrap; }
body > nav .primary-nav > li > a.active { color: #fff; font-weight: 800; border-bottom-color: #65c8ff; }
body > nav .nav-group:hover .nav-submenu, body > nav .nav-group:focus-within .nav-submenu { display: grid; }
body > nav .nav-mega { grid-template-columns: minmax(190px, 1fr) minmax(150px, .8fr); min-width: 410px; padding: .6rem; gap: .4rem; }
body > nav .nav-mega section { display: flex; flex-direction: column; }
body > nav .nav-mega section + section { border-left: 1px solid #42627f; padding-left: .4rem; }
body > nav .nav-mega strong { padding: .3rem .65rem; color: #8ed4fa; text-transform: uppercase; font-size: 11px; letter-spacing: .08em; }
body > nav .nav-mega a { padding: .32rem .65rem; }
body > nav .nav-inventory-label { padding: .4rem .65rem .1rem; color: #9fb6ca; font-size: 11px; text-transform: uppercase; }
.audit-intro { color: #6a7a90; margin: -.6rem 0 0; }
.audit-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.audit-controls input[type=search] { width: 280px; padding: 8px 10px; border: 1px solid #cbd5e3; border-radius: 6px; }
.audit-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.audit-chips label, .audit-all { padding: 5px 11px; border: 1px solid #cbd5e3; border-radius: 16px; background: #fff; color: #36506a; cursor: pointer; text-decoration: none; font-weight: 600; }
.audit-chips label:has(input:checked), .audit-all.active { background:var(--action); color:var(--text-on-action); border-color:var(--action); }
.audit-chips input { width: auto; margin-right: 3px; }
.audit-timeline { background: #fff; border: 1px solid #e0e8f0; border-radius: 8px; overflow: hidden; }
.audit-event { display: grid; grid-template-columns: 165px 1fr; gap: 18px; padding: 13px 16px; border-bottom: 1px solid #edf1f5; }
.audit-event:last-child { border-bottom: 0; }
.audit-event time { color: #6a7a90; font-size: 12px; padding-top: 3px; }
.audit-badge { display: inline-block; min-width: 54px; text-align: center; padding: 2px 7px; border-radius: 10px; margin-right: 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; background: #e8edf3; color: #36506a; }
.audit-badge-billing { background: #e7f0ff; color: #205493; }.audit-badge-qbo { background: #e3f5e9; color: #176b38; }
.audit-badge-login { background: #f0eaff; color: #62429b; }.audit-badge-agent { background: #fff0d9; color: #8a5200; }
.audit-meta { margin-top: 3px; color: #7a8aa0; font-size: 12px; }.audit-event details { margin-top: 6px; }
.audit-event details summary { cursor: pointer; color: #2e6da4; font-size: 12px; }.audit-event pre { white-space: pre-wrap; background: #f6f8fa; padding: 8px; border-radius: 5px; }
.audit-empty { padding: 2rem; color: #7a8aa0; text-align: center; }.audit-older { display: block; width: max-content; margin: 1rem auto; }
@media (max-width: 1500px) {
  body > nav { gap:.55rem; padding:0 .7rem; }
  body > nav .primary-nav { gap:.1rem; }
  body > nav .primary-nav > li > a { padding:0 .42rem; }
  body > nav .user-info { gap:.3rem; }
  /* 7rem, not 10rem (2026-08-11): the "Viewing:"/"QBO ACCT" label tracks cost the nav
     ~35px, and `.user-info` is `flex:0 0 auto` next to a `flex:1 1 0%` primary nav — the
     nav is in flexbox's GROW branch, so nothing here shrinks when the bar runs long; it
     just overflows the viewport. Measured in headless Chromium (office login, 37-char
     address): at 10rem the bar first ran off the right edge at ~1412px and the version
     stamp was 47px off-screen on a 1366px laptop. Paying for the labels out of the email
     puts first overflow back below dev's ~1377px and makes 1366 fit. The full address is
     always in the title attribute, and the nav copy is an identity reminder, not a
     control. */
  body > nav .nav-identity-email { max-width:7rem; }
}
@media (max-width: 1050px) {
  body > nav { padding:0 .6rem; gap:.45rem; }
  body > nav .brand { font-size:1em; }
  body > nav .user-info { max-width:175px; }
  body > nav .primary-nav > li > a { padding:0 .45rem; }
  body > nav .nav-mega { left:auto; right:0; }
}
@media (max-width: 700px) { .audit-controls { align-items: stretch; flex-direction: column; }.audit-controls input[type=search] { width: 100%; }.audit-event { grid-template-columns: 1fr; gap: 4px; } }

.profit-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1rem; }
.profit-head h1 { margin: 0; }
body.ui-density .profit-head h2.section-title { margin: 0; border-bottom: 0; padding-bottom: 0; }
.profit-section > .profit-head { border-bottom: 2px solid var(--section-rule); padding-bottom: .4rem; }
.profit-section { margin-bottom: 1.6rem; }
.profit-section > h2.section-title { margin: 0 0 .5rem; }
.profit-period { display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; margin:0; }
.profit-period label { margin:0; }
.profit-period select { min-width:110px; }
.profit-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-bottom: .9rem; }
.profit-metric { background: #fff; border: 1px solid #e0e8f0; border-radius: 8px; padding: .85rem .95rem; }
.profit-metric span { display: block; color: #6a7a90; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.profit-metric strong { display: block; margin-top: .22rem; color: #0d2b47; font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.profit-metric small { display: block; margin-top: .35rem; color: #5f7084; line-height: 1.35; }
.profit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .85rem; margin-bottom: .9rem; }
.profit-panel { min-width: 0; background: #fff; border: 1px solid #e0e8f0; border-radius: 8px; padding: .9rem; }
.profit-panel h2 { margin: 0 0 .65rem; font-size: 1.15rem; }
.profit-panel table { margin: 0; box-shadow: none; }

@media (max-width: 820px) {
  .profit-head { align-items: stretch; flex-direction: column; }
  .profit-summary, .profit-grid { grid-template-columns: 1fr; }
}

@media print {
  body > nav,
  .hub-manage {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #111827;
  }
}

/* Charge-form incompatible-rate notice (orange warning, matches .warn-ico family) */
[data-rate-clear-notice] { display: block; color: #a8500a; }

/* ================= Landing dashboard (public beta) ================= */
.landing-dashboard {
  display: grid;
  gap: 1rem;
  color: var(--brand-navy);
}

.dashboard-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 174px;
  padding: 1.65rem 1.8rem;
  color: #fff;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px;
  background:
    radial-gradient(circle at 82% 18%, var(--brand-blue-glow), transparent 30%),
    linear-gradient(125deg, var(--brand-navy) 0%, var(--brand-blue-deep) 100%);
  box-shadow: 0 14px 34px var(--brand-navy-shadow);
}
.dashboard-hero::after {
  content: "";
  position: absolute;
  right: -75px;
  bottom: -105px;
  width: 280px;
  height: 280px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 50%;
}
.dashboard-brand-lockup { position: relative; z-index: 1; display: flex; align-items: center; gap: 1rem; }
.dashboard-logo-slot {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 220px;
  width: 220px;
  height: 82px;
  padding: 10px 12px;
  border: 1px solid var(--brand-divider);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 18px var(--brand-navy-shadow);
}
.dashboard-logo { position: relative; z-index: 1; display: block; width: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
.dashboard-logo:not([src]) { display: none; }
.dashboard-logo[src] + .dashboard-logo-fallback { display: none; }
.dashboard-logo-fallback { color: var(--brand-navy); font-size: 1.25rem; font-weight: 850; letter-spacing: -.04em; }
.dashboard-eyebrow {
  margin: 0 0 .2rem;
  color: var(--brand-navy-soft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.dashboard-hero .dashboard-eyebrow { color: #fff; }
.dashboard-hero h1 { margin: 0; color: #fff; font-size: clamp(1.8rem, 3vw, 2.45rem); line-height: 1.1; letter-spacing: -.035em; }
body.ui-density .dashboard-hero .page-title { color:#fff; }
.dashboard-welcome { margin: .45rem 0 0; color: #fff; font-size: 14px; }
.dashboard-period {
  position: relative;
  z-index: 1;
  min-width: 235px;
  padding: .9rem 1rem;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  background: var(--brand-navy-glass);
  backdrop-filter: blur(6px);
}
.dashboard-period > span { display: block; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.dashboard-period > strong,
.dashboard-month-controls strong { display: block; margin-top: .15rem; color: #fff; font-size: 1.3rem; line-height: 1.35; }
.dashboard-period small { display: block; margin-top: .25rem; color: #fff; }
.dashboard-month-controls { display: grid; grid-template-columns: 28px 1fr 28px; align-items: center; gap: .35rem; margin-left: -.25rem; }
.dashboard-month-controls strong { margin: 0; text-align: center; white-space: nowrap; }
.dashboard-month-controls a { display: grid; place-items: center; width: 28px; height: 28px; color: #fff; border-radius: 50%; text-decoration: none; font-size: 1.35rem; }
.dashboard-month-controls a:hover { background: rgba(255,255,255,.16); }

.dashboard-kpis { display: grid; grid-template-columns: 1.35fr repeat(4, minmax(0, 1fr)); gap: .75rem; }
.dashboard-kpi {
  position: relative;
  overflow: hidden;
  min-height: 126px;
  padding: 1rem;
  color: var(--brand-navy);
  text-decoration: none;
  border: 1px solid var(--brand-divider-soft);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 15px var(--brand-navy-shadow-soft);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.dashboard-kpi::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--brand-divider); }
.dashboard-kpi:nth-child(2)::before { background: var(--brand-blue); }
.dashboard-kpi:nth-child(3)::before { background: var(--brand-blue-deep); }
.dashboard-kpi:nth-child(4)::before { background: var(--brand-navy); }
.dashboard-kpi:nth-child(5)::before { background: var(--brand-divider); }
.dashboard-kpi:hover { color: var(--brand-navy); transform: translateY(-2px); border-color: var(--brand-divider); box-shadow: 0 10px 24px var(--brand-navy-shadow); }
.dashboard-kpi-primary { color: #fff; border-color: var(--brand-blue-deep); background: linear-gradient(145deg, var(--brand-navy), var(--brand-blue-deep)); }
.dashboard-kpi-primary::before { background: var(--brand-divider); }
.dashboard-kpi-primary:hover { color: #fff; border-color: var(--brand-blue); }
.dashboard-kpi-label { display: block; color: var(--brand-navy-soft); font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.dashboard-kpi-primary .dashboard-kpi-label { color: #fff; }
.dashboard-kpi strong { display: block; margin: .32rem 0 .12rem; color: var(--brand-navy); font-size: clamp(1.55rem, 2.3vw, 2rem); line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.dashboard-kpi-primary strong { color: #fff; }
.dashboard-kpi small { color: var(--brand-navy-soft); font-size: 11px; }
.dashboard-kpi-primary small { color: #fff; }

.dashboard-kpi-group { padding-top: .15rem; }
.dashboard-kpi-group .dashboard-section-heading { margin-bottom: .65rem; }
.dashboard-inventory-kpis { grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr)); }
.dashboard-kpi-inventory-total::before { background: var(--brand-blue-deep); }

.dashboard-floor-ops { padding-top: .1rem; }
.dashboard-floor-heading { margin-bottom: .65rem; }
.dashboard-floor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.dashboard-floor-card { min-width: 0; }
.dashboard-floor-card-heading { display: flex; align-items: start; justify-content: space-between; gap: .75rem; }
.dashboard-floor-title { display: flex; align-items: center; min-width: 0; gap: .65rem; }
.dashboard-floor-title h3 { margin: 0; color: var(--brand-navy); font-size: .98rem; line-height: 1.3; letter-spacing: -.01em; }
.dashboard-floor-glyph { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; color: var(--brand-blue-deep); border: 1px solid var(--brand-divider-soft); border-radius: 8px; background: var(--brand-blue-soft); font-size: 16px; font-weight: 800; }
.dashboard-planned-badge { flex: 0 0 auto; padding: 4px 7px; color: var(--brand-navy-soft); border: 1px solid var(--brand-divider-soft); border-radius: 999px; background: var(--brand-blue-wash); font-size: 9px; font-weight: 750; letter-spacing: .025em; white-space: nowrap; }
.dashboard-floor-caption { margin: .72rem 0 .65rem; color: var(--brand-navy-soft); font-size: 11px; }
.dashboard-skeleton-list { overflow: hidden; border: 1px solid var(--brand-blue-soft); border-radius: 9px; background: var(--brand-blue-wash); }
.dashboard-skeleton-row { display: grid; grid-template-columns: 32px minmax(80px, 1fr) minmax(44px, .34fr); align-items: center; gap: .7rem; min-height: 42px; padding: .65rem .75rem; border-bottom: 1px solid var(--brand-blue-soft); }
.dashboard-skeleton-row:last-child { border-bottom: 0; }
.dashboard-skeleton-row span { display: block; height: 7px; border-radius: 999px; background: var(--brand-divider-soft); }
.dashboard-skeleton-row span:first-child { width: 26px; height: 18px; border-radius: 5px; background: var(--brand-blue-soft); }
.dashboard-skeleton-row span:nth-child(2) { width: min(82%, 230px); }
.dashboard-skeleton-row:nth-child(2) span:nth-child(2) { width: min(66%, 185px); }
.dashboard-skeleton-row:nth-child(3) span:nth-child(2) { width: min(74%, 205px); }
.dashboard-skeleton-row span:last-child { justify-self: end; width: min(100%, 72px); background: var(--brand-blue-soft); }

.dashboard-status-panel,
.dashboard-panel { padding: 1rem 1.1rem; border: 1px solid var(--brand-divider-soft); border-radius: 12px; background: #fff; box-shadow: 0 4px 15px var(--brand-navy-shadow-soft); }
.dashboard-scope-panel { padding: .65rem .85rem; }
.dashboard-scope-form { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .55rem; margin: 0; }
.dashboard-scope-form > strong { color: var(--brand-navy); font-size: 12px; }
.dashboard-scope-form > label { margin: 0; color: var(--brand-navy-soft); font-size: 11px; font-weight: 750; }
.dashboard-scope-form > select { width: auto; min-width: 8.5rem; min-height: 30px; }
.dashboard-scope-form > small { margin-left: auto; color: var(--brand-navy-soft); font-size: 10px; }
.dashboard-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.dashboard-section-heading h2 { margin: 0; color: var(--brand-navy); font-size: 1.14rem; letter-spacing: -.015em; }
.dashboard-section-heading > a { color: var(--brand-blue-deep); font-size: 12px; font-weight: 700; text-decoration: none; }
.dashboard-section-heading > a:hover { color: var(--brand-blue); }
.dashboard-section-note { color: var(--brand-navy-soft); font-size: 11px; }
.dashboard-status-strip { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--brand-divider-soft); border-radius: 10px; overflow: hidden; }
.dashboard-status { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .55rem; min-height: 56px; padding: .7rem .85rem; color: var(--brand-navy-soft); text-decoration: none; border-right: 1px solid var(--brand-divider-soft); background: var(--brand-blue-wash); }
.dashboard-status:last-child { border-right: 0; }
.dashboard-status:hover { color: var(--brand-navy); background: var(--brand-blue-soft); }
.dashboard-status strong { color: var(--brand-navy); font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.dashboard-status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand-divider); box-shadow: 0 0 0 4px var(--brand-blue-ring); }
.dashboard-status-draft .dashboard-status-dot { background: var(--brand-divider); }
.dashboard-status-confirmed .dashboard-status-dot { background: var(--brand-blue-deep); }
.dashboard-status-sent .dashboard-status-dot { background: var(--brand-blue); }
.dashboard-status-paid .dashboard-status-dot { background: var(--brand-navy); }

.dashboard-main-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); gap: 1rem; align-items: start; }
.dashboard-table-wrap { overflow-x: auto; }
.dashboard-client-table { width: 100%; margin: 0; box-shadow: none; table-layout: fixed; }
.dashboard-client-table th { padding: .45rem .55rem; color: var(--brand-navy-soft); border-bottom: 1px solid var(--brand-divider-soft); background: transparent; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.dashboard-client-table th:first-child { width: 34%; }
.dashboard-client-table th:last-child { width: 115px; }
.dashboard-client-table td { padding: .72rem .55rem; border-bottom: 1px solid var(--brand-blue-soft); vertical-align: middle; }
.dashboard-client-table tbody tr:last-child td { border-bottom: 0; }
.dashboard-client-table td:first-child a { display: block; color: var(--brand-navy); text-decoration: none; }
.dashboard-client-table td:first-child a:hover strong { color: var(--brand-blue); }
.dashboard-client-table td:first-child strong { display: block; font-size: 13px; }
.dashboard-client-table td:first-child span { display: block; overflow: hidden; color: var(--brand-navy-soft); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-client-total { display: flex; justify-content: space-between; color: var(--brand-navy); font-variant-numeric: tabular-nums; }
.dashboard-bar-track { height: 6px; margin-top: .35rem; overflow: hidden; border-radius: 999px; background: var(--brand-blue-soft); }
.dashboard-bar-track span { display: block; width: var(--dashboard-bar-width); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-blue-deep), var(--brand-blue)); }
.dashboard-delta { display: inline-block; padding: 3px 7px; border-radius: 999px; font-size: 11px; font-weight: 750; font-variant-numeric: tabular-nums; }
.dashboard-delta-up { color: #287048; background: #e8f5ed; }
.dashboard-delta-down { color: #a04a3c; background: #fbecea; }
.dashboard-delta-flat { color: var(--brand-navy-soft); background: var(--brand-blue-wash); }
.dashboard-delta-new { color: var(--brand-blue-deep); background: var(--brand-blue-soft); }
.dashboard-empty { padding: 1.4rem !important; color: var(--brand-navy-soft); text-align: center; }

.dashboard-link-grid { display: grid; gap: .55rem; }
.dashboard-link-grid > a { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: .65rem; align-items: center; padding: .68rem .72rem; color: var(--brand-navy); text-decoration: none; border: 1px solid var(--brand-divider-soft); border-radius: 9px; background: var(--brand-blue-wash); transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.dashboard-link-grid > a:hover { color: var(--brand-navy); border-color: var(--brand-divider); background: var(--brand-blue-soft); transform: translateX(2px); }
.dashboard-link-grid > a > span { grid-row: 1 / span 2; display: grid; place-items: center; width: 36px; height: 36px; color: var(--brand-blue-deep); border-radius: 9px; background: var(--brand-blue-soft); font-size: 15px; font-weight: 850; }
.dashboard-link-grid strong { align-self: end; font-size: 12px; }
.dashboard-link-grid small { align-self: start; color: var(--brand-navy-soft); font-size: 10px; }

@media (max-width: 1000px) {
  .dashboard-kpis { grid-template-columns: repeat(3, 1fr); }
  .dashboard-inventory-kpis { grid-template-columns: repeat(2, 1fr); }
  .dashboard-kpi-primary { grid-column: span 2; }
  .dashboard-main-grid { grid-template-columns: 1fr; }
  .dashboard-link-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .dashboard-hero { align-items: stretch; flex-direction: column; gap: 1rem; padding: 1.25rem; }
  .dashboard-period { min-width: 0; }
  .dashboard-kpis { grid-template-columns: repeat(2, 1fr); }
  .dashboard-kpi-primary { grid-column: 1 / -1; }
  .dashboard-floor-grid { grid-template-columns: 1fr; }
  .dashboard-floor-card-heading { align-items: stretch; flex-direction: column; }
  .dashboard-planned-badge { align-self: flex-start; }
  .dashboard-status-strip { grid-template-columns: repeat(2, 1fr); }
  .dashboard-status:nth-child(2) { border-right: 0; }
  .dashboard-status:nth-child(-n+2) { border-bottom: 1px solid var(--brand-divider-soft); }
  .dashboard-link-grid { grid-template-columns: 1fr; }
  .dashboard-brand-lockup { align-items: start; flex-direction: column; }
  .dashboard-logo-slot { flex: 0 0 auto; max-width: 100%; }
}
/* Home dashboard: the brand hero, then short panels of label/value lines that link out. */
.home-hero { justify-content:flex-start; min-height:0; padding:1.5rem 1.8rem; gap:1.75rem;
  /* The old hero's ring, drawn in the background so the title tip is never clipped. */
  overflow:visible;
  background:
    radial-gradient(circle at calc(100% + 75px) calc(100% + 105px), transparent 139px, rgba(255,255,255,.11) 140px, transparent 141px),
    radial-gradient(circle at 82% 18%, var(--brand-blue-glow), transparent 30%),
    linear-gradient(125deg, var(--brand-navy) 0%, var(--brand-blue-deep) 100%); }
.home-hero::after { content:none; }
.home-hero-logo { flex:0 0 auto; display:block; width:min(300px, 36vw); height:auto; }
.home-hero-text { min-width:0; padding-left:1.75rem; border-left:1px solid rgba(255,255,255,.22); }
body.ui-density .home-hero .page-title { color:var(--brand-divider); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.home-hero .scaffold-title-help { text-decoration-color:rgba(255,255,255,.45); }
.home-hero-greeting { margin:.3rem 0 .45rem; color:#fff; font-size:clamp(1.5rem, 2.6vw, 2.1rem); font-weight:750; line-height:1.15; letter-spacing:-.025em; }
.home-hero-meta { display:flex; flex-wrap:wrap; gap:.2rem 1.1rem; margin:0; color:var(--brand-divider-soft); font-size:.9rem; }
.home-hero-meta .home-today { color:inherit; font-size:inherit; }
.home-hero-scope { color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35); }
a.home-hero-scope:hover { color:#fff; border-bottom-color:#fff; }
.home-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1.25rem; }
/* Panels share the Manage Workspace card shape and its small illustration. */
.home-panel { padding:1.25rem; border:1px solid var(--border); border-radius:1rem; box-shadow:0 3px 12px #10245208; }
.home-panel .dashboard-section-heading { margin-bottom:.5rem; }
.home-panel-title { display:flex; align-items:center; gap:.75rem; min-width:0; }
body.ui-density .home-panel-title .section-title { margin:0; padding-bottom:0; border-bottom:0; }
.home-panel .dashboard-section-heading > a { white-space:nowrap; }
.home-panel .home-panel-visual { flex:0 0 2.75rem; width:2.75rem; height:2.75rem; border-radius:.6rem; }
.home-panel .home-panel-visual > span { width:1.9rem; height:1.9rem; border-radius:.45rem; }
.home-panel .home-panel-visual .icon { width:1.35rem; height:1.35rem; stroke-width:1.7; }
.illustration-billing { background:linear-gradient(145deg,#e8f5ed,#e3f1fb); color:#287048; }
.home-lines { margin:0; padding:0; list-style:none; }
.home-line > a, .home-line > span { display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.55rem .25rem; color:var(--brand-navy); text-decoration:none; border-bottom:1px solid var(--brand-blue-soft); }
.home-line:last-child > a, .home-line:last-child > span { border-bottom:0; }
.home-line > a:hover { background:var(--brand-blue-wash); }
.home-line > a:hover .home-line-label { color:var(--brand-blue); }
.home-line-label { min-width:0; font-size:.9rem; }
.home-line-label small { display:block; color:var(--brand-navy-soft); font-size:.75rem; }
.home-line strong { flex:0 0 auto; font-size:1.05rem; font-variant-numeric:tabular-nums; }
.home-line-warning strong { color:#a04a3c; }
.home-breakdown a { color:var(--brand-blue-deep); text-decoration:none; }
.home-breakdown a:hover { text-decoration:underline; }
.home-empty { margin:.5rem .25rem; color:var(--brand-navy-soft); }
.home-note { margin:.5rem .25rem 0; color:var(--brand-navy-soft); font-size:.75rem; list-style:none; }
/* The morning brief: one full-width card of short lines that link out. */
/* Doubled class: .workspace-illustration (later in this file) would otherwise win. */
.workspace-illustration.illustration-brief { background:linear-gradient(145deg,#fff7e0,#fdebd8); color:#a86a12; }
.home-brief-actions { display:flex; align-items:center; gap:.5rem; }
.home-brief-refresh .home-brief-busy, .home-brief-refresh.htmx-request .home-brief-idle { display:none; }
.home-brief-refresh.htmx-request .home-brief-busy { display:inline; }
.home-brief-refresh.htmx-request { opacity:.7; cursor:progress; }
.home-brief-line .home-line-label { font-size:.95rem; }
.home-brief-go { flex:0 0 auto; color:var(--brand-blue-deep); }
.home-brief-writing { color:var(--brand-blue-deep); }
.home-brief-more > summary { padding:.45rem .25rem 0; color:var(--brand-blue-deep); font-size:.8rem; font-weight:700; cursor:pointer; }
.home-brief-more[open] > summary { padding-bottom:.2rem; }
.home-brief-more .home-brief-line:first-child > a { border-top:1px solid var(--brand-blue-soft); }
@media (max-width: 900px) { .home-grid { grid-template-columns:1fr; } }
@media (max-width: 700px) {
  .home-hero { align-items:flex-start; flex-direction:column; gap:1rem; padding:1.25rem; }
  .home-hero-logo { width:min(240px, 70vw); }
  .home-hero-text { padding:1rem 0 0; border-left:0; border-top:1px solid rgba(255,255,255,.22); }
}
/* Brand intro after signing in, about 2-2.5 seconds from pressing Sign In: the sign-in
   page fades to this blue while the sign-in is sent (0.3s, signin_fade.js), the Dashboard
   opens on it, the logo fades in (0.1-0.75s) and everything fades into the Dashboard
   (1.05-1.75s). */
.brand-intro { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; pointer-events:none;
  background:
    radial-gradient(circle at 50% 42%, var(--brand-blue-glow), transparent 55%),
    linear-gradient(125deg, var(--brand-navy) 0%, var(--brand-blue-deep) 100%);
  animation:brand-intro-out .7s cubic-bezier(.4,0,.2,1) 1.05s forwards; }
.brand-intro img { width:min(80vw, 560px); height:auto; animation:brand-intro-logo .65s cubic-bezier(.2,.6,.2,1) .1s both; }
@keyframes brand-intro-logo { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:none; } }
@keyframes brand-intro-out { to { opacity:0; visibility:hidden; } }
/* The same blue over the sign-in page as it is sent, and over whatever page follows
   until it fades out (under the intro, which covers it). */
html.signin-leaving::after, html.signin-revealing::after { content:""; position:fixed; inset:0; z-index:999; pointer-events:none;
  background:
    radial-gradient(circle at 50% 42%, var(--brand-blue-glow), transparent 55%),
    linear-gradient(125deg, var(--brand-navy) 0%, var(--brand-blue-deep) 100%); }
html.signin-leaving::after { animation:signin-fade-in .3s cubic-bezier(.4,0,.2,1) forwards; }
html.signin-revealing::after { animation:signin-fade-out .3s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes signin-fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes signin-fade-out { from { opacity:var(--signin-from, 1); } to { opacity:0; } }
/* The Dashboard's cards fade in one after another (opacity only, so nothing moves),
   from the intro's fade-out when it plays. */
.home-dashboard[data-entering] .home-enter { animation:home-card-in .45s ease-out both;
  animation-delay:calc(var(--enter-after, 0s) + var(--enter, 0) * 100ms); }
.home-dashboard.home-after-intro { --enter-after:1.35s; }
@keyframes home-card-in { from { opacity:0; } }
@media (prefers-reduced-motion: reduce) {
  .brand-intro { display:none; }
  .home-dashboard[data-entering] .home-enter { animation:none; }
}
/* ================= Warehouse Genie brand (demo-branding) ================= */
/* The background-free reversed lockup stays crisp directly on the dark app bar. */
body > nav,
body > nav .nav-submenu {
  background: var(--brand-navy);
}
body > nav .brand {
  flex: 0 0 auto;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
}
body > nav .brand:hover { background: transparent; }
body > nav .brand:focus-visible {
  outline: 3px solid var(--brand-divider);
  outline-offset: 3px;
}
body > nav .brand-mark {
  display: block;
  width: auto;
  height: 38px;
}
body > nav .primary-nav > li > a.active { border-bottom-color: var(--brand-blue); }
body > nav .nav-submenu a:hover { background: var(--brand-blue-deep); }
body > nav .nav-group > a { gap:.28rem; }
body > nav .nav-chevron { width:14px; height:14px; transition:transform .15s ease; }
body > nav .nav-group:hover .nav-chevron,
body > nav .nav-group:focus-within .nav-chevron { transform:rotate(180deg); }
body > nav .nav-submenu {
  min-width:270px;
  padding:.45rem;
  gap:.12rem;
  border:1px solid rgba(175, 194, 255, .28);
  border-top:0;
  border-radius:0 0 10px 10px;
  box-shadow:0 14px 30px rgba(7, 20, 61, .28);
}
body > nav .nav-submenu a {
  display:flex;
  align-items:baseline;
  gap:.3rem;
  padding:.42rem .65rem;
  border-radius:6px;
  line-height:1.25;
}
body > nav .nav-item-title { color:var(--text-on-action); font-weight:700; }
body > nav .nav-item-description { color:var(--brand-divider); font-size:11px; font-weight:500; }
body > nav .nav-submenu a:hover .nav-item-description,
body > nav .nav-submenu a:focus .nav-item-description { color:var(--text-on-action); }
body > nav .user-info .nav-logout {
  padding: 4px 10px;
  border-color: var(--brand-divider);
  border-radius: 6px;
  background: var(--brand-blue-soft);
  color: var(--brand-navy);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  transition: background .15s ease, border-color .15s ease;
}
body > nav .user-info .nav-logout:hover {
  border-color: #fff;
  background: #fff;
  color: var(--brand-navy);
}
body > nav .user-info .nav-logout:focus-visible {
  outline: 3px solid var(--brand-divider);
  outline-offset: 2px;
}

.login-page {
  min-height: 100vh;
  padding: 16px 18px;
  background: #f3f6fc;
  color: var(--brand-navy);
}
.login-box {
  width: min(500px, 100%);
  margin: 0 auto;
  padding: 28px 38px 22px;
  border: 1px solid var(--brand-divider);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(7, 20, 61, .12);
}
.login-logo {
  display: block;
  width: 404px;
  max-width: 100%;
  max-height: none;
  height: auto;
  margin: 0 auto 18px;
}
.login-box .login-title {
  margin: 0 0 22px;
  color: var(--brand-navy);
  font-size: 1.25rem;
  font-weight: 650;
  text-align: center;
}
.login-box .flash { margin-bottom: 18px; }
.login-box form { margin: 0; }
.login-box label {
  margin-bottom: 15px;
  color: #263652;
  font-size: 13px;
  font-weight: 650;
}
.login-box input {
  min-height: 44px;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid #b9c4d6;
  border-radius: 7px;
  background: #fff;
  color: #17243a;
  font: inherit;
}
.login-box input:hover { border-color: #8798b1; }
.login-box input:focus {
  border-color: var(--brand-blue);
  outline: 3px solid rgba(20, 87, 238, .16);
}
.login-box form button[type="submit"] {
  min-height: 44px;
  margin-top: 7px;
  padding: 10px 18px;
  border-radius: 7px;
  background: var(--brand-blue);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
}
.login-box form button[type="submit"]:hover { background: var(--brand-blue-deep); }
.login-box form button[type="submit"]:focus-visible {
  outline: 3px solid rgba(20, 87, 238, .28);
  outline-offset: 2px;
}
.login-footer {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--brand-divider);
  color: #7b879a;
  font-size: 12px;
  letter-spacing: .015em;
  text-align: center;
}

@media (max-width: 480px) {
  .login-page { padding: 18px 12px; }
  .login-box { padding: 28px 24px 22px; }
  body > nav .brand-mark { height: 36px; }
}

.chat-workspace {
  width: min(1400px, calc(100vw - 2rem));
  /* page.html measures where the workspace starts: the menu wraps to two or three rows on
     narrow screens, and a fixed allowance pushed the message box below the fold. */
  height: calc(100dvh - var(--chat-workspace-top, 96px));
  margin: -1.1rem 0 0 calc((100% - min(1400px, calc(100vw - 2rem))) / 2);
  position: relative;
}
.chat-workspace .ai-fullpage {
  width: 100%;
  max-width: none;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
}

@media (max-width: 900px) {
  .chat-workspace { width: calc(100vw - 1rem); }
}
@media (max-width: 520px) {
  .chat-workspace .ai-fullpage { padding-right: 0; }
}

/* Foundation mobile app-shell boundary (last so legacy nav rules cannot win). */
@media (max-width: 700px) {
  body > nav .brand-mark { width:88px; max-width:88px; height:auto; }
  body > nav .primary-nav > li > a { padding:0 .45rem; }
}

/* ===== Company screens (fan-out) ===== */
.warehouse-bins {
  display:grid;
  grid-template-rows:auto auto minmax(0, 1fr) auto;
  height:min(44vh, 420px);
  min-height:280px;
  gap:8px;
}
.warehouse-bins-heading {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
}
.warehouse-bins-toolbar form {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}
.warehouse-bins-toolbar .scaffold-search { flex:1 1 240px; }
.warehouse-bins-toolbar .scaffold-search input { width:100%; }
.warehouse-bins-table { min-height:0; max-height:none; overflow:auto; }
.warehouse-bins > .scaffold-pagination { position:sticky; bottom:0; z-index:2; margin:0; padding-top:8px; border-top:1px solid var(--border); background:var(--surface-panel); }
/* Editing bins on the Warehouse card (warehouses/_bins_editor.html, _bin_rows.html). */
.warehouse-bins-remove-hint { margin:0 0 8px; }
/* Editable rows are taller: the list grows with the card and scrolls itself. */
.warehouse-bins.warehouse-bins-editing { display:flex; flex-direction:column; height:auto; min-height:0; }
.warehouse-bins-editing .warehouse-bins-table { max-height:min(60vh, 520px); }
.warehouse-bins-editor { display:grid; gap:10px; margin-bottom:12px; }
.warehouse-bins-tools { display:flex; flex-wrap:wrap; gap:8px; }
.warehouse-bins-tools [aria-expanded="true"] { border-color:var(--brand-navy-soft); }
.warehouse-bins-panel { display:grid; justify-items:start; gap:10px; padding:12px; border:1px solid var(--border); border-radius:8px; background:var(--surface-app); }
.warehouse-bins-panel[hidden] { display:none; }
.warehouse-bins-panel .field-hint { margin:0; }
.warehouse-bins-segments, .warehouse-bins-shared, .warehouse-bins-import-row { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; }
.warehouse-bins-segment { display:flex; gap:6px; margin:0; padding:4px 8px 8px; border:1px solid var(--border); border-radius:6px; }
.warehouse-bins-segment legend { padding:0 4px; color:var(--text-muted); font-size:12px; font-weight:700; }
.warehouse-bins-panel label > span { display:block; color:var(--text-muted); font-size:12px; font-weight:600; }
.warehouse-bins-segment input, .warehouse-bins-separator input { width:4.5rem; }
.warehouse-bins-shared input[type="text"] { width:10rem; }
.warehouse-bins-flags { display:flex; flex-wrap:wrap; gap:4px 12px; padding-bottom:6px; }
.warehouse-bins-check { display:inline-flex; align-items:center; gap:4px; font-size:13px; }
.warehouse-bins-panel .field-hint, .warehouse-bins-segments, .warehouse-bins-shared, .warehouse-bins-import-row, .warehouse-bins-preview { justify-self:stretch; }
/* Codes are saved in capitals; show them that way while typing. */
[data-bin-field="code"] { text-transform:uppercase; }
.warehouse-bins-preview:empty { display:none; }
.warehouse-bins-preview { display:grid; gap:6px; justify-items:start; }
.warehouse-bins-preview p { margin:0; }
.warehouse-bins-import-counts { display:flex; flex-wrap:wrap; gap:8px; margin:0; }
.warehouse-bins-count { min-width:6.5rem; padding:4px 10px; border:1px solid var(--border); border-radius:6px; background:var(--surface-panel); }
.warehouse-bins-count dt { color:var(--text-muted); font-size:12px; }
.warehouse-bins-count dd { margin:0; font-size:18px; font-weight:700; }
.warehouse-bins-count-error dd { color:var(--danger); }
.warehouse-bins-import-rows { max-height:240px; width:100%; }
.warehouse-bins-new[hidden], .warehouse-bins-staged[hidden] { display:none; }
.warehouse-bins-caption { padding:0 0 4px; caption-side:top; text-align:left; color:var(--text-muted); font-size:12px; font-weight:700; }
.warehouse-bins-staged { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.warehouse-bins-staged-item { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 10px; border:1px solid var(--border); border-radius:6px; background:var(--surface-app); }
.warehouse-bins-staged-item small { color:var(--text-subtle); }
.warehouse-bins-grid td { padding-top:3px; padding-bottom:3px; vertical-align:top; }
.warehouse-bins-grid input[type="text"] { width:100%; min-width:6.5rem; }
.warehouse-bins-grid td:first-child input[type="text"] { min-width:8rem; }
.warehouse-bins-grid .warehouse-bin-flag { width:1%; text-align:center; }
.warehouse-bins-grid th.warehouse-bin-flag { font-size:12px; }
.warehouse-bin-actions { width:1%; }
.warehouse-bin-note { display:block; color:var(--danger); font-size:12px; }
.warehouse-bin-note[hidden] { display:none; }
.warehouse-bin-removed input[type="text"] { text-decoration:line-through; color:var(--text-subtle); }
.warehouse-bin-removed .warehouse-bin-actions .btn[aria-pressed="true"] { border-color:var(--danger-border); }
.warehouse-bin-deactivating .warehouse-bin-note { color:var(--text-muted); }

.access-denied-page {
  min-height:100vh;
  margin:0;
  display:grid;
  place-items:center;
  background:var(--surface-app);
  color:var(--text);
}
.access-denied-shell {
  width:min(560px, calc(100% - 32px));
  padding:24px 0;
}
.access-denied-card {
  display:grid;
  justify-items:start;
  gap:16px;
  padding:clamp(24px, 6vw, 48px);
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface-panel);
  box-shadow:var(--shadow-soft);
}
.access-denied-card h1 {
  margin:0;
  color:var(--text-heading);
  font-size:clamp(1.6rem, 5vw, 2.4rem);
}
.access-denied-card .flash { margin:0; }
.access-denied-explain { margin:0; font-size:13px; }

@media (max-width: 700px) {
  .warehouse-bins-heading { align-items:flex-start; flex-direction:column; }
  .warehouse-bins-toolbar form { align-items:stretch; flex-direction:column; }
  /* In a column the 240px basis would be a height. */
  .warehouse-bins-toolbar .scaffold-search { flex:0 0 auto; }
  .warehouse-bins-toolbar .btn { width:100%; }
  .warehouse-bins { height:min(52vh, 360px); min-height:260px; }
  .warehouse-bins-tools .btn { flex:1 1 auto; }
  .warehouse-bins-segment { flex:1 1 40%; }
  .warehouse-bins-segment input { width:100%; }
  .warehouse-bins-shared label { flex:1 1 40%; }
  .warehouse-bins-shared input[type="text"] { width:100%; }
}

/* ===== Inventory screens (fan-out) ===== */
.inventory-page-intro {
  margin: .35rem 0 0;
  color: var(--text-muted);
}
.inventory-grain-switch {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.inventory-grain-switch .btn {
  min-width: 76px;
  justify-content: center;
}
.inventory-temporal-switch {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .4rem;
}
.inventory-temporal-switch .btn {
  justify-content: center;
  white-space: nowrap;
}
.inventory-grain-note {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .8rem;
  padding: .65rem .8rem;
  border: 1px solid var(--info-border);
  border-radius: .55rem;
  background: var(--surface-info);
  color: var(--text-muted);
}
.inventory-grain-note .icon {
  flex: 0 0 auto;
}
.inventory-report-page {
  display: grid;
  gap: 1rem;
}
.inventory-report-page .section-header,
.inventory-report-page .stat-card-grid,
.inventory-report-page .scaffold-toolbar,
.inventory-report-page .flash {
  margin-bottom: 0;
}
.inventory-report-toolbar form {
  display: flex;
  flex: 1 1 720px;
  align-items: end;
  flex-wrap: wrap;
  gap: .65rem;
}
.inventory-report-toolbar select,
.inventory-report-toolbar input[type="date"],
.inventory-report-toolbar input[type="number"] {
  min-height: 40px;
}
.scaffold-number-filter {
  display:flex;
  align-items:center;
  gap:.35rem;
  margin:0;
  color:var(--text-muted);
  font-size:12px;
  font-weight:650;
}
.inventory-report-toolbar .scaffold-number-filter input {
  width:90px;
}
.scaffold-check-control {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .7rem;
  border: 1px solid var(--border-control);
  border-radius: .45rem;
  background: var(--surface-panel);
  color: var(--text);
  cursor: pointer;
}
.scaffold-toolbar .scaffold-check-control input[type="checkbox"] {
  width: 1rem;
  min-height: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  margin: 0;
}
.inventory-age-presets {
  flex:1 0 100%;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.4rem;
  min-width:0;
  margin:0;
  padding:0;
  border:0;
}
.inventory-age-presets legend {
  float:left;
  margin-right:.25rem;
  color:var(--text-muted);
  font-size:12px;
  font-weight:700;
}
.inventory-age-presets .btn {
  min-height:36px;
  padding:6px 10px;
}
.inventory-rollup-section,
.inventory-lot-summary {
  border: 1px solid var(--border);
  border-radius: .7rem;
  background: var(--surface-panel);
  box-shadow: var(--shadow-soft);
}
.inventory-rollup-section {
  overflow: hidden;
}
/* Kit build: the parts list against the parts used, below the parts. */
.kit-build-parts-check {
  margin-top: 1.25rem;
}
/* Lot Trace: the kit builds a lot went into or came out of. */
.inventory-kit-genealogy {
  display: grid;
  gap: .6rem;
  margin-top: 1.2rem;
}
.inventory-kit-genealogy .section-title {
  margin: .4rem 0 0;
}
.inventory-section-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem .8rem;
  border-bottom: 1px solid var(--border);
}
.inventory-section-heading h2 {
  margin: 0;
  color: var(--text-heading);
  font-size: 1.05rem;
}
.inventory-section-heading p {
  margin: .25rem 0 0;
  color: var(--text-muted);
}
.inventory-rollup-section .scaffold-table-scroll {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.inventory-detail-stack {
  display: grid;
  gap: 1rem;
}
.inventory-report-empty {
  min-height: 190px;
  border: 1px solid var(--border);
  border-radius: .7rem;
  background: var(--surface-panel);
}
.inventory-lot-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0;
  overflow: hidden;
}
.inventory-lot-summary > div {
  min-width: 0;
  padding: 1rem 1.1rem;
}
.inventory-lot-summary > div + div {
  border-left: 1px solid var(--border);
}
.inventory-lot-summary span {
  display: block;
  margin-bottom: .3rem;
  color: var(--text-subtle);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.inventory-lot-summary strong {
  color: var(--text-heading);
  overflow-wrap: anywhere;
}
.inventory-entry-card {
  width: min(920px, calc(100vw - 2rem));
}
.inventory-entry-card-body {
  display: grid;
  gap: 1rem;
}
.inventory-entry-card-section {
  border: 1px solid var(--border);
  border-radius: .6rem;
  background: var(--surface-section);
  overflow: hidden;
}
.inventory-entry-card-section h3 {
  margin: 0;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-subtle);
  color: var(--text-heading);
  font-size: .95rem;
}
.inventory-entry-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}
.inventory-entry-facts > div {
  min-width: 0;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
}
.inventory-entry-facts > div:nth-child(odd) {
  border-right: 1px solid var(--border);
}
.inventory-entry-facts dt {
  color: var(--text-subtle);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.inventory-entry-facts dd {
  margin: .2rem 0 0;
  color: var(--text);
  overflow-wrap: anywhere;
}
.inventory-entry-facts dd small {
  color: var(--text-subtle);
}
.inventory-entry-facts a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: .3rem;
  margin-block: -.45rem;
  padding-block: .45rem;
}

@media (max-width: 780px) {
  .inventory-report-page .section-header {
    align-items: start;
  }
  .inventory-grain-switch {
    width: 100%;
  }
  .inventory-grain-switch .btn,
  .inventory-temporal-switch .btn {
    flex: 1 1 0;
  }
  .inventory-temporal-switch {
    width: 100%;
  }
  .inventory-report-toolbar form,
  .inventory-report-toolbar select,
  .inventory-report-toolbar .scaffold-date-filter,
  .inventory-report-toolbar .inventory-lot-select {
    width: 100%;
  }
  .inventory-report-toolbar .scaffold-date-filter input,
  .inventory-report-toolbar .inventory-lot-select select {
    width: 100%;
  }
  .inventory-lot-summary,
  .inventory-entry-facts {
    grid-template-columns: 1fr;
  }
  .inventory-lot-summary > div + div {
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  .inventory-entry-facts > div:nth-child(odd) {
    border-right: 0;
  }
}

/* ===== Finance screens (fan-out) ===== */
.landing-dashboard > .dashboard-kpis {
  grid-template-columns: 1.25fr repeat(5, minmax(0, 1fr));
}
.dashboard-kpi-delta {
  display: block;
  line-height: 1.35;
}
.dashboard-flow-health {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
}
.dashboard-flow-health h2 {
  margin: 0;
  color: var(--text-heading);
  font-size: 1.14rem;
}
.dashboard-flow-health p:not(.dashboard-eyebrow) {
  max-width: 62ch;
  margin: .35rem 0 0;
  color: var(--text-muted);
  font-size: 12px;
}
.dashboard-flow-health > a {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: .45rem .8rem;
  min-width: min(100%, 330px);
  padding: .72rem .85rem;
  color: var(--text-heading);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-subtle);
}
.dashboard-flow-health > a:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}
.dashboard-flow-health > a span {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  font-size: 11px;
}
.dashboard-flow-health > a strong {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}
.dashboard-flow-health > a small {
  grid-column: 1 / -1;
  color: var(--text-muted);
}
.finance-truncate {
  display: block;
  max-width: 32ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#invoice-list-region .scaffold-table {
  min-width: 1120px;
}
#invoice-list-region .badge + small {
  display: block;
  margin-top: .2rem;
  color: var(--text-subtle);
}
@media (max-width: 1180px) {
  .landing-dashboard > .dashboard-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .landing-dashboard > .dashboard-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .landing-dashboard > .dashboard-kpis .dashboard-kpi-primary {
    grid-column: 1 / -1;
  }
  .dashboard-flow-health {
    grid-template-columns: 1fr;
  }
  .dashboard-flow-health > a {
    min-width: 0;
  }
}

/* ===== Receipt header form (fan-out) ===== */
.receipt-header-form {
  display: grid;
  gap: 1rem;
}
.receipt-form-section {
  padding: 0;
  border: 0;
  background: transparent;
}

.receipt-form-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .9rem;
}
.receipt-form-section-heading h3 {
  margin: 0;
  color: var(--text-heading);
  font-size: 1rem;
}
.receipt-form-section-heading > p,
.receipt-form-section-help {
  margin: .2rem 0 0;
  color: var(--text-muted);
  font-size: 12px;
}
.receipt-form-section-heading > p {
  flex: 0 0 auto;
}
.receipt-required {
  color: var(--danger);
  font-weight: 800;
}
.receipt-form-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: .8rem 1rem;
  align-items: end;
}
.receipt-form-field {
  min-width: 0;
}
.receipt-form-field > .field-grid-control {
  min-width: 0;
  max-width: 100%;
}
.receipt-form-field :where(input, select, textarea) {
  min-width: 0;
  max-width: 100%;
}
.receipt-form-field-invalid :where(input, select, textarea) {
  border-color: var(--danger);
}
.receipt-field-error {
  display: block;
  margin-top: .25rem;
  color: var(--danger);
  font-size: 12px;
}
.receipt-form-field > label {
  color: var(--text-heading);
  font-size: 13px;
}
.receipt-form-field-notes {
  /* Whitespace only — the owner nixed the rule line above Notes. */
  margin-top: 1rem;
}
.receipt-field-span-2 {
  grid-column: span 2;
}
.receipt-field-span-3 {
  grid-column: span 3;
}
.receipt-field-span-4 {
  grid-column: span 4;
}
.receipt-field-span-5 {
  grid-column: span 5;
}
.receipt-field-span-6 {
  grid-column: span 6;
}
.receipt-field-span-8 {
  grid-column: span 8;
}
.receipt-field-span-9 {
  grid-column: span 9;
}
/* Static (read-only) header cells: same cell, same span, no control. */
.receipt-static-value {
  display: block;
  min-height: 1.25rem;
  color: var(--text);
  overflow-wrap: anywhere;
}
.receipt-header-compact .receipt-form-grid {
  gap: .45rem .75rem;
}
.receipt-header-compact .receipt-form-section + .receipt-form-section {
  margin-top: .65rem;
}
.receipt-input-entity {
  width: 100%;
  max-width: 100%;
}
.receipt-input-date {
  width: 11rem;
  max-width: 100%;
}
.receipt-input-code {
  width: 14rem;
  max-width: 100%;
}
.receipt-input-reference,
.receipt-input-name {
  width: 32rem;
  max-width: 100%;
}
.receipt-input-notes {
  width: 48rem;
  max-width: 100%;
  min-height: 5rem;
  resize: vertical;
}
.receipt-form-advanced {
  margin: 0;
}
.receipt-form-advanced > .entity-subsection-title {
  min-height: 40px;
}
.receipt-form-advanced-content {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}
.receipt-form-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.receipt-form-fieldset + .receipt-form-fieldset {
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.receipt-form-fieldset legend {
  margin-bottom: .65rem;
  color: var(--text-heading);
  font-size: 13px;
  font-weight: 750;
}
.receipt-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
@media (max-width: 760px) {
  .receipt-form-grid > .receipt-form-field {
    grid-column: 1 / -1;
  }
  .receipt-form-section-heading {
    align-items: start;
  }
}
@media (max-width: 520px) {
  .receipt-document-section,
  .ops-document-section {
    padding: 1rem;
  }
  .receipt-form-section-heading {
    display: block;
  }
  .receipt-form-section-heading > p {
    margin-top: .45rem;
  }
  .receipt-input-entity,
  .receipt-input-reference,
  .receipt-input-name,
  .receipt-input-notes {
    width: 100%;
  }
}
/* ===== KPI picker (fan-out) ===== */
.kpi-picker-row { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:start; gap:.5rem; }
.kpi-picker-row > .stat-card-grid { min-width:0; }
.kpi-picker-row > .dashboard-kpis {
  min-width:0;
  margin:0;
  grid-template-columns:repeat(auto-fit, minmax(175px, 1fr));
}
.dashboard-primary-kpi-row > .dashboard-kpis[data-kpi-count="6"] {
  grid-template-columns:1.25fr repeat(5, minmax(0, 1fr));
}
.dashboard-inventory-kpi-row > .dashboard-kpis[data-kpi-count="4"] {
  grid-template-columns:1.35fr repeat(3, minmax(0, 1fr));
}
.kpi-picker-open { flex:none; }
.kpi-picker-dialog { width:min(620px, calc(100vw - 32px)); }
.kpi-picker-intro { margin:0 0 1rem; color:var(--text-muted); }
.kpi-picker-options { display:grid; gap:.55rem; margin:0; padding:0; border:0; }
.kpi-picker-options legend { margin-bottom:.55rem; color:var(--text-heading); font-weight:750; }
.kpi-picker-option { display:grid; grid-template-columns:24px minmax(0, 1fr); align-items:start; gap:.65rem; min-height:48px; padding:.7rem .8rem; border:1px solid var(--border-control); border-radius:10px; background:var(--surface-panel); cursor:pointer; }
.kpi-picker-option:hover { background:var(--surface-hover); }
.kpi-picker-option:has(input:checked) { border-color:var(--info-border); background:var(--surface-info); }
.kpi-picker-option input { width:20px; height:20px; margin:.1rem 0 0; accent-color:var(--action); }
.kpi-picker-option span { display:grid; gap:.1rem; }
.kpi-picker-option strong { color:var(--text-heading); }
.kpi-picker-option small { color:var(--text-muted); }
@media (max-width:1180px) {
  .dashboard-primary-kpi-row > .dashboard-kpis[data-kpi-count="6"] {
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}
@media (max-width:1000px) {
  .dashboard-inventory-kpi-row > .dashboard-kpis[data-kpi-count="4"] {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width:700px) {
  .dashboard-primary-kpi-row > .dashboard-kpis[data-kpi-count="6"] {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .dashboard-inventory-kpi-row > .dashboard-kpis[data-kpi-count="4"] {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .dashboard-primary-kpi-row > .dashboard-kpis .dashboard-kpi-primary { grid-column:1 / -1; }
}
/* ===== Rates cadence resolution trace (fan-out) ===== */
.cadence-trace {
  display:grid;
  gap:.7rem;
  margin:1rem 0;
  padding:0;
  list-style:none;
}
.cadence-trace > li {
  border:1px solid var(--border);
  border-radius:.6rem;
  background:var(--surface-section);
}
.cadence-trace > li.cadence-trace-selected {
  border-color:var(--info-border);
  background:var(--surface-info);
}
.cadence-trace-step {
  padding:.75rem .85rem;
}
.cadence-trace-step summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  cursor:pointer;
}
.cadence-trace-step summary > span:first-child {
  display:grid;
  gap:.2rem;
}
.cadence-trace-data {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:.55rem;
  margin:.8rem 0;
}
.cadence-trace-data > div {
  min-width:0;
  padding:.55rem .65rem;
  border:1px solid var(--border);
  border-radius:.45rem;
  background:var(--surface-panel);
}
.cadence-trace-data dt {
  color:var(--text-muted);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.cadence-trace-data dd {
  margin:.15rem 0 0;
  overflow-wrap:anywhere;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}

/* ===== Operational document attachments (fan-out) ===== */
.document-attachment-section:not(.receipt-document-section):not(.ops-document-section):not(.outman-section) {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.document-attachment-header {
  align-items: start;
}
.document-attachment-header h2,
.document-attachment-header h3 {
  margin-bottom: 0;
}
.document-attachment-header .read-only-note {
  margin: .25rem 0 0;
}
.document-attachment-table-scroll {
  overflow-x: auto;
}
.document-attachment-table {
  width: 100%;
}
.document-attachment-table th,
.document-attachment-table td {
  vertical-align: middle;
}
.document-attachment-table form {
  margin: 0;
}
.scaffold-empty-state.document-attachment-empty {
  min-height: 0;
  margin: .5rem 0;
  padding: .65rem;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  text-align: left;
}
.scaffold-empty-state.document-attachment-empty > .icon {
  width: 20px;
  height: 20px;
}
.invoice-technical-history { margin: .75rem 0; }
.invoice-technical-history > summary { cursor:pointer; color:var(--text-muted); }
.invoice-technical-history .field-value { overflow-wrap:anywhere; }
.document-attachment-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.document-attachment-upload label {
  margin: 0;
  color: var(--text-heading);
  font-weight: 700;
}
.document-attachment-upload input[type="file"] {
  min-height: 40px;
  max-width: 100%;
}
@media (max-width: 620px) {
  .document-attachment-upload {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ===== Unified export menu (fan-out) ===== */
.export-menu {
  position: relative;
  flex: none;
}
.export-menu > summary {
  min-height: 40px;
  list-style: none;
}
.export-menu > summary::-webkit-details-marker {
  display: none;
}
.export-menu-chevron {
  width: 14px;
  height: 14px;
  transition: transform .15s ease;
}
.export-menu[open] .export-menu-chevron {
  transform: rotate(180deg);
}
.export-menu-options {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  min-width: 210px;
  padding: 5px;
  border: 1px solid var(--border-control);
  border-radius: 9px;
  background: var(--surface-panel);
  box-shadow: var(--shadow-dialog);
}
.export-menu-options a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}
.export-menu-options a:hover {
  background: var(--surface-hover);
  color: var(--text-heading);
}
.export-menu-options a:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

/* ===== Site-wide density / typography primitives (2026-07-25) =====
   .content-text  — one compact application content size.
   .page-title    — top-level page title.
   .card-title    — card/dialog title, below page titles but well above content.
   .section-title — section heading with strong dark separator chrome.
   .field-grid    — label / entry / label / entry, with fixed label columns.
   .field-grid-item and .field-grid-control adapt wrapped field macros to the
   same four-column geometry without changing form names or submitted values. */
body.ui-density.content-text {
  font-size: var(--type-content);
  line-height: var(--line-content);
}

body.ui-density main {
  max-width: 1440px;
  margin: .85rem auto;
  padding: 0 1rem;
}
body.ui-density.has-ai-launch main:not(:has([data-viewport-list])) { padding-bottom:84px; }

body.ui-density :where(p, ul, ol, dl) {
  margin-top: .35rem;
  margin-bottom: .35rem;
}

body.ui-density .page-title {
  margin: 0;
  color: var(--text-heading);
  font-size: var(--type-page);
  font-weight: 780;
  line-height: 1.12;
  letter-spacing: -.02em;
}

body.ui-density .card-title {
  margin: 0;
  color: var(--text-heading);
  font-size: var(--type-card);
  font-weight: 760;
  line-height: 1.15;
  letter-spacing: -.015em;
}

body.ui-density .section-title,
body.ui-density .entity-subsection-title {
  margin: 0 0 .45rem;
  padding: 0 0 .2rem;
  border-bottom: 2px solid var(--section-rule);
  color: var(--text-heading);
  font-size: var(--type-section);
  font-weight: 760;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}

body.ui-density .section-header {
  gap: .65rem;
  margin-bottom: var(--space-section);
}

body.ui-density .section-header > :where(.page-title, .section-title, .card-title),
body.ui-density .section-header > div:has(> :where(.page-title, .section-title, .card-title)) {
  min-width: 0;
  flex: 1 1 auto;
}

body.ui-density .section-divider {
  margin: .75rem 0;
  border-top-color: var(--section-rule);
}

body.ui-density > nav {
  height: 40px;
  gap: .7rem;
  padding: 0 .75rem;
}

body.ui-density > nav ul {
  gap: .4rem;
}

body.ui-density > nav .nav-submenu {
  padding: .15rem 0;
}

body.ui-density > nav .nav-submenu a {
  padding: .28rem .7rem;
}

body.ui-density input,
body.ui-density select,
body.ui-density textarea {
  min-height: var(--control-height);
  padding: 3px 6px;
  border: 1px solid var(--border-control);
  border-radius: 2px;
  background: var(--surface-panel);
  color: var(--text);
  font: inherit;
  font-size: var(--type-content);
  line-height: 1.2;
}

body.ui-density textarea {
  min-height: calc(var(--control-height) * 1.8);
}

body.ui-density input[type=checkbox],
body.ui-density input[type=radio] {
  width: 15px;
  min-height: 15px;
  height: 15px;
  padding: 0;
}

body.ui-density :where(button, .btn) {
  min-height: var(--control-height);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: var(--type-content);
  line-height: 1.15;
}

body.ui-density form button[type]:not(.btn-icon):not(.btn-link),
body.ui-density form .btn:not(.btn-icon):not(.btn-link) {
  min-height: var(--control-height);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: var(--type-content);
  line-height: 1.15;
}

body.ui-density :where(.btn-icon, button.btn-icon) {
  width: var(--control-height);
  height: var(--control-height);
  padding: 0;
  border-radius: 4px;
}

body.ui-density .back-link {
  min-height: var(--control-height);
  margin-bottom: .45rem;
}

body.ui-density :where(.page-actions, .form-actions, .modal-actions) {
  gap: .35rem;
}

body.ui-density .form-actions {
  margin-top: .55rem;
}

body.ui-density :where(.detail-card, .card) {
  padding: .7rem .8rem;
  border-radius: 5px;
}

body.ui-density .detail-card > .card-title {
  margin-bottom: .55rem;
  padding-bottom: .25rem;
  border-bottom: 2px solid var(--section-rule);
}

body.ui-density .card > .card-title,
body.ui-density .detail-card > :where(.qbo-card-heading, .section-header) .card-title {
  margin-bottom: .5rem;
  padding-bottom: .25rem;
  border-bottom: 2px solid var(--section-rule);
}

body.ui-density .flash {
  padding: 6px 9px;
  margin: .45rem auto;
  border-radius: 4px;
}

body.ui-density .modal-dialog {
  width: min(1120px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  border-radius: 6px;
}

body.ui-density .modal-card {
  border-radius: 0 0 5px 5px;
}

body.ui-density .modal-head {
  gap: .6rem;
  padding: .5rem .7rem;
  border-bottom: 2px solid var(--section-rule);
}

body.ui-density .modal-body {
  padding: .65rem .75rem;
}

body.ui-density .modal-footer {
  gap: .6rem;
  padding: .45rem .7rem;
  border-top-color: var(--section-rule);
}

body.ui-density :where(.entity-subsection, .scaffold-card-section) {
  margin-bottom: .6rem;
}

body.ui-density .scaffold-card-section {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.ui-density .scaffold-card-section + .scaffold-card-section,
body.ui-density .entity-subsection + .scaffold-card-section,
body.ui-density .scaffold-card-section + .entity-subsection {
  margin-top: 0;
}

body.ui-density .scaffold-card-section-title {
  margin: 0;
  border-bottom: 2px solid var(--section-rule);
  padding: .2rem 0 .25rem;
}

body.ui-density .scaffold-card-section .field-grid {
  margin-top: 0;
}

body.ui-density .scaffold-card-section-content { padding-top: .5rem; }
/* Natural-key cards put the grid straight under the title; match the gap
   .scaffold-card-section-content gives the other cards. */
body.ui-density .scaffold-card-section > .scaffold-card-section-title + :is(.field-grid, .field-hint, .scaffold-card-section-extra) {
  margin-top: .5rem;
}
body.ui-density .scaffold-card-section-children {
  margin-top: .55rem;
  padding-left: .75rem;
}

body.ui-density .field-grid {
  display: grid;
  grid-template-columns:
    var(--field-label-width) minmax(0, 1fr)
    var(--field-label-width) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-row) var(--space-field);
  min-width: 0;
  margin: 0;
}

/* A controlling field heads a panel of what depends on it. Two reserved rows
   keep the card from changing size as those fields come and go. */
body.ui-density .scaffold-card-section-children.rate-panel-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-row) var(--space-field);
  padding-left: 0;
}
.rate-panel {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
}
body.ui-density .rate-panel .field-grid {
  grid-template-columns: var(--field-label-width) minmax(0, 1fr);
  padding: .45rem .6rem;
}
body.ui-density .rate-panel .rate-panel-head {
  border-bottom: 1px solid var(--border);
  border-radius: 8px 8px 0 0;
  background: var(--surface-subtle);
}
body.ui-density .rate-panel .rate-panel-body {
  grid-template-rows: repeat(2, minmax(30px, auto));
  align-content: start;
}
.rate-panel-note {
  grid-column: 1 / -1;
  margin: 0;
  align-self: center;
  color: var(--text-muted);
}
.rate-panel-note[hidden] { display: none; }
.rate-read-back {
  margin: 0 0 .65rem;
  padding: .5rem .75rem;
  min-height: 2.4em;
  border-left: 4px solid var(--section-rule);
  background: var(--surface-subtle);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.35;
}
.rate-quantity-fixed[hidden] { display: none; }
.rate-history { width: 100%; margin-top: .5rem; }
.rate-history th { background: var(--surface-subtle); text-align: left; }
.rate-history :is(th, td) { padding: .3rem .6rem; border-bottom: 1px solid var(--border); }
.rate-history .num { text-align: right; }
/* Finance stage 3a: a Client's schedules, and the one a Rate is on. */
.client-invoice-schedules { width: 100%; margin: .25rem 0 .5rem; }
.client-invoice-schedules th { background: var(--surface-subtle); text-align: left; }
.client-invoice-schedules :is(th, td) { padding: .3rem .6rem; border-bottom: 1px solid var(--border); }
.rate-schedule-summary .field-grid-control { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
.rate-schedule-summary .rate-schedule-link[hidden] { display: none; }
.rate-schedule-summary .rate-schedule-link { padding: 0 10px 4px; }
.rate-schedule-summary .field-value { min-height: 0; padding-bottom: 2px; }
/* Untitled groups (Rate Advanced) run on in one grid; each group still
   carries its condition, and its fields flow into the shared columns. */
body.ui-density [data-section-key="Advanced"] > .scaffold-card-section-content > .scaffold-card-section-children { margin-top: 0; padding-left: 0; }
body.ui-density .scaffold-card-section-children.rate-section-run-on {
  display: grid;
  grid-template-columns:
    var(--field-label-width) minmax(0, 1fr)
    var(--field-label-width) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-row) var(--space-field);
}
.rate-section-run-on > .scaffold-card-subsection:not([hidden]),
.rate-section-run-on > .scaffold-card-subsection > .scaffold-card-section-content,
.rate-section-run-on > .scaffold-card-subsection > .scaffold-card-section-content > .field-grid { display: contents; }
.rate-section-run-on .scaffold-condition-inactive-help,
.rate-section-run-on .scaffold-card-section-content > .field-hint { grid-column: 1 / -1; margin: 0; }
@media (max-width: 780px) {
  body.ui-density .scaffold-card-section-children.rate-section-run-on {
    grid-template-columns: var(--field-label-width) minmax(0, 1fr);
  }
}
.rate-scope-note[hidden] { display: none; }
/* The Rate card's save step reads like the card it came from. */
.rate-amend-step-kicker { display: block; font-size: .8rem; font-weight: 400; color: var(--text-muted); }
.rate-amend-step :is(.rate-amend-changes, .rate-amend-impact table) { width: 100%; }
.rate-amend-step :is(.rate-amend-changes, .rate-amend-impact table) th { background: var(--surface-subtle); text-align: left; }
.rate-amend-step :is(.rate-amend-changes, .rate-amend-impact table) :is(th, td) { padding: .3rem .6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.rate-amend-step .num { text-align: right; }
.rate-amend-step td small { display: block; color: var(--text-muted); }
.rate-amend-impact { margin-top: .5rem; }
.rate-amend-impact > p { margin: .4rem 0; }
.rate-amend-explainer p, .rate-amend-explainer ul { margin: .3rem 0; }
.rate-amend-explainer ul { padding-left: 1.2rem; }
.rate-advanced-summary { display: block; font-weight: 400; color: var(--text-muted); }
details[open] > summary .rate-advanced-summary { display: none; }
/* Advanced: each controlling field starts a row beside what depends on it. */
body.ui-density .field-grid .scaffold-field-label-row:has(label:is(
  [for$="-apply_late_period_discount"], [for$="-storage_period_basis"], [for$="-storage_first_period_policy"],
  [for$="-storage_last_period_policy"]
)) { grid-column: 1; }
body.ui-density .field-grid .scaffold-field-label-row:has(label[for$="-late_period_discount_percent"]) { grid-column: 3; }
/* "Prorate over" means something only once a partial period is prorated. */
.field-grid:not(:has(select[name="storage_first_period_policy"] option[value="DAILY_PRORATA"]:checked)):not(:has(select[name="storage_last_period_policy"] option[value="DAILY_PRORATA"]:checked)) .field-grid-item:has(select[name="storage_proration_day_basis"]) { display: none; }
@media (max-width: 900px) {
  body.ui-density .scaffold-card-section-children.rate-panel-row { grid-template-columns: minmax(0, 1fr); }
}

body.ui-density .field-grid > :where(label, .field-label),
body.ui-density .field-grid .scaffold-field-label-row {
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  align-self: center;
  color: var(--text-heading);
  font-size: var(--type-content);
  font-weight: 680;
  line-height: 1.2;
}

body.ui-density .field-grid > :where(input:not([type=checkbox]):not([type=radio]), select, textarea, output, .field-value, .field-grid-control),
body.ui-density .field-grid .field-grid-control > :where(input:not([type=checkbox]):not([type=radio]), select, textarea, output, .field-value) {
  min-width: 0;
  width: 100%;
  margin: 0;
}

body.ui-density .field-grid :where(input[type=checkbox], input[type=radio]) {
  width: 15px;
}

body.ui-density .field-grid > .field-grid-item {
  display: contents;
}

/* Keep the label beside the "any" checkbox as the search and chips open below. */
body.ui-density .field-grid .scaffold-field-label-row:has(+ .field-grid-control > .scaffold-chip-picker) {
  align-self: start;
  min-height: 30px;
}

body.ui-density .field-grid-control {
  display: grid;
  gap: .2rem;
  min-width: 0;
}

body.ui-density .field-grid-control > .field-hint {
  display: block;
  margin: .15rem 0 0;
}
/* The repeated value is only for narrow cards, where a select clips its text. */
body.ui-density .field-grid-control > .field-hint.searchable-select-current { display: none; }
@media (max-width: 640px) {
  body.ui-density .field-grid-control > .field-hint.searchable-select-current:not([hidden]) { display: block; }
}

body.ui-density .field-grid :where(.field-grid-note, .field-pair-hint, .form-error) {
  grid-column: 1 / -1;
}

body.ui-density .field-grid-actions {
  display: flex;
  align-items: center;
  gap: .35rem;
  grid-column: 1 / -1;
  justify-content: flex-end;
  margin: 0;
}

body.ui-density .field-group {
  margin-bottom: .5rem;
}

body.ui-density .field-label {
  padding-top: 0;
  color: var(--text-heading);
}

body.ui-density .field-value {
  min-height: var(--control-height);
  padding: 3px 6px;
  border: 1px solid transparent;
}

body.ui-density .field-hint {
  margin-top: .15rem;
  font-size: .72rem;
}

body.ui-density .scaffold-field-help-toggle {
  width: 22px;
  height: 22px;
  flex-basis: 22px;
  min-height: 22px;
  padding: 0;
}

body.ui-density .choice-stack {
  gap: .2rem;
}

body.ui-density :where(.choice-row, .check-row) {
  min-height: var(--control-height);
  gap: .3rem;
}

body.ui-density .app-table {
  font-size: var(--type-content);
}

body.ui-density .app-table :where(th, td) {
  padding: 4px 7px;
}

body.ui-density .scaffold-table .table-action {
  padding-top: 0;
  padding-bottom: 0;
}

body.ui-density .scaffold-table .table-action > .btn-icon {
  display: flex;
}

body.ui-density .app-table th {
  color: var(--text-heading);
  font-size: .7rem;
}

body.ui-density .scaffold-table thead th {
  height: 32px;
}

body.ui-density :where(.scaffold-row-link, .scaffold-ref-link) {
  min-height: 30px;
  width: calc(100% + 14px);
  margin: -4px -7px;
  padding: 4px 7px;
}

body.ui-density .scaffold-toolbar,
body.ui-density .list-controls {
  gap: .35rem;
  margin-bottom: .5rem;
  padding: .45rem;
  border-radius: 5px;
}

body.ui-density .scaffold-toolbar :where(input, select, .btn),
body.ui-density .list-controls :where(input, select, button, a) {
  min-height: var(--control-height);
}

body.ui-density :where(.scaffold-filter-chip, .scaffold-clear-filters) {
  min-height: var(--control-height);
}

body.ui-density .scaffold-filter-chip a:not(.chip-action) {
  width: var(--control-height);
  height: var(--control-height);
}
body.ui-density .scaffold-filter-chip a.chip-action {
  min-height:var(--control-height);
}

.audit-filter-form .scaffold-search input[type=search] { width:150px; }
.audit-filter-form select:not([name=page_size]) { width:8.25rem; min-width:7rem; max-width:8.25rem; }
.audit-filter-form .scaffold-date-filter input { width:8.25rem; }

body.ui-density .stat-card-grid {
  gap: .45rem;
  margin-bottom: .55rem;
}

body.ui-density .stat-card {
  min-height: 66px;
  gap: 0;
  padding: .55rem .65rem .55rem .8rem;
  border-radius: 5px;
}

body.ui-density .stat-card-value {
  font-size: 1.25rem;
}

/* Opt-in linked scaffold KPIs retain the established card appearance. */
.stat-card-link {
  color: inherit;
  text-decoration: none;
}
.stat-card-link:visited { color: inherit; }
.stat-card-link:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Opt-in list viewport: the body/main flex chain allocates the real space left
   by nav and responsive main margins. The table consumes that remainder and
   scrolls internally; mobile retains normal document scrolling. */
@media (min-width: 701px) {
  body:has(main > [data-viewport-list]) {
    height: 100dvh;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  body:has(main > [data-viewport-list]) > nav {
    flex: 0 0 auto;
  }
  body:has(main > [data-viewport-list]) > main {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  [data-viewport-list] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  [data-viewport-list] > .section-header,
  [data-viewport-list] > .stat-card-grid,
  [data-viewport-list] > .kpi-picker-row,
  [data-viewport-list] > .scaffold-toolbar,
  [data-viewport-list] > .scaffold-filter-chips,
  [data-viewport-list] > .scaffold-pagination {
    flex: 0 0 auto;
  }
  [data-viewport-list] > .scaffold-table-frame {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  [data-viewport-list] > .scaffold-table-frame > .scaffold-table-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }
  [data-viewport-list] > .scaffold-table-frame > .scaffold-table-scroll:has(.scaffold-empty-row) {
    flex:0 0 auto;
  }
  [data-viewport-list] > .scaffold-pagination { margin-top: .5rem; }
}

body.ui-density .searchable-select-panel {
  padding: 3px;
  border-radius: 3px;
}

body.ui-density .searchable-select-header {
  gap: .25rem;
  padding: .25rem;
}

body.ui-density .searchable-select-create {
  width: var(--control-height);
  height: var(--control-height);
  flex-basis: var(--control-height);
}

body.ui-density .searchable-select-option {
  min-height: var(--control-height);
  padding: 4px 6px;
}

body.ui-density .receipt-header-form,
body.ui-density .receipt-form-advanced-content {
  gap: .55rem;
}

body.ui-density .receipt-form-section {
  padding: 0;
}

body.ui-density .receipt-form-section-heading {
  gap: .6rem;
  margin-bottom: .45rem;
}

body.ui-density .receipt-form-field.field-grid-item {
  display: contents;
}

body.ui-density .receipt-form-field-notes > :where(label, .field-grid-control) {
  margin-top: .8rem;
}

body.ui-density .receipt-form-fieldset + .receipt-form-fieldset {
  padding-top: .55rem;
  border-top-color: var(--section-rule);
}

body.ui-density .receipt-form-fieldset legend {
  margin-bottom: .35rem;
  color: var(--text-heading);
  font-size: var(--type-section);
  font-weight: 760;
}

body.ui-density .receipt-input-notes {
  min-height: calc(var(--control-height) * 1.8);
}

body.ui-density .document-attachment-section:not(.receipt-document-section):not(.ops-document-section):not(.outman-section) {
  margin-top: .65rem;
  padding-top: .65rem;
  border-top-color: var(--section-rule);
}

body.ui-density .document-attachment-upload {
  gap: .4rem;
  margin-top: .55rem;
  padding-top: .55rem;
  border-top-color: var(--section-rule);
}

body.ui-density .document-attachment-upload input[type=file] {
  min-height: var(--control-height);
}

body.ui-density #receipt-filters > :where(input, select, a),
body.ui-density #scheduled-inbound-filters > :where(input, select, a),
body.ui-density #customer-order-filters > :where(input, select, a),
body.ui-density #shipment-filters > :where(input, select, a),
body.ui-density #adjustment-filters > :where(input, select, a),
body.ui-density #count-filters > :where(input, select, a),
body.ui-density #kit-build-filters > :where(input, select, a),
body.ui-density #stock-move-filters > :where(input, select, a) {
  min-height: var(--control-height);
  padding: 3px 6px;
  border-radius: 3px;
}

body.ui-density.login-page {
  padding: .75rem;
}

body.ui-density .login-box {
  width: min(760px, 100%);
  padding: .85rem 1rem;
  border-radius: 6px;
}

body.ui-density .login-box .login-title {
  margin-bottom: .65rem;
  font-size: var(--type-page);
  font-weight: 780;
}

body.ui-density .login-box .flash {
  margin-bottom: .55rem;
}

body.ui-density .login-box button[type=submit] {
  width: auto;
  margin: 0;
}

body.ui-density .login-footer {
  margin-top: .65rem;
  padding-top: .45rem;
}

body.ui-density .export-menu > summary,
body.ui-density .export-menu-options a {
  min-height: var(--control-height);
}

body.ui-density .export-menu-options {
  top: calc(100% + 3px);
  padding: 3px;
  border-radius: 4px;
}

body.ui-density .export-menu-options a {
  padding: 4px 7px;
  font-size: var(--type-content);
}

@media (max-width: 780px) {
  body.ui-density .field-grid {
    grid-template-columns: var(--field-label-width) minmax(0, 1fr);
  }

  body.ui-density main {
    margin: .6rem auto;
    padding: 0 .65rem;
  }
}

@media (max-width: 480px) {
  :root {
    --field-label-width: 7rem;
  }
}

/* Warehouse touchscreens keep full tap targets while fine-pointer desktops
   retain the compact density metrics above. Pointer capability, rather than
   viewport width, is the interaction-target boundary. */
@media (pointer: coarse) {
  body.ui-density {
    --control-height: 40px;
  }

  body.ui-density > nav a,
  body.ui-density input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
  body.ui-density select,
  body.ui-density textarea,
  body.ui-density button,
  body.ui-density .btn,
  body.ui-density summary,
  body.ui-density .scaffold-row-link,
  body.ui-density .scaffold-ref-link,
  body.ui-density .scaffold-filter-chip,
  body.ui-density .scaffold-filter-chip a:not(.chip-action),
  body.ui-density .scaffold-clear-filters,
  body.ui-density .scaffold-toolbar a,
  body.ui-density .list-controls a,
  body.ui-density .mini,
  body.ui-density .seg-btn,
  body.ui-density .fl-option,
  body.ui-density .scaffold-pagination a {
    min-width: 40px;
    min-height: 40px;
  }

  body.ui-density .dashboard-section-heading > a,
  body.ui-density .invoice-list-links a,
  body.ui-density .qbo-locked-control small a,
  body.ui-density .page-head > a.button {
    display: inline-flex;
    align-items: center;
    min-width: 40px;
    min-height: 40px;
  }

  body.ui-density #invoice-list-region .scaffold-table tbody td > a:not(.scaffold-row-link),
  body.ui-density .invoice-detail-card a:not(.btn):not(.button),
  body.ui-density .detail-card table.app-table tbody td a {
    display: inline-grid;
    align-content: center;
    min-width: 40px;
    min-height: 40px;
  }

  /* Match the scaffold row-link box model without changing compact desktop
     rows: the link consumes the dense cell padding as part of its tap area. */
  body.ui-density .dashboard-client-table td:first-child a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: calc(100% + 14px);
    min-width: 40px;
    min-height: 40px;
    margin: -4px -7px;
    padding: 4px 7px;
  }

  body.ui-density .scaffold-table th a {
    min-width: 40px;
  }

  body.ui-density :where(.btn-icon, button.btn-icon),
  body.ui-density .scaffold-field-help-toggle,
  body.ui-density .fl-add,
  body.ui-density .ai-jump-bottom,
  body.ui-density .ai-attach,
  body.ui-density .dashboard-month-controls a,
  body.ui-density .fl-x {
    display: inline-grid;
    place-items: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }

  body.ui-density .scaffold-field-help-toggle,
  body.ui-density .ai-attach {
    flex: 0 0 40px;
    flex-basis: 40px;
  }

  body.ui-density .drill-toggle {
    width: 40px;
    min-width: 40px;
  }

  /* These selectors intentionally outrank the compact grid declarations that
     follow this media block in source order. Both receipt entry paths render
     this unified grid. */
  body.ui-density .line-entry-grid-table tbody :where(input, select) {
    min-height: 40px;
    height: 40px;
  }

  body.ui-density .line-entry-grid-table .line-grid-row-action .btn-icon {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }

  /* Drill rows carry onclick on the <tr> itself; a row is the tap target, so
     its cells must pad the row out to a 40px hit height on coarse pointers. */
  body.ui-density table tr[onclick] > td {
    /* 13px x 1.35 line-height + 2x12px padding = 41.6px: the row clears 40px
       from box math alone; td min-height is not reliably honored by tables. */
    padding-top: 12px;
    padding-bottom: 12px;
  }

  body.ui-density .hub-month-arrow,
  body.ui-density .cc-mi,
  body.ui-density .kate-unconfirmed,
  body.ui-density .group-option,
  body.ui-density .crumb-clear,
  body.ui-density .chip,
  body.ui-density .camelot-clear-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
  }

  body.ui-density .drill-toggle [onclick] {
    display: inline-grid;
    place-items: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }

  body.ui-density input[type=checkbox],
  body.ui-density input[type=radio] {
    width: 22px;
    min-height: 22px;
    height: 22px;
  }

  body.ui-density label:has(input[type=checkbox]),
  body.ui-density label:has(input[type=radio]) {
    min-height: 40px;
  }

  body.ui-density table input[type=checkbox],
  body.ui-density table input[type=radio],
  body.ui-density .field-grid-control > input[type=checkbox],
  body.ui-density .field-grid-control > input[type=radio],
  body.ui-density form > input[type=checkbox],
  body.ui-density form > input[type=radio] {
    width: 40px;
    min-height: 40px;
    height: 40px;
    padding: 9px;
  }
}

/* Reusable keyboard-first document line grid. The table is deliberately wider
   than small viewports and scrolls as one spreadsheet-like surface. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.line-entry-grid-scroll {
  /* Keep absolute accessibility labels inside the scrolling table. Without a
     containing block their pre-scroll position widens the entire phone page. */
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border: 1px solid var(--border);
  background: var(--surface-panel);
}

.line-entry-grid {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.line-entry-grid-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  box-shadow: none;
}

body.ui-density .line-entry-grid-table :where(th, td) {
  height: 30px;
  padding: 1px 3px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  white-space: nowrap;
}

body.ui-density .line-entry-grid-table th {
  height: 28px;
  padding: 3px 5px;
  background: var(--surface-subtle);
  color: var(--text-heading);
  font-size: .68rem;
  letter-spacing: .02em;
}

/* Every control fills its own cell: the cell owns the column width, the control
   owns none of it. Selects used to render narrower than their cell and number
   spinners floated away from the cell edge; box-sizing plus a 100% width and a
   zero min-width (min-width defaults to auto on form controls, which is what
   kept selects from shrinking into their cell) fixes both under density mode. */
body.ui-density .line-entry-grid-table :where(input, select) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 26px;
  height: 26px;
  padding: 2px 4px;
  border-color: transparent;
  border-radius: 0;
  background: transparent;
}

/* Column widths live on the cells so the header and every row agree. */
body.ui-density .line-entry-grid-table :where(th, td):has(> select[name=item_id]),
body.ui-density .line-entry-grid-table th.line-grid-col-item { width: 14rem; min-width: 14rem; }
body.ui-density .line-entry-grid-table td:has(> input[name=lot_code]) { width: 8rem; min-width: 8rem; }
body.ui-density .line-entry-grid-table td:has(> input[name=sublot_no]) { width: 5.5rem; min-width: 5.5rem; }
body.ui-density .line-entry-grid-table td:has(> select[name=inventory_status_id]),
body.ui-density .line-entry-grid-table td:has(> select[name=to_inventory_status_id]) { width: 7.5rem; min-width: 7.5rem; }
body.ui-density .line-entry-grid-table td:has(> select[name=bin_id]) { width: 8rem; min-width: 8rem; }
body.ui-density .line-entry-grid-table td:has(> select[name=to_warehouse_id]) { width: 9rem; min-width: 9rem; }
body.ui-density .line-entry-grid-table td:has(> select[name=to_bin_id]) { width: 11rem; min-width: 11rem; }
body.ui-density .line-entry-grid-table td:has(> select[name=declared_unit]) { width: 7rem; min-width: 7rem; }
body.ui-density .line-entry-grid-table td:has(> input[type=number]) { width: 6rem; min-width: 6rem; }
/* A quantity with its unit beside it (grids without Unit columns) is a number column too;
   without a width it took the input's natural width, about 12rem. */
body.ui-density .line-entry-grid-table td:has(> .line-grid-qty-with-unit) { width: 6rem; min-width: 6rem; }
/* Its header may name the unit, "Final Qty (EA)": let that wrap rather than widen the column. */
body.ui-density .line-entry-grid-table th:has([data-grid-unit-header]) { white-space: normal; }
.line-entry-grid-table [data-grid-unit-header] { white-space: nowrap; }
body.ui-density .line-entry-grid-table input[type=number] { text-align: right; }

/* Compact, editable unit columns. */
.line-entry-grid-table .line-grid-unit,
.receipt-line-table .line-grid-unit {
  width: 7rem;
  min-width: 7rem;
  color: var(--text-muted);
}
body.ui-density .line-entry-grid-table td.line-grid-unit { background: var(--surface-section); }

body.ui-density .line-entry-grid-table :where(input, select):focus {
  position: relative;
  z-index: 2;
  border-color: var(--action);
  outline: 2px solid var(--focus-ring);
  outline-offset: -1px;
  background: var(--surface-panel);
}

.line-entry-grid-table td[data-line-grid-cell] { position: relative; }
.line-entry-grid-table .unit-hint { display: none; }
/* Expected lines name each row's unit beside its quantity. */
.schedule-line-grid .line-grid-qty-with-unit,
.line-grid-unit-hints .line-grid-qty-with-unit { display:flex; align-items:center; gap:.3rem; }
.schedule-line-grid .line-grid-qty-with-unit input,
.line-grid-unit-hints .line-grid-qty-with-unit input { flex:1 1 auto; min-width:0; }
.schedule-line-grid .unit-hint,
.line-grid-unit-hints .unit-hint { display:inline; flex:0 0 auto; padding-right:.35rem; color:var(--text-muted); font-size:.75rem; }
.schedule-line-grid[data-uniform-qty-unit] .qty-unit,
.schedule-line-grid[data-uniform-alt-unit] .alt-unit,
.line-grid-unit-hints[data-uniform-qty-unit] .qty-unit,
.line-grid-unit-hints[data-uniform-alt-unit] .alt-unit,
.line-grid-unit-hints .alt-source { display:none; }
/* An Alt Qty filled from the conversion reads as suggested until typed over. */
.line-entry-grid-table input[data-line-grid-alt-auto] { color:var(--text-muted); }
.line-grid-row-action { width:30px; min-width:30px; padding:1px !important; }
body.ui-density .line-grid-row-action .btn-icon { width: 26px; min-width: 26px; height: 26px; min-height: 26px; border-radius: 2px; }
.line-grid-actions { justify-content: flex-start; }
.line-grid-form-error { margin: .35rem 0; padding: 4px 7px; border-left: 3px solid var(--danger); background: var(--surface-danger); color: var(--danger); }

.line-entry-grid-table .line-row-incomplete > td {
  background: color-mix(in srgb, var(--surface-danger) 35%, transparent);
}
.line-entry-grid-table .line-grid-completion-errors > td {
  padding: 4px 7px;
  border-left: 3px solid var(--danger);
  background: var(--surface-danger);
  color: var(--danger);
  font-size: .72rem;
  white-space: normal;
}
.line-grid-completion-errors strong { margin-right: .25rem; }

.receipt-charge-unpriced { color: var(--text-muted); }
.receipt-charge-not-priced small {
  color: var(--text-muted);
  font-style: italic;
  white-space: nowrap;
}
.receipt-charge-incomplete > td {
  background: color-mix(in srgb, var(--surface-danger) 35%, transparent);
}
.receipt-charge-completion-errors > td {
  padding: 4px 7px;
  border-left: 3px solid var(--danger);
  background: var(--surface-danger);
  color: var(--danger);
  font-size: .72rem;
  white-space: normal;
}

.line-grid-cell-invalid { box-shadow: inset 0 0 0 2px var(--danger); }
.line-grid-cell-error {
  position: absolute;
  z-index: 20;
  top: calc(100% + 2px);
  left: 1px;
  max-width: 15rem;
  padding: 3px 5px;
  border: 1px solid var(--danger-border);
  background: var(--surface-danger);
  box-shadow: var(--shadow-soft);
  color: var(--danger);
  font-size: .68rem;
  line-height: 1.2;
  white-space: normal;
}

.line-grid-expected,
.line-grid-delta {
  width: 6rem;
  min-width: 6rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

td.line-grid-expected { color: var(--text-muted); background: var(--surface-section); }
td.line-grid-delta { padding-right: 6px !important; font-weight: 760; }
.line-grid-delta-over { color: var(--warning); background: var(--surface-warning); }
.line-grid-delta-short { color: var(--danger); background: var(--surface-danger); }
.line-grid-delta-even { color: var(--success); background: var(--surface-success); }

.receipt-audit-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .15rem .8rem;
  margin: .45rem 0 .6rem;
  padding: .45rem .65rem;
  border: 1px solid var(--info-border);
  border-left: 4px solid var(--action);
  background: var(--surface-info);
  color: var(--text-heading);
}

.receipt-audit-banner > div { font-size: var(--type-section); }
.receipt-audit-banner p { grid-column: 1; margin: 0; color: var(--text-muted); }
.receipt-audit-banner > a { grid-column: 2; grid-row: 1 / span 2; }
.receipt-audit-banner > .scaffold-table-scroll { grid-column: 1; }
.receipt-return-lines { width: auto; min-width: min(36rem, 100%); background: var(--surface-panel); }
.receipt-audit-missing {
  margin: -.25rem 0 .6rem;
  padding: .4rem .65rem;
  border-left: 4px solid var(--danger);
  background: var(--surface-danger);
  color: var(--danger);
}
.receipt-audit-missing ul { margin: .2rem 0 0; padding-left: 1.2rem; }
.receipt-audit-not-received td { background: var(--surface-danger); }
.receipt-audit-table { width: 100%; }
.receipt-entry-form { gap: .55rem; }
.receipt-header-fields { display: grid; gap: .55rem; }

.scheduled-inbound-filters { justify-content: flex-start; }
.scheduled-inbound-filters label { width: auto; margin: 0; color: var(--text-heading); font-weight: 680; }
.scheduled-inbound-filters select { width: 10rem; }
.scheduled-inbound-table td { vertical-align: middle; }
.scheduled-inbound-receive { white-space: nowrap; }

@media (max-width: 640px) {
  .receipt-audit-banner { grid-template-columns: 1fr; }
  .receipt-audit-banner > a { grid-column: 1; grid-row: auto; }
}

/* Permissions wave: compact role list, right-side matrix drawer, and user Access section. */
.role-page {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: .55rem;
  height: calc(100vh - 7.25rem);
  min-height: 28rem;
  overflow: hidden;
  padding: .75rem;
}
.role-page-head,
.permission-matrix-head,
.user-access-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .75rem;
}
.role-page-head :where(h1, p), .permission-matrix-head :where(h3, small) { margin: 0; }
.role-page .page-subtitle { color: var(--text-muted); font-size: var(--type-content); }
.role-list-filters {
  display: grid;
  grid-template-columns: auto 15rem auto 9rem auto auto;
  align-items: center;
  gap: .35rem .5rem;
  padding: .4rem 0;
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border);
}
.role-list-filters label { margin: 0; font-weight: 700; }
.role-list-filters :where(input, select) { width: 100%; height: 28px; border-radius: 2px; padding: 2px 5px; }
.role-table-scroll { min-height: 0; overflow: auto; border: 1px solid var(--border); }
.role-table { width: 100%; }
.role-table thead { position: sticky; top: 0; z-index: 2; }
.role-table th { background: var(--brand-navy); color: var(--text-on-action); }
.role-table td { padding-block: .28rem; }
.role-table td:first-child small { display: block; margin-top: .1rem; color: var(--text-muted); }
.role-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: .25rem; white-space: nowrap; }
.role-row-menu { position: relative; }
.role-row-menu > summary { list-style: none; }
.role-row-menu > summary::-webkit-details-marker { display: none; }
.role-row-menu > div { position: fixed; z-index: 1200; min-width: 9rem; padding: .2rem; border: 1px solid var(--border-strong); background: var(--surface-panel); box-shadow: var(--shadow-soft); }
.role-row-menu form, .role-row-menu button { width: 100%; margin: 0; }
.role-row-menu button { border: 0; padding: .3rem .45rem; background: transparent; text-align: left; }
.role-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; min-height: 30px; }
.role-pagination > :last-child { justify-self: end; }

.role-editor-dialog {
  width: min(50rem, 94vw);
  height: 100vh;
  max-height: 100vh;
  margin: 0 0 0 auto;
  border-radius: 0;
}
.role-editor-dialog .modal-card { height: 100%; display: flex; flex-direction: column; }
.role-editor-form { display: flex; min-height: 0; flex: 1; flex-direction: column; }
.role-editor-form .modal-body { min-height: 0; overflow: auto; }
.role-editor-identity { border-bottom: 1px solid var(--border-strong); padding-bottom: .55rem; }
.role-identity-grid { display: grid; grid-template-columns: 7rem minmax(10rem, 1fr) 7rem minmax(12rem, 1.5fr); align-items: center; gap: .3rem .45rem; }
.role-identity-grid label { margin: 0; color: var(--text-heading); font-weight: 700; }
.role-identity-grid input { width: 100%; height: 28px; padding: 2px 5px; border-radius: 2px; }
.permission-matrix { margin-top: .65rem; }
.permission-matrix-head { padding: .35rem .5rem; background: var(--brand-navy); color: var(--text-on-action); }
.permission-matrix-head small { color: inherit; opacity: .8; }
.role-permission-search { display: flex; align-items: center; gap: .35rem; margin: 0; color: inherit; }
.role-permission-search input { width: 12rem; height: 26px; padding: 2px 5px; border-radius: 2px; }
.permission-group { border-bottom: 1px solid var(--border-strong); }
.permission-group > summary {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .45rem;
  min-height: 30px;
  padding: .25rem .45rem;
  background: var(--surface-section);
  color: var(--text-heading);
  cursor: pointer;
  list-style: none;
}
.permission-group > summary::-webkit-details-marker { display: none; }
.permission-group-select { display: inline-flex; align-items: center; gap: .3rem; min-width: 6rem; margin: 0; font-weight: 600; }
.permission-group-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--border); }
.permission-group-rows:has(> .permission-row:last-child:nth-child(odd))::after { content:""; background:var(--surface-panel); }
.permission-row { display: grid; grid-template-columns: auto 1fr; gap: .4rem; align-items: start; min-height: 38px; margin: 0; padding: .3rem .45rem; background: var(--surface-panel); }
.permission-row > span { min-width: 0; }
.permission-row strong, .permission-row small { display: block; }
.permission-row small { overflow: hidden; color: var(--text-muted); font-family: monospace; text-overflow: ellipsis; white-space: nowrap; }
.role-editor-footer { border-top: 1px solid var(--border-strong); }
.role-secondary-actions { display: flex; align-items: center; gap: .4rem; padding: .4rem .65rem; border-top: 1px solid var(--border); background: var(--surface-section); }
.role-secondary-actions form { margin: 0; }
.role-disabled-action { display: inline-flex; align-items: center; gap: .35rem; }
.role-disabled-action small { color: var(--text-muted); }

.user-card-dialog { width: min(47rem, 94vw); }
.user-card-dialog .modal-card { display: flex; max-height: min(90vh, 48rem); flex-direction: column; }
.user-card-dialog .modal-body { min-height: 0; overflow: auto; }
.user-account-actions, .user-access-actions { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; padding-top: .5rem; }
.user-account-actions { position: sticky; bottom: 0; z-index: 3; margin-top: .5rem; padding: .45rem; border-top: 1px solid var(--border-strong); background: var(--surface-panel); }
.user-access-section { margin-top: .65rem; border-top: 2px solid var(--brand-navy); }
.user-access-section > summary, .user-credentials-section > summary { display: flex; align-items: center; gap: .35rem; cursor: pointer; list-style: none; }
.user-access-section > summary::-webkit-details-marker, .user-credentials-section > summary::-webkit-details-marker { display: none; }
.user-section-triangle { font-size: .68rem; transition: transform .12s ease; }
details[open] > summary .user-section-triangle { transform: rotate(90deg); }
.user-access-title > span, .section-help { color: var(--text-muted); font-size: var(--type-content); }
.section-help { margin: .15rem 0 .4rem; }
.user-access-grid { display: grid; grid-template-columns: 7rem minmax(12rem, 1fr) 7rem minmax(10rem, auto); align-items: center; gap: .3rem .45rem; }
.user-role-picker { min-width: 0; }
.user-role-trigger { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; width: 100%; height: 28px; min-height: 28px; padding: 2px 5px; border: 1px solid var(--border-strong); border-radius: 2px; background: var(--surface-panel); text-align: left; }
.user-role-trigger [data-role-summary] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-role-popover { position: fixed; z-index: 1400; width: min(27rem, calc(100vw - 16px)); max-height: min(24rem, calc(100vh - 16px)); overflow: hidden; border: 1px solid var(--border-strong); background: var(--surface-panel); box-shadow: var(--shadow-soft); }
.user-role-popover[hidden] { display: none; }
.user-role-search { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .4rem; margin: 0; padding: .4rem; border-bottom: 1px solid var(--border); background: var(--surface-section); }
.user-role-search input { height: 27px; min-width: 0; padding: 2px 5px; border-radius: 2px; }
.user-role-options { max-height: 19rem; overflow: auto; padding: .2rem; }
.user-role-option { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .4rem; min-height: 42px; margin: 0; padding: .35rem .45rem; border: 1px solid var(--border); background: var(--surface-panel); }
.user-role-option > span { min-width: 0; }
.user-role-option strong, .user-role-option small { display: block; }
.user-role-option small { color: var(--text-muted); line-height: 1.2; }
.user-role-option .badge { float: right; margin-left: .3rem; font-style: normal; }
.user-effective-access { display: flex; align-items: center; gap: .35rem; white-space: nowrap; }
.user-access-dialog { width: min(50rem, 94vw); height: 100vh; max-height: 100vh; margin: 0 0 0 auto; border-radius: 0; }
.user-access-dialog .modal-card { display: flex; height: 100%; flex-direction: column; }
.user-access-dialog .modal-body { min-height: 0; overflow: auto; }

/* Parallel-ready first landing: dense, fixed-viewport review surfaces. */
.cut-diff-page, .readiness-page { min-height:0; overflow:hidden; gap:.45rem; }
.cut-diff-head, .readiness-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; border-bottom:2px solid var(--brand-navy); padding-bottom:.35rem; }
.cut-diff-head :where(h1,p), .readiness-head :where(h1,p) { margin:0; }
.cut-diff-head p, .readiness-head p { color:var(--text-muted); font-size:12px; }
.cut-diff-run-stamp { display:flex; flex-direction:column; align-items:flex-end; font-size:12px; }
.cut-diff-stale { display:grid; grid-template-columns:auto auto auto 1fr; align-items:center; gap:.4rem .7rem; padding:.4rem .55rem; border:2px solid #8a4b00; background:#fff3d6; color:#5e3200; }
.cut-diff-stale > div { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:.3rem 1rem; padding-top:.2rem; border-top:1px solid #d7ab6a; font-size:11px; }
.cut-diff-controls { display:grid; grid-template-columns:15rem repeat(3, 11rem) auto auto; align-items:end; gap:.4rem; padding:.35rem 0; border-bottom:1px solid var(--border-strong); }
.cut-diff-controls label { display:grid; gap:.1rem; margin:0; font-size:11px; font-weight:700; }
.cut-diff-controls :where(select,input) { width:100%; height:29px; padding:2px 5px; }
.cut-diff-kpis, .readiness-kpis { display:flex; gap:.4rem; min-height:0; }
.cut-diff-kpis .stat-card, .readiness-kpis .stat-card { min-width:8.5rem; padding:.35rem .55rem; }
.cut-diff-kpis .stat-card strong, .readiness-kpis .stat-card strong { font-size:1.25rem; }
.cut-diff-clean { margin:.25rem 0; color:#176b3a; font-weight:700; }
.cut-diff-quality { flex:0 0 auto; border:1px solid #c78b2b; background:#fff8e8; }
.cut-diff-quality summary, .cut-diff-section > summary { display:flex; align-items:center; gap:.45rem; min-height:28px; padding:.25rem .45rem; cursor:pointer; list-style:none; }
.cut-diff-quality summary::-webkit-details-marker, .cut-diff-section > summary::-webkit-details-marker { display:none; }
.cut-diff-quality summary span:last-child, .cut-diff-section > summary span:last-child { margin-left:auto; font-size:11px; }
.cut-diff-quality > div { max-height:7rem; overflow:auto; padding:.2rem .55rem; }
.cut-diff-quality p { margin:.15rem 0; font-size:11px; }
.cut-diff-uat-note { flex:0 0 auto; padding:.3rem .45rem; border-left:4px solid var(--brand-navy); background:var(--brand-blue-wash); font-size:11px; }
.cut-diff-sections { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:.35rem; overflow:hidden; }
.cut-diff-section { min-height:28px; flex:0 0 auto; border:1px solid var(--border-strong); background:var(--surface-panel); overflow:hidden; }
.cut-diff-section[open] { flex:1 1 0; min-height:120px; display:flex; flex-direction:column; }
.cut-diff-section > summary { flex:0 0 auto; background:var(--brand-navy); color:var(--text-on-action); }
.cut-diff-section-body { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.cut-diff-table-scroll { flex:1 1 auto; min-height:0; overflow:auto; }
.cut-diff-table { width:100%; margin:0; font-size:11px; }
.cut-diff-table thead { position:sticky; top:0; z-index:2; }
.cut-diff-table th { background:#dce6f1; color:var(--brand-navy); }
.cut-diff-table td { padding:.2rem .35rem; vertical-align:top; }
.cut-diff-table .number { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cut-diff-table .number small { display:block; color:var(--text-muted); }
.cut-diff-row-delta { background:#fffaf0; }
.cut-diff-row-match { color:#516274; }
.cut-diff-table .delta.negative { color:#a02920; font-weight:800; }
.cut-diff-table .delta.positive { color:#176b3a; font-weight:800; }
.cut-diff-value { border:0; border-bottom:1px dotted currentColor; padding:0; background:transparent; color:var(--brand-blue); font:inherit; cursor:pointer; }
.cut-diff-ruling-note, .cut-diff-changed { display:block; max-width:20rem; margin-top:.1rem; color:var(--text-muted); white-space:normal; }
.cut-diff-pagination, .readiness-footer { flex:0 0 auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:31px; padding:.2rem .35rem; border-top:1px solid var(--border); background:var(--surface-panel); font-size:11px; }
.cut-diff-pagination > :last-child { justify-self:end; }
.cut-diff-overlay { position:fixed; inset:0; z-index:520; border:0; background:rgba(13,43,71,.38); }
.cut-diff-drawer { position:fixed; top:0; right:0; z-index:521; width:min(48rem, 94vw); height:100dvh; display:flex; flex-direction:column; border-left:2px solid var(--brand-navy); background:#fff; box-shadow:-8px 0 24px rgba(13,43,71,.25); transform:translateX(101%); transition:transform .16s; }
.cut-diff-drawer.open { transform:translateX(0); }
.cut-diff-drawer > header { display:flex; align-items:center; justify-content:space-between; padding:.45rem .65rem; background:var(--brand-navy); color:#fff; }
.cut-diff-drawer-body { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:.5rem; padding:.55rem; overflow:hidden; }
.cut-diff-drawer-heading :where(h3,p) { margin:.1rem 0; }
.cut-diff-drawer-table { flex:1 1 auto; min-height:8rem; overflow:auto; border:1px solid var(--border); }
.cut-diff-drawer-table table { width:100%; font-size:11px; }
.cut-diff-adjudication { flex:0 0 auto; display:grid; grid-template-columns:12rem 1fr auto; align-items:end; gap:.35rem .5rem; padding:.45rem; border-top:2px solid var(--brand-navy); background:var(--brand-blue-wash); }
.cut-diff-adjudication h4 { grid-column:1 / -1; margin:0; }
.cut-diff-adjudication label { display:grid; gap:.15rem; margin:0; font-size:11px; font-weight:700; }
.cut-diff-adjudication textarea { min-height:4rem; resize:vertical; }
.cut-diff-tooltip { position:fixed; z-index:2000; max-width:24rem; padding:.35rem .5rem; border:1px solid var(--brand-navy); background:#fff; box-shadow:var(--shadow-soft); color:var(--text); font-size:11px; }

.readiness-page { display:flex; flex-direction:column; }
.readiness-table-scroll { flex:1 1 auto; min-height:0; overflow:auto; border:1px solid var(--border-strong); }
.readiness-table { width:100%; margin:0; font-size:12px; }
.readiness-table thead { position:sticky; top:0; z-index:2; }
.readiness-table th { background:var(--brand-navy); color:#fff; }
.readiness-table td { padding:.32rem .4rem; vertical-align:top; }
.readiness-table td:first-child { width:28%; }
.readiness-table td:nth-child(2) { width:9rem; }
.readiness-table td:last-child { width:35%; }
.readiness-table small { display:block; margin-top:.12rem; color:var(--text-muted); }
.readiness-toggle-form { display:grid; grid-template-columns:8rem 1fr auto; gap:.3rem; }
.readiness-toggle-form :where(select,input,button) { height:28px; min-width:0; }
.readiness-done { background:#d8f2e1; color:#155d33; }
.readiness-in-progress { background:#fff0c7; color:#724800; }
.readiness-not-started, .readiness-not-available { background:#e8edf3; color:#405165; }
.readiness-footer { grid-template-columns:1fr; text-align:center; }

@media (max-width: 900px) {
  .cut-diff-controls { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .cut-diff-adjudication { grid-template-columns:1fr; }
  .readiness-toggle-form { grid-template-columns:1fr; }
}
.user-access-summary { display: grid; grid-template-columns: 1fr auto; gap: .2rem .6rem; border-bottom: 1px solid var(--border-strong); }
.user-access-summary :where(h3, p) { margin: 0; }
.user-access-summary p { grid-column: 1; }
.user-access-summary > strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.user-data-scope-summary,
.user-data-scope-grid { display:grid; grid-column:1 / -1; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.75rem; }
.user-data-scope-heading { display:block; padding-inline:.45rem; margin-bottom:.35rem; }
.user-data-scope-summary .permission-group-rows { grid-template-columns:1fr; }
.user-data-scope-grid select { width:100%; margin-top:.3rem; }
.user-access-summary > .user-client-access-form { grid-column:1 / -1; }
.effective-permission-row { grid-template-columns: minmax(0, 1fr) auto; }
.effective-permission-row em { align-self: center; color: var(--text-muted); font-style: normal; }

@media (max-width: 760px) {
  .user-data-scope-summary,
  .user-data-scope-grid { grid-template-columns:1fr; }
  .role-list-filters, .role-identity-grid { grid-template-columns: auto minmax(0, 1fr); }
  .permission-group-rows { grid-template-columns: 1fr; }
  .user-access-grid { grid-template-columns: 7rem minmax(0, 1fr); }
}

/* Conventions rollout: roles now uses the shared viewport-list flex contract. */
.role-page[data-viewport-list] {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 0;
  overflow: visible;
}

@media (min-width: 701px) {
  .role-page[data-viewport-list] {
    overflow: hidden;
  }
}

/* ===== Client portal (standalone shell) ===== */
.portal-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-app);
  color: var(--text);
}
.portal-skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 1000;
  padding: .65rem .9rem;
  border-radius: .5rem;
  background: var(--action);
  color: var(--text-on-action);
  font-weight: 700;
  transform: translateY(-200%);
}
.portal-skip-link:focus { transform: translateY(0); }
.portal-header {
  position: relative;
  z-index: 10;
  border-bottom: 1px solid var(--border-strong);
  background: var(--surface-panel);
  box-shadow: var(--shadow-soft);
}
.portal-header-inner {
  width: min(1180px, calc(100% - 2.5rem));
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin: 0 auto;
}
.portal-brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  color: var(--text-heading);
  text-decoration: none;
}
.portal-brand:hover { color: var(--text-heading); text-decoration: none; }
.portal-brand:focus-visible {
  border-radius: .4rem;
  outline: 3px solid var(--focus-ring);
  outline-offset: 4px;
}
.portal-brand img { width: 158px; height: auto; display: block; }
.portal-brand-label {
  padding-left: .85rem;
  border-left: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-size: .82rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.portal-account { display: flex; align-items: center; gap: 1rem; }
.portal-account-copy { min-width: 0; display: grid; justify-items: end; line-height: 1.3; }
.portal-client-names {
  max-width: 30rem;
  overflow: hidden;
  color: var(--text-heading);
  font-size: .86rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.portal-user-email { color: var(--text-subtle); font-size: .75rem; }
.portal-logout { flex: 0 0 auto; margin: 0; }
.portal-logout .btn { min-height: 38px; white-space: nowrap; }
.portal-nav { border-top: 1px solid var(--border); background: var(--surface-section); }
.portal-nav-inner {
  width: min(1180px, calc(100% - 2.5rem));
  display: flex;
  align-items: center;
  gap: .25rem;
  margin: 0 auto;
}
.portal-nav a {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  padding: 0 1rem;
  border-bottom: 3px solid transparent;
  color: var(--text-muted);
  font-size: .84rem;
  font-weight: 700;
  text-decoration: none;
}
.portal-nav a:hover { background: var(--surface-hover); color: var(--link-hover); text-decoration: none; }
.portal-nav a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.portal-nav a.portal-nav-active {
  border-bottom-color: var(--action);
  background: var(--surface-info);
  color: var(--text-heading);
}
.portal-main {
  width: min(1180px, calc(100% - 2.5rem));
  max-width: none;
  flex: 1 0 auto;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) 0;
}
.portal-footer {
  width: min(1180px, calc(100% - 2.5rem));
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 auto;
  padding: 1.5rem 0 2rem;
  border-top: 1px solid var(--border);
  color: var(--text-subtle);
  font-size: .76rem;
}
.portal-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, .75fr);
  align-items: stretch;
  gap: 1.25rem;
  padding: clamp(1.75rem, 5vw, 3.5rem);
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: linear-gradient(135deg, var(--surface-panel), var(--surface-info));
  box-shadow: var(--shadow-soft);
}
.portal-hero-copy { align-self: center; }
.portal-hero-copy h1 {
  max-width: 45rem;
  margin: .35rem 0 .75rem;
  color: var(--text-heading);
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.08;
}
.portal-hero-copy p {
  max-width: 43rem;
  margin: 0;
  color: var(--text-muted);
  font-size: clamp(1rem, 2vw, 1.12rem);
}
.portal-hero-note {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: .35rem;
  padding: 1.35rem;
  border: 1px solid var(--info-border);
  border-radius: .75rem;
  background: var(--surface-panel);
}
.portal-hero-note strong { color: var(--text-heading); font-size: 1.05rem; }
.portal-hero-note > span:last-child { color: var(--text-subtle); font-size: .78rem; overflow-wrap: anywhere; }
.portal-hero-note-label,
.portal-eyebrow {
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.portal-section { margin-top: clamp(2.25rem, 5vw, 4rem); }
.portal-section-heading { margin-bottom: 1.25rem; }
.portal-section-heading h2 { margin: .25rem 0 0; font-size: clamp(1.4rem, 3vw, 1.85rem); }
.portal-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.portal-nav-card {
  min-height: 165px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: .9rem;
  padding: 1.35rem;
  border: 1px solid var(--border);
  border-radius: .8rem;
  background: var(--surface-panel);
  box-shadow: var(--shadow-soft);
  color: var(--text);
  text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.portal-nav-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-dialog);
  color: var(--text);
  text-decoration: none;
  transform: translateY(-3px);
}
.portal-nav-card:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.portal-card-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .7rem;
  background: var(--surface-info);
  color: var(--action);
  font-size: 1.25rem;
}
.portal-card-copy { min-width: 0; display: grid; gap: .4rem; }
.portal-card-copy strong { color: var(--text-heading); font-size: 1.08rem; }
.portal-card-copy span { color: var(--text-muted); font-size: .86rem; }
.portal-card-arrow { align-self: center; color: var(--link); }
.portal-page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}
.portal-page-heading h1 { margin: .2rem 0 .25rem; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.portal-page-heading p { max-width: 50rem; margin: 0; color: var(--text-muted); font-size: .95rem; }
.portal-data-card {
  margin-top: 1.25rem;
  padding: 0;
  overflow: hidden;
}
.portal-data-card-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.35rem 1rem;
  border-bottom: 1px solid var(--border);
}
.portal-data-card-heading h2 { margin: 0; padding: 0; border: 0; font-size: 1.15rem; }
.portal-data-card-heading p { margin: .25rem 0 0; color: var(--text-muted); font-size: .84rem; }
.portal-record-count { color: var(--text-subtle); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.portal-table-scroll { position: relative; max-width: 100%; overflow-x: auto; }
.portal-table-scroll .app-table { min-width: 680px; box-shadow: none; }
.portal-table-scroll .app-table th { white-space: nowrap; }
.portal-table-scroll .app-table th > a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  margin-block: -.45rem;
  padding-block: .45rem;
}
.portal-table-scroll .app-table tbody tr:last-child td { border-bottom: 0; }
.portal-table-scroll .align-right { text-align: right; font-variant-numeric: tabular-nums; }
.portal-table-action { width: 1%; text-align: right; white-space: nowrap; }
.portal-table-action .btn { min-height: 38px; white-space: nowrap; }
.portal-table-link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-block: -.45rem;
  padding-block: .45rem;
  font-weight: 750;
}
.portal-back-link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-bottom: 1.25rem;
  font-weight: 700;
}
.portal-invoice-summary { margin-bottom: 1.25rem; }
.portal-field-group { margin: 0; }

@media (max-width: 850px) {
  .portal-header-inner { align-items: start; flex-direction: column; gap: .85rem; padding: 1rem 0; }
  .portal-account { width: 100%; justify-content: space-between; }
  .portal-account-copy { justify-items: start; }
  .portal-card-grid { grid-template-columns: 1fr; }
  .portal-nav-card { min-height: 0; }
  .portal-hero { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .portal-header-inner,
  .portal-nav-inner,
  .portal-main,
  .portal-footer { width: min(100% - 1.5rem, 1180px); }
  .portal-brand { align-items: start; flex-direction: column; gap: .4rem; }
  .portal-brand-label { padding-left: 0; border-left: 0; }
  .portal-account { align-items: flex-end; gap: .75rem; }
  .portal-client-names { max-width: calc(100vw - 8.5rem); }
  .portal-nav { overflow-x: auto; }
  .portal-nav-inner { min-width: max-content; }
  .portal-nav a { padding-inline: .8rem; }
  .portal-main { padding: 2rem 0 3rem; }
  .portal-footer { align-items: start; flex-direction: column; }
  .portal-hero { padding: 1.5rem; }
  .portal-data-card-heading { align-items: start; flex-direction: column; }
  .portal-field-group { grid-template-columns: 1fr; gap: .15rem; }
  .portal-field-group .field-label:not(:first-child) { margin-top: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-nav-card { transition: none; }
  .portal-nav-card:hover { transform: none; }
}

/* Several linked clients: the header says which one is in view and switches it. */
.portal-client-picker {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, auto) auto;
  align-items: center;
  justify-items: end;
  column-gap: .45rem;
  row-gap: .15rem;
  margin: 0;
}
.portal-client-picker label {
  margin: 0;
  color: var(--text-muted);
  font-size: .75rem;
  font-weight: 750;
}
.portal-client-picker select {
  width: auto;
  max-width: 18rem;
  min-height: 36px;
  padding-block: .35rem;
  border-color: var(--brand-blue);
  color: var(--text-heading);
  font-weight: 750;
}
.portal-client-picker .btn { min-height: 36px; padding-block: .35rem; }
.portal-client-picker .portal-user-email { grid-column: 1 / -1; }
.portal-staff-link { flex: 0 0 auto; min-height: 38px; white-space: nowrap; }
/* Portal Users page */
.portal-users-invite-hint { flex-basis: 100%; margin: 0; color: var(--text-muted); font-size: .84rem; }
/* Portal My account and Notifications. */
.portal-account-link { white-space: nowrap; }
.portal-account-cards { display: grid; gap: 1rem; }
.portal-card-body { padding: 1rem 1.35rem 1.25rem; }
.portal-account-form { display: grid; gap: .65rem; max-width: 26rem; }
.portal-account-form label { display: grid; gap: .25rem; font-weight: 700; }
.portal-notification-presets { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .6rem; }
.portal-notification-current { font-weight: 400; }
.portal-notification-events { display: grid; gap: .65rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.portal-notification-events label { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer; }
.portal-notification-events input { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin-top: .2rem; }
.portal-users-note { display: block; margin-top: .2rem; color: var(--text-muted); font-size: .75rem; white-space: nowrap; }
.portal-users-actions { display: flex; justify-content: flex-end; gap: .45rem; }
.portal-users-clients { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 1rem 1.35rem 1.35rem; list-style: none; }
.portal-users-view-as-note { margin: 0 0 1.25rem; color: var(--text-muted); }
.portal-grain-switch { display: inline-flex; flex: 0 0 auto; gap: .45rem; }
.portal-grain-switch .btn { min-width: 92px; justify-content: center; }
.portal-grain-switch .portal-switch-active { pointer-events: none; }
.portal-toolbar {
  display: flex;
  align-items: flex-end;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: .75rem;
  background: var(--surface-panel);
  box-shadow: var(--shadow-soft);
}
.portal-search { min-width: min(100%, 22rem); flex: 1 1 24rem; margin: 0; }
.portal-search > span:first-child {
  display: block;
  margin-bottom: .3rem;
  color: var(--text-muted);
  font-size: .75rem;
  font-weight: 750;
}
.portal-search-control { position: relative; display: block; }
.portal-search-control .icon {
  position: absolute;
  top: 50%;
  left: .75rem;
  z-index: 1;
  color: var(--text-muted);
  transform: translateY(-50%);
}
.portal-search-control input { min-height: 42px; padding-left: 2.35rem; }
.portal-check-control {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: .45rem .75rem;
  border: 1px solid var(--border-control);
  border-radius: .45rem;
  background: var(--surface-section);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.portal-check-control input[type="checkbox"] {
  width: 1.05rem;
  min-height: 1.05rem;
  height: 1.05rem;
  margin: 0;
}
.portal-toolbar-actions { display: inline-flex; align-items: center; gap: .45rem; }
.portal-toolbar-actions .btn { min-height: 42px; }
.portal-cell-detail {
  display: block;
  margin-top: .15rem;
  color: var(--text-subtle);
  font-size: .75rem;
}
.portal-empty-row:hover > td { background: var(--surface-panel); }
.portal-empty-state {
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .4rem;
  padding: 2rem;
  color: var(--text-muted);
  text-align: center;
}
.portal-empty-state > .icon { width: 2rem; height: 2rem; color: var(--text-subtle); }
.portal-empty-state strong { color: var(--text-heading); font-size: 1rem; }
.portal-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
  color: var(--text-muted);
  font-size: .8rem;
}
.portal-pagination > :first-child { justify-self: start; }
.portal-pagination > :last-child { justify-self: end; }
/* List filters beside the search box, labelled like it. */
.portal-filter-control { display: flex; flex-direction: column; margin: 0; }
.portal-filter-control > span:first-child {
  margin-bottom: .3rem;
  color: var(--text-muted);
  font-size: .75rem;
  font-weight: 750;
}
.portal-filter-control select,
.portal-filter-control input { min-height: 42px; }
.portal-toolbar-actions .export-menu > summary { min-height: 42px; }
/* Detail pages: an inline row action, the file upload row and a closing note. */
.portal-inline-form { display: inline-flex; margin: 0 0 0 .35rem; vertical-align: middle; }
.portal-table-action > .btn { vertical-align: middle; }
.portal-upload-form { padding: 1rem 1.35rem 1.25rem; border-top: 1px solid var(--border); }
.portal-upload-form > label { display: block; margin-bottom: .4rem; font-weight: 700; }
.portal-upload-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.portal-upload-row input[type="file"] { flex: 1 1 18rem; min-width: 0; }
.portal-upload-form .field-hint { margin: .5rem 0 0; }
.portal-pre { white-space: pre-line; }
.portal-card-note { margin: 0; padding: 1rem 1.35rem; border-top: 1px solid var(--border); color: var(--text-muted); font-size: .84rem; }
.portal-data-card > .flash { margin: 1rem 1.35rem 0; }
.portal-inbound-files label { display: flex; flex-direction: column; gap: .35rem; max-width: 36rem; font-weight: 700; }

@media (max-width: 720px) {
  .portal-page-heading { align-items: stretch; flex-direction: column; gap: .75rem; }
  .portal-page-heading > .badge { align-self: flex-start; }
  /* Keep an empty table's message in view while the wide table scrolls. */
  .portal-empty-row > td { padding: 0; }
  .portal-empty-row .portal-empty-state { position: sticky; left: 0; width: calc(100vw - 2.5rem - 2px); padding: 2rem 1rem; }
  .portal-client-picker { justify-items: start; }
  .portal-client-picker select { max-width: min(15rem, 52vw); }
  .portal-toolbar { align-items: stretch; flex-direction: column; }
  .portal-search { min-width: 0; width: 100%; flex-basis: auto; }
  .portal-check-control { width: 100%; }
  .portal-toolbar-actions { width: 100%; flex-wrap: wrap; }
  .portal-filter-control { width: 100%; }
  .portal-toolbar-actions .btn { flex: 1 1 0; justify-content: center; }
  .portal-grain-switch { width: 100%; }
  .portal-grain-switch .btn { flex: 1 1 0; }
}
/* ===== What's New release notes ===== */
.whats-new-shell { max-width: 58rem; }
.whats-new-header p { margin-bottom: 0; color: var(--text-muted); }
.whats-new-list { display: grid; gap: .15rem; }
.whats-new-entry { min-width: 0; }
.whats-new-entry-summary { gap: .45rem; }
.whats-new-summary-copy { min-width: 0; }
.whats-new-summary-line { display: flex; align-items: baseline; gap: .65rem; flex-wrap: wrap; }
.whats-new-version { color: var(--text-heading); font-size: var(--type-section); font-weight: 780; }
.whats-new-date { color: var(--text-muted); font-size: var(--type-content); font-weight: 650; }
.whats-new-title { margin-top: .1rem; }
.whats-new-entry-body { padding-left: 1.05rem; }
.whats-new-entry-body > :first-child { margin-top: 0; }
.whats-new-entry-body > :last-child { margin-bottom: 0; }
.whats-new-entry-body ul { padding-left: 1.15rem; }
.whats-new-entry-body li + li { margin-top: .25rem; }
.whats-new-empty { padding: .7rem .8rem; border: 1px dashed var(--border-strong); background: var(--surface-section); }
.whats-new-empty p { margin-bottom: 0; color: var(--text-muted); }
/* Staff portal view-as and client incoming-delivery surfaces. */
.portal-view-as-banner{display:flex;align-items:center;justify-content:center;gap:1rem;padding:.8rem 1rem;border-bottom:2px solid var(--border,#cbd5e1)}
.portal-view-as-banner form{margin:0}.portal-view-as-readonly{background:#e5e7eb;color:#1f2937}
.portal-page .field-grid.portal-inbound-header{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem 1.25rem;margin:0 0 1.5rem}.portal-inbound-header label{display:flex;flex-direction:column;gap:.35rem;margin:0}.portal-inbound-notes{grid-column:1/-1}.portal-inbound-notes textarea{min-height:6rem}
.portal-inbound-form .line-grid-actions{margin-top:.75rem}.portal-inbound-form > form > .form-actions{display:flex;flex-wrap:wrap;gap:.6rem}.portal-inbound-form .portal-inbound-files{margin:1.75rem 0 1.5rem}
@media (max-width:720px){.portal-page .field-grid.portal-inbound-header{grid-template-columns:minmax(0,1fr)}}

/* scope indicator (2026-08-10; re-shaped 2026-08-11 into the "Viewing: … at …" sentence)
   SIZING CONTRACT for both nav indicators: `flex: 0 0 auto` — they size to their own
   content and never get squeezed below it. Until 2026-08-11 they were the only items in
   `.user-info` with a rem flex-basis WIDER than their own content (9.5rem / 7.5rem), so
   flex shrinking took most of the deficit out of them and stopped at their 5.5rem floors
   — which is narrower than the text. That, not `max-width`, is what cut "Standalone" to
   "Standalo…" and "3 companies" to "3 companie…". Measured in headless Chromium against
   the real nav, the accounting value clipped at every viewport from 1920 down for an
   office login, and both indicators clipped at 1024. `.nav-identity-email` (max-width +
   ellipsis + title tooltip) is the neighbour that gives ground instead. max-width here is
   only a clamp for pathological master data (companies.code is String(100)); those
   ellipsize with the full code still in the axis tooltip. */
body > nav .nav-scope-indicator {
  display: grid;
  flex: 0 0 auto;
  gap: 1px;
  line-height: 1.05;
  max-width: 12rem;
  min-width: 0;
  overflow: hidden;
}
body > nav .nav-scope-axis {
  align-items: baseline;
  display: grid;
  gap: .3rem;
  grid-template-columns: max-content minmax(0, 1fr);
  min-width: 0;
}
/* Sentence mode reads "Viewing: {company} at {location}" down the two rows the chip
   already had. The label track has to widen (1.8rem -> 2.9rem) to hold "Viewing:", but
   because the chip is now content-sized rather than pinned to a 9.5rem basis, the chip
   still renders NARROWER than the CO/LOC version it replaces — measured in Chromium at
   1920: 123.84px -> 119.00px unrestricted, 121.63px -> 106.75px selected, 115.06px ->
   111.78px bounded. The connectives live in the label column (right-aligned) so both
   values stay flush with each other, and stay muted micro-type so the scope values remain
   what the eye lands on. The axes keep their own spans, states and titles, so per-axis
   warning styling and every existing assertion still work. */
body > nav .nav-scope-indicator[data-scope-mode="sentence"] .nav-scope-axis {
  grid-template-columns: 2.9rem minmax(0, 1fr);
}
/* Company-only screens (Finances) read "Viewing: {company}" in the same voice. */
body > nav .nav-scope-indicator[data-scope-mode="sentence"] .nav-scope-label,
body > nav .nav-scope-indicator[data-scope-mode="company"] .nav-scope-label {
  letter-spacing: 0;
  text-align: right;
  text-transform: none;
}
body > nav .nav-scope-label {
  color: var(--brand-divider);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body > nav .nav-scope-value {
  color: var(--text-on-action);
  font-size: 10px;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  /* Bold capitals draw past their advance width; the padding keeps the last
     letter of a name that just fits from being shaved off. */
  padding-right: .2em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body > nav .nav-scope-axis.is-warning .nav-scope-value {
  color: #ffb4ab;
  font-weight: 850;
}

/* Accounting mode indicator and settings.
   Same sizing contract as the scope indicator above — content-sized, never squeezed. The
   value set is exactly {"QuickBooks", "Standalone"} (services/accounting_mode.py), so the
   content width is bounded and max-width is pure insurance. */
body > nav .nav-accounting-indicator {
  display: grid;
  flex: 0 0 auto;
  line-height: 1.05;
  max-width: 9rem;
  min-width: 0;
  overflow: hidden;
}
body > nav .nav-accounting-axis {
  align-items: baseline;
  display: grid;
  gap: .3rem;
  grid-template-columns: max-content minmax(0, 1fr);
  min-width: 0;
}
body > nav .nav-accounting-label {
  color: var(--brand-divider);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body > nav .nav-accounting-value {
  color: var(--text-on-action);
  font-size: 10px;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.accounting-settings-shell { max-width: 46rem; }
.accounting-settings-card { margin-top: .75rem; padding: .8rem 1rem; }
.accounting-settings-card p { margin: .35rem 0 .65rem; }
.accounting-mode-form fieldset { display: grid; gap: .45rem; margin: 0 0 .7rem; padding: .65rem .75rem; border: 1px solid var(--border); }
.accounting-mode-form legend { padding: 0 .25rem; color: var(--text-heading); font-weight: 750; }
.accounting-mode-form label { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: .45rem; align-items: start; min-width: 0; }
/* Narrow screens reduce indicator gutters while the navigation wraps to keep
   the accounting mode, scope, and sign-out control within the viewport. */
@media (max-width: 1050px) {
  body > nav .nav-accounting-indicator,
  body > nav .nav-scope-indicator { flex-shrink: 1; min-width: 5.5rem; }
  body > nav .nav-accounting-label,
  body > nav .nav-scope-label { font-size: 8px; }
  body > nav .nav-scope-indicator[data-scope-mode="sentence"] .nav-scope-axis {
    grid-template-columns: 2.4rem minmax(0, 1fr);
  }
}
/* Phone widths: shrink the type and the label gutters, but keep the indicators
   content-sized (no flex-basis override — a fixed basis with flex-shrink:0 would pin the
   box narrower than its text and reintroduce clipping). */
@media (max-width: 700px) {
  body > nav .nav-accounting-indicator {
    max-width: 9rem;
  }
  body > nav .nav-accounting-label { font-size: 8px; }
  body > nav .nav-accounting-value { font-size: 9px; }
}
@media (max-width: 700px) {
  body > nav .nav-scope-indicator {
    max-width: 9rem;
  }
  body > nav .nav-scope-indicator[data-scope-mode="sentence"] .nav-scope-axis {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }
  body > nav .nav-scope-label { font-size: 8px; }
  body > nav .nav-scope-value { font-size: 9px; }
}

/* Keep page chrome within laptop widths; tables own their horizontal scrolling. */
@media (max-width: 1600px) {
  body > nav,
  body.ui-density > nav { height: auto; min-height: 48px; flex-wrap: wrap; gap: .35rem .75rem; padding-block: .35rem; }
  body > nav ul { flex-wrap: wrap; min-width: 0; }
  body > nav .user-info { flex-wrap: wrap; margin-left: auto; max-width: 100%; }
}
@media (max-width: 700px) {
  body > nav { position: relative; overflow: visible; }
  body > nav .primary-nav { flex: 1 0 100%; order: 3; overflow: visible; }
  body > nav .nav-group { position: static; }
  body > nav .nav-submenu { left: .75rem; right: .75rem; min-width: 0; }
  body > nav .nav-submenu a { white-space: normal; }
}
.confirm-action-dialog { width: min(30rem, calc(100vw - 2rem)); padding: 1.25rem; border: 1px solid var(--border); border-radius: 12px; color: var(--text); }
.confirm-action-dialog::backdrop { background: rgb(8 18 48 / .45); }

/* Personal account forms keep credentials in a readable, bounded panel. */
.account-panel { max-width: 42rem; padding: 1.5rem; margin: 1.25rem 0; background: #fff; border: 1px solid #d6deee; border-radius: 8px; }
.account-panel h2 { margin-top: 0; }
.account-panel label { display: block; margin: .65rem 0; }
.account-panel .btn { margin-top: .5rem; }
.invoice-address { white-space: pre-line; overflow-wrap: anywhere; }

/* Account access uses the same two choices and scope lists for every user. */
.user-scope-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.user-scope-choices { min-width:0; max-height:16rem; overflow:auto; border:1px solid var(--border); padding:.65rem; }
.user-scope-choices label { display:flex; gap:.4rem; align-items:baseline; margin:.3rem 0; overflow-wrap:anywhere; }
.user-admin-choice { display:flex; gap:.4rem; align-items:baseline; font-weight:600; }
.user-account-status > summary { cursor:pointer; margin-bottom:.5rem; }
.user-account-status form { margin:.6rem 0; }
[data-dirty-save][hidden] { display:none !important; }
@media(max-width:640px) { .user-scope-grid { grid-template-columns:1fr; } }

body > nav .user-info .nav-my-account { font-size:12px; white-space:nowrap; }

/* Settings/users review, round two: clear choices and quiet controls. */
.btn:disabled, .btn[disabled] { opacity:.5; cursor:not-allowed; box-shadow:none; transform:none; }
.btn:disabled:hover { transform:none; }
.scaffold-table .btn:hover { transform:none; }
[data-card-resource="audit"] .modal-title:focus { outline:none; box-shadow:none; }
.user-card-dialog .modal-title:focus, [data-invite-step] h3:focus { outline:none; }
body.ui-density .user-card-dialog .scaffold-card-section > .field-grid { padding-top:.65rem; }
.user-card-dialog .scaffold-card-section-title { display:flex; align-items:center; gap:.4rem; }
.user-card-dialog .user-admin-choice { margin:.8rem 0; display:flex; align-items:center; gap:.4rem; }
.user-card-dialog [data-member-permissions] { margin:.7rem 0; }
.user-card-dialog .modal-actions { flex-wrap:wrap; }
.info-bubble { position:relative; display:inline-flex; font-size:.85rem; font-weight:400; }
.info-button { display:inline-flex; align-items:center; border:0; background:transparent; color:var(--text-muted); cursor:help; padding:.1rem; }
.info-bubble [role="tooltip"] { display:none; visibility:hidden; opacity:0; position:absolute; z-index:20; top:100%; left:0; width:min(22rem,65vw); padding:.8rem; border:1px solid var(--border); border-radius:.5rem; background:var(--surface,#fff); color:var(--text); line-height:1.5; box-shadow:0 6px 24px #10245225; }
.info-bubble:hover [role="tooltip"], .info-bubble:focus-within [role="tooltip"] { display:block; visibility:visible; opacity:1; }
.text-button { border:0; background:none; color:var(--action); text-decoration:underline; cursor:pointer; padding:.15rem; font:inherit; font-size:.8rem; }
.invite-progress { display:flex; gap:.6rem; list-style:none; padding:0; margin:0 0 1.2rem; }
.invite-progress li { flex:1; border-bottom:3px solid var(--border); color:var(--text-muted); padding:.5rem .15rem; }
.invite-progress [aria-current="step"] { border-color:var(--action); color:var(--action); font-weight:700; }
[data-invite-step][hidden], [data-member-scope][hidden], [data-member-permissions][hidden] { display:none !important; }
[data-resource-slug="users"] .page-actions > .btn { padding:.8rem 1.2rem; gap:.6rem; font-size:.95rem; }
[data-resource-slug="users"] .page-actions .icon { width:1.4rem; height:1.4rem; }
.settings-page { max-width:68rem; }
.accounting-settings-shell { max-width:58rem; }
.accounting-mode-form .accounting-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:0; padding:0; gap:1.25rem; margin:1.5rem 0; }
.accounting-mode-form .accounting-choice { position:relative; display:block; background:#fff; border:2px solid var(--border); border-radius:1rem; cursor:pointer; padding:1.75rem; }
.accounting-choice:has(input:checked) { border-color:var(--action); background:#f5f8ff; box-shadow:0 0 0 1px var(--action); }
.accounting-choice:has(input:focus-visible) { outline:3px solid var(--focus-ring); outline-offset:3px; }
.accounting-choice input { position:absolute; right:1rem; top:1rem; accent-color:var(--action); }
.accounting-choice-content { display:flex; flex-direction:column; gap:.8rem; line-height:1.5; }
.accounting-choice-content > strong { font-size:1.1rem; }
.accounting-logo { height:4rem; max-width:100%; object-fit:contain; object-position:left; margin-bottom:.5rem; }
.quickbooks-wordmark { height:4rem; display:flex; align-items:center; gap:.65rem; font-size:1.6rem; font-weight:750; color:#222; margin-bottom:.5rem; }
.quickbooks-wordmark > span { display:inline-flex; width:3rem; height:3rem; border-radius:50%; background:#2ca01c; color:#fff; align-items:center; justify-content:center; font-size:1.8rem; font-weight:400; letter-spacing:-.15rem; padding-right:.12rem; }
.workspace-action-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; margin:1.5rem 0; }
.workspace-action-card { display:flex; flex-direction:column; text-decoration:none; color:var(--text); background:white; border:1px solid var(--border); border-radius:1rem; padding:1.25rem; box-shadow:0 3px 12px #10245208; }
.workspace-action-card:hover { border-color:var(--action); box-shadow:0 6px 20px #10245213; color:var(--text); }
.workspace-action-card h2 { font-size:1.1rem; margin:1rem 0 .4rem; }
.workspace-action-card p { color:var(--text-muted); line-height:1.5; margin:0 0 1rem; }
.workspace-card-link { display:flex; align-items:center; gap:.3rem; color:var(--action); font-weight:650; margin-top:auto; }
.workspace-illustration { position:relative; display:flex; justify-content:center; align-items:center; height:9rem; border-radius:.6rem; overflow:hidden; background:linear-gradient(145deg,#edf4ff,#e5eaff); color:#285bd4; }
.workspace-illustration > span { width:6rem; height:6rem; background:#fff9; border:1px solid #b6cafd; border-radius:1rem; transform:rotate(-10deg); position:absolute; }
.workspace-illustration .icon { position:relative; width:3.7rem; height:3.7rem; stroke-width:1.3; }
.illustration-transfer { background:linear-gradient(145deg,#e8f7f5,#dff0ff); color:#107775; }
.illustration-deletion { background:linear-gradient(145deg,#fff3e6,#ffeadf); color:#ac5a23; }
.workspace-operation { margin-top:1.5rem; }
.back-link { display:inline-flex; align-items:center; gap:.2rem; margin-bottom:.8rem; }
body > nav .nav-identity-email { text-decoration:none; color:inherit; font-size:.75rem; }
body > nav .nav-identity-email:hover { text-decoration:underline; }
@media(max-width:800px) { .workspace-action-grid { grid-template-columns:1fr; } .workspace-illustration { height:7rem; } }
@media(max-width:600px) { .accounting-mode-form .accounting-choice-grid { grid-template-columns:1fr; } .accounting-mode-form .accounting-choice { padding:1.25rem; } .user-card-dialog .modal-footer { align-items:flex-start; gap:.8rem; } }

@media(max-width:600px) { .info-bubble [role="tooltip"] { position:fixed; left:1rem; right:1rem; width:auto; } }

/* Human review 3: stable invitation geometry and a dedicated personal view. */
body.ui-density .user-card-dialog[data-invite-card] { height:min(40rem,calc(100dvh - 24px)); }
.user-card-dialog[data-invite-card] > .modal-card { height:100%; max-height:100%; }
.user-card-dialog[data-invite-card] .modal-body { flex:1 1 auto; min-height:0; scrollbar-gutter:stable; }
.user-card-dialog[data-invite-card] .modal-head, .user-card-dialog[data-invite-card] .modal-footer { flex-shrink:0; }
.user-card-dialog[data-invite-card] .modal-head { min-height:3.5rem; flex-wrap:nowrap; }
.user-card-dialog .modal-head .invite-progress { flex:1; max-width:28rem; margin:0 .75rem; gap:.45rem; }
.user-card-dialog .modal-head .invite-progress li { text-align:center; padding:.35rem .2rem; font-size:.8rem; }
.invite-admin-question { border:0; padding:1rem .3rem; margin:0; }
.invite-admin-question legend { display:block; float:none; width:100%; padding:.75rem 0; font-size:1.15rem; font-weight:650; }
.permission-radio-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:.75rem 0 1.25rem; }
.permission-radio-grid fieldset { border:1px solid var(--border); border-radius:.4rem; padding:.75rem; min-width:0; }
.permission-radio-grid legend { padding:0 .35rem; font-weight:650; font-size:1rem; }
.permission-radio-options { display:flex; align-items:center; flex-wrap:wrap; gap:.7rem 1rem; }
.permission-radio-options label { display:inline-flex; align-items:center; gap:.4rem; margin:.1rem 0; cursor:pointer; }
.permission-radio-options input[type="radio"] { width:1rem; height:1rem; margin:0; accent-color:var(--action); }
.user-card-dialog .user-scope-grid { margin-top:1rem; }
.user-scope-choices legend { font-size:1rem; font-weight:650; padding:0 .3rem; }
.user-scope-choices label, .scope-view-choices label { align-items:flex-start; }
.user-scope-choices input[type="checkbox"], .scope-view-choices input[type="checkbox"] { flex:0 0 1rem; width:1rem; height:1rem; margin:.15rem 0 0; }
.user-scope-choices label > span { flex:1; line-height:1.45; }
.scope-view-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; margin:1.5rem 0; }
.scope-view-choices { background:var(--surface-panel); border:1px solid var(--border); border-radius:.65rem; padding:1rem 1.25rem; min-width:0; }
.scope-view-choices legend { font-size:1.1rem; font-weight:700; padding:0 .35rem; }
.scope-view-choices label { display:flex; gap:.5rem; margin:.65rem 0; line-height:1.45; }
.scope-view-choices .scope-master, .user-scope-choices .scope-master { border-bottom:1px solid var(--border); padding-bottom:.65rem; }
body > nav a.nav-scope-indicator { text-decoration:none; color:inherit; border-radius:.3rem; }
body > nav a.nav-scope-indicator:hover { background:#ffffff16; }
body > nav .nav-as { color:#dbe5ff; font-size:.75rem; }
@media(max-width:650px) {
  .permission-radio-grid, .scope-view-grid { grid-template-columns:1fr; }
  .user-card-dialog .modal-head .invite-progress { margin:0; gap:.2rem; }
  .user-card-dialog .modal-head .invite-progress li { font-size:.7rem; }
  .user-card-dialog[data-invite-card] .modal-title { font-size:.95rem; white-space:nowrap; }
}
.account-action-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.account-action-grid .workspace-illustration { height:7rem; }
@media(max-width:650px) { .account-action-grid { grid-template-columns:1fr; } }

.account-settings-page .page-title { min-width:0; overflow-wrap:anywhere; }

/* Company review: keep cards and toolbar actions stable during keyboard/hover use. */
.scaffold-card-dialog .modal-title:focus { outline:none; box-shadow:none; }
.scaffold-card-dialog textarea { resize:none; max-width:100%; }
/* The list region clips overflow, so header buttons do not lift on hover. */
[data-scaffold-list] :is(.page-actions, .section-header) .btn:hover { transform:none; box-shadow:none; }
.master-data-warnings { padding:.75rem 1rem; margin:.5rem 0 1rem; background:#fff8e6; border:1px solid #e5b447; border-radius:.4rem; }
.master-data-warnings ul { margin:.4rem 0 0; padding-left:1.25rem; }
.master-data-warnings li + li { margin-top:.3rem; }

.address-lookup { margin:.8rem 0 1.2rem; padding:.75rem; border:1px solid var(--border); border-radius:.4rem; }
.address-lookup-search { display:flex; gap:.5rem; margin:.4rem 0; }
.address-lookup-search input { flex:1; min-width:0; }
.address-suggestion { display:block; width:100%; padding:.65rem; text-align:left; border:1px solid var(--border); background:var(--surface-panel); color:var(--text); cursor:pointer; }
.address-suggestion:hover,.address-suggestion:focus-visible { background:var(--surface); outline:2px solid var(--action); outline-offset:-2px; }

/* A card footer action that posts on its own (Deactivate/Reactivate in view mode). */
.modal-actions > .inline-form { display: inline-flex; margin: 0; }

/* Inventory Setup: conversion calculator (item_setup.js) under a units section. */
.conversion-calculator {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.45rem .75rem;
  padding:.45rem .65rem;
  border:1px dashed var(--border);
  border-radius:6px;
  background:var(--surface-subtle);
}
.conversion-calculator-label { color:var(--text-muted); font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.conversion-calculator-sum { display:inline-flex; align-items:center; flex-wrap:wrap; gap:.4rem; font-weight:650; }
.conversion-calculator-sum[hidden], .conversion-calculator [hidden] { display:none; }
.conversion-calculator input { width:7.5rem; }
.conversion-calculator .field-hint { margin:0; }
.scaffold-card-section-extra { margin-top:.6rem; }

/* A kit's components (items/_kit_components.html). */
.kit-components-table { width:100%; border-collapse:collapse; }
.kit-components-table th { padding:.15rem .5rem .25rem 0; color:var(--text-muted); font-size:.8rem; font-weight:700; text-align:left; }
.kit-components-table td { padding:.2rem .5rem .2rem 0; vertical-align:middle; }
.kit-components .kit-components-table td:first-child { width:55%; }
.kit-components .kit-components-table td:nth-child(2) input { width:8rem; }
.kit-components .kit-components-table td:last-child { width:1%; }
.kit-components-table:not(.kit-components .kit-components-table) { width:auto; min-width:50%; }
.kit-build-links { margin:.5rem 0 0; }
.kit-components [data-kit-component-add] { margin-top:.45rem; }

/* Assistant files (AI Chat → Assistant files). */
.assistant-files-controls { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: 1rem; padding: .75rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-panel); }
.assistant-files-controls form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-width: 0; }
.assistant-files-controls :where(select, input[type=search]) { width: auto; min-width: 11rem; max-width: 100%; }
.assistant-files-controls input[type=search] { min-width: 16rem; }
.assistant-files-controls input[type=file] { width: auto; max-width: 16rem; }
.assistant-files-upload .field-hint { flex-basis: 100%; margin: 0; }
.assistant-files-folder { margin-top: 1rem; }
.assistant-files-table td { vertical-align: top; }
.assistant-file-description { max-width: 46rem; white-space: pre-line; }
.assistant-file-tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.assistant-file-name { overflow-wrap: anywhere; }
.assistant-file-actions { white-space: nowrap; }
.assistant-file-actions > *, .assistant-file-actions form { display: inline-block; margin: 0 0 .25rem .25rem; vertical-align: top; }
.assistant-file-edit-row > td { background: var(--surface-section); }
.assistant-file-edit-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1rem; }
.assistant-file-edit-form > label { display: flex; flex-direction: column; gap: .2rem; font-weight: 600; }
.assistant-file-edit-form > label input:not([type=checkbox]) { width: 16rem; max-width: 100%; font-weight: 400; }
.assistant-file-edit-form > .assistant-file-shared { flex-direction: row; align-items: center; gap: .4rem; padding-bottom: .45rem; }
.assistant-file-shared .field-hint { font-weight: 400; }
.assistant-file-edit-actions { display: flex; gap: .5rem; }
@media (max-width: 700px) {
  .assistant-files-controls, .assistant-files-controls form { flex-direction: column; align-items: stretch; }
  .assistant-files-controls :where(select, input[type=search], input[type=file]) { width: 100%; min-width: 0; max-width: none; }
  .assistant-files-table thead { display: none; }
  .assistant-files-table, .assistant-files-table tbody, .assistant-files-table tr, .assistant-files-table td { display: block; width: 100%; }
  .assistant-files-table tr[hidden] { display: none; }
  .assistant-files-table tr { padding: .5rem 0; border-bottom: 1px solid var(--border); }
  .assistant-files-table td { padding: .15rem .5rem; border: 0; }
  .assistant-file-actions { white-space: normal; text-align: left; }
  .assistant-file-actions > *:first-child { margin-left: 0; }
  .assistant-file-edit-form > label, .assistant-file-edit-form > label input:not([type=checkbox]) { width: 100%; }
}