/* 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);
}
body.modal-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 { font-size: 12px; color: var(--brand-divider); display: flex; align-items: center; gap: .45rem; }
body > nav .nav-version { color:var(--brand-divider); font-size:.78rem; white-space:nowrap; align-self:center; margin-left:auto; }

/* 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; }

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; min-height:40px; padding:8px 10px; border:1px solid var(--border-control); border-radius:7px; font:inherit; font-size:14px; }
.list-controls button, .list-controls a { min-height:40px; 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; }
.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); }

.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 { min-height:40px; 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(--warning); font-size:.85rem; }
.searchable-select-options { margin-top: 5px; overflow-y: auto; }
.searchable-select-option {
  display: block;
  width: 100%;
  min-height:40px;
  padding: 8px;
  border: 0;
  border-radius: 4px;
  background: var(--surface-panel);
  color: var(--text);
  text-align: left;
  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; }
.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-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 { min-height:40px; 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); }
/* 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-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; }
.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-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 input, .scaffold-toolbar select { width:auto; min-height:40px; }
.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 { min-height:40px; 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; min-height:40px; 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; width:40px; height:40px; color:inherit; border-radius:50%; text-decoration:none; }
.scaffold-filter-chip a:hover { background:rgba(20,87,238,.12); }
.scaffold-filter-chip .icon { width:13px; height:13px; }
.scaffold-clear-filters { min-height:40px; 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 { max-width:100%; overflow:auto; border:1px solid var(--border); border-radius:12px; 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); }
.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 { min-height:40px; 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; }
.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;
}
.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-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-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; }
[data-solid-left-disclosure] .scaffold-card-section-collapsible > summary > .icon,
details[data-solid-left-disclosure] > summary > .icon { display:none; }
.scaffold-card-dialog .modal-body { scroll-padding-block:.75rem 6rem; }
.scaffold-card-dialog[data-card-resource=clients] .modal-head > .modal-actions {
  min-width:0;
  max-width:72%;
  flex-wrap:nowrap;
  justify-content:flex-end;
  margin-top:-3px;
  padding-top:3px;
  overflow-x:auto;
  white-space:nowrap;
  scrollbar-width:thin;
}
.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; }
.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;
}
.scaffold-card-section-title > .icon { transition:transform .16s ease; }
section.scaffold-card-section > .scaffold-card-section-title { cursor:default; }
.scaffold-card-section[open] > .scaffold-card-section-title > .icon { transform:rotate(90deg); }
.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;
  border-left:1px solid var(--section-rule);
}
.scaffold-card-subsection { margin-bottom:.75rem; }
.scaffold-card-subsection > .scaffold-card-section-title {
  min-height:32px;
  font-size:.84rem;
}
.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:12px; 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; } }
html.js [data-row-motion-root][data-row-motion="enter"] [data-row-motion-item] {
  opacity:0;
  transform:translateY(7px);
}
.row-motion-entering [data-row-motion-item] { animation:scaffold-row-enter 260ms cubic-bezier(.2,.8,.2,1) var(--row-delay, 0ms) both; }
@keyframes scaffold-row-enter {
  from { opacity:0; transform:translateY(7px); }
  to { opacity:1; transform:translateY(0); }
}

#receipts-list-region .list-controls { display:flex; align-items:center; gap:.75rem; margin-bottom:.75rem; padding:.75rem; border:1px solid var(--border); border-radius:12px; background:var(--surface-panel); box-shadow:var(--shadow-soft); }
#receipt-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; }
#receipt-filters > input, #receipt-filters > select, #receipt-filters > label { width:100%; min-width:0; margin:0; }
#receipt-filters .scaffold-page-size { display:grid; grid-template-columns:auto minmax(58px, 1fr); }
#receipt-filters > a { min-height:40px; 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 { 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 { align-items:stretch; flex-direction:column; }
  #receipt-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);
}
.client-card-workspace > .modal-card { min-width:0; }
.client-reference-drawer {
  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;
  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:8px;
}
.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);
}
.client-reference-legacy-section + .client-reference-legacy-section { margin-top:.75rem; }
.client-reference-legacy-section h4 {
  margin:0 0 .3rem;
  padding-bottom:.25rem;
  border-bottom:1px solid var(--section-rule);
  color:var(--text-heading);
  font-size:.76rem;
}
.client-reference-legacy .scaffold-field-grid {
  grid-template-columns:minmax(0, 1fr);
  margin:0;
}
.client-reference-legacy .scaffold-card-field { min-height:28px; }
.client-reference-legacy .scaffold-field-label-row,
.client-reference-legacy .field-grid-control { font-size:10px; }
.modal-actions [data-client-drawer-trigger].is-active {
  border-color:var(--brand-blue);
  background:var(--surface-info);
  color:var(--brand-blue-deep);
}

@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 {
    width:100%;
    height:auto;
    min-height:0;
    border-top:1px solid var(--border-strong);
    border-left:0;
  }
}

/* ============================ 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; }
.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; }
.kate-attention { color: #a8500a; font-weight: 700; background: #fff3e0; padding: 3px 10px; border-radius: 12px; }

/* Rollback-only recurring-rule shadow loop. */
.rule-shadow { margin: 18px 0 26px; padding: 18px; border: 2px solid #d9c36a; border-radius: 12px; background: #fffdf2; }
.rule-shadow-banner { margin: -18px -18px 16px; padding: 10px 18px; background: #5b4300; color: #fff; font-weight: 800; letter-spacing: .02em; border-radius: 9px 9px 0 0; }
.rule-shadow-heading { display: flex; justify-content: space-between; gap: 20px; align-items: start; }
.rule-shadow-heading h2, .rule-shadow-listings h3 { margin: 0 0 6px; }
.rule-shadow-heading p { margin: 0 0 14px; max-width: 850px; }
.rule-shadow-elapsed { white-space: nowrap; font-weight: 700; }
.rule-shadow-controls { display: grid; grid-template-columns: repeat(2, minmax(150px, 220px)) minmax(260px, 1fr) auto; gap: 12px; align-items: end; margin: 14px 0; }
.rule-shadow-controls label, .rule-shadow-result-filter { display: grid; gap: 5px; font-weight: 700; }
.rule-shadow-clients { grid-row: span 2; }
.rule-shadow-clients select { min-height: 116px; }
.rule-shadow-gaps { margin: 14px 0; padding: 12px; border-left: 5px solid #b56500; background: #fff2dc; }
.rule-shadow-result-filter { max-width: 330px; margin: 18px 0 10px; }
.rule-shadow-rollup { margin: 16px 0; padding: 16px; border: 1px solid #cbd8e6; border-radius: 10px; background: #fff; }
.rule-shadow-rollup h3 { margin: 0; font-size: 1.35rem; color: #173b5e; }
.rule-shadow-match-stats { margin: 6px 0 14px; color: #4f6478; font-weight: 700; }
.rule-shadow-splits { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rule-shadow-splits article { padding: 12px; border: 1px solid #dce5ee; border-radius: 8px; background: #f8fafc; }
.rule-shadow-splits article:first-child { background: #f5f2eb; }
.rule-shadow-splits article:last-child { background: #eef7f1; border-color: #cfe4d5; }
.rule-shadow-splits p { margin: 5px 0; font-variant-numeric: tabular-nums; font-weight: 700; }
.rule-shadow-splits small { display: block; color: #52667b; line-height: 1.35; }
.rule-shadow-rollup h4 { margin: 16px 0 7px; }
.rule-shadow-top-scroll, .rule-shadow-service-scroll { max-width: 100%; overflow-x: auto; }
.rule-shadow-top-table { min-width: 760px; margin: 0; }
.rule-shadow-service-compare { margin-top: 18px; }
.rule-shadow-service-compare > h3 { margin-bottom: 4px; }
.rule-shadow-service-table { min-width: 1050px; margin: 0; }
.rule-shadow-service-table .muted { font-size: 11px; white-space: normal; }
.rule-shadow-listings { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rule-shadow-listings > section { min-width: 0; }
.rule-shadow-listing { min-width: 700px; }
.rule-shadow-total-table tfoot th { border-top: 2px solid currentColor; }
@media (max-width: 1000px) {
  .rule-shadow-controls, .rule-shadow-listings, .rule-shadow-splits { grid-template-columns: 1fr; }
  .rule-shadow-clients { grid-row: auto; }
}
/* v3 item #4: unconfirmed indicator — visually SECONDARY (muted) vs the attention 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: 8px; 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-table td:nth-child(2) small { display: block; color: #68798d; margin-top: .2rem; }
.receipt-charge-table input[type="number"] { width: 8.5rem; }
.receipt-charge-table .money { white-space: nowrap; font-weight: 700; }
.receipt-charge-skip { display: inline-flex; align-items: center; gap: .35rem; margin: 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-panel {
  margin-top: .8rem;
  padding-top: .7rem;
  border-top: 1px solid var(--border);
}
.receipt-operator-charge-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .55rem;
}
.receipt-operator-charge-heading h3 {
  margin: 0;
  color: var(--text-heading);
  font-size: var(--type-section);
}
.receipt-operator-charge-heading p {
  margin: .18rem 0 0;
  color: var(--text-muted);
  font-size: var(--type-content);
}
.receipt-operator-charge-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: .4rem .65rem;
}
.receipt-operator-charge-field {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: .35rem;
  min-width: 0;
  margin: 0;
}
.receipt-operator-charge-field > span {
  color: var(--text-muted);
  font-size: .75rem;
  font-weight: 650;
}
.receipt-operator-charge-field > :where(input, select) {
  width: 100%;
  min-width: 0;
}
.receipt-operator-charge-description { grid-column: span 2; }
.receipt-operator-charge-grid > .btn { justify-self: stretch; }
@media (max-width: 900px) {
  .receipt-operator-charge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .receipt-operator-charge-grid { grid-template-columns: minmax(0, 1fr); }
  .receipt-operator-charge-description { grid-column: auto; }
}
.receipt-document-page {
  width: min(1520px, calc(100vw - 2rem));
  margin-left: 50%;
  transform: translateX(-50%);
}
.receipt-document-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: .75rem 0 1rem;
}
.receipt-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, .receipt-lifecycle-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.receipt-document-actions form, .receipt-lifecycle-actions form { margin: 0; }
.receipt-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 > h2,
.receipt-document-section > .section-header h2 {
  margin: 0 0 1rem;
  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: 1rem 0 2rem;
}
.receipt-page-action-buttons { margin: 0; }
.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; }
.receipt-correction-dialog { width: min(800px, calc(100vw - 32px)); }
.receipt-correction-dialog .modal-head h2 { margin: 0; font-size: var(--type-card); }
.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; }
@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); }
}
@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-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; }
.receipt-list-row { cursor:pointer; }
.receipt-list-row:focus { outline:2px solid var(--action); outline-offset:-2px; }
.receipt-document-page .btn-danger { background:var(--surface-panel); color:var(--danger); border-color:var(--danger-border); }
.receipt-document-page .btn-danger:hover { background:var(--surface-danger); color:var(--danger-hover); }
.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; }
.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; justify-content: space-between; align-items: center; padding: 0.7rem 0.9rem; border-bottom: 2px solid #e0e8f0; }
.ai-title { font-weight: 700; color: #1a3a5c; display: flex; align-items: center; gap: 8px; }
.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; }
.ai-head-right { display: flex; align-items: center; gap: 8px; }
.ai-meter { font-size: 12px; color: #4a5b70; background: #f4f7fa; border: 1px solid #e5ecf3; border-radius: 10px; padding: 2px 9px; }
.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; }

/* 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-upload-knowledge {
  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-upload-knowledge:hover { border-color: #1a6ab8; background: #eaf2fb; color: #0d4f8c; }
.ai-upload-knowledge:focus-visible { outline: 3px solid rgba(20,87,238,.25); outline-offset: 2px; }
.ai-upload-knowledge svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.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-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; }
.cc-month-label { font-weight: 700; color: #0d2b47; }
.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); } }

/* 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); }
.kate-attention { cursor: pointer; border: none; font-family: inherit; }
.kate-attention:hover { filter: brightness(0.96); }
.attn-section { border: 1px solid #e0e8f0; border-radius: 8px; padding: 0.65rem 0.8rem; margin: 0.6rem 0; background: #fff; }
.attn-section-head { display: flex; align-items: center; gap: 0.55rem; }
.attn-section-head h3 { margin:0; color:var(--text-heading); font-size:.95rem; }
.attn-section-head .mini-link { margin-left: auto; }
.attn-count { display: inline-block; min-width: 1.35rem; padding: 1px 6px; border-radius: 10px; text-align: center; background: #eef2f7; color: #36506a; font-size: 0.75rem; }
.attn-scope { color: #7a8aa0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; }
.attn-compact { margin: 0.45rem 0 0; padding-left: 1.15rem; color: #4a5b70; font-size: 0.82rem; }
.attn-compact li { margin: 0.22rem 0; }
.attn-more { display: inline-block; margin-top: 0.35rem; }
.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; }

/* Billing shadow-run comparison */
.shadow-controls { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: end; margin-bottom: 0.8rem; padding: 0.65rem; background: #fff; border: 1px solid #e5ecf3; border-radius: 8px; }
.shadow-controls label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 12px; color: #5a6b80; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.shadow-controls select, .shadow-controls input { min-width:120px; padding:7px 9px; border:1px solid var(--border-control); border-radius:6px; background:var(--surface-panel); color:var(--text-heading); font:inherit; }
.shadow-controls input { min-width: 150px; }
.shadow-controls .primary { padding:8px 14px; border:1px solid var(--action); border-radius:6px; background:var(--action); color:var(--text-on-action); font-weight:700; cursor:pointer; }
.shadow-summary { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 0.65rem; margin-bottom: 0.55rem; }
.shadow-summary div { background: #fff; border: 1px solid #e0e8f0; border-radius: 8px; padding: 0.7rem 0.85rem; }
.shadow-summary span { display: block; color: #6c7d91; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
.shadow-summary strong { display: block; margin-top: 0.2rem; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.shadow-run { min-width: 0; overflow-x: hidden; }
.shadow-summary-scroll, .shadow-detail-scroll { max-width: 100%; overflow-x: auto; }
.shadow-summary-scroll { border: 1px solid #e0e8f0; border-radius: 8px; background: #fff; }
.shadow-summary-scroll .shadow-table { min-width: 920px; table-layout: fixed; margin: 0; box-shadow: none; }
.shadow-summary-scroll .shadow-table thead th { position: sticky; top: 0; z-index: 2; }
.shadow-summary-scroll .drill-container > td { padding: 0.8rem; max-width: 0; }
.shadow-table .client-row { cursor: pointer; }
.shadow-table .client-row:hover td { background: #eef4fb; }
.shadow-sev-major td:first-child { box-shadow: inset 3px 0 0 #c0392b; }
.shadow-sev-minor td:first-child { box-shadow: inset 3px 0 0 #e8a54a; }
.shadow-sev-match td { background: #f3fbf6; }
.client-row.shadow-sev-match:hover td { background: #edf8f1; }
.shadow-sev-match td:first-child { box-shadow: inset 3px 0 0 #2f8f4f; }
.shadow-row-chip { display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 10px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; vertical-align: middle; }
.shadow-row-chip-red { background: #fde9e7; color: #9c2f24; }
.shadow-row-chip-yellow { background: #fff0d9; color: #8a5200; }
.shadow-row-chip-green { background: #e3f5e9; color: #176b38; }
.shadow-legend { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; margin: 0 0 0.65rem; color: #5a6b80; font-size: 12px; }
.shadow-legend span { display: inline-flex; align-items: center; gap: 5px; }
.shadow-legend-spacer { flex: 1; min-width: 16px; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.legend-major { background: #c0392b; }
.legend-minor { background: #e8a54a; }
.legend-match { background: #2f8f4f; }
.shadow-note { margin-bottom: 0.75rem; }
.shadow-section-label { margin: 0.8rem 0 0.35rem; color: #36506a; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; }
.shadow-bucket { margin: 0.5rem 0 1rem; border: 1px solid #e5ecf3; border-radius: 8px; overflow: hidden; background: #fff; }
.shadow-bucket-head { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; padding: 0.55rem 0.75rem; background: #f7f9fc; border-bottom: 1px solid #e5ecf3; }
summary.shadow-bucket-head { cursor: pointer; list-style: none; }
summary.shadow-bucket-head::-webkit-details-marker { display: none; }
.shadow-bucket-head span { color: #5a6b80; font-variant-numeric: tabular-nums; }
.shadow-line-table { margin: 0; }
.shadow-audit-table { width: max-content; min-width: 100%; table-layout: auto; }
.shadow-audit-table th, .shadow-audit-table td { vertical-align: top; white-space: nowrap; max-width: none; overflow-wrap: normal; }
.shadow-audit-table thead th { position: sticky; top: 0; z-index: 1; }
.shadow-audit-table tbody tr.shadow-pair-start td { border-top: 2px solid #8fa0b4; }
.shadow-audit-table tbody tr:first-child td { border-top-width: 1px; }
.shadow-camelot-row td { border-top: 1px dashed #d7e0ea; background: #fcfcfd; }
.shadow-audit-note { padding: 0.45rem 0.75rem; color: #5f7084; font-size: 12px; background: #fffdf5; border-bottom: 1px solid #e5ecf3; }
.shadow-line-meta { margin-top: 0.2rem; color: #5f7084; font-size: 12px; font-variant-numeric: tabular-nums; white-space: normal; min-width: 180px; max-width: 360px; overflow-wrap: anywhere; }
.shadow-status { display: inline-block; white-space: nowrap; padding: 2px 7px; border-radius: 10px; font-size: 11px; font-weight: 800; text-transform: uppercase; background: #e8edf3; color: #36506a; }
.shadow-status-match .shadow-status { background: #e3f5e9; color: #176b38; }
.shadow-status-amount-diff .shadow-status { background: #fff0d9; color: #8a5200; }
.shadow-status-basis-diff .shadow-status { background: #e9f3ff; color: #205493; }
.shadow-status-missing-engine .shadow-status, .shadow-status-needs-data .shadow-status { background: #fde9e7; color: #9c2f24; }
.shadow-status-engine-extra .shadow-status { background: #e7f0ff; color: #205493; }
.shadow-status-raw-engine .shadow-status { background: #e7f0ff; color: #205493; }
.shadow-status-raw-camelot .shadow-status { background: #ede7f6; color: #4527a0; }
.shadow-status-operator-needed .shadow-status { background: #f0eaff; color: #62429b; }
.rule-shadow-lot-drill > td { padding: 0.45rem 0.7rem 0.8rem; background: #f8fafc; }
.rule-shadow-lot-drill details > summary { cursor:pointer; color:var(--text-heading); font-weight:800; }
.rule-shadow-lot-buckets { display: grid; gap: 0.55rem; margin-top: 0.65rem; }
.rule-shadow-lot-bucket { min-width: 0; border: 1px solid #dfe7f0; border-radius: 7px; background: #fff; overflow: hidden; }
.rule-shadow-lot-bucket-head { display: flex; flex-wrap: wrap; gap: 0.8rem; padding: 0.5rem 0.65rem; background: #f4f7fa; color: #52667b; font-variant-numeric: tabular-nums; }
.rule-shadow-lot-bucket-head strong { color:var(--text-heading); text-transform:uppercase; }
.rule-shadow-lot-scroll { max-width: 100%; overflow-x: auto; }
.rule-shadow-lot-table { width: max-content; min-width: 100%; margin: 0; }
.rule-shadow-lot-table th, .rule-shadow-lot-table td { white-space: nowrap; }
.rule-shadow-lot-table td:last-child { min-width: 260px; white-space: normal; }
.shadow-matched { margin-top: 1rem; border: 1px solid #d8e3ee; border-radius: 8px; background: #fff; overflow: hidden; }
.shadow-matched > summary { display:flex; justify-content:space-between; gap:1rem; padding:.65rem .8rem; cursor:pointer; font-weight:800; color:var(--text-heading); background:var(--surface-section); }
.shadow-matched > summary span { color: #5a6b80; font-weight: 600; font-variant-numeric: tabular-nums; }
.shadow-differences { border-color: #f0c77b; }
.shadow-differences > summary { background: #fff8ec; color: #7a4a00; }
.shadow-unmatched { border-color: #efb3ad; }
.shadow-unmatched > summary { background: #fff1ef; color: #9c2f24; }
.shadow-correct { border-color: #cfe8d7; }
.shadow-correct > summary { background: #f3fbf6; color: #176b38; }
.shadow-bucket-matched { margin: 0; border-left: 0; border-right: 0; border-bottom: 0; border-radius: 0; }
.shadow-bucket-matched > summary { cursor: pointer; }
.shadow-no-activity-row td { background: #f8fafc; }
.shadow-no-activity { margin: 0; border-color: #d8e3ee; }
.shadow-no-activity > summary { background: #f7f9fc; color: #5a6b80; }
.shadow-no-activity-list { display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; padding: 0.65rem 0.8rem; background: #fff; }
.shadow-no-activity-list span { color: #5a6b80; font-size: 12px; background: #eef2f7; border-radius: 10px; padding: 2px 8px; }
@media (max-width: 760px) {
  .shadow-summary { grid-template-columns: 1fr; }
}

/* 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; 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; }
.center-modal.small { width: 440px; }
.center-modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%,-50%) scale(1); }
.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, .attn-form .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, .attn-form .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; }

/* Attention queue (feedback B#5) */
.attn-intro { color: #4a5b70; font-size: 13px; }
.attn-item { border: 1px solid #eadfce; background: #fffaf3; border-radius: 8px; padding: 0.7rem 0.9rem; margin-bottom: 0.7rem; }
.attn-cause { font-weight:700; color:var(--text-heading); }
.attn-note-flag { font-weight: 500; color: #a8500a; margin-left: 8px; font-size: 12px; }
.attn-plain { color: #4a5b70; font-size: 13px; margin: 4px 0 8px; }
.attn-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.attn-act summary { cursor:pointer; list-style:none; display:inline-block; padding:4px 10px; border:1px solid var(--border); border-radius:6px; background:var(--surface-panel); font-size:12px; font-weight:600; color:var(--text-heading); }
.attn-act summary::-webkit-details-marker { display: none; }
.attn-act[open] summary { background:var(--action); color:var(--text-on-action); }
.attn-form { margin-top: 8px; padding: 8px; background: #fff; border: 1px solid #e5ecf3; border-radius: 6px; }
.attn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; }
.attn-grid label { font-size: 11px; color: #6a7a90; display: flex; flex-direction: column; }
.attn-grid input, .attn-reason { padding: 6px 8px; border: 1px solid #cbd5e3; border-radius: 5px; font-size: 13px; }
.attn-reason { width: 100%; margin-bottom: 6px; }
.attn-hint, .attn-foot { font-size: 11px; color: #8090a4; }
.mini-link { color: #2e6da4; cursor: pointer; text-decoration: none; font-size: 13px; }
.sup-item { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid #eef2f7; font-size: 13px; }
.sup-reason { color: #6a7a90; }
.sup-rev { margin-left: auto; }

/* 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-end; gap: 1rem; }
.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; }
.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: 8px; }
.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; }
@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 0.65rem; border-bottom: 3px solid transparent; }
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: 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; }
.profit-period { display: flex; align-items: end; gap: .55rem; flex-wrap: wrap; margin: 0; }
.profit-period label { margin: 0; color: #5a6b80; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.profit-period select { display: block; margin-top: 4px; 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 { 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,
  .shadow-controls,
  .hub-manage {
    display: none !important;
  }

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

  .hub.shadow-print {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .shadow-print .hub-header,
  .shadow-print .shadow-summary,
  .shadow-print .shadow-bucket {
    break-inside: avoid;
  }

  .shadow-print .drill-container {
    display: table-row !important;
  }

  .shadow-print .table-scroll {
    overflow: visible;
  }

  .shadow-print table {
    font-size: 9px;
  }

  .shadow-print th,
  .shadow-print td {
    padding: 3px 4px;
  }

  .shadow-print .shadow-audit-note,
  .shadow-print .shadow-line-meta {
    color: #374151;
  }
}

/* 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; }
.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-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%; }
}
/* ================= 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; }
}

/* Knowledge Library ------------------------------------------------------ */
/* ui-literal-allowlist:start knowledge-library-internals
   Document review/status colors carry domain meaning and remain isolated
   from the application foundation palette. */
.chat-workspace {
  width: min(1400px, calc(100vw - 2rem));
  height: calc(100vh - 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;
}
.knowledge-chat-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  width: min(400px, 100%);
  height: 100%;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateX(12px);
  pointer-events: none;
  background: #f8fafc;
  border: 1px solid #d8e0ec;
  border-radius: 10px;
  box-shadow: -8px 0 26px rgba(7,20,61,.2);
  transition: transform .2s ease, opacity .14s ease, visibility 0s linear .2s;
  display: flex;
  flex-direction: column;
}
.knowledge-chat-drawer.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
  transition-delay: 0s;
}
.knowledge-chat-head {
  min-width: 0;
  width: 100%;
  min-height: 66px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #d8e0ec;
  background: #fff;
}
.knowledge-chat-head-actions { display: flex; align-items: center; gap: 5px; }
.knowledge-chat-head h2, .knowledge-dialog-head h2 { margin: 0; color: #1a3a5c; font-size: 1.25rem; }
.knowledge-chat-eyebrow { display: block; margin-bottom: 1px; color: #78869b; font-size: 10px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.knowledge-chat-close {
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: #53627a; cursor: pointer; font-size: 25px; line-height: 1;
}
.knowledge-chat-close:hover { background: #edf2f8; color: #1a3a5c; }
.knowledge-chat-scroll { min-width: 0; width: 100%; flex: 1; min-height: 0; overflow-y: auto; }
.knowledge-chat-notice { margin: 12px; padding: 10px 12px; border: 1px solid #91c89f; border-radius: 8px; background: #edf9f0; color: #17633f; }
.knowledge-chat-conflicts { display: block; margin: 12px; padding: 10px 12px; border: 1px solid #e4bd5f; border-radius: 8px; background: #fff9eb; color: #654c16; text-decoration: none; font-weight: 700; }
.knowledge-chat-upload, .knowledge-chat-library { padding: 16px; }
.knowledge-chat-upload { border-bottom: 1px solid #d8e0ec; }
.knowledge-chat-section-head { display: flex; align-items: start; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.knowledge-chat-section-head h3 { margin: 0 0 3px; color: #1a3a5c; font-size: 1rem; }
.knowledge-chat-section-head p { margin: 0; color: #66758d; font-size: 12px; line-height: 1.4; }
.knowledge-chat-drop {
  min-height: 200px;
  padding: 20px 16px;
  border: 2px dotted #9aa8b9;
  border-radius: 12px;
  background: #f1f3f6;
  color: #4f5e72;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.knowledge-chat-drop:hover, .knowledge-chat-drop.is-dragging { border-color: #1a6ab8; background: #eaf2fb; }
.knowledge-chat-drop.is-dragging { transform: scale(1.01); }
.knowledge-chat-drop.is-targeted { animation: knowledge-upload-target 1.25s ease-out; }
@keyframes knowledge-upload-target {
  0%, 100% { border-color: #9aa8b9; box-shadow: 0 0 0 0 rgba(20,87,238,0); }
  35% { border-color: #1457ee; box-shadow: 0 0 0 5px rgba(20,87,238,.13); }
}
.knowledge-chat-drop:focus-visible { outline: 3px solid rgba(20,87,238,.25); outline-offset: 2px; }
.knowledge-chat-drop svg { width: 50px; height: 50px; fill: none; stroke: #6c7c91; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.knowledge-chat-drop > span { color: #8a96a6; font-size: 12px; }
.knowledge-chat-drop small { max-width: 300px; color: #78869b; font-size: 11px; line-height: 1.35; }
.knowledge-chat-drop .btn { width: auto; margin: 1px 0; }
.knowledge-draft-list { display: grid; gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; }
.knowledge-draft-row {
  min-width: 0; padding: 8px 8px 8px 10px; border: 1px solid #d8e0ec; border-radius: 8px;
  background: #fff; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 8px; align-items: center;
}
.knowledge-draft-row.has-error { border-color: #e2a4a1; background: #fff8f8; }
.knowledge-draft-row[data-state="existing"] { border-color: #a9c8b2; background: #f2faf4; }
.knowledge-draft-row[data-state="existing"] :where(.knowledge-draft-icon, .knowledge-draft-status) { color: #2f6b45; }
.knowledge-draft-icon { color: #66758d; font-size: 17px; }
.knowledge-draft-copy { min-width: 0; display: flex; flex-direction: column; }
.knowledge-draft-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #263652; font-size: 12px; }
.knowledge-draft-status { color: #78869b; font-size: 11px; }
.has-error .knowledge-draft-status { color: #9b302d; }
.knowledge-draft-remove {
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: #78869b; cursor: pointer; font-size: 20px; line-height: 1;
}
.knowledge-draft-remove:hover { background: #fde9e8; color: #8b2924; }
.knowledge-draft-retry { width: max-content; margin-top: 2px; padding: 0; border: 0; background: transparent; color: #1a6ab8; text-decoration: underline; cursor: pointer; font-size: 11px; }
.knowledge-process-bar {
  position: sticky; bottom: 0; z-index: 2; margin: 12px -16px -16px; padding: 11px 16px 14px;
  border-top: 1px solid #d8e0ec; background: rgba(248,250,252,.97);
  display: grid; gap: 7px;
}
.knowledge-process-bar > span { color: #66758d; font-size: 11px; font-weight: 650; text-align: center; }
.knowledge-review-button { width: 100%; transition: box-shadow .2s ease, outline-color .2s ease; }
.knowledge-review-button.has-files:not(:disabled) { box-shadow: 0 0 0 2px rgba(26,106,184,.2); }
.knowledge-review-button:disabled { cursor: default; opacity: .55; }
@keyframes knowledge-review-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(26,106,184,.22), 0 0 0 0 rgba(26,106,184,.28); }
  50% { box-shadow: 0 0 0 2px rgba(26,106,184,.5), 0 0 0 8px rgba(26,106,184,0); }
}
.knowledge-review-attention:not(:disabled) { animation: knowledge-review-pulse .85s ease-in-out 3; }
.knowledge-chat-documents { display: grid; gap: 8px; }
.knowledge-chat-document {
  min-width: 0; padding: 10px; border: 1px solid #d8e0ec; border-radius: 9px;
  background: #fff; color: #263652; text-decoration: none; display: flex; flex-direction: column; gap: 3px;
}
.knowledge-chat-document:hover { border-color: #1a6ab8; box-shadow: 0 4px 12px rgba(7,20,61,.07); }
.knowledge-chat-document-title { color: #1a3a5c; font-weight: 750; overflow-wrap: anywhere; }
.knowledge-chat-document-file { color: #78869b; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-chat-document-meta { display: flex; align-items: center; gap: 8px; color: #66758d; font-size: 10px; text-transform: capitalize; }
.knowledge-chat-document-summary { color: #53627a; font-size: 11px; line-height: 1.4; }
.knowledge-chat-empty { padding: 22px 12px; border: 1px dashed #bdc8d8; border-radius: 9px; color: #66758d; text-align: center; }
.knowledge-chat-library-link { display: block; margin-top: 11px; color: #1a6ab8; text-decoration: none; font-weight: 700; font-size: 12px; }
.knowledge-mobile-scrim { display: none; }
.knowledge-process-dialog {
  width: min(760px, calc(100vw - 28px));
  max-height: min(88vh, 900px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: #f8fafc;
  color: #263652;
  box-shadow: 0 24px 70px rgba(7,20,61,.35);
  overflow: auto;
}
.knowledge-process-dialog::backdrop { background: rgba(13,43,71,.56); backdrop-filter: blur(1px); }
.knowledge-dialog-head { padding: 18px 20px 15px; border-bottom: 1px solid #d8e0ec; background: #fff; display: flex; justify-content: space-between; align-items: start; }
.knowledge-dialog-head p { margin: 3px 0 0; color: #66758d; }
.knowledge-process-dialog .flash { margin: 14px 18px 0; }
.knowledge-dialog-section { margin: 14px 18px; padding: 16px; border: 1px solid #d8e0ec; border-radius: 10px; background: #fff; }
.knowledge-dialog-section h3 { margin: 0 0 4px; color: #1a3a5c; font-size: 1rem; }
.knowledge-dialog-section h3 > span { color: #78869b; font-size: 11px; font-weight: 500; }
.knowledge-dialog-section > p { margin: 0 0 12px; color: #66758d; font-size: 12px; }
.knowledge-dialog-radios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.knowledge-dialog-radios label {
  margin: 0; padding: 11px; border: 1px solid #d8e0ec; border-radius: 8px;
  display: flex; align-items: start; gap: 8px; cursor: pointer;
}
.knowledge-dialog-radios label:has(input:checked) { border-color: #1a6ab8; background: #eef6ff; }
.knowledge-dialog-radios input, .knowledge-dialog-check input { width: auto; flex: 0 0 auto; margin: 3px 0 0; }
.knowledge-dialog-radios span { display: flex; flex-direction: column; }
.knowledge-dialog-radios small { color: #66758d; font-size: 10px; line-height: 1.3; }
.knowledge-dialog-select { margin-top: 11px; color: #53627a; font-size: 12px; }
.knowledge-dialog-select select { margin-top: 4px; width: 100%; padding: 7px; border: 1px solid #b9c4d6; border-radius: 7px; background: #fff; }
.knowledge-dialog-subjects { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.knowledge-dialog-check { margin: 9px 0; display: flex; align-items: start; gap: 8px; color: #45546a; font-weight: 650; }
.knowledge-dialog-disclosure { background: #f3f7fc; }
.knowledge-dialog-disclosure > small { color: #78869b; }
.knowledge-dialog-actions {
  position: sticky; bottom: 0; padding: 13px 18px; border-top: 1px solid #d8e0ec;
  background: rgba(255,255,255,.97); display: flex; justify-content: flex-end; gap: 8px;
}
#knowledge-dialog-submit { min-width: 8.75rem; white-space: nowrap; }
@media (max-width: 900px) {
  .chat-workspace { width: calc(100vw - 1rem); }
  .knowledge-chat-drawer {
    position: fixed; right: 0; left: auto; top: 48px; bottom: 0; height: auto; z-index: 351;
    transform: translateX(100%); width: min(400px, 92vw); max-width: 92vw;
    opacity: 1; transition: transform .2s ease, visibility 0s linear .2s; box-shadow: -8px 0 26px rgba(7,20,61,.24);
    border-radius: 10px 0 0 10px; border-left: 1px solid #d8e0ec; border-right: 0;
  }
  .knowledge-chat-drawer.open { width: min(400px, 92vw); transform: translateX(0); transition-delay: 0s; }
  .knowledge-chat-head-actions .ai-upload-knowledge { background: #fff; box-shadow: 0 2px 9px rgba(7,20,61,.18); }
  .knowledge-chat-head, .knowledge-chat-scroll { min-width: 0; }
  .knowledge-mobile-scrim:not([hidden]) { position: fixed; inset: 48px 0 0; z-index: 350; display: block; border: 0; background: rgba(13,43,71,.38); }
  .knowledge-dialog-radios, .knowledge-dialog-subjects { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .chat-workspace .ai-fullpage { padding-right: 0; }
  .knowledge-dialog-section { margin-inline: 10px; padding: 13px; }
  .knowledge-dialog-head, .knowledge-dialog-actions { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .knowledge-chat-drawer, .knowledge-chat-drop { transition: none; }
  .knowledge-review-attention:not(:disabled), .knowledge-chat-drop.is-targeted { animation: none; }
}
.knowledge-shell { max-width: 1180px; margin: 0 auto; }
.knowledge-upload-shell { max-width: 920px; }
.knowledge-heading, .knowledge-detail-heading {
  display: flex; align-items: start; justify-content: space-between; gap: 24px;
  margin-bottom: 22px;
}
.knowledge-heading h1, .knowledge-detail-heading h1 { margin: 4px 0 6px; color: var(--brand-navy); }
.knowledge-sub, .knowledge-filename, .knowledge-help { color: #66758d; }
.knowledge-back { display: inline-block; margin-bottom: 8px; color: var(--brand-blue); text-decoration: none; }
.knowledge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 16px; }
.knowledge-card {
  display: block; padding: 18px; border: 1px solid #d8e0ec; border-radius: 12px;
  background: #fff; color: #263652; text-decoration: none; box-shadow: 0 3px 14px rgba(7,20,61,.04);
}
.knowledge-card:hover { border-color: var(--brand-blue); box-shadow: 0 8px 24px rgba(7,20,61,.09); }
.knowledge-card h2 { margin: 14px 0 4px; color: var(--brand-navy); font-size: 1.08rem; }
.knowledge-card p { line-height: 1.45; }
.knowledge-card-top, .knowledge-card-meta, .knowledge-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.knowledge-card-meta { justify-content: space-between; margin-top: 16px; color: #78869b; font-size: 12px; }
.knowledge-status, .knowledge-audience {
  display: inline-block; padding: 3px 8px; border-radius: 999px; background: #edf2f8;
  color: #53627a; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.knowledge-status.status-ready { background: #e3f7ed; color: #17633f; }
.knowledge-status.status-failed { background: #fde9e8; color: #8b2924; }
.knowledge-status.status-processing_ocr, .knowledge-status.status-processing_index, .knowledge-status.status-reconciling_index,
.knowledge-status.status-staging, .knowledge-status.status-queued_ocr, .knowledge-status.status-queued_index { background: #fff3d9; color: #765410; }
.knowledge-callout { margin: 16px 0; padding: 13px 15px; border-radius: 8px; background: #eef5ff; }
.knowledge-callout.warning { border: 1px solid #e8cd87; background: #fff8e8; color: #654c16; }
.knowledge-empty { padding: 40px; border: 1px dashed #bdc8d8; border-radius: 12px; text-align: center; color: #66758d; }
.knowledge-form { display: grid; gap: 18px; }
.knowledge-form-section, .knowledge-summary, .knowledge-section {
  padding: 20px; border: 1px solid #d8e0ec; border-radius: 12px; background: #fff;
}
.knowledge-form-section h2, .knowledge-summary h2, .knowledge-section > h2 { margin: 0 0 12px; color: var(--brand-navy); font-size: 1.1rem; }
.knowledge-form-section.compact { padding: 17px; }
.knowledge-drop {
  display: grid; gap: 8px; padding: 22px; border: 2px dashed #9fb0c8; border-radius: 10px;
  background: #f8faff; font-weight: 700;
}
.knowledge-drop input { width: 100%; }
.knowledge-drop small, .knowledge-disclosure small { color: #66758d; font-weight: 400; }
.knowledge-radio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.knowledge-radio-grid label { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; padding: 13px; border: 1px solid #d8e0ec; border-radius: 8px; }
.knowledge-radio-grid label span { grid-column: 2; color: #66758d; font-size: 12px; line-height: 1.35; }
.knowledge-multi { display: grid; gap: 6px; margin-top: 13px; font-weight: 650; }
.knowledge-multi select, .knowledge-form-section > label > select { width: 100%; padding: 8px; border: 1px solid #b9c4d6; border-radius: 7px; background: #fff; }
.knowledge-subject-grid, .knowledge-admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.knowledge-check { display: flex; align-items: start; gap: 8px; margin: 12px 0; font-weight: 650; }
.knowledge-optional, .knowledge-count { color: #78869b; font-size: 12px; font-weight: 500; }
.knowledge-disclosure { background: #f8faff; }
.knowledge-form-actions { display: flex; justify-content: flex-end; gap: 10px; }
.knowledge-detail-heading { margin-top: 4px; }
.knowledge-actions form { margin: 0; }
.knowledge-summary { margin-bottom: 16px; }
.knowledge-summary > p { font-size: 1.02rem; line-height: 1.55; }
.knowledge-summary dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 18px 0 0; }
.knowledge-summary dl div { padding-top: 9px; border-top: 1px solid #e2e7ef; }
.knowledge-summary dt { color: #78869b; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.knowledge-summary dd { margin: 4px 0 0; font-size: 13px; }
.knowledge-admin-grid { margin-bottom: 16px; }
.knowledge-section { margin-top: 16px; }
.knowledge-facts { display: grid; gap: 8px; }
.knowledge-fact { display: block; padding: 11px 13px; border-left: 3px solid var(--brand-blue); background: #f7f9fc; color: #263652; text-decoration: none; }
.knowledge-fact.status-superseded, .knowledge-fact.status-withdrawn { opacity: .58; border-left-color: #8994a6; }
.knowledge-fact > span { color: #78869b; font-size: 11px; text-transform: uppercase; }
.knowledge-fact > strong { display: block; margin-top: 4px; }
.knowledge-fact > p { margin: 5px 0 0; }
.knowledge-page { margin-top: 16px; padding-top: 16px; border-top: 1px solid #dfe5ee; scroll-margin-top: 24px; }
.knowledge-page header { display: flex; align-items: center; justify-content: space-between; }
.knowledge-page header h3 { margin: 0; color: var(--brand-navy); }
.knowledge-page img { display: block; max-width: min(100%, 780px); max-height: 680px; margin: 14px auto; border: 1px solid #d8e0ec; }
.knowledge-page pre { max-height: 560px; overflow: auto; padding: 15px; border-radius: 8px; background: #f6f8fb; white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.knowledge-visual { margin: 12px 0; padding: 12px; border-left: 3px solid #7f55d9; background: #f6f1ff; line-height: 1.5; }
.knowledge-conflict { margin-top: 12px; padding: 15px; border: 1px solid #e4bd5f; border-radius: 9px; background: #fff9eb; }
.knowledge-conflict.resolved { border-color: #cbd4e1; background: #f7f9fc; opacity: .72; }
.knowledge-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.knowledge-compare > div { padding: 11px; border: 1px solid #e1d3ad; border-radius: 7px; background: #fff; }
.knowledge-compare span, .knowledge-compare strong { display: block; }
.knowledge-compare span { margin-bottom: 6px; color: #706143; font-size: 12px; }
.knowledge-conflict-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.knowledge-shell .btn-danger { background:#a53b35; border-color:#a53b35; color:#fff; }
@media (max-width: 800px) {
  .knowledge-heading, .knowledge-detail-heading { flex-direction: column; }
  .knowledge-radio-grid, .knowledge-subject-grid, .knowledge-admin-grid, .knowledge-compare { grid-template-columns: 1fr; }
  .knowledge-summary dl { grid-template-columns: 1fr 1fr; }
}
/* ui-literal-allowlist:end knowledge-library-internals */

/* 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); }

.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; }

@media (max-width: 700px) {
  .warehouse-bins-heading { align-items:flex-start; flex-direction:column; }
  .warehouse-bins-toolbar form { align-items:stretch; flex-direction:column; }
  .warehouse-bins-toolbar .btn { width:100%; }
  .warehouse-bins { height:min(52vh, 360px); min-height:260px; }
}

/* ===== Inventory Setup (fan-out) ===== */
.scaffold-card-dialog[data-card-resource="items"] [data-item-kit-section] {
  display: none;
}
.scaffold-card-dialog[data-card-resource="items"][data-item-type="KIT"] [data-item-kit-section],
.scaffold-card-dialog[data-card-resource="items"]:has(select[name="item_type"] option[value="KIT"]:checked) [data-item-kit-section] {
  display: block;
}
.scaffold-card-dialog[data-card-resource="items"]:has(select[name="item_type"] option[value="STOCK"]:checked) [data-item-kit-section] {
  display: none;
}

/* ===== 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-source-link,
.inventory-report-page .scaffold-row-link {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: .3rem;
  margin-block: -.45rem;
  padding-block: .45rem;
}
.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-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 0 .7rem .7rem;
  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(3, minmax(0, 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 > 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 {
    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) {
  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;
}
.document-attachment-empty {
  margin: .5rem 0 1rem;
}
.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 :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; }
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;
}

/* Knowledge multi-select wrappers are label/control pairs, not the site-wide two-pair row. */
body.ui-density .field-grid:is(
  .knowledge-subject-grid,
  .knowledge-dialog-subjects,
  .knowledge-multi,
  .knowledge-dialog-select,
  .knowledge-audience-grid
) {
  grid-template-columns: var(--field-label-width) minmax(0, 1fr);
}

/* Match Knowledge surfaces to the compact card/modal rhythm used by dense forms. */
body.ui-density :where(.knowledge-heading, .knowledge-detail-heading) {
  gap: .65rem;
  margin-bottom: .55rem;
}
body.ui-density .knowledge-grid { gap: .55rem; }
body.ui-density .knowledge-card { padding: .7rem .8rem; border-radius: 5px; }
body.ui-density .knowledge-card h2 { margin-top: .55rem; }
body.ui-density .knowledge-card-meta { margin-top: .55rem; }
body.ui-density .knowledge-callout { margin: .55rem 0; padding: .55rem .65rem; }
body.ui-density .knowledge-form { gap: .55rem; }
body.ui-density :where(.knowledge-form-section, .knowledge-summary, .knowledge-section) {
  padding: .65rem .75rem;
  border-radius: 5px;
}
body.ui-density .knowledge-form-section.compact { padding: .65rem .75rem; }
body.ui-density :where(
  .knowledge-form-section h2,
  .knowledge-summary h2,
  .knowledge-section > h2
) { margin-bottom: .45rem; }
body.ui-density .knowledge-drop { gap: .4rem; padding: .65rem .75rem; border-radius: 5px; }
body.ui-density .knowledge-empty { padding: .85rem 1rem; border-radius: 5px; }
body.ui-density .knowledge-radio-grid { gap: .35rem; }
body.ui-density .knowledge-radio-grid label { padding: .55rem .65rem; }
body.ui-density .knowledge-summary { margin-bottom: .55rem; }
body.ui-density .knowledge-summary dl { gap: .55rem; margin-top: .55rem; }
body.ui-density .knowledge-admin-grid { gap: .55rem; margin-bottom: .55rem; }
body.ui-density .knowledge-section { margin-top: .55rem; }
body.ui-density :where(.knowledge-chat-upload, .knowledge-chat-library) { padding: .65rem .75rem; }
body.ui-density .knowledge-chat-section-head { margin-bottom: .45rem; }
body.ui-density .knowledge-chat-drop {
  min-height: 0;
  gap: .35rem;
  padding: .65rem .75rem;
  border-radius: 5px;
}
body.ui-density .knowledge-draft-list { gap: .35rem; margin-top: .55rem; }
body.ui-density .knowledge-process-bar {
  margin: .55rem -.75rem -.65rem;
  padding: .55rem .75rem .65rem;
  gap: .35rem;
}
body.ui-density .knowledge-chat-empty { padding: .85rem .75rem; border-radius: 5px; }
body.ui-density .knowledge-dialog-head { padding: .5rem .7rem; }
body.ui-density .knowledge-process-dialog .flash { margin: .55rem .7rem 0; }
body.ui-density .knowledge-dialog-section {
  margin: .55rem .7rem;
  padding: .65rem .75rem;
  border-radius: 5px;
}
body.ui-density .knowledge-dialog-section > p { margin-bottom: .45rem; }
body.ui-density .knowledge-dialog-actions { padding: .45rem .7rem; gap: .35rem; }

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;
}

body.ui-density .client-reference-legacy .scaffold-field-grid {
  grid-template-columns:minmax(0, 1fr);
  align-items:start;
  gap:.4rem;
}

body.ui-density .client-reference-legacy .scaffold-field-grid > .field-grid-item {
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:.08rem;
}

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;
}

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 {
  width: var(--control-height);
  height: var(--control-height);
}

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-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) {
  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) {
  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,
  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-head p 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-upload-knowledge,
  body.ui-density .dashboard-month-controls a,
  body.ui-density .knowledge-chat-close,
  body.ui-density .knowledge-draft-remove,
  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-upload-knowledge {
    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 {
  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]) { 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=declared_unit]) { width: 7rem; min-width: 7rem; }
body.ui-density .line-entry-grid-table td:has(> input[type=number]) { width: 6rem; min-width: 6rem; }
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; }
.line-grid-row-action { 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-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-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-triangle { font-size: .68rem; color: var(--brand-navy); transition: transform .12s ease; }
.permission-group[open] .permission-group-triangle { transform: rotate(90deg); }
.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-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; }
.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; }
.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) {
  .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); }
}